MD Settings: Add mechanism to restore focus after subpage exiting.

chrome/browser/resources/settings/settings_page/settings_animated_pages.js

Index: chrome/browser/resources/settings/settings_page/settings_animated_pages.js
diff --git a/chrome/browser/resources/settings/settings_page/settings_animated_pages.js b/chrome/browser/resources/settings/settings_page/settings_animated_pages.js
index 97d51cd7eb4624e8e380f006b38a4b243f9cb7bd..76881d1aa33d678d60fd88fdc025b915e1067b57 100644
--- a/chrome/browser/resources/settings/settings_page/settings_animated_pages.js
+++ b/chrome/browser/resources/settings/settings_page/settings_animated_pages.js
@@ -13,6 +13,11 @@
  *      <!-- Insert your section controls here -->
  *    </settings-animated-pages>
  */
+
+/**
+ */
+var FocusConfig;
+
 Polymer({
   is: 'settings-animated-pages',
 
@@ -26,11 +31,23 @@ Polymer({
      *
      * The section name must match the name specified in route.js.
      */
-    section: {
-      type: String,
-    },
+    section: String,
+
+    /**
+     * A Map specifying which element should be focused when exiting a subpage.
+     * The key of the map holds a settings.Route path, and the value holds a
+     * query selector that identifies the desired element.
+     * @type {?Map<string, string>}
+     */
+    focusConfig: Object,
   },
 
+  /**
+   * The last "previous" route reported by the router.
+   * @private {?settings.Route}
+   */
+  lastOldRoute_: null,
+
   /** @override */
   created: function() {
     // Observe the light DOM so we know when it's ready.
@@ -39,6 +56,30 @@ Polymer({
   },
 
   /**
+   * @param {!Event} e
+   * @private
+   */
+  onIronSelect_: function(e) {
+    if (!this.focusConfig || !this.lastOldRoute_)
+      return;
+
+    if (e.detail.item.tagName != 'NEON-ANIMATABLE')

[Dan Beam, 2017/04/11 00:06:07]

nit: combine with above if

[dpapad, 2017/04/11 00:18:32]

Done.

+      return;
+
+    var querySelector = this.focusConfig.get(this.lastOldRoute_.path);

[Dan Beam, 2017/04/11 00:06:07]

nit: the argument passed to querySelector is just a "selector", so I think this
var should be named "selector" or at least not have a "query"

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
https://www.w3.org/TR/selectors-api/#interface-definitions
https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/dom/Conta...

+    if (querySelector) {
+      // neon-animatable has "display: none" until the animation finishes, so
+      // calling focus() on any of its children has no effect until
+      // "display: none" is removed. Therefore can't call focus() from within
+      // the currentRouteChanged callback. Using 'iron-select' listener which
+      // fires after the animation has finished allows focus() to work as
+      // expected.
+      var trigger = assert(this.querySelector(querySelector));

[Dan Beam, 2017/04/11 00:06:07]

nit: this.querySelector(selector).focus();

(no assert() needed if it will just blow up naturally)

[dpapad, 2017/04/11 00:18:32]

Done. Agreed. An assert() is more useful when it is accommodated by a helpful
error message. Otherwise just letting the code blow up is just as good.

+      trigger.focus();
+    }
+  },
+
+  /**
    * Called initially once the effective children are ready.
    * @private
    */
@@ -66,6 +107,8 @@ Polymer({
 
   /** @protected */
   currentRouteChanged: function(newRoute, oldRoute) {
+    this.lastOldRoute_ = oldRoute;
+
     if (newRoute.section == this.section && newRoute.isSubpage()) {
       this.switchToSubpage_(newRoute, oldRoute);
     } else {