932220 - Image tooltip does not work for data-uri SVG

Status: NEW

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

Description

[Anthony Ricaud (:rik)]

Attachment: Testcase

It reports a 0x0 image.

This might also be the case for regular SVG images, I haven't tested.

Comment 1

[Patrick Brosset <:pbro>]

This also fails in the markup-view with a <img> tag having its src attribute set to

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Ij4NCjxwYXRoIGZpbGw9IiMwRDgxMzYiIGQ9Ik01LDBDMi4yMzksMCwwLDIuMjQsMCw1YzAsMi43NjIsMi4yMzksNSw1LDVjMi43NjIsMCw1LTIuMjM4LDUtNUMxMCwyLjI0LDcuNzYyLDAsNSwwIE00LjUzNSw3LjgyNA0KCUwyLjEzOSw1LjQyNUwzLjY1LDMuOTE0bDAuODg1LDAuODg1bDIuMDQ0LTIuMDQ1bDEuNTEsMS41MTNMNC41MzUsNy44MjR6Ii8+DQo8L3N2Zz4NCg==

Comment 2

[Patrick Brosset <:pbro>]

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>

Comment 3

[Patrick Brosset <:pbro>]

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.

Comment 4

[Patrick Brosset <:pbro>]

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.

Comment 5

[Patrick Brosset <:pbro>]

Attachment: bug932220-image-tooltip-svg-data-uri v1.patch

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.

Comment 6

[Patrick Brosset <:pbro>]

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.

Comment 7

[Patrick Brosset <:pbro>]

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.

Comment 8

[arni2033]

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?

Comment 9

[Patrick Brosset <:pbro>]

Unassigned myself as I'm not working on this.