[CrOS Network] Fix button focus issue in <internet-detail-dialog>.

Previously, when users who navigated the dialog via the keyboard (i.e.,
using the Tab key) pressed Enter on the connect and/or disconnect
button, focus would be lost. This was due to the fact that the UI
actually had 2 buttons (connect and disconnect), and one is hidden when
the other is visible. Thus, when users would click one button, it would
immediately become hidden and its focus would be lost.

This CL fixes this issue by having both connect and disconnect share a
single button which remains visible and retains focus after the Enter
key is pressed.

Bug: 971213
Change-Id: Ifd5c29946ab86ce95548fe6d95e5c3c6738f4976
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1655977
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Auto-Submit: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#668537}

chrome/browser/resources/chromeos/internet_detail_dialog/internet_detail_dialog.html

@@ -91,14 +91,10 @@
           [[getStateText_(networkProperties)]]
         </div>
       </div>
-      <paper-button class="primary-button" on-tap="onConnectTap_"
-          hidden$="[[!showConnect_(networkProperties)]]"
-          disabled="[[!enableConnect_(networkProperties)]]">
-        $i18n{networkButtonConnect}
-      </paper-button>
-      <paper-button class="primary-button" on-tap="onDisconnectTap_"
-          hidden$="[[!showDisconnect_(networkProperties)]]">
-        $i18n{networkButtonDisconnect}
+      <paper-button class="primary-button" on-tap="onConnectDisconnectTap_"
+          hidden$="[[!showConnectDisconnect_(networkProperties)]]"
+          disabled="[[!enableConnectDisconnect_(networkProperties)]]">
+        [[getConnectDisconnectText_(networkProperties)]]
       </paper-button>
     </div>
 

chrome/browser/resources/chromeos/internet_detail_dialog/internet_detail_dialog.js

@@ -267,6 +267,28 @@ Polymer({
         !!this.get('Cellular.SupportNetworkScan', this.networkProperties);
   },
 
+  /**
+   * @param {!CrOnc.NetworkProperties} networkProperties
+   * @return {string}
+   * @private
+   */
+  getConnectDisconnectText_: function(networkProperties) {
+    if (this.showConnect_(networkProperties)) {
+      return this.i18n('networkButtonConnect');
+    }
+    return this.i18n('networkButtonDisconnect');
+  },
+
+  /**
+   * @param {!CrOnc.NetworkProperties} networkProperties
+   * @return {boolean}
+   * @private
+   */
+  showConnectDisconnect_: function(networkProperties) {
+    return this.showConnect_(networkProperties) ||
+        this.showDisconnect_(networkProperties);
+  },
+
   /**
    * @param {!CrOnc.NetworkProperties} networkProperties
    * @return {boolean}
@@ -301,6 +323,23 @@ Polymer({
             /** @type {!CrOnc.ManagedProperty} */ (property));
   },
 
+  /**
+   * @param {!CrOnc.NetworkProperties} networkProperties
+   * @return {boolean}
+   * @private
+   */
+  enableConnectDisconnect_: function(networkProperties) {
+    if (!this.showConnectDisconnect_(networkProperties)) {
+      return false;
+    }
+
+    if (this.showConnect_(networkProperties)) {
+      return this.enableConnect_(networkProperties);
+    }
+
+    return true;
+  },
+
   /**
    * @param {!CrOnc.NetworkProperties} networkProperties
    * @return {boolean} Whether or not to enable the network connect button.
@@ -316,6 +355,17 @@ Polymer({
     return true;
   },
 
+  /** @private */
+  onConnectDisconnectTap_: function() {
+    assert(this.networkProperties);
+    if (this.showConnect_(this.networkProperties)) {
+      this.onConnectTap_();
+      return;
+    }
+
+    this.onDisconnectTap_();
+  },
+
   /** @private */
   onConnectTap_: function() {
     var properties = this.networkProperties;