WebUI: CrOSSettings: Add signin button for details pages

This CL will show a Signin button when the network is in a portal state.
When the user clicks on the signin button, it will call the ShowSignin
functionality from the NetworkPortalSigninController.

Along with the button, the network state text will change depending on
what the portal state is. If the network is in a restricted connectivity
state, the network state text will be a warning yellow color.

BUG=b:207088583
TEST=browser_tests --gtest_filter="*InternetDetailPage*"

Change-Id: I98f40f00ba8a2d7bf52ce936a553e1b24ed8acaa
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3926207
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Michael Rygiel <michaelrygiel@google.com>
Cr-Commit-Position: refs/heads/main@{#1054392}

chrome/app/os_settings_strings.grdp

@@ -2995,6 +2995,9 @@ Press an assigned switch or key to remove assignment.
   <message name="IDS_SETTINGS_INTERNET_BUTTON_FORGET" desc="Settings > Internet > Network details: The label for the button to forget a network (remove from the list of known networks).">
     Forget
   </message>
+  <message name="IDS_SETTINGS_INTERNET_BUTTON_SIGNIN" desc="Settings > Internet > Network details: The label for the button to signin to a network behind a captive portal.">
+    Sign in
+  </message>
   <message name="IDS_SETTINGS_INTERNET_BUTTON_VIEW_ACCOUNT" desc="Settings > Internet > Network details: The label for the button to view the account details for a Cellular network.">
     View Account
   </message>

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_INTERNET_BUTTON_SIGNIN.png.sha1

@@ -0,0 +1 @@
+ea27c33eee42cf7194099c356efc72c70db0c323

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

@@ -19,6 +19,10 @@
     color: var(--cros-text-color-positive);
   }
 
+  #networkState[warning] {
+    color: var(--cros-text-color-warning);
+  }
+
   #networkState[error] {
     color: var(--cros-text-color-alert);
   }
@@ -41,6 +45,17 @@
     margin-inline-start: var(--settings-controlled-by-spacing);
   }
 
+  .signin-button {
+    margin-inline-end: 8px;
+    padding: 8px 16px 8px 8px;
+  }
+
+  .signin-icon {
+    background-color: var(--text-color);
+    margin-inline-end: 4px;
+    margin-inline-start: 0;
+  }
+
   #mac-address-container {
     border-top: none;
   }
@@ -53,7 +68,8 @@
         network-state="[[getNetworkState_(managedProperties_)]]">
     </network-icon>
     <div id="networkState" class="title settings-box-text"
-        connected$="[[isConnectedState_(managedProperties_)]]"
+        connected$="[[showConnectedState_(managedProperties_)]]"
+        warning$="[[showRestrictedConnectivity_(managedProperties_)]]"
         error$="[[isOutOfRangeOrNotEnabled_(outOfRange_, deviceState_)]]">
       [[getStateText_(managedProperties_, propertiesReceived_,
           outOfRange_, deviceState_)]]
@@ -66,6 +82,14 @@
       </cr-policy-indicator>
     </template>
   </div>
+  <template is="dom-if" if="[[isCaptivePortalUI2022Enabled_]]">
+    <cr-button class="signin-button" id="signinButton" on-click="onSigninTap_"
+      hidden$="[[!showSignin_(managedProperties_)]]"
+      disabled="[[disableSignin_(managedProperties_, disabled_)]]">
+      <div class="signin-icon cr-icon icon-external"></div>
+      $i18n{networkButtonSignin}
+    </cr-button>
+  </template>
   <cr-button id="forgetButton" on-click="onForgetTap_"
       hidden$="[[!showForget_(managedProperties_)]]"
       disabled="[[disableForget_(managedProperties_,

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

