[Nearby] Add contact visibility component

This adds the contact visibility component which will be hosted in the
on-boarding experience as well as in settings. This is just a roughed
in version of the component without the back end/mojo functionality to
retrieve contacts yet. String, a11y, and final specs are still pending.
Eventually this component we need to support a compact layout for
on-boarding and a full layout for settings.

Screenshots:
Zero-state (no-selection):
https://screenshot.googleplex.com/079678b4-8a72-43db-a46b-b853286a41ba.png
All contacts selected:
https://screenshot.googleplex.com/cfd1c5ee-565a-4908-99f1-cd3b7ef5683a.png


Change-Id: I6c3558e8f747fade5ee7f7d0c0e0d5a710d77457
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2352520Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Regan Hsu <hsuregan@chromium.org>
Commit-Queue: James Vecore <vecore@google.com>
Cr-Commit-Position: refs/heads/master@{#799162}

chrome/browser/nearby_sharing/common/nearby_share_prefs.cc

@@ -48,7 +48,7 @@ void RegisterNearbySharingPrefs(PrefRegistrySimple* registry) {
                                 /*default_value=*/true);
   registry->RegisterIntegerPref(
       prefs::kNearbySharingBackgroundVisibilityName,
-      /*default_value=*/static_cast<int>(Visibility::kNoOne));
+      /*default_value=*/static_cast<int>(Visibility::kUnknown));
   registry->RegisterIntegerPref(
       prefs::kNearbySharingDataUsageName,
       /*default_value=*/static_cast<int>(DataUsage::kWifiOnly));

chrome/browser/resources/nearby_share/nearby_share_dialog_resources.grd

@@ -30,6 +30,10 @@
                type="BINDATA"/>
 
       <!-- Shared Polymer 2 pages-->
+      <include name="IDR_NEARBY_CONTACT_VISIBILITY_HTML"
+               file="shared/nearby_contact_visibility.html" type="BINDATA"/>
+      <include name="IDR_NEARBY_CONTACT_VISIBILITY_JS"
+               file="shared/nearby_contact_visibility.js" type="BINDATA"/>
       <include name="IDR_NEARBY_ONBOARDING_PAGE_HTML"
                file="shared/nearby_onboarding_page.html" type="BINDATA"/>
       <include name="IDR_NEARBY_ONBOARDING_PAGE_JS"
@@ -42,14 +46,18 @@
                file="shared/nearby_share_settings_behavior.html" type="BINDATA"/>
       <include name="IDR_NEARBY_SHARE_SETTINGS_BEHAVIOR_JS"
                file="shared/nearby_share_settings_behavior.js" type="BINDATA"/>
+      <include name="IDR_NEARBY_SHARED_ICONS_HTML"
+               file="shared/nearby_shared_icons.html" type="BINDATA"/>
       <include name="IDR_NEARBY_VISIBILITY_PAGE_HTML"
                file="shared/nearby_visibility_page.html" type="BINDATA"/>
       <include name="IDR_NEARBY_VISIBILITY_PAGE_JS"
                file="shared/nearby_visibility_page.js" type="BINDATA"/>
 
       <!-- Shared images -->
-      <include name="IDR_NEARBY_SHARE_ONBOARDING_SPLASH"
+      <include name="IDR_NEARBY_SHARE_ONBOARDING_SPLASH_SVG"
                file="shared/nearby_onboarding_splash.svg" type="BINDATA"/>
+      <include name="IDR_NEARBY_SHARE_DEVICE_VISIBILITY_SVG"
+               file="shared/nearby_device_visibility.svg" type="BINDATA"/>
 
       <!-- Generated Polymer 3 elements -->
       <include name="IDR_NEARBY_SHARE_APP_JS"
@@ -78,6 +86,9 @@
                use_base_dir="false" type="BINDATA"/>
 
       <!-- Generated Polymer 2 to 3 elements -->
+      <include name="IDR_NEARBY_CONTACT_VISIBILITY_M_JS"
+               file="${root_gen_dir}/chrome/browser/resources/nearby_share/shared/nearby_contact_visibility.m.js"
+               use_base_dir="false" type="BINDATA"/>
       <include name="IDR_NEARBY_ONBOARDING_PAGE_M_JS"
                file="${root_gen_dir}/chrome/browser/resources/nearby_share/shared/nearby_onboarding_page.m.js"
                use_base_dir="false" type="BINDATA"/>
@@ -87,6 +98,9 @@
       <include name="IDR_NEARBY_SHARE_SETTINGS_BEHAVIOR_M_JS"
                file="${root_gen_dir}/chrome/browser/resources/nearby_share/shared/nearby_share_settings_behavior.m.js"
                use_base_dir="false" type="BINDATA"/>
+      <include name="IDR_NEARBY_SHARED_ICONS_M_JS"
+               file="${root_gen_dir}/chrome/browser/resources/nearby_share/shared/nearby_shared_icons.m.js"
+               use_base_dir="false" type="BINDATA"/>
       <include name="IDR_NEARBY_VISIBILITY_PAGE_M_JS"
                file="${root_gen_dir}/chrome/browser/resources/nearby_share/shared/nearby_visibility_page.m.js"
                use_base_dir="false" type="BINDATA"/>

chrome/browser/resources/nearby_share/shared/BUILD.gn

