The community member suggests that the dark vertical lines in the Navigator panel, which indicate component nesting, are visually distracting and make the structure tree look "busy." They propose lightening the color or decreasing the opacity of these lines to shift the focus to the components themselves.
In the comments, another community member suggests adding colored sections, similar to a VS Code extension that color-codes folding. However, concerns are raised about accessibility issues with both suggestions.
The discussion continues with questions about how the VS Code extension handles color accessibility, and the possibility of a Webstudio plugin for colored sections. The community members also explore other potential solutions, such as finding a color with high contrast, hiding the lines when the mouse is not hovering over the Navigator, and implementing a "Focus Mode" similar to Penpot's approach.
There is no explicitly marked answer in the provided information.
The Navigator panel shows vertical lines indicating the "scope" of each component (i.e., what's nested inside). These guides are great because they help identify component nesting at a glance.
However, the relatively dark color of these lines makes them seem more visually important than needed. This distracts from the components themselves and makes the structure tree look "busy."
Suggestion: Lightening the color (or decreasing the opacity) of those vertical lines would shift the visual focus in the panel to the components. As a result, the Navigator would appear less "busy."
This approach is similar to designing tables to focus on the data by lightening the cell borders.
How does the VS Code extension handle color accessibility? Probably just restricts to specific colors... but that could get quite complex. Maybe colored sections would make a good Webstudio plugin.
Seemingly unrelated: A Focus Mode might help understand nesting better and could clean up the Navigator for the task at hand. One might have a look how Penpot does this.
Screen 1: Overlapping items and nesting going on. Screen 2: One Group picked in Navigator or on Canvas and Key F (Focus) pressed
This zooms to the selected items on screen and temporarily removes other items from the page-hierarchy. Pressing F again ends Focus Mode.
