Devtools: Introduce WI.ExtensibleToolbar

Source/devtools/front_end/components/InspectorView.js

Index: Source/devtools/front_end/components/InspectorView.js
diff --git a/Source/devtools/front_end/components/InspectorView.js b/Source/devtools/front_end/components/InspectorView.js
index 48fb5a248e674d7f4fc2bdd0b3071b2894bfdcca..4ff66ac2db6010400027ceff25a5f2f0c2530758 100644
--- a/Source/devtools/front_end/components/InspectorView.js
+++ b/Source/devtools/front_end/components/InspectorView.js
@@ -53,20 +53,6 @@ WebInspector.InspectorView = function()
     this._drawerSplitView.setMainView(this._tabbedPane);
     this._drawer = new WebInspector.Drawer(this._drawerSplitView);
 
-    this._leftToolbar = new WebInspector.Toolbar();
-    this._leftToolbar.element.classList.add("inspector-view-toolbar", "inspector-view-toolbar-left");
-    this._leftToolbar.makeNarrow();
-    this._tabbedPane.insertBeforeTabStrip(this._leftToolbar.element);
-
-    this._rightToolbar = new WebInspector.Toolbar();
-    this._rightToolbar.element.classList.add("inspector-view-toolbar");
-    this._tabbedPane.appendAfterTabStrip(this._rightToolbar.element);
-
-    this._closeButtonToolbarItem = createElementWithClass("div", "inspector-view-close-button");
-    var closeButtonElement = this._closeButtonToolbarItem.createChild("div", "", "dt-close-button");
-    closeButtonElement.addEventListener("click", InspectorFrontendHost.closeWindow.bind(InspectorFrontendHost), true);
-    this._rightToolbar.element.appendChild(this._closeButtonToolbarItem);
-
     this._panels = {};
     // Used by tests.
     WebInspector["panels"] = this._panels;
@@ -127,20 +113,24 @@ WebInspector.InspectorView.prototype = {
         WebInspector.endBatchUpdate();
     },
 
-    /**
-     * @param {!WebInspector.ToolbarItem} item
-     */
-    appendToLeftToolbar: function(item)
+    createToolbars: function()
     {
-        this._leftToolbar.appendToolbarItem(item);
-    },
+        this._leftToolbar = new WebInspector.ExtensibleToolbar("main-toolbar-left");
+        this._leftToolbar.element.classList.add("inspector-view-toolbar", "inspector-view-toolbar-left");

[dgozman, 2015/04/24 12:12:34]

"inspector-view-toolbar" is unused.

[sergeyv, 2015/04/24 12:25:52]

It is used in UIUtils, these toolbars could be styled

+        this._leftToolbar.makeNarrow();
+        this._tabbedPane.insertBeforeTabStrip(this._leftToolbar.element);
 
-    /**
-     * @param {!WebInspector.ToolbarItem} item
-     */
-    appendToRightToolbar: function(item)
-    {
-        this._rightToolbar.appendToolbarItem(item);
+        var rightToolbarContainer = createElementWithClass("span", "right-toolbar-container");

[dgozman, 2015/04/24 12:12:34]

span->div

[sergeyv, 2015/04/24 12:25:52]

Done.

+        this._tabbedPane.appendAfterTabStrip(rightToolbarContainer);
+
+        this._rightToolbar = new WebInspector.ExtensibleToolbar("main-toolbar-right");
+        this._rightToolbar.element.classList.add("inspector-view-toolbar", "inspector-view-toolbar-right");

[dgozman, 2015/04/24 12:12:34]

Both these classes are unused.

[sergeyv, 2015/04/24 12:25:52]

Removed last one

+        rightToolbarContainer.appendChild(this._rightToolbar.element);
+
+        var closeButton = createElementWithClass("div", "inspector-view-close-button");

[dgozman, 2015/04/24 12:12:34]

This div should be unnecessary.

[sergeyv, 2015/04/24 12:25:52]

Done.

+        var closeButtonElement = closeButton.createChild("div", "", "dt-close-button");
+        closeButtonElement.addEventListener("click", InspectorFrontendHost.closeWindow.bind(InspectorFrontendHost), true);
+        rightToolbarContainer.appendChild(closeButton);
     },
 
     /**
@@ -204,8 +194,10 @@ WebInspector.InspectorView.prototype = {
     {
         this._currentPanelLocked = WebInspector.targetManager.allTargetsSuspended();
         this._tabbedPane.setCurrentTabLocked(this._currentPanelLocked);
-        this._leftToolbar.setEnabled(!this._currentPanelLocked);
-        this._rightToolbar.setEnabled(!this._currentPanelLocked);
+        if (this._leftToolbar)
+            this._leftToolbar.setEnabled(!this._currentPanelLocked);
+        if (this._rightToolbar)
+            this._rightToolbar.setEnabled(!this._currentPanelLocked);
     },
 
     /**