DevTools: add device selector and touch checkbox into the responsive toolbar.

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 138 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._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];
-        option._metrics = device[2];
-        this._deviceSelectElement.add(option);
-        if (this._emulatedDeviceSetting.get() === device[0]) {
-            this._deviceSelectElement.selectedIndex = i;
-            selectionRestored = true;
-        }
-    }
-
-    if (!selectionRestored)
-        this._deviceSelectElement.selectedIndex = devices.length - 1;
-
-    this._deviceSelectElement.addEventListener("change", this._deviceSelected.bind(this), false);
+    this._deviceSelectElement = WebInspector.overridesSupport.createDeviceSelect(document);
+    this._deviceSelectElement.addEventListener("change", this._updateValueLabels.bind(this), false);
     this._deviceSelectElement.addEventListener("keypress", this._keyPressed.bind(this), false);
-    this._deviceSelectElement.disabled = WebInspector.overridesSupport.isInspectingDevice();
+    this.element.appendChild(this._deviceSelectElement);
 
     var buttonsBar = this.element.createChild("div");
     var emulateButton = buttonsBar.createChild("button", "settings-tab-text-button");
     emulateButton.textContent = WebInspector.UIString("Emulate");
     emulateButton.addEventListener("click", this._emulateButtonClicked.bind(this), false);
     emulateButton.disabled = WebInspector.overridesSupport.isInspectingDevice();
 
     var resetButton = buttonsBar.createChild("button", "settings-tab-text-button");
     resetButton.textContent = WebInspector.UIString("Reset");
     resetButton.addEventListener("click", this._resetButtonClicked.bind(this), false);
     this._resetButton = resetButton;
 
     this._viewportValueLabel = this.element.createChild("div", "overrides-device-value-label");
     this._viewportValueLabel.textContent = WebInspector.UIString("Viewport:");
     this._viewportValueElement = this._viewportValueLabel.createChild("span", "overrides-device-value");
 
     this._userAgentLabel = this.element.createChild("div", "overrides-device-value-label");
     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();
 }
 
