diff options
Diffstat (limited to '')
23 files changed, 3258 insertions, 0 deletions
diff --git a/devtools/client/debugger/src/reducers/ast.js b/devtools/client/debugger/src/reducers/ast.js new file mode 100644 index 0000000000..9796815727 --- /dev/null +++ b/devtools/client/debugger/src/reducers/ast.js @@ -0,0 +1,92 @@ +/* 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/>. */ + +/** + * Ast reducer + * @module reducers/ast + */ + +import { makeBreakpointId } from "../utils/breakpoint"; + +export function initialASTState() { + return { + // We are using mutable objects as we never return the dictionary as-is from the selectors + // but only their values. + // Note that all these dictionaries are storing objects as values + // which all will have a threadActorId attribute. + + // We have two maps, a first one for original sources. + // This is keyed by source id. + mutableOriginalSourcesSymbols: {}, + + // And another one, for generated sources. + // This is keyed by source actor id. + mutableSourceActorSymbols: {}, + + mutableInScopeLines: {}, + }; +} + +function update(state = initialASTState(), action) { + switch (action.type) { + case "SET_SYMBOLS": { + const { location } = action; + if (action.status === "start") { + return state; + } + + const entry = { + value: action.value, + threadActorId: location.sourceActor?.thread, + }; + if (location.source.isOriginal) { + state.mutableOriginalSourcesSymbols[location.source.id] = entry; + } else { + if (!location.sourceActor) { + throw new Error( + "Expects a location with a source actor when adding symbols for non-original sources" + ); + } + state.mutableSourceActorSymbols[location.sourceActor.id] = entry; + } + return { + ...state, + }; + } + + case "IN_SCOPE_LINES": { + state.mutableInScopeLines[makeBreakpointId(action.location)] = { + lines: action.lines, + threadActorId: action.location.sourceActor?.thread, + }; + return { + ...state, + }; + } + + case "RESUME": { + return { ...state, mutableInScopeLines: {} }; + } + + case "REMOVE_THREAD": { + function clearDict(dict, threadId) { + for (const key in dict) { + if (dict[key].threadActorId == threadId) { + delete dict[key]; + } + } + } + clearDict(state.mutableSourceActorSymbols, action.threadActorID); + clearDict(state.mutableOriginalSourcesSymbols, action.threadActorID); + clearDict(state.mutableInScopeLines, action.threadActorID); + return { ...state }; + } + + default: { + return state; + } + } +} + +export default update; diff --git a/devtools/client/debugger/src/reducers/breakpoints.js b/devtools/client/debugger/src/reducers/breakpoints.js new file mode 100644 index 0000000000..127e71abae --- /dev/null +++ b/devtools/client/debugger/src/reducers/breakpoints.js @@ -0,0 +1,149 @@ +/* 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/>. */ + +/** + * Breakpoints reducer + * @module reducers/breakpoints + */ + +import { makeBreakpointId } from "../utils/breakpoint"; + +export function initialBreakpointsState(xhrBreakpoints = []) { + return { + breakpoints: {}, + xhrBreakpoints, + }; +} + +function update(state = initialBreakpointsState(), action) { + switch (action.type) { + case "SET_BREAKPOINT": { + if (action.status === "start") { + return setBreakpoint(state, action); + } + return state; + } + + case "REMOVE_BREAKPOINT": { + if (action.status === "start") { + return removeBreakpoint(state, action); + } + return state; + } + + case "CLEAR_BREAKPOINTS": { + return { ...state, breakpoints: {} }; + } + + case "REMOVE_THREAD": { + return removeBreakpointsForSources(state, action.sources); + } + + case "SET_XHR_BREAKPOINT": { + return addXHRBreakpoint(state, action); + } + + case "REMOVE_XHR_BREAKPOINT": { + return removeXHRBreakpoint(state, action); + } + + case "UPDATE_XHR_BREAKPOINT": { + return updateXHRBreakpoint(state, action); + } + + case "ENABLE_XHR_BREAKPOINT": { + return updateXHRBreakpoint(state, action); + } + + case "DISABLE_XHR_BREAKPOINT": { + return updateXHRBreakpoint(state, action); + } + case "CLEAR_XHR_BREAKPOINTS": { + if (action.status == "start") { + return state; + } + return { ...state, xhrBreakpoints: [] }; + } + } + + return state; +} + +function addXHRBreakpoint(state, action) { + const { xhrBreakpoints } = state; + const { breakpoint } = action; + const { path, method } = breakpoint; + + const existingBreakpointIndex = state.xhrBreakpoints.findIndex( + bp => bp.path === path && bp.method === method + ); + + if (existingBreakpointIndex === -1) { + return { + ...state, + xhrBreakpoints: [...xhrBreakpoints, breakpoint], + }; + } else if (xhrBreakpoints[existingBreakpointIndex] !== breakpoint) { + const newXhrBreakpoints = [...xhrBreakpoints]; + newXhrBreakpoints[existingBreakpointIndex] = breakpoint; + return { + ...state, + xhrBreakpoints: newXhrBreakpoints, + }; + } + + return state; +} + +function removeXHRBreakpoint(state, action) { + const { breakpoint } = action; + const { xhrBreakpoints } = state; + + if (action.status === "start") { + return state; + } + + return { + ...state, + xhrBreakpoints: xhrBreakpoints.filter( + bp => bp.path !== breakpoint.path || bp.method !== breakpoint.method + ), + }; +} + +function updateXHRBreakpoint(state, action) { + const { breakpoint, index } = action; + const { xhrBreakpoints } = state; + const newXhrBreakpoints = [...xhrBreakpoints]; + newXhrBreakpoints[index] = breakpoint; + return { + ...state, + xhrBreakpoints: newXhrBreakpoints, + }; +} + +function setBreakpoint(state, { breakpoint }) { + const id = makeBreakpointId(breakpoint.location); + const breakpoints = { ...state.breakpoints, [id]: breakpoint }; + return { ...state, breakpoints }; +} + +function removeBreakpoint(state, { breakpoint }) { + const id = makeBreakpointId(breakpoint.location); + const breakpoints = { ...state.breakpoints }; + delete breakpoints[id]; + return { ...state, breakpoints }; +} + +function removeBreakpointsForSources(state, sources) { + const remainingBreakpoints = {}; + for (const [id, breakpoint] of Object.entries(state.breakpoints)) { + if (!sources.includes(breakpoint.location.source)) { + remainingBreakpoints[id] = breakpoint; + } + } + return { ...state, breakpoints: remainingBreakpoints }; +} + +export default update; diff --git a/devtools/client/debugger/src/reducers/event-listeners.js b/devtools/client/debugger/src/reducers/event-listeners.js new file mode 100644 index 0000000000..d0418b9ece --- /dev/null +++ b/devtools/client/debugger/src/reducers/event-listeners.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/>. */ + +import { prefs } from "../utils/prefs"; + +export function initialEventListenerState() { + return { + active: [], + categories: [], + expanded: [], + logEventBreakpoints: prefs.logEventBreakpoints, + }; +} + +function update(state = initialEventListenerState(), action) { + switch (action.type) { + case "UPDATE_EVENT_LISTENERS": + return { ...state, active: action.active }; + + case "RECEIVE_EVENT_LISTENER_TYPES": + return { ...state, categories: action.categories }; + + case "UPDATE_EVENT_LISTENER_EXPANDED": + return { ...state, expanded: action.expanded }; + + case "TOGGLE_EVENT_LISTENERS": { + const { logEventBreakpoints } = action; + prefs.logEventBreakpoints = logEventBreakpoints; + return { ...state, logEventBreakpoints }; + } + + default: + return state; + } +} + +export default update; diff --git a/devtools/client/debugger/src/reducers/exceptions.js b/devtools/client/debugger/src/reducers/exceptions.js new file mode 100644 index 0000000000..a4a26de5df --- /dev/null +++ b/devtools/client/debugger/src/reducers/exceptions.js @@ -0,0 +1,78 @@ +/* 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/>. */ + +/** + * Exceptions reducer + * @module reducers/exceptionss + */ + +export function initialExceptionsState() { + return { + // Store exception objects created by actions/exceptions.js's addExceptionFromResources() + // This is keyed by source actor id, and values are arrays of exception objects. + mutableExceptionsMap: new Map(), + }; +} + +function update(state = initialExceptionsState(), action) { + switch (action.type) { + case "ADD_EXCEPTION": + return updateExceptions(state, action); + case "REMOVE_THREAD": { + return removeExceptionsFromThread(state, action); + } + } + return state; +} + +function updateExceptions(state, action) { + const { mutableExceptionsMap } = state; + const { exception } = action; + const { sourceActorId } = exception; + + let exceptions = mutableExceptionsMap.get(sourceActorId); + if (!exceptions) { + exceptions = []; + mutableExceptionsMap.set(sourceActorId, exceptions); + } else if ( + exceptions.some(({ lineNumber, columnNumber }) => { + return ( + lineNumber == exception.lineNumber && + columnNumber == exception.columnNumber + ); + }) + ) { + // Avoid adding duplicated exceptions for the same line/column + return state; + } + + // As these arrays are only used by getSelectedSourceExceptions selector method, + // which coalesce multiple arrays and always return new array instance, + // it isn't important to clone these array in case of modification. + exceptions.push(exception); + + return { + ...state, + }; +} + +function removeExceptionsFromThread(state, action) { + const { mutableExceptionsMap } = state; + const { threadActorID } = action; + const sizeBefore = mutableExceptionsMap.size; + for (const [sourceActorId, exceptions] of mutableExceptionsMap) { + // All exceptions relates to the same source actor, and so, the same thread actor. + if (exceptions[0].threadActorId == threadActorID) { + mutableExceptionsMap.delete(sourceActorId); + } + } + if (sizeBefore != mutableExceptionsMap.size) { + return { + ...state, + }; + } + return state; +} + +export default update; diff --git a/devtools/client/debugger/src/reducers/expressions.js b/devtools/client/debugger/src/reducers/expressions.js new file mode 100644 index 0000000000..d8589eca84 --- /dev/null +++ b/devtools/client/debugger/src/reducers/expressions.js @@ -0,0 +1,133 @@ +/* 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/>. */ + +/** + * Expressions reducer + * @module reducers/expressions + */ + +import { prefs } from "../utils/prefs"; + +export const initialExpressionState = () => ({ + expressions: restoreExpressions(), + expressionError: false, + autocompleteMatches: {}, + currentAutocompleteInput: null, +}); + +function update(state = initialExpressionState(), action) { + switch (action.type) { + case "ADD_EXPRESSION": + if (action.expressionError) { + return { ...state, expressionError: !!action.expressionError }; + } + return appendExpressionToList(state, { + input: action.input, + value: null, + updating: true, + }); + + case "UPDATE_EXPRESSION": + const key = action.expression.input; + const newState = updateExpressionInList(state, key, { + input: action.input, + value: null, + updating: true, + }); + + return { ...newState, expressionError: !!action.expressionError }; + + case "EVALUATE_EXPRESSION": + return updateExpressionInList(state, action.input, { + input: action.input, + value: action.value, + updating: false, + }); + + case "EVALUATE_EXPRESSIONS": + const { inputs, results } = action; + + return inputs.reduce( + (_state, input, index) => + updateExpressionInList(_state, input, { + input, + value: results[index], + updating: false, + }), + state + ); + + case "DELETE_EXPRESSION": + return deleteExpression(state, action.input); + + case "CLEAR_EXPRESSION_ERROR": + return { ...state, expressionError: false }; + + case "AUTOCOMPLETE": + const { matchProp, matches } = action.result; + + return { + ...state, + currentAutocompleteInput: matchProp, + autocompleteMatches: { + ...state.autocompleteMatches, + [matchProp]: matches, + }, + }; + + case "CLEAR_AUTOCOMPLETE": + return { + ...state, + autocompleteMatches: {}, + currentAutocompleteInput: "", + }; + } + + return state; +} + +function restoreExpressions() { + const exprs = prefs.expressions; + if (!exprs.length) { + return []; + } + + return exprs; +} + +function storeExpressions({ expressions }) { + // Return the expressions without the `value` property + prefs.expressions = expressions.map(({ input, updating }) => ({ + input, + updating, + })); +} + +function appendExpressionToList(state, value) { + const newState = { ...state, expressions: [...state.expressions, value] }; + + storeExpressions(newState); + return newState; +} + +function updateExpressionInList(state, key, value) { + const list = [...state.expressions]; + const index = list.findIndex(e => e.input == key); + list[index] = value; + + const newState = { ...state, expressions: list }; + storeExpressions(newState); + return newState; +} + +function deleteExpression(state, input) { + const list = [...state.expressions]; + const index = list.findIndex(e => e.input == input); + list.splice(index, 1); + const newState = { ...state, expressions: list }; + storeExpressions(newState); + return newState; +} + +export default update; diff --git a/devtools/client/debugger/src/reducers/index.js b/devtools/client/debugger/src/reducers/index.js new file mode 100644 index 0000000000..9bddc857b2 --- /dev/null +++ b/devtools/client/debugger/src/reducers/index.js @@ -0,0 +1,84 @@ +/* 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/>. */ + +/** + * Reducer index + * @module reducers/index + */ + +import expressions, { initialExpressionState } from "./expressions"; +import sourceActors, { initialSourceActorsState } from "./source-actors"; +import sources, { initialSourcesState } from "./sources"; +import sourceBlackBox, { initialSourceBlackBoxState } from "./source-blackbox"; +import sourcesContent, { initialSourcesContentState } from "./sources-content"; +import tabs, { initialTabState } from "./tabs"; +import breakpoints, { initialBreakpointsState } from "./breakpoints"; +import pendingBreakpoints from "./pending-breakpoints"; +import pause, { initialPauseState } from "./pause"; +import ui, { initialUIState } from "./ui"; +import ast, { initialASTState } from "./ast"; +import preview, { initialPreviewState } from "./preview"; +import projectTextSearch, { + initialProjectTextSearchState, +} from "./project-text-search"; +import quickOpen, { initialQuickOpenState } from "./quick-open"; +import sourcesTree, { initialSourcesTreeState } from "./sources-tree"; +import threads, { initialThreadsState } from "./threads"; +import eventListenerBreakpoints, { + initialEventListenerState, +} from "./event-listeners"; +import exceptions, { initialExceptionsState } from "./exceptions"; + +import { objectInspector } from "devtools/client/shared/components/reps/index"; + +/** + * Note that this is only used by jest tests. + * + * Production is using loadInitialState() in main.js + */ +export function initialState() { + return { + sources: initialSourcesState(), + sourcesContent: initialSourcesContentState(), + expressions: initialExpressionState(), + sourceActors: initialSourceActorsState(), + sourceBlackBox: initialSourceBlackBoxState(), + tabs: initialTabState(), + breakpoints: initialBreakpointsState(), + pendingBreakpoints: {}, + pause: initialPauseState(), + ui: initialUIState(), + ast: initialASTState(), + projectTextSearch: initialProjectTextSearchState(), + quickOpen: initialQuickOpenState(), + sourcesTree: initialSourcesTreeState(), + threads: initialThreadsState(), + objectInspector: objectInspector.reducer.initialOIState(), + eventListenerBreakpoints: initialEventListenerState(), + preview: initialPreviewState(), + exceptions: initialExceptionsState(), + }; +} + +export default { + expressions, + sourceActors, + sourceBlackBox, + sourcesContent, + sources, + tabs, + breakpoints, + pendingBreakpoints, + pause, + ui, + ast, + projectTextSearch, + quickOpen, + sourcesTree, + threads, + objectInspector: objectInspector.reducer.default, + eventListenerBreakpoints, + preview, + exceptions, +}; diff --git a/devtools/client/debugger/src/reducers/moz.build b/devtools/client/debugger/src/reducers/moz.build new file mode 100644 index 0000000000..ab5a23dcfb --- /dev/null +++ b/devtools/client/debugger/src/reducers/moz.build @@ -0,0 +1,28 @@ +# 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/. + +DIRS += [] + +CompiledModules( + "ast.js", + "breakpoints.js", + "event-listeners.js", + "exceptions.js", + "expressions.js", + "index.js", + "pause.js", + "pending-breakpoints.js", + "preview.js", + "project-text-search.js", + "quick-open.js", + "source-actors.js", + "source-blackbox.js", + "sources.js", + "sources-content.js", + "sources-tree.js", + "tabs.js", + "threads.js", + "ui.js", +) diff --git a/devtools/client/debugger/src/reducers/pause.js b/devtools/client/debugger/src/reducers/pause.js new file mode 100644 index 0000000000..b6de8dc2f2 --- /dev/null +++ b/devtools/client/debugger/src/reducers/pause.js @@ -0,0 +1,409 @@ +/* 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/>. */ + +/* eslint complexity: ["error", 36]*/ + +/** + * Pause reducer + * @module reducers/pause + */ + +import { prefs } from "../utils/prefs"; + +// Pause state associated with an individual thread. + +// Pause state describing all threads. + +export function initialPauseState(thread = "UnknownThread") { + return { + cx: { + navigateCounter: 0, + }, + // This `threadcx` is the `cx` variable we pass around in components and actions. + // This is pulled via getThreadContext(). + // This stores information about the currently selected thread and its paused state. + threadcx: { + navigateCounter: 0, + thread, + pauseCounter: 0, + }, + highlightedCalls: null, + threads: {}, + skipPausing: prefs.skipPausing, + mapScopes: prefs.mapScopes, + shouldPauseOnExceptions: prefs.pauseOnExceptions, + shouldPauseOnCaughtExceptions: prefs.pauseOnCaughtExceptions, + }; +} + +const resumedPauseState = { + isPaused: false, + frames: null, + framesLoading: false, + frameScopes: { + generated: {}, + original: {}, + mappings: {}, + }, + selectedFrameId: null, + why: null, + inlinePreview: {}, + highlightedCalls: null, +}; + +const createInitialPauseState = () => ({ + ...resumedPauseState, + isWaitingOnBreak: false, + command: null, + previousLocation: null, + expandedScopes: new Set(), + lastExpandedScopes: [], +}); + +export function getThreadPauseState(state, thread) { + // Thread state is lazily initialized so that we don't have to keep track of + // the current set of worker threads. + return state.threads[thread] || createInitialPauseState(); +} + +function update(state = initialPauseState(), action) { + // Actions need to specify any thread they are operating on. These helpers + // manage updating the pause state for that thread. + const threadState = () => { + if (!action.thread) { + throw new Error(`Missing thread in action ${action.type}`); + } + return getThreadPauseState(state, action.thread); + }; + + const updateThreadState = newThreadState => { + if (!action.thread) { + throw new Error(`Missing thread in action ${action.type}`); + } + return { + ...state, + threads: { + ...state.threads, + [action.thread]: { ...threadState(), ...newThreadState }, + }, + }; + }; + + switch (action.type) { + case "SELECT_THREAD": { + return { + ...state, + threadcx: { + ...state.threadcx, + thread: action.thread, + pauseCounter: state.threadcx.pauseCounter + 1, + }, + }; + } + + case "INSERT_THREAD": { + // When navigating to a new location, + // we receive NAVIGATE early, which clear things + // then we have REMOVE_THREAD of the previous thread. + // INSERT_THREAD will be the very first event with the new thread actor ID. + // Automatically select the new top level thread. + if (action.newThread.isTopLevel) { + return { + ...state, + threadcx: { + ...state.threadcx, + thread: action.newThread.actor, + pauseCounter: state.threadcx.pauseCounter + 1, + }, + }; + } + break; + } + + case "REMOVE_THREAD": { + if ( + action.threadActorID in state.threads || + action.threadActorID == state.threadcx.thread + ) { + // Remove the thread from the cached list + const threads = { ...state.threads }; + delete threads[action.threadActorID]; + let threadcx = state.threadcx; + + // And also switch to another thread if this was the currently selected one. + // As we don't store thread objects in this reducer, and only store thread actor IDs, + // we can't try to find the top level thread. So we pick the first available thread, + // and hope that's the top level one. + if (state.threadcx.thread == action.threadActorID) { + threadcx = { + ...threadcx, + thread: Object.keys(threads)[0], + pauseCounter: threadcx.pauseCounter + 1, + }; + } + return { + ...state, + threadcx, + threads, + }; + } + break; + } + + case "PAUSED": { + const { thread, frame, why } = action; + state = { + ...state, + threadcx: { + ...state.threadcx, + pauseCounter: state.threadcx.pauseCounter + 1, + thread, + }, + }; + + return updateThreadState({ + isWaitingOnBreak: false, + selectedFrameId: frame ? frame.id : undefined, + isPaused: true, + frames: frame ? [frame] : undefined, + framesLoading: true, + frameScopes: { ...resumedPauseState.frameScopes }, + why, + shouldBreakpointsPaneOpenOnPause: why.type === "breakpoint", + }); + } + + case "FETCHED_FRAMES": { + const { frames } = action; + + // We typically receive a PAUSED action before this one, + // with only the first frame. Here, we avoid replacing it + // with a copy of it in order to avoid triggerring selectors + // uncessarily + // (note that in jest, action's frames might be empty) + // (and if we resume in between PAUSED and FETCHED_FRAMES + // threadState().frames might be null) + if (threadState().frames) { + const previousFirstFrame = threadState().frames[0]; + if (previousFirstFrame.id == frames[0]?.id) { + frames.splice(0, 1, previousFirstFrame); + } + } + return updateThreadState({ frames, framesLoading: false }); + } + + case "MAP_FRAMES": { + const { selectedFrameId, frames } = action; + return updateThreadState({ frames, selectedFrameId }); + } + + case "MAP_FRAME_DISPLAY_NAMES": { + const { frames } = action; + return updateThreadState({ frames }); + } + + case "ADD_SCOPES": { + const { frame, status, value } = action; + const selectedFrameId = frame.id; + + const generated = { + ...threadState().frameScopes.generated, + [selectedFrameId]: { + pending: status !== "done", + scope: value, + }, + }; + + return updateThreadState({ + frameScopes: { + ...threadState().frameScopes, + generated, + }, + }); + } + + case "MAP_SCOPES": { + const { frame, status, value } = action; + const selectedFrameId = frame.id; + + const original = { + ...threadState().frameScopes.original, + [selectedFrameId]: { + pending: status !== "done", + scope: value?.scope, + }, + }; + + const mappings = { + ...threadState().frameScopes.mappings, + [selectedFrameId]: value?.mappings, + }; + + return updateThreadState({ + frameScopes: { + ...threadState().frameScopes, + original, + mappings, + }, + }); + } + + case "BREAK_ON_NEXT": + return updateThreadState({ isWaitingOnBreak: true }); + + case "SELECT_FRAME": + return updateThreadState({ selectedFrameId: action.frame.id }); + + case "PAUSE_ON_EXCEPTIONS": { + const { shouldPauseOnExceptions, shouldPauseOnCaughtExceptions } = action; + + prefs.pauseOnExceptions = shouldPauseOnExceptions; + prefs.pauseOnCaughtExceptions = shouldPauseOnCaughtExceptions; + + // Preserving for the old debugger + prefs.ignoreCaughtExceptions = !shouldPauseOnCaughtExceptions; + + return { + ...state, + shouldPauseOnExceptions, + shouldPauseOnCaughtExceptions, + }; + } + + case "COMMAND": + if (action.status === "start") { + return updateThreadState({ + ...resumedPauseState, + command: action.command, + previousLocation: getPauseLocation(threadState(), action), + }); + } + return updateThreadState({ command: null }); + + case "RESUME": { + if (action.thread == state.threadcx.thread) { + state = { + ...state, + threadcx: { + ...state.threadcx, + pauseCounter: state.threadcx.pauseCounter + 1, + }, + }; + } + + return updateThreadState({ + ...resumedPauseState, + expandedScopes: new Set(), + lastExpandedScopes: [...threadState().expandedScopes], + shouldBreakpointsPaneOpenOnPause: false, + }); + } + + case "EVALUATE_EXPRESSION": + return updateThreadState({ + command: action.status === "start" ? "expression" : null, + }); + + case "NAVIGATE": { + const navigateCounter = state.cx.navigateCounter + 1; + return { + ...state, + cx: { + navigateCounter, + }, + threadcx: { + navigateCounter, + thread: action.mainThread.actor, + pauseCounter: 0, + }, + threads: { + ...state.threads, + [action.mainThread.actor]: { + ...getThreadPauseState(state, action.mainThread.actor), + ...resumedPauseState, + }, + }, + }; + } + + case "TOGGLE_SKIP_PAUSING": { + const { skipPausing } = action; + prefs.skipPausing = skipPausing; + + return { ...state, skipPausing }; + } + + case "TOGGLE_MAP_SCOPES": { + const { mapScopes } = action; + prefs.mapScopes = mapScopes; + return { ...state, mapScopes }; + } + + case "SET_EXPANDED_SCOPE": { + const { path, expanded } = action; + const expandedScopes = new Set(threadState().expandedScopes); + if (expanded) { + expandedScopes.add(path); + } else { + expandedScopes.delete(path); + } + return updateThreadState({ expandedScopes }); + } + + case "ADD_INLINE_PREVIEW": { + const { frame, previews } = action; + const selectedFrameId = frame.id; + + return updateThreadState({ + inlinePreview: { + ...threadState().inlinePreview, + [selectedFrameId]: previews, + }, + }); + } + + case "HIGHLIGHT_CALLS": { + const { highlightedCalls } = action; + return updateThreadState({ ...threadState(), highlightedCalls }); + } + + case "UNHIGHLIGHT_CALLS": { + return updateThreadState({ + ...threadState(), + highlightedCalls: null, + }); + } + + case "RESET_BREAKPOINTS_PANE_STATE": { + return updateThreadState({ + ...threadState(), + shouldBreakpointsPaneOpenOnPause: false, + }); + } + } + + return state; +} + +function getPauseLocation(state, action) { + const { frames, previousLocation } = state; + + // NOTE: We store the previous location so that we ensure that we + // do not stop at the same location twice when we step over. + if (action.command !== "stepOver") { + return null; + } + + const frame = frames?.[0]; + if (!frame) { + return previousLocation; + } + + return { + location: frame.location, + generatedLocation: frame.generatedLocation, + }; +} + +export default update; diff --git a/devtools/client/debugger/src/reducers/pending-breakpoints.js b/devtools/client/debugger/src/reducers/pending-breakpoints.js new file mode 100644 index 0000000000..25e9a65dd4 --- /dev/null +++ b/devtools/client/debugger/src/reducers/pending-breakpoints.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/>. */ + +/** + * Pending breakpoints reducer. + * + * Pending breakpoints are a more lightweight version compared to regular breakpoints objects. + * They are meant to be persisted across Firefox restarts and stored into async-storage. + * This reducer data is saved into asyncStore from bootstrap.js and restored from main.js. + * + * The main difference with pending breakpoints is that we only save breakpoints + * against source with an URL as only them can be restored. (source IDs are different across reloads). + * The second difference is that we don't store the whole source object but only the source URL. + */ + +import { isPrettyURL } from "../utils/source"; +import assert from "../utils/assert"; + +function update(state = {}, action) { + switch (action.type) { + case "SET_BREAKPOINT": + if (action.status === "start") { + return setBreakpoint(state, action.breakpoint); + } + return state; + + case "REMOVE_BREAKPOINT": + if (action.status === "start") { + return removeBreakpoint(state, action.breakpoint); + } + return state; + + case "REMOVE_PENDING_BREAKPOINT": + return removePendingBreakpoint(state, action.pendingBreakpoint); + + case "CLEAR_BREAKPOINTS": { + return {}; + } + } + + return state; +} + +function shouldBreakpointBePersisted(breakpoint) { + // We only save breakpoint for source with URL. + // Source without URL can only be identified via their source actor ID + // which isn't persisted across reloads. + return !breakpoint.options.hidden && breakpoint.location.source.url; +} + +function setBreakpoint(state, breakpoint) { + if (!shouldBreakpointBePersisted(breakpoint)) { + return state; + } + + const id = makeIdFromBreakpoint(breakpoint); + const pendingBreakpoint = createPendingBreakpoint(breakpoint); + + return { ...state, [id]: pendingBreakpoint }; +} + +function removeBreakpoint(state, breakpoint) { + if (!shouldBreakpointBePersisted(breakpoint)) { + return state; + } + + const id = makeIdFromBreakpoint(breakpoint); + state = { ...state }; + + delete state[id]; + return state; +} + +function removePendingBreakpoint(state, pendingBreakpoint) { + const id = makeIdFromPendingBreakpoint(pendingBreakpoint); + state = { ...state }; + + delete state[id]; + return state; +} + +/** + * Return a unique identifier for a given breakpoint, + * using its original location, or for pretty-printed sources, + * its generated location. + * + * @param {Object} breakpoint + */ +function makeIdFromBreakpoint(breakpoint) { + const location = isPrettyURL(breakpoint.location.sourceUrl) + ? breakpoint.generatedLocation + : breakpoint.location; + + const { sourceUrl, line, column } = location; + const sourceUrlString = sourceUrl || ""; + const columnString = column || ""; + + return `${sourceUrlString}:${line}:${columnString}`; +} + +function makeIdFromPendingBreakpoint(pendingBreakpoint) { + const { sourceUrl, line, column } = pendingBreakpoint.location; + const sourceUrlString = sourceUrl || ""; + const columnString = column || ""; + + return `${sourceUrlString}:${line}:${columnString}`; +} + +/** + * Convert typical debugger frontend location (created via location.js:createLocation) + * to a more lightweight flavor of it which will be stored in async storage. + */ +function createPendingLocation(location) { + assert(location.hasOwnProperty("line"), "location must have a line"); + assert(location.hasOwnProperty("column"), "location must have a column"); + + const { sourceUrl, line, column } = location; + assert(sourceUrl !== undefined, "pending location must have a source url"); + return { sourceUrl, line, column }; +} + +/** + * Create a new pending breakpoint, which is a more lightweight version of the regular breakpoint object. + */ +function createPendingBreakpoint(bp) { + return { + options: bp.options, + disabled: bp.disabled, + location: createPendingLocation(bp.location), + generatedLocation: createPendingLocation(bp.generatedLocation), + }; +} + +export default update; diff --git a/devtools/client/debugger/src/reducers/preview.js b/devtools/client/debugger/src/reducers/preview.js new file mode 100644 index 0000000000..d7ee396bf5 --- /dev/null +++ b/devtools/client/debugger/src/reducers/preview.js @@ -0,0 +1,30 @@ +/* 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/>. */ + +export function initialPreviewState() { + return { + preview: null, + previewCount: 0, + }; +} + +function update(state = initialPreviewState(), action) { + switch (action.type) { + case "CLEAR_PREVIEW": { + return { ...state, preview: null }; + } + + case "START_PREVIEW": { + return { ...state, previewCount: state.previewCount + 1 }; + } + + case "SET_PREVIEW": { + return { ...state, preview: action.value }; + } + } + + return state; +} + +export default update; diff --git a/devtools/client/debugger/src/reducers/project-text-search.js b/devtools/client/debugger/src/reducers/project-text-search.js new file mode 100644 index 0000000000..e803718240 --- /dev/null +++ b/devtools/client/debugger/src/reducers/project-text-search.js @@ -0,0 +1,82 @@ +/* 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/>. */ + +// @format + +/** + * Project text search reducer + * @module reducers/project-text-search + */ + +import { createLocation } from "../utils/location"; + +export const statusType = { + initial: "INITIAL", + fetching: "FETCHING", + cancelled: "CANCELLED", + done: "DONE", + error: "ERROR", +}; + +export function initialProjectTextSearchState(state) { + return { + query: state?.query || "", + results: [], + ongoingSearch: null, + status: statusType.initial, + }; +} + +function update(state = initialProjectTextSearchState(), action) { + switch (action.type) { + case "ADD_QUERY": + return { ...state, query: action.query }; + + case "ADD_SEARCH_RESULT": + const { location, matches } = action; + if (matches.length === 0) { + return state; + } + + const result = { + type: "RESULT", + location, + // `matches` are generated by project-search worker's `findSourceMatches` method + matches: matches.map(m => ({ + type: "MATCH", + location: createLocation({ + ...location, + // `matches` only contain line and column + // `location` will already refer to the right source/sourceActor + line: m.line, + column: m.column, + }), + matchIndex: m.matchIndex, + match: m.match, + value: m.value, + })), + }; + return { ...state, results: [...state.results, result] }; + + case "UPDATE_STATUS": + const ongoingSearch = + action.status == statusType.fetching ? state.ongoingSearch : null; + return { ...state, status: action.status, ongoingSearch }; + + case "CLEAR_SEARCH_RESULTS": + return { ...state, results: [] }; + + case "ADD_ONGOING_SEARCH": + return { ...state, ongoingSearch: action.ongoingSearch }; + + case "CLEAR_SEARCH": + case "CLOSE_PROJECT_SEARCH": + return initialProjectTextSearchState(); + case "NAVIGATE": + return initialProjectTextSearchState(state); + } + return state; +} + +export default update; diff --git a/devtools/client/debugger/src/reducers/quick-open.js b/devtools/client/debugger/src/reducers/quick-open.js new file mode 100644 index 0000000000..459e530e7b --- /dev/null +++ b/devtools/client/debugger/src/reducers/quick-open.js @@ -0,0 +1,41 @@ +/* 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/>. */ + +/** + * Quick Open reducer + * @module reducers/quick-open + */ + +import { parseQuickOpenQuery } from "../utils/quick-open"; + +export const initialQuickOpenState = () => ({ + enabled: false, + query: "", + searchType: "sources", +}); + +export default function update(state = initialQuickOpenState(), action) { + switch (action.type) { + case "OPEN_QUICK_OPEN": + if (action.query != null) { + return { + ...state, + enabled: true, + query: action.query, + searchType: parseQuickOpenQuery(action.query), + }; + } + return { ...state, enabled: true }; + case "CLOSE_QUICK_OPEN": + return initialQuickOpenState(); + case "SET_QUICK_OPEN_QUERY": + return { + ...state, + query: action.query, + searchType: parseQuickOpenQuery(action.query), + }; + default: + return state; + } +} diff --git a/devtools/client/debugger/src/reducers/source-actors.js b/devtools/client/debugger/src/reducers/source-actors.js new file mode 100644 index 0000000000..a7dfa19621 --- /dev/null +++ b/devtools/client/debugger/src/reducers/source-actors.js @@ -0,0 +1,90 @@ +/* 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/>. */ + +/** + * This reducer stores the list of all source actors as well their breakable lines. + * + * There is a one-one relationship with Source Actors from the server codebase, + * as well as SOURCE Resources distributed by the ResourceCommand API. + * + */ +function initialSourceActorsState() { + return { + // Map(Source Actor ID: string => SourceActor: object) + // See create.js: `createSourceActor` for the shape of the source actor objects. + mutableSourceActors: new Map(), + + // Map(Source Actor ID: string => Breakable lines: Array<Number>) + // The array is the list of all lines where breakpoints can be set + mutableBreakableLines: new Map(), + + // Set(Source Actor ID: string) + // List of all IDs of source actor which have a valid related source map / original source. + // The SourceActor object may have a sourceMapURL attribute set, + // but this may be invalid. The source map URL or source map file content may be invalid. + // In these scenarios we will remove the source actor from this set. + mutableSourceActorsWithSourceMap: new Set(), + }; +} + +export const initial = initialSourceActorsState(); + +export default function update(state = initialSourceActorsState(), action) { + switch (action.type) { + case "INSERT_SOURCE_ACTORS": { + for (const sourceActor of action.sourceActors) { + state.mutableSourceActors.set(sourceActor.id, sourceActor); + + // If the sourceMapURL attribute is set, consider that it is valid. + // But this may be revised later and removed from this Set. + if (sourceActor.sourceMapURL) { + state.mutableSourceActorsWithSourceMap.add(sourceActor.id); + } + } + return { + ...state, + }; + } + + case "REMOVE_THREAD": { + for (const sourceActor of state.mutableSourceActors.values()) { + if (sourceActor.thread == action.threadActorID) { + state.mutableSourceActors.delete(sourceActor.id); + state.mutableBreakableLines.delete(sourceActor.id); + state.mutableSourceActorsWithSourceMap.delete(sourceActor.id); + } + } + return { + ...state, + }; + } + + case "SET_SOURCE_ACTOR_BREAKABLE_LINES": + return updateBreakableLines(state, action); + + case "CLEAR_SOURCE_ACTOR_MAP_URL": + if (state.mutableSourceActorsWithSourceMap.delete(action.sourceActorId)) { + return { + ...state, + }; + } + return state; + } + + return state; +} + +function updateBreakableLines(state, action) { + const { sourceActorId } = action; + + // Ignore breakable lines for source actors that aren't/no longer registered + if (!state.mutableSourceActors.has(sourceActorId)) { + return state; + } + + state.mutableBreakableLines.set(sourceActorId, action.breakableLines); + return { + ...state, + }; +} diff --git a/devtools/client/debugger/src/reducers/source-blackbox.js b/devtools/client/debugger/src/reducers/source-blackbox.js new file mode 100644 index 0000000000..84e6d9ba8c --- /dev/null +++ b/devtools/client/debugger/src/reducers/source-blackbox.js @@ -0,0 +1,147 @@ +/* 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/>. */ + +/** + * Reducer containing all data about sources being "black boxed". + * + * i.e. sources which should be ignored by the debugger. + * Typically, these sources should be hidden from paused stack frames, + * and any debugger statement or breakpoint should be ignored. + */ + +export function initialSourceBlackBoxState(state) { + return { + /* FORMAT: + * blackboxedRanges: { + * [source url]: [range, range, ...], -- source lines blackboxed + * [source url]: [], -- whole source blackboxed + * ... + * } + */ + blackboxedRanges: state?.blackboxedRanges ?? {}, + + blackboxedSet: state?.blackboxedRanges + ? new Set(Object.keys(state.blackboxedRanges)) + : new Set(), + + sourceMapIgnoreListUrls: [], + }; +} + +function update(state = initialSourceBlackBoxState(), action) { + switch (action.type) { + case "BLACKBOX_WHOLE_SOURCES": { + const { sources } = action; + + const currentBlackboxedRanges = { ...state.blackboxedRanges }; + const currentBlackboxedSet = new Set(state.blackboxedSet); + + for (const source of sources) { + currentBlackboxedRanges[source.url] = []; + currentBlackboxedSet.add(source.url); + } + + return { + ...state, + blackboxedRanges: currentBlackboxedRanges, + blackboxedSet: currentBlackboxedSet, + }; + } + + case "BLACKBOX_SOURCE_RANGES": { + const { source, ranges } = action; + + const currentBlackboxedRanges = { ...state.blackboxedRanges }; + const currentBlackboxedSet = new Set(state.blackboxedSet); + + if (!currentBlackboxedRanges[source.url]) { + currentBlackboxedRanges[source.url] = []; + currentBlackboxedSet.add(source.url); + } else { + currentBlackboxedRanges[source.url] = [ + ...state.blackboxedRanges[source.url], + ]; + } + + // Add new blackboxed lines in acsending order + for (const newRange of ranges) { + const index = currentBlackboxedRanges[source.url].findIndex( + range => + range.end.line <= newRange.start.line && + range.end.column <= newRange.start.column + ); + currentBlackboxedRanges[source.url].splice(index + 1, 0, newRange); + } + + return { + ...state, + blackboxedRanges: currentBlackboxedRanges, + blackboxedSet: currentBlackboxedSet, + }; + } + + case "UNBLACKBOX_WHOLE_SOURCES": { + const { sources } = action; + + const currentBlackboxedRanges = { ...state.blackboxedRanges }; + const currentBlackboxedSet = new Set(state.blackboxedSet); + + for (const source of sources) { + delete currentBlackboxedRanges[source.url]; + currentBlackboxedSet.delete(source.url); + } + + return { + ...state, + blackboxedRanges: currentBlackboxedRanges, + blackboxedSet: currentBlackboxedSet, + }; + } + + case "UNBLACKBOX_SOURCE_RANGES": { + const { source, ranges } = action; + + const currentBlackboxedRanges = { + ...state.blackboxedRanges, + [source.url]: [...state.blackboxedRanges[source.url]], + }; + + for (const newRange of ranges) { + const index = currentBlackboxedRanges[source.url].findIndex( + range => + range.start.line === newRange.start.line && + range.end.line === newRange.end.line + ); + + if (index !== -1) { + currentBlackboxedRanges[source.url].splice(index, 1); + } + } + + return { + ...state, + blackboxedRanges: currentBlackboxedRanges, + }; + } + + case "ADD_SOURCEMAP_IGNORE_LIST_SOURCES": + if (action.status == "done") { + return { + ...state, + sourceMapIgnoreListUrls: [ + ...state.sourceMapIgnoreListUrls, + ...action.value, + ], + }; + } + return state; + + case "NAVIGATE": + return initialSourceBlackBoxState(state); + } + + return state; +} + +export default update; diff --git a/devtools/client/debugger/src/reducers/sources-content.js b/devtools/client/debugger/src/reducers/sources-content.js new file mode 100644 index 0000000000..b60cb059b9 --- /dev/null +++ b/devtools/client/debugger/src/reducers/sources-content.js @@ -0,0 +1,139 @@ +/* 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/>. */ + +/** + * Sources content reducer. + * + * This store the textual content for each source. + */ + +import { pending, fulfilled, rejected } from "../utils/async-value"; + +export function initialSourcesContentState() { + return { + /** + * Text content of all the original sources. + * This is large data, so this is only fetched on-demand for a subset of sources. + * This state attribute is mutable in order to avoid cloning this possibly large map + * on each new source. But selectors are never based on the map. Instead they only + * query elements of the map. + * + * Map(source id => AsyncValue<String>) + */ + mutableOriginalSourceTextContentMapBySourceId: new Map(), + + /** + * Text content of all the generated sources. + * + * Map(source actor is => AsyncValue<String>) + */ + mutableGeneratedSourceTextContentMapBySourceActorId: new Map(), + + /** + * Incremental number that is bumped each time we navigate to a new page. + * + * This is used to better handle async race condition where we mix previous page data + * with the new page. As sources are keyed by URL we may easily conflate the two page loads data. + */ + epoch: 1, + }; +} + +function update(state = initialSourcesContentState(), action) { + switch (action.type) { + case "LOAD_ORIGINAL_SOURCE_TEXT": + if (!action.sourceId) { + throw new Error("No source id found."); + } + return updateSourceTextContent(state, action); + + case "LOAD_GENERATED_SOURCE_TEXT": + if (!action.sourceActorId) { + throw new Error("No source actor id found."); + } + return updateSourceTextContent(state, action); + + case "REMOVE_THREAD": + return removeThread(state, action); + } + + return state; +} + +/* + * Update a source's loaded text content. + */ +function updateSourceTextContent(state, action) { + // If there was a navigation between the time the action was started and + // completed, we don't want to update the store. + if (action.epoch !== state.epoch) { + return state; + } + + let content; + if (action.status === "start") { + content = pending(); + } else if (action.status === "error") { + content = rejected(action.error); + } else if (typeof action.value.text === "string") { + content = fulfilled({ + type: "text", + value: action.value.text, + contentType: action.value.contentType, + }); + } else { + content = fulfilled({ + type: "wasm", + value: action.value.text, + }); + } + + if (action.sourceId && action.sourceActorId) { + throw new Error( + "Both the source id and the source actor should not exist at the same time" + ); + } + + if (action.sourceId) { + state.mutableOriginalSourceTextContentMapBySourceId.set( + action.sourceId, + content + ); + } + + if (action.sourceActorId) { + state.mutableGeneratedSourceTextContentMapBySourceActorId.set( + action.sourceActorId, + content + ); + } + + return { + ...state, + }; +} + +function removeThread(state, action) { + const originalSizeBefore = + state.mutableOriginalSourceTextContentMapBySourceId.size; + for (const source of action.sources) { + state.mutableOriginalSourceTextContentMapBySourceId.delete(source.id); + } + const generatedSizeBefore = + state.mutableGeneratedSourceTextContentMapBySourceActorId.size; + for (const actor of action.actors) { + state.mutableGeneratedSourceTextContentMapBySourceActorId.delete(actor.id); + } + if ( + originalSizeBefore != + state.mutableOriginalSourceTextContentMapBySourceId.size || + generatedSizeBefore != + state.mutableGeneratedSourceTextContentMapBySourceActorId.size + ) { + return { ...state }; + } + return state; +} + +export default update; diff --git a/devtools/client/debugger/src/reducers/sources-tree.js b/devtools/client/debugger/src/reducers/sources-tree.js new file mode 100644 index 0000000000..3658b0b059 --- /dev/null +++ b/devtools/client/debugger/src/reducers/sources-tree.js @@ -0,0 +1,585 @@ +/* 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/>. */ + +/** + * Sources tree reducer + * + * A Source Tree is composed of: + * + * - Thread Items To designate targets/threads. + * These are the roots of the Tree if no project directory is selected. + * + * - Group Items To designates the different domains used in the website. + * These are direct children of threads and may contain directory or source items. + * + * - Directory Items To designate all the folders. + * Note that each every folder has an items. The Source Tree React component is doing the magic to coallesce folders made of only one sub folder. + * + * - Source Items To designate sources. + * They are the leaves of the Tree. (we should not have empty directories.) + */ + +const IGNORED_URLS = ["debugger eval code", "XStringBundle"]; +const IGNORED_EXTENSIONS = ["css", "svg", "png"]; +import { isPretty } from "../utils/source"; +import { prefs } from "../utils/prefs"; + +export function initialSourcesTreeState() { + return { + // List of all Thread Tree Items. + // All other item types are children of these and aren't store in + // the reducer as top level objects. + threadItems: [], + + // List of `uniquePath` of Tree Items that are expanded. + // This should be all but Source Tree Items. + expanded: new Set(), + + // Reference to the currently focused Tree Item. + // It can be any type of Tree Item. + focusedItem: null, + + // Project root set from the Source Tree. + // This focuses the source tree on a subset of sources. + // This is a `uniquePath`, where ${thread} is replaced by "top-level" + // when we picked an item from the main thread. This allows to preserve + // the root selection on page reload. + projectDirectoryRoot: prefs.projectDirectoryRoot, + + // The name is displayed in Source Tree header + projectDirectoryRootName: prefs.projectDirectoryRootName, + + // Reports if the top level target is a web extension. + // If so, we should display all web extension sources. + isWebExtension: false, + + /** + * Boolean, to be set to true in order to display WebExtension's content scripts + * that are applied to the current page we are debugging. + * + * Covered by: browser_dbg-content-script-sources.js + * Bound to: devtools.chrome.enabled + * + */ + chromeAndExtensionsEnabled: prefs.chromeAndExtensionsEnabled, + }; +} + +// eslint-disable-next-line complexity +export default function update(state = initialSourcesTreeState(), action) { + switch (action.type) { + case "ADD_ORIGINAL_SOURCES": { + const { generatedSourceActor } = action; + const validOriginalSources = action.originalSources.filter(source => + isSourceVisibleInSourceTree( + source, + state.chromeAndExtensionsEnabled, + state.isWebExtension + ) + ); + if (!validOriginalSources.length) { + return state; + } + let changed = false; + // Fork the array only once for all the sources + const threadItems = [...state.threadItems]; + for (const source of validOriginalSources) { + changed |= addSource(threadItems, source, generatedSourceActor); + } + if (changed) { + return { + ...state, + threadItems, + }; + } + return state; + } + case "INSERT_SOURCE_ACTORS": { + // With this action, we only cover generated sources. + // (i.e. we need something else for sourcemapped/original sources) + // But we do want to process source actors in order to be able to display + // distinct Source Tree Items for sources with the same URL loaded in distinct thread. + // (And may be also later be able to highlight the many sources with the same URL loaded in a given thread) + const newSourceActors = action.sourceActors.filter(sourceActor => + isSourceVisibleInSourceTree( + sourceActor.sourceObject, + state.chromeAndExtensionsEnabled, + state.isWebExtension + ) + ); + if (!newSourceActors.length) { + return state; + } + let changed = false; + // Fork the array only once for all the sources + const threadItems = [...state.threadItems]; + for (const sourceActor of newSourceActors) { + // We mostly wanted to read the thread of the SourceActor, + // most of the interesting attributes are on the Source Object. + changed |= addSource( + threadItems, + sourceActor.sourceObject, + sourceActor + ); + } + if (changed) { + return { + ...state, + threadItems, + }; + } + return state; + } + + case "INSERT_THREAD": + state = { ...state }; + addThread(state, action.newThread); + return state; + + case "REMOVE_THREAD": { + const { threadActorID } = action; + const index = state.threadItems.findIndex(item => { + return item.threadActorID == threadActorID; + }); + + if (index == -1) { + return state; + } + + // Also clear focusedItem and expanded items related + // to this thread. These fields store uniquePath which starts + // with the thread actor ID. + let { focusedItem } = state; + if (focusedItem && focusedItem.uniquePath.startsWith(threadActorID)) { + focusedItem = null; + } + const expanded = new Set(); + for (const path of state.expanded) { + if (!path.startsWith(threadActorID)) { + expanded.add(path); + } + } + + const threadItems = [...state.threadItems]; + threadItems.splice(index, 1); + return { + ...state, + threadItems, + focusedItem, + expanded, + }; + } + + case "SET_EXPANDED_STATE": + return updateExpanded(state, action); + + case "SET_FOCUSED_SOURCE_ITEM": + return { ...state, focusedItem: action.item }; + + case "SET_PROJECT_DIRECTORY_ROOT": + const { url, name } = action; + return updateProjectDirectoryRoot(state, url, name); + + case "BLACKBOX_WHOLE_SOURCES": + case "BLACKBOX_SOURCE_RANGES": { + const sources = action.sources || [action.source]; + return updateBlackbox(state, sources, true); + } + + case "UNBLACKBOX_WHOLE_SOURCES": { + const sources = action.sources || [action.source]; + return updateBlackbox(state, sources, false); + } + } + return state; +} + +function addThread(state, thread) { + const threadActorID = thread.actor; + // When processing the top level target, + // see if we are debugging an extension. + if (thread.isTopLevel) { + state.isWebExtension = thread.isWebExtension; + } + let threadItem = state.threadItems.find(item => { + return item.threadActorID == threadActorID; + }); + if (!threadItem) { + threadItem = createThreadTreeItem(threadActorID); + state.threadItems = [...state.threadItems, threadItem]; + } else { + // We force updating the list to trigger mapStateToProps + // as the getSourcesTreeSources selector is awaiting for the `thread` attribute + // which we will set here. + state.threadItems = [...state.threadItems]; + } + // Inject the reducer thread object on Thread Tree Items + // (this is handy shortcut to have access to from React components) + // (this is also used by sortThreadItems to sort the thread as a Tree in the Browser Toolbox) + threadItem.thread = thread; + state.threadItems.sort(sortThreadItems); +} + +function updateBlackbox(state, sources, shouldBlackBox) { + const threadItems = [...state.threadItems]; + + for (const source of sources) { + for (const threadItem of threadItems) { + const sourceTreeItem = findSourceInThreadItem(source, threadItem); + if (sourceTreeItem) { + sourceTreeItem.isBlackBoxed = shouldBlackBox; + } + } + } + return { ...state, threadItems }; +} + +function updateExpanded(state, action) { + // We receive the full list of all expanded items + // (not only the one added/removed) + return { + ...state, + expanded: new Set(action.expanded), + }; +} + +/** + * Update the project directory root + */ +function updateProjectDirectoryRoot(state, root, name) { + // Only persists root within the top level target. + // Otherwise the thread actor ID will change on page reload and we won't match anything + if (!root || root.startsWith("top-level")) { + prefs.projectDirectoryRoot = root; + prefs.projectDirectoryRootName = name; + } + + return { + ...state, + projectDirectoryRoot: root, + projectDirectoryRootName: name, + }; +} + +function isSourceVisibleInSourceTree( + source, + chromeAndExtensionsEnabled, + debuggeeIsWebExtension +) { + return ( + !!source.url && + !IGNORED_EXTENSIONS.includes(source.displayURL.fileExtension) && + !IGNORED_URLS.includes(source.url) && + !isPretty(source) && + // Only accept web extension sources when the chrome pref is enabled (to allows showing content scripts), + // or when we are debugging an extension + (!source.isExtension || + chromeAndExtensionsEnabled || + debuggeeIsWebExtension) + ); +} + +function addSource(threadItems, source, sourceActor) { + // Ensure creating or fetching the related Thread Item + let threadItem = threadItems.find(item => { + return item.threadActorID == sourceActor.thread; + }); + if (!threadItem) { + threadItem = createThreadTreeItem(sourceActor.thread); + // Note that threadItems will be cloned once to force a state update + // by the callsite of `addSourceActor` + threadItems.push(threadItem); + threadItems.sort(sortThreadItems); + } + + // Then ensure creating or fetching the related Group Item + // About `source` versus `sourceActor`: + const { displayURL } = source; + const { group } = displayURL; + + let groupItem = threadItem.children.find(item => { + return item.groupName == group; + }); + + if (!groupItem) { + groupItem = createGroupTreeItem(group, threadItem, source); + // Copy children in order to force updating react in case we picked + // this directory as a project root + threadItem.children = [...threadItem.children, groupItem]; + // As we add a new item, re-sort the groups in this thread + threadItem.children.sort(sortItems); + } + + // Then ensure creating or fetching all possibly nested Directory Item(s) + const { path } = displayURL; + const parentPath = path.substring(0, path.lastIndexOf("/")); + const directoryItem = addOrGetParentDirectory(groupItem, parentPath); + + // Check if a previous source actor registered this source. + // It happens if we load the same url multiple times, or, + // for inline sources (=HTML pages with inline scripts). + const existing = directoryItem.children.find(item => { + return item.type == "source" && item.source == source; + }); + if (existing) { + return false; + } + + // Finaly, create the Source Item and register it in its parent Directory Item + const sourceItem = createSourceTreeItem(source, sourceActor, directoryItem); + // Copy children in order to force updating react in case we picked + // this directory as a project root + directoryItem.children = [...directoryItem.children, sourceItem]; + // Re-sort the items in this directory + directoryItem.children.sort(sortItems); + + return true; +} +/** + * Find all the source items in tree + * @param {Object} item - Current item node in the tree + * @param {Function} callback + */ +function findSourceInThreadItem(source, threadItem) { + const { displayURL } = source; + const { group, path } = displayURL; + const groupItem = threadItem.children.find(item => { + return item.groupName == group; + }); + if (!groupItem) return null; + + const parentPath = path.substring(0, path.lastIndexOf("/")); + const directoryItem = groupItem._allGroupDirectoryItems.find(item => { + return item.type == "directory" && item.path == parentPath; + }); + if (!directoryItem) return null; + + return directoryItem.children.find(item => { + return item.type == "source" && item.source == source; + }); +} + +function sortItems(a, b) { + if (a.type == "directory" && b.type == "source") { + return -1; + } else if (b.type == "directory" && a.type == "source") { + return 1; + } else if (a.type == "directory" && b.type == "directory") { + return a.path.localeCompare(b.path); + } else if (a.type == "source" && b.type == "source") { + return a.source.displayURL.filename.localeCompare( + b.source.displayURL.filename + ); + } + return 0; +} + +function sortThreadItems(a, b) { + // Jest tests aren't emitting the necessary actions to populate the thread attributes. + // Ignore sorting for them. + if (!a.thread || !b.thread) { + return 0; + } + + // Top level target is always listed first + if (a.thread.isTopLevel) { + return -1; + } else if (b.thread.isTopLevel) { + return 1; + } + + // Process targets should come next and after that frame targets + if (a.thread.targetType == "process" && b.thread.targetType == "frame") { + return -1; + } else if ( + a.thread.targetType == "frame" && + b.thread.targetType == "process" + ) { + return 1; + } + + // And we display the worker targets last. + if ( + a.thread.targetType.endsWith("worker") && + !b.thread.targetType.endsWith("worker") + ) { + return 1; + } else if ( + !a.thread.targetType.endsWith("worker") && + b.thread.targetType.endsWith("worker") + ) { + return -1; + } + + // Order the process targets by their process ids + if (a.thread.processID > b.thread.processID) { + return 1; + } else if (a.thread.processID < b.thread.processID) { + return 0; + } + + // Order the frame targets and the worker targets by their target name + if (a.thread.targetType == "frame" && b.thread.targetType == "frame") { + return a.thread.name.localeCompare(b.thread.name); + } else if ( + a.thread.targetType.endsWith("worker") && + b.thread.targetType.endsWith("worker") + ) { + return a.thread.name.localeCompare(b.thread.name); + } + + return 0; +} + +/** + * For a given URL's path, in the given group (i.e. typically a given scheme+domain), + * return the already existing parent directory item, or create it if it doesn't exists. + * Note that it will create all ancestors up to the Group Item. + * + * @param {GroupItem} groupItem + * The Group Item for the group where the path should be displayed. + * @param {String} path + * Path of the directory for which we want a Directory Item. + * @return {GroupItem|DirectoryItem} + * The parent Item where this path should be inserted. + * Note that it may be displayed right under the Group Item if the path is empty. + */ +function addOrGetParentDirectory(groupItem, path) { + // We reached the top of the Tree, so return the Group Item. + if (!path) { + return groupItem; + } + // See if we have this directory already registered by a previous source + const existing = groupItem._allGroupDirectoryItems.find(item => { + return item.type == "directory" && item.path == path; + }); + if (existing) { + return existing; + } + // It doesn't exists, so we will create a new Directory Item. + // But now, lookup recursively for the parent Item for this to-be-create Directory Item + const parentPath = path.substring(0, path.lastIndexOf("/")); + const parentDirectory = addOrGetParentDirectory(groupItem, parentPath); + + // We can now create the new Directory Item and register it in its parent Item. + const directory = createDirectoryTreeItem(path, parentDirectory); + // Copy children in order to force updating react in case we picked + // this directory as a project root + parentDirectory.children = [...parentDirectory.children, directory]; + // Re-sort the items in this directory + parentDirectory.children.sort(sortItems); + + // Also maintain the list of all group items, + // Which helps speedup querying for existing items. + groupItem._allGroupDirectoryItems.push(directory); + + return directory; +} + +/** + * Definition of all Items of a SourceTree + */ +// Highlights the attributes that all Source Tree Item should expose +function createBaseTreeItem({ type, parent, uniquePath, children }) { + return { + // Can be: thread, group, directory or source + type, + // Reference to the parent TreeItem + parent, + // This attribute is used for two things: + // * as a string key identified in the React Tree + // * for project root in order to find the root in the tree + // It is of the form: + // `${ThreadActorID}|${GroupName}|${DirectoryPath}|${SourceID}` + // Group and path/ID are optional. + // `|` is used as separator in order to avoid having this character being used in name/path/IDs. + uniquePath, + // Array of TreeItem, children of this item. + // Will be null for Source Tree Item + children, + }; +} +function createThreadTreeItem(thread) { + return { + ...createBaseTreeItem({ + type: "thread", + // Each thread is considered as an independant root item + parent: null, + uniquePath: thread, + // Children of threads will only be Group Items + children: [], + }), + + // This will be used to set the reducer's thread object. + // This threadActorID attribute isn't meant to be used outside of this selector. + // A `thread` attribute will be exposed from INSERT_THREAD action. + threadActorID: thread, + }; +} +function createGroupTreeItem(groupName, parent, source) { + return { + ...createBaseTreeItem({ + type: "group", + parent, + uniquePath: `${parent.uniquePath}|${groupName}`, + // Children of Group can be Directory and Source items + children: [], + }), + + groupName, + + // When a content script appear in a web page, + // a dedicated group is created for it and should + // be having an extension icon. + isForExtensionSource: source.isExtension, + + // List of all nested items for this group. + // This helps find any nested directory in a given group without having to walk the tree. + // This is meant to be used only by the reducer. + _allGroupDirectoryItems: [], + }; +} +function createDirectoryTreeItem(path, parent) { + // If the parent is a group we want to use '/' as separator + const pathSeparator = parent.type == "directory" ? "/" : "|"; + + // `path` will be the absolute path from the group/domain, + // while we want to append only the directory name in uniquePath. + // Also, we need to strip '/' prefix. + const relativePath = + parent.type == "directory" + ? path.replace(parent.path, "").replace(/^\//, "") + : path; + + return { + ...createBaseTreeItem({ + type: "directory", + parent, + uniquePath: `${parent.uniquePath}${pathSeparator}${relativePath}`, + // Children can be nested Directory or Source items + children: [], + }), + + // This is the absolute path from the "group" + // i.e. the path from the domain name + // For http://mozilla.org/foo/bar folder, + // path will be: + // foo/bar + path, + }; +} +function createSourceTreeItem(source, sourceActor, parent) { + return { + ...createBaseTreeItem({ + type: "source", + parent, + uniquePath: `${parent.uniquePath}|${source.id}`, + // Sources items are leaves of the SourceTree + children: null, + }), + + source, + sourceActor, + }; +} diff --git a/devtools/client/debugger/src/reducers/sources.js b/devtools/client/debugger/src/reducers/sources.js new file mode 100644 index 0000000000..0d1c55be13 --- /dev/null +++ b/devtools/client/debugger/src/reducers/sources.js @@ -0,0 +1,361 @@ +/* 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/>. */ + +/** + * Sources reducer + * @module reducers/sources + */ + +import { originalToGeneratedId } from "devtools/client/shared/source-map-loader/index"; +import { prefs } from "../utils/prefs"; +import { createPendingSelectedLocation } from "../utils/location"; + +export function initialSourcesState(state) { + /* eslint sort-keys: "error" */ + return { + /** + * List of all breakpoint positions for all sources (generated and original). + * Map of source id (string) to dictionary object whose keys are line numbers + * and values of array of positions. + * A position is an object made with two attributes: + * location and generatedLocation. Both refering to breakpoint positions + * in original and generated sources. + * In case of generated source, the two location will be the same. + * + * Map(source id => Dictionary(int => array<Position>)) + */ + mutableBreakpointPositions: new Map(), + + /** + * List of all breakable lines for original sources only. + * + * Map(source id => array<int : breakable line numbers>) + */ + mutableOriginalBreakableLines: new Map(), + + /** + * Map of the source id's to one or more related original source id's + * Only generated sources which have related original sources will be maintained here. + * + * Map(source id => array<Original Source ID>) + */ + mutableOriginalSources: new Map(), + + /** + * List of override objects whose sources texts have been locally overridden. + * + * Object { sourceUrl, path } + */ + mutableOverrideSources: state?.mutableOverrideSources || new Map(), + + /** + * Mapping of source id's to one or more source-actor's. + * Dictionary whose keys are source id's and values are arrays + * made of all the related source-actor's. + * Note: The source mapped here are only generated sources. + * + * "source" are the objects stored in this reducer, in the `sources` attribute. + * "source-actor" are the objects stored in the "source-actors.js" reducer, in its `sourceActors` attribute. + * + * Map(source id => array<Source Actor object>) + */ + mutableSourceActors: new Map(), + + /** + * All currently available sources. + * + * See create.js: `createSourceObject` method for the description of stored objects. + */ + mutableSources: new Map(), + + /** + * All sources associated with a given URL. When using source maps, multiple + * sources can have the same URL. + * + * Map(url => array<source>) + */ + mutableSourcesPerUrl: new Map(), + + /** + * When we want to select a source that isn't available yet, use this. + * The location object should have a url attribute instead of a sourceId. + * + * See `createPendingSelectedLocation` for the definition of this object. + */ + pendingSelectedLocation: prefs.pendingSelectedLocation, + + /** + * The actual currently selected location. + * Only set if the related source is already registered in the sources reducer. + * Otherwise, pendingSelectedLocation should be used. Typically for sources + * which are about to be created. + * + * It also includes line and column information. + * + * See `createLocation` for the definition of this object. + */ + selectedLocation: undefined, + + /** + * By default, if we have a source-mapped source, we would automatically try + * to select and show the content of the original source. But, if we explicitly + * select a generated source, we remember this choice. That, until we explicitly + * select an original source. + * Note that selections related to non-source-mapped sources should never + * change this setting. + */ + shouldSelectOriginalLocation: true, + }; + /* eslint-disable sort-keys */ +} + +function update(state = initialSourcesState(), action) { + switch (action.type) { + case "ADD_SOURCES": + return addSources(state, action.sources); + + case "ADD_ORIGINAL_SOURCES": + return addSources(state, action.originalSources); + + case "INSERT_SOURCE_ACTORS": + return insertSourceActors(state, action); + + case "SET_SELECTED_LOCATION": { + let pendingSelectedLocation = null; + + if (action.location.source.url) { + pendingSelectedLocation = createPendingSelectedLocation( + action.location + ); + prefs.pendingSelectedLocation = pendingSelectedLocation; + } + + return { + ...state, + selectedLocation: action.location, + pendingSelectedLocation, + shouldSelectOriginalLocation: action.shouldSelectOriginalLocation, + }; + } + + case "CLEAR_SELECTED_LOCATION": { + const pendingSelectedLocation = { url: "" }; + prefs.pendingSelectedLocation = pendingSelectedLocation; + + return { + ...state, + selectedLocation: null, + pendingSelectedLocation, + }; + } + + case "SET_PENDING_SELECTED_LOCATION": { + const pendingSelectedLocation = { + url: action.url, + line: action.line, + column: action.column, + }; + + prefs.pendingSelectedLocation = pendingSelectedLocation; + return { ...state, pendingSelectedLocation }; + } + + case "SET_ORIGINAL_BREAKABLE_LINES": { + state.mutableOriginalBreakableLines.set( + action.sourceId, + action.breakableLines + ); + + return { + ...state, + }; + } + + case "ADD_BREAKPOINT_POSITIONS": { + // Merge existing and new reported position if some where already stored + let positions = state.mutableBreakpointPositions.get(action.source.id); + if (positions) { + positions = { ...positions, ...action.positions }; + } else { + positions = action.positions; + } + + state.mutableBreakpointPositions.set(action.source.id, positions); + + return { + ...state, + }; + } + + case "REMOVE_THREAD": { + return removeSourcesAndActors(state, action); + } + + case "SET_OVERRIDE": { + state.mutableOverrideSources.set(action.url, action.path); + return state; + } + + case "REMOVE_OVERRIDE": { + if (state.mutableOverrideSources.has(action.url)) { + state.mutableOverrideSources.delete(action.url); + } + return state; + } + } + + return state; +} + +/* + * Add sources to the sources store + * - Add the source to the sources store + * - Add the source URL to the source url map + */ +function addSources(state, sources) { + for (const source of sources) { + state.mutableSources.set(source.id, source); + + // Update the source url map + const existing = state.mutableSourcesPerUrl.get(source.url); + if (existing) { + // We never return this array from selectors as-is, + // we either return the first entry or lookup for a precise entry + // so we can mutate it. + existing.push(source); + } else { + state.mutableSourcesPerUrl.set(source.url, [source]); + } + + // In case of original source, maintain the mapping of generated source to original sources map. + if (source.isOriginal) { + const generatedSourceId = originalToGeneratedId(source.id); + let originalSourceIds = + state.mutableOriginalSources.get(generatedSourceId); + if (!originalSourceIds) { + originalSourceIds = []; + state.mutableOriginalSources.set(generatedSourceId, originalSourceIds); + } + // We never return this array out of selectors, so mutate the list + originalSourceIds.push(source.id); + } + } + + return { ...state }; +} + +function removeSourcesAndActors(state, action) { + const { + mutableSourcesPerUrl, + mutableSources, + mutableOriginalSources, + mutableSourceActors, + mutableOriginalBreakableLines, + mutableBreakpointPositions, + } = state; + + const newState = { ...state }; + + for (const removedSource of action.sources) { + const sourceId = removedSource.id; + + // Clear the urls Map + const sourceUrl = removedSource.url; + if (sourceUrl) { + const sourcesForSameUrl = ( + mutableSourcesPerUrl.get(sourceUrl) || [] + ).filter(s => s != removedSource); + if (!sourcesForSameUrl.length) { + // All sources with this URL have been removed + mutableSourcesPerUrl.delete(sourceUrl); + } else { + // There are other sources still alive with the same URL + mutableSourcesPerUrl.set(sourceUrl, sourcesForSameUrl); + } + } + + mutableSources.delete(sourceId); + + // Note that the caller of this method queried the reducer state + // to aggregate the related original sources. + // So if we were having related original sources, they will be + // in `action.sources`. + mutableOriginalSources.delete(sourceId); + + // If a source is removed, immediately remove all its related source actors. + // It can speed-up the following for loop cleaning actors. + mutableSourceActors.delete(sourceId); + + if (removedSource.isOriginal) { + mutableOriginalBreakableLines.delete(sourceId); + } + + mutableBreakpointPositions.delete(sourceId); + + if (newState.selectedLocation?.source == removedSource) { + newState.selectedLocation = null; + } + } + + for (const removedActor of action.actors) { + const sourceId = removedActor.source; + const actorsForSource = mutableSourceActors.get(sourceId); + // actors may have already been cleared by the previous for..loop + if (!actorsForSource) { + continue; + } + const idx = actorsForSource.indexOf(removedActor); + if (idx != -1) { + actorsForSource.splice(idx, 1); + // While the Map is mutable, we expect new array instance on each new change + mutableSourceActors.set(sourceId, [...actorsForSource]); + } + + // Remove the entry in the Map if there is no more actors for that source + if (!actorsForSource.length) { + mutableSourceActors.delete(sourceId); + } + + if (newState.selectedLocation?.sourceActor == removedActor) { + newState.selectedLocation = null; + } + } + + return newState; +} + +function insertSourceActors(state, action) { + const { sourceActors } = action; + + const { mutableSourceActors } = state; + // The `sourceActor` objects are defined from `newGeneratedSources` action: + // https://searchfox.org/mozilla-central/rev/4646b826a25d3825cf209db890862b45fa09ffc3/devtools/client/debugger/src/actions/sources/newSources.js#300-314 + for (const sourceActor of sourceActors) { + const sourceId = sourceActor.source; + // We always clone the array of source actors as we return it from selectors. + // So the map is mutable, but its values are considered immutable and will change + // anytime there is a new actor added per source ID. + const existing = mutableSourceActors.get(sourceId); + if (existing) { + mutableSourceActors.set(sourceId, [...existing, sourceActor]); + } else { + mutableSourceActors.set(sourceId, [sourceActor]); + } + } + + const scriptActors = sourceActors.filter( + item => item.introductionType === "scriptElement" + ); + if (scriptActors.length) { + // If new HTML sources are being added, we need to clear the breakpoint + // positions since the new source is a <script> with new breakpoints. + for (const { source } of scriptActors) { + state.mutableBreakpointPositions.delete(source); + } + } + + return { ...state }; +} + +export default update; diff --git a/devtools/client/debugger/src/reducers/tabs.js b/devtools/client/debugger/src/reducers/tabs.js new file mode 100644 index 0000000000..98e33b255c --- /dev/null +++ b/devtools/client/debugger/src/reducers/tabs.js @@ -0,0 +1,208 @@ +/* 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/>. */ + +/** + * Tabs reducer + * @module reducers/tabs + */ + +import { isOriginalId } from "devtools/client/shared/source-map-loader/index"; + +import { isSimilarTab } from "../utils/tabs"; + +export function initialTabState() { + return { tabs: [] }; +} + +function update(state = initialTabState(), action) { + switch (action.type) { + case "ADD_TAB": + return updateTabList(state, action.source, action.sourceActor); + + case "MOVE_TAB": + return moveTabInList(state, action); + + case "MOVE_TAB_BY_SOURCE_ID": + return moveTabInListBySourceId(state, action); + + case "CLOSE_TAB": + return removeSourceFromTabList(state, action); + + case "CLOSE_TABS": + return removeSourcesFromTabList(state, action); + + case "ADD_ORIGINAL_SOURCES": + return addVisibleTabsForOriginalSources( + state, + action.originalSources, + action.generatedSourceActor + ); + + case "INSERT_SOURCE_ACTORS": + return addVisibleTabsForSourceActors(state, action.sourceActors); + + case "REMOVE_THREAD": { + return resetTabsForThread(state, action.threadActorID); + } + + default: + return state; + } +} + +function matchesSource(tab, source) { + return tab.source?.id === source.id || matchesUrl(tab, source); +} + +function matchesUrl(tab, source) { + return tab.url === source.url && tab.isOriginal == isOriginalId(source.id); +} + +function addVisibleTabsForSourceActors(state, sourceActors) { + let changed = false; + // Lookups for tabs matching any source actor's URL + // and reference their source and sourceActor attribute + // so that the tab becomes visible. + const tabs = state.tabs.map(tab => { + const sourceActor = sourceActors.find(actor => + matchesUrl(tab, actor.sourceObject) + ); + if (!sourceActor) { + return tab; + } + changed = true; + return { + ...tab, + source: sourceActor.sourceObject, + sourceActor, + }; + }); + + return changed ? { tabs } : state; +} + +function addVisibleTabsForOriginalSources( + state, + sources, + generatedSourceActor +) { + let changed = false; + + // Lookups for tabs matching any source's URL + // and reference their source and sourceActor attribute + // so that the tab becomes visible. + const tabs = state.tabs.map(tab => { + const source = sources.find(s => matchesUrl(tab, s)); + if (!source) { + return tab; + } + changed = true; + return { + ...tab, + source, + // All currently reported original sources are related to a single source actor + sourceActor: generatedSourceActor, + }; + }); + + return changed ? { tabs } : state; +} + +function removeSourceFromTabList(state, { source }) { + const newTabs = state.tabs.filter(tab => !matchesSource(tab, source)); + if (newTabs.length == state.tabs.length) { + return state; + } + return { tabs: newTabs }; +} + +function removeSourcesFromTabList(state, { sources }) { + const newTabs = sources.reduce( + (tabList, source) => tabList.filter(tab => !matchesSource(tab, source)), + state.tabs + ); + if (newTabs.length == state.tabs.length) { + return state; + } + + return { tabs: newTabs }; +} + +function resetTabsForThread(state, threadActorID) { + let changed = false; + // Nullify source and sourceActor attributes of all tabs + // related to the given thread so that they become hidden. + // + // They may later be restored if a source matches their URL again. + // This is similar to persistTabs, but specific to a unique thread. + const tabs = state.tabs.map(tab => { + if (tab.sourceActor?.thread != threadActorID) { + return tab; + } + changed = true; + return { + ...tab, + source: null, + sourceActor: null, + }; + }); + + return changed ? { tabs } : state; +} + +/** + * Adds the new source to the tab list if it is not already there. + */ +function updateTabList(state, source, sourceActor) { + const { url } = source; + const isOriginal = isOriginalId(source.id); + + let { tabs } = state; + // Set currentIndex to -1 for URL-less tabs so that they aren't + // filtered by isSimilarTab + const currentIndex = url + ? tabs.findIndex(tab => isSimilarTab(tab, url, isOriginal)) + : -1; + + if (currentIndex === -1) { + const newTab = { + url, + source, + isOriginal, + sourceActor, + }; + // New tabs are added first in the list + tabs = [newTab, ...tabs]; + } else { + return state; + } + + return { ...state, tabs }; +} + +function moveTabInList(state, { url, tabIndex: newIndex }) { + const { tabs } = state; + const currentIndex = tabs.findIndex(tab => tab.url == url); + return moveTab(tabs, currentIndex, newIndex); +} + +function moveTabInListBySourceId(state, { sourceId, tabIndex: newIndex }) { + const { tabs } = state; + const currentIndex = tabs.findIndex(tab => tab.source?.id == sourceId); + return moveTab(tabs, currentIndex, newIndex); +} + +function moveTab(tabs, currentIndex, newIndex) { + const item = tabs[currentIndex]; + + const newTabs = Array.from(tabs); + // Remove the item from its current location + newTabs.splice(currentIndex, 1); + // And add it to the new one + newTabs.splice(newIndex, 0, item); + + return { tabs: newTabs }; +} + +export default update; diff --git a/devtools/client/debugger/src/reducers/tests/breakpoints.spec.js b/devtools/client/debugger/src/reducers/tests/breakpoints.spec.js new file mode 100644 index 0000000000..aa7f71d7a5 --- /dev/null +++ b/devtools/client/debugger/src/reducers/tests/breakpoints.spec.js @@ -0,0 +1,74 @@ +/* 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/>. */ + +import { initialBreakpointsState } from "../breakpoints"; +import { getBreakpointsForSource } from "../../selectors/breakpoints"; + +import { makeMockBreakpoint, makeMockSource } from "../../utils/test-mockup"; + +function initializeStateWith(data) { + const state = initialBreakpointsState(); + state.breakpoints = data; + return state; +} + +describe("Breakpoints Selectors", () => { + it("it gets a breakpoint for an original source", () => { + const sourceId = "server1.conn1.child1/source1/originalSource"; + const matchingBreakpoints = { + id1: makeMockBreakpoint(makeMockSource(undefined, sourceId), 1), + }; + + const otherBreakpoints = { + id2: makeMockBreakpoint(makeMockSource(undefined, "not-this-source"), 1), + }; + + const data = { + ...matchingBreakpoints, + ...otherBreakpoints, + }; + + const breakpoints = initializeStateWith(data); + const allBreakpoints = Object.values(matchingBreakpoints); + const sourceBreakpoints = getBreakpointsForSource( + { breakpoints }, + sourceId + ); + + expect(sourceBreakpoints).toEqual(allBreakpoints); + expect(sourceBreakpoints[0] === allBreakpoints[0]).toBe(true); + }); + + it("it gets a breakpoint for a generated source", () => { + const generatedSourceId = "random-source"; + const matchingBreakpoints = { + id1: { + ...makeMockBreakpoint(makeMockSource(undefined, generatedSourceId), 1), + location: { line: 1, source: { id: "original-source-id-1" } }, + }, + }; + + const otherBreakpoints = { + id2: { + ...makeMockBreakpoint(makeMockSource(undefined, "not-this-source"), 1), + location: { line: 1, source: { id: "original-source-id-2" } }, + }, + }; + + const data = { + ...matchingBreakpoints, + ...otherBreakpoints, + }; + + const breakpoints = initializeStateWith(data); + + const allBreakpoints = Object.values(matchingBreakpoints); + const sourceBreakpoints = getBreakpointsForSource( + { breakpoints }, + generatedSourceId + ); + + expect(sourceBreakpoints).toEqual(allBreakpoints); + }); +}); diff --git a/devtools/client/debugger/src/reducers/tests/quick-open.spec.js b/devtools/client/debugger/src/reducers/tests/quick-open.spec.js new file mode 100644 index 0000000000..cd91b040be --- /dev/null +++ b/devtools/client/debugger/src/reducers/tests/quick-open.spec.js @@ -0,0 +1,59 @@ +/* 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/>. */ + +import update, { initialQuickOpenState } from "../quick-open"; +import { + getQuickOpenEnabled, + getQuickOpenQuery, + getQuickOpenType, +} from "../../selectors/quick-open"; +import { + setQuickOpenQuery, + openQuickOpen, + closeQuickOpen, +} from "../../actions/quick-open"; + +describe("quickOpen reducer", () => { + test("initial state", () => { + const state = update(undefined, { type: "FAKE" }); + expect(getQuickOpenQuery({ quickOpen: state })).toEqual(""); + expect(getQuickOpenType({ quickOpen: state })).toEqual("sources"); + }); + + test("opens the quickOpen modal", () => { + const state = update(initialQuickOpenState(), openQuickOpen()); + expect(getQuickOpenEnabled({ quickOpen: state })).toEqual(true); + }); + + test("closes the quickOpen modal", () => { + let state = update(initialQuickOpenState(), openQuickOpen()); + expect(getQuickOpenEnabled({ quickOpen: state })).toEqual(true); + state = update(initialQuickOpenState(), closeQuickOpen()); + expect(getQuickOpenEnabled({ quickOpen: state })).toEqual(false); + }); + + test("leaves query alone on open if not provided", () => { + const state = update(initialQuickOpenState(), openQuickOpen()); + expect(getQuickOpenQuery({ quickOpen: state })).toEqual(""); + expect(getQuickOpenType({ quickOpen: state })).toEqual("sources"); + }); + + test("set query on open if provided", () => { + const state = update(initialQuickOpenState(), openQuickOpen("@")); + expect(getQuickOpenQuery({ quickOpen: state })).toEqual("@"); + expect(getQuickOpenType({ quickOpen: state })).toEqual("functions"); + }); + + test("clear query on close", () => { + const state = update(initialQuickOpenState(), closeQuickOpen()); + expect(getQuickOpenQuery({ quickOpen: state })).toEqual(""); + expect(getQuickOpenType({ quickOpen: state })).toEqual("sources"); + }); + + test("sets the query to the provided string", () => { + const state = update(initialQuickOpenState(), setQuickOpenQuery("test")); + expect(getQuickOpenQuery({ quickOpen: state })).toEqual("test"); + expect(getQuickOpenType({ quickOpen: state })).toEqual("sources"); + }); +}); diff --git a/devtools/client/debugger/src/reducers/tests/ui.spec.js b/devtools/client/debugger/src/reducers/tests/ui.spec.js new file mode 100644 index 0000000000..0be451429f --- /dev/null +++ b/devtools/client/debugger/src/reducers/tests/ui.spec.js @@ -0,0 +1,30 @@ +/* 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/>. */ + +import { prefs } from "../../utils/prefs"; +import update, { initialUIState } from "../ui"; + +describe("ui reducer", () => { + it("toggle framework grouping to false", () => { + const state = initialUIState(); + const value = false; + const updatedState = update(state, { + type: "TOGGLE_FRAMEWORK_GROUPING", + value, + }); + expect(updatedState.frameworkGroupingOn).toBe(value); + expect(prefs.frameworkGroupingOn).toBe(value); + }); + + it("toggle framework grouping to true", () => { + const state = initialUIState(); + const value = true; + const updatedState = update(state, { + type: "TOGGLE_FRAMEWORK_GROUPING", + value, + }); + expect(updatedState.frameworkGroupingOn).toBe(value); + expect(prefs.frameworkGroupingOn).toBe(value); + }); +}); diff --git a/devtools/client/debugger/src/reducers/threads.js b/devtools/client/debugger/src/reducers/threads.js new file mode 100644 index 0000000000..0131c6c7e8 --- /dev/null +++ b/devtools/client/debugger/src/reducers/threads.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/>. */ + +/** + * Threads reducer + * @module reducers/threads + */ + +export function initialThreadsState() { + return { + threads: [], + + // List of thread actor IDs which are current tracing. + // i.e. where JavaScript tracing is enabled. + mutableTracingThreads: new Set(), + }; +} + +export default function update(state = initialThreadsState(), action) { + switch (action.type) { + case "INSERT_THREAD": + return { + ...state, + threads: [...state.threads, action.newThread], + }; + + case "REMOVE_THREAD": + return { + ...state, + threads: state.threads.filter( + thread => action.threadActorID != thread.actor + ), + }; + + case "UPDATE_SERVICE_WORKER_STATUS": + return { + ...state, + threads: state.threads.map(t => { + if (t.actor == action.thread) { + return { ...t, serviceWorkerStatus: action.status }; + } + return t; + }), + }; + + case "TRACING_TOGGLED": + const { mutableTracingThreads } = state; + const sizeBefore = mutableTracingThreads.size; + if (action.enabled) { + mutableTracingThreads.add(action.thread); + } else { + mutableTracingThreads.delete(action.thread); + } + // We may receive toggle events when we change the logging method + // while we are already tracing, but the list of tracing thread stays the same. + const changed = mutableTracingThreads.size != sizeBefore; + if (changed) { + return { + ...state, + mutableTracingThreads, + }; + } + return state; + + default: + return state; + } +} diff --git a/devtools/client/debugger/src/reducers/ui.js b/devtools/client/debugger/src/reducers/ui.js new file mode 100644 index 0000000000..192d2c9751 --- /dev/null +++ b/devtools/client/debugger/src/reducers/ui.js @@ -0,0 +1,197 @@ +/* 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/>. */ + +/* eslint complexity: ["error", 35]*/ + +/** + * UI reducer + * @module reducers/ui + */ + +import { prefs, features } from "../utils/prefs"; +import { searchKeys } from "../constants"; + +export const initialUIState = () => ({ + selectedPrimaryPaneTab: "sources", + activeSearch: null, + startPanelCollapsed: prefs.startPanelCollapsed, + endPanelCollapsed: prefs.endPanelCollapsed, + frameworkGroupingOn: prefs.frameworkGroupingOn, + + // This is used from Outline's copy to clipboard context menu + // and QuickOpen to highlight lines temporarily. + // If defined, it will be an object with following attributes: + // - sourceId, String + // - start, Number, start line to highlight, 1-based + // - end, Number, end line to highlight, 1-based + highlightedLineRange: null, + + conditionalPanelLocation: null, + isLogPoint: false, + orientation: "horizontal", + viewport: null, + cursorPosition: null, + inlinePreviewEnabled: features.inlinePreview, + editorWrappingEnabled: prefs.editorWrapping, + javascriptEnabled: true, + javascriptTracingLogMethod: prefs.javascriptTracingLogMethod, + mutableSearchOptions: prefs.searchOptions || { + [searchKeys.FILE_SEARCH]: { + regexMatch: false, + wholeWord: false, + caseSensitive: false, + excludePatterns: "", + }, + [searchKeys.PROJECT_SEARCH]: { + regexMatch: false, + wholeWord: false, + caseSensitive: false, + excludePatterns: "", + }, + [searchKeys.QUICKOPEN_SEARCH]: { + regexMatch: false, + wholeWord: false, + caseSensitive: false, + excludePatterns: "", + }, + }, + hideIgnoredSources: prefs.hideIgnoredSources, + sourceMapIgnoreListEnabled: prefs.sourceMapIgnoreListEnabled, +}); + +function update(state = initialUIState(), action) { + switch (action.type) { + case "TOGGLE_ACTIVE_SEARCH": { + return { ...state, activeSearch: action.value }; + } + + case "TOGGLE_FRAMEWORK_GROUPING": { + prefs.frameworkGroupingOn = action.value; + return { ...state, frameworkGroupingOn: action.value }; + } + + case "TOGGLE_INLINE_PREVIEW": { + features.inlinePreview = action.value; + return { ...state, inlinePreviewEnabled: action.value }; + } + + case "TOGGLE_EDITOR_WRAPPING": { + prefs.editorWrapping = action.value; + return { ...state, editorWrappingEnabled: action.value }; + } + + case "TOGGLE_JAVASCRIPT_ENABLED": { + return { ...state, javascriptEnabled: action.value }; + } + + case "TOGGLE_SOURCE_MAPS_ENABLED": { + prefs.clientSourceMapsEnabled = action.value; + return { ...state }; + } + + case "SET_ORIENTATION": { + return { ...state, orientation: action.orientation }; + } + + case "TOGGLE_PANE": { + if (action.position == "start") { + prefs.startPanelCollapsed = action.paneCollapsed; + return { ...state, startPanelCollapsed: action.paneCollapsed }; + } + + prefs.endPanelCollapsed = action.paneCollapsed; + return { ...state, endPanelCollapsed: action.paneCollapsed }; + } + + case "HIGHLIGHT_LINES": { + return { ...state, highlightedLineRange: action.location }; + } + + case "CLOSE_QUICK_OPEN": + case "CLEAR_HIGHLIGHT_LINES": + if (!state.highlightedLineRange) { + return state; + } + return { ...state, highlightedLineRange: null }; + + case "OPEN_CONDITIONAL_PANEL": + return { + ...state, + conditionalPanelLocation: action.location, + isLogPoint: action.log, + }; + + case "CLOSE_CONDITIONAL_PANEL": + return { ...state, conditionalPanelLocation: null }; + + case "SET_PRIMARY_PANE_TAB": + return { ...state, selectedPrimaryPaneTab: action.tabName }; + + case "CLOSE_PROJECT_SEARCH": { + if (state.activeSearch === "project") { + return { ...state, activeSearch: null }; + } + return state; + } + + case "SET_VIEWPORT": { + return { ...state, viewport: action.viewport }; + } + + case "SET_CURSOR_POSITION": { + return { ...state, cursorPosition: action.cursorPosition }; + } + + case "NAVIGATE": { + return { ...state, activeSearch: null, highlightedLineRange: null }; + } + + case "REMOVE_THREAD": { + // Reset the highlighted range if the related source has been removed + const sourceId = state.highlightedLineRange?.sourceId; + if (sourceId && action.sources.some(s => s.id == sourceId)) { + return { ...state, highlightedLineRange: null }; + } + return state; + } + + case "SET_JAVASCRIPT_TRACING_LOG_METHOD": { + prefs.javascriptTracingLogMethod = action.value; + return { ...state, javascriptTracingLogMethod: action.value }; + } + + case "SET_SEARCH_OPTIONS": { + state.mutableSearchOptions[action.searchKey] = { + ...state.mutableSearchOptions[action.searchKey], + ...action.searchOptions, + }; + prefs.searchOptions = state.mutableSearchOptions; + return { ...state }; + } + + case "HIDE_IGNORED_SOURCES": { + const { shouldHide } = action; + if (shouldHide !== state.hideIgnoredSources) { + prefs.hideIgnoredSources = shouldHide; + return { ...state, hideIgnoredSources: shouldHide }; + } + return state; + } + + case "ENABLE_SOURCEMAP_IGNORELIST": { + const { shouldEnable } = action; + if (shouldEnable !== state.sourceMapIgnoreListEnabled) { + prefs.sourceMapIgnoreListEnabled = shouldEnable; + return { ...state, sourceMapIgnoreListEnabled: shouldEnable }; + } + return state; + } + + default: { + return state; + } + } +} + +export default update; |