diff options
Diffstat (limited to 'devtools/client/shared/redux/middleware')
16 files changed, 758 insertions, 0 deletions
diff --git a/devtools/client/shared/redux/middleware/debounce.js b/devtools/client/shared/redux/middleware/debounce.js new file mode 100644 index 0000000000..fc5625a0fe --- /dev/null +++ b/devtools/client/shared/redux/middleware/debounce.js @@ -0,0 +1,100 @@ +/* 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"; + +/** + * Redux middleware for debouncing actions. + * + * Schedules actions with { meta: { debounce: true } } to be delayed + * by wait milliseconds. If another action is fired during this + * time-frame both actions are inserted into a queue and delayed. + * Maximum delay is defined by maxWait argument. + * + * Handling more actions at once results in better performance since + * components need to be re-rendered less often. + * + * @param string wait Wait for specified amount of milliseconds + * before executing an action. The time is used + * to collect more actions and handle them all + * at once. + * @param string maxWait Max waiting time. It's used in case of + * a long stream of actions. + */ +function debounceActions(wait, maxWait) { + let queuedActions = []; + + return store => next => { + const debounced = debounce( + () => { + next(batchActions(queuedActions)); + queuedActions = []; + }, + wait, + maxWait + ); + + return action => { + if (!action.meta || !action.meta.debounce) { + return next(action); + } + + if (!wait || !maxWait) { + return next(action); + } + + if (action.type == BATCH_ACTIONS) { + queuedActions.push(...action.actions); + } else { + queuedActions.push(action); + } + + return debounced(); + }; + }; +} + +function debounce(cb, wait, maxWait) { + let timeout, maxTimeout; + const doFunction = () => { + clearTimeout(timeout); + clearTimeout(maxTimeout); + timeout = maxTimeout = null; + cb(); + }; + + return () => { + return new Promise(resolve => { + const onTimeout = () => { + doFunction(); + resolve(); + }; + + clearTimeout(timeout); + + timeout = setTimeout(onTimeout, wait); + if (!maxTimeout) { + maxTimeout = setTimeout(onTimeout, maxWait); + } + }); + }; +} + +const BATCH_ACTIONS = Symbol("BATCH_ACTIONS"); + +/** + * Action creator for action-batching. + */ +function batchActions(batchedActions, debounceFlag = true) { + return { + type: BATCH_ACTIONS, + meta: { debounce: debounceFlag }, + actions: batchedActions, + }; +} + +module.exports = { + BATCH_ACTIONS, + batchActions, + debounceActions, +}; diff --git a/devtools/client/shared/redux/middleware/history.js b/devtools/client/shared/redux/middleware/history.js new file mode 100644 index 0000000000..f3021ed172 --- /dev/null +++ b/devtools/client/shared/redux/middleware/history.js @@ -0,0 +1,25 @@ +/* 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 flags = require("devtools/shared/flags"); + +/** + * A middleware that stores every action coming through the store in the passed + * in logging object. Should only be used for tests, as it collects all + * action information, which will cause memory bloat. + */ +exports.history = (log = []) => ({ dispatch, getState }) => { + if (!flags.testing) { + console.warn( + "Using history middleware stores all actions in state for " + + "testing and devtools is not currently running in test " + + "mode. Be sure this is intentional." + ); + } + return next => action => { + log.push(action); + next(action); + }; +}; diff --git a/devtools/client/shared/redux/middleware/ignore.js b/devtools/client/shared/redux/middleware/ignore.js new file mode 100644 index 0000000000..d2e8cd9e24 --- /dev/null +++ b/devtools/client/shared/redux/middleware/ignore.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 IGNORING = Symbol("IGNORING"); +const START_IGNORE_ACTION = "START_IGNORE_ACTION"; + +/** + * A middleware that prevents any action of being called once it is activated. + * This is useful to apply while destroying a given panel, as it will ignore all calls + * to actions, where we usually make our client -> server communications. + * This middleware should be declared before any other middleware to to effectively + * ignore every actions. + */ +function ignore({ getState }) { + return next => action => { + if (action.type === START_IGNORE_ACTION) { + getState()[IGNORING] = true; + return null; + } + + if (getState()[IGNORING]) { + // We only print the action type, and not the whole action object, as it can holds + // very complex data that would clutter stdout logs and make them impossible + // to parse for treeherder. + console.warn("IGNORED REDUX ACTION:", action.type); + return null; + } + + return next(action); + }; +} + +module.exports = { + ignore, + START_IGNORE_ACTION: { type: START_IGNORE_ACTION }, +}; diff --git a/devtools/client/shared/redux/middleware/log.js b/devtools/client/shared/redux/middleware/log.js new file mode 100644 index 0000000000..4ea09491ca --- /dev/null +++ b/devtools/client/shared/redux/middleware/log.js @@ -0,0 +1,31 @@ +/* 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"; + +/** + * A middleware that logs all actions coming through the system + * to the console. + */ +function log({ dispatch, getState }) { + return next => action => { + try { + // Only print the action type, rather than printing the whole object + console.log("[DISPATCH] action type:", action.type); + /* + * USE WITH CAUTION!! This will output everything from an action object, + * and these can be quite large. Printing out large objects will slow + * down tests and cause test failures + * + * console.log("[DISPATCH]", JSON.stringify(action, null, 2)); + */ + } catch (e) { + // this occurs if JSON.stringify throws. + console.warn(e); + console.log("[DISPATCH]", action); + } + next(action); + }; +} + +exports.log = log; diff --git a/devtools/client/shared/redux/middleware/moz.build b/devtools/client/shared/redux/middleware/moz.build new file mode 100644 index 0000000000..0c8f14c59a --- /dev/null +++ b/devtools/client/shared/redux/middleware/moz.build @@ -0,0 +1,19 @@ +# -*- 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( + "debounce.js", + "history.js", + "ignore.js", + "log.js", + "performance-marker.js", + "promise.js", + "task.js", + "thunk.js", + "wait-service.js", +) + +XPCSHELL_TESTS_MANIFESTS += ["xpcshell/xpcshell.ini"] diff --git a/devtools/client/shared/redux/middleware/performance-marker.js b/devtools/client/shared/redux/middleware/performance-marker.js new file mode 100644 index 0000000000..a30bdf085f --- /dev/null +++ b/devtools/client/shared/redux/middleware/performance-marker.js @@ -0,0 +1,71 @@ +/* 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 ChromeUtils = require("ChromeUtils"); +const { Cu } = require("chrome"); + +/** + * This function returns a middleware, which is responsible for adding markers that will + * be visible in performance profiles, and may help investigate performance issues. + * + * Example usage, adding a marker when console messages are added, and when they are cleared: + * + * return createPerformanceMarkerMiddleware({ + * "MESSAGES_ADD": { + * label: "WebconsoleAddMessages", + * sessionId: 12345, + * getMarkerDescription: function({ action, state }) { + * const { messages } = action; + * const totalMessageCount = state.messages.messagesById.size; + * return `${messages.length} messages handled, store now has ${totalMessageCount} messages`; + * }, + * }, + * "MESSAGES_CLEARED": { + * label: "WebconsoleClearMessages", + * sessionId: 12345 + * }, + * }); + * + * @param {Object} cases: An object, keyed by action type, that will determine if a + * given action will add a marker. + * @param {String} cases.{actionType} - The type of the action that will trigger the + * marker creation. + * @param {String} cases.{actionType}.label - The marker label + * @param {Integer} cases.{actionType}.sessionId - The telemetry sessionId. This is used + * to be able to distinguish markers coming from different toolboxes. + * @param {Function} [cases.{actionType}.getMarkerDescription] - An optional function that + * will be called when adding the marker to populate its description. The function + * is called with an object holding the action and the state + */ +function createPerformanceMarkerMiddleware(cases) { + return function(store) { + return next => action => { + const condition = cases[action.type]; + const shouldAddProfileMarker = !!condition; + + // Start the marker timer before calling next(action). + const startTime = shouldAddProfileMarker ? Cu.now() : null; + const newState = next(action); + + if (shouldAddProfileMarker) { + ChromeUtils.addProfilerMarker( + `${condition.label} ${condition.sessionId}`, + startTime, + condition.getMarkerDescription + ? condition.getMarkerDescription({ + action, + state: store.getState(), + }) + : "" + ); + } + return newState; + }; + }; +} + +module.exports = { + createPerformanceMarkerMiddleware, +}; diff --git a/devtools/client/shared/redux/middleware/promise.js b/devtools/client/shared/redux/middleware/promise.js new file mode 100644 index 0000000000..3ee15a0874 --- /dev/null +++ b/devtools/client/shared/redux/middleware/promise.js @@ -0,0 +1,69 @@ +/* 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"; + +loader.lazyRequireGetter( + this, + "generateUUID", + "devtools/shared/generate-uuid", + true +); +loader.lazyRequireGetter( + this, + ["entries", "executeSoon", "toObject"], + "devtools/shared/DevToolsUtils", + true +); + +const PROMISE = (exports.PROMISE = "@@dispatch/promise"); + +function promiseMiddleware({ dispatch, getState }) { + return next => action => { + if (!(PROMISE in action)) { + return next(action); + } + // Return the promise so action creators can still compose if they + // want to. + return new Promise((resolve, reject) => { + const promiseInst = action[PROMISE]; + const seqId = generateUUID().toString(); + + // Create a new action that doesn't have the promise field and has + // the `seqId` field that represents the sequence id + action = Object.assign( + toObject(entries(action).filter(pair => pair[0] !== PROMISE)), + { seqId } + ); + + dispatch(Object.assign({}, action, { status: "start" })); + + promiseInst.then( + value => { + executeSoon(() => { + dispatch( + Object.assign({}, action, { + status: "done", + value: value, + }) + ); + resolve(value); + }); + }, + error => { + executeSoon(() => { + dispatch( + Object.assign({}, action, { + status: "error", + error: error.message || error, + }) + ); + reject(error); + }); + } + ); + }); + }; +} + +exports.promise = promiseMiddleware; diff --git a/devtools/client/shared/redux/middleware/task.js b/devtools/client/shared/redux/middleware/task.js new file mode 100644 index 0000000000..15e88e9dda --- /dev/null +++ b/devtools/client/shared/redux/middleware/task.js @@ -0,0 +1,54 @@ +/* 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"; + +loader.lazyRequireGetter(this, "Task", "devtools/shared/task", true); +loader.lazyRequireGetter( + this, + ["executeSoon", "isGenerator", "isAsyncFunction", "reportException"], + "devtools/shared/DevToolsUtils", + true +); + +const ERROR_TYPE = (exports.ERROR_TYPE = "@@redux/middleware/task#error"); + +/** + * A middleware that allows generator thunks (functions) and promise + * to be dispatched. If it's a generator, it is called with `dispatch` + * and `getState`, allowing the action to create multiple actions (most likely + * asynchronously) and yield on each. If called with a promise, calls `dispatch` + * on the results. + */ + +function task({ dispatch, getState }) { + return next => action => { + if (isGenerator(action)) { + return Task.spawn(action.bind(null, { dispatch, getState })).catch( + handleError.bind(null, dispatch) + ); + } + if (isAsyncFunction(action)) { + return action({ dispatch, getState }).catch( + handleError.bind(null, dispatch) + ); + } + + /* + if (isPromise(action)) { + return action.then(dispatch, handleError.bind(null, dispatch)); + } + */ + + return next(action); + }; +} + +function handleError(dispatch, error) { + executeSoon(() => { + reportException(ERROR_TYPE, error); + dispatch({ type: ERROR_TYPE, error }); + }); +} + +exports.task = task; diff --git a/devtools/client/shared/redux/middleware/thunk.js b/devtools/client/shared/redux/middleware/thunk.js new file mode 100644 index 0000000000..4a107888a6 --- /dev/null +++ b/devtools/client/shared/redux/middleware/thunk.js @@ -0,0 +1,23 @@ +/* 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"; + +/** + * A middleware that allows thunks (functions) to be dispatched + * If it's a thunk, it is called with an argument that will be an object + * containing `dispatch` and `getState` properties, plus any additional properties + * defined in the `options` parameters. + * This allows the action to create multiple actions (most likely asynchronously). + */ +function thunk(options = {}) { + return function({ dispatch, getState }) { + return next => action => { + return typeof action === "function" + ? action({ dispatch, getState, ...options }) + : next(action); + }; + }; +} + +exports.thunk = thunk; diff --git a/devtools/client/shared/redux/middleware/wait-service.js b/devtools/client/shared/redux/middleware/wait-service.js new file mode 100644 index 0000000000..9416fd22dd --- /dev/null +++ b/devtools/client/shared/redux/middleware/wait-service.js @@ -0,0 +1,64 @@ +/* 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"; + +/** + * A middleware which acts like a service, because it is stateful + * and "long-running" in the background. It provides the ability + * for actions to install a function to be run once when a specific + * condition is met by an action coming through the system. Think of + * it as a thunk that blocks until the condition is met. Example: + * + * ```js + * const services = { WAIT_UNTIL: require('wait-service').NAME }; + * + * { type: services.WAIT_UNTIL, + * predicate: action => action.type === constants.ADD_ITEM, + * run: (dispatch, getState, action) => { + * // Do anything here. You only need to accept the arguments + * // if you need them. `action` is the action that satisfied + * // the predicate. + * } + * } + * ``` + */ +const NAME = (exports.NAME = "@@service/waitUntil"); + +function waitUntilService({ dispatch, getState }) { + let pending = []; + + function checkPending(action) { + const readyRequests = []; + const stillPending = []; + + // Find the pending requests whose predicates are satisfied with + // this action. Wait to run the requests until after we update the + // pending queue because the request handler may synchronously + // dispatch again and run this service (that use case is + // completely valid). + for (const request of pending) { + if (request.predicate(action)) { + readyRequests.push(request); + } else { + stillPending.push(request); + } + } + + pending = stillPending; + for (const request of readyRequests) { + request.run(dispatch, getState, action); + } + } + + return next => action => { + if (action.type === NAME) { + pending.push(action); + return null; + } + const result = next(action); + checkPending(action); + return result; + }; +} +exports.waitUntilService = waitUntilService; diff --git a/devtools/client/shared/redux/middleware/xpcshell/.eslintrc.js b/devtools/client/shared/redux/middleware/xpcshell/.eslintrc.js new file mode 100644 index 0000000000..032dbbbefe --- /dev/null +++ b/devtools/client/shared/redux/middleware/xpcshell/.eslintrc.js @@ -0,0 +1,20 @@ +/* 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"; + +module.exports = { + // Extend from the shared list of defined globals for mochitests. + extends: "../../../../../.eslintrc.mochitests.js", + globals: { + run_test: true, + run_next_test: true, + equal: true, + do_print: true, + }, + rules: { + // Stop giving errors for run_test + camelcase: "off", + }, +}; diff --git a/devtools/client/shared/redux/middleware/xpcshell/head.js b/devtools/client/shared/redux/middleware/xpcshell/head.js new file mode 100644 index 0000000000..5bd44c0030 --- /dev/null +++ b/devtools/client/shared/redux/middleware/xpcshell/head.js @@ -0,0 +1,24 @@ +/* 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/. */ + +/* exported waitUntilState */ + +"use strict"; + +const { require } = ChromeUtils.import("resource://devtools/shared/Loader.jsm"); + +function waitUntilState(store, predicate) { + return new Promise(resolve => { + const unsubscribe = store.subscribe(check); + function check() { + if (predicate(store.getState())) { + unsubscribe(); + resolve(); + } + } + + // Fire the check immediately incase the action has already occurred + check(); + }); +} diff --git a/devtools/client/shared/redux/middleware/xpcshell/test_middleware-task-01.js b/devtools/client/shared/redux/middleware/xpcshell/test_middleware-task-01.js new file mode 100644 index 0000000000..cdc24efc15 --- /dev/null +++ b/devtools/client/shared/redux/middleware/xpcshell/test_middleware-task-01.js @@ -0,0 +1,69 @@ +/* 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 { + createStore, + applyMiddleware, +} = require("devtools/client/shared/vendor/redux"); +const { task } = require("devtools/client/shared/redux/middleware/task"); + +/** + * Tests that task middleware allows dispatching generators, promises and objects + * that return actions; + */ + +function run_test() { + run_next_test(); +} + +add_task(async function() { + const store = applyMiddleware(task)(createStore)(reducer); + + store.dispatch(fetch1("generator")); + await waitUntilState(store, () => store.getState().length === 1); + equal( + store.getState()[0].data, + "generator", + "task middleware async dispatches an action via generator" + ); + + store.dispatch(fetch2("sync")); + await waitUntilState(store, () => store.getState().length === 2); + equal( + store.getState()[1].data, + "sync", + "task middleware sync dispatches an action via sync" + ); +}); + +function fetch1(data) { + return async function({ dispatch, getState }) { + equal( + getState().length, + 0, + "`getState` is accessible in a generator action" + ); + let moreData = await new Promise(resolve => resolve(data)); + // Ensure it handles more than one yield + moreData = await new Promise(resolve => resolve(data)); + dispatch({ type: "fetch1", data: moreData }); + }; +} + +function fetch2(data) { + return { + type: "fetch2", + data, + }; +} + +function reducer(state = [], action) { + info("Action called: " + action.type); + if (["fetch1", "fetch2"].includes(action.type)) { + state.push(action); + } + return [...state]; +} diff --git a/devtools/client/shared/redux/middleware/xpcshell/test_middleware-task-02.js b/devtools/client/shared/redux/middleware/xpcshell/test_middleware-task-02.js new file mode 100644 index 0000000000..c5b35def2e --- /dev/null +++ b/devtools/client/shared/redux/middleware/xpcshell/test_middleware-task-02.js @@ -0,0 +1,88 @@ +/* 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"; + +/** + * Tests that task middleware allows dispatching generators that dispatch + * additional sync and async actions. + */ + +const { + createStore, + applyMiddleware, +} = require("devtools/client/shared/vendor/redux"); +const { task } = require("devtools/client/shared/redux/middleware/task"); + +function run_test() { + run_next_test(); +} + +add_task(async function() { + const store = applyMiddleware(task)(createStore)(reducer); + + store.dispatch(comboAction()); + await waitUntilState(store, () => store.getState().length === 4); + + equal( + store.getState()[0].type, + "fetchAsync-start", + "Async dispatched actions in a generator task are fired" + ); + equal( + store.getState()[1].type, + "fetchAsync-end", + "Async dispatched actions in a generator task are fired" + ); + equal( + store.getState()[2].type, + "fetchSync", + "Return values of yielded sync dispatched actions are correct" + ); + equal( + store.getState()[3].type, + "fetch-done", + "Return values of yielded async dispatched actions are correct" + ); + equal( + store.getState()[3].data.sync.data, + "sync", + "Return values of dispatched sync values are correct" + ); + equal( + store.getState()[3].data.async, + "async", + "Return values of dispatched async values are correct" + ); +}); + +function comboAction() { + return async function({ dispatch, getState }) { + const data = {}; + data.async = await dispatch(fetchAsync("async")); + data.sync = await dispatch(fetchSync("sync")); + dispatch({ type: "fetch-done", data }); + }; +} + +function fetchSync(data) { + return { type: "fetchSync", data }; +} + +function fetchAsync(data) { + return async function({ dispatch }) { + dispatch({ type: "fetchAsync-start" }); + const val = await new Promise(resolve => resolve(data)); + dispatch({ type: "fetchAsync-end" }); + return val; + }; +} + +function reducer(state = [], action) { + info("Action called: " + action.type); + if (/fetch/.test(action.type)) { + state.push(action); + } + return [...state]; +} diff --git a/devtools/client/shared/redux/middleware/xpcshell/test_middleware-task-03.js b/devtools/client/shared/redux/middleware/xpcshell/test_middleware-task-03.js new file mode 100644 index 0000000000..2c3b69291c --- /dev/null +++ b/devtools/client/shared/redux/middleware/xpcshell/test_middleware-task-03.js @@ -0,0 +1,54 @@ +/* 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 { + createStore, + applyMiddleware, +} = require("devtools/client/shared/vendor/redux"); +const { + task, + ERROR_TYPE, +} = require("devtools/client/shared/redux/middleware/task"); + +/** + * Tests that the middleware handles errors thrown in tasks, and rejected promises. + */ + +function run_test() { + run_next_test(); +} + +add_task(async function() { + const store = applyMiddleware(task)(createStore)(reducer); + + store.dispatch(generatorError()); + await waitUntilState(store, () => store.getState().length === 1); + equal( + store.getState()[0].type, + ERROR_TYPE, + "generator errors dispatch ERROR_TYPE actions" + ); + equal( + store.getState()[0].error, + "task-middleware-error-generator", + "generator errors dispatch ERROR_TYPE actions with error" + ); +}); + +function generatorError() { + return function*({ dispatch, getState }) { + const error = "task-middleware-error-generator"; + throw error; + }; +} + +function reducer(state = [], action) { + info("Action called: " + action.type); + if (action.type === ERROR_TYPE) { + state.push(action); + } + return [...state]; +} diff --git a/devtools/client/shared/redux/middleware/xpcshell/xpcshell.ini b/devtools/client/shared/redux/middleware/xpcshell/xpcshell.ini new file mode 100644 index 0000000000..ec33920b13 --- /dev/null +++ b/devtools/client/shared/redux/middleware/xpcshell/xpcshell.ini @@ -0,0 +1,9 @@ +[DEFAULT] +tags = devtools +head = head.js +firefox-appdir = browser +skip-if = toolkit == 'android' + +[test_middleware-task-01.js] +[test_middleware-task-02.js] +[test_middleware-task-03.js] |