From 02dbdb12a96a981f2048521a30d871c74e5fd048 Mon Sep 17 00:00:00 2001 From: Narcis Beleuzu Date: Tue, 4 Sep 2018 19:24:12 +0300 Subject: [PATCH] Backed out changeset 7ffb06278c4c (bug 1488114) for xpcshell failures on test_change_pixel_ratio.js. CLOSED TREE --- .../locales/en-US/responsive.properties | 7 +++-- .../client/responsive.html/actions/devices.js | 3 +- .../actions/display-pixel-ratio.js | 23 ++++++++++++++ .../client/responsive.html/actions/index.js | 12 +++---- .../responsive.html/actions/location.js | 22 +++++++++++++ .../client/responsive.html/actions/moz.build | 3 ++ .../actions/reload-conditions.js | 3 +- .../responsive.html/actions/screenshot.js | 3 +- .../actions/touch-simulation.js | 22 +++++++++++++ devtools/client/responsive.html/actions/ui.js | 21 ------------- .../client/responsive.html/browser/swap.js | 2 +- .../responsive.html/browser/web-navigation.js | 1 - .../client/responsive.html/components/App.js | 22 +++++++------ .../components/DevicePixelRatioMenu.js | 10 +++--- .../components/ResizableViewport.js | 4 +-- .../responsive.html/components/Toolbar.js | 16 +++++----- .../components/ViewportDimension.js | 4 +-- .../responsive.html/components/Viewports.js | 6 ++-- devtools/client/responsive.html/index.js | 4 ++- devtools/client/responsive.html/manager.js | 5 +-- devtools/client/responsive.html/reducers.js | 3 ++ .../responsive.html/reducers/devices.js | 6 ++-- .../reducers/display-pixel-ratio.js | 26 ++++++++++++++++ .../responsive.html/reducers/location.js | 25 +++++++++++++++ .../client/responsive.html/reducers/moz.build | 3 ++ .../responsive.html/reducers/screenshot.js | 4 +-- .../reducers/touch-simulation.js | 31 +++++++++++++++++++ .../client/responsive.html/reducers/ui.js | 18 ----------- .../responsive.html/reducers/viewports.js | 8 +++-- .../unit/test_change_display_pixel_ratio.js | 4 +-- .../test/unit/test_change_location.js | 22 +++++++++++++ .../test_update_touch_simulation_enabled.js | 6 ++-- .../responsive.html/test/unit/xpcshell.ini | 1 + devtools/client/responsive.html/types.js | 17 +++++++++- 34 files changed, 265 insertions(+), 102 deletions(-) create mode 100644 devtools/client/responsive.html/actions/display-pixel-ratio.js create mode 100644 devtools/client/responsive.html/actions/location.js create mode 100644 devtools/client/responsive.html/actions/touch-simulation.js create mode 100644 devtools/client/responsive.html/reducers/display-pixel-ratio.js create mode 100644 devtools/client/responsive.html/reducers/location.js create mode 100644 devtools/client/responsive.html/reducers/touch-simulation.js create mode 100644 devtools/client/responsive.html/test/unit/test_change_location.js diff --git a/devtools/client/locales/en-US/responsive.properties b/devtools/client/locales/en-US/responsive.properties index aaa9c524a8d1..6e2ede4ee46c 100644 --- a/devtools/client/locales/en-US/responsive.properties +++ b/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. diff --git a/devtools/client/responsive.html/actions/devices.js b/devtools/client/responsive.html/actions/devices.js index 0726596d95eb..13a8fc4ccb05 100644 --- a/devtools/client/responsive.html/actions/devices.js +++ b/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"; /** diff --git a/devtools/client/responsive.html/actions/display-pixel-ratio.js b/devtools/client/responsive.html/actions/display-pixel-ratio.js new file mode 100644 index 000000000000..ff3343bb5d02 --- /dev/null +++ b/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, + }; + }, + +}; diff --git a/devtools/client/responsive.html/actions/index.js b/devtools/client/responsive.html/actions/index.js index 5306161dd6f1..0db4d70e1254 100644 --- a/devtools/client/responsive.html/actions/index.js +++ b/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", diff --git a/devtools/client/responsive.html/actions/location.js b/devtools/client/responsive.html/actions/location.js new file mode 100644 index 000000000000..565825e5e655 --- /dev/null +++ b/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, + }; + }, + +}; diff --git a/devtools/client/responsive.html/actions/moz.build b/devtools/client/responsive.html/actions/moz.build index ae665ef2348b..26e34ff8b0da 100644 --- a/devtools/client/responsive.html/actions/moz.build +++ b/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', ) diff --git a/devtools/client/responsive.html/actions/reload-conditions.js b/devtools/client/responsive.html/actions/reload-conditions.js index 22485a14e98f..732f8a738166 100644 --- a/devtools/client/responsive.html/actions/reload-conditions.js +++ b/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."; diff --git a/devtools/client/responsive.html/actions/screenshot.js b/devtools/client/responsive.html/actions/screenshot.js index 317ae23e00a1..482eff85b8c1 100644 --- a/devtools/client/responsive.html/actions/screenshot.js +++ b/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"; diff --git a/devtools/client/responsive.html/actions/touch-simulation.js b/devtools/client/responsive.html/actions/touch-simulation.js new file mode 100644 index 000000000000..8f98101e7a78 --- /dev/null +++ b/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, + }; + }, + +}; diff --git a/devtools/client/responsive.html/actions/ui.js b/devtools/client/responsive.html/actions/ui.js index 95abe2bf3c1b..22399f294290 100644 --- a/devtools/client/responsive.html/actions/ui.js +++ b/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, - }; - }, - }; diff --git a/devtools/client/responsive.html/browser/swap.js b/devtools/client/responsive.html/browser/swap.js index b3d79701110f..3287ce743426 100644 --- a/devtools/client/responsive.html/browser/swap.js +++ b/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}`); diff --git a/devtools/client/responsive.html/browser/web-navigation.js b/devtools/client/responsive.html/browser/web-navigation.js index c82973201d09..f28f26ce9b6b 100644 --- a/devtools/client/responsive.html/browser/web-navigation.js +++ b/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) { diff --git a/devtools/client/responsive.html/components/App.js b/devtools/client/responsive.html/components/App.js index d4413a8f8f2d..e25a26fbef61 100644 --- a/devtools/client/responsive.html/components/App.js +++ b/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, diff --git a/devtools/client/responsive.html/components/DevicePixelRatioMenu.js b/devtools/client/responsive.html/components/DevicePixelRatioMenu.js index 473e6c65d235..75fa97d553e5 100644 --- a/devtools/client/responsive.html/components/DevicePixelRatioMenu.js +++ b/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) ) ) ); diff --git a/devtools/client/responsive.html/components/ResizableViewport.js b/devtools/client/responsive.html/components/ResizableViewport.js index 22120938990c..eefcf5c72206 100644 --- a/devtools/client/responsive.html/components/ResizableViewport.js +++ b/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, diff --git a/devtools/client/responsive.html/components/Toolbar.js b/devtools/client/responsive.html/components/Toolbar.js index ce50e0cec769..b50162302872 100644 --- a/devtools/client/responsive.html/components/Toolbar.js +++ b/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, }; }; diff --git a/devtools/client/responsive.html/components/ViewportDimension.js b/devtools/client/responsive.html/components/ViewportDimension.js index f21576bbd363..6283427f82ac 100644 --- a/devtools/client/responsive.html/components/ViewportDimension.js +++ b/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, diff --git a/devtools/client/responsive.html/components/Viewports.js b/devtools/client/responsive.html/components/Viewports.js index dcdb3bb0ae6e..18aca2230417 100644 --- a/devtools/client/responsive.html/components/Viewports.js +++ b/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, diff --git a/devtools/client/responsive.html/index.js b/devtools/client/responsive.html/index.js index 7248f8b7638b..a4207182b17c 100644 --- a/devtools/client/responsive.html/index.js +++ b/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) { diff --git a/devtools/client/responsive.html/manager.js b/devtools/client/responsive.html/manager.js index df5d6f5909e9..931a619f64df 100644 --- a/devtools/client/responsive.html/manager.js +++ b/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(); } diff --git a/devtools/client/responsive.html/reducers.js b/devtools/client/responsive.html/reducers.js index e8fe16089eeb..f4f36d11db1d 100644 --- a/devtools/client/responsive.html/reducers.js +++ b/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"); diff --git a/devtools/client/responsive.html/reducers/devices.js b/devtools/client/responsive.html/reducers/devices.js index 45544e8cfae4..d42251d3bdb6 100644 --- a/devtools/client/responsive.html/reducers/devices.js +++ b/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 = { diff --git a/devtools/client/responsive.html/reducers/display-pixel-ratio.js b/devtools/client/responsive.html/reducers/display-pixel-ratio.js new file mode 100644 index 000000000000..dd1a9ae715d0 --- /dev/null +++ b/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); +}; diff --git a/devtools/client/responsive.html/reducers/location.js b/devtools/client/responsive.html/reducers/location.js new file mode 100644 index 000000000000..02ccfdf08d81 --- /dev/null +++ b/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); +}; diff --git a/devtools/client/responsive.html/reducers/moz.build b/devtools/client/responsive.html/reducers/moz.build index 3f2f60d74c1b..f7d191b6dadc 100644 --- a/devtools/client/responsive.html/reducers/moz.build +++ b/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', ) diff --git a/devtools/client/responsive.html/reducers/screenshot.js b/devtools/client/responsive.html/reducers/screenshot.js index e26380889d58..11246f5bddac 100644 --- a/devtools/client/responsive.html/reducers/screenshot.js +++ b/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 = { diff --git a/devtools/client/responsive.html/reducers/touch-simulation.js b/devtools/client/responsive.html/reducers/touch-simulation.js new file mode 100644 index 000000000000..6aebaa40d914 --- /dev/null +++ b/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); +}; diff --git a/devtools/client/responsive.html/reducers/ui.js b/devtools/client/responsive.html/reducers/ui.js index 5f3c8f27ddb0..10e93e10f645 100644 --- a/devtools/client/responsive.html/reducers/ui.js +++ b/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) { diff --git a/devtools/client/responsive.html/reducers/viewports.js b/devtools/client/responsive.html/reducers/viewports.js index f75ac146a28a..507b5610b0d3 100644 --- a/devtools/client/responsive.html/reducers/viewports.js +++ b/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 + }, }); }); }, diff --git a/devtools/client/responsive.html/test/unit/test_change_display_pixel_ratio.js b/devtools/client/responsive.html/test/unit/test_change_display_pixel_ratio.js index 4e7799323242..5289ebe3a156 100644 --- a/devtools/client/responsive.html/test/unit/test_change_display_pixel_ratio.js +++ b/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() { diff --git a/devtools/client/responsive.html/test/unit/test_change_location.js b/devtools/client/responsive.html/test/unit/test_change_location.js new file mode 100644 index 000000000000..f8d3274550c0 --- /dev/null +++ b/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"); +}); diff --git a/devtools/client/responsive.html/test/unit/test_update_touch_simulation_enabled.js b/devtools/client/responsive.html/test/unit/test_update_touch_simulation_enabled.js index 63503250db4a..12ab4e2bcf61 100644 --- a/devtools/client/responsive.html/test/unit/test_update_touch_simulation_enabled.js +++ b/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."); diff --git a/devtools/client/responsive.html/test/unit/xpcshell.ini b/devtools/client/responsive.html/test/unit/xpcshell.ini index b5241660f4c0..432e68ed2030 100644 --- a/devtools/client/responsive.html/test/unit/xpcshell.ini +++ b/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] diff --git a/devtools/client/responsive.html/types.js b/devtools/client/responsive.html/types.js index 3130550a58e8..99d89cae6a9e 100644 --- a/devtools/client/responsive.html/types.js +++ b/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