Bug 222429 – Web Inspector: Jump from Layout panel to grid container element

• Component: Web Inspector
• Status: RESOLVED FIXED

[Razvan Caliman]

Remove current behavior from label and let it just toggle the checkbox.

Add an arrow icon next to the color swatch on hover over the row (see CSS Variables). 
Clicking on the arrow should jump to element in context in the DOM tree of the Elements Tab

[Radar WebKit Bug Importer]

<rdar://problem/74751801>

[Razvan Caliman]

Created attachment 422567 [details]
Patch

[Razvan Caliman]

Created attachment 422568 [details]
[Image] With patch applied

[Razvan Caliman]

Created attachment 422570 [details]
[Video] Behavior with patch applied

[Devin Rousso]

Comment on attachment 422567 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=422567&action=review

> Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css:55
> +    opacity: 0;

Why not `display: none;`?

> Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js:136
> +            buttonElement.title = WI.UIString("Click to inspect element");

This should be named something like "Reveal in DOM Tree" (you can use `WI.repeatedUIString.revealInDOMTree()`) to match the naming convention of the `title` of other `WI.createGoToArrowButton`.

[Razvan Caliman]

Comment on attachment 422567 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=422567&action=review

>> Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css:55
>> +    opacity: 0;
> 
> Why not `display: none;`?

Long node display names are truncated in such a way that the color swatch is still visible and the far end.

If we force a relayout on hover with `display: none` -> `display: inline-block`, this will shift the truncation point and the position of the color swatch element. See the homepage of https://stripe.com for really long node display names.

I originally used `visibility: hidden`, but I got some strange side-effects on scroll resulting in misplaced elements. I didn't investigate, but it's probably a compound problem of scroll + visibility +  flex container and whatever else contributes to layout in the ancestor tree.

I stuck with `opacity: 0` because it didn't have side-effects and still used the arrow space so that the truncation point and position of the swatch were not affected on hover.

>> Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js:136
>> +            buttonElement.title = WI.UIString("Click to inspect element");
> 
> This should be named something like "Reveal in DOM Tree" (you can use `WI.repeatedUIString.revealInDOMTree()`) to match the naming convention of the `title` of other `WI.createGoToArrowButton`.

Will do.

[Razvan Caliman]

Created attachment 422579 [details]
Patch

[Devin Rousso]

Comment on attachment 422579 [details]
Patch

r=me

[EWS]

Committed r274157: <https://commits.webkit.org/r274157>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 422579 [details].