[DevTools] Ability to emulate touch or user agent, even when device emulation is turned off.

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 67 matching lines @@
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @param {string} id
  * @param {string} name
- * @param {!Array.<!WebInspector.Setting>} settings
+ * @param {!Array.<!WebInspector.Setting|function():boolean>} settings
  */
 WebInspector.OverridesView.Tab = function(id, name, settings)
 {
     WebInspector.VBox.call(this);
     this._id = id;
     this._name = name;
     this._settings = settings;
-    for (var i = 0; i < settings.length; ++i)
-        settings[i].addChangeListener(this._updateActiveState, this);
+    for (var i = 0; i < settings.length; ++i) {
+        if (settings[i] instanceof WebInspector.Setting)

[pfeldman, 2014/06/17 11:42:43]

What else could it be?

+            settings[i].addChangeListener(this.updateActiveState, this);
+    }
 }
 
 WebInspector.OverridesView.Tab.prototype = {
     /**
      * @param {!WebInspector.TabbedPane} tabbedPane
      */
     appendAsTab: function(tabbedPane)
     {
         this._tabbedPane = tabbedPane;
         tabbedPane.appendTab(this._id, this._name, this);
-        this._updateActiveState();
+        this.updateActiveState();
     },
 
-    _updateActiveState: function()
+    updateActiveState: function()
     {
+        if (!this._tabbedPane)
+            return;
         var active = false;
-        for (var i = 0; !active && i < this._settings.length; ++i)
-            active = this._settings[i].get();
+        for (var i = 0; !active && i < this._settings.length; ++i) {
+            if (this._settings[i] instanceof WebInspector.Setting) {

[pfeldman, 2014/06/17 11:42:43]

Lets not do this.

[dgozman, 2014/06/17 12:02:20]

Fixed.

+                active = this._settings[i].get();
+            } else {
+                var getter = /** @type function() */ (this._settings[i]);
+                active = getter();
+            }
+        }
         this._tabbedPane.element.classList.toggle("overrides-activate-" + this._id, active);
         this._tabbedPane.changeTabTitle(this._id, active ? this._name + " \u2713" : this._name);
     },
 
     /**
      * @param {string} name
      * @param {!WebInspector.Setting} setting
      * @param {function(boolean)=} callback
      */
     _createSettingCheckbox: function(name, setting, callback)
@@ skipping 145 matching lines @@
     __proto__: WebInspector.OverridesView.Tab.prototype
 }
 
 
 /**
  * @constructor
  * @extends {WebInspector.OverridesView.Tab}
  */
 WebInspector.OverridesView.NetworkTab = function()
 {
-    WebInspector.OverridesView.Tab.call(this, "network", WebInspector.UIString("Network"), [WebInspector.overridesSupport.settings.emulateNetworkConditions, WebInspector.overridesSupport.settings.overrideUserAgent]);
+    WebInspector.OverridesView.Tab.call(this, "network", WebInspector.UIString("Network"), [WebInspector.overridesSupport.settings.emulateNetworkConditions, this._isUserAgentOverrideEnabled.bind(this)]);
     this.element.classList.add("overrides-network");
     this.element.appendChild(this._createSettingCheckbox(WebInspector.UIString("Limit network throughput"), WebInspector.overridesSupport.settings.emulateNetworkConditions));
     this.element.appendChild(this._createNetworkConditionsElement());
-    this.element.appendChild(this._createSettingCheckbox(WebInspector.UIString("Spoof user agent"), WebInspector.overridesSupport.settings.overrideUserAgent));
-    this.element.appendChild(this._createUserAgentSelectRowElement());
+    this._createUserAgentSection();
 }
 
 WebInspector.OverridesView.NetworkTab.prototype = {
     /**
      * @return {!Element}
      */
     _createNetworkConditionsElement: function()
     {
         var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.emulateNetworkConditions);
 
         var networkThroughput = WebInspector.overridesSupport.createNetworkThroughputSelect(document);
         fieldsetElement.appendChild(networkThroughput);
         fieldsetElement.createChild("br");
 
         var networkDomains = WebInspector.SettingsUI.createSettingInputField("For domains:", WebInspector.overridesSupport.settings.networkConditionsDomains, false, 0, "", WebInspector.OverridesSupport.networkDomainsValidator, false);
         networkDomains.querySelector("input").placeholder = WebInspector.UIString("Leave empty to limit all domains");
         fieldsetElement.appendChild(networkDomains);
 
         return fieldsetElement;
     },
 
     /**
-     * @return {!Element}
+     * @return {boolean}
      */
