[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.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() {