diff --git a/devtools/client/debugger/new/README.mozilla b/devtools/client/debugger/new/README.mozilla index c1ff730e9428..724d927b58f5 100644 --- a/devtools/client/debugger/new/README.mozilla +++ b/devtools/client/debugger/new/README.mozilla @@ -1,9 +1,9 @@ This is the debugger.html project output. See https://github.com/devtools-html/debugger.html -Version 33.0 +Version 34.0 -Comparison: https://github.com/devtools-html/debugger.html/compare/release-32...release-33 +Comparison: https://github.com/devtools-html/debugger.html/compare/release-33...release-34 Packages: - babel-plugin-transform-es2015-modules-commonjs @6.26.0 diff --git a/devtools/client/debugger/new/debugger.css b/devtools/client/debugger/new/debugger.css index d8c7a14c7aed..be1ebd8d2a06 100644 --- a/devtools/client/debugger/new/debugger.css +++ b/devtools/client/debugger/new/debugger.css @@ -326,18 +326,6 @@ menuseparator { --reference-color: var(--theme-highlight-purple); } -.theme-firebug { - --number-color: #000088; - --string-color: #ff0000; - --null-color: #787878; - --object-color: DarkGreen; - --caption-color: #444444; - --location-color: #555555; - --source-link-color: blue; - --node-color: rgb(0, 0, 136); - --reference-color: rgb(102, 102, 255); -} - /******************************************************************************/ .objectLink:hover { @@ -1078,10 +1066,6 @@ html[dir="rtl"] .tree-node img.arrow { font-family: Menlo, monospace; } -.project-text-search .result.focused { - background-color: var(--search-overlays-semitransparent); -} - .project-text-search .result .query-match { background-color: var(--theme-selection-background); color: white; @@ -1090,10 +1074,6 @@ html[dir="rtl"] .tree-node img.arrow { border-radius: 2px; } -.project-text-search .result.focused .line-number { - font-weight: bolder; -} - .project-text-search .result .line-number { margin-right: 1em; width: 2em; @@ -1121,10 +1101,6 @@ html[dir="rtl"] .tree-node img.arrow { margin: 2px 0 2px 0; } -.project-text-search .file-result.focused { - background-color: var(--search-overlays-semitransparent); -} - .project-text-search .line-match { display: "flex"; flex-grow: 1; @@ -1148,6 +1124,22 @@ html[dir="rtl"] .tree-node img.arrow { .project-text-search .managed-tree .tree { height: 100%; } + +/* Focus values */ + +.project-text-search .file-result.focused, +.project-text-search .result.focused { + background-color: var(--theme-selection-background); +} + +.project-text-search .result.focused .line-number { + font-weight: bolder; +} + +.project-text-search .result.focused .query-match { + background-color: #ffffff; + color: #000000; +} /* 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 . */ @@ -2925,7 +2917,8 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line { display: inline-block; } -.CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-code { +.CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-code, +.CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-scroll { cursor: default; } /* This Source Code Form is subject to the terms of the Mozilla Public @@ -3009,10 +3002,6 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line { background-color: var(--theme-selection-background-hover); } -:root.theme-firebug .expression-container:hover { - background-color: var(--theme-selection-background-hover); -} - .tree .tree-node:not(.focused):hover { background-color: transparent; } @@ -3158,8 +3147,7 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line { flex-shrink: 0; } -.theme-light .frames .location, -.theme-firebug .frames .location { +.theme-light .frames .location { color: var(--theme-comment); } @@ -3194,7 +3182,6 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line { } :root.theme-light .frames ul li.selected .location, -:root.theme-firebug .frames ul li.selected .location, :root.theme-dark .frames ul li.selected .location { color: white; } @@ -4067,7 +4054,6 @@ html .welcomebox .toggle-button-end.collapsed { line-height: 1.5em; word-break: break-all; text-overflow: ellipsis; - overflow: hidden; white-space: nowrap; } diff --git a/devtools/client/debugger/new/debugger.js b/devtools/client/debugger/new/debugger.js index 284d7d2dc484..fa96b23e98d3 100644 --- a/devtools/client/debugger/new/debugger.js +++ b/devtools/client/debugger/new/debugger.js @@ -5113,6 +5113,14 @@ function showSource(sourceId) { return ({ dispatch, getState }) => { const source = (0, _selectors.getSource)(getState(), sourceId); + if ((0, _selectors.getPaneCollapse)(getState(), "start")) { + dispatch({ + type: "TOGGLE_PANE", + position: "start", + paneCollapsed: false + }); + } + dispatch(setPrimaryPaneTab("sources")); dispatch({ type: "SHOW_SOURCE", @@ -6433,10 +6441,7 @@ function getMappedExpression(expression) { return expression; } - return await dispatch({ - type: "MAP_EXPRESSION_RESULT", - [_promise.PROMISE]: parser.mapOriginalExpression(expression, mappings) - }); + return parser.mapOriginalExpression(expression, mappings); }; } @@ -6616,14 +6621,31 @@ var _WasmDis = __webpack_require__(678); var wasmStates = Object.create(null); +function maybeWasmSectionNameResolver(data) { + try { + const parser = new _WasmParser.BinaryReader(); + parser.setData(data.buffer, 0, data.length); + const reader = new _WasmDis.NameSectionReader(); + reader.read(parser); + return reader.hasValidNames() ? reader.getNameResolver() : null; + } catch (ex) { + // Ignoring any errors during names section retrival. + return null; + } +} + /** * @memberof utils/wasm * @static */ function getWasmText(sourceId, data) { + const nameResolver = maybeWasmSectionNameResolver(data); const parser = new _WasmParser.BinaryReader(); parser.setData(data.buffer, 0, data.length); const dis = new _WasmDis.WasmDisassembler(); + if (nameResolver) { + dis.nameResolver = nameResolver; + } dis.addOffsets = true; const done = dis.disassembleChunk(parser); let result = dis.getResult(); @@ -7019,9 +7041,18 @@ class ManagedTree extends _react.Component { if (expanded.has(this.props.getPath(highlightItems[0]))) { this.focusItem(highlightItems[0]); } else { - // Look at folders starting from the top-level until finds a - // closed folder and highlights this folder - const index = highlightItems.reverse().findIndex(item => !expanded.has(this.props.getPath(item))); + // Look at folders starting from the top-level and expand all the items + // which lie in the path of the item to be highlighted + highlightItems.reverse(); + let index = highlightItems.findIndex(item => !expanded.has(this.props.getPath(item))); + + if (this.props.autoExpandOnHighlight) { + while (index < highlightItems.length - 1) { + this.setExpanded(highlightItems[index], true, false); + index++; + } + } + this.focusItem(highlightItems[index]); } } @@ -7103,7 +7134,7 @@ function getURL(sourceUrl, debuggeeUrl = "") { // A Webpack source is a special case return (0, _lodash.merge)(def, { path: path, - group: "Webpack", + group: "webpack://", filename: filename }); @@ -7111,7 +7142,7 @@ function getURL(sourceUrl, debuggeeUrl = "") { // An Angular source is a special case return (0, _lodash.merge)(def, { path: path, - group: "Angular", + group: "ng://", filename: filename }); @@ -9892,7 +9923,7 @@ function isUnderRoot(url, projectRoot) { return true; } - return `/${url.group}${url.path}`.startsWith(projectRoot); + return `${url.group}${url.path}`.startsWith(projectRoot); } /* 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 . */ @@ -9958,7 +9989,7 @@ function traverseTree(url, tree, debuggeeHost, projectRoot) { let path = ""; return parts.reduce((subTree, part, index) => { - path = `${path}/${part}`; + path = path ? `${path}/${part}` : part; const debuggeeHostIfRoot = index === 0 ? debuggeeHost : null; return findOrCreateNode(parts, subTree, path, part, index, url, debuggeeHostIfRoot); }, tree); @@ -12874,8 +12905,12 @@ var _pause = __webpack_require__(1394); var _sources = __webpack_require__(1369); -function visibleSourceId(location) { - return (0, _devtoolsSourceMap.isOriginalId)(location.sourceId) ? (0, _devtoolsSourceMap.originalToGeneratedId)(location.sourceId) : location.sourceId; +function getGeneratedId(sourceId) { + if ((0, _devtoolsSourceMap.isOriginalId)(sourceId)) { + return (0, _devtoolsSourceMap.originalToGeneratedId)(sourceId); + } + + return sourceId; } /* @@ -12894,7 +12929,11 @@ function isSelectedFrameVisible(state) { return false; } - return visibleSourceId(selectedLocation) === visibleSourceId(selectedFrame.location); + if ((0, _devtoolsSourceMap.isOriginalId)(selectedLocation.sourceId)) { + return selectedLocation.sourceId === selectedFrame.location.sourceId; + } + + return selectedLocation.sourceId === getGeneratedId(selectedFrame.location.sourceId); } /***/ }), @@ -16159,7 +16198,7 @@ function findSource(sourceTree, sourceUrl) { function getDirectories(sourceUrl, sourceTree) { const url = (0, _getURL.getURL)(sourceUrl); - const fullUrl = `/${url.group}${url.path}`; + const fullUrl = `${url.group}${url.path}`; const parentMap = (0, _utils.createParentMap)(sourceTree); const source = findSource(sourceTree, fullUrl); if (!source) { @@ -16737,6 +16776,15 @@ class SourcesTree extends _react.Component { } } + renderItemName(name) { + const hosts = { + "ng://": "Angular", + "webpack://": "Webpack" + }; + + return hosts[name] || name; + } + renderEmptyElement(message) { return _react2.default.createElement( "div", @@ -16803,6 +16851,7 @@ class SourcesTree extends _react.Component { const treeProps = { autoExpandAll: false, autoExpandDepth: expanded ? 0 : 1, + autoExpandOnHighlight: true, expanded, getChildren: item => (0, _sourcesTree.nodeHasChildren)(item) ? item.contents : [], getParent: item => parentMap.get(item), @@ -16874,7 +16923,7 @@ var _initialiseProps = function () { this.getIcon = (sources, item, depth) => { const { debuggeeUrl, projectRoot } = this.props; - if (item.path === "/Webpack") { + if (item.path === "webpack://") { return _react2.default.createElement(_Svg2.default, { name: "webpack" }); } if (item.path === "/Angular") { @@ -16986,7 +17035,7 @@ var _initialiseProps = function () { "span", { className: "label" }, " ", - item.name, + this.renderItemName(item.name), " " ) ); @@ -18295,9 +18344,7 @@ class Preview extends _react.PureComponent { this.onMouseOver = e => { const { target } = e; - if (this.props.selectedFrameVisible) { - this.props.updatePreview(target, this.props.editor); - } + this.props.updatePreview(target, this.props.editor); }; this.onMouseUp = () => { @@ -18384,8 +18431,7 @@ const { exports.default = (0, _reactRedux.connect)(state => ({ preview: (0, _selectors.getPreview)(state), - selectedSource: (0, _selectors.getSelectedSource)(state), - selectedFrameVisible: (0, _selectors.isSelectedFrameVisible)(state) + selectedSource: (0, _selectors.getSelectedSource)(state) }), { addExpression, setPopupObjectProperties, @@ -30462,7 +30508,7 @@ function updatePreview(target, editor) { return; } - if (!(0, _selectors.isLineInScope)(getState(), tokenPos.line)) { + if (!(0, _selectors.isSelectedFrameVisible)(getState()) || !(0, _selectors.isLineInScope)(getState(), tokenPos.line)) { return; } @@ -38777,7 +38823,6 @@ function formatSource(source, root) { function getRelativeSources(state) { const sources = (0, _selectors.getSources)(state); const root = (0, _selectors.getProjectDirectoryRoot)(state); - return sources.valueSeq().toJS().filter(({ url }) => url && url.includes(root)).map(source => formatSource(source, root)); } @@ -38986,6 +39031,7 @@ class BreakpointItem extends _react.Component { // $FlowIgnore mountNode.innerHTML = ""; this.editor.appendToLocalElement(mountNode); + this.editor.codeMirror.on("mousedown", (_, e) => e.preventDefault()); } } } diff --git a/devtools/client/debugger/new/test/mochitest/browser_dbg-asm.js b/devtools/client/debugger/new/test/mochitest/browser_dbg-asm.js index b55df7ff1bd3..955eff511482 100644 --- a/devtools/client/debugger/new/test/mochitest/browser_dbg-asm.js +++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-asm.js @@ -9,10 +9,6 @@ add_task(async function() { await waitForSources(dbg, "doc-asm.html", "asm.js"); - // Expand nodes and make sure more sources appear. - is(findAllElements(dbg, "sourceNodes").length, 2); - - await clickElement(dbg, "sourceDirectoryLabel", 2); is(findAllElements(dbg, "sourceNodes").length, 4); await selectSource(dbg, "asm.js"); diff --git a/devtools/client/debugger/new/test/mochitest/browser_dbg-babel-preview.js b/devtools/client/debugger/new/test/mochitest/browser_dbg-babel-preview.js index 3fdaa74bbfb1..3662e5a1b03f 100644 --- a/devtools/client/debugger/new/test/mochitest/browser_dbg-babel-preview.js +++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-babel-preview.js @@ -1,6 +1,9 @@ /* Any copyright is dedicated to the Public Domain. * http://creativecommons.org/publicdomain/zero/1.0/ */ +// Tests for preview through Babel's compile output. +requestLongerTimeout(3); + function getCoordsFromPosition(cm, { line, ch }) { return cm.charCoords({ line: ~~line, ch: ~~ch }); } diff --git a/devtools/client/debugger/new/test/mochitest/browser_dbg-babel-scopes.js b/devtools/client/debugger/new/test/mochitest/browser_dbg-babel-scopes.js index 08885357165b..34a1458804dc 100644 --- a/devtools/client/debugger/new/test/mochitest/browser_dbg-babel-scopes.js +++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-babel-scopes.js @@ -2,7 +2,7 @@ * http://creativecommons.org/publicdomain/zero/1.0/ */ // This test can be really slow on debug platforms and should be split. -requestLongerTimeout(4); +requestLongerTimeout(6); // Tests loading sourcemapped sources for Babel's compile output. diff --git a/devtools/client/debugger/new/test/mochitest/browser_dbg-preview-source-maps.js b/devtools/client/debugger/new/test/mochitest/browser_dbg-preview-source-maps.js index 54be37beace1..d3d04eca6b9a 100644 --- a/devtools/client/debugger/new/test/mochitest/browser_dbg-preview-source-maps.js +++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-preview-source-maps.js @@ -1,24 +1,11 @@ /* Any copyright is dedicated to the Public Domain. * http://creativecommons.org/publicdomain/zero/1.0/ */ -function getCoordsFromPosition(cm, { line, ch }) { - return cm.charCoords({ line: ~~line, ch: ~~ch }); -} -function hoverAtPos(dbg, { line, ch }) { - info(`Hovering at (${line}, ${ch})\n`); - const cm = getCM(dbg); - const coords = getCoordsFromPosition(cm, { line: line - 1, ch }); - const tokenEl = dbg.win.document.elementFromPoint(coords.left, coords.top); - const previewed = waitForDispatch(dbg, "SET_PREVIEW"); - tokenEl.dispatchEvent( - new MouseEvent("mouseover", { - bubbles: true, - cancelable: true, - view: dbg.win - }) - ); - return previewed; +async function assertNoTooltip(dbg) { + await waitForTime(200); + const el = findElement(dbg, "tooltip"); + is(el, null, "Tooltip should not exist") } function assertPreviewTooltip(dbg, { result, expression }) { @@ -58,12 +45,21 @@ add_task(async function() { await waitForPaused(dbg); await waitForSelectedSource(dbg, "times2"); - await hoverAtPos(dbg, { line: 2, ch: 9 }); - assertPreviewTooltip(dbg, { result: 4, expression: "x" }); + info(`Test previewing in the original location`) + await assertPreviews(dbg, [ + { line: 2, column: 10, result: 4, expression: "x" } + ]); + info(`Test previewing in the generated location`) await dbg.actions.jumpToMappedSelectedLocation(); await waitForSelectedSource(dbg, "bundle.js"); + await assertPreviews(dbg, [ + { line: 70, column: 11, result: 4, expression: "x" } + ]); - await hoverAtPos(dbg, { line: 70, ch: 10 }); - assertPreviewTooltip(dbg, { result: 4, expression: "x" }); + + info(`Test that you can not preview in another original file`); + await selectSource(dbg, "output"); + await hoverAtPos(dbg, { line: 2, ch: 16 }); + await assertNoTooltip(dbg) }); diff --git a/devtools/client/debugger/new/test/mochitest/browser_dbg-sources.js b/devtools/client/debugger/new/test/mochitest/browser_dbg-sources.js index 8f485f8446a8..191d7734baa3 100644 --- a/devtools/client/debugger/new/test/mochitest/browser_dbg-sources.js +++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-sources.js @@ -22,6 +22,23 @@ function getLabel(dbg, index) { .replace(/^[\s\u200b]*/g, ""); } +add_task(async function() { + const dbg = await initDebugger("doc-sources.html"); + const { selectors: { getSelectedSource, getExpandedState }, getState } = dbg; + + await waitForSources(dbg, "nested-source"); + await selectSource(dbg, "nested-source"); + + const expanded = getExpandedState(getState()); + + ok( + expanded.has( + `example.com/browser/devtools/client/debugger/new/test/mochitest/examples/nested/nested/` + ), + "Nodes in path are automatically expanded" + ); +}); + add_task(async function() { const dbg = await initDebugger("doc-sources.html"); const { selectors: { getSelectedSource }, getState } = dbg; diff --git a/devtools/client/shared/vendor/WASMPARSER_UPGRADING b/devtools/client/shared/vendor/WASMPARSER_UPGRADING index f7168833bbc1..4fc423890bfe 100644 --- a/devtools/client/shared/vendor/WASMPARSER_UPGRADING +++ b/devtools/client/shared/vendor/WASMPARSER_UPGRADING @@ -1,13 +1,13 @@ # wasmparser version -Current vesion is: 0.5.3 +Current vesion is: 0.6.0 # Upgrade process 1. Pull latest release from npm and extract WasmDis.js and WasmParser.js, e.g. ``` -curl https://registry.npmjs.org/wasmparser/-/wasmparser-0.5.3.tgz | tar -x --strip-components 2 package/dist/{WasmDis,WasmParser}.js +curl https://registry.npmjs.org/wasmparser/-/wasmparser-0.6.0.tgz | tar -x --strip-components 2 package/dist/{WasmDis,WasmParser}.js ``` 2. Remove reference to source maps (last line) diff --git a/devtools/client/shared/vendor/WasmDis.js b/devtools/client/shared/vendor/WasmDis.js index fbb528f50f99..0a73193e1cea 100644 --- a/devtools/client/shared/vendor/WasmDis.js +++ b/devtools/client/shared/vendor/WasmDis.js @@ -1,4 +1,14 @@ "use strict"; +var __extends = (this && this.__extends) || (function () { + var extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return function (d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); Object.defineProperty(exports, "__esModule", { value: true }); /* Copyright 2016 Mozilla Foundation * @@ -981,3 +991,119 @@ var WasmDisassembler = /** @class */ (function () { return WasmDisassembler; }()); exports.WasmDisassembler = WasmDisassembler; +var UNKNOWN_FUNCTION_PREFIX = "unknown"; +var NameSectionNameResolver = /** @class */ (function (_super) { + __extends(NameSectionNameResolver, _super); + function NameSectionNameResolver(names) { + var _this = _super.call(this) || this; + _this._names = names; + return _this; + } + NameSectionNameResolver.prototype.getFunctionName = function (index, isImport, isRef) { + var name = this._names[index]; + if (!name) + return "$" + UNKNOWN_FUNCTION_PREFIX + index; + return isRef ? "$" + name : "$" + name + " (;" + index + ";)"; + }; + return NameSectionNameResolver; +}(DefaultNameResolver)); +var NameSectionReader = /** @class */ (function () { + function NameSectionReader() { + this._done = false; + this._functionsCount = 0; + this._functionImportsCount = 0; + this._functionNames = null; + this._hasNames = false; + } + NameSectionReader.prototype.read = function (reader) { + var _this = this; + if (this._done) + throw new Error('Invalid state: disassembly process was already finished.'); + while (true) { + if (!reader.read()) + return false; + switch (reader.state) { + case 2 /* END_WASM */: + if (!reader.hasMoreBytes()) { + this._done = true; + return true; + } + break; + case -1 /* ERROR */: + throw reader.error; + case 1 /* BEGIN_WASM */: + this._functionsCount = 0; + this._functionImportsCount = 0; + this._functionNames = []; + this._hasNames = false; + break; + case 4 /* END_SECTION */: + break; + case 3 /* BEGIN_SECTION */: + var sectionInfo = reader.result; + if (sectionInfo.id === 0 /* Custom */ && + WasmParser_1.bytesToString(sectionInfo.name) === "name") { + break; + } + if (sectionInfo.id === 3 /* Function */ || + sectionInfo.id === 2 /* Import */) { + break; + } + reader.skipSection(); + break; + case 12 /* IMPORT_SECTION_ENTRY */: + var importInfo = reader.result; + if (importInfo.kind === 0 /* Function */) + this._functionImportsCount++; + break; + case 13 /* FUNCTION_SECTION_ENTRY */: + this._functionsCount++; + break; + case 19 /* NAME_SECTION_ENTRY */: + var nameInfo = reader.result; + if (nameInfo.type !== 1 /* Function */) + break; + var functionNameInfo = nameInfo; + functionNameInfo.names.forEach(function (naming) { + _this._functionNames[naming.index] = WasmParser_1.bytesToString(naming.name); + }); + this._hasNames = true; + break; + default: + throw new Error("Expectected state: " + reader.state); + } + } + }; + NameSectionReader.prototype.hasValidNames = function () { + return this._hasNames; + }; + NameSectionReader.prototype.getNameResolver = function () { + if (!this.hasValidNames()) + throw new Error("Has no valid name section"); + // Fix bad names. + var functionNamesLength = this._functionImportsCount + this._functionsCount; + var functionNames = this._functionNames.slice(0, functionNamesLength); + var usedNameAt = Object.create(null); + for (var i = 0; i < functionNames.length; i++) { + var name_1 = functionNames[i]; + if (!name_1) + continue; + var goodName = !(name_1 in usedNameAt) && + !/[^0-9A-Za-z!#$%&'*+.:<=>?@^_`|~\/\-]/.test(name_1) && + name_1.indexOf(UNKNOWN_FUNCTION_PREFIX) !== 0; + if (!goodName) { + if (usedNameAt[name_1] >= 0) { + // Remove all non-unique names. + functionNames[usedNameAt[name_1]] = null; + usedNameAt[name_1] = -1; + } + functionNames[i] = null; + continue; + } + usedNameAt[name_1] = i; + } + return new NameSectionNameResolver(functionNames); + }; + return NameSectionReader; +}()); +exports.NameSectionReader = NameSectionReader;