Devtools: Introduce WI.ExtensibleToolbar

Source/devtools/front_end/components/InspectorView.js

 /*
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 35 matching lines @@
     this._drawerSplitView.show(this.element);
 
     this._tabbedPane = new WebInspector.TabbedPane();
     this._tabbedPane.element.classList.add("inspector-view-tabbed-pane");
     this._tabbedPane.setRetainTabOrder(true);
     if (Runtime.experiments.isEnabled("materialDesign"))
         this._tabbedPane.setTabSlider(true);
     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;
 
     this._history = [];
     this._historyIterator = -1;
     this._keyDownBound = this._keyDown.bind(this);
     this._keyPressBound = this._keyPress.bind(this);
     /** @type {!Object.<string, !WebInspector.PanelDescriptor>} */
     this._panelDescriptors = {};
@@ skipping 40 matching lines @@
          * @param {!Runtime.Extension} extension
          * @this {!WebInspector.InspectorView}
          */
         function processPanelExtensions(extension)
         {
             this.addPanel(new WebInspector.RuntimeExtensionPanelDescriptor(extension));
         }
         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);
+
+        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);
     },
 
     /**
-     * @param {!WebInspector.ToolbarItem} item
-     */
-    appendToRightToolbar: function(item)
-    {
-        this._rightToolbar.appendToolbarItem(item);
-    },
-
-    /**
      * @param {!WebInspector.PanelDescriptor} panelDescriptor
      */
     addPanel: function(panelDescriptor)
     {
         var panelName = panelDescriptor.name();
         this._panelDescriptors[panelName] = panelDescriptor;
         this._tabbedPane.appendTab(panelName, panelDescriptor.title(), new WebInspector.View());
         if (this._lastActivePanelSetting.get() === panelName)
             this._tabbedPane.selectTab(panelName);
     },
@@ skipping 40 matching lines @@
         return promise;
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onSuspendStateChanged: function(event)
     {
         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);
     },
 
     /**
      * The returned Promise is resolved with null if another showPanel()
      * gets called while this.panel(panelName) Promise is in flight.
      *
      * @param {string} panelName
      * @return {!Promise.<?WebInspector.Panel>}
      */
     showPanel: function(panelName)
@@ skipping 331 matching lines @@
 WebInspector.InspectorView.ToggleDrawerButtonProvider.prototype = {
     /**
      * @override
      * @return {?WebInspector.ToolbarItem}
      */
     item: function()
     {
         return WebInspector.inspectorView._drawer.toggleButton();
     }
 }