Settings: settings-internet-page, replace /deep/ selector with selector in function

Bug: 860069
Change-Id: Ifa72a55db0f15050bb115a6f50c319124ec367ed
Reviewed-on: https://chromium-review.googlesource.com/1155929
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#580038}

chrome/browser/resources/settings/internet_page/internet_page.js

@@ -125,7 +125,7 @@ Polymer({
       }
     },
 
-    /** @private {!Map<string, string>} */
+    /** @private {!Map<string, Element>} */
     focusConfig_: {
       type: Object,
       value: function() {
@@ -239,18 +239,19 @@ Polymer({
       return;
 
     // Focus the subpage arrow where appropriate.
-    let selector;
+    let element;
     if (route == settings.routes.INTERNET_NETWORKS) {
       // iron-list makes the correct timing to focus an item in the list
       // very complicated, and the item may not exist, so just focus the
       // entire list for now.
-      selector = '* /deep/ #networkList';
+      element = this.$$('settings-internet-subpage').$$('#networkList');
     } else if (this.detailType_) {
-      selector =
-          '* /deep/ #' + this.detailType_ + ' /deep/ .subpage-arrow button';
+      element = this.$$('network-summary')
+                    .$$(`#${this.detailType_}`)
+                    .$$('.subpage-arrow button');
     }
-    if (selector && this.querySelector(selector))
-      this.focusConfig_.set(oldRoute.path, selector);
+    if (element)
+      this.focusConfig_.set(oldRoute.path, element);
     else
       this.focusConfig_.delete(oldRoute.path);
   },

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

@@ -32,9 +32,9 @@ Polymer({
     /**
      * 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
-     * either a query selector that identifies the desired element or a function
-     * to be run when a neon-animation-finish event is handled.
-     * @type {?Map<string, (string|Function)>}
+     * either a query selector that identifies the desired element, an element
+     * or a function to be run when a neon-animation-finish event is handled.
+     * @type {?Map<string, (string|Element|Function)>}
      */
     focusConfig: Object,
   },
@@ -107,20 +107,23 @@ Polymer({
     if (!e.detail.item.matches(query))
       return;
 
-    const selectorOrFunction = this.focusConfig.get(this.previousRoute_.path);
-    if (selectorOrFunction) {
+    let pathConfig = this.focusConfig.get(this.previousRoute_.path);
+    if (pathConfig) {
+      let handler;
+      if (typeof pathConfig == 'function') {
+        handler = pathConfig;
+      } else {
+        handler = () => {
+          if (typeof pathConfig == 'string')
+            pathConfig = assert(this.querySelector(pathConfig));
+          cr.ui.focusWithoutInk(/** @type {!Element} */ (pathConfig));
+        };
+      }
       // 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, don't set focus from within
       // the currentRouteChanged callback.
-      listenOnce(this, 'neon-animation-finish', () => {
-        if (typeof selectorOrFunction == 'function') {
-          selectorOrFunction();
-        } else {
-          const selector = /** @type {string} */ (selectorOrFunction);
-          cr.ui.focusWithoutInk(assert(this.querySelector(selector)));
-        }
-      });
+      listenOnce(this, 'neon-animation-finish', handler);
     }
   },