[DevTools] Move user agent override to responsive design toolbar.

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
  */
 WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)
 {
     WebInspector.VBox.call(this);
     this.registerRequiredCSS("responsiveDesignView.css");
+    this.element.classList.add("overflow-hidden");
 
     this._responsiveDesignContainer = new WebInspector.VBox();
 
     this._createToolbar();
     this._warningMessage = this._responsiveDesignContainer.element.createChild("div", "responsive-design-warning hidden");
     WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.OverridesWarningUpdated, this._overridesWarningUpdated, this);
 
     this._canvasContainer = new WebInspector.View();
     this._canvasContainer.element.classList.add("responsive-design");
     this._canvasContainer.show(this._responsiveDesignContainer.element);
@@ skipping 14 matching lines @@
     this._heightSlider.createChild("div", "responsive-design-thumb-handle");
     this._createResizer(this._heightSlider, true);
 
     this._inspectedPagePlaceholder = inspectedPagePlaceholder;
     inspectedPagePlaceholder.show(this.element);
 
     this._enabled = false;
 
     WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._onZoomChanged, this);
     WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._updateOverridesSupportOnDockSideChange, this);
-    WebInspector.settings.responsiveDesignMode.addChangeListener(this._responsiveDesignModeChanged, this);
+    WebInspector.settings.responsiveDesign.enabled.addChangeListener(this._responsiveDesignEnabledChanged, this);
 
     WebInspector.overridesSupport.settings.emulateViewport.addChangeListener(this._maybeEnableResponsiveDesign, this);
     WebInspector.overridesSupport.settings.emulateTouchEvents.addChangeListener(this._maybeEnableResponsiveDesign, this);
     WebInspector.overridesSupport.settings.overrideDeviceResolution.addChangeListener(this._maybeEnableResponsiveDesign, this);
 
     this._updateOverridesSupportOnDockSideChange();
 };
 
 // Measured in DIP.
 WebInspector.ResponsiveDesignView.SliderWidth = 19;
 WebInspector.ResponsiveDesignView.RulerWidth = 20;
-WebInspector.ResponsiveDesignView.ToolbarHeight = 23;
 
 WebInspector.ResponsiveDesignView.prototype = {
     _maybeEnableResponsiveDesign: function()
     {
         if (this._enabled)
             return;
         if (WebInspector.overridesSupport.settings.emulateViewport.get() ||
                 WebInspector.overridesSupport.settings.emulateTouchEvents.get() ||
                 WebInspector.overridesSupport.settings.overrideDeviceResolution.get()) {
-            WebInspector.settings.responsiveDesignMode.set(true);
+            WebInspector.settings.responsiveDesign.enabled.set(true);
         }
     },
 
-    _responsiveDesignModeChanged: function()
+    _responsiveDesignEnabledChanged: function()
     {
         delete this._cachedScale;
         delete this._cachedCssCanvasWidth;
         delete this._cachedCssCanvasHeight;
         delete this._cachedCssHeight;
         delete this._cachedCssWidth;
         delete this._cachedZoomFactor;
         delete this._availableSize;
 
-        var enabled = WebInspector.settings.responsiveDesignMode.get() && WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked;
+        var enabled = WebInspector.settings.responsiveDesign.enabled.get() && WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked;
         if (enabled && !this._enabled) {
             this._ignoreResize = true;
             this._enabled = true;
             this._inspectedPagePlaceholder.clearMinimumSizeAndMargins();
             this._inspectedPagePlaceholder.show(this._pageContainer);
             this._responsiveDesignContainer.show(this.element);
             WebInspector.overridesSupport.setPageResizer(this);
             delete this._ignoreResize;
         }
 
         if (!enabled && this._enabled) {
             this._ignoreResize = true;
             this._enabled = false;
             this._scale = 0;
             this._inspectedPagePlaceholder.restoreMinimumSizeAndMargins();
             this._responsiveDesignContainer.detach();
             this._inspectedPagePlaceholder.show(this.element);
             WebInspector.overridesSupport.setPageResizer(null);
             delete this._ignoreResize;
         }
     },
 
     _updateOverridesSupportOnDockSideChange: function()
     {
-        this._responsiveDesignModeChanged();
+        this._responsiveDesignEnabledChanged();
     },
 
     /**
      * WebInspector.OverridesSupport.PageResizer override.
      * @param {number} dipWidth
      * @param {number} dipHeight
      * @param {number} scale
      */
     update: function(dipWidth, dipHeight, scale)
     {
         if (!this._enabled)
             return;
 
         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") {
             var zoomFactor = WebInspector.zoomManager.zoomFactor();
-            var rect = this.element.getBoundingClientRect();
+            var rect = this._canvasContainer.element.getBoundingClientRect();
             this._availableSize = new Size(rect.width * zoomFactor - WebInspector.ResponsiveDesignView.RulerWidth,
-                                           rect.height * zoomFactor - WebInspector.ResponsiveDesignView.RulerWidth - WebInspector.ResponsiveDesignView.ToolbarHeight);
+                                           rect.height * zoomFactor - WebInspector.ResponsiveDesignView.RulerWidth);
         }
         return this._availableSize;
     },
 
     /**
      * @param {!Element} element
      * @param {boolean} vertical
      * @return {!WebInspector.ResizerWidget}
      */
     _createResizer: function(element, vertical)
