[Nearby] Update state logic for contact visibility dialog.

This moves the "downloading" and "error" states for contacts download on
the contact visibility dialog to be siblings with the zero state to
match the visual hierarchy in the spec and updates their strings.

Spec:
  https://docs.google.com/document/d/1s-KjC1mM4ZPYeYAO7oI8lXltS_1FaYYfMMnNDdbfRag

Screenshots:
  https://screenshot.googleplex.com/3eFV48bA2vLoMYW.png
  https://screenshot.googleplex.com/7fGRnhpS5zECRuU.png

Bug: b:168841167
Change-Id: I669866edd3c114bf34d5c1c77ddf89d02e1e909a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2519364
Commit-Queue: Michael Hansen <hansenmichael@google.com>
Reviewed-by: James Vecore <vecore@google.com>
Cr-Commit-Position: refs/heads/master@{#825125}

chrome/app/nearby_share_strings.grdp

@@ -13,11 +13,17 @@
   </message>
 
   <!-- Contact visibility component -->
-  <message name="IDS_NEARBY_CONTACT_VISIBILITY_NO_CONTACTS_SUBTITLE" desc="Help text shown when there are no available contacts with a Google Account to select from. Nearby Share is the feature name.">
-    No contacts are available. To use Nearby Share with your contacts, add the email address linked with their Google Account to your contacts.
+  <message name="IDS_NEARBY_CONTACT_VISIBILITY_DOWNLOAD_FAILED" desc="Message shown when downloading contacts failed when trying to load contacts to show the user a list of who they will be able to share with.">
+      Unable to download contact list. Please check your network connection, or &lt;a href="#" id="tryAgainLink"&gt;try again&lt;/a&gt;.
   </message>
-  <message name="IDS_NEARBY_CONTACT_VISIBILITY_NO_CONTACTS_TITLE" desc="Title text shown when there are no available contacts with a Google Account to select from.">
-    No available contacts
+  <message name="IDS_NEARBY_CONTACT_VISIBILITY_DOWNLOADING" desc="Message shown when contacts are being downloaded to show the user a list of who they will be able to share with.">
+    Downloading contact list...
+  </message>
+  <message name="IDS_NEARBY_CONTACT_VISIBILITY_NO_CONTACTS_SUBTITLE" desc="Help text shown when there are no reachable contacts with a Google Account to select from. Nearby Share is the feature name.">
+    To use Nearby Share with these contacts, add the email address linked with their Google Account to your contacts.
+  </message>
+  <message name="IDS_NEARBY_CONTACT_VISIBILITY_NO_CONTACTS_TITLE" desc="Title text shown when there are no reachable contacts with a Google Account to select from.">
+    No reachable contacts
   </message>
   <message name="IDS_NEARBY_CONTACT_VISIBILITY_OTHERS" desc="Describes when nearby devices are visible to this user when using the Nearby Share feature.">
     People who have chosen to be visible to you when their screen is unlocked and devices near you when Nearby Share is open

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONTACT_VISIBILITY_DOWNLOADING.png.sha1

+c1a8f79955895442932c2770f5a82104bece1c3e
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONTACT_VISIBILITY_DOWNLOAD_FAILED.png.sha1

+9904c5861c938fed7929997a10b3b3ebf74e3f75
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONTACT_VISIBILITY_NO_CONTACTS_SUBTITLE.png.sha1

-07f38dbd7d3a879140bf3845b68fb1f77f2e25e8
\ No newline at end of file
+9d0afedb5f2c7aadd838310ecf5994b9eb148d22
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONTACT_VISIBILITY_NO_CONTACTS_TITLE.png.sha1

-8dc4317de80acf6b9050be3c7234d9845e17cda5
\ No newline at end of file
+9d0afedb5f2c7aadd838310ecf5994b9eb148d22
\ No newline at end of file

chrome/browser/resources/nearby_share/shared/nearby_contact_visibility.html

@@ -122,6 +122,24 @@
         margin-inline-end: 8px;
       }
 
