Summary: My idea would be to add an additional pane/window to Studio Pro called the OUTLINE.
Most pages consist of a complex structure and nesting of several grids, data containers and div elements. When working on a page it is quite hard to keep track of the context of a certain element.
- In the case of a page it would show the outline of the page
- Selecting an element on the page would highlight it in the pane
- Selecting an element on the outline pane would select it on the page
- The root element would be the Page (selecting that would be similar to clicking the canvas)
- It would greatly improve the developer experience when working on pages and might be useful for more elements in Studio Pro that have to deal with nested elements (think of the import and export mappings).
- Easy to keep track of what the parent elements is of current selection
- Quick way to jump to the right element on a page
- Builds understanding of the context (the entire structure of a page)
- Helps to refactor pages where certain structures are repeated (which could have been snippets or other re uses)
Something VS Code does:
In studio pro :) (ofcourse without the ###)