DevTools: add emulation toggle button and splash screen.

Source/devtools/front_end/ResponsiveDesignView.js

 // Copyright 2014 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}
  * @implements {WebInspector.OverridesSupport.PageResizer}
  * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder
  */
@@ skipping 17 matching lines @@
     this._warningMessage = this._canvasContainer.element.createChild("div", "responsive-design-warning hidden");
     this._warningMessage.createChild("div", "warning-icon-small");
     this._warningMessage.createChild("span");
     var warningCloseButton = this._warningMessage.createChild("div", "close-button");
     warningCloseButton.addEventListener("click", this._closeOverridesWarning.bind(this), false);
     WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.OverridesWarningUpdated, this._overridesWarningUpdated, this);
 
     this._slidersContainer = this._canvasContainer.element.createChild("div", "vbox responsive-design-sliders-container");
     var hbox = this._slidersContainer.createChild("div", "hbox flex-auto");
     this._heightSliderContainer = this._slidersContainer.createChild("div", "hbox responsive-design-slider-height");
-    this._resolutionHeightLabel = this._heightSliderContainer.createChild("div", "responsive-design-resolution-label responsive-design-resolution-height");
     this._pageContainer = hbox.createChild("div", "vbox flex-auto");
     this._widthSliderContainer = hbox.createChild("div", "vbox responsive-design-slider-width");
-    this._resolutionWidthLabel = this._widthSliderContainer.createChild("div", "responsive-design-resolution-label responsive-design-resolution-width");
 
     this._widthSlider = this._widthSliderContainer.createChild("div", "responsive-design-slider-thumb");
     this._widthSlider.createChild("div", "responsive-design-thumb-handle");
     this._createResizer(this._widthSlider, false);
     this._heightSlider = this._heightSliderContainer.createChild("div", "responsive-design-slider-thumb");
     this._heightSlider.createChild("div", "responsive-design-thumb-handle");
     this._createResizer(this._heightSlider, true);
 
     this._inspectedPagePlaceholder = inspectedPagePlaceholder;
     inspectedPagePlaceholder.show(this.element);
@@ skipping 50 matching lines @@
      * WebInspector.OverridesSupport.PageResizer override.
      * @param {number} dipWidth
      * @param {number} dipHeight
      * @param {number} scale
      */
     update: function(dipWidth, dipHeight, scale)
     {
         this._scale = scale;
         this._dipWidth = dipWidth;
         this._dipHeight = dipHeight;
-        this._resolutionWidthLabel.textContent = dipWidth + "px";
-        this._resolutionHeightLabel.textContent = dipHeight + "px";
         this._updateUI();
     },
 
     /**
      * WebInspector.OverridesSupport.PageResizer override.
      * @return {!Size}
      */
     availableDipSize: function()
     {
         if (typeof this._availableSize === "undefined") {
@@ skipping 249 matching lines @@
     },
 
     _onZoomChanged: function()
     {
         this._updateUI();
     },
 
     _createToolbar: function()
     {
         this._toolbarElement = this._responsiveDesignContainer.element.createChild("div", "responsive-design-toolbar");
-        this._createExpandSection();
+        this._createButtonsSection();
         this._toolbarElement.createChild("div", "responsive-design-separator");
         this._createDeviceSection();
         if (WebInspector.experimentsSettings.networkConditions.isEnabled()) {
             this._toolbarElement.createChild("div", "responsive-design-separator");
             this._createNetworkSection();
         }
         this._toolbarElement.createChild("div", "responsive-design-separator");
-
-        this._toolbarExpandedChanged();
     },
 
-    _createExpandSection: function()
+    _createButtonsSection: function()
     {
-        this.toolbarExpandedSetting = WebInspector.settings.createSetting("responsiveDesignToolbarExpanded", false);
-        var expandSection = this._toolbarElement.createChild("div", "responsive-design-section responsive-design-section-expand");
-        this._expandButton = expandSection.createChild("div", "responsive-design-button");
-        this._expandButton.createChild("div", "responsive-design-icon responsive-design-icon-expand");
-        this._expandButton.createChild("span");
-        this._expandButton.addEventListener("click", this._toggleToolbarExpanded.bind(this), false);
-        this.toolbarExpandedSetting.addChangeListener(this._toolbarExpandedChanged, this);
-    },
+        var buttonsSection = this._toolbarElement.createChild("div", "responsive-design-section responsive-design-section-buttons");
 
-    _toggleToolbarExpanded: function()
-    {
-        this.toolbarExpandedSetting.set(!this.toolbarExpandedSetting.get());
-    },
+        var resetButton = new WebInspector.StatusBarButton(WebInspector.UIString("Reset all overrides."), "clear-status-bar-item");
+        buttonsSection.appendChild(resetButton.element);
+        resetButton.addEventListener("click", WebInspector.overridesSupport.reset, WebInspector.overridesSupport);
 
-    _toolbarExpandedChanged: function()
-    {
-        var expanded = this.toolbarExpandedSetting.get();
-        this._expandButton.querySelector("span").textContent = WebInspector.UIString(expanded ? "Less" : "More");
-        this._toolbarElement.classList.toggle("expanded", expanded);
-        this.onResize();
+        var moreButton = buttonsSection.createChild("button", "responsive-design-more-button");
+        moreButton.title = WebInspector.UIString("More overrides");
+        moreButton.addEventListener("click", this._showEmulationInDrawer.bind(this), false);
+        moreButton.textContent = "\u2026";
     },
 
     _createDeviceSection: function()
     {
         var deviceSection = this._toolbarElement.createChild("div", "responsive-design-section responsive-design-section-device");
 
         // Device.
         var deviceElement = deviceSection.createChild("div", "responsive-design-suite").createChild("div");
         var fieldsetElement = deviceElement.createChild("fieldset");
         fieldsetElement.createChild("label").textContent = WebInspector.UIString("Device");
         fieldsetElement.appendChild(WebInspector.overridesSupport.createDeviceSelect(document));
 
-        var separator = deviceSection.createChild("div", "responsive-design-section-separator expanded-only");
+        var separator = deviceSection.createChild("div", "responsive-design-section-separator");
 
-        var detailsElement = deviceSection.createChild("div", "responsive-design-suite expanded-only");
+        var detailsElement = deviceSection.createChild("div", "responsive-design-suite");
 
         // Dimensions.
         var screenElement = detailsElement.createChild("div", "");
         fieldsetElement = screenElement.createChild("fieldset");
         fieldsetElement.createChild("div", "responsive-design-icon responsive-design-icon-resolution").title = WebInspector.UIString("Screen resolution");
-        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceWidth, true, 4, "3em", WebInspector.OverridesSupport.deviceSizeValidator, true, true, WebInspector.UIString("--")));
+        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceWidth, true, 4, "3em", WebInspector.OverridesSupport.deviceSizeValidator, true, true, WebInspector.UIString("\u2013")));
         fieldsetElement.appendChild(document.createTextNode(" \u00D7 "));
