Bug 1572840 Part 1: Add a zoom viewport action to RDM pane. r=gl

Differential Revision: https://phabricator.services.mozilla.com/D41463

--HG--
extra : moz-landing-system : lando

devtools/client/responsive/actions/index.js

@@ -101,6 +101,9 @@ createEnum(
 
     // Update the device modal state.
     "UPDATE_DEVICE_MODAL",
+
+    // Zoom the viewport.
+    "ZOOM_VIEWPORT",
   ],
   module.exports
 );

devtools/client/responsive/actions/viewports.js

@@ -16,6 +16,7 @@ const {
   REMOVE_DEVICE_ASSOCIATION,
   RESIZE_VIEWPORT,
   ROTATE_VIEWPORT,
+  ZOOM_VIEWPORT,
 } = require("./index");
 
 const { post } = require("../utils/message");
@@ -111,4 +112,15 @@ module.exports = {
       id,
     };
   },
+
+  /**
+   * Zoom the viewport.
+   */
+  zoomViewport(id, zoom) {
+    return {
+      type: ZOOM_VIEWPORT,
+      id,
+      zoom,
+    };
+  },
 };

devtools/client/responsive/reducers/viewports.js

@@ -15,6 +15,7 @@ const {
   REMOVE_DEVICE_ASSOCIATION,
   RESIZE_VIEWPORT,
   ROTATE_VIEWPORT,
+  ZOOM_VIEWPORT,
 } = require("../actions/index");
 
 const VIEWPORT_WIDTH_PREF = "devtools.responsive.viewport.width";
@@ -34,6 +35,7 @@ const INITIAL_VIEWPORT = {
   width: Services.prefs.getIntPref(VIEWPORT_WIDTH_PREF, 320),
   pixelRatio: Services.prefs.getIntPref(VIEWPORT_PIXEL_RATIO_PREF, 0),
   userContextId: 0,
+  zoom: 1,
 };
 
 const reducers = {
@@ -184,6 +186,23 @@ const reducers = {
       };
     });
   },
+
+  [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) {