@@ -45,7 +45,7 @@ import {WebUIListenerBehavior, WebUIListenerBehaviorInterface} from 'chrome://re
 import {assert} from 'chrome://resources/js/assert.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {ActivationStateType, ApnProperties, ConfigProperties, CrosNetworkConfigRemote, FilterType, GlobalPolicy, HiddenSsidMode, IPConfigProperties, ManagedProperties, NetworkStateProperties, NO_LIMIT, ProxySettings, SecurityType, VpnType} from 'chrome://resources/mojo/chromeos/services/network_config/public/mojom/cros_network_config.mojom-webui.js';
-import {ConnectionStateType, DeviceStateType, IPConfigType, NetworkType, OncSource, PolicySource} from 'chrome://resources/mojo/chromeos/services/network_config/public/mojom/network_types.mojom-webui.js';
+import {ConnectionStateType, DeviceStateType, IPConfigType, NetworkType, OncSource, PolicySource, PortalState} from 'chrome://resources/mojo/chromeos/services/network_config/public/mojom/network_types.mojom-webui.js';
 import {afterNextRender, flush, html, mixinBehaviors, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {Setting} from '../../mojom-webui/setting.mojom-webui.js';
@@ -324,6 +324,18 @@ class SettingsInternetDetailPageElement extends
         computed: 'computeDisabled_(deviceState_.*)',
       },
 
+      /**
+       * Return true if captivePortalUI2022 feature flag is enabled.
+       * @private
+       */
+      isCaptivePortalUI2022Enabled_: {
+        type: Boolean,
+        value() {
+          return loadTimeData.valueExists('captivePortalUI2022') &&
+              loadTimeData.getBoolean('captivePortalUI2022');
+        },
+      },
+
       /** @private */
       advancedExpanded_: Boolean,
 
@@ -1187,6 +1199,19 @@ class SettingsInternetDetailPageElement extends
           this.i18n('networkOutOfRange');
     }
 
+    if (this.isCaptivePortalUI2022Enabled_ &&
+        OncMojo.connectionStateIsConnected(managedProperties.connectionState)) {
+      if (this.isPortalState_(managedProperties.portalState)) {
+        return this.i18n('networkListItemSignIn');
+      }
+      if (managedProperties.portalState === PortalState.kPortalSuspected) {
+        return this.i18n('networkListItemConnectedLimited');
+      }
+      if (managedProperties.portalState === PortalState.kNoInternet) {
+        return this.i18n('networkListItemConnectedNoConnectivity');
+      }
+    }
+
     return this.i18n(
         OncMojo.getConnectionStateString(managedProperties.connectionState));
   }
@@ -1213,6 +1238,56 @@ class SettingsInternetDetailPageElement extends
         OncMojo.connectionStateIsConnected(managedProperties.connectionState);
   }
 
