[Sources] Auto expand path of selected source (#5716)

* auto expand path of selected source

* add test

Author: AnshulMalik

src/components/PrimaryPanes/SourcesTree.js

@@ -370,6 +370,7 @@ class SourcesTree extends Component<Props, State> {
     const treeProps = {
       autoExpandAll: false,
       autoExpandDepth: expanded ? 0 : 1,
+      autoExpandOnHighlight: true,
       expanded,
       getChildren: item => (nodeHasChildren(item) ? item.contents : []),
       getParent: item => parentMap.get(item),

src/components/shared/ManagedTree.js

@@ -17,6 +17,7 @@ export type Item = {
 type Props = {
   autoExpandAll: boolean,
   autoExpandDepth: number,
+  autoExpandOnHighlight?: boolean,
   getChildren: Object => Object[],
   getPath: (Object, index?: number) => string,
   getParent: Item => any,
@@ -123,11 +124,20 @@ class ManagedTree extends Component<Props, State> {
     if (expanded.has(this.props.getPath(highlightItems[0]))) {
       this.focusItem(highlightItems[0]);
     } else {
-      // Look at folders starting from the top-level until finds a
-      // closed folder and highlights this folder
-      const index = highlightItems
-        .reverse()
-        .findIndex(item => !expanded.has(this.props.getPath(item)));
+      // Look at folders starting from the top-level and expand all the items
+      // which lie in the path of the item to be highlighted
+      highlightItems.reverse();
+      let index = highlightItems.findIndex(
+        item => !expanded.has(this.props.getPath(item))
+      );
+
+      if (this.props.autoExpandOnHighlight) {
+        while (index < highlightItems.length - 1) {
+          this.setExpanded(highlightItems[index], true, false);
+          index++;
+        }
+      }
+
       this.focusItem(highlightItems[index]);
     }
   }

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

@@ -11,6 +11,7 @@ exports[`SourcesTree After changing expanded nodes Shows the tree with four.js,
     <ManagedTree
       autoExpandAll={false}
       autoExpandDepth={0}
+      autoExpandOnHighlight={true}
       expanded={
         Array [
           "four.js",
@@ -44,6 +45,7 @@ exports[`SourcesTree Should show the tree with nothing expanded 1`] = `
     <ManagedTree
       autoExpandAll={false}
       autoExpandDepth={1}
+      autoExpandOnHighlight={true}
       getChildren={[Function]}
       getParent={[Function]}
       getPath={[Function]}
@@ -70,6 +72,7 @@ exports[`SourcesTree When loading initial source Shows the tree with one.js, two
     <ManagedTree
       autoExpandAll={false}
       autoExpandDepth={0}
+      autoExpandOnHighlight={true}
       expanded={
         Array [
           "one.js",

src/test/mochitest/browser_dbg-asm.js

@@ -9,10 +9,6 @@ add_task(async function() {
 
   await waitForSources(dbg, "doc-asm.html", "asm.js");
 
-  // Expand nodes and make sure more sources appear.
-  is(findAllElements(dbg, "sourceNodes").length, 2);
-
-  await clickElement(dbg, "sourceDirectoryLabel", 2);
   is(findAllElements(dbg, "sourceNodes").length, 4);
 
   await selectSource(dbg, "asm.js");

src/test/mochitest/browser_dbg-sources.js

@@ -22,6 +22,23 @@ function getLabel(dbg, index) {
     .replace(/^[\s\u200b]*/g, "");
 }
 
+add_task(async function() {
+  const dbg = await initDebugger("doc-sources.html");
+  const { selectors: { getSelectedSource, getExpandedState }, getState } = dbg;
+
+  await waitForSources(dbg, "nested-source");
+  await selectSource(dbg, "nested-source");
+
+  const expanded = getExpandedState(getState());
+
+  ok(
+    expanded.has(
+      `/example.com/browser/devtools/client/debugger/new/test/mochitest/examples/nested/nested/`
+    ),
+    "Nodes in path are automatically expanded"
+  );
+});
+
 add_task(async function() {
   const dbg = await initDebugger("doc-sources.html");
   const { selectors: { getSelectedSource }, getState } = dbg;