Bug 1529680 - [release 127] Fixing source selection with the keyboard (fixes #7874) (#7874) (#7992). r=dwalsh

devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTree.js

@@ -164,6 +164,10 @@ class SourcesTree extends Component<Props, State> {
     this.props.focusItem({ thread: this.props.thread, item });
   };
 
+  onActivate = (item: TreeNode) => {
+    this.selectItem(item);
+  };
+
   // NOTE: we get the source from sources because item.contents is cached
   getSource(item: TreeNode): ?Source {
     const source = getSourceFromNode(item);
@@ -194,13 +198,6 @@ class SourcesTree extends Component<Props, State> {
     this.props.setExpandedState(this.props.thread, expandedState);
   };
 
-  onKeyDown = (e: KeyboardEvent) => {
-    const { focused } = this.props;
-    if (e.keyCode === 13 && focused) {
-      this.selectItem(focused);
-    }
-  };
-
   isEmpty() {
     const { sourceTree } = this.state;
     return sourceTree.contents.length === 0;
@@ -280,6 +277,7 @@ class SourcesTree extends Component<Props, State> {
       onCollapse: this.onCollapse,
       onExpand: this.onExpand,
       onFocus: this.onFocus,
+      onActivate: this.onActivate,
       renderItem: this.renderItem,
       preventBlur: true
     };
@@ -336,7 +334,7 @@ class SourcesTree extends Component<Props, State> {
 
     return this.renderPane(
       this.renderThreadHeader(),
-      <div key="tree" className="sources-list" onKeyDown={this.onKeyDown}>
+      <div key="tree" className="sources-list">
         {this.renderTree()}
       </div>
     );

devtools/client/debugger/new/src/components/PrimaryPanes/tests/SourcesTree.spec.js

@@ -177,26 +177,17 @@ describe("SourcesTree", () => {
     });
   });
 
-  describe("focusItem", () => {
-    it("update the focused item", async () => {
+  describe("activateItem", () => {
+    it("select activated item", async () => {
+      const { instance, props } = render();
       const item = createMockItem();
-      const { component, props } = render({ focused: item });
+      const spy = jest.spyOn(instance, "selectItem");
 
-      await component
-        .find(".sources-list")
-        .simulate("keydown", { keyCode: 13 });
-
-      expect(props.selectSource).toHaveBeenCalledWith(item.contents.id);
-    });
-
-    it("allows focus on the (index)", async () => {
-      const item = createMockItem("https://davidwalsh.name/", "(index)");
-
-      const { component, props } = render({ focused: item });
-      await component
-        .find(".sources-list")
-        .simulate("keydown", { keyCode: 13 });
-      expect(props.selectSource).toHaveBeenCalledWith(item.contents.id);
+      instance.onActivate(item);
+      expect(spy).toHaveBeenCalledWith(item);
+      expect(props.selectSource).toHaveBeenCalledWith(
+        "server1.conn13.child1/39"
+      );
     });
   });
 
@@ -214,14 +205,6 @@ describe("SourcesTree", () => {
       instance.selectItem(createMockDirectory());
       expect(props.selectSource).not.toHaveBeenCalled();
     });
-
-    it("does not select if no item is focused on", async () => {
-      const { component, props } = render();
-      await component
-        .find(".sources-list")
-        .simulate("keydown", { keyCode: 13 });
-      expect(props.selectSource).not.toHaveBeenCalled();
-    });
   });
 
   describe("handles items", () => {

devtools/client/debugger/new/src/components/PrimaryPanes/tests/__snapshots__/SourcesTree.spec.js.snap

@@ -8,7 +8,6 @@ exports[`SourcesTree After changing expanded nodes Shows the tree with four.js,
   <div
     className="sources-list"
     key="tree"
-    onKeyDown={[Function]}
   >
     <ManagedTree
       autoExpandAll={false}
@@ -26,6 +25,7 @@ exports[`SourcesTree After changing expanded nodes Shows the tree with four.js,
       getRoots={[Function]}
       itemHeight={21}
       key="full"
+      onActivate={[Function]}
       onCollapse={[Function]}
       onExpand={[Function]}
       onFocus={[Function]}
@@ -44,7 +44,6 @@ exports[`SourcesTree Should show the tree with nothing expanded 1`] = `
   <div
     className="sources-list"
     key="tree"
-    onKeyDown={[Function]}
   >
     <ManagedTree
       autoExpandAll={false}
@@ -55,6 +54,7 @@ exports[`SourcesTree Should show the tree with nothing expanded 1`] = `
       getRoots={[Function]}
       itemHeight={21}
       key="full"
+      onActivate={[Function]}
       onCollapse={[Function]}
       onExpand={[Function]}
       onFocus={[Function]}
@@ -73,7 +73,6 @@ exports[`SourcesTree When loading initial source Shows the tree with one.js, two
   <div
     className="sources-list"
     key="tree"
-    onKeyDown={[Function]}
   >
     <ManagedTree
       autoExpandAll={false}
@@ -91,6 +90,7 @@ exports[`SourcesTree When loading initial source Shows the tree with one.js, two
       getRoots={[Function]}
       itemHeight={21}
       key="full"
+      onActivate={[Function]}
       onCollapse={[Function]}
       onExpand={[Function]}
       onFocus={[Function]}
@@ -109,7 +109,6 @@ exports[`SourcesTree on receiving new props updates highlighted items updates hi
   <div
     className="sources-list"
     key="tree"
-    onKeyDown={[Function]}
   >
     <ManagedTree
       autoExpandAll={false}
@@ -251,6 +250,7 @@ exports[`SourcesTree on receiving new props updates highlighted items updates hi
       }
       itemHeight={21}
       key="full"
+      onActivate={[Function]}
       onCollapse={[Function]}
       onExpand={[Function]}
       onFocus={[Function]}