diff --git a/devtools/client/responsive.html/components/resizable-viewport.js b/devtools/client/responsive.html/components/resizable-viewport.js index 2590d5a595ba..54ab31a85ef5 100644 --- a/devtools/client/responsive.html/components/resizable-viewport.js +++ b/devtools/client/responsive.html/components/resizable-viewport.js @@ -107,6 +107,8 @@ module.exports = createClass({ // Update the viewport store with the new width and height. this.props.onResizeViewport(width, height); // Change the device selector back to an unselected device + // TODO: Bug 1313140: We should avoid calling this for every resize event, since it + // triggers RDP calls each time. this.props.onChangeViewportDevice({ name: "" }); this.setState({ diff --git a/devtools/client/responsive.html/manager.js b/devtools/client/responsive.html/manager.js index 4e3da02a6144..9c077bb63d01 100644 --- a/devtools/client/responsive.html/manager.js +++ b/devtools/client/responsive.html/manager.js @@ -471,12 +471,14 @@ ResponsiveUI.prototype = { this.emit("network-throttling-changed"); }), - onChangeViewportDevice(event) { + onChangeViewportDevice: Task.async(function* (event) { let { userAgent, pixelRatio, touch } = event.data.device; - this.updateUserAgent(userAgent); - this.updateDPPX(pixelRatio); - this.updateTouchSimulation(touch); - }, + yield this.updateUserAgent(userAgent); + yield this.updateDPPX(pixelRatio); + yield this.updateTouchSimulation(touch); + // Used by tests + this.emit("viewport-device-changed"); + }), onContentResize(event) { let { width, height } = event.data; @@ -496,13 +498,13 @@ ResponsiveUI.prototype = { this.updateTouchSimulation(enabled); }, - updateDPPX(dppx) { + updateDPPX: Task.async(function* (dppx) { if (!dppx) { - this.emulationFront.clearDPPXOverride(); + yield this.emulationFront.clearDPPXOverride(); return; } - this.emulationFront.setDPPXOverride(dppx); - }, + yield this.emulationFront.setDPPXOverride(dppx); + }), updateNetworkThrottling: Task.async(function* (enabled, profile) { if (!enabled) { @@ -518,13 +520,13 @@ ResponsiveUI.prototype = { }); }), - updateUserAgent(userAgent) { + updateUserAgent: Task.async(function* (userAgent) { if (!userAgent) { - this.emulationFront.clearUserAgentOverride(); + yield this.emulationFront.clearUserAgentOverride(); return; } - this.emulationFront.setUserAgentOverride(userAgent); - }, + yield this.emulationFront.setUserAgentOverride(userAgent); + }), updateTouchSimulation: Task.async(function* (enabled) { if (!enabled) { diff --git a/devtools/client/responsive.html/test/browser/browser_device_change.js b/devtools/client/responsive.html/test/browser/browser_device_change.js index 5fd813c89ef9..936359595fcc 100644 --- a/devtools/client/responsive.html/test/browser/browser_device_change.js +++ b/devtools/client/responsive.html/test/browser/browser_device_change.js @@ -50,8 +50,10 @@ addRDMTask(TEST_URL, function* ({ ui, manager }) { yield testTouchEventsOverride(ui, true); // Test resetting device when resizing viewport + let deviceChanged = once(ui, "viewport-device-changed"); yield testViewportResize(ui, ".viewport-vertical-resize-handle", [-10, -10], [testDevice.width, testDevice.height - 10], [0, -10], ui); + yield deviceChanged; yield testUserAgent(ui, DEFAULT_UA); yield testDevicePixelRatio(ui, DEFAULT_DPPX); yield testTouchEventsOverride(ui, false); diff --git a/devtools/client/responsive.html/test/browser/browser_network_throttling.js b/devtools/client/responsive.html/test/browser/browser_network_throttling.js index 092224d7b0bd..ce8d0bbb809a 100644 --- a/devtools/client/responsive.html/test/browser/browser_network_throttling.js +++ b/devtools/client/responsive.html/test/browser/browser_network_throttling.js @@ -25,9 +25,7 @@ addRDMTask(TEST_URL, function* ({ ui, manager }) { yield testThrottlingProfile(ui, "Regular 3G"); // Test switching back to no throttling - let changed = once(ui, "network-throttling-changed"); yield switchNetworkThrottling(ui, "No throttling"); - yield changed; testNetworkThrottlingSelectorLabel(ui, "No throttling"); yield testNetworkThrottlingState(ui, null); }); @@ -46,9 +44,7 @@ var testNetworkThrottlingState = Task.async(function* (ui, expected) { }); var testThrottlingProfile = Task.async(function* (ui, profile) { - let changed = once(ui, "network-throttling-changed"); yield switchNetworkThrottling(ui, profile); - yield changed; testNetworkThrottlingSelectorLabel(ui, profile); let data = throttlingProfiles.find(({ id }) => id == profile); let { download, upload, latency } = data; diff --git a/devtools/client/responsive.html/test/browser/head.js b/devtools/client/responsive.html/test/browser/head.js index c4b10c6eb7cc..fb7a11176557 100644 --- a/devtools/client/responsive.html/test/browser/head.js +++ b/devtools/client/responsive.html/test/browser/head.js @@ -198,9 +198,11 @@ function* testViewportResize(ui, selector, moveBy, expectedViewportSize, expectedHandleMove) { let win = ui.toolWindow; + let changed = once(ui, "viewport-device-changed"); let resized = waitForViewportResizeTo(ui, ...expectedViewportSize); let startRect = dragElementBy(selector, ...moveBy, win); yield resized; + yield changed; let endRect = getElRect(selector, win); is(endRect.left - startRect.left, expectedHandleMove[0], @@ -256,13 +258,17 @@ function switchSelector({ toolWindow }, selector, value) { }); } -function switchDevice(ui, value) { - return switchSelector(ui, ".viewport-device-selector", value); -} +let switchDevice = Task.async(function* (ui, value) { + let changed = once(ui, "viewport-device-changed"); + yield switchSelector(ui, ".viewport-device-selector", value); + yield changed; +}); -function switchNetworkThrottling(ui, value) { - return switchSelector(ui, "#global-network-throttling-selector", value); -} +let switchNetworkThrottling = Task.async(function* (ui, value) { + let changed = once(ui, "network-throttling-changed"); + yield switchSelector(ui, "#global-network-throttling-selector", value); + yield changed; +}); function getSessionHistory(browser) { return ContentTask.spawn(browser, {}, function* () {