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

BUG=327641
R=pfeldman@chromium.org

Review URL: https://codereview.chromium.org/342443002

git-svn-id: svn://svn.chromium.org/blink/trunk@176330 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/http/tests/inspector-enabled/open-with-emulation-enabled.html

@@ -5,7 +5,7 @@
 
 function onload()
 {
-    testRunner.showWebInspector(JSON.stringify({lastActivePanel:"\"console\"", overrideUserAgent: "true", drawerEditorShown: "false"}));
+    testRunner.showWebInspector(JSON.stringify({lastActivePanel:"\"console\"", overrideUserAgent: "true", userAgent: "\"some user agent\"", drawerEditorShown: "false"}));
     runTest();
 }
 

third_party/WebKit/Source/devtools/front_end/ResponsiveDesignView.js

@@ -412,7 +412,8 @@ WebInspector.ResponsiveDesignView.prototype = {
         // Touch and viewport.
         this._touchSection = document.createElementWithClass("div", "responsive-design-section");
         fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.emulateDevice);
-        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Touch"), WebInspector.overridesSupport.settings.emulateTouchEvents, true));
+        if (!WebInspector.overridesSupport.hasTouchInputs())
+            fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Touch"), WebInspector.overridesSupport.settings.deviceTouch, true));
         var viewportCheckbox = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Mobile"), WebInspector.overridesSupport.settings.emulateViewport, true);
         viewportCheckbox.title = WebInspector.UIString("Enable meta viewport, overlay scrollbars and default 980px body width");
         fieldsetElement.appendChild(viewportCheckbox);
