feat: show innermost component and computed styles on hover (opt-in)#192
Open
kainulla wants to merge 6 commits into
Open
feat: show innermost component and computed styles on hover (opt-in)#192kainulla wants to merge 6 commits into
kainulla wants to merge 6 commits into
Conversation
Two new boolean fields on ToolbarSettings, both default to false. Persisted in localStorage alongside existing settings.
…sObj Adds two optional fields to HoverInfo so the hover handler can pass computed data to the tooltip renderer.
The mousemove handler now: - Splits the React component path and keeps the last (innermost) entry - Calls getDetailedComputedStyles when hoverShowStyles is enabled - Passes both to setHoverInfo for the tooltip to consume
When hoverShowComponent is on, the tooltip shows only the innermost React component instead of the full truncated tree. When hoverShowStyles is on, computed CSS styles are rendered below the element name in a monospace block. Tooltip Y position adjusts dynamically based on the number of style lines.
Adds .hoverStyles, .hoverStyleLine, .hoverStyleProp, .hoverStyleVal with monospace font, subtle separator, and dimmed property names.
Two new CheckboxField entries in the settings panel: - 'Show component on hover' with help tooltip - 'Show styles on hover' with help tooltip Both unchecked by default, placed below 'Block page interactions'.
|
@kainulla is attempting to deploy a commit to the Benji Taylor's Projects Team on Vercel. A member of the Team first needs to authorize it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two opt-in hover tooltip improvements.
What changed
Show component on hover — when enabled, the tooltip shows only the innermost React component (e.g.
<NavLink>) instead of the full tree (<App> <Layout> <Sidebar> <NavLink>) which gets truncated by the 280px max-width and hides the most relevant component.Show styles on hover — when enabled, the tooltip shows computed CSS styles (reusing
getDetailedComputedStyles) directly on hover, so you don't have to click the element and expand the accordion every time.Both settings are off by default and live in the settings panel below "Block page interactions".
Commits
hoverShowComponent/hoverShowStylestoToolbarSettings+ defaultsHoverInfotype withinnermostComponentandcomputedStylesObjCloses #191