+      #contactsPending {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+      }
+
+      #contactsFailed {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+      }
+
+      #contactsFailedImage {
+        height: 100%;
+        margin-inline-end: 24px;
+        width: 100%;
+      }
+
       .viz-description-section div {
         margin-block-end: 8px;
       }
@@ -139,7 +157,7 @@
         min-width: var(--cr-icon-size);
       }
 
-      #contactsWrapper {
+      #contactList {
         border-bottom: var(--cr-separator-line);
         border-top: var(--cr-separator-line);
         padding-block-start: 16px;
@@ -178,8 +196,23 @@
 
       #noContactsContainer {
         align-items: center;
+        border-bottom: var(--cr-separator-line);
+        border-top: var(--cr-separator-line);
         display: flex;
         flex-direction: column;
+        padding-block-end: 16px;
+        padding-block-start: 16px;
+      }
+
+      #noContactsContainer .cr-secondary-text {
+        text-align: center;
+        width: 80%;
+      }
+
+      #noContactsImage {
+        height: 100px;
+        margin-block-end: 8px;
+        width: 100%;
       }
     </style>
     <div id="main">
@@ -216,7 +249,8 @@
       </cr-radio-group>
 
       <!-- Zero state is shown only when no selection has been made yet. -->
-      <template is="dom-if" if="[[!isVisibilitySelected_(selectedVisibility)]]">
+      <template is="dom-if"
+          if="[[showZeroState_(selectedVisibility, contactsState)]]">
         <div id="zeroStateContainer">
           <div id="zeroStateImageContainer">
             <iron-icon id="zeroStateImage"
@@ -237,7 +271,31 @@
         </div>
       </template>
 
-      <template is="dom-if" if="[[isVisibilitySelected_(selectedVisibility)]]">
+      <!-- Shown when contacts are currently being downloaded. -->
+      <template is="dom-if"
+          if="[[inContactsState_(contactsState, ContactsState.PENDING)]]">
+        <div id="contactsPending" class="contacts-section">
+          <div>$i18n{nearbyShareContactVisibilityDownloading}</div>
+        </div>
+      </template>
+
+      <!-- Shown when contacts download has failed. -->
+      <template is="dom-if"
+          if="[[inContactsState_(contactsState, ContactsState.FAILED)]]"
+          on-dom-change="domChangeDownloadFailed_">
+        <div id="contactsFailed" class="contacts-section">
+          <iron-icon id="contactsFailedImage"
+              icon="nearby-images:contacts-download-failed">
+          </iron-icon>
+          <div>
+            $i18nRaw{nearbyShareContactVisibilityDownloadFailed}
+          </div>
+        </div>
+      </template>
+
+      <template is="dom-if"
+          if="[[showExplanationState_(selectedVisibility,
+              contactsState)]]">
         <div id="explanation">
 
           <div class="explanation-section">
@@ -283,69 +341,50 @@
 
         </div>
 
