Bug 1400963 - Scroll selected row into view in JSON Viewer. r=Honza

MozReview-Commit-ID: I7QuuGzHaiA

--HG--
extra : rebase_source : 8d7696ce1e60e318518371fd65390dfd5f01ca37

devtools/client/jsonview/test/browser.ini

@@ -43,6 +43,7 @@ skip-if = (os == 'linux' && bits == 32 && debug) # bug 1328915, disable linux32
 [browser_jsonview_nojs.js]
 [browser_jsonview_nul.js]
 [browser_jsonview_object-type.js]
+[browser_jsonview_row_selection.js]
 [browser_jsonview_save_json.js]
 support-files =
   !/toolkit/content/tests/browser/common/mockTransfer.js

devtools/client/jsonview/test/browser_jsonview_row_selection.js

@@ -0,0 +1,44 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+add_task(function* () {
+  info("Test JSON row selection started");
+
+  // Create a tall JSON so that there is a scrollbar.
+  let numRows = 1e3;
+  let json = JSON.stringify(Array(numRows).fill().map((_, i) => i));
+  let tab = yield addJsonViewTab("data:application/json," + json);
+
+  is(yield getElementCount(".treeRow"), numRows, "Got the expected number of rows.");
+  yield assertRowSelected(null);
+  yield evalInContent("var scroller = $('.jsonPanelBox .panelContent')");
+  ok(yield evalInContent("scroller.clientHeight < scroller.scrollHeight"),
+     "There is a scrollbar.");
+  is(yield evalInContent("scroller.scrollTop"), 0, "Initially scrolled to the top.");
+
+  // Click to select last row.
+  yield evalInContent("$('.treeRow:last-child').click()");
+  yield assertRowSelected(numRows);
+  is(yield evalInContent("scroller.scrollTop + scroller.clientHeight"),
+     yield evalInContent("scroller.scrollHeight"), "Scrolled to the bottom.");
+
+  // Click to select 2nd row.
+  yield evalInContent("$('.treeRow:nth-child(2)').click()");
+  yield assertRowSelected(2);
+  ok(yield evalInContent("scroller.scrollTop > 0"), "Not scrolled to the top.");
+
+  // Synthetize up arrow key to select first row.
+  yield evalInContent("$('.treeTable').focus()");
+  yield BrowserTestUtils.synthesizeKey("VK_UP", {}, tab.linkedBrowser);
+  yield assertRowSelected(1);
+  is(yield evalInContent("scroller.scrollTop"), 0, "Scrolled to the top.");
+});
+
+async function assertRowSelected(rowNum) {
+  let idx = evalInContent("[].indexOf.call($$('.treeRow'), $('.treeRow.selected'))");
+  is(await idx + 1, +rowNum, `${rowNum ? "The row #" + rowNum : "No row"} is selected.`);
+}

devtools/client/jsonview/test/doc_frame_script.js

@@ -119,3 +119,8 @@ addMessageListener("Test:JsonView:Eval", function (msg) {
   let result = content.eval(msg.data.code);
   sendAsyncMessage(msg.name, {result});
 });
+
+Components.utils.exportFunction(content.document.querySelector.bind(content.document),
+  content, {defineAs: "$"});
+Components.utils.exportFunction(content.document.querySelectorAll.bind(content.document),
+  content, {defineAs: "$$"});

devtools/client/shared/components/tree/TreeView.js

@@ -9,6 +9,7 @@
 define(function (require, exports, module) {
   const { cloneElement, Component, createFactory, DOM: dom, PropTypes } =
     require("devtools/client/shared/vendor/react");
+  const { findDOMNode } = require("devtools/client/shared/vendor/react-dom");
 
   // Reps
   const { ObjectProvider } = require("./ObjectProvider");
@@ -153,7 +154,7 @@ define(function (require, exports, module) {
         // TODO: Do better than just selecting the first row again. We want to
         // select (in order) previous, next or parent in case when selected
         // row is removed.
-        this.selectRow(this.rows[0].props.member.path);
+        this.selectRow(this.rows[0]);
       }
     }
 
@@ -255,13 +256,13 @@ define(function (require, exports, module) {
         case "ArrowDown":
           let nextRow = this.rows[index + 1];
           if (nextRow) {
-            this.selectRow(nextRow.props.member.path);
+            this.selectRow(nextRow);
           }
           break;
         case "ArrowUp":
           let previousRow = this.rows[index - 1];
           if (previousRow) {
-            this.selectRow(previousRow.props.member.path);
+            this.selectRow(previousRow);
           }
           break;
         default:
@@ -277,7 +278,7 @@ define(function (require, exports, module) {
       if (cell && cell.classList.contains("treeLabelCell")) {
         this.toggle(nodePath);
       }
-      this.selectRow(nodePath);
+      this.selectRow(event.currentTarget);
     }
 
     getSelectedRow(rows) {
@@ -287,10 +288,12 @@ define(function (require, exports, module) {
       return rows.find(row => this.isSelected(row.props.member.path));
     }
 
-    selectRow(nodePath) {
+    selectRow(row) {
+      row = findDOMNode(row);
       this.setState(Object.assign({}, this.state, {
-        selected: nodePath
+        selected: row.id
       }));
+      row.scrollIntoView({block: "nearest"});
     }
 
     isSelected(nodePath) {