Open Bug 932220 Opened 8 years ago Updated 4 years ago

Image tooltip does not work for data-uri SVG

Categories

(DevTools :: Inspector: Rules, defect, P3)

defect

Tracking

(Not tracked)

People

(Reporter: rik, Unassigned)

References

Details

Attachments

(2 files)

Attached file Testcase
It reports a 0x0 image.

This might also be the case for regular SVG images, I haven't tested.
Attachment #823913 - Attachment mime type: text/plain → text/html
This also fails in the markup-view with a <img> tag having its src attribute set to

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Ij4NCjxwYXRoIGZpbGw9IiMwRDgxMzYiIGQ9Ik01LDBDMi4yMzksMCwwLDIuMjQsMCw1YzAsMi43NjIsMi4yMzksNSw1LDVjMi43NjIsMCw1LTIuMjM4LDUtNUMxMCwyLjI0LDcuNzYyLDAsNSwwIE00LjUzNSw3LjgyNA0KCUwyLjEzOSw1LjQyNUwzLjY1LDMuOTE0bDAuODg1LDAuODg1bDIuMDQ0LTIuMDQ1bDEuNTEsMS41MTNMNC41MzUsNy44MjR6Ii8+DQo8L3N2Zz4NCg==
Note that this only fails if the SVG used to generate the data-uri didn't have dimensions:

- This works: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="300">...</svg> (both in the rule-view and markup-view preview tooltips)
- This fails: <svg xmlns="http://www.w3.org/2000/svg" version="1.1">...</svg>
Assignee: nobody → pbrosset
The inspector actor responsible for getting the image data displayed in the tooltip works with canvas and img tags and does this:

    let imgWidth = isImg ? this.rawNode.naturalWidth : this.rawNode.width;
    let imgHeight = isImg ? this.rawNode.naturalHeight : this.rawNode.height;

if it's an image, get its naturalWidth/Height, if it's a canvas, get it's width/height.
However, in the case of a svg data-uri that has no width and height, then naturalWidth/Height are 0, therefore the 0x0 tooltip.
Also, in order to retrieve the image data, the inspector actor dumps the image content in a canvas so, with svg that have no width/height, trying to do

 context.drawImage(imgElement, 0, 0, width, height);

causes the following exception:

 "Component is not available"  nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)

It's always been in a try/catch, so there's no problem, but this causes the image tooltip to be empty.
Test case missing, I will address this probably tomorrow.
But this patch should work. At least for the markup view. I'll do more testing with the CSS rule and computed views tomorrow.
As I suspected this doesn't work for the CSS views, which is normal given the fact that we take the uri as is and use it in a XUL <image> tag in the tooltip.
It makes little sense to fix this part however before bug 932896 is fixed, since the uri retrieval is going to change to be done remotely, and this way, we'll be able to get the image-data as for the markup-view.
Depends on: 932896
I'm now working on bug 932896, and I'm going to fix some of the problems related to SVG there.
So the patch attached in comment 5 becomes obsolete.
We still have one problem though, and I don't know yet how to solve it: some SVG images (the one in attachment 823913 [details] for instance) do not define a |width| and |height| attributes, and that leads to a 0x0 preview tooltip.
Normal SVGs are affected too. Test this url:
> data:text/html,<img src="http://www.iana.org/_img/2015.1/iana-logo-homepage.svg"><style>body{background:url("http://www.iana.org/_img/2015.1/iana-logo-homepage.svg");}
Also, tooltip for <img> in inspector also fails on that page. Should it be reported separately?
Component: Developer Tools: Inspector → Developer Tools: CSS Rules Inspector
Priority: -- → P3
Unassigned myself as I'm not working on this.
Assignee: pbrosset → nobody
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.