DevTools: introduce View: a named widget with the toolbar.

third_party/WebKit/Source/devtools/front_end/ui/SidebarPane.js

Index: third_party/WebKit/Source/devtools/front_end/ui/SidebarPane.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/SidebarPane.js b/third_party/WebKit/Source/devtools/front_end/ui/SidebarPane.js
index 399fb9d9be59317b3f45e8dfc433fa98fcc2994b..5fbdcaf8393fbc6316e79eb8b5c9077459e6e258 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/SidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/SidebarPane.js
@@ -28,87 +28,15 @@
 
 /**
  * @constructor
- * @extends {WebInspector.Widget}
- * @param {string} title
- */
-WebInspector.SidebarPane = function(title)
-{
-    WebInspector.Widget.call(this);
-    this.setMinimumSize(25, 0);
-    this.element.className = "sidebar-pane"; // Override
-
-    this._title = title;
-    this._expandCallback = null;
-    this._paneVisible = true;
-}
-
-WebInspector.SidebarPane.prototype = {
-    /**
-     * @return {!WebInspector.Toolbar}
-     */
-    toolbar: function()
-    {
-        if (!this._toolbar) {
-            this._toolbar = new WebInspector.Toolbar("");
-            this._toolbar.element.addEventListener("click", consumeEvent);
-            this.element.insertBefore(this._toolbar.element, this.element.firstChild);
-        }
-        return this._toolbar;
-    },
-
-    expandPane: function()
-    {
-        this.onContentReady();
-    },
-
-    onContentReady: function()
-    {
-        if (this._expandCallback)
-            this._expandCallback();
-        else
-            this._expandPending = true;
-    },
-
-    /**
-     * @param {function(boolean)} setVisibleCallback
-     * @param {function()} expandCallback
-     */
-    _attached: function(setVisibleCallback, expandCallback)
-    {
-        this._setVisibleCallback = setVisibleCallback;
-        this._setVisibleCallback(this._paneVisible);
-
-        this._expandCallback = expandCallback;
-        if (this._expandPending) {
-            delete this._expandPending;
-            this._expandCallback();
-        }
-    },
-
-    /**
-     * @param {boolean} visible
-     */
-    setVisible: function(visible)
-    {
-        this._paneVisible = visible;
-        if (this._setVisibleCallback)
-            this._setVisibleCallback(visible)
-    },
-
-    __proto__: WebInspector.Widget.prototype
-}
-
-/**
- * @constructor
  * @param {!Element} container
- * @param {!WebInspector.SidebarPane} pane
+ * @param {!WebInspector.View} pane
  */
 WebInspector.SidebarPaneTitle = function(container, pane)
 {
     this._pane = pane;
 
     this.element = container.createChild("div", "sidebar-pane-title");
-    this.element.textContent = pane._title;
+    this.element.textContent = pane.title();
     this.element.tabIndex = 0;
     this.element.addEventListener("click", this._toggleExpanded.bind(this), false);
     this.element.addEventListener("keydown", this._onTitleKeyDown.bind(this), false);
@@ -133,7 +61,7 @@ WebInspector.SidebarPaneTitle.prototype = {
         if (this.element.classList.contains("expanded"))
             this._collapse();
         else
-            this._pane.expandPane();
+            this._pane.requestReveal();
     },
 
     /**
@@ -154,26 +82,31 @@ WebInspector.SidebarPaneStack = function()
 {
     WebInspector.Widget.call(this);
     this.setMinimumSize(25, 0);
-    this.element.className = "sidebar-pane-stack"; // Override
-    /** @type {!Map.<!WebInspector.SidebarPane, !WebInspector.SidebarPaneTitle>} */
+    this.element.classList.add("sidebar-pane-container");
+    /** @type {!Map.<!WebInspector.View, !WebInspector.SidebarPaneTitle>} */
     this._titleByPane = new Map();
 }
 
 WebInspector.SidebarPaneStack.prototype = {
     /**
-     * @param {!WebInspector.SidebarPane} pane
+     * @param {!WebInspector.View} pane
      */
     addPane: function(pane)
     {
         var paneTitle = new WebInspector.SidebarPaneTitle(this.element, pane);
         this._titleByPane.set(pane, paneTitle);
-        if (pane._toolbar)
-            paneTitle.element.appendChild(pane._toolbar.element);
-        pane._attached(this._setPaneVisible.bind(this, pane), paneTitle._expand.bind(paneTitle));
+        var toolbarItems = pane.toolbarItems();
+        if (toolbarItems.length) {
+            var toolbar = new WebInspector.Toolbar("", paneTitle.element);
+            for (var item of toolbarItems)
+                toolbar.appendToolbarItem(item);
+        }
+        pane.setRequestVisibleCallback(this._setPaneVisible.bind(this, pane));
+        pane.setRevealCallback(paneTitle._expand.bind(paneTitle));
     },
 
     /**
-     * @param {!WebInspector.SidebarPane} pane
+     * @param {!WebInspector.View} pane
      * @param {boolean} visible
      */
     _setPaneVisible: function(pane, visible)
@@ -183,7 +116,7 @@ WebInspector.SidebarPaneStack.prototype = {
             return;
 
         title.element.classList.toggle("hidden", !visible);
-        pane.element.classList.toggle("sidebar-pane-hidden", !visible);
+        pane.element.classList.toggle("sidebar-hidden-override", !visible);
     },
 
     __proto__: WebInspector.Widget.prototype
@@ -196,29 +129,36 @@ WebInspector.SidebarPaneStack.prototype = {
 WebInspector.SidebarTabbedPane = function()
 {
     WebInspector.TabbedPane.call(this);
-    this.element.classList.add("sidebar-tabbed-pane");
+    this.element.classList.add("sidebar-pane-container", "sidebar-tabbed-pane");
 }
 
 WebInspector.SidebarTabbedPane.prototype = {
     /**
-     * @param {!WebInspector.SidebarPane} pane
+     * @param {!WebInspector.View} pane
      */
     addPane: function(pane)
     {
-        var title = pane._title;
+        var title = pane.title();
+
+        var toolbarItems = pane.toolbarItems();
+        if (toolbarItems.length) {
+            var toolbar = new WebInspector.Toolbar("");
+            pane.element.insertBefore(toolbar.element, pane.element.firstChild);
+            for (var item of toolbarItems)
+                toolbar.appendToolbarItem(item);
+        }
         this.appendTab(title, title, pane);
-        if (pane._toolbar)
-            pane.element.insertBefore(pane._toolbar.element, pane.element.firstChild);
-        pane._attached(this._setPaneVisible.bind(this, pane), this.selectTab.bind(this, title));
+        pane.setRequestVisibleCallback(this._setPaneVisible.bind(this, pane));
+        pane.setRevealCallback(this.selectTab.bind(this, title));
     },
 
     /**
-     * @param {!WebInspector.SidebarPane} pane
+     * @param {!WebInspector.View} pane
      * @param {boolean} visible
      */
     _setPaneVisible: function(pane, visible)
     {
-        var title = pane._title;
+        var title = pane.title();
         if (visible) {
             if (!this.hasTab(title))
                 this.appendTab(title, title, pane);