Closed Bug 1654257 Opened 2 years ago Closed 4 months ago

Images with incorrect mime-type won't appear when Network is filtered with "Images"

Categories

(DevTools :: Netmonitor, defect, P3)

78 Branch
defect

Tracking

(firefox94 fixed)

RESOLVED FIXED
94 Branch
Tracking Status
firefox94 --- fixed

People

(Reporter: rajatjain.ix, Assigned: colin.cazabet)

Details

(Keywords: good-first-bug)

Attachments

(2 files)

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0

Steps to reproduce:

I have a website that lazy loads webP images.

Actual results:

When I goto Inspect Element -> Network Tab -> Apply Images filter.
No webP image shows up but on applying "All" filter they show up.

Expected results:

Expected: On applying "Images" filter in Network Tab of Inspect Element,
webP images should also appear.

Flags: needinfo?(ehumphries)

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Component: Untriaged → Netmonitor
Product: Firefox → DevTools

Thanks for reporting Rajat!
Do you have a good website we can test on?

I can't seem to reproduce.

See the screenshot for what is see

Thanks

Flags: needinfo?(rajatjain.ix)

Yes, Please visit:
http://dev.wakefit.co

If not, then any of its sub sites.
Thanks

Flags: needinfo?(rajatjain.ix)

Looks like the images are served with binary/octet-stream (misconfigured S3?) and don't hit the image/ mime-type detection. In this case the browser does seem to ignore the mime-type but depend on mine sniffing.

Interestingly, some fonts are also loaded as octet-stream but work as the extension is right (src).

Would it be useful to extend the filter with also testing cause (as in mimetype ~= image-ish OR cause ~= image-ish); so anything loaded via font or img/imageset is also included in the right category? I don't see any major downsides, but maybe I am missing something.

Flags: needinfo?(hmanilla)

Harald ,
i agree!
We could extend to maybe something like

--- a/devtools/client/netmonitor/src/utils/filter-predicates.js
+++ b/devtools/client/netmonitor/src/utils/filter-predicates.js
@@ -53,8 +53,12 @@ function isFont({ url, mimeType }) {
   );
 }
 
-function isImage({ mimeType }) {
-  return mimeType && mimeType.includes("image/");
+function isImage({ cause, mimeType }) {
+  return (
+    (mimeType &&
+    mimeType.includes("image/")) ||
+    (cause.type.includes("img") || cause.type.includes("image"))
+  );
 }
Severity: -- → S3
Flags: needinfo?(hmanilla)
Keywords: good-first-bug
Priority: -- → P3

If this is the only change needed, maybe I can do and raise a PR?

Sure go for it.
Let me know if you need any help.

Assignee: nobody → rajatjain.ix
Summary: webp images won't appear when Network Tab in Inspect Element is filtered with "Images" → Images with incorrect mime-type won't appear when Network is filtered with "Images"

Thank you very much.
I would need a couple of days to understand architecture of NetMonitor before I make a commit. :)

I think I will pass this.
This requires heavy knowledge of React/Redux as well as NodeJS.
I thought it is built in some other engine.

This good-first-bug hasn't had any activity for 6 months, it is automatically unassigned.
For more information, please visit auto_nag documentation.

Assignee: rajatjain.ix → nobody
Status: UNCONFIRMED → NEW
Ever confirmed: true

Hello, could you please assign this bug to me, i'm going to try to fix it.
Thank you,
Colin

Sure done! Thanks for working on this!

Assignee: nobody → colin.cazabet
Pushed by hmanilla@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/329f9ecbad12
change isImage filter to detect images with wrong MIME. r=bomsy

Backed out changeset 329f9ecbad12 (Bug 1654257) for causing mochitest failures on browser_net_brotli.js.
Backout link
Push with failures - dt4
Failure Log

Flags: needinfo?(colin.cazabet)
Pushed by hmanilla@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/9b8d6651d550
change isImage filter to detect images with wrong MIME. r=bomsy
Status: NEW → RESOLVED
Closed: 4 months ago
Resolution: --- → FIXED
Target Milestone: --- → 94 Branch
Flags: needinfo?(colin.cazabet)
You need to log in before you can comment on or make changes to this bug.