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

chrome/browser/resources/settings/settings_page/settings_animated_pages.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.
 
 /**
  * @fileoverview
  * 'settings-animated-pages' is a container for a page and animated subpages.
  * It provides a set of common behaviors and animations.
  *
  * Example:
  *
  *    <settings-animated-pages section="privacy">
  *      <!-- Insert your section controls here -->
  *    </settings-animated-pages>
  */
+
+/**
+ */
+var FocusConfig;
+
 Polymer({
   is: 'settings-animated-pages',
 
   behaviors: [settings.RouteObserverBehavior],
 
   properties: {
     /**
      * Routes with this section activate this element. For instance, if this
      * property is 'search', and currentRoute.section is also set to 'search',
      * this element will display the subpage in currentRoute.subpage.
      *
      * 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.
     this.lightDomObserver_ = Polymer.dom(this).observeNodes(
         this.lightDomChanged_.bind(this));
   },
 
   /**
+   * @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
    */
   lightDomChanged_: function() {
     if (this.lightDomReady_)
       return;
 
     this.lightDomReady_ = true;
     Polymer.dom(this).unobserveNodes(this.lightDomObserver_);
     this.runQueuedRouteChange_();
   },
 
   /**
    * Calls currentRouteChanged with the deferred route change info.
    * @private
    */
   runQueuedRouteChange_: function() {
     if (!this.queuedRouteChange_)
       return;
     this.async(this.currentRouteChanged.bind(
         this,
         this.queuedRouteChange_.newRoute,
         this.queuedRouteChange_.oldRoute));
   },
 
   /** @protected */
   currentRouteChanged: function(newRoute, oldRoute) {
+    this.lastOldRoute_ = oldRoute;
+
     if (newRoute.section == this.section && newRoute.isSubpage()) {
       this.switchToSubpage_(newRoute, oldRoute);
     } else {
       this.$.animatedPages.exitAnimation = 'fade-out-animation';
       this.$.animatedPages.entryAnimation = 'fade-in-animation';
       this.$.animatedPages.selected = 'default';
     }
   },
 
   /**
@@ skipping 65 matching lines @@
     // instance, such that the stamped instance will also be ignored by the
     // searching algorithm.
     if (template.hasAttribute('no-search'))
       subpage.setAttribute('no-search', '');
 
     // Render synchronously so neon-animated-pages can select the subpage.
     template.if = true;
     template.render();
   },
 });