DevTools: only allow status bar items in status bars.

Source/devtools/front_end/profiler/CanvasProfileView.js

Index: Source/devtools/front_end/profiler/CanvasProfileView.js
diff --git a/Source/devtools/front_end/profiler/CanvasProfileView.js b/Source/devtools/front_end/profiler/CanvasProfileView.js
index bf1bfb8c95c4b18577caee2de17f4770a0e26ecf..8fbf3f1051b942a202e39e66cd472cb0803b7c21 100644
--- a/Source/devtools/front_end/profiler/CanvasProfileView.js
+++ b/Source/devtools/front_end/profiler/CanvasProfileView.js
@@ -67,21 +67,21 @@ WebInspector.CanvasProfileView = function(profile)
     replayLogContainerView.show(this._imageSplitView.sidebarElement());
 
     var replayLogContainer = replayLogContainerView.element;
-    var controlsContainer = replayLogContainer.createChild("div", "status-bar");
+    var controlsToolbar = new WebInspector.StatusBar(replayLogContainer);
     var logGridContainer = replayLogContainer.createChild("div", "canvas-replay-log");
 
-    this._createControlButton(controlsContainer, "canvas-replay-first-step", WebInspector.UIString("First call."), this._onReplayFirstStepClick.bind(this));
-    this._createControlButton(controlsContainer, "canvas-replay-prev-step", WebInspector.UIString("Previous call."), this._onReplayStepClick.bind(this, false));
-    this._createControlButton(controlsContainer, "canvas-replay-next-step", WebInspector.UIString("Next call."), this._onReplayStepClick.bind(this, true));
-    this._createControlButton(controlsContainer, "canvas-replay-prev-draw", WebInspector.UIString("Previous drawing call."), this._onReplayDrawingCallClick.bind(this, false));
-    this._createControlButton(controlsContainer, "canvas-replay-next-draw", WebInspector.UIString("Next drawing call."), this._onReplayDrawingCallClick.bind(this, true));
-    this._createControlButton(controlsContainer, "canvas-replay-last-step", WebInspector.UIString("Last call."), this._onReplayLastStepClick.bind(this));
+    this._createControlButton(controlsToolbar, "canvas-replay-first-step", WebInspector.UIString("First call."), this._onReplayFirstStepClick.bind(this));
+    this._createControlButton(controlsToolbar, "canvas-replay-prev-step", WebInspector.UIString("Previous call."), this._onReplayStepClick.bind(this, false));
+    this._createControlButton(controlsToolbar, "canvas-replay-next-step", WebInspector.UIString("Next call."), this._onReplayStepClick.bind(this, true));
+    this._createControlButton(controlsToolbar, "canvas-replay-prev-draw", WebInspector.UIString("Previous drawing call."), this._onReplayDrawingCallClick.bind(this, false));
+    this._createControlButton(controlsToolbar, "canvas-replay-next-draw", WebInspector.UIString("Next drawing call."), this._onReplayDrawingCallClick.bind(this, true));
+    this._createControlButton(controlsToolbar, "canvas-replay-last-step", WebInspector.UIString("Last call."), this._onReplayLastStepClick.bind(this));
 
     this._replayContextSelector = new WebInspector.StatusBarComboBox(this._onReplayContextChanged.bind(this));
     this._replayContextSelector.createOption(WebInspector.UIString("<screenshot auto>"), WebInspector.UIString("Show screenshot of the last replayed resource."), "");
-    controlsContainer.appendChild(this._replayContextSelector.element);
+    controlsToolbar.appendStatusBarItem(this._replayContextSelector);
 
-    this._installReplayInfoSidebarWidgets(controlsContainer);
+    this._installReplayInfoSidebarWidgets(controlsToolbar);
 
     this._replayStateView = new WebInspector.CanvasReplayStateView(this._traceLogPlayer);
     this._replayStateView.show(this._replayInfoSplitView.sidebarElement());
@@ -120,7 +120,10 @@ WebInspector.CanvasProfileView.prototype = {
         this._linkifier.reset();
     },
 
-    get statusBarItems()
+    /**
+     * @return {!Array.<!WebInspector.StatusBarItem>}
+     */
+    statusBarItems: function()
     {
         return [];
     },
@@ -147,18 +150,18 @@ WebInspector.CanvasProfileView.prototype = {
     },
 
     /**
-     * @param {!Element} controlsContainer
+     * @param {!WebInspector.StatusBar} controlsToolbar
      */
-    _installReplayInfoSidebarWidgets: function(controlsContainer)
+    _installReplayInfoSidebarWidgets: function(controlsToolbar)
     {
-        this._replayInfoResizeWidgetElement = controlsContainer.createChild("div", "resizer-widget");
+        this._replayInfoResizeWidgetElement = controlsToolbar.element.createChild("div", "resizer-widget");
         this._replayInfoSplitView.addEventListener(WebInspector.SplitView.Events.ShowModeChanged, this._updateReplayInfoResizeWidget, this);
         this._updateReplayInfoResizeWidget();
         this._replayInfoSplitView.installResizer(this._replayInfoResizeWidgetElement);
 
         this._toggleReplayStateSidebarButton = this._replayInfoSplitView.createShowHideSidebarButton("sidebar", "canvas-sidebar-show-hide-button");
 
-        controlsContainer.appendChild(this._toggleReplayStateSidebarButton.element);
+        controlsToolbar.element.appendChild(this._toggleReplayStateSidebarButton.element);
         this._replayInfoSplitView.hideSidebar();
     },
 
@@ -184,15 +187,15 @@ WebInspector.CanvasProfileView.prototype = {
     },
 
     /**
-     * @param {!Element} parent
+     * @param {!WebInspector.StatusBar} toolbar
      * @param {string} className
      * @param {string} title
      * @param {function(this:WebInspector.CanvasProfileView)} clickCallback
      */
-    _createControlButton: function(parent, className, title, clickCallback)
+    _createControlButton: function(toolbar, className, title, clickCallback)
     {
         var button = new WebInspector.StatusBarButton(title, className + " canvas-replay-button");
-        parent.appendChild(button.element);
+        toolbar.appendStatusBarItem(button);
 
         button.makeLongClickEnabled();
         button.addEventListener("click", clickCallback, this);
@@ -689,9 +692,12 @@ WebInspector.CanvasProfileType.prototype = {
         this._target.resourceTreeModel.removeEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameDetached, this._frameRemoved, this);
     },
 
-    get statusBarItems()
+    /**
+     * @return {!Array.<!WebInspector.StatusBarItem>}
+     */
+    statusBarItems: function()
     {
-        return [this._capturingModeSelector.element, this._frameSelector.element];
+        return [this._capturingModeSelector, this._frameSelector];
     },
 
     get buttonTooltip()