DevTools: beautified styles sidebar toolbar.

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

Index: third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js b/third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js
index 02804461d57ed6b5eef39c7f8c2170346d9182a6..7175fe987d8af836c3b8df728c9ef3eb610e8c6f 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js
@@ -106,7 +106,7 @@ WebInspector.Toolbar.prototype = {
      */
     appendText: function(text)
     {
-        this.appendToolbarItem(new WebInspector.ToolbarLabel(text));
+        this.appendToolbarItem(new WebInspector.ToolbarText(text));
     },
 
     removeToolbarItems: function()
@@ -182,6 +182,17 @@ WebInspector.ToolbarItem = function(element)
 }
 
 WebInspector.ToolbarItem.prototype = {
+    /**
+     * @param {string} title
+     */
+    setTitle: function(title)
+    {
+        if (this._title === title)
+            return;
+        this._title = title;
+        WebInspector.Tooltip.install(this.element, title);
+    },
+
     _mouseEnter: function()
     {
         this.element.classList.add("hover");
@@ -236,21 +247,52 @@ WebInspector.ToolbarItem.prototype = {
  * @constructor
  * @extends {WebInspector.ToolbarItem}
  * @param {string=} text
+ */
+WebInspector.ToolbarText = function(text)
+{
+    WebInspector.ToolbarItem.call(this, createElementWithClass("div", "toolbar-text"));
+    this.element.classList.add("toolbar-text");
+    this.setText(text || "");
+}
+
+WebInspector.ToolbarText.prototype = {
+     /**
+     * @param {string} text
+     */
+    setText: function(text)
+    {
+        this.element.textContent = text;
+    },
+
+    __proto__: WebInspector.ToolbarItem.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.ToolbarItem}
+ * @param {string} title
  * @param {string=} glyph
+ * @param {string=} text
  */
-WebInspector.ToolbarLabel = function(text, glyph)
+WebInspector.ToolbarButton = function(title, glyph, text)
 {
-    WebInspector.ToolbarItem.call(this, createElementWithClass("button", "toolbar-text-glyph"));
+    WebInspector.ToolbarItem.call(this, createElementWithClass("button", "toolbar-button"));
+    this.element.addEventListener("click", this._clicked.bind(this), false);
+    this.element.addEventListener("mousedown", this._mouseDown.bind(this), false);
+    this.element.addEventListener("mouseup", this._mouseUp.bind(this), false);
+
     this._glyphElement = this.element.createChild("div", "toolbar-glyph hidden");
     this._textElement = this.element.createChild("div", "toolbar-text hidden");
-    this.setText(text || "");
+
+    this.setTitle(title);
     if (glyph)
         this.setGlyph(glyph);
+    this.setText(text || "");
     this._state = "";
     this._title = "";
 }
 
-WebInspector.ToolbarLabel.prototype = {
+WebInspector.ToolbarButton.prototype = {
     /**
      * @param {string} text
      */
@@ -308,25 +350,6 @@ WebInspector.ToolbarLabel.prototype = {
     },
 
     /**
-     * @param {string} title
-     */
-    setTitle: function(title)
-    {
-        if (this._title === title)
-            return;
-        this._title = title;
-        WebInspector.Tooltip.install(this.element, title);
-    },
-
-    /**
-     * @param {boolean} bold
-     */
-    setBold: function(bold)
-    {
-        this.element.classList.toggle("toolbar-bold", bold);
-    },
-
-    /**
      * @param {boolean} dimmed
      */
     setDimmed: function(dimmed)
@@ -340,28 +363,6 @@ WebInspector.ToolbarLabel.prototype = {
         this.element.createChild("div", "toolbar-dropdown-arrow");
     },
 
-    __proto__: WebInspector.ToolbarItem.prototype
-}
-
-/**
- * @constructor
- * @extends {WebInspector.ToolbarLabel}
- * @param {string} title
- * @param {string} glyph
- */
-WebInspector.ToolbarButton = function(title, glyph)
-{
-    WebInspector.ToolbarLabel.call(this);
-    this.element.classList.add("toolbar-button");
-    this.element.addEventListener("click", this._clicked.bind(this), false);
-    this.element.addEventListener("mousedown", this._mouseDown.bind(this), false);
-    this.element.addEventListener("mouseup", this._mouseUp.bind(this), false);
-    this.setBold(true);
-    this.setTitle(title);
-    this.setGlyph(glyph);
-}
-
-WebInspector.ToolbarButton.prototype = {
     /**
      * @param {!Event} event
      */
@@ -387,7 +388,7 @@ WebInspector.ToolbarButton.prototype = {
         this.dispatchEventToListeners("mouseup", event);
     },
 
-    __proto__: WebInspector.ToolbarLabel.prototype
+    __proto__: WebInspector.ToolbarItem.prototype
 }
 
 /**
@@ -440,10 +441,13 @@ WebInspector.ToolbarInput.prototype = {
 /**
  * @constructor
  * @extends {WebInspector.ToolbarButton}
+ * @param {string} title
+ * @param {string=} glyph
+ * @param {string=} text
  */
-WebInspector.ToolbarToggle = function(title, glyph)
+WebInspector.ToolbarToggle = function(title, glyph, text)
 {
-    WebInspector.ToolbarButton.call(this, title, glyph);
+    WebInspector.ToolbarButton.call(this, title, glyph, text);
     this._toggled = false;
     this.setState("off");
 }
@@ -903,7 +907,7 @@ WebInspector.ExtensibleToolbar.prototype = {
             if (extensions[i].descriptor()["location"] === location)
                 promises.push(resolveItem(extensions[i]));
         }
-        Promise.all(promises).then(appendItemsInOrder.bind(this));
+        this._promise = Promise.all(promises).then(appendItemsInOrder.bind(this));
 
         /**
          * @param {!Runtime.Extension} extension
@@ -941,5 +945,13 @@ WebInspector.ExtensibleToolbar.prototype = {
         }
     },
 
+    /**
+     * @return {!Promise}
+     */
+    onLoad: function()
+    {
+        return this._promise;
+    },
+
     __proto__: WebInspector.Toolbar.prototype
 }