@@ -8,6 +8,7 @@ import("//ui/webui/resources/tools/js_modulizer.gni")
 
 js_type_check("closure_compile") {
   deps = [
+    ":nearby_contact_visibility",
     ":nearby_onboarding_page",
     ":nearby_share_settings",
     ":nearby_share_settings_behavior",
@@ -17,10 +18,19 @@ js_type_check("closure_compile") {
       default_closure_args + [
         "js_module_root=../../chrome/browser/resources/nearby_share/shared/",
         "js_module_root=./gen/chrome/browser/resources/nearby_share/shared/",
-        "debug",
       ]
 }
 
+js_library("nearby_contact_visibility") {
+  deps = [
+    ":nearby_share_settings_behavior",
+    "//third_party/polymer/v1_0/components-chromium/iron-list:iron-list-extracted",
+    "//ui/webui/resources/cr_elements/cr_radio_button:cr_card_radio_button",
+    "//ui/webui/resources/cr_elements/cr_radio_group:cr_radio_group",
+    "//ui/webui/resources/js:i18n_behavior",
+  ]
+}
+
 js_library("nearby_onboarding_page") {
   deps = [
     ":nearby_share_settings_behavior",
@@ -43,7 +53,10 @@ js_library("nearby_share_settings_behavior") {
 }
 
 js_library("nearby_visibility_page") {
-  deps = [ ":nearby_share_settings_behavior" ]
+  deps = [
+    ":nearby_contact_visibility",
+    ":nearby_share_settings_behavior",
+  ]
 }
 
 js_type_check("closure_compile_module") {
@@ -55,6 +68,7 @@ js_type_check("closure_compile_module") {
       ]
 
   deps = [
+    ":nearby_contact_visibility.m",
     ":nearby_onboarding_page.m",
     ":nearby_share_settings.m",
     ":nearby_share_settings_behavior.m",
@@ -65,12 +79,27 @@ js_type_check("closure_compile_module") {
 group("polymer3_elements") {
   public_deps = [
     ":modulize",
+    ":nearby_contact_visibility_module",
     ":nearby_onboarding_page_module",
+    ":nearby_shared_icons_module",
     ":nearby_visibility_page_module",
     "//chrome/browser/ui/webui/nearby_share/public/mojom:mojom_js",
   ]
 }
 
+js_library("nearby_contact_visibility.m") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/nearby_share/shared/nearby_contact_visibility.m.js" ]
+  deps = [
+    ":nearby_share_settings_behavior.m",
+    "//third_party/polymer/v3_0/components-chromium/iron-list:iron-list",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_radio_button:cr_card_radio_button.m",
+    "//ui/webui/resources/cr_elements/cr_radio_group:cr_radio_group.m",
+    "//ui/webui/resources/js:i18n_behavior.m",
+  ]
+  extra_deps = [ ":nearby_contact_visibility_module" ]
+}
+
 js_library("nearby_onboarding_page.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/nearby_share/shared/nearby_onboarding_page.m.js" ]
   deps = [
@@ -102,6 +131,7 @@ js_library("nearby_share_settings.m") {
 js_library("nearby_visibility_page.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/nearby_share/shared/nearby_visibility_page.m.js" ]
   deps = [
+    ":nearby_contact_visibility.m",
     ":nearby_share_settings_behavior.m",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
@@ -117,6 +147,14 @@ nearby_shared_namespace_rewrites = [
   "nearby_share.setNearbyShareSettingsForTesting|setNearbyShareSettingsForTesting",
 ]
 
+polymer_modulizer("nearby_contact_visibility") {
+  js_file = "nearby_contact_visibility.js"
+  html_file = "nearby_contact_visibility.html"
+  html_type = "dom-module"
+  auto_imports = nearby_shared_auto_imports
+  namespace_rewrites = nearby_shared_namespace_rewrites
+}
+
 polymer_modulizer("nearby_onboarding_page") {
   js_file = "nearby_onboarding_page.js"
   html_file = "nearby_onboarding_page.html"
@@ -125,6 +163,12 @@ polymer_modulizer("nearby_onboarding_page") {
   namespace_rewrites = nearby_shared_namespace_rewrites
 }
 
+polymer_modulizer("nearby_shared_icons") {
+  js_file = "nearby_shared_icons.m.js"
+  html_file = "nearby_shared_icons.html"
+  html_type = "iron-iconset"
+}
+
 polymer_modulizer("nearby_visibility_page") {
   js_file = "nearby_visibility_page.js"
   html_file = "nearby_visibility_page.html"

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_card_radio_button.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
+<link rel="import" href="nearby_share_settings_behavior.html">
+<link rel="import" href="nearby_shared_icons.html">
+
+<dom-module id="nearby-contact-visibility">
+  <template>
+    <style include="cr-icons cr-shared-style">
+      :host {
+        --card-border-color: var(--google-grey-300);
+        --cr-card-radio-button-padding: 8px 16px 8px 16px;
+        --iron-icon-height: var(--cr-icon-size);
+        --iron-icon-width: var(--cr-icon-size);
+      }
+
+      .grey-icon {
+        color: var(--google-grey-refresh-700);
+      }
+
+      #main {
+        display: flex;
+        flex-direction: column;
+      }
+
+      #visibilityRadioGroup {
+        display: flex;
+        justify-content: center;
+        margin-block-end: 8px;
+      }
+
+      cr-card-radio-button {
+        border: 1px solid var(--card-border-color);
+        box-shadow: none;
+        flex: 1;
+        margin-inline-end: 5px;
+        margin-inline-start: 5px;
+        padding: 0;
+        width: auto;
+      }
+
+      cr-card-radio-button[checked] {
+        border: 2px solid var(--cr-checked-color);
+      }
+
+      cr-card-radio-button:first-child {
+        margin-inline-start: 0;
+      }
+
+      cr-card-radio-button:last-child {
+        margin-inline-end: 0;
+      }
+
+      .card-contents {
+        color: var(--google-blue-600);
+      }
+      .card-icon {
+        margin-block-end: 8px;
+      }
+
+      #zeroStateContainer {
+        display: flex;
+        justify-content: center;
+        margin: 8px;
+      }
+
+      #zeroStateImageContainer {
+        flex-basis: 50%;
+        margin-inline-end: 24px;
+        margin-inline-start: auto;
+        text-align: end;
+      }
+
+      #zeroStateTextContainer {
+        display: flex;
+        flex-basis: 50%;
+        flex-direction: column;
+        justify-content: center;
+        margin-inline-end: 8px;
+        margin-inline-start: 8px;
+      }
+
+      #zeroStateText {
+        margin-block-end: 12px;
+      }
+
+      #zeroStateInfoContainer {
+        align-items: center;
+        display: flex;
+      }
+
+      #zeroStateIcon {
+        color: var(--cr-secondary-text-color);
+        margin-inline-end: 8px;
+      }
+
+      .viz-description-section div {
+        margin-block-end: 8px;
+      }
+
+      .explanation-section {
+        display: flex;
+        margin-block-end: 8px;
+        margin-block-start: 8px;
+      }
+
+      .padded-icon {
+        margin-inline-end: 16px;
+        margin-inline-start: 12px;
+        min-height: var(--cr-icon-size);
+        min-width: var(--cr-icon-size);
+      }
+
+      #contactsWrapper {
+        border-bottom: var(--cr-separator-line);
+        border-top: var(--cr-separator-line);
+        padding-block-start: 16px;
+      }
+
+      #contactsHeading {
+        font-size: 1.2rem;
+      }
+
+      #contactList {
+        height: 150px;
+        margin-block-end: 8px;
+        margin-block-start: 8px;
+      }
+
+      .contact-item {
+        display: flex;
+        height: 50px;
+        padding-block-end: 8px;
+        padding-block-start: 8px;
+      }
+
+      .contact-item[disabled] {
+        opacity: var(--cr-disabled-opacity);
+      }
+
+      .contact-toggle {
+        align-self: center;
+        margin-inline-end: 12px;
+        margin-inline-start: auto;
+      }
+
+      .contact-icon {
+        align-self: center;
+      }
+
+      #noContactsContainer {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+      }
+    </style>
+    <div id="main">
+
+      <cr-radio-group id="visibilityRadioGroup"
+          selected="{{selectedVisibility}}">
+        <cr-card-radio-button id="allContacts" class="flex" name="all">
+          <div class="card-contents">
+            <iron-icon icon="nearby20:contact-all" class="card-icon">
+            </iron-icon>
+            <div class="card-label">
+              All Contacts
+            </div>
+          </div>
+        </cr-card-radio-button>
+        <cr-card-radio-button id="someContacts" class="flex" name="some">
+          <div class="card-contents">
+            <iron-icon icon="nearby20:contact-group" class="card-icon">
+            </iron-icon>
+            <div class="card-label">
+              Some Contacts
+            </div>
+          </div>
+        </cr-card-radio-button>
+        <cr-card-radio-button id="noContacts" class="flex" name="none">
+          <div class="card-contents">
+            <iron-icon icon="nearby20:visibility-off" class="card-icon">
+            </iron-icon>
+            <div class="card-label">
+              Hidden
+            </div>
+          </div>
+        </cr-card-radio-button>
+      </cr-radio-group>
+
+      <!-- Zero state is shown only when no selection has been made yet. -->
+      <template is="dom-if" if="[[!isVisibilitySelected_(selectedVisibility)]]">
+        <div id="zeroStateContainer">
+          <div id="zeroStateImageContainer">
+            <img id="zeroStateImage" width="200" height="200"
+                src="/shared/nearby_device_visibility.svg">
+          </div>
+          <div id="zeroStateTextContainer">
+            <div id="zeroStateText" class="cr-title-text">
+              Your device visibility controls who can share with you while your
+              screen is unlocked.
+            </div>
+            <div id="zeroStateInfoContainer">
+              <iron-icon id="zeroStateIcon" icon="cr:info"></iron-icon>
+              <div class="cr-secondary-text">
+                Learn more about device visibility
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template is="dom-if" if="[[isVisibilitySelected_(selectedVisibility)]]">
+        <div id="explanation">
+
+          <div class="explanation-section">
+            <iron-icon icon="nearby20:radar" class="padded-icon grey-icon">
+            </iron-icon>
+            <div class="viz-description-section">
+              <div class="cr-title-text">Who you see</div>
+              <div class="cr-secondary-text">
+                Nearby sharing users who are temporarily visible to everyone or
+                have chosen to always be visible to you
+              </div>
+            </div>
+          </div>
+
+          <div class="explanation-section">
+            <iron-icon icon="nearby20:visibility" class="padded-icon grey-icon">
+            </iron-icon>
+            <div class="viz-description-section">
+              <div class="cr-title-text">Who sees you</div>
+              <template is="dom-if"
+                  if="[[isVisibility_(selectedVisibility,'all')]]">
+                <div class="cr-secondary-text">
+                  Current and future contacts who have Nearby Share turned on
+                </div>
+              </template>
+              <template is="dom-if"
+                  if="[[isVisibility_(selectedVisibility,'some')]]">
+                <div class="cr-secondary-text">
+                  Selected contacts who have Nearby Share turned on
+                </div>
+              </template>
+              <template is="dom-if"
+                  if="[[isVisibility_(selectedVisibility,'none')]]">
+                <div class="cr-secondary-text">Nobody!</div>
+              </template>
+            </div>
+          </div>
+
+        </div>
+
+        <div id="contactsWrapper">
+          <div id="contactsHeading">Contacts</div>
+
+          <!-- Show when the user has one or more contacts-->
+          <template is="dom-if" if="[[showContactsList_(contacts)]]">
+            <iron-list id="contactList" items="[[contacts]]">
+              <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.email]]</div>
+                  </div>
+                  <template is="dom-if"
+                      if="[[showContactCheckBoxes_(selectedVisibility)]]">
+                    <cr-toggle class="contact-toggle" checked="{{item.checked}}"
+                        disabled="[[!isVisibility_(selectedVisibility,'some')]]"
+                        >
+                    </cr-toggle>
+                  </template>
+                </div>
+              </template>
+            </iron-list>
+          </template>
+
+          <!-- Show when the user has no contacts available -->
+          <template is="dom-if" if="[[!showContactsList_(contacts)]]">
+            <div id="noContactsContainer">
+              <div class="cr-title-text">No Reachable Contacts</div>
+              <div class="cr-secondary-text">No Reachable Contacts Subtext</div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </template>
+  </template>
+  <script src="nearby_contact_visibility.js"></script>
+</dom-module>

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

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview The 'nearby-contact-visibility' component allows users to
+ * set the preferred visibility to contacts for Nearby Share. This component is
+ * embedded in the nearby_visibility_page as well as the settings pop-up dialog.
+ */
+
+'use strict';
+(function() {
+
+/**
+ * Maps visibility string to the mojo enum
+ * @param {?string} visibilityString
+ * @return {?nearbyShare.mojom.Visibility}
+ */
+const visibilityStringToValue = function(visibilityString) {
+  switch (visibilityString) {
+    case 'all':
+      return nearbyShare.mojom.Visibility.kAllContacts;
+    case 'some':
+      return nearbyShare.mojom.Visibility.kSelectedContacts;
+    case 'none':
+      return nearbyShare.mojom.Visibility.kNoOne;
+    default:
+      return null;
+  }
+};
+
+/**
+ * Maps visibility mojo enum to a string for the radio button selection
+ * @param {?nearbyShare.mojom.Visibility} visibility
+ * @return {?string}
+ */
+const visibilityValueToString = function(visibility) {
+  switch (visibility) {
+    case nearbyShare.mojom.Visibility.kAllContacts:
+      return 'all';
+    case nearbyShare.mojom.Visibility.kSelectedContacts:
+      return 'some';
+    case nearbyShare.mojom.Visibility.kNoOne:
+      return 'none';
+    default:
+      return null;
+  }
+};
+
+/**
+ * @typedef {{
+ *            name:string,
+ *            email:string,
+ *            checked:boolean,
+ *          }}
+ */
+/* #export */ let NearbyVisibilityContact;
+
+Polymer({
+  is: 'nearby-contact-visibility',
+
+  behaviors: [I18nBehavior],
+
+  properties: {
+    /** @type {?nearby_share.NearbySettings} */
+    settings: {
+      type: Object,
+      notify: true,
+    },
+
+    /**
+     * @type {?string} Which of visibility setting is selected as a string or
+     *      null for no selection. ('all', 'some', 'none', null).
+     */
+    selectedVisibility: {
+      type: String,
+      value: null,
+      notify: true,
+    },
+
+    /**
+     *  @type {Array<NearbyVisibilityContact>} The user's GAIA contacts
+     *      formatted for binding.
+     */
+    contacts: {
+      type: Array,
+      value: [
+        {
+          name: 'Jane Doe',
+          email: 'jane@google.com',
+          checked: true,
+        },
+        {
+          name: 'John Smith',
+          email: 'smith@gmail.com',
+          checked: false,
+        },
+        {
+          name: 'Testy Tester',
+          email: 'test@test.com',
+          checked: true,
+        }
+      ],
+    },
+  },
+
+  observers: [
+    'settingsChanged_(settings.visibility)',
+    'selectedVisibilityChanged_(selectedVisibility)',
+  ],
+
+  /** @type {ResizeObserver} used to observer size changes to this element */
+  resizeObserver_: null,
+
+  /** @override */
+  attached() {
+    // This is a required work around to get the iron-list to display on first
+    // view. Currently iron-list won't generate item elements on attach if the
+    // element is not visible. Because we are hosted in a cr-view-manager for
+    // on-boarding, this component is not visible when the items are bound. To
+    // fix this issue, we listen for resize events (which happen when display is
+    // switched from none to block by the view manager) and manually call
+    // notifyResize on the iron-list
+    this.resizeObserver_ = new ResizeObserver(entries => {
+      const contactList =
+          /** @type {IronListElement} */ (this.$$('#contactList'));
+      if (contactList) {
+        contactList.notifyResize();
+      }
+    });
+    this.resizeObserver_.observe(this);
+  },
+
+  /** @override */
+  detached() {
+    this.resizeObserver_.disconnect();
+  },
+
+  /**
+   * Used to show/hide parts of the UI based on current visibility selection.
+   * @param {?string} selectedVisibility
+   * @return {boolean} Returns true when the current selectedVisibility has a
+   *     value other than null.
+   * @private
+   */
+  isVisibilitySelected_(selectedVisibility) {
+    return this.selectedVisibility !== null;
+  },
+
+  /**
+   * Used to show/hide parts of the UI based on current visibility selection.
+   * @param {?string} selectedVisibility
+   * @param {string} visibilityString
+   * @return {boolean} returns true when the current selectedVisibility equals
+   *     the passed arguments.
+   * @private
+   */
+  isVisibility_(selectedVisibility, visibilityString) {
+    return this.selectedVisibility === visibilityString;
+  },
+
+  /**
+   * Used to show/hide parts of the UI based on current visibility selection.
+   * @param {?string} selectedVisibility
+   * @return {boolean} returns true when checkboxes should be shown for
+   *     contacts.
+   * @private
+   */
+  showContactCheckBoxes_(selectedVisibility) {
+    return this.selectedVisibility === 'some' ||
+        this.selectedVisibility === 'none';
+  },
+
+  /**
+   * Used to show/hide parts of the UI based on the number of contacts
+   * @param {?Array} contacts the currently bound contact list
+   * @return {boolean} returns true when checkboxes should be shown for
+   *     contacts.
+   * @private
+   */
+  showContactsList_(contacts) {
+    return this.contacts.length > 0;
+  },
+
+  /**
+   * @param {?nearby_share.NearbySettings} settings
+   * @private
+   */
+  settingsChanged_(settings) {
+    if (this.settings && this.settings.visibility) {
+      this.selectedVisibility =
+          visibilityValueToString(this.settings.visibility);
+    } else {
+      this.selectedVisibility = null;
+    }
+  },
+
+  /**
+   * @param {string} selectedVisibility
+   * @private
+   */
+  selectedVisibilityChanged_(selectedVisibility) {
+    const visibility = visibilityStringToValue(this.selectedVisibility);
+    if (visibility) {
+      this.set('settings.visibility', visibility);
+    }
+  },
+});
+})();

