Closed Bug 1459142 Opened 4 years ago Closed 4 years ago

Tweaks to layout panel break on long element names / selectors


(DevTools :: Inspector, defect, P2)



(firefox62 fixed)

Firefox 62
Tracking Status
firefox62 --- fixed


(Reporter: mbalfanz, Assigned: pbro)


(Blocks 1 open bug)


(Whiteboard: [good first verify])


(4 files)

The tweaks introduced to the Layout panel in 1452206 break on long element names/selectors. It wasn't ideal before either, but now on smaller widths, the color circle transforms and at some point even disappears completely. Please see the attached screenshot showing 3 different widths.

1. Go to
2. Open the inspector with the Layout panel
3. Resize the Layout panel to a small width

Expected result:
- the color circle stays a circle and accessible at all times

Actual result:
- the color circle get's transformed into an oval shape and eventually completely disappears

Looking at this I was wondering if the position of the circle is expected this way. I see 2 issues:

1. the circle stays right aligned when the text breaks lines. This can cause a big gap and is not inline with the square selector icon (which stays on the line)

2. having multiple grids on the page with different name/selector lengths will put the circles in different positions. I think it might be easier to "navigate" if they are always left aligned / before the name
Flags: needinfo?(victoria)
Flags: needinfo?(gl)
Thanks for filing this Martin!

I like the idea of making the circle left aligned - the only thing that might be a bit odd is that it would matches how the color properties currently look, with the circle before color values. (Maybe it's good that it matches, as I doubt people would be confused by this). I would be fine with either this or having the color circle work in the same way as the inspector/highlight icon, flowing after the text. 

I noticed with this two-line name example that the way the checkbox stays vertically centered seems as well - it should be aligned with the top line.
Flags: needinfo?(victoria)
I'm experimenting a bit with this. I have 2 options:
- either (using CSS grid) make the checkboxes, the dom nodes, and the color swatches into 3 columns. This way, things remain aligned properly, swatches don't squish or disappear. But also, swatches are always aligned with the long dom nodes (so if there are several grids, some swatches may appear far away from their corresponding dom nodes).
- Or, making the swatches flow after the dom node text (after the highlighter icon). That seems to me like the best solution.

I'll include screenshots for them both.
Assignee: nobody → pbrosset
Attached image flow-after-text.gif
Attached image 3-columns.gif
I was wrong in my previous comment, all swatches do not necessarily have to be aligned vertically.
So, this solution is very similar to the flow after text solution, but the swatch stays to the right, in its own column.
Talked with Martin about this and he agreed that flowing after the text would be a good fix. Left-aligned like he proposed in comment 0 would be good too, but I'm attempting a fix for showing it after the text for now.
This should solve the squishing of the color swatch.
I have not found a fix for the missing horizontal scrollbar though. The content of the panel disappears after a min-width, which is fine, but there should be a horizontal scrollbar when that happens, and it's missing. We'll have to fix this later.
Flags: needinfo?(gl)
Comment on attachment 8976581 [details]
Bug 1459142 - Flow the color swatch after the grid item text in the layout panel;
Attachment #8976581 - Flags: review?(gl) → review+
Pushed by
Flow the color swatch after the grid item text in the layout panel; r=gl
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 62
Product: Firefox → DevTools
Whiteboard: [good first verify]
You need to log in before you can comment on or make changes to this bug.