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

RESOLVED DUPLICATE of bug 1477614

Status

defect
P3
normal
RESOLVED DUPLICATE of bug 1477614
a year ago
8 months ago

People

(Reporter: zhenghong.qian, Assigned: gl)

Tracking

(Blocks 1 bug)

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment, 2 obsolete attachments)

(Reporter)

Description

a year ago
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
(Reporter)

Updated

a year ago
Component: Untriaged → Developer Tools: Inspector
(Reporter)

Comment 1

a year ago
Posted patch 1447532.patch (obsolete) — Splinter Review
Attachment #8960853 - Flags: review?(gl)
(Reporter)

Comment 2

a year ago
Posted patch 1447532.patch (obsolete) — Splinter Review
Attachment #8960853 - Attachment is obsolete: true
Attachment #8960853 - Flags: review?(gl)
Attachment #8960855 - Flags: review?(gl)
(Assignee)

Updated

a year ago
Assignee: nobody → zhenghong.qian
Blocks: dt-flexbox
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Priority: -- → P3
(Reporter)

Comment 3

a year ago
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
(Reporter)

Comment 5

a year ago
(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?
(Assignee)

Updated

a year ago
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)
(Reporter)

Comment 7

a year ago
Posted patch 1447532.patchSplinter Review
Attachment #8963818 - Flags: review?(gl)
(Assignee)

Updated

a year ago
Attachment #8960855 - Attachment is obsolete: true
Attachment #8960855 - Flags: review?(gl)

Updated

11 months ago
Product: Firefox → DevTools
(Assignee)

Updated

9 months ago
Assignee: zhenghong.qian → gl
(Assignee)

Updated

9 months ago
Attachment #8963818 - Flags: review?(gl)
(Assignee)

Updated

9 months ago
Summary: Highlight min-max clamps in the flexbox highlighter → Highlight max-width/height clamps in the flex item highlighter
Blocks: 1478396
(Assignee)

Updated

8 months ago
Status: ASSIGNED → RESOLVED
Last Resolved: 8 months ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1477614
You need to log in before you can comment on or make changes to this bug.