-        <div id="contactsWrapper">
-          <!-- Show when the user has one or more contacts downloaded. -->
-          <template is="dom-if" if="[[inContactsState_(contactsState,
-                                      ContactsState.HAS_CONTACTS)]]">
-            <iron-list id="contactList" items="[[contacts]]"
-                class="contacts-section">
-              <template>
-                <div class="contact-item"
-                    disabled$="[[isVisibility_(selectedVisibility,'none')]]">
-                  <iron-icon icon="cr:person"
-                      class="padded-icon grey-icon contact-icon">
-                  </iron-icon>
-                  <div>
-                    <div class="cr-title-text">[[item.name]]</div>
-                    <div class="cr-secondary-text">[[item.description]]</div>
-                  </div>
-                  <template is="dom-if"
-                      if="[[showContactCheckBoxes_(selectedVisibility)]]">
-                    <cr-toggle class="contact-toggle" checked="{{item.checked}}"
-                        disabled="[[!isVisibility_(selectedVisibility,'some')]]"
-                        on-click="syncContactToggleState_">
-                    </cr-toggle>
-                  </template>
-                </div>
-              </template>
-            </iron-list>
-          </template>
-
-          <!-- Show when the user has downloaded contacts but there are none.-->
-          <template is="dom-if" if="[[inContactsState_(contactsState,
-                                      ContactsState.ZERO_CONTACTS)]]">
-            <div id="noContactsContainer" class="contacts-section">
-              <div class="cr-title-text">
-                $i18n{nearbyShareContactVisibilityNoContactsTitle}
-              </div>
-              <div class="cr-secondary-text">
-                $i18n{nearbyShareContactVisibilityNoContactsSubtitle}
-              </div>
+        <!-- Show when the user has downloaded contacts but there are none.-->
+        <template is="dom-if"
+            if="[[showEmptyState_(selectedVisibility, contactsState)]]">
+          <div id="noContactsContainer">
+            <iron-icon id="noContactsImage"
+                icon="nearby-images:contacts-empty">
+            </iron-icon>
+            <div class="cr-title-text">
+              $i18n{nearbyShareContactVisibilityNoContactsTitle}
             </div>
-          </template>
-
-          <!-- Shown when contacts are currently being downloaded. -->
-          <template is="dom-if" if="[[inContactsState_(contactsState,
-                                      ContactsState.PENDING)]]">
-            <div id="contactsPending" class="contacts-section">
-              TBD: Contacts are downloading please wait...
+            <div class="cr-secondary-text">
+              $i18n{nearbyShareContactVisibilityNoContactsSubtitle}
             </div>
-          </template>
-
-          <!-- Shown when contacts download has failed. -->
-          <template is="dom-if" if="[[inContactsState_(contactsState,
-                                      ContactsState.FAILED)]]">
-            <div id="contactsFailed" class="contacts-section">
-              <div>
-                TBD: Contact download failed.
-                Please check your internet connection.
+          </div>
+        </template>
+
+        <!-- Show when the user has one or more contacts downloaded. -->
+        <template is="dom-if"
+            if="[[showContactList_(selectedVisibility,
+                contactsState)]]">
+          <iron-list id="contactList" items="[[contacts]]"
+              class="contacts-section">
+            <template>
+              <div class="contact-item"
+                  disabled$="[[isVisibility_(selectedVisibility,'none')]]">
+                <iron-icon icon="cr:person"
+                    class="padded-icon grey-icon contact-icon">
+                </iron-icon>
+                <div>
+                  <div class="cr-title-text">[[item.name]]</div>
+                  <div class="cr-secondary-text">[[item.description]]</div>
+                </div>
+                <template is="dom-if"
+                    if="[[showContactCheckBoxes_(selectedVisibility)]]">
+                  <cr-toggle class="contact-toggle" checked="{{item.checked}}"
+                      disabled="[[!isVisibility_(selectedVisibility,'some')]]"
+                      on-click="syncContactToggleState_">
+                  </cr-toggle>
+                </template>
               </div>
-              <cr-button id="contactRetryButton" on-click="downloadContacts_">
-                Retry
-              </cr-button>
-            </div>
-          </template>
-        </div>
+            </template>
+          </iron-list>
+        </template>
+
       </div>
     </template>
   </template>

chrome/browser/resources/nearby_share/shared/nearby_contact_visibility.js

@@ -346,5 +346,68 @@ Polymer({
       this.set('settings.visibility', visibility);
     }
   },
