DevTools: brush up responsive design toolbar css.

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._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);
 
     this._canvas = this._canvasContainer.element.createChild("canvas", "fill");
     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");
@@ skipping 355 matching lines @@
     _onZoomChanged: function()
     {
         this._updateUI();
     },
 
     _createToolbar: function()
     {
         this._toolbarElement = this._responsiveDesignContainer.element.createChild("div", "responsive-design-toolbar");
 
         // Device
-        var fieldsetElement = this._toolbarElement.createChild("fieldset");
-        var deviceLabel = fieldsetElement.createChild("label");
+        var sectionElement = this._toolbarElement.createChild("div", "responsive-design-section");
+        var deviceLabel = sectionElement.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);
-        fieldsetElement.appendChild(deviceSelect);
+        sectionElement.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
-        fieldsetElement = this._toolbarElement.createChild("fieldset", "responsive-design-section");
-        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox("Screen", WebInspector.overridesSupport.settings.overrideDeviceResolution, true));
+        sectionElement = this._toolbarElement.createChild("div", "responsive-design-section");
+        sectionElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox("Screen", WebInspector.overridesSupport.settings.overrideDeviceResolution, true));
 
-        fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideDeviceResolution);
-        this._toolbarElement.appendChild(fieldsetElement);
+        var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideDeviceResolution);
+        sectionElement.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
-        fieldsetElement = this._toolbarElement.createChild("fieldset", "responsive-design-section");
-        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Touch"), WebInspector.overridesSupport.settings.emulateTouchEvents, true));
-        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Viewport"), WebInspector.overridesSupport.settings.emulateViewport, true));
-
-        // Warning
-        this._warningMessage = this._responsiveDesignContainer.element.createChild("div", "responsive-design-warning hidden");
-        WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.OverridesWarningUpdated, this._overridesWarningUpdated, this);
+        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));
     },
 
     _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.onResize();
     },
 
     __proto__: WebInspector.VBox.prototype
 };