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

chrome/browser/resources/settings/site_settings/site_list.js

Index: chrome/browser/resources/settings/site_settings/site_list.js
diff --git a/chrome/browser/resources/settings/site_settings/site_list.js b/chrome/browser/resources/settings/site_settings/site_list.js
index 69395918cf11de3416d2917ceb3693c6b368061b..82d5580fe5c768f19752bd5b578d3f8406dbe9b2 100644
--- a/chrome/browser/resources/settings/site_settings/site_list.js
+++ b/chrome/browser/resources/settings/site_settings/site_list.js
@@ -108,6 +108,12 @@ Polymer({
     },
   },
 
+  /**
+   * The element to return focus to, when the currntly active dialog is closed.
+   * @private {?HTMLElement}
+   */
+  activeDialogAnchor_: null,
+
   observers: ['configureWidget_(category, categorySubtype)'],
 
   ready: function() {
@@ -215,8 +221,9 @@ Polymer({
     dialog.open(this.categorySubtype);
 
     dialog.addEventListener('close', function() {
+      this.$.addSite.focus();
       dialog.remove();
-    });
+    }.bind(this));
   },
 
   /**
@@ -435,6 +442,8 @@ Polymer({
   onEditExceptionDialogClosed_: function() {
     this.showEditExceptionDialog_ = false;
     this.actionMenuSite_ = null;
+    this.activeDialogAnchor_.focus();
+    this.activeDialogAnchor_ = null;
   },
 
   /** @private */
@@ -474,16 +483,18 @@ Polymer({
    * @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)