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

chrome/browser/resources/md_downloads/manager.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('downloads', function() {
   var Manager = Polymer({
     is: 'downloads-manager',
 
     created: function() {
       /** @private {!downloads.ActionService} */
@@ skipping 64 matching lines @@
     /** @private */
     onResize_: function() {
       // TODO(dbeam): expose <paper-header-panel>'s #mainContainer in Polymer.
       var container = this.$.panel.$.mainContainer;
       var scrollbarWidth = container.offsetWidth - container.clientWidth;
       this.items_.forEach(function(item) {
         item.scrollbarWidth = scrollbarWidth;
       });
     },
 
+    /** @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
      */
     size_: function() {
       return this.items_.length;
     },
 
     /**
      * Called when all items need to be updated.
@@ skipping 59 matching lines @@
         this.$['downloads-list'].insertBefore(item, before);
       }
 
       this.hasDownloads_ = this.size_() > 0;
 
       if (loadTimeData.getBoolean('allowDeletingHistory'))
         this.$.toolbar.downloadsShowing = this.hasDownloads_;
 
       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

     },
 
     /**
      * @param {!downloads.Data} data
      * @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_();
     },
   });
 
   Manager.size = function() {
     return document.querySelector('downloads-manager').size_();
   };
 
   Manager.updateAll = function(list) {
     document.querySelector('downloads-manager').updateAll_(list);
   };
 
   Manager.updateItem = function(item) {
     document.querySelector('downloads-manager').updateItem_(item);
   };
 
   Manager.onLoad = function() {
     document.querySelector('downloads-manager').onLoad_();
   };
 
   return {Manager: Manager};
 });
 
 window.addEventListener('load', downloads.Manager.onLoad);