DevTools: get rid of deviceMetics settings.

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 139 matching lines @@
 /**
  * @constructor
  * @extends {WebInspector.OverridesView.Tab}
  */
 WebInspector.OverridesView.DeviceTab = function()
 {
     WebInspector.OverridesView.Tab.call(this, "device", WebInspector.UIString("Device"), []);
     this.element.classList.add("overrides-device");
 
     this._emulatedDeviceSetting = WebInspector.settings.createSetting("emulatedDevice", "Google Nexus 4");
-    this._emulateDeviceViewportSetting = WebInspector.overridesSupport.settings.overrideDeviceMetrics;
-    this._emulateDeviceUserAgentSetting = WebInspector.overridesSupport.settings.overrideUserAgent;
 
     this._deviceSelectElement = this.element.createChild("select");
 
     var devices = WebInspector.OverridesView.DeviceTab._phones.concat(WebInspector.OverridesView.DeviceTab._tablets);
     devices.sort();
     var selectionRestored = false;
     for (var i = 0; i < devices.length; ++i) {
         var device = devices[i];
         var option = new Option(device[0], device[0]);
         option._userAgent = device[1];
@@ skipping 33 matching lines @@
 
     this._updateValueLabels();
     WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.HasActiveOverridesChanged, this._hasActiveOverridesChanged, this);
     this._hasActiveOverridesChanged();
 }
 
 // Third element lists device metrics separated by 'x':
 // - screen width,
 // - screen height,
 // - device scale factor,
-// - use text autosizing.
 WebInspector.OverridesView.DeviceTab._phones = [
     ["Apple iPhone 3GS",
      "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5",
      "320x480x1"],
     ["Apple iPhone 4",
      "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5",
      "320x480x2"],
     ["Apple iPhone 5",
      "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53",
      "320x568x2"],
@@ skipping 163 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.overrideDeviceMetrics, WebInspector.overridesSupport.settings.overrideCSSMedia]);
+    WebInspector.OverridesView.Tab.call(this, "viewport", WebInspector.UIString("Screen"), [WebInspector.overridesSupport.settings.overrideDeviceResolution, WebInspector.overridesSupport.settings.emulateViewport, WebInspector.overridesSupport.settings.overrideCSSMedia]);
     this.element.classList.add("overrides-viewport");
 
-    const metricsSetting = WebInspector.overridesSupport.settings.deviceMetrics.get();
-    var metrics = WebInspector.OverridesSupport.DeviceMetrics.parseSetting(metricsSetting);
-    var checkbox = this._createSettingCheckbox(WebInspector.UIString("Emulate screen"), WebInspector.overridesSupport.settings.overrideDeviceMetrics, this._onMetricsCheckboxClicked.bind(this));
-    checkbox.firstChild.disabled = WebInspector.overridesSupport.isInspectingDevice();
-    WebInspector.overridesSupport.settings.deviceMetrics.addChangeListener(this._updateDeviceMetricsElement, this);
-
+    this._createDeviceMetricsElement();
+    var checkbox = this._createSettingCheckbox(WebInspector.UIString("Emulate viewport"), WebInspector.overridesSupport.settings.emulateViewport);
     this.element.appendChild(checkbox);
-    this.element.appendChild(this._createDeviceMetricsElement(metrics));
-    this.element.appendChild(this._createMediaEmulationFragment());
+    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"));
-
-    this._onMetricsCheckboxClicked(WebInspector.overridesSupport.settings.overrideDeviceMetrics.get());
 }
 
 WebInspector.OverridesView.ViewportTab.prototype = {
-    /**
-     * @param {boolean} enabled
-     */
-    _onMetricsCheckboxClicked: function(enabled)
+    _createDeviceMetricsElement: function()
     {
-        if (enabled && !this._widthOverrideElement.value)
-            this._widthOverrideElement.focus();
-        this._applyDeviceMetricsUserInput();
-    },
+        var checkbox = this._createSettingCheckbox(WebInspector.UIString("Emulate resolution"), WebInspector.overridesSupport.settings.overrideDeviceResolution);
+        checkbox.firstChild.disabled = WebInspector.overridesSupport.isInspectingDevice();
+        this.element.appendChild(checkbox);
 
-    _applyDeviceMetricsUserInput: function()
-    {
-        this._muteRangeListener = true;
-        this._widthRangeInput.value = this._widthOverrideElement.value;
-        delete this._muteRangeListener;
-        WebInspector.OverridesSupport.DeviceMetrics.applyOverrides(this._widthOverrideElement, this._heightOverrideElement, this._deviceScaleFactorOverrideElement, this._textAutosizingOverrideCheckbox);
-    },
-
-    /**
-     * @param {!WebInspector.OverridesSupport.DeviceMetrics} metrics
-     */
-    _createDeviceMetricsElement: function(metrics)
-    {
-        var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideDeviceMetrics);
+        var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideDeviceResolution);
         if (WebInspector.overridesSupport.isInspectingDevice())
             fieldsetElement.disabled = true;
         fieldsetElement.id = "metrics-override-section";
 
-        /**
-         * @this {WebInspector.OverridesView.ViewportTab}
-         */
-        function swapDimensionsClicked()
-        {
-            var widthValue = this._widthOverrideElement.value;
-            this._widthOverrideElement.value = this._heightOverrideElement.value;
-            this._heightOverrideElement.value = widthValue;
-            this._applyDeviceMetricsUserInput();
-        }
-
         var tableElement = fieldsetElement.createChild("table", "nowrap");
 
         var rowElement = tableElement.createChild("tr");
         var cellElement = rowElement.createChild("td");
         cellElement.appendChild(document.createTextNode(WebInspector.UIString("Resolution:")));
         cellElement = rowElement.createChild("td");
