1288347 - inspector toolsidebar: add addPanelTab method to load react panel

Status: NEW

(DevTools :: Framework, enhancement, P3)

Description

[[e-mail]]

As the prework of convert Devtools inspector Sidebar panels to react components,
we need a way to load sidebar panel as react component.

The proposal is add a toolsidebar::addPanelTab method to load the react panel from inspector-panel.js


In toolsidebar.js: add addPanelTab to add react panel into _tabbar

> ...
> addPanelTab: function (id, title, selected, reactPanel) { 
>  this._tabbar.addTab(id, title, selected, reactPanel);
>  this.emit("new-tab-registered", id);
> }, 

In inspector-panel.js - instance react panels and pass through addExistingTab

> import react panel1
> import react panel2
>
> let rulePanel = this.React.createFactory(panel1({attr}));
> 
> this.sidebar.addExistingTab(
>        "fontinspector",
>        strings.GetStringFromName("inspector.sidebar.fontInspectorTitle"),
>        defaultTab == "fontinspector",
>        rulePanel);

Then we could make each sidebar react panel instead of using inspector-tab-panel.js.


Honza, does it make sense?

Comment 1

[[e-mail]]

We'd create a meta bug for `convert Devtools inspector Sidebar panels to react components` that contain this one and each react side panel bugs.

Comment 2

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Here is the meta bug 1288400
Honza

Comment 3

[[e-mail]]

Attachment: 0001-demo-add-addPanelTab-method-to-load-react-panel.patch

Here's the demo of how tab works with react component

I create a `hello` react component for demo purpose, which will show at the end of the side panel.

Comment 4

[[e-mail]]

Attachment: hello side panel

screenshot of hello side panel (write with react)

Comment 5

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Fred Lin [:gasolin] from comment #3)
> Created attachment 8773616 [details] [diff] [review]
> 0001-demo-add-addPanelTab-method-to-load-react-panel.patch
> 
> Here's the demo of how tab works with react component
> 
> I create a `hello` react component for demo purpose, which will show at the
> end of the side panel.
Looks good to me, but note that bug 1288400 isn't part of the devtools.html track 2 MVP at the moment.

Honza