[DevTools] Improve Device Mode icons.

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 19 matching lines @@
 
 /**
  * @constructor
  * @param {string} className
  * @param {!Element=} parentElement
  */
 WebInspector.Toolbar = function(className, parentElement)
 {
     /** @type {!Array.<!WebInspector.ToolbarItem>} */
     this._items = [];
+    this._reverse = false;
     this.element = parentElement ? parentElement.createChild("div") : createElement("div");
     this.element.className = className;
     this.element.classList.add("toolbar");
     this._shadowRoot = WebInspector.createShadowRootWithCoreStyles(this.element, "ui/toolbar.css");
     this._contentElement = this._shadowRoot.createChild("div", "toolbar-shadow");
-    this._contentElement.createChild("content");
+    this._insertionPoint = this._contentElement.createChild("content");
 }
 
 WebInspector.Toolbar.prototype = {
-    makeWrappable: function()
+    /**
+     * @param {boolean=} reverse
+     */
+    makeWrappable: function(reverse)
     {
         this._contentElement.classList.add("wrappable");
+        this._reverse = !!reverse;
+        if (reverse)
+            this._contentElement.classList.add("wrappable-reverse");
     },
 
     makeVertical: function()
     {
         this._contentElement.classList.add("vertical");
     },
 
     makeBlueOnHover: function()
     {
         this._contentElement.classList.add("toolbar-blue-on-hover");
@@ skipping 13 matching lines @@
             item.setEnabled(enabled);
     },
 
     /**
      * @param {!WebInspector.ToolbarItem} item
      */
     appendToolbarItem: function(item)
     {
         this._items.push(item);
         item._toolbar = this;
-        this._contentElement.insertBefore(item.element, this._contentElement.lastChild);
+        if (this._reverse)
+            this._contentElement.insertBefore(item.element, this._insertionPoint.nextSibling);
+        else
+            this._contentElement.insertBefore(item.element, this._insertionPoint);
         this._hideSeparatorDupes();
     },
 
     appendSeparator: function()
     {
         this.appendToolbarItem(new WebInspector.ToolbarSeparator());
     },
 
     /**
      * @param {string} text
      */
     appendText: function(text)
     {
         var item = new WebInspector.ToolbarTextGlyphItem();
         item.setText(text);
         this.appendToolbarItem(item);
     },
 
     removeToolbarItems: function()
     {
         for (var item of this._items)
             delete item._toolbar;
         this._items = [];
         this._contentElement.removeChildren();
-        this._contentElement.createChild("content");
+        this._insertionPoint = this._contentElement.createChild("content");
     },
 
     /**
      * @param {string} color
      */
     setColor: function(color)
     {
         var style = createElement("style");
         style.textContent = ".toolbar-glyph { background-color: " + color + " !important }";
         this._shadowRoot.appendChild(style);
@@ skipping 187 matching lines @@
     },
 
     /**
      * @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);
+    },
+
     __proto__: WebInspector.ToolbarItem.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.ToolbarTextGlyphItem}
  * @param {string} title
  * @param {string} glyph
  */
 WebInspector.ToolbarButton = function(title, glyph)
@@ skipping 581 matching lines @@
             for (var i = 0; i < items.length; ++i) {
                 var item = items[i];
                 if (item)
                     this.appendToolbarItem(item);
             }
         }
     },
 
     __proto__: WebInspector.Toolbar.prototype
 }