@@ -425,7 +426,7 @@ WebInspector.ResponsiveDesignView.prototype = {
         this._networkSection.appendChild(WebInspector.overridesSupport.createNetworkThroughputSelect(document));
 
         this._userAgentSection = document.createElementWithClass("div", "responsive-design-section responsive-design-user-agent-section");
-        this._userAgentSection.appendChild(WebInspector.SettingsUI.createSettingLabel(WebInspector.UIString("User Agent:"), WebInspector.overridesSupport.settings.userAgent, 25, "200px", WebInspector.overridesSupport.settings.overrideUserAgent, WebInspector.UIString("no override")));
+        this._userAgentSection.appendChild(WebInspector.SettingsUI.createSettingLabel(WebInspector.UIString("User Agent:"), WebInspector.overridesSupport.settings.deviceUserAgent, 25, "200px", WebInspector.UIString("no override")));
 
         updateNetworkCheckboxTitle();
         WebInspector.overridesSupport.settings.networkConditionsDomains.addChangeListener(updateNetworkCheckboxTitle);

third_party/WebKit/Source/devtools/front_end/elements/OverridesView.js

@@ -86,15 +86,17 @@ WebInspector.OverridesView.prototype = {
  * @param {string} id
  * @param {string} name
  * @param {!Array.<!WebInspector.Setting>} settings
+ * @param {!Array.<function():boolean>=} predicates
  */
-WebInspector.OverridesView.Tab = function(id, name, settings)
+WebInspector.OverridesView.Tab = function(id, name, settings, predicates)
 {
     WebInspector.VBox.call(this);
     this._id = id;
     this._name = name;
     this._settings = settings;
+    this._predicates = predicates || [];
     for (var i = 0; i < settings.length; ++i)
-        settings[i].addChangeListener(this._updateActiveState, this);
+        settings[i].addChangeListener(this.updateActiveState, this);
 }
 
 WebInspector.OverridesView.Tab.prototype = {
@@ -105,14 +107,18 @@ WebInspector.OverridesView.Tab.prototype = {
     {
         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._predicates.length; ++i)
+            active = this._predicates[i]();
         this._tabbedPane.element.classList.toggle("overrides-activate-" + this._id, active);
         this._tabbedPane.changeTabTitle(this._id, active ? this._name + " \u2713" : this._name);
     },
@@ -278,12 +284,11 @@ WebInspector.OverridesView.ViewportTab.prototype = {
  */
 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 = {
@@ -306,16 +311,147 @@ WebInspector.OverridesView.NetworkTab.prototype = {
     },
 
     /**
-     * @return {!Element}
+     * @return {boolean}
      */
-    _createUserAgentSelectRowElement: function()
+    _isUserAgentOverrideEnabled: function()
+    {
+        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;
+    },
+
+    _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(WebInspector.overridesSupport.updateUserAgentToMatchDeviceUserAgent.bind(WebInspector.overridesSupport));
+        }
+        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"));
+
+        function checkboxChanged()
         {
-        var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideUserAgent);
-        var userAgentSelectAndInput = WebInspector.overridesSupport.createUserAgentSelectAndInput(document);
-        fieldsetElement.appendChild(userAgentSelectAndInput.select);
+            var enabled = checkbox.checked;
+            WebInspector.overridesSupport.settings.overrideUserAgent.set(enabled);
+            if (WebInspector.overridesSupport.isEmulateDeviceEnabled())
+                WebInspector.overridesSupport.settings.deviceUserAgent.set(enabled ? WebInspector.overridesSupport.settings.userAgent.get() : "");
+        }
+        checkbox.addEventListener("change", checkboxChanged, 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();
+
+        /**
+         * @param {string} userAgent
+         */
+        function setUserAgentValue(userAgent)
+        {
+            WebInspector.overridesSupport.settings.userAgent.set(userAgent);
+            if (WebInspector.overridesSupport.isEmulateDeviceEnabled())
+                WebInspector.overridesSupport.settings.deviceUserAgent.set(userAgent);
+        }
+
+        function userAgentSelected()
+        {
+            var value = userAgentSelectElement.options[userAgentSelectElement.selectedIndex].value;
+            if (value !== "Other") {
+                setUserAgentValue(value);
+                otherUserAgentElement.value = value;
+                otherUserAgentElement.title = value;
+                otherUserAgentElement.disabled = true;
+            } else {
+                otherUserAgentElement.disabled = false;
+                otherUserAgentElement.focus();
+            }
+        }
+
+        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))
+                textChanged();
+        }
+
+        function textDoubleClicked()
+        {
+            userAgentSelectElement.selectedIndex = userAgents.length - 1;
+            userAgentSelected();
+        }
+
+        function textChanged()
+        {
+            setUserAgentValue(otherUserAgentElement.value);
+        }
+
+        settingChanged();
+        for (var i = 0; i < settings.length; i++)
+            settings[i].addChangeListener(settingChanged);
+
+        userAgentSelectElement.addEventListener("change", userAgentSelected, false);
+        otherUserAgentElement.addEventListener("dblclick", textDoubleClicked, true);
+        otherUserAgentElement.addEventListener("blur", textChanged, false);
+        otherUserAgentElement.addEventListener("keydown", textKeyDown, false);
     },
 
     __proto__: WebInspector.OverridesView.Tab.prototype
@@ -329,19 +465,69 @@ WebInspector.OverridesView.NetworkTab.prototype = {
 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);
-    WebInspector.OverridesView.Tab.call(this, "sensors", WebInspector.UIString("Sensors"), settings);
+    var predicates = !WebInspector.overridesSupport.hasTouchInputs() ? [this._isTouchEnabled.bind(this)] : [];
+    WebInspector.OverridesView.Tab.call(this, "sensors", WebInspector.UIString("Sensors"), settings, predicates);
 
     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;
