feat(devtool): implement component hover highlight#168
Conversation
|
@Andrew-Velox We shouldn't have much changes to the actual Ziex code, we can have things that is inside As I suggested, for client components we just inject the id/idx to the component as element property to the root element only, same for server component we can render an We are fine adding dozens of logic in DevTool as it is the scope of the devtools mostly to figure things out. Another idea is that for server component we should be able to do that just by including component index to the component tree we sent to DevTool, no? IN that way we don't have any change in the Ziex server side code at all just the DevServer API Endpoint that returns serialized component tree, when we do the serialization we can just include the idx. |
|
Got it, I've reverted all the Ziex core changes (Component.zig, render.zig, handler.zig, devtool.zig). No new fields or data structure changes. 
|
There was a problem hiding this comment.
Pull request overview
Implements inspected-page hover highlighting from the devtool component tree by deriving a DOM locator (CSS selector + occurrence index) per component and evaluating an overlay script inside the inspected window.
Changes:
- Add inspected-window eval helper + overlay-based hover highlight logic, wired to mouseover/mouseout in the devtool UI.
- Always fetch native elements so every component can be mapped to a DOM locator (UI filtering remains controlled by settings).
- Extend serialized component mapping to compute and propagate
selector+occurrencethrough the tree UI.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| ide/devtool/app/scripts/client.ts | Adds inspected-window eval and hover event handling to render/clear a highlight overlay over the inspected page DOM. |
| ide/devtool/app/pages/page.zx | Always fetches native elements; passes selector/occurrence into rendered component buttons as data-* attributes. |
| ide/devtool/app/pages/data.zig | Computes per-node DOM locator (selector + occurrence counter) while mapping serialized component trees. |
| } | ||
|
|
||
| async function refreshFromNavigation(href?: string): Promise<void> { | ||
| await clearInspectedComponentHighlight(); |
| async function stopHover(): Promise<void> { | ||
| if (!hoveredKey) return; | ||
| hoveredKey = null; | ||
| await clearInspectedComponentHighlight(); | ||
| } |
Awelsome, I'm merging this, and once it is in main let's compile and publish (just to see how long it takes to publish new version). And then we follow up with the following two:
|
No description provided.