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

Status: RESOLVED FIXED

(DevTools :: Netmonitor, defect, P3)

Description

[Rajat jain]

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.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

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

Comment 2

[Hubert Boma Manilla (:bomsy)]

Attachment: Screenshot 2020-07-21 at 15.52.45.png

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

Comment 3

[Rajat jain]

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

If not, then any of its sub sites.
Thanks

Comment 4

[:Harald Kirschner :digitarald]

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.

Comment 5

[Hubert Boma Manilla (:bomsy)]

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"))
+  );
 }

Comment 6

[Rajat jain]

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

Comment 7

[Hubert Boma Manilla (:bomsy)]

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

Comment 8

[Rajat jain]

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

Comment 9

[Rajat jain]

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.

Comment 10

[BugBot [:suhaib / :marco/ :calixte]]

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

Comment 11

[colin.cazabet]

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

Comment 12

[Hubert Boma Manilla (:bomsy)]

Sure done! Thanks for working on this!

Comment 13

[colin.cazabet]

Attachment: Bug 1654257 - change isImage filter to detect images with wrong MIME. r=bomsy

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/329f9ecbad12
change isImage filter to detect images with wrong MIME. r=bomsy

Comment 15

[Marian-Vasile Laza]

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

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9b8d6651d550
change isImage filter to detect images with wrong MIME. r=bomsy

Comment 17

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/9b8d6651d550