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* () {