Defer creating ChromeVox node menus to make menus open more quickly.

chrome/browser/resources/chromeos/chromevox/cvox2/background/panel_menu.js

Index: chrome/browser/resources/chromeos/chromevox/cvox2/background/panel_menu.js
diff --git a/chrome/browser/resources/chromeos/chromevox/cvox2/background/panel_menu.js b/chrome/browser/resources/chromeos/chromevox/cvox2/background/panel_menu.js
index f160480783052f7ac7af4e9c20cd3572ef3a8094..c221582fea0c189f55fd8c0930b4dcfa0b84acd2 100644
--- a/chrome/browser/resources/chromeos/chromevox/cvox2/background/panel_menu.js
+++ b/chrome/browser/resources/chromeos/chromevox/cvox2/background/panel_menu.js
@@ -229,43 +229,22 @@ PanelMenu.prototype = {
  * @param {string} menuMsg The msg id of the menu.
  * @param {chrome.automation.AutomationNode} node ChromeVox's current position.
  * @param {AutomationPredicate.Unary} pred Filter to use on the document.
+ * @param {boolean} defer If true, defers populating the menu.
  * @extends {PanelMenu}
  * @constructor
  */
-PanelNodeMenu = function(menuMsg, node, pred) {
+PanelNodeMenu = function(menuMsg, node, pred, defer) {
   PanelMenu.call(this, menuMsg);
-  var nodes = [];
-  var selectNext = false;
-  var activeIndex = -1;
-  AutomationUtil.findNodePre(node.root, constants.Dir.FORWARD,
-      /** @type {AutomationPredicate.Unary} */(function(n) {
-        if (n === node)
-          selectNext = true;
-
-        if (pred(n)) {
-          var output = new Output();
-          var range = cursors.Range.fromNode(n);
-          output.withSpeech(range, range, Output.EventType.NAVIGATE);
-          var label = output.toString();
-          this.addMenuItem(label, '', function() {
-            chrome.extension.getBackgroundPage().ChromeVoxState
-                .instance['navigateToRange'](cursors.Range.fromNode(n));
-          });
-          if (selectNext) {
-            activeIndex = this.items_.length - 1;
-            selectNext = false;
-          }
-        }
-      }).bind(this)
-  );
+  this.node_ = node;
+  this.pred_ = pred;
 
-  if (!this.items_.length) {
-    this.addMenuItem(
-        Msgs.getMsg('panel_menu_item_none'), '', function() {});
-    this.activateItem(0);
+  if (defer) {
+    window.setTimeout((function() {
+      this.populate_();
+    }).bind(this), 500);

[David Tseng, 2016/10/24 22:19:11]

It would be great if defer could populate the menus when it gets activated for
the first time. I'm not sure what happens now if one arrows rapidly across all
top-level menus.

[dmazzoni, 2016/10/27 18:56:36]

I tried that, but that would actually be more janky.

I cleaned up the code a bit more and now there's no
need for an arbitrary timeout of 500 ms. Instead, all
of the menus other than the one you select do the
search in "chunks" of about 100 nodes before calling
setTimeout.

The result is that if you open the headings list
directly, for example, it pauses briefly to populate the menu
and then opens directly to it, giving you accurate
feedback (for example Table Of Contents Heading 2
5 of 17).

If you open the menus in general without choosing a
PanelNodeMenu, those menus all populate asynchronously,
so if you are very fast and navigate to one while it's
still populating you might get an incomplete result.
However, this is unlikely since even for a large page
it only takes a second or two to populate all five.
That one or two seconds makes a big difference in
the perceived time to open the menu in general, though,
which is why I think this change is worth it.

+  } else {
+    this.populate_();
   }
-  if (activeIndex >= 0)
-    this.activateItem(activeIndex);
 };
 
 PanelNodeMenu.prototype = {
@@ -276,5 +255,40 @@ PanelNodeMenu.prototype = {
     var activeItem = this.activeIndex_;
     PanelMenu.prototype.activate.call(this);
     this.activateItem(activeItem);
+  },
+

[David Tseng, 2016/10/24 22:19:11]

js doc

[dmazzoni, 2016/10/27 18:56:36]

Done.

+  populate_: function() {
+    var nodes = [];
+    var selectNext = false;
+    var activeIndex = -1;
+    AutomationUtil.findNodePre(this.node_.root, constants.Dir.FORWARD,
+        /** @type {AutomationPredicate.Unary} */(function(n) {
+          if (n === this.node_)
+            selectNext = true;
+
+          if (this.pred_(n)) {
+            var output = new Output();
+            var range = cursors.Range.fromNode(n);
+            output.withSpeech(range, range, Output.EventType.NAVIGATE);
+            var label = output.toString();
+            this.addMenuItem(label, '', function() {
+              chrome.extension.getBackgroundPage().ChromeVoxState
+                  .instance['navigateToRange'](cursors.Range.fromNode(n));
+            });
+            if (selectNext) {
+              activeIndex = this.items_.length - 1;
+              selectNext = false;
+            }
+          }
+        }).bind(this)
+                              );
+
+    if (!this.items_.length) {
+      this.addMenuItem(
+          Msgs.getMsg('panel_menu_item_none'), '', function() {});
+      this.activateItem(0);
+    }
+    if (activeIndex >= 0)
+      this.activateItem(activeIndex);
   }
 };