MD Settings: Restore focus after closing dialogs, for content settings.

chrome/browser/resources/settings/site_settings/site_list.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
  * 'site-list' shows a list of Allowed and Blocked sites for a given
  * category.
  */
 Polymer({
@@ skipping 90 matching lines @@
       type: Object,
       values: {
         ALLOW: 'Allow',
         BLOCK: 'Block',
         RESET: 'Reset',
         SESSION_ONLY: 'SessionOnly',
       }
     },
   },
 
+  /**
+   * The element to return focus to, when the currntly active dialog is closed.
+   * @private {?HTMLElement}
+   */
+  activeDialogAnchor_: null,
+
   observers: ['configureWidget_(category, categorySubtype)'],
 
   ready: function() {
     this.addWebUIListener('contentSettingSitePermissionChanged',
         this.siteWithinCategoryChanged_.bind(this));
     this.addWebUIListener('onIncognitoStatusChanged',
         this.onIncognitoStatusChanged_.bind(this));
   },
 
   /**
@@ skipping 87 matching lines @@
     assert(!this.readOnlyList);
     e.preventDefault();
     var dialog = document.createElement('add-site-dialog');
     dialog.category = this.category;
     dialog.contentSetting = this.categorySubtype;
     this.shadowRoot.appendChild(dialog);
 
     dialog.open(this.categorySubtype);
 
     dialog.addEventListener('close', function() {
+      this.$.addSite.focus();
       dialog.remove();
-    });
+    }.bind(this));
   },
 
   /**
    * Populate the sites list for display.
    * @private
    */
   populateList_: function() {
     if (this.allSites) {
       this.getAllSitesList_().then(function(lists) {
         this.processExceptions_(lists);
@@ skipping 198 matching lines @@
     // bound to the dialog.
     /** @type {!CrActionMenuElement} */ (
         this.$$('dialog[is=cr-action-menu]')).close();
     this.showEditExceptionDialog_ = true;
   },
 
   /** @private */
   onEditExceptionDialogClosed_: function() {
     this.showEditExceptionDialog_ = false;
     this.actionMenuSite_ = null;
+    this.activeDialogAnchor_.focus();
+    this.activeDialogAnchor_ = null;
   },
 
   /** @private */
   onResetTap_: function() {
     this.resetPermissionForOrigin_(this.actionMenuSite_);
     this.closeActionMenu_();
   },
 
   /**
    * Returns the appropriate site description to display. This can, for example,
@@ skipping 19 matching lines @@
    */
   onResetButtonTap_: function(e) {
     this.resetPermissionForOrigin_(e.model.item);
   },
 
   /**
    * @param {!{model: !{item: !SiteException}}} e
    * @private
    */
   onShowActionMenuTap_: function(e) {
+    this.activeDialogAnchor_ = /** @type {!HTMLElement} */ (
+        Polymer.dom(/** @type {!Event} */ (e)).localTarget);

[dschuyler, 2017/04/03 21:44:56]

There's a lot of text for a simple "A = B" line. Can fewer casts be done?

If we can define e like
* @param {!Event|!{model: !{item: !SiteException}}} e
then maybe we could skip one of the casts. If we could also define Polymer.dom
to return an HTMLElement then this line could be much simpler:

this.activeDialogAnchor_ = Polymer.dom(e).localTarget;

I understand this may be outside of the scope of this CL. No change is required
for LG.

[dpapad, 2017/04/03 23:42:09]

Tried changing the @param to "{!Event|!{model: !{item: !SiteException}}}", but
it still does not please the compiler. Polymer.dom() does not accept the 2nd
part of the conditional type, and throws the following error

##
/usr/local/google/home/dpapad/workspace/chromium1/src/chrome/browser/resources/settings/site_settings/site_list.js:486:
ERROR - actual parameter 1 of Polymer.dom does not match formal parameter
## found   : (Event|{model: {item: {
##   category: settings.ContentSettingsTypes<string>,
##   controlledBy: string,
##   displayName: string,
##   embeddingDisplayName: string,
##   embeddingOrigin: string,
##   enforcement: string,
##   incognito: boolean,
##   origin: string,
##   setting: string
## }}})
## required: (Event|Node|null)
##     this.activeDialogAnchor_ = /** @type {!HTMLElement} */
(Polymer.dom(e).localTarget);
##                                                                         ^

Also, regarding the 2nd suggestion of making Polymer.dom to return an
HTMLElement, that is also not possible, since it returns different types based
on the input. As revealed by the error code above, you can pass an Event and it
will return an Event, or a Node and it will return a Node.

I agree that the amount of type casts here is unfortunate, and that the compiler
is more of an obstacle than a facilitator in this case (and similar cases across
the codebase).

+
     this.actionMenuSite_ = e.model.item;
     /** @type {!CrActionMenuElement} */ (
-        this.$$('dialog[is=cr-action-menu]')).showAt(
-            /** @type {!Element} */ (
-                Polymer.dom(/** @type {!Event} */ (e)).localTarget));
+        this.$$('dialog[is=cr-action-menu]')).showAt(this.activeDialogAnchor_);
   },
 
   /** @private */
   closeActionMenu_: function() {
     this.actionMenuSite_ = null;
+    this.activeDialogAnchor_ = null;
     var actionMenu = /** @type {!CrActionMenuElement} */ (
         this.$$('dialog[is=cr-action-menu]'));
     if (actionMenu.open)
       actionMenu.close();
   },
 });