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..18fe508cefda526a0384328fa6b00ee5bbad9dee 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,7 @@
  *      <!-- Insert your section controls here -->
  *    </settings-animated-pages>
  */
+
 Polymer({
   is: 'settings-animated-pages',
 
@@ -26,11 +27,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}
+   */
+  previousRoute_: null,
+
   /** @override */
   created: function() {
     // Observe the light DOM so we know when it's ready.
@@ -39,6 +52,28 @@ Polymer({
   },
 
   /**
+   * @param {!Event} e
+   * @private
+   */
+  onIronSelect_: function(e) {
+    if (!this.focusConfig || !this.previousRoute_ ||
+        e.detail.item.tagName != 'NEON-ANIMATABLE') {
+      return;
+    }
+
+    var selector = this.focusConfig.get(this.previousRoute_.path);
+    if (selector) {
+      // 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.
+      this.querySelector(selector).focus();
+    }
+  },
+
+  /**
    * Called initially once the effective children are ready.
    * @private
    */
@@ -66,6 +101,8 @@ Polymer({
 
   /** @protected */
   currentRouteChanged: function(newRoute, oldRoute) {
+    this.previousRoute_ = oldRoute;
+
     if (newRoute.section == this.section && newRoute.isSubpage()) {
       this.switchToSubpage_(newRoute, oldRoute);
     } else {