Summary: | Web Inspector: Jump from Layout panel to grid container element | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Razvan Caliman <rcaliman> | ||||||||||
Component: | Web Inspector | Assignee: | Razvan Caliman <rcaliman> | ||||||||||
Status: | RESOLVED FIXED | ||||||||||||
Severity: | Normal | CC: | ews-watchlist, hi, inspector-bugzilla-changes, webkit-bug-importer | ||||||||||
Priority: | P2 | Keywords: | InRadar | ||||||||||
Version: | WebKit Nightly Build | ||||||||||||
Hardware: | All | ||||||||||||
OS: | All | ||||||||||||
Attachments: |
|
Description
Razvan Caliman
2021-02-25 11:05:11 PST
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]. |