Additional features for a CustomInspector

[DamianOsipiuk]

Hi,

I would like to propose some features that could be useful for DevTools plugins.

I'm currently working on migrating custom made devtools to be a plugin for Vue devtools.
Unfortunately i'm missing few features that would make the transition easier.

I could implemented all the features that i will propose here.
But first i want to get confirmation, that such changes would be accepted and if those may be possible today which i missed.
Please let me know if that is something that could be integrated into the project.

---

Possibility to add custom action buttons to the SelectedComponentPane

Currently there is no possibility to add custom actions to the selected nodes pane.
Such actions exist in the components inspector, but does not exist for the CustomInspector.
Therefore i would like to add a possibility to define them with the same interface that is already used for CustomInspectorOptions

actions?: {
  icon: string;
  tooltip?: string;
  action: () => void | Promise<void>;
}[];

Changes would need to be made in https://github.com/vuejs/devtools/blob/main/packages/app-frontend/src/features/inspector/custom/CustomInspectorSelectedNodePane.vue

The only thing that is questionable is how to add such payload. Currently CustomInspectorState only accepts state object which is rendered as a tree.
One of the ideas would be to add it to CustomInspectorOptions as nodeActions so no breaking changes would be made.

Screenshot, that should visualize what i want to achieve:

---

Sorting options

Currently you can filter the nodes or state tree with a string value. This is good, but it lacks to ability to sort results.
The most basic sorting would be ascending or descending order of strings.
But there are more sorting options that could be controlled by the plugin.

At minimum i would see ASC/DESC button controlled via options flag.
In ideal world i would like to be able to add my own sorting options (maybe via dropdown menu?)

Draft interface that could be added to CustomInspectorOptions:

interface NodesSorting {
    order: boolean; // defaults to false, would add asc/desc button next to search box
    orderBy: string; // sort fn name that would be picked from a `dropdown` like radio button
} 

Screenshot, that should visualize what i want to achieve:

---

Ability to update Inspector options (if Sorting options are not feasible)

I could solve the sorting options in a different fashion (not as user friendly... but still).
I could add CustomInspectorOptions['actions'] to control my sorting options. But unfortunately i'm not able to update the icon of the button.
Therefore i would need another function like api.updateInspectorActions to change the icon of the button when i click on it.

[DamianOsipiuk]

@Akryum So what do you think about sorting options? Is it something feasible for addition?