1 files changed, 212 insertions, 0 deletions
diff --git a/devtools/client/responsive/reducers/viewports.js b/devtools/client/responsive/reducers/viewports.js
new file mode 100644
index 0000000000..71ced90975
--- /dev/null
+++ b/devtools/client/responsive/reducers/viewports.js
@@ -0,0 +1,212 @@
+/* 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 {
+  ADD_VIEWPORT,
+  CHANGE_DEVICE,
+  CHANGE_PIXEL_RATIO,
+  CHANGE_VIEWPORT_ANGLE,
+  EDIT_DEVICE,
+  REMOVE_DEVICE_ASSOCIATION,
+  RESIZE_VIEWPORT,
+  ROTATE_VIEWPORT,
+  ZOOM_VIEWPORT,
+} = require("resource://devtools/client/responsive/actions/index.js");
+
+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;
+
+const INITIAL_VIEWPORTS = [];
+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;
+    }
+
+    return [
+      ...viewports,
+      {
+        ...INITIAL_VIEWPORT,
+        userContextId,
+      },
+    ];
+  },
+
+  [CHANGE_DEVICE](viewports, { id, device, deviceType }) {
+    return viewports.map(viewport => {
+      if (viewport.id !== id) {
+        return viewport;
+      }
+
+      return {
+        ...viewport,
+        device,
+        deviceType,
+      };
+    });
+  },
+
+  [CHANGE_PIXEL_RATIO](viewports, { id, pixelRatio }) {
+    return viewports.map(viewport => {
+      if (viewport.id !== id) {
+        return viewport;
+      }
+
+      Services.prefs.setIntPref(VIEWPORT_PIXEL_RATIO_PREF, pixelRatio);
+
+      return {
+        ...viewport,
+        pixelRatio,
+      };
+    });
+  },
+
+  [CHANGE_VIEWPORT_ANGLE](viewports, { id, angle }) {
+    return viewports.map(viewport => {
+      if (viewport.id !== id) {
+        return viewport;
+      }
+
+      Services.prefs.setIntPref(VIEWPORT_ANGLE_PREF, angle);
+
+      return {
+        ...viewport,
+        angle,
+      };
+    });
+  },
+
+  [EDIT_DEVICE](viewports, { viewport, newDevice, deviceType }) {
+    if (!viewport) {
+      return viewports;
+    }
+
+    return viewports.map(v => {
+      if (v.id !== viewport.id) {
+        return viewport;
+      }
+
+      Services.prefs.setIntPref(VIEWPORT_WIDTH_PREF, newDevice.width);
+      Services.prefs.setIntPref(VIEWPORT_HEIGHT_PREF, newDevice.height);
+      Services.prefs.setIntPref(
+        VIEWPORT_PIXEL_RATIO_PREF,
+        newDevice.pixelRatio
+      );
+
+      return {
+        ...viewport,
+        device: newDevice.name,
+        deviceType,
+        height: newDevice.height,
+        width: newDevice.width,
+        pixelRatio: newDevice.pixelRatio,
+        userAgent: newDevice.userAgent,
+        touch: newDevice.touch,
+      };
+    });
+  },
+
+  [REMOVE_DEVICE_ASSOCIATION](viewports, { id }) {
+    return viewports.map(viewport => {
+      if (viewport.id !== id) {
+        return viewport;
+      }
+
+      return {
+        ...viewport,
+        device: "",
+        deviceType: "",
+      };
+    });
+  },
+
+  [RESIZE_VIEWPORT](viewports, { id, width, height }) {
+    return viewports.map(viewport => {
+      if (viewport.id !== id) {
+        return viewport;
+      }
+
+      if (!height) {
+        height = viewport.height;
+      }
+
+      if (!width) {
+        width = viewport.width;
+      }
+
+      Services.prefs.setIntPref(VIEWPORT_WIDTH_PREF, width);
+      Services.prefs.setIntPref(VIEWPORT_HEIGHT_PREF, height);
+
+      return {
+        ...viewport,
+        height,
+        width,
+      };
+    });
+  },
+
+  [ROTATE_VIEWPORT](viewports, { id }) {
+    return viewports.map(viewport => {
+      if (viewport.id !== id) {
+        return viewport;
+      }
+
+      const height = viewport.width;
+      const width = viewport.height;
+
+      Services.prefs.setIntPref(VIEWPORT_WIDTH_PREF, width);
+      Services.prefs.setIntPref(VIEWPORT_HEIGHT_PREF, height);
+
+      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);
+};