summaryrefslogtreecommitdiffstats
path: root/devtools/client/debugger/src/utils
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /devtools/client/debugger/src/utils
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/client/debugger/src/utils')
-rw-r--r--devtools/client/debugger/src/utils/DevToolsUtils.js16
-rw-r--r--devtools/client/debugger/src/utils/assert.js22
-rw-r--r--devtools/client/debugger/src/utils/ast.js64
-rw-r--r--devtools/client/debugger/src/utils/async-value.js27
-rw-r--r--devtools/client/debugger/src/utils/bootstrap.js142
-rw-r--r--devtools/client/debugger/src/utils/breakpoint/breakpointPositions.js20
-rw-r--r--devtools/client/debugger/src/utils/breakpoint/index.js71
-rw-r--r--devtools/client/debugger/src/utils/breakpoint/moz.build11
-rw-r--r--devtools/client/debugger/src/utils/breakpoint/tests/index.spec.js28
-rw-r--r--devtools/client/debugger/src/utils/build-query.js80
-rw-r--r--devtools/client/debugger/src/utils/clipboard.js19
-rw-r--r--devtools/client/debugger/src/utils/context.js143
-rw-r--r--devtools/client/debugger/src/utils/dbg.js100
-rw-r--r--devtools/client/debugger/src/utils/editor/create-editor.js44
-rw-r--r--devtools/client/debugger/src/utils/editor/get-expression.js54
-rw-r--r--devtools/client/debugger/src/utils/editor/index.js222
-rw-r--r--devtools/client/debugger/src/utils/editor/moz.build15
-rw-r--r--devtools/client/debugger/src/utils/editor/source-documents.js256
-rw-r--r--devtools/client/debugger/src/utils/editor/source-editor.css271
-rw-r--r--devtools/client/debugger/src/utils/editor/source-search.js327
-rw-r--r--devtools/client/debugger/src/utils/editor/tests/__snapshots__/create-editor.spec.js.snapbin0 -> 3275 bytes
-rw-r--r--devtools/client/debugger/src/utils/editor/tests/create-editor.spec.js22
-rw-r--r--devtools/client/debugger/src/utils/editor/tests/editor.spec.js186
-rw-r--r--devtools/client/debugger/src/utils/editor/tests/source-documents.spec.js213
-rw-r--r--devtools/client/debugger/src/utils/editor/tests/source-search.spec.js182
-rw-r--r--devtools/client/debugger/src/utils/editor/tokens.js178
-rw-r--r--devtools/client/debugger/src/utils/environment.js15
-rw-r--r--devtools/client/debugger/src/utils/evaluation-result.js19
-rw-r--r--devtools/client/debugger/src/utils/expressions.js67
-rw-r--r--devtools/client/debugger/src/utils/function.js37
-rw-r--r--devtools/client/debugger/src/utils/indentation.js40
-rw-r--r--devtools/client/debugger/src/utils/isMinified.js58
-rw-r--r--devtools/client/debugger/src/utils/location.js124
-rw-r--r--devtools/client/debugger/src/utils/log.js30
-rw-r--r--devtools/client/debugger/src/utils/memoizableAction.js75
-rw-r--r--devtools/client/debugger/src/utils/memoize.js63
-rw-r--r--devtools/client/debugger/src/utils/memoizeLast.js27
-rw-r--r--devtools/client/debugger/src/utils/moz.build53
-rw-r--r--devtools/client/debugger/src/utils/path.js24
-rw-r--r--devtools/client/debugger/src/utils/pause/frames/annotateFrames.js68
-rw-r--r--devtools/client/debugger/src/utils/pause/frames/collapseFrames.js58
-rw-r--r--devtools/client/debugger/src/utils/pause/frames/displayName.js114
-rw-r--r--devtools/client/debugger/src/utils/pause/frames/getLibraryFromUrl.js140
-rw-r--r--devtools/client/debugger/src/utils/pause/frames/index.js8
-rw-r--r--devtools/client/debugger/src/utils/pause/frames/moz.build14
-rw-r--r--devtools/client/debugger/src/utils/pause/frames/tests/__snapshots__/collapseFrames.spec.js.snap87
-rw-r--r--devtools/client/debugger/src/utils/pause/frames/tests/collapseFrames.spec.js43
-rw-r--r--devtools/client/debugger/src/utils/pause/frames/tests/displayName.spec.js129
-rw-r--r--devtools/client/debugger/src/utils/pause/frames/tests/getLibraryFromUrl.spec.js127
-rw-r--r--devtools/client/debugger/src/utils/pause/index.js5
-rw-r--r--devtools/client/debugger/src/utils/pause/mapScopes/README.md191
-rw-r--r--devtools/client/debugger/src/utils/pause/mapScopes/buildGeneratedBindingList.js141
-rw-r--r--devtools/client/debugger/src/utils/pause/mapScopes/filtering.js45
-rw-r--r--devtools/client/debugger/src/utils/pause/mapScopes/findGeneratedBindingFromPosition.js305
-rw-r--r--devtools/client/debugger/src/utils/pause/mapScopes/getApplicableBindingsForOriginalPosition.js112
-rw-r--r--devtools/client/debugger/src/utils/pause/mapScopes/index.js586
-rw-r--r--devtools/client/debugger/src/utils/pause/mapScopes/locColumn.js13
-rw-r--r--devtools/client/debugger/src/utils/pause/mapScopes/mappingContains.js12
-rw-r--r--devtools/client/debugger/src/utils/pause/mapScopes/moz.build19
-rw-r--r--devtools/client/debugger/src/utils/pause/mapScopes/optimizedOut.js15
-rw-r--r--devtools/client/debugger/src/utils/pause/mapScopes/positionCmp.js24
-rw-r--r--devtools/client/debugger/src/utils/pause/mapScopes/rangeMetadata.js117
-rw-r--r--devtools/client/debugger/src/utils/pause/moz.build15
-rw-r--r--devtools/client/debugger/src/utils/pause/scopes.js283
-rw-r--r--devtools/client/debugger/src/utils/pause/tests/scopes.spec.js150
-rw-r--r--devtools/client/debugger/src/utils/pause/why.js40
-rw-r--r--devtools/client/debugger/src/utils/prefs.js170
-rw-r--r--devtools/client/debugger/src/utils/preview.js7
-rw-r--r--devtools/client/debugger/src/utils/quick-open.js113
-rw-r--r--devtools/client/debugger/src/utils/result-list.js26
-rw-r--r--devtools/client/debugger/src/utils/selected-location.js15
-rw-r--r--devtools/client/debugger/src/utils/shallow-equal.js51
-rw-r--r--devtools/client/debugger/src/utils/source-maps.js122
-rw-r--r--devtools/client/debugger/src/utils/source-queue.js40
-rw-r--r--devtools/client/debugger/src/utils/source.js534
-rw-r--r--devtools/client/debugger/src/utils/sources-tree/getURL.js180
-rw-r--r--devtools/client/debugger/src/utils/sources-tree/moz.build9
-rw-r--r--devtools/client/debugger/src/utils/sources-tree/tests/getUrl.spec.js50
-rw-r--r--devtools/client/debugger/src/utils/sources-tree/utils.js44
-rw-r--r--devtools/client/debugger/src/utils/tabs.js121
-rw-r--r--devtools/client/debugger/src/utils/task.js44
-rw-r--r--devtools/client/debugger/src/utils/telemetry.js72
-rw-r--r--devtools/client/debugger/src/utils/test-head.js283
-rw-r--r--devtools/client/debugger/src/utils/test-mockup.js268
-rw-r--r--devtools/client/debugger/src/utils/tests/DevToolsUtils.spec.js41
-rw-r--r--devtools/client/debugger/src/utils/tests/__snapshots__/expressions.spec.js.snap25
-rw-r--r--devtools/client/debugger/src/utils/tests/__snapshots__/function.spec.js.snap25
-rw-r--r--devtools/client/debugger/src/utils/tests/__snapshots__/indentation.spec.js.snap27
-rw-r--r--devtools/client/debugger/src/utils/tests/assert.spec.js30
-rw-r--r--devtools/client/debugger/src/utils/tests/build-query.spec.js256
-rw-r--r--devtools/client/debugger/src/utils/tests/clipboard.spec.js45
-rw-r--r--devtools/client/debugger/src/utils/tests/expressions.spec.js67
-rw-r--r--devtools/client/debugger/src/utils/tests/function.spec.js61
-rw-r--r--devtools/client/debugger/src/utils/tests/indentation.spec.js61
-rw-r--r--devtools/client/debugger/src/utils/tests/isMinified.spec.js18
-rw-r--r--devtools/client/debugger/src/utils/tests/location.spec.js31
-rw-r--r--devtools/client/debugger/src/utils/tests/log.spec.js35
-rw-r--r--devtools/client/debugger/src/utils/tests/memoize.spec.js48
-rw-r--r--devtools/client/debugger/src/utils/tests/memoizeLast.spec.js31
-rw-r--r--devtools/client/debugger/src/utils/tests/path.spec.js49
-rw-r--r--devtools/client/debugger/src/utils/tests/quick-open.spec.js35
-rw-r--r--devtools/client/debugger/src/utils/tests/result-list.spec.js32
-rw-r--r--devtools/client/debugger/src/utils/tests/source.spec.js367
-rw-r--r--devtools/client/debugger/src/utils/tests/telemetry.spec.js13
-rw-r--r--devtools/client/debugger/src/utils/tests/text.spec.js20
-rw-r--r--devtools/client/debugger/src/utils/tests/ui.spec.js15
-rw-r--r--devtools/client/debugger/src/utils/tests/url.spec.js89
-rw-r--r--devtools/client/debugger/src/utils/tests/utils.spec.js87
-rw-r--r--devtools/client/debugger/src/utils/tests/wasm.spec.js96
-rw-r--r--devtools/client/debugger/src/utils/text.js58
-rw-r--r--devtools/client/debugger/src/utils/ui.js48
-rw-r--r--devtools/client/debugger/src/utils/url.js75
-rw-r--r--devtools/client/debugger/src/utils/utils.js59
-rw-r--r--devtools/client/debugger/src/utils/wasm.js166
-rw-r--r--devtools/client/debugger/src/utils/worker.js49
115 files changed, 10414 insertions, 0 deletions
diff --git a/devtools/client/debugger/src/utils/DevToolsUtils.js b/devtools/client/debugger/src/utils/DevToolsUtils.js
new file mode 100644
index 0000000000..b2e01f5502
--- /dev/null
+++ b/devtools/client/debugger/src/utils/DevToolsUtils.js
@@ -0,0 +1,16 @@
+/* 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 assert from "./assert";
+
+export function reportException(who, exception) {
+ const msg = `${who} threw an exception: `;
+ console.error(msg, exception);
+}
+
+export function executeSoon(fn) {
+ setTimeout(fn, 0);
+}
+
+export default assert;
diff --git a/devtools/client/debugger/src/utils/assert.js b/devtools/client/debugger/src/utils/assert.js
new file mode 100644
index 0000000000..2be4f3c7f1
--- /dev/null
+++ b/devtools/client/debugger/src/utils/assert.js
@@ -0,0 +1,22 @@
+/* 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 { isNodeTest } from "./environment";
+
+let assert;
+// TODO: try to enable these assertions on mochitest by also enabling it on:
+// import flags from "devtools/shared/flags";
+// if (flags.testing)
+// Unfortunately it throws a lot on mochitests...
+
+if (isNodeTest()) {
+ assert = function (condition, message) {
+ if (!condition) {
+ throw new Error(`Assertion failure: ${message}`);
+ }
+ };
+} else {
+ assert = function () {};
+}
+export default assert;
diff --git a/devtools/client/debugger/src/utils/ast.js b/devtools/client/debugger/src/utils/ast.js
new file mode 100644
index 0000000000..08869df8dd
--- /dev/null
+++ b/devtools/client/debugger/src/utils/ast.js
@@ -0,0 +1,64 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+// Check whether location A starts after location B
+export function positionAfter(a, b) {
+ return (
+ a.start.line > b.start.line ||
+ (a.start.line === b.start.line && a.start.column > b.start.column)
+ );
+}
+
+export function containsPosition(a, b) {
+ const bColumn = b.column || 0;
+ const startsBefore =
+ a.start.line < b.line ||
+ (a.start.line === b.line && a.start.column <= bColumn);
+ const endsAfter =
+ a.end.line > b.line || (a.end.line === b.line && a.end.column >= bColumn);
+
+ return startsBefore && endsAfter;
+}
+
+function findClosestofSymbol(declarations, location) {
+ if (!declarations) {
+ return null;
+ }
+
+ return declarations.reduce((found, currNode) => {
+ if (
+ currNode.name === "anonymous" ||
+ !containsPosition(currNode.location, {
+ line: location.line,
+ column: location.column || 0,
+ })
+ ) {
+ return found;
+ }
+
+ if (!found) {
+ return currNode;
+ }
+
+ if (found.location.start.line > currNode.location.start.line) {
+ return found;
+ }
+ if (
+ found.location.start.line === currNode.location.start.line &&
+ found.location.start.column > currNode.location.start.column
+ ) {
+ return found;
+ }
+
+ return currNode;
+ }, null);
+}
+
+export function findClosestFunction(symbols, location) {
+ if (!symbols) {
+ return null;
+ }
+
+ return findClosestofSymbol(symbols.functions, location);
+}
diff --git a/devtools/client/debugger/src/utils/async-value.js b/devtools/client/debugger/src/utils/async-value.js
new file mode 100644
index 0000000000..e1467d2401
--- /dev/null
+++ b/devtools/client/debugger/src/utils/async-value.js
@@ -0,0 +1,27 @@
+/* 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 pending() {
+ return { state: "pending" };
+}
+export function fulfilled(value) {
+ return { state: "fulfilled", value };
+}
+export function rejected(value) {
+ return { state: "rejected", value };
+}
+
+export function asSettled(value) {
+ return value && value.state !== "pending" ? value : null;
+}
+
+export function isPending(value) {
+ return value.state === "pending";
+}
+export function isFulfilled(value) {
+ return value.state === "fulfilled";
+}
+export function isRejected(value) {
+ return value.state === "rejected";
+}
diff --git a/devtools/client/debugger/src/utils/bootstrap.js b/devtools/client/debugger/src/utils/bootstrap.js
new file mode 100644
index 0000000000..e8d6de2cf0
--- /dev/null
+++ b/devtools/client/debugger/src/utils/bootstrap.js
@@ -0,0 +1,142 @@
+/* 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 React from "devtools/client/shared/vendor/react";
+import {
+ bindActionCreators,
+ combineReducers,
+} from "devtools/client/shared/vendor/redux";
+import ReactDOM from "devtools/client/shared/vendor/react-dom";
+const {
+ Provider,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+
+import ToolboxProvider from "devtools/client/framework/store-provider";
+import flags from "devtools/shared/flags";
+const {
+ registerStoreObserver,
+} = require("resource://devtools/client/shared/redux/subscriber.js");
+
+const { AppConstants } = ChromeUtils.importESModule(
+ "resource://gre/modules/AppConstants.sys.mjs"
+);
+
+import { SearchDispatcher } from "../workers/search/index";
+import { PrettyPrintDispatcher } from "../workers/pretty-print/index";
+
+import configureStore from "../actions/utils/create-store";
+import reducers from "../reducers/index";
+import * as selectors from "../selectors/index";
+import App from "../components/App";
+import { asyncStore, prefs } from "./prefs";
+import { persistTabs } from "../utils/tabs";
+const {
+ sanitizeBreakpoints,
+} = require("resource://devtools/client/shared/thread-utils.js");
+
+let gWorkers;
+
+export function bootstrapStore(client, workers, panel, initialState) {
+ const debugJsModules = AppConstants.DEBUG_JS_MODULES == "1";
+ const createStore = configureStore({
+ log: prefs.logging || flags.testing,
+ timing: debugJsModules,
+ makeThunkArgs: (args, state) => {
+ return { ...args, client, ...workers, panel };
+ },
+ });
+
+ const store = createStore(combineReducers(reducers), initialState);
+ registerStoreObserver(store, updatePrefs);
+
+ const actions = bindActionCreators(
+ require("../actions/index").default,
+ store.dispatch
+ );
+
+ return { store, actions, selectors };
+}
+
+export function bootstrapWorkers(panelWorkers) {
+ // The panel worker will typically be the source map and parser workers.
+ // Both will be managed by the toolbox.
+ gWorkers = {
+ prettyPrintWorker: new PrettyPrintDispatcher(),
+ searchWorker: new SearchDispatcher(),
+ };
+ return { ...panelWorkers, ...gWorkers };
+}
+
+export function teardownWorkers() {
+ gWorkers.prettyPrintWorker.stop();
+ gWorkers.searchWorker.stop();
+}
+
+/**
+ * Create and mount the root App component.
+ *
+ * @param {ReduxStore} store
+ * @param {ReduxStore} toolboxStore
+ * @param {Object} appComponentAttributes
+ * @param {Array} appComponentAttributes.fluentBundles
+ * @param {Document} appComponentAttributes.toolboxDoc
+ */
+export function bootstrapApp(store, toolboxStore, appComponentAttributes = {}) {
+ const mount = getMountElement();
+ if (!mount) {
+ return;
+ }
+
+ ReactDOM.render(
+ React.createElement(
+ Provider,
+ { store },
+ React.createElement(
+ ToolboxProvider,
+ { store: toolboxStore },
+ React.createElement(App, appComponentAttributes)
+ )
+ ),
+ mount
+ );
+}
+
+function getMountElement() {
+ return document.querySelector("#mount");
+}
+
+// This is the opposite of bootstrapApp
+export function unmountRoot() {
+ ReactDOM.unmountComponentAtNode(getMountElement());
+}
+
+function updatePrefs(state, oldState) {
+ const hasChanged = selector =>
+ selector(oldState) && selector(oldState) !== selector(state);
+
+ if (hasChanged(selectors.getPendingBreakpoints)) {
+ asyncStore.pendingBreakpoints = sanitizeBreakpoints(
+ selectors.getPendingBreakpoints(state)
+ );
+ }
+
+ if (
+ oldState.eventListenerBreakpoints &&
+ oldState.eventListenerBreakpoints !== state.eventListenerBreakpoints
+ ) {
+ asyncStore.eventListenerBreakpoints = state.eventListenerBreakpoints;
+ }
+
+ if (hasChanged(selectors.getTabs)) {
+ asyncStore.tabs = persistTabs(selectors.getTabs(state));
+ }
+
+ if (hasChanged(selectors.getXHRBreakpoints)) {
+ asyncStore.xhrBreakpoints = selectors.getXHRBreakpoints(state);
+ }
+
+ if (hasChanged(selectors.getBlackBoxRanges)) {
+ asyncStore.blackboxedRanges = selectors.getBlackBoxRanges(state);
+ }
+}
diff --git a/devtools/client/debugger/src/utils/breakpoint/breakpointPositions.js b/devtools/client/debugger/src/utils/breakpoint/breakpointPositions.js
new file mode 100644
index 0000000000..49b8523284
--- /dev/null
+++ b/devtools/client/debugger/src/utils/breakpoint/breakpointPositions.js
@@ -0,0 +1,20 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+import { comparePosition } from "../location";
+import { getSelectedLocation } from "../selected-location";
+
+export function findPosition(positions, location) {
+ if (!positions) {
+ return null;
+ }
+
+ const lineBps = positions[location.line];
+ if (!lineBps) {
+ return null;
+ }
+ return lineBps.find(pos =>
+ comparePosition(getSelectedLocation(pos, location), location)
+ );
+}
diff --git a/devtools/client/debugger/src/utils/breakpoint/index.js b/devtools/client/debugger/src/utils/breakpoint/index.js
new file mode 100644
index 0000000000..740d3cd180
--- /dev/null
+++ b/devtools/client/debugger/src/utils/breakpoint/index.js
@@ -0,0 +1,71 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+import { getSourceActorsForSource } from "../../selectors/index";
+import { sortSelectedLocations } from "../location";
+export * from "./breakpointPositions";
+
+// The ID for a Breakpoint is derived from its location in its Source.
+export function makeBreakpointId(location) {
+ const { source, line, column } = location;
+ const columnString = column || "";
+ return `${source.id}:${line}:${columnString}`;
+}
+
+export function makeBreakpointServerLocationId(breakpointServerLocation) {
+ const { sourceUrl, sourceId, line, column } = breakpointServerLocation;
+ const sourceUrlOrId = sourceUrl || sourceId;
+ const columnString = column || "";
+
+ return `${sourceUrlOrId}:${line}:${columnString}`;
+}
+
+/**
+ * Create a location object to set a breakpoint on the server.
+ *
+ * Debugger location objects includes a source and sourceActor attributes
+ * whereas the server don't need them and instead only need either
+ * the source URL -or- a precise source actor ID.
+ */
+export function makeBreakpointServerLocation(state, location) {
+ const source = location.source;
+ if (!source) {
+ throw new Error("Missing 'source' attribute on location object");
+ }
+ const breakpointLocation = {
+ line: location.line,
+ column: location.column,
+ };
+ if (source.url) {
+ breakpointLocation.sourceUrl = source.url;
+ } else {
+ breakpointLocation.sourceId = getSourceActorsForSource(
+ state,
+ source.id
+ )[0].id;
+ }
+ return breakpointLocation;
+}
+
+export function createXHRBreakpoint(path, method, overrides = {}) {
+ const properties = {
+ path,
+ method,
+ disabled: false,
+ loading: false,
+ text: L10N.getFormatStr("xhrBreakpoints.item.label", path),
+ };
+
+ return { ...properties, ...overrides };
+}
+
+export function getSelectedText(breakpoint, selectedSource) {
+ return !!selectedSource && !selectedSource.isOriginal
+ ? breakpoint.text
+ : breakpoint.originalText;
+}
+
+export function sortSelectedBreakpoints(breakpoints, selectedSource) {
+ return sortSelectedLocations(breakpoints, selectedSource);
+}
diff --git a/devtools/client/debugger/src/utils/breakpoint/moz.build b/devtools/client/debugger/src/utils/breakpoint/moz.build
new file mode 100644
index 0000000000..02c5302a6c
--- /dev/null
+++ b/devtools/client/debugger/src/utils/breakpoint/moz.build
@@ -0,0 +1,11 @@
+# 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(
+ "breakpointPositions.js",
+ "index.js",
+)
diff --git a/devtools/client/debugger/src/utils/breakpoint/tests/index.spec.js b/devtools/client/debugger/src/utils/breakpoint/tests/index.spec.js
new file mode 100644
index 0000000000..fcfd155cff
--- /dev/null
+++ b/devtools/client/debugger/src/utils/breakpoint/tests/index.spec.js
@@ -0,0 +1,28 @@
+/* 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 { sortSelectedBreakpoints } from "../index";
+
+import { makeMockBreakpoint, makeMockSource } from "../../test-mockup";
+
+describe("breakpoint sorting", () => {
+ it("sortSelectedBreakpoints should sort by line number and column", () => {
+ const sorted = sortSelectedBreakpoints(
+ [
+ makeMockBreakpoint(undefined, 100, 2),
+ makeMockBreakpoint(undefined, 9, 2),
+ makeMockBreakpoint(undefined, 2),
+ makeMockBreakpoint(undefined, 2, 7),
+ ],
+ makeMockSource()
+ );
+
+ expect(sorted[0].location.line).toBe(2);
+ expect(sorted[0].location.column).toBe(undefined);
+ expect(sorted[1].location.line).toBe(2);
+ expect(sorted[1].location.column).toBe(7);
+ expect(sorted[2].location.line).toBe(9);
+ expect(sorted[3].location.line).toBe(100);
+ });
+});
diff --git a/devtools/client/debugger/src/utils/build-query.js b/devtools/client/debugger/src/utils/build-query.js
new file mode 100644
index 0000000000..f10999aee4
--- /dev/null
+++ b/devtools/client/debugger/src/utils/build-query.js
@@ -0,0 +1,80 @@
+/* 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/>. */
+
+function escapeRegExp(str) {
+ const reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+ return str.replace(reRegExpChar, "\\$&");
+}
+
+/**
+ * Ignore doing outline matches for less than 3 whitespaces
+ *
+ * @memberof utils/source-search
+ * @static
+ */
+function ignoreWhiteSpace(str) {
+ return /^\s{0,2}$/.test(str) ? "(?!\\s*.*)" : str;
+}
+
+function wholeMatch(query, wholeWord) {
+ if (query === "" || !wholeWord) {
+ return query;
+ }
+
+ return `\\b${query}\\b`;
+}
+
+function buildFlags(caseSensitive, isGlobal) {
+ if (caseSensitive && isGlobal) {
+ return "g";
+ }
+
+ if (!caseSensitive && isGlobal) {
+ return "gi";
+ }
+
+ if (!caseSensitive && !isGlobal) {
+ return "i";
+ }
+
+ return null;
+}
+
+export default function buildQuery(
+ originalQuery,
+ modifiers,
+ { isGlobal = false, ignoreSpaces = false }
+) {
+ const { caseSensitive, regexMatch, wholeWord } = modifiers;
+
+ if (originalQuery === "") {
+ return new RegExp(originalQuery);
+ }
+
+ // Remove the backslashes at the end of the query as it
+ // breaks the RegExp
+ let query = originalQuery.replace(/\\$/, "");
+
+ // If we don't want to do a regexMatch, we need to escape all regex related characters
+ // so they would actually match.
+ if (!regexMatch) {
+ query = escapeRegExp(query);
+ }
+
+ // ignoreWhiteSpace might return a negative lookbehind, and in such case, we want it
+ // to be consumed as a RegExp part by the callsite, so this needs to be called after
+ // the regexp is escaped.
+ if (ignoreSpaces) {
+ query = ignoreWhiteSpace(query);
+ }
+
+ query = wholeMatch(query, wholeWord);
+ const flags = buildFlags(caseSensitive, isGlobal);
+
+ if (flags) {
+ return new RegExp(query, flags);
+ }
+
+ return new RegExp(query);
+}
diff --git a/devtools/client/debugger/src/utils/clipboard.js b/devtools/client/debugger/src/utils/clipboard.js
new file mode 100644
index 0000000000..66c0d297cc
--- /dev/null
+++ b/devtools/client/debugger/src/utils/clipboard.js
@@ -0,0 +1,19 @@
+/* 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/>. */
+
+/**
+ * Clipboard function taken from
+ * https://searchfox.org/mozilla-central/source/devtools/shared/platform/clipboard.js
+ */
+
+export function copyToTheClipboard(string) {
+ const doCopy = function (e) {
+ e.clipboardData.setData("text/plain", string);
+ e.preventDefault();
+ };
+
+ document.addEventListener("copy", doCopy);
+ document.execCommand("copy", false, null);
+ document.removeEventListener("copy", doCopy);
+}
diff --git a/devtools/client/debugger/src/utils/context.js b/devtools/client/debugger/src/utils/context.js
new file mode 100644
index 0000000000..8c7311008d
--- /dev/null
+++ b/devtools/client/debugger/src/utils/context.js
@@ -0,0 +1,143 @@
+/* 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 {
+ getThreadContext,
+ getSelectedFrame,
+ getCurrentThread,
+ hasSource,
+ hasSourceActor,
+ getCurrentlyFetchedTopFrame,
+ hasFrame,
+} from "../selectors/index";
+
+// Context encapsulates the main parameters of the current redux state, which
+// impact most other information tracked by the debugger.
+//
+// The main use of Context is to control when asynchronous operations are
+// allowed to make changes to the program state. Such operations might be
+// invalidated as the state changes from the time the operation was originally
+// initiated. For example, operations on pause state might still continue even
+// after the thread unpauses.
+//
+// The methods below can be used to compare an old context with the current one
+// and see if the operation is now invalid and should be abandoned. Actions can
+// also include a 'cx' Context property, which will be checked by the context
+// middleware. If the action fails validateContextAction() then it will not be
+// dispatched.
+//
+// Context can additionally be used as a shortcut to access the main properties
+// of the pause state.
+
+// A normal Context is invalidated if the target navigates.
+
+// A ThreadContext is invalidated if the target navigates, or if the current
+// thread changes, pauses, or resumes.
+
+export class ContextError extends Error {
+ constructor(msg) {
+ // Use a prefix string to help `PromiseTestUtils.allowMatchingRejectionsGlobally`
+ // ignore all these exceptions as this is based on error strings.
+ super(`DebuggerContextError: ${msg}`);
+ }
+}
+
+export function validateNavigateContext(state, cx) {
+ const newcx = getThreadContext(state);
+
+ if (newcx.navigateCounter != cx.navigateCounter) {
+ throw new ContextError("Page has navigated");
+ }
+}
+
+export function validateThreadContext(state, cx) {
+ const newcx = getThreadContext(state);
+
+ if (cx.thread != newcx.thread) {
+ throw new ContextError("Current thread has changed");
+ }
+
+ if (cx.pauseCounter != newcx.pauseCounter) {
+ throw new ContextError("Current thread has paused or resumed");
+ }
+}
+
+export function validateContext(state, cx) {
+ validateNavigateContext(state, cx);
+
+ if ("thread" in cx) {
+ validateThreadContext(state, cx);
+ }
+}
+
+export function validateSelectedFrame(state, selectedFrame) {
+ const newThread = getCurrentThread(state);
+ if (selectedFrame.thread != newThread) {
+ throw new ContextError("Selected thread has changed");
+ }
+
+ const newSelectedFrame = getSelectedFrame(state, newThread);
+ // Compare frame's IDs as frame objects are cloned during mapping
+ if (selectedFrame.id != newSelectedFrame?.id) {
+ throw new ContextError("Selected frame changed");
+ }
+}
+
+export function validateBreakpoint(state, breakpoint) {
+ // XHR breakpoint don't use any location and are always valid
+ if (!breakpoint.location) {
+ return;
+ }
+
+ if (!hasSource(state, breakpoint.location.source.id)) {
+ throw new ContextError(
+ `Breakpoint's location is obsolete (source '${breakpoint.location.source.id}' no longer exists)`
+ );
+ }
+ if (!hasSource(state, breakpoint.generatedLocation.source.id)) {
+ throw new ContextError(
+ `Breakpoint's generated location is obsolete (source '${breakpoint.generatedLocation.source.id}' no longer exists)`
+ );
+ }
+}
+
+export function validateSource(state, source) {
+ if (!hasSource(state, source.id)) {
+ throw new ContextError(
+ `Obsolete source (source '${source.id}' no longer exists)`
+ );
+ }
+}
+
+export function validateSourceActor(state, sourceActor) {
+ if (!hasSourceActor(state, sourceActor.id)) {
+ throw new ContextError(
+ `Obsolete source actor (source '${sourceActor.id}' no longer exists)`
+ );
+ }
+}
+
+export function validateThreadFrames(state, thread, frames) {
+ const newThread = getCurrentThread(state);
+ if (thread != newThread) {
+ throw new ContextError("Selected thread has changed");
+ }
+ const newTopFrame = getCurrentlyFetchedTopFrame(state, newThread);
+ if (newTopFrame?.id != frames[0].id) {
+ throw new ContextError("Thread moved to another location");
+ }
+}
+
+export function validateFrame(state, frame) {
+ if (!hasFrame(state, frame)) {
+ throw new ContextError(
+ `Obsolete frame (frame '${frame.id}' no longer exists)`
+ );
+ }
+}
+
+export function isValidThreadContext(state, cx) {
+ const newcx = getThreadContext(state);
+ return cx.thread == newcx.thread && cx.pauseCounter == newcx.pauseCounter;
+}
diff --git a/devtools/client/debugger/src/utils/dbg.js b/devtools/client/debugger/src/utils/dbg.js
new file mode 100644
index 0000000000..0d7dff72e1
--- /dev/null
+++ b/devtools/client/debugger/src/utils/dbg.js
@@ -0,0 +1,100 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+import { prefs, asyncStore, features } from "./prefs";
+import { getDocument } from "./editor/source-documents";
+import { wasmOffsetToLine } from "./wasm";
+
+function getThreadFront(dbg) {
+ return dbg.targetCommand.targetFront.threadFront;
+}
+
+function findSource(dbg, url) {
+ const sources = dbg.selectors.getSourceList();
+ return sources.find(s => (s.url || "").includes(url));
+}
+
+function findSources(dbg, url) {
+ const sources = dbg.selectors.getSourceList();
+ return sources.filter(s => (s.url || "").includes(url));
+}
+
+function evaluate(dbg, expression) {
+ return dbg.client.evaluate(expression);
+}
+
+function bindSelectors(obj) {
+ return Object.keys(obj.selectors).reduce((bound, selector) => {
+ bound[selector] = (a, b, c) =>
+ obj.selectors[selector](obj.store.getState(), a, b, c);
+ return bound;
+ }, {});
+}
+
+function getCM() {
+ const cm = document.querySelector(".CodeMirror");
+ return cm?.CodeMirror;
+}
+
+function formatMappedLocation(mappedLocation) {
+ const { location, generatedLocation } = mappedLocation;
+ return {
+ original: `(${location.line}, ${location.column})`,
+ generated: `(${generatedLocation.line}, ${generatedLocation.column})`,
+ };
+}
+
+function formatMappedLocations(locations) {
+ return console.table(locations.map(loc => formatMappedLocation(loc)));
+}
+
+function formatSelectedColumnBreakpoints(dbg) {
+ const positions = dbg.selectors.getBreakpointPositionsForSource(
+ dbg.selectors.getSelectedSource().id
+ );
+
+ return formatMappedLocations(positions);
+}
+
+function getDocumentForUrl(dbg, url) {
+ const source = findSource(dbg, url);
+ return getDocument(source.id);
+}
+
+const diff = (a, b) => Object.keys(a).filter(key => !Object.is(a[key], b[key]));
+
+export function setupHelper(obj) {
+ const selectors = bindSelectors(obj);
+ const dbg = {
+ ...obj,
+ selectors,
+ prefs,
+ asyncStore,
+ features,
+ getCM,
+
+ // Expose this to tests as they don't have access to debugger's browser loader require
+ // and so can't load utils/wasm.js
+ wasmOffsetToLine: (sourceId, offset) => wasmOffsetToLine(sourceId, offset),
+
+ helpers: {
+ findSource: url => findSource(dbg, url),
+ findSources: url => findSources(dbg, url),
+ evaluate: expression => evaluate(dbg, expression),
+ dumpThread: () => getThreadFront(dbg).dumpThread(),
+ getDocument: url => getDocumentForUrl(dbg, url),
+ },
+ formatters: {
+ mappedLocations: locations => formatMappedLocations(locations),
+ mappedLocation: location => formatMappedLocation(location),
+ selectedColumnBreakpoints: () => formatSelectedColumnBreakpoints(dbg),
+ },
+ _telemetry: {
+ events: {},
+ },
+ diff,
+ };
+
+ window.dbg = dbg;
+}
diff --git a/devtools/client/debugger/src/utils/editor/create-editor.js b/devtools/client/debugger/src/utils/editor/create-editor.js
new file mode 100644
index 0000000000..6bb280fc4d
--- /dev/null
+++ b/devtools/client/debugger/src/utils/editor/create-editor.js
@@ -0,0 +1,44 @@
+/* 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 SourceEditor from "devtools/client/shared/sourceeditor/editor";
+import { features, prefs } from "../prefs";
+
+export function createEditor() {
+ const gutters = ["breakpoints", "hit-markers", "CodeMirror-linenumbers"];
+
+ if (features.codeFolding) {
+ gutters.push("CodeMirror-foldgutter");
+ }
+
+ return new SourceEditor({
+ mode: "javascript",
+ foldGutter: features.codeFolding,
+ enableCodeFolding: features.codeFolding,
+ readOnly: true,
+ lineNumbers: true,
+ theme: "mozilla",
+ styleActiveLine: false,
+ lineWrapping: prefs.editorWrapping,
+ matchBrackets: true,
+ showAnnotationRuler: true,
+ gutters,
+ value: " ",
+ extraKeys: {
+ // Override code mirror keymap to avoid conflicts with split console.
+ Esc: false,
+ "Cmd-F": false,
+ "Ctrl-F": false,
+ "Cmd-G": false,
+ "Ctrl-G": false,
+ },
+ cursorBlinkRate: prefs.cursorBlinkRate,
+ });
+}
+
+export function createHeadlessEditor() {
+ const editor = createEditor();
+ editor.appendToLocalElement(document.createElement("div"));
+ return editor;
+}
diff --git a/devtools/client/debugger/src/utils/editor/get-expression.js b/devtools/client/debugger/src/utils/editor/get-expression.js
new file mode 100644
index 0000000000..c664f163c3
--- /dev/null
+++ b/devtools/client/debugger/src/utils/editor/get-expression.js
@@ -0,0 +1,54 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+export function tokenAtTextPosition(cm, { line, column }) {
+ if (line < 0 || line >= cm.lineCount()) {
+ return null;
+ }
+
+ const token = cm.getTokenAt({ line: line - 1, ch: column });
+ if (!token) {
+ return null;
+ }
+
+ return { startColumn: token.start, endColumn: token.end, type: token.type };
+}
+
+// The strategy of querying codeMirror tokens was borrowed
+// from Chrome's inital implementation in JavaScriptSourceFrame.js#L414
+export function getExpressionFromCoords(cm, coord) {
+ const token = tokenAtTextPosition(cm, coord);
+ if (!token) {
+ return null;
+ }
+
+ let startHighlight = token.startColumn;
+ const endHighlight = token.endColumn;
+ const lineNumber = coord.line;
+ const line = cm.doc.getLine(coord.line - 1);
+ while (startHighlight > 1 && line.charAt(startHighlight - 1) === ".") {
+ const tokenBefore = tokenAtTextPosition(cm, {
+ line: coord.line,
+ column: startHighlight - 2,
+ });
+
+ if (!tokenBefore || !tokenBefore.type) {
+ return null;
+ }
+
+ startHighlight = tokenBefore.startColumn;
+ }
+
+ const expression = line.substring(startHighlight, endHighlight) || "";
+
+ if (!expression) {
+ return null;
+ }
+
+ const location = {
+ start: { line: lineNumber, column: startHighlight },
+ end: { line: lineNumber, column: endHighlight },
+ };
+ return { expression, location };
+}
diff --git a/devtools/client/debugger/src/utils/editor/index.js b/devtools/client/debugger/src/utils/editor/index.js
new file mode 100644
index 0000000000..1adc73b4f8
--- /dev/null
+++ b/devtools/client/debugger/src/utils/editor/index.js
@@ -0,0 +1,222 @@
+/* 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 * from "./source-documents";
+export * from "./source-search";
+export * from "../ui";
+export * from "./tokens";
+
+import { createEditor } from "./create-editor";
+
+import { isWasm, lineToWasmOffset, wasmOffsetToLine } from "../wasm";
+import { createLocation } from "../location";
+
+let editor;
+
+export function getEditor() {
+ if (editor) {
+ return editor;
+ }
+
+ editor = createEditor();
+ return editor;
+}
+
+export function removeEditor() {
+ editor = null;
+}
+
+function getCodeMirror() {
+ return editor && editor.hasCodeMirror ? editor.codeMirror : null;
+}
+
+export function startOperation() {
+ const codeMirror = getCodeMirror();
+ if (!codeMirror) {
+ return;
+ }
+
+ codeMirror.startOperation();
+}
+
+export function endOperation() {
+ const codeMirror = getCodeMirror();
+ if (!codeMirror) {
+ return;
+ }
+
+ codeMirror.endOperation();
+}
+
+export function toEditorLine(sourceId, lineOrOffset) {
+ if (isWasm(sourceId)) {
+ // TODO ensure offset is always "mappable" to edit line.
+ return wasmOffsetToLine(sourceId, lineOrOffset) || 0;
+ }
+
+ return lineOrOffset ? lineOrOffset - 1 : 1;
+}
+
+export function fromEditorLine(sourceId, line, sourceIsWasm) {
+ if (sourceIsWasm) {
+ return lineToWasmOffset(sourceId, line) || 0;
+ }
+
+ return line + 1;
+}
+
+export function toEditorPosition(location) {
+ // Note that Spidermonkey, Debugger frontend and CodeMirror are all consistant regarding column
+ // and are 0-based. But only CodeMirror consider the line to be 0-based while the two others
+ // consider lines to be 1-based.
+ return {
+ line: toEditorLine(location.source.id, location.line),
+ column:
+ isWasm(location.source.id) || (!location.column ? 0 : location.column),
+ };
+}
+
+export function toSourceLine(sourceId, line) {
+ return isWasm(sourceId) ? lineToWasmOffset(sourceId, line) : line + 1;
+}
+
+export function scrollToPosition(codeMirror, line, column) {
+ // For all cases where these are on the first line and column,
+ // avoid the possibly slow computation of cursor location on large bundles.
+ if (!line && !column) {
+ codeMirror.scrollTo(0, 0);
+ return;
+ }
+
+ const { top, left } = codeMirror.charCoords({ line, ch: column }, "local");
+
+ if (!isVisible(codeMirror, top, left)) {
+ const scroller = codeMirror.getScrollerElement();
+ const centeredX = Math.max(left - scroller.offsetWidth / 2, 0);
+ const centeredY = Math.max(top - scroller.offsetHeight / 2, 0);
+
+ codeMirror.scrollTo(centeredX, centeredY);
+ }
+}
+
+function isVisible(codeMirror, top, left) {
+ function withinBounds(x, min, max) {
+ return x >= min && x <= max;
+ }
+
+ const scrollArea = codeMirror.getScrollInfo();
+ const charWidth = codeMirror.defaultCharWidth();
+ const fontHeight = codeMirror.defaultTextHeight();
+ const { scrollTop, scrollLeft } = codeMirror.doc;
+
+ const inXView = withinBounds(
+ left,
+ scrollLeft,
+ scrollLeft + (scrollArea.clientWidth - 30) - charWidth
+ );
+
+ const inYView = withinBounds(
+ top,
+ scrollTop,
+ scrollTop + scrollArea.clientHeight - fontHeight
+ );
+
+ return inXView && inYView;
+}
+
+export function getLocationsInViewport(
+ { codeMirror },
+ // Offset represents an allowance of characters or lines offscreen to improve
+ // perceived performance of column breakpoint rendering
+ offsetHorizontalCharacters = 100,
+ offsetVerticalLines = 20
+) {
+ // Get scroll position
+ if (!codeMirror) {
+ return {
+ start: { line: 0, column: 0 },
+ end: { line: 0, column: 0 },
+ };
+ }
+ const charWidth = codeMirror.defaultCharWidth();
+ const scrollArea = codeMirror.getScrollInfo();
+ const { scrollLeft } = codeMirror.doc;
+ const rect = codeMirror.getWrapperElement().getBoundingClientRect();
+ const topVisibleLine =
+ codeMirror.lineAtHeight(rect.top, "window") - offsetVerticalLines;
+ const bottomVisibleLine =
+ codeMirror.lineAtHeight(rect.bottom, "window") + offsetVerticalLines;
+
+ const leftColumn = Math.floor(
+ scrollLeft > 0 ? scrollLeft / charWidth - offsetHorizontalCharacters : 0
+ );
+ const rightPosition = scrollLeft + (scrollArea.clientWidth - 30);
+ const rightCharacter =
+ Math.floor(rightPosition / charWidth) + offsetHorizontalCharacters;
+
+ return {
+ start: {
+ line: topVisibleLine || 0,
+ column: leftColumn || 0,
+ },
+ end: {
+ line: bottomVisibleLine || 0,
+ column: rightCharacter,
+ },
+ };
+}
+
+export function markText({ codeMirror }, className, { start, end }) {
+ return codeMirror.markText(
+ { ch: start.column, line: start.line },
+ { ch: end.column, line: end.line },
+ { className }
+ );
+}
+
+export function lineAtHeight({ codeMirror }, sourceId, event) {
+ const _editorLine = codeMirror.lineAtHeight(event.clientY);
+ return toSourceLine(sourceId, _editorLine);
+}
+
+export function getSourceLocationFromMouseEvent({ codeMirror }, source, e) {
+ const { line, ch } = codeMirror.coordsChar({
+ left: e.clientX,
+ top: e.clientY,
+ });
+
+ return createLocation({
+ source,
+ line: fromEditorLine(source.id, line, isWasm(source.id)),
+ column: isWasm(source.id) ? 0 : ch + 1,
+ });
+}
+
+export function forEachLine(codeMirror, iter) {
+ codeMirror.operation(() => {
+ codeMirror.doc.iter(0, codeMirror.lineCount(), iter);
+ });
+}
+
+export function removeLineClass(codeMirror, line, className) {
+ codeMirror.removeLineClass(line, "wrap", className);
+}
+
+export function clearLineClass(codeMirror, className) {
+ forEachLine(codeMirror, line => {
+ removeLineClass(codeMirror, line, className);
+ });
+}
+
+export function getTextForLine(codeMirror, line) {
+ return codeMirror.getLine(line - 1).trim();
+}
+
+export function getCursorLine(codeMirror) {
+ return codeMirror.getCursor().line;
+}
+
+export function getCursorColumn(codeMirror) {
+ return codeMirror.getCursor().ch;
+}
diff --git a/devtools/client/debugger/src/utils/editor/moz.build b/devtools/client/debugger/src/utils/editor/moz.build
new file mode 100644
index 0000000000..568546897d
--- /dev/null
+++ b/devtools/client/debugger/src/utils/editor/moz.build
@@ -0,0 +1,15 @@
+# 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(
+ "create-editor.js",
+ "get-expression.js",
+ "index.js",
+ "source-documents.js",
+ "source-search.js",
+ "tokens.js",
+)
diff --git a/devtools/client/debugger/src/utils/editor/source-documents.js b/devtools/client/debugger/src/utils/editor/source-documents.js
new file mode 100644
index 0000000000..2ddb0b1965
--- /dev/null
+++ b/devtools/client/debugger/src/utils/editor/source-documents.js
@@ -0,0 +1,256 @@
+/* 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 { isWasm, getWasmLineNumberFormatter, renderWasmText } from "../wasm";
+import { isMinified } from "../isMinified";
+import { resizeBreakpointGutter, resizeToggleButton } from "../ui";
+import { javascriptLikeExtensions } from "../source";
+
+const sourceDocs = new Map();
+
+export function getDocument(key) {
+ return sourceDocs.get(key);
+}
+
+export function hasDocument(key) {
+ return sourceDocs.has(key);
+}
+
+export function setDocument(key, doc) {
+ sourceDocs.set(key, doc);
+}
+
+export function removeDocument(key) {
+ sourceDocs.delete(key);
+}
+
+export function clearDocuments() {
+ sourceDocs.clear();
+}
+
+export function clearDocumentsForSources(sources) {
+ for (const source of sources) {
+ sourceDocs.delete(source.id);
+ }
+}
+
+function resetLineNumberFormat(editor) {
+ const cm = editor.codeMirror;
+ cm.setOption("lineNumberFormatter", number => number);
+ resizeBreakpointGutter(cm);
+ resizeToggleButton(cm);
+}
+
+function updateLineNumberFormat(editor, sourceId) {
+ if (!isWasm(sourceId)) {
+ resetLineNumberFormat(editor);
+ return;
+ }
+ const cm = editor.codeMirror;
+ const lineNumberFormatter = getWasmLineNumberFormatter(sourceId);
+ cm.setOption("lineNumberFormatter", lineNumberFormatter);
+ resizeBreakpointGutter(cm);
+ resizeToggleButton(cm);
+}
+
+export function updateDocument(editor, source) {
+ if (!source) {
+ return;
+ }
+
+ const sourceId = source.id;
+ const doc = getDocument(sourceId) || editor.createDocument();
+ editor.replaceDocument(doc);
+
+ updateLineNumberFormat(editor, sourceId);
+}
+
+/* used to apply the context menu wrap line option change to all the docs */
+export function updateDocuments(updater) {
+ for (const doc of sourceDocs.values()) {
+ if (doc.cm == null) {
+ continue;
+ } else {
+ updater(doc);
+ }
+ }
+}
+
+export function clearEditor(editor) {
+ const doc = editor.createDocument("", { name: "text" });
+ editor.replaceDocument(doc);
+ resetLineNumberFormat(editor);
+}
+
+export function showLoading(editor) {
+ // Create the "loading message" document only once
+ let doc = getDocument("loading");
+ if (!doc) {
+ doc = editor.createDocument(L10N.getStr("loadingText"), { name: "text" });
+ setDocument("loading", doc);
+ }
+ // `createDocument` won't be used right away in the editor, we still need to
+ // explicitely update it
+ editor.replaceDocument(doc);
+}
+
+export function showErrorMessage(editor, msg) {
+ let error;
+ if (msg.includes("WebAssembly binary source is not available")) {
+ error = L10N.getStr("wasmIsNotAvailable");
+ } else {
+ error = L10N.getFormatStr("errorLoadingText3", msg);
+ }
+ const doc = editor.createDocument(error, { name: "text" });
+ editor.replaceDocument(doc);
+ resetLineNumberFormat(editor);
+}
+
+const contentTypeModeMap = new Map([
+ ["text/javascript", { name: "javascript" }],
+ ["text/typescript", { name: "javascript", typescript: true }],
+ ["text/coffeescript", { name: "coffeescript" }],
+ [
+ "text/typescript-jsx",
+ {
+ name: "jsx",
+ base: { name: "javascript", typescript: true },
+ },
+ ],
+ ["text/jsx", { name: "jsx" }],
+ ["text/x-elm", { name: "elm" }],
+ ["text/x-clojure", { name: "clojure" }],
+ ["text/x-clojurescript", { name: "clojure" }],
+ ["text/wasm", { name: "text" }],
+ ["text/html", { name: "htmlmixed" }],
+ ["text/plain", { name: "text" }],
+]);
+
+const nonJSLanguageExtensionMap = new Map([
+ ["c", { name: "text/x-csrc" }],
+ ["kt", { name: "text/x-kotlin" }],
+ ["cpp", { name: "text/x-c++src" }],
+ ["m", { name: "text/x-objectivec" }],
+ ["rs", { name: "text/x-rustsrc" }],
+ ["hx", { name: "text/x-haxe" }],
+]);
+
+/**
+ * Returns Code Mirror mode for source content type
+ */
+// eslint-disable-next-line complexity
+export function getMode(source, sourceTextContent, symbols) {
+ const content = sourceTextContent.value;
+ // Disable modes for minified files with 1+ million characters (See Bug 1569829).
+ if (
+ content.type === "text" &&
+ isMinified(source, sourceTextContent) &&
+ content.value.length > 1000000
+ ) {
+ return contentTypeModeMap.get("text/plain");
+ }
+
+ if (content.type !== "text") {
+ return contentTypeModeMap.get("text/plain");
+ }
+
+ const extension = source.displayURL.fileExtension;
+ if (extension === "jsx" || (symbols && symbols.hasJsx)) {
+ if (symbols && symbols.hasTypes) {
+ return contentTypeModeMap.get("text/typescript-jsx");
+ }
+ return contentTypeModeMap.get("text/jsx");
+ }
+
+ if (symbols && symbols.hasTypes) {
+ if (symbols.hasJsx) {
+ return contentTypeModeMap.get("text/typescript-jsx");
+ }
+
+ return contentTypeModeMap.get("text/typescript");
+ }
+
+ // check for C and other non JS languages
+ if (nonJSLanguageExtensionMap.has(extension)) {
+ return nonJSLanguageExtensionMap.get(extension);
+ }
+
+ // if the url ends with a known Javascript-like URL, provide JavaScript mode.
+ if (javascriptLikeExtensions.has(extension)) {
+ return contentTypeModeMap.get("text/javascript");
+ }
+
+ const { contentType, value: text } = content;
+ // Use HTML mode for files in which the first non whitespace
+ // character is `<` regardless of extension.
+ const isHTMLLike = () => text.match(/^\s*</);
+ if (!contentType) {
+ if (isHTMLLike()) {
+ return contentTypeModeMap.get("text/html");
+ }
+ return contentTypeModeMap.get("text/plain");
+ }
+
+ // // @flow or /* @flow */
+ if (text.match(/^\s*(\/\/ @flow|\/\* @flow \*\/)/)) {
+ return contentTypeModeMap.get("text/typescript");
+ }
+
+ if (contentTypeModeMap.has(contentType)) {
+ return contentTypeModeMap.get(contentType);
+ }
+
+ if (isHTMLLike()) {
+ return contentTypeModeMap.get("text/html");
+ }
+
+ return contentTypeModeMap.get("text/plain");
+}
+
+function setMode(editor, source, sourceTextContent, symbols) {
+ const mode = getMode(source, sourceTextContent, symbols);
+ const currentMode = editor.codeMirror.getOption("mode");
+ if (!currentMode || currentMode.name != mode.name) {
+ editor.setMode(mode);
+ }
+}
+
+/**
+ * Handle getting the source document or creating a new
+ * document with the correct mode and text.
+ */
+export function showSourceText(editor, source, sourceTextContent, symbols) {
+ if (hasDocument(source.id)) {
+ const doc = getDocument(source.id);
+ if (editor.codeMirror.doc === doc) {
+ setMode(editor, source, sourceTextContent, symbols);
+ return;
+ }
+
+ editor.replaceDocument(doc);
+ updateLineNumberFormat(editor, source.id);
+ setMode(editor, source, sourceTextContent, symbols);
+ return;
+ }
+
+ const content = sourceTextContent.value;
+
+ const doc = editor.createDocument(
+ // We can set wasm text content directly from the constructor, so we pass an empty string
+ // here, and set the text after replacing the document.
+ content.type !== "wasm" ? content.value : "",
+ getMode(source, sourceTextContent, symbols)
+ );
+
+ setDocument(source.id, doc);
+ editor.replaceDocument(doc);
+
+ if (content.type === "wasm") {
+ const wasmLines = renderWasmText(source.id, content);
+ // cm will try to split into lines anyway, saving memory
+ editor.setText({ split: () => wasmLines, match: () => false });
+ }
+
+ updateLineNumberFormat(editor, source.id);
+}
diff --git a/devtools/client/debugger/src/utils/editor/source-editor.css b/devtools/client/debugger/src/utils/editor/source-editor.css
new file mode 100644
index 0000000000..b2ae305657
--- /dev/null
+++ b/devtools/client/debugger/src/utils/editor/source-editor.css
@@ -0,0 +1,271 @@
+/* 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/. */
+
+:root {
+ --breakpoint-active-color: rgba(44, 187, 15, 0.2);
+ --breakpoint-active-color-hover: rgba(44, 187, 15, 0.5);
+ --debug-line-background: rgba(226, 236, 247, 0.5);
+ --debug-line-border: rgb(145, 188, 219);
+}
+
+.theme-dark:root {
+ --debug-line-background: rgb(73, 82, 103);
+ --debug-line-border: rgb(119, 134, 162);
+ --breakpoint-active-color: rgba(45, 210, 158, 0.5);
+ --breakpoint-active-color-hover: rgba(0, 255, 175, 0.7);
+}
+
+.CodeMirror .errors {
+ width: 16px;
+}
+
+.CodeMirror .error {
+ display: inline-block;
+ margin-left: 5px;
+ width: 12px;
+ height: 12px;
+ opacity: 0.75;
+}
+
+.CodeMirror .hit-counts {
+ width: 6px;
+}
+
+.CodeMirror .hit-count {
+ display: inline-block;
+ height: 12px;
+ border: solid rgba(0, 0, 0, 0.2);
+ border-width: 1px 1px 1px 0;
+ border-radius: 0 3px 3px 0;
+ padding: 0 3px;
+ font-size: 10px;
+ pointer-events: none;
+}
+
+.theme-dark .debug-line .CodeMirror-linenumber {
+ color: #c0c0c0;
+}
+
+.debug-line .CodeMirror-line {
+ background-color: var(--debug-line-background) !important;
+ outline: var(--debug-line-border) solid 1px;
+}
+
+/* Don't display the highlight color since the debug line
+ is already highlighted */
+.debug-line .CodeMirror-activeline-background {
+ display: none;
+}
+
+.CodeMirror {
+ cursor: text;
+ height: 100%;
+}
+
+.CodeMirror-gutters {
+ cursor: default;
+}
+
+/* This is to avoid the fake horizontal scrollbar div of codemirror to go 0
+height when floating scrollbars are active. Make sure that this value is equal
+to the maximum of `min-height` specific to the `scrollbar[orient="horizontal"]`
+selector in floating-scrollbar-light.css across all platforms. */
+.CodeMirror-hscrollbar {
+ min-height: 10px;
+}
+
+/* This is to avoid the fake vertical scrollbar div of codemirror to go 0
+width when floating scrollbars are active. Make sure that this value is equal
+to the maximum of `min-width` specific to the `scrollbar[orient="vertical"]`
+selector in floating-scrollbar-light.css across all platforms. */
+.CodeMirror-vscrollbar {
+ min-width: 10px;
+}
+
+.cm-trailingspace {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==");
+ opacity: 0.75;
+ background-position: left bottom;
+ background-repeat: repeat-x;
+}
+
+/* CodeMirror dialogs styling */
+
+.CodeMirror-dialog {
+ padding: 4px 3px;
+}
+
+.CodeMirror-dialog,
+.CodeMirror-dialog input {
+ font: message-box;
+}
+
+/* Fold addon */
+
+.CodeMirror-foldmarker {
+ color: blue;
+ text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px,
+ #b9f -1px 1px 2px;
+ font-family: sans-serif;
+ line-height: 0.3;
+ cursor: pointer;
+}
+
+.CodeMirror-foldgutter {
+ width: 10px;
+}
+
+.CodeMirror-foldgutter-open,
+.CodeMirror-foldgutter-folded {
+ color: #555;
+ cursor: pointer;
+ line-height: 1;
+ padding: 0 1px;
+}
+
+.CodeMirror-foldgutter-open::after,
+.CodeMirror-foldgutter-open::before,
+.CodeMirror-foldgutter-folded::after,
+.CodeMirror-foldgutter-folded::before {
+ content: "";
+ height: 0;
+ width: 0;
+ position: absolute;
+ border: 4px solid transparent;
+}
+
+.CodeMirror-foldgutter-open::after {
+ border-top-color: var(--theme-codemirror-gutter-background);
+ top: 4px;
+}
+
+.CodeMirror-foldgutter-open::before {
+ border-top-color: var(--theme-body-color);
+ top: 5px;
+}
+
+.new-breakpoint .CodeMirror-foldgutter-open::after {
+ border-top-color: var(--theme-selection-background);
+}
+
+.new-breakpoint .CodeMirror-foldgutter-open::before {
+ border-top-color: white;
+}
+
+.CodeMirror-foldgutter-folded::after {
+ border-left-color: var(--theme-codemirror-gutter-background);
+ left: 3px;
+ top: 3px;
+}
+
+.CodeMirror-foldgutter-folded::before {
+ border-left-color: var(--theme-body-color);
+ left: 4px;
+ top: 3px;
+}
+
+.new-breakpoint .CodeMirror-foldgutter-folded::after {
+ border-left-color: var(--theme-selection-background);
+}
+
+.new-breakpoint .CodeMirror-foldgutter-folded::before {
+ border-left-color: white;
+}
+
+.CodeMirror-hints {
+ position: absolute;
+ z-index: 10;
+ overflow: hidden;
+ list-style: none;
+ margin: 0;
+ padding: 2px;
+ border-radius: 3px;
+ font-size: 90%;
+ max-height: 20em;
+ overflow-y: auto;
+}
+
+.CodeMirror-hint {
+ margin: 0;
+ padding: 0 4px;
+ border-radius: 2px;
+ max-width: 19em;
+ overflow: hidden;
+ white-space: pre;
+ cursor: pointer;
+}
+
+.CodeMirror-Tern-completion {
+ padding-inline-start: 22px;
+ position: relative;
+ line-height: 18px;
+}
+
+.CodeMirror-Tern-completion:before {
+ position: absolute;
+ left: 2px;
+ bottom: 2px;
+ border-radius: 50%;
+ font-size: 12px;
+ font-weight: bold;
+ height: 15px;
+ width: 15px;
+ line-height: 16px;
+ text-align: center;
+ color: #ffffff;
+ box-sizing: border-box;
+}
+
+.CodeMirror-Tern-completion-unknown:before {
+ content: "?";
+}
+
+.CodeMirror-Tern-completion-object:before {
+ content: "O";
+}
+
+.CodeMirror-Tern-completion-fn:before {
+ content: "F";
+}
+
+.CodeMirror-Tern-completion-array:before {
+ content: "A";
+}
+
+.CodeMirror-Tern-completion-number:before {
+ content: "N";
+}
+
+.CodeMirror-Tern-completion-string:before {
+ content: "S";
+}
+
+.CodeMirror-Tern-completion-bool:before {
+ content: "B";
+}
+
+.CodeMirror-Tern-completion-guess {
+ color: #999;
+}
+
+.CodeMirror-Tern-tooltip {
+ border-radius: 3px;
+ padding: 2px 5px;
+ white-space: pre-wrap;
+ max-width: 40em;
+ position: absolute;
+ z-index: 10;
+}
+
+.CodeMirror-Tern-hint-doc {
+ max-width: 25em;
+}
+
+.CodeMirror-Tern-farg-current {
+ text-decoration: underline;
+}
+
+.CodeMirror-Tern-fhint-guess {
+ opacity: 0.7;
+}
diff --git a/devtools/client/debugger/src/utils/editor/source-search.js b/devtools/client/debugger/src/utils/editor/source-search.js
new file mode 100644
index 0000000000..92097377ba
--- /dev/null
+++ b/devtools/client/debugger/src/utils/editor/source-search.js
@@ -0,0 +1,327 @@
+/* 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 buildQuery from "../build-query";
+
+/**
+ * @memberof utils/source-search
+ * @static
+ */
+function getSearchCursor(cm, query, pos, modifiers) {
+ const regexQuery = buildQuery(query, modifiers, { isGlobal: true });
+ return cm.getSearchCursor(regexQuery, pos);
+}
+
+/**
+ * @memberof utils/source-search
+ * @static
+ */
+function SearchState() {
+ this.posFrom = this.posTo = this.query = null;
+ this.overlay = null;
+ this.results = [];
+}
+
+/**
+ * @memberof utils/source-search
+ * @static
+ */
+function getSearchState(cm, query) {
+ const state = cm.state.search || (cm.state.search = new SearchState());
+ return state;
+}
+
+function isWhitespace(query) {
+ return !query.match(/\S/);
+}
+
+/**
+ * This returns a mode object used by CodeMirror's addOverlay function
+ * to parse and style tokens in the file.
+ * The mode object contains a tokenizer function (token) which takes
+ * a character stream as input, advances it a character at a time,
+ * and returns style(s) for that token. For more details see
+ * https://codemirror.net/5/doc/manual.html#modeapi
+ *
+ * @memberof utils/source-search
+ * @static
+ */
+function searchOverlay(query, modifiers) {
+ const regexQuery = buildQuery(query, modifiers, {
+ ignoreSpaces: true,
+ // regex must be global for the overlay
+ isGlobal: true,
+ });
+
+ return {
+ token: function (stream, state) {
+ // set the last index to be the current stream position
+ // this acts as an offset
+ regexQuery.lastIndex = stream.pos;
+ const match = regexQuery.exec(stream.string);
+ if (match && match.index === stream.pos) {
+ // if we have a match at the current stream position
+ // set the class for a match
+ stream.pos += match[0].length || 1;
+ return "highlight highlight-full";
+ }
+
+ if (match) {
+ // if we have a match somewhere in the line, go to that point in the
+ // stream
+ stream.pos = match.index;
+ } else {
+ // if we have no matches in this line, skip to the end of the line
+ stream.skipToEnd();
+ }
+
+ return null;
+ },
+ };
+}
+
+/**
+ * @memberof utils/source-search
+ * @static
+ */
+function updateOverlay(cm, state, query, modifiers) {
+ cm.removeOverlay(state.overlay);
+ state.overlay = searchOverlay(query, modifiers);
+ cm.addOverlay(state.overlay, { opaque: false });
+}
+
+function updateCursor(cm, state, keepSelection) {
+ state.posTo = cm.getCursor("anchor");
+ state.posFrom = cm.getCursor("head");
+
+ if (!keepSelection) {
+ state.posTo = { line: 0, ch: 0 };
+ state.posFrom = { line: 0, ch: 0 };
+ }
+}
+
+export function getMatchIndex(count, currentIndex, rev) {
+ if (!rev) {
+ if (currentIndex == count - 1) {
+ return 0;
+ }
+
+ return currentIndex + 1;
+ }
+
+ if (currentIndex == 0) {
+ return count - 1;
+ }
+
+ return currentIndex - 1;
+}
+
+/**
+ * If there's a saved search, selects the next results.
+ * Otherwise, creates a new search and selects the first
+ * result.
+ *
+ * @memberof utils/source-search
+ * @static
+ */
+function doSearch(
+ ctx,
+ rev,
+ query,
+ keepSelection,
+ modifiers,
+ focusFirstResult = true
+) {
+ const { cm, ed } = ctx;
+ if (!cm) {
+ return null;
+ }
+ const defaultIndex = { line: -1, ch: -1 };
+
+ return cm.operation(function () {
+ if (!query || isWhitespace(query)) {
+ clearSearch(cm, query);
+ return null;
+ }
+
+ const state = getSearchState(cm, query);
+ const isNewQuery = state.query !== query;
+ state.query = query;
+
+ updateOverlay(cm, state, query, modifiers);
+ updateCursor(cm, state, keepSelection);
+ const searchLocation = searchNext(ctx, rev, query, isNewQuery, modifiers);
+
+ // We don't want to jump the editor
+ // when we're selecting text
+ if (!cm.state.selectingText && searchLocation && focusFirstResult) {
+ ed.alignLine(searchLocation.from.line, "center");
+ cm.setSelection(searchLocation.from, searchLocation.to);
+ }
+
+ return searchLocation ? searchLocation.from : defaultIndex;
+ });
+}
+
+export function searchSourceForHighlight(
+ ctx,
+ rev,
+ query,
+ keepSelection,
+ modifiers,
+ line,
+ ch
+) {
+ const { cm } = ctx;
+ if (!cm) {
+ return;
+ }
+
+ cm.operation(function () {
+ const state = getSearchState(cm, query);
+ const isNewQuery = state.query !== query;
+ state.query = query;
+
+ updateOverlay(cm, state, query, modifiers);
+ updateCursor(cm, state, keepSelection);
+ findNextOnLine(ctx, rev, query, isNewQuery, modifiers, line, ch);
+ });
+}
+
+function getCursorPos(newQuery, rev, state) {
+ if (newQuery) {
+ return rev ? state.posFrom : state.posTo;
+ }
+
+ return rev ? state.posTo : state.posFrom;
+}
+
+/**
+ * Selects the next result of a saved search.
+ *
+ * @memberof utils/source-search
+ * @static
+ */
+function searchNext(ctx, rev, query, newQuery, modifiers) {
+ const { cm } = ctx;
+ let nextMatch;
+ cm.operation(function () {
+ const state = getSearchState(cm, query);
+ const pos = getCursorPos(newQuery, rev, state);
+
+ if (!state.query) {
+ return;
+ }
+
+ let cursor = getSearchCursor(cm, state.query, pos, modifiers);
+
+ const location = rev
+ ? { line: cm.lastLine(), ch: null }
+ : { line: cm.firstLine(), ch: 0 };
+
+ if (!cursor.find(rev) && state.query) {
+ cursor = getSearchCursor(cm, state.query, location, modifiers);
+ if (!cursor.find(rev)) {
+ return;
+ }
+ }
+
+ nextMatch = { from: cursor.from(), to: cursor.to() };
+ });
+
+ return nextMatch;
+}
+
+function findNextOnLine(ctx, rev, query, newQuery, modifiers, line, ch) {
+ const { cm, ed } = ctx;
+ cm.operation(function () {
+ const pos = { line: line - 1, ch };
+ let cursor = getSearchCursor(cm, query, pos, modifiers);
+
+ if (!cursor.find(rev) && query) {
+ cursor = getSearchCursor(cm, query, pos, modifiers);
+ if (!cursor.find(rev)) {
+ return;
+ }
+ }
+
+ // We don't want to jump the editor
+ // when we're selecting text
+ if (!cm.state.selectingText) {
+ ed.alignLine(cursor.from().line, "center");
+ cm.setSelection(cursor.from(), cursor.to());
+ }
+ });
+}
+
+/**
+ * Remove overlay.
+ *
+ * @memberof utils/source-search
+ * @static
+ */
+export function removeOverlay(ctx, query) {
+ const state = getSearchState(ctx.cm, query);
+ ctx.cm.removeOverlay(state.overlay);
+ const { line, ch } = ctx.cm.getCursor();
+ ctx.cm.doc.setSelection({ line, ch }, { line, ch }, { scroll: false });
+}
+
+/**
+ * Clears the currently saved search.
+ *
+ * @memberof utils/source-search
+ * @static
+ */
+export function clearSearch(cm, query) {
+ const state = getSearchState(cm, query);
+
+ state.results = [];
+
+ if (!state.query) {
+ return;
+ }
+ cm.removeOverlay(state.overlay);
+ state.query = null;
+}
+
+/**
+ * Starts a new search.
+ *
+ * @memberof utils/source-search
+ * @static
+ */
+export function find(ctx, query, keepSelection, modifiers, focusFirstResult) {
+ clearSearch(ctx.cm, query);
+ return doSearch(
+ ctx,
+ false,
+ query,
+ keepSelection,
+ modifiers,
+ focusFirstResult
+ );
+}
+
+/**
+ * Finds the next item based on the currently saved search.
+ *
+ * @memberof utils/source-search
+ * @static
+ */
+export function findNext(ctx, query, keepSelection, modifiers) {
+ return doSearch(ctx, false, query, keepSelection, modifiers);
+}
+
+/**
+ * Finds the previous item based on the currently saved search.
+ *
+ * @memberof utils/source-search
+ * @static
+ */
+export function findPrev(ctx, query, keepSelection, modifiers) {
+ return doSearch(ctx, true, query, keepSelection, modifiers);
+}
+
+export { buildQuery };
diff --git a/devtools/client/debugger/src/utils/editor/tests/__snapshots__/create-editor.spec.js.snap b/devtools/client/debugger/src/utils/editor/tests/__snapshots__/create-editor.spec.js.snap
new file mode 100644
index 0000000000..843647731b
--- /dev/null
+++ b/devtools/client/debugger/src/utils/editor/tests/__snapshots__/create-editor.spec.js.snap
Binary files differ
diff --git a/devtools/client/debugger/src/utils/editor/tests/create-editor.spec.js b/devtools/client/debugger/src/utils/editor/tests/create-editor.spec.js
new file mode 100644
index 0000000000..fe7cd5dcc6
--- /dev/null
+++ b/devtools/client/debugger/src/utils/editor/tests/create-editor.spec.js
@@ -0,0 +1,22 @@
+/* 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 { createEditor } from "../create-editor";
+
+import { features } from "../../prefs";
+
+describe("createEditor", () => {
+ test("SourceEditor default config", () => {
+ const editor = createEditor();
+ expect(editor.config).toMatchSnapshot();
+ expect(editor.config.gutters).not.toContain("CodeMirror-foldgutter");
+ });
+
+ test("Adds codeFolding", () => {
+ features.codeFolding = true;
+ const editor = createEditor();
+ expect(editor.config).toMatchSnapshot();
+ expect(editor.config.gutters).toContain("CodeMirror-foldgutter");
+ });
+});
diff --git a/devtools/client/debugger/src/utils/editor/tests/editor.spec.js b/devtools/client/debugger/src/utils/editor/tests/editor.spec.js
new file mode 100644
index 0000000000..b3fcad17ff
--- /dev/null
+++ b/devtools/client/debugger/src/utils/editor/tests/editor.spec.js
@@ -0,0 +1,186 @@
+/* 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 {
+ toEditorLine,
+ toEditorPosition,
+ toSourceLine,
+ scrollToPosition,
+ markText,
+ lineAtHeight,
+ getSourceLocationFromMouseEvent,
+ forEachLine,
+ removeLineClass,
+ clearLineClass,
+ getTextForLine,
+ getCursorLine,
+} from "../index";
+
+import { makeMockSource } from "../../test-mockup";
+
+describe("toEditorLine", () => {
+ it("returns an editor line", () => {
+ const testId = "test-123";
+ const line = 30;
+ expect(toEditorLine(testId, line)).toEqual(29);
+ });
+});
+
+describe("toEditorPosition", () => {
+ it("returns an editor position", () => {
+ const loc = { source: { id: "source" }, line: 100, column: 25 };
+ expect(toEditorPosition(loc)).toEqual({
+ line: 99,
+ column: 25,
+ });
+ });
+});
+
+describe("toSourceLine", () => {
+ it("returns a source line", () => {
+ const testId = "test-123";
+ const line = 30;
+ expect(toSourceLine(testId, line)).toEqual(31);
+ });
+});
+
+const codeMirror = {
+ doc: {
+ iter: jest.fn((_, __, cb) => cb()),
+ },
+ lineCount: jest.fn(() => 100),
+ getLine: jest.fn(() => "something"),
+ getCursor: jest.fn(() => ({ line: 3 })),
+ getScrollerElement: jest.fn(() => ({
+ offsetWidth: 100,
+ offsetHeight: 100,
+ })),
+ getScrollInfo: () => ({
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
+ clientHeight: 100,
+ clientWidth: 100,
+ }),
+ removeLineClass: jest.fn(),
+ operation: jest.fn(cb => cb()),
+ charCoords: jest.fn(() => ({
+ top: 100,
+ right: 50,
+ bottom: 100,
+ left: 50,
+ })),
+ coordsChar: jest.fn(() => ({ line: 6, ch: 30 })),
+ lineAtHeight: jest.fn(() => 300),
+ markText: jest.fn(),
+ scrollTo: jest.fn(),
+ defaultCharWidth: jest.fn(() => 8),
+ defaultTextHeight: jest.fn(() => 16),
+};
+
+const editor = { codeMirror };
+
+describe("scrollToPosition", () => {
+ it("calls codemirror APIs charCoords, getScrollerElement, scrollTo", () => {
+ scrollToPosition(codeMirror, 60, 123);
+ expect(codeMirror.charCoords).toHaveBeenCalledWith(
+ { line: 60, ch: 123 },
+ "local"
+ );
+ expect(codeMirror.scrollTo).toHaveBeenCalledWith(0, 50);
+ });
+});
+
+describe("markText", () => {
+ it("calls codemirror API markText & returns marker", () => {
+ const loc = {
+ start: { line: 10, column: 0 },
+ end: { line: 30, column: 50 },
+ };
+ markText(editor, "test-123", loc);
+ expect(codeMirror.markText).toHaveBeenCalledWith(
+ { ch: loc.start.column, line: loc.start.line },
+ { ch: loc.end.column, line: loc.end.line },
+ { className: "test-123" }
+ );
+ });
+});
+
+describe("lineAtHeight", () => {
+ it("calls codemirror API lineAtHeight", () => {
+ const e = { clientX: 30, clientY: 60 };
+ expect(lineAtHeight(editor, "test-123", e)).toEqual(301);
+ expect(editor.codeMirror.lineAtHeight).toHaveBeenCalledWith(e.clientY);
+ });
+});
+
+describe("getSourceLocationFromMouseEvent", () => {
+ it("calls codemirror API coordsChar & returns location", () => {
+ const source = makeMockSource(undefined, "test-123");
+ const e = { clientX: 30, clientY: 60 };
+ expect(getSourceLocationFromMouseEvent(editor, source, e)).toEqual({
+ source,
+ line: 7,
+ column: 31,
+ sourceActorId: undefined,
+ sourceActor: null,
+ });
+ expect(editor.codeMirror.coordsChar).toHaveBeenCalledWith({
+ left: 30,
+ top: 60,
+ });
+ });
+});
+
+describe("forEachLine", () => {
+ it("calls codemirror API operation && doc.iter across a doc", () => {
+ const test = jest.fn();
+ forEachLine(codeMirror, test);
+ expect(codeMirror.operation).toHaveBeenCalled();
+ expect(codeMirror.doc.iter).toHaveBeenCalledWith(0, 100, test);
+ });
+});
+
+describe("removeLineClass", () => {
+ it("calls codemirror API removeLineClass", () => {
+ const line = 3;
+ const className = "test-class";
+ removeLineClass(codeMirror, line, className);
+ expect(codeMirror.removeLineClass).toHaveBeenCalledWith(
+ line,
+ "wrap",
+ className
+ );
+ });
+});
+
+describe("clearLineClass", () => {
+ it("Uses forEachLine & removeLineClass to clear class on all lines", () => {
+ codeMirror.operation.mockClear();
+ codeMirror.doc.iter.mockClear();
+ codeMirror.removeLineClass.mockClear();
+ clearLineClass(codeMirror, "test-class");
+ expect(codeMirror.operation).toHaveBeenCalled();
+ expect(codeMirror.doc.iter).toHaveBeenCalledWith(
+ 0,
+ 100,
+ expect.any(Function)
+ );
+ expect(codeMirror.removeLineClass).toHaveBeenCalled();
+ });
+});
+
+describe("getTextForLine", () => {
+ it("calls codemirror API getLine & returns line text", () => {
+ getTextForLine(codeMirror, 3);
+ expect(codeMirror.getLine).toHaveBeenCalledWith(2);
+ });
+});
+describe("getCursorLine", () => {
+ it("calls codemirror API getCursor & returns line number", () => {
+ getCursorLine(codeMirror);
+ expect(codeMirror.getCursor).toHaveBeenCalled();
+ });
+});
diff --git a/devtools/client/debugger/src/utils/editor/tests/source-documents.spec.js b/devtools/client/debugger/src/utils/editor/tests/source-documents.spec.js
new file mode 100644
index 0000000000..f85c6b43ff
--- /dev/null
+++ b/devtools/client/debugger/src/utils/editor/tests/source-documents.spec.js
@@ -0,0 +1,213 @@
+/* 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 { getMode } from "../source-documents.js";
+
+import {
+ makeMockSourceWithContent,
+ makeMockWasmSourceWithContent,
+} from "../../test-mockup";
+
+const defaultSymbolDeclarations = {
+ classes: [],
+ functions: [],
+ memberExpressions: [],
+ objectProperties: [],
+ identifiers: [],
+ comments: [],
+ literals: [],
+ hasJsx: false,
+ hasTypes: false,
+ framework: undefined,
+};
+
+describe("source-documents", () => {
+ describe("getMode", () => {
+ it("//", () => {
+ const source = makeMockSourceWithContent(
+ undefined,
+ undefined,
+ "text/javascript",
+ "// @flow"
+ );
+ expect(getMode(source, source.content)).toEqual({
+ name: "javascript",
+ typescript: true,
+ });
+ });
+
+ it("/* @flow */", () => {
+ const source = makeMockSourceWithContent(
+ undefined,
+ undefined,
+ "text/javascript",
+ " /* @flow */"
+ );
+ expect(getMode(source, source.content)).toEqual({
+ name: "javascript",
+ typescript: true,
+ });
+ });
+
+ it("mixed html", () => {
+ const source = makeMockSourceWithContent(
+ undefined,
+ undefined,
+ "",
+ " <html"
+ );
+ expect(getMode(source, source.content)).toEqual({ name: "htmlmixed" });
+ });
+
+ it("elm", () => {
+ const source = makeMockSourceWithContent(
+ undefined,
+ undefined,
+ "text/x-elm",
+ 'main = text "Hello, World!"'
+ );
+ expect(getMode(source, source.content)).toEqual({ name: "elm" });
+ });
+
+ it("returns jsx if contentType jsx is given", () => {
+ const source = makeMockSourceWithContent(
+ undefined,
+ undefined,
+ "text/jsx",
+ "<h1></h1>"
+ );
+ expect(getMode(source, source.content)).toEqual({ name: "jsx" });
+ });
+
+ it("returns jsx if sourceMetaData says it's a react component", () => {
+ const source = makeMockSourceWithContent(
+ undefined,
+ undefined,
+ "",
+ "<h1></h1>"
+ );
+ expect(
+ getMode(source, source.content, {
+ ...defaultSymbolDeclarations,
+ hasJsx: true,
+ })
+ ).toEqual({ name: "jsx" });
+ });
+
+ it("returns jsx if the fileExtension is .jsx", () => {
+ const source = makeMockSourceWithContent(
+ "myComponent.jsx",
+ undefined,
+ "",
+ "<h1></h1>"
+ );
+ expect(getMode(source, source.content)).toEqual({ name: "jsx" });
+ });
+
+ it("returns text/x-haxe if the file extension is .hx", () => {
+ const source = makeMockSourceWithContent(
+ "myComponent.hx",
+ undefined,
+ "",
+ "function foo(){}"
+ );
+ expect(getMode(source, source.content)).toEqual({ name: "text/x-haxe" });
+ });
+
+ it("typescript", () => {
+ const source = makeMockSourceWithContent(
+ undefined,
+ undefined,
+ "text/typescript",
+ "function foo(){}"
+ );
+ expect(getMode(source, source.content)).toEqual({
+ name: "javascript",
+ typescript: true,
+ });
+ });
+
+ it("typescript-jsx", () => {
+ const source = makeMockSourceWithContent(
+ undefined,
+ undefined,
+ "text/typescript-jsx",
+ "<h1></h1>"
+ );
+ expect(getMode(source, source.content).base).toEqual({
+ name: "javascript",
+ typescript: true,
+ });
+ });
+
+ it("cross-platform clojure(script) with reader conditionals", () => {
+ const source = makeMockSourceWithContent(
+ "my-clojurescript-source-with-reader-conditionals.cljc",
+ undefined,
+ "text/x-clojure",
+ "(defn str->int [s] " +
+ " #?(:clj (java.lang.Integer/parseInt s) " +
+ " :cljs (js/parseInt s)))"
+ );
+ expect(getMode(source, source.content)).toEqual({ name: "clojure" });
+ });
+
+ it("clojurescript", () => {
+ const source = makeMockSourceWithContent(
+ "my-clojurescript-source.cljs",
+ undefined,
+ "text/x-clojurescript",
+ "(+ 1 2 3)"
+ );
+ expect(getMode(source, source.content)).toEqual({ name: "clojure" });
+ });
+
+ it("coffeescript", () => {
+ const source = makeMockSourceWithContent(
+ undefined,
+ undefined,
+ "text/coffeescript",
+ "x = (a) -> 3"
+ );
+ expect(getMode(source, source.content)).toEqual({ name: "coffeescript" });
+ });
+
+ it("wasm", () => {
+ const source = makeMockWasmSourceWithContent({
+ binary: "\x00asm\x01\x00\x00\x00",
+ });
+ expect(getMode(source, source.content.value)).toEqual({ name: "text" });
+ });
+
+ it("marko", () => {
+ const source = makeMockSourceWithContent(
+ "http://localhost.com:7999/increment/sometestfile.marko",
+ undefined,
+ "does not matter",
+ "function foo(){}"
+ );
+ expect(getMode(source, source.content)).toEqual({ name: "javascript" });
+ });
+
+ it("es6", () => {
+ const source = makeMockSourceWithContent(
+ "http://localhost.com:7999/increment/sometestfile.es6",
+ undefined,
+ "does not matter",
+ "function foo(){}"
+ );
+ expect(getMode(source, source.content)).toEqual({ name: "javascript" });
+ });
+
+ it("vue", () => {
+ const source = makeMockSourceWithContent(
+ "http://localhost.com:7999/increment/sometestfile.vue?query=string",
+ undefined,
+ "does not matter",
+ "function foo(){}"
+ );
+ expect(getMode(source, source.content)).toEqual({ name: "javascript" });
+ });
+ });
+});
diff --git a/devtools/client/debugger/src/utils/editor/tests/source-search.spec.js b/devtools/client/debugger/src/utils/editor/tests/source-search.spec.js
new file mode 100644
index 0000000000..33f479766a
--- /dev/null
+++ b/devtools/client/debugger/src/utils/editor/tests/source-search.spec.js
@@ -0,0 +1,182 @@
+/* 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 {
+ find,
+ searchSourceForHighlight,
+ getMatchIndex,
+ removeOverlay,
+} from "../source-search";
+
+const getCursor = jest.fn(() => ({ line: 90, ch: 54 }));
+const cursor = {
+ find: jest.fn(),
+ from: jest.fn(),
+ to: jest.fn(),
+};
+const getSearchCursor = jest.fn(() => cursor);
+const modifiers = {
+ caseSensitive: false,
+ regexMatch: false,
+ wholeWord: false,
+};
+
+const getCM = () => ({
+ operation: jest.fn(cb => cb()),
+ addOverlay: jest.fn(),
+ removeOverlay: jest.fn(),
+ getCursor,
+ getSearchCursor,
+ firstLine: jest.fn(),
+ state: {},
+});
+
+describe("source-search", () => {
+ describe("find", () => {
+ it("calls into CodeMirror APIs via clearSearch & doSearch", () => {
+ const ctx = { cm: getCM() };
+ expect(ctx.cm.state).toEqual({});
+ find(ctx, "test", false, modifiers);
+ // First we check the APIs called via clearSearch
+ expect(ctx.cm.removeOverlay).toHaveBeenCalledWith(null);
+ // Next those via doSearch
+ expect(ctx.cm.operation).toHaveBeenCalled();
+ expect(ctx.cm.removeOverlay).toHaveBeenCalledWith(null);
+ expect(ctx.cm.addOverlay).toHaveBeenCalledWith(
+ { token: expect.any(Function) },
+ { opaque: false }
+ );
+ expect(ctx.cm.getCursor).toHaveBeenCalledWith("anchor");
+ expect(ctx.cm.getCursor).toHaveBeenCalledWith("head");
+ const search = {
+ query: "test",
+ posTo: { line: 0, ch: 0 },
+ posFrom: { line: 0, ch: 0 },
+ overlay: { token: expect.any(Function) },
+ results: [],
+ };
+ expect(ctx.cm.state).toEqual({ search });
+ });
+
+ it("clears a previous overlay", () => {
+ const ctx = { cm: getCM() };
+ ctx.cm.state.search = {
+ query: "foo",
+ posTo: null,
+ posFrom: null,
+ overlay: { token: expect.any(Function) },
+ results: [],
+ };
+ find(ctx, "test", true, modifiers);
+ expect(ctx.cm.removeOverlay).toHaveBeenCalledWith({
+ token: expect.any(Function),
+ });
+ });
+
+ it("clears for empty queries", () => {
+ const ctx = { cm: getCM() };
+ ctx.cm.state.search = {
+ query: "foo",
+ posTo: null,
+ posFrom: null,
+ overlay: null,
+ results: [],
+ };
+ find(ctx, "", true, modifiers);
+ expect(ctx.cm.removeOverlay).toHaveBeenCalledWith(null);
+ ctx.cm.removeOverlay.mockClear();
+ ctx.cm.state.search.query = "bar";
+ find(ctx, "", true, modifiers);
+ expect(ctx.cm.removeOverlay).toHaveBeenCalledWith(null);
+ });
+ });
+
+ describe("searchSourceForHighlight", () => {
+ it("calls into CodeMirror APIs and sets the correct selection", () => {
+ const line = 15;
+ const from = { line, ch: 1 };
+ const to = { line, ch: 5 };
+ const cm = {
+ ...getCM(),
+ setSelection: jest.fn(),
+ getSearchCursor: () => ({
+ find: () => true,
+ from: () => from,
+ to: () => to,
+ }),
+ };
+ const ed = { alignLine: jest.fn() };
+ const ctx = { cm, ed };
+
+ expect(ctx.cm.state).toEqual({});
+ searchSourceForHighlight(ctx, false, "test", false, modifiers, line, 1);
+
+ expect(ctx.cm.operation).toHaveBeenCalled();
+ expect(ctx.cm.removeOverlay).toHaveBeenCalledWith(null);
+ expect(ctx.cm.addOverlay).toHaveBeenCalledWith(
+ { token: expect.any(Function) },
+ { opaque: false }
+ );
+ expect(ctx.cm.getCursor).toHaveBeenCalledWith("anchor");
+ expect(ctx.cm.getCursor).toHaveBeenCalledWith("head");
+ expect(ed.alignLine).toHaveBeenCalledWith(line, "center");
+ expect(cm.setSelection).toHaveBeenCalledWith(from, to);
+ });
+ });
+
+ describe("findNext", () => {});
+
+ describe("findPrev", () => {});
+
+ describe("getMatchIndex", () => {
+ it("iterates in the matches", () => {
+ const count = 3;
+
+ // reverse 2, 1, 0, 2
+
+ let matchIndex = getMatchIndex(count, 2, true);
+ expect(matchIndex).toBe(1);
+
+ matchIndex = getMatchIndex(count, 1, true);
+ expect(matchIndex).toBe(0);
+
+ matchIndex = getMatchIndex(count, 0, true);
+ expect(matchIndex).toBe(2);
+
+ // forward 1, 2, 0, 1
+
+ matchIndex = getMatchIndex(count, 1, false);
+ expect(matchIndex).toBe(2);
+
+ matchIndex = getMatchIndex(count, 2, false);
+ expect(matchIndex).toBe(0);
+
+ matchIndex = getMatchIndex(count, 0, false);
+ expect(matchIndex).toBe(1);
+ });
+ });
+
+ describe("removeOverlay", () => {
+ it("calls CodeMirror APIs: removeOverlay, getCursor & setSelection", () => {
+ const ctx = {
+ cm: {
+ removeOverlay: jest.fn(),
+ getCursor,
+ state: {},
+ doc: {
+ setSelection: jest.fn(),
+ },
+ },
+ };
+ removeOverlay(ctx, "test");
+ expect(ctx.cm.removeOverlay).toHaveBeenCalled();
+ expect(ctx.cm.getCursor).toHaveBeenCalled();
+ expect(ctx.cm.doc.setSelection).toHaveBeenCalledWith(
+ { line: 90, ch: 54 },
+ { line: 90, ch: 54 },
+ { scroll: false }
+ );
+ });
+ });
+});
diff --git a/devtools/client/debugger/src/utils/editor/tokens.js b/devtools/client/debugger/src/utils/editor/tokens.js
new file mode 100644
index 0000000000..f8783c02fe
--- /dev/null
+++ b/devtools/client/debugger/src/utils/editor/tokens.js
@@ -0,0 +1,178 @@
+/* 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/>. */
+
+function _isInvalidTarget(target) {
+ if (!target || !target.innerText) {
+ return true;
+ }
+
+ const tokenText = target.innerText.trim();
+
+ // exclude syntax where the expression would be a syntax error
+ const invalidToken =
+ tokenText === "" || tokenText.match(/^[(){}\|&%,.;=<>\+-/\*\s](?=)/);
+ if (invalidToken) {
+ return true;
+ }
+
+ // exclude tokens for which it does not make sense to show a preview:
+ // - literal
+ // - primitives
+ // - operators
+ // - tags
+ const INVALID_TARGET_CLASSES = [
+ "cm-atom",
+ "cm-number",
+ "cm-operator",
+ "cm-string",
+ "cm-tag",
+ // also exclude editor element (defined in Editor component)
+ "editor-mount",
+ ];
+ if (
+ target.className === "" ||
+ INVALID_TARGET_CLASSES.some(cls => target.classList.contains(cls))
+ ) {
+ return true;
+ }
+
+ // We need to exclude keywords, but since codeMirror tags "this" as a keyword, we need
+ // to check the tokenText as well.
+ // This seems to be the only case that we want to exclude (see devtools/client/shared/sourceeditor/codemirror/mode/javascript/javascript.js#24-41)
+ if (target.classList.contains("cm-keyword") && tokenText !== "this") {
+ return true;
+ }
+
+ // exclude codemirror elements that are not tokens
+ if (
+ // exclude inline preview
+ target.closest(".CodeMirror-widget") ||
+ // exclude in-line "empty" space, as well as the gutter
+ target.matches(".CodeMirror-line, .CodeMirror-gutter-elt") ||
+ target.getBoundingClientRect().top == 0
+ ) {
+ return true;
+ }
+
+ // exclude popup
+ if (target.closest(".popover")) {
+ return true;
+ }
+
+ return false;
+}
+
+function _dispatch(codeMirror, eventName, data) {
+ codeMirror.constructor.signal(codeMirror, eventName, data);
+}
+
+function _invalidLeaveTarget(target) {
+ if (!target || target.closest(".popover")) {
+ return true;
+ }
+
+ return false;
+}
+
+/**
+ * Wraps the codemirror mouse events to generate token events
+ * @param {*} codeMirror
+ * @returns
+ */
+export function onMouseOver(codeMirror) {
+ let prevTokenPos = null;
+
+ function onMouseLeave(event) {
+ if (_invalidLeaveTarget(event.relatedTarget)) {
+ addMouseLeave(event.target);
+ return;
+ }
+
+ prevTokenPos = null;
+ _dispatch(codeMirror, "tokenleave", event);
+ }
+
+ function addMouseLeave(target) {
+ target.addEventListener("mouseleave", onMouseLeave, {
+ capture: true,
+ once: true,
+ });
+ }
+
+ return enterEvent => {
+ const { target } = enterEvent;
+
+ if (_isInvalidTarget(target)) {
+ return;
+ }
+
+ const tokenPos = getTokenLocation(codeMirror, target);
+
+ if (
+ prevTokenPos?.line !== tokenPos?.line ||
+ prevTokenPos?.column !== tokenPos?.column
+ ) {
+ addMouseLeave(target);
+
+ _dispatch(codeMirror, "tokenenter", {
+ event: enterEvent,
+ target,
+ tokenPos,
+ });
+ prevTokenPos = tokenPos;
+ }
+ };
+}
+
+/**
+ * Gets the end position of a token at a specific line/column
+ *
+ * @param {*} codeMirror
+ * @param {Number} line
+ * @param {Number} column
+ * @returns {Number}
+ */
+export function getTokenEnd(codeMirror, line, column) {
+ const token = codeMirror.getTokenAt({
+ line,
+ ch: column + 1,
+ });
+ const tokenString = token.string;
+
+ return tokenString === "{" || tokenString === "[" ? null : token.end;
+}
+
+/**
+ * Given the dom element related to the token, this gets its line and column.
+ *
+ * @param {*} codeMirror
+ * @param {*} tokenEl
+ * @returns {Object} An object of the form { line, column }
+ */
+export function getTokenLocation(codeMirror, tokenEl) {
+ // Get the quad (and not the bounding rect), as the span could wrap on multiple lines
+ // and the middle of the bounding rect may not be over the token:
+ // +───────────────────────+
+ // │ myLongVariableNa│
+ // │me + │
+ // +───────────────────────+
+ const { p1, p2, p3 } = tokenEl.getBoxQuads()[0];
+ const left = p1.x + (p2.x - p1.x) / 2;
+ const top = p1.y + (p3.y - p1.y) / 2;
+ const { line, ch } = codeMirror.coordsChar(
+ {
+ left,
+ top,
+ },
+ // Use the "window" context where the coordinates are relative to the top-left corner
+ // of the currently visible (scrolled) window.
+ // This enables codemirror also correctly handle wrappped lines in the editor.
+ "window"
+ );
+
+ return {
+ line: line + 1,
+ column: ch,
+ };
+}
diff --git a/devtools/client/debugger/src/utils/environment.js b/devtools/client/debugger/src/utils/environment.js
new file mode 100644
index 0000000000..6f68dd793c
--- /dev/null
+++ b/devtools/client/debugger/src/utils/environment.js
@@ -0,0 +1,15 @@
+/* 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 isNode() {
+ try {
+ return process.release.name == "node";
+ } catch (e) {
+ return false;
+ }
+}
+
+export function isNodeTest() {
+ return isNode() && process.env.NODE_ENV != "production";
+}
diff --git a/devtools/client/debugger/src/utils/evaluation-result.js b/devtools/client/debugger/src/utils/evaluation-result.js
new file mode 100644
index 0000000000..def02aacfa
--- /dev/null
+++ b/devtools/client/debugger/src/utils/evaluation-result.js
@@ -0,0 +1,19 @@
+/* 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/>. */
+
+function isFront(result) {
+ return !!result && typeof result === "object" && !!result.getGrip;
+}
+
+export function getGrip(result) {
+ if (isFront(result)) {
+ return result.getGrip();
+ }
+
+ return result;
+}
+
+export function getFront(result) {
+ return isFront(result) ? result : null;
+}
diff --git a/devtools/client/debugger/src/utils/expressions.js b/devtools/client/debugger/src/utils/expressions.js
new file mode 100644
index 0000000000..f30d0c089c
--- /dev/null
+++ b/devtools/client/debugger/src/utils/expressions.js
@@ -0,0 +1,67 @@
+/* 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 { correctIndentation } from "./indentation";
+import { getGrip, getFront } from "./evaluation-result";
+
+const UNAVAILABLE_GRIP = { unavailable: true };
+
+/*
+ * wrap the expression input in a try/catch so that it can be safely
+ * evaluated.
+ *
+ * NOTE: we add line after the expression to protect against comments.
+ */
+export function wrapExpression(input) {
+ return correctIndentation(`
+ try {
+ ${input}
+ } catch (e) {
+ e
+ }
+ `);
+}
+
+function isUnavailable(value) {
+ return (
+ value &&
+ !!value.isError &&
+ (value.class === "ReferenceError" || value.class === "TypeError")
+ );
+}
+
+/**
+ *
+ * @param {Object} expression: Expression item as stored in state.expressions in reducers/expressions.js
+ * @param {String} expression.input: evaluated expression string
+ * @param {Object} expression.value: evaluated expression result object as returned from ScriptCommand#execute
+ * @param {Object} expression.value.result: expression result, might be a primitive, a grip or a front
+ * @param {Object} expression.value.exception: expression result error, might be a primitive, a grip or a front
+ * @returns {Object} an object of the following shape:
+ * - expressionResultGrip: A primitive or a grip
+ * - expressionResultFront: An object front if it exists, or undefined
+ */
+export function getExpressionResultGripAndFront(expression) {
+ const { value } = expression;
+
+ if (!value) {
+ return { expressionResultGrip: UNAVAILABLE_GRIP };
+ }
+
+ const expressionResultReturn = value.exception || value.result;
+ const valueGrip = getGrip(expressionResultReturn);
+ if (!valueGrip || isUnavailable(valueGrip)) {
+ return { expressionResultGrip: UNAVAILABLE_GRIP };
+ }
+
+ if (valueGrip.isError) {
+ const { name, message } = valueGrip.preview;
+ return { expressionResultGrip: `${name}: ${message}` };
+ }
+
+ return {
+ expressionResultGrip: valueGrip,
+ expressionResultFront: getFront(expressionResultReturn),
+ };
+}
diff --git a/devtools/client/debugger/src/utils/function.js b/devtools/client/debugger/src/utils/function.js
new file mode 100644
index 0000000000..39d0f5a9a7
--- /dev/null
+++ b/devtools/client/debugger/src/utils/function.js
@@ -0,0 +1,37 @@
+/* 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 { isFulfilled } from "./async-value";
+import { findClosestFunction } from "./ast";
+import { correctIndentation } from "./indentation";
+
+export function findFunctionText(line, source, sourceTextContent, symbols) {
+ const func = findClosestFunction(symbols, {
+ sourceId: source.id,
+ line,
+ column: Infinity,
+ });
+
+ if (
+ source.isWasm ||
+ !func ||
+ !sourceTextContent ||
+ !isFulfilled(sourceTextContent) ||
+ sourceTextContent.value.type !== "text"
+ ) {
+ return null;
+ }
+
+ const {
+ location: { start, end },
+ } = func;
+ const lines = sourceTextContent.value.value.split("\n");
+ const firstLine = lines[start.line - 1].slice(start.column);
+ const lastLine = lines[end.line - 1].slice(0, end.column);
+ const middle = lines.slice(start.line, end.line - 1);
+ const functionText = [firstLine, ...middle, lastLine].join("\n");
+ const indentedFunctionText = correctIndentation(functionText);
+
+ return indentedFunctionText;
+}
diff --git a/devtools/client/debugger/src/utils/indentation.js b/devtools/client/debugger/src/utils/indentation.js
new file mode 100644
index 0000000000..80e5014f6d
--- /dev/null
+++ b/devtools/client/debugger/src/utils/indentation.js
@@ -0,0 +1,40 @@
+/* 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 getIndentation(line) {
+ if (!line) {
+ return 0;
+ }
+
+ const lineMatch = line.match(/^\s*/);
+ if (!lineMatch) {
+ return 0;
+ }
+
+ return lineMatch[0].length;
+}
+
+function getMaxIndentation(lines) {
+ const firstLine = lines[0];
+ const secondLine = lines[1];
+ const lastLine = lines[lines.length - 1];
+
+ const indentations = [
+ getIndentation(firstLine),
+ getIndentation(secondLine),
+ getIndentation(lastLine),
+ ];
+
+ return Math.max(...indentations);
+}
+
+export function correctIndentation(text) {
+ const lines = text.trim().split("\n");
+ const indentation = getMaxIndentation(lines);
+ const formattedLines = lines.map(_line =>
+ _line.replace(new RegExp(`^\\s{0,${indentation - 1}}`), "")
+ );
+
+ return formattedLines.join("\n");
+}
diff --git a/devtools/client/debugger/src/utils/isMinified.js b/devtools/client/debugger/src/utils/isMinified.js
new file mode 100644
index 0000000000..dc5963b1b2
--- /dev/null
+++ b/devtools/client/debugger/src/utils/isMinified.js
@@ -0,0 +1,58 @@
+/* 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 { isFulfilled } from "./async-value";
+
+// Used to detect minification for automatic pretty printing
+const SAMPLE_SIZE = 50;
+const INDENT_COUNT_THRESHOLD = 5;
+const CHARACTER_LIMIT = 250;
+const _minifiedCache = new Map();
+
+export function isMinified(source, sourceTextContent) {
+ if (_minifiedCache.has(source.id)) {
+ return _minifiedCache.get(source.id);
+ }
+
+ if (
+ !sourceTextContent ||
+ !isFulfilled(sourceTextContent) ||
+ sourceTextContent.value.type !== "text"
+ ) {
+ return false;
+ }
+
+ let text = sourceTextContent.value.value;
+
+ let lineEndIndex = 0;
+ let lineStartIndex = 0;
+ let lines = 0;
+ let indentCount = 0;
+ let overCharLimit = false;
+
+ // Strip comments.
+ text = text.replace(/\/\*[\S\s]*?\*\/|\/\/(.+|\n)/g, "");
+
+ while (lines++ < SAMPLE_SIZE) {
+ lineEndIndex = text.indexOf("\n", lineStartIndex);
+ if (lineEndIndex == -1) {
+ break;
+ }
+ if (/^\s+/.test(text.slice(lineStartIndex, lineEndIndex))) {
+ indentCount++;
+ }
+ // For files with no indents but are not minified.
+ if (lineEndIndex - lineStartIndex > CHARACTER_LIMIT) {
+ overCharLimit = true;
+ break;
+ }
+ lineStartIndex = lineEndIndex + 1;
+ }
+
+ const minified =
+ (indentCount / lines) * 100 < INDENT_COUNT_THRESHOLD || overCharLimit;
+
+ _minifiedCache.set(source.id, minified);
+ return minified;
+}
diff --git a/devtools/client/debugger/src/utils/location.js b/devtools/client/debugger/src/utils/location.js
new file mode 100644
index 0000000000..46e5c4ae05
--- /dev/null
+++ b/devtools/client/debugger/src/utils/location.js
@@ -0,0 +1,124 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+import { getSelectedLocation } from "./selected-location";
+import { getSource } from "../selectors/index";
+
+/**
+ * Note that arguments can be created via `createLocation`.
+ * But they can also be created via `createPendingLocation` in reducer/pending-breakpoints.js.
+ * Both will have similar line and column attributes.
+ */
+export function comparePosition(a, b) {
+ return a && b && a.line == b.line && a.column == b.column;
+}
+
+export function createLocation({
+ source,
+ sourceActor = null,
+
+ // Line 0 represents no specific line chosen for action
+ line = 0,
+ column,
+}) {
+ return {
+ source,
+ sourceActor,
+ sourceActorId: sourceActor?.id,
+
+ // `line` and `column` are 1-based.
+ // This data is mostly coming from and driven by
+ // JSScript::lineno and JSScript::column
+ // https://searchfox.org/mozilla-central/rev/90dce6b0223b4dc17bb10f1125b44f70951585f9/js/src/vm/JSScript.h#1545-1548
+ line,
+ column,
+ };
+}
+
+/**
+ * Convert location objects created via `createLocation` into
+ * the format used by the Source Map Loader/Worker.
+ * It only needs sourceId, line and column attributes.
+ */
+export function debuggerToSourceMapLocation(location) {
+ return {
+ sourceId: location.source.id,
+ // In case of errors loading the source, we might not have a precise location.
+ // Defaults to first line and column.
+ line: location.line || 1,
+ column: location.column || 0,
+ };
+}
+
+/**
+ * Pending location only need these three attributes,
+ * and especially doesn't need the large source and sourceActor objects of the regular location objects.
+ *
+ * @param {Object} location
+ */
+export function createPendingSelectedLocation(location) {
+ return {
+ url: location.source.url,
+
+ line: location.line,
+ column: location.column,
+ };
+}
+
+export function sortSelectedLocations(locations, selectedSource) {
+ return Array.from(locations).sort((locationA, locationB) => {
+ const aSelected = getSelectedLocation(locationA, selectedSource);
+ const bSelected = getSelectedLocation(locationB, selectedSource);
+
+ // Order the locations by line number…
+ if (aSelected.line < bSelected.line) {
+ return -1;
+ }
+
+ if (aSelected.line > bSelected.line) {
+ return 1;
+ }
+
+ // … and if we have the same line, we want to return location with undefined columns
+ // first, and then order them by column
+ if (aSelected.column == bSelected.column) {
+ return 0;
+ }
+
+ if (aSelected.column === undefined) {
+ return -1;
+ }
+
+ if (bSelected.column === undefined) {
+ return 1;
+ }
+
+ return aSelected.column < bSelected.column ? -1 : 1;
+ });
+}
+
+/**
+ * Source map Loader/Worker and debugger frontend don't use the same objects for locations.
+ * Worker uses 'sourceId' attributes whereas the frontend has 'source' attribute.
+ */
+export function sourceMapToDebuggerLocation(state, location) {
+ // From MapScopes modules, we might re-process the exact same location objects
+ // for which we would already have computed the source object,
+ // and which would lack sourceId attribute.
+ if (location.source) {
+ return location;
+ }
+
+ // SourceMapLoader doesn't known about debugger's source objects
+ // so that we have to fetch it from here
+ const source = getSource(state, location.sourceId);
+ if (!source) {
+ throw new Error(`Could not find source-map source ${location.sourceId}`);
+ }
+
+ return createLocation({
+ ...location,
+ source,
+ });
+}
diff --git a/devtools/client/debugger/src/utils/log.js b/devtools/client/debugger/src/utils/log.js
new file mode 100644
index 0000000000..6e2e3b7b15
--- /dev/null
+++ b/devtools/client/debugger/src/utils/log.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/>. */
+
+/* */
+
+/**
+ *
+ * Utils for logging to the console
+ * Suppresses logging in non-development environment
+ *
+ * @module utils/log
+ */
+
+import { prefs } from "./prefs";
+
+/**
+ * Produces a formatted console log line by imploding args, prefixed by [log]
+ *
+ * function input: log(["hello", "world"])
+ * console output: [log] hello world
+ *
+ * @memberof utils/log
+ * @static
+ */
+export function log(...args) {
+ if (prefs.logging) {
+ console.log(...args);
+ }
+}
diff --git a/devtools/client/debugger/src/utils/memoizableAction.js b/devtools/client/debugger/src/utils/memoizableAction.js
new file mode 100644
index 0000000000..0f465177e2
--- /dev/null
+++ b/devtools/client/debugger/src/utils/memoizableAction.js
@@ -0,0 +1,75 @@
+/* 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 { asSettled } from "./async-value";
+import { validateContext } from "./context";
+
+/*
+ * memoizableActon is a utility for actions that should only be performed
+ * once per key. It is useful for loading sources, parsing symbols ...
+ *
+ * @getValue - gets the result from the redux store
+ * @createKey - creates a key for the requests map
+ * @action - kicks off the async work for the action
+ *
+ *
+ * For Example
+ *
+ * export const setItem = memoizeableAction(
+ * "setItem",
+ * {
+ * hasValue: ({ a }, { getState }) => hasItem(getState(), a),
+ * getValue: ({ a }, { getState }) => getItem(getState(), a),
+ * createKey: ({ a }) => a,
+ * action: ({ a }, thunkArgs) => doSetItem(a, thunkArgs)
+ * }
+ * );
+ *
+ */
+export function memoizeableAction(name, { getValue, createKey, action }) {
+ const requests = new Map();
+ return args => async thunkArgs => {
+ let result = asSettled(getValue(args, thunkArgs));
+ if (!result) {
+ const key = createKey(args, thunkArgs);
+ if (!requests.has(key)) {
+ requests.set(
+ key,
+ (async () => {
+ try {
+ await action(args, thunkArgs);
+ } catch (e) {
+ console.warn(`Action ${name} had an exception:`, e);
+ } finally {
+ requests.delete(key);
+ }
+ })()
+ );
+ }
+
+ await requests.get(key);
+
+ if (args.cx) {
+ validateContext(thunkArgs.getState(), args.cx);
+ }
+
+ result = asSettled(getValue(args, thunkArgs));
+ if (!result) {
+ // Returning null here is not ideal. This means that the action
+ // resolved but 'getValue' didn't return a loaded value, for instance
+ // if the data the action was meant to store was deleted. In a perfect
+ // world we'd throw a ContextError here or handle cancellation somehow.
+ // Throwing will also allow us to change the return type on the action
+ // to always return a promise for the getValue AsyncValue type, but
+ // for now we have to add an additional '| null' for this case.
+ return null;
+ }
+ }
+
+ if (result.state === "rejected") {
+ throw result.value;
+ }
+ return result.value;
+ };
+}
diff --git a/devtools/client/debugger/src/utils/memoize.js b/devtools/client/debugger/src/utils/memoize.js
new file mode 100644
index 0000000000..3f634b326d
--- /dev/null
+++ b/devtools/client/debugger/src/utils/memoize.js
@@ -0,0 +1,63 @@
+/* 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/>. */
+
+function hasValue(keys, store) {
+ let currentStore = store;
+ for (const key of keys) {
+ if (!currentStore || !currentStore.has(key)) {
+ return false;
+ }
+
+ currentStore = currentStore.get(key);
+ }
+ return true;
+}
+
+function getValue(keys, store) {
+ let currentStore = store;
+ for (const key of keys) {
+ if (!currentStore) {
+ return null;
+ }
+ currentStore = currentStore.get(key);
+ }
+
+ return currentStore;
+}
+
+function setValue(keys, store, value) {
+ const keysExceptLast = keys.slice(0, -1);
+ const lastKey = keys[keys.length - 1];
+
+ let currentStore = store;
+ for (const key of keysExceptLast) {
+ if (!currentStore) {
+ return;
+ }
+
+ if (!currentStore.has(key)) {
+ currentStore.set(key, new WeakMap());
+ }
+ currentStore = currentStore.get(key);
+ }
+
+ if (currentStore) {
+ currentStore.set(lastKey, value);
+ }
+}
+
+// memoize with n arguments
+export default function memoize(func) {
+ const store = new WeakMap();
+
+ return function (...keys) {
+ if (hasValue(keys, store)) {
+ return getValue(keys, store);
+ }
+
+ const newValue = func.apply(null, keys);
+ setValue(keys, store, newValue);
+ return newValue;
+ };
+}
diff --git a/devtools/client/debugger/src/utils/memoizeLast.js b/devtools/client/debugger/src/utils/memoizeLast.js
new file mode 100644
index 0000000000..b3c46cab57
--- /dev/null
+++ b/devtools/client/debugger/src/utils/memoizeLast.js
@@ -0,0 +1,27 @@
+/* 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 memoizeLast(fn) {
+ let lastArgs;
+ let lastResult;
+
+ const memoized = (...args) => {
+ if (
+ lastArgs &&
+ args.length === lastArgs.length &&
+ args.every((arg, i) => arg === lastArgs[i])
+ ) {
+ return lastResult;
+ }
+
+ lastArgs = args;
+ lastResult = fn(...args);
+
+ return lastResult;
+ };
+
+ return memoized;
+}
+
+export default memoizeLast;
diff --git a/devtools/client/debugger/src/utils/moz.build b/devtools/client/debugger/src/utils/moz.build
new file mode 100644
index 0000000000..8deb8e18db
--- /dev/null
+++ b/devtools/client/debugger/src/utils/moz.build
@@ -0,0 +1,53 @@
+# 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 += [
+ "breakpoint",
+ "editor",
+ "pause",
+ "sources-tree",
+]
+
+CompiledModules(
+ "assert.js",
+ "ast.js",
+ "async-value.js",
+ "bootstrap.js",
+ "build-query.js",
+ "clipboard.js",
+ "context.js",
+ "dbg.js",
+ "DevToolsUtils.js",
+ "environment.js",
+ "expressions.js",
+ "evaluation-result.js",
+ "function.js",
+ "indentation.js",
+ "isMinified.js",
+ "location.js",
+ "log.js",
+ "memoize.js",
+ "memoizeLast.js",
+ "memoizableAction.js",
+ "path.js",
+ "prefs.js",
+ "preview.js",
+ "quick-open.js",
+ "result-list.js",
+ "selected-location.js",
+ "shallow-equal.js",
+ "source-maps.js",
+ "source-queue.js",
+ "source.js",
+ "tabs.js",
+ "task.js",
+ "telemetry.js",
+ "text.js",
+ "ui.js",
+ "url.js",
+ "utils.js",
+ "wasm.js",
+ "worker.js",
+)
diff --git a/devtools/client/debugger/src/utils/path.js b/devtools/client/debugger/src/utils/path.js
new file mode 100644
index 0000000000..bc7f975919
--- /dev/null
+++ b/devtools/client/debugger/src/utils/path.js
@@ -0,0 +1,24 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+export function basename(path) {
+ return path.split("/").pop();
+}
+
+export function dirname(path) {
+ const idx = path.lastIndexOf("/");
+ return path.slice(0, idx);
+}
+
+export function isURL(str) {
+ return str.includes("://");
+}
+
+export function isAbsolute(str) {
+ return str[0] === "/";
+}
+
+export function join(base, dir) {
+ return `${base}/${dir}`;
+}
diff --git a/devtools/client/debugger/src/utils/pause/frames/annotateFrames.js b/devtools/client/debugger/src/utils/pause/frames/annotateFrames.js
new file mode 100644
index 0000000000..3cdc4b1c1e
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/frames/annotateFrames.js
@@ -0,0 +1,68 @@
+/* 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 { getLibraryFromUrl } from "./getLibraryFromUrl";
+
+/**
+ * Augment all frame objects with a 'library' attribute.
+ */
+export function annotateFramesWithLibrary(frames) {
+ for (const frame of frames) {
+ frame.library = getLibraryFromUrl(frame, frames);
+ }
+
+ // Babel need some special treatment to recognize some particular async stack pattern
+ for (const idx of getBabelFrameIndexes(frames)) {
+ const frame = frames[idx];
+ frame.library = "Babel";
+ }
+}
+
+/**
+ * Returns all the indexes that are part of a babel async call stack.
+ *
+ * @param {Array<Object>} frames
+ * @returns Array<Integer>
+ */
+function getBabelFrameIndexes(frames) {
+ const startIndexes = [];
+ const endIndexes = [];
+
+ for (let index = 0, length = frames.length; index < length; index++) {
+ const frame = frames[index];
+ const frameUrl = frame.location.source.url;
+
+ if (
+ frame.displayName === "tryCatch" &&
+ frameUrl.match(/regenerator-runtime/i)
+ ) {
+ startIndexes.push(index);
+ }
+
+ if (startIndexes.length > endIndexes.length) {
+ if (frame.displayName === "flush" && frameUrl.match(/_microtask/i)) {
+ endIndexes.push(index);
+ }
+ if (frame.displayName === "_asyncToGenerator/<") {
+ endIndexes.push(index + 1);
+ }
+ }
+ }
+
+ if (startIndexes.length != endIndexes.length || startIndexes.length === 0) {
+ return [];
+ }
+
+ const babelFrameIndexes = [];
+ // We have the same number of start and end indexes, we can loop through one of them to
+ // build our async call stack index ranges
+ // e.g. if we have startIndexes: [1,5] and endIndexes: [3,8], we want to return [1,2,3,5,6,7,8]
+ startIndexes.forEach((startIndex, index) => {
+ const matchingEndIndex = endIndexes[index];
+ for (let i = startIndex; i <= matchingEndIndex; i++) {
+ babelFrameIndexes.push(i);
+ }
+ });
+ return babelFrameIndexes;
+}
diff --git a/devtools/client/debugger/src/utils/pause/frames/collapseFrames.js b/devtools/client/debugger/src/utils/pause/frames/collapseFrames.js
new file mode 100644
index 0000000000..185b66e26c
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/frames/collapseFrames.js
@@ -0,0 +1,58 @@
+/* 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/>. */
+
+function collapseLastFrames(frames) {
+ const index = frames.findIndex(frame =>
+ frame.location.source.url?.match(/webpack\/bootstrap/i)
+ );
+
+ if (index == -1) {
+ return { newFrames: frames, lastGroup: [] };
+ }
+
+ const newFrames = frames.slice(0, index);
+ const lastGroup = frames.slice(index);
+ return { newFrames, lastGroup };
+}
+
+export function collapseFrames(frames) {
+ // We collapse groups of one so that user frames
+ // are not in a group of one
+ function addGroupToList(group, list) {
+ if (!group) {
+ return list;
+ }
+
+ if (group.length > 1) {
+ list.push(group);
+ } else {
+ list = list.concat(group);
+ }
+
+ return list;
+ }
+ const { newFrames, lastGroup } = collapseLastFrames(frames);
+ frames = newFrames;
+ let items = [];
+ let currentGroup = null;
+ let prevItem = null;
+ for (const frame of frames) {
+ const prevLibrary = prevItem?.library;
+
+ if (!currentGroup) {
+ currentGroup = [frame];
+ } else if (prevLibrary && prevLibrary == frame.library) {
+ currentGroup.push(frame);
+ } else {
+ items = addGroupToList(currentGroup, items);
+ currentGroup = [frame];
+ }
+
+ prevItem = frame;
+ }
+
+ items = addGroupToList(currentGroup, items);
+ items = addGroupToList(lastGroup, items);
+ return items;
+}
diff --git a/devtools/client/debugger/src/utils/pause/frames/displayName.js b/devtools/client/debugger/src/utils/pause/frames/displayName.js
new file mode 100644
index 0000000000..0a47e9ac04
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/frames/displayName.js
@@ -0,0 +1,114 @@
+/* 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/>. */
+
+// Decodes an anonymous naming scheme that
+// spider monkey implements based on "Naming Anonymous JavaScript Functions"
+// http://johnjbarton.github.io/nonymous/index.html
+const objectProperty = /([\w\d\$#]+)$/;
+const arrayProperty = /\[(.*?)\]$/;
+const functionProperty = /([\w\d]+)[\/\.<]*?$/;
+const annonymousProperty = /([\w\d]+)\(\^\)$/;
+const displayNameScenarios = [
+ objectProperty,
+ arrayProperty,
+ functionProperty,
+ annonymousProperty,
+];
+const includeSpace = /\s/;
+export function simplifyDisplayName(displayName) {
+ // if the display name has a space it has already been mapped
+ if (!displayName || includeSpace.exec(displayName)) {
+ return displayName;
+ }
+
+ for (const reg of displayNameScenarios) {
+ const match = reg.exec(displayName);
+ if (match) {
+ return match[1];
+ }
+ }
+
+ return displayName;
+}
+
+const displayNameLibraryMap = {
+ Babel: {
+ tryCatch: "Async",
+ },
+ Backbone: {
+ "extend/child": "Create Class",
+ ".create": "Create Model",
+ },
+ jQuery: {
+ "jQuery.event.dispatch": "Dispatch Event",
+ },
+ React: {
+ // eslint-disable-next-line max-len
+ "ReactCompositeComponent._renderValidatedComponentWithoutOwnerOrContext/renderedElement<":
+ "Render",
+ _renderValidatedComponentWithoutOwnerOrContext: "Render",
+ },
+ VueJS: {
+ "renderMixin/Vue.prototype._render": "Render",
+ },
+ Webpack: {
+ // eslint-disable-next-line camelcase
+ __webpack_require__: "Bootstrap",
+ },
+};
+
+/**
+ * Compute the typical way to show a frame or function to the user.
+ *
+ * @param {Object} frameOrFunc
+ * Either a frame or a func object.
+ * Frame object is typically created via create.js::createFrame
+ * Func object comes from ast reducer and getSymbols selector.
+ * @param {Boolean} shouldMapDisplayName
+ * True by default, will try to translate internal framework function name
+ * into a most explicit and simplier name.
+ * @param {Object} l10n
+ * The localization object.
+ */
+export function formatDisplayName(
+ frameOrFunc,
+ { shouldMapDisplayName = true } = {},
+ l10n
+) {
+ // All the following attributes are only available on Frame objects
+ const { library, displayName, originalDisplayName } = frameOrFunc;
+ let displayedName;
+
+ // If the frame was identified to relate to a library,
+ // lookup for pretty name for the most important method of some frameworks
+ if (library && shouldMapDisplayName) {
+ displayedName = displayNameLibraryMap[library]?.[displayName];
+ }
+
+ // Frames for original sources may have both displayName for the generated source,
+ // or originalDisplayName for the original source.
+ // (in case original and generated have distinct function names in uglified sources)
+ //
+ // Also fallback to "name" attribute when the passed object is a Func object.
+ if (!displayedName) {
+ displayedName = originalDisplayName || displayName || frameOrFunc.name;
+ }
+
+ if (!displayedName) {
+ return l10n.getStr("anonymousFunction");
+ }
+
+ return simplifyDisplayName(displayedName);
+}
+
+export function formatCopyName(frame, l10n, shouldDisplayOriginalLocation) {
+ const displayName = formatDisplayName(frame, undefined, l10n);
+ const location = shouldDisplayOriginalLocation
+ ? frame.location
+ : frame.generatedLocation;
+ const fileName = location.source.url || location.source.id;
+ const frameLocation = frame.location.line;
+
+ return `${displayName} (${fileName}#${frameLocation})`;
+}
diff --git a/devtools/client/debugger/src/utils/pause/frames/getLibraryFromUrl.js b/devtools/client/debugger/src/utils/pause/frames/getLibraryFromUrl.js
new file mode 100644
index 0000000000..40a4d83841
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/frames/getLibraryFromUrl.js
@@ -0,0 +1,140 @@
+/* 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/>. */
+
+const libraryMap = [
+ {
+ label: "Backbone",
+ pattern: /backbone/i,
+ },
+ {
+ label: "Babel",
+ pattern: /node_modules\/@babel/i,
+ },
+ {
+ label: "jQuery",
+ pattern: /jquery/i,
+ },
+ {
+ label: "Preact",
+ pattern: /preact/i,
+ },
+ {
+ label: "React",
+ pattern:
+ /(node_modules\/(?:react(-dom)?(-dev)?\/))|(react(-dom)?(-dev)?(\.[a-z]+)*\.js$)/,
+ },
+ {
+ label: "Immutable",
+ pattern: /immutable/i,
+ },
+ {
+ label: "Webpack",
+ pattern: /webpack\/bootstrap/i,
+ },
+ {
+ label: "Express",
+ pattern: /node_modules\/express/,
+ },
+ {
+ label: "Pug",
+ pattern: /node_modules\/pug/,
+ },
+ {
+ label: "ExtJS",
+ pattern: /\/ext-all[\.\-]/,
+ },
+ {
+ label: "MobX",
+ pattern: /mobx/i,
+ },
+ {
+ label: "Underscore",
+ pattern: /underscore/i,
+ },
+ {
+ label: "Lodash",
+ pattern: /lodash/i,
+ },
+ {
+ label: "Ember",
+ pattern: /ember/i,
+ },
+ {
+ label: "Choo",
+ pattern: /choo/i,
+ },
+ {
+ label: "VueJS",
+ pattern: /vue(?:\.[a-z]+)*\.js/i,
+ },
+ {
+ label: "RxJS",
+ pattern: /rxjs/i,
+ },
+ {
+ label: "Angular",
+ pattern: /angular(?!.*\/app\/)/i,
+ contextPattern: /zone\.js/,
+ },
+ {
+ label: "Redux",
+ pattern: /redux/i,
+ },
+ {
+ label: "Dojo",
+ pattern: /dojo/i,
+ },
+ {
+ label: "Marko",
+ pattern: /marko/i,
+ },
+ {
+ label: "NuxtJS",
+ pattern: /[\._]nuxt/i,
+ },
+ {
+ label: "Aframe",
+ pattern: /aframe/i,
+ },
+ {
+ label: "NextJS",
+ pattern: /[\._]next/i,
+ },
+];
+
+export function getLibraryFromUrl(frame, callStack = []) {
+ const frameUrl = frame.location.source.url;
+
+ // Let's first check if the frame match a defined pattern.
+ let match = libraryMap.find(o => o.pattern.test(frameUrl));
+ if (match) {
+ return match.label;
+ }
+
+ // If it does not, it might still be one of the case where the file is used
+ // by a library but the name has not enough specificity. In such case, we want
+ // to only return the library name if there are frames matching the library
+ // pattern in the callStack (e.g. `zone.js` is used by Angular, but the name
+ // could be quite common and return false positive if evaluated alone. So we
+ // only return Angular if there are other frames matching Angular).
+ match = libraryMap.find(
+ o => o.contextPattern && o.contextPattern.test(frameUrl)
+ );
+ if (match) {
+ const contextMatch = callStack.some(f => {
+ const url = f.location.source.url;
+ if (!url) {
+ return false;
+ }
+
+ return libraryMap.some(o => o.pattern.test(url));
+ });
+
+ if (contextMatch) {
+ return match.label;
+ }
+ }
+
+ return null;
+}
diff --git a/devtools/client/debugger/src/utils/pause/frames/index.js b/devtools/client/debugger/src/utils/pause/frames/index.js
new file mode 100644
index 0000000000..8b232b3452
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/frames/index.js
@@ -0,0 +1,8 @@
+/* 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 * from "./annotateFrames";
+export * from "./collapseFrames";
+export * from "./displayName";
+export * from "./getLibraryFromUrl";
diff --git a/devtools/client/debugger/src/utils/pause/frames/moz.build b/devtools/client/debugger/src/utils/pause/frames/moz.build
new file mode 100644
index 0000000000..67462d40c3
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/frames/moz.build
@@ -0,0 +1,14 @@
+# 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(
+ "annotateFrames.js",
+ "collapseFrames.js",
+ "displayName.js",
+ "getLibraryFromUrl.js",
+ "index.js",
+)
diff --git a/devtools/client/debugger/src/utils/pause/frames/tests/__snapshots__/collapseFrames.spec.js.snap b/devtools/client/debugger/src/utils/pause/frames/tests/__snapshots__/collapseFrames.spec.js.snap
new file mode 100644
index 0000000000..a09cff5bee
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/frames/tests/__snapshots__/collapseFrames.spec.js.snap
@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`collapseFrames default 1`] = `
+Array [
+ Object {
+ "displayName": "a",
+ "location": Object {
+ "source": Object {},
+ },
+ },
+ Array [
+ Object {
+ "displayName": "b",
+ "library": "React",
+ "location": Object {
+ "source": Object {},
+ },
+ },
+ Object {
+ "displayName": "c",
+ "library": "React",
+ "location": Object {
+ "source": Object {},
+ },
+ },
+ ],
+]
+`;
+
+exports[`collapseFrames promises 1`] = `
+Array [
+ Object {
+ "displayName": "a",
+ "location": Object {
+ "source": Object {},
+ },
+ },
+ Array [
+ Object {
+ "displayName": "b",
+ "library": "React",
+ "location": Object {
+ "source": Object {},
+ },
+ },
+ Object {
+ "displayName": "c",
+ "library": "React",
+ "location": Object {
+ "source": Object {},
+ },
+ },
+ ],
+ Object {
+ "asyncCause": "promise callback",
+ "displayName": "d",
+ "library": undefined,
+ "location": Object {
+ "source": Object {},
+ },
+ },
+ Array [
+ Object {
+ "displayName": "e",
+ "library": "React",
+ "location": Object {
+ "source": Object {},
+ },
+ },
+ Object {
+ "displayName": "f",
+ "library": "React",
+ "location": Object {
+ "source": Object {},
+ },
+ },
+ ],
+ Object {
+ "asyncCause": null,
+ "displayName": "g",
+ "library": undefined,
+ "location": Object {
+ "source": Object {},
+ },
+ },
+]
+`;
diff --git a/devtools/client/debugger/src/utils/pause/frames/tests/collapseFrames.spec.js b/devtools/client/debugger/src/utils/pause/frames/tests/collapseFrames.spec.js
new file mode 100644
index 0000000000..58cafc3211
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/frames/tests/collapseFrames.spec.js
@@ -0,0 +1,43 @@
+/* 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 { collapseFrames } from "../collapseFrames";
+
+describe("collapseFrames", () => {
+ it("default", () => {
+ const groups = collapseFrames([
+ { displayName: "a", location: { source: {} } },
+
+ { displayName: "b", library: "React", location: { source: {} } },
+ { displayName: "c", library: "React", location: { source: {} } },
+ ]);
+
+ expect(groups).toMatchSnapshot();
+ });
+
+ it("promises", () => {
+ const groups = collapseFrames([
+ { displayName: "a", location: { source: {} } },
+
+ { displayName: "b", library: "React", location: { source: {} } },
+ { displayName: "c", library: "React", location: { source: {} } },
+ {
+ displayName: "d",
+ library: undefined,
+ asyncCause: "promise callback",
+ location: { source: {} },
+ },
+ { displayName: "e", library: "React", location: { source: {} } },
+ { displayName: "f", library: "React", location: { source: {} } },
+ {
+ displayName: "g",
+ library: undefined,
+ asyncCause: null,
+ location: { source: {} },
+ },
+ ]);
+
+ expect(groups).toMatchSnapshot();
+ });
+});
diff --git a/devtools/client/debugger/src/utils/pause/frames/tests/displayName.spec.js b/devtools/client/debugger/src/utils/pause/frames/tests/displayName.spec.js
new file mode 100644
index 0000000000..d969c18753
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/frames/tests/displayName.spec.js
@@ -0,0 +1,129 @@
+/* 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 {
+ formatCopyName,
+ formatDisplayName,
+ simplifyDisplayName,
+} from "../displayName";
+
+import { makeMockFrame, makeMockSource } from "../../../test-mockup";
+
+describe("formatCopyName", () => {
+ it("simple", () => {
+ const source = makeMockSource("todo-view.js");
+ const frame = makeMockFrame(undefined, source, undefined, 12, "child");
+
+ expect(formatCopyName(frame, L10N)).toEqual("child (todo-view.js#12)");
+ });
+});
+
+describe("formatting display names", () => {
+ it("uses a library description", () => {
+ const source = makeMockSource("assets/backbone.js");
+ const frame = {
+ ...makeMockFrame(undefined, source, undefined, undefined, "extend/child"),
+ library: "Backbone",
+ };
+
+ expect(formatDisplayName(frame, undefined, L10N)).toEqual("Create Class");
+ });
+
+ it("shortens an anonymous function", () => {
+ const source = makeMockSource("assets/bar.js");
+ const frame = makeMockFrame(
+ undefined,
+ source,
+ undefined,
+ undefined,
+ "extend/child/bar/baz"
+ );
+
+ expect(formatDisplayName(frame, undefined, L10N)).toEqual("baz");
+ });
+
+ it("does not truncates long function names", () => {
+ const source = makeMockSource("extend/child/bar/baz");
+ const frame = makeMockFrame(
+ undefined,
+ source,
+ undefined,
+ undefined,
+ "bazbazbazbazbazbazbazbazbazbazbazbazbaz"
+ );
+
+ expect(formatDisplayName(frame, undefined, L10N)).toEqual(
+ "bazbazbazbazbazbazbazbazbazbazbazbazbaz"
+ );
+ });
+
+ it("returns the original function name when present", () => {
+ const source = makeMockSource("entry.js");
+ const frame = {
+ ...makeMockFrame(undefined, source),
+ originalDisplayName: "originalFn",
+ displayName: "fn",
+ };
+
+ expect(formatDisplayName(frame, undefined, L10N)).toEqual("originalFn");
+ });
+
+ it("returns anonymous when displayName is undefined", () => {
+ const frame = { ...makeMockFrame(), displayName: undefined };
+ expect(formatDisplayName(frame, undefined, L10N)).toEqual("<anonymous>");
+ });
+
+ it("returns anonymous when displayName is null", () => {
+ const frame = { ...makeMockFrame(), displayName: null };
+ expect(formatDisplayName(frame, undefined, L10N)).toEqual("<anonymous>");
+ });
+
+ it("returns anonymous when displayName is an empty string", () => {
+ const frame = { ...makeMockFrame(), displayName: "" };
+ expect(formatDisplayName(frame, undefined, L10N)).toEqual("<anonymous>");
+ });
+});
+
+describe("simplifying display names", () => {
+ const cases = {
+ defaultCase: [["define", "define"]],
+
+ objectProperty: [
+ ["z.foz", "foz"],
+ ["z.foz/baz", "baz"],
+ ["z.foz/baz/y.bay", "bay"],
+ ["outer/x.fox.bax.nx", "nx"],
+ ["outer/fow.baw", "baw"],
+ ["fromYUI._attach", "_attach"],
+ ["Y.ClassNameManager</getClassName", "getClassName"],
+ ["orion.textview.TextView</addHandler", "addHandler"],
+ ["this.eventPool_.createObject", "createObject"],
+ ],
+
+ arrayProperty: [
+ ["this.eventPool_[createObject]", "createObject"],
+ ["jQuery.each(^)/jQuery.fn[o]", "o"],
+ ["viewport[get+D]", "get+D"],
+ ["arr[0]", "0"],
+ ],
+
+ functionProperty: [
+ ["fromYUI._attach/<.", "_attach"],
+ ["Y.ClassNameManager<", "ClassNameManager"],
+ ["fromExtJS.setVisible/cb<", "cb"],
+ ["fromDojo.registerWin/<", "registerWin"],
+ ],
+
+ annonymousProperty: [["jQuery.each(^)", "each"]],
+
+ privateMethod: [["#privateFunc", "#privateFunc"]],
+ };
+
+ Object.keys(cases).forEach(type => {
+ cases[type].forEach(([kase, expected]) => {
+ it(`${type} - ${kase}`, () =>
+ expect(simplifyDisplayName(kase)).toEqual(expected));
+ });
+ });
+});
diff --git a/devtools/client/debugger/src/utils/pause/frames/tests/getLibraryFromUrl.spec.js b/devtools/client/debugger/src/utils/pause/frames/tests/getLibraryFromUrl.spec.js
new file mode 100644
index 0000000000..ff5be43285
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/frames/tests/getLibraryFromUrl.spec.js
@@ -0,0 +1,127 @@
+/* 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 { getLibraryFromUrl } from "../getLibraryFromUrl";
+import { makeMockFrameWithURL } from "../../../test-mockup";
+
+describe("getLibraryFromUrl", () => {
+ describe("When Preact is on the frame", () => {
+ it("should return Preact and not React", () => {
+ const frame = makeMockFrameWithURL(
+ "https://cdnjs.cloudflare.com/ajax/libs/preact/8.2.5/preact.js"
+ );
+ expect(getLibraryFromUrl(frame)).toEqual("Preact");
+ });
+ });
+
+ describe("When Vue is on the frame", () => {
+ it("should return VueJS for different builds", () => {
+ const buildTypeList = [
+ "vue.js",
+ "vue.common.js",
+ "vue.esm.js",
+ "vue.runtime.js",
+ "vue.runtime.common.js",
+ "vue.runtime.esm.js",
+ "vue.min.js",
+ "vue.runtime.min.js",
+ ];
+
+ buildTypeList.forEach(buildType => {
+ const frame = makeMockFrameWithURL(
+ `https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/${buildType}`
+ );
+ expect(getLibraryFromUrl(frame)).toEqual("VueJS");
+ });
+ });
+ });
+
+ describe("When React is in the URL", () => {
+ it("should not return React if it is not part of the filename", () => {
+ const notReactUrlList = [
+ "https://react.js.com/test.js",
+ "https://debugger-example.com/test.js",
+ "https://debugger-react-example.com/test.js",
+ "https://debugger-react-example.com/react/test.js",
+ "https://debugger-example.com/react-contextmenu.js",
+ ];
+ notReactUrlList.forEach(notReactUrl => {
+ const frame = makeMockFrameWithURL(notReactUrl);
+ expect(getLibraryFromUrl(frame)).toBeNull();
+ });
+ });
+ it("should return React if it is part of the filename", () => {
+ const reactUrlList = [
+ "https://debugger-example.com/react.js",
+ "https://debugger-example.com/react.development.js",
+ "https://debugger-example.com/react.production.min.js",
+ "https://debugger-react-example.com/react.js",
+ "https://debugger-react-example.com/react/react.js",
+ "https://debugger-example.com/react-dom.js",
+ "https://debugger-example.com/react-dom.development.js",
+ "https://debugger-example.com/react-dom.production.min.js",
+ "https://debugger-react-example.com/react-dom.js",
+ "https://debugger-react-example.com/react/react-dom.js",
+ "https://debugger-react-example.com/react-dom-dev.js",
+ "/node_modules/react/test.js",
+ "/node_modules/react-dev/test.js",
+ "/node_modules/react-dom/test.js",
+ "/node_modules/react-dom-dev/test.js",
+ ];
+ reactUrlList.forEach(reactUrl => {
+ const frame = makeMockFrameWithURL(reactUrl);
+ expect(getLibraryFromUrl(frame)).toEqual("React");
+ });
+ });
+ });
+
+ describe("When Angular is in the URL", () => {
+ it("should return Angular for AngularJS (1.x)", () => {
+ const frame = makeMockFrameWithURL(
+ "https://cdnjs.cloudflare.com/ajax/libs/angular/angular.js"
+ );
+ expect(getLibraryFromUrl(frame)).toEqual("Angular");
+ });
+
+ it("should return Angular for Angular (2.x)", () => {
+ const frame = makeMockFrameWithURL(
+ "https://stackblitz.io/turbo_modules/@angular/core@7.2.4/bundles/core.umd.js"
+ );
+ expect(getLibraryFromUrl(frame)).toEqual("Angular");
+ });
+
+ it("should not return Angular for Angular components", () => {
+ const frame = makeMockFrameWithURL(
+ "https://firefox-devtools-angular-log.stackblitz.io/~/src/app/hello.component.ts"
+ );
+ expect(getLibraryFromUrl(frame)).toBeNull();
+ });
+ });
+
+ describe("When zone.js is on the frame", () => {
+ it("should not return Angular when no callstack", () => {
+ const frame = makeMockFrameWithURL("/node_modules/zone/zone.js");
+ expect(getLibraryFromUrl(frame)).toBeNull();
+ });
+
+ it("should not return Angular when stack without Angular frames", () => {
+ const frame = makeMockFrameWithURL("/node_modules/zone/zone.js");
+ const callstack = [frame];
+
+ expect(getLibraryFromUrl(frame, callstack)).toBeNull();
+ });
+
+ it("should return Angular when stack with AngularJS (1.x) frames", () => {
+ const frame = makeMockFrameWithURL("/node_modules/zone/zone.js");
+ const callstack = [
+ frame,
+ makeMockFrameWithURL(
+ "https://cdnjs.cloudflare.com/ajax/libs/angular/angular.js"
+ ),
+ ];
+
+ expect(getLibraryFromUrl(frame, callstack)).toEqual("Angular");
+ });
+ });
+});
diff --git a/devtools/client/debugger/src/utils/pause/index.js b/devtools/client/debugger/src/utils/pause/index.js
new file mode 100644
index 0000000000..f6966999b0
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/index.js
@@ -0,0 +1,5 @@
+/* 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 * from "./why";
diff --git a/devtools/client/debugger/src/utils/pause/mapScopes/README.md b/devtools/client/debugger/src/utils/pause/mapScopes/README.md
new file mode 100644
index 0000000000..2f65b8e847
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/mapScopes/README.md
@@ -0,0 +1,191 @@
+# mapScopes
+
+The files in this directory manage the Devtools logic for taking the original
+JS file from the sourcemap and using the content, combined with source
+mappings, to provide an enhanced user experience for debugging the code.
+
+In this document, we'll refer to the files as either:
+
+* `original` - The code that the user wrote originally.
+* `generated` - The code actually executing in the engine, which may have been
+ transformed from the `original`, and if a bundler was used, may contain the
+ final output for several different `original` files.
+
+The enhancements implemented here break down into as two primary improvements:
+
+* Rendering the scopes as the user expects them, using the position in the
+ original file, rather than the content of the generated file.
+* Allowing users to interact with the code in the console as if it were the
+ original code, rather than the generated file.
+
+
+## Overall Approach
+
+The core goal of scope mapping is to parse the original and generated files,
+and then infer a correlation between the bindings in the original file,
+and the bindings in the generated file. This is correlation is done via the
+source mappings provided alongside the original code in the sourcemap.
+
+The overall steps break down into:
+
+
+### 1. Parsing
+
+First the generated and original files are parsed into ASTs, and then the ASTs
+are each traversed in order to generate a full picture of the scopes that are
+present in the file. This covers information for each binding in each scope,
+including all metadata about the declarations themselves, and all references
+to each of the bindings. The exact location of each binding reference is the
+most important factor because these will be used when working with sourcemaps.
+
+Importantly, this scope tree's structure also mirrors the structure of the
+scope data that the engine itself returns when paused.
+
+
+### 2. Generated Binding -> Grip Correlation
+
+When the engine pauses, we get back a full description of the current scope,
+as well as `grip` objects that can be used as proxy-like objects in order to
+access the actual values in the engine itself.
+
+With this data, along with the location where the engine is paused, we can
+use the AST-based scope information from step 1 to attach a line/column
+range to each `grip`. Using those mappings we have enough information to get
+the real engine value of any variable based on its position in the generated
+code, as long as it is in scope at the paused location in the generated file.
+
+The generated and engine scopes are correlated depth-first, because in some
+cases the scope data from the engine will be deeper that the data from the
+parsed code, meaning there are additional unknown parent scopes. This can
+happen, for instance, if the executing code is running inside of an `eval`
+since the parser only knows about the scopes inside of `eval`, and cannot
+know what context it is executed inside of.
+
+
+### 3. Original Binding -> Generated Binding Correlation
+
+Now that we can get the value of a generated location, we need to decide which
+generated location correlates with which original location. For each of
+the original bindings in each original scope, we iterate through the
+individual references to the binding in the file and:
+
+1. Use the sourcemap to convert the original location into a range on the
+ generated code.
+2. Filter the available bindings in the generated file down to those that
+ overlap with this generated range.
+3. Perform heuristics to decide if any of the bindings in the range appear
+ to be a valid and safe mapping.
+
+These steps allow us to build a datastructure that describes the scope
+as it is declared in the original file, while rendering the value using the
+`grip` objects, as returned from the engine itself.
+
+There is additional complexity here in the exact details of the heuristics
+mentioned above. See the later Heuristics sections diving into these details.
+
+During this phase, one additional task is performed, which is the construction
+of expressions that relate back to the original binding. After matching each
+binding in a range, we know the name of the binding in the original scope,
+and we _also_ know the name of the generated binding, or more generally the
+expression to evaluate in order to get the value of the original binding.
+
+These expression values are important for ensuring that the developer console
+is able to allow users to interact with the original code. If a user types
+a variable into the console, it can be translated into the expression
+correlated with that original variable, allowing the code to behave as it
+would have, were it actually part of the original file.
+
+
+### 4. Generate a Scope Tree
+
+The structure generated in step 3 is converted into a structure compatible
+with the standard scope data returned from the engine itself in order to allow
+for consistent usage of scope data, irrespective of the scope data source.
+This stage also re-attaches the global scope data, which is otherwise ignored
+during the correlation process.
+
+
+### 5. Validation
+
+As a simple form of validation, we ensure that a large percentage of bindings
+were actually resolved to a `grip` object. This offers some amount of
+protection, if the sourcemap itself turned out to be somewhat low-quality.
+
+This happens often with tooling that generates maps that simply map an original
+line to a generated line. While line-to-line mappings still enable step
+debugging, they do not provide enough information for original-scope mapping.
+
+On the other hand, generally line-to-line mappings are usually generated by
+tooling that performs minimal transformations on their own, so it is often
+acceptable to fall back to the engine-only generated-file scope data in this
+case.
+
+
+## Range Mapping Heuristics
+
+Since we know lots of information about the original bindings when performing
+matches, it is possible to make educated guesses about how their generated
+code will have likely been transformed. This allows us to perform more
+aggressive matching logic what would normally be too false-positive-heavy
+for generic use, when it is deemed safe enough.
+
+
+### Standard Matching
+
+In the general case, we iterate through the bindings that were found in the
+generated range, and consider it a match if the binding overlaps with the
+start of the range. One extra case here is that ranges at the start of
+a line often point to the first binding in a range and do not overlap the
+first binding, so there is special-casing for the first binding in each range.
+
+
+### ES6 Import Reference Special Case
+
+References to ES6 imports are often transformed into property accesses on objects
+in order to emulate the "live-binding" behavior defined by ES6. The standard
+logic here would end up always resolving the imported value to be the import
+namespace object itself, rather than reading the value of the property.
+
+To support this, specifically for ES6 imports, we walk outward from the matched
+binding itself, taking property accesses into account, as long as the
+property access itself is also within the mapped range.
+
+While decently effective, there are currently two downsides to this approach:
+
+* The "live" behavior of imports is often implemented using accessor
+ properties, which as of the time of this writing, cannot be evaluated to
+ retrieve their real value.
+* The "live" behavior of imports is sometimes implemented with function calls,
+ which also also cannot be evaluated, causing their value to be
+ unknown.
+
+
+### ES6 Import Declaration Special Case
+
+If there are no references to an imported value, or matching based on the
+reference failed, we fall back to a second case.
+
+ES6 import declarations themselves often map back to the location of the
+declaration of the imported module's namespace object. By getting the range for
+the import declaration itself, we can infer which generated binding is the
+namespace object. Alongside that, we already know the name of the property on
+the namespace itself because it is statically knowable by analyzing the
+import declaration.
+
+By combining both of those pieces of information, we can access the namespace's
+property to get the imported value.
+
+
+### Typescript Classes
+
+Typescript have several non-ideal ways in which they output source maps, most
+of which center around classes that are either exported, or decorated. These
+issues are currently tracked in [Typescript issue #22833][1].
+
+To work around this issue, we use a method similar to the import declaration
+case above. While the class name itself often maps to unhelpful locations,
+the class declaration itself generally maps to the class's transformed binding,
+so we make use of the class declaration location instead of the location of
+the class's declared name in these cases.
+
+ [1]: https://github.com/Microsoft/TypeScript/issues/22833
diff --git a/devtools/client/debugger/src/utils/pause/mapScopes/buildGeneratedBindingList.js b/devtools/client/debugger/src/utils/pause/mapScopes/buildGeneratedBindingList.js
new file mode 100644
index 0000000000..5f90138013
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/mapScopes/buildGeneratedBindingList.js
@@ -0,0 +1,141 @@
+/* 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 { clientCommands } from "../../../client/firefox";
+
+import { locColumn } from "./locColumn";
+import { getOptimizedOutGrip } from "./optimizedOut";
+
+export function buildGeneratedBindingList(
+ scopes,
+ generatedAstScopes,
+ thisBinding
+) {
+ // The server's binding data doesn't include general 'this' binding
+ // information, so we manually inject the one 'this' binding we have into
+ // the normal binding data we are working with.
+ const frameThisOwner = generatedAstScopes.find(
+ generated => "this" in generated.bindings
+ );
+
+ let globalScope = null;
+ const clientScopes = [];
+ for (let s = scopes; s; s = s.parent) {
+ const bindings = s.bindings
+ ? Object.assign({}, ...s.bindings.arguments, s.bindings.variables)
+ : {};
+
+ clientScopes.push(bindings);
+ globalScope = s;
+ }
+
+ const generatedMainScopes = generatedAstScopes.slice(0, -2);
+ const generatedGlobalScopes = generatedAstScopes.slice(-2);
+
+ const clientMainScopes = clientScopes.slice(0, generatedMainScopes.length);
+ const clientGlobalScopes = clientScopes.slice(generatedMainScopes.length);
+
+ // Map the main parsed script body using the nesting hierarchy of the
+ // generated and client scopes.
+ const generatedBindings = generatedMainScopes.reduce((acc, generated, i) => {
+ const bindings = clientMainScopes[i];
+
+ if (generated === frameThisOwner && thisBinding) {
+ bindings.this = {
+ value: thisBinding,
+ };
+ }
+
+ for (const name of Object.keys(generated.bindings)) {
+ // If there is no 'this' value, we exclude the binding entirely.
+ // Otherwise it would pass through as found, but "(unscoped)", causing
+ // the search logic to stop with a match.
+ if (name === "this" && !bindings[name]) {
+ continue;
+ }
+
+ const { refs } = generated.bindings[name];
+ for (const loc of refs) {
+ acc.push({
+ name,
+ loc,
+ desc: () => Promise.resolve(bindings[name] || null),
+ });
+ }
+ }
+ return acc;
+ }, []);
+
+ // Bindings in the global/lexical global of the generated code may or
+ // may not be the real global if the generated code is running inside
+ // of an evaled context. To handle this, we just look up the client scope
+ // hierarchy to find the closest binding with that name.
+ for (const generated of generatedGlobalScopes) {
+ for (const name of Object.keys(generated.bindings)) {
+ const { refs } = generated.bindings[name];
+ const bindings = clientGlobalScopes.find(b => name in b);
+
+ for (const loc of refs) {
+ if (bindings) {
+ generatedBindings.push({
+ name,
+ loc,
+ desc: () => Promise.resolve(bindings[name]),
+ });
+ } else {
+ const globalGrip = globalScope?.object;
+ if (globalGrip) {
+ // Should always exist, just checking to keep Flow happy.
+
+ generatedBindings.push({
+ name,
+ loc,
+ desc: async () => {
+ const objectFront =
+ clientCommands.createObjectFront(globalGrip);
+ return (await objectFront.getProperty(name)).descriptor;
+ },
+ });
+ }
+ }
+ }
+ }
+ }
+
+ // Sort so we can binary-search.
+ return sortBindings(generatedBindings);
+}
+
+export function buildFakeBindingList(generatedAstScopes) {
+ // TODO if possible, inject real bindings for the global scope
+ const generatedBindings = generatedAstScopes.reduce((acc, generated) => {
+ for (const name of Object.keys(generated.bindings)) {
+ if (name === "this") {
+ continue;
+ }
+ const { refs } = generated.bindings[name];
+ for (const loc of refs) {
+ acc.push({
+ name,
+ loc,
+ desc: () => Promise.resolve(getOptimizedOutGrip()),
+ });
+ }
+ }
+ return acc;
+ }, []);
+ return sortBindings(generatedBindings);
+}
+
+function sortBindings(generatedBindings) {
+ return generatedBindings.sort((a, b) => {
+ const aStart = a.loc.start;
+ const bStart = b.loc.start;
+
+ if (aStart.line === bStart.line) {
+ return locColumn(aStart) - locColumn(bStart);
+ }
+ return aStart.line - bStart.line;
+ });
+}
diff --git a/devtools/client/debugger/src/utils/pause/mapScopes/filtering.js b/devtools/client/debugger/src/utils/pause/mapScopes/filtering.js
new file mode 100644
index 0000000000..dec3772e82
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/mapScopes/filtering.js
@@ -0,0 +1,45 @@
+/* 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/>. */
+
+function findInsertionLocation(array, callback) {
+ let left = 0;
+ let right = array.length;
+ while (left < right) {
+ const mid = Math.floor((left + right) / 2);
+ const item = array[mid];
+
+ const result = callback(item);
+ if (result === 0) {
+ left = mid;
+ break;
+ }
+ if (result >= 0) {
+ right = mid;
+ } else {
+ left = mid + 1;
+ }
+ }
+
+ // Ensure the value is the start of any set of matches.
+ let i = left;
+ if (i < array.length) {
+ while (i >= 0 && callback(array[i]) >= 0) {
+ i--;
+ }
+ return i + 1;
+ }
+
+ return i;
+}
+
+export function filterSortedArray(array, callback) {
+ const start = findInsertionLocation(array, callback);
+
+ const results = [];
+ for (let i = start; i < array.length && callback(array[i]) === 0; i++) {
+ results.push(array[i]);
+ }
+
+ return results;
+}
diff --git a/devtools/client/debugger/src/utils/pause/mapScopes/findGeneratedBindingFromPosition.js b/devtools/client/debugger/src/utils/pause/mapScopes/findGeneratedBindingFromPosition.js
new file mode 100644
index 0000000000..6e833959f4
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/mapScopes/findGeneratedBindingFromPosition.js
@@ -0,0 +1,305 @@
+/* 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 { locColumn } from "./locColumn";
+import { mappingContains } from "./mappingContains";
+
+// eslint-disable-next-line max-len
+
+import { clientCommands } from "../../../client/firefox";
+
+/**
+ * Given a mapped range over the generated source, attempt to resolve a real
+ * binding descriptor that can be used to access the value.
+ */
+export async function findGeneratedReference(applicableBindings) {
+ // We can adjust this number as we go, but these are a decent start as a
+ // general heuristic to assume the bindings were bad or just map a chunk of
+ // whole line or something.
+ if (applicableBindings.length > 4) {
+ // Babel's for..of generates at least 3 bindings inside one range for
+ // block-scoped loop variables, so we shouldn't go below that.
+ applicableBindings = [];
+ }
+
+ for (const applicable of applicableBindings) {
+ const result = await mapBindingReferenceToDescriptor(applicable);
+ if (result) {
+ return result;
+ }
+ }
+ return null;
+}
+
+export async function findGeneratedImportReference(applicableBindings) {
+ // When wrapped, for instance as `Object(ns.default)`, the `Object` binding
+ // will be the first in the list. To avoid resolving `Object` as the
+ // value of the import itself, we potentially skip the first binding.
+ applicableBindings = applicableBindings.filter((applicable, i) => {
+ if (
+ !applicable.firstInRange ||
+ applicable.binding.loc.type !== "ref" ||
+ applicable.binding.loc.meta
+ ) {
+ return true;
+ }
+
+ const next =
+ i + 1 < applicableBindings.length ? applicableBindings[i + 1] : null;
+
+ return !next || next.binding.loc.type !== "ref" || !next.binding.loc.meta;
+ });
+
+ // We can adjust this number as we go, but these are a decent start as a
+ // general heuristic to assume the bindings were bad or just map a chunk of
+ // whole line or something.
+ if (applicableBindings.length > 2) {
+ // Babel's for..of generates at least 3 bindings inside one range for
+ // block-scoped loop variables, so we shouldn't go below that.
+ applicableBindings = [];
+ }
+
+ for (const applicable of applicableBindings) {
+ const result = await mapImportReferenceToDescriptor(applicable);
+ if (result) {
+ return result;
+ }
+ }
+
+ return null;
+}
+
+/**
+ * Given a mapped range over the generated source and the name of the imported
+ * value that is referenced, attempt to resolve a binding descriptor for
+ * the import's value.
+ */
+export async function findGeneratedImportDeclaration(
+ applicableBindings,
+ importName
+) {
+ // We can adjust this number as we go, but these are a decent start as a
+ // general heuristic to assume the bindings were bad or just map a chunk of
+ // whole line or something.
+ if (applicableBindings.length > 10) {
+ // Import declarations tend to have a large number of bindings for
+ // for things like 'require' and 'interop', so this number is larger
+ // than other binding count checks.
+ applicableBindings = [];
+ }
+
+ let result = null;
+
+ for (const { binding } of applicableBindings) {
+ if (binding.loc.type === "ref") {
+ continue;
+ }
+
+ const namespaceDesc = await binding.desc();
+ if (isPrimitiveValue(namespaceDesc)) {
+ continue;
+ }
+ if (!isObjectValue(namespaceDesc)) {
+ // We want to handle cases like
+ //
+ // var _mod = require(...);
+ // var _mod2 = _interopRequire(_mod);
+ //
+ // where "_mod" is optimized out because it is only referenced once. To
+ // allow that, we track the optimized-out value as a possible result,
+ // but allow later binding values to overwrite the result.
+ result = {
+ name: binding.name,
+ desc: namespaceDesc,
+ expression: binding.name,
+ };
+ continue;
+ }
+
+ const desc = await readDescriptorProperty(namespaceDesc, importName);
+ const expression = `${binding.name}.${importName}`;
+
+ if (desc) {
+ result = {
+ name: binding.name,
+ desc,
+ expression,
+ };
+ break;
+ }
+ }
+
+ return result;
+}
+
+/**
+ * Given a generated binding, and a range over the generated code, statically
+ * check if the given binding matches the range.
+ */
+async function mapBindingReferenceToDescriptor({
+ binding,
+ range,
+ firstInRange,
+ firstOnLine,
+}) {
+ // Allow the mapping to point anywhere within the generated binding
+ // location to allow for less than perfect sourcemaps. Since you also
+ // need at least one character between identifiers, we also give one
+ // characters of space at the front the generated binding in order
+ // to increase the probability of finding the right mapping.
+ if (
+ range.start.line === binding.loc.start.line &&
+ // If a binding is the first on a line, Babel will extend the mapping to
+ // include the whitespace between the newline and the binding. To handle
+ // that, we skip the range requirement for starting location.
+ (firstInRange ||
+ firstOnLine ||
+ locColumn(range.start) >= locColumn(binding.loc.start)) &&
+ locColumn(range.start) <= locColumn(binding.loc.end)
+ ) {
+ return {
+ name: binding.name,
+ desc: await binding.desc(),
+ expression: binding.name,
+ };
+ }
+
+ return null;
+}
+
+/**
+ * Given an generated binding, and a range over the generated code, statically
+ * evaluate accessed properties within the mapped range to resolve the actual
+ * imported value.
+ */
+async function mapImportReferenceToDescriptor({ binding, range }) {
+ if (binding.loc.type !== "ref") {
+ return null;
+ }
+
+ // Expression matches require broader searching because sourcemaps usage
+ // varies in how they map certain things. For instance given
+ //
+ // import { bar } from "mod";
+ // bar();
+ //
+ // The "bar()" expression is generally expanded into one of two possibly
+ // forms, both of which map the "bar" identifier in different ways. See
+ // the "^^" markers below for the ranges.
+ //
+ // (0, foo.bar)() // Babel
+ // ^^^^^^^ // mapping
+ // ^^^ // binding
+ // vs
+ //
+ // __webpack_require__.i(foo.bar)() // Webpack 2
+ // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ // mapping
+ // ^^^ // binding
+ // vs
+ //
+ // Object(foo.bar)() // Webpack >= 3
+ // ^^^^^^^^^^^^^^^ // mapping
+ // ^^^ // binding
+ //
+ // Unfortunately, Webpack also has a tendancy to over-map past the call
+ // expression to the start of the next line, at least when there isn't
+ // anything else on that line that is mapped, e.g.
+ //
+ // Object(foo.bar)()
+ // ^^^^^^^^^^^^^^^^^
+ // ^ // wrapped to column 0 of next line
+
+ if (!mappingContains(range, binding.loc)) {
+ return null;
+ }
+
+ // Webpack 2's import declarations wrap calls with an identity fn, so we
+ // need to make sure to skip that binding because it is mapped to the
+ // location of the original binding usage.
+ if (
+ binding.name === "__webpack_require__" &&
+ binding.loc.meta &&
+ binding.loc.meta.type === "member" &&
+ binding.loc.meta.property === "i"
+ ) {
+ return null;
+ }
+
+ let expression = binding.name;
+ let desc = await binding.desc();
+
+ if (binding.loc.type === "ref") {
+ const { meta } = binding.loc;
+
+ // Limit to 2 simple property or inherits operartions, since it would
+ // just be more work to search more and it is very unlikely that
+ // bindings would be mapped to more than a single member + inherits
+ // wrapper.
+ for (
+ let op = meta, index = 0;
+ op && mappingContains(range, op) && desc && index < 2;
+ index++, op = op?.parent
+ ) {
+ // Calling could potentially trigger side-effects, which would not
+ // be ideal for this case.
+ if (op.type === "call") {
+ return null;
+ }
+
+ if (op.type === "inherit") {
+ continue;
+ }
+
+ desc = await readDescriptorProperty(desc, op.property);
+ expression += `.${op.property}`;
+ }
+ }
+
+ return desc
+ ? {
+ name: binding.name,
+ desc,
+ expression,
+ }
+ : null;
+}
+
+function isPrimitiveValue(desc) {
+ return desc && (!desc.value || typeof desc.value !== "object");
+}
+function isObjectValue(desc) {
+ return (
+ desc &&
+ !isPrimitiveValue(desc) &&
+ desc.value.type === "object" &&
+ // Note: The check for `.type` might already cover the optimizedOut case
+ // but not 100% sure, so just being cautious.
+ !desc.value.optimizedOut
+ );
+}
+
+async function readDescriptorProperty(desc, property) {
+ if (!desc) {
+ return null;
+ }
+
+ if (typeof desc.value !== "object" || !desc.value) {
+ // If accessing a property on a primitive type, just return 'undefined'
+ // as the value.
+ return {
+ value: {
+ type: "undefined",
+ },
+ };
+ }
+
+ if (!isObjectValue(desc)) {
+ // If we got a non-primitive descriptor but it isn't an object, then
+ // it's definitely not the namespace and it is probably an error.
+ return desc;
+ }
+
+ const objectFront = clientCommands.createObjectFront(desc.value);
+ return (await objectFront.getProperty(property)).descriptor;
+}
diff --git a/devtools/client/debugger/src/utils/pause/mapScopes/getApplicableBindingsForOriginalPosition.js b/devtools/client/debugger/src/utils/pause/mapScopes/getApplicableBindingsForOriginalPosition.js
new file mode 100644
index 0000000000..c1a64ddfa0
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/mapScopes/getApplicableBindingsForOriginalPosition.js
@@ -0,0 +1,112 @@
+/* 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 { positionCmp } from "./positionCmp";
+import { filterSortedArray } from "./filtering";
+import { mappingContains } from "./mappingContains";
+import { getGeneratedLocation } from "../../source-maps";
+
+export async function originalRangeStartsInside({ start, end }, thunkArgs) {
+ const endPosition = await getGeneratedLocation(end, thunkArgs);
+ const startPosition = await getGeneratedLocation(start, thunkArgs);
+
+ // If the start and end positions collapse into eachother, it means that
+ // the range in the original content didn't _start_ at the start position.
+ // Since this likely means that the range doesn't logically apply to this
+ // binding location, we skip it.
+ return positionCmp(startPosition, endPosition) !== 0;
+}
+
+export async function getApplicableBindingsForOriginalPosition(
+ generatedAstBindings,
+ source,
+ { start, end },
+ bindingType,
+ locationType,
+ thunkArgs
+) {
+ const { sourceMapLoader } = thunkArgs;
+ const ranges = await sourceMapLoader.getGeneratedRanges(start);
+
+ const resultRanges = ranges.map(mapRange => ({
+ start: {
+ line: mapRange.line,
+ column: mapRange.columnStart,
+ },
+ end: {
+ line: mapRange.line,
+ // SourceMapConsumer's 'lastColumn' is inclusive, so we add 1 to make
+ // it exclusive like all other locations.
+ column: mapRange.columnEnd + 1,
+ },
+ }));
+
+ // When searching for imports, we expand the range to up to the next available
+ // mapping to allow for import declarations that are composed of multiple
+ // variable statements, where the later ones are entirely unmapped.
+ // Babel 6 produces imports in this style, e.g.
+ //
+ // var _mod = require("mod"); // mapped from import statement
+ // var _mod2 = interop(_mod); // entirely unmapped
+ if (bindingType === "import" && locationType !== "ref") {
+ const endPosition = await getGeneratedLocation(end, thunkArgs);
+ const startPosition = await getGeneratedLocation(start, thunkArgs);
+
+ for (const range of resultRanges) {
+ if (
+ mappingContains(range, { start: startPosition, end: startPosition }) &&
+ positionCmp(range.end, endPosition) < 0
+ ) {
+ range.end = {
+ line: endPosition.line,
+ column: endPosition.column,
+ };
+ break;
+ }
+ }
+ }
+
+ return filterApplicableBindings(generatedAstBindings, resultRanges);
+}
+
+function filterApplicableBindings(bindings, ranges) {
+ const result = [];
+ for (const range of ranges) {
+ // Any binding overlapping a part of the mapping range.
+ const filteredBindings = filterSortedArray(bindings, binding => {
+ if (positionCmp(binding.loc.end, range.start) <= 0) {
+ return -1;
+ }
+ if (positionCmp(binding.loc.start, range.end) >= 0) {
+ return 1;
+ }
+
+ return 0;
+ });
+
+ let firstInRange = true;
+ let firstOnLine = true;
+ let line = -1;
+
+ for (const binding of filteredBindings) {
+ if (binding.loc.start.line === line) {
+ firstOnLine = false;
+ } else {
+ line = binding.loc.start.line;
+ firstOnLine = true;
+ }
+
+ result.push({
+ binding,
+ range,
+ firstOnLine,
+ firstInRange,
+ });
+
+ firstInRange = false;
+ }
+ }
+
+ return result;
+}
diff --git a/devtools/client/debugger/src/utils/pause/mapScopes/index.js b/devtools/client/debugger/src/utils/pause/mapScopes/index.js
new file mode 100644
index 0000000000..dbd99f8b11
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/mapScopes/index.js
@@ -0,0 +1,586 @@
+/* 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 {
+ debuggerToSourceMapLocation,
+ sourceMapToDebuggerLocation,
+} from "../../location";
+import { locColumn } from "./locColumn";
+import { loadRangeMetadata, findMatchingRange } from "./rangeMetadata";
+
+// eslint-disable-next-line max-len
+import {
+ findGeneratedReference,
+ findGeneratedImportReference,
+ findGeneratedImportDeclaration,
+} from "./findGeneratedBindingFromPosition";
+import {
+ buildGeneratedBindingList,
+ buildFakeBindingList,
+} from "./buildGeneratedBindingList";
+import {
+ originalRangeStartsInside,
+ getApplicableBindingsForOriginalPosition,
+} from "./getApplicableBindingsForOriginalPosition";
+import { getOptimizedOutGrip } from "./optimizedOut";
+
+import { log } from "../../log";
+
+// Create real location objects for all location start and end.
+//
+// Parser worker returns scopes with location having a sourceId
+// instead of a source object as it doesn't know about main thread source objects.
+function updateLocationsInScopes(state, scopes) {
+ for (const item of scopes) {
+ for (const name of Object.keys(item.bindings)) {
+ for (const ref of item.bindings[name].refs) {
+ const locs = [ref];
+ if (ref.type !== "ref") {
+ locs.push(ref.declaration);
+ }
+ for (const loc of locs) {
+ loc.start = sourceMapToDebuggerLocation(state, loc.start);
+ loc.end = sourceMapToDebuggerLocation(state, loc.end);
+ }
+ }
+ }
+ }
+}
+
+export async function buildMappedScopes(
+ source,
+ content,
+ frame,
+ generatedScopes,
+ thunkArgs
+) {
+ const { getState, parserWorker } = thunkArgs;
+ if (!parserWorker.isLocationSupported(frame.location)) {
+ return null;
+ }
+ const originalAstScopes = await parserWorker.getScopes(frame.location);
+ updateLocationsInScopes(getState(), originalAstScopes);
+ const generatedAstScopes = await parserWorker.getScopes(
+ frame.generatedLocation
+ );
+ updateLocationsInScopes(getState(), generatedAstScopes);
+
+ if (!originalAstScopes || !generatedAstScopes) {
+ return null;
+ }
+
+ const originalRanges = await loadRangeMetadata(
+ frame.location,
+ originalAstScopes,
+ thunkArgs
+ );
+
+ if (hasLineMappings(originalRanges)) {
+ // Fallback to generated scopes as there are no clear mappings to original scopes
+ // This means the scope variable names are likely the same for both the original
+ // generated sources.
+ return { scope: generatedScopes };
+ }
+
+ let generatedAstBindings;
+ if (generatedScopes) {
+ generatedAstBindings = buildGeneratedBindingList(
+ generatedScopes,
+ generatedAstScopes,
+ frame.this
+ );
+ } else {
+ generatedAstBindings = buildFakeBindingList(generatedAstScopes);
+ }
+
+ const { mappedOriginalScopes, expressionLookup } =
+ await mapOriginalBindingsToGenerated(
+ source,
+ content,
+ originalRanges,
+ originalAstScopes,
+ generatedAstBindings,
+ thunkArgs
+ );
+
+ const globalLexicalScope = generatedScopes
+ ? getGlobalFromScope(generatedScopes)
+ : generateGlobalFromAst(generatedAstScopes);
+ const mappedGeneratedScopes = generateClientScope(
+ globalLexicalScope,
+ mappedOriginalScopes
+ );
+
+ return isReliableScope(mappedGeneratedScopes)
+ ? { mappings: expressionLookup, scope: mappedGeneratedScopes }
+ : { scope: generatedScopes };
+}
+
+async function mapOriginalBindingsToGenerated(
+ source,
+ content,
+ originalRanges,
+ originalAstScopes,
+ generatedAstBindings,
+ thunkArgs
+) {
+ const expressionLookup = {};
+ const mappedOriginalScopes = [];
+
+ const cachedSourceMaps = batchScopeMappings(
+ originalAstScopes,
+ source,
+ thunkArgs
+ );
+ // Override sourceMapLoader attribute with the special cached SourceMapLoader instance
+ // in order to make it used by all functions used in this method.
+ thunkArgs = { ...thunkArgs, sourceMapLoader: cachedSourceMaps };
+
+ for (const item of originalAstScopes) {
+ const generatedBindings = {};
+
+ for (const name of Object.keys(item.bindings)) {
+ const binding = item.bindings[name];
+
+ const result = await findGeneratedBinding(
+ source,
+ content,
+ name,
+ binding,
+ originalRanges,
+ generatedAstBindings,
+ thunkArgs
+ );
+
+ if (result) {
+ generatedBindings[name] = result.grip;
+
+ if (
+ binding.refs.length !== 0 &&
+ // These are assigned depth-first, so we don't want shadowed
+ // bindings in parent scopes overwriting the expression.
+ !Object.prototype.hasOwnProperty.call(expressionLookup, name)
+ ) {
+ expressionLookup[name] = result.expression;
+ }
+ }
+ }
+
+ mappedOriginalScopes.push({
+ ...item,
+ generatedBindings,
+ });
+ }
+
+ return {
+ mappedOriginalScopes,
+ expressionLookup,
+ };
+}
+
+/**
+ * Consider a scope and its parents reliable if the vast majority of its
+ * bindings were successfully mapped to generated scope bindings.
+ */
+function isReliableScope(scope) {
+ let totalBindings = 0;
+ let unknownBindings = 0;
+
+ for (let s = scope; s; s = s.parent) {
+ const vars = s.bindings?.variables || {};
+ for (const key of Object.keys(vars)) {
+ const binding = vars[key];
+
+ totalBindings += 1;
+ if (
+ binding.value &&
+ typeof binding.value === "object" &&
+ (binding.value.type === "unscoped" || binding.value.type === "unmapped")
+ ) {
+ unknownBindings += 1;
+ }
+ }
+ }
+
+ // As determined by fair dice roll.
+ return totalBindings === 0 || unknownBindings / totalBindings < 0.25;
+}
+
+function hasLineMappings(ranges) {
+ return ranges.every(
+ range => range.columnStart === 0 && range.columnEnd === Infinity
+ );
+}
+
+/**
+ * Build a special SourceMapLoader instance, based on the one passed in thunkArgs,
+ * which will both:
+ * - preload generated ranges/locations for original locations mentioned
+ * in originalAstScopes
+ * - cache the requests to fetch these genereated ranges/locations
+ */
+function batchScopeMappings(originalAstScopes, source, thunkArgs) {
+ const { sourceMapLoader } = thunkArgs;
+ const precalculatedRanges = new Map();
+ const precalculatedLocations = new Map();
+
+ // Explicitly dispatch all of the sourcemap requests synchronously up front so
+ // that they will be batched into a single request for the worker to process.
+ for (const item of originalAstScopes) {
+ for (const name of Object.keys(item.bindings)) {
+ for (const ref of item.bindings[name].refs) {
+ const locs = [ref];
+ if (ref.type !== "ref") {
+ locs.push(ref.declaration);
+ }
+
+ for (const loc of locs) {
+ precalculatedRanges.set(
+ buildLocationKey(loc.start),
+ sourceMapLoader.getGeneratedRanges(
+ debuggerToSourceMapLocation(loc.start)
+ )
+ );
+ precalculatedLocations.set(
+ buildLocationKey(loc.start),
+ sourceMapLoader.getGeneratedLocation(
+ debuggerToSourceMapLocation(loc.start)
+ )
+ );
+ precalculatedLocations.set(
+ buildLocationKey(loc.end),
+ sourceMapLoader.getGeneratedLocation(
+ debuggerToSourceMapLocation(loc.end)
+ )
+ );
+ }
+ }
+ }
+ }
+
+ return {
+ async getGeneratedRanges(pos) {
+ const key = buildLocationKey(pos);
+
+ if (!precalculatedRanges.has(key)) {
+ log("Bad precalculated mapping");
+ return sourceMapLoader.getGeneratedRanges(
+ debuggerToSourceMapLocation(pos)
+ );
+ }
+ return precalculatedRanges.get(key);
+ },
+
+ async getGeneratedLocation(pos) {
+ const key = buildLocationKey(pos);
+
+ if (!precalculatedLocations.has(key)) {
+ log("Bad precalculated mapping");
+ return sourceMapLoader.getGeneratedLocation(
+ debuggerToSourceMapLocation(pos)
+ );
+ }
+ return precalculatedLocations.get(key);
+ },
+ };
+}
+function buildLocationKey(loc) {
+ return `${loc.line}:${locColumn(loc)}`;
+}
+
+function generateClientScope(globalLexicalScope, originalScopes) {
+ // Build a structure similar to the client's linked scope object using
+ // the original AST scopes, but pulling in the generated bindings
+ // linked to each scope.
+ const result = originalScopes
+ .slice(0, -2)
+ .reverse()
+ .reduce((acc, orig, i) => {
+ const {
+ // The 'this' binding data we have is handled independently, so
+ // the binding data is not included here.
+ // eslint-disable-next-line no-unused-vars
+ this: _this,
+ ...variables
+ } = orig.generatedBindings;
+
+ return {
+ parent: acc,
+ actor: `originalActor${i}`,
+ type: orig.type,
+ scopeKind: orig.scopeKind,
+ bindings: {
+ arguments: [],
+ variables,
+ },
+ ...(orig.type === "function"
+ ? {
+ function: {
+ displayName: orig.displayName,
+ },
+ }
+ : null),
+ ...(orig.type === "block"
+ ? {
+ block: {
+ displayName: orig.displayName,
+ },
+ }
+ : null),
+ };
+ }, globalLexicalScope);
+
+ // The rendering logic in getScope 'this' bindings only runs on the current
+ // selected frame scope, so we pluck out the 'this' binding that was mapped,
+ // and put it in a special location
+ const thisScope = originalScopes.find(scope => scope.bindings.this);
+ if (result.bindings && thisScope) {
+ result.bindings.this = thisScope.generatedBindings.this || null;
+ }
+
+ return result;
+}
+
+function getGlobalFromScope(scopes) {
+ // Pull the root object scope and root lexical scope to reuse them in
+ // our mapped scopes. This assumes that file being processed is
+ // a CommonJS or ES6 module, which might not be ideal. Potentially
+ // should add some logic to try to detect those cases?
+ let globalLexicalScope = null;
+ for (let s = scopes; s.parent; s = s.parent) {
+ globalLexicalScope = s;
+ }
+ if (!globalLexicalScope) {
+ throw new Error("Assertion failure - there should always be a scope");
+ }
+ return globalLexicalScope;
+}
+
+function generateGlobalFromAst(generatedScopes) {
+ const globalLexicalAst = generatedScopes[generatedScopes.length - 2];
+ if (!globalLexicalAst) {
+ throw new Error("Assertion failure - there should always be a scope");
+ }
+ return {
+ actor: "generatedActor1",
+ type: "block",
+ scopeKind: "",
+ bindings: {
+ arguments: [],
+ variables: Object.fromEntries(
+ Object.keys(globalLexicalAst).map(key => [key, getOptimizedOutGrip()])
+ ),
+ },
+ parent: {
+ actor: "generatedActor0",
+ object: getOptimizedOutGrip(),
+ scopeKind: "",
+ type: "object",
+ },
+ };
+}
+
+function hasValidIdent(range, pos) {
+ return (
+ range.type === "match" ||
+ // For declarations, we allow the range on the identifier to be a
+ // more general "contains" to increase the chances of a match.
+ (pos.type !== "ref" && range.type === "contains")
+ );
+}
+
+// eslint-disable-next-line complexity
+async function findGeneratedBinding(
+ source,
+ content,
+ name,
+ originalBinding,
+ originalRanges,
+ generatedAstBindings,
+ thunkArgs
+) {
+ // If there are no references to the implicits, then we have no way to
+ // even attempt to map it back to the original since there is no location
+ // data to use. Bail out instead of just showing it as unmapped.
+ if (
+ originalBinding.type === "implicit" &&
+ !originalBinding.refs.some(item => item.type === "ref")
+ ) {
+ return null;
+ }
+
+ const loadApplicableBindings = async (pos, locationType) => {
+ let applicableBindings = await getApplicableBindingsForOriginalPosition(
+ generatedAstBindings,
+ source,
+ pos,
+ originalBinding.type,
+ locationType,
+ thunkArgs
+ );
+ if (applicableBindings.length) {
+ hadApplicableBindings = true;
+ }
+ if (locationType === "ref") {
+ // Some tooling creates ranges that map a line as a whole, which is useful
+ // for step-debugging, but can easily lead to finding the wrong binding.
+ // To avoid these false-positives, we entirely ignore bindings matched
+ // by ranges that cover full lines.
+ applicableBindings = applicableBindings.filter(
+ ({ range }) =>
+ !(range.start.column === 0 && range.end.column === Infinity)
+ );
+ }
+ if (
+ locationType !== "ref" &&
+ !(await originalRangeStartsInside(pos, thunkArgs))
+ ) {
+ applicableBindings = [];
+ }
+ return applicableBindings;
+ };
+
+ const { refs } = originalBinding;
+
+ let hadApplicableBindings = false;
+ let genContent = null;
+ for (const pos of refs) {
+ const applicableBindings = await loadApplicableBindings(pos, pos.type);
+
+ const range = findMatchingRange(originalRanges, pos);
+ if (range && hasValidIdent(range, pos)) {
+ if (originalBinding.type === "import") {
+ genContent = await findGeneratedImportReference(applicableBindings);
+ } else {
+ genContent = await findGeneratedReference(applicableBindings);
+ }
+ }
+
+ if (
+ (pos.type === "class-decl" || pos.type === "class-inner") &&
+ content.contentType &&
+ content.contentType.match(/\/typescript/)
+ ) {
+ const declRange = findMatchingRange(originalRanges, pos.declaration);
+ if (declRange && declRange.type !== "multiple") {
+ const applicableDeclBindings = await loadApplicableBindings(
+ pos.declaration,
+ pos.type
+ );
+
+ // Resolve to first binding in the range
+ const declContent = await findGeneratedReference(
+ applicableDeclBindings
+ );
+
+ if (declContent) {
+ // Prefer the declaration mapping in this case because TS sometimes
+ // maps class declaration names to "export.Foo = Foo;" or to
+ // the decorator logic itself
+ genContent = declContent;
+ }
+ }
+ }
+
+ if (
+ !genContent &&
+ pos.type === "import-decl" &&
+ typeof pos.importName === "string"
+ ) {
+ const { importName } = pos;
+ const declRange = findMatchingRange(originalRanges, pos.declaration);
+
+ // The import declaration should have an original position mapping,
+ // but otherwise we don't really have preferences on the range type
+ // because it can have multiple bindings, but we do want to make sure
+ // that all of the bindings that match the range are part of the same
+ // import declaration.
+ if (declRange?.singleDeclaration) {
+ const applicableDeclBindings = await loadApplicableBindings(
+ pos.declaration,
+ pos.type
+ );
+
+ // match the import declaration location
+ genContent = await findGeneratedImportDeclaration(
+ applicableDeclBindings,
+ importName
+ );
+ }
+ }
+
+ if (genContent) {
+ break;
+ }
+ }
+
+ if (genContent && genContent.desc) {
+ return {
+ grip: genContent.desc,
+ expression: genContent.expression,
+ };
+ } else if (genContent) {
+ // If there is no descriptor for 'this', then this is not the top-level
+ // 'this' that the server gave us a binding for, and we can just ignore it.
+ if (name === "this") {
+ return null;
+ }
+
+ // If the location is found but the descriptor is not, then it
+ // means that the server scope information didn't match the scope
+ // information from the DevTools parsed scopes.
+ return {
+ grip: {
+ configurable: false,
+ enumerable: true,
+ writable: false,
+ value: {
+ type: "unscoped",
+ unscoped: true,
+
+ // HACK: Until support for "unscoped" lands in devtools-reps,
+ // this will make these show as (unavailable).
+ missingArguments: true,
+ },
+ },
+ expression: null,
+ };
+ } else if (!hadApplicableBindings && name !== "this") {
+ // If there were no applicable bindings to consider while searching for
+ // matching bindings, then the source map for this file didn't make any
+ // attempt to map the binding, and that most likely means that the
+ // code was entirely emitted from the output code.
+ return {
+ grip: getOptimizedOutGrip(),
+ expression: `
+ (() => {
+ throw new Error('"' + ${JSON.stringify(
+ name
+ )} + '" has been optimized out.');
+ })()
+ `,
+ };
+ }
+
+ // If no location mapping is found, then the map is bad, or
+ // the map is okay but it original location is inside
+ // of some scope, but the generated location is outside, leading
+ // us to search for bindings that don't technically exist.
+ return {
+ grip: {
+ configurable: false,
+ enumerable: true,
+ writable: false,
+ value: {
+ type: "unmapped",
+ unmapped: true,
+
+ // HACK: Until support for "unmapped" lands in devtools-reps,
+ // this will make these show as (unavailable).
+ missingArguments: true,
+ },
+ },
+ expression: null,
+ };
+}
diff --git a/devtools/client/debugger/src/utils/pause/mapScopes/locColumn.js b/devtools/client/debugger/src/utils/pause/mapScopes/locColumn.js
new file mode 100644
index 0000000000..075e902299
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/mapScopes/locColumn.js
@@ -0,0 +1,13 @@
+/* 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 locColumn(loc) {
+ if (typeof loc.column !== "number") {
+ // This shouldn't really happen with locations from the AST, but
+ // the datatype we are using allows null/undefined column.
+ return 0;
+ }
+
+ return loc.column;
+}
diff --git a/devtools/client/debugger/src/utils/pause/mapScopes/mappingContains.js b/devtools/client/debugger/src/utils/pause/mapScopes/mappingContains.js
new file mode 100644
index 0000000000..ca82fe42ec
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/mapScopes/mappingContains.js
@@ -0,0 +1,12 @@
+/* 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 { positionCmp } from "./positionCmp";
+
+export function mappingContains(mapped, item) {
+ return (
+ positionCmp(item.start, mapped.start) >= 0 &&
+ positionCmp(item.end, mapped.end) <= 0
+ );
+}
diff --git a/devtools/client/debugger/src/utils/pause/mapScopes/moz.build b/devtools/client/debugger/src/utils/pause/mapScopes/moz.build
new file mode 100644
index 0000000000..05f2b7e3d8
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/mapScopes/moz.build
@@ -0,0 +1,19 @@
+# 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(
+ "buildGeneratedBindingList.js",
+ "filtering.js",
+ "findGeneratedBindingFromPosition.js",
+ "getApplicableBindingsForOriginalPosition.js",
+ "index.js",
+ "locColumn.js",
+ "mappingContains.js",
+ "optimizedOut.js",
+ "positionCmp.js",
+ "rangeMetadata.js",
+)
diff --git a/devtools/client/debugger/src/utils/pause/mapScopes/optimizedOut.js b/devtools/client/debugger/src/utils/pause/mapScopes/optimizedOut.js
new file mode 100644
index 0000000000..755b308a2d
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/mapScopes/optimizedOut.js
@@ -0,0 +1,15 @@
+/* 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 getOptimizedOutGrip() {
+ return {
+ configurable: false,
+ enumerable: true,
+ writable: false,
+ value: {
+ type: "null",
+ optimizedOut: true,
+ },
+ };
+}
diff --git a/devtools/client/debugger/src/utils/pause/mapScopes/positionCmp.js b/devtools/client/debugger/src/utils/pause/mapScopes/positionCmp.js
new file mode 100644
index 0000000000..5d53fb933e
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/mapScopes/positionCmp.js
@@ -0,0 +1,24 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+import { locColumn } from "./locColumn";
+
+/**
+ * * === 0 - Positions are equal.
+ * * < 0 - first position before second position
+ * * > 0 - first position after second position
+ */
+export function positionCmp(p1, p2) {
+ if (p1.line === p2.line) {
+ const l1 = locColumn(p1);
+ const l2 = locColumn(p2);
+
+ if (l1 === l2) {
+ return 0;
+ }
+ return l1 < l2 ? -1 : 1;
+ }
+
+ return p1.line < p2.line ? -1 : 1;
+}
diff --git a/devtools/client/debugger/src/utils/pause/mapScopes/rangeMetadata.js b/devtools/client/debugger/src/utils/pause/mapScopes/rangeMetadata.js
new file mode 100644
index 0000000000..7e04c34e35
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/mapScopes/rangeMetadata.js
@@ -0,0 +1,117 @@
+/* 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 { locColumn } from "./locColumn";
+import { positionCmp } from "./positionCmp";
+import { filterSortedArray } from "./filtering";
+
+// * match - Range contains a single identifier with matching start location
+// * contains - Range contains a single identifier with non-matching start
+// * multiple - Range contains multiple identifiers
+// * empty - Range contains no identifiers
+
+export async function loadRangeMetadata(
+ location,
+ originalAstScopes,
+ { sourceMapLoader }
+) {
+ const originalRanges = await sourceMapLoader.getOriginalRanges(
+ location.source.id
+ );
+
+ const sortedOriginalAstBindings = [];
+ for (const item of originalAstScopes) {
+ for (const name of Object.keys(item.bindings)) {
+ for (const ref of item.bindings[name].refs) {
+ sortedOriginalAstBindings.push(ref);
+ }
+ }
+ }
+ sortedOriginalAstBindings.sort((a, b) => positionCmp(a.start, b.start));
+
+ let i = 0;
+
+ return originalRanges.map(range => {
+ const bindings = [];
+
+ while (
+ i < sortedOriginalAstBindings.length &&
+ (sortedOriginalAstBindings[i].start.line < range.line ||
+ (sortedOriginalAstBindings[i].start.line === range.line &&
+ locColumn(sortedOriginalAstBindings[i].start) < range.columnStart))
+ ) {
+ i++;
+ }
+
+ while (
+ i < sortedOriginalAstBindings.length &&
+ sortedOriginalAstBindings[i].start.line === range.line &&
+ locColumn(sortedOriginalAstBindings[i].start) >= range.columnStart &&
+ locColumn(sortedOriginalAstBindings[i].start) < range.columnEnd
+ ) {
+ const lastBinding = bindings[bindings.length - 1];
+ // Only add bindings when they're in new positions
+ if (
+ !lastBinding ||
+ positionCmp(lastBinding.start, sortedOriginalAstBindings[i].start) !== 0
+ ) {
+ bindings.push(sortedOriginalAstBindings[i]);
+ }
+ i++;
+ }
+
+ let type = "empty";
+ let singleDeclaration = true;
+ if (bindings.length === 1) {
+ const binding = bindings[0];
+ if (
+ binding.start.line === range.line &&
+ binding.start.column === range.columnStart
+ ) {
+ type = "match";
+ } else {
+ type = "contains";
+ }
+ } else if (bindings.length > 1) {
+ type = "multiple";
+ const binding = bindings[0];
+ const declStart =
+ binding.type !== "ref" ? binding.declaration.start : null;
+
+ singleDeclaration = bindings.every(b => {
+ return (
+ declStart &&
+ b.type !== "ref" &&
+ positionCmp(declStart, b.declaration.start) === 0
+ );
+ });
+ }
+
+ return {
+ type,
+ singleDeclaration,
+ ...range,
+ };
+ });
+}
+
+export function findMatchingRange(sortedOriginalRanges, bindingRange) {
+ return filterSortedArray(sortedOriginalRanges, range => {
+ if (range.line < bindingRange.start.line) {
+ return -1;
+ }
+ if (range.line > bindingRange.start.line) {
+ return 1;
+ }
+
+ if (range.columnEnd <= locColumn(bindingRange.start)) {
+ return -1;
+ }
+ if (range.columnStart > locColumn(bindingRange.start)) {
+ return 1;
+ }
+
+ return 0;
+ }).pop();
+}
diff --git a/devtools/client/debugger/src/utils/pause/moz.build b/devtools/client/debugger/src/utils/pause/moz.build
new file mode 100644
index 0000000000..db8b733274
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/moz.build
@@ -0,0 +1,15 @@
+# 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 += [
+ "frames",
+ "mapScopes",
+]
+
+CompiledModules(
+ "index.js",
+ "scopes.js",
+ "why.js",
+)
diff --git a/devtools/client/debugger/src/utils/pause/scopes.js b/devtools/client/debugger/src/utils/pause/scopes.js
new file mode 100644
index 0000000000..bdb53ba493
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/scopes.js
@@ -0,0 +1,283 @@
+/* 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 file contains utility functions which supports the structure & display of
+// scopes information in Scopes panel.
+
+import { objectInspector } from "devtools/client/shared/components/reps/index";
+import { simplifyDisplayName } from "../pause/frames/index";
+
+const {
+ utils: {
+ node: { NODE_TYPES },
+ },
+} = objectInspector;
+
+// The heading that should be displayed for the scope
+function _getScopeTitle(type, scope) {
+ if (type === "block" && scope.block && scope.block.displayName) {
+ return scope.block.displayName;
+ }
+
+ if (type === "function" && scope.function) {
+ return scope.function.displayName
+ ? simplifyDisplayName(scope.function.displayName)
+ : L10N.getStr("anonymousFunction");
+ }
+ return L10N.getStr("scopes.block");
+}
+
+function _getThisVariable(this_, path) {
+ if (!this_) {
+ return null;
+ }
+
+ return {
+ name: "<this>",
+ path: `${path}/<this>`,
+ contents: { value: this_ },
+ };
+}
+
+/**
+ * Builds a tree of nodes representing all the variables and arguments
+ * for the bindings from a scope.
+ *
+ * Each binding => { variables: Array, arguments: Array }
+ * Each binding argument => [name: string, contents: BindingContents]
+ *
+ * @param {Array} bindings
+ * @param {String} parentName
+ * @returns
+ */
+function _getBindingVariables(bindings, parentName) {
+ if (!bindings) {
+ return [];
+ }
+
+ const nodes = [];
+ const addNode = (name, contents) =>
+ nodes.push({ name, contents, path: `${parentName}/${name}` });
+
+ for (const arg of bindings.arguments) {
+ // `arg` is an object which only has a single property whose name is the name of the
+ // argument. So here we can directly pick the first (and only) entry of `arg`
+ const [name, contents] = Object.entries(arg)[0];
+ addNode(name, contents);
+ }
+
+ for (const name in bindings.variables) {
+ addNode(name, bindings.variables[name]);
+ }
+
+ return nodes;
+}
+
+/**
+ * This generates the scope item for rendering in the scopes panel.
+ *
+ * @param {*} scope
+ * @param {*} selectedFrame
+ * @param {*} frameScopes
+ * @param {*} why
+ * @param {*} scopeIndex
+ * @returns
+ */
+function _getScopeItem(scope, selectedFrame, frameScopes, why, scopeIndex) {
+ const { type, actor } = scope;
+
+ const isLocalScope = scope.actor === frameScopes.actor;
+
+ const key = `${actor}-${scopeIndex}`;
+ if (type === "function" || type === "block") {
+ const { bindings } = scope;
+
+ let vars = _getBindingVariables(bindings, key);
+
+ // show exception, return, and this variables in innermost scope
+ if (isLocalScope) {
+ vars = vars.concat(_getFrameExceptionOrReturnedValueVariables(why, key));
+
+ let thisDesc_ = selectedFrame.this;
+
+ if (bindings && "this" in bindings) {
+ // The presence of "this" means we're rendering a "this" binding
+ // generated from mapScopes and this can override the binding
+ // provided by the current frame.
+ thisDesc_ = bindings.this ? bindings.this.value : null;
+ }
+
+ const this_ = _getThisVariable(thisDesc_, key);
+
+ if (this_) {
+ vars.push(this_);
+ }
+ }
+
+ if (vars?.length) {
+ const title = _getScopeTitle(type, scope) || "";
+ vars.sort((a, b) => a.name.localeCompare(b.name));
+ return {
+ name: title,
+ path: key,
+ contents: vars,
+ type: NODE_TYPES.BLOCK,
+ };
+ }
+ } else if (type === "object" && scope.object) {
+ let value = scope.object;
+ // If this is the global window scope, mark it as such so that it will
+ // preview Window: Global instead of Window: Window
+ if (value.class === "Window") {
+ value = { ...value, displayClass: "Global" };
+ }
+ return {
+ name: scope.object.class,
+ path: key,
+ contents: { value },
+ };
+ }
+
+ return null;
+}
+/**
+ * Merge the scope bindings for lexical scopes and its parent function body scopes
+ * Note: block scopes are not merged. See browser_dbg-merge-scopes.js for test examples
+ * to better understand the scenario,
+ *
+ * @param {*} scope
+ * @param {*} parentScope
+ * @param {*} item
+ * @param {*} parentItem
+ * @returns
+ */
+export function _mergeLexicalScopesBindings(
+ scope,
+ parentScope,
+ item,
+ parentItem
+) {
+ if (scope.scopeKind == "function lexical" && parentScope.type == "function") {
+ const contents = item.contents.concat(parentItem.contents);
+ contents.sort((a, b) => a.name.localeCompare(b.name));
+
+ return {
+ name: parentItem.name,
+ path: parentItem.path,
+ contents,
+ type: NODE_TYPES.BLOCK,
+ };
+ }
+ return null;
+}
+
+/**
+ * Returns a string path for an scope item which can be used
+ * in different pauses for a thread.
+ *
+ * @param {Object} item
+ * @returns
+ */
+
+export function getScopeItemPath(item) {
+ // Calling toString() on item.path allows symbols to be handled.
+ return item.path.toString();
+}
+
+// Generate variables when the function throws an exception or returned a value.
+function _getFrameExceptionOrReturnedValueVariables(why, path) {
+ const vars = [];
+
+ if (why && why.frameFinished) {
+ const { frameFinished } = why;
+
+ // Always display a `throw` property if present, even if it is falsy.
+ if (Object.prototype.hasOwnProperty.call(frameFinished, "throw")) {
+ vars.push({
+ name: "<exception>",
+ path: `${path}/<exception>`,
+ contents: { value: frameFinished.throw },
+ });
+ }
+
+ if (Object.prototype.hasOwnProperty.call(frameFinished, "return")) {
+ const returned = frameFinished.return;
+
+ // Do not display undefined. Do display falsy values like 0 and false. The
+ // protocol grip for undefined is a JSON object: { type: "undefined" }.
+ if (typeof returned !== "object" || returned.type !== "undefined") {
+ vars.push({
+ name: "<return>",
+ path: `${path}/<return>`,
+ contents: { value: returned },
+ });
+ }
+ }
+ }
+
+ return vars;
+}
+
+/**
+ * Generates the scope items (for scopes related to selected frame) to be rendered in the scope panel
+ * @param {*} why
+ * @param {*} selectedFrame
+ * @param {*} frameScopes
+ * @returns
+ */
+export function getScopesItemsForSelectedFrame(
+ why,
+ selectedFrame,
+ frameScopes
+) {
+ if (!why || !selectedFrame) {
+ return null;
+ }
+
+ if (!frameScopes) {
+ return null;
+ }
+
+ const scopes = [];
+
+ let currentScope = frameScopes;
+ let currentScopeIndex = 1;
+
+ let prevScope = null,
+ prevScopeItem = null;
+
+ while (currentScope) {
+ let currentScopeItem = _getScopeItem(
+ currentScope,
+ selectedFrame,
+ frameScopes,
+ why,
+ currentScopeIndex
+ );
+
+ if (currentScopeItem) {
+ const mergedItem =
+ prevScope && prevScopeItem
+ ? _mergeLexicalScopesBindings(
+ prevScope,
+ currentScope,
+ prevScopeItem,
+ currentScopeItem
+ )
+ : null;
+ if (mergedItem) {
+ currentScopeItem = mergedItem;
+ scopes.pop();
+ }
+ scopes.push(currentScopeItem);
+ }
+
+ prevScope = currentScope;
+ prevScopeItem = currentScopeItem;
+ currentScopeIndex++;
+ currentScope = currentScope.parent;
+ }
+
+ return scopes;
+}
diff --git a/devtools/client/debugger/src/utils/pause/tests/scopes.spec.js b/devtools/client/debugger/src/utils/pause/tests/scopes.spec.js
new file mode 100644
index 0000000000..08ac425774
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/tests/scopes.spec.js
@@ -0,0 +1,150 @@
+/* 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 { getScopesItemsForSelectedFrame } from "../scopes";
+import {
+ makeMockFrame,
+ makeMockScope,
+ makeWhyNormal,
+ makeWhyThrow,
+ mockScopeAddVariable,
+} from "../../test-mockup";
+
+function convertScope(scope) {
+ return scope;
+}
+
+describe("scopes", () => {
+ describe("getScopes", () => {
+ it("single scope", () => {
+ const pauseData = makeWhyNormal();
+ const scope = makeMockScope("actor1");
+ const selectedFrame = makeMockFrame(undefined, undefined, scope);
+
+ if (!selectedFrame.scope) {
+ throw new Error("Frame must include scopes");
+ }
+
+ const frameScopes = convertScope(selectedFrame.scope);
+ const scopes = getScopesItemsForSelectedFrame(
+ pauseData,
+ selectedFrame,
+ frameScopes
+ );
+ if (!scopes) {
+ throw new Error("missing scopes");
+ }
+ expect(scopes[0].path).toEqual("actor1-1");
+ expect(scopes[0].contents[0]).toEqual({
+ name: "<this>",
+ path: "actor1-1/<this>",
+ contents: { value: {} },
+ });
+ });
+
+ it("second scope", () => {
+ const pauseData = makeWhyNormal();
+ const scope0 = makeMockScope("actor2");
+ const scope1 = makeMockScope("actor1", undefined, scope0);
+ const selectedFrame = makeMockFrame(undefined, undefined, scope1);
+ mockScopeAddVariable(scope0, "foo");
+
+ if (!selectedFrame.scope) {
+ throw new Error("Frame must include scopes");
+ }
+
+ const frameScopes = convertScope(selectedFrame.scope);
+ const scopes = getScopesItemsForSelectedFrame(
+ pauseData,
+ selectedFrame,
+ frameScopes
+ );
+ if (!scopes) {
+ throw new Error("missing scopes");
+ }
+ expect(scopes[1].path).toEqual("actor2-2");
+ expect(scopes[1].contents[0]).toEqual({
+ name: "foo",
+ path: "actor2-2/foo",
+ contents: { value: null },
+ });
+ });
+
+ it("returning scope", () => {
+ const why = makeWhyNormal("to sender");
+ const scope = makeMockScope("actor1");
+ const selectedFrame = makeMockFrame(undefined, undefined, scope);
+
+ if (!selectedFrame.scope) {
+ throw new Error("Frame must include scopes");
+ }
+
+ const frameScopes = convertScope(selectedFrame.scope);
+ const scopes = getScopesItemsForSelectedFrame(
+ why,
+ selectedFrame,
+ frameScopes
+ );
+ expect(scopes).toMatchObject([
+ {
+ path: "actor1-1",
+ contents: [
+ {
+ name: "<return>",
+ path: "actor1-1/<return>",
+ contents: {
+ value: "to sender",
+ },
+ },
+ {
+ name: "<this>",
+ path: "actor1-1/<this>",
+ contents: {
+ value: {},
+ },
+ },
+ ],
+ },
+ ]);
+ });
+
+ it("throwing scope", () => {
+ const why = makeWhyThrow("a party");
+ const scope = makeMockScope("actor1");
+ const selectedFrame = makeMockFrame(undefined, undefined, scope);
+
+ if (!selectedFrame.scope) {
+ throw new Error("Frame must include scopes");
+ }
+
+ const frameScopes = convertScope(selectedFrame.scope);
+ const scopes = getScopesItemsForSelectedFrame(
+ why,
+ selectedFrame,
+ frameScopes
+ );
+ expect(scopes).toMatchObject([
+ {
+ path: "actor1-1",
+ contents: [
+ {
+ name: "<exception>",
+ path: "actor1-1/<exception>",
+ contents: {
+ value: "a party",
+ },
+ },
+ {
+ name: "<this>",
+ path: "actor1-1/<this>",
+ contents: {
+ value: {},
+ },
+ },
+ ],
+ },
+ ]);
+ });
+ });
+});
diff --git a/devtools/client/debugger/src/utils/pause/why.js b/devtools/client/debugger/src/utils/pause/why.js
new file mode 100644
index 0000000000..115d94873b
--- /dev/null
+++ b/devtools/client/debugger/src/utils/pause/why.js
@@ -0,0 +1,40 @@
+/* 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 { DEBUGGER_PAUSED_REASONS_L10N_MAPPING } from "devtools/shared/constants";
+
+export function getPauseReason(why) {
+ if (!why) {
+ return null;
+ }
+
+ const reasonType = why.type;
+ if (!DEBUGGER_PAUSED_REASONS_L10N_MAPPING[reasonType]) {
+ console.log("Please file an issue: reasonType=", reasonType);
+ }
+
+ return DEBUGGER_PAUSED_REASONS_L10N_MAPPING[reasonType];
+}
+
+export function isException(why) {
+ return why?.type === "exception";
+}
+
+export function isInterrupted(why) {
+ return why?.type === "interrupted";
+}
+
+export function inDebuggerEval(why) {
+ if (
+ why &&
+ why.type === "exception" &&
+ why.exception &&
+ why.exception.preview &&
+ why.exception.preview.fileName
+ ) {
+ return why.exception.preview.fileName === "debugger eval code";
+ }
+
+ return false;
+}
diff --git a/devtools/client/debugger/src/utils/prefs.js b/devtools/client/debugger/src/utils/prefs.js
new file mode 100644
index 0000000000..287f3f8cc7
--- /dev/null
+++ b/devtools/client/debugger/src/utils/prefs.js
@@ -0,0 +1,170 @@
+/* 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/>. */
+
+const { PrefsHelper } = require("resource://devtools/client/shared/prefs.js");
+
+import { isNode } from "./environment";
+
+// Schema version to bump when the async store format has changed incompatibly
+// and old stores should be cleared.
+const prefsSchemaVersion = 11;
+const { pref } = Services;
+
+if (isNode()) {
+ pref("devtools.debugger.logging", false);
+ pref("devtools.debugger.alphabetize-outline", false);
+ pref("devtools.debugger.auto-pretty-print", false);
+ pref("devtools.source-map.client-service.enabled", true);
+ pref("devtools.chrome.enabled", false);
+ pref("devtools.debugger.pause-on-debugger-statement", true);
+ pref("devtools.debugger.pause-on-exceptions", false);
+ pref("devtools.debugger.pause-on-caught-exceptions", false);
+ pref("devtools.debugger.ignore-caught-exceptions", true);
+ pref("devtools.debugger.call-stack-visible", true);
+ pref("devtools.debugger.scopes-visible", true);
+ pref("devtools.debugger.threads-visible", true);
+ pref("devtools.debugger.expressions-visible", false);
+ pref("devtools.debugger.xhr-breakpoints-visible", false);
+ pref("devtools.debugger.breakpoints-visible", true);
+ pref("devtools.debugger.event-listeners-visible", false);
+ pref("devtools.debugger.dom-mutation-breakpoints-visible", false);
+ pref("devtools.debugger.start-panel-collapsed", false);
+ pref("devtools.debugger.end-panel-collapsed", false);
+ pref("devtools.debugger.start-panel-size", 300);
+ pref("devtools.debugger.end-panel-size", 300);
+ pref("devtools.debugger.ui.editor-wrapping", false);
+ pref("devtools.debugger.ui.framework-grouping-on", true);
+ pref("devtools.debugger.pending-selected-location", "{}");
+ pref("devtools.debugger.expressions", "[]");
+ pref("devtools.debugger.search-options", "{}");
+ pref("devtools.debugger.project-directory-root", "");
+ pref("devtools.debugger.map-scopes-enabled", false);
+ pref("devtools.debugger.prefs-schema-version", prefsSchemaVersion);
+ pref("devtools.debugger.skip-pausing", false);
+ pref("devtools.debugger.log-actions", true);
+ pref("devtools.debugger.log-event-breakpoints", false);
+ pref("devtools.debugger.javascript-tracing-log-method", "console");
+ pref("devtools.debugger.javascript-tracing-values", false);
+ pref("devtools.debugger.javascript-tracing-on-next-interaction", false);
+ pref("devtools.debugger.javascript-tracing-on-next-load", false);
+ pref("devtools.debugger.javascript-tracing-function-return", false);
+ pref("devtools.debugger.hide-ignored-sources", false);
+ pref("devtools.debugger.source-map-ignore-list-enabled", true);
+ pref("devtools.debugger.features.wasm", true);
+ pref("devtools.debugger.features.code-folding", false);
+ pref("devtools.debugger.features.autocomplete-expressions", false);
+ pref("devtools.debugger.features.map-expression-bindings", true);
+ pref("devtools.debugger.features.map-await-expression", true);
+ pref("devtools.debugger.features.log-points", true);
+ pref("devtools.debugger.features.inline-preview", true);
+ pref("devtools.debugger.features.javascript-tracing", false);
+ pref("devtools.debugger.features.codemirror-next", false);
+ pref("devtools.editor.tabsize", 2);
+ pref("devtools.editor.expandtab", false);
+ pref("devtools.editor.autoclosebrackets", false);
+}
+
+export const prefs = new PrefsHelper("devtools", {
+ logging: ["Bool", "debugger.logging"],
+ editorWrapping: ["Bool", "debugger.ui.editor-wrapping"],
+ alphabetizeOutline: ["Bool", "debugger.alphabetize-outline"],
+ autoPrettyPrint: ["Bool", "debugger.auto-pretty-print"],
+ clientSourceMapsEnabled: ["Bool", "source-map.client-service.enabled"],
+ chromeAndExtensionsEnabled: ["Bool", "chrome.enabled"],
+ pauseOnDebuggerStatement: ["Bool", "debugger.pause-on-debugger-statement"],
+ pauseOnExceptions: ["Bool", "debugger.pause-on-exceptions"],
+ pauseOnCaughtExceptions: ["Bool", "debugger.pause-on-caught-exceptions"],
+ ignoreCaughtExceptions: ["Bool", "debugger.ignore-caught-exceptions"],
+ callStackVisible: ["Bool", "debugger.call-stack-visible"],
+ scopesVisible: ["Bool", "debugger.scopes-visible"],
+ threadsVisible: ["Bool", "debugger.threads-visible"],
+ breakpointsVisible: ["Bool", "debugger.breakpoints-visible"],
+ expressionsVisible: ["Bool", "debugger.expressions-visible"],
+ xhrBreakpointsVisible: ["Bool", "debugger.xhr-breakpoints-visible"],
+ eventListenersVisible: ["Bool", "debugger.event-listeners-visible"],
+ domMutationBreakpointsVisible: [
+ "Bool",
+ "debugger.dom-mutation-breakpoints-visible",
+ ],
+ startPanelCollapsed: ["Bool", "debugger.start-panel-collapsed"],
+ endPanelCollapsed: ["Bool", "debugger.end-panel-collapsed"],
+ startPanelSize: ["Int", "debugger.start-panel-size"],
+ endPanelSize: ["Int", "debugger.end-panel-size"],
+ frameworkGroupingOn: ["Bool", "debugger.ui.framework-grouping-on"],
+ pendingSelectedLocation: ["Json", "debugger.pending-selected-location", {}],
+ expressions: ["Json", "debugger.expressions", []],
+ searchOptions: ["Json", "debugger.search-options"],
+ debuggerPrefsSchemaVersion: ["Int", "debugger.prefs-schema-version"],
+ projectDirectoryRoot: ["Char", "debugger.project-directory-root", ""],
+ projectDirectoryRootName: [
+ "Char",
+ "debugger.project-directory-root-name",
+ "",
+ ],
+ skipPausing: ["Bool", "debugger.skip-pausing"],
+ mapScopes: ["Bool", "debugger.map-scopes-enabled"],
+ logActions: ["Bool", "debugger.log-actions"],
+ logEventBreakpoints: ["Bool", "debugger.log-event-breakpoints"],
+ indentSize: ["Int", "editor.tabsize"],
+ javascriptTracingLogMethod: [
+ "String",
+ "debugger.javascript-tracing-log-method",
+ ],
+ javascriptTracingValues: ["Bool", "debugger.javascript-tracing-values"],
+ javascriptTracingOnNextInteraction: [
+ "Bool",
+ "debugger.javascript-tracing-on-next-interaction",
+ ],
+ javascriptTracingOnNextLoad: [
+ "Bool",
+ "debugger.javascript-tracing-on-next-load",
+ ],
+ javascriptTracingFunctionReturn: [
+ "Bool",
+ "debugger.javascript-tracing-function-return",
+ ],
+ hideIgnoredSources: ["Bool", "debugger.hide-ignored-sources"],
+ sourceMapIgnoreListEnabled: [
+ "Bool",
+ "debugger.source-map-ignore-list-enabled",
+ ],
+});
+
+// The pref may not be defined. Defaulting to null isn't viable (cursor never blinks).
+// Can't use CodeMirror.defaults here because it's loaded later.
+// Hardcode the fallback value to that of CodeMirror.defaults.cursorBlinkRate.
+prefs.cursorBlinkRate = Services.prefs.getIntPref("ui.caretBlinkTime", 530);
+
+export const features = new PrefsHelper("devtools.debugger.features", {
+ wasm: ["Bool", "wasm"],
+ outline: ["Bool", "outline"],
+ codeFolding: ["Bool", "code-folding"],
+ autocompleteExpression: ["Bool", "autocomplete-expressions"],
+ mapExpressionBindings: ["Bool", "map-expression-bindings"],
+ mapAwaitExpression: ["Bool", "map-await-expression"],
+ logPoints: ["Bool", "log-points"],
+ inlinePreview: ["Bool", "inline-preview"],
+ windowlessServiceWorkers: ["Bool", "windowless-service-workers"],
+ javascriptTracing: ["Bool", "javascript-tracing"],
+ codemirrorNext: ["Bool", "codemirror-next"],
+});
+
+// Import the asyncStore already spawned by the TargetMixin class
+const ThreadUtils = require("resource://devtools/client/shared/thread-utils.js");
+export const asyncStore = ThreadUtils.asyncStore;
+
+export function resetSchemaVersion() {
+ prefs.debuggerPrefsSchemaVersion = prefsSchemaVersion;
+}
+
+export function verifyPrefSchema() {
+ if (prefs.debuggerPrefsSchemaVersion < prefsSchemaVersion) {
+ asyncStore.pendingBreakpoints = {};
+ asyncStore.tabs = [];
+ asyncStore.xhrBreakpoints = [];
+ asyncStore.eventListenerBreakpoints = undefined;
+ asyncStore.blackboxedRanges = {};
+ prefs.debuggerPrefsSchemaVersion = prefsSchemaVersion;
+ }
+}
diff --git a/devtools/client/debugger/src/utils/preview.js b/devtools/client/debugger/src/utils/preview.js
new file mode 100644
index 0000000000..48b9d2bc98
--- /dev/null
+++ b/devtools/client/debugger/src/utils/preview.js
@@ -0,0 +1,7 @@
+/* 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 isConsole(expression) {
+ return /^console/.test(expression);
+}
diff --git a/devtools/client/debugger/src/utils/quick-open.js b/devtools/client/debugger/src/utils/quick-open.js
new file mode 100644
index 0000000000..e2624559bc
--- /dev/null
+++ b/devtools/client/debugger/src/utils/quick-open.js
@@ -0,0 +1,113 @@
+/* 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 { endTruncateStr } from "./utils";
+import {
+ getFilename,
+ getSourceClassnames,
+ getSourceQueryString,
+ getRelativeUrl,
+} from "./source";
+
+export const MODIFIERS = {
+ "@": "functions",
+ "#": "variables",
+ ":": "goto",
+ "?": "shortcuts",
+};
+
+export function parseQuickOpenQuery(query) {
+ const startsWithModifier =
+ query[0] === "@" ||
+ query[0] === "#" ||
+ query[0] === ":" ||
+ query[0] === "?";
+
+ if (startsWithModifier) {
+ const modifier = query[0];
+ return MODIFIERS[modifier];
+ }
+
+ const isGotoSource = query.includes(":", 1);
+
+ if (isGotoSource) {
+ return "gotoSource";
+ }
+
+ return "sources";
+}
+
+export function parseLineColumn(query) {
+ const [, line, column] = query.split(":");
+ const lineNumber = parseInt(line, 10);
+ const columnNumber = parseInt(column, 10);
+ if (isNaN(lineNumber)) {
+ return null;
+ }
+ if (isNaN(columnNumber)) {
+ return { line: lineNumber };
+ }
+ // columnNumber here is the user input value which is 1-based.
+ // Whereas in location objects, line is 1-based, and column is 0-based.
+ return {
+ line: lineNumber,
+ column: columnNumber - 1,
+ };
+}
+
+export function formatSourceForList(
+ source,
+ hasTabOpened,
+ isBlackBoxed,
+ projectDirectoryRoot
+) {
+ const title = getFilename(source);
+ const relativeUrlWithQuery = `${getRelativeUrl(
+ source,
+ projectDirectoryRoot
+ )}${getSourceQueryString(source) || ""}`;
+ const subtitle = endTruncateStr(relativeUrlWithQuery, 100);
+ const value = relativeUrlWithQuery;
+ return {
+ value,
+ title,
+ subtitle,
+ icon: hasTabOpened
+ ? "tab result-item-icon"
+ : `result-item-icon ${getSourceClassnames(source, null, isBlackBoxed)}`,
+ id: source.id,
+ url: source.url,
+ source,
+ };
+}
+
+export function formatSymbol(symbol) {
+ return {
+ id: `${symbol.name}:${symbol.location.start.line}`,
+ title: symbol.name,
+ subtitle: `${symbol.location.start.line}`,
+ value: symbol.name,
+ location: symbol.location,
+ };
+}
+
+export function formatShortcutResults() {
+ return [
+ {
+ value: L10N.getStr("symbolSearch.search.functionsPlaceholder.title"),
+ title: `@ ${L10N.getStr("symbolSearch.search.functionsPlaceholder")}`,
+ id: "@",
+ },
+ {
+ value: L10N.getStr("symbolSearch.search.variablesPlaceholder.title"),
+ title: `# ${L10N.getStr("symbolSearch.search.variablesPlaceholder")}`,
+ id: "#",
+ },
+ {
+ value: L10N.getStr("gotoLineModal.title"),
+ title: `: ${L10N.getStr("gotoLineModal.placeholder")}`,
+ id: ":",
+ },
+ ];
+}
diff --git a/devtools/client/debugger/src/utils/result-list.js b/devtools/client/debugger/src/utils/result-list.js
new file mode 100644
index 0000000000..c8fe97ade6
--- /dev/null
+++ b/devtools/client/debugger/src/utils/result-list.js
@@ -0,0 +1,26 @@
+/* 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 scrollList(resultList, index) {
+ if (!resultList.hasOwnProperty(index)) {
+ return;
+ }
+
+ const resultEl = resultList[index];
+
+ const scroll = () => {
+ // Avoid expensive DOM computations involved in scrollIntoView
+ // https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web/
+ requestAnimationFrame(() => {
+ setTimeout(() => {
+ if (!resultEl.scrollIntoView) {
+ return;
+ }
+ resultEl.scrollIntoView({ block: "nearest", behavior: "auto" });
+ });
+ });
+ };
+
+ scroll();
+}
diff --git a/devtools/client/debugger/src/utils/selected-location.js b/devtools/client/debugger/src/utils/selected-location.js
new file mode 100644
index 0000000000..628186ff22
--- /dev/null
+++ b/devtools/client/debugger/src/utils/selected-location.js
@@ -0,0 +1,15 @@
+/* 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 getSelectedLocation(mappedLocation, context) {
+ if (!context) {
+ return mappedLocation.location;
+ }
+
+ // `context` may be a location or directly a source object.
+ const source = context.source || context;
+ return source.isOriginal
+ ? mappedLocation.location
+ : mappedLocation.generatedLocation;
+}
diff --git a/devtools/client/debugger/src/utils/shallow-equal.js b/devtools/client/debugger/src/utils/shallow-equal.js
new file mode 100644
index 0000000000..f75430f476
--- /dev/null
+++ b/devtools/client/debugger/src/utils/shallow-equal.js
@@ -0,0 +1,51 @@
+/* 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/>. */
+
+/**
+ * Shallow equal will consider equal:
+ * - exact same values (strict '===' equality)
+ * - distinct array instances having the exact same values in them (same number and strict equality).
+ * - distinct object instances having the exact same attributes and values.
+ *
+ * It will typically consider different array and object whose values
+ * aren't strictly equal. You may consider using "deep equality" checks for this scenario.
+ */
+export function shallowEqual(value, other) {
+ if (value === other) {
+ return true;
+ }
+
+ if (Array.isArray(value) && Array.isArray(other)) {
+ return arrayShallowEqual(value, other);
+ }
+
+ if (isObject(value) && isObject(other)) {
+ return objectShallowEqual(value, other);
+ }
+
+ return false;
+}
+
+export function arrayShallowEqual(value, other) {
+ // Redo this check in case we are called directly from the selectors.
+ if (value === other) {
+ return true;
+ }
+ return value.length === other.length && value.every((k, i) => k === other[i]);
+}
+
+function objectShallowEqual(value, other) {
+ const existingKeys = Object.keys(other);
+ const keys = Object.keys(value);
+
+ return (
+ keys.length === existingKeys.length &&
+ keys.every((k, i) => k === existingKeys[i]) &&
+ keys.every(k => value[k] === other[k])
+ );
+}
+
+function isObject(value) {
+ return typeof value === "object" && !!value;
+}
diff --git a/devtools/client/debugger/src/utils/source-maps.js b/devtools/client/debugger/src/utils/source-maps.js
new file mode 100644
index 0000000000..7a77639522
--- /dev/null
+++ b/devtools/client/debugger/src/utils/source-maps.js
@@ -0,0 +1,122 @@
+/* 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 {
+ debuggerToSourceMapLocation,
+ sourceMapToDebuggerLocation,
+} from "./location";
+import { waitForSourceToBeRegisteredInStore } from "../client/firefox/create";
+
+/**
+ * For any location, return the matching generated location.
+ * If this is already a generated location, returns the same location.
+ *
+ * In additional to `SourceMapLoader.getGeneratedLocation`,
+ * this asserts that the related source is still registered in the reducer current state.
+ *
+ * @param {Object} location
+ * @param {Object} thunkArgs
+ * Redux action thunk arguments
+ * @param {Object}
+ * The matching generated location.
+ */
+export async function getGeneratedLocation(location, thunkArgs) {
+ if (!location.source.isOriginal) {
+ return location;
+ }
+
+ const { sourceMapLoader, getState } = thunkArgs;
+ const generatedLocation = await sourceMapLoader.getGeneratedLocation(
+ debuggerToSourceMapLocation(location)
+ );
+ if (!generatedLocation) {
+ return location;
+ }
+
+ return sourceMapToDebuggerLocation(getState(), generatedLocation);
+}
+
+/**
+ * For any location, return the matching original location.
+ * If this is already an original location, returns the same location.
+ *
+ * In additional to `SourceMapLoader.getOriginalLocation`,
+ * this automatically fetches the original source object in order to build
+ * the original location object.
+ *
+ * @param {Object} location
+ * @param {Object} thunkArgs
+ * Redux action thunk arguments
+ * @param {Object} options
+ * @param {boolean} options.waitForSource
+ * Default to false. If true is passed, this function will
+ * ensure waiting, possibly asynchronously for the related original source
+ * to be registered in the redux store.
+ * @param {boolean} options.looseSearch
+ * Default to false. If true, this won't query an exact mapping,
+ * but will also lookup for a loose match at the first column and next lines.
+ *
+ * @param {Object}
+ * The matching original location.
+ */
+export async function getOriginalLocation(
+ location,
+ thunkArgs,
+ { waitForSource = false, looseSearch = false } = {}
+) {
+ if (location.source.isOriginal) {
+ return location;
+ }
+ const { getState, sourceMapLoader } = thunkArgs;
+ const originalLocation = await sourceMapLoader.getOriginalLocation(
+ debuggerToSourceMapLocation(location),
+ { looseSearch }
+ );
+ if (!originalLocation) {
+ return location;
+ }
+
+ // When we are mapping frames while being paused,
+ // the original source may not be registered yet in the reducer.
+ if (waitForSource) {
+ await waitForSourceToBeRegisteredInStore(originalLocation.sourceId);
+ }
+
+ return sourceMapToDebuggerLocation(getState(), originalLocation);
+}
+
+export async function getMappedLocation(location, thunkArgs) {
+ if (location.source.isOriginal) {
+ const generatedLocation = await getGeneratedLocation(location, thunkArgs);
+ return { location, generatedLocation };
+ }
+
+ const generatedLocation = location;
+ const originalLocation = await getOriginalLocation(
+ generatedLocation,
+ thunkArgs
+ );
+
+ return { location: originalLocation, generatedLocation };
+}
+
+/**
+ * Gets the "mapped location".
+ *
+ * If the passed location is on a generated source, it gets the
+ * related location in the original source.
+ * If the passed location is on an original source, it gets the
+ * related location in the generated source.
+ */
+export async function getRelatedMapLocation(location, thunkArgs) {
+ if (!location.source) {
+ return location;
+ }
+
+ if (location.source.isOriginal) {
+ return getGeneratedLocation(location, thunkArgs);
+ }
+
+ return getOriginalLocation(location, thunkArgs);
+}
diff --git a/devtools/client/debugger/src/utils/source-queue.js b/devtools/client/debugger/src/utils/source-queue.js
new file mode 100644
index 0000000000..3b11b0616d
--- /dev/null
+++ b/devtools/client/debugger/src/utils/source-queue.js
@@ -0,0 +1,40 @@
+/* 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/>. */
+
+const { throttle } = require("resource://devtools/shared/throttle.js");
+
+// This SourceQueue module is now only used for source mapped sources
+let newOriginalQueuedSources;
+let queuedOriginalSources;
+let currentWork;
+
+async function dispatchNewSources() {
+ const sources = queuedOriginalSources;
+ if (!sources.length) {
+ return;
+ }
+ queuedOriginalSources = [];
+ currentWork = await newOriginalQueuedSources(sources);
+}
+
+const queue = throttle(dispatchNewSources, 100);
+
+export default {
+ initialize: actions => {
+ newOriginalQueuedSources = actions.newOriginalSources;
+ queuedOriginalSources = [];
+ },
+ queueOriginalSources: sources => {
+ if (sources.length) {
+ queuedOriginalSources.push(...sources);
+ queue();
+ }
+ },
+
+ flush: () => Promise.all([queue.flush(), currentWork]),
+ clear: () => {
+ queuedOriginalSources = [];
+ queue.cancel();
+ },
+};
diff --git a/devtools/client/debugger/src/utils/source.js b/devtools/client/debugger/src/utils/source.js
new file mode 100644
index 0000000000..31920453eb
--- /dev/null
+++ b/devtools/client/debugger/src/utils/source.js
@@ -0,0 +1,534 @@
+/* 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/>. */
+
+/**
+ * Utils for working with Source URLs
+ * @module utils/source
+ */
+
+const {
+ getUnicodeUrl,
+} = require("resource://devtools/client/shared/unicode-url.js");
+const {
+ micromatch,
+} = require("resource://devtools/client/shared/vendor/micromatch/micromatch.js");
+
+import { getRelativePath } from "../utils/sources-tree/utils";
+import { endTruncateStr } from "./utils";
+import { truncateMiddleText } from "../utils/text";
+import { parse as parseURL } from "../utils/url";
+import { memoizeLast } from "../utils/memoizeLast";
+import { renderWasmText } from "./wasm";
+import { toEditorLine } from "./editor/index";
+export { isMinified } from "./isMinified";
+
+import { isFulfilled } from "./async-value";
+
+export const sourceTypes = {
+ coffee: "coffeescript",
+ js: "javascript",
+ jsx: "react",
+ ts: "typescript",
+ tsx: "typescript",
+ vue: "vue",
+};
+
+export const javascriptLikeExtensions = new Set(["marko", "es6", "vue", "jsm"]);
+
+function getPath(source) {
+ const { path } = source.displayURL;
+ let lastIndex = path.lastIndexOf("/");
+ let nextToLastIndex = path.lastIndexOf("/", lastIndex - 1);
+
+ const result = [];
+ do {
+ result.push(path.slice(nextToLastIndex + 1, lastIndex));
+ lastIndex = nextToLastIndex;
+ nextToLastIndex = path.lastIndexOf("/", lastIndex - 1);
+ } while (lastIndex !== nextToLastIndex);
+
+ result.push("");
+
+ return result;
+}
+
+export function shouldBlackbox(source) {
+ if (!source) {
+ return false;
+ }
+
+ if (!source.url) {
+ return false;
+ }
+
+ return true;
+}
+
+/**
+ * Checks if the frame is within a line ranges which are blackboxed
+ * in the source.
+ *
+ * @param {Object} frame
+ * The current frame
+ * @param {Object} blackboxedRanges
+ * The currently blackboxedRanges for all the sources.
+ * @param {Boolean} isFrameBlackBoxed
+ * If the frame is within the blackboxed range
+ * or not.
+ */
+export function isFrameBlackBoxed(frame, blackboxedRanges) {
+ const { source } = frame.location;
+ return (
+ !!blackboxedRanges[source.url] &&
+ (!blackboxedRanges[source.url].length ||
+ !!findBlackBoxRange(source, blackboxedRanges, {
+ start: frame.location.line,
+ end: frame.location.line,
+ }))
+ );
+}
+
+/**
+ * Checks if a blackbox range exist for the line range.
+ * That is if any start and end lines overlap any of the
+ * blackbox ranges
+ *
+ * @param {Object} source
+ * The current selected source
+ * @param {Object} blackboxedRanges
+ * The store of blackboxedRanges
+ * @param {Object} lineRange
+ * The start/end line range `{ start: <Number>, end: <Number> }`
+ * @return {Object} blackboxRange
+ * The first matching blackbox range that all or part of the
+ * specified lineRange sits within.
+ */
+export function findBlackBoxRange(source, blackboxedRanges, lineRange) {
+ const ranges = blackboxedRanges[source.url];
+ if (!ranges || !ranges.length) {
+ return null;
+ }
+
+ return ranges.find(
+ range =>
+ (lineRange.start >= range.start.line &&
+ lineRange.start <= range.end.line) ||
+ (lineRange.end >= range.start.line && lineRange.end <= range.end.line)
+ );
+}
+
+/**
+ * Checks if a source line is blackboxed
+ * @param {Array} ranges - Line ranges that are blackboxed
+ * @param {Number} line
+ * @param {Boolean} isSourceOnIgnoreList - is the line in a source that is on
+ * the sourcemap ignore lists then the line is blackboxed.
+ * @returns boolean
+ */
+export function isLineBlackboxed(ranges, line, isSourceOnIgnoreList) {
+ if (isSourceOnIgnoreList) {
+ return true;
+ }
+
+ if (!ranges) {
+ return false;
+ }
+ // If the whole source is ignored , then the line is
+ // ignored.
+ if (!ranges.length) {
+ return true;
+ }
+ return !!ranges.find(
+ range => line >= range.start.line && line <= range.end.line
+ );
+}
+
+/**
+ * Returns true if the specified url and/or content type are specific to
+ * javascript files.
+ *
+ * @return boolean
+ * True if the source is likely javascript.
+ *
+ * @memberof utils/source
+ * @static
+ */
+export function isJavaScript(source, content) {
+ const extension = source.displayURL.fileExtension;
+ const contentType = content.type === "wasm" ? null : content.contentType;
+ return (
+ javascriptLikeExtensions.has(extension) ||
+ !!(contentType && contentType.includes("javascript"))
+ );
+}
+
+/**
+ * @memberof utils/source
+ * @static
+ */
+export function isPretty(source) {
+ return isPrettyURL(source.url);
+}
+
+export function isPrettyURL(url) {
+ return url ? url.endsWith(":formatted") : false;
+}
+
+/**
+ * @memberof utils/source
+ * @static
+ */
+export function getPrettySourceURL(url) {
+ if (!url) {
+ url = "";
+ }
+ return `${url}:formatted`;
+}
+
+/**
+ * @memberof utils/source
+ * @static
+ */
+export function getRawSourceURL(url) {
+ return url && url.endsWith(":formatted")
+ ? url.slice(0, -":formatted".length)
+ : url;
+}
+
+function resolveFileURL(
+ url,
+ transformUrl = initialUrl => initialUrl,
+ truncate = true
+) {
+ url = getRawSourceURL(url || "");
+ const name = transformUrl(url);
+ if (!truncate) {
+ return name;
+ }
+ return endTruncateStr(name, 50);
+}
+
+export function getFormattedSourceId(id) {
+ return id.substring(id.lastIndexOf("/") + 1);
+}
+
+/**
+ * Gets a readable filename from a source URL for display purposes.
+ * If the source does not have a URL, the source ID will be returned instead.
+ *
+ * @memberof utils/source
+ * @static
+ */
+export function getFilename(
+ source,
+ rawSourceURL = getRawSourceURL(source.url)
+) {
+ const { id } = source;
+ if (!rawSourceURL) {
+ return getFormattedSourceId(id);
+ }
+
+ const { filename } = source.displayURL;
+ return getRawSourceURL(filename);
+}
+
+/**
+ * Provides a middle-trunated filename
+ *
+ * @memberof utils/source
+ * @static
+ */
+export function getTruncatedFileName(source, querystring = "", length = 30) {
+ return truncateMiddleText(`${getFilename(source)}${querystring}`, length);
+}
+
+/* Gets path for files with same filename for editor tabs, breakpoints, etc.
+ * Pass the source, and list of other sources
+ *
+ * @memberof utils/source
+ * @static
+ */
+
+export function getDisplayPath(mySource, sources) {
+ const rawSourceURL = getRawSourceURL(mySource.url);
+ const filename = getFilename(mySource, rawSourceURL);
+
+ // Find sources that have the same filename, but different paths
+ // as the original source
+ const similarSources = sources.filter(source => {
+ const rawSource = getRawSourceURL(source.url);
+ return (
+ rawSourceURL != rawSource && filename == getFilename(source, rawSource)
+ );
+ });
+
+ if (!similarSources.length) {
+ return undefined;
+ }
+
+ // get an array of source path directories e.g. ['a/b/c.html'] => [['b', 'a']]
+ const paths = new Array(similarSources.length + 1);
+
+ paths[0] = getPath(mySource);
+ for (let i = 0; i < similarSources.length; ++i) {
+ paths[i + 1] = getPath(similarSources[i]);
+ }
+
+ // create an array of similar path directories and one dis-similar directory
+ // for example [`a/b/c.html`, `a1/b/c.html`] => ['b', 'a']
+ // where 'b' is the similar directory and 'a' is the dis-similar directory.
+ let displayPath = "";
+ for (let i = 0; i < paths[0].length; i++) {
+ let similar = false;
+ for (let k = 1; k < paths.length; ++k) {
+ if (paths[k][i] === paths[0][i]) {
+ similar = true;
+ break;
+ }
+ }
+
+ displayPath = paths[0][i] + (i !== 0 ? "/" : "") + displayPath;
+
+ if (!similar) {
+ break;
+ }
+ }
+
+ return displayPath;
+}
+
+/**
+ * Gets a readable source URL for display purposes.
+ * If the source does not have a URL, the source ID will be returned instead.
+ *
+ * @memberof utils/source
+ * @static
+ */
+export function getFileURL(source, truncate = true) {
+ const { url, id } = source;
+ if (!url) {
+ return getFormattedSourceId(id);
+ }
+
+ return resolveFileURL(url, getUnicodeUrl, truncate);
+}
+
+export function getSourcePath(url) {
+ if (!url) {
+ return "";
+ }
+
+ const { path, href } = parseURL(url);
+ // for URLs like "about:home" the path is null so we pass the full href
+ return path || href;
+}
+
+/**
+ * Returns amount of lines in the source. If source is a WebAssembly binary,
+ * the function returns amount of bytes.
+ */
+export function getSourceLineCount(content) {
+ if (content.type === "wasm") {
+ const { binary } = content.value;
+ return binary.length;
+ }
+
+ let count = 0;
+
+ for (let i = 0; i < content.value.length; ++i) {
+ if (content.value[i] === "\n") {
+ ++count;
+ }
+ }
+
+ return count + 1;
+}
+
+export function isInlineScript(source) {
+ return source.introductionType === "scriptElement";
+}
+
+function getNthLine(str, lineNum) {
+ let startIndex = -1;
+
+ let newLinesFound = 0;
+ while (newLinesFound < lineNum) {
+ const nextIndex = str.indexOf("\n", startIndex + 1);
+ if (nextIndex === -1) {
+ return null;
+ }
+ startIndex = nextIndex;
+ newLinesFound++;
+ }
+ const endIndex = str.indexOf("\n", startIndex + 1);
+ if (endIndex === -1) {
+ return str.slice(startIndex + 1);
+ }
+
+ return str.slice(startIndex + 1, endIndex);
+}
+
+export const getLineText = memoizeLast((sourceId, asyncContent, line) => {
+ if (!asyncContent || !isFulfilled(asyncContent)) {
+ return "";
+ }
+
+ const content = asyncContent.value;
+
+ if (content.type === "wasm") {
+ const editorLine = toEditorLine(sourceId, line);
+ const lines = renderWasmText(sourceId, content);
+ return lines[editorLine] || "";
+ }
+
+ const lineText = getNthLine(content.value, line - 1);
+ return lineText || "";
+});
+
+export function getTextAtPosition(sourceId, asyncContent, location) {
+ const { column, line = 0 } = location;
+
+ const lineText = getLineText(sourceId, asyncContent, line);
+ return lineText.slice(column, column + 100).trim();
+}
+
+/**
+ * Compute the CSS classname string to use for the icon of a given source.
+ *
+ * @param {Object} source
+ * The reducer source object.
+ * @param {Object} symbols
+ * The reducer symbol object for the given source.
+ * @param {Boolean} isBlackBoxed
+ * To be set to true, when the given source is blackboxed.
+ * @param {Boolean} hasPrettyTab
+ * To be set to true, if the given source isn't the pretty printed one,
+ * but another tab for that source is opened pretty printed.
+ * @return String
+ * The classname to use.
+ */
+export function getSourceClassnames(
+ source,
+ symbols,
+ isBlackBoxed,
+ hasPrettyTab = false
+) {
+ // Conditionals should be ordered by priority of icon!
+ const defaultClassName = "file";
+
+ if (!source || !source.url) {
+ return defaultClassName;
+ }
+
+ // In the SourceTree, we don't show the pretty printed sources,
+ // but still want to show the pretty print icon when a pretty printed tab
+ // for the current source is opened.
+ if (isPretty(source) || hasPrettyTab) {
+ return "prettyPrint";
+ }
+
+ if (isBlackBoxed) {
+ return "blackBox";
+ }
+
+ if (symbols && symbols.framework) {
+ return symbols.framework.toLowerCase();
+ }
+
+ if (isUrlExtension(source.url)) {
+ return "extension";
+ }
+
+ return sourceTypes[source.displayURL.fileExtension] || defaultClassName;
+}
+
+export function getRelativeUrl(source, root) {
+ const { group, path } = source.displayURL;
+ if (!root) {
+ return path;
+ }
+
+ // + 1 removes the leading "/"
+ const url = group + path;
+ return url.slice(url.indexOf(root) + root.length + 1);
+}
+
+/**
+ * source.url doesn't include thread actor ID, so before calling underRoot(), the thread actor ID
+ * must be removed from the root, which this function handles.
+ * @param {string} root The root url to be cleaned
+ * @param {Set<Thread>} threads The list of threads
+ * @returns {string} The root url with thread actor IDs removed
+ */
+export function removeThreadActorId(root, threads) {
+ threads.forEach(thread => {
+ if (root.includes(thread.actor)) {
+ root = root.slice(thread.actor.length + 1);
+ }
+ });
+ return root;
+}
+
+/**
+ * Checks if the source is descendant of the root identified by the
+ * root url specified. The root might likely be projectDirectoryRoot which
+ * is a defined by a pref that allows users restrict the source tree to
+ * a subset of sources.
+ *
+ * @param {Object} source
+ * The source object
+ * @param {String} rootUrlWithoutThreadActor
+ * The url for the root node, without the thread actor ID. This can be obtained
+ * by calling removeThreadActorId()
+ */
+export function isDescendantOfRoot(source, rootUrlWithoutThreadActor) {
+ if (source.url && source.url.includes("chrome://")) {
+ const { group, path } = source.displayURL;
+ return (group + path).includes(rootUrlWithoutThreadActor);
+ }
+
+ return !!source.url && source.url.includes(rootUrlWithoutThreadActor);
+}
+
+export function getSourceQueryString(source) {
+ if (!source) {
+ return "";
+ }
+
+ return parseURL(getRawSourceURL(source.url)).search;
+}
+
+export function isUrlExtension(url) {
+ return url.includes("moz-extension:") || url.includes("chrome-extension");
+}
+
+/**
+* Checks that source url matches one of the glob patterns
+*
+* @param {Object} source
+* @param {String} excludePatterns
+ String of comma-seperated glob patterns
+* @return {return} Boolean value specifies if the string matches any
+ of the patterns.
+*/
+export function matchesGlobPatterns(source, excludePatterns) {
+ if (!excludePatterns) {
+ return false;
+ }
+ const patterns = excludePatterns
+ .split(",")
+ .map(pattern => pattern.trim())
+ .filter(pattern => pattern !== "");
+
+ if (!patterns.length) {
+ return false;
+ }
+
+ return micromatch.contains(
+ // Makes sure we format the url or id exactly the way its displayed in the search ui,
+ // as user wil usually create glob patterns based on what is seen in the ui.
+ source.url ? getRelativePath(source.url) : getFormattedSourceId(source.id),
+ patterns
+ );
+}
diff --git a/devtools/client/debugger/src/utils/sources-tree/getURL.js b/devtools/client/debugger/src/utils/sources-tree/getURL.js
new file mode 100644
index 0000000000..c01fce5f23
--- /dev/null
+++ b/devtools/client/debugger/src/utils/sources-tree/getURL.js
@@ -0,0 +1,180 @@
+/* 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 { parse } from "../url";
+
+const {
+ getUnicodeHostname,
+ getUnicodeUrlPath,
+} = require("resource://devtools/client/shared/unicode-url.js");
+
+export function getFilenameFromPath(pathname) {
+ let filename = "";
+ if (pathname) {
+ filename = pathname.substring(pathname.lastIndexOf("/") + 1);
+ // This file does not have a name. Default should be (index).
+ if (filename == "") {
+ filename = "(index)";
+ } else if (filename == ":formatted") {
+ filename = "(index:formatted)";
+ }
+ }
+ return filename;
+}
+
+function getFileExtension(path) {
+ if (!path) {
+ return "";
+ }
+
+ const lastIndex = path.lastIndexOf(".");
+ return lastIndex !== -1 ? path.slice(lastIndex + 1).toLowerCase() : "";
+}
+
+const NoDomain = "(no domain)";
+const def = {
+ path: "",
+ search: "",
+ group: "",
+ filename: "",
+ fileExtension: "",
+};
+
+/**
+ * Compute the URL which may be displayed in the Source Tree.
+ *
+ * @param {String} url
+ * The source absolute URL as a string
+ * @param {String} extensionName
+ * Optional, but mandatory when passing a moz-extension URL.
+ * Name of the extension serving this moz-extension source.
+ * @return URL Object
+ * A URL object to represent this source.
+ *
+ * Note that this isn't the standard URL object.
+ * This is augmented with custom properties like:
+ * - `group`, which is mostly the host of the source's URL.
+ * This is used to sort sources in the Source tree.
+ * - `fileExtension`, lowercased file extension of the source
+ * (if any extension is available)
+ * - `path` and `pathname` have some special behavior.
+ * See `parse` implementation.
+ */
+export function getDisplayURL(url, extensionName = null) {
+ if (!url) {
+ return def;
+ }
+
+ const { pathname, search, protocol, host } = parse(url);
+ const filename = getUnicodeUrlPath(getFilenameFromPath(pathname));
+
+ switch (protocol) {
+ case "javascript:":
+ // Ignore `javascript:` URLs for now
+ return def;
+
+ case "moz-extension:":
+ return {
+ ...def,
+ path: pathname,
+ search,
+ filename,
+ fileExtension: getFileExtension(pathname),
+ // For moz-extension, we replace the uuid by the extension name
+ // that we receive from the SourceActor.extensionName attribute.
+ // `extensionName` might be null for content script of disabled add-ons.
+ group: extensionName || `${protocol}//${host}`,
+ };
+ case "resource:":
+ return {
+ ...def,
+ path: pathname,
+ search,
+ filename,
+ fileExtension: getFileExtension(pathname),
+ group: `${protocol}//${host || ""}`,
+ };
+ case "webpack:":
+ return {
+ ...def,
+ path: pathname,
+ search,
+ filename,
+ fileExtension: getFileExtension(pathname),
+ group: `Webpack`,
+ };
+ case "ng:":
+ return {
+ ...def,
+ path: pathname,
+ search,
+ filename,
+ fileExtension: getFileExtension(pathname),
+ group: `Angular`,
+ };
+ case "about:":
+ // An about page is a special case
+ return {
+ ...def,
+ path: "/",
+ search,
+ filename,
+ fileExtension: getFileExtension("/"),
+ group: url,
+ };
+
+ case "data:":
+ return {
+ ...def,
+ path: "/",
+ search,
+ filename: url,
+ fileExtension: getFileExtension("/"),
+ group: NoDomain,
+ };
+
+ case "":
+ if (pathname && pathname.startsWith("/")) {
+ // use file protocol for a URL like "/foo/bar.js"
+ return {
+ ...def,
+ path: pathname,
+ search,
+ filename,
+ fileExtension: getFileExtension(pathname),
+ group: "file://",
+ };
+ } else if (!host) {
+ return {
+ ...def,
+ path: pathname,
+ search,
+ filename,
+ fileExtension: getFileExtension(pathname),
+ group: "",
+ };
+ }
+ break;
+
+ case "http:":
+ case "https:":
+ return {
+ ...def,
+ path: pathname,
+ search,
+ filename,
+ fileExtension: getFileExtension(pathname),
+ group: getUnicodeHostname(host),
+ };
+ }
+
+ return {
+ ...def,
+ path: pathname,
+ search,
+ fileExtension: getFileExtension(pathname),
+ filename,
+ group: protocol ? `${protocol}//` : "",
+ };
+}
diff --git a/devtools/client/debugger/src/utils/sources-tree/moz.build b/devtools/client/debugger/src/utils/sources-tree/moz.build
new file mode 100644
index 0000000000..400c0f0d1a
--- /dev/null
+++ b/devtools/client/debugger/src/utils/sources-tree/moz.build
@@ -0,0 +1,9 @@
+# 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/.
+
+CompiledModules(
+ "getURL.js",
+ "utils.js",
+)
diff --git a/devtools/client/debugger/src/utils/sources-tree/tests/getUrl.spec.js b/devtools/client/debugger/src/utils/sources-tree/tests/getUrl.spec.js
new file mode 100644
index 0000000000..51919ffc4e
--- /dev/null
+++ b/devtools/client/debugger/src/utils/sources-tree/tests/getUrl.spec.js
@@ -0,0 +1,50 @@
+/* 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 { getDisplayURL } from "../getURL";
+
+describe("getUrl", () => {
+ it("handles normal url with http and https for filename", function () {
+ const urlObject = getDisplayURL("https://a/b.js");
+ expect(urlObject.filename).toBe("b.js");
+
+ const urlObject2 = getDisplayURL("http://a/b.js");
+ expect(urlObject2.filename).toBe("b.js");
+ });
+
+ it("handles url with querystring for filename", function () {
+ const urlObject = getDisplayURL("https://a/b.js?key=randomKey");
+ expect(urlObject.filename).toBe("b.js");
+ });
+
+ it("handles url with '#' for filename", function () {
+ const urlObject = getDisplayURL("https://a/b.js#specialSection");
+ expect(urlObject.filename).toBe("b.js");
+ });
+
+ it("handles url with no file extension for filename", function () {
+ const urlObject = getDisplayURL("https://a/c");
+ expect(urlObject.filename).toBe("c");
+ });
+
+ it("handles url with no name for filename", function () {
+ const urlObject = getDisplayURL("https://a/");
+ expect(urlObject.filename).toBe("(index)");
+ });
+
+ it("separates resources by protocol and host", () => {
+ const urlObject = getDisplayURL("moz-extension://xyz/123");
+ expect(urlObject.group).toBe("moz-extension://xyz");
+ });
+
+ it("creates a group name for webpack", () => {
+ const urlObject = getDisplayURL("webpack:///src/component.jsx");
+ expect(urlObject.group).toBe("Webpack");
+ });
+
+ it("creates a group name for angular source", () => {
+ const urlObject = getDisplayURL("ng://src/component.jsx");
+ expect(urlObject.group).toBe("Angular");
+ });
+});
diff --git a/devtools/client/debugger/src/utils/sources-tree/utils.js b/devtools/client/debugger/src/utils/sources-tree/utils.js
new file mode 100644
index 0000000000..0a2f41752b
--- /dev/null
+++ b/devtools/client/debugger/src/utils/sources-tree/utils.js
@@ -0,0 +1,44 @@
+/* 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 { parse } from "../../utils/url";
+
+/**
+ * Get the relative path of the url
+ * Does not include any query parameters or fragment parts
+ *
+ * @param string url
+ * @returns string path
+ */
+export function getRelativePath(url) {
+ const { pathname } = parse(url);
+ if (!pathname) {
+ return url;
+ }
+ const index = pathname.indexOf("/");
+ if (index !== -1) {
+ const path = pathname.slice(index + 1);
+ // If the path is empty this is likely the index file.
+ // e.g http://foo.com/
+ if (path == "") {
+ return "(index)";
+ }
+ return path;
+ }
+ return "";
+}
+
+/**
+ *
+ * @param {String} name: Name (e.g. computed in SourcesTreeItem renderItemName),
+ * which might include URI search.
+ * @returns {String} result of `decodedURI(name)`, or name if it `name` is malformed.
+ */
+export function safeDecodeItemName(name) {
+ try {
+ return decodeURI(name);
+ } catch (e) {
+ return name;
+ }
+}
diff --git a/devtools/client/debugger/src/utils/tabs.js b/devtools/client/debugger/src/utils/tabs.js
new file mode 100644
index 0000000000..5f16b6ce63
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tabs.js
@@ -0,0 +1,121 @@
+/* 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/>. */
+
+/*
+ * Finds the hidden tabs by comparing the tabs' top offset.
+ * hidden tabs will have a great top offset.
+ *
+ * @param sourceTabs Array
+ * @param sourceTabEls HTMLCollection
+ *
+ * @returns Array
+ */
+
+export function getHiddenTabs(sourceTabs, sourceTabEls) {
+ sourceTabEls = [].slice.call(sourceTabEls);
+ function getTopOffset() {
+ const topOffsets = sourceTabEls.map(t => t.getBoundingClientRect().top);
+ return Math.min(...topOffsets);
+ }
+
+ function hasTopOffset(el) {
+ // adding 10px helps account for cases where the tab might be offset by
+ // styling such as selected tabs which don't have a border.
+ const tabTopOffset = getTopOffset();
+ return el.getBoundingClientRect().top > tabTopOffset + 10;
+ }
+
+ return sourceTabs.filter((tab, index) => {
+ const element = sourceTabEls[index];
+ return element && hasTopOffset(element);
+ });
+}
+
+export function getTabMenuItems() {
+ return {
+ closeTab: {
+ id: "node-menu-close-tab",
+ label: L10N.getStr("sourceTabs.closeTab"),
+ accesskey: L10N.getStr("sourceTabs.closeTab.accesskey"),
+ disabled: false,
+ },
+ closeOtherTabs: {
+ id: "node-menu-close-other-tabs",
+ label: L10N.getStr("sourceTabs.closeOtherTabs"),
+ accesskey: L10N.getStr("sourceTabs.closeOtherTabs.accesskey"),
+ disabled: false,
+ },
+ closeTabsToEnd: {
+ id: "node-menu-close-tabs-to-end",
+ label: L10N.getStr("sourceTabs.closeTabsToEnd"),
+ accesskey: L10N.getStr("sourceTabs.closeTabsToEnd.accesskey"),
+ disabled: false,
+ },
+ closeAllTabs: {
+ id: "node-menu-close-all-tabs",
+ label: L10N.getStr("sourceTabs.closeAllTabs"),
+ accesskey: L10N.getStr("sourceTabs.closeAllTabs.accesskey"),
+ disabled: false,
+ },
+ showSource: {
+ id: "node-menu-show-source",
+ label: L10N.getStr("sourceTabs.revealInTree"),
+ accesskey: L10N.getStr("sourceTabs.revealInTree.accesskey"),
+ disabled: false,
+ },
+ copySource: {
+ id: "node-menu-copy-source",
+ label: L10N.getStr("copySource.label"),
+ accesskey: L10N.getStr("copySource.accesskey"),
+ disabled: false,
+ },
+ copySourceUri2: {
+ id: "node-menu-copy-source-url",
+ label: L10N.getStr("copySourceUri2"),
+ accesskey: L10N.getStr("copySourceUri2.accesskey"),
+ disabled: false,
+ },
+ toggleBlackBox: {
+ id: "node-menu-blackbox",
+ label: L10N.getStr("ignoreContextItem.ignore"),
+ accesskey: L10N.getStr("ignoreContextItem.ignore.accesskey"),
+ disabled: false,
+ },
+ prettyPrint: {
+ id: "node-menu-pretty-print",
+ label: L10N.getStr("sourceTabs.prettyPrint"),
+ accesskey: L10N.getStr("sourceTabs.prettyPrint.accesskey"),
+ disabled: false,
+ },
+ };
+}
+
+/**
+ * Determines if a tab exists with the following properties
+ *
+ * @param {Object} tab
+ * @param {String} url
+ * @param {Boolean} isOriginal
+ */
+export function isSimilarTab(tab, url, isOriginal) {
+ return tab.url === url && tab.isOriginal === isOriginal;
+}
+
+/**
+ * This cleans up some tab info (source id and thread info),
+ * mostly for persiting to pref and for navigation or reload.
+ * This is neccesary because the source and thread are destroyed
+ * and re-created across navigations / reloads.
+ *
+ * @param {Array} tabs
+ */
+export function persistTabs(tabs) {
+ return [...tabs]
+ .filter(tab => tab.url)
+ .map(tab => ({
+ ...tab,
+ source: null,
+ sourceActor: null,
+ }));
+}
diff --git a/devtools/client/debugger/src/utils/task.js b/devtools/client/debugger/src/utils/task.js
new file mode 100644
index 0000000000..25663fdd16
--- /dev/null
+++ b/devtools/client/debugger/src/utils/task.js
@@ -0,0 +1,44 @@
+/* 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 object provides the public module functions.
+ */
+export const Task = {
+ // XXX: Not sure if this works in all cases...
+ async: function (task) {
+ return function () {
+ return Task.spawn(task, this, arguments);
+ };
+ },
+
+ /**
+ * Creates and starts a new task.
+ * @param task A generator function
+ * @return A promise, resolved when the task terminates
+ */
+ spawn: function (task, scope, args) {
+ return new Promise(function (resolve, reject) {
+ const iterator = task.apply(scope, args);
+
+ const callNext = lastValue => {
+ const iteration = iterator.next(lastValue);
+ Promise.resolve(iteration.value)
+ .then(value => {
+ if (iteration.done) {
+ resolve(value);
+ } else {
+ callNext(value);
+ }
+ })
+ .catch(error => {
+ reject(error);
+ iterator.throw(error);
+ });
+ };
+
+ callNext(undefined);
+ });
+ },
+};
diff --git a/devtools/client/debugger/src/utils/telemetry.js b/devtools/client/debugger/src/utils/telemetry.js
new file mode 100644
index 0000000000..0e0c8766bb
--- /dev/null
+++ b/devtools/client/debugger/src/utils/telemetry.js
@@ -0,0 +1,72 @@
+/* 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/>. */
+
+/**
+ * Usage:
+ *
+ * import { recordEvent } from "src/utils/telemetry";
+ *
+ * // Event without extra properties
+ * recordEvent("add_breakpoint");
+ *
+ * // Event with extra properties
+ * recordEvent("pause", {
+ * "reason": "debugger-statement",
+ * "collapsed_callstacks": 1
+ * });
+ *
+ * // If the properties are in multiple code paths and you can't send them all
+ * // in one go you will need to use the full telemetry API.
+ *
+ * const Telemetry = require("devtools/client/shared/telemetry");
+ *
+ * const telemetry = new Telemetry();
+ *
+ * // Prepare the event and define which properties to expect.
+ * //
+ * // NOTE: You CAN send properties before preparing the event.
+ * //
+ * telemetry.preparePendingEvent(this, "pause", "debugger", null, [
+ * "reason", "collapsed_callstacks"
+ * ]);
+ *
+ * // Elsewhere in another codepath send the reason property
+ * telemetry.addEventProperty(
+ * this, "pause", "debugger", null, "reason", "debugger-statement"
+ * );
+ *
+ * // Elsewhere in another codepath send the collapsed_callstacks property
+ * telemetry.addEventProperty(
+ * this, "pause", "debugger", null, "collapsed_callstacks", 1
+ * );
+ */
+
+import { isNode } from "./environment";
+
+let telemetry;
+
+if (isNode()) {
+ const Telemetry = require("resource://devtools/client/shared/telemetry.js");
+ telemetry = new Telemetry();
+}
+
+export function setToolboxTelemetry(toolboxTelemetry) {
+ telemetry = toolboxTelemetry;
+}
+
+/**
+ * @memberof utils/telemetry
+ * @static
+ */
+export function recordEvent(eventName, fields = {}) {
+ telemetry.recordEvent(eventName, "debugger", null, fields);
+
+ if (isNode()) {
+ const { events } = window.dbg._telemetry;
+ if (!events[eventName]) {
+ events[eventName] = [];
+ }
+ events[eventName].push(fields);
+ }
+}
diff --git a/devtools/client/debugger/src/utils/test-head.js b/devtools/client/debugger/src/utils/test-head.js
new file mode 100644
index 0000000000..c21f408b61
--- /dev/null
+++ b/devtools/client/debugger/src/utils/test-head.js
@@ -0,0 +1,283 @@
+/* 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/>. */
+
+/**
+ * Utils for Jest
+ * @module utils/test-head
+ */
+
+import { combineReducers } from "devtools/client/shared/vendor/redux";
+import reducers from "../reducers/index";
+import actions from "../actions/index";
+import * as selectors from "../selectors/index";
+import {
+ searchWorker,
+ prettyPrintWorker,
+ parserWorker,
+} from "../test/tests-setup";
+import configureStore from "../actions/utils/create-store";
+import sourceQueue from "../utils/source-queue";
+import { setupCreate } from "../client/firefox/create";
+import { createLocation } from "./location";
+
+// Import the internal module used by the source-map worker
+// as node doesn't have Web Worker support and require path mapping
+// doesn't work from nodejs worker thread and break mappings to devtools/ folder.
+import sourceMapLoader from "devtools/client/shared/source-map-loader/source-map";
+
+/**
+ * This file contains older interfaces used by tests that have not been
+ * converted to use test-mockup.js
+ */
+
+/**
+ * @memberof utils/test-head
+ * @static
+ */
+function createStore(client, initialState = {}, sourceMapLoaderMock) {
+ const store = configureStore({
+ log: false,
+ makeThunkArgs: args => {
+ return {
+ ...args,
+ client,
+ sourceMapLoader:
+ sourceMapLoaderMock !== undefined
+ ? sourceMapLoaderMock
+ : sourceMapLoader,
+ parserWorker,
+ prettyPrintWorker,
+ searchWorker,
+ };
+ },
+ })(combineReducers(reducers), initialState);
+ sourceQueue.clear();
+ sourceQueue.initialize({
+ newOriginalSources: sources =>
+ store.dispatch(actions.newOriginalSources(sources)),
+ });
+
+ store.thunkArgs = () => ({
+ dispatch: store.dispatch,
+ getState: store.getState,
+ client,
+ sourceMapLoader,
+ panel: {},
+ });
+
+ // Put the initial context in the store, for convenience to unit tests.
+ store.cx = selectors.getThreadContext(store.getState());
+
+ setupCreate({ store });
+
+ return store;
+}
+
+/**
+ * @memberof utils/test-head
+ * @static
+ */
+function commonLog(msg, data = {}) {
+ console.log(`[INFO] ${msg} ${JSON.stringify(data)}`);
+}
+
+function makeFrame({ id, sourceId, thread }, opts = {}) {
+ const source = createSourceObject(sourceId);
+ const sourceActor = {
+ id: `${sourceId}-actor`,
+ actor: `${sourceId}-actor`,
+ source: sourceId,
+ sourceObject: source,
+ };
+ const location = createLocation({ source, sourceActor, line: 4 });
+ return {
+ id,
+ scope: { bindings: { variables: {}, arguments: [] } },
+ location,
+ generatedLocation: location,
+ thread: thread || "FakeThread",
+ ...opts,
+ };
+}
+
+function createSourceObject(filename, props = {}) {
+ return {
+ id: filename,
+ url: makeSourceURL(filename),
+ isPrettyPrinted: false,
+ isExtension: false,
+ isOriginal: filename.includes("originalSource"),
+ displayURL: makeSourceURL(filename),
+ };
+}
+
+function makeSourceURL(filename) {
+ return `http://localhost:8000/examples/${filename}`;
+}
+
+function createMakeSource() {
+ const indicies = {};
+
+ return function (name, props = {}) {
+ const index = (indicies[name] | 0) + 1;
+ indicies[name] = index;
+
+ // Mock a SOURCE Resource, which happens to be the SourceActor's form
+ // with resourceType and targetFront additional attributes
+ return {
+ resourceType: "source",
+ // Mock the targetFront to support makeSourceId function
+ targetFront: {
+ isDestroyed() {
+ return false;
+ },
+ getCachedFront(typeName) {
+ return typeName == "thread" ? { actorID: "FakeThread" } : null;
+ },
+ },
+ // Allow to use custom ID's for reducer source objects
+ mockedJestID: name,
+ actor: `${name}-${index}-actor`,
+ url: `http://localhost:8000/examples/${name}`,
+ sourceMapBaseURL: props.sourceMapBaseURL || null,
+ sourceMapURL: props.sourceMapURL || null,
+ introductionType: props.introductionType || null,
+ extensionName: null,
+ };
+ };
+}
+
+/**
+ * @memberof utils/test-head
+ * @static
+ */
+let creator;
+beforeEach(() => {
+ creator = createMakeSource();
+});
+afterEach(() => {
+ creator = null;
+});
+function makeSource(name, props) {
+ if (!creator) {
+ throw new Error("makeSource() cannot be called outside of a test");
+ }
+
+ return creator(name, props);
+}
+
+function makeOriginalSource(source) {
+ return {
+ id: `${source.id}/originalSource`,
+ url: `${source.url}-original`,
+ sourceActor: {
+ id: `${source.id}-1-actor`,
+ thread: "FakeThread",
+ },
+ };
+}
+
+function makeFuncLocation(startLine, endLine) {
+ if (!endLine) {
+ endLine = startLine + 1;
+ }
+ return {
+ start: {
+ line: startLine,
+ },
+ end: {
+ line: endLine,
+ },
+ };
+}
+
+function makeSymbolDeclaration(name, start, end, klass) {
+ return {
+ id: `${name}:${start}`,
+ name,
+ location: makeFuncLocation(start, end),
+ klass,
+ };
+}
+
+/**
+ * @memberof utils/test-head
+ * @static
+ */
+function waitForState(store, predicate) {
+ return new Promise(resolve => {
+ let ret = predicate(store.getState());
+ if (ret) {
+ resolve(ret);
+ }
+
+ const unsubscribe = store.subscribe(() => {
+ ret = predicate(store.getState());
+ if (ret) {
+ unsubscribe();
+ // NOTE: memoizableAction adds an additional tick for validating context
+ setTimeout(() => resolve(ret));
+ }
+ });
+ });
+}
+
+function watchForState(store, predicate) {
+ let sawState = false;
+ const checkState = function () {
+ if (!sawState && predicate(store.getState())) {
+ sawState = true;
+ }
+ return sawState;
+ };
+
+ let unsubscribe;
+ if (!checkState()) {
+ unsubscribe = store.subscribe(() => {
+ if (checkState()) {
+ unsubscribe();
+ }
+ });
+ }
+
+ return function read() {
+ if (unsubscribe) {
+ unsubscribe();
+ }
+
+ return sawState;
+ };
+}
+
+function getTelemetryEvents(eventName) {
+ return window.dbg._telemetry.events[eventName] || [];
+}
+
+function waitATick(callback) {
+ return new Promise(resolve => {
+ setTimeout(() => {
+ callback();
+ resolve();
+ });
+ });
+}
+
+export {
+ actions,
+ selectors,
+ reducers,
+ createStore,
+ commonLog,
+ getTelemetryEvents,
+ makeFrame,
+ createSourceObject,
+ createMakeSource,
+ makeSourceURL,
+ makeSource,
+ makeOriginalSource,
+ makeSymbolDeclaration,
+ waitForState,
+ watchForState,
+ waitATick,
+};
diff --git a/devtools/client/debugger/src/utils/test-mockup.js b/devtools/client/debugger/src/utils/test-mockup.js
new file mode 100644
index 0000000000..521872b7cb
--- /dev/null
+++ b/devtools/client/debugger/src/utils/test-mockup.js
@@ -0,0 +1,268 @@
+/* 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 file is for use by unit tests for isolated debugger components that do
+ * not need to interact with the redux store. When these tests need to construct
+ * debugger objects, these interfaces should be used instead of plain object
+ * literals.
+ */
+
+import * as asyncValue from "./async-value";
+
+import { initialState } from "../reducers/index";
+
+import { getDisplayURL } from "./sources-tree/getURL";
+import { createLocation } from "./location";
+
+function makeMockSource(url = "url", id = "source", thread = "FakeThread") {
+ return {
+ id,
+ url,
+ displayURL: getDisplayURL(url),
+ thread,
+ isPrettyPrinted: false,
+ isWasm: false,
+ extensionName: null,
+ isExtension: false,
+ isOriginal: id.includes("originalSource"),
+ };
+}
+
+function makeMockDisplaySource(
+ url = "url",
+ id = "source",
+ thread = "FakeThread"
+) {
+ return makeMockSource(url, id, thread);
+}
+
+function makeMockSourceWithContent(
+ url,
+ id,
+ contentType = "text/javascript",
+ text = ""
+) {
+ const source = makeMockSource(url, id);
+
+ return {
+ ...source,
+ content: text
+ ? asyncValue.fulfilled({
+ type: "text",
+ value: text,
+ contentType,
+ })
+ : null,
+ };
+}
+
+function makeMockSourceAndContent(
+ url,
+ id,
+ contentType = "text/javascript",
+ text = ""
+) {
+ const source = makeMockSource(url, id);
+
+ return {
+ ...source,
+ content: {
+ type: "text",
+ value: text,
+ contentType,
+ },
+ };
+}
+
+function makeFullfilledMockSourceContent(
+ text = "",
+ contentType = "text/javascript"
+) {
+ return asyncValue.fulfilled({
+ type: "text",
+ value: text,
+ contentType,
+ });
+}
+
+function makeMockWasmSource() {
+ return {
+ id: "wasm-source-id",
+ url: "url",
+ displayURL: getDisplayURL("url"),
+ thread: "FakeThread",
+ isPrettyPrinted: false,
+ isWasm: true,
+ extensionName: null,
+ isExtension: false,
+ isOriginal: false,
+ };
+}
+
+function makeMockWasmSourceWithContent(text) {
+ const source = makeMockWasmSource();
+
+ return {
+ ...source,
+ content: asyncValue.fulfilled({
+ type: "wasm",
+ value: text,
+ }),
+ };
+}
+
+function makeMockScope(actor = "scope-actor", type = "block", parent = null) {
+ return {
+ actor,
+ parent,
+ bindings: {
+ arguments: [],
+ variables: {},
+ },
+ object: null,
+ function: null,
+ type,
+ scopeKind: "",
+ };
+}
+
+function mockScopeAddVariable(scope, name) {
+ if (!scope.bindings) {
+ throw new Error("no scope bindings");
+ }
+ scope.bindings.variables[name] = { value: null };
+}
+
+function makeMockBreakpoint(source = makeMockSource(), line = 1, column) {
+ const location = column ? { source, line, column } : { source, line };
+ return {
+ id: "breakpoint",
+ location,
+ generatedLocation: location,
+ disabled: false,
+ text: "text",
+ originalText: "text",
+ options: {},
+ };
+}
+
+function makeMockFrame(
+ id = "frame",
+ source = makeMockSource("url"),
+ scope = makeMockScope(),
+ line = 4,
+ displayName = `display-${id}`,
+ index = 0
+) {
+ const sourceActor = {
+ id: `${source.id}-actor`,
+ actor: `${source.id}-actor`,
+ source: source.id,
+ sourceObject: source,
+ };
+ const location = createLocation({ source, sourceActor, line });
+ return {
+ id,
+ thread: "FakeThread",
+ displayName,
+ location,
+ generatedLocation: location,
+ source,
+ scope,
+ this: {},
+ index,
+ asyncCause: null,
+ state: "on-stack",
+ type: "call",
+ };
+}
+
+function makeMockFrameWithURL(url) {
+ return makeMockFrame(undefined, makeMockSource(url));
+}
+
+function makeWhyNormal(frameReturnValue = undefined) {
+ if (frameReturnValue) {
+ return { type: "why-normal", frameFinished: { return: frameReturnValue } };
+ }
+ return { type: "why-normal" };
+}
+
+function makeWhyThrow(frameThrowValue) {
+ return { type: "why-throw", frameFinished: { throw: frameThrowValue } };
+}
+
+function makeMockExpression(value) {
+ return {
+ input: "input",
+ value,
+ from: "from",
+ updating: false,
+ };
+}
+
+// Mock contexts for use in tests that do not create a redux store.
+const mockcx = { navigateCounter: 0 };
+const mockthreadcx = {
+ navigateCounter: 0,
+ thread: "FakeThread",
+ pauseCounter: 0,
+ isPaused: false,
+};
+
+function makeMockThread(fields) {
+ return {
+ actor: "test",
+ url: "example.com",
+ type: "worker",
+ name: "test",
+ ...fields,
+ };
+}
+
+function makeMockState(state) {
+ return {
+ ...initialState(),
+ ...state,
+ };
+}
+
+function formatTree(tree, depth = 0, str = "") {
+ const whitespace = new Array(depth * 2).join(" ");
+
+ if (tree.type === "directory") {
+ str += `${whitespace} - ${tree.name} path=${tree.path} \n`;
+ tree.contents.forEach(t => {
+ str = formatTree(t, depth + 1, str);
+ });
+ } else {
+ str += `${whitespace} - ${tree.name} path=${tree.path} source_id=${tree.contents.id} \n`;
+ }
+
+ return str;
+}
+
+export {
+ makeMockDisplaySource,
+ makeMockSource,
+ makeMockSourceWithContent,
+ makeMockSourceAndContent,
+ makeMockWasmSource,
+ makeMockWasmSourceWithContent,
+ makeMockScope,
+ mockScopeAddVariable,
+ makeMockBreakpoint,
+ makeMockFrame,
+ makeMockFrameWithURL,
+ makeWhyNormal,
+ makeWhyThrow,
+ makeMockExpression,
+ mockcx,
+ mockthreadcx,
+ makeMockState,
+ makeMockThread,
+ makeFullfilledMockSourceContent,
+ formatTree,
+};
diff --git a/devtools/client/debugger/src/utils/tests/DevToolsUtils.spec.js b/devtools/client/debugger/src/utils/tests/DevToolsUtils.spec.js
new file mode 100644
index 0000000000..be405d8628
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/DevToolsUtils.spec.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/>. */
+
+import { reportException, executeSoon } from "../DevToolsUtils.js";
+
+describe("DevToolsUtils", () => {
+ describe("reportException", () => {
+ beforeEach(() => {
+ global.console = { error: jest.fn() };
+ });
+
+ it("calls console.error", () => {
+ reportException("caller", ["you broke it"]);
+ expect(console.error).toHaveBeenCalled();
+ });
+
+ it("returns a description of caller and exception text", () => {
+ const who = "who",
+ exception = "this is an error",
+ msgTxt = " threw an exception: ";
+
+ reportException(who, [exception]);
+
+ expect(console.error).toHaveBeenCalledWith(`${who}${msgTxt}`, [
+ exception,
+ ]);
+ });
+ });
+
+ describe("executeSoon", () => {
+ it("calls setTimeout with 0 ms", () => {
+ global.setTimeout = jest.fn();
+ const fnc = () => {};
+
+ executeSoon(fnc);
+
+ expect(setTimeout).toHaveBeenCalledWith(fnc, 0);
+ });
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/__snapshots__/expressions.spec.js.snap b/devtools/client/debugger/src/utils/tests/__snapshots__/expressions.spec.js.snap
new file mode 100644
index 0000000000..a0d6b17bf6
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/__snapshots__/expressions.spec.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`expressions wrap expression should wrap an expression 1`] = `
+"try {
+ foo
+} catch (e) {
+ e
+}"
+`;
+
+exports[`expressions wrap expression should wrap expression with a comment 1`] = `
+"try {
+ foo // yo yo
+} catch (e) {
+ e
+}"
+`;
+
+exports[`expressions wrap expression should wrap quotes 1`] = `
+"try {
+ \\"2\\"
+} catch (e) {
+ e
+}"
+`;
diff --git a/devtools/client/debugger/src/utils/tests/__snapshots__/function.spec.js.snap b/devtools/client/debugger/src/utils/tests/__snapshots__/function.spec.js.snap
new file mode 100644
index 0000000000..8d83a48d3b
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/__snapshots__/function.spec.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`function findFunctionText finds class function 1`] = `
+"bar() {
+ 2 + 2;
+}"
+`;
+
+exports[`function findFunctionText finds function 1`] = `
+"async function exSlowFoo() {
+ return \\"yay in a bit\\";
+}"
+`;
+
+exports[`function findFunctionText finds function signature 1`] = `
+"async function exSlowFoo() {
+ return \\"yay in a bit\\";
+}"
+`;
+
+exports[`function findFunctionText finds property function 1`] = `
+"function name() {
+ 2 + 2;
+}"
+`;
diff --git a/devtools/client/debugger/src/utils/tests/__snapshots__/indentation.spec.js.snap b/devtools/client/debugger/src/utils/tests/__snapshots__/indentation.spec.js.snap
new file mode 100644
index 0000000000..883d48a7ff
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/__snapshots__/indentation.spec.js.snap
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`indentation mad indentation 1`] = `
+"try {
+console.log(\\"yo\\")
+} catch (e) {
+console.log(\\"yo\\")
+ }"
+`;
+
+exports[`indentation one function 1`] = `
+"function foo() {
+ console.log(\\"yo\\")
+}"
+`;
+
+exports[`indentation one line 1`] = `"foo"`;
+
+exports[`indentation simple 1`] = `"foo"`;
+
+exports[`indentation try catch 1`] = `
+"try {
+ console.log(\\"yo\\")
+} catch (e) {
+ console.log(\\"yo\\")
+}"
+`;
diff --git a/devtools/client/debugger/src/utils/tests/assert.spec.js b/devtools/client/debugger/src/utils/tests/assert.spec.js
new file mode 100644
index 0000000000..031665c5d3
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/assert.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 assert from "../assert.js";
+
+let testAssertMessageHead, testAssertMessage;
+
+describe("assert", () => {
+ beforeEach(() => {
+ testAssertMessageHead = "Assertion failure: ";
+ testAssertMessage = "Test assert.js Message";
+ });
+
+ describe("when condition is truthy", () => {
+ it("does not throw an Error", () => {
+ expect(() => {
+ assert(true, testAssertMessage);
+ }).not.toThrow();
+ });
+ });
+
+ describe("when condition is falsy", () => {
+ it("throws an Error displaying the passed message", () => {
+ expect(() => {
+ assert(false, testAssertMessage);
+ }).toThrow(new Error(testAssertMessageHead + testAssertMessage));
+ });
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/build-query.spec.js b/devtools/client/debugger/src/utils/tests/build-query.spec.js
new file mode 100644
index 0000000000..dbd0eba4a4
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/build-query.spec.js
@@ -0,0 +1,256 @@
+/* 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 buildQuery from "../build-query";
+
+describe("build-query", () => {
+ it("case-sensitive, whole-word, regex search", () => {
+ const query = buildQuery(
+ "hi.*",
+ {
+ caseSensitive: true,
+ wholeWord: true,
+ regexMatch: true,
+ },
+ {}
+ );
+
+ expect(query.source).toBe("\\bhi.*\\b");
+ expect(query.flags).toBe("");
+ expect(query.ignoreCase).toBe(false);
+ });
+
+ it("case-sensitive, whole-word, regex search, global", () => {
+ const query = buildQuery(
+ "hi.*",
+ {
+ caseSensitive: true,
+ wholeWord: true,
+ regexMatch: true,
+ },
+ { isGlobal: true }
+ );
+
+ expect(query.source).toBe("\\bhi.*\\b");
+ expect(query.flags).toBe("g");
+ expect(query.ignoreCase).toBe(false);
+ });
+
+ it("case-insensitive, non-whole, string search", () => {
+ const query = buildQuery(
+ "hi",
+ {
+ caseSensitive: false,
+ wholeWord: false,
+ regexMatch: false,
+ },
+ {}
+ );
+
+ expect(query.source).toBe("hi");
+ expect(query.flags).toBe("i");
+ expect(query.ignoreCase).toBe(true);
+ });
+
+ it("case-insensitive, non-whole, string search, global", () => {
+ const query = buildQuery(
+ "hi",
+ {
+ caseSensitive: false,
+ wholeWord: false,
+ regexMatch: false,
+ },
+ { isGlobal: true }
+ );
+
+ expect(query.source).toBe("hi");
+ expect(query.flags).toBe("gi");
+ expect(query.ignoreCase).toBe(true);
+ });
+
+ it("case-sensitive string search", () => {
+ const query = buildQuery(
+ "hi",
+ {
+ caseSensitive: true,
+ wholeWord: false,
+ regexMatch: false,
+ },
+ {}
+ );
+
+ expect(query.source).toBe("hi");
+ expect(query.flags).toBe("");
+ expect(query.ignoreCase).toBe(false);
+ });
+
+ it("string search with wholeWord", () => {
+ const query = buildQuery(
+ "hi",
+ {
+ caseSensitive: false,
+ wholeWord: true,
+ regexMatch: false,
+ },
+ {}
+ );
+
+ expect(query.source).toBe("\\bhi\\b");
+ expect(query.flags).toBe("i");
+ expect(query.ignoreCase).toBe(true);
+ });
+
+ it("case-insensitive, regex search", () => {
+ const query = buildQuery(
+ "hi.*",
+ {
+ caseSensitive: false,
+ wholeWord: false,
+ regexMatch: true,
+ },
+ {}
+ );
+
+ expect(query.source).toBe("hi.*");
+ expect(query.flags).toBe("i");
+ expect(query.global).toBe(false);
+ expect(query.ignoreCase).toBe(true);
+ });
+
+ it("string search with wholeWord and case sensitivity", () => {
+ const query = buildQuery(
+ "hi",
+ {
+ caseSensitive: true,
+ wholeWord: true,
+ regexMatch: false,
+ },
+ {}
+ );
+
+ expect(query.source).toBe("\\bhi\\b");
+ expect(query.flags).toBe("");
+ expect(query.global).toBe(false);
+ expect(query.ignoreCase).toBe(false);
+ });
+
+ it("string search with wholeWord and case sensitivity, global", () => {
+ const query = buildQuery(
+ "hi",
+ {
+ caseSensitive: true,
+ wholeWord: true,
+ regexMatch: false,
+ },
+ { isGlobal: true }
+ );
+
+ expect(query.source).toBe("\\bhi\\b");
+ expect(query.flags).toBe("g");
+ expect(query.global).toBe(true);
+ expect(query.ignoreCase).toBe(false);
+ });
+
+ it("string search with regex chars escaped", () => {
+ const query = buildQuery(
+ "hi.*",
+ {
+ caseSensitive: true,
+ wholeWord: true,
+ regexMatch: false,
+ },
+ {}
+ );
+
+ expect(query.source).toBe("\\bhi\\.\\*\\b");
+ expect(query.flags).toBe("");
+ expect(query.global).toBe(false);
+ expect(query.ignoreCase).toBe(false);
+ });
+
+ it("string search with regex chars escaped, global", () => {
+ const query = buildQuery(
+ "hi.*",
+ {
+ caseSensitive: true,
+ wholeWord: true,
+ regexMatch: false,
+ },
+ { isGlobal: true }
+ );
+
+ expect(query.source).toBe("\\bhi\\.\\*\\b");
+ expect(query.flags).toBe("g");
+ expect(query.global).toBe(true);
+ expect(query.ignoreCase).toBe(false);
+ });
+
+ it("ignore spaces w/o spaces", () => {
+ const query = buildQuery(
+ "hi",
+ {
+ caseSensitive: true,
+ wholeWord: false,
+ regexMatch: false,
+ },
+ { ignoreSpaces: true }
+ );
+
+ expect(query.source).toBe("hi");
+ expect(query.flags).toBe("");
+ expect(query.global).toBe(false);
+ expect(query.ignoreCase).toBe(false);
+ });
+
+ it("ignore spaces w/o spaces, global", () => {
+ const query = buildQuery(
+ "hi",
+ {
+ caseSensitive: true,
+ wholeWord: false,
+ regexMatch: false,
+ },
+ { isGlobal: true, ignoreSpaces: true }
+ );
+
+ expect(query.source).toBe("hi");
+ expect(query.flags).toBe("g");
+ expect(query.global).toBe(true);
+ expect(query.ignoreCase).toBe(false);
+ });
+
+ it("ignore spaces w/ spaces", () => {
+ const query = buildQuery(
+ " ",
+ {
+ caseSensitive: true,
+ wholeWord: false,
+ regexMatch: false,
+ },
+ { ignoreSpaces: true }
+ );
+
+ expect(query.source).toBe("(?!\\s*.*)");
+ expect(query.flags).toBe("");
+ expect(query.global).toBe(false);
+ expect(query.ignoreCase).toBe(false);
+ });
+
+ it("ignore spaces w/ spaces, global", () => {
+ const query = buildQuery(
+ " ",
+ {
+ caseSensitive: true,
+ wholeWord: false,
+ regexMatch: false,
+ },
+ { isGlobal: true, ignoreSpaces: true }
+ );
+
+ expect(query.source).toBe("(?!\\s*.*)");
+ expect(query.flags).toBe("g");
+ expect(query.global).toBe(true);
+ expect(query.ignoreCase).toBe(false);
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/clipboard.spec.js b/devtools/client/debugger/src/utils/tests/clipboard.spec.js
new file mode 100644
index 0000000000..dcba730149
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/clipboard.spec.js
@@ -0,0 +1,45 @@
+/* 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 { copyToTheClipboard } from "../clipboard";
+
+let clipboardTestCopyString, expectedCopyEvent;
+const addEventListener = jest.fn();
+const execCommand = jest.fn();
+const removeEventListener = jest.fn();
+
+describe("copyToTheClipboard()", () => {
+ beforeEach(() => {
+ expectedCopyEvent = "copy";
+ clipboardTestCopyString = "content intended for clipboard";
+
+ global.document.addEventListener = addEventListener;
+ global.document.execCommand = execCommand;
+ global.document.removeEventListener = removeEventListener;
+ });
+
+ it("listens for 'copy' event", () => {
+ copyToTheClipboard(clipboardTestCopyString);
+
+ expect(document.addEventListener).toHaveBeenCalledWith(
+ expectedCopyEvent,
+ expect.anything()
+ );
+ });
+
+ it("calls document.execCommand() with 'copy' command", () => {
+ copyToTheClipboard(clipboardTestCopyString);
+
+ expect(execCommand).toHaveBeenCalledWith(expectedCopyEvent, false, null);
+ });
+
+ it("removes event listener for 'copy' event", () => {
+ copyToTheClipboard(clipboardTestCopyString);
+
+ expect(document.removeEventListener).toHaveBeenCalledWith(
+ expectedCopyEvent,
+ expect.anything()
+ );
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/expressions.spec.js b/devtools/client/debugger/src/utils/tests/expressions.spec.js
new file mode 100644
index 0000000000..b7c91c4e07
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/expressions.spec.js
@@ -0,0 +1,67 @@
+/* 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 {
+ wrapExpression,
+ getExpressionResultGripAndFront,
+} from "../expressions";
+import { makeMockExpression } from "../test-mockup";
+
+function createError(type, preview) {
+ return makeMockExpression({
+ result: { getGrip: () => ({ class: type, isError: true, preview }) },
+ });
+}
+
+describe("expressions", () => {
+ describe("wrap expression", () => {
+ it("should wrap an expression", () => {
+ expect(wrapExpression("foo")).toMatchSnapshot();
+ });
+
+ it("should wrap expression with a comment", () => {
+ expect(wrapExpression("foo // yo yo")).toMatchSnapshot();
+ });
+
+ it("should wrap quotes", () => {
+ expect(wrapExpression('"2"')).toMatchSnapshot();
+ });
+ });
+
+ describe("sanitize input", () => {
+ it("sanitizes quotes", () => {
+ expect('foo"').toEqual('foo"');
+ });
+
+ it("sanitizes 2 quotes", () => {
+ expect('"3"').toEqual('"3"');
+ });
+
+ it("evaluates \\u{61} as a", () => {
+ expect("\u{61}").toEqual("a");
+ });
+
+ it("evaluates N\\u{61}N as NaN", () => {
+ expect("N\u{61}N").toEqual("NaN");
+ });
+ });
+
+ describe("getValue", () => {
+ it("Reference Errors should be shown as (unavailable)", () => {
+ const { expressionResultGrip } = getExpressionResultGripAndFront(
+ createError("ReferenceError", { name: "ReferenceError" })
+ );
+ expect(expressionResultGrip).toEqual({
+ unavailable: true,
+ });
+ });
+
+ it("Errors messages should be shown", () => {
+ const { expressionResultGrip } = getExpressionResultGripAndFront(
+ createError("Error", { name: "Foo", message: "YO" })
+ );
+ expect(expressionResultGrip).toEqual("Foo: YO");
+ });
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/function.spec.js b/devtools/client/debugger/src/utils/tests/function.spec.js
new file mode 100644
index 0000000000..db77736ab5
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/function.spec.js
@@ -0,0 +1,61 @@
+/* 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 { findFunctionText } from "../function";
+
+import { getFunctionSymbols } from "../../workers/parser/getSymbols";
+import { populateOriginalSource } from "../../workers/parser/tests/helpers";
+
+describe("function", () => {
+ describe("findFunctionText", () => {
+ it("finds function", () => {
+ const source = populateOriginalSource("func");
+ const functions = getFunctionSymbols(source.id);
+ const text = findFunctionText(14, source, source.content, { functions });
+ expect(text).toMatchSnapshot();
+ });
+
+ it("finds function signature", () => {
+ const source = populateOriginalSource("func");
+ const functions = getFunctionSymbols(source.id);
+
+ const text = findFunctionText(13, source, source.content, { functions });
+ expect(text).toMatchSnapshot();
+ });
+
+ it("misses function closing brace", () => {
+ const source = populateOriginalSource("func");
+ const functions = getFunctionSymbols(source.id);
+
+ const text = findFunctionText(15, source, source.content, { functions });
+
+ // TODO: we should try and match the closing bracket.
+ expect(text).toEqual(null);
+ });
+
+ it("finds property function", () => {
+ const source = populateOriginalSource("func");
+ const functions = getFunctionSymbols(source.id);
+
+ const text = findFunctionText(29, source, source.content, { functions });
+ expect(text).toMatchSnapshot();
+ });
+
+ it("finds class function", () => {
+ const source = populateOriginalSource("func");
+ const functions = getFunctionSymbols(source.id);
+
+ const text = findFunctionText(33, source, source.content, { functions });
+ expect(text).toMatchSnapshot();
+ });
+
+ it("cant find function", () => {
+ const source = populateOriginalSource("func");
+ const functions = getFunctionSymbols(source.id);
+
+ const text = findFunctionText(20, source, source.content, { functions });
+ expect(text).toEqual(null);
+ });
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/indentation.spec.js b/devtools/client/debugger/src/utils/tests/indentation.spec.js
new file mode 100644
index 0000000000..5ee7419371
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/indentation.spec.js
@@ -0,0 +1,61 @@
+/* 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 { correctIndentation, getIndentation } from "../indentation";
+
+describe("indentation", () => {
+ it("simple", () => {
+ expect(
+ correctIndentation(`
+ foo
+ `)
+ ).toMatchSnapshot();
+ });
+
+ it("one line", () => {
+ expect(correctIndentation("foo")).toMatchSnapshot();
+ });
+
+ it("one function", () => {
+ const text = `
+ function foo() {
+ console.log("yo")
+ }
+ `;
+
+ expect(correctIndentation(text)).toMatchSnapshot();
+ });
+
+ it("try catch", () => {
+ const text = `
+ try {
+ console.log("yo")
+ } catch (e) {
+ console.log("yo")
+ }
+ `;
+
+ expect(correctIndentation(text)).toMatchSnapshot();
+ });
+
+ it("mad indentation", () => {
+ const text = `
+ try {
+ console.log("yo")
+ } catch (e) {
+ console.log("yo")
+ }
+ `;
+
+ expect(correctIndentation(text)).toMatchSnapshot();
+ });
+});
+
+describe("indentation length", () => {
+ it("leading spaces", () => {
+ const line = " console.log('Hello World');";
+
+ expect(getIndentation(line)).toEqual(16);
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/isMinified.spec.js b/devtools/client/debugger/src/utils/tests/isMinified.spec.js
new file mode 100644
index 0000000000..1c49f96737
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/isMinified.spec.js
@@ -0,0 +1,18 @@
+/* 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 { isMinified } from "../isMinified";
+import { makeMockSourceWithContent } from "../test-mockup";
+
+describe("isMinified", () => {
+ it("no indents", () => {
+ const sourceWithContent = makeMockSourceWithContent(
+ undefined,
+ undefined,
+ undefined,
+ "function base(boo) {\n}"
+ );
+ expect(isMinified(sourceWithContent, sourceWithContent.content)).toBe(true);
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/location.spec.js b/devtools/client/debugger/src/utils/tests/location.spec.js
new file mode 100644
index 0000000000..2be71f3cae
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/location.spec.js
@@ -0,0 +1,31 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+import { sortSelectedLocations } from "../location";
+
+function loc(line, column) {
+ return {
+ location: { sourceId: "foo", line, column },
+ generatedLocation: { sourceId: "foo", line, column },
+ };
+}
+describe("location.spec.js", () => {
+ it("sorts lines", () => {
+ const a = loc(3, 5);
+ const b = loc(1, 10);
+ expect(sortSelectedLocations([a, b], { id: "foo" })).toEqual([b, a]);
+ });
+
+ it("sorts columns", () => {
+ const a = loc(3, 10);
+ const b = loc(3, 5);
+ expect(sortSelectedLocations([a, b], { id: "foo" })).toEqual([b, a]);
+ });
+
+ it("prioritizes undefined columns", () => {
+ const a = loc(3, 10);
+ const b = loc(3, undefined);
+ expect(sortSelectedLocations([a, b], { id: "foo" })).toEqual([b, a]);
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/log.spec.js b/devtools/client/debugger/src/utils/tests/log.spec.js
new file mode 100644
index 0000000000..ea7e4ca4d2
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/log.spec.js
@@ -0,0 +1,35 @@
+/* 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 "../prefs";
+import { log } from "../log.js";
+
+let logArgFirst, logArgSecond, logArgArray;
+
+describe("log()", () => {
+ beforeEach(() => {
+ logArgFirst = "my info";
+ logArgSecond = "my other info";
+ logArgArray = [logArgFirst, logArgSecond];
+ global.console = { log: jest.fn() };
+ });
+
+ afterEach(() => {
+ prefs.logging = false;
+ });
+
+ describe("when logging pref is true", () => {
+ it("prints arguments", () => {
+ prefs.logging = true;
+ log(logArgArray);
+
+ expect(global.console.log).toHaveBeenCalledWith(logArgArray);
+ });
+
+ it("does not print by default", () => {
+ log(logArgArray);
+ expect(global.console.log).not.toHaveBeenCalled();
+ });
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/memoize.spec.js b/devtools/client/debugger/src/utils/tests/memoize.spec.js
new file mode 100644
index 0000000000..fb72958516
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/memoize.spec.js
@@ -0,0 +1,48 @@
+/* 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 memoize from "../memoize";
+
+const a = { number: 3 };
+const b = { number: 4 };
+const c = { number: 5 };
+const d = { number: 6 };
+
+function add(...numberObjects) {
+ return numberObjects.reduce((prev, cur) => prev + cur.number, 0);
+}
+
+describe("memozie", () => {
+ it("should work for one arg as key", () => {
+ const mAdd = memoize(add);
+ mAdd(a);
+ expect(mAdd(a)).toEqual(3);
+ mAdd(b);
+ expect(mAdd(b)).toEqual(4);
+ });
+
+ it("should only be called once", () => {
+ const spy = jest.fn(() => 2);
+ const mAdd = memoize(spy);
+
+ mAdd(a);
+ mAdd(a);
+ mAdd(a);
+ expect(spy).toHaveBeenCalledTimes(1);
+ });
+
+ it("should work for two args as key", () => {
+ const mAdd = memoize(add);
+ expect(mAdd(a, b)).toEqual(7);
+ expect(mAdd(a, b)).toEqual(7);
+ expect(mAdd(a, c)).toEqual(8);
+ });
+
+ it("should work with many args as key", () => {
+ const mAdd = memoize(add);
+ expect(mAdd(a, b, c)).toEqual(12);
+ expect(mAdd(a, b, d)).toEqual(13);
+ expect(mAdd(a, b, c)).toEqual(12);
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/memoizeLast.spec.js b/devtools/client/debugger/src/utils/tests/memoizeLast.spec.js
new file mode 100644
index 0000000000..a5622510e3
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/memoizeLast.spec.js
@@ -0,0 +1,31 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+import { memoizeLast } from "../memoizeLast";
+
+const a = { number: 3 };
+const b = { number: 4 };
+
+function add(...numberObjects) {
+ return numberObjects.reduce((prev, cur) => prev + cur.number, 0);
+}
+
+describe("memozie", () => {
+ it("should re-calculate when a value changes", () => {
+ const mAdd = memoizeLast(add);
+ mAdd(a);
+ expect(mAdd(a)).toEqual(3);
+ mAdd(b);
+ expect(mAdd(b)).toEqual(4);
+ });
+
+ it("should only run once", () => {
+ const mockAdd = jest.fn(add);
+ const mAdd = memoizeLast(mockAdd);
+ mAdd(a);
+ mAdd(a);
+
+ expect(mockAdd.mock.calls[0]).toEqual([{ number: 3 }]);
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/path.spec.js b/devtools/client/debugger/src/utils/tests/path.spec.js
new file mode 100644
index 0000000000..58bdf046f0
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/path.spec.js
@@ -0,0 +1,49 @@
+/* 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 { basename, dirname, isURL, isAbsolute, join } from "../path";
+
+const fullTestURL = "https://www.example.com/some/endpoint";
+const absoluteTestPath = "/some/absolute/path/to/resource";
+const aTestName = "name";
+
+describe("basename()", () => {
+ it("returns the basename of the path", () => {
+ expect(basename(fullTestURL)).toBe("endpoint");
+ });
+});
+
+describe("dirname()", () => {
+ it("returns the current directory in a path", () => {
+ expect(dirname(fullTestURL)).toBe("https://www.example.com/some");
+ });
+});
+
+describe("isURL()", () => {
+ it("returns true if a string contains characters denoting a scheme", () => {
+ expect(isURL(fullTestURL)).toBe(true);
+ });
+
+ it("returns false if string does not denote a scheme", () => {
+ expect(isURL(absoluteTestPath)).toBe(false);
+ });
+});
+
+describe("isAbsolute()", () => {
+ it("returns true if a string begins with a slash", () => {
+ expect(isAbsolute(absoluteTestPath)).toBe(true);
+ });
+
+ it("returns false if a string does not begin with a slash", () => {
+ expect(isAbsolute(fullTestURL)).toBe(false);
+ });
+});
+
+describe("join()", () => {
+ it("concatenates a base path and a directory name", () => {
+ expect(join(absoluteTestPath, aTestName)).toBe(
+ "/some/absolute/path/to/resource/name"
+ );
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/quick-open.spec.js b/devtools/client/debugger/src/utils/tests/quick-open.spec.js
new file mode 100644
index 0000000000..66cceb6825
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/quick-open.spec.js
@@ -0,0 +1,35 @@
+/* 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 cases from "jest-in-case";
+import { parseQuickOpenQuery, parseLineColumn } from "../quick-open";
+
+cases(
+ "parseQuickOpenQuery utility",
+ ({ type, query }) => expect(parseQuickOpenQuery(query)).toEqual(type),
+ [
+ { name: "empty query defaults to sources", type: "sources", query: "" },
+ { name: "sources query", type: "sources", query: "test" },
+ { name: "functions query", type: "functions", query: "@test" },
+ { name: "variables query", type: "variables", query: "#test" },
+ { name: "goto line", type: "goto", query: ":30" },
+ { name: "goto line:column", type: "goto", query: ":30:60" },
+ { name: "goto source line", type: "gotoSource", query: "test:30:60" },
+ { name: "shortcuts", type: "shortcuts", query: "?" },
+ ]
+);
+
+cases(
+ "parseLineColumn utility",
+ ({ query, location }) => expect(parseLineColumn(query)).toEqual(location),
+ [
+ { name: "empty query", query: "", location: null },
+ { name: "just line", query: ":30", location: { line: 30 } },
+ {
+ name: "line and column",
+ query: ":30:90",
+ location: { column: 89, line: 30 },
+ },
+ ]
+);
diff --git a/devtools/client/debugger/src/utils/tests/result-list.spec.js b/devtools/client/debugger/src/utils/tests/result-list.spec.js
new file mode 100644
index 0000000000..dcbaf421c5
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/result-list.spec.js
@@ -0,0 +1,32 @@
+/* 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 { scrollList } from "../result-list.js";
+
+describe("scrollList", () => {
+ beforeEach(() => {
+ jest.useFakeTimers();
+ });
+
+ /* eslint-disable jest/expect-expect */
+ it("just returns if element not found", () => {
+ const li = document.createElement("li");
+ scrollList([li], 1);
+ });
+ /* eslint-enable jest/expect-expect */
+
+ it("calls scrollIntoView", () => {
+ const ul = document.createElement("ul");
+ const li = document.createElement("li");
+
+ li.scrollIntoView = jest.fn();
+ ul.appendChild(li);
+
+ scrollList([li], 0);
+
+ jest.runAllTimers();
+
+ expect(li.scrollIntoView).toHaveBeenCalled();
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/source.spec.js b/devtools/client/debugger/src/utils/tests/source.spec.js
new file mode 100644
index 0000000000..484c8ce570
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/source.spec.js
@@ -0,0 +1,367 @@
+/* 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 {
+ getFilename,
+ getTruncatedFileName,
+ getFileURL,
+ getDisplayPath,
+ getSourceLineCount,
+ isJavaScript,
+ isDescendantOfRoot,
+ removeThreadActorId,
+ isUrlExtension,
+ getLineText,
+} from "../source.js";
+
+import {
+ makeMockSource,
+ makeMockSourceWithContent,
+ makeMockSourceAndContent,
+ makeMockWasmSourceWithContent,
+ makeMockThread,
+ makeFullfilledMockSourceContent,
+} from "../test-mockup";
+import { isFulfilled } from "../async-value.js";
+
+describe("sources", () => {
+ const unicode = "\u6e2c";
+ const encodedUnicode = encodeURIComponent(unicode);
+
+ describe("getFilename", () => {
+ it("should give us a default of (index)", () => {
+ expect(
+ getFilename(makeMockSource("http://localhost.com:7999/increment/"))
+ ).toBe("(index)");
+ });
+ it("should give us the filename", () => {
+ expect(
+ getFilename(
+ makeMockSource("http://localhost.com:7999/increment/hello.html")
+ )
+ ).toBe("hello.html");
+ });
+ it("should give us the readable Unicode filename if encoded", () => {
+ expect(
+ getFilename(
+ makeMockSource(
+ `http://localhost.com:7999/increment/${encodedUnicode}.html`
+ )
+ )
+ ).toBe(`${unicode}.html`);
+ });
+ it("should give us the filename excluding the query strings", () => {
+ expect(
+ getFilename(
+ makeMockSource(
+ "http://localhost.com:7999/increment/hello.html?query_strings"
+ )
+ )
+ ).toBe("hello.html");
+ });
+ it("should give us the proper filename for pretty files", () => {
+ expect(
+ getFilename(
+ makeMockSource(
+ "http://localhost.com:7999/increment/hello.html:formatted"
+ )
+ )
+ ).toBe("hello.html");
+ });
+ });
+
+ describe("getTruncatedFileName", () => {
+ it("should truncate the file name when it is more than 30 chars", () => {
+ expect(
+ getTruncatedFileName(
+ makeMockSource(
+ "really-really-really-really-really-really-long-name.html"
+ ),
+ "",
+ 30
+ )
+ ).toBe("really-really…long-name.html");
+ });
+ it("should first decode the filename and then truncate it", () => {
+ expect(
+ getTruncatedFileName(
+ makeMockSource(`${encodedUnicode.repeat(30)}.html`),
+ "",
+ 30
+ )
+ ).toBe("測測測測測測測測測測測測測…測測測測測測測測測.html");
+ });
+ });
+
+ describe("getDisplayPath", () => {
+ it("should give us the path for files with same name", () => {
+ const sources = [
+ makeMockSource("http://localhost.com:7999/increment/xyz/hello.html"),
+ makeMockSource("http://localhost.com:7999/increment/abc/hello.html"),
+ makeMockSource("http://localhost.com:7999/increment/hello.html"),
+ ];
+ expect(
+ getDisplayPath(
+ makeMockSource("http://localhost.com:7999/increment/abc/hello.html"),
+ sources
+ )
+ ).toBe("abc");
+ });
+
+ it(`should give us the path for files with same name
+ in directories with same name`, () => {
+ const sources = [
+ makeMockSource(
+ "http://localhost.com:7999/increment/xyz/web/hello.html"
+ ),
+ makeMockSource(
+ "http://localhost.com:7999/increment/abc/web/hello.html"
+ ),
+ makeMockSource("http://localhost.com:7999/increment/hello.html"),
+ ];
+ expect(
+ getDisplayPath(
+ makeMockSource(
+ "http://localhost.com:7999/increment/abc/web/hello.html"
+ ),
+ sources
+ )
+ ).toBe("abc/web");
+ });
+
+ it("should give no path for files with unique name", () => {
+ const sources = [
+ makeMockSource("http://localhost.com:7999/increment/xyz.html"),
+ makeMockSource("http://localhost.com:7999/increment/abc.html"),
+ makeMockSource("http://localhost.com:7999/increment/hello.html"),
+ ];
+ expect(
+ getDisplayPath(
+ makeMockSource("http://localhost.com:7999/increment/abc/web.html"),
+ sources
+ )
+ ).toBe(undefined);
+ });
+ it("should not show display path for pretty file", () => {
+ const sources = [
+ makeMockSource("http://localhost.com:7999/increment/abc/web/hell.html"),
+ makeMockSource(
+ "http://localhost.com:7999/increment/abc/web/hello.html"
+ ),
+ makeMockSource(
+ "http://localhost.com:7999/increment/xyz.html:formatted"
+ ),
+ ];
+ expect(
+ getDisplayPath(
+ makeMockSource(
+ "http://localhost.com:7999/increment/abc/web/hello.html:formatted"
+ ),
+ sources
+ )
+ ).toBe(undefined);
+ });
+ it(`should give us the path for files with same name when both
+ are pretty and different path`, () => {
+ const sources = [
+ makeMockSource(
+ "http://localhost.com:7999/increment/xyz/web/hello.html:formatted"
+ ),
+ makeMockSource(
+ "http://localhost.com:7999/increment/abc/web/hello.html:formatted"
+ ),
+ makeMockSource(
+ "http://localhost.com:7999/increment/hello.html:formatted"
+ ),
+ ];
+ expect(
+ getDisplayPath(
+ makeMockSource(
+ "http://localhost.com:7999/increment/abc/web/hello.html:formatted"
+ ),
+ sources
+ )
+ ).toBe("abc/web");
+ });
+ });
+
+ describe("getFileURL", () => {
+ it("should give us the file url", () => {
+ expect(
+ getFileURL(
+ makeMockSource("http://localhost.com:7999/increment/hello.html")
+ )
+ ).toBe("http://localhost.com:7999/increment/hello.html");
+ });
+ it("should truncate the file url when it is more than 50 chars", () => {
+ expect(
+ getFileURL(
+ makeMockSource("http://localhost-long.com:7999/increment/hello.html")
+ )
+ ).toBe("…ttp://localhost-long.com:7999/increment/hello.html");
+ });
+ it("should first decode the file URL and then truncate it", () => {
+ expect(
+ getFileURL(makeMockSource(`http://${encodedUnicode.repeat(39)}.html`))
+ ).toBe(`…ttp://${unicode.repeat(39)}.html`);
+ });
+ });
+
+ describe("isJavaScript", () => {
+ it("is not JavaScript", () => {
+ {
+ const source = makeMockSourceAndContent("foo.html", undefined, "");
+ expect(isJavaScript(source, source.content)).toBe(false);
+ }
+ {
+ const source = makeMockSourceAndContent(
+ undefined,
+ undefined,
+ "text/html"
+ );
+ expect(isJavaScript(source, source.content)).toBe(false);
+ }
+ });
+
+ it("is JavaScript", () => {
+ {
+ const source = makeMockSourceAndContent("foo.js");
+ expect(isJavaScript(source, source.content)).toBe(true);
+ }
+ {
+ const source = makeMockSourceAndContent("bar.jsm");
+ expect(isJavaScript(source, source.content)).toBe(true);
+ }
+ {
+ const source = makeMockSourceAndContent(
+ undefined,
+ undefined,
+ "text/javascript"
+ );
+ expect(isJavaScript(source, source.content)).toBe(true);
+ }
+ {
+ const source = makeMockSourceAndContent(
+ undefined,
+ undefined,
+ "application/javascript"
+ );
+ expect(isJavaScript(source, source.content)).toBe(true);
+ }
+ });
+ });
+
+ describe("getSourceLineCount", () => {
+ it("should give us the amount bytes for wasm source", () => {
+ const { content } = makeMockWasmSourceWithContent({
+ binary: "\x00asm\x01\x00\x00\x00",
+ });
+ expect(getSourceLineCount(content.value)).toEqual(8);
+ });
+
+ it("should give us the amout of lines for js source", () => {
+ const { content } = makeMockSourceWithContent(
+ undefined,
+ undefined,
+ "text/javascript",
+ "function foo(){\n}"
+ );
+ if (!content || !isFulfilled(content)) {
+ throw new Error("Unexpected content value");
+ }
+ expect(getSourceLineCount(content.value)).toEqual(2);
+ });
+ });
+
+ describe("isDescendantOfRoot", () => {
+ const threads = [
+ makeMockThread({ actor: "server0.conn1.child1/thread19" }),
+ ];
+
+ it("should detect normal source urls", () => {
+ const source = makeMockSource(
+ "resource://activity-stream/vendor/react.js"
+ );
+ const rootWithoutThreadActor = removeThreadActorId(
+ "resource://activity-stream",
+ threads
+ );
+ expect(isDescendantOfRoot(source, rootWithoutThreadActor)).toBe(true);
+ });
+
+ it("should detect source urls under chrome:// as root", () => {
+ const source = makeMockSource(
+ "chrome://browser/content/contentSearchUI.js"
+ );
+ const rootWithoutThreadActor = removeThreadActorId("chrome://", threads);
+ expect(isDescendantOfRoot(source, rootWithoutThreadActor)).toBe(true);
+ });
+
+ it("should detect source urls if root is a thread actor Id", () => {
+ const source = makeMockSource(
+ "resource://activity-stream/vendor/react-dom.js"
+ );
+ const rootWithoutThreadActor = removeThreadActorId(
+ "server0.conn1.child1/thread19",
+ threads
+ );
+ expect(isDescendantOfRoot(source, rootWithoutThreadActor)).toBe(true);
+ });
+ });
+
+ describe("isUrlExtension", () => {
+ it("should detect mozilla extension", () => {
+ expect(isUrlExtension("moz-extension://id/js/content.js")).toBe(true);
+ });
+ it("should detect chrome extension", () => {
+ expect(isUrlExtension("chrome-extension://id/js/content.js")).toBe(true);
+ });
+ it("should return false for non-extension assets", () => {
+ expect(isUrlExtension("https://example.org/init.js")).toBe(false);
+ });
+ });
+
+ describe("getLineText", () => {
+ it("first line", () => {
+ const text = getLineText(
+ "fake-source",
+ makeFullfilledMockSourceContent("aaa\nbbb\nccc"),
+ 1
+ );
+
+ expect(text).toEqual("aaa");
+ });
+
+ it("last line", () => {
+ const text = getLineText(
+ "fake-source",
+ makeFullfilledMockSourceContent("aaa\nbbb\nccc"),
+ 3
+ );
+
+ expect(text).toEqual("ccc");
+ });
+
+ it("one line", () => {
+ const text = getLineText(
+ "fake-source",
+ makeFullfilledMockSourceContent("aaa"),
+ 1
+ );
+
+ expect(text).toEqual("aaa");
+ });
+
+ it("bad line", () => {
+ const text = getLineText(
+ "fake-source",
+ makeFullfilledMockSourceContent("aaa\nbbb\nccc"),
+
+ 5
+ );
+
+ expect(text).toEqual("");
+ });
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/telemetry.spec.js b/devtools/client/debugger/src/utils/tests/telemetry.spec.js
new file mode 100644
index 0000000000..7223641afd
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/telemetry.spec.js
@@ -0,0 +1,13 @@
+/* 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 { recordEvent } from "../telemetry";
+
+describe("telemetry.recordEvent()", () => {
+ it("Receives the correct telemetry information", () => {
+ recordEvent("foo", { bar: 1 });
+
+ expect(window.dbg._telemetry.events.foo).toStrictEqual([{ bar: 1 }]);
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/text.spec.js b/devtools/client/debugger/src/utils/tests/text.spec.js
new file mode 100644
index 0000000000..5786bc6232
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/text.spec.js
@@ -0,0 +1,20 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+import { truncateMiddleText } from "../text";
+
+describe("text", () => {
+ it("should truncate the text in the middle", () => {
+ const sourceText = "this is a very long text and ends here";
+ expect(truncateMiddleText(sourceText, 30)).toMatch(
+ "this is a ver… and ends here"
+ );
+ });
+ it("should keep the text as it is", () => {
+ const sourceText = "this is a short text ends here";
+ expect(truncateMiddleText(sourceText, 30)).toMatch(
+ "this is a short text ends here"
+ );
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/ui.spec.js b/devtools/client/debugger/src/utils/tests/ui.spec.js
new file mode 100644
index 0000000000..aa091e6798
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/ui.spec.js
@@ -0,0 +1,15 @@
+/* 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 { isVisible } from "../ui";
+
+describe("ui", () => {
+ it("should return #mount width", () => {
+ if (!document.body) {
+ throw new Error("no document body");
+ }
+ document.body.innerHTML = "<div id='mount'></div>";
+ expect(isVisible()).toBe(false);
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/url.spec.js b/devtools/client/debugger/src/utils/tests/url.spec.js
new file mode 100644
index 0000000000..d842acf7db
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/url.spec.js
@@ -0,0 +1,89 @@
+/* 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 { parse } from "../url";
+
+describe("url", () => {
+ describe("parse", () => {
+ it("parses an absolute URL", () => {
+ const val = parse("http://example.com:8080/path/file.js");
+
+ expect(val.protocol).toBe("http:");
+ expect(val.host).toBe("example.com:8080");
+ expect(val.pathname).toBe("/path/file.js");
+ expect(val.search).toBe("");
+ expect(val.hash).toBe("");
+ });
+
+ it("parses an absolute URL with query params", () => {
+ const val = parse("http://example.com:8080/path/file.js?param");
+
+ expect(val.protocol).toBe("http:");
+ expect(val.host).toBe("example.com:8080");
+ expect(val.pathname).toBe("/path/file.js");
+ expect(val.search).toBe("?param");
+ expect(val.hash).toBe("");
+ });
+
+ it("parses an absolute URL with a fragment", () => {
+ const val = parse("http://example.com:8080/path/file.js#hash");
+
+ expect(val.protocol).toBe("http:");
+ expect(val.host).toBe("example.com:8080");
+ expect(val.pathname).toBe("/path/file.js");
+ expect(val.search).toBe("");
+ expect(val.hash).toBe("#hash");
+ });
+
+ it("parses an absolute URL with query params and a fragment", () => {
+ const val = parse("http://example.com:8080/path/file.js?param#hash");
+
+ expect(val.protocol).toBe("http:");
+ expect(val.host).toBe("example.com:8080");
+ expect(val.pathname).toBe("/path/file.js");
+ expect(val.search).toBe("?param");
+ expect(val.hash).toBe("#hash");
+ });
+
+ it("parses a partial URL", () => {
+ const val = parse("/path/file.js");
+
+ expect(val.protocol).toBe("");
+ expect(val.host).toBe("");
+ expect(val.pathname).toBe("/path/file.js");
+ expect(val.search).toBe("");
+ expect(val.hash).toBe("");
+ });
+
+ it("parses a partial URL with query params", () => {
+ const val = parse("/path/file.js?param");
+
+ expect(val.protocol).toBe("");
+ expect(val.host).toBe("");
+ expect(val.pathname).toBe("/path/file.js");
+ expect(val.search).toBe("?param");
+ expect(val.hash).toBe("");
+ });
+
+ it("parses a partial URL with a fragment", () => {
+ const val = parse("/path/file.js#hash");
+
+ expect(val.protocol).toBe("");
+ expect(val.host).toBe("");
+ expect(val.pathname).toBe("/path/file.js");
+ expect(val.search).toBe("");
+ expect(val.hash).toBe("#hash");
+ });
+
+ it("parses a partial URL with query params and a fragment", () => {
+ const val = parse("/path/file.js?param#hash");
+
+ expect(val.protocol).toBe("");
+ expect(val.host).toBe("");
+ expect(val.pathname).toBe("/path/file.js");
+ expect(val.search).toBe("?param");
+ expect(val.hash).toBe("#hash");
+ });
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/utils.spec.js b/devtools/client/debugger/src/utils/tests/utils.spec.js
new file mode 100644
index 0000000000..f358ffc42a
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/utils.spec.js
@@ -0,0 +1,87 @@
+/* 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 { handleError, promisify, endTruncateStr, waitForMs } from "../utils";
+
+describe("handleError()", () => {
+ const testErrorText = "ERROR: ";
+ const testErrorObject = { oh: "noes" };
+
+ beforeEach(() => {
+ global.console = { log: jest.fn() };
+ });
+
+ it("logs error text with error value", () => {
+ handleError(testErrorObject);
+
+ expect(console.log).toHaveBeenCalledWith(testErrorText, testErrorObject);
+ });
+});
+
+describe("promisify()", () => {
+ let testPromise, testContext, testMethod, testArgs;
+
+ beforeEach(() => {
+ testContext = {};
+ testMethod = jest.fn();
+ testArgs = [];
+ });
+
+ it("returns a Promise", () => {
+ testPromise = promisify(testContext, testMethod, testArgs);
+
+ expect(testPromise instanceof Promise).toBe(true);
+ });
+
+ it("applies promisified method", () => {
+ testPromise = promisify(testContext, testMethod, testArgs);
+
+ expect(testMethod).toHaveBeenCalledWith(testArgs, expect.anything());
+ });
+});
+
+describe("endTruncateStr()", () => {
+ let testString;
+ const testSize = 11;
+
+ describe("when the string is larger than the specified size", () => {
+ it("returns an elipsis and characters at the end of the string", () => {
+ testString = "Mozilla Firefox is my favorite web browser";
+
+ expect(endTruncateStr(testString, testSize)).toBe("…web browser");
+ });
+ });
+
+ describe("when the string is not larger than the specified size", () => {
+ it("returns the string unchanged", () => {
+ testString = "Firefox";
+
+ expect(endTruncateStr(testString, testSize)).toBe(testString);
+ });
+ });
+});
+
+describe("waitForMs()", () => {
+ let testPromise;
+ const testMilliseconds = 10;
+
+ beforeEach(() => {
+ global.setTimeout = jest.fn();
+ });
+
+ it("returns a Promise", () => {
+ testPromise = waitForMs(testMilliseconds);
+
+ expect(testPromise instanceof Promise).toBe(true);
+ });
+
+ it("calls setTimeout() on the resolve of the Promise", () => {
+ testPromise = waitForMs(testMilliseconds);
+
+ expect(setTimeout).toHaveBeenCalledWith(
+ expect.anything(),
+ testMilliseconds
+ );
+ });
+});
diff --git a/devtools/client/debugger/src/utils/tests/wasm.spec.js b/devtools/client/debugger/src/utils/tests/wasm.spec.js
new file mode 100644
index 0000000000..6cf3b1083b
--- /dev/null
+++ b/devtools/client/debugger/src/utils/tests/wasm.spec.js
@@ -0,0 +1,96 @@
+/* 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 {
+ isWasm,
+ lineToWasmOffset,
+ wasmOffsetToLine,
+ clearWasmStates,
+ renderWasmText,
+} from "../wasm.js";
+
+import { makeMockWasmSourceWithContent } from "../test-mockup";
+
+describe("wasm", () => {
+ // Compiled version of `(module (func (nop)))`
+ const SIMPLE_WASM = {
+ binary:
+ "\x00asm\x01\x00\x00\x00\x01\x84\x80\x80\x80\x00\x01`\x00\x00" +
+ "\x03\x82\x80\x80\x80\x00\x01\x00\x06\x81\x80\x80\x80\x00\x00" +
+ "\n\x89\x80\x80\x80\x00\x01\x83\x80\x80\x80\x00\x00\x01\v",
+ };
+
+ // malformed binary which contains an unknown operator (\x09) which
+ // should cause the wasm parser to throw.
+ const MALFORMED_SIMPLE_WASM = {
+ binary:
+ "\x00asm\x01\x00\x00\x00\x09\x84\x80\x80\x80\x00\x01`\x00\x00" +
+ "\x03\x82\x80\x80\x80\x00\x01\x00\x06\x81\x80\x80\x80\x00\x00" +
+ "\n\x89\x80\x80\x80\x00\x01\x83\x80\x80\x80\x00\x00\x01\v",
+ };
+
+ const SIMPLE_WASM_TEXT = `(module
+ (func $func0
+ nop
+ )
+)`;
+ const SIMPLE_WASM_NOP_TEXT_LINE = 2;
+ const SIMPLE_WASM_NOP_OFFSET = 46;
+
+ describe("isWasm", () => {
+ it("should give us the false when wasm text was not registered", () => {
+ const sourceId = "source.0";
+ expect(isWasm(sourceId)).toEqual(false);
+ });
+ it("should give us the true when wasm text was registered", () => {
+ const source = makeMockWasmSourceWithContent(SIMPLE_WASM);
+ renderWasmText(source.id, source.content.value);
+ expect(isWasm(source.id)).toEqual(true);
+ // clear shall remove
+ clearWasmStates();
+ expect(isWasm(source.id)).toEqual(false);
+ });
+ });
+
+ describe("renderWasmText", () => {
+ it("render simple wasm", () => {
+ const source = makeMockWasmSourceWithContent(SIMPLE_WASM);
+ const lines = renderWasmText(source.id, source.content.value);
+ expect(lines.join("\n")).toEqual(SIMPLE_WASM_TEXT);
+ clearWasmStates();
+ });
+
+ it("should return error information when the parser throws", () => {
+ const source = makeMockWasmSourceWithContent(MALFORMED_SIMPLE_WASM);
+ const lines = renderWasmText(source.id, source.content.value);
+ expect(lines.join("\n")).toEqual(
+ "Error occured during wast conversion : Unsupported element segment type 96"
+ );
+ clearWasmStates();
+ });
+ });
+
+ describe("lineToWasmOffset", () => {
+ // Test data sanity check: checking if 'nop' is found in the SIMPLE_WASM.
+ expect(SIMPLE_WASM.binary[SIMPLE_WASM_NOP_OFFSET]).toEqual("\x01");
+
+ it("get simple wasm nop offset", () => {
+ const source = makeMockWasmSourceWithContent(SIMPLE_WASM);
+ renderWasmText(source.id, source.content.value);
+ const offset = lineToWasmOffset(source.id, SIMPLE_WASM_NOP_TEXT_LINE);
+ expect(offset).toEqual(SIMPLE_WASM_NOP_OFFSET);
+ clearWasmStates();
+ });
+ });
+
+ describe("wasmOffsetToLine", () => {
+ it("get simple wasm nop line", () => {
+ const source = makeMockWasmSourceWithContent(SIMPLE_WASM);
+ renderWasmText(source.id, source.content.value);
+ const line = wasmOffsetToLine(source.id, SIMPLE_WASM_NOP_OFFSET);
+ expect(line).toEqual(SIMPLE_WASM_NOP_TEXT_LINE);
+ clearWasmStates();
+ });
+ });
+});
diff --git a/devtools/client/debugger/src/utils/text.js b/devtools/client/debugger/src/utils/text.js
new file mode 100644
index 0000000000..19f99b3175
--- /dev/null
+++ b/devtools/client/debugger/src/utils/text.js
@@ -0,0 +1,58 @@
+/* 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/>. */
+
+/**
+ * Utils for keyboard command strings
+ * @module utils/text
+ */
+
+const isMacOS = Services.appinfo.OS === "Darwin";
+
+/**
+ * Formats key for use in tooltips
+ * For macOS we use the following unicode
+ *
+ * cmd ⌘ = \u2318
+ * shift ⇧ – \u21E7
+ * option (alt) ⌥ \u2325
+ *
+ * For Win/Lin this replaces CommandOrControl or CmdOrCtrl with Ctrl
+ *
+ * @memberof utils/text
+ * @static
+ */
+export function formatKeyShortcut(shortcut) {
+ if (isMacOS) {
+ return shortcut
+ .replace(/Shift\+/g, "\u21E7")
+ .replace(/Command\+|Cmd\+/g, "\u2318")
+ .replace(/CommandOrControl\+|CmdOrCtrl\+/g, "\u2318")
+ .replace(/Alt\+/g, "\u2325");
+ }
+ return shortcut
+ .replace(/CommandOrControl\+|CmdOrCtrl\+/g, `${L10N.getStr("ctrl")}+`)
+ .replace(/Shift\+/g, "Shift+");
+}
+
+/**
+ * Truncates the received text to the maxLength in the format:
+ * Original: 'this is a very long text and ends here'
+ * Truncated: 'this is a ver...and ends here'
+ * @param {String} sourceText - Source text
+ * @param {Number} maxLength - Max allowed length
+ * @memberof utils/text
+ * @static
+ */
+export function truncateMiddleText(sourceText, maxLength) {
+ let truncatedText = sourceText;
+ if (sourceText.length > maxLength) {
+ truncatedText = `${sourceText.substring(
+ 0,
+ Math.round(maxLength / 2) - 2
+ )}…${sourceText.substring(
+ sourceText.length - Math.round(maxLength / 2 - 1)
+ )}`;
+ }
+ return truncatedText;
+}
diff --git a/devtools/client/debugger/src/utils/ui.js b/devtools/client/debugger/src/utils/ui.js
new file mode 100644
index 0000000000..eab5bb1e07
--- /dev/null
+++ b/devtools/client/debugger/src/utils/ui.js
@@ -0,0 +1,48 @@
+/* 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/>. */
+
+/* Checks to see if the root element is available and
+ * if the element is visible. We check the width of the element
+ * because it is more reliable than either checking a focus state or
+ * the visibleState or hidden property.
+ */
+export function isVisible() {
+ const el = document.querySelector("#mount");
+ return !!(el && el.getBoundingClientRect().width > 0);
+}
+
+/* Gets the line numbers width in the code editor
+ */
+export function getLineNumberWidth(editor) {
+ const { gutters } = editor.display;
+ const lineNumbers = gutters.querySelector(".CodeMirror-linenumbers");
+ return lineNumbers?.clientWidth;
+}
+
+/**
+ * Forces the breakpoint gutter to be the same size as the line
+ * numbers gutter. Editor CSS will absolutely position the gutter
+ * beneath the line numbers. This makes it easy to be flexible with
+ * how we overlay breakpoints.
+ */
+export function resizeBreakpointGutter(editor) {
+ const { gutters } = editor.display;
+ const breakpoints = gutters.querySelector(".breakpoints");
+ if (breakpoints) {
+ breakpoints.style.width = `${getLineNumberWidth(editor)}px`;
+ }
+}
+
+/**
+ * Forces the left toggle button in source header to be the same size
+ * as the line numbers gutter.
+ */
+export function resizeToggleButton(editor) {
+ const toggleButton = document.querySelector(
+ ".source-header .toggle-button-start"
+ );
+ if (toggleButton) {
+ toggleButton.style.width = `${getLineNumberWidth(editor)}px`;
+ }
+}
diff --git a/devtools/client/debugger/src/utils/url.js b/devtools/client/debugger/src/utils/url.js
new file mode 100644
index 0000000000..2aabc31258
--- /dev/null
+++ b/devtools/client/debugger/src/utils/url.js
@@ -0,0 +1,75 @@
+/* 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/>. */
+
+const defaultUrl = {
+ hash: "",
+ host: "",
+ hostname: "",
+ href: "",
+ origin: "null",
+ password: "",
+ path: "",
+ pathname: "",
+ port: "",
+ protocol: "",
+ search: "",
+ // This should be a "URLSearchParams" object
+ searchParams: {},
+ username: "",
+};
+
+const parseCache = new Map();
+export function parse(url) {
+ if (parseCache.has(url)) {
+ return parseCache.get(url);
+ }
+
+ let urlObj;
+ try {
+ urlObj = new URL(url);
+ } catch (err) {
+ urlObj = { ...defaultUrl };
+ // If we're given simply a filename...
+ if (url) {
+ const hashStart = url.indexOf("#");
+ if (hashStart >= 0) {
+ urlObj.hash = url.slice(hashStart);
+ url = url.slice(0, hashStart);
+
+ if (urlObj.hash === "#") {
+ // The standard URL parser does not include the ? unless there are
+ // parameters included in the search value.
+ urlObj.hash = "";
+ }
+ }
+
+ const queryStart = url.indexOf("?");
+ if (queryStart >= 0) {
+ urlObj.search = url.slice(queryStart);
+ url = url.slice(0, queryStart);
+
+ if (urlObj.search === "?") {
+ // The standard URL parser does not include the ? unless there are
+ // parameters included in the search value.
+ urlObj.search = "";
+ }
+ }
+
+ urlObj.pathname = url;
+ }
+ }
+ // When provided a special URL like "webpack:///webpack/foo",
+ // prevents passing the three slashes in the path, and pass only onea.
+ // This will prevent displaying modules in empty-name sub folders.
+ urlObj.pathname = urlObj.pathname.replace(/\/+/, "/");
+ urlObj.path = urlObj.pathname + urlObj.search;
+
+ // Cache the result
+ parseCache.set(url, urlObj);
+ return urlObj;
+}
+
+export function sameOrigin(firstUrl, secondUrl) {
+ return parse(firstUrl).origin == parse(secondUrl).origin;
+}
diff --git a/devtools/client/debugger/src/utils/utils.js b/devtools/client/debugger/src/utils/utils.js
new file mode 100644
index 0000000000..7e3ed83032
--- /dev/null
+++ b/devtools/client/debugger/src/utils/utils.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/>. */
+
+const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js");
+
+/**
+ * Utils for utils, by utils
+ * @module utils/utils
+ */
+
+/**
+ * @memberof utils/utils
+ * @static
+ */
+export function handleError(err) {
+ console.log("ERROR: ", err);
+}
+
+/**
+ * @memberof utils/utils
+ * @static
+ */
+export function promisify(context, method, ...args) {
+ return new Promise((resolve, reject) => {
+ args.push(response => {
+ if (response.error) {
+ reject(response);
+ } else {
+ resolve(response);
+ }
+ });
+ method.apply(context, args);
+ });
+}
+
+/**
+ * @memberof utils/utils
+ * @static
+ */
+export function endTruncateStr(str, size) {
+ if (str.length > size) {
+ return `…${str.slice(str.length - size)}`;
+ }
+ return str;
+}
+
+export function waitForMs(ms) {
+ return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+export async function saveAsLocalFile(content, fileName) {
+ if (content.type !== "text") {
+ return null;
+ }
+
+ const data = new TextEncoder().encode(content.value);
+ return DevToolsUtils.saveAs(window, data, fileName);
+}
diff --git a/devtools/client/debugger/src/utils/wasm.js b/devtools/client/debugger/src/utils/wasm.js
new file mode 100644
index 0000000000..f2879af535
--- /dev/null
+++ b/devtools/client/debugger/src/utils/wasm.js
@@ -0,0 +1,166 @@
+/* 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 { BinaryReader } from "devtools/client/shared/vendor/WasmParser";
+import {
+ WasmDisassembler,
+ NameSectionReader,
+} from "devtools/client/shared/vendor/WasmDis";
+
+var wasmStates = Object.create(null);
+
+function maybeWasmSectionNameResolver(data) {
+ try {
+ const parser = new BinaryReader();
+ parser.setData(data.buffer, 0, data.length);
+ const reader = new NameSectionReader();
+ reader.read(parser);
+ return reader.hasValidNames() ? reader.getNameResolver() : null;
+ } catch (ex) {
+ // Ignoring any errors during names section retrival.
+ return null;
+ }
+}
+
+/**
+ * @memberof utils/wasm
+ * @static
+ */
+export function getWasmText(sourceId, data) {
+ const nameResolver = maybeWasmSectionNameResolver(data);
+ const parser = new BinaryReader();
+ let result;
+ parser.setData(data.buffer, 0, data.length);
+ const dis = new WasmDisassembler();
+ if (nameResolver) {
+ dis.nameResolver = nameResolver;
+ }
+ dis.addOffsets = true;
+ try {
+ const done = dis.disassembleChunk(parser);
+ result = dis.getResult();
+ if (result.lines.length === 0) {
+ result = { lines: ["No luck with wast conversion"], offsets: [0], done };
+ }
+ } catch (e) {
+ result = {
+ lines: [`Error occured during wast conversion : ${e.message}`],
+ offsets: [0],
+ done: null,
+ };
+ }
+
+ const { offsets } = result;
+ const lines = [];
+ for (let i = 0; i < offsets.length; i++) {
+ lines[offsets[i]] = i;
+ }
+
+ wasmStates[sourceId] = { offsets, lines };
+
+ return { lines: result.lines, done: result.done };
+}
+
+/**
+ * @memberof utils/wasm
+ * @static
+ */
+export function getWasmLineNumberFormatter(sourceId) {
+ const codeOf0 = 48,
+ codeOfA = 65;
+ const buffer = [
+ codeOf0,
+ codeOf0,
+ codeOf0,
+ codeOf0,
+ codeOf0,
+ codeOf0,
+ codeOf0,
+ codeOf0,
+ ];
+ let last0 = 7;
+ return function (number) {
+ const offset = lineToWasmOffset(sourceId, number - 1);
+ if (offset == undefined) {
+ return "";
+ }
+ let i = 7;
+ for (let n = offset; n !== 0 && i >= 0; n >>= 4, i--) {
+ const nibble = n & 15;
+ buffer[i] = nibble < 10 ? codeOf0 + nibble : codeOfA - 10 + nibble;
+ }
+ for (let j = i; j > last0; j--) {
+ buffer[j] = codeOf0;
+ }
+ last0 = i;
+ return String.fromCharCode.apply(null, buffer);
+ };
+}
+
+/**
+ * @memberof utils/wasm
+ * @static
+ */
+export function isWasm(sourceId) {
+ return sourceId in wasmStates;
+}
+
+/**
+ * @memberof utils/wasm
+ * @static
+ */
+export function lineToWasmOffset(sourceId, number) {
+ const wasmState = wasmStates[sourceId];
+ if (!wasmState) {
+ return undefined;
+ }
+ let offset = wasmState.offsets[number];
+ while (offset === undefined && number > 0) {
+ offset = wasmState.offsets[--number];
+ }
+ return offset;
+}
+
+/**
+ * @memberof utils/wasm
+ * @static
+ */
+export function wasmOffsetToLine(sourceId, offset) {
+ const wasmState = wasmStates[sourceId];
+ if (!wasmState) {
+ return undefined;
+ }
+ return wasmState.lines[offset];
+}
+
+/**
+ * @memberof utils/wasm
+ * @static
+ */
+export function clearWasmStates() {
+ wasmStates = Object.create(null);
+}
+
+const wasmLines = new WeakMap();
+export function renderWasmText(sourceId, content) {
+ if (wasmLines.has(content)) {
+ return wasmLines.get(content) || [];
+ }
+
+ // binary does not survive as Uint8Array, converting from string
+ const { binary } = content.value;
+ const data = new Uint8Array(binary.length);
+ for (let i = 0; i < data.length; i++) {
+ data[i] = binary.charCodeAt(i);
+ }
+ const { lines } = getWasmText(sourceId, data);
+ const MAX_LINES = 1000000;
+ if (lines.length > MAX_LINES) {
+ lines.splice(MAX_LINES, lines.length - MAX_LINES);
+ lines.push(";; .... text is truncated due to the size");
+ }
+
+ wasmLines.set(content, lines);
+ return lines;
+}
diff --git a/devtools/client/debugger/src/utils/worker.js b/devtools/client/debugger/src/utils/worker.js
new file mode 100644
index 0000000000..8cd7071466
--- /dev/null
+++ b/devtools/client/debugger/src/utils/worker.js
@@ -0,0 +1,49 @@
+/* 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/>. */
+
+let msgId = 1;
+/**
+ * @memberof utils/utils
+ * @static
+ */
+function workerTask(worker, method) {
+ return function (...args) {
+ return new Promise((resolve, reject) => {
+ const id = msgId++;
+ worker.postMessage({ id, method, args });
+
+ const listener = ({ data: result }) => {
+ if (result.id !== id) {
+ return;
+ }
+
+ worker.removeEventListener("message", listener);
+ if (result.error) {
+ reject(result.error);
+ } else {
+ resolve(result.response);
+ }
+ };
+
+ worker.addEventListener("message", listener);
+ });
+ };
+}
+
+function workerHandler(publicInterface) {
+ return function onTask(msg) {
+ const { id, method, args } = msg.data;
+ const response = publicInterface[method].apply(null, args);
+
+ if (response instanceof Promise) {
+ response
+ .then(val => self.postMessage({ id, response: val }))
+ .catch(error => self.postMessage({ id, error }));
+ } else {
+ self.postMessage({ id, response });
+ }
+ };
+}
+
+export { workerTask, workerHandler };