Bug 1248619 - Part 1: Refactor and restore the reload condition settings in RDM. r=rcaliman
authorGabriel Luong <gabriel.luong@gmail.com>
Mon, 24 Sep 2018 13:04:03 -0400
changeset 437923 5e089ee7f5129202a1934203fe48fe60126f6bc9
parent 437922 02308fea5840d131e7684e330563470925aa5472
child 437924 2b3bd3d1a83f1363e704b8327b4c99491e1b5f85
push id108192
push usergabriel.luong@gmail.com
push dateMon, 24 Sep 2018 17:04:10 +0000
treeherdermozilla-inbound@5e089ee7f512 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcaliman
bugs1248619
milestone64.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1248619 - Part 1: Refactor and restore the reload condition settings in RDM. r=rcaliman
devtools/client/responsive.html/actions/index.js
devtools/client/responsive.html/actions/moz.build
devtools/client/responsive.html/actions/reload-conditions.js
devtools/client/responsive.html/actions/ui.js
devtools/client/responsive.html/components/App.js
devtools/client/responsive.html/components/SettingsMenu.js
devtools/client/responsive.html/components/Toolbar.js
devtools/client/responsive.html/components/UserAgentInput.js
devtools/client/responsive.html/index.js
devtools/client/responsive.html/reducers.js
devtools/client/responsive.html/reducers/devices.js
devtools/client/responsive.html/reducers/moz.build
devtools/client/responsive.html/reducers/reload-conditions.js
devtools/client/responsive.html/reducers/screenshot.js
devtools/client/responsive.html/reducers/ui.js
devtools/client/responsive.html/reducers/viewports.js
devtools/client/responsive.html/types.js
--- a/devtools/client/responsive.html/actions/index.js
+++ b/devtools/client/responsive.html/actions/index.js
@@ -43,31 +43,25 @@ createEnum([
   // Change the user agent of the viewport.
   "CHANGE_USER_AGENT",
 
   // The pixel ratio of the viewport has changed. This may be triggered by the user
   // when changing the device displayed in the viewport, or when a pixel ratio is
   // selected from the device pixel ratio dropdown.
   "CHANGE_PIXEL_RATIO",
 
-  // Change one of the reload conditions.
-  "CHANGE_RELOAD_CONDITION",
-
   // Indicates that the device list is being loaded.
   "LOAD_DEVICE_LIST_START",
 
   // Indicates that the device list loading action threw an error.
   "LOAD_DEVICE_LIST_ERROR",
 
   // Indicates that the device list has been loaded successfully.
   "LOAD_DEVICE_LIST_END",
 
-  // Indicates that the reload conditions have been loaded successfully.
-  "LOAD_RELOAD_CONDITIONS_END",
-
   // Remove a device.
   "REMOVE_DEVICE",
 
   // Remove the viewport's device assocation.
   "REMOVE_DEVICE_ASSOCIATION",
 
   // Resize the viewport.
   "RESIZE_VIEWPORT",
@@ -79,16 +73,22 @@ createEnum([
   "TAKE_SCREENSHOT_START",
 
   // Indicates when the screenshot action ends.
   "TAKE_SCREENSHOT_END",
 
   // Toggles the left alignment of the viewports.
   "TOGGLE_LEFT_ALIGNMENT",
 
+  // Toggles the reload on touch simulation changes.
+  "TOGGLE_RELOAD_ON_TOUCH_SIMULATION",
+
+  // Toggles the reload on user agent changes.
+  "TOGGLE_RELOAD_ON_USER_AGENT",
+
   // Toggles the touch simulation state of the viewports.
   "TOGGLE_TOUCH_SIMULATION",
 
   // Toggles the user agent input displayed in the toolbar.
   "TOGGLE_USER_AGENT_INPUT",
 
   // Update the device display state in the device selector.
   "UPDATE_DEVICE_DISPLAYED",
--- a/devtools/client/responsive.html/actions/moz.build
+++ b/devtools/client/responsive.html/actions/moz.build
@@ -2,13 +2,12 @@
 # vim: set filetype=python:
 # 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/.
 
 DevToolsModules(
     'devices.js',
     'index.js',
-    'reload-conditions.js',
     'screenshot.js',
     'ui.js',
     'viewports.js',
 )
deleted file mode 100644
--- a/devtools/client/responsive.html/actions/reload-conditions.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/* 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 Services = require("Services");
-
-const {
-  CHANGE_RELOAD_CONDITION,
-  LOAD_RELOAD_CONDITIONS_END,
-} = require("./index");
-
-const Types = require("../types");
-
-const PREF_PREFIX = "devtools.responsive.reloadConditions.";
-
-module.exports = {
-
-  changeReloadCondition(id, value) {
-    return dispatch => {
-      const pref = PREF_PREFIX + id;
-      Services.prefs.setBoolPref(pref, value);
-      dispatch({
-        type: CHANGE_RELOAD_CONDITION,
-        id,
-        value,
-      });
-    };
-  },
-
-  loadReloadConditions() {
-    return dispatch => {
-      // Loop over the conditions and load their values from prefs.
-      for (const id in Types.reloadConditions) {
-        // Skip over the loading state of the list.
-        if (id == "state") {
-          return;
-        }
-        const pref = PREF_PREFIX + id;
-        const value = Services.prefs.getBoolPref(pref, false);
-        dispatch({
-          type: CHANGE_RELOAD_CONDITION,
-          id,
-          value,
-        });
-      }
-
-      dispatch({ type: LOAD_RELOAD_CONDITIONS_END });
-    };
-  },
-
-};
--- a/devtools/client/responsive.html/actions/ui.js
+++ b/devtools/client/responsive.html/actions/ui.js
@@ -1,18 +1,20 @@
 /* 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,
   CHANGE_USER_AGENT,
-  CHANGE_DISPLAY_PIXEL_RATIO,
   TOGGLE_LEFT_ALIGNMENT,
+  TOGGLE_RELOAD_ON_TOUCH_SIMULATION,
+  TOGGLE_RELOAD_ON_USER_AGENT,
   TOGGLE_TOUCH_SIMULATION,
   TOGGLE_USER_AGENT_INPUT,
 } = require("./index");
 
 module.exports = {
 
   /**
    * The pixel ratio of the display has changed. This may be triggered by the user
@@ -35,16 +37,30 @@ module.exports = {
 
   toggleLeftAlignment(enabled) {
     return {
       type: TOGGLE_LEFT_ALIGNMENT,
       enabled,
     };
   },
 
+  toggleReloadOnTouchSimulation(enabled) {
+    return {
+      type: TOGGLE_RELOAD_ON_TOUCH_SIMULATION,
+      enabled,
+    };
+  },
+
+  toggleReloadOnUserAgent(enabled) {
+    return {
+      type: TOGGLE_RELOAD_ON_USER_AGENT,
+      enabled,
+    };
+  },
+
   toggleTouchSimulation(enabled) {
     return {
       type: TOGGLE_TOUCH_SIMULATION,
       enabled,
     };
   },
 
   toggleUserAgentInput(enabled) {
--- a/devtools/client/responsive.html/components/App.js
+++ b/devtools/client/responsive.html/components/App.js
@@ -20,22 +20,23 @@ loader.lazyGetter(this, "DeviceModal",
 const { changeNetworkThrottling } = require("devtools/client/shared/components/throttling/actions");
 const {
   addCustomDevice,
   removeCustomDevice,
   updateDeviceDisplayed,
   updateDeviceModal,
   updatePreferredDevices,
 } = require("../actions/devices");
-const { changeReloadCondition } = require("../actions/reload-conditions");
 const { takeScreenshot } = require("../actions/screenshot");
 const {
   changeUserAgent,
+  toggleLeftAlignment,
+  toggleReloadOnTouchSimulation,
+  toggleReloadOnUserAgent,
   toggleTouchSimulation,
-  toggleLeftAlignment,
   toggleUserAgentInput,
 } = require("../actions/ui");
 const {
   changeDevice,
   changePixelRatio,
   removeDeviceAssociation,
   resizeViewport,
   rotateViewport,
@@ -44,42 +45,43 @@ const {
 const Types = require("../types");
 
 class App extends PureComponent {
   static get propTypes() {
     return {
       devices: PropTypes.shape(Types.devices).isRequired,
       dispatch: PropTypes.func.isRequired,
       networkThrottling: PropTypes.shape(Types.networkThrottling).isRequired,
-      reloadConditions: PropTypes.shape(Types.reloadConditions).isRequired,
       screenshot: PropTypes.shape(Types.screenshot).isRequired,
       viewports: PropTypes.arrayOf(PropTypes.shape(Types.viewport)).isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.onAddCustomDevice = this.onAddCustomDevice.bind(this);
     this.onBrowserMounted = this.onBrowserMounted.bind(this);
     this.onChangeDevice = this.onChangeDevice.bind(this);
     this.onChangeNetworkThrottling = this.onChangeNetworkThrottling.bind(this);
     this.onChangePixelRatio = this.onChangePixelRatio.bind(this);
-    this.onChangeReloadCondition = this.onChangeReloadCondition.bind(this);
     this.onChangeTouchSimulation = this.onChangeTouchSimulation.bind(this);
     this.onChangeUserAgent = this.onChangeUserAgent.bind(this);
     this.onContentResize = this.onContentResize.bind(this);
     this.onDeviceListUpdate = this.onDeviceListUpdate.bind(this);
     this.onExit = this.onExit.bind(this);
     this.onRemoveCustomDevice = this.onRemoveCustomDevice.bind(this);
     this.onRemoveDeviceAssociation = this.onRemoveDeviceAssociation.bind(this);
     this.onResizeViewport = this.onResizeViewport.bind(this);
     this.onRotateViewport = this.onRotateViewport.bind(this);
     this.onScreenshot = this.onScreenshot.bind(this);
     this.onToggleLeftAlignment = this.onToggleLeftAlignment.bind(this);
+    this.onToggleReloadOnTouchSimulation =
+      this.onToggleReloadOnTouchSimulation.bind(this);
+    this.onToggleReloadOnUserAgent = this.onToggleReloadOnUserAgent.bind(this);
     this.onToggleUserAgentInput = this.onToggleUserAgentInput.bind(this);
     this.onUpdateDeviceDisplayed = this.onUpdateDeviceDisplayed.bind(this);
     this.onUpdateDeviceModal = this.onUpdateDeviceModal.bind(this);
   }
 
   onAddCustomDevice(device) {
     this.props.dispatch(addCustomDevice(device));
   }
@@ -114,20 +116,16 @@ class App extends PureComponent {
   onChangePixelRatio(pixelRatio) {
     window.postMessage({
       type: "change-pixel-ratio",
       pixelRatio,
     }, "*");
     this.props.dispatch(changePixelRatio(0, pixelRatio));
   }
 
-  onChangeReloadCondition(id, value) {
-    this.props.dispatch(changeReloadCondition(id, value));
-  }
-
   onChangeTouchSimulation(enabled) {
     window.postMessage({
       type: "change-touch-simulation",
       enabled,
     }, "*");
     this.props.dispatch(toggleTouchSimulation(enabled));
   }
 
@@ -187,55 +185,63 @@ class App extends PureComponent {
   onScreenshot() {
     this.props.dispatch(takeScreenshot());
   }
 
   onToggleLeftAlignment() {
     this.props.dispatch(toggleLeftAlignment());
   }
 
+  onToggleReloadOnTouchSimulation() {
+    this.props.dispatch(toggleReloadOnTouchSimulation());
+  }
+
+  onToggleReloadOnUserAgent() {
+    this.props.dispatch(toggleReloadOnUserAgent());
+  }
+
   onToggleUserAgentInput() {
     this.props.dispatch(toggleUserAgentInput());
   }
 
   onUpdateDeviceDisplayed(device, deviceType, displayed) {
     this.props.dispatch(updateDeviceDisplayed(device, deviceType, displayed));
   }
 
   onUpdateDeviceModal(isOpen, modalOpenedFromViewport) {
     this.props.dispatch(updateDeviceModal(isOpen, modalOpenedFromViewport));
   }
 
   render() {
     const {
       devices,
       networkThrottling,
-      reloadConditions,
       screenshot,
       viewports,
     } = this.props;
 
     const {
       onAddCustomDevice,
       onBrowserMounted,
       onChangeDevice,
       onChangeNetworkThrottling,
       onChangePixelRatio,
-      onChangeReloadCondition,
       onChangeTouchSimulation,
       onChangeUserAgent,
       onContentResize,
       onDeviceListUpdate,
       onExit,
       onRemoveCustomDevice,
       onRemoveDeviceAssociation,
       onResizeViewport,
       onRotateViewport,
       onScreenshot,
       onToggleLeftAlignment,
+      onToggleReloadOnTouchSimulation,
+      onToggleReloadOnUserAgent,
       onToggleUserAgentInput,
       onUpdateDeviceDisplayed,
       onUpdateDeviceModal,
     } = this;
 
     if (!viewports.length) {
       return null;
     }
@@ -248,33 +254,33 @@ class App extends PureComponent {
       deviceAdderViewportTemplate = viewports[devices.modalOpenedFromViewport];
     }
 
     return (
       dom.div({ id: "app" },
         Toolbar({
           devices,
           networkThrottling,
-          reloadConditions,
           screenshot,
           selectedDevice,
           selectedPixelRatio,
           viewport: viewports[0],
           onChangeDevice,
           onChangeNetworkThrottling,
           onChangePixelRatio,
-          onChangeReloadCondition,
           onChangeTouchSimulation,
           onChangeUserAgent,
           onExit,
           onRemoveDeviceAssociation,
           onResizeViewport,
           onRotateViewport,
           onScreenshot,
           onToggleLeftAlignment,
+          onToggleReloadOnTouchSimulation,
+          onToggleReloadOnUserAgent,
           onToggleUserAgentInput,
           onUpdateDeviceModal,
         }),
         Viewports({
           screenshot,
           viewports,
           onBrowserMounted,
           onContentResize,
--- a/devtools/client/responsive.html/components/SettingsMenu.js
+++ b/devtools/client/responsive.html/components/SettingsMenu.js
@@ -1,48 +1,51 @@
 /* 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 { connect } = require("devtools/client/shared/vendor/react-redux");
 const { PureComponent } = 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 { getStr } = require("../utils/l10n");
-const Types = require("../types");
 
 loader.lazyRequireGetter(this, "showMenu", "devtools/client/shared/components/menu/utils", true);
 
 class SettingsMenu extends PureComponent {
   static get propTypes() {
     return {
       leftAlignmentEnabled: PropTypes.bool.isRequired,
-      onChangeReloadCondition: PropTypes.func.isRequired,
       onToggleLeftAlignment: PropTypes.func.isRequired,
+      onToggleReloadOnTouchSimulation: PropTypes.func.isRequired,
+      onToggleReloadOnUserAgent: PropTypes.func.isRequired,
       onToggleUserAgentInput: PropTypes.func.isRequired,
-      reloadConditions: PropTypes.shape(Types.reloadConditions).isRequired,
+      reloadOnTouchSimulation: PropTypes.bool.isRequired,
+      reloadOnUserAgent: PropTypes.bool.isRequired,
       showUserAgentInput: PropTypes.bool.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
     this.onToggleSettingMenu = this.onToggleSettingMenu.bind(this);
   }
 
   onToggleSettingMenu(event) {
     const {
       leftAlignmentEnabled,
-      onChangeReloadCondition,
       onToggleLeftAlignment,
+      onToggleReloadOnTouchSimulation,
+      onToggleReloadOnUserAgent,
       onToggleUserAgentInput,
-      reloadConditions,
+      reloadOnTouchSimulation,
+      reloadOnUserAgent,
       showUserAgentInput,
     } = this.props;
 
     const menuItems = [
       {
         id: "toggleLeftAlignment",
         checked: leftAlignmentEnabled,
         label: getStr("responsive.leftAlignViewport"),
@@ -59,30 +62,30 @@ class SettingsMenu extends PureComponent
         type: "checkbox",
         click: () => {
           onToggleUserAgentInput();
         },
       },
       "-",
       {
         id: "touchSimulation",
-        checked: reloadConditions.touchSimulation,
+        checked: reloadOnTouchSimulation,
         label: getStr("responsive.reloadConditions.touchSimulation"),
         type: "checkbox",
         click: () => {
-          onChangeReloadCondition("touchSimulation", !reloadConditions.touchSimulation);
+          onToggleReloadOnTouchSimulation();
         },
       },
       {
         id: "userAgent",
-        checked: reloadConditions.userAgent,
+        checked: reloadOnUserAgent,
         label: getStr("responsive.reloadConditions.userAgent"),
         type: "checkbox",
         click: () => {
-          onChangeReloadCondition("userAgent", !reloadConditions.userAgent);
+          onToggleReloadOnUserAgent();
         },
       },
     ];
 
     showMenu(menuItems, {
       button: event.target,
       useTopLevelWindow: true,
     });
@@ -97,13 +100,15 @@ class SettingsMenu extends PureComponent
       })
     );
   }
 }
 
 const mapStateToProps = state => {
   return {
     leftAlignmentEnabled: state.ui.leftAlignmentEnabled,
+    reloadOnTouchSimulation: state.ui.reloadOnTouchSimulation,
+    reloadOnUserAgent: state.ui.reloadOnUserAgent,
     showUserAgentInput: state.ui.showUserAgentInput,
   };
 };
 
 module.exports = connect(mapStateToProps)(SettingsMenu);
--- a/devtools/client/responsive.html/components/Toolbar.js
+++ b/devtools/client/responsive.html/components/Toolbar.js
@@ -32,78 +32,75 @@ class Toolbar extends PureComponent {
     return {
       devices: PropTypes.shape(Types.devices).isRequired,
       displayPixelRatio: PropTypes.number.isRequired,
       leftAlignmentEnabled: PropTypes.bool.isRequired,
       networkThrottling: PropTypes.shape(Types.networkThrottling).isRequired,
       onChangeDevice: PropTypes.func.isRequired,
       onChangeNetworkThrottling: PropTypes.func.isRequired,
       onChangePixelRatio: PropTypes.func.isRequired,
-      onChangeReloadCondition: PropTypes.func.isRequired,
       onChangeTouchSimulation: PropTypes.func.isRequired,
       onChangeUserAgent: PropTypes.func.isRequired,
       onExit: PropTypes.func.isRequired,
       onRemoveDeviceAssociation: PropTypes.func.isRequired,
       onResizeViewport: PropTypes.func.isRequired,
       onRotateViewport: PropTypes.func.isRequired,
       onScreenshot: PropTypes.func.isRequired,
       onToggleLeftAlignment: PropTypes.func.isRequired,
+      onToggleReloadOnTouchSimulation: PropTypes.func.isRequired,
+      onToggleReloadOnUserAgent: PropTypes.func.isRequired,
       onToggleUserAgentInput: PropTypes.func.isRequired,
       onUpdateDeviceModal: PropTypes.func.isRequired,
-      reloadConditions: PropTypes.shape(Types.reloadConditions).isRequired,
       screenshot: PropTypes.shape(Types.screenshot).isRequired,
       selectedDevice: PropTypes.string.isRequired,
       selectedPixelRatio: PropTypes.number.isRequired,
       showUserAgentInput: PropTypes.bool.isRequired,
       touchSimulationEnabled: PropTypes.bool.isRequired,
-      userAgent: PropTypes.string.isRequired,
       viewport: PropTypes.shape(Types.viewport).isRequired,
     };
   }
 
   renderUserAgent() {
     const {
       onChangeUserAgent,
       showUserAgentInput,
-      userAgent,
     } = this.props;
 
     if (!showUserAgentInput) {
       return null;
     }
 
     return createElement(Fragment, null,
       UserAgentInput({
         onChangeUserAgent,
-        userAgent,
       }),
       dom.div({ className: "devtools-separator" }),
     );
   }
 
   render() {
     const {
       devices,
       displayPixelRatio,
       leftAlignmentEnabled,
       networkThrottling,
       onChangeDevice,
       onChangeNetworkThrottling,
       onChangePixelRatio,
-      onChangeReloadCondition,
       onChangeTouchSimulation,
       onExit,
       onRemoveDeviceAssociation,
       onResizeViewport,
       onRotateViewport,
       onScreenshot,
       onToggleLeftAlignment,
+      onToggleReloadOnTouchSimulation,
+      onToggleReloadOnUserAgent,
       onToggleUserAgentInput,
       onUpdateDeviceModal,
-      reloadConditions,
       screenshot,
       selectedDevice,
       selectedPixelRatio,
       touchSimulationEnabled,
       viewport,
     } = this.props;
 
     return (
@@ -167,19 +164,19 @@ class Toolbar extends PureComponent {
           dom.button({
             id: "screenshot-button",
             className: "devtools-button",
             title: getStr("responsive.screenshot"),
             onClick: onScreenshot,
             disabled: screenshot.isCapturing,
           }),
           SettingsMenu({
-            reloadConditions,
-            onChangeReloadCondition,
             onToggleLeftAlignment,
+            onToggleReloadOnTouchSimulation,
+            onToggleReloadOnUserAgent,
             onToggleUserAgentInput,
           }),
           dom.div({ className: "devtools-separator" }),
           dom.button({
             id: "exit-button",
             className: "devtools-button",
             title: getStr("responsive.exit"),
             onClick: onExit,
@@ -191,13 +188,12 @@ class Toolbar extends PureComponent {
 }
 
 const mapStateToProps = state => {
   return {
     displayPixelRatio: state.ui.displayPixelRatio,
     leftAlignmentEnabled: state.ui.leftAlignmentEnabled,
     showUserAgentInput: state.ui.showUserAgentInput,
     touchSimulationEnabled: state.ui.touchSimulationEnabled,
-    userAgent: state.ui.userAgent,
   };
 };
 
 module.exports = connect(mapStateToProps)(Toolbar);
--- a/devtools/client/responsive.html/components/UserAgentInput.js
+++ b/devtools/client/responsive.html/components/UserAgentInput.js
@@ -2,16 +2,17 @@
  * 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 { PureComponent } = 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 { KeyCodes } = require("devtools/client/shared/keycodes");
 
 const { getStr } = require("../utils/l10n");
 
 class UserAgentInput extends PureComponent {
   static get propTypes() {
     return {
       onChangeUserAgent: PropTypes.func.isRequired,
@@ -81,9 +82,15 @@ class UserAgentInput extends PureCompone
           type: "text",
           value: this.state.value,
         })
       )
     );
   }
 }
 
-module.exports = UserAgentInput;
+const mapStateToProps = state => {
+  return {
+    userAgent: state.ui.userAgent,
+  };
+};
+
+module.exports = connect(mapStateToProps)(UserAgentInput);
--- a/devtools/client/responsive.html/index.js
+++ b/devtools/client/responsive.html/index.js
@@ -18,17 +18,16 @@ const { createFactory, createElement } =
   require("devtools/client/shared/vendor/react");
 const ReactDOM = require("devtools/client/shared/vendor/react-dom");
 const { Provider } = require("devtools/client/shared/vendor/react-redux");
 
 const message = require("./utils/message");
 const App = createFactory(require("./components/App"));
 const Store = require("./store");
 const { loadDevices } = require("./actions/devices");
-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;
 
 const bootstrap = {
 
@@ -70,17 +69,16 @@ const bootstrap = {
 
 // manager.js sends a message to signal init
 message.wait(window, "init").then(() => bootstrap.init());
 
 // manager.js sends a message to signal init is done, which can be used for delayed
 // startup work that shouldn't block initial load
 message.wait(window, "post-init").then(() => {
   bootstrap.dispatch(loadDevices());
-  bootstrap.dispatch(loadReloadConditions());
 });
 
 window.addEventListener("unload", function() {
   bootstrap.destroy();
 }, {once: true});
 
 // Allows quick testing of actions from the console
 window.dispatch = action => bootstrap.dispatch(action);
--- a/devtools/client/responsive.html/reducers.js
+++ b/devtools/client/responsive.html/reducers.js
@@ -1,12 +1,11 @@
 /* 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";
 
 exports.devices = require("./reducers/devices");
 exports.networkThrottling = require("devtools/client/shared/components/throttling/reducer");
-exports.reloadConditions = require("./reducers/reload-conditions");
 exports.screenshot = require("./reducers/screenshot");
 exports.ui = require("./reducers/ui");
 exports.viewports = require("./reducers/viewports");
--- a/devtools/client/responsive.html/reducers/devices.js
+++ b/devtools/client/responsive.html/reducers/devices.js
@@ -22,78 +22,87 @@ const INITIAL_DEVICES = {
   listState: Types.loadableState.INITIALIZED,
   modalOpenedFromViewport: null,
   types: [],
 };
 
 const reducers = {
 
   [ADD_DEVICE](devices, { device, deviceType }) {
-    return Object.assign({}, devices, {
+    return {
+      ...devices,
       [deviceType]: [...devices[deviceType], device],
-    });
+    };
   },
 
   [ADD_DEVICE_TYPE](devices, { deviceType }) {
-    return Object.assign({}, devices, {
+    return {
+      ...devices,
       types: [...devices.types, deviceType],
       [deviceType]: [],
-    });
+    };
   },
 
   [UPDATE_DEVICE_DISPLAYED](devices, { device, deviceType, displayed }) {
     const newDevices = devices[deviceType].map(d => {
       if (d == device) {
         d.displayed = displayed;
       }
 
       return d;
     });
 
-    return Object.assign({}, devices, {
+    return {
+      ...devices,
       [deviceType]: newDevices,
-    });
+    };
   },
 
   [LOAD_DEVICE_LIST_START](devices, action) {
-    return Object.assign({}, devices, {
+    return {
+      ...devices,
       listState: Types.loadableState.LOADING,
-    });
+    };
   },
 
   [LOAD_DEVICE_LIST_ERROR](devices, action) {
-    return Object.assign({}, devices, {
+    return {
+      ...devices,
       listState: Types.loadableState.ERROR,
-    });
+    };
   },
 
   [LOAD_DEVICE_LIST_END](devices, action) {
-    return Object.assign({}, devices, {
+    return {
+      ...devices,
       listState: Types.loadableState.LOADED,
-    });
+    };
   },
 
   [REMOVE_DEVICE](devices, { device, deviceType }) {
     const index = devices[deviceType].indexOf(device);
     if (index < 0) {
       return devices;
     }
 
     const list = [...devices[deviceType]];
     list.splice(index, 1);
-    return Object.assign({}, devices, {
-      [deviceType]: list
-    });
+
+    return {
+      ...devices,
+      [deviceType]: list,
+    };
   },
 
   [UPDATE_DEVICE_MODAL](devices, { isOpen, modalOpenedFromViewport }) {
-    return Object.assign({}, devices, {
+    return {
+      ...devices,
       isModalOpen: isOpen,
       modalOpenedFromViewport,
-    });
+    };
   },
 
 };
 
 module.exports = function(devices = INITIAL_DEVICES, action) {
   const reducer = reducers[action.type];
   if (!reducer) {
     return devices;
--- a/devtools/client/responsive.html/reducers/moz.build
+++ b/devtools/client/responsive.html/reducers/moz.build
@@ -1,13 +1,12 @@
 # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
 # vim: set filetype=python:
 # 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/.
 
 DevToolsModules(
     'devices.js',
-    'reload-conditions.js',
     'screenshot.js',
     'ui.js',
     'viewports.js',
 )
deleted file mode 100644
--- a/devtools/client/responsive.html/reducers/reload-conditions.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/* 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_RELOAD_CONDITION,
-  LOAD_RELOAD_CONDITIONS_END,
-} = require("../actions/index");
-
-const Types = require("../types");
-
-const INITIAL_RELOAD_CONDITIONS = {
-  touchSimulation: false,
-  userAgent: false,
-  state: Types.loadableState.INITIALIZED,
-};
-
-const reducers = {
-
-  [CHANGE_RELOAD_CONDITION](conditions, { id, value }) {
-    return Object.assign({}, conditions, {
-      [id]: value,
-    });
-  },
-
-  [LOAD_RELOAD_CONDITIONS_END](conditions) {
-    return Object.assign({}, conditions, {
-      state: Types.loadableState.LOADED,
-    });
-  },
-
-};
-
-module.exports = function(conditions = INITIAL_RELOAD_CONDITIONS, action) {
-  const reducer = reducers[action.type];
-  if (!reducer) {
-    return conditions;
-  }
-  return reducer(conditions, action);
-};
--- a/devtools/client/responsive.html/reducers/screenshot.js
+++ b/devtools/client/responsive.html/reducers/screenshot.js
@@ -11,21 +11,27 @@ const {
 
 const INITIAL_SCREENSHOT = {
   isCapturing: false,
 };
 
 const reducers = {
 
   [TAKE_SCREENSHOT_END](screenshot, action) {
-    return Object.assign({}, screenshot, { isCapturing: false });
+    return {
+      ...screenshot,
+      isCapturing: false,
+    };
   },
 
   [TAKE_SCREENSHOT_START](screenshot, action) {
-    return Object.assign({}, screenshot, { isCapturing: true });
+    return {
+      ...screenshot,
+      isCapturing: true,
+    };
   },
 };
 
 module.exports = function(screenshot = INITIAL_SCREENSHOT, action) {
   const reducer = reducers[action.type];
   if (!reducer) {
     return screenshot;
   }
--- a/devtools/client/responsive.html/reducers/ui.js
+++ b/devtools/client/responsive.html/reducers/ui.js
@@ -5,76 +5,113 @@
 "use strict";
 
 const Services = require("Services");
 
 const {
   CHANGE_DISPLAY_PIXEL_RATIO,
   CHANGE_USER_AGENT,
   TOGGLE_LEFT_ALIGNMENT,
+  TOGGLE_RELOAD_ON_TOUCH_SIMULATION,
+  TOGGLE_RELOAD_ON_USER_AGENT,
   TOGGLE_TOUCH_SIMULATION,
   TOGGLE_USER_AGENT_INPUT,
 } = require("../actions/index");
 
 const LEFT_ALIGNMENT_ENABLED = "devtools.responsive.leftAlignViewport.enabled";
+const RELOAD_ON_TOUCH_SIMULATION = "devtools.responsive.reloadConditions.touchSimulation";
+const RELOAD_ON_USER_AGENT = "devtools.responsive.reloadConditions.userAgent";
 const SHOW_USER_AGENT_INPUT = "devtools.responsive.showUserAgentInput";
 
 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 to reload when touch simulation is toggled.
+  reloadOnTouchSimulation: Services.prefs.getBoolPref(RELOAD_ON_TOUCH_SIMULATION),
+  // Whether or not to reload when user agent is changed.
+  reloadOnUserAgent: Services.prefs.getBoolPref(RELOAD_ON_USER_AGENT),
   // Whether or not to show the user agent input in the toolbar.
   showUserAgentInput: Services.prefs.getBoolPref(SHOW_USER_AGENT_INPUT),
   // Whether or not touch simulation is enabled.
   touchSimulationEnabled: false,
   // The user agent of the viewport.
   userAgent: "",
 };
 
 const reducers = {
 
   [CHANGE_DISPLAY_PIXEL_RATIO](ui, { displayPixelRatio }) {
-    return Object.assign({}, ui, {
+    return {
+      ...ui,
       displayPixelRatio,
-    });
+    };
   },
 
   [CHANGE_USER_AGENT](ui, { userAgent }) {
-    return Object.assign({}, ui, {
+    return {
+      ...ui,
       userAgent,
-    });
+    };
   },
 
   [TOGGLE_LEFT_ALIGNMENT](ui, { enabled }) {
     const leftAlignmentEnabled = enabled !== undefined ?
       enabled : !ui.leftAlignmentEnabled;
 
     Services.prefs.setBoolPref(LEFT_ALIGNMENT_ENABLED, leftAlignmentEnabled);
 
-    return Object.assign({}, ui, {
+    return {
+      ...ui,
       leftAlignmentEnabled,
-    });
+    };
+  },
+
+  [TOGGLE_RELOAD_ON_TOUCH_SIMULATION](ui, { enabled }) {
+    const reloadOnTouchSimulation = enabled !== undefined ?
+      enabled : !ui.reloadOnTouchSimulation;
+
+    Services.prefs.setBoolPref(RELOAD_ON_TOUCH_SIMULATION, reloadOnTouchSimulation);
+
+    return {
+      ...ui,
+      reloadOnTouchSimulation,
+    };
+  },
+
+  [TOGGLE_RELOAD_ON_USER_AGENT](ui, { enabled }) {
+    const reloadOnUserAgent = enabled !== undefined ?
+      enabled : !ui.reloadOnUserAgent;
+
+    Services.prefs.setBoolPref(RELOAD_ON_USER_AGENT, reloadOnUserAgent);
+
+    return {
+      ...ui,
+      reloadOnUserAgent,
+    };
   },
 
   [TOGGLE_TOUCH_SIMULATION](ui, { enabled }) {
-    return Object.assign({}, ui, {
+    return {
+      ...ui,
       touchSimulationEnabled: enabled,
-    });
+    };
   },
 
   [TOGGLE_USER_AGENT_INPUT](ui, { enabled }) {
     const showUserAgentInput = enabled !== undefined ?
       enabled : !ui.showUserAgentInput;
 
     Services.prefs.setBoolPref(SHOW_USER_AGENT_INPUT, showUserAgentInput);
 
-    return Object.assign({}, ui, {
+    return {
+      ...ui,
       showUserAgentInput,
-    });
+    };
   },
 
 };
 
 module.exports = function(ui = INITIAL_UI, action) {
   const reducer = reducers[action.type];
   if (!reducer) {
     return ui;
--- a/devtools/client/responsive.html/reducers/viewports.js
+++ b/devtools/client/responsive.html/reducers/viewports.js
@@ -15,102 +15,113 @@ const {
 
 let nextViewportId = 0;
 
 const INITIAL_VIEWPORTS = [];
 const INITIAL_VIEWPORT = {
   id: nextViewportId++,
   device: "",
   deviceType: "",
+  height: 480,
   width: 320,
-  height: 480,
   pixelRatio: 0,
   userContextId: 0,
 };
 
 const reducers = {
 
   [ADD_VIEWPORT](viewports, { userContextId }) {
     // For the moment, there can be at most one viewport.
     if (viewports.length === 1) {
       return viewports;
     }
-    return [...viewports, Object.assign({}, INITIAL_VIEWPORT, {
-      userContextId,
-    })];
+
+    return [
+      ...viewports,
+      {
+        ...INITIAL_VIEWPORT,
+        userContextId,
+      },
+    ];
   },
 
   [CHANGE_DEVICE](viewports, { id, device, deviceType }) {
     return viewports.map(viewport => {
       if (viewport.id !== id) {
         return viewport;
       }
 
-      return Object.assign({}, viewport, {
+      return {
+        ...viewport,
         device,
         deviceType,
-      });
+      };
     });
   },
 
   [CHANGE_PIXEL_RATIO](viewports, { id, pixelRatio }) {
     return viewports.map(viewport => {
       if (viewport.id !== id) {
         return viewport;
       }
 
-      return Object.assign({}, viewport, {
+      return {
+        ...viewport,
         pixelRatio,
-      });
+      };
     });
   },
 
   [REMOVE_DEVICE_ASSOCIATION](viewports, { id }) {
     return viewports.map(viewport => {
       if (viewport.id !== id) {
         return viewport;
       }
 
-      return Object.assign({}, viewport, {
+      return {
+        ...viewport,
         device: "",
         deviceType: "",
-      });
+      };
     });
   },
 
   [RESIZE_VIEWPORT](viewports, { id, width, height }) {
     return viewports.map(viewport => {
       if (viewport.id !== id) {
         return viewport;
       }
 
-      if (!width) {
-        width = viewport.width;
-      }
       if (!height) {
         height = viewport.height;
       }
 
-      return Object.assign({}, viewport, {
+      if (!width) {
+        width = viewport.width;
+      }
+
+      return {
+        ...viewport,
+        height,
         width,
-        height,
-      });
+      };
     });
   },
 
   [ROTATE_VIEWPORT](viewports, { id }) {
     return viewports.map(viewport => {
       if (viewport.id !== id) {
         return viewport;
       }
 
-      return Object.assign({}, viewport, {
+      return {
+        ...viewport,
+        height: viewport.width,
         width: viewport.height,
-        height: viewport.width,
-      });
+      };
     });
   },
 
 };
 
 module.exports = function(viewports = INITIAL_VIEWPORTS, action) {
   const reducer = reducers[action.type];
   if (!reducer) {
--- a/devtools/client/responsive.html/types.js
+++ b/devtools/client/responsive.html/types.js
@@ -17,34 +17,16 @@ const { createEnum } = require("devtools
  */
 exports.loadableState = createEnum([
   "INITIALIZED",
   "LOADING",
   "LOADED",
   "ERROR",
 ]);
 
-/* GLOBAL */
-
-/**
- * Whether to reload the page automatically when certain actions occur.
- */
-exports.reloadConditions = {
-
-  // Whether to reload when touch simulation is toggled
-  touchSimulation: PropTypes.bool,
-
-  // Whether to reload when user agent is changed
-  userAgent: PropTypes.bool,
-
-  // Loaded state of these conditions
-  state: PropTypes.oneOf(Object.keys(exports.loadableState)),
-
-};
-
 /* DEVICE */
 
 /**
  * A single device that can be displayed in the viewport.
  */
 const device = {
 
   // The name of the device
@@ -121,26 +103,16 @@ exports.networkThrottling = {
   enabled: PropTypes.bool,
 
   // Name of the selected throttling profile
   profile: PropTypes.string,
 
 };
 
 /**
- * Touch simulation state for a given viewport.
- */
-exports.touchSimulation = {
-
-  // Whether or not touch simulation is enabled
-  enabled: PropTypes.bool,
-
-};
-
-/**
  * A single viewport displaying a document.
  */
 exports.viewport = {
 
   // The id of the viewport
   id: PropTypes.number,
 
   // The currently selected device applied to the viewport