1447532 - Highlight max-width/height clamps in the flex item highlighter

Status: RESOLVED DUPLICATE of bug 1477614

(DevTools :: Inspector, defect, P3)

Description

[Zhenghong Qian]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36

Comment 1

[Zhenghong Qian]

Attachment: 1447532.patch

Comment 2

[Zhenghong Qian]

Attachment: 1447532.patch

Comment 3

[Zhenghong Qian]

I am working on adding SVG image when min/max value conflicts the flex-basis value.
But I get some trouble now. Here is the code:
In the "renderFlexItemBasisAndMinMax" function, I have code for render the image:
      let baseImage = new this.win.Image(24, 28);
      let me = this;
      baseImage.onload = function () {
        me.ctx.drawImage(baseImage, x, y, 24, 28);
      };
      baseImage.src = URL;

When this URL is a web link (e.g. https://s.cdpn.io/3/kiwi.svg), the icon shows correctly; but if I sign it to a path (e.g. chrome://devtools/skin/images/kiwi.svg), onload function never called, so seems like the image never loaded properly.
I added JAR_MANIFESTS += ['jar.mn'] in highlighter/moz.build, and I added a new jar.mn file in inside highlighter folder as well.
This is the code in jar.mn:
devtools.jar:
%   skin devtools classic/1.0 %skin/
	skin/images/kiwi.svg (./kiwi.svg)

and after I build, I input "chrome://devtools/skin/images/kiwi.svg" in the browser, and it gave me the correct image, but still, onload function never called, so no icon shows.

Does everyone have ideas about this problem? I am stuck on this one for 50 hours... so really appreciate if someone can help me figure it out...

Comment 4

[Patrick Brosset <:pbro>]

This sounds odd, trying the following code in scratchpad in Browser environment works fine for me:

var URL = "chrome://devtools/skin/images/help.svg";
var img = new Image(24, 28);
img.onload = e => console.log(e);
img.src = URL;

The onload callback is executed.

Do you see any errors in the browser console in your case? Maybe the request is blocked because this happens in the content process and chrome URLs can't be loaded from there. I'm not sure, just a guess.

Another option: depending on how complex the icon is, you could draw it with canvas instead. If I understand correctly, the icon is just one color, flat design, so it should be fairly easy.
Let me give it a quick shot here (quick and dirty, needs to be cleaned up): http://jsbin.com/jobibimihe/edit?html,js,output

Comment 5

[Zhenghong Qian]

(In reply to Patrick Brosset <:pbro> from comment #4)
> This sounds odd, trying the following code in scratchpad in Browser
> environment works fine for me:
> 
> var URL = "chrome://devtools/skin/images/help.svg";
> var img = new Image(24, 28);
> img.onload = e => console.log(e);
> img.src = URL;
> 
> The onload callback is executed.
> 
> Do you see any errors in the browser console in your case? Maybe the request
> is blocked because this happens in the content process and chrome URLs can't
> be loaded from there. I'm not sure, just a guess.
> 
> Another option: depending on how complex the icon is, you could draw it with
> canvas instead. If I understand correctly, the icon is just one color, flat
> design, so it should be fairly easy.
> Let me give it a quick shot here (quick and dirty, needs to be cleaned up):
> http://jsbin.com/jobibimihe/edit?html,js,output

ha! I found the error on browser console "Security Error: Content at https://codepen.io/osublake/full/dMLQJr?utm_source=frontendfocus&utm_medium=email may not load or link to chrome://devtools/skin/images/kiwi.svg."
So how can I fix the path?

Comment 6

[Patrick Brosset <:pbro>]

(In reply to Zhenghong Qian from comment #5)
> ha! I found the error on browser console "Security Error: Content at
> https://codepen.io/osublake/full/
> dMLQJr?utm_source=frontendfocus&utm_medium=email may not load or link to
> chrome://devtools/skin/images/kiwi.svg."
> So how can I fix the path?
You can't. As I suspected, this is a security measure that prevents the content process from loading chrome URLs.
So, I advise going with the second option I proposed in comment 4, i.e. drawing the icon using canvas shapes directly.

Comment 7

[Zhenghong Qian]

Attachment: 1447532.patch