Bug 1572840 Part 1: Add a zoom viewport action to RDM pane. r=gl
authorBrad Werth <bwerth@mozilla.com>
Fri, 30 Aug 2019 18:44:06 +0000
changeset 554698 23feecbe07eb871cd41d849da963c7e734c40ce3
parent 554697 e147806b0a1c4943e5f5603e44b68fc8661ab2ee
child 554699 038722cc5bf49e63c2dc411788ca549bebac3eb7
push id2165
push userffxbld-merge
push dateMon, 14 Oct 2019 16:30:58 +0000
treeherdermozilla-release@0eae18af659f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1572840
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1572840 Part 1: Add a zoom viewport action to RDM pane. r=gl Differential Revision: https://phabricator.services.mozilla.com/D41463
devtools/client/responsive/actions/index.js
devtools/client/responsive/actions/viewports.js
devtools/client/responsive/reducers/viewports.js
--- a/devtools/client/responsive/actions/index.js
+++ b/devtools/client/responsive/actions/index.js
@@ -96,11 +96,14 @@ createEnum(
     // Toggles the user agent input displayed in the toolbar.
     "TOGGLE_USER_AGENT_INPUT",
 
     // Update the device display state in the device selector.
     "UPDATE_DEVICE_DISPLAYED",
 
     // Update the device modal state.
     "UPDATE_DEVICE_MODAL",
+
+    // Zoom the viewport.
+    "ZOOM_VIEWPORT",
   ],
   module.exports
 );
--- a/devtools/client/responsive/actions/viewports.js
+++ b/devtools/client/responsive/actions/viewports.js
@@ -11,16 +11,17 @@ const asyncStorage = require("devtools/s
 const {
   ADD_VIEWPORT,
   CHANGE_DEVICE,
   CHANGE_PIXEL_RATIO,
   CHANGE_VIEWPORT_ANGLE,
   REMOVE_DEVICE_ASSOCIATION,
   RESIZE_VIEWPORT,
   ROTATE_VIEWPORT,
+  ZOOM_VIEWPORT,
 } = require("./index");
 
 const { post } = require("../utils/message");
 
 module.exports = {
   /**
    * Add an additional viewport to display the document.
    */
@@ -106,9 +107,20 @@ module.exports = {
    * Rotate the viewport.
    */
   rotateViewport(id) {
     return {
       type: ROTATE_VIEWPORT,
       id,
     };
   },
+
+  /**
+   * Zoom the viewport.
+   */
+  zoomViewport(id, zoom) {
+    return {
+      type: ZOOM_VIEWPORT,
+      id,
+      zoom,
+    };
+  },
 };
--- a/devtools/client/responsive/reducers/viewports.js
+++ b/devtools/client/responsive/reducers/viewports.js
@@ -10,16 +10,17 @@ const {
   ADD_VIEWPORT,
   CHANGE_DEVICE,
   CHANGE_PIXEL_RATIO,
   CHANGE_VIEWPORT_ANGLE,
   EDIT_DEVICE,
   REMOVE_DEVICE_ASSOCIATION,
   RESIZE_VIEWPORT,
   ROTATE_VIEWPORT,
+  ZOOM_VIEWPORT,
 } = require("../actions/index");
 
 const VIEWPORT_WIDTH_PREF = "devtools.responsive.viewport.width";
 const VIEWPORT_HEIGHT_PREF = "devtools.responsive.viewport.height";
 const VIEWPORT_PIXEL_RATIO_PREF = "devtools.responsive.viewport.pixelRatio";
 const VIEWPORT_ANGLE_PREF = "devtools.responsive.viewport.angle";
 
 let nextViewportId = 0;
@@ -29,16 +30,17 @@ const INITIAL_VIEWPORT = {
   id: nextViewportId++,
   angle: Services.prefs.getIntPref(VIEWPORT_ANGLE_PREF, 0),
   device: "",
   deviceType: "",
   height: Services.prefs.getIntPref(VIEWPORT_HEIGHT_PREF, 480),
   width: Services.prefs.getIntPref(VIEWPORT_WIDTH_PREF, 320),
   pixelRatio: Services.prefs.getIntPref(VIEWPORT_PIXEL_RATIO_PREF, 0),
   userContextId: 0,
+  zoom: 1,
 };
 
 const reducers = {
   [ADD_VIEWPORT](viewports, { userContextId }) {
     // For the moment, there can be at most one viewport.
     if (viewports.length === 1) {
       return viewports;
     }
@@ -179,16 +181,33 @@ const reducers = {
 
       return {
         ...viewport,
         height,
         width,
       };
     });
   },
+
+  [ZOOM_VIEWPORT](viewports, { id, zoom }) {
+    return viewports.map(viewport => {
+      if (viewport.id !== id) {
+        return viewport;
+      }
+
+      if (!zoom) {
+        zoom = viewport.zoom;
+      }
+
+      return {
+        ...viewport,
+        zoom,
+      };
+    });
+  },
 };
 
 module.exports = function(viewports = INITIAL_VIEWPORTS, action) {
   const reducer = reducers[action.type];
   if (!reducer) {
     return viewports;
   }
   return reducer(viewports, action);