+
+  /**
+   * @param {string} selectedVisibility
+   * @return {boolean} true when zero state should be shown
+   * @private
+   */
+  showZeroState_(selectedVisibility, contactsState) {
+    return !selectedVisibility && contactsState !== ContactsState.PENDING &&
+        contactsState !== ContactsState.FAILED;
+  },
+
+  /**
+   * @param {string} selectedVisibility
+   * @param {string} contactsState
+   * @return {boolean} true when explanation state should be shown
+   * @private
+   */
+  showExplanationState_(selectedVisibility, contactsState) {
+    return !this.showZeroState_(selectedVisibility, contactsState) &&
+        !this.inContactsState_(contactsState, ContactsState.PENDING) &&
+        !this.inContactsState_(contactsState, ContactsState.FAILED);
+  },
+
+  /**
+   * @param {string} selectedVisibility
+   * @param {string} contactsState
+   * @return {boolean} true when empty state should be shown
+   * @private
+   */
+  showEmptyState_(selectedVisibility, contactsState) {
+    return (selectedVisibility === 'all' || selectedVisibility === 'some') &&
+        contactsState === ContactsState.ZERO_CONTACTS;
+  },
+
+  /**
+   * @param {string} selectedVisibility
+   * @param {string} contactsState
+   * @return {boolean} true when contact list should be shown
+   * @private
+   */
+  showContactList_(selectedVisibility, contactsState) {
+    return (selectedVisibility === 'all' || selectedVisibility === 'some') &&
+        contactsState === ContactsState.HAS_CONTACTS;
+  },
+
+  /**
+   * Because the "failed" state contains an i18n string with a link in it, we
+   * need to add an event listener. We do that here because the link doesn't
+   * exist when the dialog loads, only once the template is added to the DOM.
+   *
+   * @private
+   */
+  domChangeDownloadFailed_() {
+    const tryAgainLink = this.$$('#tryAgainLink');
+    if (!tryAgainLink) {
+      return;
+    }
+
+    tryAgainLink.addEventListener('click', event => {
+      event.preventDefault();
+      this.downloadContacts_();
+    });
+  },
 });
 })();

chrome/browser/ui/webui/nearby_share/shared_resources.cc

@@ -27,6 +27,10 @@ void RegisterNearbySharedStrings(content::WebUIDataSource* data_source) {
       {"nearbyShareContactVisibilityAll", IDS_NEARBY_VISIBLITY_ALL_CONTACTS},
       {"nearbyShareContactVisibilityAllDescription",
        IDS_NEARBY_VISIBLITY_ALL_CONTACTS_DESCRIPTION},
+      {"nearbyShareContactVisibilityDownloadFailed",
+       IDS_NEARBY_CONTACT_VISIBILITY_DOWNLOAD_FAILED},
+      {"nearbyShareContactVisibilityDownloading",
+       IDS_NEARBY_CONTACT_VISIBILITY_DOWNLOADING},
       {"nearbyShareContactVisibilityNoContactsSubtitle",
        IDS_NEARBY_CONTACT_VISIBILITY_NO_CONTACTS_SUBTITLE},
       {"nearbyShareContactVisibilityNoContactsTitle",

chrome/test/data/webui/nearby_share/shared/nearby_contact_visibility_test.js

@@ -112,7 +112,7 @@ suite('nearby-contact-visibility', () => {
     assertFalse(isDownloadContactsPendingVisible());
 
     // If we click retry, we should go into pending state.
-    visibilityElement.$$('#contactRetryButton').click();
+    visibilityElement.$$('#tryAgainLink').click();
     await test_util.waitAfterNextRender(visibilityElement);
 
     assertFalse(isDownloadContactsFailedVisible());
@@ -172,7 +172,7 @@ suite('nearby-contact-visibility', () => {
         assertFalse(isNoContactsSectionVisible());
       });
 
-  test('Visibility component shows noContacts for kNoOne', async function() {
+  test('Visibility component shows no contacts for kNoOne', async function() {
     visibilityElement.set(
         'settings.visibility', nearbyShare.mojom.Visibility.kNoOne);
     succeedContactDownload();
@@ -181,7 +181,7 @@ suite('nearby-contact-visibility', () => {
 
     assertToggleState(/*all=*/ false, /*some=*/ false, /*no=*/ true);
     assertFalse(isZeroStateVisible());
-    assertTrue(areContactCheckBoxesVisible());
+    assertFalse(areContactCheckBoxesVisible());
     assertFalse(isNoContactsSectionVisible());
   });