From 356d9d1bcf6d66767d978a314b1b065335877127 Mon Sep 17 00:00:00 2001
From: Anshul <malikanshul29@gmail.com>
Date: Fri, 6 Apr 2018 10:05:33 +0530
Subject: [PATCH 1/2] auto expand path of selected source

---
 src/components/PrimaryPanes/SourcesTree.js    |  1 +
 src/components/shared/ManagedTree.js          | 20 ++++++++++++++-----
 .../__snapshots__/SourcesTree.spec.js.snap    |  3 +++
 src/test/mochitest/browser_dbg-asm.js         |  4 ----
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/PrimaryPanes/SourcesTree.js b/src/components/PrimaryPanes/SourcesTree.js
index a7e095dabc..91a30963e9 100644
--- a/src/components/PrimaryPanes/SourcesTree.js
+++ b/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),
diff --git a/src/components/shared/ManagedTree.js b/src/components/shared/ManagedTree.js
index 787df2a993..fce9a668a5 100644
--- a/src/components/shared/ManagedTree.js
+++ b/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]);
     }
   }
diff --git a/src/components/tests/__snapshots__/SourcesTree.spec.js.snap b/src/components/tests/__snapshots__/SourcesTree.spec.js.snap
index c3d58b4ca9..b29bf9d03e 100644
--- a/src/components/tests/__snapshots__/SourcesTree.spec.js.snap
+++ b/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",
diff --git a/src/test/mochitest/browser_dbg-asm.js b/src/test/mochitest/browser_dbg-asm.js
index b55df7ff1b..955eff5114 100644
--- a/src/test/mochitest/browser_dbg-asm.js
+++ b/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");

From a78820c408c6c9d5826aef317cd1f4c2738a0632 Mon Sep 17 00:00:00 2001
From: Anshul <malikanshul29@gmail.com>
Date: Fri, 6 Apr 2018 14:27:27 +0530
Subject: [PATCH 2/2] add test

---
 src/test/mochitest/browser_dbg-sources.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/test/mochitest/browser_dbg-sources.js b/src/test/mochitest/browser_dbg-sources.js
index 8f485f8446..9289b90383 100644
--- a/src/test/mochitest/browser_dbg-sources.js
+++ b/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;