Backed out changeset 7ffb06278c4c (bug 1488114) for xpcshell failures on test_change_pixel_ratio.js. CLOSED TREE

devtools/client/locales/en-US/responsive.properties

@@ -124,9 +124,10 @@ responsive.reloadConditions.touchSimulation=Reload when touch simulation is togg
 # to select whether to reload when user agent is changed.
 responsive.reloadConditions.userAgent=Reload when user agent is changed
 
-# LOCALIZATION NOTE (responsive.reloadNotification.description2): Text in notification bar
-# shown on first open to clarify that some features need a reload to apply.
-responsive.reloadNotification.description2=Device simulation changes require a reload to fully apply. Automatic reloads are disabled by default to avoid losing any changes in DevTools. You can enable reloading via the Settings menu.
+# LOCALIZATION NOTE (responsive.reloadNotification.description): Text in notification bar
+# shown on first open to clarify that some features need a reload to apply.  %1$S is the
+# label on the reload conditions menu (responsive.reloadConditions.label).
+responsive.reloadNotification.description=Device simulation changes require a reload to fully apply.  Automatic reloads are disabled by default to avoid losing any changes in DevTools.  You can enable reloading via the “%1$S” menu.
 
 # LOCALIZATION NOTE (responsive.leftAlignViewport): Label on checkbox used in the settings
 # menu.

devtools/client/responsive.html/actions/devices.js

@@ -4,8 +4,6 @@
 
 "use strict";
 
-const Services = require("Services");
-
 const {
   ADD_DEVICE,
   ADD_DEVICE_TYPE,
@@ -20,6 +18,7 @@ const { removeDeviceAssociation } = require("./viewports");
 
 const { addDevice, getDevices, removeDevice } = require("devtools/client/shared/devices");
 
+const Services = require("Services");
 const DISPLAYED_DEVICES_PREF = "devtools.responsive.html.displayedDeviceList";
 
 /**

devtools/client/responsive.html/actions/display-pixel-ratio.js

@@ -0,0 +1,23 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { CHANGE_DISPLAY_PIXEL_RATIO } = require("./index");
+
+module.exports = {
+
+  /**
+   * The pixel ratio of the display has changed. This may be triggered by the user
+   * when changing the monitor resolution, or when the window is dragged to a different
+   * display with a different pixel ratio.
+   */
+  changeDisplayPixelRatio(displayPixelRatio) {
+    return {
+      type: CHANGE_DISPLAY_PIXEL_RATIO,
+      displayPixelRatio,
+    };
+  },
+
+};

devtools/client/responsive.html/actions/index.js

@@ -4,9 +4,9 @@
 
 "use strict";
 
-// This file lists all of the actions available in responsive design. This
+// This file lists all of the actions available in responsive design.  This
 // central list of constants makes it easy to see all possible action names at
-// a glance. Please add a comment with each new action type.
+// a glance.  Please add a comment with each new action type.
 
 const { createEnum } = require("devtools/client/shared/enum");
 
