DevTools: Implement extension-based status bar buttons

Source/devtools/front_end/components/DockController.js

Index: Source/devtools/front_end/components/DockController.js
diff --git a/Source/devtools/front_end/components/DockController.js b/Source/devtools/front_end/components/DockController.js
index 89903d2c940d4c23842bf939e9faec3165701734..8910c8e2f6120f3368f4fda32a3fd8583cc66ed6 100644
--- a/Source/devtools/front_end/components/DockController.js
+++ b/Source/devtools/front_end/components/DockController.js
@@ -44,19 +44,6 @@ WebInspector.DockController = function(canDock)
 
     WebInspector.settings.currentDockState = WebInspector.settings.createSetting("currentDockState", "");
     WebInspector.settings.lastDockState = WebInspector.settings.createSetting("lastDockState", "");
-    var states = [WebInspector.DockController.State.DockedToBottom, WebInspector.DockController.State.Undocked, WebInspector.DockController.State.DockedToRight];
-    var titles = [WebInspector.UIString("Dock to main window."), WebInspector.UIString("Undock into separate window."), WebInspector.UIString("Dock to main window.")];
-    if (WebInspector.experimentsSettings.dockToLeft.isEnabled()) {
-        states.push(WebInspector.DockController.State.DockedToLeft);
-        titles.push(WebInspector.UIString("Dock to main window."));
-    }
-    this._dockToggleButton = new WebInspector.StatusBarStatesSettingButton(
-        "dock-status-bar-item",
-        states,
-        titles,
-        WebInspector.settings.currentDockState,
-        WebInspector.settings.lastDockState,
-        this._dockSideChanged.bind(this));
 }
 
 WebInspector.DockController.State = {
@@ -76,20 +63,6 @@ WebInspector.DockController.Events = {
 }
 
 WebInspector.DockController.prototype = {
-    initialize: function()
-    {
-        if (this._canDock)
-            this._dockToggleButton.toggleInitialState();
-    },
-
-    /**
-     * @return {?Element}
-     */
-    get element()
-    {
-        return this._canDock ? this._dockToggleButton.element : null;
-    },
-
     /**
      * @return {string}
      */
@@ -169,6 +142,44 @@ WebInspector.DockController.prototype = {
 }
 
 /**
+ * @constructor
+ * @implements {WebInspector.StatusBarButton.Provider}
+ */
+WebInspector.DockController.ButtonProvider = function()
+{
+}
+
+WebInspector.DockController.ButtonProvider.prototype = {
+    /**
+     * @return {?WebInspector.StatusBarButton}
+     */
+    button: function()
+    {
+        if (!WebInspector.dockController.canDock())
+            return null;
+
+        if (!this._dockToggleButton) {
+            var states = [WebInspector.DockController.State.DockedToBottom, WebInspector.DockController.State.Undocked, WebInspector.DockController.State.DockedToRight];
+            var titles = [WebInspector.UIString("Dock to main window."), WebInspector.UIString("Undock into separate window."), WebInspector.UIString("Dock to main window.")];
+            if (WebInspector.experimentsSettings.dockToLeft.isEnabled()) {
+                states.push(WebInspector.DockController.State.DockedToLeft);
+                titles.push(WebInspector.UIString("Dock to main window."));
+            }
+
+            this._dockToggleButton = new WebInspector.StatusBarStatesSettingButton(
+                    "dock-status-bar-item",
+                    states,
+                    titles,
+                    WebInspector.settings.currentDockState,
+                    WebInspector.settings.lastDockState,
+                    WebInspector.dockController._dockSideChanged.bind(WebInspector.dockController));
+            this._dockToggleButton.toggleInitialState();
+        }
+        return this._dockToggleButton;
+    }
+}
+
+/**
  * @type {!WebInspector.DockController}
  */
 WebInspector.dockController;