Skip to content
This repository was archived by the owner on Jan 11, 2023. It is now read-only.

Commit 343e364

Browse files
darkwingjasonLaster
darkwing
authored and
jasonLaster
committed
Provide a clear button for clearing directory root (#5632)
1 parent dd2ca65 commit 343e364

File tree

6 files changed

+212
-70
lines changed

6 files changed

+212
-70
lines changed

‎assets/images/Svg.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const svg = {
99
babel: require("./babel.svg"),
1010
backbone: require("./backbone.svg"),
1111
blackBox: require("./blackBox.svg"),
12+
breadcrumb: require("./breadcrumbs-divider.svg"),
1213
breakpoint: require("./breakpoint.svg"),
1314
"column-breakpoint": require("./column-breakpoint.svg"),
1415
"case-match": require("./case-match.svg"),
@@ -20,6 +21,7 @@ const svg = {
2021
file: require("./file.svg"),
2122
folder: require("./folder.svg"),
2223
globe: require("./globe.svg"),
24+
home: require("./home.svg"),
2325
javascript: require("./javascript.svg"),
2426
jquery: require("./jquery.svg"),
2527
underscore: require("./underscore.svg"),

‎assets/images/breadcrumbs-divider.svg‎

Lines changed: 18 additions & 0 deletions
Loading

‎assets/images/home.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎src/components/PrimaryPanes/Sources.css‎

Lines changed: 70 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,54 @@
1616
user-select: none;
1717
}
1818

19+
.sources-clear-root {
20+
padding: 4px 3px 4px 3px;
21+
width: 100%;
22+
text-align: start;
23+
white-space: nowrap;
24+
color: inherit;
25+
display: block;
26+
position: absolute;
27+
top: 0;
28+
left: 0;
29+
border-bottom: 1px solid var(--theme-splitter-color);
30+
}
31+
32+
.sources-clear-root i {
33+
margin-right: 5px;
34+
position: relative;
35+
}
36+
37+
.sources-clear-root svg {
38+
width: 13px;
39+
height: 13px;
40+
}
41+
42+
.sources-clear-root .home {
43+
opacity: 0.5;
44+
}
45+
46+
.sources-clear-root .breadcrumb svg {
47+
width: 5px;
48+
top: 2px;
49+
position: absolute;
50+
margin-right: 5px;
51+
}
52+
53+
.sources-clear-root-label {
54+
margin-left: 5px;
55+
}
56+
57+
.sources-pane {
58+
display: flex;
59+
flex: 1;
60+
overflow-x: auto;
61+
overflow-y: auto;
62+
}
63+
1964
.sources-list {
2065
flex: 1;
2166
display: flex;
22-
overflow-x: hidden;
23-
overflow-y: auto;
2467
}
2568

2669
.sources-list .tree:focus {
@@ -168,3 +211,28 @@
168211
.tree-indent:last-of-type {
169212
margin-inline-end: 4px;
170213
}
214+
215+
/*
216+
Custom root styles
217+
*/
218+
.sources-pane.sources-list-custom-root {
219+
display: block;
220+
position: relative;
221+
}
222+
223+
.sources-list-custom-root .sources-pane {
224+
display: block;
225+
}
226+
227+
.sources-list-custom-root .sources-list {
228+
position: absolute;
229+
top: 26px;
230+
right: 0;
231+
bottom: 0;
232+
left: 0;
233+
}
234+
235+
/* Removes start margin when a custom root is used */
236+
.sources-list-custom-root .tree > .tree-node[data-expandable="false"][aria-level="0"] {
237+
padding-inline-start: 4px;
238+
}

‎src/components/PrimaryPanes/SourcesTree.js‎

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ class SourcesTree extends Component<Props, State> {
184184
};
185185

186186
getIcon = (sources, item, depth) => {
187-
const { debuggeeUrl } = this.props;
187+
const { debuggeeUrl, projectRoot } = this.props;
188188

189189
if (item.path === "/Webpack") {
190190
return <Svg name="webpack" />;
@@ -193,7 +193,7 @@ class SourcesTree extends Component<Props, State> {
193193
return <Svg name="angular" />;
194194
}
195195

196-
if (depth === 0) {
196+
if (depth === 0 && projectRoot === "") {
197197
return (
198198
<img
199199
className={classnames("domain", {
@@ -285,6 +285,7 @@ class SourcesTree extends Component<Props, State> {
285285
) : (
286286
<i className="no-arrow" />
287287
);
288+
288289
const { sources } = this.props;
289290
const icon = this.getIcon(sources, item, depth);
290291

@@ -311,7 +312,7 @@ class SourcesTree extends Component<Props, State> {
311312
};
312313

313314
render() {
314-
const expanded = this.props.expanded;
315+
const { expanded, projectRoot } = this.props;
315316
const {
316317
focusedItem,
317318
highlightItems,
@@ -328,6 +329,30 @@ class SourcesTree extends Component<Props, State> {
328329
this.props.setExpandedState(expandedState);
329330
};
330331

332+
const isCustomRoot = projectRoot !== "";
333+
let roots = () => sourceTree.contents;
334+
335+
let clearProjectRootButton = null;
336+
337+
// The "sourceTree.contents[0]" check ensures that there are contents
338+
// A custom root with no existing sources will be ignored
339+
if (isCustomRoot && sourceTree.contents[0]) {
340+
clearProjectRootButton = (
341+
<button
342+
className="sources-clear-root"
343+
onClick={() => this.props.clearProjectDirectoryRoot()}
344+
title={L10N.getStr("removeDirectoryRoot.label")}
345+
>
346+
<Svg name="home" />
347+
<Svg name="breadcrumb" class />
348+
<span className="sources-clear-root-label">
349+
{sourceTree.contents[0].name}
350+
</span>
351+
</button>
352+
);
353+
roots = () => sourceTree.contents[0].contents;
354+
}
355+
331356
const isEmpty = sourceTree.contents.length === 0;
332357
const treeProps = {
333358
autoExpandAll: false,
@@ -336,7 +361,7 @@ class SourcesTree extends Component<Props, State> {
336361
getChildren: item => (nodeHasChildren(item) ? item.contents : []),
337362
getParent: item => parentMap.get(item),
338363
getPath: this.getPath,
339-
getRoots: () => sourceTree.contents,
364+
getRoots: roots,
340365
highlightItems,
341366
itemHeight: 21,
342367
key: isEmpty ? "empty" : "full",
@@ -364,8 +389,19 @@ class SourcesTree extends Component<Props, State> {
364389
};
365390

366391
return (
367-
<div className="sources-list" onKeyDown={onKeyDown}>
368-
{tree}
392+
<div
393+
className={classnames("sources-pane", {
394+
"sources-list-custom-root": isCustomRoot
395+
})}
396+
>
397+
{isCustomRoot ? (
398+
<div className="sources-clear-root-container">
399+
{clearProjectRootButton}
400+
</div>
401+
) : null}
402+
<div className="sources-list" onKeyDown={onKeyDown}>
403+
{tree}
404+
</div>
369405
</div>
370406
);
371407
}

‎src/components/tests/__snapshots__/SourcesTree.spec.js.snap‎

Lines changed: 74 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2,80 +2,92 @@
22

33
exports[`SourcesTree After changing expanded nodes Shows the tree with four.js, five.js and six.js expanded 1`] = `
44
<div
5-
className="sources-list"
6-
onKeyDown={[Function]}
5+
className="sources-pane"
76
>
8-
<ManagedTree
9-
autoExpandAll={false}
10-
autoExpandDepth={0}
11-
expanded={
12-
Array [
13-
"four.js",
14-
"five.js",
15-
"six.js",
16-
]
17-
}
18-
getChildren={[Function]}
19-
getParent={[Function]}
20-
getPath={[Function]}
21-
getRoots={[Function]}
22-
itemHeight={21}
23-
key="full"
24-
onCollapse={[Function]}
25-
onExpand={[Function]}
26-
onFocus={[Function]}
27-
renderItem={[Function]}
28-
/>
7+
<div
8+
className="sources-list"
9+
onKeyDown={[Function]}
10+
>
11+
<ManagedTree
12+
autoExpandAll={false}
13+
autoExpandDepth={0}
14+
expanded={
15+
Array [
16+
"four.js",
17+
"five.js",
18+
"six.js",
19+
]
20+
}
21+
getChildren={[Function]}
22+
getParent={[Function]}
23+
getPath={[Function]}
24+
getRoots={[Function]}
25+
itemHeight={21}
26+
key="full"
27+
onCollapse={[Function]}
28+
onExpand={[Function]}
29+
onFocus={[Function]}
30+
renderItem={[Function]}
31+
/>
32+
</div>
2933
</div>
3034
`;
3135

3236
exports[`SourcesTree Should show the tree with nothing expanded 1`] = `
3337
<div
34-
className="sources-list"
35-
onKeyDown={[Function]}
38+
className="sources-pane"
3639
>
37-
<ManagedTree
38-
autoExpandAll={false}
39-
autoExpandDepth={1}
40-
getChildren={[Function]}
41-
getParent={[Function]}
42-
getPath={[Function]}
43-
getRoots={[Function]}
44-
itemHeight={21}
45-
key="full"
46-
onCollapse={[Function]}
47-
onExpand={[Function]}
48-
onFocus={[Function]}
49-
renderItem={[Function]}
50-
/>
40+
<div
41+
className="sources-list"
42+
onKeyDown={[Function]}
43+
>
44+
<ManagedTree
45+
autoExpandAll={false}
46+
autoExpandDepth={1}
47+
getChildren={[Function]}
48+
getParent={[Function]}
49+
getPath={[Function]}
50+
getRoots={[Function]}
51+
itemHeight={21}
52+
key="full"
53+
onCollapse={[Function]}
54+
onExpand={[Function]}
55+
onFocus={[Function]}
56+
renderItem={[Function]}
57+
/>
58+
</div>
5159
</div>
5260
`;
5361

5462
exports[`SourcesTree When loading initial source Shows the tree with one.js, two.js and three.js expanded 1`] = `
5563
<div
56-
className="sources-list"
57-
onKeyDown={[Function]}
64+
className="sources-pane"
5865
>
59-
<ManagedTree
60-
autoExpandAll={false}
61-
autoExpandDepth={0}
62-
expanded={
63-
Array [
64-
"one.js",
65-
"two.js",
66-
"three.js",
67-
]
68-
}
69-
getChildren={[Function]}
70-
getParent={[Function]}
71-
getPath={[Function]}
72-
getRoots={[Function]}
73-
itemHeight={21}
74-
key="full"
75-
onCollapse={[Function]}
76-
onExpand={[Function]}
77-
onFocus={[Function]}
78-
renderItem={[Function]}
79-
/>
66+
<div
67+
className="sources-list"
68+
onKeyDown={[Function]}
69+
>
70+
<ManagedTree
71+
autoExpandAll={false}
72+
autoExpandDepth={0}
73+
expanded={
74+
Array [
75+
"one.js",
76+
"two.js",
77+
"three.js",
78+
]
79+
}
80+
getChildren={[Function]}
81+
getParent={[Function]}
82+
getPath={[Function]}
83+
getRoots={[Function]}
84+
itemHeight={21}
85+
key="full"
86+
onCollapse={[Function]}
87+
onExpand={[Function]}
88+
onFocus={[Function]}
89+
renderItem={[Function]}
90+
/>
91+
</div>
8092
</div>
8193
`;

0 commit comments

Comments
 (0)