Provide a method to clear the root if no child sources are found (#5743)

Author: darkwing

assets/panel/debugger.properties

@@ -235,6 +235,10 @@ projectTextSearch.noResults=No results found
 # does not have any sources.
 sources.noSourcesAvailable=This page has no sources
 
+# LOCALIZATION NOTE (sources.noSourcesAvailableRoot): Text shown when the debugger
+# does not have any sources under a specific directory root.
+sources.noSourcesAvailableRoot=This directory root has no sources
+
 # LOCALIZATION NOTE (sourceSearch.search.key2): Key shortcut to open the search
 # for searching within a the currently opened files in the editor
 # Do not localize "CmdOrCtrl+F", or change the format of the string. These are

src/components/PrimaryPanes/Sources.css

@@ -226,7 +226,8 @@
   display: block;
 }
 
-.sources-list-custom-root .sources-list {
+.sources-list-custom-root .sources-list,
+.sources-list-custom-root .no-sources-message {
   position: absolute;
   top: 26px;
   right: 0;

src/components/PrimaryPanes/SourcesTree.js

@@ -311,6 +311,10 @@ class SourcesTree extends Component<Props, State> {
     );
   };
 
+  renderEmptyElement(message) {
+    return <div className="no-sources-message">{message}</div>;
+  }
+
   render() {
     const { expanded, projectRoot } = this.props;
     const {
@@ -329,14 +333,22 @@ class SourcesTree extends Component<Props, State> {
       this.props.setExpandedState(expandedState);
     };
 
+    const isEmpty = sourceTree.contents.length === 0;
+
     const isCustomRoot = projectRoot !== "";
     let roots = () => sourceTree.contents;
 
     let clearProjectRootButton = null;
 
     // The "sourceTree.contents[0]" check ensures that there are contents
     // A custom root with no existing sources will be ignored
-    if (isCustomRoot && sourceTree.contents[0]) {
+    if (isCustomRoot) {
+      let rootLabel = projectRoot.split("/").pop();
+      if (sourceTree.contents[0]) {
+        rootLabel = sourceTree.contents[0].name;
+        roots = () => sourceTree.contents[0].contents;
+      }
+
       clearProjectRootButton = (
         <button
           className="sources-clear-root"
@@ -345,15 +357,15 @@ class SourcesTree extends Component<Props, State> {
         >
           <Svg name="home" />
           <Svg name="breadcrumb" class />
-          <span className="sources-clear-root-label">
-            {sourceTree.contents[0].name}
-          </span>
+          <span className="sources-clear-root-label">{rootLabel}</span>
         </button>
       );
-      roots = () => sourceTree.contents[0].contents;
     }
 
-    const isEmpty = sourceTree.contents.length === 0;
+    if (isEmpty && !isCustomRoot) {
+      return this.renderEmptyElement(L10N.getStr("sources.noSourcesAvailable"));
+    }
+
     const treeProps = {
       autoExpandAll: false,
       autoExpandDepth: expanded ? 0 : 1,
@@ -374,14 +386,6 @@ class SourcesTree extends Component<Props, State> {
 
     const tree = <ManagedTree {...treeProps} />;
 
-    if (isEmpty) {
-      return (
-        <div className="no-sources-message">
-          {L10N.getStr("sources.noSourcesAvailable")}
-        </div>
-      );
-    }
-
     const onKeyDown = e => {
       if (e.keyCode === 13 && focusedItem) {
         this.selectItem(focusedItem);
@@ -399,9 +403,13 @@ class SourcesTree extends Component<Props, State> {
             {clearProjectRootButton}
           </div>
         ) : null}
-        <div className="sources-list" onKeyDown={onKeyDown}>
-          {tree}
-        </div>
+        {isEmpty ? (
+          this.renderEmptyElement(L10N.getStr("sources.noSourcesAvailableRoot"))
+        ) : (
+          <div className="sources-list" onKeyDown={onKeyDown}>
+            {tree}
+          </div>
+        )}
       </div>
     );
   }