From 3a26040bed74175709747209b65678b9ba85cace Mon Sep 17 00:00:00 2001 From: Gabriel Luong Date: Mon, 24 Sep 2018 13:04:03 -0400 Subject: [PATCH] Bug 1248619 - Part 1: Refactor and restore the reload condition settings in RDM. r=rcaliman --- .../client/responsive.html/actions/index.js | 12 ++-- .../client/responsive.html/actions/moz.build | 1 - .../actions/reload-conditions.js | 53 ----------------- devtools/client/responsive.html/actions/ui.js | 18 +++++- .../client/responsive.html/components/App.js | 30 ++++++---- .../components/SettingsMenu.js | 25 ++++---- .../responsive.html/components/Toolbar.js | 16 ++---- .../components/UserAgentInput.js | 9 ++- devtools/client/responsive.html/index.js | 2 - devtools/client/responsive.html/reducers.js | 1 - .../responsive.html/reducers/devices.js | 43 ++++++++------ .../client/responsive.html/reducers/moz.build | 1 - .../reducers/reload-conditions.js | 42 -------------- .../responsive.html/reducers/screenshot.js | 10 +++- .../client/responsive.html/reducers/ui.js | 57 +++++++++++++++---- .../responsive.html/reducers/viewports.js | 49 +++++++++------- devtools/client/responsive.html/types.js | 28 --------- 17 files changed, 181 insertions(+), 216 deletions(-) delete mode 100644 devtools/client/responsive.html/actions/reload-conditions.js delete mode 100644 devtools/client/responsive.html/reducers/reload-conditions.js diff --git a/devtools/client/responsive.html/actions/index.js b/devtools/client/responsive.html/actions/index.js index 7299b7958d80..c6479ec16d24 100644 --- a/devtools/client/responsive.html/actions/index.js +++ b/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", diff --git a/devtools/client/responsive.html/actions/moz.build b/devtools/client/responsive.html/actions/moz.build index ae665ef2348b..b87898ce9879 100644 --- a/devtools/client/responsive.html/actions/moz.build +++ b/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', diff --git a/devtools/client/responsive.html/actions/reload-conditions.js b/devtools/client/responsive.html/actions/reload-conditions.js deleted file mode 100644 index 22485a14e98f..000000000000 --- 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 }); - }; - }, - -}; diff --git a/devtools/client/responsive.html/actions/ui.js b/devtools/client/responsive.html/actions/ui.js index e8ea58361da3..c693534d34ea 100644 --- a/devtools/client/responsive.html/actions/ui.js +++ b/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, diff --git a/devtools/client/responsive.html/components/App.js b/devtools/client/responsive.html/components/App.js index 18548d43111a..4cd4800c818f 100644 --- a/devtools/client/responsive.html/components/App.js +++ b/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, }), diff --git a/devtools/client/responsive.html/components/SettingsMenu.js b/devtools/client/responsive.html/components/SettingsMenu.js index 2ca50184d20e..f2d48e51a3e9 100644 --- a/devtools/client/responsive.html/components/SettingsMenu.js +++ b/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, }; }; diff --git a/devtools/client/responsive.html/components/Toolbar.js b/devtools/client/responsive.html/components/Toolbar.js index 26db529d800f..e22772f2dcec 100644 --- a/devtools/client/responsive.html/components/Toolbar.js +++ b/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, }; }; diff --git a/devtools/client/responsive.html/components/UserAgentInput.js b/devtools/client/responsive.html/components/UserAgentInput.js index aea94fadec73..803b20821aa2 100644 --- a/devtools/client/responsive.html/components/UserAgentInput.js +++ b/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); diff --git a/devtools/client/responsive.html/index.js b/devtools/client/responsive.html/index.js index 701250f027e8..7055867005e1 100644 --- a/devtools/client/responsive.html/index.js +++ b/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() { diff --git a/devtools/client/responsive.html/reducers.js b/devtools/client/responsive.html/reducers.js index e8fe16089eeb..75fe56406326 100644 --- a/devtools/client/responsive.html/reducers.js +++ b/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"); diff --git a/devtools/client/responsive.html/reducers/devices.js b/devtools/client/responsive.html/reducers/devices.js index 45544e8cfae4..af04146534ed 100644 --- a/devtools/client/responsive.html/reducers/devices.js +++ b/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, - }); + }; }, }; diff --git a/devtools/client/responsive.html/reducers/moz.build b/devtools/client/responsive.html/reducers/moz.build index 3f2f60d74c1b..1c246637e46d 100644 --- a/devtools/client/responsive.html/reducers/moz.build +++ b/devtools/client/responsive.html/reducers/moz.build @@ -6,7 +6,6 @@ DevToolsModules( 'devices.js', - 'reload-conditions.js', 'screenshot.js', 'ui.js', 'viewports.js', diff --git a/devtools/client/responsive.html/reducers/reload-conditions.js b/devtools/client/responsive.html/reducers/reload-conditions.js deleted file mode 100644 index c7d690090982..000000000000 --- 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); -}; diff --git a/devtools/client/responsive.html/reducers/screenshot.js b/devtools/client/responsive.html/reducers/screenshot.js index e26380889d58..ef5bc2d64d5c 100644 --- a/devtools/client/responsive.html/reducers/screenshot.js +++ b/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, + }; }, }; diff --git a/devtools/client/responsive.html/reducers/ui.js b/devtools/client/responsive.html/reducers/ui.js index 6661636900f9..43b167119fac 100644 --- a/devtools/client/responsive.html/reducers/ui.js +++ b/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, - }); + }; }, }; diff --git a/devtools/client/responsive.html/reducers/viewports.js b/devtools/client/responsive.html/reducers/viewports.js index f75ac146a28a..786fac55be99 100644 --- a/devtools/client/responsive.html/reducers/viewports.js +++ b/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, + }; }); }, diff --git a/devtools/client/responsive.html/types.js b/devtools/client/responsive.html/types.js index 3130550a58e8..b5fa2001d140 100644 --- a/devtools/client/responsive.html/types.js +++ b/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. */