Commit 2d0305e8 authored by dgozman@chromium.org's avatar dgozman@chromium.org

[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
parent a5115349
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
function onload() 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(); runTest();
} }
......
...@@ -412,7 +412,8 @@ WebInspector.ResponsiveDesignView.prototype = { ...@@ -412,7 +412,8 @@ WebInspector.ResponsiveDesignView.prototype = {
// Touch and viewport. // Touch and viewport.
this._touchSection = document.createElementWithClass("div", "responsive-design-section"); this._touchSection = document.createElementWithClass("div", "responsive-design-section");
fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.emulateDevice); 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); 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"); viewportCheckbox.title = WebInspector.UIString("Enable meta viewport, overlay scrollbars and default 980px body width");
fieldsetElement.appendChild(viewportCheckbox); fieldsetElement.appendChild(viewportCheckbox);
...@@ -425,7 +426,7 @@ WebInspector.ResponsiveDesignView.prototype = { ...@@ -425,7 +426,7 @@ WebInspector.ResponsiveDesignView.prototype = {
this._networkSection.appendChild(WebInspector.overridesSupport.createNetworkThroughputSelect(document)); this._networkSection.appendChild(WebInspector.overridesSupport.createNetworkThroughputSelect(document));
this._userAgentSection = document.createElementWithClass("div", "responsive-design-section responsive-design-user-agent-section"); 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(); updateNetworkCheckboxTitle();
WebInspector.overridesSupport.settings.networkConditionsDomains.addChangeListener(updateNetworkCheckboxTitle); WebInspector.overridesSupport.settings.networkConditionsDomains.addChangeListener(updateNetworkCheckboxTitle);
......
...@@ -86,15 +86,17 @@ WebInspector.OverridesView.prototype = { ...@@ -86,15 +86,17 @@ WebInspector.OverridesView.prototype = {
* @param {string} id * @param {string} id
* @param {string} name * @param {string} name
* @param {!Array.<!WebInspector.Setting>} settings * @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); WebInspector.VBox.call(this);
this._id = id; this._id = id;
this._name = name; this._name = name;
this._settings = settings; this._settings = settings;
this._predicates = predicates || [];
for (var i = 0; i < settings.length; ++i) for (var i = 0; i < settings.length; ++i)
settings[i].addChangeListener(this._updateActiveState, this); settings[i].addChangeListener(this.updateActiveState, this);
} }
WebInspector.OverridesView.Tab.prototype = { WebInspector.OverridesView.Tab.prototype = {
...@@ -105,14 +107,18 @@ WebInspector.OverridesView.Tab.prototype = { ...@@ -105,14 +107,18 @@ WebInspector.OverridesView.Tab.prototype = {
{ {
this._tabbedPane = tabbedPane; this._tabbedPane = tabbedPane;
tabbedPane.appendTab(this._id, this._name, this); tabbedPane.appendTab(this._id, this._name, this);
this._updateActiveState(); this.updateActiveState();
}, },
_updateActiveState: function() updateActiveState: function()
{ {
if (!this._tabbedPane)
return;
var active = false; var active = false;
for (var i = 0; !active && i < this._settings.length; ++i) for (var i = 0; !active && i < this._settings.length; ++i)
active = this._settings[i].get(); 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.element.classList.toggle("overrides-activate-" + this._id, active);
this._tabbedPane.changeTabTitle(this._id, active ? this._name + " \u2713" : this._name); this._tabbedPane.changeTabTitle(this._id, active ? this._name + " \u2713" : this._name);
}, },
...@@ -278,12 +284,11 @@ WebInspector.OverridesView.ViewportTab.prototype = { ...@@ -278,12 +284,11 @@ WebInspector.OverridesView.ViewportTab.prototype = {
*/ */
WebInspector.OverridesView.NetworkTab = function() 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.classList.add("overrides-network");
this.element.appendChild(this._createSettingCheckbox(WebInspector.UIString("Limit network throughput"), WebInspector.overridesSupport.settings.emulateNetworkConditions)); this.element.appendChild(this._createSettingCheckbox(WebInspector.UIString("Limit network throughput"), WebInspector.overridesSupport.settings.emulateNetworkConditions));
this.element.appendChild(this._createNetworkConditionsElement()); this.element.appendChild(this._createNetworkConditionsElement());
this.element.appendChild(this._createSettingCheckbox(WebInspector.UIString("Spoof user agent"), WebInspector.overridesSupport.settings.overrideUserAgent)); this._createUserAgentSection();
this.element.appendChild(this._createUserAgentSelectRowElement());
} }
WebInspector.OverridesView.NetworkTab.prototype = { WebInspector.OverridesView.NetworkTab.prototype = {
...@@ -306,16 +311,147 @@ 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 enabled = checkbox.checked;
var userAgentSelectAndInput = WebInspector.overridesSupport.createUserAgentSelectAndInput(document); WebInspector.overridesSupport.settings.overrideUserAgent.set(enabled);
fieldsetElement.appendChild(userAgentSelectAndInput.select); 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.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 __proto__: WebInspector.OverridesView.Tab.prototype
...@@ -329,19 +465,69 @@ WebInspector.OverridesView.NetworkTab.prototype = { ...@@ -329,19 +465,69 @@ WebInspector.OverridesView.NetworkTab.prototype = {
WebInspector.OverridesView.SensorsTab = function() WebInspector.OverridesView.SensorsTab = function()
{ {
var settings = [WebInspector.overridesSupport.settings.overrideGeolocation, WebInspector.overridesSupport.settings.overrideDeviceOrientation]; var settings = [WebInspector.overridesSupport.settings.overrideGeolocation, WebInspector.overridesSupport.settings.overrideDeviceOrientation];
if (!WebInspector.overridesSupport.hasTouchInputs() && !WebInspector.overridesSupport.responsiveDesignAvailable()) var predicates = !WebInspector.overridesSupport.hasTouchInputs() ? [this._isTouchEnabled.bind(this)] : [];
settings.push(WebInspector.overridesSupport.settings.emulateTouchEvents); WebInspector.OverridesView.Tab.call(this, "sensors", WebInspector.UIString("Sensors"), settings, predicates);
WebInspector.OverridesView.Tab.call(this, "sensors", WebInspector.UIString("Sensors"), settings);
this.element.classList.add("overrides-sensors"); this.element.classList.add("overrides-sensors");
this.registerRequiredCSS("accelerometer.css"); this.registerRequiredCSS("accelerometer.css");
if (!WebInspector.overridesSupport.hasTouchInputs() && !WebInspector.overridesSupport.responsiveDesignAvailable()) if (!WebInspector.overridesSupport.hasTouchInputs())
this.element.appendChild(this._createSettingCheckbox(WebInspector.UIString("Emulate touch screen"), WebInspector.overridesSupport.settings.emulateTouchEvents)); this.element.appendChild(this._createTouchCheckbox());
this._appendGeolocationOverrideControl(); this._appendGeolocationOverrideControl();
this._apendDeviceOrientationOverrideControl(); this._apendDeviceOrientationOverrideControl();
} }
WebInspector.OverridesView.SensorsTab.prototype = { 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() _appendGeolocationOverrideControl: function()
{ {
const geolocationSetting = WebInspector.overridesSupport.settings.geolocationOverride.get(); const geolocationSetting = WebInspector.overridesSupport.settings.geolocationOverride.get();
......
...@@ -515,13 +515,12 @@ WebInspector.OverridesSupport.prototype = { ...@@ -515,13 +515,12 @@ WebInspector.OverridesSupport.prototype = {
var metrics = WebInspector.OverridesSupport.DeviceMetrics.parseSetting(deviceMetrics); var metrics = WebInspector.OverridesSupport.DeviceMetrics.parseSetting(deviceMetrics);
this._deviceMetricsChangedListenerMuted = true; this._deviceMetricsChangedListenerMuted = true;
this._userAgentChangedListenerMuted = true; this._userAgentChangedListenerMuted = true;
this.settings.userAgent.set(userAgent); this.settings.deviceUserAgent.set(userAgent);
this.settings.deviceWidth.set(metrics.width); this.settings.deviceWidth.set(metrics.width);
this.settings.deviceHeight.set(metrics.height); this.settings.deviceHeight.set(metrics.height);
this.settings.deviceScaleFactor.set(metrics.deviceScaleFactor); this.settings.deviceScaleFactor.set(metrics.deviceScaleFactor);
this.settings.deviceTextAutosizing.set(metrics.textAutosizing); this.settings.deviceTextAutosizing.set(metrics.textAutosizing);
this.settings.overrideUserAgent.set(true); this.settings.deviceTouch.set(true);
this.settings.emulateTouchEvents.set(true);
this.settings.emulateViewport.set(true); this.settings.emulateViewport.set(true);
this.settings.emulateDevice.set(true); this.settings.emulateDevice.set(true);
delete this._deviceMetricsChangedListenerMuted; delete this._deviceMetricsChangedListenerMuted;
...@@ -533,31 +532,16 @@ WebInspector.OverridesSupport.prototype = { ...@@ -533,31 +532,16 @@ WebInspector.OverridesSupport.prototype = {
} }
}, },
/** reset: function()
* @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()
{ {
this._deviceMetricsChangedListenerMuted = true; this._deviceMetricsChangedListenerMuted = true;
this._userAgentChangedListenerMuted = true; this._userAgentChangedListenerMuted = true;
this.settings.emulateDevice.set(false); this.settings.emulateDevice.set(false);
this.settings.sensorsTouch.set(false);
this.settings.overrideUserAgent.set(false); this.settings.overrideUserAgent.set(false);
this.settings.emulateTouchEvents.set(false); this.settings.overrideDeviceOrientation.set(false);
this.settings.emulateViewport.set(false); this.settings.overrideGeolocation.set(false);
this.settings.overrideCSSMedia.set(false);
delete this._deviceMetricsChangedListenerMuted; delete this._deviceMetricsChangedListenerMuted;
delete this._userAgentChangedListenerMuted; delete this._userAgentChangedListenerMuted;
...@@ -567,12 +551,21 @@ WebInspector.OverridesSupport.prototype = { ...@@ -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); var metrics = WebInspector.OverridesSupport.DeviceMetrics.parseSetting(deviceMetrics);
this.settings.overrideGeolocation.set(false); return this.settings.deviceUserAgent.get() === userAgent
this.settings.overrideCSSMedia.set(false); && this.settings.deviceWidth.get() === metrics.width
this.resetEmulatedDevice(); && 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() applyInitialOverrides: function()
...@@ -584,18 +577,18 @@ WebInspector.OverridesSupport.prototype = { ...@@ -584,18 +577,18 @@ WebInspector.OverridesSupport.prototype = {
this._initialized = true; this._initialized = true;
this._addEmulateDeviceListener(this._userAgentChanged);
this.settings.deviceUserAgent.addChangeListener(this._userAgentChanged, this);
this.settings.overrideUserAgent.addChangeListener(this._userAgentChanged, this); this.settings.overrideUserAgent.addChangeListener(this._userAgentChanged, this);
this.settings.userAgent.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.deviceWidth.addChangeListener(this._deviceMetricsChanged, this);
this.settings.deviceHeight.addChangeListener(this._deviceMetricsChanged, this); this.settings.deviceHeight.addChangeListener(this._deviceMetricsChanged, this);
this.settings.deviceScaleFactor.addChangeListener(this._deviceMetricsChanged, this); this.settings.deviceScaleFactor.addChangeListener(this._deviceMetricsChanged, this);
this.settings.deviceTextAutosizing.addChangeListener(this._deviceMetricsChanged, this); this.settings.deviceTextAutosizing.addChangeListener(this._deviceMetricsChanged, this);
this.settings.emulateViewport.addChangeListener(this._deviceMetricsChanged, this); this.settings.emulateViewport.addChangeListener(this._deviceMetricsChanged, this);
this.settings.deviceFitWindow.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.overrideGeolocation.addChangeListener(this._geolocationPositionChanged, this);
this.settings.geolocationOverride.addChangeListener(this._geolocationPositionChanged, this); this.settings.geolocationOverride.addChangeListener(this._geolocationPositionChanged, this);
...@@ -603,9 +596,9 @@ WebInspector.OverridesSupport.prototype = { ...@@ -603,9 +596,9 @@ WebInspector.OverridesSupport.prototype = {
this.settings.overrideDeviceOrientation.addChangeListener(this._deviceOrientationChanged, this); this.settings.overrideDeviceOrientation.addChangeListener(this._deviceOrientationChanged, this);
this.settings.deviceOrientationOverride.addChangeListener(this._deviceOrientationChanged, this); this.settings.deviceOrientationOverride.addChangeListener(this._deviceOrientationChanged, this);
this.settings.emulateDevice.addChangeListener(this._emulateTouchEventsChanged, this); this._addEmulateDeviceListener(this._emulateTouchEventsChanged);
this.settings.emulateTouchEvents.addChangeListener(this._emulateTouchEventsChanged, this); this.settings.deviceTouch.addChangeListener(this._emulateTouchEventsChanged, this);
this.settings.emulateDevice.addChangeListener(this._updateUserAgentAndTouchOnEmulateDeviceChanged, this); this.settings.sensorsTouch.addChangeListener(this._emulateTouchEventsChanged, this);
this.settings.overrideCSSMedia.addChangeListener(this._cssMediaChanged, this); this.settings.overrideCSSMedia.addChangeListener(this._cssMediaChanged, this);
this.settings.emulatedCSSMedia.addChangeListener(this._cssMediaChanged, this); this.settings.emulatedCSSMedia.addChangeListener(this._cssMediaChanged, this);
...@@ -622,7 +615,7 @@ WebInspector.OverridesSupport.prototype = { ...@@ -622,7 +615,7 @@ WebInspector.OverridesSupport.prototype = {
if (this.settings.overrideGeolocation.get()) if (this.settings.overrideGeolocation.get())
this._geolocationPositionChanged(); this._geolocationPositionChanged();
if (this.settings.emulateTouchEvents.get() && (this.settings.emulateDevice.get() || !this._responsiveDesignAvailable)) if (this.isTouchEmulationEnabled())
this._emulateTouchEventsChanged(); this._emulateTouchEventsChanged();
if (this.settings.overrideCSSMedia.get()) if (this.settings.overrideCSSMedia.get())
...@@ -631,7 +624,7 @@ WebInspector.OverridesSupport.prototype = { ...@@ -631,7 +624,7 @@ WebInspector.OverridesSupport.prototype = {
if (this.settings.emulateDevice.get()) if (this.settings.emulateDevice.get())
this._deviceMetricsChanged(); this._deviceMetricsChanged();
if (this.settings.overrideUserAgent.get()) if (this.userAgentOverride())
this._userAgentChanged(); this._userAgentChanged();
if (this.settings.emulateNetworkConditions.get()) if (this.settings.emulateNetworkConditions.get())
...@@ -640,20 +633,20 @@ WebInspector.OverridesSupport.prototype = { ...@@ -640,20 +633,20 @@ WebInspector.OverridesSupport.prototype = {
this._showRulersChanged(); this._showRulersChanged();
}, },
_updateUserAgentAndTouchOnEmulateDeviceChanged: function() /**
* @param {function(this:WebInspector.OverridesSupport)} listener
*/
_addEmulateDeviceListener: function(listener)
{ {
var value = this.settings.emulateDevice.get(); this.settings.emulateDevice.addChangeListener(listener, this);
if (this.settings.overrideUserAgent.get() !== value) WebInspector.settings.responsiveDesign.enabled.addChangeListener(listener, this);
this.settings.overrideUserAgent.set(value);
if (this.settings.emulateTouchEvents.get() !== value && !this._responsiveDesignAvailable)
this.settings.emulateTouchEvents.set(value);
}, },
_userAgentChanged: function() _userAgentChanged: function()
{ {
if (this._userAgentChangedListenerMuted) if (this._userAgentChangedListenerMuted)
return; return;
var userAgent = this.settings.overrideUserAgent.get() ? this.settings.userAgent.get() : ""; var userAgent = this.userAgentOverride();
NetworkAgent.setUserAgentOverride(userAgent); NetworkAgent.setUserAgentOverride(userAgent);
if (this._userAgent !== userAgent) if (this._userAgent !== userAgent)
this._updateUserAgentWarningMessage(WebInspector.UIString("You might need to reload the page for proper user agent spoofing and viewport rendering.")); 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 = { ...@@ -798,10 +791,7 @@ WebInspector.OverridesSupport.prototype = {
_emulateTouchEventsChanged: function() _emulateTouchEventsChanged: function()
{ {
if (this.hasTouchInputs() && this.settings.emulateTouchEvents.get()) var emulateTouch = this.isTouchEmulationEnabled();
return;
var emulateTouch = this.settings.emulateTouchEvents.get() && (this.settings.emulateDevice.get() || !this._responsiveDesignAvailable);
var targets = WebInspector.targetManager.targets(); var targets = WebInspector.targetManager.targets();
for (var i = 0; i < targets.length; ++i) for (var i = 0; i < targets.length; ++i)
targets[i].domModel.emulateTouchEventObjects(emulateTouch); targets[i].domModel.emulateTouchEventObjects(emulateTouch);
...@@ -861,11 +851,11 @@ WebInspector.OverridesSupport.prototype = { ...@@ -861,11 +851,11 @@ WebInspector.OverridesSupport.prototype = {
maybeHasActiveOverridesChanged: function() maybeHasActiveOverridesChanged: function()
{ {
var hasActiveOverrides = var hasActiveOverrides =
this.settings.overrideUserAgent.get() || !!this.userAgentOverride() ||
(this.settings.emulateDevice.get() && !this.isInspectingDevice()) || (this.settings.emulateDevice.get() && !this.isInspectingDevice()) ||
this.settings.overrideGeolocation.get() || this.settings.overrideGeolocation.get() ||
this.settings.overrideDeviceOrientation.get() || this.settings.overrideDeviceOrientation.get() ||
(this.settings.emulateTouchEvents.get() && this.settings.emulateDevice.get() && !this.hasTouchInputs()) || this.isTouchEmulationEnabled() ||
(this.settings.overrideCSSMedia.get() && !this.isInspectingDevice()); (this.settings.overrideCSSMedia.get() && !this.isInspectingDevice());
if (this._hasActiveOverrides !== hasActiveOverrides) { if (this._hasActiveOverrides !== hasActiveOverrides) {
this._hasActiveOverrides = hasActiveOverrides; this._hasActiveOverrides = hasActiveOverrides;
...@@ -929,7 +919,8 @@ WebInspector.OverridesSupport.prototype = { ...@@ -929,7 +919,8 @@ WebInspector.OverridesSupport.prototype = {
this.settings.deviceFitWindow = WebInspector.settings.createSetting("deviceFitWindow", true); this.settings.deviceFitWindow = WebInspector.settings.createSetting("deviceFitWindow", true);
// FIXME: rename viewport to mobile everywhere in the code. // FIXME: rename viewport to mobile everywhere in the code.
this.settings.emulateViewport = WebInspector.settings.createSetting("emulateViewport", false); 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.overrideGeolocation = WebInspector.settings.createSetting("overrideGeolocation", false);
this.settings.geolocationOverride = WebInspector.settings.createSetting("geolocationOverride", ""); this.settings.geolocationOverride = WebInspector.settings.createSetting("geolocationOverride", "");
...@@ -937,6 +928,7 @@ WebInspector.OverridesSupport.prototype = { ...@@ -937,6 +928,7 @@ WebInspector.OverridesSupport.prototype = {
this.settings.deviceOrientationOverride = WebInspector.settings.createSetting("deviceOrientationOverride", ""); this.settings.deviceOrientationOverride = WebInspector.settings.createSetting("deviceOrientationOverride", "");
this.settings.overrideCSSMedia = WebInspector.settings.createSetting("overrideCSSMedia", false); this.settings.overrideCSSMedia = WebInspector.settings.createSetting("overrideCSSMedia", false);
this.settings.emulatedCSSMedia = WebInspector.settings.createSetting("emulatedCSSMedia", "print"); 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.emulateNetworkConditions = WebInspector.settings.createSetting("emulateNetworkConditions", false);
this.settings.networkConditionsDomains = WebInspector.settings.createSetting("networkConditionsDomains", ""); this.settings.networkConditionsDomains = WebInspector.settings.createSetting("networkConditionsDomains", "");
...@@ -974,6 +966,30 @@ WebInspector.OverridesSupport.prototype = { ...@@ -974,6 +966,30 @@ WebInspector.OverridesSupport.prototype = {
return !!this._target && this._target.isMobile(); 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} * @return {boolean}
*/ */
...@@ -982,6 +998,23 @@ WebInspector.OverridesSupport.prototype = { ...@@ -982,6 +998,23 @@ WebInspector.OverridesSupport.prototype = {
return !!this._target && this._target.hasTouchInputs; 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. * Compute the font scale factor.
* *
...@@ -1052,9 +1085,8 @@ WebInspector.OverridesSupport.prototype = { ...@@ -1052,9 +1085,8 @@ WebInspector.OverridesSupport.prototype = {
WebInspector.overridesSupport.settings.deviceTextAutosizing.addChangeListener(emulatedSettingChanged); WebInspector.overridesSupport.settings.deviceTextAutosizing.addChangeListener(emulatedSettingChanged);
WebInspector.overridesSupport.settings.emulateViewport.addChangeListener(emulatedSettingChanged); WebInspector.overridesSupport.settings.emulateViewport.addChangeListener(emulatedSettingChanged);
WebInspector.overridesSupport.settings.deviceFitWindow.addChangeListener(emulatedSettingChanged); WebInspector.overridesSupport.settings.deviceFitWindow.addChangeListener(emulatedSettingChanged);
WebInspector.overridesSupport.settings.emulateTouchEvents.addChangeListener(emulatedSettingChanged); WebInspector.overridesSupport.settings.deviceTouch.addChangeListener(emulatedSettingChanged);
WebInspector.overridesSupport.settings.overrideUserAgent.addChangeListener(emulatedSettingChanged); WebInspector.overridesSupport.settings.deviceUserAgent.addChangeListener(emulatedSettingChanged);
WebInspector.overridesSupport.settings.userAgent.addChangeListener(emulatedSettingChanged);
emulatedSettingChanged(); emulatedSettingChanged();
function deviceSelected() function deviceSelected()
...@@ -1087,101 +1119,6 @@ WebInspector.OverridesSupport.prototype = { ...@@ -1087,101 +1119,6 @@ WebInspector.OverridesSupport.prototype = {
return deviceSelectElement; 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 * @param {!Document} document
* @return {!Element} * @return {!Element}
......
...@@ -169,11 +169,10 @@ WebInspector.SettingsUI.createSettingInputField = function(label, setting, numer ...@@ -169,11 +169,10 @@ WebInspector.SettingsUI.createSettingInputField = function(label, setting, numer
* @param {!WebInspector.Setting} setting * @param {!WebInspector.Setting} setting
* @param {number=} maxLength * @param {number=} maxLength
* @param {string=} width * @param {string=} width
* @param {!WebInspector.Setting=} toggleSetting
* @param {string=} defaultText * @param {string=} defaultText
* @return {!Element} * @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 p = document.createElement("p");
var labelElement = p.createChild("span"); var labelElement = p.createChild("span");
...@@ -185,14 +184,12 @@ WebInspector.SettingsUI.createSettingLabel = function(label, setting, maxLength, ...@@ -185,14 +184,12 @@ WebInspector.SettingsUI.createSettingLabel = function(label, setting, maxLength,
if (width) if (width)
p.style.width = width; p.style.width = width;
if (toggleSetting)
toggleSetting.addChangeListener(onSettingChange);
setting.addChangeListener(onSettingChange); setting.addChangeListener(onSettingChange);
onSettingChange(); onSettingChange();
function onSettingChange() function onSettingChange()
{ {
var text = toggleSetting && !toggleSetting.get() ? (defaultText || "") : setting.get(); var text = setting.get() || defaultText;
spanElement.title = text; spanElement.title = text;
if (maxLength && text.length > maxLength) if (maxLength && text.length > maxLength)
text = text.substring(0, maxLength - 2) + "..."; text = text.substring(0, maxLength - 2) + "...";
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment