Make cr.ui.Focus* play nice with Shadow DOM and MD chrome://downloads

chrome/browser/resources/md_downloads/manager.js

Index: chrome/browser/resources/md_downloads/manager.js
diff --git a/chrome/browser/resources/md_downloads/manager.js b/chrome/browser/resources/md_downloads/manager.js
index 186cadcf28664bf0520a615dac8c1a23f426c5b7..563cd1b6daba5c34d43a4ff37ce3f9bbae0e9e52 100644
--- a/chrome/browser/resources/md_downloads/manager.js
+++ b/chrome/browser/resources/md_downloads/manager.js
@@ -82,6 +82,33 @@ cr.define('downloads', function() {
       });
     },
 
+    /** @private */
+    rebuildFocusGrid_: function() {
+      var activeElement = this.shadowRoot.activeElement;
+
+      var activeItem;
+      if (activeElement && activeElement.tagName == 'download-item')
+        activeItem = activeElement;
+
+      var activeControl = activeItem && activeItem.shadowRoot.activeElement;
+
+      /** @private {!cr.ui.FocusGrid} */
+      this.focusGrid_ = this.focusGrid_ || new cr.ui.FocusGrid;
+      this.focusGrid_.destroy();
+
+      var boundary = this.$['downloads-list'];
+
+      this.items_.forEach(function(item) {
+        var focusRow = new downloads.FocusRow(item.content, boundary);
+        this.focusGrid_.addRow(focusRow);
+
+        if (item == activeItem && !cr.ui.FocusRow.isFocusable(activeControl))

[hcarmona, 2015/08/24 21:00:37]

When would you get an active control that isn't focusable?

[Dan Beam, 2015/08/24 22:59:30]

enter on "Pause" hides and "Resume" is shown

[hcarmona, 2015/08/24 23:49:19]

Acknowledged.

+          focusRow.getEquivalentElement(activeControl).focus();
+      }, this);
+
+      this.focusGrid_.ensureRowActive();
+    },
+
     /**
      * @return {number} The number of downloads shown on the page.
      * @private
@@ -161,6 +188,9 @@ cr.define('downloads', function() {
 
       this.onResize_();
       this.$.panel.classList.remove('loading');
+
+      var allReady = this.items_.map(function(i) { return i.readyPromise; });
+      Promise.all(allReady).then(this.rebuildFocusGrid_.bind(this));

[hcarmona, 2015/08/24 21:00:37]

Is it possible to update the row rather than rebuild the grid each time
an item is ready?

[Dan Beam, 2015/08/24 22:59:30]

yes, but until there's a reason to, it just complicates the code

[hcarmona, 2015/08/24 23:49:19]

One problem from the extensions page was that focus would be lost when
the grid was rebuilt. This made it hard to use with the keyboard.

I don't think your code has this issue because you're not changing the
elements, just decorating them.

[Dan Beam, 2015/08/25 03:22:29]

I know, I fixed these issues recently ;)
that's why we store the active control before we destroy() the grid
right

     },
 
     /**
@@ -168,7 +198,18 @@ cr.define('downloads', function() {
      * @private
      */
     updateItem_: function(data) {
-      this.idMap_[data.id].update(data);
+      var item = this.idMap_[data.id];
+
+      var activeControl = this.shadowRoot.activeElement == item ?
+          item.shadowRoot.activeElement : null;
+
+      item.update(data);
+
+      if (activeControl && !cr.ui.FocusRow.isFocusable(activeControl)) {
+        var focusRow = this.focusGrid_.getRowForRoot(item.content);
+        focusRow.getEquivalentElement(activeControl).focus();
+      }
+
       this.onResize_();
     },
   });