chrome/browser/resources/nearby_share/shared/nearby_device_visibility.svg

+<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h200v200H0z"/><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 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 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 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 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 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 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 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"/></g></svg>
\ No newline at end of file

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

@@ -15,8 +15,8 @@ cr.define('nearby_share', function() {
    * @typedef {{
    *            enabled:boolean,
    *            deviceName:string,
-   *            dataUsage:number,
-   *            visibility:number,
+   *            dataUsage:nearbyShare.mojom.DataUsage,
+   *            visibility:nearbyShare.mojom.Visibility,
    *            allowedContacts:Array<string>
    *          }}
    */

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
+
+<iron-iconset-svg name="nearby20" size="20">
+  <svg>
+    <defs>
+      <!--
+      Keep these in sorted order by id="". See also http://goo.gl/Y1OdAq
+      -->
+      <g id="checked">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM6.16667 9.40426L8.33333 11.617L13.8333 6L15 7.19149L8.33333 14L5 10.5957L6.16667 9.40426Z"></path>
+      </g>
+      <g id="contact-all">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M12.9981 6C12.9981 4.935 12.6229 3.9525 12 3.18C12.3152 3.075 12.6454 3 12.9981 3C14.6567 3 16 4.3425 16 6C16 7.6575 14.6567 9 12.9981 9C12.6754 9 12.3677 8.9325 12.075 8.8425C12.0525 8.835 12.03 8.8275 12 8.82C12.6229 8.0475 12.9981 7.065 12.9981 6ZM13.6602 10.1309C15.0302 11.0609 16.0002 12.3209 16.0002 14.0009V17.0009H20.0002V14.0009C20.0002 11.8209 16.4202 10.5309 13.6602 10.1309ZM7.5 5C6.675 5 6 5.675 6 6.5C6 7.325 6.675 8 7.5 8C8.325 8 9 7.325 9 6.5C9 5.675 8.325 5 7.5 5V5ZM7.5 13C5.475 13 3.15 13.86 3 14.34V15H12V14.3333C11.85 13.86 9.525 13 7.5 13V13ZM7.5 3C9.43375 3 11 4.56625 11 6.5C11 8.43375 9.43375 10 7.5 10C5.56625 10 4 8.43375 4 6.5C4 4.56625 5.56625 3 7.5 3ZM7.5 11C9.66938 11 14 12.1486 14 14.4286V17H1V14.4286C1 12.1486 5.33062 11 7.5 11Z"></path>
+      </g>
+      <g id="contact-group">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 3C9.425 3 11 4.575 11 6.5C11 8.425 9.425 10 7.5 10C5.575 10 4 8.425 4 6.5C4 4.575 5.575 3 7.5 3ZM7.5 5C6.67957 5 6 5.67957 6 6.5C6 7.32043 6.67957 8 7.5 8C8.32043 8 9 7.32043 9 6.5C9 5.67957 8.32043 5 7.5 5Z"></path>
+        <path d="M15 6H17V8H19V10H17V12H15V10H13V8H15V6Z"></path>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 11C9.60583 11 13.7789 12.0336 13.9916 14.0859L14 14.25V17H1V14.25C1 12.0887 5.33875 11 7.5 11ZM11.9947 14.3433C11.9867 14.3476 11.9693 14.3346 11.9329 14.3011L11.8432 14.2246C11.6159 14.0441 11.2636 13.85 10.8172 13.6713C9.79154 13.2607 8.42752 13 7.5 13C6.57248 13 5.20846 13.2607 4.18279 13.6713C3.73641 13.85 3.38414 14.0441 3.15679 14.2246L3.0671 14.3011C3.01855 14.3458 3.00384 14.3539 3 14.3335V15H12V14.3335L11.9947 14.3433Z"></path>
+      </g>
+      <g id="radar">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.0353 15.096C12.9268 15.975 11.5247 16.5 10 16.5C6.41015 16.5 3.5 13.5899 3.5 10C3.5 6.41015 6.41015 3.5 10 3.5C13.5899 3.5 16.5 6.41015 16.5 10C16.5 11.5247 15.975 12.9268 15.096 14.0354L14.0261 12.9654C14.6382 12.1358 15 11.1101 15 10C15 7.23858 12.7614 5 10 5C7.23858 5 5 7.23858 5 10C5 12.7614 7.23858 15 10 15C11.1101 15 12.1358 14.6382 12.9654 14.0261L14.0353 15.096ZM12.948 11.8874C13.2974 11.3428 13.5 10.6951 13.5 10C13.5 8.067 11.933 6.5 10 6.5C8.067 6.5 6.5 8.067 6.5 10C6.5 11.933 8.067 13.5 10 13.5C10.6951 13.5 11.3428 13.2974 11.8874 12.948L10.3885 11.4492C10.2646 11.4823 10.1344 11.5 10 11.5C9.17157 11.5 8.5 10.8284 8.5 10C8.5 9.17157 9.17157 8.5 10 8.5C10.8284 8.5 11.5 9.17157 11.5 10C11.5 10.1344 11.4823 10.2646 11.4492 10.3885L12.948 11.8874ZM18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z"></path>
+      </g>
+      <g id="visibility">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M13 10C13 11.6569 11.6569 13 10 13C8.34315 13 7 11.6569 7 10C7 8.34315 8.34315 7 10 7C11.6569 7 13 8.34315 13 10ZM11 10C11 10.5523 10.5523 11 10 11C9.44772 11 9 10.5523 9 10C9 9.44772 9.44772 9 10 9C10.5523 9 11 9.44772 11 10ZM10 16C14.3333 16 17.3333 14 19 10C17 6 14 4 10 4C6 4 3 6 1 10C2.66667 14 5.66667 16 10 16ZM10 6C12.9373 6 15.1315 7.29402 16.7641 10.0695C15.3775 12.7465 13.2078 14 10 14C6.79225 14 4.6225 12.7465 3.2359 10.0695C4.8685 7.29402 7.06265 6 10 6Z"></path>
+      </g>
+      <g id="visibility-off">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M17.3897 18.0247L1.9895 2.62442L2.01413 2.59979L2.00015 2.58582L0.585938 4.00003L3.29316 6.70725C2.42105 7.5893 1.65672 8.6869 1.00015 10C2.66682 14 5.66682 16 10.0002 16C10.8372 16 11.6245 15.9254 12.3621 15.7761L16.0002 19.4142L17.3897 18.0247ZM3.23605 10.0696C3.68277 9.31012 4.17153 8.66159 4.70605 8.12014L7.03328 10.4474C7.22745 11.7461 8.25408 12.7727 9.55281 12.9669L10.5721 13.9862C10.3852 13.9954 10.1946 14 10.0002 14C6.7924 14 4.62265 12.7465 3.23605 10.0696Z"></path>
+        <path d="M16.1839 13.9904C17.3593 13.0152 18.298 11.6851 19.0002 10C17.0002 6.00003 14.0002 4.00003 10.0002 4.00003C8.81854 4.00003 7.7242 4.17455 6.71711 4.5236L8.34623 6.15272C8.86951 6.05045 9.42035 6.00003 10.0002 6.00003C12.9375 6.00003 15.1317 7.29405 16.7643 10.0696C16.2217 11.117 15.5593 11.9465 14.7617 12.5682L16.1839 13.9904Z" fill="#1A73E8"></path>
+        <path d="M12.9133 10.7198L9.28043 7.08692C9.511 7.03014 9.75206 7.00003 10.0002 7.00003C11.657 7.00003 13.0002 8.34317 13.0002 10C13.0002 10.2481 12.97 10.4892 12.9133 10.7198Z" fill="#1A73E8"></path>
+      </g>
+  </svg>
+</iron-iconset-svg>

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
-<link rel="import" href="./nearby_share_settings_behavior.html">
+<link rel="import" href="nearby_share_settings_behavior.html">
+<link rel="import" href="nearby_contact_visibility.html">
 
 <dom-module id="nearby-visibility-page">
   <template>
@@ -28,6 +29,8 @@
         display: flex;
         flex-grow: 1;
         justify-content: center;
+        margin-inline-end: 24px;
+        margin-inline-start: 24px;
         overflow: hidden;
       }
 
@@ -62,7 +65,9 @@
       </div>
 
       <div id=center-content>
-        <!-- TODO(vecore): add scroll host and visibility component -->
+        <nearby-contact-visibility id="contactVisibility"
+            settings="{{settings}}">
+        </nearby-contact-visibility>
       </div>
 
       <div id="actions">

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

@@ -18,6 +18,7 @@ Polymer({
     /** @type {?nearby_share.NearbySettings} */
     settings: {
       type: Object,
+      notify: true,
     }
   },
 

chrome/test/data/webui/BUILD.gn

@@ -217,6 +217,7 @@ if (include_js_tests) {
       "$root_gen_dir/chrome/test/data/webui/mock_controller.m.js",
       "$root_gen_dir/chrome/test/data/webui/mock_timer.m.js",
       "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/fake_nearby_share_settings.m.js",
+      "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/nearby_contact_visibility_test.m.js",
       "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/nearby_onboarding_page_test.m.js",
       "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/nearby_visibility_page_test.m.js",
       "$root_gen_dir/chrome/test/data/webui/resources/list_property_update_behavior_tests.m.js",

chrome/test/data/webui/nearby_share/shared/BUILD.gn

@@ -9,6 +9,7 @@ import("../../namespace_rewrites.gni")
 js_modulizer("modulize") {
   input_files = [
     "fake_nearby_share_settings.js",
+    "nearby_contact_visibility_test.js",
     "nearby_onboarding_page_test.js",
     "nearby_visibility_page_test.js",
   ]
@@ -27,11 +28,24 @@ js_type_check("closure_compile") {
                   ]
   deps = [
     ":fake_nearby_share_settings.m",
+    ":nearby_contact_visibility_test.m",
     ":nearby_onboarding_page_test.m",
     ":nearby_visibility_page_test.m",
   ]
 }
 
+js_library("nearby_contact_visibility_test.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/nearby_contact_visibility_test.m.js" ]
+  deps = [
+    ":fake_nearby_share_settings.m",
+    "../..:chai_assert",
+    "../..:test_util.m",
+    "//chrome/browser/resources/nearby_share/shared:nearby_contact_visibility.m",
+  ]
+  extra_deps = [ ":modulize" ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+}
+
 js_library("nearby_onboarding_page_test.m") {
   sources = [ "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/nearby_onboarding_page_test.m.js" ]
   deps = [

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

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// clang-format off
+// #import 'chrome://nearby/shared/nearby_contact_visibility.m.js';
+// #import {setNearbyShareSettingsForTesting} from 'chrome://nearby/shared/nearby_share_settings.m.js';
+// #import {FakeNearbyShareSettings} from './fake_nearby_share_settings.m.js';
+// #import {assertEquals, assertTrue, assertFalse} from '../../chai_assert.js';
+// #import {waitAfterNextRender, isChildVisible} from '../../test_util.m.js';
+// clang-format on
+
+suite('nearby-contact-visibility', () => {
+  /** @type {!NearbyContactVisibilityElement} */
+  let visibilityElement;
+
+  setup(function() {
+    document.body.innerHTML = '';
+
+    visibilityElement = /** @type {!NearbyContactVisibilityElement} */ (
+        document.createElement('nearby-contact-visibility'));
+
+    visibilityElement.settings = {
+      enabled: false,
+      deviceName: 'deviceName',
+      dataUsage: nearbyShare.mojom.DataUsage.kOnline,
+      visibility: nearbyShare.mojom.Visibility.kUnknown,
+      allowedContacts: [],
+    };
+
+    document.body.appendChild(visibilityElement);
+  });
+
+  /**
+   * @return {boolean} true when zero state elements are visible
+   */
+  function isNoContactsSectionVisible() {
+    return test_util.isChildVisible(
+        visibilityElement, '#noContactsContainer', false);
+  }
+
+  /**
+   * @return {boolean} true when zero state elements are visible
+   */
+  function isZeroStateVisible() {
+    return test_util.isChildVisible(
+        visibilityElement, '#zeroStateContainer', false);
+  }
+
+  /**
+   * @return {boolean} true when the checkboxes for contacts are visible
+   */
+  function areContactCheckBoxesVisible() {
+    const list = visibilityElement.$$('#contactList');
+    if (!list) {
+      return false;
+    }
+    return list.querySelectorAll('cr-toggle').length > 0;
+  }
+
+  /**
+   * Checks the state of the contacts toggle button group
+   * @param {boolean} all is allContacts checked?
+   * @param {boolean} some is someContacts checked?
+   * @param {boolean} no is noContacts check?
+   */
+  function assertToggleState(all, some, no) {
+    assertEquals(all, visibilityElement.$$('#allContacts').checked);
+    assertEquals(some, visibilityElement.$$('#someContacts').checked);
+    assertEquals(no, visibilityElement.$$('#noContacts').checked);
+  }
+
+  test('Visibility component shows zero state for kUnknown', async function() {
+    // need to wait for the next render to see if the zero
+    await test_util.waitAfterNextRender(visibilityElement);
+
+    assertToggleState(/*all=*/ false, /*some=*/ false, /*no=*/ false);
+    assertTrue(isZeroStateVisible());
+    assertFalse(isNoContactsSectionVisible());
+  });
+
+  test(
+      'Visibility component shows allContacts for kAllContacts',
+      async function() {
+        visibilityElement.set(
+            'settings.visibility', nearbyShare.mojom.Visibility.kAllContacts);
+
+        // need to wait for the next render to see results
+        await test_util.waitAfterNextRender(visibilityElement);
+
+        assertToggleState(/*all=*/ true, /*some=*/ false, /*no=*/ false);
+        assertFalse(isZeroStateVisible());
+        assertFalse(areContactCheckBoxesVisible());
+        assertFalse(isNoContactsSectionVisible());
+      });
+
+  test(
+      'Visibility component shows someContacts for kSelectedContacts',
+      async function() {
+        visibilityElement.set(
+            'settings.visibility',
+            nearbyShare.mojom.Visibility.kSelectedContacts);
+
+        // need to wait for the next render to see results
+        await test_util.waitAfterNextRender(visibilityElement);
+
+        assertToggleState(/*all=*/ false, /*some=*/ true, /*no=*/ false);
+        assertFalse(isZeroStateVisible());
+        assertTrue(areContactCheckBoxesVisible());
+        assertFalse(isNoContactsSectionVisible());
+      });
+
+  test('Visibility component shows noContacts for kNoOne', async function() {
+    visibilityElement.set(
+        'settings.visibility', nearbyShare.mojom.Visibility.kNoOne);
+
+    // need to wait for the next render to see results
+    await test_util.waitAfterNextRender(visibilityElement);
+
+    assertToggleState(/*all=*/ false, /*some=*/ false, /*no=*/ true);
+    assertFalse(isZeroStateVisible());
+    assertTrue(areContactCheckBoxesVisible());
+    assertFalse(isNoContactsSectionVisible());
+  });
+
+  test(
+      'Visibility component shows no contacts when there are zero contacts',
+      async function() {
+        visibilityElement.set(
+            'settings.visibility', nearbyShare.mojom.Visibility.kAllContacts);
+        visibilityElement.set('contacts', []);
+
+        // need to wait for the next render to see results
+        await test_util.waitAfterNextRender(visibilityElement);
+
+        assertToggleState(/*all=*/ true, /*some=*/ false, /*no=*/ false);
+        assertFalse(isZeroStateVisible());
+        assertFalse(areContactCheckBoxesVisible());
+        assertTrue(isNoContactsSectionVisible());
+      });
+});

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

@@ -23,8 +23,8 @@ suite('nearby-onboarding-page', function() {
     element.settings = {
       enabled: false,
       deviceName: deviceName,
-      dataUsage: 1,
-      visibility: 1,
+      dataUsage: nearbyShare.mojom.DataUsage.kOnline,
+      visibility: nearbyShare.mojom.Visibility.kAllContacts,
       allowedContacts: [],
     };
     document.body.appendChild(element);

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

@@ -75,3 +75,22 @@ var NearbyVisibilityPageTest = class extends NearbySharedBrowserTest {
 };
 
 TEST_F('NearbyVisibilityPageTest', 'All', () => mocha.run());
+
+/**
+ * @extends {NearbySharedBrowserTest}
+ */
+var NearbyContactVisibilityTest = class extends NearbySharedBrowserTest {
+  /** @override */
+  get browsePreload() {
+    return super.browsePreload + 'shared/nearby_contact_visibility.html';
+  }
+
+  /** @override */
+  get extraLibraries() {
+    return super.extraLibraries.concat([
+      'nearby_contact_visibility_test.js',
+    ]);
+  }
+};
+
+TEST_F('NearbyContactVisibilityTest', 'All', () => mocha.run());

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

@@ -44,6 +44,7 @@ const NearbySharedV3Test = class extends PolymerTest {
 
 [['OnboardingPage', 'nearby_onboarding_page_test.m.js'],
  ['VisibilityPage', 'nearby_visibility_page_test.m.js'],
+ ['ContactVisibility', 'nearby_contact_visibility_test.m.js'],
 ].forEach(test => registerTest(...test));
 
 function registerTest(testName, module, caseName) {

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

@@ -21,8 +21,8 @@ suite('nearby-visibility-page', function() {
     visibility_page.settings = {
       enabled: false,
       deviceName: 'deviceName',
-      dataUsage: 1,
-      visibility: 1,
+      dataUsage: nearbyShare.mojom.DataUsage.kOnline,
+      visibility: nearbyShare.mojom.Visibility.kAllContacts,
       allowedContacts: [],
     };
     document.body.appendChild(visibility_page);

ui/webui/resources/cr_elements_resources_v3.grdp

@@ -77,6 +77,10 @@
          file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector_grid.m.js"
          use_base_dir="false"
          type="BINDATA" />
+  <include name="IDR_CR_ELEMENTS_CR_CARD_RADIO_BUTTON_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_radio_button/cr_card_radio_button.m.js"
+         use_base_dir="false"
+         type="BINDATA" />
   <include name="IDR_CR_ELEMENTS_CR_RADIO_BUTTON_M_JS"
          file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button.m.js"
          use_base_dir="false"