-        this._widthOverrideElement = WebInspector.SettingsUI.createInput(cellElement, "metrics-override-width", String(metrics.width), this._applyDeviceMetricsUserInput.bind(this), true);
+
+        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", swapDimensionsClicked.bind(this), false);
+        this._swapDimensionsElement.addEventListener("click", WebInspector.overridesSupport.swapDimensions.bind(WebInspector.overridesSupport), false);
         this._swapDimensionsElement.tabIndex = -1;
-        this._heightOverrideElement = WebInspector.SettingsUI.createInput(cellElement, "metrics-override-height", String(metrics.height), this._applyDeviceMetricsUserInput.bind(this), true);
+        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;
-            this._widthRangeInput = cellElement.createChild("input");
-            this._widthRangeInput.type = "range";
-            this._widthRangeInput.min = 100;
-            this._widthRangeInput.max = 2000;
-            this._widthRangeInput.addEventListener("change", this._rangeValueChanged.bind(this), false);
-            this._widthRangeInput.addEventListener("input", this._rangeValueChanged.bind(this), false);
-            this._widthRangeInput.value = this._widthOverrideElement.value;
-        } else {
-            this._widthRangeInput = document.createElement("input");
+
+            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);
         }
 
         rowElement = tableElement.createChild("tr");
         rowElement.title = WebInspector.UIString("Ratio between a device's physical pixels and device-independent pixels.");
-        cellElement = rowElement.createChild("td");
-        cellElement.appendChild(document.createTextNode(WebInspector.UIString("Device pixel ratio:")));
-        cellElement = rowElement.createChild("td");
-        this._deviceScaleFactorOverrideElement = WebInspector.SettingsUI.createInput(cellElement, "metrics-override-device-scale", String(metrics.deviceScaleFactor), this._applyDeviceMetricsUserInput.bind(this), true);
+        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 = WebInspector.SettingsUI.createNonPersistedCheckbox(WebInspector.UIString("Enable text autosizing "), this._applyDeviceMetricsUserInput.bind(this));
+        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.");
-        this._textAutosizingOverrideCheckbox = textAutosizingOverrideElement.firstChild;
-        this._textAutosizingOverrideCheckbox.checked = metrics.textAutosizing;
         fieldsetElement.appendChild(textAutosizingOverrideElement);
 
-        var checkbox = this._createSettingCheckbox(WebInspector.UIString("Emulate viewport"), WebInspector.overridesSupport.settings.emulateViewport);
-        fieldsetElement.appendChild(checkbox);
-
         if (!WebInspector.OverridesView.isResponsiveDesignEnabled()) {
             checkbox = this._createSettingCheckbox(WebInspector.UIString("Shrink to fit"), WebInspector.overridesSupport.settings.deviceFitWindow);
             fieldsetElement.appendChild(checkbox);
         }
-
-        return fieldsetElement;
-    },
-
-    _updateDeviceMetricsElement: function()
-    {
-        const metricsSetting = WebInspector.overridesSupport.settings.deviceMetrics.get();
-        var metrics = WebInspector.OverridesSupport.DeviceMetrics.parseSetting(metricsSetting);
-
-        if (this._widthOverrideElement.value != metrics.width)
-            this._widthOverrideElement.value = metrics.width;
-        this._muteRangeListener = true;
-        if (this._widthRangeInput.value != metrics.width)
-            this._widthRangeInput.value = metrics.width;
-        delete this._muteRangeListener;
-        if (this._heightOverrideElement.value != metrics.height)
-            this._heightOverrideElement.value = metrics.height;
-        if (this._deviceScaleFactorOverrideElement.value != metrics.deviceScaleFactor)
-            this._deviceScaleFactorOverrideElement.value = metrics.deviceScaleFactor;
-        if (this._textAutosizingOverrideCheckbox.checked !== metrics.textAutosizing)
-            this._textAutosizingOverrideCheckbox.checked = metrics.textAutosizing;
+        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;
 
         var mediaSelectElement = fieldsetElement.createChild("select");
@@ skipping 10 matching lines @@
             option.value = mediaType;
             mediaSelectElement.add(option);
             if (mediaType === defaultMedia)
                 mediaSelectElement.selectedIndex = mediaSelectElement.options.length - 1;
         }
 
         mediaSelectElement.addEventListener("change", this._emulateMediaChanged.bind(this, mediaSelectElement), false);
         var fragment = document.createDocumentFragment();
         fragment.appendChild(checkbox);
         fragment.appendChild(fieldsetElement);
-        return fragment;
+        this.element.appendChild(fragment);
     },
 
     _emulateMediaChanged: function(select)
     {
         var media = select.options[select.selectedIndex].value;
         WebInspector.overridesSupport.settings.emulatedCSSMedia.set(media);
     },
 
-    _rangeValueChanged: function()
-    {
-        if (this._muteRangeListener)
-            return;
-        this._widthOverrideElement.value = this._widthRangeInput.value;
-        this._applyDeviceMetricsUserInput();
-    },
-
     __proto__: WebInspector.OverridesView.Tab.prototype
 }
 
 
 /**
  * @constructor
  * @extends {WebInspector.OverridesView.Tab}
  */
 WebInspector.OverridesView.UserAgentTab = function()
 {
@@ skipping 416 matching lines @@
 
     __proto__ : WebInspector.OverridesView.Tab.prototype
 }
 
 /** @enum {string} */
 WebInspector.OverridesView.SensorsTab.DeviceOrientationModificationSource = {
     UserInput: "userInput",
     UserDrag: "userDrag",
     ResetButton: "resetButton"
 }