From 992c383cdd759b8426088b23e764f4723767b06c Mon Sep 17 00:00:00 2001 From: kainulla <83207448+kainulla@users.noreply.github.com> Date: Tue, 7 Jul 2026 13:12:05 +0000 Subject: [PATCH 1/6] feat: add hoverShowComponent and hoverShowStyles to ToolbarSettings Two new boolean fields on ToolbarSettings, both default to false. Persisted in localStorage alongside existing settings. --- package/src/components/page-toolbar-css/index.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/package/src/components/page-toolbar-css/index.tsx b/package/src/components/page-toolbar-css/index.tsx index 42df435a..2b657a47 100644 --- a/package/src/components/page-toolbar-css/index.tsx +++ b/package/src/components/page-toolbar-css/index.tsx @@ -153,6 +153,8 @@ export type ToolbarSettings = { markerClickBehavior: MarkerClickBehavior; webhookUrl: string; webhooksEnabled: boolean; + hoverShowComponent: boolean; + hoverShowStyles: boolean; }; const DEFAULT_SETTINGS: ToolbarSettings = { @@ -164,6 +166,8 @@ const DEFAULT_SETTINGS: ToolbarSettings = { markerClickBehavior: "edit", webhookUrl: "", webhooksEnabled: true, + hoverShowComponent: false, + hoverShowStyles: false, }; // Simple URL validation - checks for valid http(s) URL format From acefbe252d70553c8b53d421736c27ad54e6a715 Mon Sep 17 00:00:00 2001 From: kainulla <83207448+kainulla@users.noreply.github.com> Date: Tue, 7 Jul 2026 13:12:53 +0000 Subject: [PATCH 2/6] feat: extend HoverInfo type with innermostComponent and computedStylesObj Adds two optional fields to HoverInfo so the hover handler can pass computed data to the tooltip renderer. --- package/src/components/page-toolbar-css/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package/src/components/page-toolbar-css/index.tsx b/package/src/components/page-toolbar-css/index.tsx index 2b657a47..9e6dda1c 100644 --- a/package/src/components/page-toolbar-css/index.tsx +++ b/package/src/components/page-toolbar-css/index.tsx @@ -137,6 +137,8 @@ type HoverInfo = { elementPath: string; rect: DOMRect | null; reactComponents?: string | null; + innermostComponent?: string | null; + computedStylesObj?: Record; }; export type OutputDetailLevel = "compact" | "standard" | "detailed" | "forensic"; From 93d6fba5b183a6208fb2b57ebf9795b63f50a3da Mon Sep 17 00:00:00 2001 From: kainulla <83207448+kainulla@users.noreply.github.com> Date: Tue, 7 Jul 2026 13:13:21 +0000 Subject: [PATCH 3/6] feat: extract innermost component and compute styles on hover 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 --- .../src/components/page-toolbar-css/index.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/package/src/components/page-toolbar-css/index.tsx b/package/src/components/page-toolbar-css/index.tsx index 9e6dda1c..46ce118f 100644 --- a/package/src/components/page-toolbar-css/index.tsx +++ b/package/src/components/page-toolbar-css/index.tsx @@ -1866,19 +1866,33 @@ const [settings, setSettings] = useState(() => { identifyElementWithReact(elementUnder, effectiveReactMode); const rect = elementUnder.getBoundingClientRect(); + // Extract innermost component for hover display + let innermostComponent: string | null = null; + if (reactComponents) { + const parts = reactComponents.split(" "); + innermostComponent = parts[parts.length - 1] || null; + } + + // Compute styles on hover when setting is enabled + const hoverComputedStyles = settings.hoverShowStyles + ? getDetailedComputedStyles(elementUnder) + : undefined; + setHoverInfo({ element: name, elementName, elementPath: path, rect, reactComponents, + innermostComponent, + computedStylesObj: hoverComputedStyles, }); setHoverPosition({ x: e.clientX, y: e.clientY }); }; document.addEventListener("mousemove", handleMouseMove); return () => document.removeEventListener("mousemove", handleMouseMove); - }, [isActive, pendingAnnotation, isDrawMode, isDesignMode, effectiveReactMode, drawStrokes]); + }, [isActive, pendingAnnotation, isDrawMode, isDesignMode, effectiveReactMode, drawStrokes, settings.hoverShowStyles, settings.hoverShowComponent]); // Start editing an annotation (right-click or click on drawing stroke) const startEditAnnotation = useCallback((annotation: Annotation) => { From d314f44c367ac25fdc99d12b405af28352bb943d Mon Sep 17 00:00:00 2001 From: kainulla <83207448+kainulla@users.noreply.github.com> Date: Tue, 7 Jul 2026 13:13:31 +0000 Subject: [PATCH 4/6] feat: render innermost component and computed styles in hover tooltip 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. --- .../src/components/page-toolbar-css/index.tsx | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/package/src/components/page-toolbar-css/index.tsx b/package/src/components/page-toolbar-css/index.tsx index 46ce118f..cce47533 100644 --- a/package/src/components/page-toolbar-css/index.tsx +++ b/package/src/components/page-toolbar-css/index.tsx @@ -4441,19 +4441,38 @@ const [settings, setSettings] = useState(() => { Math.min(hoverPosition.x, window.innerWidth - 100), ), top: Math.max( - hoverPosition.y - (hoverInfo.reactComponents ? 48 : 32), + hoverPosition.y - ( + (settings.hoverShowStyles && hoverInfo.computedStylesObj && Object.keys(hoverInfo.computedStylesObj).length > 0) + ? 80 + Object.keys(hoverInfo.computedStylesObj).length * 16 + : hoverInfo.reactComponents ? 48 : 32 + ), 8, ), }} > {hoverInfo.reactComponents && (
- {hoverInfo.reactComponents} + {settings.hoverShowComponent && hoverInfo.innermostComponent + ? hoverInfo.innermostComponent + : hoverInfo.reactComponents}
)}
{hoverInfo.elementName}
+ {settings.hoverShowStyles && hoverInfo.computedStylesObj && Object.keys(hoverInfo.computedStylesObj).length > 0 && ( +
+ {Object.entries(hoverInfo.computedStylesObj).map(([key, value]) => ( +
+ + {key.replace(/([A-Z])/g, "-$1").toLowerCase()} + + {": "} + {value} +
+ ))} +
+ )} )} From 57055a0eacbb81c46b824427b1993cbbe9290778 Mon Sep 17 00:00:00 2001 From: kainulla <83207448+kainulla@users.noreply.github.com> Date: Tue, 7 Jul 2026 13:13:39 +0000 Subject: [PATCH 5/6] style: add SCSS classes for hover tooltip styles block Adds .hoverStyles, .hoverStyleLine, .hoverStyleProp, .hoverStyleVal with monospace font, subtle separator, and dimmed property names. --- .../page-toolbar-css/styles.module.scss | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/package/src/components/page-toolbar-css/styles.module.scss b/package/src/components/page-toolbar-css/styles.module.scss index 31917bb8..d7179d47 100644 --- a/package/src/components/page-toolbar-css/styles.module.scss +++ b/package/src/components/page-toolbar-css/styles.module.scss @@ -864,6 +864,29 @@ text-overflow: ellipsis; } +.hoverStyles { + margin-top: 0.25rem; + padding-top: 0.25rem; + border-top: 1px solid rgba(255, 255, 255, 0.15); + font-size: 0.5625rem; + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; + line-height: 1.45; +} + +.hoverStyleLine { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.hoverStyleProp { + color: rgba(255, 255, 255, 0.55); +} + +.hoverStyleVal { + color: rgba(255, 255, 255, 0.9); +} + // ============================================================================= // Markers Layer // ============================================================================= From b12b99a8b118eda345b1c859c1f5c0d234863df7 Mon Sep 17 00:00:00 2001 From: kainulla <83207448+kainulla@users.noreply.github.com> Date: Tue, 7 Jul 2026 13:13:48 +0000 Subject: [PATCH 6/6] feat: add settings toggles for hover component and styles 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'. --- .../page-toolbar-css/settings-panel/index.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/package/src/components/page-toolbar-css/settings-panel/index.tsx b/package/src/components/page-toolbar-css/settings-panel/index.tsx index 9195b7de..998d9536 100644 --- a/package/src/components/page-toolbar-css/settings-panel/index.tsx +++ b/package/src/components/page-toolbar-css/settings-panel/index.tsx @@ -218,6 +218,24 @@ export function SettingsPanel({ onSettingsChange({ blockInteractions: e.target.checked }) } /> + + onSettingsChange({ hoverShowComponent: e.target.checked }) + } + tooltip="Show only the innermost React component name in the hover tooltip instead of the full tree" + /> + + onSettingsChange({ hoverShowStyles: e.target.checked }) + } + tooltip="Show computed CSS styles in the hover tooltip" + />