{
shouldHide={icon => ["file", "javascript"].includes(icon)}
/>
{
tabSources: getSourcesForTabs(state),
selectedSource: selectedSource,
activeSearch: getActiveSearch(state),
- hasSiblingOfSameName: getHasSiblingOfSameName(state, source)
+ hasSiblingOfSameName: getHasSiblingOfSameName(state, source),
+ threadName: getWorkerDisplayName(state, source.thread)
};
};
diff --git a/devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTree.js b/devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTree.js
index 038e471d9fddc..2125d05e19609 100644
--- a/devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTree.js
+++ b/devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTree.js
@@ -16,8 +16,10 @@ import {
getDebuggeeUrl,
getExpandedState,
getProjectDirectoryRoot,
- getRelativeSources,
- getSourceCount
+ getRelativeSourcesForThread,
+ getSourceCount,
+ getFocusedSourceItem,
+ getWorkerDisplayName
} from "../../selectors";
import { getGeneratedSourceByURL } from "../../reducers/sources";
@@ -51,20 +53,23 @@ import type { SourcesMap, State as AppState } from "../../reducers/types";
import type { Item } from "../shared/ManagedTree";
type Props = {
+ thread: string,
sources: SourcesMap,
sourceCount: number,
shownSource?: Source,
selectedSource?: Source,
debuggeeUrl: string,
projectRoot: string,
- expanded: Set | null,
+ expanded: Set,
selectSource: typeof actions.selectSource,
setExpandedState: typeof actions.setExpandedState,
- clearProjectDirectoryRoot: typeof actions.clearProjectDirectoryRoot
+ clearProjectDirectoryRoot: typeof actions.clearProjectDirectoryRoot,
+ focusItem: typeof actions.focusItem,
+ focused: TreeNode,
+ workerDisplayName: string
};
type State = {
- focusedItem: ?TreeNode,
parentMap: ParentMap,
sourceTree: TreeDirectory,
uncollapsedTree: TreeDirectory,
@@ -90,6 +95,7 @@ class SourcesTree extends Component {
componentWillReceiveProps(nextProps: Props) {
const {
+ thread,
projectRoot,
debuggeeUrl,
sources,
@@ -140,23 +146,22 @@ class SourcesTree extends Component {
debuggeeUrl,
projectRoot,
uncollapsedTree,
- sourceTree,
- focusedItem: this.state.focusedItem
+ sourceTree
})
);
}
}
- focusItem = (item: TreeNode) => {
- this.setState({ focusedItem: item });
- };
-
selectItem = (item: TreeNode) => {
if (item.type == "source" && !Array.isArray(item.contents)) {
this.props.selectSource(item.contents.id);
}
};
+ onFocus = (item: TreeNode) => {
+ this.props.focusItem({ thread: this.props.thread, item });
+ };
+
// NOTE: we get the source from sources because item.contents is cached
getSource(item: TreeNode): ?Source {
const source = getSourceFromNode(item);
@@ -180,18 +185,18 @@ class SourcesTree extends Component {
};
onExpand = (item: Item, expandedState: Set) => {
- this.props.setExpandedState(expandedState);
+ this.props.setExpandedState(this.props.thread, expandedState);
};
onCollapse = (item: Item, expandedState: Set) => {
- this.props.setExpandedState(expandedState);
+ this.props.setExpandedState(this.props.thread, expandedState);
};
onKeyDown = (e: KeyboardEvent) => {
- const { focusedItem } = this.state;
+ const { focused } = this.props;
- if (e.keyCode === 13 && focusedItem) {
- this.selectItem(focusedItem);
+ if (e.keyCode === 13 && focused) {
+ this.selectItem(focused);
}
};
@@ -267,7 +272,7 @@ class SourcesTree extends Component {
depth={depth}
focused={focused}
expanded={expanded}
- focusItem={this.focusItem}
+ focusItem={this.onFocus}
selectItem={this.selectItem}
source={this.getSource(item)}
debuggeeUrl={debuggeeUrl}
@@ -278,13 +283,14 @@ class SourcesTree extends Component {
};
renderTree() {
- const { expanded } = this.props;
+ const { expanded, focused } = this.props;
const { highlightItems, listItems, parentMap } = this.state;
const treeProps = {
autoExpandAll: false,
autoExpandDepth: expanded ? 0 : 1,
expanded,
+ focused,
getChildren: (item: $Shape) =>
nodeHasChildren(item) ? item.contents : [],
getParent: (item: $Shape) => parentMap.get(item),
@@ -296,7 +302,7 @@ class SourcesTree extends Component {
listItems,
onCollapse: this.onCollapse,
onExpand: this.onExpand,
- onFocus: this.focusItem,
+ onFocus: this.onFocus,
renderItem: this.renderItem,
preventBlur: true
};
@@ -319,7 +325,7 @@ class SourcesTree extends Component {
);
}
- render() {
+ renderContents() {
const { projectRoot } = this.props;
if (this.isEmpty()) {
@@ -342,28 +348,52 @@ class SourcesTree extends Component {
);
}
+
+ render() {
+ if (this.props.workerDisplayName) {
+ return (
+
- {getTruncatedFileName(source, query)}
+ {`${threadNamePrefix}${getTruncatedFileName(source, query)}`}
{path && {`../${path}/..`}}
+ {this.props.workerDisplayName}
+ {this.renderContents()}
+
+ );
+ }
+ return this.renderContents();
+ }
}
-function getSourceForTree(state: AppState, source: ?Source): ?Source | null {
+function getSourceForTree(
+ state: AppState,
+ source: ?Source,
+ thread: ?string
+): ?Source {
if (!source || !source.isPrettyPrinted) {
return source;
}
- return getGeneratedSourceByURL(state, getRawSourceURL(source.url));
+ const candidate = getGeneratedSourceByURL(state, getRawSourceURL(source.url));
+
+ if (!thread || !candidate || candidate.thread == thread) {
+ return candidate;
+ }
}
-const mapStateToProps = state => {
+const mapStateToProps = (state, props) => {
const selectedSource = getSelectedSource(state);
const shownSource = getShownSource(state);
+ const focused = getFocusedSourceItem(state);
+ const thread = props.thread;
return {
- shownSource: getSourceForTree(state, shownSource),
- selectedSource: getSourceForTree(state, selectedSource),
+ shownSource: getSourceForTree(state, shownSource, thread),
+ selectedSource: getSourceForTree(state, selectedSource, thread),
debuggeeUrl: getDebuggeeUrl(state),
- expanded: getExpandedState(state),
+ expanded: getExpandedState(state, props.thread),
+ focused: focused && focused.thread == props.thread ? focused.item : null,
projectRoot: getProjectDirectoryRoot(state),
- sources: getRelativeSources(state),
- sourceCount: getSourceCount(state)
+ sources: getRelativeSourcesForThread(state, thread),
+ sourceCount: getSourceCount(state, props.thread),
+ workerDisplayName: getWorkerDisplayName(state, thread)
};
};
@@ -372,6 +402,7 @@ export default connect(
{
selectSource: actions.selectSource,
setExpandedState: actions.setExpandedState,
- clearProjectDirectoryRoot: actions.clearProjectDirectoryRoot
+ clearProjectDirectoryRoot: actions.clearProjectDirectoryRoot,
+ focusItem: actions.focusItem
}
)(SourcesTree);
diff --git a/devtools/client/debugger/new/src/components/PrimaryPanes/index.js b/devtools/client/debugger/new/src/components/PrimaryPanes/index.js
index fa255249211cb..0d58c4253df10 100644
--- a/devtools/client/debugger/new/src/components/PrimaryPanes/index.js
+++ b/devtools/client/debugger/new/src/components/PrimaryPanes/index.js
@@ -10,9 +10,10 @@ import { Tab, Tabs, TabList, TabPanels } from "react-aria-components/src/tabs";
import { formatKeyShortcut } from "../../utils/text";
import actions from "../../actions";
import {
- getSources,
+ getRelativeSources,
getActiveSearch,
- getSelectedPrimaryPaneTab
+ getSelectedPrimaryPaneTab,
+ getWorkerDisplayName
} from "../../selectors";
import { features, prefs } from "../../utils/prefs";
import "./Sources.css";
@@ -21,7 +22,7 @@ import classnames from "classnames";
import Outline from "./Outline";
import SourcesTree from "./SourcesTree";
-import type { SourcesMap } from "../../reducers/types";
+import type { SourcesMapByThread } from "../../reducers/types";
import type { SelectedPrimaryPaneTabType } from "../../selectors";
type State = {
@@ -30,12 +31,13 @@ type State = {
type Props = {
selectedTab: SelectedPrimaryPaneTabType,
- sources: SourcesMap,
+ sources: SourcesMapByThread,
horizontal: boolean,
sourceSearchOn: boolean,
setPrimaryPaneTab: typeof actions.setPrimaryPaneTab,
setActiveSearch: typeof actions.setActiveSearch,
- closeActiveSearch: typeof actions.closeActiveSearch
+ closeActiveSearch: typeof actions.closeActiveSearch,
+ getWorkerDisplayName: string => string
};
class PrimaryPanes extends Component{this.renderThreadSources()}
- {getTruncatedFileName(source, query)}
+ {threadName +
+ (threadName ? ": " : "") +
+ getTruncatedFileName(source, query)}
{path && {`../${path}/..`}}
@@ -66,7 +76,8 @@ class BreakpointHeading extends PureComponent