1204124 - Image tooltip loads in 3 steps causing blinking

Status: RESOLVED WORKSFORME

(DevTools :: General, defect)

Description

[arni2033]

Attachment: screenshot - loading steps.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

To reproduce this you may need to move mouse around to trigger mouseover/mouseout events many times 

Result:       For about 0.05 second tooltip displays "Could not load the image",
              and that causes blinking sometimes.
Actually, you can see the all steps on screenshot (I can also send a screencast):
1) Appears a small tooltip with image dimentions.
2) Tooltip moves to the top left corner of expected tooltip.
3) The expected tooltip appears, it displays image and dimentions.

Expectations: Tooltip shouldn't blink. Maybe it should have "display:none;" / "opacity:0;" 
              until it's fully loaded

Comment 1

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

I can't reproduce this on my machine

Honza