-    _createUserAgentSelectRowElement: function()
+    _isUserAgentOverrideEnabled: function()
     {
-        var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideUserAgent);
-        var userAgentSelectAndInput = WebInspector.overridesSupport.createUserAgentSelectAndInput(document);
-        fieldsetElement.appendChild(userAgentSelectAndInput.select);
+        return !!WebInspector.overridesSupport.userAgentOverride();
+    },
+
+    _onUserAgentOverrideEnabledChanged: function()
+    {
+        this.updateActiveState();
+        var enabled =  !!WebInspector.overridesSupport.userAgentOverride();
+        if (this._userAgentCheckbox.checked !== enabled)
+            this._userAgentCheckbox.checked = enabled;
+        this._userAgentFieldset.disabled = !enabled;
+    },
+
+    _updateUserAgentOnDeviceUserAgentChanged: function()

[pfeldman, 2014/06/17 11:42:43]

Looking at the code this belongs to the OverridesSupport

[dgozman, 2014/06/17 12:02:20]

Done.

+    {
+        var userAgent = WebInspector.overridesSupport.settings.deviceUserAgent.get();
+        if (WebInspector.overridesSupport.isEmulateDeviceEnabled() && userAgent && WebInspector.overridesSupport.settings.userAgent.get() !== userAgent)
+            WebInspector.overridesSupport.settings.userAgent.set(userAgent);
+        var enabled = WebInspector.overridesSupport.isEmulateDeviceEnabled() && !!WebInspector.overridesSupport.settings.deviceUserAgent.get();
+        if (WebInspector.overridesSupport.settings.overrideUserAgent.get() !== enabled)
+            WebInspector.overridesSupport.settings.overrideUserAgent.set(enabled);
+    },
+
+    /**
+     * @param {boolean} enabled
+     */
+    _setOverrideUserAgentEnabled: function(enabled)

[pfeldman, 2014/06/17 11:42:43]

ditto

[dgozman, 2014/06/17 12:02:20]

Done.

