Refactor how font scale factor appears in the emulation panel

Source/devtools/front_end/OverridesView.js

Index: Source/devtools/front_end/OverridesView.js
diff --git a/Source/devtools/front_end/OverridesView.js b/Source/devtools/front_end/OverridesView.js
index 942cee1ba6577ed67c391e182b79a52b8cfe26ca..c3e237ff2c5e63264744104bdeac9ad9715185b2 100644
--- a/Source/devtools/front_end/OverridesView.js
+++ b/Source/devtools/front_end/OverridesView.js
@@ -261,135 +261,135 @@ WebInspector.OverridesView.DeviceTab = function()
 // - screen width,
 // - screen height,
 // - device scale factor,
-// - font scale factor, or 0 to compute one (see: WebInspector.OverridesSupport.DeviceMetrics.computeFontScaleFactorForAndroid).
-// - text autosizing.
+// - use android font metrics,
+// - 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",
-     "320x480x1x1x1"],
+     "320x480x1x0x1"],
     ["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",
-     "640x960x2x1x1"],
+     "640x960x2x0x1"],
     ["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",
-     "640x1136x2x1x1"],
+     "640x1136x2x0x1"],
     ["BlackBerry Z10",
      "Mozilla/5.0 (BB10; Touch) AppleWebKit/537.10+ (KHTML, like Gecko) Version/10.0.9.2372 Mobile Safari/537.10+",
-     "768x1280x2x1x1"],
+     "768x1280x2x0x1"],
     ["BlackBerry Z30",
      "Mozilla/5.0 (BB10; Touch) AppleWebKit/537.10+ (KHTML, like Gecko) Version/10.0.9.2372 Mobile Safari/537.10+",
-     "720x1280x2x1x1"],
+     "720x1280x2x0x1"],
     ["Google Nexus 4",
      "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 4 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19",
-     "768x1280x2x0x1"],
+     "768x1280x2x1x1"],
     ["Google Nexus 5",
      "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19",
-     "1080x1920x3x0x1"],
+     "1080x1920x3x1x1"],
     ["Google Nexus S",
      "Mozilla/5.0 (Linux; U; Android 2.3.4; en-us; Nexus S Build/GRJ22) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1",
-     "480x800x1.5x0x1"],
+     "480x800x1.5x1x1"],
     ["HTC Evo, Touch HD, Desire HD, Desire",
      "Mozilla/5.0 (Linux; U; Android 2.2; en-us; Sprint APA9292KT Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1",
-     "480x800x1.5x0x1"],
+     "480x800x1.5x1x1"],
     ["HTC One X, EVO LTE",
      "Mozilla/5.0 (Linux; Android 4.0.3; HTC One X Build/IML74K) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19",
-     "720x1280x2x0x1"],
+     "720x1280x2x1x1"],
     ["HTC Sensation, Evo 3D",
      "Mozilla/5.0 (Linux; U; Android 4.0.3; en-us; HTC Sensation Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30",
-     "540x960x1.5x0x1"],
+     "540x960x1.5x1x1"],
     ["LG Optimus 2X, Optimus 3D, Optimus Black",
      "Mozilla/5.0 (Linux; U; Android 2.2; en-us; LG-P990/V08c Build/FRG83) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 MMS/LG-Android-MMS-V1.0/1.2",
-     "480x800x1.5x0x1"],
+     "480x800x1.5x1x1"],
     ["LG Optimus G",
      "Mozilla/5.0 (Linux; Android 4.0; LG-E975 Build/IMM76L) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19",
-     "768x1280x2x0x1"],
+     "768x1280x2x1x1"],
     ["LG Optimus LTE, Optimus 4X HD",
      "Mozilla/5.0 (Linux; U; Android 2.3; en-us; LG-P930 Build/GRJ90) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1",
-     "720x1280x1.7x0x1"],
+     "720x1280x1.7x1x1"],
     ["LG Optimus One",
      "Mozilla/5.0 (Linux; U; Android 2.2.1; en-us; LG-MS690 Build/FRG83) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1",
-     "320x480x1.5x0x1"],
+     "320x480x1.5x1x1"],
     ["Motorola Defy, Droid, Droid X, Milestone",
      "Mozilla/5.0 (Linux; U; Android 2.0; en-us; Milestone Build/ SHOLS_U2_01.03.1) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17",
-     "480x854x1.5x0x1"],
+     "480x854x1.5x1x1"],
     ["Motorola Droid 3, Droid 4, Droid Razr, Atrix 4G, Atrix 2",
      "Mozilla/5.0 (Linux; U; Android 2.2; en-us; Droid Build/FRG22D) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1",
-     "540x960x1x0x1"],
+     "540x960x1x1x1"],
     ["Motorola Droid Razr HD",
      "Mozilla/5.0 (Linux; U; Android 2.3; en-us; DROID RAZR 4G Build/6.5.1-73_DHD-11_M1-29) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1",
-     "720x1280x1x0x1"],
+     "720x1280x1x1x1"],
     ["Nokia C5, C6, C7, N97, N8, X7",
      "NokiaN97/21.1.107 (SymbianOS/9.4; Series60/5.0 Mozilla/5.0; Profile/MIDP-2.1 Configuration/CLDC-1.1) AppleWebkit/525 (KHTML, like Gecko) BrowserNG/7.1.4",
-     "360x640x1x1x1"],
+     "360x640x1x0x1"],
     ["Nokia Lumia 7X0, Lumia 8XX, Lumia 900, N800, N810, N900",
      "Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 820)",
-     "480x800x1.5x1x1"],
+     "480x800x1.5x0x1"],
     ["Samsung Galaxy Note 3",
      "Mozilla/5.0 (Linux; U; Android 4.3; en-us; SM-N900T Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30",
-     "1080x1920x2x0x1"],
+     "1080x1920x2x1x1"],
     ["Samsung Galaxy Note II",
      "Mozilla/5.0 (Linux; U; Android 4.1; en-us; GT-N7100 Build/JRO03C) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30",
-     "720x1280x2x0x1"],
+     "720x1280x2x1x1"],
     ["Samsung Galaxy Note",
      "Mozilla/5.0 (Linux; U; Android 2.3; en-us; SAMSUNG-SGH-I717 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1",
-     "800x1280x2x0x1"],
+     "800x1280x2x1x1"],
     ["Samsung Galaxy S III, Galaxy Nexus",
      "Mozilla/5.0 (Linux; U; Android 4.0; en-us; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30",
-     "720x1280x2x0x1"],
+     "720x1280x2x1x1"],
     ["Samsung Galaxy S, S II, W",
      "Mozilla/5.0 (Linux; U; Android 2.1; en-us; GT-I9000 Build/ECLAIR) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2",
-     "480x800x1.5x0x1"],
+     "480x800x1.5x1x1"],
     ["Samsung Galaxy S4",
      "Mozilla/5.0 (Linux; U; Android 2.1; en-us; GT-I9000 Build/ECLAIR) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2",
-     "1080x1920x3x0x1"],
+     "1080x1920x3x1x1"],
     ["Sony Xperia S, Ion",
      "Mozilla/5.0 (Linux; U; Android 4.0; en-us; LT28at Build/6.1.C.1.111) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30",
-     "720x1280x2x0x1"],
+     "720x1280x2x1x1"],
     ["Sony Xperia Sola, U",
      "Mozilla/5.0 (Linux; U; Android 2.3; en-us; SonyEricssonST25i Build/6.0.B.1.564) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1",
-     "480x854x1x0x1"],
+     "480x854x1x1x1"],
     ["Sony Xperia Z, Z1",
      "Mozilla/5.0 (Linux; U; Android 4.2; en-us; SonyC6903 Build/14.1.G.1.518) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30",
-     "1080x1920x3x0x1"],
+     "1080x1920x3x1x1"],
 ];
 
 WebInspector.OverridesView.DeviceTab._tablets = [
     ["Amazon Amazon Kindle Fire HD 7\"",
      "Mozilla/5.0 (Linux; U; Android 2.3.4; en-us; Kindle Fire HD Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1",
-     "1280x800x1.5x0x1"],
+     "1280x800x1.5x1x1"],
     ["Amazon Amazon Kindle Fire HD 8.9\"",
      "Mozilla/5.0 (Linux; U; Android 2.3.4; en-us; Kindle Fire HD Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1",
-     "1920x1200x1.5x0x1"],
+     "1920x1200x1.5x1x1"],
     ["Amazon Amazon Kindle Fire",
      "Mozilla/5.0 (Linux; U; Android 2.3.4; en-us; Kindle Fire Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1",
-     "1024x600x1x0x1"],
+     "1024x600x1x1x1"],
     ["Apple iPad 1 / 2 / iPad Mini",
      "Mozilla/5.0 (iPad; CPU OS 4_3_5 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8L1 Safari/6533.18.5",
-     "1024x768x1x1x1"],
+     "1024x768x1x0x1"],
     ["Apple iPad 3 / 4",
      "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53",
-     "2048x1536x2x1x1"],
+     "2048x1536x2x0x1"],
     ["BlackBerry PlayBook",
      "Mozilla/5.0 (PlayBook; U; RIM Tablet OS 2.1.0; en-US) AppleWebKit/536.2+ (KHTML like Gecko) Version/7.2.1.0 Safari/536.2+",
-     "1024x600x1x1x1"],
+     "1024x600x1x0x1"],
     ["Google Nexus 10",
      "Mozilla/5.0 (Linux; Android 4.3; Nexus 10 Build/JSS15Q) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.72 Safari/537.36",
-     "2560x1600x2x0x1"],
+     "2560x1600x2x1x1"],
     ["Google Nexus 7 2",
      "Mozilla/5.0 (Linux; Android 4.3; Nexus 7 Build/JSS15Q) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.72 Safari/537.36",
-     "1920x1200x2x0x1"],
+     "1920x1200x2x1x1"],
     ["Google Nexus 7",
      "Mozilla/5.0 (Linux; Android 4.3; Nexus 7 Build/JSS15Q) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.72 Safari/537.36",
-     "1280x800x1.325x0x1"],
+     "1280x800x1.325x1x1"],
     ["Motorola Xoom, Xyboard",
      "Mozilla/5.0 (Linux; U; Android 3.0; en-us; Xoom Build/HRI39) AppleWebKit/525.10 (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2",
-     "1280x800x1x0x1"],
+     "1280x800x1x1x1"],
     ["Samsung Galaxy Tab 7.7, 8.9, 10.1",
      "Mozilla/5.0 (Linux; U; Android 2.2; en-us; SCH-I800 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1",
-     "1280x800x1x0x1"],
+     "1280x800x1x1x1"],
     ["Samsung Galaxy Tab",
      "Mozilla/5.0 (Linux; U; Android 2.2; en-us; SCH-I800 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1",
-     "1024x600x1x0x1"],
+     "1024x600x1x1x1"],
 ];
 
 WebInspector.OverridesView.DeviceTab.prototype = {
@@ -425,7 +425,7 @@ WebInspector.OverridesView.DeviceTab.prototype = {
         var option = this._deviceSelectElement.options[this._deviceSelectElement.selectedIndex];
         var metrics;
         if (option._metrics && (metrics = WebInspector.OverridesSupport.DeviceMetrics.parseSetting(option._metrics)))
-            this._viewportValueElement.textContent = WebInspector.UIString("%s \u00D7 %s, devicePixelRatio = %s, font scale factor = %s", metrics.width, metrics.height, metrics.deviceScaleFactor, metrics.fontScaleFactor);
+            this._viewportValueElement.textContent = WebInspector.UIString("%s \u00D7 %s, devicePixelRatio = %s", metrics.width, metrics.height, metrics.deviceScaleFactor);
         else
             this._viewportValueElement.textContent = "";
         this._userAgentValueElement.textContent = option._userAgent || "";
@@ -479,7 +479,7 @@ WebInspector.OverridesView.ViewportTab.prototype = {
     _doApplyDeviceMetricsUserInput: function()
     {
         delete this._applyDeviceMetricsTimer;
-        this._setDeviceMetricsOverride(WebInspector.OverridesSupport.DeviceMetrics.parseUserInput(this._widthOverrideElement.value.trim(), this._heightOverrideElement.value.trim(), this._deviceScaleFactorOverrideElement.value.trim(), this._fontScaleFactorOverrideElement.value.trim(), this._textAutosizingOverrideCheckbox.checked), true);
+        this._setDeviceMetricsOverride(WebInspector.OverridesSupport.DeviceMetrics.parseUserInput(this._widthOverrideElement.value.trim(), this._heightOverrideElement.value.trim(), this._deviceScaleFactorOverrideElement.value.trim(), this._textAutosizingOverrideCheckbox.checked, this._useAndroidFontMetricsCheckbox.checked), true);
     },
 
     /**
@@ -499,8 +499,6 @@ WebInspector.OverridesView.ViewportTab.prototype = {
         setValid(metrics && metrics.isWidthValid(), this._widthOverrideElement);
         setValid(metrics && metrics.isHeightValid(), this._heightOverrideElement);
         setValid(metrics && metrics.isDeviceScaleFactorValid(), this._deviceScaleFactorOverrideElement);
-        setValid(metrics && metrics.isFontScaleFactorValid(), this._fontScaleFactorOverrideElement);
-        setValid(metrics && metrics.isTextAutosizingValid(), this._textAutosizingOverrideCheckbox);
 
         if (!metrics)
             return;
@@ -509,8 +507,9 @@ WebInspector.OverridesView.ViewportTab.prototype = {
             this._widthOverrideElement.value = metrics.widthToInput();
             this._heightOverrideElement.value = metrics.heightToInput();
             this._deviceScaleFactorOverrideElement.value = metrics.deviceScaleFactorToInput();
-            this._fontScaleFactorOverrideElement.value = metrics.fontScaleFactorToInput();
             this._textAutosizingOverrideCheckbox.checked = metrics.textAutosizing;
+            this._useAndroidFontMetricsCheckbox.checked = metrics.useAndroidFontMetrics;
+            this._useAndroidFontMetricsCheckbox.disabled = metrics.isUseAndroidFontMetricsDisabled();
         }
 
         if (metrics.isValid()) {
@@ -562,27 +561,30 @@ WebInspector.OverridesView.ViewportTab.prototype = {
         this._widthRangeInput.value = this._widthOverrideElement.value;
 
         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 = this._createInput(cellElement, "metrics-override-device-scale", String(metrics.deviceScaleFactor || 1), this._applyDeviceMetricsUserInput.bind(this), true);
-        this._deviceScaleFactorOverrideElement.title = WebInspector.UIString("Ratio between a device's physical pixels and device-independent pixels.");
-
-        rowElement = tableElement.createChild("tr");
-        cellElement = rowElement.createChild("td");
-        cellElement.appendChild(document.createTextNode(WebInspector.UIString("Font scale factor:")));
-        cellElement = rowElement.createChild("td");
-        this._fontScaleFactorOverrideElement = this._createInput(cellElement, "metrics-override-font-scale", String(metrics.fontScaleFactor || 1), this._applyDeviceMetricsUserInput.bind(this), true);
-        this._fontScaleFactorOverrideElement.title = WebInspector.UIString("Scale factor used on Android. Computed from the physical screen dimensions and system font settings.");
-
-        var checkbox = this._createSettingCheckbox(WebInspector.UIString("Emulate viewport"), WebInspector.settings.emulateViewport);
-        fieldsetElement.appendChild(checkbox);
 
         var textAutosizingOverrideElement = this._createNonPersistedCheckbox(WebInspector.UIString("Enable text autosizing"), this._applyDeviceMetricsUserInput.bind(this));
+        textAutosizingOverrideElement.title = WebInspector.UIString("Text autosizing is the feature that boosts font sizes on mobile devices.");
         this._textAutosizingOverrideCheckbox = textAutosizingOverrideElement.getElementsByTagName("input")[0];

[pfeldman, 2013/11/18 14:45:08]

nit: this is no better than textAutosizingOverrideElement.firstChild

         this._textAutosizingOverrideCheckbox.checked = metrics.textAutosizing;
         fieldsetElement.appendChild(textAutosizingOverrideElement);
 
+        var androidFontMetricsFieldset = document.createElement("fieldset");
+        androidFontMetricsFieldset.title = WebInspector.UIString("Android artificially increases the font metrics used by text autosizing based on the system settings and screen size.");
+        var useAndroidFontMetricsElement = this._createNonPersistedCheckbox(WebInspector.UIString("Use Android font metrics"), this._applyDeviceMetricsUserInput.bind(this));
+        this._useAndroidFontMetricsCheckbox = useAndroidFontMetricsElement.getElementsByTagName("input")[0];
+        this._useAndroidFontMetricsCheckbox.checked = metrics.useAndroidFontMetrics;
+        this._useAndroidFontMetricsCheckbox.disabled = metrics.isUseAndroidFontMetricsDisabled();
+        androidFontMetricsFieldset.appendChild(useAndroidFontMetricsElement);
+        fieldsetElement.appendChild(androidFontMetricsFieldset);
+
+        var checkbox = this._createSettingCheckbox(WebInspector.UIString("Emulate viewport"), WebInspector.settings.emulateViewport);
+        fieldsetElement.appendChild(checkbox);
+
         checkbox = this._createSettingCheckbox(WebInspector.UIString("Shrink to fit"), WebInspector.settings.deviceFitWindow);
         fieldsetElement.appendChild(checkbox);
 
@@ -604,10 +606,12 @@ WebInspector.OverridesView.ViewportTab.prototype = {
             this._heightOverrideElement.value = metrics.height || screen.height;
         if (this._deviceScaleFactorOverrideElement.value !== metrics.deviceScaleFactor)
             this._deviceScaleFactorOverrideElement.value = metrics.deviceScaleFactor || 1;
-        if (this._fontScaleFactorOverrideElement.value !== metrics.fontScaleFactor)
-            this._fontScaleFactorOverrideElement.value = metrics.fontScaleFactor || 1;
         if (this._textAutosizingOverrideCheckbox.checked !== metrics.textAutosizing)
             this._textAutosizingOverrideCheckbox.checked = metrics.textAutosizing || false;
+        if (this._useAndroidFontMetricsCheckbox.checked !== metrics.useAndroidFontMetrics)
+            this._useAndroidFontMetricsCheckbox.checked = metrics.useAndroidFontMetrics || false;
+        if (this._useAndroidFontMetricsCheckbox.disabled !== metrics.isUseAndroidFontMetricsDisabled())

[pfeldman, 2013/11/18 14:45:08]

The disabled state of this checkbox needs to be controlled by the state of
this._textAutosizingOverrideCheckbox, not the value in metrics. I think there is
a slight misunderstanding of what "Emulate" does with the given metrics: it just
applies predefined set of values to the emulation settings. User still needs to
be able to set up all these settings manually. If you don't want some of these
settings to be persisted, that is fine.

+            this._useAndroidFontMetricsCheckbox.disabled = metrics.isUseAndroidFontMetricsDisabled();
     },
 
     _createMediaEmulationElement: function()