DevTools: only allow status bar items in status bars.

Source/devtools/front_end/ui/StatusBarButton.js

 /*
  * Copyright (C) 2009 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 13 matching lines @@
  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @constructor
  * @extends {WebInspector.Object}
- * @param {string} elementType
+ * @param {!Element} element
  */
-WebInspector.StatusBarItem = function(elementType)
+WebInspector.StatusBarItem = function(element)
 {
-    this.element = createElement(elementType);
+    this.element = element;
+    this.element.classList.add("status-bar-item");
     this._enabled = true;
     this._visible = true;
 }
 
 WebInspector.StatusBarItem.prototype = {
     /**
      * @param {boolean} value
      */
     setEnabled: function(value)
     {
@@ skipping 31 matching lines @@
 }
 
 /**
  * @constructor
  * @extends {WebInspector.StatusBarItem}
  * @param {!Array.<string>} counters
  * @param {string=} className
  */
 WebInspector.StatusBarCounter = function(counters, className)
 {
-    WebInspector.StatusBarItem.call(this, "div");
-    this.element.className = "status-bar-item status-bar-counter hidden";
+    WebInspector.StatusBarItem.call(this, createElementWithClass("div", "status-bar-counter hidden"));
     if (className)
         this.element.classList.add(className);
     this.element.addEventListener("click", this._clicked.bind(this), false);
     /** @type {!Array.<!{element: !Element, counter: string, value: number, title: string}>} */
     this._counters = [];
     for (var i = 0; i < counters.length; ++i) {
         var element = this.element.createChild("span", "status-bar-counter-item");
         element.createChild("div", counters[i]);
         element.createChild("span");
         this._counters.push({counter: counters[i], element: element, value: 0, title: ""});
@@ skipping 56 matching lines @@
 }
 
 /**
  * @constructor
  * @extends {WebInspector.StatusBarItem}
  * @param {string} text
  * @param {string=} className
  */
 WebInspector.StatusBarText = function(text, className)
 {
-    WebInspector.StatusBarItem.call(this, "span");
-    this.element.className = "status-bar-item status-bar-text";
+    WebInspector.StatusBarItem.call(this, createElementWithClass("span", "status-bar-text"));
     if (className)
         this.element.classList.add(className);
     this.element.textContent = text;
 }
 
 WebInspector.StatusBarText.prototype = {
     /**
      * @param {string} text
      */
     setText: function(text)
     {
         this.element.textContent = text;
     },
 
     __proto__: WebInspector.StatusBarItem.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.StatusBarItem}
  * @param {string=} placeholder
  * @param {number=} width
  */
 WebInspector.StatusBarInput = function(placeholder, width)
 {
-    WebInspector.StatusBarItem.call(this, "input");
-    this.element.className = "status-bar-item";
+    WebInspector.StatusBarItem.call(this, createElementWithClass("input", "status-bar-item"));
     this.element.addEventListener("input", this._onChangeCallback.bind(this), false);
     if (width)
         this.element.style.width = width + "px";
     if (placeholder)
         this.element.setAttribute("placeholder", placeholder);
     this._value = "";
 }
 
 WebInspector.StatusBarInput.Event = {
     TextChanged: "TextChanged"
@@ skipping 27 matching lines @@
 
 /**
  * @constructor
  * @extends {WebInspector.StatusBarItem}
  * @param {string} title
  * @param {string} className
  * @param {number=} states
  */
 WebInspector.StatusBarButtonBase = function(title, className, states)
 {
-    WebInspector.StatusBarItem.call(this, "button");
-    this.element.className = className + " status-bar-item";
+    WebInspector.StatusBarItem.call(this, createElementWithClass("button", className + " status-bar-item"));
     this.element.addEventListener("click", this._clicked.bind(this), false);
     this._longClickController = new WebInspector.LongClickController(this.element);
     this._longClickController.addEventListener(WebInspector.LongClickController.Events.LongClick, this._onLongClick.bind(this));
     this._longClickController.addEventListener(WebInspector.LongClickController.Events.LongPress, this._onLongPress.bind(this));
 
     this._states = states;
     if (!states)
         this._states = 2;
 
     if (states == 2)
@@ skipping 219 matching lines @@
  * @constructor
  * @extends {WebInspector.StatusBarButtonBase}
  * @param {string} title
  * @param {string} className
  * @param {number=} states
  */
 WebInspector.StatusBarButton = function(title, className, states)
 {
     WebInspector.StatusBarButtonBase.call(this, title, className, states);
 
-    this.element.createChild("div", "glyph");
+    this._glyphElement = this.element.createChild("div", "glyph");
 }
 
 WebInspector.StatusBarButton.prototype = {
+    /**
+     * @param {string} iconURL
+     */
+    setBackgroundImage: function(iconURL)
+    {
+        this.element.style.backgroundImage = "url(" + iconURL + ")";
+        this._glyphElement.classList.add("hidden");
+    },
+
     __proto__: WebInspector.StatusBarButtonBase.prototype
 }
 
 /**
  * @constructor
+ * @param {!Element} parentElement
+ */
+WebInspector.StatusBar = function(parentElement)
+{
+    /** @type {!Array.<!WebInspector.StatusBarItem>} */
+    this._items = [];
+    this.element = parentElement.createChild("div", "status-bar");
+}
+
+WebInspector.StatusBar.prototype = {
+    /**
+     * @param {boolean} enabled
+     */
+    setEnabled: function(enabled)
+    {
+        for (var item of this._items)
+            item.setEnabled(enabled);
+    },
+
+    /**
+     * @param {!WebInspector.StatusBarItem} item
+     */
+    appendStatusBarItem: function(item)
+    {
+        this._items.push(item);
+        this.element.appendChild(item.element);
+    },
+
+    removeStatusBarItems: function()
+    {
+        this._items = [];
+        this.element.removeChildren();
+    }
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.StatusBarItem}
+ */
+WebInspector.StatusBarSeparator = function()
+{
+    WebInspector.StatusBarItem.call(this, createElementWithClass("div", "status-bar-divider"));
+}
+
+WebInspector.StatusBarSeparator.prototype = {
+    __proto__: WebInspector.StatusBarItem.prototype
+}
+
+/**
+ * @constructor
  * @extends {WebInspector.StatusBarButtonBase}
  * @param {string} title
  * @param {string} className
  * @param {string} text
  * @param {number=} states
  */
 WebInspector.StatusBarTextButton = function(title, className, text, states)
 {
     WebInspector.StatusBarButtonBase.call(this, title, className, states);
 
@@ skipping 20 matching lines @@
 }
 
 /**
  * @constructor
  * @extends {WebInspector.StatusBarItem}
  * @param {?function(!Event)} changeHandler
  * @param {string=} className
  */
 WebInspector.StatusBarComboBox = function(changeHandler, className)
 {
-    WebInspector.StatusBarItem.call(this, "span");
-    this.element.className = "status-bar-select-container";
+    WebInspector.StatusBarItem.call(this, createElementWithClass("span", "status-bar-select-container"));
 
     this._selectElement = this.element.createChild("select", "status-bar-item");
     this.element.createChild("div", "status-bar-select-arrow");
     if (changeHandler)
         this._selectElement.addEventListener("change", changeHandler, false);
     if (className)
         this._selectElement.classList.add(className);
 }
 
 WebInspector.StatusBarComboBox.prototype = {
@@ skipping 92 matching lines @@
     {
         return this._selectElement.selectedIndex;
     },
 
     __proto__: WebInspector.StatusBarItem.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.StatusBarItem}
- * @param {string} title
+ * @param {string} text
+ * @param {string=} title
+ * @param {!WebInspector.Setting=} setting
  */
-WebInspector.StatusBarCheckbox = function(title)
+WebInspector.StatusBarCheckbox = function(text, title, setting)
 {
-    WebInspector.StatusBarItem.call(this, "label");
-    this.element.classList.add("status-bar-item", "checkbox");
+    WebInspector.StatusBarItem.call(this, createElementWithClass("label", "checkbox"));
     this.inputElement = this.element.createChild("input");
     this.inputElement.type = "checkbox";
-    this.element.createTextChild(title);
+    this.element.createTextChild(text);
+    if (title)
+        this.element.title = title;
+    if (setting)
+        WebInspector.SettingsUI.bindCheckbox(this.inputElement, setting);
 }
 
 WebInspector.StatusBarCheckbox.prototype = {
     /**
      * @return {boolean}
      */
     checked: function()
     {
         return this.inputElement.checked;
     },
@@ skipping 88 matching lines @@
         var options = [];
         for (var index = 0; index < this._states.length; index++) {
             if (this._states[index] !== this.state() && this._states[index] !== this._currentState)
                 options.push(this._buttons[index]);
         }
         return options;
     },
 
     __proto__: WebInspector.StatusBarButton.prototype
 }