1204125 - Tooltips in Inspector ruleview and Netmonitor display "Could not load the image" until the loading of tooltip is ended (~0.1s)

Status: NEW

(DevTools :: General, defect, P3)

Description

[arni2033]

Attachment: screenshot - couldn't load.png

STR:   (Win7_64, Nightly 43, 32bit, ID 20150909030223, new profile, safe mode)
(A)
1. Open this "data:" url or click URL in the form above
>   data:text/html,<div><style>div{outline:3px dashed red;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABiCAQAAAA7fHH2AAAAQUlEQVQYV22KQQoAIAzDyv7/Et/oVlGZVCfkkIYamsENXESyi8vc0u/PKZ6o8+7fZ0h8ShRYnD+BFKToRJkHFpkM2hZSxuyWpEYAAAAASUVORK5CYII=");width: 368.4px;height: 98px;}
2. Open devtools, inspect <div> element, open ruleview
3. Hover mouse over url in background value
(B)
1. Copy the following image link (or any image link in the internet)
https://www.chromium.org/_/rsrc/1438879449147/config/customLogo.gif
2. Open new tab, open Netmonitor (Ctrl+Shift+Q)
3. Paste the link from Step 1 into urlbar, press Enter
4. Hover mouse over image icon in the only entry in Netmonitor

Result:       For about 0.1 second tooltip displays "Could not load the image"
              instead of image dimentions, and that causes blinking sometimes.

I noticed that tooltips in ruleview display "Couldn't load" instead of image size only if url is base64; tooltips in Netmonitor display "Couldn't load" in 100% of cases (all images there are normal images). While inspector displays image dimentions for both normal and "data:..." images.

Expectations: Tooltip shouldn't display "Couldn't load" until it gets exact image data OR
              ensures that image couldn't be loaded.

Comment 1

[arni2033]

Attachment: div background = data image.html

Also, you can use this page for testing. Inspect <div> and hover mouse over background url in ruleview - it takes long time to load that image, and I see "Couldn't load" for ~3 seconds

Comment 2

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: image.png

Looks like still partially valid

1. Load data:text/html,<div><style>div{outline:3px dashed red;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABiCAQAAAA7fHH2AAAAQUlEQVQYV22KQQoAIAzDyv7/Et/oVlGZVCfkkIYamsENXESyi8vc0u/PKZ6o8+7fZ0h8ShRYnD+BFKToRJkHFpkM2hZSxuyWpEYAAAAASUVORK5CYII=");width: 368.4px;height: 98px;}

2. Open devtools, inspect <div> element, open ruleview

3. Hover mouse over url in background value

ER: the image preview tooltip should show the image
AR: the image preview tooltip is empty

Honza