DevTools: beautified styles sidebar toolbar.

third_party/WebKit/Source/devtools/front_end/ui/Toolbar.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 88 matching lines @@
     appendSeparator: function()
     {
         this.appendToolbarItem(new WebInspector.ToolbarSeparator());
     },
 
     /**
      * @param {string} text
      */
     appendText: function(text)
     {
-        this.appendToolbarItem(new WebInspector.ToolbarLabel(text));
+        this.appendToolbarItem(new WebInspector.ToolbarText(text));
     },
 
     removeToolbarItems: function()
     {
         for (var item of this._items)
             delete item._toolbar;
         this._items = [];
         this._contentElement.removeChildren();
         this._insertionPoint = this._contentElement.createChild("content");
     },
@@ skipping 55 matching lines @@
 {
     this.element = element;
     this.element.classList.add("toolbar-item");
     this._visible = true;
     this._enabled = true;
     this.element.addEventListener("mouseenter", this._mouseEnter.bind(this), false);
     this.element.addEventListener("mouseleave", this._mouseLeave.bind(this), false);
 }
 
 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");
     },
 
     _mouseLeave: function()
     {
         this.element.classList.remove("hover");
     },
 
@@ skipping 34 matching lines @@
             this._toolbar._hideSeparatorDupes();
     },
 
     __proto__: WebInspector.Object.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
      */
     setText: function(text)
     {
         if (this._text === text)
             return;
         this._textElement.textContent = text;
         this._textElement.classList.toggle("hidden", !text);
         this._text = text;
@@ skipping 37 matching lines @@
     setState: function(state)
     {
         if (this._state === state)
             return;
         this.element.classList.remove("toolbar-state-" + this._state);
         this.element.classList.add("toolbar-state-" + state);
         this._state = state;
     },
 
     /**
-     * @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)
     {
         this.element.classList.toggle("toolbar-dimmed", dimmed);
     },
 
     addDropDownArrow: function()
     {
         this.element.classList.add("toolbar-has-dropdown");
         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
      */
     _clicked: function(event)
     {
         var defaultPrevented = this.dispatchEventToListeners("click", event);
         event.consume(defaultPrevented);
     },
 
     /**
      * @param {!Event} event
      */
     _mouseDown: function(event)
     {
         this.dispatchEventToListeners("mousedown", event);
     },
 
     /**
      * @param {!Event} event
      */
     _mouseUp: function(event)
     {
         this.dispatchEventToListeners("mouseup", event);
     },
 
-    __proto__: WebInspector.ToolbarLabel.prototype
+    __proto__: WebInspector.ToolbarItem.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.ToolbarItem}
  * @param {string=} placeholder
  * @param {number=} growFactor
  */
 WebInspector.ToolbarInput = function(placeholder, growFactor)
 {
@@ skipping 32 matching lines @@
     {
         this.dispatchEventToListeners(WebInspector.ToolbarInput.Event.TextChanged, this.element.value);
     },
 
     __proto__: WebInspector.ToolbarItem.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");
 }
 
 WebInspector.ToolbarToggle.prototype = {
     /**
      * @return {boolean}
      */
     toggled: function()
     {
@@ skipping 439 matching lines @@
      * @param {string} location
      */
     _loadItems: function(location)
     {
         var extensions = self.runtime.extensions(WebInspector.ToolbarItem.Provider);
         var promises = [];
         for (var i = 0; i < extensions.length; ++i) {
             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
          * @return {!Promise.<?WebInspector.ToolbarItem>}
          */
         function resolveItem(extension)
         {
             var descriptor = extension.descriptor();
             if (descriptor["separator"])
                 return Promise.resolve(/** @type {?WebInspector.ToolbarItem} */(new WebInspector.ToolbarSeparator()));
@@ skipping 17 matching lines @@
         function appendItemsInOrder(items)
         {
             for (var i = 0; i < items.length; ++i) {
                 var item = items[i];
                 if (item)
                     this.appendToolbarItem(item);
             }
         }
     },
 
+    /**
+     * @return {!Promise}
+     */
+    onLoad: function()
+    {
+        return this._promise;
+    },
+
     __proto__: WebInspector.Toolbar.prototype
 }