Bug 1254386 - Add user agent emulation to new RDM. r=jryans
authorTim Nguyen <ntim.bugs@gmail.com>
Tue, 23 Aug 2016 01:51:17 -0700
changeset 336338 bba8077c6c0a7d9e75f624e1b1df2bf0cbd29d2f
parent 336337 6f5b69e1d1a9c8acafd059e8d221d667e86040d3
child 336339 0faec8f3a8b59106a3437d954d1ccc38da7ec705
push id10033
push userraliiev@mozilla.com
push dateMon, 19 Sep 2016 13:50:26 +0000
treeherdermozilla-aurora@5dddbefdf759 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjryans
bugs1254386
milestone51.0a1
Bug 1254386 - Add user agent emulation to new RDM. r=jryans MozReview-Commit-ID: EBWBJV20KLV
devtools/client/responsive.html/app.js
devtools/client/responsive.html/components/device-selector.js
devtools/client/responsive.html/components/resizable-viewport.js
devtools/client/responsive.html/components/viewport-dimension.js
devtools/client/responsive.html/manager.js
--- 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();
   },
 
   /**