Closed Bug 1447532 Opened 3 years ago Closed 2 years ago

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

Categories

(DevTools :: Inspector, defect, P3)

defect

Tracking

(Not tracked)

RESOLVED DUPLICATE of bug 1477614

People

(Reporter: zhenghong.qian, Assigned: gl)

References

(Blocks 1 open bug)

Details

Attachments

(1 file, 2 obsolete files)

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
Component: Untriaged → Developer Tools: Inspector
Attached patch 1447532.patch (obsolete) — Splinter Review
Attachment #8960853 - Flags: review?(gl)
Attached patch 1447532.patch (obsolete) — Splinter Review
Attachment #8960853 - Attachment is obsolete: true
Attachment #8960853 - Flags: review?(gl)
Attachment #8960855 - Flags: review?(gl)
Assignee: nobody → zhenghong.qian
Blocks: dt-flexbox
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Priority: -- → P3
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...
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
(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?
Flags: needinfo?(pbrosset)
(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.
Flags: needinfo?(pbrosset)
Attached patch 1447532.patchSplinter Review
Attachment #8963818 - Flags: review?(gl)
Attachment #8960855 - Attachment is obsolete: true
Attachment #8960855 - Flags: review?(gl)
Product: Firefox → DevTools
Assignee: zhenghong.qian → gl
Attachment #8963818 - Flags: review?(gl)
Summary: Highlight min-max clamps in the flexbox highlighter → Highlight max-width/height clamps in the flex item highlighter
Blocks: 1478396
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1477614
You need to log in before you can comment on or make changes to this bug.