DevTools: beautified styles sidebar toolbar.

third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  */
 WebInspector.DeviceModeView = function()
 {
@@ skipping 297 matching lines @@
  */
 WebInspector.DeviceModeView.Toolbar = function(model, showMediaInspectorSetting, showRulersSetting)
 {
     this._model = model;
     this._showMediaInspectorSetting = showMediaInspectorSetting;
     this._showRulersSetting = showRulersSetting;
     /** @type {!Map<!WebInspector.EmulatedDevice, !WebInspector.EmulatedDevice.Mode>} */
     this._lastMode = new Map();
     /** @type {?WebInspector.EmulatedDevice} */
     this._lastDevice = null;
-    /** @type {!Array<!WebInspector.ToolbarLabel>} */
+    /** @type {!Array<!WebInspector.ToolbarButton>} */
     this._appliedSizeItems = [];
     /** @type {!Array<!WebInspector.ToolbarMenuButton>} */
     this._scaleItems = [];
     /** @type {?Element} */
     this._visibleToolbar = null;
 
     this._element = createElementWithClass("div", "device-mode-toolbar");
 
     var leftContainer = this._element.createChild("div", "device-mode-toolbar-left");
     var leftToolbar = new WebInspector.Toolbar("", leftContainer);
@@ skipping 10 matching lines @@
 
     var middle = this._element.createChild("div", "device-mode-toolbar-middle-container");
     this._noneToolbar = this._wrapMiddleToolbar(middle, this._createNoneToolbar());
     this._responsiveToolbar = this._wrapMiddleToolbar(middle, this._createResponsiveToolbar());
     this._deviceToolbar = this._wrapMiddleToolbar(middle, this._createDeviceToolbar());
 
     var rightContainer = this._element.createChild("div", "device-mode-toolbar-right");
     rightContainer.createChild("div", "device-mode-toolbar-spacer");
     var rightToolbar = new WebInspector.Toolbar("", rightContainer);
     rightToolbar.makeWrappable(true);
-    this._uaItem = new WebInspector.ToolbarLabel();
+    this._uaItem = new WebInspector.ToolbarText();
     this._uaItem.setVisible(false);
     this._uaItem.setTitle(WebInspector.UIString("User agent type"));
     rightToolbar.appendToolbarItem(this._uaItem);
-    this._deviceScaleItem = new WebInspector.ToolbarLabel();
+    this._deviceScaleItem = new WebInspector.ToolbarText();
     this._deviceScaleItem.setVisible(false);
     this._deviceScaleItem.setTitle(WebInspector.UIString("Device pixel ratio"));
     rightToolbar.appendToolbarItem(this._deviceScaleItem);
     rightToolbar.appendSeparator();
     var moreOptionsButton = new WebInspector.ToolbarMenuButton(this._appendMenuItems.bind(this));
     moreOptionsButton.setTitle(WebInspector.UIString("More options"));
     rightToolbar.appendToolbarItem(moreOptionsButton);
 
     this._persistenceSetting = WebInspector.settings.createSetting("emulation.deviceModeViewPersistence", {type: WebInspector.DeviceModeModel.Type.None, device: "", orientation: "", mode: ""});
     this._restored = false;
@@ skipping 84 matching lines @@
         this._appendScaleItem(toolbar);
 
         return toolbar;
     },
 
     /**
      * @param {!WebInspector.Toolbar} toolbar
      */
     _appendAppliedSizeItems: function(toolbar)
     {
-        var item = new WebInspector.ToolbarLabel();
+        var item = new WebInspector.ToolbarText("");
         this._appliedSizeItems.push(item);
         toolbar.appendToolbarItem(item);
     },
 
     /**
      * @param {!WebInspector.Toolbar} toolbar
      */
     _appendScaleItem: function(toolbar)
     {
         var scaleItem = new WebInspector.ToolbarMenuButton(this._appendScaleMenuItems.bind(this));
         scaleItem.setTitle(WebInspector.UIString("Zoom"));
         scaleItem.setGlyph("");
-        scaleItem.setBold(false);
-        scaleItem.setDimmed(true);
         scaleItem.addDropDownArrow();
         toolbar.appendToolbarItem(scaleItem);
         this._scaleItems.push(scaleItem);
     },
 
     /**
      * @param {!WebInspector.ContextMenu} contextMenu
      */
     _appendScaleMenuItems: function(contextMenu)
     {
@@ skipping 323 matching lines @@
             this._heightInput.placeholder = size.height;
             this._cachedSize = size;
         }
 
         if (this._model.scale() !== this._cachedScale) {
             for (var item of this._scaleItems)
                 item.setText(WebInspector.UIString("%.0f%%", this._model.scale() * 100));
             this._cachedScale = this._model.scale();
         }
 
         var offscreen = this._model.screenRect().width > this._model.visiblePageRect().width || this._model.screenRect().height > this._model.visiblePageRect().height;

[dgozman, 2016/01/14 22:05:21]

Remove the whole offscreen code then.

-        if (offscreen !== this._cachedOffscreen) {
-            for (var item of this._scaleItems)
-                item.setDimmed(!offscreen);
+        if (offscreen !== this._cachedOffscreen)
             this._cachedOffscreen = offscreen;
-        }
 
         var deviceScale = this._model.deviceScaleFactorSetting().get();
         if (deviceScale !== this._cachedDeviceScale) {
             this._deviceScaleItem.setVisible(!!deviceScale);
             this._deviceScaleItem.setText(WebInspector.UIString("DPR: %.1f", deviceScale));
             this._cachedDeviceScale = deviceScale;
         }
 
         var uaType = this._model.type() === WebInspector.DeviceModeModel.Type.Responsive ? this._model.uaSetting().get() : WebInspector.DeviceModeModel.UA.Mobile;
         if (uaType !== this._cachedUaType) {
@@ skipping 259 matching lines @@
         } else {
             this._deviceModeView.detach();
             this._inspectedPagePlaceholder.restoreMinimumSizeAndMargins();
             this._inspectedPagePlaceholder.show(this.element);
             this._deviceModeView._model.emulate(WebInspector.DeviceModeModel.Type.None, null, null);
         }
     },
 
     __proto__: WebInspector.VBox.prototype
 }