+  /**
+   * @param {!ManagedProperties|undefined}
+   *     managedProperties
+   * @return {boolean} True if the network is restricted.
+   * @private
+   */
+  isRestrictedConnectivity_(managedProperties) {
+    return !!managedProperties &&
+        OncMojo.isRestrictedConnectivity(managedProperties.portalState);
+  }
+
+  /**
+   * @param {!ManagedProperties|undefined}
+   *     managedProperties
+   * @return {boolean} True if the network is connected to have connected color
+   *     for state.
+   * @private
+   */
+  showConnectedState_(managedProperties) {
+    // Only check that state is connected if feature flag is disabled.
+    if (!this.isCaptivePortalUI2022Enabled_) {
+      return this.isConnectedState_(managedProperties);
+    }
+
+    return this.isConnectedState_(managedProperties) &&
+        !this.isRestrictedConnectivity_(managedProperties);
+  }
+
+  /**
+   * @param {!ManagedProperties|undefined}
+   *     managedProperties
+   * @return {boolean} True if the network is restricted to have warning color
+   *     for state.
+   * @private
+   */
+  showRestrictedConnectivity_(managedProperties) {
+    // Do not show warning color if feature flag is disabled.
+    if (!this.isCaptivePortalUI2022Enabled_) {
+      return false;
+    }
+
+    if (!managedProperties) {
+      return false;
+    }
+
+    // State must be connected and restricted.
+    return this.isConnectedState_(managedProperties) &&
+        this.isRestrictedConnectivity_(managedProperties);
+  }
+
   /**
    * @param {!ManagedProperties} managedProperties
    * @return {boolean}
@@ -1357,6 +1432,26 @@ class SettingsInternetDetailPageElement extends
         ConnectionStateType.kNotConnected;
   }
 
+  /**
+   * @param {!ManagedProperties|undefined}
+   *     managedProperties
+   * @return {boolean}
+   * @private
+   */
+  showSignin_(managedProperties) {
+    if (!this.isCaptivePortalUI2022Enabled_) {
+      return false;
+    }
+    if (!managedProperties) {
+      return false;
+    }
+    if (OncMojo.connectionStateIsConnected(managedProperties.connectionState) &&
+        this.isPortalState_(managedProperties.portalState)) {
+      return true;
+    }
+    return false;
+  }
+
   /**
    * @param {!ManagedProperties} managedProperties
    * @return {boolean}
@@ -1436,6 +1531,25 @@ class SettingsInternetDetailPageElement extends
     return true;
   }
 
+  /**
+   * @param {!ManagedProperties} managedProperties
+   * @return {boolean}
+   * @private
+   */
+  disableSignin_(managedProperties) {
+    if (!this.isCaptivePortalUI2022Enabled_) {
+      return true;
+    }
+    if (this.disabled_ || !managedProperties) {
+      return true;
+    }
+    if (!OncMojo.connectionStateIsConnected(
+            managedProperties.connectionState)) {
+      return true;
+    }
+    return !this.isPortalState_(managedProperties.portalState);
+  }
+
   /**
    * @param {!ManagedProperties} managedProperties
    * @param {!chrome.settingsPrivate.PrefObject} vpnConfigAllowed
@@ -1748,6 +1862,11 @@ class SettingsInternetDetailPageElement extends
     }
   }
 
+  /** @private */
+  onSigninTap_() {
+    this.browserProxy_.showPortalSignin(this.guid);
+  }
+
   /** @private */
   onActivateTap_() {
     this.browserProxy_.showCellularSetupUI(this.guid);
@@ -2553,6 +2672,17 @@ class SettingsInternetDetailPageElement extends
     return this.managedProperties_.source === OncSource.kUserPolicy ||
         this.managedProperties_.source === OncSource.kDevicePolicy;
   }
+
+  /**
+   * Return true if portalState is either kPortal or kProxyAuthRequired.
+   * @param {!PortalState} portalState
+   * @return {boolean}
+   * @private
+   */
+  isPortalState_(portalState) {
+    return portalState === PortalState.kPortal ||
+        portalState === PortalState.kProxyAuthRequired;
+  }
 }
 
 customElements.define(

chrome/browser/ui/webui/settings/ash/internet_section.cc

@@ -680,6 +680,7 @@ void InternetSection::AddLoadTimeData(content::WebUIDataSource* html_source) {
       {"networkButtonConnect", IDS_SETTINGS_INTERNET_BUTTON_CONNECT},
       {"networkButtonDisconnect", IDS_SETTINGS_INTERNET_BUTTON_DISCONNECT},
       {"networkButtonForget", IDS_SETTINGS_INTERNET_BUTTON_FORGET},
+      {"networkButtonSignin", IDS_SETTINGS_INTERNET_BUTTON_SIGNIN},
       {"networkButtonViewAccount", IDS_SETTINGS_INTERNET_BUTTON_VIEW_ACCOUNT},
       {"networkConnectNotAllowed", IDS_SETTINGS_INTERNET_CONNECT_NOT_ALLOWED},
       {"networkHidden", IDS_SETTINGS_INTERNET_NETWORK_HIDDEN},