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

Source/devtools/front_end/sdk/OverridesSupport.js

 /*
  * Copyright (C) 2012 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 246 matching lines @@
 /**
  * @param {string} value
  */
 WebInspector.OverridesSupport.inputValidator = function(value)
 {
     if (value >= 0 && value <= 10000)
         return "";
     return WebInspector.UIString("Value must be non-negative integer");
 }
 
+// Third element lists device metrics separated by 'x':
+// - screen width,
+// - screen height,
+// - device scale factor,
+WebInspector.OverridesSupport._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.OverridesSupport._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.OverridesSupport.prototype = {
     /**
      * @param {?WebInspector.OverridesSupport.PageResizer} pageResizer
      */
     setPageResizer: function(pageResizer)
     {
         if (pageResizer === this._pageResizer)
             return;
 
@@ skipping 26 matching lines @@
         this.settings.deviceTextAutosizing.set(metrics.textAutosizing);
         this.settings.overrideUserAgent.set(true);
         this.settings.emulateTouchEvents.set(true);
         this.settings.emulateViewport.set(true);
         delete this._deviceMetricsChangedListenerMuted;
         delete this._userAgentChangedListenerMuted;
         this._deviceMetricsChanged();
         this._userAgentChanged();
     },
 
-    reset: function()
+    resetEmulatedDevice: function()
     {
         this._deviceMetricsChangedListenerMuted = true;
         this._userAgentChangedListenerMuted = true;
         this.settings.overrideDeviceResolution.set(false);
         this.settings.overrideUserAgent.set(false);
         this.settings.emulateTouchEvents.set(false);
-        this.settings.overrideDeviceOrientation.set(false);
-        this.settings.overrideGeolocation.set(false);
-        this.settings.overrideCSSMedia.set(false);
         this.settings.emulateViewport.set(false);
         delete this._deviceMetricsChangedListenerMuted;
         delete this._userAgentChangedListenerMuted;
         this._deviceMetricsChanged();
         this._userAgentChanged();
     },
 
+    reset: function()
+    {
+        this.settings.overrideDeviceOrientation.set(false);
+        this.settings.overrideGeolocation.set(false);
+        this.settings.overrideCSSMedia.set(false);
+        this.resetEmulatedDevice();
+    },
+
     applyInitialOverrides: function()
     {
         if (!this._target) {
             this._applyInitialOverridesOnTargetAdded = true;
             return;
         }
 
         if (this.settings.overrideDeviceOrientation.get())
             this._deviceOrientationChanged();
 
@@ skipping 279 matching lines @@
 
         this.settings.deviceFitWindow = WebInspector.settings.createSetting("deviceFitWindow", true);
         this.settings.emulateViewport = WebInspector.settings.createSetting("emulateViewport", false);
         this.settings.emulateTouchEvents = WebInspector.settings.createSetting("emulateTouchEvents", false);
         this.settings.overrideGeolocation = WebInspector.settings.createSetting("overrideGeolocation", false);
         this.settings.geolocationOverride = WebInspector.settings.createSetting("geolocationOverride", "");
         this.settings.overrideDeviceOrientation = WebInspector.settings.createSetting("overrideDeviceOrientation", false);
         this.settings.deviceOrientationOverride = WebInspector.settings.createSetting("deviceOrientationOverride", "");
         this.settings.overrideCSSMedia = WebInspector.settings.createSetting("overrideCSSMedia", false);
         this.settings.emulatedCSSMedia = WebInspector.settings.createSetting("emulatedCSSMedia", "print");
+        this.settings.emulatedDevice = WebInspector.settings.createSetting("emulatedDevice", "Google Nexus 5");
 
         this.maybeHasActiveOverridesChanged();
 
         this.settings.overrideUserAgent.addChangeListener(this._userAgentChanged, this);
         this.settings.userAgent.addChangeListener(this._userAgentChanged, this);
 
         this.settings.overrideDeviceResolution.addChangeListener(this._deviceMetricsChanged, this);
         this.settings.deviceWidth.addChangeListener(this._deviceMetricsChanged, this);
         this.settings.deviceHeight.addChangeListener(this._deviceMetricsChanged, this);
         this.settings.deviceScaleFactor.addChangeListener(this._deviceMetricsChanged, this);
@@ skipping 84 matching lines @@
         if (minWidth <= kWidthForMinFSM)
             return kMinFSM;
         if (minWidth >= kWidthForMaxFSM)
             return kMaxFSM;
 
         // The font scale multiplier varies linearly between kMinFSM and kMaxFSM.
         var ratio = (minWidth - kWidthForMinFSM) / (kWidthForMaxFSM - kWidthForMinFSM);
         return ratio * (kMaxFSM - kMinFSM) + kMinFSM;
     },
 
+    /**
+     * @param {!Document} document
+     * @return {!Element}
+     */
+    createDeviceSelect: function(document)
+    {
+        var deviceSelectElement = document.createElement("select");
+        deviceSelectElement.disabled = WebInspector.overridesSupport.isInspectingDevice();
+
+        var devices = WebInspector.OverridesSupport._phones.concat(WebInspector.OverridesSupport._tablets);
+        devices.sort();
+        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];
+            deviceSelectElement.add(option);
+        }
+
+        settingChanged();
+        WebInspector.overridesSupport.settings.emulatedDevice.addChangeListener(settingChanged);
+        deviceSelectElement.addEventListener("change", deviceSelected, false);
+
+        function deviceSelected()
+        {
+            var option = deviceSelectElement.options[deviceSelectElement.selectedIndex];
+            WebInspector.overridesSupport.settings.emulatedDevice.removeChangeListener(settingChanged);
+            WebInspector.overridesSupport.settings.emulatedDevice.set(option.value);
+            WebInspector.overridesSupport.settings.emulatedDevice.addChangeListener(settingChanged);
+        }
+
+        function settingChanged()
+        {
+            var selectionRestored = false;
+            for (var i = 0; i < devices.length; ++i) {
+                var device = devices[i];
+                if (WebInspector.overridesSupport.settings.emulatedDevice.get() === device[0]) {
+                    deviceSelectElement.selectedIndex = i;
+                    selectionRestored = true;
+                    break;
+                }
+            }
+
+            if (!selectionRestored)
+                deviceSelectElement.selectedIndex = devices.length - 1;
+        }
+
+        return deviceSelectElement;
+    },
+
     __proto__: WebInspector.Object.prototype
 }
 
 
 /**
  * @type {!WebInspector.OverridesSupport}
  */
 WebInspector.overridesSupport;