Default focus on Connect or Disconnect button on network details page.

Bug: 991928
Change-Id: I22f5e2e41daa6bc94110ce0641c7e9df510517e3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1824437
Commit-Queue: Jon Mann <jonmann@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#700852}

chrome/browser/resources/settings/controls/controlled_button.html

@@ -42,7 +42,7 @@
       }
     </style>
 
-    <cr-button class$="[[getClass_(actionButton)]]"
+    <cr-button class$="[[actionClass_]]"
       disabled="[[!buttonEnabled_(enforced_, disabled)]]">
       [[label]]
     </cr-button>

chrome/browser/resources/settings/controls/controlled_button.js

@@ -11,11 +11,6 @@ Polymer({
   ],
 
   properties: {
-    actionButton: {
-      type: Boolean,
-      value: false,
-    },
-
     endJustified: {
       type: Boolean,
       value: false,
@@ -30,6 +25,12 @@ Polymer({
       reflectToAttribute: true,
     },
 
+    /** @private */
+    actionClass_: {
+      type: String,
+      value: ''
+    },
+
     /** @private */
     enforced_: {
       type: Boolean,
@@ -38,6 +39,18 @@ Polymer({
     },
   },
 
+  /** @override */
+  attached: function() {
+    if (this.classList.contains('action-button')) {
+      this.actionClass_ = 'action-button';
+    }
+  },
+
+  /** Focus on the inner cr-button. */
+  focus: function() {
+    this.$$('cr-button').focus();
+  },
+
   /**
    * @param {!Event} e
    * @private
@@ -48,15 +61,6 @@ Polymer({
     e.stopPropagation();
   },
 
-  /**
-   * @param {!boolean} actionButton
-   * @return {string} Class of the cr-button.
-   * @private
-   */
-  getClass_: function(actionButton) {
-    return actionButton ? 'action-button' : '';
-  },
-
   /**
    * @param {!boolean} enforced
    * @param {!boolean} disabled

chrome/browser/resources/settings/internet_page/internet_detail_page.html

@@ -117,7 +117,8 @@
       </cr-button>
       <!-- Use policy properties from vpn_config_allowed to indicate when that
            pref disables buttons in this row. -->
-      <controlled-button id="connect" action-button on-click="onConnectTap_"
+      <controlled-button id="connect" class="action-button"
+          on-click="onConnectTap_"
           hidden$="[[!showConnect_(managedProperties_, globalPolicy,
               managedNetworkAvailable)]]"
           disabled="[[!enableConnect_(managedProperties_, defaultNetwork,
@@ -127,7 +128,7 @@
           pref="[[getFakeVpnConfigPrefForEnforcement_(managedProperties_,
               prefs.vpn_config_allowed)]]">
       </controlled-button>
-      <controlled-button id="disconnect" action-button
+      <controlled-button id="disconnect" class="action-button"
           on-click="onDisconnectTap_"
           hidden$="[[!showDisconnect_(managedProperties_)]]"
           label="$i18n{networkButtonDisconnect}"

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

@@ -344,10 +344,9 @@ Polymer({
     if (!this.didSetFocus_) {
       // Focus a button once the initial state is set.
       this.didSetFocus_ = true;
-      const button = this.$$('#titleDiv .action-button:not([hidden])') ||
-          this.$$('#titleDiv cr-button:not([hidden])');
+      const button = this.$$('#titleDiv .action-button:not([hidden])');
       if (button) {
-        setTimeout(() => button.focus());
+        Polymer.RenderStatus.afterNextRender(this, () => button.focus());
       }
     }
 

chrome/test/data/webui/settings/controlled_button_tests.js

@@ -74,8 +74,13 @@ suite('controlled button', function() {
   test('action-button', function() {
     assertNotEquals(
         'action-button', controlledButton.$$('cr-button').className);
-    controlledButton.actionButton = true;
+
+    let controlledActionButton = document.createElement('controlled-button');
+    controlledActionButton.pref = uncontrolledPref;
+    controlledActionButton.className = 'action-button';
+    document.body.appendChild(controlledActionButton);
     Polymer.dom.flush();
-    assertEquals('action-button', controlledButton.$$('cr-button').className);
+    assertEquals(
+        'action-button', controlledActionButton.$$('cr-button').className);
   });
 });