+    },
+
+    /**
+     * @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(WebInspector.overridesSupport.updateSensorsTouchToMatchDeviceTouch.bind(WebInspector.overridesSupport));
+        }
+        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();

third_party/WebKit/Source/devtools/front_end/sdk/OverridesSupport.js

@@ -515,13 +515,12 @@ WebInspector.OverridesSupport.prototype = {
         var metrics = WebInspector.OverridesSupport.DeviceMetrics.parseSetting(deviceMetrics);
         this._deviceMetricsChangedListenerMuted = true;
         this._userAgentChangedListenerMuted = true;
-        this.settings.userAgent.set(userAgent);
+        this.settings.deviceUserAgent.set(userAgent);
         this.settings.deviceWidth.set(metrics.width);
         this.settings.deviceHeight.set(metrics.height);
         this.settings.deviceScaleFactor.set(metrics.deviceScaleFactor);
         this.settings.deviceTextAutosizing.set(metrics.textAutosizing);
-        this.settings.overrideUserAgent.set(true);
-        this.settings.emulateTouchEvents.set(true);
+        this.settings.deviceTouch.set(true);
         this.settings.emulateViewport.set(true);
         this.settings.emulateDevice.set(true);
         delete this._deviceMetricsChangedListenerMuted;
@@ -533,31 +532,16 @@ WebInspector.OverridesSupport.prototype = {
         }
     },
 
-    /**
-     * @param {string} deviceMetrics
-     * @param {string} userAgent
-     * @return {boolean}
-     */
-    isEmulatingDevice: function(deviceMetrics, userAgent)
-    {
-        var metrics = WebInspector.OverridesSupport.DeviceMetrics.parseSetting(deviceMetrics);
-        return this.settings.userAgent.get() === userAgent
-            && this.settings.deviceWidth.get() === metrics.width
-            && this.settings.deviceHeight.get() === metrics.height
-            && this.settings.deviceScaleFactor.get() === metrics.deviceScaleFactor
-            && this.settings.deviceTextAutosizing.get() === metrics.textAutosizing
-            && this.settings.emulateTouchEvents.get()
-            && this.settings.emulateViewport.get();
-    },
-
-    resetEmulatedDevice: function()
+    reset: function()
     {
         this._deviceMetricsChangedListenerMuted = true;
         this._userAgentChangedListenerMuted = true;
         this.settings.emulateDevice.set(false);
+        this.settings.sensorsTouch.set(false);
         this.settings.overrideUserAgent.set(false);
-        this.settings.emulateTouchEvents.set(false);
-        this.settings.emulateViewport.set(false);
+        this.settings.overrideDeviceOrientation.set(false);
+        this.settings.overrideGeolocation.set(false);
+        this.settings.overrideCSSMedia.set(false);
         delete this._deviceMetricsChangedListenerMuted;
         delete this._userAgentChangedListenerMuted;
 
@@ -567,12 +551,21 @@ WebInspector.OverridesSupport.prototype = {
         }
     },
 
-    reset: function()
+    /**
+     * @param {string} deviceMetrics
+     * @param {string} userAgent
+     * @return {boolean}
+     */
+    isEmulatingDevice: function(deviceMetrics, userAgent)
     {
-        this.settings.overrideDeviceOrientation.set(false);
-        this.settings.overrideGeolocation.set(false);
-        this.settings.overrideCSSMedia.set(false);
-        this.resetEmulatedDevice();
+        var metrics = WebInspector.OverridesSupport.DeviceMetrics.parseSetting(deviceMetrics);
+        return this.settings.deviceUserAgent.get() === userAgent
+            && this.settings.deviceWidth.get() === metrics.width
+            && this.settings.deviceHeight.get() === metrics.height
+            && this.settings.deviceScaleFactor.get() === metrics.deviceScaleFactor
+            && this.settings.deviceTextAutosizing.get() === metrics.textAutosizing
+            && this.settings.deviceTouch.get()
+            && this.settings.emulateViewport.get();
     },
 
     applyInitialOverrides: function()
