Webview feature, design update roadmap proposal

[MajorLift]

Features

• Persist webview tree state within sessions, and across editor restarts. Persist expand collapse state on tab switch #12
  • Webview Persistence: WebviewPanelSerializer (preferred), retainContextWhenHidden (high memory usage, last resort)
  • Approach originally used by Sapling: vscode.ExtensionContext.WorkspaceState, Memento API
• Change current tab file on node click, and only open new tab on double/middle click.
  • Consistent with the VSCode file explorer behavior.
  • Spawning a new tab for every click accumulates too many open tabs and makes it difficult to browse the tree freely.

Search

• Make entire tree searchable, not just the currently visible nodes.
• Highlight search matches.
  • User should be able to tell search matches and ancestor nodes apart at a glance.

Duplicate Nodes

• Handle duplicate nodes by highlighting all when one is selected
  • Don't expand hidden nodes -- user can use expand all if identifying all duplicate nodes is ther intention.
  • The clicked node should have higher opacity or otherwise be emphasized.
• FIX: extension not updating duplicate nodes in other subtrees on file save.

Keyboard Navigation

• PageUp/PageDown support.
• Skip through subtrees with Ctrl/Cmd + arrow
• Navigate to top/bottom of tree with Home/End.
• Global hotkey for switching focus between extension and active tab.

Webview Design

• Bold file nodes to distinguish from react router and third party nodes.
• Consolidate Expand/Collapse icons into one button with two states.
• Replace "Navigates to that file" tooltip with some info specific to hovered node.
• Implement line connectors.

Props

• Don't show props icon for components with no props.
• Move props icon and redux store icon to right of node name for consistent indenting.
• For TypeScript components, show type definitions for props.
• When a typed prop is clicked, open file and scroll to definition.

These ideas are intended as a starting point for discussion. Any feedback, suggestions, criticism is welcome.

Clicking on the ◎ icon will let you convert a task entry into a new issue.

[hb1998]

Make entire tree searchable, not just the currently visible nodes.

this is the default search behaviour of vscode.

[hb1998]

I'd like to add a few things,

• if its typescript show props with types
• navigate to that prop (open that file and scroll to it) when clicked on it

[MajorLift]

Make entire tree searchable, not just the currently visible nodes.

this is the default search behaviour of vscode.

This is true for the file explorer tab, but that's because the search tab already provides project-wide search functionality. I think the value of this extension is in providing a birds-eye view of the relationships between components throughout the project, and the user will expect that scope to be maintained while interacting with a full-width search bar. There doesn't seem to be a strong use case for only searching a subsection of the tree.

We could still look into filtering visible nodes like in the file explorer, using the small search popup triggered by ctrl/cmd + F. But imo providing the capability to search the full tree at any time is more important.

[MajorLift]

@hb1998 Granted, I don't think making this change is a huge priority at the moment, especially since the user can always expand-all before searching.

However, that would mean losing the tree expand state they had previously set up, and it could be very tedious to restore it with manual clicks. Maybe an expand-all/undo toggle button (with collapse-all renamed as reset/reload) might be a solution, or potentially being able to store and toggle between snapshots of expand state?

Just brainstorming here. :) I'd love to hear your thoughts.

[hb1998]

@MajorLift we have to somehow figure out a way, without complicating the experience.
there was another mode in vscode explorer where in you can see the filter results in a separate popup and clicking on it will scroll to that node.

[MajorLift]

@MajorLift we have to somehow figure out a way, without complicating the experience.

Very much agreed!

another mode in vscode explorer where in you can see the filter results in a separate popup and clicking on it will scroll to that node.

Could you share how to access this feature? Unless you're talking about the search tab (Shift + Ctrl/Cmd + F), I don't think I'm familiar with it.