[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
+9d0afedb5f2c7aadd838310ecf5994b9eb148d22
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONTACT_VISIBILITY_NO_CONTACTS_TITLE.png.sha1

-8dc4317de80acf6b9050be3c7234d9845e17cda5
+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,10 +341,26 @@
 
         </div>
 
-        <div id="contactsWrapper">
+        <!-- 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="[[inContactsState_(contactsState,
-                                      ContactsState.HAS_CONTACTS)]]">
+        <template is="dom-if"
+            if="[[showContactList_(selectedVisibility,
+                contactsState)]]">
           <iron-list id="contactList" items="[[contacts]]"
               class="contacts-section">
             <template>
@@ -311,41 +385,6 @@
           </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>
-            </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>
-          </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>
-              <cr-button id="contactRetryButton" on-click="downloadContacts_">
-                Retry
-              </cr-button>
-            </div>
-          </template>
-        </div>
       </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/resources/nearby_share/shared/nearby_shared_icons.html

@@ -39,6 +39,14 @@
 <iron-iconset-svg name="nearby-images" size="200">
   <svg>
     <defs>
+      <g id="contacts-download-failed" fill="none" fill-rule="evenodd" width="201px" height="68px" viewBox="0 0 201 68">
+        <g jetway-hook-id="1B21145A-F9D1-4FC9-BEEE-803947016D7B" id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g jetway-hook-id="87118FA5-DB11-4BB8-938F-285C7F2DA7AB" id="video-ratio-copy" transform="translate(-206.000000, -428.000000)"> <g jetway-hook-id="1A3AB880-1975-46D9-A6D5-2983B8732278" id="Group-11" transform="translate(206.897142, 428.000000)"> <rect jetway-hook-id="12BF5872-2399-4F0F-A938-2A7AB3B4BBAA" id="Rectangle" x="0.59985893" y="0" width="199.004975" height="68"></rect> <g jetway-hook-id="0E1FB8BB-70D6-43E6-8F48-2B9D387903E6" id="Group-7" transform="translate(33.254500, 27.030184) rotate(-10.000000) translate(-33.254500, -27.030184) translate(14.846539, 13.030184)"> <path d="M2.74398265,2.89121433 L2.44143826,3.20740748 C2.37640796,3.2797921 2.31733987,3.35468978 2.26110956,3.43819735 C-0.284871666,6.61456733 0.651347997,11.3290812 4.16411114,13.436913 L4.51162283,13.6360701 L4.78058847,13.7801309 C4.8721099,13.8272111 4.96649826,13.8738556 5.06675572,13.921578 L5.38813761,14.0694922 L5.76274716,14.2329543 L7.03652882,14.7729995 L7.25522556,14.8723532 L7.62503508,15.0450442 C9.09384491,15.7674822 10.2367902,16.9892939 10.8219412,18.4691959 L11.5783363,20.4154202 L11.564194,20.3594679 C11.7185437,21.0085693 11.9683749,21.6266486 12.3604824,22.4026446 C13.1186853,23.8155861 14.1950938,24.997979 15.5341714,25.841272 C19.3910019,28.3305212 24.594255,27.6713345 27.7086249,24.2978202 C31.40018,20.2710069 30.8843935,14.0151181 26.6171361,10.6283896 C25.6508642,9.8313721 24.5264177,9.26980166 23.2520115,8.92187465 C22.6038775,8.73311394 21.9328205,8.63688205 21.0832818,8.59019051 L19.0182933,8.29002235 C17.4703363,8.06188317 16.0975946,7.26072153 14.9361966,5.9630837 L14.7432486,5.74122648 L14.5462129,5.50537935 L14.2030602,5.07759734 L13.5762547,4.27677864 C12.0192962,2.30016621 10.8947847,1.37000881 9.07690053,0.978925938 C6.77115833,0.522482977 4.35799502,1.25868211 2.74398265,2.89121433 Z M8.77649837,2.44817811 C10.1558007,2.74501212 11.046308,3.48160917 12.4043558,5.20569083 L13.1702553,6.18194157 L13.4020945,6.4687767 L13.6135941,6.72161431 L13.8242384,6.96365433 C15.2098976,8.51187255 16.8899554,9.49239049 18.804202,9.77450849 L20.9367181,10.0814941 C21.7475443,10.1289405 22.3125703,10.2099671 22.8487715,10.3660392 C23.9386443,10.6636944 24.8732497,11.1304545 25.6812446,11.7967771 C29.2794114,14.6526461 29.7119484,19.8988163 26.6127138,23.2795218 C23.992024,26.1182705 19.5895689,26.6760062 16.3336841,24.5746616 C15.2118952,23.868153 14.3123865,22.8800777 13.6826584,21.7069591 C13.3476223,21.0433984 13.1381769,20.525233 13.015854,20.0108172 L12.9851467,19.9122682 L12.2105828,17.9193562 C11.4794642,16.0702551 10.0567177,14.5578268 8.25385094,13.6839005 L7.57400148,13.3718181 L6.18408208,12.7822787 L5.86585661,12.6403502 L5.59188178,12.5103617 L5.34543233,12.3840061 L5.10978299,12.2529766 C2.27944894,10.6856684 1.4527661,7.05354124 3.3255603,4.50470055 L3.53421767,4.2299751 L3.66168652,4.09701301 C4.91858645,2.7186976 6.90164914,2.07711522 8.77649837,2.44817811 Z" jetway-hook-id="E455862C-A845-4647-AE5E-4083230B17A2" id="Path" fill="#E6E6E6" fill-rule="nonzero"></path> <path d="M21.1859758,14.6046694 C20.6990302,15.0921221 20.7805643,15.8646248 21.3089524,16.2715724 C24.6394894,18.7540243 29.3076345,18.513643 32.3492362,15.5076201 C35.3512182,12.5015668 35.6719225,7.82658687 33.2338674,4.49109547 C32.8276402,3.96231331 32.056125,3.88037788 31.6104658,4.32727618 L21.1859758,14.6046694 Z" jetway-hook-id="BA6B2400-DA04-4D25-853B-9DDF632E62B2" id="Path" fill="#D2E3FC" fill-rule="nonzero" transform="translate(27.859729, 11.001265) rotate(81.000000) translate(-27.859729, -11.001265) "></path> <path d="M20.6611995,9.75649662 C21.2867162,9.79833979 21.8833728,9.8775555 22.4800293,10.0512244 C23.6031578,10.3578509 24.6487974,10.8560521 25.5782849,11.622565 C27.5604437,13.1957144 28.6674315,15.4479511 28.8337201,17.7708131 C27.1899059,17.7142771 25.5438696,17.1798847 24.1111683,16.1404489 C22.0442733,14.6201035 20.8691502,12.3656607 20.6768247,10.010941 Z" jetway-hook-id="2FEB731F-1A21-47FB-9EBF-E2A34D55E502" id="Combined-Shape" fill="#2A84FC"></path> </g> <g jetway-hook-id="8A870B21-1A04-47EE-9497-4FA1BACFCCE0" id="Group-2" transform="translate(133.435680, 24.000000)"> <path d="M4.9706283,9.75458325 L10.9448473,9.76947377 C12.0455222,9.77221716 12.9371132,10.6638085 12.9398561,11.7644835 L12.9547484,17.7404388 C12.957501,18.8450048 12.0643047,19.742664 10.9597387,19.7454166 C10.9564157,19.7454249 10.9530927,19.7454249 10.9497697,19.7454166 L4.97555074,19.7305261 C3.87487578,19.7277827 2.98328478,18.8361913 2.98054186,17.7355163 L2.9656496,11.7595611 C2.96289699,10.654995 3.85609328,9.75733586 4.96065935,9.75458325 C4.96398233,9.75457496 4.96730533,9.75457497 4.9706283,9.75458325 Z" jetway-hook-id="C5780055-95B6-4507-B7B0-0DC9BC869B8F" id="Rectangle" fill="#D2E3FC" transform="translate(7.960199, 14.750000) rotate(44.000000) translate(-7.960199, -14.750000) "></path> <path d="M25.5835955,10.153513 C25.5453707,10.5659413 25.1817077,10.8691382 24.7713312,10.8307224 C24.3609548,10.7923065 24.0592663,10.4268251 24.097491,10.0143968 C24.1637439,9.29955708 24.1269574,8.57558219 24.0092374,7.95052834 L23.9699145,7.83309543 C23.8384578,7.44051581 24.0485564,7.01516756 24.4391828,6.88305352 C24.8298093,6.75093948 25.2530414,6.96208855 25.3844982,7.35466817 L25.4484077,7.56474048 C25.619007,8.42512136 25.663192,9.29470136 25.5835955,10.153513 Z M22.3611867,16.2989949 C22.0458941,16.5657662 21.5751141,16.5251539 21.30967,16.2082849 C21.044226,15.8914159 21.0846362,15.418282 21.3999288,15.1515107 C21.9826162,14.6584948 22.489378,14.0822183 22.903058,13.4434288 C23.1278799,13.0962671 23.5901641,12.9980023 23.9355987,13.2239483 C24.2810333,13.4498944 24.3788092,13.91449 24.1539872,14.2616517 C23.6604198,15.0238005 23.0560778,15.7110426 22.3611867,16.2989949 Z M15.7999466,18.483022 C15.3885737,18.4575528 15.0756342,18.1017549 15.1009766,17.6883251 C15.1263191,17.2748953 15.4803468,16.9603911 15.8917198,16.9858603 C16.5486408,17.026532 17.2113849,16.9795725 17.8808589,16.841205 L18.1573642,16.781529 C18.5587274,16.687372 18.9600461,16.9380387 19.0537346,17.3414087 C19.1474231,17.7447787 18.8980035,18.148104 18.4966403,18.2422609 L18.1749387,18.3117843 C17.3829319,18.4755143 16.5882088,18.5318254 15.7999466,18.483022 Z M9.5896663,15.4361643 C9.31509203,15.1272532 9.34168162,14.653132 9.64905582,14.3771848 C9.95643002,14.1012377 10.4281925,14.1279602 10.7027667,14.4368713 C11.2098701,15.0073903 11.7979213,15.4989246 12.4458533,15.8947114 C12.7980525,16.109851 12.910029,16.5711975 12.6959598,16.9251577 C12.4818906,17.279118 12.0228393,17.3916543 11.6706401,17.1765148 C10.8968839,16.7038688 10.1949561,16.1171485 9.5896663,15.4361643 Z M7.21786446,8.91099767 C7.22996064,8.49696253 7.57373846,8.17117566 7.98571372,8.18333232 C8.39768897,8.19548897 8.72185502,8.54098568 8.70975884,8.95502082 C8.69352944,9.51053041 8.73726862,10.0698313 8.8191952,10.5361768 L8.88155441,10.7478784 C8.91322947,10.9092742 8.94971065,11.0690429 8.99092673,11.227048 C9.09544368,11.6277218 8.85697702,12.0376836 8.45829652,12.1427231 C8.05961603,12.2477627 7.6516939,12.0081037 7.54717695,11.6074298 L7.49248465,11.3864781 C7.46788207,11.2809143 7.44843558,11.1867628 7.43882842,11.1222238 L7.37535443,10.9047217 C7.25067997,10.2420074 7.19847966,9.57451243 7.21786446,8.91099767 Z M10.0148689,2.56595303 C10.3116541,2.27853631 10.7840842,2.28733397 11.070071,2.58560315 C11.3560578,2.88387233 11.3473039,3.35866456 11.0505186,3.64608128 C10.5039106,4.17543473 10.0381137,4.78470027 9.66909324,5.45225467 C9.46893333,5.81434201 9.01460222,5.94479881 8.65431631,5.7436381 C8.29403039,5.54247738 8.16422263,5.08587462 8.36438255,4.72378728 C8.80516079,3.92642373 9.36159128,3.19860879 10.0148689,2.56595303 Z M16.4441786,0.000147161939 C16.8563249,0.00247499402 17.1885577,0.34014321 17.1862535,0.754350231 C17.1839252,1.16855725 16.847937,1.50245131 16.4357907,1.50012347 C15.9374829,1.497309 15.4384944,1.54258649 14.9303669,1.6381073 C14.675385,1.68649913 14.4245879,1.74721372 14.1785108,1.81995766 C13.7831084,1.93684432 13.3682875,1.70946003 13.2519824,1.31208064 C13.1356773,0.914701241 13.3619303,0.497806231 13.7573327,0.38091957 C14.0508685,0.294146129 14.3497984,0.221779248 14.6546763,0.16391903 C15.2571258,0.0506656556 15.8508084,-0.00320423587 16.4441786,0.000147161939 Z M22.8374949,2.63146338 C23.1325622,2.9206611 23.1384868,3.39549751 22.8507279,3.69204017 C22.562969,3.98858284 22.0904949,3.9945371 21.7954276,3.70533938 C21.2526889,3.17339711 20.6322745,2.72376057 19.9560695,2.37199479 C19.5900444,2.18158638 19.4469109,1.72902423 19.636372,1.36116895 C19.8258331,0.993313661 20.2761437,0.849464552 20.6421689,1.03987297 C21.448832,1.45950381 22.1892404,1.99610426 22.8374949,2.63146338 Z M25.4067408,7.43476949 C25.484186,7.84160483 25.2188033,8.23450567 24.813992,8.31233807 C24.4091808,8.39017048 24.0182346,8.12346091 23.9407895,7.71662557 C23.8801939,7.39830481 23.8003464,7.08654201 23.7018319,6.78239006 C23.5742575,6.38851891 23.7885451,5.96528666 24.1804567,5.83707437 C24.5723683,5.70886208 24.9934949,5.92422114 25.1210694,6.31809229 C25.2389335,6.68198396 25.3343869,7.05467974 25.4067408,7.43476949 Z" jetway-hook-id="8E3E9B8A-653B-4DD6-9A15-D936466D25D8" id="Path" fill="#4682F4" fill-rule="nonzero"></path> <path d="M10.7027667,14.4368713 C11.2098701,15.0073903 11.7979213,15.4989246 12.4458533,15.8947114 C12.7980525,16.109851 12.910029,16.5711975 12.6959598,16.9251577 C12.4818906,17.279118 12.0228393,17.3916543 11.6706401,17.1765148 C10.8968839,16.7038688 10.1949561,16.1171485 9.5896663,15.4361643 C9.31509203,15.1272532 9.34168162,14.653132 9.64905582,14.3771848 C9.95643002,14.1012377 10.4281925,14.1279602 10.7027667,14.4368713 Z M8.66356789,8.67146097 L8.68893532,8.75494072 C8.70445028,8.81891295 8.71177487,8.88601496 8.70975884,8.95502082 C8.69352944,9.51053041 8.73726862,10.0698313 8.8191952,10.5361768 L8.88155441,10.7478784 C8.91322947,10.9092742 8.94971065,11.0690429 8.99092673,11.227048 C9.09544368,11.6277218 8.85697702,12.0376836 8.45829652,12.1427231 C8.05961603,12.2477627 7.6516939,12.0081037 7.54717695,11.6074298 L7.49248465,11.3864781 C7.46788207,11.2809143 7.44843558,11.1867628 7.43882842,11.1222238 L7.37535443,10.9047217 C7.25067997,10.2420074 7.19847966,9.57451243 7.21786446,8.91099767 C7.22106639,8.80140013 7.24750899,8.69798608 7.29230522,8.6053868 C7.74034238,8.46626574 8.22746219,8.48784824 8.66356789,8.67146097 Z" jetway-hook-id="F16AAA22-7D99-4B23-A633-5DDC1E126B7F" id="Combined-Shape" fill="#FFFFFF" fill-rule="nonzero"></path> </g> <path d="M184.679027,16 C186.602189,16 188.162048,14.4331155 188.162048,12.5000436 C188.162048,10.5669717 186.602189,9 184.679027,9 C182.755866,9 181.196874,10.5669717 181.196874,12.5000436 C181.196874,14.4331155 182.755866,16 184.679027,16 Z" jetway-hook-id="03331C0A-4A06-459F-812B-E02279731F6E" id="Path" fill="#BDC1C6" fill-rule="nonzero"></path> <path d="M161.504103,5.71980142 L157.80198,8.19701491 C156.974261,8.74252475 156.505173,9.69075071 156.577255,10.677241 L156.83807,15.1619529 C156.910635,16.1493022 157.483515,17.017778 158.346863,17.4541214 L162.3233,19.4640297 C163.190323,19.9019757 164.232577,19.8317499 165.056312,19.2887647 L168.77554,16.7999548 C169.598834,16.2574579 170.068074,15.3088259 169.995506,14.3221249 L169.734717,9.83817108 C169.66269,8.85114926 169.0896,7.98227077 168.22632,7.54591162 L164.249838,5.53609082 C163.347745,5.09831338 162.303894,5.1686468 161.504103,5.71980142 Z M163.590106,6.88154339 L167.555711,8.88597696 C167.948197,9.08436549 168.212443,9.48499587 168.245456,9.93686939 L168.506272,14.4211881 C168.539494,14.8741133 168.32835,15.3009687 167.952738,15.548483 L164.233417,18.037354 C163.854982,18.2867875 163.379662,18.3188139 162.993737,18.1238775 L159.017456,16.1140478 C158.624763,15.9155773 158.360579,15.5150801 158.327303,15.0628652 L158.066516,10.5785382 C158.033519,10.1258105 158.244642,9.69904062 158.624809,9.44846924 L162.339723,6.96263505 C162.70243,6.71276965 163.176415,6.6808331 163.590106,6.88154339 Z" jetway-hook-id="FF182FA5-6273-4D44-A677-4A0EB6D1E767" id="Path" fill="#E6E6E6" fill-rule="nonzero" transform="translate(163.286427, 12.500492) rotate(30.000000) translate(-163.286427, -12.500492) "></path> <g jetway-hook-id="5A477986-0486-4487-AB24-5AC458D45302" id="Group-10" transform="translate(63.286426, 38.250000)"> <path d="M23.39801,0 L61.6766169,0 C63.3334712,-3.04359188e-16 64.6766169,1.34314575 64.6766169,3 L64.6766169,19 C64.6766169,20.6568542 63.3334712,22 61.6766169,22 L23.39801,22 C21.7411557,22 20.39801,20.6568542 20.39801,19 L20.39801,3 C20.39801,1.34314575 21.7411557,3.04359188e-16 23.39801,0 Z" jetway-hook-id="F405D252-A538-47DA-895B-6EDBBCF0C9AF" id="Rectangle" fill="#DADCE0"></path> <path d="M24.8756219,-4.54747351e-13 L24.8756219,22 L3,22 C1.34314575,22 2.02906125e-16,20.6568542 0,19 L0,3 C-2.02906125e-16,1.34314575 1.34314575,-4.54442992e-13 3,-4.54747351e-13 L8.955,-4.54747351e-13 L8.95522388,7.75 C8.95522388,8.30228475 8.50750863,8.75 7.95522388,8.75 L5.88831194,8.75 C5.3360272,8.75 4.88831194,9.19771525 4.88831194,9.75 C4.88831194,10.0143525 4.99298532,10.2679503 5.17944401,10.4553412 L11.728943,17.0375877 C12.1184922,17.4290847 12.7516552,17.4306636 13.1431522,17.0411144 C13.1443307,17.0399418 13.1455062,17.0387662 13.1466789,17.0375877 L19.6961779,10.4553412 C20.0857271,10.0638443 20.0841481,9.43068127 19.6926512,9.04113206 C19.5052602,8.85467338 19.2516624,8.75 18.9873099,8.75 L17.4179104,8.75 C16.8656257,8.75 16.4179104,8.30228475 16.4179104,7.75 L16.417,-4.54747351e-13 L24.8756219,-4.54747351e-13 Z" jetway-hook-id="A81AC2CC-45E4-4722-A8C7-3CBC85719C6F" id="Combined-Shape" fill="#9AA0A6"></path> </g> <path d="M60.1944516,25.9323381 L65.1763544,25.9438679 C66.0020717,25.9457789 66.6709715,26.6146815 66.6728789,27.4403989 L66.6728895,27.4449898 C66.6747914,28.268312 66.0088987,28.9372883 65.1855765,28.9391902 C65.1832786,28.9391955 65.1809806,28.9391955 65.1786827,28.9391902 L60.1967799,28.9276603 C59.3710626,28.9257493 58.7021629,28.2568467 58.7002554,27.4311294 L58.7002448,27.4265384 C58.698343,26.6032162 59.3642357,25.9342399 60.1875578,25.9323381 C60.1898558,25.9323327 60.1921537,25.9323328 60.1944516,25.9323381 Z" jetway-hook-id="E2E66CB5-B412-4A28-863F-984F61A22472" id="Rectangle" fill="#BCC1C7" transform="translate(62.686567, 27.435764) rotate(34.000000) translate(-62.686567, -27.435764) "></path> <path d="M102.201043,1.45212494 C102.608241,1.5161577 102.88669,1.89981643 102.822976,2.30905069 C102.759262,2.71828495 102.377512,2.99812606 101.970313,2.9340933 C101.192966,2.81185379 100.402917,2.75 99.6048341,2.75 C99.1926813,2.75 98.8585654,2.41421356 98.8585654,2 C98.8585654,1.58578644 99.1926813,1.25 99.6048341,1.25 C100.480245,1.25 101.347434,1.31789321 102.201043,1.45212494 Z M108.536645,3.85597311 C108.884433,4.07824255 108.987083,4.5417752 108.765919,4.89130227 C108.544755,5.24082934 108.083529,5.34399203 107.735741,5.12172259 C107.067996,4.69497093 106.367954,4.32123332 105.641678,4.00436584 C105.263613,3.83941996 105.090181,3.39769059 105.254306,3.01773568 C105.418432,2.63778078 105.857963,2.46348153 106.236028,2.62842742 C107.034066,2.9766037 107.803158,3.38720581 108.536645,3.85597311 Z M113.395807,8.59162347 C113.627584,8.93413491 113.539197,9.40062655 113.198389,9.6335617 C112.857582,9.86649686 112.393411,9.77766773 112.161635,9.43515628 C111.71652,8.77738012 111.220775,8.15522118 110.679385,7.57460255 C110.397561,7.27235781 110.412897,6.79773424 110.713638,6.51450113 C111.014379,6.23126803 111.486641,6.24668001 111.768465,6.54892475 C112.362803,7.18632808 112.907067,7.86937905 113.395807,8.59162347 Z M115.971376,14.8199372 C116.049185,15.2267025 115.784153,15.6198426 115.379412,15.6980401 C114.97467,15.7762377 114.583486,15.5098809 114.505677,15.1031156 C114.355825,14.3197211 114.145292,13.5523277 113.876524,12.8065083 C113.736176,12.4170498 113.93655,11.9869882 114.324071,11.8459389 C114.711592,11.7048895 115.139514,11.906265 115.279861,12.2957236 C115.575277,13.1154894 115.806687,13.9589788 115.971376,14.8199372 Z M115.871391,21.6639475 C115.781612,22.0682145 115.38274,22.3227939 114.980484,22.2325665 C114.578228,22.142339 114.324915,21.7414719 114.414694,21.3372048 C114.586258,20.564665 114.698045,19.7765355 114.748299,18.9778282 C114.774308,18.5644403 115.128844,18.2505138 115.540175,18.2766538 C115.951506,18.3027938 116.263871,18.6591016 116.237861,19.0724896 C116.182686,19.9494132 116.059893,20.8151369 115.871391,21.6639475 Z M113.061186,27.8848592 C112.817716,28.2190764 112.350756,28.2916549 112.018202,28.0469678 C111.685647,27.8022808 111.61343,27.3329862 111.8569,26.998769 C112.324452,26.3569472 112.741548,25.6794156 113.103927,24.972274 C113.292637,24.6040288 113.742653,24.4592513 114.109066,24.6489044 C114.475479,24.8385576 114.619536,25.2908236 114.430826,25.6590688 C114.032747,26.4358759 113.574638,27.1800304 113.061186,27.8848592 Z M108.042567,32.4478062 C107.687305,32.6577971 107.229923,32.5385911 107.020977,32.1815523 C106.812031,31.8245134 106.930644,31.3648451 107.285906,31.1548543 C107.968084,30.7516286 108.618038,30.2952036 109.229751,29.790208 C109.548231,29.5272887 110.018488,29.5736205 110.280099,29.893693 C110.54171,30.2137654 110.495609,30.6863735 110.177129,30.9492927 C109.50549,31.5037601 108.79178,32.004957 108.042567,32.4478062 Z M101.701817,34.6186135 C101.292877,34.6702306 100.919729,34.3789054 100.868369,33.9679205 C100.817009,33.5569356 101.106885,33.1819227 101.515825,33.1303057 C102.304499,33.0307581 103.080082,32.8696561 103.837299,32.6490876 C104.233159,32.5337779 104.64708,32.762814 104.761815,33.1606538 C104.876551,33.5584937 104.648655,33.9744836 104.252794,34.0897932 C103.420574,34.3322093 102.568259,34.5092499 101.701817,34.6186135 Z M94.9235428,34.0800461 C94.5279239,33.9639019 94.3008965,33.5474323 94.4164629,33.1498353 C94.5320294,32.7522383 94.946427,32.5240757 95.3420459,32.64022 C96.0990222,32.8624501 96.8744718,33.0252084 97.6631061,33.126394 C98.0719406,33.1788494 98.3610545,33.554456 98.30886,33.9653347 C98.2566655,34.3762133 97.8829277,34.6667728 97.4740932,34.6143174 C96.6076808,34.5031525 95.7555036,34.3242899 94.9235428,34.0800461 Z M88.9654996,30.8936549 C88.6483819,30.6290777 88.6047224,30.1562354 88.8679833,29.8375322 C89.1312443,29.5188289 89.6017341,29.4749511 89.9188517,29.7395284 C90.5278662,30.2476406 91.1753608,30.7074039 91.8553266,31.1141601 C92.2094886,31.3260202 92.3257015,31.7863074 92.1148954,32.1422402 C91.9040894,32.498173 91.4460922,32.614967 91.0919302,32.4031069 C90.3451619,31.9563893 89.634166,31.4515359 88.9654996,30.8936549 Z M84.7043082,25.5118406 C84.5192333,25.1417369 84.6677361,24.6909255 85.0359986,24.5049252 C85.404261,24.318925 85.8528295,24.4681703 86.0379044,24.838274 C86.3933353,25.5490473 86.8037848,26.2306956 87.2650557,26.8771149 C87.5052486,27.2137183 87.4284501,27.6822777 87.0935213,27.9236716 C86.7585926,28.1650655 86.2923643,28.087883 86.0521713,27.7512796 C85.5455993,27.0413759 85.094771,26.2926691 84.7043082,25.5118406 Z M82.9688392,19.0242203 C82.9440062,18.6107593 83.2573839,18.2553511 83.6687879,18.2303939 C84.0801919,18.2054367 84.4338319,18.5203813 84.4586649,18.9338423 C84.5066419,19.7326414 84.6161397,20.5209823 84.7854168,21.2938697 C84.8740165,21.6983994 84.6195361,22.0985189 84.217019,22.1875616 C83.8145019,22.2766043 83.4163731,22.0208516 83.3277734,21.6163219 C83.1417877,20.767146 83.0215126,19.9012134 82.9688392,19.0242203 Z M83.9382472,12.2723566 C84.0791739,11.8831093 84.5073949,11.682377 84.8947057,11.8240083 C85.2820164,11.9656396 85.4817501,12.3960018 85.3408234,12.7852491 C85.0709391,13.5306843 84.8592644,14.2977661 84.7082544,15.0809157 C84.6298429,15.487564 84.2382642,15.7533347 83.833639,15.6745311 C83.4290138,15.5957275 83.1645653,15.202191 83.2429769,14.7955427 C83.4089393,13.9348487 83.6416045,13.0917 83.9382472,12.2723566 Z M87.4902355,6.496564 C87.7733403,6.19553072 88.2456637,6.18214435 88.5451993,6.46666471 C88.8447349,6.75118508 88.8580547,7.2258701 88.5749499,7.52690338 C88.0311092,8.10518432 87.5327294,8.72520269 87.0848183,9.38104658 C86.851583,9.7225562 86.3870375,9.8093845 86.047227,9.57498302 C85.7074164,9.34058153 85.6210201,8.87371334 85.8542554,8.53220372 C86.3460595,7.81209051 86.8932111,7.13139674 87.4902355,6.496564 Z M93.0038149,2.61529826 C93.3822044,2.45110655 93.8213911,2.62628186 93.984766,3.00656328 C94.1481408,3.38684469 93.973837,3.82822737 93.5954475,3.99241909 C92.8686752,4.30778199 92.168031,4.68004551 91.499573,5.10536877 C91.1513433,5.32693872 90.690323,5.22284918 90.4698553,4.87287828 C90.2493877,4.52290738 90.3529594,4.05958198 90.7011892,3.83801202 C91.435466,3.3708099 92.2052263,2.96182387 93.0038149,2.61529826 Z M99.5635019,1.2500482 C99.9756535,1.24904404 100.31058,1.58401362 100.311584,1.99822596 C100.312583,2.4124383 99.97928,2.74903961 99.5671284,2.7500482 C98.8019914,2.7519144 98.0443058,2.8106502 97.2981843,2.92496126 C96.8907387,2.98738479 96.5100863,2.70603764 96.4479733,2.29655482 C96.3858604,1.887072 96.6658078,1.50451632 97.0732534,1.4420928 C97.8925553,1.31656999 98.7242126,1.25209989 99.5635019,1.2500482 Z" jetway-hook-id="72901C9F-A3F2-4C58-95C1-9C21572293AC" id="Oval" fill="#DADCE0" fill-rule="nonzero"></path> <path d="M100.102346,8 C100.651884,8 101.097371,8.44548781 101.097371,8.99502488 L101.09661,16.499 L108.555083,16.5 C109.107368,16.5 109.555083,16.9477153 109.555083,17.5 C109.555083,18.0522847 109.107368,18.5 108.555083,18.5 L101.09661,18.499 L101.097371,26.0049751 C101.097371,26.5545122 100.651884,27 100.102346,27 C99.5528094,27 99.1073216,26.5545122 99.1073216,26.0049751 L99.1066102,18.499 L91.6496102,18.5 C91.0973254,18.5 90.6496102,18.0522847 90.6496102,17.5 C90.6496102,16.9477153 91.0973254,16.5 91.6496102,16.5 L99.1066102,16.499 L99.1073216,8.99502488 C99.1073216,8.44548781 99.5528094,8 100.102346,8 Z" jetway-hook-id="5F57EA87-A7B8-4C83-BBFD-47F4FB7722B8" id="Combined-Shape" fill="#99A0A7" transform="translate(100.102346, 17.500000) rotate(26.000000) translate(-100.102346, -17.500000) "></path> <path d="M94.1321972,59.75 C126.153952,59.75 159.30016,61.3211366 193.570845,64.4632993 L196.68946,64.7532784 L196.550059,66.2467216 C161.216164,62.9155336 127.076869,61.25 94.1321972,61.25 C62.0356988,61.25 31.6400656,62.8308782 2.94539137,65.9923911 L0.683556197,66.2452681 L0.516161664,64.7547319 C29.9312465,61.4181563 61.136558,59.75 94.1321972,59.75 Z" jetway-hook-id="29AB6C55-96E1-452B-8A2D-ECECFA70A902" id="Path-35" fill="#D2E3FC" fill-rule="nonzero"></path> </g> </g> </g>
+      </g>
+
+      <g id="contacts-empty" fill="none" fill-rule="evenodd" width="200px" height="86px" viewBox="0 0 200 86">
+        <g jetway-hook-id="1B21145A-F9D1-4FC9-BEEE-803947016D7B" id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g jetway-hook-id="87118FA5-DB11-4BB8-938F-285C7F2DA7AB" id="video-ratio-copy" transform="translate(-207.000000, -511.000000)"> <g jetway-hook-id="BAC9FFF5-17FC-4983-A74E-7CA69E7AA580" id="Illo_Zero_contact" transform="translate(207.000000, 518.000000)"> <g jetway-hook-id="0F83DF5F-F409-4FE6-8C46-7F228F33FD31" id="glass" transform="translate(110.702644, 10.727953)"> <circle jetway-hook-id="40B770E9-C984-4FCB-8024-ADB6915AC3DE" id="Oval" fill="#D2E3FC" cx="16" cy="16" r="16"></circle> <rect jetway-hook-id="F634359F-92CD-4B63-BFEF-BBE4807259A1" id="Rectangle" fill="#D8D8D8" transform="translate(36.152671, 35.859670) rotate(-46.000000) translate(-36.152671, -35.859670) " x="34.1526708" y="27.3596699" width="4" height="17" rx="1"></rect> <path d="M27.8116966,23.2278245 L26.3116966,23.2278245 C24.7929135,23.2278245 23.5616966,24.4590415 23.5616966,25.9778245 L23.5616966,29.9778245 C23.5616966,31.4966076 24.7929135,32.7278245 26.3116966,32.7278245 L27.8116966,32.7278245 C30.1589068,32.7278245 32.0616966,30.8250347 32.0616966,28.4778245 L32.0616966,27.4778245 C32.0616966,25.1306144 30.1589068,23.2278245 27.8116966,23.2278245 Z M26.3116966,24.7278245 L27.8116966,24.7278245 C29.3304796,24.7278245 30.5616966,25.9590415 30.5616966,27.4778245 L30.5616966,28.4778245 C30.5616966,29.9966076 29.3304796,31.2278245 27.8116966,31.2278245 L26.3116966,31.2278245 C25.6213406,31.2278245 25.0616966,30.6681805 25.0616966,29.9778245 L25.0616966,25.9778245 C25.0616966,25.2874686 25.6213406,24.7278245 26.3116966,24.7278245 Z" jetway-hook-id="008E4C7A-ABA7-456E-B2E0-B2D975497AB7" id="Rectangle" fill="#FABD04" fill-rule="nonzero" transform="translate(27.811697, 27.977825) rotate(42.000000) translate(-27.811697, -27.977825) "></path> <path d="M25.9915923,23.6477298 C27.0078565,22.519054 28.7466739,22.4279265 29.8753497,23.4441907 L29.8753497,23.4441907 L30.0714669,23.6217978 C29.8280951,24.0701665 29.5639185,24.5056006 29.2802323,24.9268047 L28.8716538,24.558908 C28.3586194,24.0969697 27.5682478,24.1383913 27.1063095,24.6514257 L27.1063095,24.6514257 L24.4297871,27.624005 C23.9678488,28.1370395 24.0092704,28.927411 24.5223049,29.3893493 L24.5223049,29.3893493 L24.6227066,29.4800654 C24.1875963,29.7589678 23.738094,30.0173803 23.2755613,30.2539412 C22.3824587,29.2216234 22.3776643,27.6614035 23.3150698,26.6203091 L23.3150698,26.6203091 Z" jetway-hook-id="A3DBC112-B951-41B4-BBC1-81FA3AAFA8B5" id="Combined-Shape" fill="#FFFFFF" fill-rule="nonzero"></path> <path d="M17.0871617,19.4758659 L17.0871617,18.7798659 C17.0871617,18.2038659 17.1951617,17.7158659 17.4111617,17.3158659 C17.6271617,16.9158659 18.0071617,16.4678659 18.5511617,15.9718659 C19.2231617,15.3478659 19.7591617,14.7278659 20.1591617,14.1118659 C20.5591617,13.4958659 20.7591617,12.7638659 20.7591617,11.9158659 C20.7591617,11.0678659 20.5471617,10.2998659 20.1231617,9.61186591 C19.6991617,8.92386591 19.1071617,8.37986591 18.3471617,7.97986591 C17.5871617,7.57986591 16.7191617,7.37986591 15.7431617,7.37986591 C14.4311617,7.37986591 13.3511617,7.74786591 12.5031617,8.48386591 C11.6551617,9.21986591 11.0711617,10.0678659 10.7511617,11.0278659 L10.7511617,11.0278659 L13.0551617,11.9878659 C13.2631617,11.3638659 13.5871617,10.8478659 14.0271617,10.4398659 C14.4671617,10.0318659 15.0471617,9.82786591 15.7671617,9.82786591 C16.5191617,9.82786591 17.1111617,10.0318659 17.5431617,10.4398659 C17.9751617,10.8478659 18.1911617,11.3638659 18.1911617,11.9878659 C18.1911617,12.4998659 18.0671617,12.9398659 17.8191617,13.3078659 C17.5711617,13.6758659 17.1671617,14.1078659 16.6071617,14.6038659 C15.8071617,15.3238659 15.2511617,15.9558659 14.9391617,16.4998659 C14.6271617,17.0438659 14.4711617,17.7078659 14.4711617,18.4918659 L14.4711617,18.4918659 L14.4711617,19.4758659 L17.0871617,19.4758659 Z M15.7671617,25.0918659 C16.2631617,25.0918659 16.6831617,24.9158659 17.0271617,24.5638659 C17.3711617,24.2118659 17.5431617,23.7878659 17.5431617,23.2918659 C17.5431617,22.7958659 17.3711617,22.3718659 17.0271617,22.0198659 C16.6831617,21.6678659 16.2631617,21.4918659 15.7671617,21.4918659 C15.2711617,21.4918659 14.8471617,21.6638659 14.4951617,22.0078659 C14.1431617,22.3518659 13.9671617,22.7798659 13.9671617,23.2918659 C13.9671617,23.7878659 14.1431617,24.2118659 14.4951617,24.5638659 C14.8471617,24.9158659 15.2711617,25.0918659 15.7671617,25.0918659 Z" jetway-hook-id="7D6CA87B-D902-47EA-AAAF-EE6BF45DA3BE" id="?" fill="#4682F4" fill-rule="nonzero" transform="translate(15.755162, 16.235866) rotate(6.000000) translate(-15.755162, -16.235866) "></path> <path d="M16,3 C8.82029825,3 3,8.82029825 3,16 C3,23.1797017 8.82029825,29 16,29 C23.1797017,29 29,23.1797017 29,16 C29,8.82029825 23.1797017,3 16,3 Z M16,4 C22.627417,4 28,9.372583 28,16 C28,22.627417 22.627417,28 16,28 C9.372583,28 4,22.627417 4,16 C4,9.372583 9.372583,4 16,4 Z" jetway-hook-id="2D024BBB-D177-4B82-BC58-DF85C75B3AA4" id="Oval" fill="#FFFFFF" fill-rule="nonzero"></path> </g> <g jetway-hook-id="A0D557FE-1075-4B29-914E-7321D22DC556" id="Group-15"> <g jetway-hook-id="21F5BC8F-E389-4328-8C0B-58A1938AC1DD" id="Group-17" transform="translate(90.636527, 35.769915) rotate(-12.000000) translate(-90.636527, -35.769915) translate(53.636527, 0.291654)"> <path d="M8.83114634,14.8161913 L48.935198,6.29181195 C51.096062,5.83250613 53.2201293,7.21189158 53.6794351,9.37275559 L59.3924868,36.2505505 C59.8517926,38.4114145 58.4724072,40.5354819 56.3115432,40.9947877 L16.2074915,49.519167 C14.0466275,49.9784728 11.9225602,48.5990874 11.4632544,46.4382234 L5.7502027,19.5604284 C5.29089688,17.3995644 6.67028233,15.2754971 8.83114634,14.8161913 Z" jetway-hook-id="EB1DB367-5C69-4704-85D9-64CC6245C851" id="Rectangle-Copy-4" fill="#D2E3FC" transform="translate(32.571345, 27.905489) rotate(12.000000) translate(-32.571345, -27.905489) "></path> <path d="M15.2295742,25.7560991 L55.2712803,17.1118408 C57.4306733,16.6456681 59.5591149,18.0182944 60.0252876,20.1776874 C60.0270882,20.1860283 60.0288622,20.194375 60.0306094,20.2027274 L65.6624708,47.1246461 C66.1127687,49.2771995 64.7409299,51.3895489 62.5913024,51.8536134 L22.5495963,60.4978717 C20.3902033,60.9640444 18.2617617,59.5914181 17.795589,57.4320251 C17.7937884,57.4236842 17.7920144,57.4153375 17.7902672,57.4069852 L12.1584058,30.4850664 C11.7081079,28.3325131 13.0799467,26.2201636 15.2295742,25.7560991 Z" jetway-hook-id="F3495E78-46EF-45D0-802B-FDFD1AA927D3" id="Rectangle" fill="#FFFFFF" transform="translate(38.910438, 38.804856) rotate(25.000000) translate(-38.910438, -38.804856) "></path> <path d="M55.0641199,16.5299709 L14.9600683,24.9308085 C12.3940423,25.4683295 10.756022,27.9541039 11.3014477,30.4829411 L17.1229751,57.4741445 C17.6684007,60.0029817 20.1907307,61.6172625 22.7567567,61.0797416 L62.8608083,52.678904 C65.4268343,52.1413831 67.0648546,49.6556086 66.5194289,47.1267714 L60.6979015,20.135568 C60.1524759,17.6067308 57.6301459,15.99245 55.0641199,16.5299709 Z M59.2306801,20.4429157 L65.0522075,47.4341191 C65.4253935,49.1643761 64.3046428,50.8651692 62.5489408,51.2329467 L22.4448892,59.6337843 C20.6891871,60.0015618 18.9633824,58.8970538 18.5901965,57.1667968 L12.7686691,30.1755934 C12.3954831,28.4453364 13.5162338,26.7445433 15.2719358,26.3767658 L55.3759874,17.9759282 C57.1316895,17.6081508 58.8574942,18.7126587 59.2306801,20.4429157 Z" jetway-hook-id="7944401E-0269-4B38-B330-BD385FED8A90" id="Rectangle" fill="#D2E3FC" fill-rule="nonzero" transform="translate(38.910438, 38.804856) rotate(25.000000) translate(-38.910438, -38.804856) "></path> <g jetway-hook-id="56FDFA07-2ABB-4739-AF26-FBEFEFA00440" id="Group-14" transform="translate(58.075117, 26.030367)" fill="#4682F4" fill-rule="nonzero"> <path d="M2.80253991,0.25568634 L4.76869081,0.626478267 C6.39689163,0.933281294 7.46809619,2.50191184 7.16129316,4.13011266 C7.1561098,4.15762071 7.15054169,4.18505485 7.14459047,4.21240705 L4.28739248,17.3458222 C2.179929,14.6752635 0.924882546,11.3190271 0.924882546,7.67390722 C0.924882546,4.9921282 1.60421465,2.46671618 2.80253991,0.25568634 Z" jetway-hook-id="0079937D-7F77-4A27-8222-57873515EEFC" id="Combined-Shape"></path> </g> <g jetway-hook-id="CA4161A3-0523-4B26-8016-D846B7AD6514" id="Group-10" transform="translate(29.749621, 28.714095)" fill="#77AAF8"> <path d="M2.22220148,6.05827738 C-0.733844032,9.4753995 -0.319679249,14.607218 3.14744276,17.5202107 C6.61474361,20.4333535 11.8220301,20.0251911 14.7778608,16.6083173 C17.733844,13.1912672 17.3196792,8.05944863 13.8525572,5.146456 C10.3852882,2.23333984 5.17874789,2.64146233 2.22220148,6.05827738 Z M12.8794081,6.27139458 C15.7160725,8.65469187 16.0549363,12.8534739 13.636379,15.6492717 C11.2180332,18.444825 6.95750442,18.7787778 4.12059195,16.3952721 C1.28392753,14.0119748 0.945063705,9.81319276 3.36362097,7.01739496 C5.78261753,4.22181434 10.0425049,3.88789667 12.8794081,6.27139458 Z" jetway-hook-id="7027E108-5994-444C-A538-25E1893B51EC" id="Stroke-1" fill-rule="nonzero"></path> <path d="M5.68261234,11.1564023 C6.05790805,10.9836543 6.50424462,11.1434425 6.67953298,11.5132991 C7.11717709,12.4367237 7.86484556,13.0288489 8.56147974,13.057006 C9.25351428,13.0849963 9.99446453,12.5086788 10.2860754,11.6158858 C10.4129949,11.2273105 10.8355183,11.0137054 11.229808,11.1387854 C11.6240976,11.2638654 11.840844,11.6802653 11.7139246,12.0688407 C11.225881,13.56303 9.9044754,14.5908307 8.49999069,14.5340243 C7.1847226,14.4808629 5.97718167,13.5245359 5.32046702,12.1388748 C5.14517865,11.7690182 5.30731664,11.3291502 5.68261234,11.1564023 Z" jetway-hook-id="B40D8712-8E37-4CC4-9360-5A4C73296A65" id="Stroke-3" fill-rule="nonzero"></path> <path d="M13,5.94258851 C12.1158956,4.69634213 10.4311194,3.99676021 8.76667548,3.94537499 C7.10223155,3.89460887 5.4672344,4.42641495 4.05589252,5.20709884 C3.18931599,5.68628151 2.38023078,6.28680758 1.78498525,7.02725004 C1.47859856,7.40861505 1.21007201,7.83641249 1.06704482,8.28959299 C0.856009594,8.96255366 1.15117846,8.88949997 1.83967212,8.83811475 C4.33072909,8.65176594 6.7923393,8.18248886 9.14738022,7.4414273 C10.4710829,7.02601184 11.7597299,6.52454161 13,5.94258851" jetway-hook-id="354BD882-AA45-401B-BEF0-DA53ABEA7AEB" id="Fill-5"></path> <g jetway-hook-id="2B8DC94F-FFED-47D2-B1ED-136622670490" id="Group-9" transform="translate(4.000000, 0.000000)"> <path d="M2.81061883,4.75503791 C2.16691337,4.84487681 1.41569828,5.96582129 0.627970491,6.13665132 C0.72330922,6.11691399 -0.36801495,4.90136642 0.35006824,4.37730616 C1.06138982,3.85732948 1.93499008,3.54153213 2.75314513,3.23798554 C3.73628351,2.87386575 4.72347885,2.51859372 5.70391259,2.14562616 C6.66879461,1.77810338 7.61136332,1.35341039 8.58030231,0.998138369 C8.98058974,0.851129257 9.3889911,0.722496284 9.8055064,0.6272126 C10.3078942,0.511510984 10.8366522,0.445493003 11.3363353,0.572764781 C11.8360185,0.700717156 12.3032459,1.05530858 12.4486205,1.55282553 C12.6305079,2.17761426 12.2768756,2.83575227 11.8448086,3.31965727 C12.4959518,3.16448098 13.1754938,3.1290899 13.8394841,3.21688701 C14.2201628,3.26657064 14.6231549,3.37342449 14.8672491,3.6715263 C15.1106671,3.96962811 15.1370374,4.3936405 15.0761829,4.77545584 C14.8280318,6.31428733 13.4439298,7.36581084 12.1686898,8.25058791 C12.081465,8.31116111 11.9895071,8.3730955 11.8840259,8.38534626 C11.6960531,8.40712539 11.5317459,8.26556106 11.3917806,8.13692809 C8.86429002,5.8120062 7.99271823,4.0322431 2.81061883,4.75503791" jetway-hook-id="85E1A930-E96D-402E-85B8-CE9819F8D15C" id="Fill-7"></path> </g> </g> </g> </g> <path d="M95,56.75 C127.181864,56.75 160.493803,58.3211366 194.935841,61.4632993 L198.070049,61.7532784 L197.929951,63.2467216 C162.419387,59.9155336 128.109395,58.25 95,58.25 C62.743019,58.25 32.1954077,59.8308782 3.3572601,62.9923911 L1.08411575,63.2452681 L0.915884247,61.7547319 C30.4780445,58.4181563 61.8393825,56.75 95,56.75 Z" jetway-hook-id="5F489085-48F6-4160-AC18-4322F2EB2F02" id="Path-35" fill="#BBC0C7" fill-rule="nonzero"></path> <g jetway-hook-id="C77E9801-F22D-4F71-BD2B-650179A66387" id="Group-16" transform="translate(44.500000, 38.500000) rotate(-14.000000) translate(-44.500000, -38.500000) translate(32.000000, 30.000000)"> <path d="M8.47379613,-0.726359485 C6.22533146,-0.720600668 4.40402114,1.10070544 4.39825711,3.34917009 L4.37560179,12.2045686 C4.38133588,14.4443406 6.20011834,16.2538302 8.43796858,16.2481122 C10.6864332,16.2423398 12.5077436,14.4210337 12.5135076,12.172569 L12.5361629,3.31717055 C12.5306026,1.14527041 10.8202107,-0.62202996 8.67604381,-0.721918471 L8.47379613,-0.726359485 Z M8.47763795,0.773627043 C9.83068674,0.770170136 10.9404939,1.82032284 11.0303073,3.15131037 L11.0361629,3.33409071 L11.0135125,12.1687237 C11.0098645,13.5917644 9.85716742,14.7444588 8.43412676,14.7481121 C7.08107796,14.751569 5.97127082,13.7014163 5.88145736,12.3704288 L5.87560181,12.1876484 L5.89825218,3.35301538 C5.9019002,1.92997473 7.05459728,0.777280318 8.47763795,0.773627043 Z" jetway-hook-id="9C58E853-A834-4F27-9289-E7F446E62FC0" id="Rectangle" fill="#BDC1C6" fill-rule="nonzero" transform="translate(8.455882, 7.760876) rotate(-50.000000) translate(-8.455882, -7.760876) "></path> <circle jetway-hook-id="34D11793-C947-4799-8939-A91C1EAC8AF1" id="Oval" fill="#D2E3FC" cx="18.9602499" cy="10.861705" r="6"></circle> <path d="M13.768149,8.26511298 L13.7449828,8.24642317 C15.0505653,9.2372916 15.3056914,11.0989329 14.314823,12.4045153 C14.2557747,12.4823182 14.1929214,12.5571585 14.1264927,12.628763 C13.9116629,12.8603314 13.6729504,13.0578167 13.4174081,13.2206049 C13.1079404,12.5556324 12.9375514,11.8266341 12.9375514,11.0616407 C12.9375514,10.0424322 13.2400005,9.08711675 13.768149,8.26511298 Z" jetway-hook-id="B2D0A5F1-DB7F-47D9-BB38-3DF6D0976FFF" id="Combined-Shape" stroke="#FFFFFF" stroke-width="1.5" stroke-linejoin="round"></path> </g> <circle jetway-hook-id="58BFB6F9-7511-4BC4-A5A1-8ECDCD5D974C" id="Oval" fill="#E8EAED" cx="166.5" cy="27.5" r="4.5"></circle> <circle jetway-hook-id="6ADB3157-9AC8-4359-AA74-4D110894049E" id="Oval-Copy-3" fill="#9AA0A6" cx="17.5" cy="11.5" r="2.5"></circle> </g> </g> </g>
+      </g>
+
       <g id="nearby-device-visibility" fill="none" fill-rule="evenodd">
         <path d="M0 0h200v200H0z"></path><path d="M150.441 100.728c0 26.949-21.772 48.794-48.63 48.794-26.858 0-48.63-21.845-48.63-48.794 0-26.95 21.772-48.795 48.63-48.795 26.858 0 48.63 21.845 48.63 48.795" fill="#D2E3FC"></path><path d="M176.711 53.44l-12.39-3.317a1.021 1.021 0 0 1-.722-1.25l3.32-12.383a1.022 1.022 0 0 1 1.252-.722l12.39 3.317c.544.146.868.707.722 1.251l-3.32 12.383a1.022 1.022 0 0 1-1.252.722" fill="#34A853"></path><path d="M31.832 148.371l-9.514 5.538c-3.553 2.068-4.77 6.644-2.72 10.223 2.053 3.584 6.603 4.813 10.161 2.742l9.514-5.538c3.48-2.026 4.718-6.454 2.844-9.998l-.124-.225c-2.053-3.584-6.603-4.813-10.161-2.742zm8.425 3.736c1.505 2.627.612 5.986-1.99 7.5l-9.514 5.539c-2.597 1.511-5.918.614-7.42-2.008-1.504-2.627-.61-5.986 1.991-7.5l9.514-5.539c2.529-1.471 5.743-.66 7.297 1.804l.122.204z" fill="#EA4335" fill-rule="nonzero"></path><path d="M26.693 54.6l-5.899-5.896a2.743 2.743 0 0 1-.711-2.653l2.159-8.054a2.745 2.745 0 0 1 1.943-1.941l8.058-2.158a2.75 2.75 0 0 1 2.655.71l5.9 5.896c.693.694.965 1.705.71 2.653L39.35 51.21a2.746 2.746 0 0 1-1.943 1.942l-8.058 2.158a2.751 2.751 0 0 1-2.655-.71" fill="#FBBC05"></path><path d="M26.536 141.312l-5.553-4.145a.552.552 0 0 1-.113-.773l4.149-5.55a.552.552 0 0 1 .773-.112l5.554 4.145a.552.552 0 0 1 .112.773l-4.149 5.55a.552.552 0 0 1-.773.112" fill="#F882FF"></path><path d="M102.004 29.332c-39.453 0-71.437 31.965-71.437 71.396 0 39.43 31.984 71.395 71.437 71.395 39.453 0 71.437-31.965 71.437-71.395 0-39.431-31.983-71.396-71.437-71.396zm0 2c38.35 0 69.437 31.07 69.437 69.396s-31.088 69.395-69.437 69.395-69.437-31.07-69.437-69.395c0-38.326 31.088-69.396 69.437-69.396z" fill="#4285F4" fill-rule="nonzero"></path><path d="M104.18 73.085a8.864 8.864 0 0 0-4.738 0l-19.099 7.12c-1.232.342-2.075 1.387-2.075 2.572v14.13c0 11.668 5.686 22.805 15.688 29.978 3.332 2.39 6.297 3.737 7.855 3.737 1.558 0 4.523-1.348 7.855-3.737 10.003-7.173 15.688-18.31 15.688-29.977V82.777c0-1.185-.842-2.23-2.075-2.573l-19.099-7.12z" fill="#4285F4"></path><path d="M101.768 94.59c-3.19 0-5.789 2.668-5.789 5.945 0 3.276 2.599 5.945 5.79 5.945 3.19 0 5.789-2.669 5.789-5.945 0-3.277-2.6-5.945-5.79-5.945zm-.193 9.115c-1.81 0-3.28-1.51-3.28-3.368 0-1.86 1.47-3.37 3.28-3.37 1.81 0 3.281 1.51 3.281 3.37 0 1.859-1.47 3.368-3.28 3.368zm.193-12.682c-6.14 0-11.384 3.944-13.508 9.512 2.124 5.567 7.368 9.512 13.508 9.512 6.14 0 11.384-3.945 13.509-9.512-2.125-5.568-7.368-9.512-13.509-9.512zm-.193 16.646c-4.726 0-8.942-2.763-11-7.134 2.058-4.371 6.274-7.134 11-7.134 4.727 0 8.942 2.763 11 7.134-2.058 4.37-6.273 7.134-11 7.134z" fill="#FFF" fill-rule="nonzero"></path>
       </g>

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());
   });