@@ -584,18 +577,18 @@ WebInspector.OverridesSupport.prototype = {
 
         this._initialized = true;
 
+        this._addEmulateDeviceListener(this._userAgentChanged);
+        this.settings.deviceUserAgent.addChangeListener(this._userAgentChanged, this);
         this.settings.overrideUserAgent.addChangeListener(this._userAgentChanged, this);
         this.settings.userAgent.addChangeListener(this._userAgentChanged, this);
-        this.settings.emulateDevice.addChangeListener(this._updateUserAgentAndTouchOnEmulateDeviceChanged, this);
 
-        this.settings.emulateDevice.addChangeListener(this._deviceMetricsChanged, this);
+        this._addEmulateDeviceListener(this._deviceMetricsChanged);
         this.settings.deviceWidth.addChangeListener(this._deviceMetricsChanged, this);
         this.settings.deviceHeight.addChangeListener(this._deviceMetricsChanged, this);
         this.settings.deviceScaleFactor.addChangeListener(this._deviceMetricsChanged, this);
         this.settings.deviceTextAutosizing.addChangeListener(this._deviceMetricsChanged, this);
         this.settings.emulateViewport.addChangeListener(this._deviceMetricsChanged, this);
         this.settings.deviceFitWindow.addChangeListener(this._deviceMetricsChanged, this);
-        WebInspector.settings.responsiveDesign.enabled.addChangeListener(this._deviceMetricsChanged, this);
 
         this.settings.overrideGeolocation.addChangeListener(this._geolocationPositionChanged, this);
         this.settings.geolocationOverride.addChangeListener(this._geolocationPositionChanged, this);
@@ -603,9 +596,9 @@ WebInspector.OverridesSupport.prototype = {
         this.settings.overrideDeviceOrientation.addChangeListener(this._deviceOrientationChanged, this);
         this.settings.deviceOrientationOverride.addChangeListener(this._deviceOrientationChanged, this);
 
-        this.settings.emulateDevice.addChangeListener(this._emulateTouchEventsChanged, this);
-        this.settings.emulateTouchEvents.addChangeListener(this._emulateTouchEventsChanged, this);
-        this.settings.emulateDevice.addChangeListener(this._updateUserAgentAndTouchOnEmulateDeviceChanged, this);
+        this._addEmulateDeviceListener(this._emulateTouchEventsChanged);
+        this.settings.deviceTouch.addChangeListener(this._emulateTouchEventsChanged, this);
+        this.settings.sensorsTouch.addChangeListener(this._emulateTouchEventsChanged, this);
 
         this.settings.overrideCSSMedia.addChangeListener(this._cssMediaChanged, this);
         this.settings.emulatedCSSMedia.addChangeListener(this._cssMediaChanged, this);
@@ -622,7 +615,7 @@ WebInspector.OverridesSupport.prototype = {
         if (this.settings.overrideGeolocation.get())
             this._geolocationPositionChanged();
 
-        if (this.settings.emulateTouchEvents.get() && (this.settings.emulateDevice.get() || !this._responsiveDesignAvailable))
+        if (this.isTouchEmulationEnabled())
             this._emulateTouchEventsChanged();
 
         if (this.settings.overrideCSSMedia.get())
@@ -631,7 +624,7 @@ WebInspector.OverridesSupport.prototype = {
         if (this.settings.emulateDevice.get())
             this._deviceMetricsChanged();
 
-        if (this.settings.overrideUserAgent.get())
+        if (this.userAgentOverride())
             this._userAgentChanged();
 
         if (this.settings.emulateNetworkConditions.get())
@@ -640,20 +633,20 @@ WebInspector.OverridesSupport.prototype = {
         this._showRulersChanged();
     },
 
-    _updateUserAgentAndTouchOnEmulateDeviceChanged: function()
+    /**
+     * @param {function(this:WebInspector.OverridesSupport)} listener
+     */
+    _addEmulateDeviceListener: function(listener)
     {
-        var value = this.settings.emulateDevice.get();
-        if (this.settings.overrideUserAgent.get() !== value)
-            this.settings.overrideUserAgent.set(value);
-        if (this.settings.emulateTouchEvents.get() !== value && !this._responsiveDesignAvailable)
-            this.settings.emulateTouchEvents.set(value);
+        this.settings.emulateDevice.addChangeListener(listener, this);
+        WebInspector.settings.responsiveDesign.enabled.addChangeListener(listener, this);
     },
 
     _userAgentChanged: function()
     {
         if (this._userAgentChangedListenerMuted)
             return;
-        var userAgent = this.settings.overrideUserAgent.get() ? this.settings.userAgent.get() : "";
+        var userAgent = this.userAgentOverride();
         NetworkAgent.setUserAgentOverride(userAgent);
         if (this._userAgent !== userAgent)
             this._updateUserAgentWarningMessage(WebInspector.UIString("You might need to reload the page for proper user agent spoofing and viewport rendering."));
@@ -798,10 +791,7 @@ WebInspector.OverridesSupport.prototype = {
 
     _emulateTouchEventsChanged: function()
     {
-        if (this.hasTouchInputs() && this.settings.emulateTouchEvents.get())
-            return;
-
-        var emulateTouch = this.settings.emulateTouchEvents.get() && (this.settings.emulateDevice.get() || !this._responsiveDesignAvailable);
+        var emulateTouch = this.isTouchEmulationEnabled();
         var targets = WebInspector.targetManager.targets();
         for (var i = 0; i < targets.length; ++i)
             targets[i].domModel.emulateTouchEventObjects(emulateTouch);
@@ -861,11 +851,11 @@ WebInspector.OverridesSupport.prototype = {
     maybeHasActiveOverridesChanged: function()
     {
         var hasActiveOverrides =
-            this.settings.overrideUserAgent.get() ||
+            !!this.userAgentOverride() ||
             (this.settings.emulateDevice.get() && !this.isInspectingDevice()) ||
             this.settings.overrideGeolocation.get() ||
             this.settings.overrideDeviceOrientation.get() ||
-            (this.settings.emulateTouchEvents.get() && this.settings.emulateDevice.get() && !this.hasTouchInputs()) ||
+            this.isTouchEmulationEnabled() ||
             (this.settings.overrideCSSMedia.get() && !this.isInspectingDevice());
         if (this._hasActiveOverrides !== hasActiveOverrides) {
             this._hasActiveOverrides = hasActiveOverrides;
@@ -929,7 +919,8 @@ WebInspector.OverridesSupport.prototype = {
         this.settings.deviceFitWindow = WebInspector.settings.createSetting("deviceFitWindow", true);
         // FIXME: rename viewport to mobile everywhere in the code.
         this.settings.emulateViewport = WebInspector.settings.createSetting("emulateViewport", false);
-        this.settings.emulateTouchEvents = WebInspector.settings.createSetting("emulateTouchEvents", false);
+        this.settings.deviceTouch = WebInspector.settings.createSetting("deviceTouch", false);
+        this.settings.deviceUserAgent = WebInspector.settings.createSetting("deviceUserAgent", false);
 
         this.settings.overrideGeolocation = WebInspector.settings.createSetting("overrideGeolocation", false);
         this.settings.geolocationOverride = WebInspector.settings.createSetting("geolocationOverride", "");
@@ -937,6 +928,7 @@ WebInspector.OverridesSupport.prototype = {
         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.sensorsTouch = WebInspector.settings.createSetting("sensorsTouch", false);
 
         this.settings.emulateNetworkConditions = WebInspector.settings.createSetting("emulateNetworkConditions", false);
         this.settings.networkConditionsDomains = WebInspector.settings.createSetting("networkConditionsDomains", "");
@@ -974,6 +966,30 @@ WebInspector.OverridesSupport.prototype = {
         return !!this._target && this._target.isMobile();
     },
 
+    /**
+     * @return {boolean}
+     */
+    isEmulateDeviceEnabled: function()
+    {
+        return this.settings.emulateDevice.get() && (!this._responsiveDesignAvailable || WebInspector.settings.responsiveDesign.enabled.get());
+    },
+
+    /**
+     * @return {boolean}
+     */
+    isTouchEmulationEnabled: function()
+    {
+        return !this.hasTouchInputs() && ((this.isEmulateDeviceEnabled() && this.settings.deviceTouch.get()) || this.settings.sensorsTouch.get());
+    },
+
+    /**
+     * @return {string}
+     */
+    userAgentOverride: function()
+    {
+        return this.isEmulateDeviceEnabled() ? this.settings.deviceUserAgent.get() : (this.settings.overrideUserAgent.get() ? this.settings.userAgent.get() : "");
+    },
+
     /**
      * @return {boolean}
      */
@@ -982,6 +998,23 @@ WebInspector.OverridesSupport.prototype = {
         return !!this._target && this._target.hasTouchInputs;
     },
 
+    updateSensorsTouchToMatchDeviceTouch: function()
+    {
+        var enabled = this.isEmulateDeviceEnabled() && this.settings.deviceTouch.get();
+        if (this.settings.sensorsTouch.get() !== enabled)
+            this.settings.sensorsTouch.set(enabled);
+    },
+
+    updateUserAgentToMatchDeviceUserAgent: function()
+    {
+        var userAgent = this.settings.deviceUserAgent.get();
+        if (this.isEmulateDeviceEnabled() && userAgent && this.settings.userAgent.get() !== userAgent)
+            this.settings.userAgent.set(userAgent);
+        var enabled = this.isEmulateDeviceEnabled() && !!this.settings.deviceUserAgent.get();
+        if (this.settings.overrideUserAgent.get() !== enabled)
+            this.settings.overrideUserAgent.set(enabled);
+    },
+
     /**
      * Compute the font scale factor.
      *
@@ -1052,9 +1085,8 @@ WebInspector.OverridesSupport.prototype = {
         WebInspector.overridesSupport.settings.deviceTextAutosizing.addChangeListener(emulatedSettingChanged);
         WebInspector.overridesSupport.settings.emulateViewport.addChangeListener(emulatedSettingChanged);
         WebInspector.overridesSupport.settings.deviceFitWindow.addChangeListener(emulatedSettingChanged);
-        WebInspector.overridesSupport.settings.emulateTouchEvents.addChangeListener(emulatedSettingChanged);
-        WebInspector.overridesSupport.settings.overrideUserAgent.addChangeListener(emulatedSettingChanged);
-        WebInspector.overridesSupport.settings.userAgent.addChangeListener(emulatedSettingChanged);
+        WebInspector.overridesSupport.settings.deviceTouch.addChangeListener(emulatedSettingChanged);
+        WebInspector.overridesSupport.settings.deviceUserAgent.addChangeListener(emulatedSettingChanged);
         emulatedSettingChanged();
 
         function deviceSelected()
@@ -1087,101 +1119,6 @@ WebInspector.OverridesSupport.prototype = {
         return deviceSelectElement;
     },
 
-    /**
-     * @param {!Document} document
-     * @return {{select: !Element, input: !Element}}
-     */
-    createUserAgentSelectAndInput: function(document)
-    {
-        var overrideUserAgentSetting = WebInspector.overridesSupport.settings.overrideUserAgent;
-        var userAgentSetting = WebInspector.overridesSupport.settings.userAgent;
-        var userAgents = WebInspector.OverridesSupport._userAgents.concat([[WebInspector.UIString("Other"), "Other"]]);
-
-        var userAgentSelectElement = document.createElement("select");
-        for (var i = 0; i < userAgents.length; ++i)
-            userAgentSelectElement.add(new Option(userAgents[i][0], userAgents[i][1]));
-        userAgentSelectElement.selectedIndex = 0;
-
-        var otherUserAgentElement = document.createElement("input");
-        otherUserAgentElement.type = "text";
-        otherUserAgentElement.value = userAgentSetting.get();
-        otherUserAgentElement.title = userAgentSetting.get();
-
-        settingChanged();
-        userAgentSetting.addChangeListener(settingChanged);
-        userAgentSelectElement.addEventListener("change", userAgentSelected, false);
-
-        otherUserAgentElement.addEventListener("dblclick", textDoubleClicked, true);
-        otherUserAgentElement.addEventListener("blur", textChanged, false);
-        otherUserAgentElement.addEventListener("keydown", textKeyDown, false);
-
-        function userAgentSelected()
-        {
-            var value = userAgentSelectElement.options[userAgentSelectElement.selectedIndex].value;
-            if (value !== "Other") {
-                userAgentSetting.removeChangeListener(settingChanged);
-                userAgentSetting.set(value);
-                userAgentSetting.addChangeListener(settingChanged);
-                otherUserAgentElement.value = value;
-                otherUserAgentElement.title = value;
-                otherUserAgentElement.readOnly = true;
-            } else {
-                otherUserAgentElement.readOnly = !overrideUserAgentSetting.get();
-                otherUserAgentElement.focus();
-            }
-            overrideUserAgentSetting.set(true);
-        }
-
-        function settingChanged()
-        {
-            var value = userAgentSetting.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.readOnly = !overrideUserAgentSetting.get() || selectionRestored;
-            if (!selectionRestored)
-                userAgentSelectElement.selectedIndex = options.length - 1;
-
-            if (otherUserAgentElement.value !== value) {
-                otherUserAgentElement.value = value;
-                otherUserAgentElement.title = value;
-            }
-        }
-
-        function textKeyDown(event)
-        {
-            if (isEnterKey(event))
-                textChanged();
-        }
-
-        function textDoubleClicked()
-        {
-            userAgentSelectElement.selectedIndex = userAgents.length - 1;
-            userAgentSelected();
-        }
-
-        function textChanged()
-        {
-            if (userAgentSetting.get() !== otherUserAgentElement.value)
-                userAgentSetting.set(otherUserAgentElement.value);
-        }
-
-        overrideUserAgentSetting.addChangeListener(overrideUserAgentChanged);
-        function overrideUserAgentChanged()
-        {
-            otherUserAgentElement.readOnly = !overrideUserAgentSetting.get() || (userAgentSelectElement.options[userAgentSelectElement.selectedIndex].value !== "Other");
-        }
-
-        return { select: userAgentSelectElement, input: otherUserAgentElement };
-    },
-
     /**
      * @param {!Document} document
      * @return {!Element}

third_party/WebKit/Source/devtools/front_end/ui/SettingsUI.js

@@ -169,11 +169,10 @@ WebInspector.SettingsUI.createSettingInputField = function(label, setting, numer
  * @param {!WebInspector.Setting} setting
  * @param {number=} maxLength
  * @param {string=} width
- * @param {!WebInspector.Setting=} toggleSetting
  * @param {string=} defaultText
  * @return {!Element}
  */
-WebInspector.SettingsUI.createSettingLabel = function(label, setting, maxLength, width, toggleSetting, defaultText)
+WebInspector.SettingsUI.createSettingLabel = function(label, setting, maxLength, width, defaultText)
 {
     var p = document.createElement("p");
     var labelElement = p.createChild("span");
@@ -185,14 +184,12 @@ WebInspector.SettingsUI.createSettingLabel = function(label, setting, maxLength,
     if (width)
         p.style.width = width;
 
-    if (toggleSetting)
-        toggleSetting.addChangeListener(onSettingChange);
     setting.addChangeListener(onSettingChange);
     onSettingChange();
 
     function onSettingChange()
     {
-        var text = toggleSetting && !toggleSetting.get() ? (defaultText || "") : setting.get();
+        var text = setting.get() || defaultText;
         spanElement.title = text;
         if (maxLength && text.length > maxLength)
             text = text.substring(0, maxLength - 2) + "...";