DevTools: make toolbar button click targets square

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 26 matching lines @@
     /** @type {!Array.<!WebInspector.ToolbarItem>} */
     this._items = [];
     this.element = parentElement ? parentElement.createChild("div", "toolbar") : createElementWithClass("div", "toolbar");
     this._shadowRoot = WebInspector.createShadowRootWithCoreStyles(this.element);
     this._shadowRoot.appendChild(WebInspector.Widget.createStyleElement("ui/toolbar.css"));
     this._contentElement = this._shadowRoot.createChild("div", "toolbar-shadow");
     this._contentElement.createChild("content");
 }
 
 WebInspector.Toolbar.prototype = {
-    makeNarrow: function()
-    {
-        this._contentElement.classList.add("narrow");
-    },
-
     makeVertical: function()
     {
         this._contentElement.classList.add("vertical");
     },
 
     /**
      * @param {boolean} enabled
      */
     setEnabled: function(enabled)
     {
         for (var item of this._items)
             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);
+        this._hideSeparatorDupes();
+    },
+
+    appendSeparator: function()
+    {
+        this.appendToolbarItem(new WebInspector.ToolbarSeparator());
     },
 
     removeToolbarItems: function()
     {
+        for (var item of this._items)
+            delete item._toolbar;
         this._items = [];
         this._contentElement.removeChildren();
         this._contentElement.createChild("content");
     },
 
     /**
      * @param {string} color
      */
     setColor: function(color)
     {
         var style = createElement("style");
         style.textContent = "button.toolbar-item .glyph { background-color: " + color + " !important }";
         this._shadowRoot.appendChild(style);
     },
 
     /**
      * @param {string} color
      */
     setToggledColor: function(color)
     {
         var style = createElement("style");
         style.textContent = "button.toolbar-item.toggled-on .glyph { background-color: " + color + " !important }";
         this._shadowRoot.appendChild(style);
+    },
+
+    _hideSeparatorDupes: function()
+    {
+        // Don't hide first and last separators if they were added explicitly.
+        var previousIsSeparator = true;
+        var lastSeparator;
+        for (var i = 1; i < this._items.length; ++i) {
+            if (this._items[i] instanceof WebInspector.ToolbarSeparator) {
+                this._items[i].setVisible(!previousIsSeparator);
+                previousIsSeparator = true;
+                lastSeparator = this._items[i];
+                continue;
+            }
+            if (this._items[i].visible()) {
+                previousIsSeparator = false;
+                lastSeparator = null;
+            }
+        }
+        if (lastSeparator && lastSeparator !== this._items.peekLast())
+            lastSeparator.setVisible(false);
     }
 }
 
 /**
  * @constructor
  * @extends {WebInspector.Object}
  * @param {!Element} element
  */
 WebInspector.ToolbarItem = function(element)
 {
@@ skipping 30 matching lines @@
 
     /**
      * @param {boolean} x
      */
     setVisible: function(x)
     {
         if (this._visible === x)
             return;
         this.element.classList.toggle("hidden", !x);
         this._visible = x;
+        if (this._toolbar && !(this instanceof WebInspector.ToolbarSeparator))
+            this._toolbar._hideSeparatorDupes();
     },
 
     __proto__: WebInspector.Object.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.ToolbarItem}
  * @param {!Array.<string>} counters
  */
@@ skipping 320 matching lines @@
         buttons.push(mainButtonClone);
 
         var document = this.element.ownerDocument;
         document.documentElement.addEventListener("mouseup", mouseUp, false);
 
         var optionsGlassPane = new WebInspector.GlassPane(document);
         var optionsBar = new WebInspector.Toolbar(optionsGlassPane.element);
 
         optionsBar.element.classList.add("fill");
         optionsBar._contentElement.classList.add("floating");
-        const buttonHeight = 23;
+        const buttonHeight = 26;
 
         var hostButtonPosition = this.element.totalOffset();
 
         var topNotBottom = hostButtonPosition.top + buttonHeight * buttons.length < document.documentElement.offsetHeight;
 
         if (topNotBottom)
             buttons = buttons.reverse();
 
         optionsBar.element.style.height = (buttonHeight * buttons.length) + "px";
         if (topNotBottom)
@@ skipping 444 matching lines @@
         }
         Promise.all(promises).then(appendItemsInOrder.bind(this));
 
         /**
          * @param {!Runtime.Extension} extension
          * @return {!Promise.<?WebInspector.ToolbarItem>}
          */
         function resolveItem(extension)
         {
             var descriptor = extension.descriptor();
-            if (!descriptor.className)
+            if (descriptor["separator"])
+                return Promise.resolve(/** @type {?WebInspector.ToolbarItem} */(new WebInspector.ToolbarSeparator()));
+            if (!descriptor["className"])
                 return Promise.resolve(new WebInspector.ToolbarButton(WebInspector.UIString(descriptor["title"]), descriptor["elementClass"])).then(attachHandler);
             return extension.instancePromise().then(fetchItemFromProvider).then(attachHandler);
 
             /**
              * @param {!Object} provider
              */
             function fetchItemFromProvider(provider)
             {
                 return /** @type {!WebInspector.ToolbarItem.Provider} */ (provider).item();
             }
@@ skipping 24 matching lines @@
             for (var i = 0; i < items.length; ++i) {
                 var item = items[i];
                 if (item)
                     this.appendToolbarItem(item);
             }
         }
     },
 
     __proto__: WebInspector.Toolbar.prototype
 }