diff options
Diffstat (limited to 'devtools/client/debugger')
152 files changed, 1535 insertions, 891 deletions
diff --git a/devtools/client/debugger/dist/parser-worker.js b/devtools/client/debugger/dist/parser-worker.js index ea014d7529..f120a4753b 100644 --- a/devtools/client/debugger/dist/parser-worker.js +++ b/devtools/client/debugger/dist/parser-worker.js @@ -41012,7 +41012,7 @@ Please specify the "importAttributesKeyword" generator option, whose value can b function hasTopLevelAwait(ast) { const hasAwait = hasNode( ast, - (node, ancestors, b) => libExports$2.isAwaitExpression(node) && isTopLevel(ancestors) + (node, ancestors) => libExports$2.isAwaitExpression(node) && isTopLevel(ancestors) ); return hasAwait; diff --git a/devtools/client/debugger/images/sourcemap-active.svg b/devtools/client/debugger/images/sourcemap-active.svg new file mode 100644 index 0000000000..e86ddc68ec --- /dev/null +++ b/devtools/client/debugger/images/sourcemap-active.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" fill-rule="evenodd" clip-rule="evenodd" d="M8.17949 1.03333C8.06395 0.988891 7.93604 0.988891 7.82051 1.03333L1.32051 3.53333C1.12741 3.60759 1 3.79311 1 4V12C1 12.2069 1.12741 12.3924 1.32051 12.4667L7.82051 14.9667C7.93604 15.0111 8.06395 15.0111 8.17949 14.9667L14.6795 12.4667C14.8726 12.3924 15 12.2069 15 12V4C15 3.79311 14.8726 3.60759 14.6795 3.53333L8.17949 1.03333ZM8.5 13.772V6.8434L14 4.72801V11.6566L8.5 13.772ZM8 5.96429L13.1072 4L8 2.03571L2.89284 4L8 5.96429Z"/> +</svg> diff --git a/devtools/client/debugger/images/sourcemap-disabled.svg b/devtools/client/debugger/images/sourcemap-disabled.svg new file mode 100644 index 0000000000..15ce9964df --- /dev/null +++ b/devtools/client/debugger/images/sourcemap-disabled.svg @@ -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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M0.146447 14.1464C-0.0488155 14.3417 -0.0488155 14.6583 0.146447 14.8536C0.341709 15.0488 0.658291 15.0488 0.853553 14.8536L14.8536 0.853553C15.0488 0.658291 15.0488 0.341709 14.8536 0.146447C14.6583 -0.0488156 14.3417 -0.0488154 14.1464 0.146447L11.6262 2.66668L8.67949 1.53333C8.56396 1.48889 8.43604 1.48889 8.32051 1.53333L1.82051 4.03333C1.62741 4.10759 1.5 4.29311 1.5 4.5V12.5C1.5 12.5836 1.52082 12.6638 1.55839 12.7345L0.146447 14.1464ZM8.0151 6.27779L10.8524 3.44048L8.5 2.53571L3.39284 4.5L8.0151 6.27779Z" fill="context-fill"/> + <path d="M3.77977 13.7202L9 8.5V14.272L14.5 12.1566V3.77199L15.1795 4.03333C15.3726 4.10759 15.5 4.29311 15.5 4.5V12.5C15.5 12.7069 15.3726 12.8924 15.1795 12.9667L8.67949 15.4667C8.56396 15.5111 8.43604 15.5111 8.32051 15.4667L3.77977 13.7202Z" fill="context-fill"/> +</svg> diff --git a/devtools/client/debugger/images/sourcemap.svg b/devtools/client/debugger/images/sourcemap.svg index a760dc6edc..e53133148c 100644 --- a/devtools/client/debugger/images/sourcemap.svg +++ b/devtools/client/debugger/images/sourcemap.svg @@ -3,4 +3,4 @@ - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="context-fill" fill-rule="evenodd" clip-rule="evenodd" d="M8.17949 1.03333C8.06395 0.988891 7.93604 0.988891 7.82051 1.03333L1.32051 3.53333C1.12741 3.60759 1 3.79311 1 4V12C1 12.2069 1.12741 12.3924 1.32051 12.4667L7.82051 14.9667C7.93604 15.0111 8.06395 15.0111 8.17949 14.9667L14.6795 12.4667C14.8726 12.3924 15 12.2069 15 12V4C15 3.79311 14.8726 3.60759 14.6795 3.53333L8.17949 1.03333ZM8.5 13.772V6.8434L14 4.72801V11.6566L8.5 13.772ZM8 5.96429L13.1072 4L11.25 3.28571L6.14284 5.25L8 5.96429ZM8 2.03571L9.85716 2.75L4.75 4.71429L2.89284 4L8 2.03571Z"/> -</svg>
\ No newline at end of file +</svg> diff --git a/devtools/client/debugger/src/.eslintrc.js b/devtools/client/debugger/src/.eslintrc.js index b71126767c..ec6d77b504 100644 --- a/devtools/client/debugger/src/.eslintrc.js +++ b/devtools/client/debugger/src/.eslintrc.js @@ -108,9 +108,6 @@ module.exports = { "global-strict": 0, // Only useful in a node environment. "handle-callback-err": 0, - // Don't enforce the maximum depth that blocks can be nested. The complexity - // rule is a better rule to check this. - "max-depth": 0, // Maximum depth callbacks can be nested. "max-nested-callbacks": [2, 4], // Don't limit the number of parameters that can be used in a function. @@ -133,10 +130,6 @@ module.exports = { "no-catch-shadow": 2, // Disallow assignment in conditional expressions. "no-cond-assign": 2, - // Allow using the console API. - "no-console": 0, - // Allow using constant expressions in conditions like while (true) - "no-constant-condition": 0, // Allow use of the continue statement. "no-continue": 0, // Disallow control characters in regular expressions. @@ -267,10 +260,6 @@ module.exports = { "no-var": 0, // Allow using TODO/FIXME comments. "no-warning-comments": 0, - // Dont require method and property shorthand syntax for object literals. - // We use this in the code a lot, but not consistently, and this seems more - // like something to check at code review time. - "object-shorthand": 0, // Allow more than one variable declaration per function. "one-var": 0, // Require use of the second argument for parseInt(). diff --git a/devtools/client/debugger/src/actions/ast/setInScopeLines.js b/devtools/client/debugger/src/actions/ast/setInScopeLines.js index 72bd33b59f..5a76ab7f65 100644 --- a/devtools/client/debugger/src/actions/ast/setInScopeLines.js +++ b/devtools/client/debugger/src/actions/ast/setInScopeLines.js @@ -27,11 +27,7 @@ function getOutOfScopeLines(outOfScopeLocations) { return uniqueLines; } -async function getInScopeLines( - location, - sourceTextContent, - { dispatch, getState, parserWorker } -) { +async function getInScopeLines(location, sourceTextContent, { parserWorker }) { let locations = null; if (location.line && parserWorker.isLocationSupported(location)) { locations = await parserWorker.findOutOfScopeLocations(location); diff --git a/devtools/client/debugger/src/actions/breakpoints/index.js b/devtools/client/debugger/src/actions/breakpoints/index.js index 2125ec9ec7..94e9028a1b 100644 --- a/devtools/client/debugger/src/actions/breakpoints/index.js +++ b/devtools/client/debugger/src/actions/breakpoints/index.js @@ -44,7 +44,7 @@ export function addHiddenBreakpoint(location) { * @static */ export function disableBreakpointsInSource(source) { - return async ({ dispatch, getState, client }) => { + return async ({ dispatch, getState }) => { const breakpoints = getBreakpointsForSource(getState(), source); for (const breakpoint of breakpoints) { if (!breakpoint.disabled) { @@ -61,7 +61,7 @@ export function disableBreakpointsInSource(source) { * @static */ export function enableBreakpointsInSource(source) { - return async ({ dispatch, getState, client }) => { + return async ({ dispatch, getState }) => { const breakpoints = getBreakpointsForSource(getState(), source); for (const breakpoint of breakpoints) { if (breakpoint.disabled) { @@ -78,7 +78,7 @@ export function enableBreakpointsInSource(source) { * @static */ export function toggleAllBreakpoints(shouldDisableBreakpoints) { - return async ({ dispatch, getState, client }) => { + return async ({ dispatch, getState }) => { const breakpoints = getBreakpointsList(getState()); for (const breakpoint of breakpoints) { @@ -149,7 +149,7 @@ export function removeBreakpoints(breakpoints) { * @static */ export function removeBreakpointsInSource(source) { - return async ({ dispatch, getState, client }) => { + return async ({ dispatch, getState }) => { const breakpoints = getBreakpointsForSource(getState(), source); for (const breakpoint of breakpoints) { dispatch(removeBreakpoint(breakpoint)); @@ -271,7 +271,7 @@ export function enableBreakpointsAtLine(source, line) { } export function toggleDisabledBreakpoint(breakpoint) { - return ({ dispatch, getState }) => { + return ({ dispatch }) => { if (!breakpoint.disabled) { return dispatch(disableBreakpoint(breakpoint)); } @@ -356,7 +356,7 @@ export function togglePauseOnAny() { } export function setXHRBreakpoint(path, method) { - return ({ dispatch, getState, client }) => { + return ({ dispatch, client }) => { const breakpoint = createXHRBreakpoint(path, method); return dispatch({ diff --git a/devtools/client/debugger/src/actions/breakpoints/syncBreakpoint.js b/devtools/client/debugger/src/actions/breakpoints/syncBreakpoint.js index b24912de58..aec56664d0 100644 --- a/devtools/client/debugger/src/actions/breakpoints/syncBreakpoint.js +++ b/devtools/client/debugger/src/actions/breakpoints/syncBreakpoint.js @@ -14,7 +14,7 @@ import { originalToGeneratedId } from "devtools/client/shared/source-map-loader/ import { getSource } from "../../selectors/index"; import { addBreakpoint, removeBreakpointAtGeneratedLocation } from "./modify"; -async function findBreakpointPosition({ getState, dispatch }, location) { +async function findBreakpointPosition({ dispatch }, location) { const positions = await dispatch(setBreakpointPositions(location)); const position = findPosition(positions, location); diff --git a/devtools/client/debugger/src/actions/breakpoints/tests/__snapshots__/breakpoints.spec.js.snap b/devtools/client/debugger/src/actions/breakpoints/tests/__snapshots__/breakpoints.spec.js.snap index e6abad25d5..69bc4a08b4 100644 --- a/devtools/client/debugger/src/actions/breakpoints/tests/__snapshots__/breakpoints.spec.js.snap +++ b/devtools/client/debugger/src/actions/breakpoints/tests/__snapshots__/breakpoints.spec.js.snap @@ -24,6 +24,8 @@ Array [ "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "a", + "shortName": "a", "url": "http://localhost:8000/examples/a", }, "sourceActor": null, @@ -48,6 +50,8 @@ Array [ "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "a", + "shortName": "a", "url": "http://localhost:8000/examples/a", }, "sourceActor": null, @@ -59,7 +63,6 @@ Array [ "thread": undefined, }, ], - "filename": "a", "source": Object { "displayURL": Object { "fileExtension": "", @@ -75,6 +78,8 @@ Array [ "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "a", + "shortName": "a", "url": "http://localhost:8000/examples/a", }, }, @@ -107,6 +112,8 @@ Array [ "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "a", + "shortName": "a", "url": "http://localhost:8000/examples/a", }, "sourceActor": null, @@ -131,6 +138,8 @@ Array [ "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "a", + "shortName": "a", "url": "http://localhost:8000/examples/a", }, "sourceActor": null, @@ -142,7 +151,6 @@ Array [ "thread": undefined, }, ], - "filename": "a", "source": Object { "displayURL": Object { "fileExtension": "", @@ -158,6 +166,8 @@ Array [ "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "a", + "shortName": "a", "url": "http://localhost:8000/examples/a", }, }, diff --git a/devtools/client/debugger/src/actions/context-menus/editor-breakpoint.js b/devtools/client/debugger/src/actions/context-menus/editor-breakpoint.js index 39ec2f1589..999912966b 100644 --- a/devtools/client/debugger/src/actions/context-menus/editor-breakpoint.js +++ b/devtools/client/debugger/src/actions/context-menus/editor-breakpoint.js @@ -85,7 +85,7 @@ export function showEditorCreateBreakpointContextMenu( location, lineText ) { - return async ({ dispatch, getState }) => { + return async ({ dispatch }) => { const items = createBreakpointItems(location, lineText, dispatch); showMenu(event, items); diff --git a/devtools/client/debugger/src/actions/context-menus/editor.js b/devtools/client/debugger/src/actions/context-menus/editor.js index 1125790a9b..1cad1e2131 100644 --- a/devtools/client/debugger/src/actions/context-menus/editor.js +++ b/devtools/client/debugger/src/actions/context-menus/editor.js @@ -8,7 +8,6 @@ import { copyToTheClipboard } from "../../utils/clipboard"; import { isPretty, getRawSourceURL, - getFilename, shouldBlackbox, findBlackBoxRange, } from "../../utils/source"; @@ -255,7 +254,7 @@ const blackBoxLinesMenuItem = ( editor, blackboxedRanges, isSourceOnIgnoreList, - clickedLine = null, + clickedLine, dispatch ) => { const { codeMirror } = editor; @@ -321,7 +320,7 @@ const downloadFileItem = (selectedSource, selectedContent) => ({ id: "node-menu-download-file", label: L10N.getStr("downloadFile.label"), accesskey: L10N.getStr("downloadFile.accesskey"), - click: () => downloadFile(selectedContent, getFilename(selectedSource)), + click: () => downloadFile(selectedContent, selectedSource.shortName), }); const inlinePreviewItem = dispatch => ({ diff --git a/devtools/client/debugger/src/actions/context-menus/frame.js b/devtools/client/debugger/src/actions/context-menus/frame.js index 1d287b1028..a517b55e07 100644 --- a/devtools/client/debugger/src/actions/context-menus/frame.js +++ b/devtools/client/debugger/src/actions/context-menus/frame.js @@ -26,7 +26,7 @@ function formatMenuElement(labelString, click, disabled = false) { }; } -function isValidRestartFrame(frame, callbacks) { +function isValidRestartFrame(frame) { // Any frame state than 'on-stack' is either dismissed by the server // or can potentially cause unexpected errors. // Global frame has frame.callee equal to null and can't be restarted. @@ -34,7 +34,7 @@ function isValidRestartFrame(frame, callbacks) { } function copyStackTrace() { - return async ({ dispatch, getState }) => { + return async ({ getState }) => { const frames = getCurrentThreadFrames(getState()); const shouldDisplayOriginalLocation = getShouldSelectOriginalLocation( getState() diff --git a/devtools/client/debugger/src/actions/expressions.js b/devtools/client/debugger/src/actions/expressions.js index 8ccb6013ba..383f191506 100644 --- a/devtools/client/debugger/src/actions/expressions.js +++ b/devtools/client/debugger/src/actions/expressions.js @@ -23,7 +23,7 @@ import { features } from "../utils/prefs"; * @param {string} input */ export function addExpression(input) { - return async ({ dispatch, getState, parserWorker }) => { + return async ({ dispatch, getState }) => { if (!input) { return null; } @@ -64,7 +64,7 @@ export function clearAutocomplete() { } export function updateExpression(input, expression) { - return async ({ getState, dispatch, parserWorker }) => { + return async ({ dispatch }) => { if (!input) { return; } diff --git a/devtools/client/debugger/src/actions/file-search.js b/devtools/client/debugger/src/actions/file-search.js index cc5794d7ab..fb8cfe8475 100644 --- a/devtools/client/debugger/src/actions/file-search.js +++ b/devtools/client/debugger/src/actions/file-search.js @@ -30,7 +30,7 @@ export function querySearchWorker(query, text, modifiers) { } export function searchContentsForHighlight(query, editor, line, ch) { - return async ({ getState, dispatch }) => { + return async ({ getState }) => { const modifiers = getSearchOptions(getState(), "file-search"); const sourceTextContent = getSelectedSourceTextContent(getState()); diff --git a/devtools/client/debugger/src/actions/navigation.js b/devtools/client/debugger/src/actions/navigation.js index 1b437837c2..839d67a31a 100644 --- a/devtools/client/debugger/src/actions/navigation.js +++ b/devtools/client/debugger/src/actions/navigation.js @@ -18,13 +18,7 @@ import { evaluateExpressionsForCurrentContext } from "../actions/expressions"; * @static */ export function willNavigate(event) { - return async function ({ - dispatch, - getState, - client, - sourceMapLoader, - parserWorker, - }) { + return async function ({ dispatch, getState, sourceMapLoader }) { sourceQueue.clear(); sourceMapLoader.clearSourceMaps(); clearWasmStates(); @@ -42,7 +36,7 @@ export function willNavigate(event) { * @static */ export function navigated() { - return async function ({ getState, dispatch, panel }) { + return async function ({ dispatch, panel }) { try { // Update the watched expressions once the page is fully loaded await dispatch(evaluateExpressionsForCurrentContext()); diff --git a/devtools/client/debugger/src/actions/pause/commands.js b/devtools/client/debugger/src/actions/pause/commands.js index 0bb371bf6e..1623add274 100644 --- a/devtools/client/debugger/src/actions/pause/commands.js +++ b/devtools/client/debugger/src/actions/pause/commands.js @@ -17,7 +17,7 @@ import { recordEvent } from "../../utils/telemetry"; import { validateFrame } from "../../utils/context"; export function selectThread(thread) { - return async ({ dispatch, getState, client }) => { + return async ({ dispatch, getState }) => { if (getCurrentThread(getState()) === thread) { return; } diff --git a/devtools/client/debugger/src/actions/pause/expandScopes.js b/devtools/client/debugger/src/actions/pause/expandScopes.js index af95f16fea..1f7b7caac1 100644 --- a/devtools/client/debugger/src/actions/pause/expandScopes.js +++ b/devtools/client/debugger/src/actions/pause/expandScopes.js @@ -5,7 +5,7 @@ import { getScopeItemPath } from "../../utils/pause/scopes"; export function setExpandedScope(selectedFrame, item, expanded) { - return function ({ dispatch, getState }) { + return function ({ dispatch }) { return dispatch({ type: "SET_EXPANDED_SCOPE", selectedFrame, diff --git a/devtools/client/debugger/src/actions/pause/pauseOnDebuggerStatement.js b/devtools/client/debugger/src/actions/pause/pauseOnDebuggerStatement.js index 7b2b1d70cb..7d82fd44a8 100644 --- a/devtools/client/debugger/src/actions/pause/pauseOnDebuggerStatement.js +++ b/devtools/client/debugger/src/actions/pause/pauseOnDebuggerStatement.js @@ -5,7 +5,7 @@ import { PROMISE } from "../utils/middleware/promise"; export function pauseOnDebuggerStatement(shouldPauseOnDebuggerStatement) { - return ({ dispatch, getState, client }) => { + return ({ dispatch, client }) => { return dispatch({ type: "PAUSE_ON_DEBUGGER_STATEMENT", shouldPauseOnDebuggerStatement, diff --git a/devtools/client/debugger/src/actions/pause/pauseOnExceptions.js b/devtools/client/debugger/src/actions/pause/pauseOnExceptions.js index e7c04ded61..fe2f3e882a 100644 --- a/devtools/client/debugger/src/actions/pause/pauseOnExceptions.js +++ b/devtools/client/debugger/src/actions/pause/pauseOnExceptions.js @@ -14,7 +14,7 @@ export function pauseOnExceptions( shouldPauseOnExceptions, shouldPauseOnCaughtExceptions ) { - return ({ dispatch, getState, client }) => { + return ({ dispatch, client }) => { recordEvent("pause_on_exceptions", { exceptions: shouldPauseOnExceptions, // There's no "n" in the key below (#1463117) diff --git a/devtools/client/debugger/src/actions/pause/resumed.js b/devtools/client/debugger/src/actions/pause/resumed.js index 47d55f84ca..2095bacc3b 100644 --- a/devtools/client/debugger/src/actions/pause/resumed.js +++ b/devtools/client/debugger/src/actions/pause/resumed.js @@ -14,7 +14,7 @@ import { inDebuggerEval } from "../../utils/pause/index"; * Debugger has just resumed. */ export function resumed(thread) { - return async ({ dispatch, client, getState }) => { + return async ({ dispatch, getState }) => { const why = getPauseReason(getState(), thread); const wasPausedInEval = inDebuggerEval(why); const wasStepping = isStepping(getState(), thread); diff --git a/devtools/client/debugger/src/actions/pause/tests/pause.spec.js b/devtools/client/debugger/src/actions/pause/tests/pause.spec.js index f8bd87375a..6c69ac4661 100644 --- a/devtools/client/debugger/src/actions/pause/tests/pause.spec.js +++ b/devtools/client/debugger/src/actions/pause/tests/pause.spec.js @@ -25,7 +25,7 @@ const mockCommandClient = { getFrames: async () => [], setBreakpoint: () => new Promise(_resolve => {}), sourceContents: ({ source }) => { - return new Promise((resolve, reject) => { + return new Promise(resolve => { switch (source) { case "foo1": return resolve({ @@ -184,7 +184,7 @@ describe("pause", () => { it("maps frame to original frames", async () => { const sourceMapLoaderMock = { - getOriginalStackFrames: loc => Promise.resolve(originStackFrames), + getOriginalStackFrames: () => Promise.resolve(originStackFrames), getOriginalLocation: () => Promise.resolve(debuggerToSourceMapLocation(originalLocation)), getOriginalLocations: async items => diff --git a/devtools/client/debugger/src/actions/preview.js b/devtools/client/debugger/src/actions/preview.js index c3bc8dbffd..3b3637e2c0 100644 --- a/devtools/client/debugger/src/actions/preview.js +++ b/devtools/client/debugger/src/actions/preview.js @@ -128,7 +128,7 @@ export function getPreview(target, tokenPos, codeMirror) { } export function getExceptionPreview(target, tokenPos, codeMirror) { - return async ({ dispatch, getState, parserWorker }) => { + return async ({ getState, parserWorker }) => { const match = await findExpressionMatch( getState(), parserWorker, diff --git a/devtools/client/debugger/src/actions/sources/loadSourceText.js b/devtools/client/debugger/src/actions/sources/loadSourceText.js index d3bbd53871..b523b1984a 100644 --- a/devtools/client/debugger/src/actions/sources/loadSourceText.js +++ b/devtools/client/debugger/src/actions/sources/loadSourceText.js @@ -43,7 +43,7 @@ async function loadGeneratedSource(sourceActor, { client }) { async function loadOriginalSource( source, - { getState, client, sourceMapLoader, prettyPrintWorker } + { getState, sourceMapLoader, prettyPrintWorker } ) { if (isPretty(source)) { const generatedSource = getGeneratedSource(getState(), source); diff --git a/devtools/client/debugger/src/actions/sources/newSources.js b/devtools/client/debugger/src/actions/sources/newSources.js index 4d9c2cd5f7..44e8595c42 100644 --- a/devtools/client/debugger/src/actions/sources/newSources.js +++ b/devtools/client/debugger/src/actions/sources/newSources.js @@ -36,30 +36,22 @@ import { prefs } from "../../utils/prefs"; import sourceQueue from "../../utils/source-queue"; import { validateSourceActor, ContextError } from "../../utils/context"; -function loadSourceMaps(sources) { +function loadSourceMapsForSourceActors(sourceActors) { return async function ({ dispatch }) { try { - const sourceList = await Promise.all( - sources.map(async sourceActor => { - const originalSourcesInfo = await dispatch( - loadSourceMap(sourceActor) - ); - originalSourcesInfo.forEach( - sourcesInfo => (sourcesInfo.sourceActor = sourceActor) - ); - sourceQueue.queueOriginalSources(originalSourcesInfo); - return originalSourcesInfo; - }) + await Promise.all( + sourceActors.map(sourceActor => dispatch(loadSourceMap(sourceActor))) ); - - await sourceQueue.flush(); - return sourceList.flat(); } catch (error) { + // This may throw a context error if we navigated while processing the source maps if (!(error instanceof ContextError)) { throw error; } } - return []; + + // Once all the source maps, of all the bulk of new source actors are processed, + // flush the SourceQueue. This help aggregate all the original sources in one action. + await sourceQueue.flush(); }; } @@ -70,7 +62,7 @@ function loadSourceMaps(sources) { function loadSourceMap(sourceActor) { return async function ({ dispatch, getState, sourceMapLoader, panel }) { if (!prefs.clientSourceMapsEnabled || !sourceActor.sourceMapURL) { - return []; + return; } let sources, ignoreListUrls, resolvedSourceMapURL, exception; @@ -135,12 +127,20 @@ function loadSourceMap(sourceActor) { type: "CLEAR_SOURCE_ACTOR_MAP_URL", sourceActor, }); - return []; + return; } // Before dispatching this action, ensure that the related sourceActor is still registered validateSourceActor(getState(), sourceActor); - return sources; + + for (const originalSource of sources) { + // The Source Map worker doesn't set the `sourceActor` attribute, + // which is handy to know what is the related bundle. + originalSource.sourceActor = sourceActor; + } + + // Register all the new reported original sources in the queue to be flushed once all new bundles are processed. + sourceQueue.queueOriginalSources(sources); }; } @@ -294,7 +294,7 @@ export function newGeneratedSource(sourceInfo) { } export function newGeneratedSources(sourceResources) { - return async ({ dispatch, getState, client }) => { + return async ({ dispatch, getState }) => { if (!sourceResources.length) { return []; } @@ -341,7 +341,7 @@ export function newGeneratedSources(sourceResources) { await dispatch(checkNewSources(newSources)); (async () => { - await dispatch(loadSourceMaps(newSourceActors)); + await dispatch(loadSourceMapsForSourceActors(newSourceActors)); // We would like to sync breakpoints after we are done // loading source maps as sometimes generated and original @@ -370,7 +370,7 @@ export function newGeneratedSources(sourceResources) { } function checkNewSources(sources) { - return async ({ dispatch, getState }) => { + return async ({ dispatch }) => { for (const source of sources) { dispatch(checkSelectedSource(source.id)); } diff --git a/devtools/client/debugger/src/actions/sources/prettyPrint.js b/devtools/client/debugger/src/actions/sources/prettyPrint.js index 6a12a34240..d1e46ac949 100644 --- a/devtools/client/debugger/src/actions/sources/prettyPrint.js +++ b/devtools/client/debugger/src/actions/sources/prettyPrint.js @@ -224,7 +224,7 @@ async function prettyPrintHtmlFile({ } function createPrettySource(source, sourceActor) { - return async ({ dispatch, sourceMapLoader, getState }) => { + return async ({ dispatch }) => { const url = getPrettyOriginalSourceURL(source); const id = generatedToOriginalId(source.id, url); const prettySource = createPrettyPrintOriginalSource(id, url); @@ -336,7 +336,7 @@ const memoizedPrettyPrintSource = memoizeableAction("setSymbols", { }); export function prettyPrintAndSelectSource(source) { - return async ({ dispatch, sourceMapLoader, getState }) => { + return async ({ dispatch }) => { const prettySource = await dispatch(memoizedPrettyPrintSource(source)); // Select the pretty/original source based on the location we may diff --git a/devtools/client/debugger/src/actions/sources/select.js b/devtools/client/debugger/src/actions/sources/select.js index 63200a398a..f25267374b 100644 --- a/devtools/client/debugger/src/actions/sources/select.js +++ b/devtools/client/debugger/src/actions/sources/select.js @@ -63,6 +63,11 @@ export const clearSelectedLocation = () => ({ type: "CLEAR_SELECTED_LOCATION", }); +export const setDefaultSelectedLocation = shouldSelectOriginalLocation => ({ + type: "SET_DEFAULT_SELECTED_LOCATION", + shouldSelectOriginalLocation, +}); + /** * Deterministically select a source that has a given URL. This will * work regardless of the connection status or if the source exists @@ -105,6 +110,76 @@ export function selectSource(source, sourceActor) { } /** + * Helper for `selectLocation`. + * Based on `keepContext` argument passed to `selectLocation`, + * this will automatically select the related mapped source (original or generated). + * + * @param {Object} location + * The location to select. + * @param {Boolean} keepContext + * If true, will try to select a mapped source. + * @param {Object} thunkArgs + * @return {Object} + * Object with two attributes: + * - `shouldSelectOriginalLocation`, to know if we should keep trying to select the original location + * - `newLocation`, for the final location to select + */ +async function mayBeSelectMappedSource(location, keepContext, thunkArgs) { + const { getState, dispatch } = thunkArgs; + // Preserve the current source map context (original / generated) + // when navigating to a new location. + // i.e. if keepContext isn't manually overriden to false, + // we will convert the source we want to select to either + // original/generated in order to match the currently selected one. + // If the currently selected source is original, we will + // automatically map `location` to refer to the original source, + // even if that used to refer only to the generated source. + let shouldSelectOriginalLocation = getShouldSelectOriginalLocation( + getState() + ); + if (keepContext) { + // Pretty print source may not be registered yet and getRelatedMapLocation may not return it. + // Wait for the pretty print source to be fully processed. + if ( + !location.source.isOriginal && + shouldSelectOriginalLocation && + hasPrettyTab(getState(), location.source) + ) { + // Note that prettyPrintAndSelectSource has already been called a bit before when this generated source has been added + // but it is a slow operation and is most likely not resolved yet. + // prettyPrintAndSelectSource uses memoization to avoid doing the operation more than once, while waiting from both callsites. + await dispatch(prettyPrintAndSelectSource(location.source)); + } + if (shouldSelectOriginalLocation != location.source.isOriginal) { + // Only try to map if the source is mapped. i.e. is original source or a bundle with a valid source map comment + if ( + location.source.isOriginal || + isSourceActorWithSourceMap(getState(), location.sourceActor.id) + ) { + // getRelatedMapLocation will convert to the related generated/original location. + // i.e if the original location is passed, the related generated location will be returned and vice versa. + location = await getRelatedMapLocation(location, thunkArgs); + } + // Note that getRelatedMapLocation may return the exact same location. + // For example, if the source-map is half broken, it may return a generated location + // while we were selecting original locations. So we may be seeing bundles intermittently + // when stepping through broken source maps. And we will see original sources when stepping + // through functional original sources. + } + } else if ( + location.source.isOriginal || + isSourceActorWithSourceMap(getState(), location.sourceActor.id) + ) { + // Only update this setting if the source is mapped. i.e. don't update if we select a regular source. + // The source is mapped when it is either: + // - an original source, + // - a bundle with a source map comment referencing a source map URL. + shouldSelectOriginalLocation = location.source.isOriginal; + } + return { shouldSelectOriginalLocation, newLocation: location }; +} + +/** * Select a new location. * This will automatically select the source in the source tree (if visible) * and open the source (a new tab and the source editor) @@ -144,47 +219,28 @@ export function selectLocation( return; } - // Preserve the current source map context (original / generated) - // when navigating to a new location. - // i.e. if keepContext isn't manually overriden to false, - // we will convert the source we want to select to either - // original/generated in order to match the currently selected one. - // If the currently selected source is original, we will - // automatically map `location` to refer to the original source, - // even if that used to refer only to the generated source. - let shouldSelectOriginalLocation = getShouldSelectOriginalLocation( - getState() - ); - if (keepContext) { - // Pretty print source may not be registered yet and getRelatedMapLocation may not return it. - // Wait for the pretty print source to be fully processed. - if ( - !location.source.isOriginal && - shouldSelectOriginalLocation && - hasPrettyTab(getState(), location.source) - ) { - // Note that prettyPrintAndSelectSource has already been called a bit before when this generated source has been added - // but it is a slow operation and is most likely not resolved yet. - // prettyPrintAndSelectSource uses memoization to avoid doing the operation more than once, while waiting from both callsites. - await dispatch(prettyPrintAndSelectSource(location.source)); - } - if (shouldSelectOriginalLocation != location.source.isOriginal) { - // getRelatedMapLocation will convert to the related generated/original location. - // i.e if the original location is passed, the related generated location will be returned and vice versa. - location = await getRelatedMapLocation(location, thunkArgs); - // Note that getRelatedMapLocation may return the exact same location. - // For example, if the source-map is half broken, it may return a generated location - // while we were selecting original locations. So we may be seeing bundles intermittently - // when stepping through broken source maps. And we will see original sources when stepping - // through functional original sources. + let sourceActor = location.sourceActor; + if (!sourceActor) { + sourceActor = getFirstSourceActorForGeneratedSource( + getState(), + source.id + ); + location = createLocation({ ...location, sourceActor }); + } - source = location.source; - } - } else { - shouldSelectOriginalLocation = location.source.isOriginal; + const lastSelectedLocation = getSelectedLocation(getState()); + const { shouldSelectOriginalLocation, newLocation } = + await mayBeSelectMappedSource(location, keepContext, thunkArgs); + + // Ignore the request if another location was selected while we were waiting for mayBeSelectMappedSource async completion + if (getSelectedLocation(getState()) != lastSelectedLocation) { + return; } - let sourceActor = location.sourceActor; + // Update all local variables after mapping + location = newLocation; + source = location.source; + sourceActor = location.sourceActor; if (!sourceActor) { sourceActor = getFirstSourceActorForGeneratedSource( getState(), @@ -351,11 +407,16 @@ export function jumpToMappedLocation(location) { // Map to either an original or a generated source location const pairedLocation = await getRelatedMapLocation(location, thunkArgs); + // If we are on a non-mapped source, this will return the same location + // so ignore the request. + if (pairedLocation == location) { + return null; + } + return dispatch(selectSpecificLocation(pairedLocation)); }; } -// This is only used by tests export function jumpToMappedSelectedLocation() { return async function ({ dispatch, getState }) { const location = getSelectedLocation(getState()); diff --git a/devtools/client/debugger/src/actions/sources/symbols.js b/devtools/client/debugger/src/actions/sources/symbols.js index c7b9132c32..e33c3e1036 100644 --- a/devtools/client/debugger/src/actions/sources/symbols.js +++ b/devtools/client/debugger/src/actions/sources/symbols.js @@ -10,7 +10,7 @@ import { loadSourceText } from "./loadSourceText"; import { memoizeableAction } from "../../utils/memoizableAction"; import { fulfilled } from "../../utils/async-value"; -async function doSetSymbols(location, { dispatch, getState, parserWorker }) { +async function doSetSymbols(location, { dispatch, parserWorker }) { await dispatch(loadSourceText(location.source, location.sourceActor)); await dispatch({ diff --git a/devtools/client/debugger/src/actions/sources/tests/newSources.spec.js b/devtools/client/debugger/src/actions/sources/tests/newSources.spec.js index cef9eca31e..19457a4bf5 100644 --- a/devtools/client/debugger/src/actions/sources/tests/newSources.spec.js +++ b/devtools/client/debugger/src/actions/sources/tests/newSources.spec.js @@ -7,10 +7,9 @@ import { selectors, createStore, makeSource, - makeSourceURL, makeOriginalSource, } from "../../../utils/test-head"; -const { getSource, getSourceCount, getSelectedSource } = selectors; +const { getSource, getSourceCount } = selectors; import { mockCommandClient } from "../../tests/helpers/mockCommandClient"; @@ -49,20 +48,6 @@ describe("sources - new sources", () => { expect(getSourceCount(getState())).toEqual(1); }); - it("should automatically select a pending source", async () => { - const { dispatch, getState } = createStore(mockCommandClient); - const baseSourceURL = makeSourceURL("base.js"); - await dispatch(actions.selectSourceURL(baseSourceURL)); - - expect(getSelectedSource(getState())).toBe(undefined); - const baseSource = await dispatch( - actions.newGeneratedSource(makeSource("base.js")) - ); - - const selected = getSelectedSource(getState()); - expect(selected && selected.url).toBe(baseSource.url); - }); - // eslint-disable-next-line it("should not attempt to fetch original sources if it's missing a source map url", async () => { const loadSourceMap = jest.fn(); diff --git a/devtools/client/debugger/src/actions/sources/tests/select.spec.js b/devtools/client/debugger/src/actions/sources/tests/select.spec.js index 5f4feba6c0..4cf0c58c94 100644 --- a/devtools/client/debugger/src/actions/sources/tests/select.spec.js +++ b/devtools/client/debugger/src/actions/sources/tests/select.spec.js @@ -8,7 +8,6 @@ import { createStore, createSourceObject, makeSource, - makeSourceURL, waitForState, makeOriginalSource, } from "../../../utils/test-head"; @@ -23,7 +22,7 @@ import { createLocation } from "../../../utils/location"; import { mockCommandClient } from "../../tests/helpers/mockCommandClient"; -process.on("unhandledRejection", (reason, p) => {}); +process.on("unhandledRejection", () => {}); function initialLocation(sourceId) { return createLocation({ source: createSourceObject(sourceId), line: 1 }); @@ -176,20 +175,4 @@ describe("sources", () => { const selected = getSelectedLocation(getState()); expect(selected && selected.line).toBe(1); }); - - describe("selectSourceURL", () => { - it("should automatically select a pending source", async () => { - const { dispatch, getState } = createStore(mockCommandClient); - const baseSourceURL = makeSourceURL("base.js"); - await dispatch(actions.selectSourceURL(baseSourceURL)); - - expect(getSelectedSource(getState())).toBe(undefined); - const baseSource = await dispatch( - actions.newGeneratedSource(makeSource("base.js")) - ); - - const selected = getSelectedSource(getState()); - expect(selected && selected.url).toBe(baseSource.url); - }); - }); }); diff --git a/devtools/client/debugger/src/actions/tests/expressions.spec.js b/devtools/client/debugger/src/actions/tests/expressions.spec.js index c69276fa40..093f99e228 100644 --- a/devtools/client/debugger/src/actions/tests/expressions.spec.js +++ b/devtools/client/debugger/src/actions/tests/expressions.spec.js @@ -6,7 +6,7 @@ import { actions, selectors, createStore } from "../../utils/test-head"; const mockThreadFront = { evaluate: (script, { frameId }) => - new Promise((resolve, reject) => { + new Promise(resolve => { if (!frameId) { resolve("bla"); } else { @@ -16,8 +16,8 @@ const mockThreadFront = { evaluateExpressions: (inputs, { frameId }) => Promise.all( inputs.map( - input => - new Promise((resolve, reject) => { + () => + new Promise(resolve => { if (!frameId) { resolve("bla"); } else { diff --git a/devtools/client/debugger/src/actions/tests/helpers/mockCommandClient.js b/devtools/client/debugger/src/actions/tests/helpers/mockCommandClient.js index 38dd55c274..2e0333fc99 100644 --- a/devtools/client/debugger/src/actions/tests/helpers/mockCommandClient.js +++ b/devtools/client/debugger/src/actions/tests/helpers/mockCommandClient.js @@ -29,7 +29,7 @@ const sources = [ ]; export const mockCommandClient = { - sourceContents: function ({ source }) { + sourceContents({ source }) { return new Promise((resolve, reject) => { if (sources.includes(source)) { resolve(createSource(source)); diff --git a/devtools/client/debugger/src/actions/toolbox.js b/devtools/client/debugger/src/actions/toolbox.js index a343c92863..4c88ec6d24 100644 --- a/devtools/client/debugger/src/actions/toolbox.js +++ b/devtools/client/debugger/src/actions/toolbox.js @@ -12,6 +12,12 @@ export function openLink(url) { }; } +export function openSourceMap(url, line, column) { + return async function ({ panel }) { + return panel.toolbox.viewSource(url, line, column); + }; +} + export function evaluateInConsole(inputString) { return async ({ panel }) => { return panel.openConsoleAndEvaluate(inputString); @@ -24,7 +30,7 @@ export function openElementInInspectorCommand(grip) { }; } -export function openInspector(grip) { +export function openInspector() { return async ({ panel }) => { return panel.openInspector(); }; diff --git a/devtools/client/debugger/src/actions/ui.js b/devtools/client/debugger/src/actions/ui.js index 2424c658b8..8d4d62307a 100644 --- a/devtools/client/debugger/src/actions/ui.js +++ b/devtools/client/debugger/src/actions/ui.js @@ -16,7 +16,7 @@ import { selectSource } from "../actions/sources/select"; import { getEditor, getLocationsInViewport, - updateDocuments, + updateEditorLineWrapping, } from "../utils/editor/index"; import { blackboxSourceActorsForSource } from "./sources/blackbox"; import { toggleBreakpoints } from "./breakpoints/index"; @@ -66,7 +66,7 @@ export function setActiveSearch(activeSearch) { } export function toggleFrameworkGrouping(toggleValue) { - return ({ dispatch, getState }) => { + return ({ dispatch }) => { dispatch({ type: "TOGGLE_FRAMEWORK_GROUPING", value: toggleValue, @@ -75,7 +75,7 @@ export function toggleFrameworkGrouping(toggleValue) { } export function toggleInlinePreview(toggleValue) { - return ({ dispatch, getState }) => { + return ({ dispatch }) => { dispatch({ type: "TOGGLE_INLINE_PREVIEW", value: toggleValue, @@ -84,8 +84,8 @@ export function toggleInlinePreview(toggleValue) { } export function toggleEditorWrapping(toggleValue) { - return ({ dispatch, getState }) => { - updateDocuments(doc => doc.cm.setOption("lineWrapping", toggleValue)); + return ({ dispatch }) => { + updateEditorLineWrapping(toggleValue); dispatch({ type: "TOGGLE_EDITOR_WRAPPING", @@ -95,7 +95,7 @@ export function toggleEditorWrapping(toggleValue) { } export function toggleSourceMapsEnabled(toggleValue) { - return ({ dispatch, getState }) => { + return ({ dispatch }) => { dispatch({ type: "TOGGLE_SOURCE_MAPS_ENABLED", value: toggleValue, @@ -217,7 +217,7 @@ export function setSearchOptions(searchKey, searchOptions) { } export function copyToClipboard(location) { - return ({ dispatch, getState }) => { + return ({ getState }) => { const content = getSourceTextContent(getState(), location); if (content && isFulfilled(content) && content.value.type === "text") { copyToTheClipboard(content.value.value); @@ -257,7 +257,7 @@ export function toggleJavascriptTracingOnNextLoad() { } export function setHideOrShowIgnoredSources(shouldHide) { - return ({ dispatch, getState }) => { + return ({ dispatch }) => { dispatch({ type: "HIDE_IGNORED_SOURCES", shouldHide }); }; } diff --git a/devtools/client/debugger/src/actions/utils/middleware/context.js b/devtools/client/debugger/src/actions/utils/middleware/context.js index 00711a8c3f..350a90d66e 100644 --- a/devtools/client/debugger/src/actions/utils/middleware/context.js +++ b/devtools/client/debugger/src/actions/utils/middleware/context.js @@ -27,7 +27,7 @@ function validateActionContext(getState, action) { // Middleware which looks for actions that have a cx property and ignores // them if the context is no longer valid. -function context({ dispatch, getState }) { +function context({ getState }) { return next => action => { if ("cx" in action) { validateActionContext(getState, action); diff --git a/devtools/client/debugger/src/actions/utils/middleware/log.js b/devtools/client/debugger/src/actions/utils/middleware/log.js index b9592ce22c..d228669dd4 100644 --- a/devtools/client/debugger/src/actions/utils/middleware/log.js +++ b/devtools/client/debugger/src/actions/utils/middleware/log.js @@ -92,7 +92,7 @@ function serializeAction(action) { * A middleware that logs all actions coming through the system * to the console. */ -export function log({ dispatch, getState }) { +export function log() { return next => action => { const asyncMsg = !action.status ? "" : `[${action.status}]`; diff --git a/devtools/client/debugger/src/actions/utils/middleware/promise.js b/devtools/client/debugger/src/actions/utils/middleware/promise.js index 52054a1fcc..2b88bb8ca9 100644 --- a/devtools/client/debugger/src/actions/utils/middleware/promise.js +++ b/devtools/client/debugger/src/actions/utils/middleware/promise.js @@ -21,7 +21,7 @@ function seqIdGen() { return seqIdVal++; } -function promiseMiddleware({ dispatch, getState }) { +function promiseMiddleware({ dispatch }) { return next => action => { if (!(PROMISE in action)) { return next(action); @@ -42,7 +42,7 @@ function promiseMiddleware({ dispatch, getState }) { .finally(() => new Promise(resolve => executeSoon(resolve))) .then( value => { - dispatch({ ...action, status: "done", value: value }); + dispatch({ ...action, status: "done", value }); return value; }, error => { diff --git a/devtools/client/debugger/src/actions/utils/middleware/timing.js b/devtools/client/debugger/src/actions/utils/middleware/timing.js index d0bfa05977..8b6b7baf5e 100644 --- a/devtools/client/debugger/src/actions/utils/middleware/timing.js +++ b/devtools/client/debugger/src/actions/utils/middleware/timing.js @@ -9,13 +9,13 @@ const mark = window.performance?.mark ? window.performance.mark.bind(window.performance) - : a => {}; + : () => {}; const measure = window.performance?.measure ? window.performance.measure.bind(window.performance) - : (a, b, c) => {}; + : () => {}; -export function timing(store) { +export function timing() { return next => action => { mark(`${action.type}_start`); const result = next(action); diff --git a/devtools/client/debugger/src/client/firefox.js b/devtools/client/debugger/src/client/firefox.js index 6b76d6d175..8705bf3490 100644 --- a/devtools/client/debugger/src/client/firefox.js +++ b/devtools/client/debugger/src/client/firefox.js @@ -110,7 +110,7 @@ export function onDisconnect() { sourceQueue.clear(); } -async function onTargetAvailable({ targetFront, isTargetSwitching }) { +async function onTargetAvailable({ targetFront }) { const isBrowserToolbox = commands.descriptorFront.isBrowserProcessDescriptor; const isNonTopLevelFrameTarget = !targetFront.isTopLevel && diff --git a/devtools/client/debugger/src/client/firefox/commands.js b/devtools/client/debugger/src/client/firefox/commands.js index 5ef3ba27d0..3f8f62c8fb 100644 --- a/devtools/client/debugger/src/client/firefox/commands.js +++ b/devtools/client/debugger/src/client/firefox/commands.js @@ -115,7 +115,7 @@ async function toggleTracing() { return commands.tracerCommand.toggle(); } -function resume(thread, frameId) { +function resume(thread) { return lookupThreadFront(thread).resume(); } diff --git a/devtools/client/debugger/src/client/firefox/create.js b/devtools/client/debugger/src/client/firefox/create.js index 9c610a08dd..c78e0fb273 100644 --- a/devtools/client/debugger/src/client/firefox/create.js +++ b/devtools/client/debugger/src/client/firefox/create.js @@ -11,7 +11,11 @@ import { getSourceCount, } from "../../selectors/index"; import { features } from "../../utils/prefs"; -import { isUrlExtension } from "../../utils/source"; +import { + isUrlExtension, + getRawSourceURL, + getFormattedSourceId, +} from "../../utils/source"; import { createLocation } from "../../utils/location"; import { getDisplayURL } from "../../utils/sources-tree/getURL"; @@ -242,6 +246,7 @@ function createSourceObject({ isOriginal = false, isHTML = false, }) { + const displayURL = getDisplayURL(url, extensionName); return { // The ID, computed by: // * `makeSourceId` for generated, @@ -254,7 +259,23 @@ function createSourceObject({ // A (slightly tweaked) URL object to represent the source URL. // The URL object is augmented of a "group" attribute and some other standard attributes // are modified from their typical value. See getDisplayURL implementation. - displayURL: getDisplayURL(url, extensionName), + displayURL, + + // Short label for this source. + // + // * For inlined/eval sources without a URL, the name will refer to the internal source ID, + // * For pretty printed source, we take care to ignore the internal ":formatted" suffix used in the URL, + // * For index files, i.e. sources loaded without a filename, they will be named "(index)". + // * Special characters are decoded from the URL string. + // (most of this is done by getDisplayURL) + shortName: url + ? getRawSourceURL(displayURL.filename) + : getFormattedSourceId(id), + + // Same as short name, but with the query parameters. + longName: url + ? getRawSourceURL(displayURL.filename + displayURL.search) + : getFormattedSourceId(id), // Only set for generated sources that are WebExtension sources. // This is especially useful to display the extension name for content scripts diff --git a/devtools/client/debugger/src/components/App.css b/devtools/client/debugger/src/components/App.css index 796bf84574..64a899d047 100644 --- a/devtools/client/debugger/src/components/App.css +++ b/devtools/client/debugger/src/components/App.css @@ -79,6 +79,29 @@ button:hover { gap: 8px; grid-area: notification; display: flex; + /* center text within the notification */ + align-items: center; + + .info.icon { + align-self: normal; + } + + .close-button { + /* set a fixed height in order to avoid having it flexed to full height */ + height: 16px; + padding: 0; + /* put in top-right corner */ + margin-inline-start: auto; + align-self: normal; + + &::before { + display: block; + width: 16px; + height: 16px; + content: ""; + background-image: url("chrome://devtools/skin/images/close.svg"); + } + } } /* Utils */ diff --git a/devtools/client/debugger/src/components/App.js b/devtools/client/debugger/src/components/App.js index 40911e5167..1642a212ef 100644 --- a/devtools/client/debugger/src/components/App.js +++ b/devtools/client/debugger/src/components/App.js @@ -4,6 +4,7 @@ import React, { Component } from "devtools/client/shared/vendor/react"; import { + button, div, main, span, @@ -208,15 +209,23 @@ class App extends Component { } } + closeSourceMapError = () => { + this.setState({ hiddenSourceMapError: this.props.sourceMapError }); + }; + renderEditorNotificationBar() { - if (this.props.sourceMapError) { + if ( + this.props.sourceMapError && + this.state.hiddenSourceMapError != this.props.sourceMapError + ) { return div( { className: "editor-notification-footer", "aria-role": "status" }, span( { className: "info icon" }, React.createElement(AccessibleImage, { className: "sourcemap" }) ), - `Source Map Error: ${this.props.sourceMapError}` + `Source Map Error: ${this.props.sourceMapError}`, + button({ className: "close-button", onClick: this.closeSourceMapError }) ); } if (this.props.showOriginalVariableMappingWarning) { @@ -248,13 +257,13 @@ class App extends Component { className: "editor-container", }, React.createElement(EditorTabs, { - startPanelCollapsed: startPanelCollapsed, - endPanelCollapsed: endPanelCollapsed, - horizontal: horizontal, + startPanelCollapsed, + endPanelCollapsed, + horizontal, }), React.createElement(Editor, { - startPanelSize: startPanelSize, - endPanelSize: endPanelSize, + startPanelSize, + endPanelSize, }), !this.props.selectedLocation ? React.createElement(WelcomeBox, { @@ -313,7 +322,7 @@ class App extends Component { prefs.startPanelSize = num; this.triggerEditorPaneResize(); }, - startPanelCollapsed: startPanelCollapsed, + startPanelCollapsed, startPanel: React.createElement(PrimaryPanes, { horizontal, }), @@ -323,7 +332,7 @@ class App extends Component { endPanel: React.createElement(SecondaryPanes, { horizontal, }), - endPanelCollapsed: endPanelCollapsed, + endPanelCollapsed, }); }; diff --git a/devtools/client/debugger/src/components/Editor/ConditionalPanel.js b/devtools/client/debugger/src/components/Editor/ConditionalPanel.js index 8ff84c287a..97876f2f00 100644 --- a/devtools/client/debugger/src/components/Editor/ConditionalPanel.js +++ b/devtools/client/debugger/src/components/Editor/ConditionalPanel.js @@ -121,7 +121,7 @@ export class ConditionalPanel extends PureComponent { return this.clearConditionalPanel(); } - componentDidUpdate(prevProps) { + componentDidUpdate() { this.keepFocusOnInput(); } diff --git a/devtools/client/debugger/src/components/Editor/Footer.css b/devtools/client/debugger/src/components/Editor/Footer.css index 4a3272879b..f3382e94b5 100644 --- a/devtools/client/debugger/src/components/Editor/Footer.css +++ b/devtools/client/debugger/src/components/Editor/Footer.css @@ -67,6 +67,45 @@ opacity: 0.6; } +.devtools-button.debugger-source-map-button { + display: inline-flex; + align-items: center; + margin: 0; + --menuitem-icon-image: url("chrome://devtools/content/debugger/images/sourcemap.svg"); + + &.not-mapped { + --icon-color: var(--theme-icon-dimmed-color); + } + + &.original { + --icon-color: var(--theme-icon-checked-color); + --menuitem-icon-image: url("chrome://devtools/content/debugger/images/sourcemap-active.svg"); + } + + &.error { + --icon-color: var(--theme-icon-warning-color); + } + + &.disabled { + --icon-color: var(--theme-icon-dimmed-color); + --menuitem-icon-image: url("chrome://devtools/content/debugger/images/sourcemap-disabled.svg"); + } + + &.loading { + --menuitem-icon-image: url("chrome://devtools/content/debugger/images/loader.svg"); + } + + &::before { + /* override default style to have similar left and right margins */ + margin-inline-end: 3px; + color: var(--icon-color, currentColor); + } + + &.loading::before { + animation: spin 2s linear infinite; + } +} + .source-footer .mapped-source, .source-footer .cursor-position { color: var(--theme-body-color); diff --git a/devtools/client/debugger/src/components/Editor/Footer.js b/devtools/client/debugger/src/components/Editor/Footer.js index c4ff02caf4..69c7b52b68 100644 --- a/devtools/client/debugger/src/components/Editor/Footer.js +++ b/devtools/client/debugger/src/components/Editor/Footer.js @@ -7,6 +7,7 @@ import { div, button, span, + hr, } from "devtools/client/shared/vendor/react-dom-factories"; import PropTypes from "devtools/client/shared/vendor/react-prop-types"; import { connect } from "devtools/client/shared/vendor/react-redux"; @@ -23,14 +24,23 @@ import { isSourceOnSourceMapIgnoreList, isSourceMapIgnoreListEnabled, getSelectedMappedSource, + getSourceMapErrorForSourceActor, + areSourceMapsEnabled, + getShouldSelectOriginalLocation, + isSourceActorWithSourceMap, + getSourceMapResolvedURL, + isSelectedMappedSourceLoading, } from "../../selectors/index"; -import { isPretty, getFilename, shouldBlackbox } from "../../utils/source"; +import { isPretty, shouldBlackbox } from "../../utils/source"; import { PaneToggleButton } from "../shared/Button/index"; import AccessibleImage from "../shared/AccessibleImage"; const classnames = require("resource://devtools/client/shared/classnames.js"); +const MenuButton = require("resource://devtools/client/shared/components/menu/MenuButton.js"); +const MenuItem = require("resource://devtools/client/shared/components/menu/MenuItem.js"); +const MenuList = require("resource://devtools/client/shared/components/menu/MenuList.js"); class SourceFooter extends PureComponent { static get propTypes() { @@ -155,9 +165,11 @@ class SourceFooter extends PureComponent { } renderCommands() { - const commands = [this.blackBoxButton(), this.prettyPrintButton()].filter( - Boolean - ); + const commands = [ + this.blackBoxButton(), + this.prettyPrintButton(), + this.renderSourceMapButton(), + ].filter(Boolean); return commands.length ? div( @@ -169,7 +181,7 @@ class SourceFooter extends PureComponent { : null; } - renderSourceSummary() { + renderMappedSource() { const { mappedSource, jumpToMappedLocation, selectedLocation } = this.props; if (!mappedSource) { @@ -182,12 +194,11 @@ class SourceFooter extends PureComponent { : "sourceFooter.mappedGeneratedSource.tooltip", mappedSource.url ); - const filename = getFilename(mappedSource); const label = L10N.getFormatStr( mappedSource.isOriginal ? "sourceFooter.mappedOriginalSource.title" : "sourceFooter.mappedGeneratedSource.title", - filename + mappedSource.shortName ); return button( { @@ -227,6 +238,148 @@ class SourceFooter extends PureComponent { ); } + getSourceMapLabel() { + if (!this.props.selectedLocation) { + return undefined; + } + if (!this.props.areSourceMapsEnabled) { + return L10N.getStr("sourceFooter.sourceMapButton.disabled"); + } + if (this.props.sourceMapError) { + return undefined; + } + if (!this.props.isSourceActorWithSourceMap) { + return L10N.getStr("sourceFooter.sourceMapButton.sourceNotMapped"); + } + if (this.props.selectedLocation.source.isOriginal) { + return L10N.getStr("sourceFooter.sourceMapButton.isOriginalSource"); + } + return L10N.getStr("sourceFooter.sourceMapButton.isBundleSource"); + } + + getSourceMapTitle() { + if (this.props.sourceMapError) { + return L10N.getFormatStr( + "sourceFooter.sourceMapButton.errorTitle", + this.props.sourceMapError + ); + } + if (this.props.isSourceMapLoading) { + return L10N.getStr("sourceFooter.sourceMapButton.loadingTitle"); + } + return L10N.getStr("sourceFooter.sourceMapButton.title"); + } + + renderSourceMapButton() { + const { toolboxDoc } = this.context; + + return React.createElement( + MenuButton, + { + menuId: "debugger-source-map-button", + toolboxDoc, + className: classnames("devtools-button", "debugger-source-map-button", { + error: !!this.props.sourceMapError, + loading: this.props.isSourceMapLoading, + disabled: !this.props.areSourceMapsEnabled, + "not-mapped": + !this.props.selectedLocation?.source.isOriginal && + !this.props.isSourceActorWithSourceMap, + original: this.props.selectedLocation?.source.isOriginal, + }), + title: this.getSourceMapTitle(), + label: this.getSourceMapLabel(), + icon: true, + }, + () => this.renderSourceMapMenuItems() + ); + } + + renderSourceMapMenuItems() { + const items = [ + React.createElement(MenuItem, { + className: "menu-item debugger-source-map-enabled", + checked: this.props.areSourceMapsEnabled, + label: L10N.getStr("sourceFooter.sourceMapButton.enable"), + onClick: this.toggleSourceMaps, + }), + hr(), + React.createElement(MenuItem, { + className: "menu-item debugger-source-map-open-original", + checked: this.props.shouldSelectOriginalLocation, + label: L10N.getStr( + "sourceFooter.sourceMapButton.showOriginalSourceByDefault" + ), + onClick: this.toggleSelectOriginalByDefault, + }), + ]; + + if (this.props.mappedSource) { + items.push( + React.createElement(MenuItem, { + className: "menu-item debugger-jump-mapped-source", + label: this.props.mappedSource.isOriginal + ? L10N.getStr("sourceFooter.sourceMapButton.jumpToGeneratedSource") + : L10N.getStr("sourceFooter.sourceMapButton.jumpToOriginalSource"), + tooltip: this.props.mappedSource.url, + onClick: () => + this.props.jumpToMappedLocation(this.props.selectedLocation), + }) + ); + } + + if (this.props.resolvedSourceMapURL) { + items.push( + React.createElement(MenuItem, { + className: "menu-item debugger-source-map-link", + label: L10N.getStr( + "sourceFooter.sourceMapButton.openSourceMapInNewTab" + ), + onClick: this.openSourceMap, + }) + ); + } + return React.createElement( + MenuList, + { + id: "debugger-source-map-list", + }, + items + ); + } + + openSourceMap = () => { + let line, column; + if ( + this.props.sourceMapError && + this.props.sourceMapError.includes("JSON.parse") + ) { + const match = this.props.sourceMapError.match( + /at line (\d+) column (\d+)/ + ); + if (match) { + line = match[1]; + column = match[2]; + } + } + this.props.openSourceMap( + this.props.resolvedSourceMapURL || this.props.selectedLocation.source.url, + line, + column + ); + }; + + toggleSourceMaps = () => { + this.props.toggleSourceMapsEnabled(!this.props.areSourceMapsEnabled); + }; + + toggleSelectOriginalByDefault = () => { + this.props.setDefaultSelectedLocation( + !this.props.shouldSelectOriginalLocation + ); + this.props.jumpToMappedSelectedLocation(); + }; + render() { return div( { @@ -242,19 +395,40 @@ class SourceFooter extends PureComponent { { className: "source-footer-end", }, - this.renderSourceSummary(), + this.renderMappedSource(), this.renderCursorPosition(), this.renderToggleButton() ) ); } } +SourceFooter.contextTypes = { + toolboxDoc: PropTypes.object, +}; const mapStateToProps = state => { const selectedSource = getSelectedSource(state); const selectedLocation = getSelectedLocation(state); const sourceTextContent = getSelectedSourceTextContent(state); + const areSourceMapsEnabledProp = areSourceMapsEnabled(state); + const isSourceActorWithSourceMapProp = isSourceActorWithSourceMap( + state, + selectedLocation?.sourceActor.id + ); + const sourceMapError = selectedLocation?.sourceActor + ? getSourceMapErrorForSourceActor(state, selectedLocation.sourceActor.id) + : null; + const mappedSource = getSelectedMappedSource(state); + + const isSourceMapLoading = + areSourceMapsEnabledProp && + isSourceActorWithSourceMapProp && + // `mappedSource` will be null while loading, we need another way to know when it is done computing + !mappedSource && + isSelectedMappedSourceLoading(state) && + !sourceMapError; + return { selectedSource, selectedLocation, @@ -265,7 +439,8 @@ const mapStateToProps = state => { isSourceMapIgnoreListEnabled(state) && isSourceOnSourceMapIgnoreList(state, selectedSource), sourceLoaded: !!sourceTextContent, - mappedSource: getSelectedMappedSource(state), + mappedSource, + isSourceMapLoading, prettySource: getPrettySource( state, selectedSource ? selectedSource.id : null @@ -277,6 +452,17 @@ const mapStateToProps = state => { prettyPrintMessage: selectedLocation ? getPrettyPrintMessage(state, selectedLocation) : null, + + sourceMapError, + resolvedSourceMapURL: selectedLocation?.sourceActor + ? getSourceMapResolvedURL(state, selectedLocation.sourceActor.id) + : null, + isSourceActorWithSourceMap: isSourceActorWithSourceMapProp, + + sourceMapURL: selectedLocation?.sourceActor.sourceMapURL, + + areSourceMapsEnabled: areSourceMapsEnabledProp, + shouldSelectOriginalLocation: getShouldSelectOriginalLocation(state), }; }; @@ -285,4 +471,8 @@ export default connect(mapStateToProps, { toggleBlackBox: actions.toggleBlackBox, jumpToMappedLocation: actions.jumpToMappedLocation, togglePaneCollapse: actions.togglePaneCollapse, + toggleSourceMapsEnabled: actions.toggleSourceMapsEnabled, + setDefaultSelectedLocation: actions.setDefaultSelectedLocation, + jumpToMappedSelectedLocation: actions.jumpToMappedSelectedLocation, + openSourceMap: actions.openSourceMap, })(SourceFooter); diff --git a/devtools/client/debugger/src/components/Editor/InlinePreview.js b/devtools/client/debugger/src/components/Editor/InlinePreview.js index 552143dcf2..60303e38b5 100644 --- a/devtools/client/debugger/src/components/Editor/InlinePreview.js +++ b/devtools/client/debugger/src/components/Editor/InlinePreview.js @@ -27,7 +27,7 @@ class InlinePreview extends PureComponent { }; } - showInScopes(variable) { + showInScopes() { // TODO: focus on variable value in the scopes sidepanel // we will need more info from parent comp } diff --git a/devtools/client/debugger/src/components/Editor/InlinePreviewRow.js b/devtools/client/debugger/src/components/Editor/InlinePreviewRow.js index bc54fc5b4d..18fe98ff17 100644 --- a/devtools/client/debugger/src/components/Editor/InlinePreviewRow.js +++ b/devtools/client/debugger/src/components/Editor/InlinePreviewRow.js @@ -67,13 +67,13 @@ class InlinePreviewRow extends PureComponent { null, previews.map(preview => React.createElement(InlinePreview, { - line: line, + line, key: `${line}-${preview.name}`, variable: preview.name, value: preview.value, - openElementInInspector: openElementInInspector, - highlightDomElement: highlightDomElement, - unHighlightDomElement: unHighlightDomElement, + openElementInInspector, + highlightDomElement, + unHighlightDomElement, }) ) ), diff --git a/devtools/client/debugger/src/components/Editor/InlinePreviews.js b/devtools/client/debugger/src/components/Editor/InlinePreviews.js index 18616ae3ed..ba8b08669a 100644 --- a/devtools/client/debugger/src/components/Editor/InlinePreviews.js +++ b/devtools/client/debugger/src/components/Editor/InlinePreviews.js @@ -49,7 +49,7 @@ class InlinePreviews extends Component { inlinePreviewRows = Object.keys(previewsObj).map(line => { const lineNum = parseInt(line, 10); return React.createElement(InlinePreviewRow, { - editor: editor, + editor, key: line, line: lineNum, previews: previewsObj[line], diff --git a/devtools/client/debugger/src/components/Editor/Preview/Popup.js b/devtools/client/debugger/src/components/Editor/Preview/Popup.js index a010358dc1..431cb52729 100644 --- a/devtools/client/debugger/src/components/Editor/Preview/Popup.js +++ b/devtools/client/debugger/src/components/Editor/Preview/Popup.js @@ -100,7 +100,7 @@ export class Popup extends Component { renderExceptionPreview(exception) { return React.createElement(ExceptionPopup, { - exception: exception, + exception, clearPreview: this.props.clearPreview, }); } @@ -182,8 +182,8 @@ export class Popup extends Component { Popover, { targetPosition: cursorPos, - type: type, - editorRef: editorRef, + type, + editorRef, target: this.props.preview.target, mouseout: this.props.clearPreview, }, diff --git a/devtools/client/debugger/src/components/Editor/Preview/index.js b/devtools/client/debugger/src/components/Editor/Preview/index.js index 218d33007f..10c600670e 100644 --- a/devtools/client/debugger/src/components/Editor/Preview/index.js +++ b/devtools/client/debugger/src/components/Editor/Preview/index.js @@ -44,7 +44,7 @@ class Preview extends PureComponent { codeMirrorWrapper.removeEventListener("mousedown", this.onMouseDown); } - updateListeners(prevProps) { + updateListeners() { const { codeMirror } = this.props.editor; const codeMirrorWrapper = codeMirror.getWrapperElement(); codeMirror.on("tokenenter", this.onTokenEnter); @@ -107,7 +107,7 @@ class Preview extends PureComponent { return null; } return React.createElement(Popup, { - preview: preview, + preview, editor: this.props.editor, editorRef: this.props.editorRef, clearPreview: this.clearPreview, diff --git a/devtools/client/debugger/src/components/Editor/SearchInFileBar.js b/devtools/client/debugger/src/components/Editor/SearchInFileBar.js index a3491a3fef..26f95ce75d 100644 --- a/devtools/client/debugger/src/components/Editor/SearchInFileBar.js +++ b/devtools/client/debugger/src/components/Editor/SearchInFileBar.js @@ -97,7 +97,7 @@ class SearchInFileBar extends Component { shortcuts.on("Escape", this.onEscape); } - componentDidUpdate(prevProps, prevState) { + componentDidUpdate() { if (this.refs.resultList && this.refs.resultList.refs) { scrollList(this.refs.resultList.refs, this.state.selectedResultIndex); } @@ -111,7 +111,7 @@ class SearchInFileBar extends Component { const { editor: ed } = this.props; if (ed) { const ctx = { ed, cm: ed.codeMirror }; - removeOverlay(ctx, this.state.query); + removeOverlay(ctx); } }; @@ -165,7 +165,7 @@ class SearchInFileBar extends Component { const ctx = { ed: editor, cm: editor.codeMirror }; if (!query) { - clearSearch(ctx.cm, query); + clearSearch(ctx.cm); return; } @@ -249,11 +249,11 @@ class SearchInFileBar extends Component { return this.doSearch(e.target.value); }; - onFocus = e => { + onFocus = () => { this.setState({ inputFocused: true }); }; - onBlur = e => { + onBlur = () => { this.setState({ inputFocused: false }); }; @@ -321,7 +321,7 @@ class SearchInFileBar extends Component { }, React.createElement(SearchInput, { query: this.state.query, - count: count, + count, placeholder: L10N.getStr("sourceSearch.search.placeholder2"), summaryMsg: this.buildSummaryMsg(), isLoading: false, @@ -349,7 +349,7 @@ SearchInFileBar.contextTypes = { shortcuts: PropTypes.object, }; -const mapStateToProps = (state, p) => { +const mapStateToProps = state => { const selectedSource = getSelectedSource(state); return { diff --git a/devtools/client/debugger/src/components/Editor/Tab.js b/devtools/client/debugger/src/components/Editor/Tab.js index ba5e1c1934..98aca90cd2 100644 --- a/devtools/client/debugger/src/components/Editor/Tab.js +++ b/devtools/client/debugger/src/components/Editor/Tab.js @@ -15,7 +15,6 @@ import actions from "../../actions/index"; import { getDisplayPath, getFileURL, - getSourceQueryString, getTruncatedFileName, isPretty, } from "../../utils/source"; @@ -87,14 +86,13 @@ class Tab extends PureComponent { }); const path = getDisplayPath(source, tabSources); - const query = getSourceQueryString(source); return div( { draggable: true, - onDragOver: onDragOver, - onDragStart: onDragStart, - onDragEnd: onDragEnd, - className: className, + onDragOver, + onDragStart, + onDragEnd, + className, "data-index": index, "data-source-id": sourceId, onClick: handleTabClick, @@ -115,7 +113,7 @@ class Tab extends PureComponent { { className: "filename", }, - getTruncatedFileName(source, query), + getTruncatedFileName(source), path && span(null, `../${path}/..`) ), React.createElement(CloseButton, { diff --git a/devtools/client/debugger/src/components/Editor/Tabs.js b/devtools/client/debugger/src/components/Editor/Tabs.js index 3577a4909c..d93f7d3b18 100644 --- a/devtools/client/debugger/src/components/Editor/Tabs.js +++ b/devtools/client/debugger/src/components/Editor/Tabs.js @@ -23,7 +23,7 @@ import { import { isVisible } from "../../utils/ui"; import { getHiddenTabs } from "../../utils/tabs"; -import { getFilename, isPretty, getFileURL } from "../../utils/source"; +import { isPretty, getFileURL } from "../../utils/source"; import actions from "../../actions/index"; import Tab from "./Tab"; @@ -144,13 +144,12 @@ class Tabs extends PureComponent { renderDropdownSource = source => { const { selectSource } = this.props; - const filename = getFilename(source); const onClick = () => selectSource(source); return li( { key: source.id, - onClick: onClick, + onClick, title: getFileURL(source, false), }, React.createElement(AccessibleImage, { @@ -160,7 +159,7 @@ class Tabs extends PureComponent { { className: "dropdown-label", }, - filename + source.shortName ) ); }; diff --git a/devtools/client/debugger/src/components/Editor/index.js b/devtools/client/debugger/src/components/Editor/index.js index c659de77d2..ae9bde7657 100644 --- a/devtools/client/debugger/src/components/Editor/index.js +++ b/devtools/client/debugger/src/components/Editor/index.js @@ -12,6 +12,7 @@ import { connect } from "devtools/client/shared/vendor/react-redux"; import { getLineText, isLineBlackboxed } from "./../../utils/source"; import { createLocation } from "./../../utils/location"; import { getIndentation } from "../../utils/indentation"; +import { features } from "../../utils/prefs"; import { getActiveSearch, @@ -50,10 +51,9 @@ import BlackboxLines from "./BlackboxLines"; import { showSourceText, - showLoading, - showErrorMessage, + setDocument, + resetLineNumberFormat, getEditor, - clearEditor, getCursorLine, getCursorColumn, lineAtHeight, @@ -143,37 +143,45 @@ class Editor extends PureComponent { this.props.selectedSourceTextContent?.value || nextProps.symbols !== this.props.symbols; - const shouldUpdateSize = - nextProps.startPanelSize !== this.props.startPanelSize || - nextProps.endPanelSize !== this.props.endPanelSize; - - const shouldScroll = - nextProps.selectedLocation && - this.shouldScrollToLocation(nextProps, editor); + if (!features.codemirrorNext) { + const shouldUpdateSize = + nextProps.startPanelSize !== this.props.startPanelSize || + nextProps.endPanelSize !== this.props.endPanelSize; + + const shouldScroll = + nextProps.selectedLocation && + this.shouldScrollToLocation(nextProps, editor); + + if (shouldUpdateText || shouldUpdateSize || shouldScroll) { + startOperation(); + if (shouldUpdateText) { + this.setText(nextProps, editor); + } + if (shouldUpdateSize) { + editor.codeMirror.setSize(); + } + if (shouldScroll) { + this.scrollToLocation(nextProps, editor); + } + endOperation(); + } - if (shouldUpdateText || shouldUpdateSize || shouldScroll) { - startOperation(); + if (this.props.selectedSource != nextProps.selectedSource) { + this.props.updateViewport(); + resizeBreakpointGutter(editor.codeMirror); + resizeToggleButton(editor.codeMirror); + } + } else { + // For codemirror 6 + // eslint-disable-next-line no-lonely-if if (shouldUpdateText) { this.setText(nextProps, editor); } - if (shouldUpdateSize) { - editor.codeMirror.setSize(); - } - if (shouldScroll) { - this.scrollToLocation(nextProps, editor); - } - endOperation(); - } - - if (this.props.selectedSource != nextProps.selectedSource) { - this.props.updateViewport(); - resizeBreakpointGutter(editor.codeMirror); - resizeToggleButton(editor.codeMirror); } } setupEditor() { - const editor = getEditor(); + const editor = getEditor(features.codemirrorNext); // disables the default search shortcuts editor._initShortcuts = () => {}; @@ -183,71 +191,84 @@ class Editor extends PureComponent { editor.appendToLocalElement(node.querySelector(".editor-mount")); } - const { codeMirror } = editor; - - this.abortController = new window.AbortController(); - - // CodeMirror refreshes its internal state on window resize, but we need to also - // refresh it when the side panels are resized. - // We could have a ResizeObserver instead, but we wouldn't be able to differentiate - // between window resize and side panel resize and as a result, might refresh - // codeMirror twice, which is wasteful. - window.document - .querySelector(".editor-pane") - .addEventListener("resizeend", () => codeMirror.refresh(), { - signal: this.abortController.signal, - }); - - codeMirror.on("gutterClick", this.onGutterClick); - codeMirror.on("cursorActivity", this.onCursorChange); - - const codeMirrorWrapper = codeMirror.getWrapperElement(); - // Set code editor wrapper to be focusable - codeMirrorWrapper.tabIndex = 0; - codeMirrorWrapper.addEventListener("keydown", e => this.onKeyDown(e)); - codeMirrorWrapper.addEventListener("click", e => this.onClick(e)); - codeMirrorWrapper.addEventListener("mouseover", onMouseOver(codeMirror)); - - const toggleFoldMarkerVisibility = e => { - if (node instanceof HTMLElement) { - node - .querySelectorAll(".CodeMirror-guttermarker-subtle") - .forEach(elem => { - elem.classList.toggle("visible"); - }); - } - }; + if (!features.codemirrorNext) { + const { codeMirror } = editor; + + this.abortController = new window.AbortController(); + + // CodeMirror refreshes its internal state on window resize, but we need to also + // refresh it when the side panels are resized. + // We could have a ResizeObserver instead, but we wouldn't be able to differentiate + // between window resize and side panel resize and as a result, might refresh + // codeMirror twice, which is wasteful. + window.document + .querySelector(".editor-pane") + .addEventListener("resizeend", () => codeMirror.refresh(), { + signal: this.abortController.signal, + }); + + codeMirror.on("gutterClick", this.onGutterClick); + codeMirror.on("cursorActivity", this.onCursorChange); + + const codeMirrorWrapper = codeMirror.getWrapperElement(); + // Set code editor wrapper to be focusable + codeMirrorWrapper.tabIndex = 0; + codeMirrorWrapper.addEventListener("keydown", e => this.onKeyDown(e)); + codeMirrorWrapper.addEventListener("click", e => this.onClick(e)); + codeMirrorWrapper.addEventListener("mouseover", onMouseOver(codeMirror)); + + const toggleFoldMarkerVisibility = () => { + if (node instanceof HTMLElement) { + node + .querySelectorAll(".CodeMirror-guttermarker-subtle") + .forEach(elem => { + elem.classList.toggle("visible"); + }); + } + }; - const codeMirrorGutter = codeMirror.getGutterElement(); - codeMirrorGutter.addEventListener("mouseleave", toggleFoldMarkerVisibility); - codeMirrorGutter.addEventListener("mouseenter", toggleFoldMarkerVisibility); - codeMirrorWrapper.addEventListener("contextmenu", event => - this.openMenu(event) - ); + const codeMirrorGutter = codeMirror.getGutterElement(); + codeMirrorGutter.addEventListener( + "mouseleave", + toggleFoldMarkerVisibility + ); + codeMirrorGutter.addEventListener( + "mouseenter", + toggleFoldMarkerVisibility + ); + codeMirrorWrapper.addEventListener("contextmenu", event => + this.openMenu(event) + ); - codeMirror.on("scroll", this.onEditorScroll); - this.onEditorScroll(); + codeMirror.on("scroll", this.onEditorScroll); + this.onEditorScroll(); + } this.setState({ editor }); return editor; } componentDidMount() { - const { shortcuts } = this.context; + if (!features.codemirrorNext) { + const { shortcuts } = this.context; - shortcuts.on(L10N.getStr("toggleBreakpoint.key"), this.onToggleBreakpoint); - shortcuts.on( - L10N.getStr("toggleCondPanel.breakpoint.key"), - this.onToggleConditionalPanel - ); - shortcuts.on( - L10N.getStr("toggleCondPanel.logPoint.key"), - this.onToggleConditionalPanel - ); - shortcuts.on( - L10N.getStr("sourceTabs.closeTab.key"), - this.onCloseShortcutPress - ); - shortcuts.on("Esc", this.onEscape); + shortcuts.on( + L10N.getStr("toggleBreakpoint.key"), + this.onToggleBreakpoint + ); + shortcuts.on( + L10N.getStr("toggleCondPanel.breakpoint.key"), + this.onToggleConditionalPanel + ); + shortcuts.on( + L10N.getStr("toggleCondPanel.logPoint.key"), + this.onToggleConditionalPanel + ); + shortcuts.on( + L10N.getStr("sourceTabs.closeTab.key"), + this.onCloseShortcutPress + ); + shortcuts.on("Esc", this.onEscape); + } } onCloseShortcutPress = e => { @@ -260,22 +281,24 @@ class Editor extends PureComponent { }; componentWillUnmount() { - const { editor } = this.state; - if (editor) { - editor.destroy(); - editor.codeMirror.off("scroll", this.onEditorScroll); - this.setState({ editor: null }); - } + if (!features.codemirrorNext) { + const { editor } = this.state; + if (editor) { + editor.destroy(); + editor.codeMirror.off("scroll", this.onEditorScroll); + this.setState({ editor: null }); + } - const { shortcuts } = this.context; - shortcuts.off(L10N.getStr("sourceTabs.closeTab.key")); - shortcuts.off(L10N.getStr("toggleBreakpoint.key")); - shortcuts.off(L10N.getStr("toggleCondPanel.breakpoint.key")); - shortcuts.off(L10N.getStr("toggleCondPanel.logPoint.key")); + const { shortcuts } = this.context; + shortcuts.off(L10N.getStr("sourceTabs.closeTab.key")); + shortcuts.off(L10N.getStr("toggleBreakpoint.key")); + shortcuts.off(L10N.getStr("toggleCondPanel.breakpoint.key")); + shortcuts.off(L10N.getStr("toggleCondPanel.logPoint.key")); - if (this.abortController) { - this.abortController.abort(); - this.abortController = null; + if (this.abortController) { + this.abortController.abort(); + this.abortController = null; + } } } @@ -542,7 +565,7 @@ class Editor extends PureComponent { } } - shouldScrollToLocation(nextProps, editor) { + shouldScrollToLocation(nextProps) { if ( !nextProps.selectedLocation?.line || !nextProps.selectedSourceTextContent @@ -583,12 +606,14 @@ class Editor extends PureComponent { // check if we previously had a selected source if (!selectedSource) { - this.clearEditor(); + if (!features.codemirrorNext) { + this.clearEditor(); + } return; } if (!selectedSourceTextContent?.value) { - showLoading(editor); + this.showLoadingMessage(editor); return; } @@ -602,7 +627,16 @@ class Editor extends PureComponent { return; } - showSourceText(editor, selectedSource, selectedSourceTextContent, symbols); + if (!features.codemirrorNext) { + showSourceText( + editor, + selectedSource, + selectedSourceTextContent, + symbols + ); + } else { + editor.setText(selectedSourceTextContent.value.value); + } } clearEditor() { @@ -611,7 +645,9 @@ class Editor extends PureComponent { return; } - clearEditor(editor); + const doc = editor.createDocument("", { name: "text" }); + editor.replaceDocument(doc); + resetLineNumberFormat(editor); } showErrorMessage(msg) { @@ -620,7 +656,37 @@ class Editor extends PureComponent { return; } - showErrorMessage(editor, msg); + let error; + if (msg.includes("WebAssembly binary source is not available")) { + error = L10N.getStr("wasmIsNotAvailable"); + } else { + error = L10N.getFormatStr("errorLoadingText3", msg); + } + if (!features.codemirrorNext) { + const doc = editor.createDocument(error, { name: "text" }); + editor.replaceDocument(doc); + resetLineNumberFormat(editor); + } else { + editor.setText(error); + } + } + + showLoadingMessage(editor) { + if (!features.codemirrorNext) { + // 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); + } else { + editor.setText(L10N.getStr("loadingText")); + } } getInlineEditorStyles() { diff --git a/devtools/client/debugger/src/components/Editor/tests/DebugLine.spec.js b/devtools/client/debugger/src/components/Editor/tests/DebugLine.spec.js index 767dde9e6d..38bb318611 100644 --- a/devtools/client/debugger/src/components/Editor/tests/DebugLine.spec.js +++ b/devtools/client/debugger/src/components/Editor/tests/DebugLine.spec.js @@ -15,7 +15,7 @@ function createMockDocument(clear) { addLineClass: jest.fn(), removeLineClass: jest.fn(), markText: jest.fn(() => ({ clear })), - getLine: line => "", + getLine: () => "", }; return doc; diff --git a/devtools/client/debugger/src/components/Editor/tests/__snapshots__/ConditionalPanel.spec.js.snap b/devtools/client/debugger/src/components/Editor/tests/__snapshots__/ConditionalPanel.spec.js.snap index 58e86f5009..86d848ec3e 100644 --- a/devtools/client/debugger/src/components/Editor/tests/__snapshots__/ConditionalPanel.spec.js.snap +++ b/devtools/client/debugger/src/components/Editor/tests/__snapshots__/ConditionalPanel.spec.js.snap @@ -22,6 +22,8 @@ exports[`ConditionalPanel should render at location of selected breakpoint 1`] = "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -44,6 +46,8 @@ exports[`ConditionalPanel should render at location of selected breakpoint 1`] = "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -217,6 +221,8 @@ exports[`ConditionalPanel should render at location of selected breakpoint 1`] = "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -239,6 +245,8 @@ exports[`ConditionalPanel should render at location of selected breakpoint 1`] = "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", } @@ -268,6 +276,8 @@ exports[`ConditionalPanel should render with condition at selected breakpoint lo "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -290,6 +300,8 @@ exports[`ConditionalPanel should render with condition at selected breakpoint lo "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -467,6 +479,8 @@ exports[`ConditionalPanel should render with condition at selected breakpoint lo "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -489,6 +503,8 @@ exports[`ConditionalPanel should render with condition at selected breakpoint lo "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", } @@ -518,6 +534,8 @@ exports[`ConditionalPanel should render with logpoint at selected breakpoint loc "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -540,6 +558,8 @@ exports[`ConditionalPanel should render with logpoint at selected breakpoint loc "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -717,6 +737,8 @@ exports[`ConditionalPanel should render with logpoint at selected breakpoint loc "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -739,6 +761,8 @@ exports[`ConditionalPanel should render with logpoint at selected breakpoint loc "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", } diff --git a/devtools/client/debugger/src/components/Editor/tests/__snapshots__/Footer.spec.js.snap b/devtools/client/debugger/src/components/Editor/tests/__snapshots__/Footer.spec.js.snap index a453b034ff..6c56ad33e7 100644 --- a/devtools/client/debugger/src/components/Editor/tests/__snapshots__/Footer.spec.js.snap +++ b/devtools/client/debugger/src/components/Editor/tests/__snapshots__/Footer.spec.js.snap @@ -31,6 +31,16 @@ exports[`SourceFooter Component default case should render 1`] = ` className="prettyPrint" /> </button> + <MenuButton + className="devtools-button debugger-source-map-button disabled not-mapped" + icon={true} + menuId="debugger-source-map-button" + menuOffset={-5} + menuPosition="bottom" + title="Source Map status" + > + <Component /> + </MenuButton> </div> </div> <div @@ -77,6 +87,16 @@ exports[`SourceFooter Component move cursor should render new cursor position 1` className="prettyPrint" /> </button> + <MenuButton + className="devtools-button debugger-source-map-button disabled not-mapped" + icon={true} + menuId="debugger-source-map-button" + menuOffset={-5} + menuPosition="bottom" + title="Source Map status" + > + <Component /> + </MenuButton> </div> </div> <div diff --git a/devtools/client/debugger/src/components/PrimaryPanes/Outline.js b/devtools/client/debugger/src/components/PrimaryPanes/Outline.js index 79ebf7a38e..d52ed8ff40 100644 --- a/devtools/client/debugger/src/components/PrimaryPanes/Outline.js +++ b/devtools/client/debugger/src/components/PrimaryPanes/Outline.js @@ -82,6 +82,7 @@ export class Outline extends Component { selectedLocation: PropTypes.object.isRequired, getFunctionSymbols: PropTypes.func.isRequired, getClassSymbols: PropTypes.func.isRequired, + selectedSourceTextContent: PropTypes.object, canFetchSymbols: PropTypes.bool, }; } @@ -94,7 +95,8 @@ export class Outline extends Component { } componentDidUpdate(prevProps) { - const { cursorPosition, selectedLocation, canFetchSymbols } = this.props; + const { cursorPosition, selectedSourceTextContent, canFetchSymbols } = + this.props; if (cursorPosition && cursorPosition !== prevProps.cursorPosition) { this.setFocus(cursorPosition); } @@ -106,8 +108,11 @@ export class Outline extends Component { this.focusedElRef.scrollIntoView({ block: "center" }); } - // Lets make sure the source text has been loaded and is different - if (canFetchSymbols && prevProps.selectedLocation !== selectedLocation) { + // Lets make sure the source text has been loaded and it is different + if ( + canFetchSymbols && + prevProps.selectedSourceTextContent !== selectedSourceTextContent + ) { this.getClassAndFunctionSymbols(); } } @@ -133,8 +138,8 @@ export class Outline extends Component { } // Find items that enclose the selected location - const enclosedItems = [...classes, ...functions].filter( - ({ name, location }) => containsPosition(location, cursorPosition) + const enclosedItems = [...classes, ...functions].filter(({ location }) => + containsPosition(location, cursorPosition) ); if (!enclosedItems.length) { @@ -360,7 +365,7 @@ export class Outline extends Component { div( null, React.createElement(OutlineFilter, { - filter: filter, + filter, updateFilter: this.updateFilter, }), this.renderFunctions(functions), @@ -373,6 +378,7 @@ export class Outline extends Component { const mapStateToProps = state => { const selectedSourceTextContent = getSelectedSourceTextContent(state); return { + selectedSourceTextContent, selectedLocation: getSelectedLocation(state), canFetchSymbols: selectedSourceTextContent && isFulfilled(selectedSourceTextContent), diff --git a/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.js b/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.js index 68b08aed2b..b5a99316f8 100644 --- a/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.js +++ b/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.js @@ -16,7 +16,6 @@ import { getEditor } from "../../utils/editor/index"; import { searchKeys } from "../../constants"; import { getRelativePath } from "../../utils/sources-tree/utils"; -import { getFormattedSourceId } from "../../utils/source"; import { getProjectSearchQuery, getNavigateCounter, @@ -265,7 +264,7 @@ export class ProjectSearch extends Component { }, file.location.source.url ? getRelativePath(file.location.source.url) - : getFormattedSourceId(file.location.source.id) + : file.location.source.shortName ), span( { @@ -353,7 +352,7 @@ export class ProjectSearch extends Component { autoExpandAll: true, autoExpandDepth: 1, autoExpandNodeChildrenLimit: 100, - getParent: item => null, + getParent: () => null, getPath: getFilePath, renderItem: this.renderItem, focused: this.state.focusedItem, diff --git a/devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.js b/devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.js index fd5ceca46d..575d714ba5 100644 --- a/devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.js +++ b/devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.js @@ -19,7 +19,6 @@ import actions from "../../actions/index"; import { sourceTypes } from "../../utils/source"; import { createLocation } from "../../utils/location"; -import { safeDecodeItemName } from "../../utils/sources-tree/utils"; const classnames = require("resource://devtools/client/shared/classnames.js"); @@ -48,7 +47,7 @@ class SourceTreeItem extends Component { } } - onClick = e => { + onClick = () => { const { item, focusItem, selectSourceItem } = this.props; focusItem(item); @@ -147,19 +146,14 @@ class SourceTreeItem extends Component { ); } if (item.type == "group") { - return safeDecodeItemName(item.groupName); + return item.groupName; } if (item.type == "directory") { const parentItem = this.props.getParent(item); - return safeDecodeItemName( - item.path.replace(parentItem.path, "").replace(/^\//, "") - ); + return item.path.replace(parentItem.path, "").replace(/^\//, ""); } if (item.type == "source") { - const { displayURL } = item.source; - const name = - displayURL.filename + (displayURL.search ? displayURL.search : ""); - return safeDecodeItemName(name); + return item.source.longName; } return null; diff --git a/devtools/client/debugger/src/components/QuickOpenModal.js b/devtools/client/debugger/src/components/QuickOpenModal.js index aa3d4f73b6..438592296d 100644 --- a/devtools/client/debugger/src/components/QuickOpenModal.js +++ b/devtools/client/debugger/src/components/QuickOpenModal.js @@ -377,7 +377,7 @@ export class QuickOpenModal extends Component { isSourceSearch = () => this.isSourcesQuery() || this.isGotoSourceQuery(); /* eslint-disable react/no-danger */ - renderHighlight(candidateString, query, name) { + renderHighlight(candidateString, query) { const options = { wrap: { tagOpen: '<mark class="highlight">', @@ -444,7 +444,7 @@ export class QuickOpenModal extends Component { handleClose: this.closeModal, }, React.createElement(SearchInput, { - query: query, + query, hasPrefix: true, count: this.getResultCount(), placeholder: L10N.getStr("sourceSearch.search2"), @@ -454,7 +454,7 @@ export class QuickOpenModal extends Component { onChange: this.onChange, onKeyDown: this.onKeyDown, handleClose: this.closeModal, - expanded: expanded, + expanded, showClose: false, searchKey: searchKeys.QUICKOPEN_SEARCH, showExcludePatterns: false, @@ -466,11 +466,11 @@ export class QuickOpenModal extends Component { results && React.createElement(ResultList, { key: "results", - items: items, + items, selected: selectedIndex, selectItem: this.selectResultItem, ref: "resultList", - expanded: expanded, + expanded, ...(this.isSourceSearch() ? SIZE_BIG : SIZE_DEFAULT), }) ); diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeading.js b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeading.js index 78cc530cff..a4a5010c48 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeading.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeading.js @@ -12,7 +12,6 @@ import actions from "../../../actions/index"; import { getTruncatedFileName, getDisplayPath, - getSourceQueryString, getFileURL, } from "../../../utils/source"; import { createLocation } from "../../../utils/location"; @@ -40,7 +39,6 @@ class BreakpointHeading extends PureComponent { const { sources, source, selectSource } = this.props; const path = getDisplayPath(source, sources); - const query = getSourceQueryString(source); return div( { className: "breakpoint-heading", @@ -67,7 +65,7 @@ class BreakpointHeading extends PureComponent { { className: "filename", }, - getTruncatedFileName(source, query), + getTruncatedFileName(source), path && span(null, `../${path}/..`) ) ); diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/ExceptionOption.js b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/ExceptionOption.js index 31ff3f44a3..caec23b848 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/ExceptionOption.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/ExceptionOption.js @@ -21,7 +21,7 @@ export default function ExceptionOption({ input({ type: "checkbox", checked: isChecked, - onChange: onChange, + onChange, }), div( { diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js index 0f5d6f7ae3..1f5e08cd7e 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js @@ -17,6 +17,7 @@ import { getSelectedLocation } from "../../../utils/selected-location"; import { createHeadlessEditor } from "../../../utils/editor/create-editor"; import { makeBreakpointId } from "../../../utils/breakpoint/index"; +import { features } from "../../../utils/prefs"; import { getSelectedSource, @@ -44,7 +45,7 @@ class Breakpoints extends Component { this.removeEditor(); } - getEditor() { + getHeadlessEditor() { if (!this.headlessEditor) { this.headlessEditor = createHeadlessEditor(); } @@ -119,7 +120,7 @@ class Breakpoints extends Component { return null; } - const editor = this.getEditor(); + const editor = this.getHeadlessEditor(); const sources = breakpointSources.map(({ source }) => source); return div( { @@ -153,7 +154,7 @@ class Breakpoints extends Component { className: "pane", }, this.renderExceptionsOptions(), - this.renderBreakpoints() + !features.codemirrorNext ? this.renderBreakpoints() : null ); } } diff --git a/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js b/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js index deae156a40..3dca62d48a 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js @@ -231,7 +231,7 @@ class CommandBar extends Component { formatKey("trace"), this.props.logMethod ), - onClick: event => { + onClick: () => { this.props.toggleTracing(); }, onContextMenu: event => { @@ -362,7 +362,7 @@ class CommandBar extends Component { MenuButton, { menuId: "debugger-settings-menu-button", - toolboxDoc: toolboxDoc, + toolboxDoc, className: "devtools-button command-bar-button debugger-settings-menu-button", title: L10N.getStr("settings.button.label"), diff --git a/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js b/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js index ce7eabf89d..00c885ec16 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js @@ -116,11 +116,11 @@ class EventListeners extends Component { } }; - onFocus = event => { + onFocus = () => { this.setState({ focused: true }); }; - onBlur = event => { + onBlur = () => { this.setState({ focused: false }); }; @@ -136,7 +136,7 @@ class EventListeners extends Component { className: classnames("event-search-input", { focused, }), - placeholder: placeholder, + placeholder, value: searchText, onChange: this.onInputChange, onKeyDown: this.onKeyDown, @@ -233,7 +233,7 @@ class EventListeners extends Component { indeterminate ? false : e.target.checked ); }, - checked: checked, + checked, ref: el => el && (el.indeterminate = indeterminate), }), span( diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js b/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js index be05c7327c..89b1f651ce 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js @@ -296,7 +296,7 @@ class Expressions extends Component { roots: [root], autoExpandDepth: 0, disableWrap: true, - openLink: openLink, + openLink, createElement: this.createElement, onDoubleClick: (items, { depth }) => { if (depth === 0) { @@ -374,7 +374,7 @@ class Expressions extends Component { input({ className: "input-expression", type: "text", - placeholder: L10N.getStr("expressions.placeholder"), + placeholder: L10N.getStr("expressions.placeholder2"), onChange: this.handleChange, onBlur: this.hideInput, onKeyDown: this.handleKeyDown, diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frame.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frame.js index 0c81d8afb4..2c5cc679bf 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frame.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frame.js @@ -7,7 +7,7 @@ import PropTypes from "devtools/client/shared/vendor/react-prop-types"; import AccessibleImage from "../../shared/AccessibleImage"; import { formatDisplayName } from "../../../utils/pause/frames/index"; -import { getFilename, getFileURL } from "../../../utils/source"; +import { getFileURL } from "../../../utils/source"; import FrameIndent from "./FrameIndent"; const classnames = require("resource://devtools/client/shared/classnames.js"); @@ -52,7 +52,7 @@ const FrameLocation = memo( const location = getFrameLocation(frame, shouldDisplayOriginalLocation); const filename = displayFullUrl ? getFileURL(location.source, false) - : getFilename(location.source); + : location.source.shortName; return React.createElement( "span", { @@ -124,7 +124,7 @@ export default class FrameComponent extends Component { this.props.showFrameContextMenu(event, frame); } - onMouseDown(e, frame, selectedFrame) { + onMouseDown(e, frame) { if (e.button !== 0) { return; } @@ -132,7 +132,7 @@ export default class FrameComponent extends Component { this.props.selectFrame(frame); } - onKeyUp(event, frame, selectedFrame) { + onKeyUp(event, frame) { if (event.key != "Enter") { return; } @@ -167,12 +167,12 @@ export default class FrameComponent extends Component { { role: "listitem", key: frame.id, - className: className, + className, onMouseDown: e => this.onMouseDown(e, frame, selectedFrame), onKeyUp: e => this.onKeyUp(e, frame, selectedFrame), onContextMenu: disableContextMenu ? null : e => this.onContextMenu(e), tabIndex: 0, - title: title, + title, }, frame.asyncCause && React.createElement( diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.js index ab9f7073a7..a4ec7f72da 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.js @@ -110,18 +110,18 @@ export default class Group extends Component { }, group.map(frame => React.createElement(FrameComponent, { - frame: frame, - showFrameContextMenu: showFrameContextMenu, + frame, + showFrameContextMenu, hideLocation: true, key: frame.id, - selectedFrame: selectedFrame, - selectFrame: selectFrame, - selectLocation: selectLocation, + selectedFrame, + selectFrame, + selectLocation, shouldMapDisplayName: false, - displayFullUrl: displayFullUrl, - getFrameTitle: getFrameTitle, - disableContextMenu: disableContextMenu, - panel: panel, + displayFullUrl, + getFrameTitle, + disableContextMenu, + panel, isInGroup: true, }) ) diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/index.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/index.js index d83b413a01..ff60270024 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Frames/index.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/index.js @@ -115,28 +115,28 @@ class Frames extends Component { frameOrGroup.id ? React.createElement(FrameComponent, { frame: frameOrGroup, - showFrameContextMenu: showFrameContextMenu, - selectFrame: selectFrame, - selectLocation: selectLocation, - selectedFrame: selectedFrame, - shouldDisplayOriginalLocation: shouldDisplayOriginalLocation, + showFrameContextMenu, + selectFrame, + selectLocation, + selectedFrame, + shouldDisplayOriginalLocation, key: String(frameOrGroup.id), - displayFullUrl: displayFullUrl, - getFrameTitle: getFrameTitle, - disableContextMenu: disableContextMenu, - panel: panel, + displayFullUrl, + getFrameTitle, + disableContextMenu, + panel, }) : React.createElement(Group, { group: frameOrGroup, - showFrameContextMenu: showFrameContextMenu, - selectFrame: selectFrame, - selectLocation: selectLocation, - selectedFrame: selectedFrame, + showFrameContextMenu, + selectFrame, + selectLocation, + selectedFrame, key: frameOrGroup[0].id, - displayFullUrl: displayFullUrl, - getFrameTitle: getFrameTitle, - disableContextMenu: disableContextMenu, - panel: panel, + displayFullUrl, + getFrameTitle, + disableContextMenu, + panel, }) ) ); diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Frame.spec.js.snap b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Frame.spec.js.snap index 90a5b1f906..c4e6722629 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Frame.spec.js.snap +++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Frame.spec.js.snap @@ -36,6 +36,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -57,6 +59,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -82,6 +86,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -103,6 +109,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -135,6 +143,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -178,6 +188,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -199,6 +211,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -224,6 +238,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -245,6 +261,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -277,6 +295,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -328,6 +348,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -349,6 +371,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -375,6 +399,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -396,6 +422,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -428,6 +456,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -471,6 +501,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -492,6 +524,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -518,6 +552,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -539,6 +575,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -571,6 +609,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -622,6 +662,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -643,6 +685,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -668,6 +712,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -689,6 +735,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -721,6 +769,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -764,6 +814,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -785,6 +837,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -810,6 +864,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -831,6 +887,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -863,6 +921,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -914,6 +974,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -935,6 +997,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -960,6 +1024,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -981,6 +1047,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -1013,6 +1081,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -1056,6 +1126,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -1077,6 +1149,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -1102,6 +1176,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -1123,6 +1199,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -1155,6 +1233,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Group.spec.js.snap b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Group.spec.js.snap index 97c4c2ad1a..21a5321ba1 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Group.spec.js.snap +++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Group.spec.js.snap @@ -37,6 +37,8 @@ exports[`Group displays a group 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -58,6 +60,8 @@ exports[`Group displays a group 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -84,6 +88,8 @@ exports[`Group displays a group 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -105,6 +111,8 @@ exports[`Group displays a group 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -137,6 +145,8 @@ exports[`Group displays a group 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -199,6 +209,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -220,6 +232,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -246,6 +260,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -267,6 +283,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -299,6 +317,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -348,6 +368,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -369,6 +391,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -395,6 +419,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -416,6 +442,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -448,6 +476,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -485,6 +515,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -506,6 +538,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -532,6 +566,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -553,6 +589,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -585,6 +623,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -620,6 +660,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -641,6 +683,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -667,6 +711,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -688,6 +734,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -720,6 +768,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -757,6 +807,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -778,6 +830,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -804,6 +858,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -825,6 +881,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -857,6 +915,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -892,6 +952,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -913,6 +975,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -939,6 +1003,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -960,6 +1026,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -992,6 +1060,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -1029,6 +1099,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1050,6 +1122,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1076,6 +1150,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1097,6 +1173,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1129,6 +1207,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1181,6 +1261,8 @@ exports[`Group renders group with anonymous functions 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1202,6 +1284,8 @@ exports[`Group renders group with anonymous functions 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1228,6 +1312,8 @@ exports[`Group renders group with anonymous functions 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1249,6 +1335,8 @@ exports[`Group renders group with anonymous functions 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1281,6 +1369,8 @@ exports[`Group renders group with anonymous functions 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1343,6 +1433,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1364,6 +1456,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1390,6 +1484,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1411,6 +1507,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1443,6 +1541,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1492,6 +1592,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1513,6 +1615,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1539,6 +1643,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1560,6 +1666,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1592,6 +1700,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1628,6 +1738,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1649,6 +1761,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1675,6 +1789,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1696,6 +1812,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1728,6 +1846,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1763,6 +1883,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -1784,6 +1906,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -1810,6 +1934,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -1831,6 +1957,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -1863,6 +1991,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -1899,6 +2029,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1920,6 +2052,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1946,6 +2080,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1967,6 +2103,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1999,6 +2137,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -2034,6 +2174,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -2055,6 +2197,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -2081,6 +2225,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -2102,6 +2248,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -2134,6 +2282,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -2170,6 +2320,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -2191,6 +2343,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -2217,6 +2371,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -2238,6 +2394,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -2270,6 +2428,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js b/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js index 135decd254..65e4d19032 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js @@ -307,7 +307,7 @@ class Scopes extends PureComponent { dimTopLevelWindow: true, frame: selectedFrame, mayUseCustomFormatter: true, - openLink: openLink, + openLink, onDOMNodeClick: grip => openElementInInspector(grip), onInspectIconClick: grip => openElementInInspector(grip), onDOMNodeMouseOver: grip => highlightDomElement(grip), @@ -315,7 +315,7 @@ class Scopes extends PureComponent { onContextMenu: this.onContextMenu, setExpanded: (path, expand) => setExpandedScope(selectedFrame, path, expand), - initiallyExpanded: initiallyExpanded, + initiallyExpanded, renderItemActions: this.renderWatchpointButton, shouldRenderTooltip: true, }) diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Threads.js b/devtools/client/debugger/src/components/SecondaryPanes/Threads.js index 2d21a1dcc5..f1426c95cb 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Threads.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Threads.js @@ -25,7 +25,7 @@ export class Threads extends Component { }, threads.map(thread => React.createElement(Thread, { - thread: thread, + thread, key: thread.actor, }) ) diff --git a/devtools/client/debugger/src/components/SecondaryPanes/XHRBreakpoints.js b/devtools/client/debugger/src/components/SecondaryPanes/XHRBreakpoints.js index 9774255dcd..f0b86a5f5c 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/XHRBreakpoints.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/XHRBreakpoints.js @@ -164,7 +164,7 @@ class XHRBreakpoints extends Component { this.setState({ focused: true, editing: true }); }; - onMouseDown = e => { + onMouseDown = () => { this.setState({ editing: false, clickedOnFormElement: true }); }; @@ -205,12 +205,12 @@ class XHRBreakpoints extends Component { className: classnames("xhr-input-container xhr-input-form", { focused, }), - onSubmit: onSubmit, + onSubmit, }, input({ className: "xhr-input-url", type: "text", - placeholder: placeholder, + placeholder, onChange: this.handleChange, onBlur: this.hideInput, onFocus: this.onFocus, @@ -262,7 +262,7 @@ class XHRBreakpoints extends Component { className: "xhr-container", key: `${path}-${method}`, title: path, - onDoubleClick: (items, options) => this.editExpression(index), + onDoubleClick: () => this.editExpression(index), }, label( null, @@ -290,7 +290,7 @@ class XHRBreakpoints extends Component { className: "xhr-container__close-btn", }, React.createElement(CloseButton, { - handleClick: e => removeXHRBreakpoint(index), + handleClick: () => removeXHRBreakpoint(index), }) ) ) diff --git a/devtools/client/debugger/src/components/SecondaryPanes/index.js b/devtools/client/debugger/src/components/SecondaryPanes/index.js index 20830afc12..52d0d3298e 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/index.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/index.js @@ -52,7 +52,7 @@ const classnames = require("resource://devtools/client/shared/classnames.js"); function debugBtn(onClick, type, className, tooltip) { return button( { - onClick: onClick, + onClick, className: `${type} ${className}`, key: type, title: tooltip, @@ -136,7 +136,7 @@ class SecondaryPanes extends Component { }, "plus", "active", - L10N.getStr("expressions.placeholder") + L10N.getStr("expressions.placeholder2") ) ); return buttons; @@ -214,7 +214,7 @@ class SecondaryPanes extends Component { input({ type: "checkbox", checked: mapScopesEnabled ? "checked" : "", - onChange: e => this.props.toggleMapScopes(), + onChange: () => this.props.toggleMapScopes(), }), L10N.getStr("scopes.showOriginalScopes") ), @@ -249,7 +249,7 @@ class SecondaryPanes extends Component { input({ type: "checkbox", checked: logEventBreakpoints ? "checked" : "", - onChange: e => this.props.toggleEventLogging(), + onChange: () => this.props.toggleEventLogging(), }), L10N.getStr("eventlisteners.log") ) diff --git a/devtools/client/debugger/src/components/SecondaryPanes/tests/XHRBreakpoints.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/tests/XHRBreakpoints.spec.js index 532c95e4ad..de7ab02ebe 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/tests/XHRBreakpoints.spec.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/tests/XHRBreakpoints.spec.js @@ -225,7 +225,7 @@ describe("XHR Breakpoints", function () { } // check each expected XHR Method to see if they match the actual methods - expectedXHRMethods.forEach((expectedMethod, i) => { + expectedXHRMethods.forEach(expectedMethod => { function compareMethods(actualMethod) { return expectedMethod === actualMethod; } diff --git a/devtools/client/debugger/src/components/shared/Button/CommandBarButton.js b/devtools/client/debugger/src/components/shared/Button/CommandBarButton.js index 4b0b52e186..430feed904 100644 --- a/devtools/client/debugger/src/components/shared/Button/CommandBarButton.js +++ b/devtools/client/debugger/src/components/shared/Button/CommandBarButton.js @@ -22,9 +22,9 @@ export function debugBtn( CommandBarButton, { className: classnames(type, className), - disabled: disabled, + disabled, key: type, - onClick: onClick, + onClick, pressed: ariaPressed, title: tooltip, }, diff --git a/devtools/client/debugger/src/components/shared/Button/tests/CloseButton.spec.js b/devtools/client/debugger/src/components/shared/Button/tests/CloseButton.spec.js index 5e448881d9..60a500776c 100644 --- a/devtools/client/debugger/src/components/shared/Button/tests/CloseButton.spec.js +++ b/devtools/client/debugger/src/components/shared/Button/tests/CloseButton.spec.js @@ -11,7 +11,7 @@ describe("CloseButton", () => { const tooltip = "testTooltip"; const wrapper = shallow( React.createElement(CloseButton, { - tooltip: tooltip, + tooltip, handleClick: () => {}, }) ); diff --git a/devtools/client/debugger/src/components/shared/Button/tests/CommandBarButton.spec.js b/devtools/client/debugger/src/components/shared/Button/tests/CommandBarButton.spec.js index 41537cf8e4..cad3dc1f6b 100644 --- a/devtools/client/debugger/src/components/shared/Button/tests/CommandBarButton.spec.js +++ b/devtools/client/debugger/src/components/shared/Button/tests/CommandBarButton.spec.js @@ -21,7 +21,7 @@ describe("CommandBarButton", () => { const children = [1, 2, 3, 4]; const wrapper = shallow( React.createElement(CommandBarButton, { - children: children, + children, className: "", }) ); diff --git a/devtools/client/debugger/src/components/shared/Dropdown.js b/devtools/client/debugger/src/components/shared/Dropdown.js index a47eef9534..69727b032a 100644 --- a/devtools/client/debugger/src/components/shared/Dropdown.js +++ b/devtools/client/debugger/src/components/shared/Dropdown.js @@ -21,7 +21,7 @@ export class Dropdown extends Component { }; } - toggleDropdown = e => { + toggleDropdown = () => { this.setState(prevState => ({ dropdownShown: !prevState.dropdownShown, })); diff --git a/devtools/client/debugger/src/components/shared/Popover.js b/devtools/client/debugger/src/components/shared/Popover.js index 8748e36418..b81fd7e89e 100644 --- a/devtools/client/debugger/src/components/shared/Popover.js +++ b/devtools/client/debugger/src/components/shared/Popover.js @@ -255,7 +255,6 @@ class Popover extends Component { React.createElement(SmartGap, { token: this.props.target, preview: this.$tooltip || this.$popover, - type: this.props.type, gapHeight: this.gapHeight, coords: this.state.coords, offset: this.$gap.getBoundingClientRect().left, diff --git a/devtools/client/debugger/src/components/shared/ResultList.js b/devtools/client/debugger/src/components/shared/ResultList.js index 6b29de51f4..fb921612e7 100644 --- a/devtools/client/debugger/src/components/shared/ResultList.js +++ b/devtools/client/debugger/src/components/shared/ResultList.js @@ -93,7 +93,7 @@ export default class ResultList extends Component { ref: this.ref, className: classnames("result-list", size), id: "result-list", - role: role, + role, "aria-live": "polite", }, items.map(this.renderListItem) diff --git a/devtools/client/debugger/src/components/shared/SmartGap.js b/devtools/client/debugger/src/components/shared/SmartGap.js index d76d018987..5810aea6ea 100644 --- a/devtools/client/debugger/src/components/shared/SmartGap.js +++ b/devtools/client/debugger/src/components/shared/SmartGap.js @@ -109,7 +109,6 @@ function getSmartGapDimensions( export default function SmartGap({ token, preview, - type, gapHeight, coords, offset, diff --git a/devtools/client/debugger/src/components/shared/tests/Popover.spec.js b/devtools/client/debugger/src/components/shared/tests/Popover.spec.js index 7150f4afe8..0febe5dcd5 100644 --- a/devtools/client/debugger/src/components/shared/tests/Popover.spec.js +++ b/devtools/client/debugger/src/components/shared/tests/Popover.spec.js @@ -53,10 +53,10 @@ describe("Popover", () => { React.createElement( Popover, { - onMouseLeave: onMouseLeave, - onKeyDown: onKeyDown, - editorRef: editorRef, - targetPosition: targetPosition, + onMouseLeave, + onKeyDown, + editorRef, + targetPosition, mouseout: () => {}, target: targetRef, }, @@ -69,10 +69,10 @@ describe("Popover", () => { Popover, { type: "tooltip", - onMouseLeave: onMouseLeave, - onKeyDown: onKeyDown, - editorRef: editorRef, - targetPosition: targetPosition, + onMouseLeave, + onKeyDown, + editorRef, + targetPosition, mouseout: () => {}, target: targetRef, }, @@ -94,10 +94,10 @@ describe("Popover", () => { React.createElement( Popover, { - onMouseLeave: onMouseLeave, - onKeyDown: onKeyDown, - editorRef: editorRef, - targetPosition: targetPosition, + onMouseLeave, + onKeyDown, + editorRef, + targetPosition, mouseout: () => {}, target: targetRef, }, @@ -113,10 +113,10 @@ describe("Popover", () => { Popover, { type: "tooltip", - onMouseLeave: onMouseLeave, - onKeyDown: onKeyDown, - editorRef: editorRef, - targetPosition: targetPosition, + onMouseLeave, + onKeyDown, + editorRef, + targetPosition, mouseout: () => {}, target: targetRef, }, @@ -153,8 +153,8 @@ describe("Popover", () => { Popover, { type: "tooltip", - onMouseLeave: onMouseLeave, - onKeyDown: onKeyDown, + onMouseLeave, + onKeyDown, editorRef: editor, targetPosition: target, mouseout: () => {}, @@ -195,8 +195,8 @@ describe("Popover", () => { Popover, { type: "tooltip", - onMouseLeave: onMouseLeave, - onKeyDown: onKeyDown, + onMouseLeave, + onKeyDown, editorRef: editor, targetPosition: target, mouseout: () => {}, diff --git a/devtools/client/debugger/src/components/shared/tests/SearchInput.spec.js b/devtools/client/debugger/src/components/shared/tests/SearchInput.spec.js index c4c3990771..d7e1e5805c 100644 --- a/devtools/client/debugger/src/components/shared/tests/SearchInput.spec.js +++ b/devtools/client/debugger/src/components/shared/tests/SearchInput.spec.js @@ -17,7 +17,7 @@ describe("SearchInput", () => { }); const wrapper = shallow( React.createElement(SearchInput, { - store: store, + store, query: "", count: 5, placeholder: "A placeholder", diff --git a/devtools/client/debugger/src/components/shared/tests/__snapshots__/Popover.spec.js.snap b/devtools/client/debugger/src/components/shared/tests/__snapshots__/Popover.spec.js.snap index 1c3589a6f8..6379668d6e 100644 --- a/devtools/client/debugger/src/components/shared/tests/__snapshots__/Popover.spec.js.snap +++ b/devtools/client/debugger/src/components/shared/tests/__snapshots__/Popover.spec.js.snap @@ -105,7 +105,6 @@ exports[`Popover mount popover 1`] = ` "getBoundingClientRect": [Function], } } - type="popover" > <svg style={ @@ -234,7 +233,6 @@ exports[`Popover mount tooltip 1`] = ` "getBoundingClientRect": [Function], } } - type="tooltip" > <svg style={ @@ -359,7 +357,6 @@ exports[`Popover render (tooltip) 1`] = ` "getBoundingClientRect": [Function], } } - type="tooltip" > <svg style={ @@ -504,7 +501,6 @@ exports[`Popover render 1`] = ` "getBoundingClientRect": [Function], } } - type="popover" > <svg style={ diff --git a/devtools/client/debugger/src/components/test/QuickOpenModal.spec.js b/devtools/client/debugger/src/components/test/QuickOpenModal.spec.js index 74bc7c75bc..2700960c37 100644 --- a/devtools/client/debugger/src/components/test/QuickOpenModal.spec.js +++ b/devtools/client/debugger/src/components/test/QuickOpenModal.spec.js @@ -130,6 +130,7 @@ describe("QuickOpenModal", () => { displayedSources: [ { url: "mozilla.com", + shortName: "mozilla.com", displayURL: getDisplayURL("mozilla.com"), }, ], @@ -147,6 +148,7 @@ describe("QuickOpenModal", () => { value: "mozilla.com", source: { url: "mozilla.com", + shortName: "mozilla.com", displayURL: getDisplayURL("mozilla.com"), }, }, diff --git a/devtools/client/debugger/src/main.js b/devtools/client/debugger/src/main.js index 83a6c1e6fc..ec734a89d0 100644 --- a/devtools/client/debugger/src/main.js +++ b/devtools/client/debugger/src/main.js @@ -66,7 +66,7 @@ function setPauseOnExceptions() { ); } -async function loadInitialState(commands, toolbox) { +async function loadInitialState() { const pendingBreakpoints = sanitizeBreakpoints( await asyncStore.pendingBreakpoints ); @@ -103,7 +103,7 @@ export async function bootstrap({ // record events. setToolboxTelemetry(panel.toolbox.telemetry); - const initialState = await loadInitialState(commands, panel.toolbox); + const initialState = await loadInitialState(); const workers = bootstrapWorkers(panelWorkers); const { store, actions, selectors } = bootstrapStore( diff --git a/devtools/client/debugger/src/reducers/sources-tree.js b/devtools/client/debugger/src/reducers/sources-tree.js index 0f0e8dadb3..ee8a8d0ca0 100644 --- a/devtools/client/debugger/src/reducers/sources-tree.js +++ b/devtools/client/debugger/src/reducers/sources-tree.js @@ -25,6 +25,11 @@ const IGNORED_EXTENSIONS = ["css", "svg", "png"]; import { isPretty, getRawSourceURL } from "../utils/source"; import { prefs } from "../utils/prefs"; +const lazy = {}; +ChromeUtils.defineESModuleGetters(lazy, { + BinarySearch: "resource://gre/modules/BinarySearch.sys.mjs", +}); + export function initialSourcesTreeState() { return { // List of all Thread Tree Items. @@ -224,8 +229,10 @@ function addThread(state, thread) { // (this is also used by sortThreadItems to sort the thread as a Tree in the Browser Toolbox) threadItem.thread = thread; - // We have to re-sort all threads because of the new `thread` attribute on current thread item - state.threadItems.sort(sortThreadItems); + // We have to remove and re-insert the thread as its order will be based on the newly set `thread` attribute + state.threadItems = [...state.threadItems]; + state.threadItems.splice(state.threadItems.indexOf(threadItem), 1); + addSortedItem(state.threadItems, threadItem, sortThreadItems); } } @@ -303,13 +310,12 @@ function isSourceVisibleInSourceTree( * The already sorted into which a value should be added. * @param {any} newValue * The value to add in the array while keeping the array sorted. - * @param {Function} sortFunction + * @param {Function} comparator * A function to compare two array values and their ordering. * Follow same behavior as Array sorting function. */ -function addSortedItem(array, newValue, sortFunction) { - let index = array.findIndex(value => sortFunction(value, newValue) === 1); - index = index >= 0 ? index : array.length; +function addSortedItem(array, newValue, comparator) { + const index = lazy.BinarySearch.insertionIndexOf(comparator, array, newValue); array.splice(index, 0, newValue); } @@ -396,12 +402,12 @@ function sortItems(a, b) { return -1; } else if (b.type == "directory" && a.type == "source") { return 1; + } else if (a.type == "group" && b.type == "group") { + return a.groupName.localeCompare(b.groupName); } else if (a.type == "directory" && b.type == "directory") { return a.path.localeCompare(b.path); } else if (a.type == "source" && b.type == "source") { - return a.source.displayURL.filename.localeCompare( - b.source.displayURL.filename - ); + return a.source.longName.localeCompare(b.source.longName); } return 0; } @@ -447,7 +453,7 @@ function sortThreadItems(a, b) { if (a.thread.processID > b.thread.processID) { return 1; } else if (a.thread.processID < b.thread.processID) { - return 0; + return -1; } // Order the frame targets and the worker targets by their target name diff --git a/devtools/client/debugger/src/reducers/sources.js b/devtools/client/debugger/src/reducers/sources.js index 76160b75f2..6d90fd5c91 100644 --- a/devtools/client/debugger/src/reducers/sources.js +++ b/devtools/client/debugger/src/reducers/sources.js @@ -182,6 +182,19 @@ function update(state = initialSourcesState(), action) { }; } + case "SET_DEFAULT_SELECTED_LOCATION": { + if ( + state.shouldSelectOriginalLocation == + action.shouldSelectOriginalLocation + ) { + return state; + } + return { + ...state, + shouldSelectOriginalLocation: action.shouldSelectOriginalLocation, + }; + } + case "SET_PENDING_SELECTED_LOCATION": { const pendingSelectedLocation = { url: action.url, diff --git a/devtools/client/debugger/src/reducers/ui.js b/devtools/client/debugger/src/reducers/ui.js index 7f37d2f54f..3544b3aa5c 100644 --- a/devtools/client/debugger/src/reducers/ui.js +++ b/devtools/client/debugger/src/reducers/ui.js @@ -63,6 +63,7 @@ export const initialUIState = () => ({ }, projectSearchQuery: "", hideIgnoredSources: prefs.hideIgnoredSources, + sourceMapsEnabled: prefs.clientSourceMapsEnabled, sourceMapIgnoreListEnabled: prefs.sourceMapIgnoreListEnabled, }); @@ -93,7 +94,7 @@ function update(state = initialUIState(), action) { case "TOGGLE_SOURCE_MAPS_ENABLED": { prefs.clientSourceMapsEnabled = action.value; - return { ...state }; + return { ...state, sourceMapsEnabled: action.value }; } case "SET_ORIENTATION": { diff --git a/devtools/client/debugger/src/selectors/breakpointSources.js b/devtools/client/debugger/src/selectors/breakpointSources.js index a0daedae21..4867ade82c 100644 --- a/devtools/client/debugger/src/selectors/breakpointSources.js +++ b/devtools/client/debugger/src/selectors/breakpointSources.js @@ -5,7 +5,6 @@ import { createSelector } from "devtools/client/shared/vendor/reselect"; import { getSelectedSource } from "./sources"; import { getBreakpointsList } from "./breakpoints"; -import { getFilename } from "../utils/source"; import { getSelectedLocation } from "../utils/selected-location"; // Returns a list of sources with their related breakpoints: @@ -37,16 +36,15 @@ export const getBreakpointSources = createSelector( sources.set(source, { source, breakpoints: [breakpoint], - filename: getFilename(source), }); } else { sources.get(source).breakpoints.push(breakpoint); } } - // Returns an array of breakpoints info per source, sorted by source's filename + // Returns an array of breakpoints info per source, sorted by source's displayed name return [...sources.values()].sort((a, b) => - a.filename.localeCompare(b.filename) + a.source.shortName.localeCompare(b.source.shortName) ); } ); diff --git a/devtools/client/debugger/src/selectors/sources.js b/devtools/client/debugger/src/selectors/sources.js index 938eae9fe2..6a67cf1a32 100644 --- a/devtools/client/debugger/src/selectors/sources.js +++ b/devtools/client/debugger/src/selectors/sources.js @@ -163,6 +163,16 @@ export function getSelectedMappedSource(state) { return mappedSource || null; } +/** + * Helps knowing if we are still computing the mapped location for the currently selected source. + */ +export function isSelectedMappedSourceLoading(state) { + const { selectedOriginalLocation } = state.sources; + // This `selectedOriginalLocation` attribute is set to UNDEFINED_LOCATION when selecting a new source attribute + // and later on, when the source map is processed, it will switch to either a valid location object, or NO_LOCATION if no valid one if found. + return selectedOriginalLocation === UNDEFINED_LOCATION; +} + export const getSelectedSource = createSelector( getSelectedLocation, selectedLocation => { diff --git a/devtools/client/debugger/src/selectors/test/__snapshots__/visibleColumnBreakpoints.spec.js.snap b/devtools/client/debugger/src/selectors/test/__snapshots__/visibleColumnBreakpoints.spec.js.snap index e4b18538cf..04bc12bbec 100644 --- a/devtools/client/debugger/src/selectors/test/__snapshots__/visibleColumnBreakpoints.spec.js.snap +++ b/devtools/client/debugger/src/selectors/test/__snapshots__/visibleColumnBreakpoints.spec.js.snap @@ -22,6 +22,8 @@ Array [ "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -44,6 +46,8 @@ Array [ "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -83,6 +87,8 @@ Array [ "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -105,6 +111,8 @@ Array [ "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -152,6 +160,8 @@ Array [ "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -174,6 +184,8 @@ Array [ "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -221,6 +233,8 @@ Array [ "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -243,6 +257,8 @@ Array [ "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, diff --git a/devtools/client/debugger/src/selectors/ui.js b/devtools/client/debugger/src/selectors/ui.js index 4780b5e051..0dc97bed1b 100644 --- a/devtools/client/debugger/src/selectors/ui.js +++ b/devtools/client/debugger/src/selectors/ui.js @@ -115,3 +115,7 @@ export function getHideIgnoredSources(state) { export function isSourceMapIgnoreListEnabled(state) { return state.ui.sourceMapIgnoreListEnabled; } + +export function areSourceMapsEnabled(state) { + return state.ui.sourceMapsEnabled; +} diff --git a/devtools/client/debugger/src/utils/bootstrap.js b/devtools/client/debugger/src/utils/bootstrap.js index e8d6de2cf0..e0ee6c35be 100644 --- a/devtools/client/debugger/src/utils/bootstrap.js +++ b/devtools/client/debugger/src/utils/bootstrap.js @@ -42,7 +42,7 @@ export function bootstrapStore(client, workers, panel, initialState) { const createStore = configureStore({ log: prefs.logging || flags.testing, timing: debugJsModules, - makeThunkArgs: (args, state) => { + makeThunkArgs: args => { return { ...args, client, ...workers, panel }; }, }); diff --git a/devtools/client/debugger/src/utils/editor/create-editor.js b/devtools/client/debugger/src/utils/editor/create-editor.js index 6bb280fc4d..74b41ff78b 100644 --- a/devtools/client/debugger/src/utils/editor/create-editor.js +++ b/devtools/client/debugger/src/utils/editor/create-editor.js @@ -5,7 +5,7 @@ import SourceEditor from "devtools/client/shared/sourceeditor/editor"; import { features, prefs } from "../prefs"; -export function createEditor() { +export function createEditor(useCm6 = false) { const gutters = ["breakpoints", "hit-markers", "CodeMirror-linenumbers"]; if (features.codeFolding) { @@ -13,7 +13,8 @@ export function createEditor() { } return new SourceEditor({ - mode: "javascript", + mode: SourceEditor.modes.js, + cm6: useCm6, foldGutter: features.codeFolding, enableCodeFolding: features.codeFolding, readOnly: true, diff --git a/devtools/client/debugger/src/utils/editor/index.js b/devtools/client/debugger/src/utils/editor/index.js index 1adc73b4f8..d12e2f29f1 100644 --- a/devtools/client/debugger/src/utils/editor/index.js +++ b/devtools/client/debugger/src/utils/editor/index.js @@ -14,12 +14,12 @@ import { createLocation } from "../location"; let editor; -export function getEditor() { +export function getEditor(useCm6) { if (editor) { return editor; } - editor = createEditor(); + editor = createEditor(useCm6); return editor; } @@ -27,6 +27,16 @@ export function removeEditor() { editor = null; } +/** + * Update line wrapping for the codemirror editor. + */ +export function updateEditorLineWrapping(value) { + if (!editor) { + return; + } + editor.setLineWrapping(value); +} + function getCodeMirror() { return editor && editor.hasCodeMirror ? editor.codeMirror : null; } diff --git a/devtools/client/debugger/src/utils/editor/source-documents.js b/devtools/client/debugger/src/utils/editor/source-documents.js index 2ddb0b1965..53ee4f2f35 100644 --- a/devtools/client/debugger/src/utils/editor/source-documents.js +++ b/devtools/client/debugger/src/utils/editor/source-documents.js @@ -35,7 +35,7 @@ export function clearDocumentsForSources(sources) { } } -function resetLineNumberFormat(editor) { +export function resetLineNumberFormat(editor) { const cm = editor.codeMirror; cm.setOption("lineNumberFormatter", number => number); resizeBreakpointGutter(cm); @@ -54,59 +54,6 @@ function updateLineNumberFormat(editor, sourceId) { 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 }], diff --git a/devtools/client/debugger/src/utils/editor/source-search.js b/devtools/client/debugger/src/utils/editor/source-search.js index 92097377ba..2316cd2ccb 100644 --- a/devtools/client/debugger/src/utils/editor/source-search.js +++ b/devtools/client/debugger/src/utils/editor/source-search.js @@ -27,7 +27,7 @@ function SearchState() { * @memberof utils/source-search * @static */ -function getSearchState(cm, query) { +function getSearchState(cm) { const state = cm.state.search || (cm.state.search = new SearchState()); return state; } @@ -55,7 +55,7 @@ function searchOverlay(query, modifiers) { }); return { - token: function (stream, state) { + token(stream) { // set the last index to be the current stream position // this acts as an offset regexQuery.lastIndex = stream.pos; @@ -141,11 +141,11 @@ function doSearch( return cm.operation(function () { if (!query || isWhitespace(query)) { - clearSearch(cm, query); + clearSearch(cm); return null; } - const state = getSearchState(cm, query); + const state = getSearchState(cm); const isNewQuery = state.query !== query; state.query = query; @@ -179,7 +179,7 @@ export function searchSourceForHighlight( } cm.operation(function () { - const state = getSearchState(cm, query); + const state = getSearchState(cm); const isNewQuery = state.query !== query; state.query = query; @@ -207,7 +207,7 @@ function searchNext(ctx, rev, query, newQuery, modifiers) { const { cm } = ctx; let nextMatch; cm.operation(function () { - const state = getSearchState(cm, query); + const state = getSearchState(cm); const pos = getCursorPos(newQuery, rev, state); if (!state.query) { @@ -261,8 +261,8 @@ function findNextOnLine(ctx, rev, query, newQuery, modifiers, line, ch) { * @memberof utils/source-search * @static */ -export function removeOverlay(ctx, query) { - const state = getSearchState(ctx.cm, query); +export function removeOverlay(ctx) { + const state = getSearchState(ctx.cm); ctx.cm.removeOverlay(state.overlay); const { line, ch } = ctx.cm.getCursor(); ctx.cm.doc.setSelection({ line, ch }, { line, ch }, { scroll: false }); @@ -274,8 +274,8 @@ export function removeOverlay(ctx, query) { * @memberof utils/source-search * @static */ -export function clearSearch(cm, query) { - const state = getSearchState(cm, query); +export function clearSearch(cm) { + const state = getSearchState(cm); state.results = []; @@ -293,7 +293,7 @@ export function clearSearch(cm, query) { * @static */ export function find(ctx, query, keepSelection, modifiers, focusFirstResult) { - clearSearch(ctx.cm, query); + clearSearch(ctx.cm); return doSearch( ctx, false, 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 Binary files differindex 843647731b..5c47ed94c7 100644 --- 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 diff --git a/devtools/client/debugger/src/utils/moz.build b/devtools/client/debugger/src/utils/moz.build index 8deb8e18db..742f96e060 100644 --- a/devtools/client/debugger/src/utils/moz.build +++ b/devtools/client/debugger/src/utils/moz.build @@ -42,7 +42,6 @@ CompiledModules( "source-queue.js", "source.js", "tabs.js", - "task.js", "telemetry.js", "text.js", "ui.js", diff --git a/devtools/client/debugger/src/utils/quick-open.js b/devtools/client/debugger/src/utils/quick-open.js index e2624559bc..f51d1c6ac7 100644 --- a/devtools/client/debugger/src/utils/quick-open.js +++ b/devtools/client/debugger/src/utils/quick-open.js @@ -3,12 +3,7 @@ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */ import { endTruncateStr } from "./utils"; -import { - getFilename, - getSourceClassnames, - getSourceQueryString, - getRelativeUrl, -} from "./source"; +import { getSourceClassnames, getRelativeUrl } from "./source"; export const MODIFIERS = { "@": "functions", @@ -62,16 +57,15 @@ export function formatSourceForList( isBlackBoxed, projectDirectoryRoot ) { - const title = getFilename(source); const relativeUrlWithQuery = `${getRelativeUrl( source, projectDirectoryRoot - )}${getSourceQueryString(source) || ""}`; + )}${source.displayURL.search || ""}`; const subtitle = endTruncateStr(relativeUrlWithQuery, 100); const value = relativeUrlWithQuery; return { value, - title, + title: source.shortName, subtitle, icon: hasTabOpened ? "tab result-item-icon" diff --git a/devtools/client/debugger/src/utils/source.js b/devtools/client/debugger/src/utils/source.js index 31920453eb..91a02778e2 100644 --- a/devtools/client/debugger/src/utils/source.js +++ b/devtools/client/debugger/src/utils/source.js @@ -17,7 +17,6 @@ const { 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"; @@ -214,33 +213,10 @@ export function getFormattedSourceId(id) { } /** - * 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 + * Provides a middle-truncated filename displayed in Tab titles */ -export function getTruncatedFileName(source, querystring = "", length = 30) { - return truncateMiddleText(`${getFilename(source)}${querystring}`, length); +export function getTruncatedFileName(source) { + return truncateMiddleText(source.longName, 30); } /* Gets path for files with same filename for editor tabs, breakpoints, etc. @@ -252,15 +228,13 @@ export function getTruncatedFileName(source, querystring = "", length = 30) { export function getDisplayPath(mySource, sources) { const rawSourceURL = getRawSourceURL(mySource.url); - const filename = getFilename(mySource, rawSourceURL); + const filename = mySource.shortName; // 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) - ); + return rawSourceURL != rawSource && filename == source.shortName; }); if (!similarSources.length) { @@ -314,16 +288,6 @@ export function getFileURL(source, truncate = true) { 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. @@ -345,10 +309,6 @@ export function getSourceLineCount(content) { return count + 1; } -export function isInlineScript(source) { - return source.introductionType === "scriptElement"; -} - function getNthLine(str, lineNum) { let startIndex = -1; @@ -454,51 +414,6 @@ export function getRelativeUrl(source, root) { 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"); } diff --git a/devtools/client/debugger/src/utils/sources-tree/getURL.js b/devtools/client/debugger/src/utils/sources-tree/getURL.js index c01fce5f23..5c9e7db6e5 100644 --- a/devtools/client/debugger/src/utils/sources-tree/getURL.js +++ b/devtools/client/debugger/src/utils/sources-tree/getURL.js @@ -56,6 +56,9 @@ const def = { * 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. + * - `filename` which may not be quite matching the URL. + * When files are loaded from "/", they won't have a real name, + * but instead this will report "(index)". * - `fileExtension`, lowercased file extension of the source * (if any extension is available) * - `path` and `pathname` have some special behavior. @@ -66,8 +69,14 @@ export function getDisplayURL(url, extensionName = null) { return def; } - const { pathname, search, protocol, host } = parse(url); - const filename = getUnicodeUrlPath(getFilenameFromPath(pathname)); + let { pathname, search, protocol, host } = parse(url); + + // Decode encoded characters early so that all other code rely on decoded strings + pathname = getUnicodeUrlPath(pathname); + search = getUnicodeUrlPath(search); + host = getUnicodeHostname(host); + + const filename = getFilenameFromPath(pathname); switch (protocol) { case "javascript:": @@ -121,7 +130,7 @@ export function getDisplayURL(url, extensionName = null) { search, filename, fileExtension: getFileExtension("/"), - group: url, + group: getUnicodeUrlPath(url), }; case "data:": @@ -165,7 +174,7 @@ export function getDisplayURL(url, extensionName = null) { search, filename, fileExtension: getFileExtension(pathname), - group: getUnicodeHostname(host), + group: host, }; } diff --git a/devtools/client/debugger/src/utils/sources-tree/utils.js b/devtools/client/debugger/src/utils/sources-tree/utils.js index 0a2f41752b..45eba2d817 100644 --- a/devtools/client/debugger/src/utils/sources-tree/utils.js +++ b/devtools/client/debugger/src/utils/sources-tree/utils.js @@ -28,17 +28,3 @@ export function getRelativePath(url) { } 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/task.js b/devtools/client/debugger/src/utils/task.js deleted file mode 100644 index 25663fdd16..0000000000 --- a/devtools/client/debugger/src/utils/task.js +++ /dev/null @@ -1,44 +0,0 @@ -/* 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/test-head.js b/devtools/client/debugger/src/utils/test-head.js index c21f408b61..1021849d02 100644 --- a/devtools/client/debugger/src/utils/test-head.js +++ b/devtools/client/debugger/src/utils/test-head.js @@ -101,10 +101,11 @@ function makeFrame({ id, sourceId, thread }, opts = {}) { }; } -function createSourceObject(filename, props = {}) { +function createSourceObject(filename) { return { id: filename, url: makeSourceURL(filename), + shortName: filename, isPrettyPrinted: false, isExtension: false, isOriginal: filename.includes("originalSource"), diff --git a/devtools/client/debugger/src/utils/test-mockup.js b/devtools/client/debugger/src/utils/test-mockup.js index 521872b7cb..8224050f6a 100644 --- a/devtools/client/debugger/src/utils/test-mockup.js +++ b/devtools/client/debugger/src/utils/test-mockup.js @@ -20,6 +20,8 @@ function makeMockSource(url = "url", id = "source", thread = "FakeThread") { return { id, url, + shortName: getDisplayURL(url).filename, + longName: getDisplayURL(url).filename + getDisplayURL(url).search, displayURL: getDisplayURL(url), thread, isPrettyPrinted: false, diff --git a/devtools/client/debugger/src/utils/tests/source.spec.js b/devtools/client/debugger/src/utils/tests/source.spec.js index 484c8ce570..6542ee2c0d 100644 --- a/devtools/client/debugger/src/utils/tests/source.spec.js +++ b/devtools/client/debugger/src/utils/tests/source.spec.js @@ -3,14 +3,11 @@ * 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"; @@ -20,7 +17,6 @@ import { makeMockSourceWithContent, makeMockSourceAndContent, makeMockWasmSourceWithContent, - makeMockThread, makeFullfilledMockSourceContent, } from "../test-mockup"; import { isFulfilled } from "../async-value.js"; @@ -29,66 +25,20 @@ 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 + makeMockSource(`${encodedUnicode.repeat(30)}.html`) ) ).toBe("測測測測測測測測測測測測測…測測測測測測測測測.html"); }); @@ -274,42 +224,6 @@ describe("sources", () => { }); }); - 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); diff --git a/devtools/client/debugger/src/workers/parser/mapAwaitExpression.js b/devtools/client/debugger/src/workers/parser/mapAwaitExpression.js index ec29d6cf21..97018a129b 100644 --- a/devtools/client/debugger/src/workers/parser/mapAwaitExpression.js +++ b/devtools/client/debugger/src/workers/parser/mapAwaitExpression.js @@ -11,7 +11,7 @@ import { isTopLevel } from "./utils/helpers"; function hasTopLevelAwait(ast) { const hasAwait = hasNode( ast, - (node, ancestors, b) => t.isAwaitExpression(node) && isTopLevel(ancestors) + (node, ancestors) => t.isAwaitExpression(node) && isTopLevel(ancestors) ); return hasAwait; diff --git a/devtools/client/debugger/src/workers/parser/tests/__snapshots__/validate.spec.js.snap b/devtools/client/debugger/src/workers/parser/tests/__snapshots__/validate.spec.js.snap deleted file mode 100644 index a341538a5d..0000000000 --- a/devtools/client/debugger/src/workers/parser/tests/__snapshots__/validate.spec.js.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`has syntax error should return the error object for the invalid expression 1`] = `"SyntaxError : Missing semicolon. (1:3)"`; diff --git a/devtools/client/debugger/src/workers/parser/tests/framework.spec.js b/devtools/client/debugger/src/workers/parser/tests/framework.spec.js index d41f45b71c..fe25fbe283 100644 --- a/devtools/client/debugger/src/workers/parser/tests/framework.spec.js +++ b/devtools/client/debugger/src/workers/parser/tests/framework.spec.js @@ -8,7 +8,7 @@ import cases from "jest-in-case"; cases( "Parser.getFramework", - ({ name, file, value }) => { + () => { const source = populateOriginalSource("frameworks/plainJavascript"); const symbols = getSymbols(source.id); expect(symbols.framework).toBeNull(); diff --git a/devtools/client/debugger/src/workers/parser/tests/getSymbols.spec.js b/devtools/client/debugger/src/workers/parser/tests/getSymbols.spec.js index 723eef1fd9..0c5306d423 100644 --- a/devtools/client/debugger/src/workers/parser/tests/getSymbols.spec.js +++ b/devtools/client/debugger/src/workers/parser/tests/getSymbols.spec.js @@ -9,7 +9,7 @@ import cases from "jest-in-case"; cases( "Parser.getSymbols", - ({ name, file, original, type }) => { + ({ file, original, type }) => { const source = original ? populateOriginalSource(file, type) : populateSource(file, type); diff --git a/devtools/client/debugger/src/workers/parser/tests/mapBindings.spec.js b/devtools/client/debugger/src/workers/parser/tests/mapBindings.spec.js index 8c23ab5873..3731ac1dd5 100644 --- a/devtools/client/debugger/src/workers/parser/tests/mapBindings.spec.js +++ b/devtools/client/debugger/src/workers/parser/tests/mapBindings.spec.js @@ -12,7 +12,7 @@ function format(code) { return prettier.format(code, { semi: false, parser: "babel" }); } -function excludedTest({ name, expression, bindings = [] }) { +function excludedTest({ expression, bindings = [] }) { const safeExpression = mapExpressionBindings( expression, parseConsoleScript(expression), @@ -21,7 +21,7 @@ function excludedTest({ name, expression, bindings = [] }) { expect(format(safeExpression)).toEqual(format(expression)); } -function includedTest({ name, expression, newExpression, bindings }) { +function includedTest({ expression, newExpression, bindings }) { const safeExpression = mapExpressionBindings( expression, parseConsoleScript(expression), diff --git a/devtools/client/debugger/test/mochitest/browser_aj.toml b/devtools/client/debugger/test/mochitest/browser_aj.toml index cbedf75eae..fe154b8149 100644 --- a/devtools/client/debugger/test/mochitest/browser_aj.toml +++ b/devtools/client/debugger/test/mochitest/browser_aj.toml @@ -198,6 +198,9 @@ fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and ["browser_dbg-features-asm.js"] ["browser_dbg-features-breakable-lines.js"] +skip-if = [ + "apple_catalina && !debug", # Bug 1767701 +] ["browser_dbg-features-breakable-positions.js"] fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-blackbox-all.js b/devtools/client/debugger/test/mochitest/browser_dbg-blackbox-all.js index 8080d3c145..42eec2716c 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-blackbox-all.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-blackbox-all.js @@ -200,7 +200,7 @@ add_task(async function testHideAndShowBlackBoxedFiles() { function waitForBlackboxCount(dbg, count) { return waitForState( dbg, - state => Object.keys(dbg.selectors.getBlackBoxRanges()).length === count + () => Object.keys(dbg.selectors.getBlackBoxRanges()).length === count ); } diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-breakpoint-skipping.js b/devtools/client/debugger/test/mochitest/browser_dbg-breakpoint-skipping.js index c766a0e549..f995df2b6b 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-breakpoint-skipping.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-breakpoint-skipping.js @@ -15,9 +15,9 @@ add_task(async function () { info("Adding a breakpoint should remove the skipped pausing state"); await skipPausing(dbg); - await waitForState(dbg, state => dbg.selectors.getSkipPausing()); + await waitForState(dbg, () => dbg.selectors.getSkipPausing()); await addBreakpoint(dbg, "simple3.js", 2); - await waitForState(dbg, state => !dbg.selectors.getSkipPausing()); + await waitForState(dbg, () => !dbg.selectors.getSkipPausing()); invokeInTab("simple"); await waitForPaused(dbg); ok(true, "The breakpoint has been hit after a breakpoint was created"); @@ -28,13 +28,13 @@ add_task(async function () { // during a disable await skipPausing(dbg); await disableBreakpoint(dbg, 0); - await waitForState(dbg, state => !dbg.selectors.getSkipPausing()); + await waitForState(dbg, () => !dbg.selectors.getSkipPausing()); // Then re-enable the breakpoint to ensure skip pausing gets turned off // during an enable await skipPausing(dbg); - await waitForState(dbg, state => dbg.selectors.getSkipPausing()); + await waitForState(dbg, () => dbg.selectors.getSkipPausing()); toggleBreakpoint(dbg, 0); - await waitForState(dbg, state => !dbg.selectors.getSkipPausing()); + await waitForState(dbg, () => !dbg.selectors.getSkipPausing()); await waitForDispatch(dbg.store, "SET_BREAKPOINT"); invokeInTab("simple"); await waitForPaused(dbg); @@ -45,7 +45,7 @@ add_task(async function () { await addBreakpoint(dbg, "simple3.js", 3); await skipPausing(dbg); await disableBreakpoint(dbg, 0); - await waitForState(dbg, state => !dbg.selectors.getSkipPausing()); + await waitForState(dbg, () => !dbg.selectors.getSkipPausing()); invokeInTab("simple"); await waitForPaused(dbg); ok(true, "The breakpoint has been hit after skip pausing was disabled again"); @@ -57,7 +57,7 @@ add_task(async function () { const source = findSource(dbg, "simple3.js"); removeBreakpoint(dbg, source.id, 3); const wait = waitForDispatch(dbg.store, "TOGGLE_SKIP_PAUSING"); - await waitForState(dbg, state => !dbg.selectors.getSkipPausing()); + await waitForState(dbg, () => !dbg.selectors.getSkipPausing()); await wait; invokeInTab("simple"); await waitForPaused(dbg); @@ -70,7 +70,7 @@ add_task(async function () { function skipPausing(dbg) { clickElementWithSelector(dbg, ".command-bar-skip-pausing"); - return waitForState(dbg, state => dbg.selectors.getSkipPausing()); + return waitForState(dbg, () => dbg.selectors.getSkipPausing()); } function toggleBreakpoint(dbg, index) { diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-actions.js b/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-actions.js index 900c55e7fa..4150f552a1 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-actions.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-actions.js @@ -16,7 +16,7 @@ add_task(async function () { // select "Remove breakpoint" selectContextMenuItem(dbg, selectors.breakpointContextMenu.remove); - await waitForState(dbg, state => dbg.selectors.getBreakpointCount() === 0); + await waitForState(dbg, () => dbg.selectors.getBreakpointCount() === 0); ok(true, "successfully removed the breakpoint"); }); @@ -34,7 +34,7 @@ add_task(async function () { // select "Disable Others" let dispatched = waitForDispatch(dbg.store, "SET_BREAKPOINT", 2); selectContextMenuItem(dbg, selectors.breakpointContextMenu.disableOthers); - await waitForState(dbg, state => + await waitForState(dbg, () => dbg.selectors .getBreakpointsList() .every(bp => (bp.location.line !== 4) === bp.disabled) @@ -46,7 +46,7 @@ add_task(async function () { // select "Disable All" dispatched = waitForDispatch(dbg.store, "SET_BREAKPOINT"); selectContextMenuItem(dbg, selectors.breakpointContextMenu.disableAll); - await waitForState(dbg, state => + await waitForState(dbg, () => dbg.selectors.getBreakpointsList().every(bp => bp.disabled) ); await dispatched; @@ -56,7 +56,7 @@ add_task(async function () { // select "Enable Others" dispatched = waitForDispatch(dbg.store, "SET_BREAKPOINT", 2); selectContextMenuItem(dbg, selectors.breakpointContextMenu.enableOthers); - await waitForState(dbg, state => + await waitForState(dbg, () => dbg.selectors .getBreakpointsList() .every(bp => (bp.location.line === 4) === bp.disabled) @@ -70,7 +70,7 @@ add_task(async function () { selectContextMenuItem(dbg, selectors.breakpointContextMenu.removeOthers); await waitForState( dbg, - state => + () => dbg.selectors.getBreakpointsList().length === 1 && dbg.selectors.getBreakpointsList()[0].location.line === 4 ); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-columns.js b/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-columns.js index 6234e22dcb..b48c2d162a 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-columns.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-columns.js @@ -36,7 +36,10 @@ add_task(async function () { await setConditionalBreakpoint(dbg, 1, "foo2"); info("10. Test removing the breakpoints by clicking in the gutter"); - await removeAllBreakpoints(dbg, 32, 0); + await clickGutter(dbg, 32); + await waitForBreakpointCount(dbg, 0); + + ok(!findAllElements(dbg, "columnBreakpoints").length); }); async function enableFirstBreakpoint(dbg) { @@ -106,7 +109,7 @@ async function disableBreakpoint(dbg, index) { await waitForContextMenu(dbg); selectContextMenuItem(dbg, selectors.disableItem); - await waitForState(dbg, state => { + await waitForState(dbg, () => { const bp = dbg.selectors.getBreakpointsList()[index]; return bp.disabled; }); @@ -122,10 +125,3 @@ async function removeFirstBreakpoint(dbg) { bpMarkers = await waitForAllElements(dbg, "columnBreakpoints"); assertClass(bpMarkers[0], "active", false); } - -async function removeAllBreakpoints(dbg, line, count) { - await clickGutter(dbg, 32); - await waitForBreakpointCount(dbg, 0); - - ok(!findAllElements(dbg, "columnBreakpoints").length); -} diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-duplicate-functions.js b/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-duplicate-functions.js index bb1fa3d64b..ef12144cdb 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-duplicate-functions.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-duplicate-functions.js @@ -20,7 +20,7 @@ add_task(async function () { await reload(dbg, "doc-duplicate-functions.html"); - await waitForState(dbg, state => dbg.selectors.getBreakpointCount() == 1); + await waitForState(dbg, () => dbg.selectors.getBreakpointCount() == 1); const firstBreakpoint = dbg.selectors.getBreakpointsList()[0]; is(firstBreakpoint.location.line, 21, "Breakpoint is on line 21"); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-popup.js b/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-popup.js index a3b7753738..eba02919d3 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-popup.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-popup.js @@ -23,7 +23,7 @@ const POPUP_DEBUGGER_STATEMENT_URL = `https://example.com/document-builder.sjs?h `)}`; function isPopupPaused(popupBrowsingContext) { - return SpecialPowers.spawn(popupBrowsingContext, [], function (url) { + return SpecialPowers.spawn(popupBrowsingContext, [], function () { return content.wrappedJSObject.paused; }); } diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-reloading.js b/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-reloading.js index ca953445ba..6e1f4582fd 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-reloading.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-reloading.js @@ -38,7 +38,7 @@ add_task(async function () { await assertPausedAtSourceAndLine(dbg, source.id, 61); info("The breakpoint for long.js does not exist yet"); - await waitForState(dbg, state => dbg.selectors.getBreakpointCount() == 2); + await waitForState(dbg, () => dbg.selectors.getBreakpointCount() == 2); // The breakpoints are available once their corresponding source // has been processed. Let's assert that all the breakpoints for @@ -54,7 +54,7 @@ add_task(async function () { await assertPausedAtSourceAndLine(dbg, source2.id, 1); info("All 3 breakpoints from simple1.js and long.js still exist"); - await waitForState(dbg, state => dbg.selectors.getBreakpointCount() == 3); + await waitForState(dbg, () => dbg.selectors.getBreakpointCount() == 3); await assertBreakpoint(dbg, 1); @@ -89,7 +89,7 @@ add_task(async function () { await assertPausedAtSourceAndLine(dbg, source.id, 22); info("Only the breakpoint for the first inline script should exist"); - await waitForState(dbg, state => dbg.selectors.getBreakpointCount() == 1); + await waitForState(dbg, () => dbg.selectors.getBreakpointCount() == 1); await assertBreakpoint(dbg, 22); @@ -102,7 +102,7 @@ add_task(async function () { await waitForPaused(dbg); info("All 2 breakpoints from both inline scripts still exist"); - await waitForState(dbg, state => dbg.selectors.getBreakpointCount() == 2); + await waitForState(dbg, () => dbg.selectors.getBreakpointCount() == 2); await assertPausedAtSourceAndLine(dbg, source.id, 27); await assertBreakpoint(dbg, 27); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-editor-select.js b/devtools/client/debugger/test/mochitest/browser_dbg-editor-select.js index c0c6c03a43..85467d2347 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-editor-select.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-editor-select.js @@ -32,6 +32,7 @@ add_task(async function () { // Note that CodeMirror is 0-based while the footer displays 1-based getCM(dbg).setCursor({ line: 1, ch: 0 }); + await waitForCursorPosition(dbg, 2); assertCursorPosition( dbg, 2, @@ -44,6 +45,7 @@ add_task(async function () { ); getCM(dbg).setCursor({ line: 2, ch: 0 }); + await waitForCursorPosition(dbg, 3); assertCursorPosition( dbg, 3, diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-features-browser-toolbox-source-tree.js b/devtools/client/debugger/test/mochitest/browser_dbg-features-browser-toolbox-source-tree.js index fa321f5f43..539b273697 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-features-browser-toolbox-source-tree.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-features-browser-toolbox-source-tree.js @@ -56,6 +56,8 @@ add_task(async function testSourceTreeNamesForWebExtensions() { }); await ToolboxTask.spawn(null, async () => { + // Disable autofixing to `Assert` methods which are not available here. + /* eslint-disable mozilla/no-comparison-or-assignment-inside-ok */ try { /* global gToolbox */ // Wait for the debugger to finish loading. diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-features-source-tree.js b/devtools/client/debugger/test/mochitest/browser_dbg-features-source-tree.js index f4fdd30898..4590f0c2b3 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-features-source-tree.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-features-source-tree.js @@ -124,7 +124,7 @@ add_task(async function testSimpleSourcesWithManualClickExpand() { info("Test the download file context menu"); // Before trigerring the menu, mock the file picker const MockFilePicker = SpecialPowers.MockFilePicker; - MockFilePicker.init(window); + MockFilePicker.init(window.browsingContext); const nsiFile = new FileUtils.File( PathUtils.join(PathUtils.tempDir, `export_source_content_${Date.now()}.log`) ); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-function-returns.js b/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-function-returns.js index 4b75be5cd7..12102e602d 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-function-returns.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-function-returns.js @@ -29,7 +29,7 @@ add_task(async function testTracingFunctionReturn() { const topLevelThreadActorID = dbg.toolbox.commands.targetCommand.targetFront.threadFront.actorID; info("Wait for tracing to be enabled"); - await waitForState(dbg, state => { + await waitForState(dbg, () => { return dbg.selectors.getIsThreadCurrentlyTracing(topLevelThreadActorID); }); @@ -42,7 +42,7 @@ add_task(async function testTracingFunctionReturn() { await clickElement(dbg, "trace"); info("Wait for tracing to be disabled"); - await waitForState(dbg, state => { + await waitForState(dbg, () => { return !dbg.selectors.getIsThreadCurrentlyTracing(topLevelThreadActorID); }); @@ -55,7 +55,7 @@ add_task(async function testTracingFunctionReturn() { await clickElement(dbg, "trace"); info("Wait for tracing to be re-enabled with logging of returned values"); - await waitForState(dbg, state => { + await waitForState(dbg, () => { return dbg.selectors.getIsThreadCurrentlyTracing(topLevelThreadActorID); }); @@ -81,7 +81,7 @@ add_task(async function testTracingFunctionReturn() { info("Stop tracing"); await clickElement(dbg, "trace"); - await waitForState(dbg, state => { + await waitForState(dbg, () => { return !dbg.selectors.getIsThreadCurrentlyTracing(topLevelThreadActorID); }); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-next-interation.js b/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-next-interation.js index 37e275f273..8d3b2ae6f2 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-next-interation.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-next-interation.js @@ -64,7 +64,7 @@ add_task(async function testTracingOnNextInteraction() { let topLevelThreadActorID = dbg.toolbox.commands.targetCommand.targetFront.threadFront.actorID; info("Wait for tracing to be enabled"); - await waitForState(dbg, state => { + await waitForState(dbg, () => { return dbg.selectors.getIsThreadCurrentlyTracing(topLevelThreadActorID); }); @@ -96,7 +96,7 @@ add_task(async function testTracingOnNextInteraction() { topLevelThreadActorID = dbg.toolbox.commands.targetCommand.targetFront.threadFront.actorID; info("Wait for tracing to be disabled"); - await waitForState(dbg, state => { + await waitForState(dbg, () => { return !dbg.selectors.getIsThreadCurrentlyTracing(topLevelThreadActorID); }); @@ -127,7 +127,7 @@ add_task(async function testInteractionBetweenDebuggerAndConsole() { const topLevelThreadActorID = dbg.toolbox.commands.targetCommand.targetFront.threadFront.actorID; info("Wait for tracing to be enabled"); - await waitForState(dbg, state => { + await waitForState(dbg, () => { return dbg.selectors.getIsThreadCurrentlyTracing(topLevelThreadActorID); }); @@ -159,7 +159,7 @@ add_task(async function testInteractionBetweenDebuggerAndConsole() { is(msg.textContent.trim(), "Started tracing to Web Console"); info("Wait for tracing to be also enabled in the debugger"); - await waitForState(dbg, state => { + await waitForState(dbg, () => { return dbg.selectors.getIsThreadCurrentlyTracing(topLevelThreadActorID); }); ok(true, "Debugger also reports the tracing in progress"); @@ -172,7 +172,7 @@ add_task(async function testInteractionBetweenDebuggerAndConsole() { await clickElement(dbg, "trace"); info("Wait for tracing to be disabled per debugger button"); - await waitForState(dbg, state => { + await waitForState(dbg, () => { return dbg.selectors.getIsThreadCurrentlyTracing(topLevelThreadActorID); }); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-next-load.js b/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-next-load.js index 6ee442cbd0..b4259d5eb6 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-next-load.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-next-load.js @@ -80,7 +80,7 @@ add_task(async function testTracingOnNextLoad() { let topLevelThreadActorID = dbg.toolbox.commands.targetCommand.targetFront.threadFront.actorID; info("Wait for tracing to be enabled after page reload"); - await waitForState(dbg, state => { + await waitForState(dbg, () => { return dbg.selectors.getIsThreadCurrentlyTracing(topLevelThreadActorID); }); ok( @@ -105,7 +105,7 @@ add_task(async function testTracingOnNextLoad() { topLevelThreadActorID = dbg.toolbox.commands.targetCommand.targetFront.threadFront.actorID; info("Wait for tracing to be disabled"); - await waitForState(dbg, state => { + await waitForState(dbg, () => { return dbg.selectors.getIsThreadCurrentlyTracing(topLevelThreadActorID); }); await waitFor(() => { diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-values.js b/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-values.js index 92ff3c30a4..99ce73ac9d 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-values.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-values.js @@ -28,7 +28,7 @@ add_task(async function testTracingValues() { const topLevelThreadActorID = dbg.toolbox.commands.targetCommand.targetFront.threadFront.actorID; info("Wait for tracing to be enabled"); - await waitForState(dbg, state => { + await waitForState(dbg, () => { return dbg.selectors.getIsThreadCurrentlyTracing(topLevelThreadActorID); }); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-worker.js b/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-worker.js index cabcb1deb8..df91b71e0f 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-worker.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-worker.js @@ -41,7 +41,7 @@ add_task(async function testTracingWorker() { info("Enable tracing on all threads"); await clickElement(dbg, "trace"); info("Wait for tracing to be enabled for the worker"); - await waitForState(dbg, state => { + await waitForState(dbg, () => { return dbg.selectors.getIsThreadCurrentlyTracing( workerTarget.threadFront.actorID ); @@ -56,7 +56,7 @@ add_task(async function testTracingWorker() { content.worker.postMessage("foo"); }); - await hasConsoleMessage(dbg, "DOM(message)"); + await hasConsoleMessage(dbg, "DOM | message"); await hasConsoleMessage(dbg, "λ onmessage"); await dbg.toolbox.closeToolbox(); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer.js b/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer.js index 9292e1ba17..bfa2447474 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer.js @@ -18,7 +18,7 @@ add_task(async function () { const topLevelThreadActorID = dbg.toolbox.commands.targetCommand.targetFront.threadFront.actorID; info("Wait for tracing to be enabled"); - await waitForState(dbg, state => { + await waitForState(dbg, () => { return dbg.selectors.getIsThreadCurrentlyTracing(topLevelThreadActorID); }); @@ -52,7 +52,7 @@ add_task(async function () { gBrowser.selectedBrowser ); - await hasConsoleMessage(dbg, "DOM(click)"); + await hasConsoleMessage(dbg, "DOM | click"); await hasConsoleMessage(dbg, "λ simple"); // Test Blackboxing @@ -90,7 +90,7 @@ add_task(async function () { info("Disable the tracing"); await clickElement(dbg, "trace"); info("Wait for tracing to be disabled"); - await waitForState(dbg, state => { + await waitForState(dbg, () => { return !dbg.selectors.getIsThreadCurrentlyTracing(topLevelThreadActorID); }); await hasConsoleMessage(dbg, "Stopped tracing"); @@ -116,7 +116,7 @@ add_task(async function () { const newTopLevelThread = dbg.toolbox.commands.targetCommand.targetFront.threadFront.actorID; info("Wait for tracing to be re-enabled"); - await waitForState(dbg, state => { + await waitForState(dbg, () => { return dbg.selectors.getIsThreadCurrentlyTracing(newTopLevelThread); }); @@ -216,7 +216,7 @@ add_task(async function testPageKeyShortcut() { }); info("Wait for tracing to be enabled"); - await waitForState(dbg, state => { + await waitForState(dbg, () => { return dbg.selectors.getIsThreadCurrentlyTracing(topLevelThreadActorID); }); @@ -236,7 +236,7 @@ add_task(async function testPageKeyShortcut() { }); info("Wait for tracing to be disabled"); - await waitForState(dbg, state => { + await waitForState(dbg, () => { return !dbg.selectors.getIsThreadCurrentlyTracing(topLevelThreadActorID); }); }); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-layout-changes.js b/devtools/client/debugger/test/mochitest/browser_dbg-layout-changes.js index 609879c7b1..0f006c61fe 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-layout-changes.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-layout-changes.js @@ -46,10 +46,7 @@ async function testLayout(dbg, orientation, host) { await switchHost(dbg, host); await resizeToolboxWindow(dbg, host); - return waitForState( - dbg, - state => dbg.selectors.getOrientation() == orientation - ); + return waitForState(dbg, () => dbg.selectors.getOrientation() == orientation); } function getHost(host) { diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-outline.js b/devtools/client/debugger/test/mochitest/browser_dbg-outline.js index 6048a7a92d..bfc1c846d1 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-outline.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-outline.js @@ -6,6 +6,41 @@ "use strict"; +// Test that the outline panel updates correctly when a source is selected +// This scenario covers the case where the outline panel always focused. +add_task(async function () { + const dbg = await initDebugger("doc-scripts.html", "simple1.js"); + openOutlinePanel(dbg, false); + is( + findAllElements(dbg, "outlineItems").length, + 0, + " There are no outline items when no source is selected" + ); + + await selectSource(dbg, "simple1.js", 1); + + info("Wait for all the outline list to load"); + await waitForElementWithSelector(dbg, ".outline-list"); + + assertOutlineItems(dbg, [ + "λmain()", + "λdoEval()", + "λevaledFunc()", + "λdoNamedEval()", + // evaledFunc is set twice + "λevaledFunc()", + "class MyClass", + "λconstructor(a, b)", + "λtest()", + "λ#privateFunc(a, b)", + "class Klass", + "λconstructor()", + "λtest()", + ]); +}); + +// Test that the outline panel updates correctly when a source is selected +// This scenario covers the case where the outline panel gets un-selected and selected again add_task(async function () { const dbg = await initDebugger("doc-scripts.html", "simple1.js"); @@ -73,7 +108,7 @@ add_task(async function () { ]); }); -// Test empty panel when source has not function or class symbols +// Test empty panel when source has no function or class symbols add_task(async function () { const dbg = await initDebugger("doc-on-load.html", "top-level.js"); await selectSource(dbg, "top-level.js", 1); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-overrides.js b/devtools/client/debugger/test/mochitest/browser_dbg-overrides.js index 48f5893799..0e2dc54609 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-overrides.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-overrides.js @@ -70,7 +70,7 @@ add_task(async function () { info("Select test.js tree node, and add override"); const MockFilePicker = SpecialPowers.MockFilePicker; - MockFilePicker.init(window); + MockFilePicker.init(window.browsingContext); const nsiFile = new FileUtils.File( PathUtils.join(PathUtils.tempDir, "test.js") ); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-pause-on-next.js b/devtools/client/debugger/test/mochitest/browser_dbg-pause-on-next.js index 27ae30983f..ee27554280 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-pause-on-next.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-pause-on-next.js @@ -13,7 +13,7 @@ add_task(async function () { } = dbg; clickElement(dbg, "pause"); - await waitForState(dbg, state => getIsWaitingOnBreak(getCurrentThread())); + await waitForState(dbg, () => getIsWaitingOnBreak(getCurrentThread())); invokeInTab("simple"); await waitForPaused(dbg, "simple3"); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-pause-points.js b/devtools/client/debugger/test/mochitest/browser_dbg-pause-points.js index 456e4e10f5..3590395701 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-pause-points.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-pause-points.js @@ -14,7 +14,7 @@ async function testCase(dbg, { name, steps }) { } = dbg; const locations = []; - const recordFrame = state => { + const recordFrame = () => { const { line, column } = getTopFrame(getCurrentThread()).location; locations.push([line, column]); info(`Break on ${line}:${column}`); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-paused-overlay.js b/devtools/client/debugger/test/mochitest/browser_dbg-paused-overlay.js index 1d442c5ca5..93b537bba5 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-paused-overlay.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-paused-overlay.js @@ -71,3 +71,39 @@ add_task(async function () { }); ok(true, "The overlay is hidden after clicking on the resume button"); }); + +add_task(async function testOverlayDisabled() { + await pushPref("devtools.debugger.features.overlay", false); + + const dbg = await initDebugger("doc-scripts.html"); + const highlighterTestFront = await getHighlighterTestFront(dbg.toolbox); + + info("Create an eval script that pauses itself."); + invokeInTab("doEval"); + + await waitForPaused(dbg); + + // Let a chance to regress and still show the overlay + await wait(500); + + const isPausedOverlayVisible = + await highlighterTestFront.isPausedDebuggerOverlayVisible(); + ok( + !isPausedOverlayVisible, + "The paused overlay wasn't shown when the related feature preference is false" + ); + + const onPreferenceApplied = dbg.toolbox.once("new-configuration-applied"); + await pushPref("devtools.debugger.features.overlay", true); + await onPreferenceApplied; + + info("Click debugger UI step-in button"); + const stepButton = await waitFor(() => findElement(dbg, "stepIn")); + stepButton.click(); + + await waitFor(() => highlighterTestFront.isPausedDebuggerOverlayVisible()); + ok( + true, + "Stepping after having toggled the feature preference back to true allow the overlay to be shown again" + ); +}); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-pretty-print-paused.js b/devtools/client/debugger/test/mochitest/browser_dbg-pretty-print-paused.js index a5b9260af2..43bb6279fd 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-pretty-print-paused.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-pretty-print-paused.js @@ -21,7 +21,7 @@ add_task(async function () { await waitForSelectedSource(dbg, "math.min.js:formatted"); await waitForState( dbg, - state => dbg.selectors.getSelectedFrame(thread).location.line == 18 + () => dbg.selectors.getSelectedFrame(thread).location.line == 18 ); assertPausedAtSourceAndLine( dbg, diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-preview-frame.js b/devtools/client/debugger/test/mochitest/browser_dbg-preview-frame.js index 4075b6525a..b58dd19686 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-preview-frame.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-preview-frame.js @@ -60,7 +60,7 @@ add_task(async function () { function waitForSelectedFrame(dbg, displayName) { const { getInScopeLines, getVisibleSelectedFrame } = dbg.selectors; - return waitForState(dbg, state => { + return waitForState(dbg, () => { const frame = getVisibleSelectedFrame(); return frame?.displayName == displayName && getInScopeLines(frame.location); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-react-app.js b/devtools/client/debugger/test/mochitest/browser_dbg-react-app.js index 2882bba1b6..f2f304805e 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-react-app.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-react-app.js @@ -15,7 +15,7 @@ add_task(async function () { invokeInTab("clickButton"); await waitForPaused(dbg); - await waitForState(dbg, state => + await waitForState(dbg, () => dbg.selectors.getSelectedScopeMappings(dbg.selectors.getCurrentThread()) ); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-search-file.js b/devtools/client/debugger/test/mochitest/browser_dbg-search-file.js index 75daa9a469..57238dc36c 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-search-file.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-search-file.js @@ -125,7 +125,7 @@ add_task(async function () { is(dbg.win.document.activeElement.tagName, "INPUT", "Search field focused"); }); -async function navigateWithKey(dbg, key, expectedLine, assertionMessage) { +async function navigateWithKey(dbg, key, expectedLine) { pressKey(dbg, key); await waitForCursorPosition(dbg, expectedLine); } diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-slow-script.js b/devtools/client/debugger/test/mochitest/browser_dbg-slow-script.js index 83b35e1009..39008a7478 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-slow-script.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-slow-script.js @@ -7,6 +7,11 @@ // Tests the slow script warning add_task(async function openDebuggerFirst() { + // This test fails with pending vsync at end of test without fission, not EFT + if (!isFissionEnabled() && !isEveryFrameTargetEnabled()) { + return; + } + // In mochitest, the timeout is disable, so set it to a short, but non zero duration await pushPref("dom.max_script_run_time", 1); // Prevents having to click on the page to have the dialog to appear @@ -41,6 +46,11 @@ add_task(async function openDebuggerFirst() { }); add_task(async function openDebuggerFromDialog() { + // This test fails with pending vsync at end of test without fission, not EFT + if (!isFissionEnabled() && !isEveryFrameTargetEnabled()) { + return; + } + const tab = await addTab(EXAMPLE_URL + "doc-slow-script.html"); const alert = BrowserTestUtils.waitForGlobalNotificationBar( @@ -57,7 +67,7 @@ add_task(async function openDebuggerFromDialog() { // And mochitest may consider this as an error. So ignore any rejection. SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () { content.wrappedJSObject.infiniteLoop(); - }).catch(e => {}); + }).catch(() => {}); info("Wait for the slow script warning"); const notification = await alert; diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-bogus.js b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-bogus.js index e9e3a3c7f2..79a8245613 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-bogus.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-bogus.js @@ -53,6 +53,16 @@ add_task(async function () { "There is a warning about the missing source map file" ); + let footerButton = findElement(dbg, "sourceMapFooterButton"); + ok( + footerButton.classList.contains("not-mapped"), + "The source map error causes the file to be reported as not mapped" + ); + ok( + footerButton.classList.contains("error"), + "The source map error is displayed in the source map icon" + ); + // Test a Source Map with missing original text content await selectSource(dbg, "map-with-failed-original-request.js"); ok( @@ -87,5 +97,24 @@ add_task(async function () { `Error while fetching an original source: request failed with status 404\nSource URL: ${EXAMPLE_URL}map-with-failed-original-request.original.js` ); + footerButton = findElement(dbg, "sourceMapFooterButton"); + is( + footerButton.textContent, + "original file", + "Even if the original can't be loaded, it is reported as original in the footer" + ); + ok( + !footerButton.classList.contains("loading"), + "The source map isn't loading because of the missing text content" + ); + ok( + !footerButton.classList.contains("error"), + "The source map isn't reported with an error because of the missing text content" + ); + ok( + footerButton.classList.contains("original"), + "The source map icon is set to original" + ); + await resume(dbg); }); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-disabled.js b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-disabled.js index 93440dc9e1..4348e2103d 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-disabled.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-disabled.js @@ -17,7 +17,34 @@ add_task(async function () { info("Pretty print the bundle"); await selectSource(dbg, bundleSrc); + + const footerButton = findElement(dbg, "sourceMapFooterButton"); + is( + footerButton.textContent, + "Source Maps disabled", + "The source map button reports the disabling" + ); + ok( + footerButton.classList.contains("disabled"), + "The source map button is disabled" + ); + clickElement(dbg, "prettyPrintButton"); await waitForSelectedSource(dbg, "bundle.js:formatted"); - ok(true, "everything finished"); + ok(true, "Pretty printed source shown"); + + const toggled = waitForDispatch(dbg.store, "TOGGLE_SOURCE_MAPS_ENABLED"); + await clickOnSourceMapMenuItem(dbg, ".debugger-source-map-enabled"); + await toggled; + ok(true, "Toggled the Source map setting"); + + is( + footerButton.textContent, + "original file", + "The source map button now reports the pretty printed file as original file" + ); + ok( + !footerButton.classList.contains("disabled"), + "The source map button is no longer disabled" + ); }); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-reloading.js b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-reloading.js index c10273baaf..5814e423f2 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-reloading.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-reloading.js @@ -54,8 +54,5 @@ add_task(async function () { }); async function waitForBreakpointCount(dbg, count) { - return waitForState( - dbg, - state => dbg.selectors.getBreakpointCount() === count - ); + return waitForState(dbg, () => dbg.selectors.getBreakpointCount() === count); } diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps.js b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps.js index 7ed70b3310..d7c71aade8 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps.js @@ -98,6 +98,25 @@ add_task(async function () { "Pending selected location is the expected one" ); + const footerButton = findElement(dbg, "sourceMapFooterButton"); + is( + footerButton.textContent, + "original file", + "The source map button's label mention an original file" + ); + ok( + footerButton.classList.contains("original"), + "The source map icon is original" + ); + ok( + !footerButton.classList.contains("not-mapped"), + "The source map button isn't gray out" + ); + ok( + !footerButton.classList.contains("loading"), + "The source map button isn't reporting in-process loading" + ); + info("Click on jump to generated source link from editor's footer"); let mappedSourceLink = findElement(dbg, "mappedSourceLink"); is( @@ -117,6 +136,23 @@ add_task(async function () { "From entry.js", "The link to mapped source mentions the original source" ); + is( + footerButton.textContent, + "bundle file", + "When moved to the bundle, the source map button's label mention a bundle file" + ); + ok( + !footerButton.classList.contains("original"), + "The source map icon isn't original" + ); + ok( + !footerButton.classList.contains("not-mapped"), + "The source map button isn't gray out" + ); + ok( + !footerButton.classList.contains("loading"), + "The source map button isn't reporting in-process loading" + ); info("Move the cursor within the bundle to another original source"); getCM(dbg).setCursor({ line: 70, ch: 0 }); @@ -126,6 +162,18 @@ add_task(async function () { "From times2.js", "The link to mapped source updates to the newly selected original source within the bundle" ); + + info("Move to the new original file via the source map button/menu"); + await clickOnSourceMapMenuItem(dbg, ".debugger-jump-mapped-source"); + await waitForSelectedSource(dbg, "times2.js"); + + info("Open the related source map file and wait for a new tab to be opened"); + const onTabLoaded = BrowserTestUtils.waitForNewTab( + gBrowser, + `view-source:${EXAMPLE_URL}sourcemaps/bundle.js.map` + ); + await clickOnSourceMapMenuItem(dbg, ".debugger-source-map-link"); + await onTabLoaded; }); function assertBreakpointExists(dbg, source, line) { @@ -143,5 +191,5 @@ async function waitForBreakpointCount(dbg, count) { const { selectors: { getBreakpointCount }, } = dbg; - await waitForState(dbg, state => getBreakpointCount() == count); + await waitForState(dbg, () => getBreakpointCount() == count); } diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-ua-widgets.js b/devtools/client/debugger/test/mochitest/browser_dbg-ua-widgets.js index e563d52824..07d628c45a 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-ua-widgets.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-ua-widgets.js @@ -28,7 +28,7 @@ add_task(async function () { ); clickElement(dbg, "pause"); - await waitForState(dbg, state => + await waitForState(dbg, () => dbg.selectors.getIsWaitingOnBreak(dbg.selectors.getCurrentThread()) ); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-windowless-service-workers.js b/devtools/client/debugger/test/mochitest/browser_dbg-windowless-service-workers.js index a38aebe6e0..f2e20f4541 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-windowless-service-workers.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-windowless-service-workers.js @@ -168,7 +168,7 @@ add_task(async function () { await removeTab(gBrowser.selectedTab); }); -async function checkWorkerStatus(dbg, status) { +async function checkWorkerStatus(_dbg, _status) { /* TODO: Re-Add support for showing service worker status (Bug 1641099) await waitUntil(() => { const threads = dbg.selectors.getThreads(); diff --git a/devtools/client/debugger/test/mochitest/browser_kz.toml b/devtools/client/debugger/test/mochitest/browser_kz.toml index 5af2243d7f..6b39a42b94 100644 --- a/devtools/client/debugger/test/mochitest/browser_kz.toml +++ b/devtools/client/debugger/test/mochitest/browser_kz.toml @@ -73,17 +73,14 @@ skip-if = [ ] ["browser_dbg-outline-filter.js"] -fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled ["browser_dbg-outline-focus.js"] fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled skip-if = ["verify"] ["browser_dbg-outline-pretty.js"] -fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled ["browser_dbg-outline.js"] -fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled ["browser_dbg-overrides.js"] fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled diff --git a/devtools/client/debugger/test/mochitest/shared-head.js b/devtools/client/debugger/test/mochitest/shared-head.js index 2466957044..b2a1c7c3d7 100644 --- a/devtools/client/debugger/test/mochitest/shared-head.js +++ b/devtools/client/debugger/test/mochitest/shared-head.js @@ -2,6 +2,10 @@ * 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 loaded in a `spawn` context sometimes which doesn't have, +// `Assert`, so we can't use its comparison functions. +/* eslint-disable mozilla/no-comparison-or-assignment-inside-ok */ + /** * Helper methods to drive with the debugger during mochitests. This file can be safely * required from other panel test files. @@ -50,8 +54,8 @@ const { } = require("devtools/client/debugger/src/utils/prefs"); const { - safeDecodeItemName, -} = require("devtools/client/debugger/src/utils/sources-tree/utils"); + getUnicodeUrlPath, +} = require("resource://devtools/client/shared/unicode-url.js"); const { isGeneratedId, @@ -133,7 +137,7 @@ async function waitForSources(dbg, ...sources) { function waitForSource(dbg, url) { return waitForState( dbg, - state => findSource(dbg, url, { silent: true }), + () => findSource(dbg, url, { silent: true }), "source exists" ); } @@ -185,7 +189,7 @@ function assertClass(el, className, exists = true) { } function waitForSelectedLocation(dbg, line, column) { - return waitForState(dbg, state => { + return waitForState(dbg, () => { const location = dbg.selectors.getSelectedLocation(); return ( location && @@ -216,7 +220,7 @@ function waitForSelectedSource(dbg, sourceOrUrl) { return waitForState( dbg, - state => { + () => { const location = dbg.selectors.getSelectedLocation() || {}; const sourceTextContent = getSelectedSourceTextContent(); if (!sourceTextContent) { @@ -504,10 +508,7 @@ async function waitForLoadedScopes(dbg) { } function waitForBreakpointCount(dbg, count) { - return waitForState( - dbg, - state => dbg.selectors.getBreakpointCount() == count - ); + return waitForState(dbg, () => dbg.selectors.getBreakpointCount() == count); } function waitForBreakpoint(dbg, url, line) { @@ -569,7 +570,7 @@ async function waitForPaused( await waitForState( dbg, - state => isPaused(dbg) && !!getSelectedScope(getCurrentThread()), + () => isPaused(dbg) && !!getSelectedScope(getCurrentThread()), "paused" ); @@ -588,7 +589,7 @@ async function waitForPaused( */ function waitForResumed(dbg) { info("Waiting for the debugger to resume"); - return waitForState(dbg, state => !dbg.selectors.getIsCurrentThreadPaused()); + return waitForState(dbg, () => !dbg.selectors.getIsCurrentThreadPaused()); } function waitForInlinePreviews(dbg) { @@ -596,7 +597,7 @@ function waitForInlinePreviews(dbg) { } function waitForCondition(dbg, condition) { - return waitForState(dbg, state => + return waitForState(dbg, () => dbg.selectors .getBreakpointsList() .find(bp => bp.options.condition == condition) @@ -604,7 +605,7 @@ function waitForCondition(dbg, condition) { } function waitForLog(dbg, logValue) { - return waitForState(dbg, state => + return waitForState(dbg, () => dbg.selectors .getBreakpointsList() .find(bp => bp.options.logValue == logValue) @@ -612,10 +613,10 @@ function waitForLog(dbg, logValue) { } async function waitForPausedThread(dbg, thread) { - return waitForState(dbg, state => dbg.selectors.getIsPaused(thread)); + return waitForState(dbg, () => dbg.selectors.getIsPaused(thread)); } -function isSelectedFrameSelected(dbg, state) { +function isSelectedFrameSelected(dbg) { const frame = dbg.selectors.getVisibleSelectedFrame(); // Make sure the source text is completely loaded for the @@ -733,7 +734,7 @@ function findSource( const source = sources.find(s => { // Sources don't have a file name attribute, we need to compute it here: const sourceFileName = s.url - ? safeDecodeItemName(s.url.substring(s.url.lastIndexOf("/") + 1)) + ? getUnicodeUrlPath(s.url.substring(s.url.lastIndexOf("/") + 1)) : ""; // The input argument may either be only the filename, or the complete URL @@ -784,7 +785,7 @@ function sourceExists(dbg, url) { function waitForLoadedSource(dbg, url) { return waitForState( dbg, - state => { + () => { const source = findSource(dbg, url, { silent: true }); return ( source && @@ -1772,6 +1773,7 @@ const selectors = { prettyPrintButton: ".source-footer .prettyPrint", mappedSourceLink: ".source-footer .mapped-source", sourcesFooter: ".sources-panel .source-footer", + sourceMapFooterButton: ".debugger-source-map-button", editorFooter: ".editor-pane .source-footer", sourceNode: i => `.sources-list .tree-node:nth-child(${i}) .node`, sourceNodes: ".sources-list .tree-node", @@ -2202,8 +2204,9 @@ async function clickAtPos(dbg, pos) { bubbles: true, cancelable: true, view: dbg.win, - clientX: left, - clientY: top, + // Shift by one as we might be on the edge of the element and click on previous line/column + clientX: left + 1, + clientY: top + 1, }) ); } @@ -2570,14 +2573,13 @@ async function assertPreviews(dbg, previews) { * @param {Number} column * @param {Object} options * @param {String} options.result - Expected text shown in the preview - * @param {String} options.expression - The expression hovered over * @param {Array} options.fields - The expected stacktrace information */ async function assertInlineExceptionPreview( dbg, line, column, - { expression, result, fields } + { result, fields } ) { info(" # Assert preview on " + line + ":" + column); const { element: popupEl, tokenEl } = await tryHovering( @@ -2628,7 +2630,7 @@ async function assertInlineExceptionPreview( async function waitForBreakableLine(dbg, source, lineNumber) { await waitForState( dbg, - state => { + () => { const currentSource = findSource(dbg, source); const breakableLines = @@ -2944,6 +2946,33 @@ async function toggleDebbuggerSettingsMenuItem(dbg, { className, isChecked }) { await waitFor(() => menuButton.getAttribute("aria-expanded") === "false"); } +/** + * Click on the source map button in the editor's footer + * and wait for its context menu to be rendered before clicking + * on one menuitem of it. + * + * @param {Object} dbg + * @param {String} className + * The class name of the menuitem to click in the context menu. + */ +async function clickOnSourceMapMenuItem(dbg, className) { + const menuButton = findElement(dbg, "sourceMapFooterButton"); + const { parent } = dbg.panel.panelWin; + const { document } = parent; + + menuButton.click(); + // Waits for the debugger settings panel to appear. + await waitFor(() => { + const menuListEl = document.querySelector("#debugger-source-map-list"); + // Lets check the offsetParent property to make sure the menu list is actually visible + // by its parents display property being no longer "none". + return menuListEl && menuListEl.offsetParent !== null; + }); + + const menuItem = document.querySelector(className); + menuItem.click(); +} + async function setLogPoint(dbg, index, value) { rightClickElement(dbg, "gutter", index); await waitForContextMenu(dbg); @@ -2964,10 +2993,7 @@ async function setLogPoint(dbg, index, value) { function openProjectSearch(dbg) { info("Opening the project search panel"); synthesizeKeyShortcut("CmdOrCtrl+Shift+F"); - return waitForState( - dbg, - state => dbg.selectors.getActiveSearch() === "project" - ); + return waitForState(dbg, () => dbg.selectors.getActiveSearch() === "project"); } /** @@ -3076,6 +3102,7 @@ async function selectBlackBoxContextMenuItem(dbg, itemName) { } function openOutlinePanel(dbg, waitForOutlineList = true) { + info("Select the outline panel"); const outlineTab = findElementWithSelector(dbg, ".outline-tab a"); EventUtils.synthesizeMouseAtCenter(outlineTab, {}, outlineTab.ownerGlobal); @@ -3105,7 +3132,7 @@ function assertOutlineItems(dbg, expectedItems) { async function checkAdditionalThreadCount(dbg, count) { await waitForState( dbg, - state => { + () => { return dbg.selectors.getThreads().length == count; }, "Have the expected number of additional threads" |