@@ -28,7 +28,7 @@ createEnum([
   // Change the device displayed in the viewport.
   "CHANGE_DEVICE",
 
-  // Change the location of the page. This may be triggered by the user
+  // Change the location of the page.  This may be triggered by the user
   // directly entering a new URL, navigating with links, etc.
   "CHANGE_LOCATION",
 
@@ -48,6 +48,9 @@ createEnum([
   // Change one of the reload conditions.
   "CHANGE_RELOAD_CONDITION",
 
+  // Change the touch simulation state.
+  "CHANGE_TOUCH_SIMULATION",
+
   // Indicates that the device list is being loaded.
   "LOAD_DEVICE_LIST_START",
 
@@ -81,9 +84,6 @@ createEnum([
   // Toggles the left alignment of the viewports.
   "TOGGLE_LEFT_ALIGNMENT",
 
-  // Toggles the touch simulation state of the viewports.
-  "TOGGLE_TOUCH_SIMULATION",
-
   // Update the device display state in the device selector.
   "UPDATE_DEVICE_DISPLAYED",
 

devtools/client/responsive.html/actions/location.js

@@ -0,0 +1,22 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { CHANGE_LOCATION } = require("./index");
+
+module.exports = {
+
+  /**
+   * The location of the page has changed.  This may be triggered by the user
+   * directly entering a new URL, navigating with links, etc.
+   */
+  changeLocation(location) {
+    return {
+      type: CHANGE_LOCATION,
+      location,
+    };
+  },
+
+};

devtools/client/responsive.html/actions/moz.build

@@ -6,9 +6,12 @@
 
 DevToolsModules(
     'devices.js',
+    'display-pixel-ratio.js',
     'index.js',
+    'location.js',
     'reload-conditions.js',
     'screenshot.js',
+    'touch-simulation.js',
     'ui.js',
     'viewports.js',
 )

devtools/client/responsive.html/actions/reload-conditions.js

@@ -4,14 +4,13 @@
 
 "use strict";
 
-const Services = require("Services");
-
 const {
   CHANGE_RELOAD_CONDITION,
   LOAD_RELOAD_CONDITIONS_END,
 } = require("./index");
 
 const Types = require("../types");
+const Services = require("Services");
 
 const PREF_PREFIX = "devtools.responsive.reloadConditions.";
 

devtools/client/responsive.html/actions/screenshot.js

@@ -6,8 +6,6 @@
 
 "use strict";
 
-const Services = require("Services");
-
 const {
   TAKE_SCREENSHOT_START,
   TAKE_SCREENSHOT_END,
@@ -16,6 +14,7 @@ const {
 const { getFormatStr } = require("../utils/l10n");
 const { getTopLevelWindow } = require("../utils/window");
 const e10s = require("../utils/e10s");
+const Services = require("Services");
 
 const CAMERA_AUDIO_URL = "resource://devtools/client/themes/audio/shutter.wav";
 

devtools/client/responsive.html/actions/touch-simulation.js

@@ -0,0 +1,22 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* eslint-env browser */
+
+"use strict";
+
+const {
+  CHANGE_TOUCH_SIMULATION
+} = require("./index");
+
+module.exports = {
+
+  changeTouchSimulation(enabled) {
+    return {
+      type: CHANGE_TOUCH_SIMULATION,
+      enabled,
+    };
+  },
+
+};

devtools/client/responsive.html/actions/ui.js

@@ -5,25 +5,11 @@
 "use strict";
 
 const {
-  CHANGE_DISPLAY_PIXEL_RATIO,
   TOGGLE_LEFT_ALIGNMENT,
-  TOGGLE_TOUCH_SIMULATION,
 } = require("./index");
 
 module.exports = {
 
-  /**
-   * The pixel ratio of the display has changed. This may be triggered by the user
-   * when changing the monitor resolution, or when the window is dragged to a different
-   * display with a different pixel ratio.
-   */
-  changeDisplayPixelRatio(displayPixelRatio) {
-    return {
-      type: CHANGE_DISPLAY_PIXEL_RATIO,
-      displayPixelRatio,
-    };
-  },
-
   toggleLeftAlignment(enabled) {
     return {
       type: TOGGLE_LEFT_ALIGNMENT,
@@ -31,11 +17,4 @@ module.exports = {
     };
   },
 
-  toggleTouchSimulation(enabled) {
-    return {
-      type: TOGGLE_TOUCH_SIMULATION,
-      enabled,
-    };
-  },
-
 };

devtools/client/responsive.html/browser/swap.js

@@ -5,9 +5,9 @@
 "use strict";
 
 const { Ci } = require("chrome");
-const Services = require("Services");
 const { E10SUtils } = require("resource://gre/modules/E10SUtils.jsm");
 const { tunnelToInnerBrowser } = require("./tunnel");
+const Services = require("Services");
 
 function debug(msg) {
   // console.log(`RDM swap: ${msg}`);

devtools/client/responsive.html/browser/web-navigation.js

@@ -10,7 +10,6 @@ const Services = require("Services");
 const { NetUtil } = require("resource://gre/modules/NetUtil.jsm");
 const { Utils } = require("resource://gre/modules/sessionstore/Utils.jsm");
 const Telemetry = require("devtools/client/shared/telemetry");
-
 const telemetry = new Telemetry();
 
 function readInputStreamToString(stream) {

devtools/client/responsive.html/components/App.js

@@ -6,7 +6,7 @@
 
 "use strict";
 
-const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
+const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
@@ -27,10 +27,8 @@ const {
 } = require("../actions/devices");
 const { changeReloadCondition } = require("../actions/reload-conditions");
 const { takeScreenshot } = require("../actions/screenshot");
-const {
-  toggleTouchSimulation,
-  toggleLeftAlignment,
-} = require("../actions/ui");
+const { changeTouchSimulation } = require("../actions/touch-simulation");
+const { toggleLeftAlignment } = require("../actions/ui");
 const {
   changeDevice,
   changePixelRatio,
@@ -41,14 +39,16 @@ const {
 
 const Types = require("../types");
 
-class App extends PureComponent {
+class App extends Component {
   static get propTypes() {
     return {
       devices: PropTypes.shape(Types.devices).isRequired,
       dispatch: PropTypes.func.isRequired,
+      displayPixelRatio: Types.pixelRatio.value.isRequired,
       networkThrottling: PropTypes.shape(Types.networkThrottling).isRequired,
       reloadConditions: PropTypes.shape(Types.reloadConditions).isRequired,
       screenshot: PropTypes.shape(Types.screenshot).isRequired,
+      touchSimulation: PropTypes.shape(Types.touchSimulation).isRequired,
       viewports: PropTypes.arrayOf(PropTypes.shape(Types.viewport)).isRequired,
     };
   }
@@ -93,7 +93,7 @@ class App extends PureComponent {
       device,
     }, "*");
     this.props.dispatch(changeDevice(id, device.name, deviceType));
-    this.props.dispatch(toggleTouchSimulation(device.touch));
+    this.props.dispatch(changeTouchSimulation(device.touch));
     this.props.dispatch(changePixelRatio(id, device.pixelRatio));
   }
 
@@ -123,7 +123,7 @@ class App extends PureComponent {
       type: "change-touch-simulation",
       enabled,
     }, "*");
-    this.props.dispatch(toggleTouchSimulation(enabled));
+    this.props.dispatch(changeTouchSimulation(enabled));
   }
 
   onContentResize({ width, height }) {
@@ -150,7 +150,7 @@ class App extends PureComponent {
     // TODO: Bug 1332754: Move messaging and logic into the action creator so that device
     // property changes are sent from there instead of this function.
     this.props.dispatch(removeDeviceAssociation(id));
-    this.props.dispatch(toggleTouchSimulation(false));
+    this.props.dispatch(changeTouchSimulation(false));
     this.props.dispatch(changePixelRatio(id, 0));
   }
 
@@ -181,9 +181,11 @@ class App extends PureComponent {
   render() {
     const {
       devices,
+      displayPixelRatio,
       networkThrottling,
       reloadConditions,
       screenshot,
+      touchSimulation,
       viewports,
     } = this.props;
 
@@ -224,11 +226,13 @@ class App extends PureComponent {
       dom.div({ id: "app" },
         Toolbar({
           devices,
+          displayPixelRatio,
           networkThrottling,
           reloadConditions,
           screenshot,
           selectedDevice,
           selectedPixelRatio,
+          touchSimulation,
           viewport: viewports[0],
           onChangeDevice,
           onChangeNetworkThrottling,

devtools/client/responsive.html/components/DevicePixelRatioMenu.js

@@ -21,10 +21,10 @@ class DevicePixelRatioMenu extends PureComponent {
   static get propTypes() {
     return {
       devices: PropTypes.shape(Types.devices).isRequired,
-      displayPixelRatio: PropTypes.number.isRequired,
+      displayPixelRatio: Types.pixelRatio.value.isRequired,
       onChangePixelRatio: PropTypes.func.isRequired,
       selectedDevice: PropTypes.string.isRequired,
-      selectedPixelRatio: PropTypes.number.isRequired,
+      selectedPixelRatio: PropTypes.shape(Types.pixelRatio).isRequired,
     };
   }
 
@@ -44,8 +44,8 @@ class DevicePixelRatioMenu extends PureComponent {
       return {
         label: getFormatStr("responsive.devicePixelRatioOption", value),
         type: "checkbox",
-        checked: selectedPixelRatio > 0 ?
-          selectedPixelRatio === value :
+        checked: selectedPixelRatio.value > 0 ?
+          selectedPixelRatio.value === value :
           displayPixelRatio === value,
         click: () => onChangePixelRatio(+value),
       };
@@ -86,7 +86,7 @@ class DevicePixelRatioMenu extends PureComponent {
         },
         dom.span({ className: "title" },
           getFormatStr("responsive.devicePixelRatioOption",
-            selectedPixelRatio || displayPixelRatio)
+            selectedPixelRatio.value || displayPixelRatio)
         )
       )
     );

devtools/client/responsive.html/components/ResizableViewport.js

@@ -6,7 +6,7 @@
 
 "use strict";
 
-const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
+const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
@@ -18,7 +18,7 @@ const Types = require("../types");
 const VIEWPORT_MIN_WIDTH = Constants.MIN_VIEWPORT_DIMENSION;
 const VIEWPORT_MIN_HEIGHT = Constants.MIN_VIEWPORT_DIMENSION;
 
-class ResizableViewport extends PureComponent {
+class ResizableViewport extends Component {
   static get propTypes() {
     return {
       leftAlignmentEnabled: PropTypes.bool.isRequired,

devtools/client/responsive.html/components/Toolbar.js

@@ -22,7 +22,7 @@ class Toolbar extends PureComponent {
   static get propTypes() {
     return {
       devices: PropTypes.shape(Types.devices).isRequired,
-      displayPixelRatio: PropTypes.number.isRequired,
+      displayPixelRatio: Types.pixelRatio.value.isRequired,
       leftAlignmentEnabled: PropTypes.bool.isRequired,
       networkThrottling: PropTypes.shape(Types.networkThrottling).isRequired,
       onChangeDevice: PropTypes.func.isRequired,
@@ -40,8 +40,8 @@ class Toolbar extends PureComponent {
       reloadConditions: PropTypes.shape(Types.reloadConditions).isRequired,
       screenshot: PropTypes.shape(Types.screenshot).isRequired,
       selectedDevice: PropTypes.string.isRequired,
-      selectedPixelRatio: PropTypes.number.isRequired,
-      touchSimulationEnabled: PropTypes.bool.isRequired,
+      selectedPixelRatio: PropTypes.shape(Types.pixelRatio).isRequired,
+      touchSimulation: PropTypes.shape(Types.touchSimulation).isRequired,
       viewport: PropTypes.shape(Types.viewport).isRequired,
     };
   }
@@ -68,7 +68,7 @@ class Toolbar extends PureComponent {
       screenshot,
       selectedDevice,
       selectedPixelRatio,
-      touchSimulationEnabled,
+      touchSimulation,
       viewport,
     } = this.props;
 
@@ -121,10 +121,10 @@ class Toolbar extends PureComponent {
           dom.button({
             id: "touch-simulation-button",
             className: "devtools-button" +
-                       (touchSimulationEnabled ? " checked" : ""),
-            title: (touchSimulationEnabled ?
+                       (touchSimulation.enabled ? " checked" : ""),
+            title: (touchSimulation.enabled ?
               getStr("responsive.disableTouch") : getStr("responsive.enableTouch")),
-            onClick: () => onChangeTouchSimulation(!touchSimulationEnabled),
+            onClick: () => onChangeTouchSimulation(!touchSimulation.enabled),
           })
         ),
         dom.div(
@@ -156,9 +156,7 @@ class Toolbar extends PureComponent {
 
 const mapStateToProps = state => {
   return {
-    displayPixelRatio: state.ui.displayPixelRatio,
     leftAlignmentEnabled: state.ui.leftAlignmentEnabled,
-    touchSimulationEnabled: state.ui.touchSimulationEnabled,
   };
 };
 

devtools/client/responsive.html/components/ViewportDimension.js

@@ -4,7 +4,7 @@
 
 "use strict";
 
-const { PureComponent } = require("devtools/client/shared/vendor/react");
+const { Component } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
@@ -12,7 +12,7 @@ const { isKeyIn } = require("../utils/key");
 const { MIN_VIEWPORT_DIMENSION } = require("../constants");
 const Types = require("../types");
 
-class ViewportDimension extends PureComponent {
+class ViewportDimension extends Component {
   static get propTypes() {
     return {
       onResizeViewport: PropTypes.func.isRequired,

devtools/client/responsive.html/components/Viewports.js

@@ -4,16 +4,16 @@
 
 "use strict";
 
-const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { connect } = require("devtools/client/shared/vendor/react-redux");
 
 const ResizableViewport = createFactory(require("./ResizableViewport"));
 
 const Types = require("../types");
 
-class Viewports extends PureComponent {
+class Viewports extends Component {
   static get propTypes() {
     return {
       leftAlignmentEnabled: PropTypes.bool.isRequired,

devtools/client/responsive.html/index.js

@@ -23,9 +23,10 @@ const message = require("./utils/message");
 const App = createFactory(require("./components/App"));
 const Store = require("./store");
 const { loadDevices } = require("./actions/devices");
+const { changeDisplayPixelRatio } = require("./actions/display-pixel-ratio");
+const { changeLocation } = require("./actions/location");
 const { loadReloadConditions } = require("./actions/reload-conditions");
 const { addViewport, resizeViewport } = require("./actions/viewports");
-const { changeDisplayPixelRatio } = require("./actions/ui");
 
 // Exposed for use by tests
 window.require = require;
@@ -116,6 +117,7 @@ function onDevicePixelRatioChange() {
 window.addInitialViewport = ({ uri, userContextId }) => {
   try {
     onDevicePixelRatioChange();
+    bootstrap.dispatch(changeLocation(uri));
     bootstrap.dispatch(changeDisplayPixelRatio(window.devicePixelRatio));
     bootstrap.dispatch(addViewport(userContextId));
   } catch (e) {

devtools/client/responsive.html/manager.js

@@ -491,7 +491,8 @@ ResponsiveUI.prototype = {
   showReloadNotification() {
     if (Services.prefs.getBoolPref(RELOAD_NOTIFICATION_PREF, false)) {
       showNotification(this.browserWindow, this.tab, {
-        msg: l10n.getFormatStr("responsive.reloadNotification.description2"),
+        msg: l10n.getFormatStr("responsive.reloadNotification.description",
+                               l10n.getStr("responsive.reloadConditions.label")),
       });
       Services.prefs.setBoolPref(RELOAD_NOTIFICATION_PREF, false);
     }
@@ -580,7 +581,7 @@ ResponsiveUI.prototype = {
   async onChangeTouchSimulation(event) {
     const { enabled } = event.data;
     const reloadNeeded = await this.updateTouchSimulation(enabled) &&
-                         this.reloadOnChange("touchSimulation");
+                       this.reloadOnChange("touchSimulation");
     if (reloadNeeded) {
       this.getViewportBrowser().reload();
     }

devtools/client/responsive.html/reducers.js

@@ -5,8 +5,11 @@
 "use strict";
 
 exports.devices = require("./reducers/devices");
+exports.displayPixelRatio = require("./reducers/display-pixel-ratio");
+exports.location = require("./reducers/location");
 exports.networkThrottling = require("devtools/client/shared/components/throttling/reducer");
 exports.reloadConditions = require("./reducers/reload-conditions");
 exports.screenshot = require("./reducers/screenshot");
+exports.touchSimulation = require("./reducers/touch-simulation");
 exports.ui = require("./reducers/ui");
 exports.viewports = require("./reducers/viewports");

devtools/client/responsive.html/reducers/devices.js

@@ -18,10 +18,10 @@ const {
 const Types = require("../types");
 
 const INITIAL_DEVICES = {
-  isModalOpen: false,
-  listState: Types.loadableState.INITIALIZED,
-  modalOpenedFromViewport: null,
   types: [],
+  isModalOpen: false,
+  modalOpenedFromViewport: null,
+  listState: Types.loadableState.INITIALIZED,
 };
 
 const reducers = {

devtools/client/responsive.html/reducers/display-pixel-ratio.js

@@ -0,0 +1,26 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* eslint-env browser */
+
+"use strict";
+
+const { CHANGE_DISPLAY_PIXEL_RATIO } = require("../actions/index");
+const INITIAL_DISPLAY_PIXEL_RATIO = 0;
+
+const reducers = {
+
+  [CHANGE_DISPLAY_PIXEL_RATIO](_, action) {
+    return action.displayPixelRatio;
+  },
+
+};
+
+module.exports = function(displayPixelRatio = INITIAL_DISPLAY_PIXEL_RATIO, action) {
+  const reducer = reducers[action.type];
+  if (!reducer) {
+    return displayPixelRatio;
+  }
+  return reducer(displayPixelRatio, action);
+};

devtools/client/responsive.html/reducers/location.js

@@ -0,0 +1,25 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { CHANGE_LOCATION } = require("../actions/index");
+
+const INITIAL_LOCATION = "about:blank";
+
+const reducers = {
+
+  [CHANGE_LOCATION](_, action) {
+    return action.location;
+  },
+
+};
+
+module.exports = function(location = INITIAL_LOCATION, action) {
+  const reducer = reducers[action.type];
+  if (!reducer) {
+    return location;
+  }
+  return reducer(location, action);
+};

devtools/client/responsive.html/reducers/moz.build

@@ -6,8 +6,11 @@
 
 DevToolsModules(
     'devices.js',
+    'display-pixel-ratio.js',
+    'location.js',
     'reload-conditions.js',
     'screenshot.js',
+    'touch-simulation.js',
     'ui.js',
     'viewports.js',
 )

devtools/client/responsive.html/reducers/screenshot.js

@@ -9,9 +9,7 @@ const {
   TAKE_SCREENSHOT_START,
 } = require("../actions/index");
 
-const INITIAL_SCREENSHOT = {
-  isCapturing: false,
-};
+const INITIAL_SCREENSHOT = { isCapturing: false };
 
 const reducers = {
 

devtools/client/responsive.html/reducers/touch-simulation.js

@@ -0,0 +1,31 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  CHANGE_TOUCH_SIMULATION,
+} = require("../actions/index");
+
+const INITIAL_TOUCH_SIMULATION = {
+  enabled: false,
+};
+
+const reducers = {
+
+  [CHANGE_TOUCH_SIMULATION](touchSimulation, { enabled }) {
+    return Object.assign({}, touchSimulation, {
+      enabled,
+    });
+  },
+
+};
+
+module.exports = function(touchSimulation = INITIAL_TOUCH_SIMULATION, action) {
+  const reducer = reducers[action.type];
+  if (!reducer) {
+    return touchSimulation;
+  }
+  return reducer(touchSimulation, action);
+};

devtools/client/responsive.html/reducers/ui.js

@@ -7,30 +7,18 @@
 const Services = require("Services");
 
 const {
-  CHANGE_DISPLAY_PIXEL_RATIO,
   TOGGLE_LEFT_ALIGNMENT,
-  TOGGLE_TOUCH_SIMULATION,
 } = require("../actions/index");
 
 const LEFT_ALIGNMENT_ENABLED = "devtools.responsive.leftAlignViewport.enabled";
 
 const INITIAL_UI = {
-  // The pixel ratio of the display.
-  displayPixelRatio: 0,
   // Whether or not the viewports are left aligned.
   leftAlignmentEnabled: Services.prefs.getBoolPref(LEFT_ALIGNMENT_ENABLED),
-  // Whether or not touch simulation is enabled.
-  touchSimulationEnabled: false,
 };
 
 const reducers = {
 
-  [CHANGE_DISPLAY_PIXEL_RATIO](ui, { displayPixelRatio }) {
-    return Object.assign({}, ui, {
-      displayPixelRatio,
-    });
-  },
-
   [TOGGLE_LEFT_ALIGNMENT](ui, { enabled }) {
     const leftAlignmentEnabled = enabled !== undefined ?
       enabled : !ui.leftAlignmentEnabled;
@@ -42,12 +30,6 @@ const reducers = {
     });
   },
 
-  [TOGGLE_TOUCH_SIMULATION](ui, { enabled }) {
-    return Object.assign({}, ui, {
-      touchSimulationEnabled: enabled,
-    });
-  },
-
 };
 
 module.exports = function(ui = INITIAL_UI, action) {

devtools/client/responsive.html/reducers/viewports.js

@@ -22,7 +22,9 @@ const INITIAL_VIEWPORT = {
   deviceType: "",
   width: 320,
   height: 480,
-  pixelRatio: 0,
+  pixelRatio: {
+    value: 0,
+  },
   userContextId: 0,
 };
 
@@ -58,7 +60,9 @@ const reducers = {
       }
 
       return Object.assign({}, viewport, {
-        pixelRatio,
+        pixelRatio: {
+          value: pixelRatio
+        },
       });
     });
   },

devtools/client/responsive.html/test/unit/test_change_display_pixel_ratio.js

@@ -5,8 +5,8 @@
 
 // Test changing the display pixel ratio.
 
-const { changeDisplayPixelRatio } = require("devtools/client/responsive.html/actions/ui");
-
+const { changeDisplayPixelRatio } =
+  require("devtools/client/responsive.html/actions/display-pixel-ratio");
 const NEW_PIXEL_RATIO = 5.5;
 
 add_task(async function() {

devtools/client/responsive.html/test/unit/test_change_location.js

@@ -0,0 +1,22 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test changing the location of the displayed page.
+
+const { changeLocation } =
+  require("devtools/client/responsive.html/actions/location");
+
+const TEST_URL = "http://example.com";
+
+add_task(async function() {
+  const store = Store();
+  const { getState, dispatch } = store;
+
+  equal(getState().location, "about:blank",
+        "Defaults to about:blank at startup");
+
+  dispatch(changeLocation(TEST_URL));
+  equal(getState().location, TEST_URL, "Location changed to TEST_URL");
+});

devtools/client/responsive.html/test/unit/test_update_touch_simulation_enabled.js

@@ -5,7 +5,9 @@
 
 // Test updating the touch simulation `enabled` property
 
-const { toggleTouchSimulation } = require("devtools/client/responsive.html/actions/touch-simulation");
+const {
+  changeTouchSimulation,
+} = require("devtools/client/responsive.html/actions/touch-simulation");
 
 add_task(async function() {
   const store = Store();
@@ -14,7 +16,7 @@ add_task(async function() {
   ok(!getState().touchSimulation.enabled,
     "Touch simulation is disabled by default.");
 
-  dispatch(toggleTouchSimulation(true));
+  dispatch(changeTouchSimulation(true));
 
   ok(getState().touchSimulation.enabled,
     "Touch simulation is enabled.");

devtools/client/responsive.html/test/unit/xpcshell.ini

@@ -8,6 +8,7 @@ firefox-appdir = browser
 [test_add_viewport.js]
 [test_change_device.js]
 [test_change_display_pixel_ratio.js]
+[test_change_location.js]
 [test_change_network_throttling.js]
 [test_change_pixel_ratio.js]
 [test_resize_viewport.js]

devtools/client/responsive.html/types.js

@@ -24,6 +24,11 @@ exports.loadableState = createEnum([
 
 /* GLOBAL */
 
+/**
+ * The location of the document displayed in the viewport(s).
+ */
+exports.location = PropTypes.string;
+
 /**
  * Whether to reload the page automatically when certain actions occur.
  */
@@ -125,6 +130,16 @@ exports.networkThrottling = {
 
 };
 
+/**
+ * Device pixel ratio for a given viewport.
+ */
+const pixelRatio = exports.pixelRatio = {
+
+  // The device pixel ratio value
+  value: PropTypes.number,
+
+};
+
 /**
  * Touch simulation state for a given viewport.
  */
@@ -156,7 +171,7 @@ exports.viewport = {
   height: PropTypes.number,
 
   // The device pixel ratio of the viewport
-  pixelRatio: PropTypes.number,
+  pixelRatio: PropTypes.shape(pixelRatio),
 
   // The user context (container) ID for the viewport
   // Defaults to 0 meaning the default context