-        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceHeight, true, 4, "3em", WebInspector.OverridesSupport.deviceSizeValidator, true, true, WebInspector.UIString("--")));
+        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceHeight, true, 4, "3em", WebInspector.OverridesSupport.deviceSizeValidator, true, true, WebInspector.UIString("\u2013")));
 
         this._swapDimensionsElement = fieldsetElement.createChild("button", "responsive-design-icon responsive-design-icon-swap");
+        this._swapDimensionsElement.tabIndex = -1;
         this._swapDimensionsElement.title = WebInspector.UIString("Swap dimensions");
         this._swapDimensionsElement.addEventListener("click", WebInspector.overridesSupport.swapDimensions.bind(WebInspector.overridesSupport), false);
 
         // Device pixel ratio.
         detailsElement.createChild("div", "responsive-design-suite-separator");
         var dprElement = detailsElement.createChild("div", "");
         fieldsetElement = dprElement.createChild("fieldset");
         fieldsetElement.createChild("div", "responsive-design-icon responsive-design-icon-dpr").title = WebInspector.UIString("Device pixel ratio");
-        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceScaleFactor, true, 4, "2.5em", WebInspector.OverridesSupport.deviceScaleFactorValidator, true, true, WebInspector.UIString("--")));
-
-        detailsElement.createChild("div", "responsive-design-suite-separator");
-        var resetButton = detailsElement.createChild("div", "responsive-design-button");
-        resetButton.textContent = WebInspector.UIString("Reset");
-        resetButton.addEventListener("click", WebInspector.overridesSupport.reset.bind(WebInspector.overridesSupport), false);
+        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceScaleFactor, true, 4, "2.5em", WebInspector.OverridesSupport.deviceScaleFactorValidator, true, true, WebInspector.UIString("\u2013")));
     },
 
     _createNetworkSection: function()
     {
         var networkSection = this._toolbarElement.createChild("div", "responsive-design-section responsive-design-section-network");
 
         // Bandwidth.
         var bandwidthElement = networkSection.createChild("div", "responsive-design-suite").createChild("div");
         var fieldsetElement = bandwidthElement.createChild("fieldset");
         var networkCheckbox = fieldsetElement.createChild("label");
         networkCheckbox.textContent = WebInspector.UIString("Network");
         fieldsetElement.appendChild(WebInspector.overridesSupport.createNetworkThroughputSelect(document));
 
-        var separator = networkSection.createChild("div", "responsive-design-section-separator expanded-only");
+        var separator = networkSection.createChild("div", "responsive-design-section-separator");
 
         // User agent.
-        var userAgentElement = networkSection.createChild("div", "responsive-design-suite expanded-only").createChild("div");
+        var userAgentElement = networkSection.createChild("div", "responsive-design-suite").createChild("div");
         fieldsetElement = userAgentElement.createChild("fieldset");
-        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("UA", WebInspector.overridesSupport.settings.userAgent, false, 0, "", undefined, false, false, WebInspector.UIString("no override")));
+        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("UA", WebInspector.overridesSupport.settings.userAgent, false, 0, "", undefined, false, false, WebInspector.UIString("No override")));
 
         updateNetworkCheckboxTitle();
         WebInspector.overridesSupport.settings.networkConditionsDomains.addChangeListener(updateNetworkCheckboxTitle);
 
         function updateNetworkCheckboxTitle()
         {
             var domains = WebInspector.overridesSupport.settings.networkConditionsDomains.get();
             if (!domains.trim()) {
                 networkCheckbox.title = WebInspector.UIString("Limit for all domains");
             } else {
@@ skipping 15 matching lines @@
         this._invalidateCache();
         this.onResize();
     },
 
     _closeOverridesWarning: function()
     {
         this._warningMessage.querySelector("span").textContent = "";
         this._warningMessage.classList.add("hidden");
     },
 
+    _showEmulationInDrawer: function()
+    {
+        WebInspector.overridesSupport.reveal();
+    },
+
     __proto__: WebInspector.VBox.prototype
 };