[Nearby] Layout updates for contact visibility page.

This updates the layout of the contact visibility page to show the "no
contacts" state on its own without the description text above it, and
switches out the iron-list for a dom-repeat so that we can let the
entire content area scroll so that you can see more contacts at once.

Screenshots:
  https://screenshot.googleplex.com/7V92cx9RbcrXUXx.png
  https://screenshot.googleplex.com/C2cmhbM2GEAAhY4.png

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

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

@@ -84,10 +84,14 @@
         display: inline-flex;
       }
 
+      .content {
+        height: 200px;
+        overflow: scroll;
+      }
+
       #zeroStateContainer {
         display: flex;
         justify-content: center;
-        margin: 8px;
       }
 
       #zeroStateImageContainer {
@@ -147,6 +151,10 @@
         margin-block-end: 8px;
       }
 
+      #explanationContainer {
+        border-bottom: var(--cr-separator-line);
+      }
+
       .explanation-section {
         display: flex;
       }
@@ -159,21 +167,17 @@
       }
 
       #contactList {
-        border-bottom: var(--cr-separator-line);
         border-top: var(--cr-separator-line);
+        padding-block-start: 8px;
       }
 
       #contactsHeading {
         font-size: 1.2rem;
       }
 
-      .contacts-section {
-        height: 72px;
-      }
-
       .contact-item {
         display: flex;
-        height: 50px;
+        height: 40px;
         padding-block-end: 8px;
         padding-block-start: 8px;
       }
@@ -194,8 +198,6 @@
 
       #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;
@@ -250,7 +252,7 @@
       <!-- Zero state is shown only when no selection has been made yet. -->
       <template is="dom-if"
           if="[[showZeroState_(selectedVisibility, contactsState)]]">
-        <div id="zeroStateContainer">
+        <div id="zeroStateContainer" class="content">
           <div id="zeroStateImageContainer">
             <iron-icon id="zeroStateImage"
                 icon="nearby-images:nearby-device-visibility">
@@ -273,7 +275,7 @@
       <!-- Shown when contacts are currently being downloaded. -->
       <template is="dom-if"
           if="[[inContactsState_(contactsState, ContactsState.PENDING)]]">
-        <div id="contactsPending" class="contacts-section">
+        <div id="contactsPending" class="content">
           <div>$i18n{nearbyShareContactVisibilityDownloading}</div>
         </div>
       </template>
@@ -282,7 +284,7 @@
       <template is="dom-if"
           if="[[inContactsState_(contactsState, ContactsState.FAILED)]]"
           on-dom-change="domChangeDownloadFailed_">
-        <div id="contactsFailed" class="contacts-section">
+        <div id="contactsFailed" class="content">
           <iron-icon id="contactsFailedImage"
               icon="nearby-images:contacts-download-failed">
           </iron-icon>
@@ -292,6 +294,27 @@
         </div>
       </template>
 
+      <!-- Show when the user has downloaded contacts but there are none.-->
+      <template is="dom-if"
+          if="[[showEmptyState_(selectedVisibility, contactsState)]]">
+        <div id="noContactsContainer" class="content">
+          <iron-icon id="noContactsImage"
+              icon="nearby-images:contacts-empty">
+          </iron-icon>
+          <div class="cr-title-text">
+            $i18n{nearbyShareContactVisibilityNoContactsTitle}
+          </div>
+          <div class="cr-secondary-text">
+            $i18n{nearbyShareContactVisibilityNoContactsSubtitle}
+          </div>
+        </div>
+      </template>
+
+      <!-- Show when contacts have downloaded and a state is selected. -->
+      <template is="dom-if"
+          if="[[showContactsContainer_(selectedVisibility, contactsState)]]">
+        <div id="explanationContainer" class="content">
+
           <template is="dom-if"
               if="[[showExplanationState_(selectedVisibility,
                   contactsState)]]">
@@ -311,7 +334,8 @@
               </div>
 
               <div class="explanation-section">
-            <iron-icon icon="nearby20:visibility" class="padded-icon grey-icon">
+                <iron-icon icon="nearby20:visibility"
+                    class="padded-icon grey-icon">
                 </iron-icon>
                 <div class="viz-description-section">
                   <div class="cr-title-text">
@@ -339,30 +363,14 @@
               </div>
 
             </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>
-            <div class="cr-secondary-text">
-              $i18n{nearbyShareContactVisibilityNoContactsSubtitle}
-            </div>
-          </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 id="contactList">
+              <template is="dom-repeat" items="[[contacts]]">
                 <div class="contact-item"
                     disabled$="[[isVisibility_(selectedVisibility,'none')]]">
                   <iron-icon icon="cr:person"
@@ -381,11 +389,12 @@
                   </template>
                 </div>
               </template>
-          </iron-list>
+            </div>
           </template>
 
         </div>
       </template>
+    </div>
   </template>
   <script src="nearby_contact_visibility.js"></script>
 </dom-module>

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

@@ -374,6 +374,17 @@ Polymer({
         contactsState !== ContactsState.FAILED;
   },
 
+  /**
+   * @param {string} selectedVisibility
+   * @param {string} contactsState
+   * @return {boolean} true when explanation container should be shown
+   * @private
+   */
+  showContactsContainer_(selectedVisibility, contactsState) {
+    return this.showExplanationState_(selectedVisibility, contactsState) ||
+        this.showContactList_(selectedVisibility, contactsState);
+  },
+
   /**
    * @param {string} selectedVisibility
    * @param {string} contactsState
@@ -381,9 +392,13 @@ Polymer({
    * @private
    */
   showExplanationState_(selectedVisibility, contactsState) {
-    return !this.showZeroState_(selectedVisibility, contactsState) &&
-        !this.inContactsState_(contactsState, ContactsState.PENDING) &&
-        !this.inContactsState_(contactsState, ContactsState.FAILED);
+    if (!selectedVisibility || contactsState === ContactsState.PENDING ||
+        contactsState === ContactsState.FAILED) {
+      return false;
+    }
+
+    return selectedVisibility === 'none' ||
+        contactsState === ContactsState.HAS_CONTACTS;
   },
 
   /**

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

@@ -18,6 +18,10 @@
         margin-inline-start: 24px;
         overflow: hidden;
       }
+
+      nearby-contact-visibility {
+        width: 100%;
+      }
     </style>
     <nearby-page-template title="$i18n{nearbyShareVisibilityPageTitle}"
         sub-title="$i18n{nearbyShareVisibilityPageSubtitle}"

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

@@ -132,8 +132,9 @@ suite('nearby-contact-visibility', () => {
     assertFalse(isDownloadContactsFailedVisible());
     assertFalse(isDownloadContactsPendingVisible());
     assertTrue(areContactCheckBoxesVisible());
-    const list = visibilityElement.$$('#contactList');
-    assertEquals(fakeContactManager.contactRecords.length, list.items.length);
+    const items =
+        visibilityElement.$$('#contactList').querySelectorAll('.contact-item');
+    assertEquals(fakeContactManager.contactRecords.length, items.length);
   });
 
   test('Radio group disabled until successful download', async function() {