--- a/devtools/client/responsive.html/actions/index.js
+++ b/devtools/client/responsive.html/actions/index.js
@@ -34,17 +34,20 @@ createEnum([
"CHANGE_DISPLAY_PIXEL_RATIO",
// Change the network throttling profile.
"CHANGE_NETWORK_THROTTLING",
// 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 DPR dropdown.
- "CHANGE_VIEWPORT_PIXEL_RATIO",
+ "CHANGE_PIXEL_RATIO",
+
+ // Change the touch simulation state.
+ "CHANGE_TOUCH_SIMULATION",
// 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
@@ -63,12 +66,9 @@ createEnum([
"TAKE_SCREENSHOT_END",
// Update the device display state in the device selector.
"UPDATE_DEVICE_DISPLAYED",
// Update the device modal open state.
"UPDATE_DEVICE_MODAL_OPEN",
- // Update the touch simulation enabled state.
- "UPDATE_TOUCH_SIMULATION_ENABLED",
-
], module.exports);
--- a/devtools/client/responsive.html/actions/touch-simulation.js
+++ b/devtools/client/responsive.html/actions/touch-simulation.js
@@ -2,21 +2,21 @@
* 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 {
- UPDATE_TOUCH_SIMULATION_ENABLED
+ CHANGE_TOUCH_SIMULATION
} = require("./index");
module.exports = {
- updateTouchSimulationEnabled(enabled = false) {
+ changeTouchSimulation(enabled) {
return {
- type: UPDATE_TOUCH_SIMULATION_ENABLED,
+ type: CHANGE_TOUCH_SIMULATION,
enabled,
};
},
};
--- a/devtools/client/responsive.html/actions/viewports.js
+++ b/devtools/client/responsive.html/actions/viewports.js
@@ -2,17 +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 {
ADD_VIEWPORT,
CHANGE_DEVICE,
- CHANGE_VIEWPORT_PIXEL_RATIO,
+ CHANGE_PIXEL_RATIO,
RESIZE_VIEWPORT,
ROTATE_VIEWPORT
} = require("./index");
module.exports = {
/**
* Add an additional viewport to display the document.
@@ -32,19 +32,19 @@ module.exports = {
id,
device,
};
},
/**
* Change the viewport pixel ratio.
*/
- changeViewportPixelRatio(id, pixelRatio = 0) {
+ changePixelRatio(id, pixelRatio = 0) {
return {
- type: CHANGE_VIEWPORT_PIXEL_RATIO,
+ type: CHANGE_PIXEL_RATIO,
id,
pixelRatio,
};
},
/**
* Resize the viewport.
*/
--- a/devtools/client/responsive.html/app.js
+++ b/devtools/client/responsive.html/app.js
@@ -12,20 +12,20 @@ const { connect } = require("devtools/cl
const {
updateDeviceDisplayed,
updateDeviceModalOpen,
updatePreferredDevices,
} = require("./actions/devices");
const { changeNetworkThrottling } = require("./actions/network-throttling");
const { takeScreenshot } = require("./actions/screenshot");
-const { updateTouchSimulationEnabled } = require("./actions/touch-simulation");
+const { changeTouchSimulation } = require("./actions/touch-simulation");
const {
changeDevice,
- changeViewportPixelRatio,
+ changePixelRatio,
resizeViewport,
rotateViewport
} = require("./actions/viewports");
const DeviceModal = createFactory(require("./components/device-modal"));
const GlobalToolbar = createFactory(require("./components/global-toolbar"));
const Viewports = createFactory(require("./components/viewports"));
const Types = require("./types");
@@ -42,42 +42,49 @@ let App = createClass({
touchSimulation: PropTypes.shape(Types.touchSimulation).isRequired,
viewports: PropTypes.arrayOf(PropTypes.shape(Types.viewport)).isRequired,
},
onBrowserMounted() {
window.postMessage({ type: "browser-mounted" }, "*");
},
+ onChangeDevice(id, device) {
+ window.postMessage({
+ type: "change-device",
+ device,
+ }, "*");
+ this.props.dispatch(changeDevice(id, device.name));
+ this.props.dispatch(changeTouchSimulation(device.touch));
+ this.props.dispatch(changePixelRatio(id, device.pixelRatio));
+ },
+
onChangeNetworkThrottling(enabled, profile) {
window.postMessage({
type: "change-network-throtting",
enabled,
profile,
}, "*");
this.props.dispatch(changeNetworkThrottling(enabled, profile));
},
- onChangeViewportDevice(id, device) {
+ onChangePixelRatio(pixelRatio) {
window.postMessage({
- type: "change-viewport-device",
- device,
+ type: "change-pixel-ratio",
+ pixelRatio,
}, "*");
- this.props.dispatch(changeDevice(id, device.name));
- this.props.dispatch(updateTouchSimulationEnabled(device.touch));
- this.props.dispatch(changeViewportPixelRatio(id, device.pixelRatio));
+ this.props.dispatch(changePixelRatio(0, pixelRatio));
},
- onChangeViewportPixelRatio(pixelRatio) {
+ onChangeTouchSimulation(enabled) {
window.postMessage({
- type: "change-viewport-pixel-ratio",
- pixelRatio,
+ type: "change-touch-simulation",
+ enabled,
}, "*");
-
- this.props.dispatch(changeViewportPixelRatio(0, pixelRatio));
+ this.props.dispatch(changeTouchSimulation(enabled));
},
onContentResize({ width, height }) {
window.postMessage({
type: "content-resize",
width,
height,
}, "*");
@@ -106,50 +113,41 @@ let App = createClass({
onUpdateDeviceDisplayed(device, deviceType, displayed) {
this.props.dispatch(updateDeviceDisplayed(device, deviceType, displayed));
},
onUpdateDeviceModalOpen(isOpen) {
this.props.dispatch(updateDeviceModalOpen(isOpen));
},
- onUpdateTouchSimulation(isEnabled) {
- window.postMessage({
- type: "update-touch-simulation",
- enabled: isEnabled,
- }, "*");
-
- this.props.dispatch(updateTouchSimulationEnabled(isEnabled));
- },
-
render() {
let {
devices,
displayPixelRatio,
location,
networkThrottling,
screenshot,
touchSimulation,
viewports,
} = this.props;
let {
onBrowserMounted,
+ onChangeDevice,
onChangeNetworkThrottling,
- onChangeViewportDevice,
- onChangeViewportPixelRatio,
+ onChangePixelRatio,
+ onChangeTouchSimulation,
onContentResize,
onDeviceListUpdate,
onExit,
onResizeViewport,
onRotateViewport,
onScreenshot,
onUpdateDeviceDisplayed,
onUpdateDeviceModalOpen,
- onUpdateTouchSimulation,
} = this;
let selectedDevice = "";
let selectedPixelRatio = { value: 0 };
if (viewports.length) {
selectedDevice = viewports[0].device;
selectedPixelRatio = viewports[0].pixelRatio;
@@ -163,28 +161,28 @@ let App = createClass({
devices,
displayPixelRatio,
networkThrottling,
screenshot,
selectedDevice,
selectedPixelRatio,
touchSimulation,
onChangeNetworkThrottling,
- onChangeViewportPixelRatio,
+ onChangePixelRatio,
+ onChangeTouchSimulation,
onExit,
onScreenshot,
- onUpdateTouchSimulation,
}),
Viewports({
devices,
location,
screenshot,
viewports,
onBrowserMounted,
- onChangeViewportDevice,
+ onChangeDevice,
onContentResize,
onRotateViewport,
onResizeViewport,
onUpdateDeviceModalOpen,
}),
DeviceModal({
devices,
onDeviceListUpdate,
--- a/devtools/client/responsive.html/components/device-selector.js
+++ b/devtools/client/responsive.html/components/device-selector.js
@@ -12,40 +12,40 @@ const Types = require("../types");
const OPEN_DEVICE_MODAL_VALUE = "OPEN_DEVICE_MODAL";
module.exports = createClass({
displayName: "DeviceSelector",
propTypes: {
devices: PropTypes.shape(Types.devices).isRequired,
selectedDevice: PropTypes.string.isRequired,
- onChangeViewportDevice: PropTypes.func.isRequired,
+ onChangeDevice: PropTypes.func.isRequired,
onResizeViewport: PropTypes.func.isRequired,
onUpdateDeviceModalOpen: PropTypes.func.isRequired,
},
mixins: [ addons.PureRenderMixin ],
onSelectChange({ target }) {
let {
devices,
- onChangeViewportDevice,
+ onChangeDevice,
onResizeViewport,
onUpdateDeviceModalOpen,
} = this.props;
if (target.value === OPEN_DEVICE_MODAL_VALUE) {
onUpdateDeviceModalOpen(true);
return;
}
for (let type of devices.types) {
for (let device of devices[type]) {
if (device.name === target.value) {
onResizeViewport(device.width, device.height);
- onChangeViewportDevice(device);
+ onChangeDevice(device);
return;
}
}
}
},
render() {
let {
--- a/devtools/client/responsive.html/components/dpr-selector.js
+++ b/devtools/client/responsive.html/components/dpr-selector.js
@@ -32,17 +32,17 @@ const createHiddenOption = value =>
module.exports = createClass({
displayName: "DPRSelector",
propTypes: {
devices: PropTypes.shape(Types.devices).isRequired,
displayPixelRatio: Types.pixelRatio.value.isRequired,
selectedDevice: PropTypes.string.isRequired,
selectedPixelRatio: PropTypes.shape(Types.pixelRatio).isRequired,
- onChangeViewportPixelRatio: PropTypes.func.isRequired,
+ onChangePixelRatio: PropTypes.func.isRequired,
},
mixins: [ addons.PureRenderMixin ],
getInitialState() {
return {
isFocused: false
};
@@ -50,17 +50,17 @@ module.exports = createClass({
onFocusChange({type}) {
this.setState({
isFocused: type === "focus"
});
},
onSelectChange({ target }) {
- this.props.onChangeViewportPixelRatio(+target.value);
+ this.props.onChangePixelRatio(+target.value);
},
render() {
let {
devices,
displayPixelRatio,
selectedDevice,
selectedPixelRatio,
--- a/devtools/client/responsive.html/components/global-toolbar.js
+++ b/devtools/client/responsive.html/components/global-toolbar.js
@@ -19,38 +19,38 @@ module.exports = createClass({
devices: PropTypes.shape(Types.devices).isRequired,
displayPixelRatio: Types.pixelRatio.value.isRequired,
networkThrottling: PropTypes.shape(Types.networkThrottling).isRequired,
screenshot: PropTypes.shape(Types.screenshot).isRequired,
selectedDevice: PropTypes.string.isRequired,
selectedPixelRatio: PropTypes.shape(Types.pixelRatio).isRequired,
touchSimulation: PropTypes.shape(Types.touchSimulation).isRequired,
onChangeNetworkThrottling: PropTypes.func.isRequired,
- onChangeViewportPixelRatio: PropTypes.func.isRequired,
+ onChangePixelRatio: PropTypes.func.isRequired,
+ onChangeTouchSimulation: PropTypes.func.isRequired,
onExit: PropTypes.func.isRequired,
onScreenshot: PropTypes.func.isRequired,
- onUpdateTouchSimulation: PropTypes.func.isRequired,
},
mixins: [ addons.PureRenderMixin ],
render() {
let {
devices,
displayPixelRatio,
networkThrottling,
screenshot,
selectedDevice,
selectedPixelRatio,
touchSimulation,
onChangeNetworkThrottling,
- onChangeViewportPixelRatio,
+ onChangePixelRatio,
+ onChangeTouchSimulation,
onExit,
onScreenshot,
- onUpdateTouchSimulation
} = this.props;
let touchButtonClass = "toolbar-button devtools-button";
if (touchSimulation.enabled) {
touchButtonClass += " active";
}
return dom.header(
@@ -68,24 +68,24 @@ module.exports = createClass({
networkThrottling,
onChangeNetworkThrottling,
}),
DPRSelector({
devices,
displayPixelRatio,
selectedDevice,
selectedPixelRatio,
- onChangeViewportPixelRatio,
+ onChangePixelRatio,
}),
dom.button({
id: "global-touch-simulation-button",
className: touchButtonClass,
title: (touchSimulation.enabled ?
getStr("responsive.disableTouch") : getStr("responsive.enableTouch")),
- onClick: () => onUpdateTouchSimulation(!touchSimulation.enabled),
+ onClick: () => onChangeTouchSimulation(!touchSimulation.enabled),
}),
dom.button({
id: "global-screenshot-button",
className: "toolbar-button devtools-button",
title: getStr("responsive.screenshot"),
onClick: onScreenshot,
disabled: screenshot.isCapturing,
}),
--- a/devtools/client/responsive.html/components/resizable-viewport.js
+++ b/devtools/client/responsive.html/components/resizable-viewport.js
@@ -23,17 +23,17 @@ module.exports = createClass({
propTypes: {
devices: PropTypes.shape(Types.devices).isRequired,
location: Types.location.isRequired,
screenshot: PropTypes.shape(Types.screenshot).isRequired,
swapAfterMount: PropTypes.bool.isRequired,
viewport: PropTypes.shape(Types.viewport).isRequired,
onBrowserMounted: PropTypes.func.isRequired,
- onChangeViewportDevice: PropTypes.func.isRequired,
+ onChangeDevice: PropTypes.func.isRequired,
onContentResize: PropTypes.func.isRequired,
onResizeViewport: PropTypes.func.isRequired,
onRotateViewport: PropTypes.func.isRequired,
onUpdateDeviceModalOpen: PropTypes.func.isRequired,
},
getInitialState() {
return {
@@ -104,33 +104,33 @@ module.exports = createClass({
lastClientY = clientY;
}
// Update the viewport store with the new width and height.
this.props.onResizeViewport(width, height);
// Change the device selector back to an unselected device
// TODO: Bug 1313140: We should avoid calling this for every resize event, since it
// triggers RDP calls each time.
- this.props.onChangeViewportDevice({ name: "" });
+ this.props.onChangeDevice({ name: "" });
this.setState({
lastClientX,
lastClientY
});
},
render() {
let {
devices,
location,
screenshot,
swapAfterMount,
viewport,
onBrowserMounted,
- onChangeViewportDevice,
+ onChangeDevice,
onContentResize,
onResizeViewport,
onRotateViewport,
onUpdateDeviceModalOpen,
} = this.props;
let resizeHandleClass = "viewport-resize-handle";
if (screenshot.isCapturing) {
@@ -144,17 +144,17 @@ module.exports = createClass({
return dom.div(
{
className: "resizable-viewport",
},
ViewportToolbar({
devices,
selectedDevice: viewport.device,
- onChangeViewportDevice,
+ onChangeDevice,
onResizeViewport,
onRotateViewport,
onUpdateDeviceModalOpen,
}),
dom.div(
{
className: contentClass,
style: {
--- a/devtools/client/responsive.html/components/viewport-dimension.js
+++ b/devtools/client/responsive.html/components/viewport-dimension.js
@@ -10,17 +10,17 @@ const { DOM: dom, createClass, PropTypes
const Constants = require("../constants");
const Types = require("../types");
module.exports = createClass({
displayName: "ViewportDimension",
propTypes: {
viewport: PropTypes.shape(Types.viewport).isRequired,
- onChangeViewportDevice: PropTypes.func.isRequired,
+ onChangeDevice: PropTypes.func.isRequired,
onResizeViewport: PropTypes.func.isRequired,
},
getInitialState() {
let { width, height } = this.props.viewport;
return {
width,
@@ -109,17 +109,17 @@ module.exports = createClass({
height,
isInvalid: false,
});
return;
}
// Change the device selector back to an unselected device
- this.props.onChangeViewportDevice({ name: "" });
+ this.props.onChangeDevice({ name: "" });
this.props.onResizeViewport(parseInt(this.state.width, 10),
parseInt(this.state.height, 10));
},
render() {
let editableClass = "viewport-dimension-editable";
let inputClass = "viewport-dimension-input";
--- a/devtools/client/responsive.html/components/viewport-toolbar.js
+++ b/devtools/client/responsive.html/components/viewport-toolbar.js
@@ -12,42 +12,42 @@ const Types = require("../types");
const DeviceSelector = createFactory(require("./device-selector"));
module.exports = createClass({
displayName: "ViewportToolbar",
propTypes: {
devices: PropTypes.shape(Types.devices).isRequired,
selectedDevice: PropTypes.string.isRequired,
- onChangeViewportDevice: PropTypes.func.isRequired,
+ onChangeDevice: PropTypes.func.isRequired,
onResizeViewport: PropTypes.func.isRequired,
onRotateViewport: PropTypes.func.isRequired,
onUpdateDeviceModalOpen: PropTypes.func.isRequired,
},
mixins: [ addons.PureRenderMixin ],
render() {
let {
devices,
selectedDevice,
- onChangeViewportDevice,
+ onChangeDevice,
onResizeViewport,
onRotateViewport,
onUpdateDeviceModalOpen,
} = this.props;
return dom.div(
{
className: "viewport-toolbar container",
},
DeviceSelector({
devices,
selectedDevice,
- onChangeViewportDevice,
+ onChangeDevice,
onResizeViewport,
onUpdateDeviceModalOpen,
}),
dom.button({
className: "viewport-rotate-button toolbar-button devtools-button",
onClick: onRotateViewport,
title: getStr("responsive.rotate"),
})
--- a/devtools/client/responsive.html/components/viewport.js
+++ b/devtools/client/responsive.html/components/viewport.js
@@ -17,30 +17,30 @@ module.exports = createClass({
propTypes: {
devices: PropTypes.shape(Types.devices).isRequired,
location: Types.location.isRequired,
screenshot: PropTypes.shape(Types.screenshot).isRequired,
swapAfterMount: PropTypes.bool.isRequired,
viewport: PropTypes.shape(Types.viewport).isRequired,
onBrowserMounted: PropTypes.func.isRequired,
- onChangeViewportDevice: PropTypes.func.isRequired,
+ onChangeDevice: PropTypes.func.isRequired,
onContentResize: PropTypes.func.isRequired,
onResizeViewport: PropTypes.func.isRequired,
onRotateViewport: PropTypes.func.isRequired,
onUpdateDeviceModalOpen: PropTypes.func.isRequired,
},
- onChangeViewportDevice(device) {
+ onChangeDevice(device) {
let {
viewport,
- onChangeViewportDevice,
+ onChangeDevice,
} = this.props;
- onChangeViewportDevice(viewport.id, device);
+ onChangeDevice(viewport.id, device);
},
onResizeViewport(width, height) {
let {
viewport,
onResizeViewport,
} = this.props;
@@ -64,38 +64,38 @@ module.exports = createClass({
swapAfterMount,
viewport,
onBrowserMounted,
onContentResize,
onUpdateDeviceModalOpen,
} = this.props;
let {
- onChangeViewportDevice,
+ onChangeDevice,
onRotateViewport,
onResizeViewport,
} = this;
return dom.div(
{
className: "viewport",
},
ViewportDimension({
viewport,
- onChangeViewportDevice,
+ onChangeDevice,
onResizeViewport,
}),
ResizableViewport({
devices,
location,
screenshot,
swapAfterMount,
viewport,
onBrowserMounted,
- onChangeViewportDevice,
+ onChangeDevice,
onContentResize,
onResizeViewport,
onRotateViewport,
onUpdateDeviceModalOpen,
})
);
},
--- a/devtools/client/responsive.html/components/viewports.js
+++ b/devtools/client/responsive.html/components/viewports.js
@@ -15,31 +15,31 @@ module.exports = createClass({
displayName: "Viewports",
propTypes: {
devices: PropTypes.shape(Types.devices).isRequired,
location: Types.location.isRequired,
screenshot: PropTypes.shape(Types.screenshot).isRequired,
viewports: PropTypes.arrayOf(PropTypes.shape(Types.viewport)).isRequired,
onBrowserMounted: PropTypes.func.isRequired,
- onChangeViewportDevice: PropTypes.func.isRequired,
+ onChangeDevice: PropTypes.func.isRequired,
onContentResize: PropTypes.func.isRequired,
onResizeViewport: PropTypes.func.isRequired,
onRotateViewport: PropTypes.func.isRequired,
onUpdateDeviceModalOpen: PropTypes.func.isRequired,
},
render() {
let {
devices,
location,
screenshot,
viewports,
onBrowserMounted,
- onChangeViewportDevice,
+ onChangeDevice,
onContentResize,
onResizeViewport,
onRotateViewport,
onUpdateDeviceModalOpen,
} = this.props;
return dom.div(
{
@@ -49,17 +49,17 @@ module.exports = createClass({
return Viewport({
key: viewport.id,
devices,
location,
screenshot,
swapAfterMount: i == 0,
viewport,
onBrowserMounted,
- onChangeViewportDevice,
+ onChangeDevice,
onContentResize,
onResizeViewport,
onRotateViewport,
onUpdateDeviceModalOpen,
});
})
);
},
--- a/devtools/client/responsive.html/manager.js
+++ b/devtools/client/responsive.html/manager.js
@@ -444,71 +444,76 @@ ResponsiveUI.prototype = {
},
handleMessage(event) {
if (event.origin !== "chrome://devtools") {
return;
}
switch (event.data.type) {
+ case "change-device":
+ this.onChangeDevice(event);
+ break;
case "change-network-throtting":
this.onChangeNetworkThrottling(event);
break;
- case "change-viewport-device":
- this.onChangeViewportDevice(event);
+ case "change-pixel-ratio":
+ this.onChangePixelRatio(event);
break;
- case "change-viewport-pixel-ratio":
- this.updateDPPX(event.data.pixelRatio);
+ case "change-touch-simulation":
+ this.onChangeTouchSimulation(event);
break;
case "content-resize":
this.onContentResize(event);
break;
case "exit":
this.onExit();
break;
- case "update-touch-simulation":
- this.onUpdateTouchSimulation(event);
- break;
}
},
+ onChangeDevice: Task.async(function* (event) {
+ let { userAgent, pixelRatio, touch } = event.data.device;
+ yield this.updateUserAgent(userAgent);
+ yield this.updateDPPX(pixelRatio);
+ yield this.updateTouchSimulation(touch);
+ // Used by tests
+ this.emit("device-changed");
+ }),
+
onChangeNetworkThrottling: Task.async(function* (event) {
let { enabled, profile } = event.data;
yield this.updateNetworkThrottling(enabled, profile);
// Used by tests
this.emit("network-throttling-changed");
}),
- onChangeViewportDevice: Task.async(function* (event) {
- let { userAgent, pixelRatio, touch } = event.data.device;
- yield this.updateUserAgent(userAgent);
- yield this.updateDPPX(pixelRatio);
- yield this.updateTouchSimulation(touch);
- // Used by tests
- this.emit("viewport-device-changed");
- }),
+ onChangePixelRatio(event) {
+ let { pixelRatio } = event.data;
+ this.updateDPPX(pixelRatio);
+ },
+
+ onChangeTouchSimulation(event) {
+ let { enabled } = event.data;
+ this.updateTouchSimulation(enabled);
+ },
onContentResize(event) {
let { width, height } = event.data;
this.emit("content-resize", {
width,
height,
});
},
onExit() {
let { browserWindow, tab } = this;
ResponsiveUIManager.closeIfNeeded(browserWindow, tab);
},
- onUpdateTouchSimulation(event) {
- let { enabled } = event.data;
- this.updateTouchSimulation(enabled);
- },
-
updateDPPX: Task.async(function* (dppx) {
if (!dppx) {
yield this.emulationFront.clearDPPXOverride();
return;
}
yield this.emulationFront.setDPPXOverride(dppx);
}),
--- a/devtools/client/responsive.html/reducers/touch-simulation.js
+++ b/devtools/client/responsive.html/reducers/touch-simulation.js
@@ -1,23 +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 {
- UPDATE_TOUCH_SIMULATION_ENABLED,
+ CHANGE_TOUCH_SIMULATION,
} = require("../actions/index");
-const INITIAL_TOUCH_SIMULATION = { enabled: false };
+const INITIAL_TOUCH_SIMULATION = {
+ enabled: false,
+};
let reducers = {
- [UPDATE_TOUCH_SIMULATION_ENABLED](touchSimulation, { enabled }) {
+ [CHANGE_TOUCH_SIMULATION](touchSimulation, { enabled }) {
return Object.assign({}, touchSimulation, {
enabled,
});
},
};
module.exports = function (touchSimulation = INITIAL_TOUCH_SIMULATION, action) {
--- a/devtools/client/responsive.html/reducers/viewports.js
+++ b/devtools/client/responsive.html/reducers/viewports.js
@@ -2,17 +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 {
ADD_VIEWPORT,
CHANGE_DEVICE,
- CHANGE_VIEWPORT_PIXEL_RATIO,
+ CHANGE_PIXEL_RATIO,
RESIZE_VIEWPORT,
ROTATE_VIEWPORT,
} = require("../actions/index");
let nextViewportId = 0;
const INITIAL_VIEWPORTS = [];
const INITIAL_VIEWPORT = {
@@ -42,17 +42,17 @@ let reducers = {
}
return Object.assign({}, viewport, {
device,
});
});
},
- [CHANGE_VIEWPORT_PIXEL_RATIO](viewports, { id, pixelRatio }) {
+ [CHANGE_PIXEL_RATIO](viewports, { id, pixelRatio }) {
return viewports.map(viewport => {
if (viewport.id !== id) {
return viewport;
}
return Object.assign({}, viewport, {
pixelRatio: {
value: pixelRatio
--- a/devtools/client/responsive.html/test/browser/browser_device_change.js
+++ b/devtools/client/responsive.html/test/browser/browser_device_change.js
@@ -45,17 +45,17 @@ addRDMTask(TEST_URL, function* ({ ui, ma
// Test device with custom properties
yield selectDevice(ui, "Fake Phone RDM Test");
yield waitForViewportResizeTo(ui, testDevice.width, testDevice.height);
yield testUserAgent(ui, testDevice.userAgent);
yield testDevicePixelRatio(ui, testDevice.pixelRatio);
yield testTouchEventsOverride(ui, true);
// Test resetting device when resizing viewport
- let deviceChanged = once(ui, "viewport-device-changed");
+ let deviceChanged = once(ui, "device-changed");
yield testViewportResize(ui, ".viewport-vertical-resize-handle",
[-10, -10], [testDevice.width, testDevice.height - 10], [0, -10], ui);
yield deviceChanged;
yield testUserAgent(ui, DEFAULT_UA);
yield testDevicePixelRatio(ui, DEFAULT_DPPX);
yield testTouchEventsOverride(ui, false);
testViewportSelectLabel(ui, "no device selected");
--- a/devtools/client/responsive.html/test/browser/head.js
+++ b/devtools/client/responsive.html/test/browser/head.js
@@ -208,17 +208,17 @@ function dragElementBy(selector, x, y, w
return rect;
}
function* testViewportResize(ui, selector, moveBy,
expectedViewportSize, expectedHandleMove) {
let win = ui.toolWindow;
- let changed = once(ui, "viewport-device-changed");
+ let changed = once(ui, "device-changed");
let resized = waitForViewportResizeTo(ui, ...expectedViewportSize);
let startRect = dragElementBy(selector, ...moveBy, win);
yield resized;
yield changed;
let endRect = getElRect(selector, win);
is(endRect.left - startRect.left, expectedHandleMove[0],
`The x move of ${selector} is as expected`);
@@ -267,17 +267,17 @@ function changeSelectValue({ toolWindow
}, { once: true });
select.value = value;
select.dispatchEvent(event);
});
}
const selectDevice = (ui, value) => Promise.all([
- once(ui, "viewport-device-changed"),
+ once(ui, "device-changed"),
changeSelectValue(ui, ".viewport-device-selector", value)
]);
const selectDPR = (ui, value) =>
changeSelectValue(ui, "#global-dpr-selector > select", value);
const selectNetworkThrottling = (ui, value) => Promise.all([
once(ui, "network-throttling-changed"),
rename from devtools/client/responsive.html/test/unit/test_change_viewport_device.js
rename to devtools/client/responsive.html/test/unit/test_change_device.js
new file mode 100644
--- /dev/null
+++ b/devtools/client/responsive.html/test/unit/test_change_pixel_ratio.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 viewport pixel ratio.
+
+const { addViewport, changePixelRatio } =
+ require("devtools/client/responsive.html/actions/viewports");
+const NEW_PIXEL_RATIO = 5.5;
+
+add_task(function* () {
+ let store = Store();
+ const { getState, dispatch } = store;
+
+ dispatch(addViewport());
+ dispatch(changePixelRatio(0, NEW_PIXEL_RATIO));
+
+ let viewport = getState().viewports[0];
+ equal(viewport.pixelRatio.value, NEW_PIXEL_RATIO,
+ `Viewport's pixel ratio changed to ${NEW_PIXEL_RATIO}`);
+});
deleted file mode 100644
--- a/devtools/client/responsive.html/test/unit/test_change_viewport_pixel_ratio.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test changing the viewport pixel ratio.
-
-const { addViewport, changeViewportPixelRatio } =
- require("devtools/client/responsive.html/actions/viewports");
-const NEW_PIXEL_RATIO = 5.5;
-
-add_task(function* () {
- let store = Store();
- const { getState, dispatch } = store;
-
- dispatch(addViewport());
- dispatch(changeViewportPixelRatio(0, NEW_PIXEL_RATIO));
-
- let viewport = getState().viewports[0];
- equal(viewport.pixelRatio.value, NEW_PIXEL_RATIO,
- `Viewport's pixel ratio changed to ${NEW_PIXEL_RATIO}`);
-});
--- 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
@@ -1,23 +1,23 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test updating the touch simulation `enabled` property
const {
- updateTouchSimulationEnabled,
+ changeTouchSimulation,
} = require("devtools/client/responsive.html/actions/touch-simulation");
add_task(function* () {
let store = Store();
const { getState, dispatch } = store;
ok(!getState().touchSimulation.enabled,
"Touch simulation is disabled by default.");
- dispatch(updateTouchSimulationEnabled(true));
+ dispatch(changeTouchSimulation(true));
ok(getState().touchSimulation.enabled,
"Touch simulation is enabled.");
});
--- a/devtools/client/responsive.html/test/unit/xpcshell.ini
+++ b/devtools/client/responsive.html/test/unit/xpcshell.ini
@@ -1,17 +1,17 @@
[DEFAULT]
tags = devtools
head = head.js ../../../framework/test/shared-redux-head.js
firefox-appdir = browser
[test_add_device.js]
[test_add_device_type.js]
[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_viewport_device.js]
-[test_change_viewport_pixel_ratio.js]
+[test_change_pixel_ratio.js]
[test_resize_viewport.js]
[test_rotate_viewport.js]
[test_update_device_displayed.js]
[test_update_touch_simulation_enabled.js]
