1459142 - Tweaks to layout panel break on long element names / selectors

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P2)

Description

[Martin Balfanz [:mbalfanz]]

Attachment: Screen Shot 2018-05-04 at 10.09.42.png

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.

STR:
1. Go to https://developer.mozilla.org/en-US/docs/Tools
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

Comment 1

[Victoria Wang [:victoria]]

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.

Comment 2

[Patrick Brosset <:pbro>]

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.

Comment 3

[Patrick Brosset <:pbro>]

Attachment: flow-after-text.gif

Comment 4

[Patrick Brosset <:pbro>]

Attachment: 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.

Comment 5

[Patrick Brosset <:pbro>]

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.

Comment 6

[Patrick Brosset <:pbro>]

Attachment: Bug 1459142 - Flow the color swatch after the grid item text in the layout panel;

Review commit: https://reviewboard.mozilla.org/r/244682/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/244682/

Comment 7

[Gabriel [:gl] (ΦωΦ)]

Comment on attachment 8976581 [details]
Bug 1459142 - Flow the color swatch after the grid item text in the layout panel;

https://reviewboard.mozilla.org/r/244682/#review250724

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3664b5e7db20
Flow the color swatch after the grid item text in the layout panel; r=gl

Comment 9

[Andrei Ciure[:aciure]]

https://hg.mozilla.org/mozilla-central/rev/3664b5e7db20