Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-21 09:15:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Backed out changeset 6bd85479233a (bug 1533418) for browser_browser_toolbox_debugger.js and browser_toolbox_view_source_03.js failures CLOSED TREE

Browse Source
This commit is contained in:
Bogdan Tara 2019-05-07 22:44:51 +03:00
parent 98b4f62a61
commit baece9758d
49 changed files with 981 additions and 1197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
devtools/client/debugger/images/moz.build
View File

@ -46,6 +46,5 @@ DevToolsModules(
'stepOver.svg',
'tab.svg',
'whole-word-match.svg',
'window.svg',
'worker.svg',
)

4
devtools/client/debugger/images/window.svg
View File

@ -1,4 +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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M13 1H3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h11a2 2 0 0 0 2-2V4a3 3 0 0 0-3-3zm1 11a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6h12zm0-7H2V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 491 B

2
devtools/client/debugger/src/actions/navigation.js
View File

@ -58,7 +58,7 @@ export function connect(url: string, actor: string, canRewind: boolean) {
dispatch(
({
type: "CONNECT",
mainThread: { url, actor, type: -1, name: "" },
mainThread: { url, actor, type: -1 },
canRewind
}: Action)
);

25
devtools/client/debugger/src/actions/source-tree.js
View File

@ -3,12 +3,27 @@
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
// @flow
import type { TreeNode } from "../utils/sources-tree/types";
import type { Action, FocusItem, ThunkArgs } from "./types";
import type { Context } from "../types";
export function setExpandedState(expanded: Set<string>) {
return { type: "SET_EXPANDED_STATE", expanded };
export function setExpandedState(thread: string, expanded: Set<string>) {
return ({ dispatch, getState }: ThunkArgs) => {
dispatch(
({
type: "SET_EXPANDED_STATE",
thread,
expanded
}: Action)
);
};
}
export function focusItem(item: TreeNode) {
return { type: "SET_FOCUSED_SOURCE_ITEM", item };
export function focusItem(cx: Context, item: FocusItem) {
return ({ dispatch, getState }: ThunkArgs) => {
dispatch({
type: "SET_FOCUSED_SOURCE_ITEM",
cx,
item
});
};
}

12
devtools/client/debugger/src/actions/sources/tests/blackbox.spec.js
View File

@ -30,10 +30,16 @@ describe("blackbox", () => {
throw new Error("foo should exist");
}
const displayedSources = selectors.getDisplayedSources(getState());
expect(displayedSources.FakeThread[fooSource.id].isBlackBoxed).toEqual(
true
const { thread } = selectors.getSourceActorsForSource(
getState(),
foo1Source.id
)[0];
const displayedSources = selectors.getDisplayedSourcesForThread(
getState(),
thread
);
expect(displayedSources[fooSource.id].isBlackBoxed).toEqual(true);
expect(fooSource.isBlackBoxed).toEqual(true);
});
});

11
devtools/client/debugger/src/actions/tests/setProjectDirectoryRoot.spec.js
View File

@ -11,6 +11,8 @@ import {
makeSource
} from "../../utils/test-head";
import type { Source } from "../../types";
const { getProjectDirectoryRoot, getDisplayedSources } = selectors;
describe("setProjectDirectoryRoot", () => {
@ -52,15 +54,14 @@ describe("setProjectDirectoryRoot", () => {
dispatch(actions.setProjectDirectoryRoot(cx, "localhost:8000/examples/js"));
const filteredSourcesByThread = getDisplayedSources(getState());
const filteredSources = (Object.values(
filteredSourcesByThread.FakeThread
): any)[0];
const filteredSources = Object.values(filteredSourcesByThread)[0];
const firstSource: Source = (Object.values(filteredSources)[0]: any);
expect(filteredSources.url).toEqual(
expect(firstSource.url).toEqual(
"http://localhost:8000/examples/js/scopes.js"
);
expect(filteredSources.relativeUrl).toEqual("scopes.js");
expect(firstSource.relativeUrl).toEqual("scopes.js");
});
it("should update the child directory ", () => {

6
devtools/client/debugger/src/actions/tests/source-tree.spec.js
View File

@ -12,8 +12,8 @@ describe("source tree", () => {
const { dispatch, getState } = createStore();
const expandedState = new Set(["foo", "bar"]);
expect(getExpandedState(getState())).toEqual(new Set([]));
dispatch(actions.setExpandedState(expandedState));
expect(getExpandedState(getState())).toEqual(expandedState);
expect(getExpandedState(getState(), "FakeThread")).toEqual(undefined);
dispatch(actions.setExpandedState("FakeThread", expandedState));
expect(getExpandedState(getState(), "FakeThread")).toEqual(expandedState);
});
});

5
devtools/client/debugger/src/actions/types/index.js
View File

@ -71,7 +71,10 @@ type NavigateAction =
| {| +type: "CONNECT", +mainThread: MainThread, +canRewind: boolean |}
| {| +type: "NAVIGATE", +mainThread: MainThread |};
export type FocusItem = TreeNode;
export type FocusItem = {
thread: string,
item: TreeNode
};
export type SourceTreeAction =
| {| +type: "SET_EXPANDED_STATE", +thread: string, +expanded: any |}

3
devtools/client/debugger/src/client/firefox/create.js
View File

@ -77,7 +77,6 @@ export function createWorker(actor: string, url: string) {
actor,
url,
// Ci.nsIWorkerDebugger.TYPE_DEDICATED
type: 0,
name: ""
type: 0
};
}

145
devtools/client/debugger/src/components/PrimaryPanes/SourcesTree.js
View File

@ -16,8 +16,10 @@ import {
getDebuggeeUrl,
getExpandedState,
getProjectDirectoryRoot,
getDisplayedSources,
getDisplayedSourcesForThread,
getFocusedSourceItem,
getWorkerByThread,
getWorkerCount,
getContext
} from "../../selectors";
@ -27,6 +29,7 @@ import { getGeneratedSourceByURL } from "../../reducers/sources";
import actions from "../../actions";
// Components
import AccessibleImage from "../shared/AccessibleImage";
import SourcesTreeItem from "./SourcesTreeItem";
import ManagedTree from "../shared/ManagedTree";
@ -39,25 +42,25 @@ import {
nodeHasChildren,
updateTree
} from "../../utils/sources-tree";
import { parse } from "../../utils/url";
import { getRawSourceURL } from "../../utils/source";
import { getDisplayName } from "../../utils/workers";
import { features } from "../../utils/prefs";
import type {
TreeNode,
TreeDirectory,
ParentMap
} from "../../utils/sources-tree/types";
import type { Source, Context, Thread } from "../../types";
import type {
SourcesMapByThread,
State as AppState
} from "../../reducers/types";
import type { Worker, Source, Context } from "../../types";
import type { SourcesMap, State as AppState } from "../../reducers/types";
import type { Item } from "../shared/ManagedTree";
type Props = {
cx: Context,
threads: Thread[],
sources: SourcesMapByThread,
thread: string,
worker: Worker,
sources: SourcesMap,
sourceCount: number,
shownSource?: Source,
selectedSource?: Source,
@ -67,7 +70,8 @@ type Props = {
selectSource: typeof actions.selectSource,
setExpandedState: typeof actions.setExpandedState,
focusItem: typeof actions.focusItem,
focused: TreeNode
focused: TreeNode,
workerCount: number
};
type State = {
@ -80,24 +84,17 @@ type State = {
type SetExpanded = (item: TreeNode, expanded: boolean, altKey: boolean) => void;
function shouldAutoExpand(depth, item, debuggeeUrl) {
if (depth !== 1) {
return false;
}
const { host } = parse(debuggeeUrl);
return item.name === host;
}
class SourcesTree extends Component<Props, State> {
mounted: boolean;
constructor(props: Props) {
super(props);
const { debuggeeUrl, sources, threads } = this.props;
const { debuggeeUrl, sources, projectRoot } = this.props;
this.state = createTree({
projectRoot,
debuggeeUrl,
sources,
threads
sources
});
}
@ -107,24 +104,21 @@ class SourcesTree extends Component<Props, State> {
debuggeeUrl,
sources,
shownSource,
selectedSource,
threads
selectedSource
} = this.props;
const { uncollapsedTree, sourceTree } = this.state;
if (
projectRoot != nextProps.projectRoot ||
debuggeeUrl != nextProps.debuggeeUrl ||
threads != nextProps.threads ||
nextProps.sourceCount === 0
) {
// early recreate tree because of changes
// to project root, debuggee url or lack of sources
// to project root, debugee url or lack of sources
return this.setState(
createTree({
sources: nextProps.sources,
debuggeeUrl: nextProps.debuggeeUrl,
threads: nextProps.threads
debuggeeUrl: nextProps.debuggeeUrl
})
);
}
@ -151,7 +145,6 @@ class SourcesTree extends Component<Props, State> {
this.setState(
updateTree({
newSources: nextProps.sources,
threads: nextProps.threads,
prevSources: sources,
debuggeeUrl,
uncollapsedTree,
@ -168,7 +161,7 @@ class SourcesTree extends Component<Props, State> {
};
onFocus = (item: TreeNode) => {
this.props.focusItem(item);
this.props.focusItem(this.props.cx, { thread: this.props.thread, item });
};
onActivate = (item: TreeNode) => {
@ -177,11 +170,16 @@ class SourcesTree extends Component<Props, State> {
// NOTE: we get the source from sources because item.contents is cached
getSource(item: TreeNode): ?Source {
return getSourceFromNode(item);
const source = getSourceFromNode(item);
if (source) {
return this.props.sources[source.id];
}
return null;
}
getPath = (item: TreeNode): string => {
const { path } = item;
const path = `${item.path}/${item.name}`;
const source = this.getSource(item);
if (!source || isDirectory(item)) {
@ -189,16 +187,15 @@ class SourcesTree extends Component<Props, State> {
}
const blackBoxedPart = source.isBlackBoxed ? ":blackboxed" : "";
return `${path}/${source.id}/${blackBoxedPart}`;
};
onExpand = (item: Item, expandedState: Set<string>) => {
this.props.setExpandedState(expandedState);
this.props.setExpandedState(this.props.thread, expandedState);
};
onCollapse = (item: Item, expandedState: Set<string>) => {
this.props.setExpandedState(expandedState);
this.props.setExpandedState(this.props.thread, expandedState);
};
isEmpty() {
@ -233,10 +230,6 @@ class SourcesTree extends Component<Props, State> {
return sourceTree.contents;
};
getChildren = (item: $Shape<TreeDirectory>) => {
return nodeHasChildren(item) ? item.contents : [];
};
renderItem = (
item: TreeNode,
depth: number,
@ -245,15 +238,13 @@ class SourcesTree extends Component<Props, State> {
expanded: boolean,
{ setExpanded }: { setExpanded: SetExpanded }
) => {
const { debuggeeUrl, projectRoot, threads } = this.props;
const { debuggeeUrl, projectRoot } = this.props;
return (
<SourcesTreeItem
item={item}
threads={threads}
depth={depth}
focused={focused}
autoExpand={shouldAutoExpand(depth, item, debuggeeUrl)}
expanded={expanded}
focusItem={this.onFocus}
selectItem={this.selectItem}
@ -267,15 +258,15 @@ class SourcesTree extends Component<Props, State> {
renderTree() {
const { expanded, focused } = this.props;
const { highlightItems, listItems, parentMap } = this.state;
const treeProps = {
autoExpandAll: false,
autoExpandDepth: 1,
autoExpandDepth: expanded ? 0 : 1,
expanded,
focused,
getChildren: this.getChildren,
getChildren: (item: $Shape<TreeDirectory>) =>
nodeHasChildren(item) ? item.contents : [],
getParent: (item: $Shape<TreeNode>) => parentMap.get(item),
getPath: this.getPath,
getRoots: this.getRoots,
@ -295,13 +286,14 @@ class SourcesTree extends Component<Props, State> {
}
renderPane(...children) {
const { projectRoot } = this.props;
const { projectRoot, thread } = this.props;
return (
<div
key="pane"
className={classnames("sources-pane", {
"sources-list-custom-root": projectRoot
"sources-list-custom-root": projectRoot,
thread
})}
>
{children}
@ -309,8 +301,39 @@ class SourcesTree extends Component<Props, State> {
);
}
renderThreadHeader() {
const { worker, workerCount } = this.props;
if (!features.windowlessWorkers || workerCount == 0) {
return null;
}
if (worker) {
return (
<div className="node thread-header" key="thread-header">
<AccessibleImage className="worker" />
<span className="label">{getDisplayName(worker)}</span>
</div>
);
}
return (
<div className="node thread-header" key="thread-header">
<AccessibleImage className={"file"} />
<span className="label">{L10N.getStr("mainThread")}</span>
</div>
);
}
render() {
const { worker } = this.props;
if (!features.windowlessWorkers && worker) {
return null;
}
return this.renderPane(
this.renderThreadHeader(),
this.isEmpty() ? (
this.renderEmptyElement(L10N.getStr("noSourcesText"))
) : (
@ -324,13 +347,15 @@ class SourcesTree extends Component<Props, State> {
function getSourceForTree(
state: AppState,
displayedSources: SourcesMapByThread,
source: ?Source
displayedSources: SourcesMap,
source: ?Source,
thread
): ?Source {
if (!source) {
return null;
}
source = displayedSources[source.id];
if (!source || !source.isPrettyPrinted) {
return source;
}
@ -341,19 +366,27 @@ function getSourceForTree(
const mapStateToProps = (state, props) => {
const selectedSource = getSelectedSource(state);
const shownSource = getShownSource(state);
const displayedSources = getDisplayedSources(state);
const focused = getFocusedSourceItem(state);
const thread = props.thread;
const displayedSources = getDisplayedSourcesForThread(state, thread);
return {
threads: props.threads,
cx: getContext(state),
shownSource: getSourceForTree(state, displayedSources, shownSource),
selectedSource: getSourceForTree(state, displayedSources, selectedSource),
shownSource: getSourceForTree(state, displayedSources, shownSource, thread),
selectedSource: getSourceForTree(
state,
displayedSources,
selectedSource,
thread
),
debuggeeUrl: getDebuggeeUrl(state),
expanded: getExpandedState(state),
focused: getFocusedSourceItem(state),
expanded: getExpandedState(state, props.thread),
focused: focused && focused.thread == props.thread ? focused.item : null,
projectRoot: getProjectDirectoryRoot(state),
sources: displayedSources,
sourceCount: Object.values(displayedSources).length
sourceCount: Object.values(displayedSources).length,
worker: getWorkerByThread(state, thread),
workerCount: getWorkerCount(state)
};
};

117
devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.js
View File

@ -11,14 +11,12 @@ import { showMenu } from "devtools-contextmenu";
import SourceIcon from "../shared/SourceIcon";
import AccessibleImage from "../shared/AccessibleImage";
import { getDisplayName, isWorker } from "../../utils/workers";
import {
getGeneratedSourceByURL,
getHasSiblingOfSameName,
hasPrettySource as checkHasPrettySource,
getContext,
getMainThread
getContext
} from "../../selectors";
import actions from "../../actions";
@ -33,10 +31,9 @@ import { copyToTheClipboard } from "../../utils/clipboard";
import { features } from "../../utils/prefs";
import type { TreeNode } from "../../utils/sources-tree/types";
import type { Source, Context, MainThread, Thread } from "../../types";
import type { Source, Context } from "../../types";
type Props = {
autoExpand: ?boolean,
cx: Context,
debuggeeUrl: string,
projectRoot: string,
@ -45,8 +42,6 @@ type Props = {
depth: number,
focused: boolean,
expanded: boolean,
threads: Thread[],
mainThread: MainThread,
hasMatchingGeneratedSource: boolean,
hasSiblingOfSameName: boolean,
hasPrettySource: boolean,
@ -70,17 +65,47 @@ type MenuOption = {
type ContextMenu = Array<MenuOption>;
class SourceTreeItem extends Component<Props, State> {
componentDidMount() {
const { autoExpand, item } = this.props;
if (autoExpand) {
this.props.setExpanded(item, true, false);
getIcon(item: TreeNode, depth: number) {
const { debuggeeUrl, projectRoot, source, hasPrettySource } = this.props;
if (item.path === "webpack://") {
return <AccessibleImage className="webpack" />;
} else if (item.path === "ng://") {
return <AccessibleImage className="angular" />;
} else if (isUrlExtension(item.path) && depth === 0) {
return <AccessibleImage className="extension" />;
}
if (depth === 0 && projectRoot === "") {
return (
<AccessibleImage
className={classnames("globe-small", {
debuggee: debuggeeUrl && debuggeeUrl.includes(item.name)
})}
/>
);
}
if (isDirectory(item)) {
return <AccessibleImage className="folder" />;
}
if (hasPrettySource) {
return <AccessibleImage className="prettyPrint" />;
}
if (source) {
return <SourceIcon source={source} />;
}
return null;
}
onClick = (e: MouseEvent) => {
const { item, focusItem, selectItem } = this.props;
focusItem(item);
if (!isDirectory(item)) {
selectItem(item);
}
@ -183,69 +208,8 @@ class SourceTreeItem extends Component<Props, State> {
);
}
renderIcon(item: TreeNode, depth: number) {
const {
debuggeeUrl,
projectRoot,
source,
hasPrettySource,
threads
} = this.props;
if (item.name === "webpack://") {
return <AccessibleImage className="webpack" />;
} else if (item.name === "ng://") {
return <AccessibleImage className="angular" />;
} else if (isUrlExtension(item.path) && depth === 1) {
return <AccessibleImage className="extension" />;
}
// Threads level
if (depth === 0 && projectRoot === "") {
const thread = threads.find(thrd => thrd.actor == item.name);
if (thread) {
const icon = thread === this.props.mainThread ? "window" : "worker";
return (
<AccessibleImage
className={classnames(icon, {
debuggee: debuggeeUrl && debuggeeUrl.includes(item.name)
})}
/>
);
}
}
if (isDirectory(item)) {
// Domain level
if (depth === 1) {
return <AccessibleImage className="globe-small" />;
}
return <AccessibleImage className="folder" />;
}
if (hasPrettySource) {
return <AccessibleImage className="prettyPrint" />;
}
if (source) {
return <SourceIcon source={source} />;
}
return null;
}
renderItemName(depth) {
const { item, threads } = this.props;
if (depth === 0) {
const thread = threads.find(({ actor }) => actor == item.name);
if (thread) {
return isWorker(thread)
? getDisplayName((thread: any))
: L10N.getStr("mainThread");
}
}
renderItemName() {
const { item } = this.props;
switch (item.name) {
case "ng://":
@ -289,10 +253,10 @@ class SourceTreeItem extends Component<Props, State> {
onContextMenu={e => this.onContextMenu(e, item)}
>
{this.renderItemArrow()}
{this.renderIcon(item, depth)}
{this.getIcon(item, depth)}
<span className="label">
{" "}
{this.renderItemName(depth)}
{this.renderItemName()}
{query} {suffix}
</span>
</div>
@ -312,7 +276,6 @@ const mapStateToProps = (state, props) => {
const { source } = props;
return {
cx: getContext(state),
mainThread: getMainThread(state),
hasMatchingGeneratedSource: getHasMatchingGeneratedSource(state, source),
hasSiblingOfSameName: getHasSiblingOfSameName(state, source),
hasPrettySource: source ? checkHasPrettySource(state, source.id) : false

4
devtools/client/debugger/src/components/PrimaryPanes/index.js
View File

@ -127,7 +127,9 @@ class PrimaryPanes extends Component<Props, State> {
}
renderThreadSources() {
return <SourcesTree threads={this.props.threads} />;
return this.props.threads.map(({ actor }) => (
<SourcesTree thread={actor} key={actor} />
));
}
render() {

220
devtools/client/debugger/src/components/PrimaryPanes/tests/SourcesTree.spec.js
View File

@ -83,10 +83,8 @@ describe("SourcesTree", () => {
const newSource = createMockSource(
"server1.conn13.child1/43",
"http://mdn.com/four.js",
true,
""
true
);
const newThreadSources = {
...props.sources.FakeThread,
"server1.conn13.child1/43": newSource
@ -94,12 +92,15 @@ describe("SourcesTree", () => {
await component.setProps({
...props,
sources: newThreadSources
sources: {
...props.sources,
...newThreadSources
}
});
expect(
component.state("uncollapsedTree").contents[0].contents[0].contents
).toHaveLength(5);
component.state("uncollapsedTree").contents[0].contents
).toHaveLength(6);
});
it("updates sources if sources are emptied", async () => {
@ -119,17 +120,15 @@ describe("SourcesTree", () => {
it("recreates tree if projectRoot is changed", async () => {
const { component, props, defaultState } = render();
const sources = {
FakeThread: {
"server1.conn13.child1/41": createMockSource(
"server1.conn13.child1/41",
"http://mozilla.com/three.js"
)
}
"server1.conn13.child1/41": createMockSource(
"server1.conn13.child1/41",
"http://mozilla.com/three.js"
)
};
expect(
defaultState.uncollapsedTree.contents[0].contents[0].contents
).toHaveLength(5);
expect(defaultState.uncollapsedTree.contents[0].contents).toHaveLength(
5
);
await component.setProps({
...props,
@ -142,22 +141,18 @@ describe("SourcesTree", () => {
).toHaveLength(1);
});
it("recreates tree if debuggeeUrl is changed", async () => {
it("recreates tree if debugeeUrl is changed", async () => {
const { component, props, defaultState } = render();
const sources = {
FakeThread: {
"server1.conn13.child1/41": createMockSource(
"server1.conn13.child1/41",
"http://mdn.com/three.js",
true,
""
)
}
"server1.conn13.child1/41": createMockSource(
"server1.conn13.child1/41",
"http://mdn.com/three.js"
)
};
expect(
defaultState.uncollapsedTree.contents[0].contents[0].contents
).toHaveLength(5);
expect(defaultState.uncollapsedTree.contents[0].contents).toHaveLength(
5
);
await component.setProps({
...props,
@ -171,56 +166,6 @@ describe("SourcesTree", () => {
});
});
describe("updates threads", () => {
it("adds sources to the correct thread", async () => {
const { component, props } = render();
const newSource = createMockSource(
"server1.conn13.child1/43",
"http://mdn.com/four.js",
true,
""
);
const newThreadSources = {
FakeThread1: {
"server1.conn13.child1/43": newSource
}
};
expect(component.state("uncollapsedTree").contents[0].name).toEqual(
"FakeThread"
);
expect(
component.state("uncollapsedTree").contents[0].contents[0].contents
).toHaveLength(5);
expect(component.state("uncollapsedTree").contents[1]).toEqual(
undefined
);
await component.setProps({
...props,
sources: {
...props.sources,
...newThreadSources
}
});
expect(component.state("uncollapsedTree").contents[0].name).toEqual(
"FakeThread"
);
expect(
component.state("uncollapsedTree").contents[0].contents[0].contents
).toHaveLength(5);
expect(component.state("uncollapsedTree").contents[1].name).toEqual(
"FakeThread1"
);
expect(
component.state("uncollapsedTree").contents[1].contents[0].contents
).toHaveLength(1);
});
});
describe("updates highlighted items", () => {
it("updates highlightItems if selectedSource changes", async () => {
const { component, props } = render();
@ -228,7 +173,8 @@ describe("SourcesTree", () => {
"server1.conn13.child1/41",
"http://mdn.com/three.js",
false,
null
null,
"FakeThread"
);
await component.setProps({
...props,
@ -301,7 +247,10 @@ describe("SourcesTree", () => {
.find("ManagedTree")
.props()
.onExpand({}, expandedState);
expect(props.setExpandedState).toHaveBeenCalledWith(expandedState);
expect(props.setExpandedState).toHaveBeenCalledWith(
"FakeThread",
expandedState
);
});
it("onCollapse", async () => {
@ -311,7 +260,10 @@ describe("SourcesTree", () => {
.find("ManagedTree")
.props()
.onCollapse({}, expandedState);
expect(props.setExpandedState).toHaveBeenCalledWith(expandedState);
expect(props.setExpandedState).toHaveBeenCalledWith(
"FakeThread",
expandedState
);
});
it("getParent", async () => {
@ -322,8 +274,8 @@ describe("SourcesTree", () => {
.props()
.getParent(item);
expect(parent.path).toEqual("FakeThread");
expect(parent.contents[0].contents).toHaveLength(5);
expect(parent.path).toEqual("mdn.com");
expect(parent.contents).toHaveLength(5);
});
});
@ -331,7 +283,31 @@ describe("SourcesTree", () => {
it("should return path for item", async () => {
const { instance } = render();
const path = instance.getPath(createMockItem());
expect(path).toEqual("http://mdn.com/one.js/server1.conn13.child1/39/");
expect(path).toEqual(
"http://mdn.com/one.js/one.js/server1.conn13.child1/39/"
);
});
it("should return path for blackboxedboxed item", async () => {
const item = createMockItem(
"http://mdn.com/blackboxed.js",
"blackboxed.js",
{ id: "server1.conn13.child1/59" }
);
const sources = {
"server1.conn13.child1/59": createMockSource(
"server1.conn13.child1/59",
"http://mdn.com/blackboxed.js",
true
)
};
const { instance } = render({ sources });
const path = instance.getPath(item);
expect(path).toEqual(
"http://mdn.com/blackboxed.js/blackboxed.js/server1.conn13.child1/59/:blackboxed"
);
});
it("should return path for generated item", async () => {
@ -342,7 +318,7 @@ describe("SourcesTree", () => {
})
);
expect(pathOriginal).toEqual(
"http://mdn.com/four.js/server1.conn13.child1/42/originalSource-sha/"
"http://mdn.com/four.js/four.js/server1.conn13.child1/42/originalSource-sha/"
);
const pathGenerated = instance.getPath(
@ -351,7 +327,7 @@ describe("SourcesTree", () => {
})
);
expect(pathGenerated).toEqual(
"http://mdn.com/four.js/server1.conn13.child1/42/"
"http://mdn.com/four.js/four.js/server1.conn13.child1/42/"
);
});
});
@ -359,42 +335,32 @@ describe("SourcesTree", () => {
function generateDefaults(overrides: Object) {
const defaultSources = {
FakeThread: {
"server1.conn13.child1/39": createMockSource(
"server1.conn13.child1/39",
"http://mdn.com/one.js",
false,
null
),
"server1.conn13.child1/40": createMockSource(
"server1.conn13.child1/40",
"http://mdn.com/two.js",
false,
null
),
"server1.conn13.child1/41": createMockSource(
"server1.conn13.child1/41",
"http://mdn.com/three.js",
false,
null
),
"server1.conn13.child1/42/originalSource-sha": createMockSource(
"server1.conn13.child1/42/originalSource-sha",
"http://mdn.com/four.js",
false,
null
),
"server1.conn13.child1/42": createMockSource(
"server1.conn13.child1/42",
"http://mdn.com/four.js",
false,
"data:application/json?charset=utf?dsffewrsf"
)
}
"server1.conn13.child1/39": createMockSource(
"server1.conn13.child1/39",
"http://mdn.com/one.js"
),
"server1.conn13.child1/40": createMockSource(
"server1.conn13.child1/40",
"http://mdn.com/two.js"
),
"server1.conn13.child1/41": createMockSource(
"server1.conn13.child1/41",
"http://mdn.com/three.js"
),
"server1.conn13.child1/42/originalSource-sha": createMockSource(
"server1.conn13.child1/42/originalSource-sha",
"http://mdn.com/four.js"
),
"server1.conn13.child1/42": createMockSource(
"server1.conn13.child1/42",
"http://mdn.com/four.js",
false,
"data:application/json?charset=utf?dsffewrsf"
)
};
return {
cx: mockcx,
thread: "FakeThread",
autoExpandAll: true,
selectSource: jest.fn(),
setExpandedState: jest.fn(),
@ -404,16 +370,6 @@ function generateDefaults(overrides: Object) {
setProjectDirectoryRoot: jest.fn(),
focusItem: jest.fn(),
projectRoot: "",
threads: [
{
name: "FakeThread",
actor: "FakeThread"
},
{
name: "FakeThread1",
actor: "FakeThread1"
}
],
...overrides
};
}
@ -430,7 +386,13 @@ function render(overrides = {}) {
return { component, props, defaultState, instance };
}
function createMockSource(id, url, isBlackBoxed = false, sourceMapURL = null) {
function createMockSource(
id,
url,
isBlackBoxed = false,
sourceMapURL = null,
thread = ""
) {
return {
...makeMockSource(url, id),
isBlackBoxed,

7
devtools/client/debugger/src/components/PrimaryPanes/tests/SourcesTreeItem.spec.js
View File

@ -375,7 +375,6 @@ function generateDefaults(overrides) {
selectItem: jest.fn(),
focusItem: jest.fn(),
setExpanded: jest.fn(),
threads: [{ name: "Main Thread" }],
...overrides
};
}
@ -390,11 +389,7 @@ function render(overrides = {}) {
return { component, props, defaultState, instance };
}
function createMockDirectory(
path = "domain/subfolder",
name = "folder",
contents = []
) {
function createMockDirectory(path = "folder/", name = "folder", contents = []) {
return {
type: "directory",
name,

6
devtools/client/debugger/src/components/PrimaryPanes/tests/__snapshots__/PrimaryPanes.spec.js.snap
View File

@ -57,9 +57,6 @@ exports[`PrimaryPanes with custom root renders custom root source list 1`] = `
</span>
</button>
</div>
<Connect(SourcesTree)
threads={Array []}
/>
</div>
<Connect(Outline)
alphabetizeOutline={false}
@ -126,9 +123,6 @@ exports[`PrimaryPanes with custom root renders empty custom root source list 1`]
</span>
</button>
</div>
<Connect(SourcesTree)
threads={Array []}
/>
</div>
<Connect(Outline)
alphabetizeOutline={false}

192
devtools/client/debugger/src/components/PrimaryPanes/tests/__snapshots__/SourcesTree.spec.js.snap
View File

@ -2,16 +2,29 @@
exports[`SourcesTree After changing expanded nodes Shows the tree with four.js, five.js and six.js expanded 1`] = `
<div
className="sources-pane"
className="sources-pane thread"
key="pane"
>
<div
className="node thread-header"
key="thread-header"
>
<AccessibleImage
className="file"
/>
<span
className="label"
>
Main Thread
</span>
</div>
<div
className="sources-list"
key="tree"
>
<ManagedTree
autoExpandAll={false}
autoExpandDepth={1}
autoExpandDepth={0}
expanded={
Array [
"four.js",
@ -38,9 +51,22 @@ exports[`SourcesTree After changing expanded nodes Shows the tree with four.js,
exports[`SourcesTree Should show a 'No Sources' message if there are no sources 1`] = `
<div
className="sources-pane"
className="sources-pane thread"
key="pane"
>
<div
className="node thread-header"
key="thread-header"
>
<AccessibleImage
className="file"
/>
<span
className="label"
>
Main Thread
</span>
</div>
<div
className="no-sources-message"
key="empty"
@ -52,9 +78,22 @@ exports[`SourcesTree Should show a 'No Sources' message if there are no sources
exports[`SourcesTree Should show the tree with nothing expanded 1`] = `
<div
className="sources-pane"
className="sources-pane thread"
key="pane"
>
<div
className="node thread-header"
key="thread-header"
>
<AccessibleImage
className="file"
/>
<span
className="label"
>
Main Thread
</span>
</div>
<div
className="sources-list"
key="tree"
@ -81,16 +120,29 @@ exports[`SourcesTree Should show the tree with nothing expanded 1`] = `
exports[`SourcesTree When loading initial source Shows the tree with one.js, two.js and three.js expanded 1`] = `
<div
className="sources-pane"
className="sources-pane thread"
key="pane"
>
<div
className="node thread-header"
key="thread-header"
>
<AccessibleImage
className="file"
/>
<span
className="label"
>
Main Thread
</span>
</div>
<div
className="sources-list"
key="tree"
>
<ManagedTree
autoExpandAll={false}
autoExpandDepth={1}
autoExpandDepth={0}
expanded={
Array [
"one.js",
@ -117,9 +169,22 @@ exports[`SourcesTree When loading initial source Shows the tree with one.js, two
exports[`SourcesTree on receiving new props updates highlighted items updates highlightItems if selectedSource changes 1`] = `
<div
className="sources-pane"
className="sources-pane thread"
key="pane"
>
<div
className="node thread-header"
key="thread-header"
>
<AccessibleImage
className="file"
/>
<span
className="label"
>
Main Thread
</span>
</div>
<div
className="sources-list"
key="tree"
@ -147,7 +212,7 @@ exports[`SourcesTree on receiving new props updates highlighted items updates hi
"url": "http://mdn.com/three.js",
},
"name": "three.js",
"path": "FakeThread/mdn.com/three.js",
"path": "mdn.com/three.js",
"type": "source",
},
Object {
@ -166,7 +231,7 @@ exports[`SourcesTree on receiving new props updates highlighted items updates hi
"url": "http://mdn.com/four.js",
},
"name": "four.js",
"path": "FakeThread/mdn.com/four.js",
"path": "mdn.com/four.js",
"type": "source",
},
Object {
@ -183,7 +248,7 @@ exports[`SourcesTree on receiving new props updates highlighted items updates hi
"url": "http://mdn.com/four.js",
},
"name": "four.js",
"path": "FakeThread/mdn.com/four.js",
"path": "mdn.com/four.js",
"type": "source",
},
Object {
@ -200,7 +265,7 @@ exports[`SourcesTree on receiving new props updates highlighted items updates hi
"url": "http://mdn.com/one.js",
},
"name": "one.js",
"path": "FakeThread/mdn.com/one.js",
"path": "mdn.com/one.js",
"type": "source",
},
Object {
@ -217,7 +282,7 @@ exports[`SourcesTree on receiving new props updates highlighted items updates hi
"url": "http://mdn.com/three.js",
},
"name": "three.js",
"path": "FakeThread/mdn.com/three.js",
"path": "mdn.com/three.js",
"type": "source",
},
Object {
@ -234,111 +299,12 @@ exports[`SourcesTree on receiving new props updates highlighted items updates hi
"url": "http://mdn.com/two.js",
},
"name": "two.js",
"path": "FakeThread/mdn.com/two.js",
"path": "mdn.com/two.js",
"type": "source",
},
],
"name": "mdn.com",
"path": "FakeThread/mdn.com",
"type": "directory",
},
Object {
"contents": Array [
Object {
"contents": Array [
Object {
"contents": Object {
"id": "server1.conn13.child1/42",
"introductionType": undefined,
"introductionUrl": null,
"isBlackBoxed": false,
"isExtension": false,
"isPrettyPrinted": false,
"isWasm": false,
"relativeUrl": "http://mdn.com/four.js",
"sourceMapURL": "data:application/json?charset=utf?dsffewrsf",
"url": "http://mdn.com/four.js",
},
"name": "four.js",
"path": "FakeThread/mdn.com/four.js",
"type": "source",
},
Object {
"contents": Object {
"id": "server1.conn13.child1/42/originalSource-sha",
"introductionType": undefined,
"introductionUrl": null,
"isBlackBoxed": false,
"isExtension": false,
"isPrettyPrinted": false,
"isWasm": false,
"relativeUrl": "http://mdn.com/four.js",
"sourceMapURL": null,
"url": "http://mdn.com/four.js",
},
"name": "four.js",
"path": "FakeThread/mdn.com/four.js",
"type": "source",
},
Object {
"contents": Object {
"id": "server1.conn13.child1/39",
"introductionType": undefined,
"introductionUrl": null,
"isBlackBoxed": false,
"isExtension": false,
"isPrettyPrinted": false,
"isWasm": false,
"relativeUrl": "http://mdn.com/one.js",
"sourceMapURL": null,
"url": "http://mdn.com/one.js",
},
"name": "one.js",
"path": "FakeThread/mdn.com/one.js",
"type": "source",
},
Object {
"contents": Object {
"id": "server1.conn13.child1/41",
"introductionType": undefined,
"introductionUrl": null,
"isBlackBoxed": false,
"isExtension": false,
"isPrettyPrinted": false,
"isWasm": false,
"relativeUrl": "http://mdn.com/three.js",
"sourceMapURL": null,
"url": "http://mdn.com/three.js",
},
"name": "three.js",
"path": "FakeThread/mdn.com/three.js",
"type": "source",
},
Object {
"contents": Object {
"id": "server1.conn13.child1/40",
"introductionType": undefined,
"introductionUrl": null,
"isBlackBoxed": false,
"isExtension": false,
"isPrettyPrinted": false,
"isWasm": false,
"relativeUrl": "http://mdn.com/two.js",
"sourceMapURL": null,
"url": "http://mdn.com/two.js",
},
"name": "two.js",
"path": "FakeThread/mdn.com/two.js",
"type": "source",
},
],
"name": "mdn.com",
"path": "FakeThread/mdn.com",
"type": "directory",
},
],
"name": "FakeThread",
"path": "FakeThread",
"path": "mdn.com",
"type": "directory",
},
]

314
devtools/client/debugger/src/components/PrimaryPanes/tests/__snapshots__/SourcesTreeItem.spec.js.snap
View File

@ -75,11 +75,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
"refs": Object {},
@ -127,13 +122,6 @@ Object {
"url": "http://mdn.com/one.js",
}
}
threads={
Array [
Object {
"name": "Main Thread",
},
]
}
toggleBlackBox={[MockFunction]}
/>,
"_forcedUpdate": false,
@ -210,11 +198,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
}
@ -302,11 +285,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
"refs": Object {},
@ -356,13 +334,6 @@ Object {
"url": "http://mdn.com/one.js",
}
}
threads={
Array [
Object {
"name": "Main Thread",
},
]
}
toggleBlackBox={[MockFunction]}
/>,
"_forcedUpdate": false,
@ -446,11 +417,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
}
@ -467,20 +433,8 @@ Object {
<span
className="img no-arrow"
/>
<Connect(SourceIcon)
source={
Object {
"id": "server1.conn13.child1/39",
"introductionType": undefined,
"introductionUrl": null,
"isBlackBoxed": false,
"isExtension": false,
"isPrettyPrinted": false,
"isWasm": false,
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
}
}
<AccessibleImage
className="globe-small"
/>
<span
className="label"
@ -533,11 +487,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
"refs": Object {},
@ -587,13 +536,6 @@ Object {
"url": "http://mdn.com/one.js",
}
}
threads={
Array [
Object {
"name": "Main Thread",
},
]
}
toggleBlackBox={[MockFunction]}
/>,
"_forcedUpdate": false,
@ -607,20 +549,8 @@ Object {
<span
className="img no-arrow"
/>
<Connect(SourceIcon)
source={
Object {
"id": "server1.conn13.child1/39",
"introductionType": undefined,
"introductionUrl": null,
"isBlackBoxed": false,
"isExtension": false,
"isPrettyPrinted": false,
"isWasm": false,
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
}
}
<AccessibleImage
className="globe-small"
/>
<span
className="label"
@ -672,11 +602,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
}
@ -694,7 +619,7 @@ Object {
className="arrow"
/>
<AccessibleImage
className="folder"
className="globe-small debuggee"
/>
<span
className="label"
@ -737,11 +662,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
"refs": Object {},
@ -781,13 +701,6 @@ Object {
"url": "http://mdn.com/one.js",
}
}
threads={
Array [
Object {
"name": "Main Thread",
},
]
}
toggleBlackBox={[MockFunction]}
/>,
"_forcedUpdate": false,
@ -802,7 +715,7 @@ Object {
className="arrow"
/>
<AccessibleImage
className="folder"
className="globe-small debuggee"
/>
<span
className="label"
@ -844,11 +757,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
}
@ -866,7 +774,7 @@ Object {
className="arrow"
/>
<AccessibleImage
className="folder"
className="globe-small debuggee"
/>
<span
className="label"
@ -910,11 +818,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
"refs": Object {},
@ -955,13 +858,6 @@ Object {
"url": "http://mdn.com/one.js",
}
}
threads={
Array [
Object {
"name": "Main Thread",
},
]
}
toggleBlackBox={[MockFunction]}
/>,
"_forcedUpdate": false,
@ -976,7 +872,7 @@ Object {
className="arrow"
/>
<AccessibleImage
className="folder"
className="globe-small debuggee"
/>
<span
className="label"
@ -1019,11 +915,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
}
@ -1033,7 +924,7 @@ exports[`SourceTreeItem renderItem should show focused item for folder with expa
Object {
"component": <div
className="node focused"
key="domain/subfolder"
key="folder/"
onClick={[Function]}
onContextMenu={[Function]}
>
@ -1041,7 +932,7 @@ Object {
className="arrow expanded"
/>
<AccessibleImage
className="globe-small"
className="folder"
/>
<span
className="label"
@ -1067,7 +958,7 @@ Object {
"item": Object {
"contents": Array [],
"name": "folder",
"path": "domain/subfolder",
"path": "folder/",
"type": "directory",
},
"projectRoot": "",
@ -1075,11 +966,6 @@ Object {
"setExpanded": [MockFunction],
"setProjectDirectoryRoot": [MockFunction],
"source": null,
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
"refs": Object {},
@ -1099,7 +985,7 @@ Object {
Object {
"contents": Array [],
"name": "folder",
"path": "domain/subfolder",
"path": "folder/",
"type": "directory",
}
}
@ -1108,13 +994,6 @@ Object {
setExpanded={[MockFunction]}
setProjectDirectoryRoot={[MockFunction]}
source={null}
threads={
Array [
Object {
"name": "Main Thread",
},
]
}
toggleBlackBox={[MockFunction]}
/>,
"_forcedUpdate": false,
@ -1129,7 +1008,7 @@ Object {
className="arrow expanded"
/>
<AccessibleImage
className="globe-small"
className="folder"
/>
<span
className="label"
@ -1154,7 +1033,7 @@ Object {
"item": Object {
"contents": Array [],
"name": "folder",
"path": "domain/subfolder",
"path": "folder/",
"type": "directory",
},
"projectRoot": "",
@ -1162,11 +1041,6 @@ Object {
"setExpanded": [MockFunction],
"setProjectDirectoryRoot": [MockFunction],
"source": null,
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
}
@ -1226,11 +1100,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
"refs": Object {},
@ -1269,13 +1138,6 @@ Object {
"url": "http://mdn.com/one.js",
}
}
threads={
Array [
Object {
"name": "Main Thread",
},
]
}
toggleBlackBox={[MockFunction]}
/>,
"_forcedUpdate": false,
@ -1331,11 +1193,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
}
@ -1345,7 +1202,7 @@ exports[`SourceTreeItem renderItem should show icon for folder with arrow 1`] =
Object {
"component": <div
className="node"
key="domain/subfolder"
key="folder/"
onClick={[Function]}
onContextMenu={[Function]}
>
@ -1377,7 +1234,7 @@ Object {
"item": Object {
"contents": Array [],
"name": "folder",
"path": "domain/subfolder",
"path": "folder/",
"type": "directory",
},
"projectRoot": "",
@ -1385,11 +1242,6 @@ Object {
"setExpanded": [MockFunction],
"setProjectDirectoryRoot": [MockFunction],
"source": null,
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
"refs": Object {},
@ -1407,7 +1259,7 @@ Object {
Object {
"contents": Array [],
"name": "folder",
"path": "domain/subfolder",
"path": "folder/",
"type": "directory",
}
}
@ -1416,13 +1268,6 @@ Object {
setExpanded={[MockFunction]}
setProjectDirectoryRoot={[MockFunction]}
source={null}
threads={
Array [
Object {
"name": "Main Thread",
},
]
}
toggleBlackBox={[MockFunction]}
/>,
"_forcedUpdate": false,
@ -1460,7 +1305,7 @@ Object {
"item": Object {
"contents": Array [],
"name": "folder",
"path": "domain/subfolder",
"path": "folder/",
"type": "directory",
},
"projectRoot": "",
@ -1468,11 +1313,6 @@ Object {
"setExpanded": [MockFunction],
"setProjectDirectoryRoot": [MockFunction],
"source": null,
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
}
@ -1482,7 +1322,7 @@ exports[`SourceTreeItem renderItem should show icon for folder with expanded arr
Object {
"component": <div
className="node"
key="domain/subfolder"
key="folder/"
onClick={[Function]}
onContextMenu={[Function]}
>
@ -1490,7 +1330,7 @@ Object {
className="arrow expanded"
/>
<AccessibleImage
className="globe-small"
className="folder"
/>
<span
className="label"
@ -1516,7 +1356,7 @@ Object {
"item": Object {
"contents": Array [],
"name": "folder",
"path": "domain/subfolder",
"path": "folder/",
"type": "directory",
},
"projectRoot": "",
@ -1524,11 +1364,6 @@ Object {
"setExpanded": [MockFunction],
"setProjectDirectoryRoot": [MockFunction],
"source": null,
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
"refs": Object {},
@ -1548,7 +1383,7 @@ Object {
Object {
"contents": Array [],
"name": "folder",
"path": "domain/subfolder",
"path": "folder/",
"type": "directory",
}
}
@ -1557,13 +1392,6 @@ Object {
setExpanded={[MockFunction]}
setProjectDirectoryRoot={[MockFunction]}
source={null}
threads={
Array [
Object {
"name": "Main Thread",
},
]
}
toggleBlackBox={[MockFunction]}
/>,
"_forcedUpdate": false,
@ -1578,7 +1406,7 @@ Object {
className="arrow expanded"
/>
<AccessibleImage
className="globe-small"
className="folder"
/>
<span
className="label"
@ -1603,7 +1431,7 @@ Object {
"item": Object {
"contents": Array [],
"name": "folder",
"path": "domain/subfolder",
"path": "folder/",
"type": "directory",
},
"projectRoot": "",
@ -1611,11 +1439,6 @@ Object {
"setExpanded": [MockFunction],
"setProjectDirectoryRoot": [MockFunction],
"source": null,
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
}
@ -1633,7 +1456,7 @@ Object {
className="arrow"
/>
<AccessibleImage
className="folder"
className="extension"
/>
<span
className="label"
@ -1676,11 +1499,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
"refs": Object {},
@ -1720,13 +1538,6 @@ Object {
"url": "http://mdn.com/one.js",
}
}
threads={
Array [
Object {
"name": "Main Thread",
},
]
}
toggleBlackBox={[MockFunction]}
/>,
"_forcedUpdate": false,
@ -1741,7 +1552,7 @@ Object {
className="arrow"
/>
<AccessibleImage
className="folder"
className="extension"
/>
<span
className="label"
@ -1783,11 +1594,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
}
@ -1847,11 +1653,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
"refs": Object {},
@ -1890,13 +1691,6 @@ Object {
"url": "http://mdn.com/one.js",
}
}
threads={
Array [
Object {
"name": "Main Thread",
},
]
}
toggleBlackBox={[MockFunction]}
/>,
"_forcedUpdate": false,
@ -1952,11 +1746,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
}
@ -2038,11 +1827,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
"refs": Object {},
@ -2091,13 +1875,6 @@ Object {
"url": "http://mdn.com/one.js",
}
}
threads={
Array [
Object {
"name": "Main Thread",
},
]
}
toggleBlackBox={[MockFunction]}
/>,
"_forcedUpdate": false,
@ -2175,11 +1952,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
}
@ -2262,11 +2034,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
"refs": Object {},
@ -2316,13 +2083,6 @@ Object {
"url": "http://mdn.com/one.js",
}
}
threads={
Array [
Object {
"name": "Main Thread",
},
]
}
toggleBlackBox={[MockFunction]}
/>,
"_forcedUpdate": false,
@ -2401,11 +2161,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
}
@ -2487,11 +2242,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
"refs": Object {},
@ -2540,13 +2290,6 @@ Object {
"url": "http://mdn.com/one.js",
}
}
threads={
Array [
Object {
"name": "Main Thread",
},
]
}
toggleBlackBox={[MockFunction]}
/>,
"_forcedUpdate": false,
@ -2624,11 +2367,6 @@ Object {
"relativeUrl": "http://mdn.com/one.js",
"url": "http://mdn.com/one.js",
},
"threads": Array [
Object {
"name": "Main Thread",
},
],
"toggleBlackBox": [MockFunction],
},
}

3
devtools/client/debugger/src/components/QuickOpenModal.js
View File

@ -430,12 +430,11 @@ export class QuickOpenModal extends Component<Props, State> {
/* istanbul ignore next: ignoring testing of redux connection stuff */
function mapStateToProps(state) {
const selectedSource = getSelectedSource(state);
const displayedSources = getDisplayedSourcesList(state);
return {
cx: getContext(state),
enabled: getQuickOpenEnabled(state),
sources: formatSources(displayedSources, getTabs(state)),
sources: formatSources(getDisplayedSourcesList(state), getTabs(state)),
selectedSource,
selectedContentLoaded: selectedSource
? !!getSourceContent(state, selectedSource.id)

2
devtools/client/debugger/src/components/SecondaryPanes/Worker.js
View File

@ -44,7 +44,7 @@ export class Worker extends Component<Props> {
onClick={this.onSelectThread}
>
<div className="icon">
<AccessibleImage className={worker ? "worker" : "window"} />
<AccessibleImage className={worker ? "worker" : "file"} />
</div>
<div className="label">{label}</div>
{isPaused ? (

5
devtools/client/debugger/src/components/shared/AccessibleImage.css
View File

@ -80,11 +80,6 @@ html[dir="rtl"] .img.arrow {
mask-size: 12px 12px;
}
.img.window {
mask-image: url(resource://devtools/client/debugger/images/window.svg);
mask-size: 12px 12px;
}
.img.file {
mask-image: url(resource://devtools/client/debugger/images/file-small.svg);
mask-size: 12px 12px;

37
devtools/client/debugger/src/reducers/debuggee.js
View File

@ -10,12 +10,9 @@
*/
import { sortBy } from "lodash";
import { createSelector } from "reselect";
import { getDisplayName } from "../utils/workers";
import type { Selector } from "./types";
import type { MainThread, WorkerList, Thread } from "../types";
import type { MainThread, WorkerList } from "../types";
import type { Action } from "../actions/types";
export type DebuggeeState = {
@ -24,10 +21,7 @@ export type DebuggeeState = {
};
export function initialDebuggeeState(): DebuggeeState {
return {
workers: [],
mainThread: { actor: "", url: "", type: -1, name: "" }
};
return { workers: [], mainThread: { actor: "", url: "", type: -1 } };
}
export default function debuggee(
@ -38,10 +32,13 @@ export default function debuggee(
case "CONNECT":
return {
...state,
mainThread: { ...action.mainThread, name: L10N.getStr("mainThread") }
mainThread: action.mainThread
};
case "INSERT_WORKERS":
return insertWorkers(state, action.workers);
return {
...state,
workers: [...state.workers, ...action.workers]
};
case "REMOVE_WORKERS":
const { workers } = action;
return {
@ -58,18 +55,6 @@ export default function debuggee(
}
}
function insertWorkers(state, workers) {
const formatedWorkers = workers.map(worker => ({
...worker,
name: getDisplayName(worker)
}));
return {
...state,
workers: [...state.workers, ...formatedWorkers]
};
}
export const getWorkers = (state: OuterState) => state.debuggee.workers;
export const getWorkerCount = (state: OuterState) => getWorkers(state).length;
@ -86,10 +71,8 @@ export function getDebuggeeUrl(state: OuterState): string {
return getMainThread(state).url;
}
export const getThreads: Selector<Thread[]> = createSelector(
getMainThread,
getWorkers,
(mainThread, workers) => [mainThread, ...sortBy(workers, getDisplayName)]
);
export function getThreads(state: OuterState) {
return [getMainThread(state), ...sortBy(getWorkers(state), getDisplayName)];
}
type OuterState = { debuggee: DebuggeeState };

21
devtools/client/debugger/src/reducers/source-tree.js
View File

@ -9,17 +9,15 @@
* @module reducers/source-tree
*/
import type { SourceTreeAction, FocusItem } from "../actions/types";
import type { SourceTreeAction } from "../actions/types";
export type SourceTreeState = {
expanded: Set<string>,
focusedItem: ?FocusItem
expanded: { [string]: Set<string> }
};
export function InitialState(): SourceTreeState {
return {
expanded: new Set(),
focusedItem: null
expanded: {}
};
}
@ -30,9 +28,6 @@ export default function update(
switch (action.type) {
case "SET_EXPANDED_STATE":
return updateExpanded(state, action);
case "SET_FOCUSED_SOURCE_ITEM":
return { ...state, focusedItem: action.item };
}
return state;
@ -41,7 +36,7 @@ export default function update(
function updateExpanded(state, action) {
return {
...state,
expanded: new Set(action.expanded)
expanded: { ...state.expanded, [action.thread]: new Set(action.expanded) }
};
}
@ -49,10 +44,6 @@ type OuterState = {
sourceTree: SourceTreeState
};
export function getExpandedState(state: OuterState) {
return state.sourceTree.expanded;
}
export function getFocusedSourceItem(state: OuterState): ?FocusItem {
return state.sourceTree.focusedItem;
export function getExpandedState(state: OuterState, thread: string) {
return state.sourceTree.expanded[thread];
}

17
devtools/client/debugger/src/reducers/sources.js
View File

@ -68,9 +68,8 @@ export type SourcesMap = { [SourceId]: Source };
type SourcesContentMap = {
[SourceId]: AsyncValue<SourceContent> | null
};
export type SourcesMapByThread = { [ThreadId]: SourcesMap };
export type BreakpointPositionsMap = { [SourceId]: BreakpointPositions };
export type SourcesMapByThread = { [ThreadId]: SourcesMap };
type SourceActorMap = { [SourceId]: Array<SourceActorId> };
type UrlsMap = { [string]: SourceId[] };
@ -853,10 +852,9 @@ const getDisplayedSourceIDs: GetDisplayedSourceIDsSelector = createSelector(
return sourceIDsByThread;
}
);
type GetDisplayedSourcesSelector = (
OuterState & SourceActorOuterState
) => SourcesMapByThread;
) => { [ThreadId]: { [SourceId]: Source } };
export const getDisplayedSources: GetDisplayedSourcesSelector = createSelector(
state => state.sources.sources,
getDisplayedSourceIDs,
@ -876,6 +874,17 @@ export const getDisplayedSources: GetDisplayedSourcesSelector = createSelector(
}
);
export function getDisplayedSourcesForThread(
state: OuterState & SourceActorOuterState,
thread: string
): SourcesMap {
return getDisplayedSources(state)[thread] || {};
}
export function getFocusedSourceItem(state: OuterState): ?FocusItem {
return state.sources.focusedItem;
}
export function getSourceActorsForSource(
state: OuterState & SourceActorOuterState,
id: SourceId

12
devtools/client/debugger/src/reducers/tests/sources.spec.js
View File

@ -81,6 +81,7 @@ describe("sources selectors", () => {
sources: update(state, {
type: "ADD_SOURCES",
cx: mockcx,
// coercing to a Source for the purpose of this test
sources: ((mockedSources: any): Source[])
}),
sourceActors: undefined
@ -93,8 +94,9 @@ describe("sources selectors", () => {
sources: update(state.sources, insertAction),
sourceActors: updateSourceActors(state.sourceActors, insertAction)
};
const threadSources = getDisplayedSources(state);
expect(Object.values(threadSources.foo)).toHaveLength(3);
const selectedDisplayedSources = getDisplayedSources(state);
const threadSources = selectedDisplayedSources.foo;
expect(Object.values(threadSources)).toHaveLength(3);
});
it("should omit all extensions when chrome preference enabled", () => {
@ -104,6 +106,7 @@ describe("sources selectors", () => {
sources: update(state, {
type: "ADD_SOURCES",
cx: mockcx,
// coercing to a Source for the purpose of this test
sources: ((mockedSources: any): Source[])
}),
sourceActors: undefined
@ -118,7 +121,8 @@ describe("sources selectors", () => {
sources: update(state.sources, insertAction),
sourceActors: updateSourceActors(state.sourceActors, insertAction)
};
const threadSources = getDisplayedSources(state);
expect(Object.values(threadSources.foo)).toHaveLength(1);
const selectedDisplayedSources = getDisplayedSources(state);
const threadSources = selectedDisplayedSources.foo;
expect(Object.values(threadSources)).toHaveLength(1);
});
});

6
devtools/client/debugger/src/types.js
View File

@ -447,15 +447,13 @@ export type Scope = {|
export type MainThread = {
+actor: ThreadId,
+url: string,
+type: number,
+name: string
+type: number
};
export type Worker = {
+actor: ThreadId,
+url: string,
+type: number,
+name: string
+type: number
};
export type Thread = MainThread & Worker;

2
devtools/client/debugger/src/utils/source.js
View File

@ -491,7 +491,7 @@ export function getSourceQueryString(source: ?Source) {
}
export function isUrlExtension(url: string) {
return /\/?(chrome|moz)-extension:\//.test(url);
return /^(chrome|moz)-extension:\//.test(url);
}
export function getPlainUrl(url: string): string {

21
devtools/client/debugger/src/utils/sources-tree/addToTree.js
View File

@ -90,25 +90,15 @@ function traverseTree(
url: ParsedURL,
tree: TreeDirectory,
debuggeeHost: ?string,
source: Source,
thread: string
source: Source
): TreeNode {
const parts = url.path.split("/").filter(p => p !== "");
parts.unshift(url.group);
if (thread) {
parts.unshift(thread);
}
let path = "";
return parts.reduce((subTree, part, index) => {
if (index == 0 && thread) {
path = thread;
} else {
path = `${path}/${part}`;
}
const debuggeeHostIfRoot = index === 1 ? debuggeeHost : null;
path = path ? `${path}/${part}` : part;
const debuggeeHostIfRoot = index === 0 ? debuggeeHost : null;
return findOrCreateNode(
parts,
subTree,
@ -175,8 +165,7 @@ function addSourceToNode(
export function addToTree(
tree: TreeDirectory,
source: Source,
debuggeeHost: ?string,
thread: string
debuggeeHost: ?string
) {
const url = getURL(source, debuggeeHost);
@ -184,7 +173,7 @@ export function addToTree(
return;
}
const finalNode = traverseTree(url, tree, debuggeeHost, source, thread);
const finalNode = traverseTree(url, tree, debuggeeHost, source);
// $FlowIgnore
finalNode.contents = addSourceToNode(finalNode, url, source);

5
devtools/client/debugger/src/utils/sources-tree/collapseTree.js
View File

@ -18,9 +18,8 @@ function _collapseTree(node: TreeNode, depth: number): TreeNode {
console.log(`Expected array at: ${node.path}`);
}
// Node is not a (1) thread and (2) root/domain node,
// and only contains 1 item.
if (depth > 2 && node.contents.length === 1) {
// Node is not a root/domain node, and only contains 1 item.
if (depth > 1 && node.contents.length === 1) {
const next = node.contents[0];
// Do not collapse if the next node is a leaf node.
if (next.type === "directory") {

36
devtools/client/debugger/src/utils/sources-tree/createTree.js Normal file
View File

@ -0,0 +1,36 @@
/* 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 { addToTree } from "./addToTree";
import { collapseTree } from "./collapseTree";
import { createDirectoryNode, createParentMap } from "./utils";
import { getDomain } from "./treeOrder";
import type { SourcesMap } from "../../reducers/types";
import type { TreeDirectory } from "./types";
type Params = {
sources: SourcesMap,
debuggeeUrl: string
};
export function createTree({ sources, debuggeeUrl }: Params) {
const uncollapsedTree = createDirectoryNode("root", "", []);
const debuggeeHost = getDomain(debuggeeUrl);
for (const sourceId in sources) {
const source = sources[sourceId];
addToTree(uncollapsedTree, source, debuggeeHost);
}
const sourceTree = collapseTree((uncollapsedTree: TreeDirectory));
return {
uncollapsedTree,
sourceTree,
parentMap: createParentMap(sourceTree)
};
}

5
devtools/client/debugger/src/utils/sources-tree/index.js
View File

@ -11,10 +11,11 @@
export { addToTree } from "./addToTree";
export { collapseTree } from "./collapseTree";
export { createTree } from "./createTree";
export { formatTree } from "./formatTree";
export { getDirectories } from "./getDirectories";
export { getFilenameFromPath, getURL } from "./getURL";
export { sortTree } from "./sortTree";
export { createTree, updateTree } from "./updateTree";
export { sortEntireTree, sortTree } from "./sortTree";
export { updateTree } from "./updateTree";
export * from "./utils";

1
devtools/client/debugger/src/utils/sources-tree/moz.build
View File

@ -10,6 +10,7 @@ DIRS += [
CompiledModules(
'addToTree.js',
'collapseTree.js',
'createTree.js',
'formatTree.js',
'getDirectories.js',
'getURL.js',

19
devtools/client/debugger/src/utils/sources-tree/sortTree.js
View File

@ -8,6 +8,25 @@ import { nodeHasChildren, isExactUrlMatch } from "./utils";
import type { TreeDirectory } from "./types";
/**
* Look at the nodes in the source tree, and determine the index of where to
* insert a new node. The ordering is index -> folder -> file.
* @memberof utils/sources-tree
* @static
*/
export function sortEntireTree(
tree: TreeDirectory,
debuggeeUrl: string = ""
): TreeDirectory {
if (nodeHasChildren(tree)) {
const contents = sortTree(tree, debuggeeUrl).map((subtree: any) =>
sortEntireTree(subtree)
);
return { ...tree, contents };
}
return tree;
}
/**
* Look at the nodes in the source tree, and determine the index of where to
* insert a new node. The ordering is index -> folder -> file.

75
devtools/client/debugger/src/utils/sources-tree/tests/__snapshots__/addToTree.spec.js.snap
View File

@ -2,90 +2,77 @@
exports[`sources-tree addToTree can add a file to an intermediate directory 1`] = `
" - root path=
- FakeThread path=FakeThread
- unpkg.com path=FakeThread/unpkg.com
- codemirror@5.1 path=FakeThread/unpkg.com/codemirror@5.1
- mode path=FakeThread/unpkg.com/codemirror@5.1/mode
- xml path=FakeThread/unpkg.com/codemirror@5.1/mode/xml
- xml.js path=FakeThread/unpkg.com/codemirror@5.1/mode/xml/xml.js source_id=server1.conn13.child1/39
- codemirror@5.1 path=FakeThread/unpkg.com/codemirror@5.1 source_id=server1.conn13.child1/37
- unpkg.com path=unpkg.com
- codemirror@5.1 path=unpkg.com/codemirror@5.1
- mode path=unpkg.com/codemirror@5.1/mode
- xml path=unpkg.com/codemirror@5.1/mode/xml
- xml.js path=unpkg.com/codemirror@5.1/mode/xml/xml.js source_id=server1.conn13.child1/39
- codemirror@5.1 path=unpkg.com/codemirror@5.1 source_id=server1.conn13.child1/37
"
`;
exports[`sources-tree addToTree correctly parses file sources 1`] = `
" - root path=
- FakeThread path=FakeThread
- file:// path=FakeThread/file://
- a path=FakeThread/file:///a
- b.js path=FakeThread/file:///a/b.js source_id=actor1
- file:// path=file://
- a path=file:///a
- b.js path=file:///a/b.js source_id=actor1
"
`;
exports[`sources-tree addToTree does not attempt to add two of the same directory 1`] = `
" - root path=
- FakeThread path=FakeThread
- davidwalsh.name path=FakeThread/davidwalsh.name
- (index) path=https://davidwalsh.name/ source_id=server1.conn13.child1/37
- wp-content path=FakeThread/davidwalsh.name/wp-content
- prism.js path=FakeThread/davidwalsh.name/wp-content/prism.js source_id=server1.conn13.child1/39
- davidwalsh.name path=davidwalsh.name
- (index) path=https://davidwalsh.name/ source_id=server1.conn13.child1/37
- wp-content path=davidwalsh.name/wp-content
- prism.js path=davidwalsh.name/wp-content/prism.js source_id=server1.conn13.child1/39
"
`;
exports[`sources-tree addToTree does not attempt to add two of the same file 1`] = `
" - root path=
- FakeThread path=FakeThread
- davidwalsh.name path=FakeThread/davidwalsh.name
- (index) path=https://davidwalsh.name/ source_id=server1.conn13.child1/39
- util.js path=FakeThread/davidwalsh.name/util.js source_id=server1.conn13.child1/37
- FakeThread2 path=FakeThread2
- davidwalsh.name path=FakeThread2/davidwalsh.name
- util.js path=FakeThread2/davidwalsh.name/util.js source_id=server1.conn13.child1/37
- davidwalsh.name path=davidwalsh.name
- (index) path=https://davidwalsh.name/ source_id=server1.conn13.child1/37
"
`;
exports[`sources-tree addToTree does not mangle encoded URLs 1`] = `
" - root path=
- FakeThread path=FakeThread
- example.com path=FakeThread/example.com
- foo path=FakeThread/example.com/foo
- B9724220.131821496;dc_ver=42.111;sz=468x60;u_sd=2;dc_adk=2020465299;ord=a53rpc;dc_rfl=1,https%3A%2F%2Fdavidwalsh.name%2F$0;xdt=1 path=FakeThread/example.com/foo/B9724220.131821496;dc_ver=42.111;sz=468x60;u_sd=2;dc_adk=2020465299;ord=a53rpc;dc_rfl=1,https%3A%2F%2Fdavidwalsh.name%2F$0;xdt=1 source_id=actor1
- example.com path=example.com
- foo path=example.com/foo
- B9724220.131821496;dc_ver=42.111;sz=468x60;u_sd=2;dc_adk=2020465299;ord=a53rpc;dc_rfl=1,https%3A%2F%2Fdavidwalsh.name%2F$0;xdt=1 path=example.com/foo/B9724220.131821496;dc_ver=42.111;sz=468x60;u_sd=2;dc_adk=2020465299;ord=a53rpc;dc_rfl=1,https%3A%2F%2Fdavidwalsh.name%2F$0;xdt=1 source_id=actor1
"
`;
exports[`sources-tree addToTree excludes javascript: URLs from the tree 1`] = `
" - root path=
- FakeThread path=FakeThread
- example.com path=FakeThread/example.com
- source1.js path=FakeThread/example.com/source1.js source_id=actor2
- example.com path=example.com
- source1.js path=example.com/source1.js source_id=actor2
"
`;
exports[`sources-tree addToTree name does not include query params 1`] = `
" - root path=
- FakeThread path=FakeThread
- example.com path=FakeThread/example.com
- foo path=FakeThread/example.com/foo
- name.js path=FakeThread/example.com/foo/name.js source_id=actor1
- example.com path=example.com
- foo path=example.com/foo
- name.js path=example.com/foo/name.js source_id=actor1
"
`;
exports[`sources-tree addToTree replaces a file with a directory 1`] = `
" - root path=
- FakeThread path=FakeThread
- unpkg.com path=FakeThread/unpkg.com
- codemirror@5.1 path=FakeThread/unpkg.com/codemirror@5.1
- mode path=FakeThread/unpkg.com/codemirror@5.1/mode
- xml path=FakeThread/unpkg.com/codemirror@5.1/mode/xml
- xml.js path=FakeThread/unpkg.com/codemirror@5.1/mode/xml/xml.js source_id=server1.conn13.child1/39
- codemirror@5.1 path=FakeThread/unpkg.com/codemirror@5.1 source_id=server1.conn13.child1/37
- unpkg.com path=unpkg.com
- codemirror@5.1 path=unpkg.com/codemirror@5.1
- mode path=unpkg.com/codemirror@5.1/mode
- xml path=unpkg.com/codemirror@5.1/mode/xml
- xml.js path=unpkg.com/codemirror@5.1/mode/xml/xml.js source_id=server1.conn13.child1/39
- codemirror@5.1 path=unpkg.com/codemirror@5.1 source_id=server1.conn13.child1/37
"
`;
exports[`sources-tree addToTree supports data URLs 1`] = `
" - root path=
- FakeThread path=FakeThread
- (no domain) path=FakeThread/(no domain)
- data:text/html,<script>console.log(123)</script> path=data:text/html,<script>console.log(123)</script> source_id=server1.conn13.child1/39
- (no domain) path=(no domain)
- data:text/html,<script>console.log(123)</script> path=data:text/html,<script>console.log(123)</script> source_id=server1.conn13.child1/39
"
`;

38
devtools/client/debugger/src/utils/sources-tree/tests/__snapshots__/collapseTree.spec.js.snap
View File

@ -2,41 +2,37 @@
exports[`sources tree collapseTree can collapse a single source 1`] = `
" - root path=
- Main Thread path=Main Thread
- example.com path=Main Thread/example.com
- a/b path=Main Thread/example.com/a/b
- c.js path=Main Thread/example.com/a/b/c.js source_id=actor1
- example.com path=example.com
- a/b path=example.com/a/b
- c.js path=example.com/a/b/c.js source_id=actor1
"
`;
exports[`sources tree collapseTree correctly merges in a collapsed source with a deeper level 1`] = `
" - root path=
- Main Thread path=Main Thread
- example.com path=Main Thread/example.com
- a/b path=Main Thread/example.com/a/b
- c/d path=Main Thread/example.com/a/b/c/d
- e.js path=Main Thread/example.com/a/b/c/d/e.js source_id=actor2
- c.js path=Main Thread/example.com/a/b/c.js source_id=actor1
- example.com path=example.com
- a/b path=example.com/a/b
- c/d path=example.com/a/b/c/d
- e.js path=example.com/a/b/c/d/e.js source_id=actor2
- c.js path=example.com/a/b/c.js source_id=actor1
"
`;
exports[`sources tree collapseTree correctly merges in a collapsed source with a shallower level 1`] = `
" - root path=
- Main Thread path=Main Thread
- example.com path=Main Thread/example.com
- a/b path=Main Thread/example.com/a/b
- c.js path=Main Thread/example.com/a/b/c.js source_id=actor1
- x.js path=Main Thread/example.com/a/b/x.js source_id=actor3
- example.com path=example.com
- a/b path=example.com/a/b
- c.js path=example.com/a/b/c.js source_id=actor1
- x.js path=example.com/a/b/x.js source_id=actor3
"
`;
exports[`sources tree collapseTree correctly merges in a collapsed source with the same level 1`] = `
" - root path=
- Main Thread path=Main Thread
- example.com path=Main Thread/example.com
- a/b path=Main Thread/example.com/a/b
- c/d path=Main Thread/example.com/a/b/c/d
- e.js path=Main Thread/example.com/a/b/c/d/e.js source_id=actor2
- c.js path=Main Thread/example.com/a/b/c.js source_id=actor1
- example.com path=example.com
- a/b path=example.com/a/b
- c/d path=example.com/a/b/c/d
- e.js path=example.com/a/b/c/d/e.js source_id=actor2
- c.js path=example.com/a/b/c.js source_id=actor1
"
`;

73
devtools/client/debugger/src/utils/sources-tree/tests/__snapshots__/sortTree.spec.js.snap Normal file
View File

@ -0,0 +1,73 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`sources-tree sortEntireTree alphabetically sorts children 1`] = `
" - root path=
- example.com path=example.com
- foo path=example.com/foo
- a_source3.js path=example.com/foo/a_source3.js source_id=actor3
- b_source2.js path=example.com/foo/b_source2.js source_id=actor2
- source1.js path=example.com/source1.js source_id=actor1
"
`;
exports[`sources-tree sortEntireTree puts folder at the top of the sort 1`] = `
" - root path=
- example.com path=example.com
- folder path=example.com/folder
- b path=example.com/folder/b
- b.js path=example.com/folder/b/b.js source_id=actor2
- c path=example.com/folder/c
- (index) path=http://example.com/folder/c/ source_id=actor3
- a.js path=example.com/folder/a.js source_id=actor1
"
`;
exports[`sources-tree sortEntireTree puts root debugee url at the top of the sort 1`] = `
" - root path=
- example.com path=example.com
- b.js path=example.com/b.js source_id=actor2
- api.example.com path=api.example.com
- a.js path=api.example.com/a.js source_id=actor1
- demo.com path=demo.com
- c.js path=demo.com/c.js source_id=actor3
"
`;
exports[`sources-tree sortEntireTree puts root debugee url at the top of the sort 2`] = `
" - root path=
- demo.com path=demo.com
- c.js path=demo.com/c.js source_id=actor3
- api.example.com path=api.example.com
- a.js path=api.example.com/a.js source_id=actor1
- example.com path=example.com
- b.js path=example.com/b.js source_id=actor2
"
`;
exports[`sources-tree sortEntireTree sorts folders first 1`] = `
" - root path=
- example.com path=example.com
- (index) path=http://example.com source_id=actor4
- b.js path=example.com/b.js
- b_source.js path=example.com/b.js/b_source.js source_id=actor2
- d path=example.com/d
- d_source.js path=example.com/d/d_source.js source_id=actor5
- a.js path=example.com/a.js source_id=actor1
- b2 path=example.com/b2 source_id=actor6
- c.js path=example.com/c.js source_id=actor3
"
`;
exports[`sources-tree sortEntireTree sorts folders first 2`] = `
" - root path=
- example.com path=example.com
- (index) path=http://example.com source_id=actor4
- b.js path=example.com/b.js
- b_source.js path=example.com/b.js/b_source.js source_id=actor2
- d path=example.com/d
- d_source.js path=example.com/d/d_source.js source_id=actor5
- a.js path=example.com/a.js source_id=actor1
- b2 path=example.com/b2 source_id=actor6
- c.js path=example.com/c.js source_id=actor3
"
`;

216
devtools/client/debugger/src/utils/sources-tree/tests/__snapshots__/updateTree.spec.js.snap
View File

@ -8,45 +8,38 @@ exports[`calls updateTree.js adds one source 1`] = `
\\"contents\\": [
{
\\"type\\": \\"directory\\",
\\"name\\": \\"FakeThread\\",
\\"path\\": \\"FakeThread\\",
\\"name\\": \\"davidwalsh.name\\",
\\"path\\": \\"davidwalsh.name\\",
\\"contents\\": [
{
\\"type\\": \\"directory\\",
\\"name\\": \\"davidwalsh.name\\",
\\"path\\": \\"FakeThread/davidwalsh.name\\",
\\"contents\\": [
{
\\"type\\": \\"source\\",
\\"name\\": \\"(index)\\",
\\"path\\": \\"https://davidwalsh.name/\\",
\\"contents\\": {
\\"id\\": \\"server1.conn13.child1/39\\",
\\"url\\": \\"https://davidwalsh.name/\\",
\\"isBlackBoxed\\": false,
\\"isPrettyPrinted\\": false,
\\"relativeUrl\\": \\"https://davidwalsh.name/\\",
\\"introductionUrl\\": null,
\\"isWasm\\": false,
\\"isExtension\\": false
}
},
{
\\"type\\": \\"source\\",
\\"name\\": \\"source1.js\\",
\\"path\\": \\"FakeThread/davidwalsh.name/source1.js\\",
\\"contents\\": {
\\"id\\": \\"server1.conn13.child1/37\\",
\\"url\\": \\"https://davidwalsh.name/source1.js\\",
\\"isBlackBoxed\\": false,
\\"isPrettyPrinted\\": false,
\\"relativeUrl\\": \\"https://davidwalsh.name/source1.js\\",
\\"introductionUrl\\": null,
\\"isWasm\\": false,
\\"isExtension\\": false
}
}
]
\\"type\\": \\"source\\",
\\"name\\": \\"(index)\\",
\\"path\\": \\"https://davidwalsh.name/\\",
\\"contents\\": {
\\"id\\": \\"server1.conn13.child1/39\\",
\\"url\\": \\"https://davidwalsh.name/\\",
\\"isBlackBoxed\\": false,
\\"isPrettyPrinted\\": false,
\\"relativeUrl\\": \\"https://davidwalsh.name/\\",
\\"introductionUrl\\": null,
\\"isWasm\\": false,
\\"isExtension\\": false
}
},
{
\\"type\\": \\"source\\",
\\"name\\": \\"source1.js\\",
\\"path\\": \\"davidwalsh.name/source1.js\\",
\\"contents\\": {
\\"id\\": \\"server1.conn13.child1/37\\",
\\"url\\": \\"https://davidwalsh.name/source1.js\\",
\\"isBlackBoxed\\": false,
\\"isPrettyPrinted\\": false,
\\"relativeUrl\\": \\"https://davidwalsh.name/source1.js\\",
\\"introductionUrl\\": null,
\\"isWasm\\": false,
\\"isExtension\\": false
}
}
]
}
@ -62,60 +55,53 @@ exports[`calls updateTree.js adds two sources 1`] = `
\\"contents\\": [
{
\\"type\\": \\"directory\\",
\\"name\\": \\"FakeThread\\",
\\"path\\": \\"FakeThread\\",
\\"name\\": \\"davidwalsh.name\\",
\\"path\\": \\"davidwalsh.name\\",
\\"contents\\": [
{
\\"type\\": \\"directory\\",
\\"name\\": \\"davidwalsh.name\\",
\\"path\\": \\"FakeThread/davidwalsh.name\\",
\\"contents\\": [
{
\\"type\\": \\"source\\",
\\"name\\": \\"(index)\\",
\\"path\\": \\"https://davidwalsh.name/\\",
\\"contents\\": {
\\"id\\": \\"server1.conn13.child1/39\\",
\\"url\\": \\"https://davidwalsh.name/\\",
\\"isBlackBoxed\\": false,
\\"isPrettyPrinted\\": false,
\\"relativeUrl\\": \\"https://davidwalsh.name/\\",
\\"introductionUrl\\": null,
\\"isWasm\\": false,
\\"isExtension\\": false
}
},
{
\\"type\\": \\"source\\",
\\"name\\": \\"source1.js\\",
\\"path\\": \\"FakeThread/davidwalsh.name/source1.js\\",
\\"contents\\": {
\\"id\\": \\"server1.conn13.child1/37\\",
\\"url\\": \\"https://davidwalsh.name/source1.js\\",
\\"isBlackBoxed\\": false,
\\"isPrettyPrinted\\": false,
\\"relativeUrl\\": \\"https://davidwalsh.name/source1.js\\",
\\"introductionUrl\\": null,
\\"isWasm\\": false,
\\"isExtension\\": false
}
},
{
\\"type\\": \\"source\\",
\\"name\\": \\"source2.js\\",
\\"path\\": \\"FakeThread/davidwalsh.name/source2.js\\",
\\"contents\\": {
\\"id\\": \\"server1.conn13.child1/40\\",
\\"url\\": \\"https://davidwalsh.name/source2.js\\",
\\"isBlackBoxed\\": false,
\\"isPrettyPrinted\\": false,
\\"relativeUrl\\": \\"https://davidwalsh.name/source2.js\\",
\\"introductionUrl\\": null,
\\"isWasm\\": false,
\\"isExtension\\": false
}
}
]
\\"type\\": \\"source\\",
\\"name\\": \\"(index)\\",
\\"path\\": \\"https://davidwalsh.name/\\",
\\"contents\\": {
\\"id\\": \\"server1.conn13.child1/39\\",
\\"url\\": \\"https://davidwalsh.name/\\",
\\"isBlackBoxed\\": false,
\\"isPrettyPrinted\\": false,
\\"relativeUrl\\": \\"https://davidwalsh.name/\\",
\\"introductionUrl\\": null,
\\"isWasm\\": false,
\\"isExtension\\": false
}
},
{
\\"type\\": \\"source\\",
\\"name\\": \\"source1.js\\",
\\"path\\": \\"davidwalsh.name/source1.js\\",
\\"contents\\": {
\\"id\\": \\"server1.conn13.child1/37\\",
\\"url\\": \\"https://davidwalsh.name/source1.js\\",
\\"isBlackBoxed\\": false,
\\"isPrettyPrinted\\": false,
\\"relativeUrl\\": \\"https://davidwalsh.name/source1.js\\",
\\"introductionUrl\\": null,
\\"isWasm\\": false,
\\"isExtension\\": false
}
},
{
\\"type\\": \\"source\\",
\\"name\\": \\"source2.js\\",
\\"path\\": \\"davidwalsh.name/source2.js\\",
\\"contents\\": {
\\"id\\": \\"server1.conn13.child1/40\\",
\\"url\\": \\"https://davidwalsh.name/source2.js\\",
\\"isBlackBoxed\\": false,
\\"isPrettyPrinted\\": false,
\\"relativeUrl\\": \\"https://davidwalsh.name/source2.js\\",
\\"introductionUrl\\": null,
\\"isWasm\\": false,
\\"isExtension\\": false
}
}
]
}
@ -131,30 +117,38 @@ exports[`calls updateTree.js shows all the sources 1`] = `
\\"contents\\": [
{
\\"type\\": \\"directory\\",
\\"name\\": \\"FakeThread\\",
\\"path\\": \\"FakeThread\\",
\\"name\\": \\"davidwalsh.name\\",
\\"path\\": \\"davidwalsh.name\\",
\\"contents\\": [
{
\\"type\\": \\"directory\\",
\\"name\\": \\"davidwalsh.name\\",
\\"path\\": \\"FakeThread/davidwalsh.name\\",
\\"contents\\": [
{
\\"type\\": \\"source\\",
\\"name\\": \\"(index)\\",
\\"path\\": \\"https://davidwalsh.name/\\",
\\"contents\\": {
\\"id\\": \\"server1.conn13.child1/39\\",
\\"url\\": \\"https://davidwalsh.name/\\",
\\"isBlackBoxed\\": false,
\\"isPrettyPrinted\\": false,
\\"relativeUrl\\": \\"https://davidwalsh.name/\\",
\\"introductionUrl\\": null,
\\"isWasm\\": false,
\\"isExtension\\": false
}
}
]
\\"type\\": \\"source\\",
\\"name\\": \\"(index)\\",
\\"path\\": \\"https://davidwalsh.name/\\",
\\"contents\\": {
\\"id\\": \\"server1.conn13.child1/39\\",
\\"url\\": \\"https://davidwalsh.name/\\",
\\"isBlackBoxed\\": false,
\\"isPrettyPrinted\\": false,
\\"relativeUrl\\": \\"https://davidwalsh.name/\\",
\\"introductionUrl\\": null,
\\"isWasm\\": false,
\\"isExtension\\": false
}
},
{
\\"type\\": \\"source\\",
\\"name\\": \\"source1.js\\",
\\"path\\": \\"davidwalsh.name/source1.js\\",
\\"contents\\": {
\\"id\\": \\"server1.conn13.child1/37\\",
\\"url\\": \\"https://davidwalsh.name/source1.js\\",
\\"isBlackBoxed\\": false,
\\"isPrettyPrinted\\": false,
\\"relativeUrl\\": \\"https://davidwalsh.name/source1.js\\",
\\"introductionUrl\\": null,
\\"isWasm\\": false,
\\"isExtension\\": false
}
}
]
}

95
devtools/client/debugger/src/utils/sources-tree/tests/addToTree.spec.js
View File

@ -17,7 +17,7 @@ import {
nodeHasChildren
} from "../index";
type RawSource = {| url: string, id: string, actors?: any |};
type RawSource = {| url: string, id: string |};
function createSourcesMap(sources: RawSource[]) {
const sourcesMap = sources.reduce((map, source) => {
@ -63,10 +63,10 @@ describe("sources-tree", () => {
);
const tree = createDirectoryNode("root", "", []);
addToTree(tree, source1, "http://example.com/", "FakeThread");
addToTree(tree, source1, "http://example.com/");
expect(tree.contents).toHaveLength(1);
const base = tree.contents[0].contents[0];
const base = tree.contents[0];
expect(base.name).toBe("example.com");
expect(base.contents).toHaveLength(1);
@ -89,8 +89,8 @@ describe("sources-tree", () => {
const tree = createDirectoryNode("root", "", []);
addToTree(tree, source1, "http://example.com/", "FakeThread");
const childNode = getChildNode(tree, 0, 0, 0, 0);
addToTree(tree, source1, "http://example.com/");
const childNode = getChildNode(tree, 0, 0, 0);
expect(childNode.name).toEqual(sourceName);
expect(formatTree(tree)).toMatchSnapshot();
});
@ -105,7 +105,7 @@ describe("sources-tree", () => {
const tree = createDirectoryNode("root", "", []);
addToTree(tree, source1, "http://example.com/", "FakeThread");
addToTree(tree, source1, "http://example.com/");
expect(formatTree(tree)).toMatchSnapshot();
});
@ -121,22 +121,14 @@ describe("sources-tree", () => {
}
];
const sourceMap = { FakeThread: createSourcesMap(sources) };
const sourceMap = createSourcesMap(sources);
const tree = createTree({
sources: sourceMap,
debuggeeUrl: "",
threads: [
{
actor: "FakeThread",
name: "FakeThread",
url: "https://davidwalsh.name",
type: 1
}
]
projectRoot: ""
}).sourceTree;
expect(tree.contents[0].contents).toHaveLength(1);
const subtree = tree.contents[0].contents[0];
// expect(tree.contents).toHaveLength(1);
const subtree = tree.contents[0];
expect(subtree.contents).toHaveLength(2);
expect(formatTree(tree)).toMatchSnapshot();
});
@ -149,18 +141,11 @@ describe("sources-tree", () => {
}
];
const sourceMap = { FakeThread: createSourcesMap(sources) };
const sourceMap = createSourcesMap(sources);
const tree = createTree({
sources: sourceMap,
debuggeeUrl: "",
threads: [
{
actor: "FakeThread",
url: "https://davidwalsh.name",
type: 1,
name: "FakeThread"
}
]
projectRoot: ""
}).sourceTree;
expect(formatTree(tree)).toMatchSnapshot();
});
@ -173,39 +158,19 @@ describe("sources-tree", () => {
},
{
id: "server1.conn13.child1/37",
url: "https://davidwalsh.name/util.js"
url: "https://davidwalsh.name/"
}
];
const sourceMap = {
FakeThread: createSourcesMap(sources),
FakeThread2: createSourcesMap([sources[1]])
};
const sourceMap = createSourcesMap(sources);
const tree = createTree({
sources: sourceMap,
debuggeeUrl: "https://davidwalsh.name",
threads: [
{
actor: "FakeThread",
name: "FakeThread",
url: "https://davidwalsh.name",
type: 1
},
{
actor: "FakeThread2",
name: "FakeThread2",
url: "https://davidwalsh.name/WorkerA.js",
type: 2
}
]
debuggeeUrl: "",
projectRoot: ""
}).sourceTree;
expect(tree.contents[0].contents).toHaveLength(1);
const subtree = tree.contents[0].contents[0];
expect(subtree.contents).toHaveLength(2);
const subtree2 = tree.contents[1].contents[0];
expect(subtree2.contents).toHaveLength(1);
expect(tree.contents).toHaveLength(1);
const subtree = tree.contents[0];
expect(subtree.contents).toHaveLength(1);
expect(formatTree(tree)).toMatchSnapshot();
});
@ -221,11 +186,11 @@ describe("sources-tree", () => {
);
const tree = createDirectoryNode("root", "", []);
addToTree(tree, source1, "http://example.com/", "FakeThread");
addToTree(tree, source2, "http://example.com/", "FakeThread");
addToTree(tree, source3, "http://example.com/", "FakeThread");
addToTree(tree, source1, "http://example.com/");
addToTree(tree, source2, "http://example.com/");
addToTree(tree, source3, "http://example.com/");
const base = tree.contents[0].contents[0];
const base = tree.contents[0];
expect(tree.contents).toHaveLength(1);
const source1Node = base.contents[0];
@ -237,10 +202,10 @@ describe("sources-tree", () => {
const source = makeMockSource("file:///a/b.js", "actor1");
const tree = createDirectoryNode("root", "", []);
addToTree(tree, source, "file:///a/index.html", "FakeThread");
addToTree(tree, source, "file:///a/index.html");
expect(tree.contents).toHaveLength(1);
const base = tree.contents[0].contents[0];
const base = tree.contents[0];
expect(base.name).toBe("file://");
expect(base.contents).toHaveLength(1);
@ -267,9 +232,7 @@ describe("sources-tree", () => {
const sources = createSourcesList(testData);
const tree = createDirectoryNode("root", "", []);
sources.forEach(source =>
addToTree(tree, source, "https://unpkg.com/", "FakeThread")
);
sources.forEach(source => addToTree(tree, source, "https://unpkg.com/"));
expect(formatTree(tree)).toMatchSnapshot();
});
@ -288,9 +251,7 @@ describe("sources-tree", () => {
const sources = createSourcesList(testData);
const tree = createDirectoryNode("root", "", []);
sources.forEach(source =>
addToTree(tree, source, "https://unpkg.com/", "FakeThread")
);
sources.forEach(source => addToTree(tree, source, "https://unpkg.com/"));
expect(formatTree(tree)).toMatchSnapshot();
});
@ -323,7 +284,7 @@ describe("sources-tree", () => {
const domain = "http://localhost:4242";
const sources = createSourcesList(testData);
const tree = createDirectoryNode("root", "", []);
sources.forEach(source => addToTree(tree, source, domain, "FakeThread"));
sources.forEach(source => addToTree(tree, source, domain));
expect(formatTree(tree)).toMatchSnapshot();
});
});

40
devtools/client/debugger/src/utils/sources-tree/tests/collapseTree.spec.js
View File

@ -8,6 +8,7 @@ import { makeMockSource } from "../../../utils/test-mockup";
import {
collapseTree,
sortEntireTree,
formatTree,
addToTree,
createDirectoryNode
@ -21,11 +22,11 @@ describe("sources tree", () => {
describe("collapseTree", () => {
it("can collapse a single source", () => {
const fullTree = createDirectoryNode("root", "", []);
addToTree(fullTree, abcSource, "http://example.com/", "Main Thread");
addToTree(fullTree, abcSource, "http://example.com/");
expect(fullTree.contents).toHaveLength(1);
const tree = collapseTree(fullTree);
const host = tree.contents[0].contents[0];
const host = tree.contents[0];
expect(host.name).toBe("example.com");
expect(host.contents).toHaveLength(1);
@ -35,17 +36,20 @@ describe("sources tree", () => {
const abcNode = abFolder.contents[0];
expect(abcNode.name).toBe("c.js");
expect(abcNode.path).toBe("Main Thread/example.com/a/b/c.js");
expect(abcNode.path).toBe("example.com/a/b/c.js");
expect(formatTree(tree)).toMatchSnapshot();
});
it("correctly merges in a collapsed source with a deeper level", () => {
const fullTree = createDirectoryNode("root", "", []);
addToTree(fullTree, abcSource, "http://example.com/", "Main Thread");
addToTree(fullTree, abcdeSource, "http://example.com/", "Main Thread");
addToTree(fullTree, abcSource, "http://example.com/");
addToTree(fullTree, abcdeSource, "http://example.com/");
const tree = collapseTree(fullTree);
const host = tree.contents[0].contents[0];
sortEntireTree(tree);
expect(tree.contents).toHaveLength(1);
const host = tree.contents[0];
expect(host.name).toBe("example.com");
expect(host.contents).toHaveLength(1);
@ -55,24 +59,24 @@ describe("sources tree", () => {
const [cdFolder, abcNode] = abFolder.contents;
expect(abcNode.name).toBe("c.js");
expect(abcNode.path).toBe("Main Thread/example.com/a/b/c.js");
expect(abcNode.path).toBe("example.com/a/b/c.js");
expect(cdFolder.name).toBe("c/d");
const [abcdeNode] = cdFolder.contents;
expect(abcdeNode.name).toBe("e.js");
expect(abcdeNode.path).toBe("Main Thread/example.com/a/b/c/d/e.js");
expect(abcdeNode.path).toBe("example.com/a/b/c/d/e.js");
expect(formatTree(tree)).toMatchSnapshot();
});
it("correctly merges in a collapsed source with a shallower level", () => {
const fullTree = createDirectoryNode("root", "", []);
addToTree(fullTree, abcSource, "http://example.com/", "Main Thread");
addToTree(fullTree, abxSource, "http://example.com/", "Main Thread");
addToTree(fullTree, abcSource, "http://example.com/");
addToTree(fullTree, abxSource, "http://example.com/");
const tree = collapseTree(fullTree);
expect(tree.contents).toHaveLength(1);
const host = tree.contents[0].contents[0];
const host = tree.contents[0];
expect(host.name).toBe("example.com");
expect(host.contents).toHaveLength(1);
@ -82,21 +86,21 @@ describe("sources tree", () => {
const [abcNode, abxNode] = abFolder.contents;
expect(abcNode.name).toBe("c.js");
expect(abcNode.path).toBe("Main Thread/example.com/a/b/c.js");
expect(abcNode.path).toBe("example.com/a/b/c.js");
expect(abxNode.name).toBe("x.js");
expect(abxNode.path).toBe("Main Thread/example.com/a/b/x.js");
expect(abxNode.path).toBe("example.com/a/b/x.js");
expect(formatTree(tree)).toMatchSnapshot();
});
it("correctly merges in a collapsed source with the same level", () => {
const fullTree = createDirectoryNode("root", "", []);
addToTree(fullTree, abcdeSource, "http://example.com/", "Main Thread");
addToTree(fullTree, abcSource, "http://example.com/", "Main Thread");
addToTree(fullTree, abcdeSource, "http://example.com/");
addToTree(fullTree, abcSource, "http://example.com/");
const tree = collapseTree(fullTree);
expect(tree.contents).toHaveLength(1);
const host = tree.contents[0].contents[0];
const host = tree.contents[0];
expect(host.name).toBe("example.com");
expect(host.contents).toHaveLength(1);
@ -106,12 +110,12 @@ describe("sources tree", () => {
const [cdFolder, abcNode] = abFolder.contents;
expect(abcNode.name).toBe("c.js");
expect(abcNode.path).toBe("Main Thread/example.com/a/b/c.js");
expect(abcNode.path).toBe("example.com/a/b/c.js");
expect(cdFolder.name).toBe("c/d");
const [abcdeNode] = cdFolder.contents;
expect(abcdeNode.name).toBe("e.js");
expect(abcdeNode.path).toBe("Main Thread/example.com/a/b/c/d/e.js");
expect(abcdeNode.path).toBe("example.com/a/b/c/d/e.js");
expect(formatTree(tree)).toMatchSnapshot();
});
});

42
devtools/client/debugger/src/utils/sources-tree/tests/getDirectories.spec.js
View File

@ -14,13 +14,11 @@ function formatDirectories(source, tree) {
}
function createSources(urls) {
return {
FakeThread: urls.reduce((sources, url, index) => {
const id = `a${index}`;
sources[id] = makeMockSource(url, id);
return sources;
}, {})
};
return urls.reduce((sources, url, index) => {
const id = `a${index}`;
sources[id] = makeMockSource(url, id);
return sources;
}, {});
}
describe("getDirectories", () => {
@ -31,36 +29,14 @@ describe("getDirectories", () => {
"http://b/c.js"
]);
const threads = [
{
actor: "FakeThread",
url: "http://a",
type: 1,
name: "FakeThread"
}
];
const debuggeeUrl = "http://a/";
const { sourceTree } = createTree({
sources,
debuggeeUrl,
threads
projectRoot: ""
});
expect(formatDirectories(sources.FakeThread.a0, sourceTree)).toEqual([
"FakeThread/a/b.js",
"FakeThread/a",
"FakeThread"
]);
expect(formatDirectories(sources.FakeThread.a1, sourceTree)).toEqual([
"FakeThread/a/c.js",
"FakeThread/a",
"FakeThread"
]);
expect(formatDirectories(sources.FakeThread.a2, sourceTree)).toEqual([
"FakeThread/b/c.js",
"FakeThread/b",
"FakeThread"
]);
expect(formatDirectories(sources.a0, sourceTree)).toEqual(["a/b.js", "a"]);
expect(formatDirectories(sources.a1, sourceTree)).toEqual(["a/c.js", "a"]);
expect(formatDirectories(sources.a2, sourceTree)).toEqual(["b/c.js", "b"]);
});
});

153
devtools/client/debugger/src/utils/sources-tree/tests/sortTree.spec.js Normal file
View File

@ -0,0 +1,153 @@
/* eslint max-nested-callbacks: ["error", 4]*/
/* 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 { makeMockSource } from "../../../utils/test-mockup";
import {
addToTree,
sortEntireTree,
createDirectoryNode,
formatTree
} from "../index";
describe("sources-tree", () => {
describe("sortEntireTree", () => {
it("alphabetically sorts children", () => {
const source1 = makeMockSource("http://example.com/source1.js", "actor1");
const source2 = makeMockSource(
"http://example.com/foo/b_source2.js",
"actor2"
);
const source3 = makeMockSource(
"http://example.com/foo/a_source3.js",
"actor3"
);
const _tree = createDirectoryNode("root", "", []);
addToTree(_tree, source1, "http://example.com/");
addToTree(_tree, source2, "http://example.com/");
addToTree(_tree, source3, "http://example.com/");
const tree = sortEntireTree(_tree);
const base = tree.contents[0];
const fooNode = base.contents[0];
expect(fooNode.name).toBe("foo");
expect(fooNode.contents).toHaveLength(2);
const source1Node = base.contents[1];
expect(source1Node.name).toBe("source1.js");
// source2 should be after source1 alphabetically
const source2Node = fooNode.contents[1];
const source3Node = fooNode.contents[0];
expect(source2Node.name).toBe("b_source2.js");
expect(source3Node.name).toBe("a_source3.js");
expect(formatTree(tree)).toMatchSnapshot();
});
it("sorts folders first", () => {
const sources = [
makeMockSource("http://example.com/a.js", "actor1"),
makeMockSource("http://example.com/b.js/b_source.js", "actor2"),
makeMockSource("http://example.com/c.js", "actor3"),
makeMockSource("http://example.com", "actor4"),
makeMockSource("http://example.com/d/d_source.js", "actor5"),
makeMockSource("http://example.com/b2", "actor6")
];
const _tree = createDirectoryNode("root", "", []);
sources.forEach(source =>
addToTree(_tree, source, "http://example.com/")
);
const tree = sortEntireTree(_tree);
const domain = tree.contents[0];
const [
indexNode,
bFolderNode,
dFolderNode,
aFileNode,
b2FileNode,
cFileNode
] = domain.contents;
expect(formatTree(tree)).toMatchSnapshot();
expect(indexNode.name).toBe("(index)");
expect(bFolderNode.name).toBe("b.js");
expect(bFolderNode.contents).toHaveLength(1);
expect(bFolderNode.contents[0].name).toBe("b_source.js");
expect(b2FileNode.name).toBe("b2");
expect(dFolderNode.name).toBe("d");
expect(dFolderNode.contents).toHaveLength(1);
expect(dFolderNode.contents[0].name).toBe("d_source.js");
expect(aFileNode.name).toBe("a.js");
expect(cFileNode.name).toBe("c.js");
expect(formatTree(tree)).toMatchSnapshot();
});
it("puts folder at the top of the sort", () => {
const sources = [
makeMockSource("http://example.com/folder/a.js", "actor1"),
makeMockSource("http://example.com/folder/b/b.js", "actor2"),
makeMockSource("http://example.com/folder/c/", "actor3")
];
const _tree = createDirectoryNode("root", "", []);
sources.forEach(source =>
addToTree(_tree, source, "http://example.com/")
);
const tree = sortEntireTree(_tree);
const [
bFolderNode,
cFolderNode,
aFileNode
] = tree.contents[0].contents[0].contents;
expect(bFolderNode.name).toBe("b");
expect(bFolderNode.contents).toHaveLength(1);
expect(bFolderNode.contents[0].name).toBe("b.js");
expect(cFolderNode.name).toBe("c");
expect(cFolderNode.contents).toHaveLength(1);
expect(cFolderNode.contents[0].name).toBe("(index)");
expect(aFileNode.name).toBe("a.js");
expect(formatTree(tree)).toMatchSnapshot();
});
it("puts root debugee url at the top of the sort", () => {
const sources = [
makeMockSource("http://api.example.com/a.js", "actor1"),
makeMockSource("http://example.com/b.js", "actor2"),
makeMockSource("http://demo.com/c.js", "actor3")
];
const rootA = "http://example.com/path/to/file.html";
const rootB = "https://www.demo.com/index.html";
const _treeA = createDirectoryNode("root", "", []);
const _treeB = createDirectoryNode("root", "", []);
sources.forEach(source => {
addToTree(_treeA, source, rootA);
addToTree(_treeB, source, rootB);
});
const treeA = sortEntireTree(_treeA, rootA);
const treeB = sortEntireTree(_treeB, rootB);
expect(treeA.contents[0].contents[0].name).toBe("b.js");
expect(treeA.contents[1].contents[0].name).toBe("a.js");
expect(treeB.contents[0].contents[0].name).toBe("c.js");
expect(treeB.contents[1].contents[0].name).toBe("a.js");
expect(formatTree(treeA)).toMatchSnapshot();
expect(formatTree(treeB)).toMatchSnapshot();
});
});
});

29
devtools/client/debugger/src/utils/sources-tree/tests/updateTree.spec.js
View File

@ -7,7 +7,7 @@
import { makeMockSource } from "../../../utils/test-mockup";
import { updateTree, createTree } from "../index";
type RawSource = {| url: string, id: string, actors?: any |};
type RawSource = {| url: string, id: string |};
function createSourcesMap(sources: RawSource[]) {
const sourcesMap = sources.reduce((map, source) => {
@ -15,7 +15,7 @@ function createSourcesMap(sources: RawSource[]) {
return map;
}, {});
return { FakeThread: sourcesMap };
return sourcesMap;
}
function formatTree(tree) {
@ -37,32 +37,25 @@ const sources = [
}
];
const threads = [
{
actor: "FakeThread",
url: "https://davidwalsh.name",
type: 1,
name: "FakeThread"
}
];
const debuggeeUrl = "blah";
describe("calls updateTree.js", () => {
it("adds one source", () => {
const prevSources = createSourcesMap([sources[0]]);
const { sourceTree, uncollapsedTree } = createTree({
debuggeeUrl,
sources: prevSources,
threads
projectRoot: ""
});
const newTree = updateTree({
debuggeeUrl,
prevSources,
newSources: createSourcesMap([sources[0], sources[1]]),
uncollapsedTree,
sourceTree,
threads
projectRoot: ""
});
expect(formatTree(newTree)).toMatchSnapshot();
@ -74,7 +67,7 @@ describe("calls updateTree.js", () => {
const { sourceTree, uncollapsedTree } = createTree({
debuggeeUrl,
sources: prevSources,
threads
projectRoot: ""
});
const newTree = updateTree({
@ -83,8 +76,7 @@ describe("calls updateTree.js", () => {
newSources: createSourcesMap([sources[0], sources[1], sources[2]]),
uncollapsedTree,
sourceTree,
projectRoot: "",
threads
projectRoot: ""
});
expect(formatTree(newTree)).toMatchSnapshot();
@ -98,7 +90,7 @@ describe("calls updateTree.js", () => {
const { sourceTree, uncollapsedTree } = createTree({
debuggeeUrl,
sources: prevSources,
threads
projectRoot: ""
});
const newTree = updateTree({
@ -107,8 +99,7 @@ describe("calls updateTree.js", () => {
newSources: createSourcesMap([sources[1]]),
uncollapsedTree,
sourceTree,
projectRoot: "",
threads
projectRoot: ""
});
expect(formatTree(newTree)).toMatchSnapshot();

8
devtools/client/debugger/src/utils/sources-tree/tests/utils.spec.js
View File

@ -13,6 +13,7 @@ import {
isExactUrlMatch,
isDirectory,
addToTree,
sortEntireTree,
isNotJavaScript
} from "../index";
@ -46,10 +47,9 @@ describe("sources tree", () => {
];
const tree = createDirectoryNode("root", "", []);
sources.forEach(source =>
addToTree(tree, source, "http://example.com/", "Main Thread")
);
const [bFolderNode, aFileNode] = tree.contents[0].contents[0].contents;
sources.forEach(source => addToTree(tree, source, "http://example.com/"));
sortEntireTree(tree);
const [bFolderNode, aFileNode] = tree.contents[0].contents;
const [cFolderNode] = bFolderNode.contents;
const [dFileNode] = cFolderNode.contents;

82
devtools/client/debugger/src/utils/sources-tree/updateTree.js
View File

@ -6,82 +6,42 @@
import { addToTree } from "./addToTree";
import { collapseTree } from "./collapseTree";
import { createDirectoryNode, createParentMap } from "./utils";
import { createParentMap } from "./utils";
import { difference } from "lodash";
import { getDomain } from "./treeOrder";
import type { SourcesMapByThread } from "../../reducers/types";
import type { Thread, Source } from "../../types";
import type { SourcesMap } from "../../reducers/types";
import type { TreeDirectory } from "./types";
function getSourcesToAdd(newSources, prevSources): Source[] {
const sourcesToAdd = [];
for (const sourceId in newSources) {
const newSource = newSources[sourceId];
const prevSource = prevSources ? prevSources[sourceId] : null;
if (!prevSource) {
sourcesToAdd.push(newSource);
}
}
return sourcesToAdd;
function newSourcesSet(newSources, prevSources) {
const newSourceIds = difference(
Object.keys(newSources),
Object.keys(prevSources)
);
const uniqSources = newSourceIds.map(id => newSources[id]);
return uniqSources;
}
type UpdateTreeParams = {
newSources: SourcesMapByThread,
prevSources: SourcesMapByThread,
type Params = {
newSources: SourcesMap,
prevSources: SourcesMap,
uncollapsedTree: TreeDirectory,
debuggeeUrl: string,
threads: Thread[]
sourceTree: TreeDirectory,
debuggeeUrl: string
};
type CreateTreeParams = {
sources: SourcesMapByThread,
debuggeeUrl: string,
threads: Thread[]
};
export function createTree({
debuggeeUrl,
sources,
threads
}: CreateTreeParams) {
const uncollapsedTree = createDirectoryNode("root", "", []);
return updateTree({
debuggeeUrl,
newSources: sources,
prevSources: {},
threads,
uncollapsedTree
});
}
export function updateTree({
newSources,
prevSources,
debuggeeUrl,
uncollapsedTree,
threads
}: UpdateTreeParams) {
sourceTree
}: Params) {
const newSet = newSourcesSet(newSources, prevSources);
const debuggeeHost = getDomain(debuggeeUrl);
const contexts = (Object.keys(newSources): any);
contexts.forEach(context => {
const thread = threads.find(t => t.actor === context);
if (!thread) {
return;
}
const sourcesToAdd = getSourcesToAdd(
(Object.values(newSources[context]): any),
prevSources[context] ? (Object.values(prevSources[context]): any) : null
);
for (const source of sourcesToAdd) {
addToTree(uncollapsedTree, source, debuggeeHost, thread.actor);
}
});
for (const source of newSet) {
addToTree(uncollapsedTree, source, debuggeeHost);
}
const newSourceTree = collapseTree(uncollapsedTree);

2
devtools/client/debugger/src/utils/sources-tree/utils.js
View File

@ -13,7 +13,7 @@ import { getURL } from "./getURL";
const IGNORED_URLS = ["debugger eval code", "XStringBundle"];
export function nodeHasChildren(item: TreeNode): boolean {
return Array.isArray(item.contents) && item.type == "directory";
return Array.isArray(item.contents) && item.type === "directory";
}
export function isExactUrlMatch(pathPart: string, debuggeeUrl: string) {

2
devtools/client/debugger/test/mochitest/browser_dbg-asm.js
View File

@ -10,7 +10,7 @@ add_task(async function() {
await waitForSources(dbg, "doc-asm.html", "asm.js");
// Make sure sources appear.
is(findAllElements(dbg, "sourceNodes").length, 3);
is(findAllElements(dbg, "sourceNodes").length, 2);
await selectSource(dbg, "asm.js");

6
devtools/client/debugger/test/mochitest/browser_dbg-content-script-sources.js
View File

@ -49,9 +49,6 @@ add_task(async function() {
const extension = await installAndStartExtension();
let dbg = await initDebugger("doc-content-script-sources.html");
await clickElement(dbg, "sourceDirectoryLabel", 2);
await selectContentScriptSources(dbg);
await closeTab(dbg, "content_script.js");
@ -60,9 +57,6 @@ add_task(async function() {
await dbg.toolbox.destroy();
const toolbox = await openToolboxForTab(gBrowser.selectedTab, "jsdebugger");
dbg = createDebuggerContext(toolbox);
await clickElement(dbg, "sourceDirectoryLabel", 2);
await selectContentScriptSources(dbg);
await addBreakpoint(dbg, "content_script.js", 2);

4
devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps.js
View File

@ -66,8 +66,8 @@ add_task(async function() {
const bundleSrc = findSource(dbg, "bundle.js");
// Check that the original sources appear in the source tree
await clickElement(dbg, "sourceDirectoryLabel", 4);
await assertSourceCount(dbg, 9);
await clickElement(dbg, "sourceDirectoryLabel", 3);
await assertSourceCount(dbg, 8);
await selectSource(dbg, bundleSrc);

27
devtools/client/debugger/test/mochitest/browser_dbg-sources-arrow-keys.js
View File

@ -5,8 +5,8 @@
add_task(async function() {
const dbg = await initDebugger("doc-sources.html", "simple1", "simple2", "nested-source", "long.js");
await clickElement(dbg, "sourceDirectoryLabel", 3);
await assertSourceCount(dbg, 8);
await clickElement(dbg, "sourceDirectoryLabel", 2);
await assertSourceCount(dbg, 7);
// Right key on open dir
await pressKey(dbg, "Right");
@ -15,12 +15,12 @@ add_task(async function() {
// Right key on closed dir
await pressKey(dbg, "Right");
await assertSourceCount(dbg, 8);
await assertNodeIsFocused(dbg, 4);
await assertNodeIsFocused(dbg, 3);
// Left key on a open dir
await pressKey(dbg, "Left");
await assertSourceCount(dbg, 8);
await assertNodeIsFocused(dbg, 4);
await assertSourceCount(dbg, 7);
await assertNodeIsFocused(dbg, 3);
// Down key on a closed dir
await pressKey(dbg, "Down");
@ -28,33 +28,32 @@ add_task(async function() {
// Right key on a source
await pressKey(dbg, "Right");
await assertNodeIsFocused(dbg, 4);
await assertNodeIsFocused(dbg, 5);
// Down key on a source
await waitForSourceCount(dbg, 9);
await pressKey(dbg, "Down");
await assertNodeIsFocused(dbg, 5);
await assertNodeIsFocused(dbg, 6);
// Go to bottom of tree and press down key
await pressKey(dbg, "Down");
await pressKey(dbg, "Down");
await assertNodeIsFocused(dbg, 6);
await assertNodeIsFocused(dbg, 7);
// Up key on a source
await pressKey(dbg, "Up");
await assertNodeIsFocused(dbg, 5);
await assertNodeIsFocused(dbg, 6);
// Left key on a source
await pressKey(dbg, "Left");
await assertNodeIsFocused(dbg, 4);
await assertNodeIsFocused(dbg, 2);
// Left key on a closed dir
await pressKey(dbg, "Left");
await assertSourceCount(dbg, 8);
await assertSourceCount(dbg, 2);
await pressKey(dbg, "Left");
await assertNodeIsFocused(dbg, 3);
await assertNodeIsFocused(dbg, 1);
// Up Key at the top of the source tree
await pressKey(dbg, "Up");
await assertNodeIsFocused(dbg, 2);
await assertNodeIsFocused(dbg, 1);
});

20
devtools/client/debugger/test/mochitest/browser_dbg-sources.js
View File

@ -18,15 +18,15 @@ add_task(async function() {
} = dbg;
// Expand nodes and make sure more sources appear.
await assertSourceCount(dbg, 3);
await clickElement(dbg, "sourceDirectoryLabel", 3);
await assertSourceCount(dbg, 2);
await clickElement(dbg, "sourceDirectoryLabel", 2);
await assertSourceCount(dbg, 7);
await clickElement(dbg, "sourceDirectoryLabel", 3);
await assertSourceCount(dbg, 8);
await clickElement(dbg, "sourceDirectoryLabel", 4);
await assertSourceCount(dbg, 9);
const selected = waitForDispatch(dbg, "SET_SELECTED_LOCATION");
await clickElement(dbg, "sourceNode", 5);
await clickElement(dbg, "sourceNode", 4);
await selected;
await waitForSelectedSource(dbg);
@ -34,12 +34,12 @@ add_task(async function() {
await waitForElementWithSelector(dbg, ".sources-list .focused");
const focusedNode = findElementWithSelector(dbg, ".sources-list .focused");
const fourthNode = findElement(dbg, "sourceNode", 5);
const fourthNode = findElement(dbg, "sourceNode", 4);
const selectedSource = getSelectedSource().url;
ok(fourthNode.classList.contains("focused"), "4th node is focused");
ok(selectedSource.includes("nested-source.js"), "nested-source is selected");
await assertNodeIsFocused(dbg, 5);
await assertNodeIsFocused(dbg, 4);
await waitForSelectedSource(dbg, "nested-source");
// Make sure new sources appear in the list.
@ -49,10 +49,10 @@ add_task(async function() {
content.document.body.appendChild(script);
});
await waitForSourceCount(dbg, 10);
await assertNodeIsFocused(dbg, 5);
await waitForSourceCount(dbg, 9);
await assertNodeIsFocused(dbg, 4);
is(
getSourceNodeLabel(dbg, 8),
getSourceNodeLabel(dbg, 7),
"math.min.js",
"math.min.js - The dynamic script exists"
);