Bug 1248619 - Part 1: Refactor and restore the reload condition settings in RDM. r=rcaliman

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

@@ -48,9 +48,6 @@ createEnum([
   // 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",
 
@@ -60,9 +57,6 @@ createEnum([
   // 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",
 
@@ -84,6 +78,12 @@ createEnum([
   // 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",
 

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

@@ -7,7 +7,6 @@
 DevToolsModules(
     'devices.js',
     'index.js',
-    'reload-conditions.js',
     'screenshot.js',
     'ui.js',
     'viewports.js',

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

@@ -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 });
-    };
-  },
-
-};

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

@@ -5,9 +5,11 @@
 "use strict";
 
 const {
-  CHANGE_USER_AGENT,
   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("./index");
@@ -40,6 +42,20 @@ module.exports = {
     };
   },
 
+  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,

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

@@ -25,12 +25,13 @@ const {
   updateDeviceModal,
   updatePreferredDevices,
 } = require("../actions/devices");
-const { changeReloadCondition } = require("../actions/reload-conditions");
 const { takeScreenshot } = require("../actions/screenshot");
 const {
   changeUserAgent,
-  toggleTouchSimulation,
   toggleLeftAlignment,
+  toggleReloadOnTouchSimulation,
+  toggleReloadOnUserAgent,
+  toggleTouchSimulation,
   toggleUserAgentInput,
 } = require("../actions/ui");
 const {
@@ -49,7 +50,6 @@ class App extends PureComponent {
       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,
     };
@@ -63,7 +63,6 @@ class App extends PureComponent {
     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);
@@ -75,6 +74,9 @@ class App extends PureComponent {
     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);
@@ -119,10 +121,6 @@ class App extends PureComponent {
     this.props.dispatch(changePixelRatio(0, pixelRatio));
   }
 
-  onChangeReloadCondition(id, value) {
-    this.props.dispatch(changeReloadCondition(id, value));
-  }
-
   onChangeTouchSimulation(enabled) {
     window.postMessage({
       type: "change-touch-simulation",
@@ -192,6 +190,14 @@ class App extends PureComponent {
     this.props.dispatch(toggleLeftAlignment());
   }
 
+  onToggleReloadOnTouchSimulation() {
+    this.props.dispatch(toggleReloadOnTouchSimulation());
+  }
+
+  onToggleReloadOnUserAgent() {
+    this.props.dispatch(toggleReloadOnUserAgent());
+  }
+
   onToggleUserAgentInput() {
     this.props.dispatch(toggleUserAgentInput());
   }
@@ -208,7 +214,6 @@ class App extends PureComponent {
     const {
       devices,
       networkThrottling,
-      reloadConditions,
       screenshot,
       viewports,
     } = this.props;
@@ -219,7 +224,6 @@ class App extends PureComponent {
       onChangeDevice,
       onChangeNetworkThrottling,
       onChangePixelRatio,
-      onChangeReloadCondition,
       onChangeTouchSimulation,
       onChangeUserAgent,
       onContentResize,
@@ -231,6 +235,8 @@ class App extends PureComponent {
       onRotateViewport,
       onScreenshot,
       onToggleLeftAlignment,
+      onToggleReloadOnTouchSimulation,
+      onToggleReloadOnUserAgent,
       onToggleUserAgentInput,
       onUpdateDeviceDisplayed,
       onUpdateDeviceModal,
@@ -253,7 +259,6 @@ class App extends PureComponent {
         Toolbar({
           devices,
           networkThrottling,
-          reloadConditions,
           screenshot,
           selectedDevice,
           selectedPixelRatio,
@@ -261,7 +266,6 @@ class App extends PureComponent {
           onChangeDevice,
           onChangeNetworkThrottling,
           onChangePixelRatio,
-          onChangeReloadCondition,
           onChangeTouchSimulation,
           onChangeUserAgent,
           onExit,
@@ -270,6 +274,8 @@ class App extends PureComponent {
           onRotateViewport,
           onScreenshot,
           onToggleLeftAlignment,
+          onToggleReloadOnTouchSimulation,
+          onToggleReloadOnUserAgent,
           onToggleUserAgentInput,
           onUpdateDeviceModal,
         }),

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

@@ -4,13 +4,12 @@
 
 "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);
 
@@ -18,10 +17,12 @@ 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,
     };
   }
@@ -34,10 +35,12 @@ class SettingsMenu extends PureComponent {
   onToggleSettingMenu(event) {
     const {
       leftAlignmentEnabled,
-      onChangeReloadCondition,
       onToggleLeftAlignment,
+      onToggleReloadOnTouchSimulation,
+      onToggleReloadOnUserAgent,
       onToggleUserAgentInput,
-      reloadConditions,
+      reloadOnTouchSimulation,
+      reloadOnUserAgent,
       showUserAgentInput,
     } = this.props;
 
@@ -64,20 +67,20 @@ class SettingsMenu extends PureComponent {
       "-",
       {
         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();
         },
       },
     ];
@@ -102,6 +105,8 @@ class SettingsMenu extends PureComponent {
 const mapStateToProps = state => {
   return {
     leftAlignmentEnabled: state.ui.leftAlignmentEnabled,
+    reloadOnTouchSimulation: state.ui.reloadOnTouchSimulation,
+    reloadOnUserAgent: state.ui.reloadOnUserAgent,
     showUserAgentInput: state.ui.showUserAgentInput,
   };
 };

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

@@ -37,7 +37,6 @@ class Toolbar extends PureComponent {
       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,
@@ -46,15 +45,15 @@ class Toolbar extends PureComponent {
       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,
     };
   }
@@ -63,7 +62,6 @@ class Toolbar extends PureComponent {
     const {
       onChangeUserAgent,
       showUserAgentInput,
-      userAgent,
     } = this.props;
 
     if (!showUserAgentInput) {
@@ -73,7 +71,6 @@ class Toolbar extends PureComponent {
     return createElement(Fragment, null,
       UserAgentInput({
         onChangeUserAgent,
-        userAgent,
       }),
       dom.div({ className: "devtools-separator" }),
     );
@@ -88,7 +85,6 @@ class Toolbar extends PureComponent {
       onChangeDevice,
       onChangeNetworkThrottling,
       onChangePixelRatio,
-      onChangeReloadCondition,
       onChangeTouchSimulation,
       onExit,
       onRemoveDeviceAssociation,
@@ -96,9 +92,10 @@ class Toolbar extends PureComponent {
       onRotateViewport,
       onScreenshot,
       onToggleLeftAlignment,
+      onToggleReloadOnTouchSimulation,
+      onToggleReloadOnUserAgent,
       onToggleUserAgentInput,
       onUpdateDeviceModal,
-      reloadConditions,
       screenshot,
       selectedDevice,
       selectedPixelRatio,
@@ -172,9 +169,9 @@ class Toolbar extends PureComponent {
             disabled: screenshot.isCapturing,
           }),
           SettingsMenu({
-            reloadConditions,
-            onChangeReloadCondition,
             onToggleLeftAlignment,
+            onToggleReloadOnTouchSimulation,
+            onToggleReloadOnUserAgent,
             onToggleUserAgentInput,
           }),
           dom.div({ className: "devtools-separator" }),
@@ -196,7 +193,6 @@ const mapStateToProps = state => {
     leftAlignmentEnabled: state.ui.leftAlignmentEnabled,
     showUserAgentInput: state.ui.showUserAgentInput,
     touchSimulationEnabled: state.ui.touchSimulationEnabled,
-    userAgent: state.ui.userAgent,
   };
 };
 

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

@@ -7,6 +7,7 @@
 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");
@@ -86,4 +87,10 @@ class UserAgentInput extends PureComponent {
   }
 }
 
-module.exports = UserAgentInput;
+const mapStateToProps = state => {
+  return {
+    userAgent: state.ui.userAgent,
+  };
+};
+
+module.exports = connect(mapStateToProps)(UserAgentInput);

devtools/client/responsive.html/index.js

@@ -23,7 +23,6 @@ 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");
 
@@ -75,7 +74,6 @@ message.wait(window, "init").then(() => bootstrap.init());
 // startup work that shouldn't block initial load
 message.wait(window, "post-init").then(() => {
   bootstrap.dispatch(loadDevices());
-  bootstrap.dispatch(loadReloadConditions());
 });
 
 window.addEventListener("unload", function() {

devtools/client/responsive.html/reducers.js

@@ -6,7 +6,6 @@
 
 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");

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

@@ -27,16 +27,18 @@ const INITIAL_DEVICES = {
 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 }) {
@@ -48,27 +50,31 @@ const reducers = {
       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 }) {
@@ -79,16 +85,19 @@ const reducers = {
 
     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,
-    });
+    };
   },
 
 };

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

@@ -6,7 +6,6 @@
 
 DevToolsModules(
     'devices.js',
-    'reload-conditions.js',
     'screenshot.js',
     'ui.js',
     'viewports.js',

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

@@ -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);
-};

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

@@ -16,11 +16,17 @@ const INITIAL_SCREENSHOT = {
 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,
+    };
   },
 };
 

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

@@ -10,11 +10,15 @@ 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 = {
@@ -22,6 +26,10 @@ const INITIAL_UI = {
   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.
@@ -33,15 +41,17 @@ const INITIAL_UI = {
 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 }) {
@@ -50,15 +60,41 @@ const reducers = {
 
     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 }) {
@@ -67,9 +103,10 @@ const reducers = {
 
     Services.prefs.setBoolPref(SHOW_USER_AGENT_INPUT, showUserAgentInput);
 
-    return Object.assign({}, ui, {
+    return {
+      ...ui,
       showUserAgentInput,
-    });
+    };
   },
 
 };

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

@@ -20,8 +20,8 @@ const INITIAL_VIEWPORT = {
   id: nextViewportId++,
   device: "",
   deviceType: "",
-  width: 320,
   height: 480,
+  width: 320,
   pixelRatio: 0,
   userContextId: 0,
 };
@@ -33,9 +33,14 @@ const reducers = {
     if (viewports.length === 1) {
       return viewports;
     }
-    return [...viewports, Object.assign({}, INITIAL_VIEWPORT, {
-      userContextId,
-    })];
+
+    return [
+      ...viewports,
+      {
+        ...INITIAL_VIEWPORT,
+        userContextId,
+      },
+    ];
   },
 
   [CHANGE_DEVICE](viewports, { id, device, deviceType }) {
@@ -44,10 +49,11 @@ const reducers = {
         return viewport;
       }
 
-      return Object.assign({}, viewport, {
+      return {
+        ...viewport,
         device,
         deviceType,
-      });
+      };
     });
   },
 
@@ -57,9 +63,10 @@ const reducers = {
         return viewport;
       }
 
-      return Object.assign({}, viewport, {
+      return {
+        ...viewport,
         pixelRatio,
-      });
+      };
     });
   },
 
@@ -69,10 +76,11 @@ const reducers = {
         return viewport;
       }
 
-      return Object.assign({}, viewport, {
+      return {
+        ...viewport,
         device: "",
         deviceType: "",
-      });
+      };
     });
   },
 
@@ -82,17 +90,19 @@ const reducers = {
         return viewport;
       }
 
-      if (!width) {
-        width = viewport.width;
-      }
       if (!height) {
         height = viewport.height;
       }
 
-      return Object.assign({}, viewport, {
-        width,
+      if (!width) {
+        width = viewport.width;
+      }
+
+      return {
+        ...viewport,
         height,
-      });
+        width,
+      };
     });
   },
 
@@ -102,10 +112,11 @@ const reducers = {
         return viewport;
       }
 
-      return Object.assign({}, viewport, {
-        width: viewport.height,
+      return {
+        ...viewport,
         height: viewport.width,
-      });
+        width: viewport.height,
+      };
     });
   },
 

devtools/client/responsive.html/types.js

@@ -22,24 +22,6 @@ exports.loadableState = createEnum([
   "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 */
 
 /**
@@ -125,16 +107,6 @@ exports.networkThrottling = {
 
 };
 
-/**
- * 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.
  */