Bug 1254388 - Apply touch simulation from selected device; r=ntim
MozReview-Commit-ID: De8lVrct0iZ
--- a/devtools/client/responsive.html/actions/touch-simulation.js
+++ b/devtools/client/responsive.html/actions/touch-simulation.js
@@ -7,16 +7,16 @@
"use strict";
const {
UPDATE_TOUCH_SIMULATION_ENABLED
} = require("./index");
module.exports = {
- updateTouchSimulationEnabled(enabled) {
+ updateTouchSimulationEnabled(enabled = false) {
return {
type: UPDATE_TOUCH_SIMULATION_ENABLED,
enabled,
};
},
};
--- a/devtools/client/responsive.html/app.js
+++ b/devtools/client/responsive.html/app.js
@@ -43,16 +43,17 @@ let App = createClass({
},
onChangeViewportDevice(id, device) {
window.postMessage({
type: "change-viewport-device",
device,
}, "*");
this.props.dispatch(changeDevice(id, device.name));
+ this.props.dispatch(updateTouchSimulationEnabled(device.touch));
},
onContentResize({ width, height }) {
window.postMessage({
type: "content-resize",
width,
height,
}, "*");
--- a/devtools/client/responsive.html/manager.js
+++ b/devtools/client/responsive.html/manager.js
@@ -419,19 +419,20 @@ ResponsiveUI.prototype = {
let { browserWindow, tab } = this;
if (event.origin !== "chrome://devtools") {
return;
}
switch (event.data.type) {
case "change-viewport-device":
- let { userAgent, pixelRatio } = event.data.device;
+ let { userAgent, pixelRatio, touch } = event.data.device;
this.updateUserAgent(userAgent);
this.updateDPPX(pixelRatio);
+ this.updateTouchSimulation(touch);
break;
case "content-resize":
let { width, height } = event.data;
this.emit("content-resize", {
width,
height,
});
break;
--- a/devtools/client/responsive.html/test/browser/browser_device_change.js
+++ b/devtools/client/responsive.html/test/browser/browser_device_change.js
@@ -35,83 +35,81 @@ addRDMTask(TEST_URL, function* ({ ui, ma
// Wait until the viewport has been added and the device list has been loaded
yield waitUntilState(store, state => state.viewports.length == 1
&& state.devices.listState == Types.deviceListState.LOADED);
// Test defaults
testViewportDimensions(ui, 320, 480);
yield testUserAgent(ui, DEFAULT_UA);
- testDevicePixelRatio(yield getViewportDevicePixelRatio(ui), DEFAULT_DPPX);
+ yield testDevicePixelRatio(ui, DEFAULT_DPPX);
+ yield testTouchEventsOverride(ui, false);
testViewportSelectLabel(ui, "no device selected");
- let waitingPixelRatio = onceDevicePixelRatioChange(ui);
-
- // Test device with custom UA
+ // Test device with custom properties
yield switchDevice(ui, "Fake Phone RDM Test");
yield waitForViewportResizeTo(ui, testDevice.width, testDevice.height);
yield testUserAgent(ui, testDevice.userAgent);
-
- // Test device with custom pixelRatio
- testDevicePixelRatio(yield waitingPixelRatio, testDevice.pixelRatio);
- waitingPixelRatio = onceDevicePixelRatioChange(ui);
+ yield testDevicePixelRatio(ui, testDevice.pixelRatio);
+ yield testTouchEventsOverride(ui, true);
// Test resetting device when resizing viewport
yield testViewportResize(ui, ".viewport-vertical-resize-handle",
[-10, -10], [testDevice.width, testDevice.height - 10], [0, -10], ui);
yield testUserAgent(ui, DEFAULT_UA);
+ yield testDevicePixelRatio(ui, DEFAULT_DPPX);
+ yield testTouchEventsOverride(ui, false);
testViewportSelectLabel(ui, "no device selected");
- testDevicePixelRatio(yield waitingPixelRatio, DEFAULT_DPPX);
- // Test device where UA field is blank
+ // Test device with generic properties
yield switchDevice(ui, "Laptop (1366 x 768)");
yield waitForViewportResizeTo(ui, 1366, 768);
yield testUserAgent(ui, DEFAULT_UA);
+ yield testDevicePixelRatio(ui, 1);
+ yield testTouchEventsOverride(ui, false);
ok(removeDevice(testDevice),
"Test Device properly removed.");
});
function testViewportDimensions(ui, w, h) {
let viewport = ui.toolWindow.document.querySelector(".viewport-content");
is(ui.toolWindow.getComputedStyle(viewport).getPropertyValue("width"),
`${w}px`, `Viewport should have width of ${w}px`);
is(ui.toolWindow.getComputedStyle(viewport).getPropertyValue("height"),
`${h}px`, `Viewport should have height of ${h}px`);
}
-function testViewportSelectLabel(ui, label) {
+function testViewportSelectLabel(ui, expected) {
let select = ui.toolWindow.document.querySelector(".viewport-device-selector");
- is(select.selectedOptions[0].textContent, label,
- `Select label should be changed to ${label}`);
+ is(select.selectedOptions[0].textContent, expected,
+ `Select label should be changed to ${expected}`);
}
-function* testUserAgent(ui, value) {
+function* testUserAgent(ui, expected) {
let ua = yield ContentTask.spawn(ui.getViewportBrowser(), {}, function* () {
return content.navigator.userAgent;
});
- is(ua, value, `UA should be set to ${value}`);
+ is(ua, expected, `UA should be set to ${expected}`);
+}
+
+function* testDevicePixelRatio(ui, expected) {
+ let dppx = yield getViewportDevicePixelRatio(ui);
+ is(dppx, expected, `devicePixelRatio should be set to ${expected}`);
}
-function testDevicePixelRatio(dppx, expected) {
- is(dppx, expected, `devicePixelRatio should be set to ${expected}`);
+function* testTouchEventsOverride(ui, expected) {
+ let { document } = ui.toolWindow;
+ let touchButton = document.querySelector("#global-touch-simulation-button");
+
+ let flag = yield ui.emulationFront.getTouchEventsOverride();
+ is(flag === Ci.nsIDocShell.TOUCHEVENTS_OVERRIDE_ENABLED, expected,
+ `Touch events override should be ${expected ? "enabled" : "disabled"}`);
+ is(touchButton.classList.contains("active"), expected,
+ `Touch simulation button should be ${expected ? "" : "not"} active.`);
}
function* getViewportDevicePixelRatio(ui) {
return yield ContentTask.spawn(ui.getViewportBrowser(), {}, function* () {
return content.devicePixelRatio;
});
}
-
-function onceDevicePixelRatioChange(ui) {
- return ContentTask.spawn(ui.getViewportBrowser(), {}, function* () {
- let pixelRatio = content.devicePixelRatio;
- let mql = content.matchMedia(`(resolution: ${pixelRatio}dppx)`);
-
- return new Promise(resolve => {
- mql.addListener(function listener() {
- mql.removeListener(listener);
- resolve(content.devicePixelRatio);
- });
- });
- });
-}