mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1510629 - Update Debugger Frontend v105. r=dwalsh

This commit is contained in:
Jason Laster 2018-11-28 10:13:35 -05:00
Родитель 5cf7822509
Коммит f9117e8d6d
31 изменённых файлов: 555 добавлений и 105 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

4
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 104
Version 105
Comparison: https://github.com/devtools-html/debugger.html/compare/release-103...release-104
Comparison: https://github.com/devtools-html/debugger.html/compare/release-104...release-105
Packages:
- babel-plugin-transform-es2015-modules-commonjs @6.26.2

62
devtools/client/debugger/new/dist/debugger.css поставляемый
Просмотреть файл

@ -276,6 +276,22 @@ button.jump-definition {
background-color: var(--theme-highlight-blue);
}
/******************************************************************************/
/* Invoke getter button */
button.invoke-getter {
mask: url("resource://devtools/client/shared/components/reps/images/input.svg") no-repeat;
display: inline-block;
background-color: var(--comment-node-color);
height: 12px;
vertical-align:bottom;
border:none;
}
.invoke-getter:hover {
background-color: var(--theme-highlight-blue);
}
/******************************************************************************/
/* "more…" ellipsis */
.more-ellipsis {
@ -337,24 +353,29 @@ button.jump-definition {
cursor: default;
}
.tree-node img.arrow {
mask: url("resource://devtools/client/debugger/new/images/arrow.svg") no-repeat;
mask-size: 100%;
.tree-node button.arrow {
background:url("resource://devtools/client/debugger/new/images/arrow.svg") no-repeat;
background-size:contain;
background-position:center center;
width: 9px;
height: 9px;
border:0;
padding:0;
margin-inline-start: 1px;
margin-inline-end: 4px;
background-color: var(--theme-splitter-color, #9B9B9B);
transform: rotate(-90deg);
transform-origin: center center;
transition: transform 0.125s ease;
align-self: center;
-moz-context-properties: fill;
fill: var(--theme-splitter-color, #9B9B9B);
}
html[dir="rtl"] .tree-node img.arrow {
html[dir="rtl"] .tree-node button.arrow {
transform: rotate(90deg);
}
.tree-node img.arrow.expanded.expanded {
.tree-node button.arrow.expanded.expanded {
transform: rotate(0deg);
}
@ -363,8 +384,8 @@ html[dir="rtl"] .tree-node img.arrow {
background-color: var(--theme-selection-background, #0a84ff);
}
.tree-node.focused img.arrow {
background-color: currentColor;
.tree-node.focused button.arrow {
fill: currentColor;
}
/* 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
@ -404,7 +425,7 @@ html[dir="rtl"] .tree-node img.arrow {
color: var(--theme-comment);
}
.object-inspector .tree-node img.arrow {
.object-inspector .tree-node .arrow {
display: inline-block;
vertical-align: middle;
}
@ -2665,7 +2686,7 @@ menuseparator {
.call-site {
position: relative;
border-bottom: 2px solid lightgrey;
display: inline;
cursor: pointer;
}
@ -2680,20 +2701,8 @@ menuseparator {
height: 12px;
}
.call-site-bp {
position: relative;
border-bottom: 2px solid #aed3ef;
cursor: pointer;
}
.call-site-bp::before {
content: "";
mask: url("resource://devtools/client/debugger/new/images/column-marker.svg") no-repeat 100% 100%;
mask-size: contain;
display: inline-block;
background-color: var(--blue-55);
width: 9px;
height: 12px;
.call-site.active::before {
opacity: 1;
}
.theme-dark .call-site {
@ -2950,7 +2959,8 @@ html[dir="rtl"] .editor-mount {
color: var(--theme-comment);
}
.debug-expression {
.debug-expression,
.new-debug-line .call-site {
background-color: var(--debug-expression-background);
}
@ -3612,7 +3622,7 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {
margin-inline-start: 4px;
}
:root.theme-dark .annotation-logo svg path {
:root.theme-dark .annotation-logo:not(.angular) svg path {
fill: var(--theme-highlight-blue);
}
/* This Source Code Form is subject to the terms of the Mozilla Public

60
devtools/client/debugger/new/dist/parser-worker.js поставляемый
Просмотреть файл

@ -1015,6 +1015,7 @@ exports.isVariable = isVariable;
exports.isComputedExpression = isComputedExpression;
exports.getMemberExpression = getMemberExpression;
exports.getVariables = getVariables;
exports.getPatternIdentifiers = getPatternIdentifiers;
exports.isTopLevel = isTopLevel;
var _types = __webpack_require__(2268);
@ -1164,14 +1165,15 @@ function getVariables(dec) {
return [];
}
// NOTE: it's possible that an element is empty
// NOTE: it's possible that an element is empty or has several variables
// e.g. const [, a] = arr
// e.g. const [{a, b }] = 2
return dec.id.elements.filter(element => element).map(element => {
return {
name: t.isAssignmentPattern(element) ? element.left.name : element.name || element.argument.name,
name: t.isAssignmentPattern(element) ? element.left.name : element.name || element.argument && element.argument.name,
location: element.loc
};
});
}).filter(({ name }) => name);
}
return [{
@ -1180,6 +1182,36 @@ function getVariables(dec) {
}];
}
function getPatternIdentifiers(pattern) {
let items = [];
if (t.isObjectPattern(pattern)) {
items = pattern.properties.map(({ value }) => value);
}
if (t.isArrayPattern(pattern)) {
items = pattern.elements;
}
return getIdentifiers(items);
}
function getIdentifiers(items) {
let ids = [];
items.forEach(function (item) {
if (t.isObjectPattern(item) || t.isArrayPattern(item)) {
ids = ids.concat(getPatternIdentifiers(item));
} else if (t.isIdentifier(item)) {
const { start, end } = item.loc;
ids.push({
name: item.name,
expression: item.name,
location: { start, end }
});
}
});
return ids;
}
// Top Level checks the number of "body" nodes in the ancestor chain
// if the node is top-level, then it shoul only have one body.
function isTopLevel(ancestors) {
@ -1450,7 +1482,7 @@ function extractSymbol(path, symbols) {
});
}
if (t.isIdentifier(path) && !t.isGenericTypeAnnotation(path.parent)) {
if (t.isIdentifier(path) && !t.isGenericTypeAnnotation(path.parent) && !t.isObjectProperty(path.parent) && !t.isArrayPattern(path.parent)) {
let { start, end } = path.node.loc;
// We want to include function params, but exclude the function name
@ -1490,25 +1522,11 @@ function extractSymbol(path, symbols) {
if (t.isVariableDeclarator(path)) {
const nodeId = path.node.id;
if (t.isArrayPattern(nodeId)) {
return;
}
const properties = nodeId.properties && t.objectPattern(nodeId.properties) ? nodeId.properties : [{
value: { name: nodeId.name },
loc: path.node.loc
}];
properties.forEach(function (property) {
const { start, end } = property.loc;
symbols.identifiers.push({
name: property.value.name,
expression: property.value.name,
location: { start, end }
});
});
const ids = (0, _helpers.getPatternIdentifiers)(nodeId);
symbols.identifiers = [...symbols.identifiers, ...ids];
}
}
/* eslint-enable complexity */
function extractSymbols(sourceId) {

21
devtools/client/debugger/new/dist/vendors.css поставляемый
Просмотреть файл

@ -54,24 +54,29 @@
cursor: default;
}
.tree-node img.arrow {
mask: url("resource://devtools/client/debugger/new/images/arrow.svg") no-repeat;
mask-size: 100%;
.tree-node button.arrow {
background:url("resource://devtools/client/debugger/new/images/arrow.svg") no-repeat;
background-size:contain;
background-position:center center;
width: 9px;
height: 9px;
border:0;
padding:0;
margin-inline-start: 1px;
margin-inline-end: 4px;
background-color: var(--theme-splitter-color, #9B9B9B);
transform: rotate(-90deg);
transform-origin: center center;
transition: transform 0.125s ease;
align-self: center;
-moz-context-properties: fill;
fill: var(--theme-splitter-color, #9B9B9B);
}
html[dir="rtl"] .tree-node img.arrow {
html[dir="rtl"] .tree-node button.arrow {
transform: rotate(90deg);
}
.tree-node img.arrow.expanded.expanded {
.tree-node button.arrow.expanded.expanded {
transform: rotate(0deg);
}
@ -80,8 +85,8 @@ html[dir="rtl"] .tree-node img.arrow {
background-color: var(--theme-selection-background, #0a84ff);
}
.tree-node.focused img.arrow {
background-color: currentColor;
.tree-node.focused button.arrow {
fill: currentColor;
}
/* vim:set ts=2 sw=2 sts=2 et: */
/* This Source Code Form is subject to the terms of the Mozilla Public

6
devtools/client/debugger/new/dist/vendors.js поставляемый
Просмотреть файл

@ -4622,7 +4622,7 @@ module.exports = "<!-- This Source Code Form is subject to the terms of the Mozi
/***/ 358:
/***/ (function(module, exports) {
module.exports = "<!-- 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 viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><g fill-rule=\"evenodd\"><path d=\"M5 12.503l.052-9a.5.5 0 0 0-1-.006l-.052 9a.5.5 0 0 0 1 .006zM12 12.497l-.05-9A.488.488 0 0 0 11.474 3a.488.488 0 0 0-.473.503l.05 9a.488.488 0 0 0 .477.497.488.488 0 0 0 .473-.503z\"></path></g></svg>"
module.exports = "<!-- 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 version=\"1.1\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 16 16\"><path d=\"M5,13.5C5,13.8,4.7,14,4.5,14C4.2,14,4,13.8,4,13.5V2.6c0-0.3,0.2-0.5,0.5-0.5C4.7,2.1,5,2.3,5,2.6V13.5z\"></path><path d=\"M11.9,13.5c0,0.3-0.2,0.5-0.5,0.5s-0.5-0.2-0.5-0.5V2.6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5V13.5z\"></path></svg>"
/***/ }),
@ -4678,7 +4678,7 @@ module.exports = "<!-- This Source Code Form is subject to the terms of the Mozi
/***/ 363:
/***/ (function(module, exports) {
module.exports = "<!-- 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\" xmlns:svg=\"http://www.w3.org/2000/svg\"><path fill=\"black\" id=\"svg_1\" fill-rule=\"evenodd\" d=\"m4.55195,12.97461l7.4,-5l-7.4,-5l0,10zm-0.925,0l0,-10c0,-0.785 0.8,-1.264 1.415,-0.848l7.4,5c0.58,0.392 0.58,1.304 0,1.696l-7.4,5c-0.615,0.416 -1.415,-0.063 -1.415,-0.848z\"></path></svg>"
module.exports = "<!-- 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\" xmlns:svg=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path fill=\"black\" id=\"svg_1\" fill-rule=\"evenodd\" d=\"m4.55195,12.97461l7.4,-5l-7.4,-5l0,10zm-0.925,0l0,-10c0,-0.785 0.8,-1.264 1.415,-0.848l7.4,5c0.58,0.392 0.58,1.304 0,1.696l-7.4,5c-0.615,0.416 -1.415,-0.063 -1.415,-0.848z\"></path></svg>"
/***/ }),
@ -6012,7 +6012,7 @@ class ArrowExpander extends Component {
if (expanded) {
classNames.push("expanded");
}
return _reactDomFactories2.default.img({
return _reactDomFactories2.default.button({
className: classNames.join(" ")
});
}

1
devtools/client/debugger/new/images/moz.build
Просмотреть файл

@ -21,7 +21,6 @@ DevToolsModules(
'folder.svg',
'help.svg',
'javascript.svg',
'next.svg',
'pause.svg',
'prettyPrint.svg',
'react.svg',

8
devtools/client/debugger/new/images/next.svg
Просмотреть файл

@ -1,8 +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/. -->
<svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
<path d="M12.4,2.1c-0.3,0-0.5,0.2-0.5,0.5v4.8c0,0-0.1-0.1-0.1-0.1l-7.4-5C3.8,1.8,3,2.2,3,3v10c0,0.8,0.8,1.3,1.4,0.8l7.4-5
c0.1,0,0.1-0.1,0.1-0.1v4.8c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-11C12.9,2.3,12.7,2.1,12.4,2.1z M3.9,13V3l7.4,5L3.9,13z"/>
</svg>
Режим "рядом"

До

Ширина:  |  Высота:  |  Размер: 630 B

9
devtools/client/debugger/new/src/actions/ui.js
Просмотреть файл

@ -14,7 +14,7 @@ import {
} from "../selectors";
import { selectSource } from "../actions/sources/select";
import type { ThunkArgs, panelPositionType } from "./types";
import { getEditor } from "../utils/editor";
import { getEditor, getLocationsInViewport } from "../utils/editor";
import { searchContents } from "./file-search";
import type {
@ -201,6 +201,13 @@ export function setProjectDirectoryRoot(newRoot: string) {
};
}
export function updateViewport() {
return {
type: "SET_VIEWPORT",
viewport: getLocationsInViewport(getEditor())
};
}
export function setOrientation(orientation: OrientationType) {
return { type: "SET_ORIENTATION", orientation };
}

80
devtools/client/debugger/new/src/components/Editor/ColumnBreakpoint.js Normal file
Просмотреть файл

@ -0,0 +1,80 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
// @flow
import { PureComponent } from "react";
import classnames from "classnames";
import { getDocument } from "../../utils/editor";
// eslint-disable-next-line max-len
import type { ColumnBreakpoint as ColumnBreakpointType } from "../../selectors/visibleColumnBreakpoints";
type Bookmark = {
clear: Function
};
type Props = {
callSite: Object,
editor: Object,
source: Object,
enabled: boolean,
toggleBreakpoint: (number, number) => void,
columnBreakpoint: ColumnBreakpointType
};
const breakpointImg = document.createElement("div");
function makeBookmark(isActive, { onClick }) {
const bp = breakpointImg.cloneNode(true);
bp.className = classnames("call-site", {
active: isActive
});
bp.onclick = onClick;
return bp;
}
export default class CallSite extends PureComponent<Props> {
addCallSite: Function;
bookmark: ?Bookmark;
addCallSite = (nextProps: ?Props) => {
const { columnBreakpoint, source } = nextProps || this.props;
const sourceId = source.id;
const { line, column } = columnBreakpoint.location;
const widget = makeBookmark(columnBreakpoint.enabled, {
onClick: this.toggleBreakpoint
});
const doc = getDocument(sourceId);
this.bookmark = doc.setBookmark({ line: line - 1, ch: column }, { widget });
};
clearCallSite = () => {
if (this.bookmark) {
this.bookmark.clear();
this.bookmark = null;
}
};
toggleBreakpoint = () => {
const { columnBreakpoint, toggleBreakpoint } = this.props;
const { line, column } = columnBreakpoint.location;
toggleBreakpoint(line, column);
};
componentDidMount() {
this.addCallSite();
}
componentWillUnmount() {
this.clearCallSite();
}
componentDidUpdate() {
this.clearCallSite();
this.addCallSite();
}
render() {
return null;
}
}

67
devtools/client/debugger/new/src/components/Editor/ColumnBreakpoints.js Normal file
Просмотреть файл

@ -0,0 +1,67 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
import React, { Component } from "react";
import { connect } from "react-redux";
import ColumnBreakpoint from "./ColumnBreakpoint";
import "./ColumnBreakpoints.css";
import { getSelectedSource, visibleColumnBreakpoints } from "../../selectors";
import { makeLocationId } from "../../utils/breakpoint";
import actions from "../../actions";
import type { Source } from "../../types";
// eslint-disable-next-line max-len
import type { ColumnBreakpoint as ColumnBreakpointType } from "../../selectors/visibleColumnBreakpoints";
class ColumnBreakpoints extends Component {
props: {
editor: Object,
selectedSource: Source,
columnBreakpoints: ColumnBreakpointType[]
};
render() {
const {
editor,
columnBreakpoints,
selectedSource,
toggleBreakpoint
} = this.props;
if (!selectedSource || selectedSource.isBlackBoxed) {
return null;
}
let breakpoints;
editor.codeMirror.operation(() => {
breakpoints = columnBreakpoints.map(breakpoint => (
<ColumnBreakpoint
key={makeLocationId(breakpoint.location)}
columnBreakpoint={breakpoint}
editor={editor}
source={selectedSource}
toggleBreakpoint={toggleBreakpoint}
/>
));
});
return <div>{breakpoints}</div>;
}
}
const mapStateToProps = state => {
return {
selectedSource: getSelectedSource(state),
columnBreakpoints: visibleColumnBreakpoints(state)
};
};
const { toggleBreakpoint } = actions;
const mapDispatchToProps = { toggleBreakpoint };
export default connect(
mapStateToProps,
mapDispatchToProps
)(ColumnBreakpoints);

8
devtools/client/debugger/new/src/components/Editor/Tabs.js
Просмотреть файл

@ -76,12 +76,16 @@ class Tabs extends PureComponent<Props, State> {
componentDidMount() {
window.requestIdleCallback(this.updateHiddenTabs);
window.addEventListener("resize", this.onResize);
window.document.querySelector(".editor-pane").addEventListener("resizeend", this.onResize);
window.document
.querySelector(".editor-pane")
.addEventListener("resizeend", this.onResize);
}
componentWillUnmount() {
window.removeEventListener("resize", this.onResize);
window.document.querySelector(".editor-pane").removeEventListener("resizeend", this.onResize);
window.document
.querySelector(".editor-pane")
.removeEventListener("resizeend", this.onResize);
}
/*

17
devtools/client/debugger/new/src/components/Editor/index.js
Просмотреть файл

@ -9,6 +9,8 @@ import React, { PureComponent } from "react";
import ReactDOM from "react-dom";
import { connect } from "react-redux";
import classnames from "classnames";
import { debounce } from "lodash";
import { isLoaded } from "../../utils/source";
import { isFirefox } from "devtools-environment";
import { features } from "../../utils/prefs";
@ -30,7 +32,7 @@ import SearchBar from "./SearchBar";
import HighlightLines from "./HighlightLines";
import Preview from "./Preview";
import Breakpoints from "./Breakpoints";
import CallSites from "./CallSites";
import ColumnBreakpoints from "./ColumnBreakpoints";
import DebugLine from "./DebugLine";
import HighlightLine from "./HighlightLine";
import EmptyLines from "./EmptyLines";
@ -91,7 +93,8 @@ export type Props = {
toggleBreakpointsAtLine: (?number) => void,
addOrToggleDisabledBreakpoint: (?number) => void,
jumpToMappedLocation: any => void,
traverseResults: (boolean, Object) => void
traverseResults: (boolean, Object) => void,
updateViewport: void => void
};
type State = {
@ -157,6 +160,7 @@ class Editor extends PureComponent<Props, State> {
codeMirrorWrapper.addEventListener("keydown", e => this.onKeyDown(e));
codeMirrorWrapper.addEventListener("click", e => this.onClick(e));
codeMirrorWrapper.addEventListener("mouseover", onMouseOver(codeMirror));
codeMirror.on("scroll", this.onEditorScroll);
const toggleFoldMarkerVisibility = e => {
if (node instanceof HTMLElement) {
@ -277,6 +281,8 @@ class Editor extends PureComponent<Props, State> {
this.toggleConditionalPanel(line);
};
onEditorScroll = debounce(this.props.updateViewport, 200);
onKeyDown(e: KeyboardEvent) {
const { codeMirror } = this.state.editor;
const { key, target } = e;
@ -548,7 +554,9 @@ class Editor extends PureComponent<Props, State> {
<EditorMenu editor={editor} />
<GutterMenu editor={editor} />
<ConditionalPanel editor={editor} />
{features.columnBreakpoints ? <CallSites editor={editor} /> : null}
{features.columnBreakpoints ? (
<ColumnBreakpoints editor={editor} />
) : null}
</div>
);
}
@ -607,6 +615,7 @@ export default connect(
toggleBreakpointsAtLine: actions.toggleBreakpointsAtLine,
addOrToggleDisabledBreakpoint: actions.addOrToggleDisabledBreakpoint,
jumpToMappedLocation: actions.jumpToMappedLocation,
traverseResults: actions.traverseResults
traverseResults: actions.traverseResults,
updateViewport: actions.updateViewport
}
)(Editor);

4
devtools/client/debugger/new/src/components/Editor/moz.build
Просмотреть файл

@ -10,8 +10,8 @@ DIRS += [
DebuggerModules(
'Breakpoint.js',
'Breakpoints.js',
'CallSite.js',
'CallSites.js',
'ColumnBreakpoint.js',
'ColumnBreakpoints.js',
'ConditionalPanel.js',
'DebugLine.js',
'EditorMenu.js',

6
devtools/client/debugger/new/src/components/SecondaryPanes/Breakpoints/index.js
Просмотреть файл

@ -15,7 +15,7 @@ import BreakpointHeading from "./BreakpointHeading";
import actions from "../../../actions";
import { getDisplayPath } from "../../../utils/source";
import { makeLocationId } from "../../../utils/breakpoint";
import { makeLocationId, sortBreakpoints } from "../../../utils/breakpoint";
import { getSelectedSource, getBreakpointSources } from "../../../selectors";
@ -79,6 +79,8 @@ class Breakpoints extends Component<Props> {
return [
...breakpointSources.map(({ source, breakpoints, i }) => {
const path = getDisplayPath(source, sources);
const sortedBreakpoints = sortBreakpoints(breakpoints);
return [
<BreakpointHeading
source={source}
@ -86,7 +88,7 @@ class Breakpoints extends Component<Props> {
path={path}
key={source.url}
/>,
...breakpoints.map(breakpoint => (
...sortedBreakpoints.map(breakpoint => (
<Breakpoint
breakpoint={breakpoint}
source={source}

16
devtools/client/debugger/new/src/reducers/ui.js
Просмотреть файл

@ -12,7 +12,7 @@
import makeRecord from "../utils/makeRecord";
import { prefs } from "../utils/prefs";
import type { Source } from "../types";
import type { Source, Range } from "../types";
import type { Action, panelPositionType } from "../actions/types";
import type { Record } from "../utils/makeRecord";
@ -23,6 +23,8 @@ export type OrientationType = "horizontal" | "vertical";
export type SelectedPrimaryPaneTabType = "sources" | "outline";
type Viewport = Range;
export type UIState = {
selectedPrimaryPaneTab: SelectedPrimaryPaneTabType,
activeSearch: ?ActiveSearchType,
@ -32,6 +34,7 @@ export type UIState = {
endPanelCollapsed: boolean,
frameworkGroupingOn: boolean,
orientation: OrientationType,
viewport: ?Viewport,
highlightedLineRange?: {
start?: number,
end?: number,
@ -51,7 +54,8 @@ export const createUIState = makeRecord(
frameworkGroupingOn: prefs.frameworkGroupingOn,
highlightedLineRange: undefined,
conditionalPanelLine: null,
orientation: "horizontal"
orientation: "horizontal",
viewport: null
}: UIState)
);
@ -121,6 +125,10 @@ function update(
return state;
}
case "SET_VIEWPORT": {
return state.set("viewport", action.viewport);
}
case "NAVIGATE": {
return state.set("activeSearch", null).set("highlightedLineRange", {});
}
@ -180,4 +188,8 @@ export function getOrientation(state: OuterState): boolean {
return state.ui.get("orientation");
}
export function getViewport(state: OuterState) {
return state.ui.get("viewport");
}
export default update;

2
devtools/client/debugger/new/src/selectors/index.js
Просмотреть файл

@ -35,6 +35,8 @@ export { getCallStackFrames } from "./getCallStackFrames";
export { getVisibleSelectedFrame } from "./visibleSelectedFrame";
export { getBreakpointSources } from "./breakpointSources";
export { getXHRBreakpoints, shouldPauseOnAnyXHR } from "./breakpoints";
export { visibleColumnBreakpoints } from "./visibleColumnBreakpoints";
export { getVisiblePausePoints } from "./visiblePausePoints";
import { objectInspector } from "devtools-reps";

2
devtools/client/debugger/new/src/selectors/moz.build
Просмотреть файл

@ -16,5 +16,7 @@ DebuggerModules(
'index.js',
'isSelectedFrameVisible.js',
'visibleBreakpoints.js',
'visibleColumnBreakpoints.js',
'visiblePausePoints.js',
'visibleSelectedFrame.js',
)

76
devtools/client/debugger/new/src/selectors/visibleColumnBreakpoints.js Normal file
Просмотреть файл

@ -0,0 +1,76 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
import { groupBy, hasIn } from "lodash";
import { createSelector } from "reselect";
import { getViewport } from "../selectors";
import { getVisibleBreakpoints } from "./visibleBreakpoints";
import { getVisiblePausePoints } from "./visiblePausePoints";
import type { Location } from "../types";
export type ColumnBreakpoint = {|
+location: Location,
+enabled: boolean
|};
function contains(location, range) {
return (
location.line >= range.start.line &&
location.line <= range.end.line &&
location.column >= range.start.column &&
location.column <= range.end.column
);
}
function groupBreakpoints(breakpoints) {
const map = groupBy(breakpoints, ({ location }) => location.line);
for (const line in map) {
map[line] = groupBy(map[line], ({ location }) => location.column);
}
return map;
}
function isEnabled(location, breakpointMap) {
const { line, column } = location;
return hasIn(breakpointMap, [line, column]);
}
export function formatColumnBreakpoints(columnBreakpoints) {
console.log(
"Column Breakpoints\n\n",
columnBreakpoints
.map(
({ location, enabled }) =>
`(${location.line}, ${location.column}) ${enabled}`
)
.join("\n")
);
}
export function getColumnBreakpoints(pausePoints, breakpoints, viewport) {
if (!pausePoints) {
return [];
}
const breakpointMap = groupBreakpoints(breakpoints);
const columnBreakpoints = pausePoints
.filter(({ types }) => types.break)
.filter(({ location }) => breakpointMap[location.line])
.filter(({ location }) => viewport && contains(location, viewport));
return columnBreakpoints.map(({ location }) => ({
location,
enabled: isEnabled(location, breakpointMap)
}));
}
export const visibleColumnBreakpoints = createSelector(
getVisiblePausePoints,
getVisibleBreakpoints,
getViewport,
getColumnBreakpoints
);

17
devtools/client/debugger/new/src/selectors/visiblePausePoints.js Normal file
Просмотреть файл

@ -0,0 +1,17 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
import { getSelectedSource } from "../reducers/sources";
import { getPausePoints } from "../reducers/ast";
import { convertToList } from "../utils/pause/pausePoints";
export function getVisiblePausePoints(state) {
const source = getSelectedSource(state);
if (!source) {
return null;
}
const pausePoints = getPausePoints(state, source.id);
return convertToList(pausePoints);
}

20
devtools/client/debugger/new/src/utils/breakpoint/index.js
Просмотреть файл

@ -4,12 +4,15 @@
// @flow
import { sortBy } from "lodash";
import { getBreakpoint } from "../../selectors";
import assert from "../assert";
import { features } from "../prefs";
export { getASTLocation, findScopeByName } from "./astBreakpointLocation";
import type { FormattedBreakpoint } from "../../selectors/breakpointSources";
import type {
Location,
PendingLocation,
@ -179,3 +182,20 @@ export function createPendingBreakpoint(bp: Breakpoint) {
generatedLocation: pendingGeneratedLocation
};
}
export function sortBreakpoints(breakpoints: FormattedBreakpoint[]) {
breakpoints = breakpoints.map(bp => ({
...bp,
selectedLocation: {
...bp.selectedLocation,
// If a breakpoint has an undefined column, we must provide a 0 value
// or the breakpoint will display after all explicit column numbers
column: bp.selectedLocation.column || 0
}
}));
return sortBy(breakpoints, [
"selectedLocation.line",
"selectedLocation.column"
]);
}

11
devtools/client/debugger/new/src/utils/dbg.js
Просмотреть файл

@ -54,6 +54,14 @@ function _formatPausePoints(dbg: Object, url: string) {
console.log(formatPausePoints(source.text, pausePoints));
}
function _formatColumnBreapoints(dbg: Object) {
console.log(
dbg.selectors.formatColumnBreakpoints(
dbg.selectors.visibleColumnBreakpoints()
)
);
}
export function setupHelper(obj: Object) {
const selectors = bindSelectors(obj);
const dbg: Object = {
@ -72,7 +80,8 @@ export function setupHelper(obj: Object) {
sendPacket: (packet, cbk) => sendPacket(dbg, packet, cbk)
},
formatters: {
pausePoints: url => _formatPausePoints(dbg, url)
pausePoints: url => _formatPausePoints(dbg, url),
visibleColumnBreakpoints: () => _formatColumnBreapoints(dbg)
},
_telemetry: {
events: {}

28
devtools/client/debugger/new/src/utils/editor/index.js
Просмотреть файл

@ -158,6 +158,34 @@ function isVisible(codeMirror: any, top: number, left: number) {
return inXView && inYView;
}
export function getLocationsInViewport(_editor: any) {
// Get scroll position
const charWidth = _editor.codeMirror.defaultCharWidth();
const scrollArea = _editor.codeMirror.getScrollInfo();
const { scrollLeft } = _editor.codeMirror.doc;
const rect = _editor.codeMirror.getWrapperElement().getBoundingClientRect();
const topVisibleLine = _editor.codeMirror.lineAtHeight(rect.top, "window");
const bottomVisibleLine = _editor.codeMirror.lineAtHeight(
rect.bottom,
"window"
);
const leftColumn = Math.floor(scrollLeft > 0 ? scrollLeft / charWidth : 0);
const rightPosition = scrollLeft + (scrollArea.clientWidth - 30);
const rightCharacter = Math.floor(rightPosition / charWidth);
return {
start: {
line: topVisibleLine,
column: leftColumn
},
end: {
line: bottomVisibleLine,
column: rightCharacter
}
};
}
export function markText(_editor: any, className, { start, end }: EditorRange) {
return _editor.codeMirror.markText(
{ ch: start.column, line: start.line },

18
devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints-actions.js
Просмотреть файл

@ -33,38 +33,46 @@ add_task(async function() {
await addBreakpoint(dbg, "simple1", 5);
await addBreakpoint(dbg, "simple1", 6);
openFirstBreakpointContextMenu(dbg)
openFirstBreakpointContextMenu(dbg);
// select "Disable Others"
let dispatched = waitForDispatch(dbg, "DISABLE_BREAKPOINT", 3);
selectMenuItem(dbg, 7);
await waitForState(dbg, state =>
dbg.selectors.getBreakpointsList(state)
.every(bp => (bp.location.line !== 1) === bp.disabled)
);
await dispatched;
ok("breakpoint at 1 is the only enabled breakpoint");
openFirstBreakpointContextMenu(dbg)
openFirstBreakpointContextMenu(dbg);
// select "Disable All"
dispatched = waitForDispatch(dbg, "DISABLE_ALL_BREAKPOINTS");
selectMenuItem(dbg, 9);
await waitForState(dbg, state =>
dbg.selectors.getBreakpointsList(state).every(bp => bp.disabled)
);
ok("all breakpoints are disabled")
await dispatched;
ok("all breakpoints are disabled");
openFirstBreakpointContextMenu(dbg)
openFirstBreakpointContextMenu(dbg);
// select "Enable Others"
dispatched = waitForDispatch(dbg, "ENABLE_BREAKPOINT", 3);
selectMenuItem(dbg, 3);
await waitForState(dbg, state =>
dbg.selectors.getBreakpointsList(state)
.every(bp => (bp.location.line === 1) === bp.disabled)
);
await dispatched;
ok("all breakpoints except line 1 are enabled");
openFirstBreakpointContextMenu(dbg)
openFirstBreakpointContextMenu(dbg);
// select "Remove Others"
dispatched = waitForDispatch(dbg, "REMOVE_BREAKPOINT", 3);
selectMenuItem(dbg, 6);
await waitForState(dbg, state =>
dbg.selectors.getBreakpointsList(state).length === 1 &&
dbg.selectors.getBreakpointsList(state)[0].location.line === 1
);
await dispatched;
ok("remaining breakpoint should be on line 1");
});

2
devtools/client/debugger/new/test/mochitest/helpers.js
Просмотреть файл

@ -341,7 +341,7 @@ function assertDebugLine(dbg, line) {
const markedSpans = lineInfo.handle.markedSpans;
if (markedSpans && markedSpans.length > 0) {
const classMatch = markedSpans.filter(
span => span.marker.className.includes("debug-expression")
span => span.marker.className && span.marker.className.includes("debug-expression")
).length > 0;
ok(

7
devtools/client/shared/components/reps/images/input.svg Normal file
Просмотреть файл

@ -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" viewBox="0 0 12 12" fill="context-fill #0b0b0b">
<path d="M11.04 5.46L7.29 1.71a.75.75 0 0 0-1.06 1.06L9.45 6 6.23 9.21a.75.75 0 1 0 1.06 1.06l3.75-3.75c.3-.3.3-.77 0-1.06z"/>
<path d="M6.04 5.46L2.29 1.71a.75.75 0 0 0-1.06 1.06L4.45 6 1.23 9.21a.75.75 0 1 0 1.06 1.06l3.75-3.75c.3-.3.3-.77 0-1.06z"/>
</svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 564 B

1
devtools/client/shared/components/reps/images/moz.build
Просмотреть файл

@ -5,6 +5,7 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
DevToolsModules(
'input.svg',
'jump-definition.svg',
'open-inspector.svg',
)

39
devtools/client/shared/components/reps/reps.css
Просмотреть файл

@ -276,6 +276,22 @@ button.jump-definition {
background-color: var(--theme-highlight-blue);
}
/******************************************************************************/
/* Invoke getter button */
button.invoke-getter {
mask: url("resource://devtools/client/shared/components/reps/images/input.svg") no-repeat;
display: inline-block;
background-color: var(--comment-node-color);
height: 12px;
vertical-align:bottom;
border:none;
}
.invoke-getter:hover {
background-color: var(--theme-highlight-blue);
}
/******************************************************************************/
/* "more…" ellipsis */
.more-ellipsis {
@ -337,24 +353,29 @@ button.jump-definition {
cursor: default;
}
.tree-node img.arrow {
mask: url("resource://devtools/client/debugger/new/images/arrow.svg") no-repeat;
mask-size: 100%;
.tree-node button.arrow {
background:url("resource://devtools/client/debugger/new/images/arrow.svg") no-repeat;
background-size:contain;
background-position:center center;
width: 9px;
height: 9px;
border:0;
padding:0;
margin-inline-start: 1px;
margin-inline-end: 4px;
background-color: var(--theme-splitter-color, #9B9B9B);
transform: rotate(-90deg);
transform-origin: center center;
transition: transform 0.125s ease;
align-self: center;
-moz-context-properties: fill;
fill: var(--theme-splitter-color, #9B9B9B);
}
html[dir="rtl"] .tree-node img.arrow {
html[dir="rtl"] .tree-node button.arrow {
transform: rotate(90deg);
}
.tree-node img.arrow.expanded.expanded {
.tree-node button.arrow.expanded.expanded {
transform: rotate(0deg);
}
@ -363,8 +384,8 @@ html[dir="rtl"] .tree-node img.arrow {
background-color: var(--theme-selection-background, #0a84ff);
}
.tree-node.focused img.arrow {
background-color: currentColor;
.tree-node.focused button.arrow {
fill: currentColor;
}
/* 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
@ -404,7 +425,7 @@ html[dir="rtl"] .tree-node img.arrow {
color: var(--theme-comment);
}
.object-inspector .tree-node img.arrow {
.object-inspector .tree-node .arrow {
display: inline-block;
vertical-align: middle;
}

32
devtools/client/shared/components/reps/reps.js
Просмотреть файл

@ -3771,7 +3771,7 @@ class ArrowExpander extends Component {
if (expanded) {
classNames.push("expanded");
}
return _reactDomFactories2.default.img({
return _reactDomFactories2.default.button({
className: classNames.join(" ")
});
}
@ -4993,6 +4993,8 @@ module.exports = {
"use strict";
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
/* 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/>. */
@ -5014,18 +5016,40 @@ Accessor.propTypes = {
};
function Accessor(props) {
const { object } = props;
const { object, evaluation, onInvokeGetterButtonClick } = props;
if (evaluation) {
const { Rep, Grip } = __webpack_require__(3647);
return span({
className: "objectBox objectBox-accessor objectTitle"
}, Rep(_extends({}, props, {
object: evaluation.getterValue,
mode: props.mode || MODE.TINY,
defaultRep: Grip
})));
}
if (hasGetter(object) && onInvokeGetterButtonClick) {
return dom.button({
className: "invoke-getter",
title: "Invoke getter",
onClick: event => {
onInvokeGetterButtonClick();
event.stopPropagation();
}
});
}
const accessors = [];
if (hasGetter(object)) {
accessors.push("Getter");
}
if (hasSetter(object)) {
accessors.push("Setter");
}
const title = accessors.join(" & ");
return span({ className: "objectBox objectBox-accessor objectTitle" }, title);
return span({ className: "objectBox objectBox-accessor objectTitle" }, accessors.join(" & "));
}
function hasGetter(object) {

4
devtools/client/shared/vendor/WASMPARSER_UPGRADING поставляемый
Просмотреть файл

@ -1,13 +1,13 @@
# wasmparser version
Current vesion is: 0.6.1
Current vesion is: 0.6.2
# 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.6.1.tgz | tar -x --strip-components 2 package/dist/{WasmDis,WasmParser}.js
curl https://registry.npmjs.org/wasmparser/-/wasmparser-0.6.2.tgz | tar -x --strip-components 2 package/dist/{WasmDis,WasmParser}.js
```
2. Remove reference to source maps (last line)

2
devtools/client/shared/vendor/WasmDis.js поставляемый
Просмотреть файл

@ -631,7 +631,7 @@ var WasmDisassembler = /** @class */ (function () {
this.appendBuffer(" " + operator.literal.toString());
break;
case 66 /* i64_const */:
this.appendBuffer(" " + operator.literal.toDouble());
this.appendBuffer(" " + operator.literal.toString());
break;
case 67 /* f32_const */:
this.appendBuffer(" " + formatFloat32(operator.literal));

30
devtools/client/shared/vendor/WasmParser.js поставляемый
Просмотреть файл

@ -414,6 +414,36 @@ var Int64 = /** @class */ (function () {
}
return sum;
};
Int64.prototype.toString = function () {
var low = (this._data[0] | (this._data[1] << 8) | (this._data[2] << 16) | (this._data[3] << 24)) >>> 0;
var high = (this._data[4] | (this._data[5] << 8) | (this._data[6] << 16) | (this._data[7] << 24)) >>> 0;
if (low === 0 && high === 0) {
return '0';
}
var sign = false;
if (high >> 31) {
high = 4294967296 - high;
if (low > 0) {
high--;
low = 4294967296 - low;
}
sign = true;
}
var buf = [];
while (high > 0) {
var t = ((high % 10) * 4294967296) + low;
high = Math.floor(high / 10);
buf.unshift((t % 10).toString());
low = Math.floor(t / 10);
}
while (low > 0) {
buf.unshift((low % 10).toString());
low = Math.floor(low / 10);
}
if (sign)
buf.unshift('-');
return buf.join('');
};
Object.defineProperty(Int64.prototype, "data", {
get: function () {
return this._data;