summaryrefslogtreecommitdiffstats
path: root/devtools/client/responsive/reducers
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /devtools/client/responsive/reducers
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/client/responsive/reducers')
-rw-r--r--devtools/client/responsive/reducers/devices.js124
-rw-r--r--devtools/client/responsive/reducers/moz.build12
-rw-r--r--devtools/client/responsive/reducers/screenshot.js38
-rw-r--r--devtools/client/responsive/reducers/ui.js135
-rw-r--r--devtools/client/responsive/reducers/viewports.js212
5 files changed, 521 insertions, 0 deletions
diff --git a/devtools/client/responsive/reducers/devices.js b/devtools/client/responsive/reducers/devices.js
new file mode 100644
index 0000000000..98f0602175
--- /dev/null
+++ b/devtools/client/responsive/reducers/devices.js
@@ -0,0 +1,124 @@
+/* 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_DEVICE,
+ ADD_DEVICE_TYPE,
+ EDIT_DEVICE,
+ LOAD_DEVICE_LIST_START,
+ LOAD_DEVICE_LIST_ERROR,
+ LOAD_DEVICE_LIST_END,
+ REMOVE_DEVICE,
+ UPDATE_DEVICE_DISPLAYED,
+ UPDATE_DEVICE_MODAL,
+} = require("resource://devtools/client/responsive/actions/index.js");
+
+const Types = require("resource://devtools/client/responsive/types.js");
+
+const INITIAL_DEVICES = {
+ isModalOpen: false,
+ listState: Types.loadableState.INITIALIZED,
+ modalOpenedFromViewport: null,
+ types: [],
+};
+
+const reducers = {
+ [ADD_DEVICE](devices, { device, deviceType }) {
+ return {
+ ...devices,
+ [deviceType]: [...devices[deviceType], device],
+ };
+ },
+
+ [ADD_DEVICE_TYPE](devices, { deviceType }) {
+ return {
+ ...devices,
+ types: [...devices.types, deviceType],
+ [deviceType]: [],
+ };
+ },
+
+ [EDIT_DEVICE](devices, { oldDevice, newDevice, deviceType }) {
+ const index = devices[deviceType].indexOf(oldDevice);
+ if (index < 0) {
+ return devices;
+ }
+
+ devices[deviceType].splice(index, 1, newDevice);
+
+ return {
+ ...devices,
+ [deviceType]: [...devices[deviceType]],
+ };
+ },
+
+ [UPDATE_DEVICE_DISPLAYED](devices, { device, deviceType, displayed }) {
+ const newDevices = devices[deviceType].map(d => {
+ if (d == device) {
+ d.displayed = displayed;
+ }
+
+ return d;
+ });
+
+ return {
+ ...devices,
+ [deviceType]: newDevices,
+ };
+ },
+
+ [LOAD_DEVICE_LIST_START](devices, action) {
+ return {
+ ...devices,
+ listState: Types.loadableState.LOADING,
+ };
+ },
+
+ [LOAD_DEVICE_LIST_ERROR](devices, action) {
+ return {
+ ...devices,
+ listState: Types.loadableState.ERROR,
+ };
+ },
+
+ [LOAD_DEVICE_LIST_END](devices, action) {
+ return {
+ ...devices,
+ listState: Types.loadableState.LOADED,
+ };
+ },
+
+ [REMOVE_DEVICE](devices, { device, deviceType }) {
+ const index = devices[deviceType].indexOf(device);
+ if (index < 0) {
+ return devices;
+ }
+
+ const list = [...devices[deviceType]];
+ list.splice(index, 1);
+
+ return {
+ ...devices,
+ [deviceType]: list,
+ };
+ },
+
+ [UPDATE_DEVICE_MODAL](devices, { isOpen, modalOpenedFromViewport }) {
+ return {
+ ...devices,
+ isModalOpen: isOpen,
+ modalOpenedFromViewport,
+ };
+ },
+};
+
+module.exports = function (devices = INITIAL_DEVICES, action) {
+ const reducer = reducers[action.type];
+ if (!reducer) {
+ return devices;
+ }
+ return reducer(devices, action);
+};
diff --git a/devtools/client/responsive/reducers/moz.build b/devtools/client/responsive/reducers/moz.build
new file mode 100644
index 0000000000..9f2fb54e16
--- /dev/null
+++ b/devtools/client/responsive/reducers/moz.build
@@ -0,0 +1,12 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+ "devices.js",
+ "screenshot.js",
+ "ui.js",
+ "viewports.js",
+)
diff --git a/devtools/client/responsive/reducers/screenshot.js b/devtools/client/responsive/reducers/screenshot.js
new file mode 100644
index 0000000000..67f26f1f9a
--- /dev/null
+++ b/devtools/client/responsive/reducers/screenshot.js
@@ -0,0 +1,38 @@
+/* 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 {
+ TAKE_SCREENSHOT_END,
+ TAKE_SCREENSHOT_START,
+} = require("resource://devtools/client/responsive/actions/index.js");
+
+const INITIAL_SCREENSHOT = {
+ isCapturing: false,
+};
+
+const reducers = {
+ [TAKE_SCREENSHOT_END](screenshot, action) {
+ return {
+ ...screenshot,
+ isCapturing: false,
+ };
+ },
+
+ [TAKE_SCREENSHOT_START](screenshot, action) {
+ return {
+ ...screenshot,
+ isCapturing: true,
+ };
+ },
+};
+
+module.exports = function (screenshot = INITIAL_SCREENSHOT, action) {
+ const reducer = reducers[action.type];
+ if (!reducer) {
+ return screenshot;
+ }
+ return reducer(screenshot, action);
+};
diff --git a/devtools/client/responsive/reducers/ui.js b/devtools/client/responsive/reducers/ui.js
new file mode 100644
index 0000000000..bf03353bf3
--- /dev/null
+++ b/devtools/client/responsive/reducers/ui.js
@@ -0,0 +1,135 @@
+/* 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 {
+ CHANGE_DISPLAY_PIXEL_RATIO,
+ CHANGE_USER_AGENT,
+ TOGGLE_LEFT_ALIGNMENT,
+ TOGGLE_RELOAD_ON_TOUCH_SIMULATION,
+ TOGGLE_RELOAD_ON_USER_AGENT,
+ TOGGLE_TOUCH_SIMULATION,
+ TOGGLE_USER_AGENT_INPUT,
+} = require("resource://devtools/client/responsive/actions/index.js");
+
+const LEFT_ALIGNMENT_ENABLED = "devtools.responsive.leftAlignViewport.enabled";
+const RELOAD_ON_TOUCH_SIMULATION =
+ "devtools.responsive.reloadConditions.touchSimulation";
+const RELOAD_ON_USER_AGENT = "devtools.responsive.reloadConditions.userAgent";
+const SHOW_USER_AGENT_INPUT = "devtools.responsive.showUserAgentInput";
+const TOUCH_SIMULATION_ENABLED = "devtools.responsive.touchSimulation.enabled";
+const USER_AGENT = "devtools.responsive.userAgent";
+
+const INITIAL_UI = {
+ // The pixel ratio of the display.
+ displayPixelRatio: 0,
+ // Whether or not the viewports are left aligned.
+ leftAlignmentEnabled: Services.prefs.getBoolPref(
+ LEFT_ALIGNMENT_ENABLED,
+ false
+ ),
+ // Whether or not to reload when touch simulation is toggled.
+ reloadOnTouchSimulation: Services.prefs.getBoolPref(
+ RELOAD_ON_TOUCH_SIMULATION,
+ false
+ ),
+ // Whether or not to reload when user agent is changed.
+ reloadOnUserAgent: Services.prefs.getBoolPref(RELOAD_ON_USER_AGENT, false),
+ // Whether or not to show the user agent input in the toolbar.
+ showUserAgentInput: Services.prefs.getBoolPref(SHOW_USER_AGENT_INPUT, false),
+ // Whether or not touch simulation is enabled.
+ touchSimulationEnabled: Services.prefs.getBoolPref(
+ TOUCH_SIMULATION_ENABLED,
+ false
+ ),
+ // The user agent of the viewport.
+ userAgent: Services.prefs.getCharPref(USER_AGENT, ""),
+};
+
+const reducers = {
+ [CHANGE_DISPLAY_PIXEL_RATIO](ui, { displayPixelRatio }) {
+ return {
+ ...ui,
+ displayPixelRatio,
+ };
+ },
+
+ [CHANGE_USER_AGENT](ui, { userAgent }) {
+ Services.prefs.setCharPref(USER_AGENT, userAgent);
+
+ return {
+ ...ui,
+ userAgent,
+ };
+ },
+
+ [TOGGLE_LEFT_ALIGNMENT](ui, { enabled }) {
+ const leftAlignmentEnabled =
+ enabled !== undefined ? enabled : !ui.leftAlignmentEnabled;
+
+ Services.prefs.setBoolPref(LEFT_ALIGNMENT_ENABLED, leftAlignmentEnabled);
+
+ return {
+ ...ui,
+ leftAlignmentEnabled,
+ };
+ },
+
+ [TOGGLE_RELOAD_ON_TOUCH_SIMULATION](ui, { enabled }) {
+ const reloadOnTouchSimulation =
+ enabled !== undefined ? enabled : !ui.reloadOnTouchSimulation;
+
+ Services.prefs.setBoolPref(
+ RELOAD_ON_TOUCH_SIMULATION,
+ reloadOnTouchSimulation
+ );
+
+ return {
+ ...ui,
+ reloadOnTouchSimulation,
+ };
+ },
+
+ [TOGGLE_RELOAD_ON_USER_AGENT](ui, { enabled }) {
+ const reloadOnUserAgent =
+ enabled !== undefined ? enabled : !ui.reloadOnUserAgent;
+
+ Services.prefs.setBoolPref(RELOAD_ON_USER_AGENT, reloadOnUserAgent);
+
+ return {
+ ...ui,
+ reloadOnUserAgent,
+ };
+ },
+
+ [TOGGLE_TOUCH_SIMULATION](ui, { enabled }) {
+ Services.prefs.setBoolPref(TOUCH_SIMULATION_ENABLED, enabled);
+
+ return {
+ ...ui,
+ touchSimulationEnabled: enabled,
+ };
+ },
+
+ [TOGGLE_USER_AGENT_INPUT](ui, { enabled }) {
+ const showUserAgentInput =
+ enabled !== undefined ? enabled : !ui.showUserAgentInput;
+
+ Services.prefs.setBoolPref(SHOW_USER_AGENT_INPUT, showUserAgentInput);
+
+ return {
+ ...ui,
+ showUserAgentInput,
+ };
+ },
+};
+
+module.exports = function (ui = INITIAL_UI, action) {
+ const reducer = reducers[action.type];
+ if (!reducer) {
+ return ui;
+ }
+ return reducer(ui, action);
+};
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);
+};