DevTools: only allow status bar items in status bars.

Source/devtools/front_end/profiler/CanvasProfileView.js

 /*
  * Copyright (C) 2013 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 49 matching lines @@
     replayImageParent.createChild("span"); // Helps to align the image vertically.
     this._replayImageElement = replayImageParent.createChild("img");
     this._debugInfoElement = replayImageContainer.createChild("div", "canvas-debug-info hidden");
     this._spinnerIcon = replayImageContainer.createChild("div", "spinner-icon small hidden");
 
     var replayLogContainerView = new WebInspector.VBox();
     replayLogContainerView.setMinimumSize(22, 22);
     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());
 
     /** @type {!Object.<string, boolean>} */
     this._replayContexts = {};
 
     var columns = [
         {title: "#", sortable: false, width: "5%"},
         {title: WebInspector.UIString("Call"), sortable: false, width: "75%", disclosure: true},
@@ skipping 18 matching lines @@
  * @type {number}
  */
 WebInspector.CanvasProfileView.TraceLogPollingInterval = 500;
 
 WebInspector.CanvasProfileView.prototype = {
     dispose: function()
     {
         this._linkifier.reset();
     },
 
-    get statusBarItems()
+    /**
+     * @return {!Array.<!WebInspector.StatusBarItem>}
+     */
+    statusBarItems: function()
     {
         return [];
     },
 
     get profile()
     {
         return this._profile;
     },
 
     _onReplayImageResize: function()
     {
         var parent = this._replayImageElement.parentElement;
         this._replayImageElement.style.maxWidth = parent.clientWidth + "px";
         this._replayImageElement.style.maxHeight = parent.clientHeight + "px";
     },
 
     /**
      * @override
      * @return {!Array.<!Element>}
      */
     elementsToRestoreScrollPositionsFor: function()
     {
         return [this._logGrid.scrollContainer];
     },
 
     /**
-     * @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();
     },
 
     _updateReplayInfoResizeWidget: function()
     {
         this._replayInfoResizeWidgetElement.classList.toggle("hidden", this._replayInfoSplitView.showMode() !== WebInspector.SplitView.ShowMode.Both);
     },
 
     /**
      * @param {!Event} event
      */
     _onMouseClick: function(event)
     {
         var resourceLinkElement = event.target.enclosingNodeOrSelfWithClass("canvas-formatted-resource");
         if (resourceLinkElement) {
             this._replayInfoSplitView.showBoth();
             this._replayStateView.selectResource(resourceLinkElement.__resourceId);
             event.consume(true);
             return;
         }
         if (event.target.enclosingNodeOrSelfWithClass("webkit-html-resource-link"))
             event.consume(false);
     },
 
     /**
-     * @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);
         button.addEventListener("longClickDown", clickCallback, this);
         button.addEventListener("longClickPress", clickCallback, this);
     },
 
     _onReplayContextChanged: function()
     {
         var selectedContextId = this._replayContextSelector.selectedOption().value;
@@ skipping 476 matching lines @@
      */
     targetRemoved: function(target)
     {
         if (this._target !== target)
             return;
         this._target = null;
         this._target.resourceTreeModel.removeEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameAdded, this._frameAdded, this);
         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()
     {
         if (this._isSingleFrameMode())
             return WebInspector.UIString("Capture next canvas frame.");
         else
             return this._recording ? WebInspector.UIString("Stop capturing canvas frames.") : WebInspector.UIString("Start capturing canvas frames.");
     },
 
@@ skipping 605 matching lines @@
     },
 
     clearResourceStates: function()
     {
         this._currentResourceStates = {};
         this.dispatchEventToListeners(WebInspector.CanvasTraceLogPlayerProxy.Events.CanvasReplayStateChanged);
     },
 
     __proto__: WebInspector.Object.prototype
 }