Skip to content

GitLab

T
tangled
Commit f65c9f60 authored by luoe's avatar luoe Committed by Commit bot
Browse files
Options

DevTools: device mode devices remember last used zoom 

Before, switching devices in Device Mode would set the zoom scale to fit the
window. Now, devices will remember their last used mode.

BUG=656020

Review-Url: https://codereview.chromium.org/2431823002
Cr-Commit-Position: refs/heads/master@{#427196}
parent c262d276
Hide whitespace changes
Inline Side-by-side
Showing with 110 additions and 12 deletions
third_party/WebKit/LayoutTests/inspector/device-mode/device-mode-switching-devices-expected.txt 0 → 100644
View file @ f65c9f60
Test preservation of orientation and scale when that switching devices in device mode.
Test that devices remember their scale.
Switch to phone 0
Setting scale to 0.5
Phone0 Scale: 0.5
Switch to phone 1
Phone1 Scale: 1
Switch to phone 0
Phone0 Scale: 0.5
third_party/WebKit/LayoutTests/inspector/device-mode/device-mode-switching-devices.html 0 → 100644
View file @ f65c9f60
<html>
<head>
<script src="../../http/tests/inspector/inspector-test.js"></script>
<script src="device-mode-test.js"></script>
<script type="text/javascript">
function test()
{
var phone0 = InspectorTest.buildFakePhone();
var phone1 = InspectorTest.buildFakePhone();
var view = new WebInspector.DeviceModeView();
var toolbar = view._toolbar;
var model = view._model;
var viewportSize = new Size(800, 600);
model.setAvailableSize(viewportSize, viewportSize);
InspectorTest.addResult("\nTest that devices remember their scale.");
InspectorTest.addResult("Switch to phone 0");
toolbar._emulateDevice(phone0);
InspectorTest.addResult("Setting scale to 0.5");
toolbar._onScaleMenuChanged(0.5);
InspectorTest.addResult("Phone0 Scale: " + model._scaleSetting.get());
InspectorTest.addResult("Switch to phone 1");
toolbar._emulateDevice(phone1);
InspectorTest.addResult("Phone1 Scale: " + model._scaleSetting.get());
InspectorTest.addResult("Switch to phone 0");
toolbar._emulateDevice(phone0);
InspectorTest.addResult("Phone0 Scale: " + model._scaleSetting.get());
InspectorTest.completeTest();
}
</script>
</head>
<body onload="runTest()">
<p>Test preservation of orientation and scale when that switching devices in device mode.</p>
</body>
</html>
third_party/WebKit/LayoutTests/inspector/device-mode/device-mode-test.js 0 → 100644
View file @ f65c9f60
var initialize_DeviceMode = function()
{
InspectorTest.buildFakePhone = function(overrides)
{
var StandardPhoneJSON = {
"show-by-default": false,
"title": "Fake Phone 1",
"screen": {
"horizontal": { "width": 480, "height": 320 },
"device-pixel-ratio": 2,
"vertical": { "width": 320, "height": 480 }
},
"capabilities": ["touch", "mobile"],
"user-agent": "fakeUserAgent",
"type": "phone",
"modes": [
{
"title": "default",
"orientation": "vertical",
"insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
},
{
"title": "default",
"orientation": "horizontal",
"insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
}
]
};
var json = Object.assign(StandardPhoneJSON, overrides || {});
return WebInspector.EmulatedDevice.fromJSONV1(json);
}
}
third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js
View file @ f65c9f60
...@@ -125,19 +125,20 @@ WebInspector.DeviceModeModel.prototype = { ...@@ -125,19 +125,20 @@ WebInspector.DeviceModeModel.prototype = {
* @param {!WebInspector.DeviceModeModel.Type} type * @param {!WebInspector.DeviceModeModel.Type} type
* @param {?WebInspector.EmulatedDevice} device * @param {?WebInspector.EmulatedDevice} device
* @param {?WebInspector.EmulatedDevice.Mode} mode * @param {?WebInspector.EmulatedDevice.Mode} mode
* @param {number=} scale
*/ */
emulate: function(type, device, mode) emulate: function(type, device, mode, scale)
{ {
var resetPageScaleFactor = this._type !== type || this._device !== device || this._mode !== mode; var resetPageScaleFactor = this._type !== type || this._device !== device || this._mode !== mode;
this._type = type; this._type = type;
if (type === WebInspector.DeviceModeModel.Type.Device) { if (type === WebInspector.DeviceModeModel.Type.Device) {
console.assert(device && mode, "Must pass device and mode for device emulation"); console.assert(device && mode, "Must pass device and mode for device emulation");
this._device = device;
this._mode = mode; this._mode = mode;
this._device = device;
if (this._initialized) { if (this._initialized) {
var orientation = device.orientationByName(mode.orientation); var orientation = device.orientationByName(mode.orientation);
this._scaleSetting.set(this._calculateFitScale(orientation.width, orientation.height, this._currentOutline(), this._currentInsets())); this._scaleSetting.set(scale || this._calculateFitScale(orientation.width, orientation.height, this._currentOutline(), this._currentInsets()));
} }
} else { } else {
this._device = null; this._device = null;
......
third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeToolbar.js
View file @ f65c9f60
...@@ -27,6 +27,9 @@ WebInspector.DeviceModeToolbar = function(model, showMediaInspectorSetting, show ...@@ -27,6 +27,9 @@ WebInspector.DeviceModeToolbar = function(model, showMediaInspectorSetting, show
/** @type {!Map<!WebInspector.EmulatedDevice, !WebInspector.EmulatedDevice.Mode>} */ /** @type {!Map<!WebInspector.EmulatedDevice, !WebInspector.EmulatedDevice.Mode>} */
this._lastMode = new Map(); this._lastMode = new Map();
/** @type {!Map<!WebInspector.EmulatedDevice, number>} */
this._lastScale = new Map();
this._element = createElementWithClass("div", "device-mode-toolbar"); this._element = createElementWithClass("div", "device-mode-toolbar");
var leftContainer = this._element.createChild("div", "device-mode-toolbar-spacer"); var leftContainer = this._element.createChild("div", "device-mode-toolbar-spacer");
...@@ -196,27 +199,39 @@ WebInspector.DeviceModeToolbar.prototype = { ...@@ -196,27 +199,39 @@ WebInspector.DeviceModeToolbar.prototype = {
*/ */
_appendScaleMenuItems: function(contextMenu) _appendScaleMenuItems: function(contextMenu)
{ {
var scaleSetting = this._model.scaleSetting();
if (this._model.type() === WebInspector.DeviceModeModel.Type.Device) { if (this._model.type() === WebInspector.DeviceModeModel.Type.Device) {
contextMenu.appendItem(WebInspector.UIString("Fit to window (%.0f%%)", this._model.fitScale() * 100), scaleSetting.set.bind(scaleSetting, this._model.fitScale()), false); contextMenu.appendItem(WebInspector.UIString("Fit to window (%.0f%%)", this._model.fitScale() * 100), this._onScaleMenuChanged.bind(this, this._model.fitScale()), false);
contextMenu.appendSeparator(); contextMenu.appendSeparator();
} }
appendScaleItem(WebInspector.UIString("50%"), 0.5); var boundAppendScaleItem = appendScaleItem.bind(this);
appendScaleItem(WebInspector.UIString("75%"), 0.75); boundAppendScaleItem(WebInspector.UIString("50%"), 0.5);
appendScaleItem(WebInspector.UIString("100%"), 1); boundAppendScaleItem(WebInspector.UIString("75%"), 0.75);
appendScaleItem(WebInspector.UIString("125%"), 1.25); boundAppendScaleItem(WebInspector.UIString("100%"), 1);
appendScaleItem(WebInspector.UIString("150%"), 1.5); boundAppendScaleItem(WebInspector.UIString("125%"), 1.25);
boundAppendScaleItem(WebInspector.UIString("150%"), 1.5);
/** /**
* @param {string} title * @param {string} title
* @param {number} value * @param {number} value
* @this {!WebInspector.DeviceModeToolbar}
*/ */
function appendScaleItem(title, value) function appendScaleItem(title, value)
{ {
contextMenu.appendCheckboxItem(title, scaleSetting.set.bind(scaleSetting, value), scaleSetting.get() === value, false); contextMenu.appendCheckboxItem(title, this._onScaleMenuChanged.bind(this, value), this._model.scaleSetting().get() === value, false);
} }
}, },
/**
* @param {number} value
*/
_onScaleMenuChanged: function(value)
{
var device = this._model.device();
if (device)
this._lastScale.set(device, value);
this._model.scaleSetting().set(value);
},
/** /**
* @param {!WebInspector.ContextMenu} contextMenu * @param {!WebInspector.ContextMenu} contextMenu
*/ */
...@@ -321,7 +336,7 @@ WebInspector.DeviceModeToolbar.prototype = { ...@@ -321,7 +336,7 @@ WebInspector.DeviceModeToolbar.prototype = {
*/ */
_emulateDevice: function(device) _emulateDevice: function(device)
{ {
this._model.emulate(WebInspector.DeviceModeModel.Type.Device, device, this._lastMode.get(device) || device.modes[0]); this._model.emulate(WebInspector.DeviceModeModel.Type.Device, device, this._lastMode.get(device) || device.modes[0], this._lastScale.get(device));
}, },
_switchToResponsive: function() _switchToResponsive: function()
......
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