@@ skipping 226 matching lines @@
         this._updateUI();
     },
 
     _onZoomChanged: function()
     {
         this._updateUI();
     },
 
     _createToolbar: function()
     {
-        this._toolbarElement = this._responsiveDesignContainer.element.createChild("div", "responsive-design-toolbar");
+        var toolbarElement = this._responsiveDesignContainer.element.createChild("div", "responsive-design-toolbar");
+        this._toolbarSection = toolbarElement.createChild("div", "responsive-design-composite-section hbox");
+
+        this._expandedDeviceSection = document.createElementWithClass("div", "responsive-design-composite-section vbox");
+        this._expandedScreenTouchSection = document.createElementWithClass("div", "responsive-design-composite-section hbox");
+
+        this._expandSection = document.createElementWithClass("div", "responsive-design-section vbox");
+        WebInspector.settings.responsiveDesign.toolbarExpanded = WebInspector.settings.createSetting("responsiveDesign.toolbarExpanded", false);
+        this._expandButton = this._expandSection.createChild("div", "responsive-design-expand");
+        this._expandButton.createChild("div", "responsive-design-icon responsive-design-icon-expand");
+        this._expandButton.createChild("span");
+        this._expandButton.addEventListener("click", this._toggleToolbarExpanded.bind(this));
+        WebInspector.settings.responsiveDesign.toolbarExpanded.addChangeListener(this._toolbarExpandedChanged, this);
 
         // Device
-        var sectionElement = this._toolbarElement.createChild("div", "responsive-design-section");
-        var deviceLabel = sectionElement.createChild("label");
+        this._deviceSection = document.createElementWithClass("div", "responsive-design-section");
+        var deviceLabel = this._deviceSection.createChild("label");
         var deviceCheckbox = deviceLabel.createChild("input");
         deviceCheckbox.type = "checkbox";
         deviceLabel.createTextChild(WebInspector.UIString("Device"));
         deviceLabel.title = WebInspector.UIString("Emulate device");
         deviceCheckbox.addEventListener("change", deviceChecked, false);
 
         function deviceChecked()
         {
             if (deviceCheckbox.checked) {
                 var option = deviceSelect.options[deviceSelect.selectedIndex];
                 WebInspector.overridesSupport.emulateDevice(option.metrics, option.userAgent);
             } else {
                 WebInspector.overridesSupport.resetEmulatedDevice();
             }
         }
 
         var deviceSelect = WebInspector.overridesSupport.createDeviceSelect(document);
-        sectionElement.appendChild(deviceSelect);
+        this._deviceSection.appendChild(deviceSelect);
         deviceSelect.addEventListener("change", emulateDevice, false);
 
         function emulateDevice()
         {
             var option = deviceSelect.options[deviceSelect.selectedIndex];
             WebInspector.overridesSupport.emulateDevice(option.metrics, option.userAgent);
         }
 
         updateDeviceCheckboxStatus();
 
         WebInspector.overridesSupport.settings.emulateViewport.addChangeListener(updateDeviceCheckboxStatus);
         WebInspector.overridesSupport.settings.emulateTouchEvents.addChangeListener(updateDeviceCheckboxStatus);
         WebInspector.overridesSupport.settings.overrideDeviceResolution.addChangeListener(updateDeviceCheckboxStatus);
 
         function updateDeviceCheckboxStatus()
         {
             deviceCheckbox.checked = WebInspector.overridesSupport.settings.emulateViewport.get() &&
                 WebInspector.overridesSupport.settings.emulateTouchEvents.get() &&
                 WebInspector.overridesSupport.settings.overrideDeviceResolution.get();
         }
 
         // Screen
-        sectionElement = this._toolbarElement.createChild("div", "responsive-design-section");
-        sectionElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox("Screen", WebInspector.overridesSupport.settings.overrideDeviceResolution, true));
+        this._screenSection = document.createElementWithClass("div", "responsive-design-section");
+        this._screenSection.appendChild(WebInspector.SettingsUI.createSettingCheckbox("Screen", WebInspector.overridesSupport.settings.overrideDeviceResolution, true));
 
         var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideDeviceResolution);