-// Third element lists device metrics separated by 'x':
-// - screen width,
-// - screen height,
-// - device scale factor,
-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"],
-    ["BlackBerry Z10",
-     "Mozilla/5.0 (BB10; Touch) AppleWebKit/537.10+ (KHTML, like Gecko) Version/10.0.9.2372 Mobile Safari/537.10+",
-     "384x640x2"],
-    ["BlackBerry Z30",
-     "Mozilla/5.0 (BB10; Touch) AppleWebKit/537.10+ (KHTML, like Gecko) Version/10.0.9.2372 Mobile Safari/537.10+",
-     "360x640x2"],
-    ["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",
-     "384x640x2"],
-    ["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",
-     "360x640x3"],
-    ["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",
-     "320x533x1.5"],
-    ["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",
-     "320x533x1.5"],
-    ["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",
-     "360x640x2"],
-    ["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",
-     "360x640x1.5"],
-    ["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",
-     "320x533x1.5"],
-    ["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",
-     "384x640x2"],
-    ["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",
-     "424x753x1.7"],
-    ["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",
-     "213x320x1.5"],
-    ["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",
-     "320x569x1.5"],
-    ["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",
-     "540x960x1"],
-    ["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",
-     "720x1280x1"],
-    ["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",
-     "360x640x1"],
-    ["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)",
-     "320x533x1.5"],
-    ["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",
-     "540x960x2"],
-    ["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",
-     "360x640x2"],
-    ["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",
-     "400x640x2"],
-    ["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",
-     "360x640x2"],
-    ["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",
-     "320x533x1.5"],
-    ["Samsung Galaxy S4",
-     "Mozilla/5.0 (Linux; Android 4.2.2; GT-I9505 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36",
-     "360x640x3"],
-    ["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",
-     "360x640x2"],
-    ["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",
-     "480x854x1"],
-    ["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",
-     "360x640x3"],
-];
-
-WebInspector.OverridesView.DeviceTab._tablets = [
-    ["Amazon Kindle Fire HDX 7\u2033",
-     "Mozilla/5.0 (Linux; U; en-us; KFTHWI Build/JDQ39) AppleWebKit/535.19 (KHTML, like Gecko) Silk/3.13 Safari/535.19 Silk-Accelerated=true",
-     "1920x1200x2"],
-    ["Amazon Kindle Fire HDX 8.9\u2033",
-     "Mozilla/5.0 (Linux; U; en-us; KFAPWI Build/JDQ39) AppleWebKit/535.19 (KHTML, like Gecko) Silk/3.13 Safari/535.19 Silk-Accelerated=true",
-     "2560x1600x2"],
-    ["Amazon Kindle Fire (First Generation)",
-     "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_3; en-us; Silk/1.0.141.16-Gen4_11004310) AppleWebkit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16 Silk-Accelerated=true",
-     "1024x600x1"],
-    ["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",
-     "1024x768x1"],
-    ["Apple iPad 3 / 4",
-     "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53",
-     "1024x768x2"],
-    ["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+",
-     "1024x600x1"],
-    ["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",
-     "1280x800x2"],
-    ["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",
-     "960x600x2"],
-    ["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",
-     "966x604x1.325"],
-    ["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",
-     "1280x800x1"],
-    ["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",
-     "1280x800x1"],
-    ["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",
-     "1024x600x1"],
-];
-
 WebInspector.OverridesView.DeviceTab.prototype = {
     /**
      * @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];
-        WebInspector.overridesSupport.emulateDevice(option._metrics, option._userAgent);
+        WebInspector.overridesSupport.emulateDevice(option.metrics, option.userAgent);
     },
 
     _resetButtonClicked: function()
     {
         WebInspector.overridesSupport.reset();
     },
 
     _hasActiveOverridesChanged: function()
     {
         this._resetButton.disabled = !WebInspector.overridesSupport.hasActiveOverrides();
     },
 
-    _deviceSelected: function()
-    {
-        var option = this._deviceSelectElement.options[this._deviceSelectElement.selectedIndex];
-        this._emulatedDeviceSetting.set(option.value);
-        this._updateValueLabels();
-    },
-
     _updateValueLabels: function()
     {
         var option = this._deviceSelectElement.options[this._deviceSelectElement.selectedIndex];
         var metrics;
-        if (option._metrics && (metrics = WebInspector.OverridesSupport.DeviceMetrics.parseSetting(option._metrics)))
+        if (option.metrics && (metrics = WebInspector.OverridesSupport.DeviceMetrics.parseSetting(option.metrics)))
             this._viewportValueElement.textContent = WebInspector.UIString("%s \xD7 %s, devicePixelRatio = %s", metrics.width, metrics.height, metrics.deviceScaleFactor);
         else
             this._viewportValueElement.textContent = "";
-        this._userAgentValueElement.textContent = option._userAgent || "";
+        this._userAgentValueElement.textContent = option.userAgent || "";
     },
 
     __proto__: WebInspector.OverridesView.Tab.prototype
 }
 
 
 /**
  * @constructor
  * @extends {WebInspector.OverridesView.Tab}
  */
@@ skipping 10 matching lines @@
     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 = {
     _createDeviceMetricsElement: function()
     {
-        var checkbox = this._createSettingCheckbox(WebInspector.UIString("Emulate resolution"), WebInspector.overridesSupport.settings.overrideDeviceResolution);
+        var checkbox = this._createSettingCheckbox(WebInspector.UIString("Emulate screen"), WebInspector.overridesSupport.settings.overrideDeviceResolution);
         checkbox.firstChild.disabled = WebInspector.overridesSupport.isInspectingDevice();
         this.element.appendChild(checkbox);
 
         var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideDeviceResolution);
         if (WebInspector.overridesSupport.isInspectingDevice())
             fieldsetElement.disabled = true;
         fieldsetElement.id = "metrics-override-section";
 
         var tableElement = fieldsetElement.createChild("table", "nowrap");
 
@@ skipping 142 matching lines @@
         fieldsetElement.createChild("br");
         this._otherUserAgentElement = fieldsetElement.createChild("input");
         this._otherUserAgentElement.type = "text";
         this._otherUserAgentElement.value = userAgent;
         this._otherUserAgentElement.title = userAgent;
 
         var selectionRestored = false;
         for (var i = 0; i < userAgents.length; ++i) {
             var agent = userAgents[i];
             var option = new Option(agent[0], agent[1]);
-            option._metrics = agent[2] ? agent[2] : "";
             this._selectElement.add(option);
             if (userAgent === agent[1]) {
                 this._selectElement.selectedIndex = i;
                 selectionRestored = true;
             }
         }
 
         if (!selectionRestored) {
             if (!userAgent)
                 this._selectElement.selectedIndex = 0;
@@ skipping 343 matching lines @@
 
     __proto__ : WebInspector.OverridesView.Tab.prototype
 }
 
 /** @enum {string} */
 WebInspector.OverridesView.SensorsTab.DeviceOrientationModificationSource = {
     UserInput: "userInput",
     UserDrag: "userDrag",
     ResetButton: "resetButton"
 }