Add ability to "refresh" the devtools panel

[HugoDF]

Some issues wouldn't be as bad (#165 #151 ) if we had a way for the user to manually "refresh" (really re-initialise) the devtools panel

We can use the heroicons reload icon:

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>

Some suggestions where we could add it (in the tabs, or next to the github icon), there's probably a way to add it in the "components" tab body cc @stephenoldham

[stephenoldham]

Like the idea. As far as where to put it in the UI, I guess it depends on what the refresh is limited to. Are we just refreshing the components or will the refresh also clear any warnings and events in those tabs as well?

[HugoDF]

Like the idea. As far as where to put it in the UI, I guess it depends on what the refresh is limited to. Are we just refreshing the components or will the refresh also clear any warnings and events in those tabs as well?

Interesting point 🤔 , we could make it so that "refresh" applies only to the current component's data, we would have to rework some of the messaging, guess it would be related to #10

[stephenoldham]

Yeah I guess really we could have two levels of refresh. One that triggers the refresh/re-walking of all components and one that was related to an individual component.

By no means a suggestion for final UI but here's what I think a user would expect from the following placements for a button:

1. Would refresh the whole panel; components, events and warnings
2. Refresh the data for the selected component
3. Refreshes the components list; discovering new dynamic components for example

[HugoDF]

Oof the UX of having 3 refresh buttons 👀👀👀

Opened up react devtools, they don't even have a refresh button haha, the benefits of first party devtools support I guess.

Vue.js devtools have refresh at the top-level (like you've got in the tab bar).

I think that might the most reasonable approach to be fair: top-level "refresh" in the tab bar (what's been detailed as 1.), to allow the user to restart the panel without closing devtools or refreshing the page. It'll be an ok workaround if someone's in a pinch but hopefully they'll come report the issue here.

What we could do for the component data refresh is do it under the hood when a "component" gets selected in the left pane (that would be good for an eventual move to more granular data loading: first load components/names, when a component gets selected, load the relevant data).

[stephenoldham]

Oof the UX of having 3 refresh buttons 👀👀👀

Ha! ALL THE REFRESH BUTTONS! 😆

I think that might the most reasonable approach to be fair: top-level "refresh" in the tab bar

I agree. It's simple and clear for users I think.

What we could do for the component data refresh is do it under the hood when a "component" gets selected in the left pane (that would be good for an eventual move to more granular data loading: first load components/names, when a component gets selected, load the relevant data).

Yeah really like that, makes a lot of sense.

[HugoDF]

I'll split that more granular data loading as a separate issue, it'll be mostly a perf thing with UX benefits.