Bug 1254386 - Add user agent emulation to new RDM. r=jryans
MozReview-Commit-ID: EBWBJV20KLV
--- a/devtools/client/responsive.html/app.js
+++ b/devtools/client/responsive.html/app.js
@@ -38,17 +38,21 @@ let App = createClass({
viewports: PropTypes.arrayOf(PropTypes.shape(Types.viewport)).isRequired,
},
onBrowserMounted() {
window.postMessage({ type: "browser-mounted" }, "*");
},
onChangeViewportDevice(id, device) {
- this.props.dispatch(changeDevice(id, device));
+ window.postMessage({
+ type: "update-user-agent",
+ userAgent: device.userAgent
+ }, "*");
+ this.props.dispatch(changeDevice(id, device.name));
},
onContentResize({ width, height }) {
window.postMessage({
type: "content-resize",
width,
height,
}, "*");
--- a/devtools/client/responsive.html/components/device-selector.js
+++ b/devtools/client/responsive.html/components/device-selector.js
@@ -31,27 +31,25 @@ module.exports = createClass({
onResizeViewport,
onUpdateDeviceModalOpen,
} = this.props;
if (target.value === OPEN_DEVICE_MODAL_VALUE) {
onUpdateDeviceModalOpen(true);
return;
}
-
for (let type of devices.types) {
for (let device of devices[type]) {
if (device.name === target.value) {
onResizeViewport(device.width, device.height);
- break;
+ onChangeViewportDevice(device);
+ return;
}
}
}
-
- onChangeViewportDevice(target.value);
},
render() {
let {
devices,
selectedDevice,
} = this.props;
--- a/devtools/client/responsive.html/components/resizable-viewport.js
+++ b/devtools/client/responsive.html/components/resizable-viewport.js
@@ -102,17 +102,17 @@ module.exports = createClass({
height = VIEWPORT_MIN_HEIGHT;
} else {
lastClientY = clientY;
}
// Update the viewport store with the new width and height.
this.props.onResizeViewport(width, height);
// Change the device selector back to an unselected device
- this.props.onChangeViewportDevice("");
+ this.props.onChangeViewportDevice({ name: "" });
this.setState({
lastClientX,
lastClientY
});
},
render() {
--- a/devtools/client/responsive.html/components/viewport-dimension.js
+++ b/devtools/client/responsive.html/components/viewport-dimension.js
@@ -109,17 +109,17 @@ module.exports = createClass({
height,
isInvalid: false,
});
return;
}
// Change the device selector back to an unselected device
- this.props.onChangeViewportDevice("");
+ this.props.onChangeViewportDevice({ name: "" });
this.props.onResizeViewport(parseInt(this.state.width, 10),
parseInt(this.state.height, 10));
},
render() {
let editableClass = "viewport-dimension-editable";
let inputClass = "viewport-dimension-input";
--- a/devtools/client/responsive.html/manager.js
+++ b/devtools/client/responsive.html/manager.js
@@ -393,32 +393,44 @@ ResponsiveUI.prototype = {
break;
case "exit":
ResponsiveUIManager.closeIfNeeded(browserWindow, tab);
break;
case "update-touch-simulation":
let { enabled } = event.data;
this.updateTouchSimulation(enabled);
break;
+ case "update-user-agent":
+ let { userAgent } = event.data;
+ this.updateUserAgent(userAgent);
+ break;
}
},
updateTouchSimulation: Task.async(function* (enabled) {
if (enabled) {
let reloadNeeded = yield this.emulationFront.setTouchEventsOverride(
Ci.nsIDocShell.TOUCHEVENTS_OVERRIDE_ENABLED
);
if (reloadNeeded) {
this.getViewportBrowser().reload();
}
} else {
this.emulationFront.clearTouchEventsOverride();
}
}),
+ updateUserAgent: function (userAgent) {
+ if (userAgent) {
+ this.emulationFront.setUserAgentOverride(userAgent);
+ } else {
+ this.emulationFront.clearUserAgentOverride();
+ }
+ },
+
/**
* Helper for tests. Assumes a single viewport for now.
*/
getViewportSize() {
return this.toolWindow.getViewportSize();
},
/**