Skip to content

GitLab

T
tangled
Commit 09fc641c authored by dgozman@chromium.org's avatar dgozman@chromium.org
Browse files
Options

[DevTools] Responsive design UI rework. 

This change moves most of the emulation under |emulateDevice| setting.

BUG=327641

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

git-svn-id: svn://svn.chromium.org/blink/trunk@176230 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent cc689614
Hide whitespace changes
Inline Side-by-side
Showing with 220 additions and 290 deletions
third_party/WebKit/Source/devtools/front_end/ResponsiveDesignView.js
View file @ 09fc641c
...@@ -48,9 +48,6 @@ WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder) ...@@ -48,9 +48,6 @@ WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)
WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._onZoomChanged, this); WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._onZoomChanged, this);
WebInspector.settings.responsiveDesign.enabled.addChangeListener(this._responsiveDesignEnabledChanged, this); WebInspector.settings.responsiveDesign.enabled.addChangeListener(this._responsiveDesignEnabledChanged, this);
WebInspector.overridesSupport.settings.emulateViewport.addChangeListener(this._maybeEnableResponsiveDesign, this);
WebInspector.overridesSupport.settings.emulateTouchEvents.addChangeListener(this._maybeEnableResponsiveDesign, this);
WebInspector.overridesSupport.settings.overrideDeviceResolution.addChangeListener(this._maybeEnableResponsiveDesign, this);
this._responsiveDesignEnabledChanged(); this._responsiveDesignEnabledChanged();
this._overridesWarningUpdated(); this._overridesWarningUpdated();
}; };
...@@ -60,17 +57,6 @@ WebInspector.ResponsiveDesignView.SliderWidth = 19; ...@@ -60,17 +57,6 @@ WebInspector.ResponsiveDesignView.SliderWidth = 19;
WebInspector.ResponsiveDesignView.RulerWidth = 20; WebInspector.ResponsiveDesignView.RulerWidth = 20;
WebInspector.ResponsiveDesignView.prototype = { WebInspector.ResponsiveDesignView.prototype = {
_maybeEnableResponsiveDesign: function()
{
if (this._enabled)
return;
if (WebInspector.overridesSupport.settings.emulateViewport.get() ||
WebInspector.overridesSupport.settings.emulateTouchEvents.get() ||
WebInspector.overridesSupport.settings.overrideDeviceResolution.get()) {
WebInspector.settings.responsiveDesign.enabled.set(true);
}
},
_invalidateCache: function() _invalidateCache: function()
{ {
delete this._cachedScale; delete this._cachedScale;
...@@ -403,51 +389,12 @@ WebInspector.ResponsiveDesignView.prototype = { ...@@ -403,51 +389,12 @@ WebInspector.ResponsiveDesignView.prototype = {
// Device // Device
this._deviceSection = document.createElementWithClass("div", "responsive-design-section"); this._deviceSection = document.createElementWithClass("div", "responsive-design-section");
var deviceLabel = this._deviceSection.createChild("label"); this._deviceSection.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Device"), WebInspector.overridesSupport.settings.emulateDevice, true));
var deviceCheckbox = deviceLabel.createChild("input"); this._deviceSection.appendChild(WebInspector.overridesSupport.createDeviceSelect(document));
deviceCheckbox.type = "checkbox";
deviceLabel.createTextChild(WebInspector.UIString("Device"));
deviceLabel.title = WebInspector.UIString("Emulate device");
deviceCheckbox.addEventListener("change", deviceChecked, false);
function deviceChecked()
{
if (deviceCheckbox.checked) {
var option = deviceSelect.options[deviceSelect.selectedIndex];
WebInspector.overridesSupport.emulateDevice(option.metrics, option.userAgent);
} else {
WebInspector.overridesSupport.resetEmulatedDevice();
}
}
var deviceSelect = WebInspector.overridesSupport.createDeviceSelect(document);
this._deviceSection.appendChild(deviceSelect);
deviceSelect.addEventListener("change", emulateDevice, false);
function emulateDevice()
{
var option = deviceSelect.options[deviceSelect.selectedIndex];
WebInspector.overridesSupport.emulateDevice(option.metrics, option.userAgent);
}
updateDeviceCheckboxStatus();
WebInspector.overridesSupport.settings.emulateViewport.addChangeListener(updateDeviceCheckboxStatus);
WebInspector.overridesSupport.settings.emulateTouchEvents.addChangeListener(updateDeviceCheckboxStatus);
WebInspector.overridesSupport.settings.overrideDeviceResolution.addChangeListener(updateDeviceCheckboxStatus);
function updateDeviceCheckboxStatus()
{
deviceCheckbox.checked = WebInspector.overridesSupport.settings.emulateViewport.get() &&
WebInspector.overridesSupport.settings.emulateTouchEvents.get() &&
WebInspector.overridesSupport.settings.overrideDeviceResolution.get();
}
// Screen // Screen
this._screenSection = document.createElementWithClass("div", "responsive-design-section"); this._screenSection = document.createElementWithClass("div", "responsive-design-section responsive-design-screen-section");
this._screenSection.appendChild(WebInspector.SettingsUI.createSettingCheckbox("Screen", WebInspector.overridesSupport.settings.overrideDeviceResolution, true)); var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.emulateDevice);
var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideDeviceResolution);
this._screenSection.appendChild(fieldsetElement); this._screenSection.appendChild(fieldsetElement);
fieldsetElement.createChild("div", "responsive-design-icon responsive-design-icon-resolution").title = WebInspector.UIString("Screen resolution"); fieldsetElement.createChild("div", "responsive-design-icon responsive-design-icon-resolution").title = WebInspector.UIString("Screen resolution");
...@@ -462,23 +409,23 @@ WebInspector.ResponsiveDesignView.prototype = { ...@@ -462,23 +409,23 @@ WebInspector.ResponsiveDesignView.prototype = {
fieldsetElement.createChild("div", "responsive-design-icon responsive-design-icon-dpr").title = WebInspector.UIString("Device pixel ratio"); fieldsetElement.createChild("div", "responsive-design-icon responsive-design-icon-dpr").title = WebInspector.UIString("Device pixel ratio");
fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceScaleFactor, true, 4, "2.5em", WebInspector.OverridesSupport.doubleInputValidator, true)); fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceScaleFactor, true, 4, "2.5em", WebInspector.OverridesSupport.doubleInputValidator, true));
// Touch and viewport // Touch and viewport.
this._touchSection = document.createElementWithClass("div", "responsive-design-section"); this._touchSection = document.createElementWithClass("div", "responsive-design-section");
this._touchSection.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Touch"), WebInspector.overridesSupport.settings.emulateTouchEvents, true)); fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.emulateDevice);
this._touchSection.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Viewport"), WebInspector.overridesSupport.settings.emulateViewport, true)); fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Touch"), WebInspector.overridesSupport.settings.emulateTouchEvents, 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);
this._touchSection.appendChild(fieldsetElement);
// Network. // Network.
this._networkSection = document.createElementWithClass("div", "responsive-design-section responsive-design-network"); this._networkSection = document.createElementWithClass("div", "responsive-design-section responsive-design-network");
var networkCheckbox = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Network"), WebInspector.overridesSupport.settings.emulateNetworkConditions, true); var networkCheckbox = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Bandwidth"), WebInspector.overridesSupport.settings.emulateNetworkConditions, true);
this._networkSection.appendChild(networkCheckbox); this._networkSection.appendChild(networkCheckbox);
this._networkSection.appendChild(WebInspector.overridesSupport.createNetworkThroughputSelect(document)); this._networkSection.appendChild(WebInspector.overridesSupport.createNetworkThroughputSelect(document));
this._networkDomainsSection = document.createElementWithClass("div", "responsive-design-section"); this._userAgentSection = document.createElementWithClass("div", "responsive-design-section responsive-design-user-agent-section");
fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.emulateNetworkConditions); this._userAgentSection.appendChild(WebInspector.SettingsUI.createSettingLabel(WebInspector.UIString("User Agent:"), WebInspector.overridesSupport.settings.userAgent, 25, "200px", WebInspector.overridesSupport.settings.overrideUserAgent, WebInspector.UIString("no override")));
var networkDomainsInput = WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.networkConditionsDomains, false, 0, "190px", WebInspector.OverridesSupport.networkDomainsValidator, false);
networkDomainsInput.querySelector("input").placeholder = WebInspector.UIString("Leave empty to limit all domains");
fieldsetElement.appendChild(networkDomainsInput);
this._networkDomainsSection.appendChild(fieldsetElement);
updateNetworkCheckboxTitle(); updateNetworkCheckboxTitle();
WebInspector.overridesSupport.settings.networkConditionsDomains.addChangeListener(updateNetworkCheckboxTitle); WebInspector.overridesSupport.settings.networkConditionsDomains.addChangeListener(updateNetworkCheckboxTitle);
...@@ -496,14 +443,6 @@ WebInspector.ResponsiveDesignView.prototype = { ...@@ -496,14 +443,6 @@ WebInspector.ResponsiveDesignView.prototype = {
} }
} }
// User agent.
this._userAgentSection = document.createElementWithClass("div", "responsive-design-composite-section vbox solid");
var userAgentRow = this._userAgentSection.createChild("div", "responsive-design-composite-section hbox solid");
userAgentRow.createChild("div", "responsive-design-section hbox").appendChild(WebInspector.SettingsUI.createSettingCheckbox("User Agent", WebInspector.overridesSupport.settings.overrideUserAgent, true));
var userAgentSelectAndInput = WebInspector.overridesSupport.createUserAgentSelectAndInput(document);
userAgentRow.createChild("div", "responsive-design-section hbox").appendChild(userAgentSelectAndInput.select);
this._userAgentSection.createChild("div", "responsive-design-section hbox").appendChild(userAgentSelectAndInput.input);
this._toolbarExpandedChanged(); this._toolbarExpandedChanged();
}, },
...@@ -521,10 +460,10 @@ WebInspector.ResponsiveDesignView.prototype = { ...@@ -521,10 +460,10 @@ WebInspector.ResponsiveDesignView.prototype = {
if (expanded) { if (expanded) {
this._expandedScreenTouchSection.setChildren([this._screenSection, this._touchSection]); this._expandedScreenTouchSection.setChildren([this._screenSection, this._touchSection]);
this._expandedDeviceSection.setChildren([this._deviceSection, this._expandedScreenTouchSection]); this._expandedDeviceSection.setChildren([this._deviceSection, this._expandedScreenTouchSection]);
this._expandedNetworkSection.setChildren([this._networkSection, this._networkDomainsSection]); this._expandedNetworkSection.setChildren([this._networkSection, this._userAgentSection]);
this._toolbarSection.setChildren([this._expandSection, this._expandedDeviceSection, this._userAgentSection, this._expandedNetworkSection]); this._toolbarSection.setChildren([this._expandSection, this._expandedDeviceSection, this._expandedNetworkSection]);
} else { } else {
this._toolbarSection.setChildren([this._expandSection, this._deviceSection, this._screenSection, this._touchSection, this._networkSection]); this._toolbarSection.setChildren([this._expandSection, this._deviceSection, this._networkSection]);
} }
this.onResize(); this.onResize();
......
third_party/WebKit/Source/devtools/front_end/elements/OverridesView.js
View file @ 09fc641c
...@@ -46,12 +46,9 @@ WebInspector.OverridesView = function() ...@@ -46,12 +46,9 @@ WebInspector.OverridesView = function()
if (!WebInspector.overridesSupport.isInspectingDevice()) { if (!WebInspector.overridesSupport.isInspectingDevice()) {
if (!WebInspector.overridesSupport.responsiveDesignAvailable()) if (!WebInspector.overridesSupport.responsiveDesignAvailable())
new WebInspector.OverridesView.DeviceTab().appendAsTab(this._tabbedPane); new WebInspector.OverridesView.DeviceTab().appendAsTab(this._tabbedPane);
new WebInspector.OverridesView.ViewportTab().appendAsTab(this._tabbedPane);
}
if (!WebInspector.overridesSupport.responsiveDesignAvailable()) {
new WebInspector.OverridesView.UserAgentTab().appendAsTab(this._tabbedPane);
new WebInspector.OverridesView.NetworkTab().appendAsTab(this._tabbedPane);
} }
new WebInspector.OverridesView.ViewportTab().appendAsTab(this._tabbedPane);
new WebInspector.OverridesView.NetworkTab().appendAsTab(this._tabbedPane);
new WebInspector.OverridesView.SensorsTab().appendAsTab(this._tabbedPane); new WebInspector.OverridesView.SensorsTab().appendAsTab(this._tabbedPane);
this._lastSelectedTabSetting = WebInspector.settings.createSetting("lastSelectedEmulateTab", "device"); this._lastSelectedTabSetting = WebInspector.settings.createSetting("lastSelectedEmulateTab", "device");
...@@ -149,97 +146,11 @@ WebInspector.OverridesView.Tab.prototype = { ...@@ -149,97 +146,11 @@ WebInspector.OverridesView.Tab.prototype = {
*/ */
WebInspector.OverridesView.DeviceTab = function() WebInspector.OverridesView.DeviceTab = function()
{ {
WebInspector.OverridesView.Tab.call(this, "device", WebInspector.UIString("Device"), []); WebInspector.OverridesView.Tab.call(this, "device", WebInspector.UIString("Device"), [WebInspector.overridesSupport.settings.emulateDevice]);
this.element.classList.add("overrides-device"); this.element.classList.add("overrides-device");
this._deviceSelectElement = WebInspector.overridesSupport.createDeviceSelect(document); this.element.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Device"), WebInspector.overridesSupport.settings.emulateDevice, true));
this._deviceSelectElement.addEventListener("change", this._updateValueLabels.bind(this), false); this.element.appendChild(this._createDeviceElement());
this._deviceSelectElement.addEventListener("keypress", this._keyPressed.bind(this), false);
this.element.appendChild(this._deviceSelectElement);
var buttonsBar = this.element.createChild("div");
var emulateButton = buttonsBar.createChild("button", "settings-tab-text-button");
emulateButton.textContent = WebInspector.UIString("Emulate");
emulateButton.addEventListener("click", this._emulateButtonClicked.bind(this), false);
emulateButton.disabled = WebInspector.overridesSupport.isInspectingDevice();
var resetButton = buttonsBar.createChild("button", "settings-tab-text-button");
resetButton.textContent = WebInspector.UIString("Reset");
resetButton.addEventListener("click", this._resetButtonClicked.bind(this), false);
this._resetButton = resetButton;
this._viewportValueLabel = this.element.createChild("div", "overrides-device-value-label");
this._viewportValueLabel.textContent = WebInspector.UIString("Viewport:");
this._viewportValueElement = this._viewportValueLabel.createChild("span", "overrides-device-value");
this._userAgentLabel = this.element.createChild("div", "overrides-device-value-label");
this._userAgentLabel.textContent = WebInspector.UIString("User agent:");
this._userAgentValueElement = this._userAgentLabel.createChild("span", "overrides-device-value");
this._updateValueLabels();
WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.HasActiveOverridesChanged, this._hasActiveOverridesChanged, this);
this._hasActiveOverridesChanged();
}
WebInspector.OverridesView.DeviceTab.prototype = {
/**
* @param {?Event} e
*/
_keyPressed: function(e)
{
if (e.keyCode === WebInspector.KeyboardShortcut.Keys.Enter.code)
this._emulateButtonClicked();
},
_emulateButtonClicked: function()
{
var option = this._deviceSelectElement.options[this._deviceSelectElement.selectedIndex];
WebInspector.overridesSupport.emulateDevice(option.metrics, option.userAgent);
},
_resetButtonClicked: function()
{
WebInspector.overridesSupport.reset();
},
_hasActiveOverridesChanged: function()
{
this._resetButton.disabled = !WebInspector.overridesSupport.hasActiveOverrides();
},
_updateValueLabels: function()
{
var option = this._deviceSelectElement.options[this._deviceSelectElement.selectedIndex];
var metrics;
if (option.metrics && (metrics = WebInspector.OverridesSupport.DeviceMetrics.parseSetting(option.metrics)))
this._viewportValueElement.textContent = WebInspector.UIString("%s \xD7 %s, devicePixelRatio = %s", metrics.width, metrics.height, metrics.deviceScaleFactor);
else
this._viewportValueElement.textContent = "";
this._userAgentValueElement.textContent = option.userAgent || "";
},
__proto__: WebInspector.OverridesView.Tab.prototype
}
/**
* @constructor
* @extends {WebInspector.OverridesView.Tab}
*/
WebInspector.OverridesView.ViewportTab = function()
{
var settings = [WebInspector.overridesSupport.settings.overrideCSSMedia];
if (!WebInspector.overridesSupport.responsiveDesignAvailable())
settings = settings.concat([WebInspector.overridesSupport.settings.overrideDeviceResolution, WebInspector.overridesSupport.settings.emulateViewport]);
WebInspector.OverridesView.Tab.call(this, "viewport", WebInspector.UIString("Screen"), settings);
this.element.classList.add("overrides-viewport");
if (!WebInspector.overridesSupport.responsiveDesignAvailable()) {
this._createDeviceMetricsElement();
var checkbox = this._createSettingCheckbox(WebInspector.UIString("Emulate viewport"), WebInspector.overridesSupport.settings.emulateViewport);
this.element.appendChild(checkbox);
}
this._createMediaEmulationFragment();
var footnote = this.element.createChild("p", "help-footnote"); var footnote = this.element.createChild("p", "help-footnote");
var footnoteLink = footnote.createChild("a"); var footnoteLink = footnote.createChild("a");
...@@ -248,18 +159,14 @@ WebInspector.OverridesView.ViewportTab = function() ...@@ -248,18 +159,14 @@ WebInspector.OverridesView.ViewportTab = function()
footnoteLink.createTextChild(WebInspector.UIString("More information about screen emulation")); footnoteLink.createTextChild(WebInspector.UIString("More information about screen emulation"));
} }
WebInspector.OverridesView.ViewportTab.prototype = { WebInspector.OverridesView.DeviceTab.prototype = {
_createDeviceMetricsElement: function() _createDeviceElement: function()
{ {
var checkbox = this._createSettingCheckbox(WebInspector.UIString("Emulate screen"), WebInspector.overridesSupport.settings.overrideDeviceResolution); var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.emulateDevice);
checkbox.firstChild.disabled = WebInspector.overridesSupport.isInspectingDevice();
this.element.appendChild(checkbox);
var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideDeviceResolution);
if (WebInspector.overridesSupport.isInspectingDevice())
fieldsetElement.disabled = true;
fieldsetElement.id = "metrics-override-section"; fieldsetElement.id = "metrics-override-section";
fieldsetElement.appendChild(WebInspector.overridesSupport.createDeviceSelect(document));
var tableElement = fieldsetElement.createChild("table", "nowrap"); var tableElement = fieldsetElement.createChild("table", "nowrap");
var rowElement = tableElement.createChild("tr"); var rowElement = tableElement.createChild("tr");
...@@ -292,15 +199,38 @@ WebInspector.OverridesView.ViewportTab.prototype = { ...@@ -292,15 +199,38 @@ WebInspector.OverridesView.ViewportTab.prototype = {
rowElement.createChild("td").appendChild(document.createTextNode(WebInspector.UIString("Device pixel ratio:"))); rowElement.createChild("td").appendChild(document.createTextNode(WebInspector.UIString("Device pixel ratio:")));
rowElement.createChild("td").appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceScaleFactor, true, 4, "80px", WebInspector.OverridesSupport.doubleInputValidator, true)); rowElement.createChild("td").appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceScaleFactor, true, 4, "80px", WebInspector.OverridesSupport.doubleInputValidator, true));
var viewportCheckbox = this._createSettingCheckbox(WebInspector.UIString("Emulate mobile"), WebInspector.overridesSupport.settings.emulateViewport);
viewportCheckbox.title = WebInspector.UIString("Enable meta viewport, overlay scrollbars and default 980px body width");
fieldsetElement.appendChild(viewportCheckbox);
// FIXME: move text autosizing to the "misc" tab together with css media, and separate it from device emulation.
var textAutosizingOverrideElement = this._createSettingCheckbox(WebInspector.UIString("Enable text autosizing "), WebInspector.overridesSupport.settings.deviceTextAutosizing); var textAutosizingOverrideElement = this._createSettingCheckbox(WebInspector.UIString("Enable text autosizing "), WebInspector.overridesSupport.settings.deviceTextAutosizing);
textAutosizingOverrideElement.title = WebInspector.UIString("Text autosizing is the feature that boosts font sizes on mobile devices."); textAutosizingOverrideElement.title = WebInspector.UIString("Text autosizing is the feature that boosts font sizes on mobile devices.");
fieldsetElement.appendChild(textAutosizingOverrideElement); fieldsetElement.appendChild(textAutosizingOverrideElement);
checkbox = this._createSettingCheckbox(WebInspector.UIString("Shrink to fit"), WebInspector.overridesSupport.settings.deviceFitWindow); fieldsetElement.appendChild(this._createSettingCheckbox(WebInspector.UIString("Shrink to fit"), WebInspector.overridesSupport.settings.deviceFitWindow));
fieldsetElement.appendChild(checkbox);
this.element.appendChild(fieldsetElement); return fieldsetElement;
}, },
__proto__: WebInspector.OverridesView.Tab.prototype
}
/**
* @constructor
* @extends {WebInspector.OverridesView.Tab}
*/
WebInspector.OverridesView.ViewportTab = function()
{
var settings = [WebInspector.overridesSupport.settings.overrideCSSMedia];
WebInspector.OverridesView.Tab.call(this, "viewport", WebInspector.UIString("Screen"), settings);
this.element.classList.add("overrides-viewport");
this._createMediaEmulationFragment();
}
WebInspector.OverridesView.ViewportTab.prototype = {
_createMediaEmulationFragment: function() _createMediaEmulationFragment: function()
{ {
var checkbox = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("CSS media"), WebInspector.overridesSupport.settings.overrideCSSMedia, true); var checkbox = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("CSS media"), WebInspector.overridesSupport.settings.overrideCSSMedia, true);
...@@ -342,47 +272,18 @@ WebInspector.OverridesView.ViewportTab.prototype = { ...@@ -342,47 +272,18 @@ WebInspector.OverridesView.ViewportTab.prototype = {
} }
/**
* @constructor
* @extends {WebInspector.OverridesView.Tab}
*/
WebInspector.OverridesView.UserAgentTab = function()
{
WebInspector.OverridesView.Tab.call(this, "user-agent", WebInspector.UIString("User Agent"), [WebInspector.overridesSupport.settings.overrideUserAgent]);
this.element.classList.add("overrides-user-agent");
var checkbox = this._createSettingCheckbox(WebInspector.UIString("Spoof user agent"), WebInspector.overridesSupport.settings.overrideUserAgent);
this.element.appendChild(checkbox);
this.element.appendChild(this._createUserAgentSelectRowElement());
}
WebInspector.OverridesView.UserAgentTab.prototype = {
/**
* @return {!Element}
*/
_createUserAgentSelectRowElement: function()
{
var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideUserAgent);
var userAgentSelectAndInput = WebInspector.overridesSupport.createUserAgentSelectAndInput(document);
fieldsetElement.appendChild(userAgentSelectAndInput.select);
fieldsetElement.createChild("br");
fieldsetElement.appendChild(userAgentSelectAndInput.input);
return fieldsetElement;
},
__proto__: WebInspector.OverridesView.Tab.prototype
}
/** /**
* @constructor * @constructor
* @extends {WebInspector.OverridesView.Tab} * @extends {WebInspector.OverridesView.Tab}
*/ */
WebInspector.OverridesView.NetworkTab = function() WebInspector.OverridesView.NetworkTab = function()
{ {
WebInspector.OverridesView.Tab.call(this, "network", WebInspector.UIString("Network"), [WebInspector.overridesSupport.settings.emulateNetworkConditions]); WebInspector.OverridesView.Tab.call(this, "network", WebInspector.UIString("Network"), [WebInspector.overridesSupport.settings.emulateNetworkConditions, WebInspector.overridesSupport.settings.overrideUserAgent]);
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.element.appendChild(this._createUserAgentSelectRowElement());
} }
WebInspector.OverridesView.NetworkTab.prototype = { WebInspector.OverridesView.NetworkTab.prototype = {
...@@ -404,6 +305,19 @@ WebInspector.OverridesView.NetworkTab.prototype = { ...@@ -404,6 +305,19 @@ WebInspector.OverridesView.NetworkTab.prototype = {
return fieldsetElement; return fieldsetElement;
}, },
/**
* @return {!Element}
*/
_createUserAgentSelectRowElement: function()
{
var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideUserAgent);
var userAgentSelectAndInput = WebInspector.overridesSupport.createUserAgentSelectAndInput(document);
fieldsetElement.appendChild(userAgentSelectAndInput.select);
fieldsetElement.createChild("br");
fieldsetElement.appendChild(userAgentSelectAndInput.input);
return fieldsetElement;
},
__proto__: WebInspector.OverridesView.Tab.prototype __proto__: WebInspector.OverridesView.Tab.prototype
} }
......
third_party/WebKit/Source/devtools/front_end/overrides.css
View file @ 09fc641c
...@@ -99,9 +99,7 @@ ...@@ -99,9 +99,7 @@
display: none; display: none;
} }
.overrides-user-agent fieldset { /* Network tab */
padding-top: 5px;
}
.overrides-network fieldset { .overrides-network fieldset {
padding-top: 5px; padding-top: 5px;
...@@ -125,6 +123,13 @@ ...@@ -125,6 +123,13 @@
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
min-width: 120px; min-width: 120px;
margin-left: 2px;
}
/* Device tab */
.overrides-device {
width: 100%;
} }
.overrides-device > select { .overrides-device > select {
...@@ -133,8 +138,12 @@ ...@@ -133,8 +138,12 @@
max-width: 90%; max-width: 90%;
} }
.overrides-device button { .overrides-device input {
margin-right: 10px; text-align: right;
}
.overrides-device input[type=range] {
width: 100%;
} }
.overrides-device > label { .overrides-device > label {
...@@ -155,59 +164,46 @@ ...@@ -155,59 +164,46 @@
margin-top: 10px; margin-top: 10px;
} }
.overrides-viewport {
width: 100%;
}
.overrides-viewport input {
text-align: right;
}
.overrides-viewport input[type=range] {
width: 100%;
}
button.overrides-swap { button.overrides-swap {
height: 20px; height: 20px;
} }
.overrides-view label { .overrides-device label {
display: flex;
height: auto;
}
.overrides-viewport label {
margin-bottom: 10px; margin-bottom: 10px;
} }
.overrides-viewport table { .overrides-device table {
margin-bottom: 5px; margin-bottom: 5px;
} }
.overrides-viewport > label { .overrides-device > label {
margin-bottom: 8px; margin-bottom: 4px;
} }
.overrides-viewport .help-footnote { .overrides-device .help-footnote {
border-top: 1px solid #EEEEEE; border-top: 1px solid #EEEEEE;
margin: 0; margin: 0;
padding: 12px; padding: 12px;
} }
.overrides-user-agent input[type=text] { .overrides-view label {
width: 400px; display: flex;
max-width: 90%; height: auto;
} }
.overrides-user-agent select { /* Screen tab */
margin: 7px 0;
.overrides-viewport > label {
margin-bottom: 4px;
} }
/* Sensors tab */
.overrides-sensors > label { .overrides-sensors > label {
margin-bottom: 10px; margin-bottom: 10px;
} }
.overrides-device, .overrides-viewport, .overrides-user-agent, .overrides-network, .overrides-sensors { .overrides-device, .overrides-viewport, .overrides-network, .overrides-sensors {
flex: none !important; flex: none !important;
} }
...@@ -217,7 +213,6 @@ button.overrides-swap { ...@@ -217,7 +213,6 @@ button.overrides-swap {
.overrides-activate-device #tab-device, .overrides-activate-device #tab-device,
.overrides-activate-viewport #tab-viewport, .overrides-activate-viewport #tab-viewport,
.overrides-activate-user-agent #tab-user-agent,
.overrides-activate-network #tab-network, .overrides-activate-network #tab-network,
.overrides-activate-sensors #tab-sensors { .overrides-activate-sensors #tab-sensors {
color: rgb(25, 100, 228); color: rgb(25, 100, 228);
...@@ -226,7 +221,6 @@ button.overrides-swap { ...@@ -226,7 +221,6 @@ button.overrides-swap {
.overrides-activate-device #tab-device.selected, .overrides-activate-device #tab-device.selected,
.overrides-activate-viewport #tab-viewport.selected, .overrides-activate-viewport #tab-viewport.selected,
.overrides-activate-user-agent #tab-user-agent.selected,
.overrides-activate-network #tab-network.selected, .overrides-activate-network #tab-network.selected,
.overrides-activate-sensors #tab-sensors.selected { .overrides-activate-sensors #tab-sensors.selected {
opacity: 1; opacity: 1;
......
third_party/WebKit/Source/devtools/front_end/responsiveDesignView.css
View file @ 09fc641c
...@@ -88,6 +88,11 @@ ...@@ -88,6 +88,11 @@
display: inline-block; display: inline-block;
} }
.responsive-design-screen-section > fieldset,
.responsive-design-user-agent-section > p {
margin-left: 7px;
}
.responsive-design-toolbar .responsive-design-section { .responsive-design-toolbar .responsive-design-section {
display: flex; display: flex;
flex: 1 0 auto; flex: 1 0 auto;
......
third_party/WebKit/Source/devtools/front_end/sdk/OverridesSupport.js
View file @ 09fc641c
...@@ -37,14 +37,13 @@ ...@@ -37,14 +37,13 @@
WebInspector.OverridesSupport = function(responsiveDesignAvailable) WebInspector.OverridesSupport = function(responsiveDesignAvailable)
{ {
WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.MainFrameNavigated, this._onMainFrameNavigated.bind(this), this); WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.MainFrameNavigated, this._onMainFrameNavigated.bind(this), this);
this._overrideDeviceResolution = false;
this._emulateViewportEnabled = false; this._emulateViewportEnabled = false;
this._userAgent = ""; this._userAgent = "";
this._pageResizer = null; this._pageResizer = null;
this._initialized = false; this._initialized = false;
this._deviceMetricsThrottler = new WebInspector.Throttler(0); this._deviceMetricsThrottler = new WebInspector.Throttler(0);
WebInspector.targetManager.observeTargets(this);
this._responsiveDesignAvailable = responsiveDesignAvailable; this._responsiveDesignAvailable = responsiveDesignAvailable;
WebInspector.targetManager.observeTargets(this);
} }
WebInspector.OverridesSupport.Events = { WebInspector.OverridesSupport.Events = {
...@@ -517,7 +516,6 @@ WebInspector.OverridesSupport.prototype = { ...@@ -517,7 +516,6 @@ WebInspector.OverridesSupport.prototype = {
this._deviceMetricsChangedListenerMuted = true; this._deviceMetricsChangedListenerMuted = true;
this._userAgentChangedListenerMuted = true; this._userAgentChangedListenerMuted = true;
this.settings.userAgent.set(userAgent); this.settings.userAgent.set(userAgent);
this.settings.overrideDeviceResolution.set(true);
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);
...@@ -525,6 +523,7 @@ WebInspector.OverridesSupport.prototype = { ...@@ -525,6 +523,7 @@ WebInspector.OverridesSupport.prototype = {
this.settings.overrideUserAgent.set(true); this.settings.overrideUserAgent.set(true);
this.settings.emulateTouchEvents.set(true); this.settings.emulateTouchEvents.set(true);
this.settings.emulateViewport.set(true); this.settings.emulateViewport.set(true);
this.settings.emulateDevice.set(true);
delete this._deviceMetricsChangedListenerMuted; delete this._deviceMetricsChangedListenerMuted;
delete this._userAgentChangedListenerMuted; delete this._userAgentChangedListenerMuted;
...@@ -534,11 +533,28 @@ WebInspector.OverridesSupport.prototype = { ...@@ -534,11 +533,28 @@ 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() resetEmulatedDevice: function()
{ {
this._deviceMetricsChangedListenerMuted = true; this._deviceMetricsChangedListenerMuted = true;
this._userAgentChangedListenerMuted = true; this._userAgentChangedListenerMuted = true;
this.settings.overrideDeviceResolution.set(false); this.settings.emulateDevice.set(false);
this.settings.overrideUserAgent.set(false); this.settings.overrideUserAgent.set(false);
this.settings.emulateTouchEvents.set(false); this.settings.emulateTouchEvents.set(false);
this.settings.emulateViewport.set(false); this.settings.emulateViewport.set(false);
...@@ -570,8 +586,9 @@ WebInspector.OverridesSupport.prototype = { ...@@ -570,8 +586,9 @@ WebInspector.OverridesSupport.prototype = {
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.overrideDeviceResolution.addChangeListener(this._deviceMetricsChanged, this); this.settings.emulateDevice.addChangeListener(this._deviceMetricsChanged, this);
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);
...@@ -586,7 +603,9 @@ WebInspector.OverridesSupport.prototype = { ...@@ -586,7 +603,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.settings.emulateTouchEvents.addChangeListener(this._emulateTouchEventsChanged, this); this.settings.emulateTouchEvents.addChangeListener(this._emulateTouchEventsChanged, this);
this.settings.emulateDevice.addChangeListener(this._updateUserAgentAndTouchOnEmulateDeviceChanged, 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);
...@@ -603,13 +622,13 @@ WebInspector.OverridesSupport.prototype = { ...@@ -603,13 +622,13 @@ WebInspector.OverridesSupport.prototype = {
if (this.settings.overrideGeolocation.get()) if (this.settings.overrideGeolocation.get())
this._geolocationPositionChanged(); this._geolocationPositionChanged();
if (this.settings.emulateTouchEvents.get()) if (this.settings.emulateTouchEvents.get() && (this.settings.emulateDevice.get() || !this._responsiveDesignAvailable))
this._emulateTouchEventsChanged(); this._emulateTouchEventsChanged();
if (this.settings.overrideCSSMedia.get()) if (this.settings.overrideCSSMedia.get())
this._cssMediaChanged(); this._cssMediaChanged();
if (this.settings.overrideDeviceResolution.get() || this.settings.emulateViewport.get()) if (this.settings.emulateDevice.get())
this._deviceMetricsChanged(); this._deviceMetricsChanged();
if (this.settings.overrideUserAgent.get()) if (this.settings.overrideUserAgent.get())
...@@ -621,6 +640,15 @@ WebInspector.OverridesSupport.prototype = { ...@@ -621,6 +640,15 @@ WebInspector.OverridesSupport.prototype = {
this._showRulersChanged(); this._showRulersChanged();
}, },
_updateUserAgentAndTouchOnEmulateDeviceChanged: function()
{
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);
},
_userAgentChanged: function() _userAgentChanged: function()
{ {
if (this._userAgentChangedListenerMuted) if (this._userAgentChangedListenerMuted)
...@@ -660,17 +688,16 @@ WebInspector.OverridesSupport.prototype = { ...@@ -660,17 +688,16 @@ WebInspector.OverridesSupport.prototype = {
if (this._deviceMetricsChangedListenerMuted) if (this._deviceMetricsChangedListenerMuted)
return; return;
var responsiveDesignAvailableAndDisabled = this._responsiveDesignAvailable && (!WebInspector.settings.responsiveDesign.enabled.get() || !this._pageResizer); var responsiveDesignAvailableAndDisabled = this._responsiveDesignAvailable && (!WebInspector.settings.responsiveDesign.enabled.get() || !this._pageResizer);
var overrideDeviceResolution = this.settings.overrideDeviceResolution.get(); var emulateDevice = this.settings.emulateDevice.get();
var emulationEnabled = overrideDeviceResolution || this.settings.emulateViewport.get(); if (responsiveDesignAvailableAndDisabled || !emulateDevice) {
if (responsiveDesignAvailableAndDisabled || !emulationEnabled) {
this._deviceMetricsThrottler.schedule(clearDeviceMetricsOverride.bind(this)); this._deviceMetricsThrottler.schedule(clearDeviceMetricsOverride.bind(this));
if (this._pageResizer && !emulationEnabled) if (this._pageResizer && !emulateDevice)
this._pageResizer.update(0, 0, 0); this._pageResizer.update(0, 0, 0);
return; return;
} }
var dipWidth = overrideDeviceResolution ? this.settings.deviceWidth.get() : 0; var dipWidth = emulateDevice ? this.settings.deviceWidth.get() : 0;
var dipHeight = overrideDeviceResolution ? this.settings.deviceHeight.get() : 0; var dipHeight = emulateDevice ? this.settings.deviceHeight.get() : 0;
// Disable override without checks. // Disable override without checks.
if (this.isInspectingDevice()) if (this.isInspectingDevice())
...@@ -728,11 +755,9 @@ WebInspector.OverridesSupport.prototype = { ...@@ -728,11 +755,9 @@ WebInspector.OverridesSupport.prototype = {
return; return;
} }
var overrideDeviceResolution = this.settings.overrideDeviceResolution.get(); var viewportEnabled = this.settings.emulateDevice.get() && this.settings.emulateViewport.get();
var viewportEnabled = this.settings.emulateViewport.get(); if (this._emulateViewportEnabled !== viewportEnabled)
if (this._overrideDeviceResolution !== overrideDeviceResolution || this._emulateViewportEnabled !== viewportEnabled)
this._updateDeviceMetricsWarningMessage(WebInspector.UIString("You might need to reload the page for proper user agent spoofing and viewport rendering.")); this._updateDeviceMetricsWarningMessage(WebInspector.UIString("You might need to reload the page for proper user agent spoofing and viewport rendering."));
this._overrideDeviceResolution = overrideDeviceResolution;
this._emulateViewportEnabled = viewportEnabled; this._emulateViewportEnabled = viewportEnabled;
this._deviceMetricsOverrideAppliedForTest(); this._deviceMetricsOverrideAppliedForTest();
this.maybeHasActiveOverridesChanged(); this.maybeHasActiveOverridesChanged();
...@@ -776,7 +801,7 @@ WebInspector.OverridesSupport.prototype = { ...@@ -776,7 +801,7 @@ WebInspector.OverridesSupport.prototype = {
if (this.hasTouchInputs() && this.settings.emulateTouchEvents.get()) if (this.hasTouchInputs() && this.settings.emulateTouchEvents.get())
return; return;
var emulateTouch = this.settings.emulateTouchEvents.get(); 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);
...@@ -814,7 +839,7 @@ WebInspector.OverridesSupport.prototype = { ...@@ -814,7 +839,7 @@ WebInspector.OverridesSupport.prototype = {
*/ */
showMetricsRulers: function() showMetricsRulers: function()
{ {
var rulersInPageResizer = this._pageResizer && this.settings.overrideDeviceResolution.get(); var rulersInPageResizer = this._pageResizer && this.settings.emulateDevice.get();
return WebInspector.settings.showMetricsRulers.get() && !rulersInPageResizer; return WebInspector.settings.showMetricsRulers.get() && !rulersInPageResizer;
}, },
...@@ -837,10 +862,10 @@ WebInspector.OverridesSupport.prototype = { ...@@ -837,10 +862,10 @@ WebInspector.OverridesSupport.prototype = {
{ {
var hasActiveOverrides = var hasActiveOverrides =
this.settings.overrideUserAgent.get() || this.settings.overrideUserAgent.get() ||
((this.settings.overrideDeviceResolution.get() || this.settings.emulateViewport.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.hasTouchInputs()) || (this.settings.emulateTouchEvents.get() && this.settings.emulateDevice.get() && !this.hasTouchInputs()) ||
(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;
...@@ -896,22 +921,22 @@ WebInspector.OverridesSupport.prototype = { ...@@ -896,22 +921,22 @@ WebInspector.OverridesSupport.prototype = {
this.settings.overrideUserAgent = WebInspector.settings.createSetting("overrideUserAgent", false); this.settings.overrideUserAgent = WebInspector.settings.createSetting("overrideUserAgent", false);
this.settings.userAgent = WebInspector.settings.createSetting("userAgent", ""); this.settings.userAgent = WebInspector.settings.createSetting("userAgent", "");
this.settings.overrideDeviceResolution = WebInspector.settings.createSetting("overrideDeviceResolution", false); this.settings.emulateDevice = WebInspector.settings.createSetting("emulateDevice", false);
this.settings.deviceWidth = WebInspector.settings.createSetting("deviceWidth", 800); this.settings.deviceWidth = WebInspector.settings.createSetting("deviceWidth", 800);
this.settings.deviceHeight = WebInspector.settings.createSetting("deviceHeight", 600); this.settings.deviceHeight = WebInspector.settings.createSetting("deviceHeight", 600);
this.settings.deviceScaleFactor = WebInspector.settings.createSetting("deviceScaleFactor", window.devicePixelRatio); this.settings.deviceScaleFactor = WebInspector.settings.createSetting("deviceScaleFactor", window.devicePixelRatio);
this.settings.deviceTextAutosizing = WebInspector.settings.createSetting("deviceTextAutosizing", true); this.settings.deviceTextAutosizing = WebInspector.settings.createSetting("deviceTextAutosizing", true);
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.
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.emulateTouchEvents = WebInspector.settings.createSetting("emulateTouchEvents", 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", "");
this.settings.overrideDeviceOrientation = WebInspector.settings.createSetting("overrideDeviceOrientation", false); this.settings.overrideDeviceOrientation = WebInspector.settings.createSetting("overrideDeviceOrientation", false);
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.emulatedDevice = WebInspector.settings.createSetting("emulatedDevice", "Google Nexus 5");
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", "");
...@@ -972,7 +997,7 @@ WebInspector.OverridesSupport.prototype = { ...@@ -972,7 +997,7 @@ WebInspector.OverridesSupport.prototype = {
*/ */
_fontScaleFactor: function(width, height) _fontScaleFactor: function(width, height)
{ {
if (!this.settings.overrideDeviceResolution.get()) if (!this.settings.emulateDevice.get())
return 1; return 1;
if (!width && !height) if (!width && !height)
return 1; return 1;
...@@ -1007,6 +1032,9 @@ WebInspector.OverridesSupport.prototype = { ...@@ -1007,6 +1032,9 @@ WebInspector.OverridesSupport.prototype = {
var devices = WebInspector.OverridesSupport._phones.concat(WebInspector.OverridesSupport._tablets); var devices = WebInspector.OverridesSupport._phones.concat(WebInspector.OverridesSupport._tablets);
devices.sort(); devices.sort();
var selectDevice = [WebInspector.UIString("<Select device>"), "", ""];
devices = devices.concat([selectDevice]);
for (var i = 0; i < devices.length; ++i) { for (var i = 0; i < devices.length; ++i) {
var device = devices[i]; var device = devices[i];
var option = new Option(device[0], device[0]); var option = new Option(device[0], device[0]);
...@@ -1015,32 +1043,45 @@ WebInspector.OverridesSupport.prototype = { ...@@ -1015,32 +1043,45 @@ WebInspector.OverridesSupport.prototype = {
deviceSelectElement.add(option); deviceSelectElement.add(option);
} }
settingChanged();
WebInspector.overridesSupport.settings.emulatedDevice.addChangeListener(settingChanged);
deviceSelectElement.addEventListener("change", deviceSelected, false); deviceSelectElement.addEventListener("change", deviceSelected, false);
var emulatedSettingChangedMuted = false;
WebInspector.overridesSupport.settings.deviceWidth.addChangeListener(emulatedSettingChanged);
WebInspector.overridesSupport.settings.deviceHeight.addChangeListener(emulatedSettingChanged);
WebInspector.overridesSupport.settings.deviceScaleFactor.addChangeListener(emulatedSettingChanged);
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);
emulatedSettingChanged();
function deviceSelected() function deviceSelected()
{ {
if (deviceSelectElement.selectedIndex === devices.length - 1)
return;
var option = deviceSelectElement.options[deviceSelectElement.selectedIndex]; var option = deviceSelectElement.options[deviceSelectElement.selectedIndex];
WebInspector.overridesSupport.settings.emulatedDevice.removeChangeListener(settingChanged); emulatedSettingChangedMuted = true;
WebInspector.overridesSupport.settings.emulatedDevice.set(option.value); WebInspector.overridesSupport.emulateDevice(option.metrics, option.userAgent);
WebInspector.overridesSupport.settings.emulatedDevice.addChangeListener(settingChanged); emulatedSettingChangedMuted = false;
} }
function settingChanged() function emulatedSettingChanged()
{ {
var selectionRestored = false; if (emulatedSettingChangedMuted)
return;
var index = devices.length - 1;
for (var i = 0; i < devices.length; ++i) { for (var i = 0; i < devices.length; ++i) {
var device = devices[i]; var option = deviceSelectElement.options[i];
if (WebInspector.overridesSupport.settings.emulatedDevice.get() === device[0]) { if (WebInspector.overridesSupport.isEmulatingDevice(option.metrics, option.userAgent)) {
deviceSelectElement.selectedIndex = i; index = i;
selectionRestored = true;
break; break;
} }
} }
deviceSelectElement.selectedIndex = index;
if (!selectionRestored)
deviceSelectElement.selectedIndex = devices.length - 1;
} }
return deviceSelectElement; return deviceSelectElement;
......
third_party/WebKit/Source/devtools/front_end/ui/SettingsUI.js
View file @ 09fc641c
...@@ -163,6 +163,43 @@ WebInspector.SettingsUI.createSettingInputField = function(label, setting, numer ...@@ -163,6 +163,43 @@ WebInspector.SettingsUI.createSettingInputField = function(label, setting, numer
return p; return p;
} }
/**
* @param {string} label
* @param {!WebInspector.Setting} setting
* @param {number=} maxLength
* @param {string=} width
* @param {!WebInspector.Setting=} toggleSetting
* @param {string=} defaultText
*/
WebInspector.SettingsUI.createSettingLabel = function(label, setting, maxLength, width, toggleSetting, defaultText)
{
var p = document.createElement("p");
var labelElement = p.createChild("span");
labelElement.textContent = label;
if (label)
labelElement.style.marginRight = "5px";
var spanElement = p.createChild("span");
spanElement.textContent = setting.get();
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();
spanElement.title = text;
if (maxLength && text.length > maxLength)
text = text.substring(0, maxLength - 2) + "...";
spanElement.textContent = text;
}
return p;
}
WebInspector.SettingsUI.createCustomSetting = function(name, element) WebInspector.SettingsUI.createCustomSetting = function(name, element)
{ {
var p = document.createElement("p"); var p = document.createElement("p");
......
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