Bug 1319950 - Use consistent naming with viewport properties. r=gl

Use "change" instead of "update" terminology with viewport properties.
Remove redundant "viewport" word from viewport changes.

MozReview-Commit-ID: HSFLiZyTVYy

--HG--
rename : devtools/client/responsive.html/test/unit/test_change_viewport_device.js => devtools/client/responsive.html/test/unit/test_change_device.js
extra : rebase_source : ddf227119edc0e022d586cf46b448e1891d059aa

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

@@ -39,7 +39,10 @@ createEnum([
   // 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",
@@ -68,7 +71,4 @@ createEnum([
   // Update the device modal open state.
   "UPDATE_DEVICE_MODAL_OPEN",
 
-  // Update the touch simulation enabled state.
-  "UPDATE_TOUCH_SIMULATION_ENABLED",
-
 ], module.exports);

devtools/client/responsive.html/actions/touch-simulation.js

@@ -7,14 +7,14 @@
 "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,
     };
   },

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

@@ -7,7 +7,7 @@
 const {
   ADD_VIEWPORT,
   CHANGE_DEVICE,
-  CHANGE_VIEWPORT_PIXEL_RATIO,
+  CHANGE_PIXEL_RATIO,
   RESIZE_VIEWPORT,
   ROTATE_VIEWPORT
 } = require("./index");
