Bug 1450930 - The Page Down/Up keys doesn't work after pressing Home/End keys. r?yzen draft
authorMicah Tigley <mtigley@mozilla.com>
Wed, 06 Jun 2018 11:10:49 -0400
changeset 804757 2820fc85abce064209078a68fa89229e583273c9
parent 803891 c4c90903c8e9ca2e76edc680dde3b231d1f3f447
push id112462
push userbmo:mtigley@mozilla.com
push dateWed, 06 Jun 2018 15:13:48 +0000
reviewersyzen
bugs1450930
milestone62.0a1
Bug 1450930 - The Page Down/Up keys doesn't work after pressing Home/End keys. r?yzen
devtools/client/shared/components/tree/TreeView.js
--- a/devtools/client/shared/components/tree/TreeView.js
+++ b/devtools/client/shared/components/tree/TreeView.js
@@ -286,20 +286,27 @@ define(function(require, exports, module
         case "ArrowUp":
           const previousRow = this.rows[index - 1];
           if (previousRow) {
             this.selectRow(previousRow);
           }
           break;
         case "Home":
           const firstRow = this.rows[0];
+
           if (firstRow) {
-            this.selectRow(firstRow);
+            // Due to the styling, the first row is sometimes overlapped by
+            // the table head. So we want to force the tree to scroll to the very top.
+            this.selectRow(firstRow, {
+              block: "end",
+              inline: "nearest"
+            });
           }
           break;
+
         case "End":
           const lastRow = this.rows[this.rows.length - 1];
           if (lastRow) {
             this.selectRow(lastRow);
           }
           break;
       }
 
@@ -336,26 +343,29 @@ define(function(require, exports, module
       if (!row) {
         // If selected row is not found, return index of the first row.
         return 0;
       }
 
       return this.rows.indexOf(row);
     }
 
-    selectRow(row) {
+    selectRow(row, scrollOptions = {block: "nearest"}) {
       row = findDOMNode(row);
+
       if (this.state.selected === row.id) {
+        row.scrollIntoView(scrollOptions);
         return;
       }
 
       this.setState(Object.assign({}, this.state, {
         selected: row.id
       }));
-      row.scrollIntoView({block: "nearest"});
+
+      row.scrollIntoView(scrollOptions);
     }
 
     isSelected(nodePath) {
       return nodePath === this.state.selected;
     }
 
     // Filtering & Sorting