Bug 1520957 - [release 119] Improve the expand/collapse all behaviour of the Sources tree (#7664). r=dwalsh
☠☠ backed out by ef836f7dfc08 ☠ ☠
authorGary Blackwood <gary@garyblackwood.co.uk>
Fri, 18 Jan 2019 12:05:01 -0500
changeset 454552 86defe96c1bbc5142c11a650107efea59ed33c3f
parent 454551 4655b2d86e56dc3bd0c9e645f740e3ecee5a2d35
child 454553 862c4fc3b6abcf5094a00993f17331f04383bba0
push id35400
push usercsabou@mozilla.com
push dateSat, 19 Jan 2019 09:59:33 +0000
treeherdermozilla-central@f90bab5af97e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdwalsh
bugs1520957
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1520957 - [release 119] Improve the expand/collapse all behaviour of the Sources tree (#7664). r=dwalsh
devtools/client/debugger/new/dist/vendors.js
devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTree.js
devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTreeItem.js
devtools/client/debugger/new/src/components/PrimaryPanes/tests/SourcesTreeItem.spec.js
devtools/client/debugger/new/src/components/PrimaryPanes/tests/__snapshots__/SourcesTreeItem.spec.js.snap
devtools/client/debugger/new/src/components/shared/ManagedTree.js
devtools/client/shared/components/reps/reps.js
--- a/devtools/client/debugger/new/dist/vendors.js
+++ b/devtools/client/debugger/new/dist/vendors.js
@@ -5021,17 +5021,17 @@ class Tree extends Component {
           // We can stop the propagation since click handler on the node can be
           // created in `renderItem`.
           e.stopPropagation();
 
           // Since the user just clicked the node, there's no need to check if
           // it should be scrolled into view.
           this._focus(item, { preventAutoScroll: true });
           if (this.props.isExpanded(item)) {
-            this.props.onCollapse(item);
+            this.props.onCollapse(item, e.altKey);
           } else {
             this.props.onExpand(item, e.altKey);
           }
         }
       });
     });
 
     const style = Object.assign({}, this.props.style || {}, {
--- a/devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTree.js
+++ b/devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTree.js
@@ -78,18 +78,16 @@ type Props = {
 type State = {
   parentMap: ParentMap,
   sourceTree: TreeDirectory,
   uncollapsedTree: TreeDirectory,
   listItems?: any,
   highlightItems?: any
 };
 
-type SetExpanded = (item: TreeNode, expanded: boolean, altKey: boolean) => void;
-
 class SourcesTree extends Component<Props, State> {
   mounted: boolean;
 
   constructor(props: Props) {
     super(props);
     const { debuggeeUrl, sources, projectRoot } = this.props;
 
     this.state = createTree({
@@ -261,33 +259,31 @@ class SourcesTree extends Component<Prop
     return sourceTree.contents;
   };
 
   renderItem = (
     item: TreeNode,
     depth: number,
     focused: boolean,
     _,
-    expanded: boolean,
-    { setExpanded }: { setExpanded: SetExpanded }
+    expanded: boolean
   ) => {
     const { debuggeeUrl, projectRoot } = this.props;
 
     return (
       <SourcesTreeItem
         item={item}
         depth={depth}
         focused={focused}
         expanded={expanded}
         focusItem={this.onFocus}
         selectItem={this.selectItem}
         source={this.getSource(item)}
         debuggeeUrl={debuggeeUrl}
         projectRoot={projectRoot}
-        setExpanded={setExpanded}
       />
     );
   };
 
   renderTree() {
     const { expanded, focused } = this.props;
     const { highlightItems, listItems, parentMap } = this.state;
 
--- a/devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTreeItem.js
+++ b/devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTreeItem.js
@@ -35,17 +35,16 @@ type Props = {
   projectRoot: string,
   source: ?Source,
   item: TreeNode,
   depth: number,
   focused: boolean,
   expanded: boolean,
   hasMatchingGeneratedSource: boolean,
   hasSiblingOfSameName: boolean,
-  setExpanded: (TreeNode, boolean, boolean) => void,
   focusItem: TreeNode => void,
   selectItem: TreeNode => void,
   clearProjectDirectoryRoot: typeof actions.clearProjectDirectoryRoot,
   setProjectDirectoryRoot: typeof actions.setProjectDirectoryRoot
 };
 
 type State = {};
 
@@ -78,23 +77,21 @@ class SourceTreeItem extends Component<P
     if (source) {
       return <SourceIcon source={source} />;
     }
 
     return null;
   }
 
   onClick = (e: MouseEvent) => {
-    const { expanded, item, focusItem, setExpanded, selectItem } = this.props;
+    const { item, focusItem, selectItem } = this.props;
 
     focusItem(item);
 
-    if (isDirectory(item)) {
-      setExpanded(item, !!expanded, e.altKey);
-    } else {
+    if (!isDirectory(item)) {
       selectItem(item);
     }
   };
 
   onContextMenu = (event: Event, item: TreeNode) => {
     const copySourceUri2Label = L10N.getStr("copySourceUri2");
     const copySourceUri2Key = L10N.getStr("copySourceUri2.accesskey");
     const setDirectoryRootLabel = L10N.getStr("setDirectoryRoot.label");
--- a/devtools/client/debugger/new/src/components/PrimaryPanes/tests/SourcesTreeItem.spec.js
+++ b/devtools/client/debugger/new/src/components/PrimaryPanes/tests/SourcesTreeItem.spec.js
@@ -231,50 +231,43 @@ describe("SourceTreeItem", () => {
       const { node } = render({
         projectRoot: "root/"
       });
       expect(node).toMatchSnapshot();
     });
 
     it("should focus on and select item on click", async () => {
       const event = { event: "click" };
-      const setExpanded = jest.fn();
       const selectItem = jest.fn();
       const { component, instance, props } = render({
         depth: 1,
         focused: true,
         expanded: false,
-        setExpanded,
         selectItem
       });
 
       const { item } = instance.props;
       component.simulate("click", event);
       await component.simulate("keydown", { keyCode: 13 });
       expect(props.selectItem).toHaveBeenCalledWith(item);
-      expect(setExpanded).not.toHaveBeenCalled();
     });
 
-    it("should focus on and expand directory on click", async () => {
-      const setExpanded = jest.fn();
+    it("should focus on directory on click", async () => {
       const selectItem = jest.fn();
 
-      const { component, instance, props } = render({
+      const { component, props } = render({
         item: createMockDirectory(),
         source: null,
         depth: 1,
         focused: true,
         expanded: false,
-        setExpanded,
         selectItem
       });
 
-      const { item } = instance.props;
       component.simulate("click", { event: "click" });
-      expect(setExpanded).toHaveBeenCalledWith(item, false, undefined);
       expect(props.selectItem).not.toHaveBeenCalled();
     });
   });
 });
 
 function generateDefaults(overrides) {
   const source = createSource({
     id: "server1.conn13.child1/39",
@@ -290,17 +283,16 @@ function generateDefaults(overrides) {
   return {
     expanded: false,
     item,
     source,
     debuggeeUrl: "http://mdn.com",
     projectRoot: "",
     clearProjectDirectoryRoot: jest.fn(),
     setProjectDirectoryRoot: jest.fn(),
-    setExpanded: jest.fn(),
     selectItem: jest.fn(),
     focusItem: jest.fn(),
     ...overrides
   };
 }
 
 function render(overrides = {}) {
   const props = generateDefaults(overrides);
--- a/devtools/client/debugger/new/src/components/PrimaryPanes/tests/__snapshots__/SourcesTreeItem.spec.js.snap
+++ b/devtools/client/debugger/new/src/components/PrimaryPanes/tests/__snapshots__/SourcesTreeItem.spec.js.snap
@@ -67,17 +67,16 @@ Object {
           "url": undefined,
         },
         "name": "one.js",
         "path": "http://mdn.com/one.js",
         "type": "source",
       },
       "projectRoot": "",
       "selectItem": [MockFunction],
-      "setExpanded": [MockFunction],
       "setProjectDirectoryRoot": [MockFunction],
       "source": Object {
         "contentType": "",
         "error": undefined,
         "id": "server1.conn13.child1/39",
         "isBlackBoxed": false,
         "isPrettyPrinted": false,
         "isWasm": false,
@@ -115,17 +114,16 @@ Object {
               },
               "name": "one.js",
               "path": "http://mdn.com/one.js",
               "type": "source",
             }
           }
           projectRoot=""
           selectItem={[MockFunction]}
-          setExpanded={[MockFunction]}
           setProjectDirectoryRoot={[MockFunction]}
           source={
             Object {
               "contentType": "",
               "error": undefined,
               "id": "server1.conn13.child1/39",
               "isBlackBoxed": false,
               "isPrettyPrinted": false,
@@ -202,17 +200,16 @@ Object {
         "url": undefined,
       },
       "name": "one.js",
       "path": "http://mdn.com/one.js",
       "type": "source",
     },
     "projectRoot": "",
     "selectItem": [MockFunction],
-    "setExpanded": [MockFunction],
     "setProjectDirectoryRoot": [MockFunction],
     "source": Object {
       "contentType": "",
       "error": undefined,
       "id": "server1.conn13.child1/39",
       "isBlackBoxed": false,
       "isPrettyPrinted": false,
       "isWasm": false,
@@ -272,17 +269,16 @@ Object {
           "url": undefined,
         },
         "name": "root",
         "path": "root",
         "type": "source",
       },
       "projectRoot": "",
       "selectItem": [MockFunction],
-      "setExpanded": [MockFunction],
       "setProjectDirectoryRoot": [MockFunction],
       "source": Object {
         "contentType": "",
         "error": undefined,
         "id": "server1.conn13.child1/39",
         "isBlackBoxed": false,
         "isPrettyPrinted": false,
         "isWasm": false,
@@ -320,17 +316,16 @@ Object {
               },
               "name": "root",
               "path": "root",
               "type": "source",
             }
           }
           projectRoot=""
           selectItem={[MockFunction]}
-          setExpanded={[MockFunction]}
           setProjectDirectoryRoot={[MockFunction]}
           source={
             Object {
               "contentType": "",
               "error": undefined,
               "id": "server1.conn13.child1/39",
               "isBlackBoxed": false,
               "isPrettyPrinted": false,
@@ -389,17 +384,16 @@ Object {
         "url": undefined,
       },
       "name": "root",
       "path": "root",
       "type": "source",
     },
     "projectRoot": "",
     "selectItem": [MockFunction],
-    "setExpanded": [MockFunction],
     "setProjectDirectoryRoot": [MockFunction],
     "source": Object {
       "contentType": "",
       "error": undefined,
       "id": "server1.conn13.child1/39",
       "isBlackBoxed": false,
       "isPrettyPrinted": false,
       "isWasm": false,
@@ -448,17 +442,16 @@ Object {
       "item": Object {
         "contents": Array [],
         "name": "http://mdn.com",
         "path": "root",
         "type": "directory",
       },
       "projectRoot": "",
       "selectItem": [MockFunction],
-      "setExpanded": [MockFunction],
       "setProjectDirectoryRoot": [MockFunction],
       "source": Object {
         "contentType": "",
         "error": undefined,
         "id": "server1.conn13.child1/39",
         "isBlackBoxed": false,
         "isPrettyPrinted": false,
         "isWasm": false,
@@ -485,17 +478,16 @@ Object {
               "contents": Array [],
               "name": "http://mdn.com",
               "path": "root",
               "type": "directory",
             }
           }
           projectRoot=""
           selectItem={[MockFunction]}
-          setExpanded={[MockFunction]}
           setProjectDirectoryRoot={[MockFunction]}
           source={
             Object {
               "contentType": "",
               "error": undefined,
               "id": "server1.conn13.child1/39",
               "isBlackBoxed": false,
               "isPrettyPrinted": false,
@@ -543,17 +535,16 @@ Object {
     "item": Object {
       "contents": Array [],
       "name": "http://mdn.com",
       "path": "root",
       "type": "directory",
     },
     "projectRoot": "",
     "selectItem": [MockFunction],
-    "setExpanded": [MockFunction],
     "setProjectDirectoryRoot": [MockFunction],
     "source": Object {
       "contentType": "",
       "error": undefined,
       "id": "server1.conn13.child1/39",
       "isBlackBoxed": false,
       "isPrettyPrinted": false,
       "isWasm": false,
@@ -603,17 +594,16 @@ Object {
       "item": Object {
         "contents": Array [],
         "name": "http://mdn.com",
         "path": "root",
         "type": "directory",
       },
       "projectRoot": "",
       "selectItem": [MockFunction],
-      "setExpanded": [MockFunction],
       "setProjectDirectoryRoot": [MockFunction],
       "source": Object {
         "contentType": "",
         "error": undefined,
         "id": "server1.conn13.child1/39",
         "isBlackBoxed": false,
         "isPrettyPrinted": false,
         "isWasm": false,
@@ -641,17 +631,16 @@ Object {
               "contents": Array [],
               "name": "http://mdn.com",
               "path": "root",
               "type": "directory",
             }
           }
           projectRoot=""
           selectItem={[MockFunction]}
-          setExpanded={[MockFunction]}
           setProjectDirectoryRoot={[MockFunction]}
           source={
             Object {
               "contentType": "",
               "error": undefined,
               "id": "server1.conn13.child1/39",
               "isBlackBoxed": false,
               "isPrettyPrinted": false,
@@ -700,17 +689,16 @@ Object {
     "item": Object {
       "contents": Array [],
       "name": "http://mdn.com",
       "path": "root",
       "type": "directory",
     },
     "projectRoot": "",
     "selectItem": [MockFunction],
-    "setExpanded": [MockFunction],
     "setProjectDirectoryRoot": [MockFunction],
     "source": Object {
       "contentType": "",
       "error": undefined,
       "id": "server1.conn13.child1/39",
       "isBlackBoxed": false,
       "isPrettyPrinted": false,
       "isWasm": false,
@@ -760,17 +748,16 @@ Object {
       "item": Object {
         "contents": Array [],
         "name": "folder",
         "path": "folder/",
         "type": "directory",
       },
       "projectRoot": "",
       "selectItem": [MockFunction],
-      "setExpanded": [MockFunction],
       "setProjectDirectoryRoot": [MockFunction],
       "source": null,
     },
     "refs": Object {},
     "state": null,
     "updater": Updater {
       "_callbacks": Array [],
       "_renderer": ReactShallowRenderer {
@@ -787,17 +774,16 @@ Object {
               "contents": Array [],
               "name": "folder",
               "path": "folder/",
               "type": "directory",
             }
           }
           projectRoot=""
           selectItem={[MockFunction]}
-          setExpanded={[MockFunction]}
           setProjectDirectoryRoot={[MockFunction]}
           source={null}
         />,
         "_forcedUpdate": false,
         "_instance": [Circular],
         "_newState": null,
         "_rendered": <div
           className="node focused"
@@ -833,17 +819,16 @@ Object {
     "item": Object {
       "contents": Array [],
       "name": "folder",
       "path": "folder/",
       "type": "directory",
     },
     "projectRoot": "",
     "selectItem": [MockFunction],
-    "setExpanded": [MockFunction],
     "setProjectDirectoryRoot": [MockFunction],
     "source": null,
   },
 }
 `;
 
 exports[`SourceTreeItem renderItem should show icon for angular item 1`] = `
 Object {
@@ -880,17 +865,16 @@ Object {
       "item": Object {
         "contents": Array [],
         "name": "ng://",
         "path": "ng://",
         "type": "directory",
       },
       "projectRoot": "",
       "selectItem": [MockFunction],
-      "setExpanded": [MockFunction],
       "setProjectDirectoryRoot": [MockFunction],
       "source": Object {
         "contentType": "",
         "error": undefined,
         "id": "server1.conn13.child1/39",
         "isBlackBoxed": false,
         "isPrettyPrinted": false,
         "isWasm": false,
@@ -916,17 +900,16 @@ Object {
               "contents": Array [],
               "name": "ng://",
               "path": "ng://",
               "type": "directory",
             }
           }
           projectRoot=""
           selectItem={[MockFunction]}
-          setExpanded={[MockFunction]}
           setProjectDirectoryRoot={[MockFunction]}
           source={
             Object {
               "contentType": "",
               "error": undefined,
               "id": "server1.conn13.child1/39",
               "isBlackBoxed": false,
               "isPrettyPrinted": false,
@@ -973,17 +956,16 @@ Object {
     "item": Object {
       "contents": Array [],
       "name": "ng://",
       "path": "ng://",
       "type": "directory",
     },
     "projectRoot": "",
     "selectItem": [MockFunction],
-    "setExpanded": [MockFunction],
     "setProjectDirectoryRoot": [MockFunction],
     "source": Object {
       "contentType": "",
       "error": undefined,
       "id": "server1.conn13.child1/39",
       "isBlackBoxed": false,
       "isPrettyPrinted": false,
       "isWasm": false,
@@ -1031,17 +1013,16 @@ Object {
       "item": Object {
         "contents": Array [],
         "name": "folder",
         "path": "folder/",
         "type": "directory",
       },
       "projectRoot": "",
       "selectItem": [MockFunction],
-      "setExpanded": [MockFunction],
       "setProjectDirectoryRoot": [MockFunction],
       "source": null,
     },
     "refs": Object {},
     "state": null,
     "updater": Updater {
       "_callbacks": Array [],
       "_renderer": ReactShallowRenderer {
@@ -1056,17 +1037,16 @@ Object {
               "contents": Array [],
               "name": "folder",
               "path": "folder/",
               "type": "directory",
             }
           }
           projectRoot=""
           selectItem={[MockFunction]}
-          setExpanded={[MockFunction]}
           setProjectDirectoryRoot={[MockFunction]}
           source={null}
         />,
         "_forcedUpdate": false,
         "_instance": [Circular],
         "_newState": null,
         "_rendered": <div
           className="node"
@@ -1100,17 +1080,16 @@ Object {
     "item": Object {
       "contents": Array [],
       "name": "folder",
       "path": "folder/",
       "type": "directory",
     },
     "projectRoot": "",
     "selectItem": [MockFunction],
-    "setExpanded": [MockFunction],
     "setProjectDirectoryRoot": [MockFunction],
     "source": null,
   },
 }
 `;
 
 exports[`SourceTreeItem renderItem should show icon for folder with expanded arrow 1`] = `
 Object {
@@ -1149,17 +1128,16 @@ Object {
       "item": Object {
         "contents": Array [],
         "name": "folder",
         "path": "folder/",
         "type": "directory",
       },
       "projectRoot": "",
       "selectItem": [MockFunction],
-      "setExpanded": [MockFunction],
       "setProjectDirectoryRoot": [MockFunction],
       "source": null,
     },
     "refs": Object {},
     "state": null,
     "updater": Updater {
       "_callbacks": Array [],
       "_renderer": ReactShallowRenderer {
@@ -1176,17 +1154,16 @@ Object {
               "contents": Array [],
               "name": "folder",
               "path": "folder/",
               "type": "directory",
             }
           }
           projectRoot=""
           selectItem={[MockFunction]}
-          setExpanded={[MockFunction]}
           setProjectDirectoryRoot={[MockFunction]}
           source={null}
         />,
         "_forcedUpdate": false,
         "_instance": [Circular],
         "_newState": null,
         "_rendered": <div
           className="node"
@@ -1222,17 +1199,16 @@ Object {
     "item": Object {
       "contents": Array [],
       "name": "folder",
       "path": "folder/",
       "type": "directory",
     },
     "projectRoot": "",
     "selectItem": [MockFunction],
-    "setExpanded": [MockFunction],
     "setProjectDirectoryRoot": [MockFunction],
     "source": null,
   },
 }
 `;
 
 exports[`SourceTreeItem renderItem should show icon for moz-extension item 1`] = `
 Object {
@@ -1270,17 +1246,16 @@ Object {
       "item": Object {
         "contents": Array [],
         "name": "moz-extension://e37c3c08-beac-a04b-8032-c4f699a1a856",
         "path": "moz-extension://e37c3c08-beac-a04b-8032-c4f699a1a856",
         "type": "directory",
       },
       "projectRoot": "",
       "selectItem": [MockFunction],
-      "setExpanded": [MockFunction],
       "setProjectDirectoryRoot": [MockFunction],
       "source": Object {
         "contentType": "",
         "error": undefined,
         "id": "server1.conn13.child1/39",
         "isBlackBoxed": false,
         "isPrettyPrinted": false,
         "isWasm": false,
@@ -1307,17 +1282,16 @@ Object {
               "contents": Array [],
               "name": "moz-extension://e37c3c08-beac-a04b-8032-c4f699a1a856",
               "path": "moz-extension://e37c3c08-beac-a04b-8032-c4f699a1a856",
               "type": "directory",
             }
           }
           projectRoot=""
           selectItem={[MockFunction]}
-          setExpanded={[MockFunction]}
           setProjectDirectoryRoot={[MockFunction]}
           source={
             Object {
               "contentType": "",
               "error": undefined,
               "id": "server1.conn13.child1/39",
               "isBlackBoxed": false,
               "isPrettyPrinted": false,
@@ -1365,17 +1339,16 @@ Object {
     "item": Object {
       "contents": Array [],
       "name": "moz-extension://e37c3c08-beac-a04b-8032-c4f699a1a856",
       "path": "moz-extension://e37c3c08-beac-a04b-8032-c4f699a1a856",
       "type": "directory",
     },
     "projectRoot": "",
     "selectItem": [MockFunction],
-    "setExpanded": [MockFunction],
     "setProjectDirectoryRoot": [MockFunction],
     "source": Object {
       "contentType": "",
       "error": undefined,
       "id": "server1.conn13.child1/39",
       "isBlackBoxed": false,
       "isPrettyPrinted": false,
       "isWasm": false,
@@ -1423,17 +1396,16 @@ Object {
       "item": Object {
         "contents": Array [],
         "name": "webpack://",
         "path": "webpack://",
         "type": "directory",
       },
       "projectRoot": "",
       "selectItem": [MockFunction],
-      "setExpanded": [MockFunction],
       "setProjectDirectoryRoot": [MockFunction],
       "source": Object {
         "contentType": "",
         "error": undefined,
         "id": "server1.conn13.child1/39",
         "isBlackBoxed": false,
         "isPrettyPrinted": false,
         "isWasm": false,
@@ -1459,17 +1431,16 @@ Object {
               "contents": Array [],
               "name": "webpack://",
               "path": "webpack://",
               "type": "directory",
             }
           }
           projectRoot=""
           selectItem={[MockFunction]}
-          setExpanded={[MockFunction]}
           setProjectDirectoryRoot={[MockFunction]}
           source={
             Object {
               "contentType": "",
               "error": undefined,
               "id": "server1.conn13.child1/39",
               "isBlackBoxed": false,
               "isPrettyPrinted": false,
@@ -1516,17 +1487,16 @@ Object {
     "item": Object {
       "contents": Array [],
       "name": "webpack://",
       "path": "webpack://",
       "type": "directory",
     },
     "projectRoot": "",
     "selectItem": [MockFunction],
-    "setExpanded": [MockFunction],
     "setProjectDirectoryRoot": [MockFunction],
     "source": Object {
       "contentType": "",
       "error": undefined,
       "id": "server1.conn13.child1/39",
       "isBlackBoxed": false,
       "isPrettyPrinted": false,
       "isWasm": false,
@@ -1598,17 +1568,16 @@ Object {
           "url": undefined,
         },
         "name": "one.js",
         "path": "http://mdn.com/one.js",
         "type": "source",
       },
       "projectRoot": "",
       "selectItem": [MockFunction],
-      "setExpanded": [MockFunction],
       "setProjectDirectoryRoot": [MockFunction],
       "source": Object {
         "contentType": "",
         "error": undefined,
         "id": "server1.conn13.child1/39",
         "isBlackBoxed": false,
         "isPrettyPrinted": false,
         "isWasm": false,
@@ -1645,17 +1614,16 @@ Object {
               },
               "name": "one.js",
               "path": "http://mdn.com/one.js",
               "type": "source",
             }
           }
           projectRoot=""
           selectItem={[MockFunction]}
-          setExpanded={[MockFunction]}
           setProjectDirectoryRoot={[MockFunction]}
           source={
             Object {
               "contentType": "",
               "error": undefined,
               "id": "server1.conn13.child1/39",
               "isBlackBoxed": false,
               "isPrettyPrinted": false,
@@ -1726,17 +1694,16 @@ Object {
         "url": undefined,
       },
       "name": "one.js",
       "path": "http://mdn.com/one.js",
       "type": "source",
     },
     "projectRoot": "",
     "selectItem": [MockFunction],
-    "setExpanded": [MockFunction],
     "setProjectDirectoryRoot": [MockFunction],
     "source": Object {
       "contentType": "",
       "error": undefined,
       "id": "server1.conn13.child1/39",
       "isBlackBoxed": false,
       "isPrettyPrinted": false,
       "isWasm": false,
@@ -1809,17 +1776,16 @@ Object {
           "text": undefined,
           "url": "http://mdn.com/one.js",
         },
         "name": "one.js",
         "path": "mdn.com/one.js",
       },
       "projectRoot": "",
       "selectItem": [MockFunction],
-      "setExpanded": [MockFunction],
       "setProjectDirectoryRoot": [MockFunction],
       "source": Object {
         "contentType": "",
         "error": undefined,
         "id": "server1.conn13.child1/39",
         "isBlackBoxed": false,
         "isPrettyPrinted": false,
         "isWasm": false,
@@ -1857,17 +1823,16 @@ Object {
                 "url": "http://mdn.com/one.js",
               },
               "name": "one.js",
               "path": "mdn.com/one.js",
             }
           }
           projectRoot=""
           selectItem={[MockFunction]}
-          setExpanded={[MockFunction]}
           setProjectDirectoryRoot={[MockFunction]}
           source={
             Object {
               "contentType": "",
               "error": undefined,
               "id": "server1.conn13.child1/39",
               "isBlackBoxed": false,
               "isPrettyPrinted": false,
@@ -1939,17 +1904,16 @@ Object {
         "text": undefined,
         "url": "http://mdn.com/one.js",
       },
       "name": "one.js",
       "path": "mdn.com/one.js",
     },
     "projectRoot": "",
     "selectItem": [MockFunction],
-    "setExpanded": [MockFunction],
     "setProjectDirectoryRoot": [MockFunction],
     "source": Object {
       "contentType": "",
       "error": undefined,
       "id": "server1.conn13.child1/39",
       "isBlackBoxed": false,
       "isPrettyPrinted": false,
       "isWasm": false,
--- a/devtools/client/debugger/new/src/components/shared/ManagedTree.js
+++ b/devtools/client/debugger/new/src/components/shared/ManagedTree.js
@@ -136,18 +136,22 @@ class ManagedTree extends Component<Prop
     const { expanded } = this.state;
     return (
       <div className="managed-tree">
         <Tree
           {...this.props}
           isExpanded={item => expanded.has(this.props.getPath(item))}
           focused={this.props.focused}
           getKey={this.props.getPath}
-          onExpand={item => this.setExpanded(item, true, false)}
-          onCollapse={item => this.setExpanded(item, false, false)}
+          onExpand={(item, shouldIncludeChildren) =>
+            this.setExpanded(item, true, shouldIncludeChildren)
+          }
+          onCollapse={(item, shouldIncludeChildren) =>
+            this.setExpanded(item, false, shouldIncludeChildren)
+          }
           onFocus={this.props.onFocus}
           renderItem={(...args) =>
             this.props.renderItem(...args, {
               setExpanded: this.setExpanded
             })
           }
         />
       </div>
--- a/devtools/client/shared/components/reps/reps.js
+++ b/devtools/client/shared/components/reps/reps.js
@@ -4562,17 +4562,17 @@ class Tree extends Component {
           // We can stop the propagation since click handler on the node can be
           // created in `renderItem`.
           e.stopPropagation();
 
           // Since the user just clicked the node, there's no need to check if
           // it should be scrolled into view.
           this._focus(item, { preventAutoScroll: true });
           if (this.props.isExpanded(item)) {
-            this.props.onCollapse(item);
+            this.props.onCollapse(item, e.altKey);
           } else {
             this.props.onExpand(item, e.altKey);
           }
         }
       });
     });
 
     const style = Object.assign({}, this.props.style || {}, {