@@ -37,9 +37,9 @@ module.exports = {
   /**
    * 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,
     };

devtools/client/responsive.html/app.js

@@ -17,10 +17,10 @@ const {
 } = 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");
@@ -47,6 +47,16 @@ let App = createClass({
     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",
@@ -56,23 +66,20 @@ let App = createClass({
     this.props.dispatch(changeNetworkThrottling(enabled, profile));
   },
 
-  onChangeViewportDevice(id, device) {
+  onChangePixelRatio(pixelRatio) {
     window.postMessage({
-      type: "change-viewport-device",
+      type: "change-pixel-ratio",
-      device,
-    }, "*");
-    this.props.dispatch(changeDevice(id, device.name));
-    this.props.dispatch(updateTouchSimulationEnabled(device.touch));
-    this.props.dispatch(changeViewportPixelRatio(id, device.pixelRatio));
-  },
-
-  onChangeViewportPixelRatio(pixelRatio) {
-    window.postMessage({
-      type: "change-viewport-pixel-ratio",
       pixelRatio,
     }, "*");
+    this.props.dispatch(changePixelRatio(0, pixelRatio));
+  },
 
-    this.props.dispatch(changeViewportPixelRatio(0, pixelRatio));
+  onChangeTouchSimulation(enabled) {
+    window.postMessage({
+      type: "change-touch-simulation",
+      enabled,
+    }, "*");
+    this.props.dispatch(changeTouchSimulation(enabled));
   },
 
   onContentResize({ width, height }) {
@@ -111,15 +118,6 @@ let App = createClass({
     this.props.dispatch(updateDeviceModalOpen(isOpen));
   },
 
-  onUpdateTouchSimulation(isEnabled) {
-    window.postMessage({
-      type: "update-touch-simulation",
-      enabled: isEnabled,
-    }, "*");
-
-    this.props.dispatch(updateTouchSimulationEnabled(isEnabled));
-  },
-
   render() {
     let {
       devices,
@@ -133,9 +131,10 @@ let App = createClass({
 
     let {
       onBrowserMounted,
+      onChangeDevice,
       onChangeNetworkThrottling,
-      onChangeViewportDevice,
+      onChangePixelRatio,
-      onChangeViewportPixelRatio,
+      onChangeTouchSimulation,
       onContentResize,
       onDeviceListUpdate,
       onExit,
@@ -144,7 +143,6 @@ let App = createClass({
       onScreenshot,
       onUpdateDeviceDisplayed,
       onUpdateDeviceModalOpen,
-      onUpdateTouchSimulation,
     } = this;
 
     let selectedDevice = "";
@@ -168,10 +166,10 @@ let App = createClass({
         selectedPixelRatio,
         touchSimulation,
         onChangeNetworkThrottling,
-        onChangeViewportPixelRatio,
+        onChangePixelRatio,
+        onChangeTouchSimulation,
         onExit,
         onScreenshot,
-        onUpdateTouchSimulation,
       }),
       Viewports({
         devices,
@@ -179,7 +177,7 @@ let App = createClass({
         screenshot,
         viewports,
         onBrowserMounted,
-        onChangeViewportDevice,
+        onChangeDevice,
         onContentResize,
         onRotateViewport,
         onResizeViewport,

devtools/client/responsive.html/components/device-selector.js

@@ -17,7 +17,7 @@ module.exports = createClass({
   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,
   },
@@ -27,7 +27,7 @@ module.exports = createClass({
   onSelectChange({ target }) {
     let {
       devices,
-      onChangeViewportDevice,
+      onChangeDevice,
       onResizeViewport,
       onUpdateDeviceModalOpen,
     } = this.props;
@@ -40,7 +40,7 @@ module.exports = createClass({
       for (let device of devices[type]) {
         if (device.name === target.value) {
           onResizeViewport(device.width, device.height);
-          onChangeViewportDevice(device);
+          onChangeDevice(device);
           return;
         }
       }

devtools/client/responsive.html/components/dpr-selector.js

@@ -37,7 +37,7 @@ module.exports = createClass({
     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 ],
@@ -55,7 +55,7 @@ module.exports = createClass({
   },
 
   onSelectChange({ target }) {
-    this.props.onChangeViewportPixelRatio(+target.value);
+    this.props.onChangePixelRatio(+target.value);
   },
 
   render() {

devtools/client/responsive.html/components/global-toolbar.js

@@ -24,10 +24,10 @@ module.exports = createClass({
     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 ],
@@ -42,10 +42,10 @@ module.exports = createClass({
       selectedPixelRatio,
       touchSimulation,
       onChangeNetworkThrottling,
-      onChangeViewportPixelRatio,
+      onChangePixelRatio,
+      onChangeTouchSimulation,
       onExit,
       onScreenshot,
-      onUpdateTouchSimulation
     } = this.props;
 
     let touchButtonClass = "toolbar-button devtools-button";
@@ -73,14 +73,14 @@ module.exports = createClass({
         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",

devtools/client/responsive.html/components/resizable-viewport.js

@@ -28,7 +28,7 @@ module.exports = createClass({
     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,
@@ -109,7 +109,7 @@ module.exports = createClass({
     // 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,
@@ -125,7 +125,7 @@ module.exports = createClass({
       swapAfterMount,
       viewport,
       onBrowserMounted,
-      onChangeViewportDevice,
+      onChangeDevice,
       onContentResize,
       onResizeViewport,
       onRotateViewport,
@@ -149,7 +149,7 @@ module.exports = createClass({
       ViewportToolbar({
         devices,
         selectedDevice: viewport.device,
-        onChangeViewportDevice,
+        onChangeDevice,
         onResizeViewport,
         onRotateViewport,
         onUpdateDeviceModalOpen,

devtools/client/responsive.html/components/viewport-dimension.js

@@ -15,7 +15,7 @@ module.exports = createClass({
 
   propTypes: {
     viewport: PropTypes.shape(Types.viewport).isRequired,
-    onChangeViewportDevice: PropTypes.func.isRequired,
+    onChangeDevice: PropTypes.func.isRequired,
     onResizeViewport: PropTypes.func.isRequired,
   },
 
@@ -114,7 +114,7 @@ module.exports = createClass({
     }
 
     // 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));
   },

devtools/client/responsive.html/components/viewport-toolbar.js

@@ -17,7 +17,7 @@ module.exports = createClass({
   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,
@@ -29,7 +29,7 @@ module.exports = createClass({
     let {
       devices,
       selectedDevice,
-      onChangeViewportDevice,
+      onChangeDevice,
       onResizeViewport,
       onRotateViewport,
       onUpdateDeviceModalOpen,
@@ -42,7 +42,7 @@ module.exports = createClass({
       DeviceSelector({
         devices,
         selectedDevice,
-        onChangeViewportDevice,
+        onChangeDevice,
         onResizeViewport,
         onUpdateDeviceModalOpen,
       }),

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

@@ -22,20 +22,20 @@ module.exports = createClass({
     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) {
@@ -69,7 +69,7 @@ module.exports = createClass({
     } = this.props;
 
     let {
-      onChangeViewportDevice,
+      onChangeDevice,
       onRotateViewport,
       onResizeViewport,
     } = this;
@@ -80,7 +80,7 @@ module.exports = createClass({
       },
       ViewportDimension({
         viewport,
-        onChangeViewportDevice,
+        onChangeDevice,
         onResizeViewport,
       }),
       ResizableViewport({
@@ -90,7 +90,7 @@ module.exports = createClass({
         swapAfterMount,
         viewport,
         onBrowserMounted,
-        onChangeViewportDevice,
+        onChangeDevice,
         onContentResize,
         onResizeViewport,
         onRotateViewport,

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

@@ -20,7 +20,7 @@ module.exports = createClass({
     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,
@@ -34,7 +34,7 @@ module.exports = createClass({
       screenshot,
       viewports,
       onBrowserMounted,
-      onChangeViewportDevice,
+      onChangeDevice,
       onContentResize,
       onResizeViewport,
       onRotateViewport,
@@ -54,7 +54,7 @@ module.exports = createClass({
           swapAfterMount: i == 0,
           viewport,
           onBrowserMounted,
-          onChangeViewportDevice,
+          onChangeDevice,
           onContentResize,
           onResizeViewport,
           onRotateViewport,

devtools/client/responsive.html/manager.js

@@ -449,14 +449,17 @@ ResponsiveUI.prototype = {
     }
 
     switch (event.data.type) {
+      case "change-device":
+        this.onChangeDevice(event);
+        break;
       case "change-network-throtting":
         this.onChangeNetworkThrottling(event);
         break;
-      case "change-viewport-device":
+      case "change-pixel-ratio":
-        this.onChangeViewportDevice(event);
+        this.onChangePixelRatio(event);
         break;
-      case "change-viewport-pixel-ratio":
+      case "change-touch-simulation":
-        this.updateDPPX(event.data.pixelRatio);
+        this.onChangeTouchSimulation(event);
         break;
       case "content-resize":
         this.onContentResize(event);
@@ -464,12 +467,18 @@ ResponsiveUI.prototype = {
       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);
@@ -477,14 +486,15 @@ ResponsiveUI.prototype = {
     this.emit("network-throttling-changed");
   }),
 
-  onChangeViewportDevice: Task.async(function* (event) {
+  onChangePixelRatio(event) {
-    let { userAgent, pixelRatio, touch } = event.data.device;
+    let { pixelRatio } = event.data;
-    yield this.updateUserAgent(userAgent);
+    this.updateDPPX(pixelRatio);
-    yield this.updateDPPX(pixelRatio);
+  },
-    yield this.updateTouchSimulation(touch);
+
-    // Used by tests
+  onChangeTouchSimulation(event) {
-    this.emit("viewport-device-changed");
+    let { enabled } = event.data;
-  }),
+    this.updateTouchSimulation(enabled);
+  },
 
   onContentResize(event) {
     let { width, height } = event.data;
@@ -499,11 +509,6 @@ ResponsiveUI.prototype = {
     ResponsiveUIManager.closeIfNeeded(browserWindow, tab);
   },
 
-  onUpdateTouchSimulation(event) {
-    let { enabled } = event.data;
-    this.updateTouchSimulation(enabled);
-  },
-
   updateDPPX: Task.async(function* (dppx) {
     if (!dppx) {
       yield this.emulationFront.clearDPPXOverride();

devtools/client/responsive.html/reducers/touch-simulation.js

@@ -5,14 +5,16 @@
 "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,
     });

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

@@ -7,7 +7,7 @@
 const {
   ADD_VIEWPORT,
   CHANGE_DEVICE,
-  CHANGE_VIEWPORT_PIXEL_RATIO,
+  CHANGE_PIXEL_RATIO,
   RESIZE_VIEWPORT,
   ROTATE_VIEWPORT,
 } = require("../actions/index");
@@ -47,7 +47,7 @@ let reducers = {
     });
   },
 
-  [CHANGE_VIEWPORT_PIXEL_RATIO](viewports, { id, pixelRatio }) {
+  [CHANGE_PIXEL_RATIO](viewports, { id, pixelRatio }) {
     return viewports.map(viewport => {
       if (viewport.id !== id) {
         return viewport;

devtools/client/responsive.html/test/browser/browser_device_change.js

@@ -50,7 +50,7 @@ addRDMTask(TEST_URL, function* ({ ui, manager }) {
   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;

devtools/client/responsive.html/test/browser/head.js

@@ -213,7 +213,7 @@ 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;
@@ -272,7 +272,7 @@ function changeSelectValue({ toolWindow }, selector, value) {
 }
 
 const selectDevice = (ui, value) => Promise.all([
-  once(ui, "viewport-device-changed"),
+  once(ui, "device-changed"),
   changeSelectValue(ui, ".viewport-device-selector", value)
 ]);
 

devtools/client/responsive.html/test/unit/test_change_pixel_ratio.js

@@ -5,7 +5,7 @@
 
 // Test changing the viewport pixel ratio.
 
-const { addViewport, changeViewportPixelRatio } =
+const { addViewport, changePixelRatio } =
   require("devtools/client/responsive.html/actions/viewports");
 const NEW_PIXEL_RATIO = 5.5;
 
@@ -14,7 +14,7 @@ add_task(function* () {
   const { getState, dispatch } = store;
 
   dispatch(addViewport());
-  dispatch(changeViewportPixelRatio(0, NEW_PIXEL_RATIO));
+  dispatch(changePixelRatio(0, NEW_PIXEL_RATIO));
 
   let viewport = getState().viewports[0];
   equal(viewport.pixelRatio.value, NEW_PIXEL_RATIO,

devtools/client/responsive.html/test/unit/test_update_touch_simulation_enabled.js

@@ -6,7 +6,7 @@
 // Test updating the touch simulation `enabled` property
 
 const {
-  updateTouchSimulationEnabled,
+  changeTouchSimulation,
 } = require("devtools/client/responsive.html/actions/touch-simulation");
 
 add_task(function* () {
@@ -16,7 +16,7 @@ add_task(function* () {
   ok(!getState().touchSimulation.enabled,
     "Touch simulation is disabled by default.");
 
-  dispatch(updateTouchSimulationEnabled(true));
+  dispatch(changeTouchSimulation(true));
 
   ok(getState().touchSimulation.enabled,
     "Touch simulation is enabled.");

devtools/client/responsive.html/test/unit/xpcshell.ini

@@ -6,11 +6,11 @@ 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_pixel_ratio.js]
-[test_change_viewport_pixel_ratio.js]
 [test_resize_viewport.js]
 [test_rotate_viewport.js]
 [test_update_device_displayed.js]