[CrOS Settings] Always show phone icon in 'Connected Devices' list item

Screenshot: https://screenshot.googleplex.com/qpwDQLqPGPtRepp

Bug: 1157990
Change-Id: I1f8657dbe94aa6c6886016e9460de53569d18c21
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2587520
Commit-Queue: Shane Fitzpatrick <shanefitz@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#836934}

chrome/browser/resources/settings/chromeos/multidevice_page/multidevice_page.html

@@ -44,16 +44,13 @@
       <div route-path="default">
         <div id="multidevice-item" class="settings-box two-line no-padding">
           <div class="link-wrapper" actionable
-               actionable$="[[doesClickOpenSubpage_(pageContentData)]]"
-               on-click="handleItemClick_">
-            <template is="dom-if" if="[[isHostSet(pageContentData)]]" restamp>
-              <iron-icon icon=
-                  "[[getIconName(MultiDeviceFeature.BETTER_TOGETHER_SUITE)]]">
-              </iron-icon>
-            </template>
-            <div class$=
-                "[[getMultiDeviceItemLabelBlockCssClass_(pageContentData)]]
-                    settings-box-text"
+              actionable$="[[doesClickOpenSubpage_(pageContentData)]]"
+              on-click="handleItemClick_">
+            <iron-icon icon=
+                "[[getIconName(MultiDeviceFeature.BETTER_TOGETHER_SUITE)]]"
+                id="betterTogetherSuiteIcon">
+            </iron-icon>
+            <div class="middle settings-box-text"
                 aria-hidden$="[[getTextAriaHidden_(pageContentData)]]">
               <div id="multidevice-label">
                 [[getLabelText_(pageContentData)]]

chrome/browser/resources/settings/chromeos/multidevice_page/multidevice_page.js

@@ -134,17 +134,6 @@ Polymer({
     this.attemptDeepLink();
   },
 
-  /**
-   * CSS class for the <div> containing all the text in the multidevice-item
-   * <div>, i.e. the label and sublabel. If the host is set, the Better Together
-   * icon appears so before the text (i.e. text div is 'middle' class).
-   * @return {string}
-   * @private
-   */
-  getMultiDeviceItemLabelBlockCssClass_() {
-    return this.isHostSet() ? 'middle' : 'start';
-  },
-
   /**
    * @return {string} Translated item label.
    * @private

chrome/test/data/webui/settings/chromeos/multidevice_page_tests.js

@@ -394,33 +394,67 @@ suite('Multidevice', function() {
   });
 
   test('Nearby setup button visibility', async () => {
-    assertTrue(
-        test_util.isChildVisible(multidevicePage, '#nearbySetUp', false));
+    assertTrue(test_util.isChildVisible(
+        multidevicePage, '#nearbySetUp', /*checkLightDom=*/ false));
     assertFalse(test_util.isChildVisible(
-        multidevicePage, '#nearbySharingToggleButton', false));
+        multidevicePage, '#nearbySharingToggleButton',
+        /*checkLightDom=*/ false));
 
     multidevicePage.setPrefValue('nearby_sharing.onboarding_complete', true);
     Polymer.dom.flush();
 
-    assertFalse(
-        test_util.isChildVisible(multidevicePage, '#nearbySetUp', false));
+    assertFalse(test_util.isChildVisible(
+        multidevicePage, '#nearbySetUp', /*checkLightDom=*/ false));
     assertTrue(test_util.isChildVisible(
-        multidevicePage, '#nearbySharingToggleButton', false));
+        multidevicePage, '#nearbySharingToggleButton',
+        /*checkLightDom=*/ false));
   });
 
   test('Nearby description shown before onboarding is completed', async () => {
     assertTrue(test_util.isChildVisible(
         multidevicePage, '#nearbyShareSecondary > settings-localized-link',
-        false));
+        /*checkLightDom=*/ false));
 
     multidevicePage.setPrefValue('nearby_sharing.onboarding_complete', true);
     Polymer.dom.flush();
 
     assertFalse(test_util.isChildVisible(
         multidevicePage, '#nearbyShareSecondary > settings-localized-link',
-        false));
+        /*checkLightDom=*/ false));
 
     assertEquals(
         multidevicePage.$$('#nearbyShareSecondary').textContent.trim(), 'Off');
   });
+
+  test('Better Together Suite icon visible when there is no host set', () => {
+    setHostData(settings.MultiDeviceSettingsMode.NO_HOST_SET);
+    assertTrue(test_util.isChildVisible(
+        multidevicePage, '#betterTogetherSuiteIcon', /*checkLightDom=*/ false));
+  });
+
+  test('Better Together Suite icon visible when there is a host set', () => {
+    setHostData(settings.MultiDeviceSettingsMode.HOST_SET_VERIFIED);
+    assertTrue(test_util.isChildVisible(
+        multidevicePage, '#betterTogetherSuiteIcon', /*checkLightDom=*/ false));
+  });
+
+  test('Better Together Suite icon remains visible when host added', () => {
+    setHostData(settings.MultiDeviceSettingsMode.NO_HOST_SET);
+    assertTrue(test_util.isChildVisible(
+        multidevicePage, '#betterTogetherSuiteIcon', /*checkLightDom=*/ false));
+
+    setHostData(settings.MultiDeviceSettingsMode.HOST_SET_VERIFIED);
+    assertTrue(test_util.isChildVisible(
+        multidevicePage, '#betterTogetherSuiteIcon', /*checkLightDom=*/ false));
+  });
+
+  test('Better Together Suite icon remains visible when host removed', () => {
+    setHostData(settings.MultiDeviceSettingsMode.HOST_SET_VERIFIED);
+    assertTrue(test_util.isChildVisible(
+        multidevicePage, '#betterTogetherSuiteIcon', /*checkLightDom=*/ false));
+
+    setHostData(settings.MultiDeviceSettingsMode.NO_HOST_SET);
+    assertTrue(test_util.isChildVisible(
+        multidevicePage, '#betterTogetherSuiteIcon', /*checkLightDom=*/ false));
+  });
 });