DevTools: hide emulation bits that are available in responsive design toolbar from the drawer.

Source/devtools/front_end/elements/OverridesView.js

 /*
  * Copyright (C) 2014 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 @@
     WebInspector.VBox.call(this);
     this.registerRequiredCSS("overrides.css");
     this.registerRequiredCSS("helpScreen.css");
     this.element.classList.add("overrides-view");
 
     this._tabbedPane = new WebInspector.TabbedPane();
     this._tabbedPane.shrinkableTabs = false;
     this._tabbedPane.verticalTabLayout = true;
 
     if (!WebInspector.overridesSupport.isInspectingDevice()) {
-        new WebInspector.OverridesView.DeviceTab().appendAsTab(this._tabbedPane);
+        if (!WebInspector.overridesSupport.responsiveDesignAvailable())
+            new WebInspector.OverridesView.DeviceTab().appendAsTab(this._tabbedPane);
         new WebInspector.OverridesView.ViewportTab().appendAsTab(this._tabbedPane);
     }
     new WebInspector.OverridesView.UserAgentTab().appendAsTab(this._tabbedPane);
     new WebInspector.OverridesView.SensorsTab().appendAsTab(this._tabbedPane);
 
     this._lastSelectedTabSetting = WebInspector.settings.createSetting("lastSelectedEmulateTab", "device");
     this._tabbedPane.selectTab(this._lastSelectedTabSetting.get());
     this._tabbedPane.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, this._tabSelected, this);
     this._tabbedPane.show(this.element);
 
@@ skipping 15 matching lines @@
     {
         var message = WebInspector.overridesSupport.warningMessage();
         this._warningFooter.classList.toggle("hidden", !message);
         this._warningFooter.textContent = message;
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
- * @return {boolean}
- */
-WebInspector.OverridesView.isResponsiveDesignEnabled = function()
-{
-    return WebInspector.dockController.canDock() && WebInspector.experimentsSettings.responsiveDesign.isEnabled();
-};
-
-/**
  * @constructor
  * @extends {WebInspector.VBox}
  * @param {string} id
  * @param {string} name
  * @param {!Array.<!WebInspector.Setting>} settings
  */
 WebInspector.OverridesView.Tab = function(id, name, settings)
 {
     WebInspector.VBox.call(this);
     this._id = id;
@@ skipping 79 matching lines @@
     this._userAgentLabel.textContent = WebInspector.UIString("User agent:");
     this._userAgentValueElement = this._userAgentLabel.createChild("span", "overrides-device-value");
 
     this._updateValueLabels();
     WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.HasActiveOverridesChanged, this._hasActiveOverridesChanged, this);
     this._hasActiveOverridesChanged();
 }
 
 WebInspector.OverridesView.DeviceTab.prototype = {
     /**
-     * @param {!Event} e
+     * @param {?Event} e
      */
     _keyPressed: function(e)
     {
         if (e.keyCode === WebInspector.KeyboardShortcut.Keys.Enter.code)
             this._emulateButtonClicked();
     },
 
     _emulateButtonClicked: function()
     {
         var option = this._deviceSelectElement.options[this._deviceSelectElement.selectedIndex];
@@ skipping 24 matching lines @@
     __proto__: WebInspector.OverridesView.Tab.prototype
 }
 
 
 /**
  * @constructor
  * @extends {WebInspector.OverridesView.Tab}
  */
 WebInspector.OverridesView.ViewportTab = function()
 {
-    WebInspector.OverridesView.Tab.call(this, "viewport", WebInspector.UIString("Screen"), [WebInspector.overridesSupport.settings.overrideDeviceResolution, WebInspector.overridesSupport.settings.emulateViewport, WebInspector.overridesSupport.settings.overrideCSSMedia]);
+    var settings = [WebInspector.overridesSupport.settings.overrideCSSMedia];
+    if (!WebInspector.overridesSupport.responsiveDesignAvailable())
+        settings = settings.concat([WebInspector.overridesSupport.settings.overrideDeviceResolution, WebInspector.overridesSupport.settings.emulateViewport]);
+    WebInspector.OverridesView.Tab.call(this, "viewport", WebInspector.UIString("Screen"), settings);
     this.element.classList.add("overrides-viewport");
 
-    this._createDeviceMetricsElement();
-    var checkbox = this._createSettingCheckbox(WebInspector.UIString("Emulate viewport"), WebInspector.overridesSupport.settings.emulateViewport);
-    this.element.appendChild(checkbox);
+    if (!WebInspector.overridesSupport.responsiveDesignAvailable()) {
+        this._createDeviceMetricsElement();
+        var checkbox = this._createSettingCheckbox(WebInspector.UIString("Emulate viewport"), WebInspector.overridesSupport.settings.emulateViewport);
+        this.element.appendChild(checkbox);
+    }
     this._createMediaEmulationFragment();
 
     var footnote = this.element.createChild("p", "help-footnote");
     var footnoteLink = footnote.createChild("a");
     footnoteLink.href = "https://developers.google.com/chrome-developer-tools/docs/mobile-emulation";
     footnoteLink.target = "_blank";
     footnoteLink.createTextChild(WebInspector.UIString("More information about screen emulation"));
 }
 
 WebInspector.OverridesView.ViewportTab.prototype = {
@@ skipping 18 matching lines @@
         var widthOverrideInput = WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceWidth, true, 4, "80px", WebInspector.OverridesSupport.inputValidator, true);
         cellElement.appendChild(widthOverrideInput);
         this._swapDimensionsElement = cellElement.createChild("button", "overrides-swap");
         this._swapDimensionsElement.appendChild(document.createTextNode(" \u21C4 ")); // RIGHTWARDS ARROW OVER LEFTWARDS ARROW.
         this._swapDimensionsElement.title = WebInspector.UIString("Swap dimensions");
         this._swapDimensionsElement.addEventListener("click", WebInspector.overridesSupport.swapDimensions.bind(WebInspector.overridesSupport), false);
         this._swapDimensionsElement.tabIndex = -1;
         var heightOverrideInput = WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceHeight, true, 4, "80px", WebInspector.OverridesSupport.inputValidator, true);
         cellElement.appendChild(heightOverrideInput);
 