+    {
+        WebInspector.overridesSupport.settings.overrideUserAgent.set(enabled);
+        if (WebInspector.overridesSupport.isEmulateDeviceEnabled())
+            WebInspector.overridesSupport.settings.deviceUserAgent.set(enabled ? WebInspector.overridesSupport.settings.userAgent.get() : "");
+    },
+
+    /**
+     * @param {string} userAgent
+     */
+    _setUserAgentValue: function(userAgent)
+    {
+        WebInspector.overridesSupport.settings.userAgent.set(userAgent);
+        if (WebInspector.overridesSupport.isEmulateDeviceEnabled())
+            WebInspector.overridesSupport.settings.deviceUserAgent.set(userAgent);
+    },
+
+    _createUserAgentSection: function()
+    {
+        var settings = [WebInspector.overridesSupport.settings.emulateDevice, WebInspector.settings.responsiveDesign.enabled, WebInspector.overridesSupport.settings.deviceUserAgent];
+        for (var i = 0; i < settings.length; i++) {
+            settings[i].addChangeListener(this._onUserAgentOverrideEnabledChanged.bind(this));
+            settings[i].addChangeListener(this._updateUserAgentOnDeviceUserAgentChanged.bind(this));
+        }
+        WebInspector.overridesSupport.settings.overrideUserAgent.addChangeListener(this._onUserAgentOverrideEnabledChanged.bind(this));
+        WebInspector.overridesSupport.settings.userAgent.addChangeListener(this._onUserAgentOverrideEnabledChanged.bind(this));
+
+        var label = this.element.createChild("label");
+        var checkbox = label.createChild("input");
+        checkbox.type = "checkbox";
+        checkbox.name = WebInspector.UIString("Spoof user agent");
+        label.createTextChild(WebInspector.UIString("Spoof user agent"));
+
+        /**
+         * @this {!WebInspector.OverridesView.NetworkTab}
+         */
+        function checkboxChanged()
+        {
+            this._setOverrideUserAgentEnabled(checkbox.checked);
+        }
+        checkbox.addEventListener("change", checkboxChanged.bind(this), false);
+
+        var fieldsetElement = this.element.createChild("fieldset");
+        this._createUserAgentSelectAndInput(fieldsetElement, settings.concat([WebInspector.overridesSupport.settings.userAgent]));
+
+        this._userAgentFieldset = fieldsetElement;
+        this._userAgentCheckbox = checkbox;
+        this._onUserAgentOverrideEnabledChanged();
+    },
+
+    /**
+     * @param {!Element} fieldsetElement
+     * @param {!Array.<!WebInspector.Setting>} settings
+     */
+    _createUserAgentSelectAndInput: function(fieldsetElement, settings)
+    {
+        var userAgents = WebInspector.OverridesSupport._userAgents.concat([[WebInspector.UIString("Other"), "Other"]]);
+
+        var userAgentSelectElement = fieldsetElement.createChild("select");
+        for (var i = 0; i < userAgents.length; ++i)
+            userAgentSelectElement.add(new Option(userAgents[i][0], userAgents[i][1]));
+        userAgentSelectElement.selectedIndex = 0;
+
         fieldsetElement.createChild("br");
-        fieldsetElement.appendChild(userAgentSelectAndInput.input);
-        return fieldsetElement;
+
+        var otherUserAgentElement = fieldsetElement.createChild("input");
+        otherUserAgentElement.type = "text";
+        otherUserAgentElement.value = otherUserAgentElement.title = WebInspector.overridesSupport.userAgentOverride();
+
+        /**
+         * @this {!WebInspector.OverridesView.NetworkTab}
+         */
+        function userAgentSelected()
+        {
+            var value = userAgentSelectElement.options[userAgentSelectElement.selectedIndex].value;
+            if (value !== "Other") {
+                this._setUserAgentValue(value);
+                otherUserAgentElement.value = value;
+                otherUserAgentElement.title = value;
+                otherUserAgentElement.disabled = true;
+            } else {
+                otherUserAgentElement.disabled = false;
+                otherUserAgentElement.focus();
+            }
+        }
+        var userAgentSelectedBound = userAgentSelected.bind(this);
+
+        function settingChanged()
+        {
+            var deviceUserAgent = WebInspector.overridesSupport.isEmulateDeviceEnabled() ? WebInspector.overridesSupport.settings.deviceUserAgent.get() : "";
+            var value = deviceUserAgent || WebInspector.overridesSupport.settings.userAgent.get();
+            var options = userAgentSelectElement.options;
+            var selectionRestored = false;
+            for (var i = 0; i < options.length; ++i) {
+                if (options[i].value === value) {
+                    userAgentSelectElement.selectedIndex = i;
+                    selectionRestored = true;
+                    break;
+                }
+            }
+
+            otherUserAgentElement.disabled = selectionRestored;
+            if (!selectionRestored)
+                userAgentSelectElement.selectedIndex = options.length - 1;
+
+            if (otherUserAgentElement.value !== value) {
+                otherUserAgentElement.value = value;
+                otherUserAgentElement.title = value;
+            }
+        }
+
+        function textKeyDown(event)
+        {
+            if (isEnterKey(event))
+                textChangedBound();
+        }
+
+        function textDoubleClicked()
+        {
+            userAgentSelectElement.selectedIndex = userAgents.length - 1;
+            userAgentSelectedBound();
+        }
+
+        /**
+         * @this {!WebInspector.OverridesView.NetworkTab}
+         */
+        function textChanged()
+        {
+            this._setUserAgentValue(otherUserAgentElement.value);
+        }
+        var textChangedBound = textChanged.bind(this);
+
+        settingChanged();
+        for (var i = 0; i < settings.length; i++)
+            settings[i].addChangeListener(settingChanged);
+
+        userAgentSelectElement.addEventListener("change", userAgentSelectedBound, false);
+        otherUserAgentElement.addEventListener("dblclick", textDoubleClicked, true);
+        otherUserAgentElement.addEventListener("blur", textChangedBound, false);
+        otherUserAgentElement.addEventListener("keydown", textKeyDown, false);
     },
 
     __proto__: WebInspector.OverridesView.Tab.prototype
 }
 
 
 /**
  * @constructor
  * @extends {WebInspector.OverridesView.Tab}
  */
 WebInspector.OverridesView.SensorsTab = function()
 {
     var settings = [WebInspector.overridesSupport.settings.overrideGeolocation, WebInspector.overridesSupport.settings.overrideDeviceOrientation];
-    if (!WebInspector.overridesSupport.hasTouchInputs() && !WebInspector.overridesSupport.responsiveDesignAvailable())
-        settings.push(WebInspector.overridesSupport.settings.emulateTouchEvents);
+    if (!WebInspector.overridesSupport.hasTouchInputs())
+        settings.push(this._isTouchEnabled.bind(this));
     WebInspector.OverridesView.Tab.call(this, "sensors", WebInspector.UIString("Sensors"), settings);
 
     this.element.classList.add("overrides-sensors");
     this.registerRequiredCSS("accelerometer.css");
-    if (!WebInspector.overridesSupport.hasTouchInputs() && !WebInspector.overridesSupport.responsiveDesignAvailable())
-        this.element.appendChild(this._createSettingCheckbox(WebInspector.UIString("Emulate touch screen"), WebInspector.overridesSupport.settings.emulateTouchEvents));
+    if (!WebInspector.overridesSupport.hasTouchInputs())
+        this.element.appendChild(this._createTouchCheckbox());
     this._appendGeolocationOverrideControl();
     this._apendDeviceOrientationOverrideControl();
 }
 
 WebInspector.OverridesView.SensorsTab.prototype = {
+    /**
+     * @return {boolean}
+     */
+    _isTouchEnabled: function()
+    {
+        return WebInspector.overridesSupport.isTouchEmulationEnabled();
+    },
+
+    _onTouchEmulationChanged: function()
+    {
+        this.updateActiveState();
+        var enabled =  WebInspector.overridesSupport.isTouchEmulationEnabled();
+        if (this._touchCheckbox.checked !== enabled)
+            this._touchCheckbox.checked = enabled;
+    },
+
+    _updateSensorsTouchOnDeviceTouchChanged: function()
+    {
+        var enabled = WebInspector.overridesSupport.isEmulateDeviceEnabled() && WebInspector.overridesSupport.settings.deviceTouch.get();
+        if (WebInspector.overridesSupport.settings.sensorsTouch.get() !== enabled)
+            WebInspector.overridesSupport.settings.sensorsTouch.set(enabled);
+    },
+
+    /**
+     * @return {!Element}
+     */
+    _createTouchCheckbox: function()
+    {
+        var settings = [WebInspector.overridesSupport.settings.emulateDevice, WebInspector.settings.responsiveDesign.enabled, WebInspector.overridesSupport.settings.deviceTouch];
+        for (var i = 0; i < settings.length; i++) {
+            settings[i].addChangeListener(this._onTouchEmulationChanged.bind(this));
+            settings[i].addChangeListener(this._updateSensorsTouchOnDeviceTouchChanged.bind(this));
+        }
+        WebInspector.overridesSupport.settings.sensorsTouch.addChangeListener(this._onTouchEmulationChanged.bind(this));
+
+        var input = document.createElement("input");
+        input.type = "checkbox";
+        input.name = WebInspector.UIString("Emulate touch screen");
+        this._touchCheckbox = input;
+
+        var label = document.createElement("label");
+        label.appendChild(input);
+        label.createTextChild(WebInspector.UIString("Emulate touch screen"));
+
+        function inputChanged()
+        {
+            var enabled = input.checked;
+            WebInspector.overridesSupport.settings.sensorsTouch.set(enabled);
+            if (WebInspector.overridesSupport.isEmulateDeviceEnabled())
+                WebInspector.overridesSupport.settings.deviceTouch.set(enabled);
+        }
+        input.addEventListener("change", inputChanged, false);
+
+        this._onTouchEmulationChanged();
+
+        return label;
+    },
+
     _appendGeolocationOverrideControl: function()
     {
         const geolocationSetting = WebInspector.overridesSupport.settings.geolocationOverride.get();
         var geolocation = WebInspector.OverridesSupport.GeolocationPosition.parseSetting(geolocationSetting);
         this.element.appendChild(this._createSettingCheckbox(WebInspector.UIString("Emulate geolocation coordinates"), WebInspector.overridesSupport.settings.overrideGeolocation, this._geolocationOverrideCheckboxClicked.bind(this)));
         this.element.appendChild(this._createGeolocationOverrideElement(geolocation));
         this._geolocationOverrideCheckboxClicked(WebInspector.overridesSupport.settings.overrideGeolocation.get());
     },
 
     /**
@@ skipping 237 matching lines @@
 
     __proto__ : WebInspector.OverridesView.Tab.prototype
 }
 
 /** @enum {string} */
 WebInspector.OverridesView.SensorsTab.DeviceOrientationModificationSource = {
     UserInput: "userInput",
     UserDrag: "userDrag",
     ResetButton: "resetButton"
 }