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
<rdar://problem/74751801>
Created attachment 422567 [details] Patch
Created attachment 422568 [details] [Image] With patch applied
Created attachment 422570 [details] [Video] Behavior with patch applied
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`.
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.
Created attachment 422579 [details] Patch
Comment on attachment 422579 [details] Patch r=me
Committed r274157: <https://commits.webkit.org/r274157> All reviewed patches have been landed. Closing bug and clearing flags on attachment 422579 [details].