-        sectionElement.appendChild(fieldsetElement);
+        this._screenSection.appendChild(fieldsetElement);
         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.inputValidator, true));
         fieldsetElement.appendChild(document.createTextNode(" \u00D7 "));
         fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceHeight, true, 4, "3em", WebInspector.OverridesSupport.inputValidator, true));
 
         this._swapDimensionsElement = fieldsetElement.createChild("button", "responsive-design-icon responsive-design-icon-swap");
         this._swapDimensionsElement.title = WebInspector.UIString("Swap dimensions");
         this._swapDimensionsElement.addEventListener("click", WebInspector.overridesSupport.swapDimensions.bind(WebInspector.overridesSupport), false);
 
         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, 2, "2em", WebInspector.OverridesSupport.inputValidator, true));
 
         // Touch and viewport
-        sectionElement = this._toolbarElement.createChild("div", "responsive-design-section");
-        sectionElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Touch"), WebInspector.overridesSupport.settings.emulateTouchEvents, true));
-        sectionElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Viewport"), WebInspector.overridesSupport.settings.emulateViewport, true));
+        this._touchSection = document.createElementWithClass("div", "responsive-design-section");
+        this._touchSection.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Touch"), WebInspector.overridesSupport.settings.emulateTouchEvents, true));
+        this._touchSection.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Viewport"), WebInspector.overridesSupport.settings.emulateViewport, true));
+
+        // User agent.
+        this._userAgentSection = document.createElementWithClass("div", "responsive-design-composite-section vbox solid");
+        var userAgentRow = this._userAgentSection.createChild("div", "responsive-design-composite-section hbox solid");
+        userAgentRow.createChild("div", "responsive-design-section hbox").appendChild(WebInspector.SettingsUI.createSettingCheckbox("User Agent", WebInspector.overridesSupport.settings.overrideUserAgent, true));
+        var userAgentSelectAndInput = WebInspector.overridesSupport.createUserAgentSelectAndInput(document);
+        userAgentRow.createChild("div", "responsive-design-section hbox").appendChild(userAgentSelectAndInput.select);
+        this._userAgentSection.createChild("div", "responsive-design-section hbox").appendChild(userAgentSelectAndInput.input);
+
+        this._toolbarExpandedChanged();
+    },
+
+    _toggleToolbarExpanded: function()
+    {
+        WebInspector.settings.responsiveDesign.toolbarExpanded.set(!WebInspector.settings.responsiveDesign.toolbarExpanded.get());
+    },
+
+    _toolbarExpandedChanged: function()
+    {
+        var expanded = WebInspector.settings.responsiveDesign.toolbarExpanded.get();
+        this._expandButton.classList.toggle("expanded", expanded);
+        this._expandButton.querySelector("span").textContent = WebInspector.UIString(expanded ? "Collapse" : "Expand");
+
+        if (expanded) {
+            this._expandedScreenTouchSection.textContent = "";
+            this._expandedScreenTouchSection.appendChild(this._screenSection);
+            this._expandedScreenTouchSection.appendChild(this._touchSection);
+
+            this._expandedDeviceSection.textContent = "";
+            this._expandedDeviceSection.appendChild(this._deviceSection);
+            this._expandedDeviceSection.appendChild(this._expandedScreenTouchSection);
+
+            this._toolbarSection.textContent = "";
+            this._toolbarSection.appendChild(this._expandSection);
+            this._toolbarSection.appendChild(this._expandedDeviceSection);
+            this._toolbarSection.appendChild(this._userAgentSection);
+        } else {
+            this._toolbarSection.textContent = "";

[aandrey, 2014/06/05 14:44:38]

we can add Element.prototype.appendChildren() in DOMExtension.js:

this._toolbarSection.removeChildren();
this._toolbarSection.appendChildren(this._expandSection, this._deviceSection,
...);

[dgozman, 2014/06/06 11:31:11]

Nice idea. Done.

+            this._toolbarSection.appendChild(this._expandSection);
+            this._toolbarSection.appendChild(this._deviceSection);
+            this._toolbarSection.appendChild(this._screenSection);
+            this._toolbarSection.appendChild(this._touchSection);
+        }
+
+        this.onResize();
     },
 
     _overridesWarningUpdated: function()
     {
         var message = WebInspector.overridesSupport.warningMessage();
         if (this._warningMessage.textContent === message)
             return;
         this._warningMessage.classList.toggle("hidden", !message);
         this._warningMessage.textContent = message;
-        this._responsiveDesignModeChanged();
+        this._responsiveDesignEnabledChanged();
         this.onResize();
     },
 
     __proto__: WebInspector.VBox.prototype
 };