Indicate device offline status in the multidevice setup dropdown

Offline devices are shown with grey text and "(offline)" next to their name.

Bug: 923594
Change-Id: Id66370c73c42dd16fa106b5c6a75ea6159533297
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1918293
Commit-Queue: Max Li <themaxli@chromium.org>
Reviewed-by: Dominick Ng <dominickn@chromium.org>
Reviewed-by: Josh Nohle <nohle@chromium.org>
Cr-Commit-Position: refs/heads/master@{#716469}

chrome/app/chromeos_strings.grdp

@@ -171,6 +171,10 @@
   <message name="IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_MULTIPLE_DEVICE_HEADER" desc="Label appearing over a list of Android phones which this Chromebook can connect to.">
     Select a device
   </message>
+  <message name="IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_OFFLINE_DEVICE_OPTION" desc="Device name appearing in the list of Android phones indicating
+  the device is offline.">
+    <ph name="DEVICE_NAME">$1<ex>Pixel 2</ex></ph> (offline)
+  </message>
   <message name="IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_FEATURE_LIST_HEADER" desc="Header to introduce a list of the features that the user is agreeing to in the multi-device setup.">
     When you connect your devices, you agree that your <ph name="DEVICE_TYPE">$1<ex>Chromebook</ex></ph> can:
   </message>

chrome/browser/ui/webui/chromeos/multidevice_setup/multidevice_setup_localized_strings_provider.cc

@@ -48,6 +48,8 @@ constexpr LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
      IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_MULTIPLE_DEVICE_HEADER},
     {"startSetupPageSingleDeviceHeader",
      IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_SINGLE_DEVICE_HEADER},
+    {"startSetupPageOfflineDeviceOption",
+     IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_OFFLINE_DEVICE_OPTION},
     {"startSetupPageFeatureListInstallApps",
      IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_INSTALL_APPS_DESCRIPTION},
     {"startSetupPageFeatureListAddFeatures",

chrome/test/data/webui/multidevice_setup/start_setup_page_test.js

@@ -45,7 +45,7 @@ cr.define('multidevice_setup', () => {
         {
           remoteDevice: {deviceName: 'Nexus 5', deviceId: '12345'},
           connectivityStatus:
-              chromeos.deviceSync.mojom.ConnectivityStatus.kOnline
+              chromeos.deviceSync.mojom.ConnectivityStatus.kUnknownConnectivity
         },
       ];
 
@@ -80,9 +80,8 @@ cr.define('multidevice_setup', () => {
           });
 
       test(
-          'selectedDeviceId changes when dropdown options are selected',
-          () => {
-            selectOptionByTextContent('Nexus 6P');
+          'selectedDeviceId changes when dropdown options are selected', () => {
+            selectOptionByTextContent('Nexus 6P (offline)');
             assertEquals(startSetupPageElement.selectedDeviceId, 'PpPpPp');
             selectOptionByTextContent('Nexus 5');
             assertEquals(startSetupPageElement.selectedDeviceId, '12345');

chromeos/services/device_sync/public/mojom/device_sync.mojom

@@ -63,7 +63,8 @@ struct FindEligibleDevicesResponse {
 
 enum ConnectivityStatus {
   kOnline,
-  kOffline
+  kOffline,
+  kUnknownConnectivity
 };
 
 struct DeviceActivityStatus {

chromeos/services/device_sync/public/mojom/device_sync_mojom_traits.cc

@@ -14,7 +14,8 @@ chromeos::device_sync::mojom::ConnectivityStatus EnumTraits<
     case cryptauthv2::ConnectivityStatus::ONLINE:
       return chromeos::device_sync::mojom::ConnectivityStatus::kOnline;
     case cryptauthv2::ConnectivityStatus::UNKNOWN_CONNECTIVITY:
-      FALLTHROUGH;
+      return chromeos::device_sync::mojom::ConnectivityStatus::
+          kUnknownConnectivity;
     case cryptauthv2::ConnectivityStatus::OFFLINE:
       return chromeos::device_sync::mojom::ConnectivityStatus::kOffline;
     case cryptauthv2::ConnectivityStatus::
@@ -22,7 +23,8 @@ chromeos::device_sync::mojom::ConnectivityStatus EnumTraits<
     case cryptauthv2::ConnectivityStatus::
         ConnectivityStatus_INT_MAX_SENTINEL_DO_NOT_USE_:
       NOTREACHED();
-      return chromeos::device_sync::mojom::ConnectivityStatus::kOffline;
+      return chromeos::device_sync::mojom::ConnectivityStatus::
+          kUnknownConnectivity;
   }
 }
 
@@ -37,6 +39,9 @@ bool EnumTraits<chromeos::device_sync::mojom::ConnectivityStatus,
     case chromeos::device_sync::mojom::ConnectivityStatus::kOffline:
       *out = cryptauthv2::ConnectivityStatus::OFFLINE;
       return true;
+    case chromeos::device_sync::mojom::ConnectivityStatus::kUnknownConnectivity:
+      *out = cryptauthv2::ConnectivityStatus::UNKNOWN_CONNECTIVITY;
+      return true;
   }
 
   NOTREACHED();

ui/webui/resources/cr_components/chromeos/multidevice_setup/start_setup_page.html

@@ -26,6 +26,10 @@
         margin-top: 16px;
       }
 
+      .offline-device-name {
+        color: var(--google-grey-600);
+      }
+
       #page-icon-container {
         @apply --layout-horizontal;
         @apply --layout-center-justified;
@@ -101,8 +105,10 @@
                   class="md-select"
                   on-change="onDeviceDropdownSelectionChanged_">
                 <template is="dom-repeat" items="[[devices]]">
-                  <option value$="[[item.remoteDevice.deviceId]]">
-                    [[item.remoteDevice.deviceName]]
+                  <option
+                      class$="[[getDeviceOptionClass_(item.connectivityStatus)]]"
+                      value$="[[item.remoteDevice.deviceId]]">
+                    [[getDeviceNameWithConnectivityStatus_(item)]]
                   </option>
                 </template>
               </select>

ui/webui/resources/cr_components/chromeos/multidevice_setup/start_setup_page.js

@@ -129,6 +129,32 @@ Polymer({
     return devices[0] ? this.devices[0].remoteDevice.deviceName : '';
   },
 
+  /**
+   * @param {!chromeos.deviceSync.mojom.ConnectivityStatus} connectivityStatus
+   * @return {string} The classes to bind to the device name option.
+   * @private
+   */
+  getDeviceOptionClass_: function(connectivityStatus) {
+    return connectivityStatus ==
+            chromeos.deviceSync.mojom.ConnectivityStatus.kOffline ?
+        'offline-device-name' :
+        '';
+  },
+
+  /**
+   * @param {!chromeos.multideviceSetup.mojom.HostDevice} device
+   * @return {string} Name of the device, with connectivity status information.
+   * @private
+   */
+  getDeviceNameWithConnectivityStatus_: function(device) {
+    return device.connectivityStatus ==
+            chromeos.deviceSync.mojom.ConnectivityStatus.kOffline ?
+        this.i18n(
+            'startSetupPageOfflineDeviceOption',
+            device.remoteDevice.deviceName) :
+        device.remoteDevice.deviceName;
+  },
+
   /** @private */
   devicesChanged_: function() {
     if (this.devices.length > 0) {