-        if (!WebInspector.OverridesView.isResponsiveDesignEnabled()) {
-            rowElement = tableElement.createChild("tr");
-            cellElement = rowElement.createChild("td");
-            cellElement.colSpan = 4;
+        rowElement = tableElement.createChild("tr");
+        cellElement = rowElement.createChild("td");
+        cellElement.colSpan = 4;
 
-            var widthRangeInput = WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceWidth, true, 4, "200px", undefined, true);
-            widthRangeInput.type = "range";
-            widthRangeInput.min = 100;
-            widthRangeInput.max = 2000;
-            cellElement.appendChild(widthRangeInput);
-        }
+        var widthRangeInput = WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceWidth, true, 4, "200px", undefined, true).lastChild;
+        widthRangeInput.type = "range";
+        widthRangeInput.min = 100;
+        widthRangeInput.max = 2000;
+        cellElement.appendChild(widthRangeInput);
 
         rowElement = tableElement.createChild("tr");
         rowElement.title = WebInspector.UIString("Ratio between a device's physical pixels and device-independent pixels.");
         rowElement.createChild("td").appendChild(document.createTextNode(WebInspector.UIString("Device pixel ratio:")));
         rowElement.createChild("td").appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceScaleFactor, true, 2, "80px", WebInspector.OverridesSupport.inputValidator, true));
 
         var textAutosizingOverrideElement = this._createSettingCheckbox(WebInspector.UIString("Enable text autosizing "), WebInspector.overridesSupport.settings.deviceTextAutosizing);
         textAutosizingOverrideElement.title = WebInspector.UIString("Text autosizing is the feature that boosts font sizes on mobile devices.");
         fieldsetElement.appendChild(textAutosizingOverrideElement);
 
-        if (!WebInspector.OverridesView.isResponsiveDesignEnabled()) {
-            checkbox = this._createSettingCheckbox(WebInspector.UIString("Shrink to fit"), WebInspector.overridesSupport.settings.deviceFitWindow);
-            fieldsetElement.appendChild(checkbox);
-        }
+        checkbox = this._createSettingCheckbox(WebInspector.UIString("Shrink to fit"), WebInspector.overridesSupport.settings.deviceFitWindow);
+        fieldsetElement.appendChild(checkbox);
         this.element.appendChild(fieldsetElement);
     },
 
     _createMediaEmulationFragment: function()
     {
         var checkbox = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("CSS media"), WebInspector.overridesSupport.settings.overrideCSSMedia, true);
         var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideCSSMedia);
         if (WebInspector.overridesSupport.isInspectingDevice())
             fieldsetElement.disabled = true;
 
@@ skipping 185 matching lines @@
 }
 
 
 /**
  * @constructor
  * @extends {WebInspector.OverridesView.Tab}
  */
 WebInspector.OverridesView.SensorsTab = function()
 {
     var settings = [WebInspector.overridesSupport.settings.overrideGeolocation, WebInspector.overridesSupport.settings.overrideDeviceOrientation];
-    if (!WebInspector.overridesSupport.hasTouchInputs())
+    if (!WebInspector.overridesSupport.hasTouchInputs() && !WebInspector.overridesSupport.responsiveDesignAvailable())
         settings.push(WebInspector.overridesSupport.settings.emulateTouchEvents);
     WebInspector.OverridesView.Tab.call(this, "sensors", WebInspector.UIString("Sensors"), settings);
 
     this.element.classList.add("overrides-sensors");
     this.registerRequiredCSS("accelerometer.css");
-    if (!WebInspector.overridesSupport.hasTouchInputs())
+    if (!WebInspector.overridesSupport.hasTouchInputs() && !WebInspector.overridesSupport.responsiveDesignAvailable())
         this.element.appendChild(this._createSettingCheckbox(WebInspector.UIString("Emulate touch screen"), WebInspector.overridesSupport.settings.emulateTouchEvents));
     this._appendGeolocationOverrideControl();
     this._apendDeviceOrientationOverrideControl();
 }
 
 WebInspector.OverridesView.SensorsTab.prototype = {
     _appendGeolocationOverrideControl: function()
     {
         const geolocationSetting = WebInspector.overridesSupport.settings.geolocationOverride.get();
         var geolocation = WebInspector.OverridesSupport.GeolocationPosition.parseSetting(geolocationSetting);
@@ skipping 243 matching lines @@
 
     __proto__ : WebInspector.OverridesView.Tab.prototype
 }
 
 /** @enum {string} */
 WebInspector.OverridesView.SensorsTab.DeviceOrientationModificationSource = {
     UserInput: "userInput",
     UserDrag: "userDrag",
     ResetButton: "resetButton"
 }