Maintain focus when items in a network-list are updated.

Previously, focus would jump to the first element when
the underlying network list was updated.  This fix
attempts to maintain focus on a particular network if it
is still present, otherwise it tries to stay on the same
index, and finally falls back to the first element.

Fixed: 1005934
Change-Id: I9a7e2307bc604f8ba08b659e22f80ba88ad66156
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1920188Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Jon Mann <jonmann@chromium.org>
Cr-Commit-Position: refs/heads/master@{#721367}

ui/webui/resources/cr_components/chromeos/network/network_list.js

@@ -76,28 +76,73 @@ Polymer({
   /** @private {boolean} */
   focusRequested_: false,
 
+  /**
+   * GUID of the focused network before the list is updated.  This
+   * is used to re-apply focus to the same network if possible.
+   * @private {string}
+   */
+  focusedGuidBeforeUpdate_: '',
+
+  /**
+   * Index of the focused network before the list is updated.  This
+   * is used to re-apply focus when the previously focused network
+   * is no longer listed.
+   * @private {number}
+   */
+  focusedIndexBeforeUpdate_: -1,
+
   focus: function() {
     this.focusRequested_ = true;
     this.focusFirstItem_();
   },
 
+  /** @private */
+  saveFocus_: function() {
+    if (this.shadowRoot.activeElement &&
+        this.shadowRoot.activeElement.is === 'network-list-item') {
+      const focusedNetwork = /** @type {!NetworkList.NetworkListItem} */ (
+          this.shadowRoot.activeElement);
+      if (focusedNetwork.item && focusedNetwork.item.guid) {
+        this.focusedGuidBeforeUpdate = focusedNetwork.item.guid;
+        this.focusedIndexBeforeUpdate_ = this.listItems_.findIndex(
+            n => n.guid === this.focusedGuidBeforeUpdate);
+        return;
+      }
+    }
+    this.focusedGuidBeforeUpdate = '';
+    this.focusedIndexBeforeUpdate_ = -1;
+  },
+
+  /** @private */
+  restoreFocus_: function() {
+    if (this.focusedGuidBeforeUpdate) {
+      let currentIndex = this.listItems_.findIndex(
+          (n) => n.guid === this.focusedGuidBeforeUpdate);
+      if (currentIndex < 0) {
+        currentIndex = this.focusedIndexBeforeUpdate_ < this.listItems_.length ?
+            this.focusedIndexBeforeUpdate_ :
+            0;
+      }
+      this.$.networkList.focusItem(currentIndex);
+    } else if (this.focusRequested_) {
+      this.async(function() {
+        this.focusFirstItem_();
+      });
+    }
+  },
+
   /** @private */
   updateListItems_: function() {
     this.saveScroll(this.$.networkList);
-    const beforeNetworks = this.customItems.filter(function(item) {
-      return item.showBeforeNetworksList == true;
-    });
-    const afterNetworks = this.customItems.filter(function(item) {
-      return item.showBeforeNetworksList == false;
-    });
+    this.saveFocus_();
+    const beforeNetworks =
+        this.customItems.filter(n => n.showBeforeNetworksList == true);
+    const afterNetworks =
+        this.customItems.filter(n => n.showBeforeNetworksList == false);
     this.listItems_ = beforeNetworks.concat(this.networks, afterNetworks);
     this.restoreScroll(this.$.networkList);
     this.updateScrollableContents();
-    if (this.focusRequested_) {
-      this.async(function() {
-        this.focusFirstItem_();
-      });
-    }
+    this.restoreFocus_();
   },
 
   /** @private */

ui/webui/resources/cr_components/chromeos/network/network_list_types.js

@@ -23,3 +23,9 @@ NetworkList.CustomItemState;
 
 /** @typedef {OncMojo.NetworkStateProperties|NetworkList.CustomItemState} */
 NetworkList.NetworkListItemType;
+
+/**
+ * Custom data for implementation specific network list items.
+ * @typedef {{item: (!NetworkList.NetworkListItemType|undefined)}}
+ */
+NetworkList.NetworkListItem;