[Nearby] Add onboarding to receive dialog

This converts the onboarding and visibility pages to use the
nearby-template-page and hosts them in receive dialog. If the user
attempts to enter high visibility mode and nearby is not enabled, we
force onboarding to be run first.

Screenshot of onboarding running from settings:
http://screen/xnm86ZduzQ6bGEr.png

Bug: b:154866951
Change-Id: I195fa803762635f0a19d58d7d4db919c825b8ffc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2420770
Commit-Queue: James Vecore <vecore@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#809599}

chrome/browser/resources/nearby_share/app.js

@@ -76,6 +76,7 @@ Polymer({
   listeners: {
     'change-page': 'onChangePage_',
     'close': 'onClose_',
+    'onboarding-complete': 'onOnboardingComplete_',
   },
 
   /**
@@ -114,4 +115,13 @@ Polymer({
   onClose_(event) {
     chrome.send('close');
   },
+
+  /**
+   * Handler for when onboarding is completed.
+   * @param {!Event} event
+   * @private
+   */
+  onOnboardingComplete_(event) {
+    this.getViewManager_().switchView(Page.DISCOVERY);
+  },
 });

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

@@ -49,6 +49,7 @@ js_library("nearby_page_template") {
 
 js_library("nearby_onboarding_page") {
   deps = [
+    ":nearby_page_template",
     ":nearby_share_settings_behavior",
     "//third_party/polymer/v1_0/components-chromium/iron-icon:iron-icon-extracted",
     "//ui/webui/resources/cr_elements/cr_input:cr_input",
@@ -74,6 +75,7 @@ js_library("nearby_share_settings_behavior") {
 js_library("nearby_visibility_page") {
   deps = [
     ":nearby_contact_visibility",
+    ":nearby_page_template",
     ":nearby_share_settings_behavior",
     "//ui/webui/resources/js:i18n_behavior",
   ]
@@ -137,6 +139,7 @@ js_library("nearby_contact_visibility.m") {
 js_library("nearby_onboarding_page.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/nearby_share/shared/nearby_onboarding_page.m.js" ]
   deps = [
+    ":nearby_page_template.m",
     ":nearby_share_settings_behavior.m",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_link_row:cr_link_row.m",
@@ -173,6 +176,7 @@ 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_page_template.m",
     ":nearby_share_settings_behavior.m",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:i18n_behavior.m",

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

@@ -10,6 +10,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="nearby_contact_manager.html">
+<link rel="import" href="nearby_page_template.html">
 <link rel="import" href="nearby_share_settings_behavior.html">
 <link rel="import" href="nearby_shared_icons.html">
 
@@ -143,7 +144,7 @@
       }
 
       .contacts-section {
-        height: 150px;
+        height: 100px;
         margin-block-end: 8px;
         margin-block-start: 8px;
       }

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

@@ -286,8 +286,6 @@ Polymer({
    * @private
    */
   genFakeContacts_(numContacts) {
-    this.contactsPending = false;
-    this.contactsFailed = false;
     clearTimeout(this.downloadTimeoutId_);
     const fakeContacts = [];
     for (let i = 0; i < numContacts; i++) {
@@ -299,6 +297,7 @@ Polymer({
       });
     }
     this.contacts = fakeContacts;
+    this.contactsState = ContactsState.HAS_CONTACTS;
   },
 
   /**

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

@@ -4,28 +4,13 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="./nearby_page_template.html">
 <link rel="import" href="./nearby_share_settings_behavior.html">
 
 <dom-module id="nearby-onboarding-page">
   <template>
     <style include="cr-icons cr-shared-style"></style>
     <style>
-      :host {
-        --nearby-page-space-block: 26px;
-        --nearby-page-space-inline: 32px;
-        --nearby-page-space-large-inline: 42px;
-      }
-
-      #page-container {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-
-      #header {
-        padding: 30px;
-      }
-
       #center-content {
         box-sizing: border-box;
         display: flex;
@@ -34,15 +19,6 @@
         overflow: hidden;
       }
 
-      #page-title {
-        font-size: 125%;
-        font-weight: normal;
-      }
-
-      #page-sub-title {
-        font-weight: normal;
-      }
-
       #splash-image-column {
         height: 200px;
         margin: 10px;
@@ -66,22 +42,14 @@
         padding-inline-end: 10px;
         padding-inline-start: 10px;
       }
-
-      #actions {
-        margin-block-end: var(--nearby-page-space-block);
-        margin-block-start: 17px;
-        margin-inline-end:  var(--nearby-page-space-inline);
-        margin-inline-start: var(--nearby-page-space-inline);
-        text-align: end;
-      }
     </style>
-    <div id="page-container">
-      <div id="header">
-        <h1 id="page-title">$i18n{nearbyShareOnboardingPageTitle}</h1>
-        <h4 id="page-sub-title">$i18n{nearbyShareOnboardingPageSubtitle}</h4>
-      </div>
-
-      <div id=center-content>
+    <nearby-page-template title="$i18n{nearbyShareOnboardingPageTitle}"
+        sub-title="$i18n{nearbyShareOnboardingPageSubtitle}"
+        action-button-label="$i18n{nearbyShareActionsNext}"
+        action-button-event-name="next"
+        cancel-button-label="$i18n{nearbyShareActionsCancel}"
+        cancel-button-event-name="close">
+      <div id=center-content slot="content">
         <iron-icon id="splash-image-column"
             icon="nearby-images:nearby-onboarding-splash">
         </iron-icon>
@@ -91,16 +59,7 @@
           </cr-input>
         </div>
       </div>
-
-      <div id="actions">
-        <cr-button class="cancel-button" on-click="onCloseTap_">
-          $i18n{nearbyShareActionsCancel}
-        </cr-button>
-        <cr-button id="next-button" class="action-button" on-click="onNextTap_">
-          $i18n{nearbyShareActionsNext}
-        </cr-button>
-      </div>
-    </div>
+    </nearby-page-template>
   </template>
   <script src="nearby_onboarding_page.js"></script>
 </dom-module>

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

@@ -19,12 +19,15 @@ Polymer({
     }
   },
 
-  onNextTap_() {
-    this.set('settings.deviceName', this.$.deviceName.value);
-    this.fire('change-page', {page: 'visibility'});
+  listeners: {
+    'next': 'onNext_',
   },
 
-  onCloseTap_() {
-    this.fire('close');
+  /**
+   * @private
+   */
+  onNext_() {
+    this.set('settings.deviceName', this.$.deviceName.value);
+    this.fire('change-page', {page: 'visibility'});
   },
 });

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

@@ -13,14 +13,14 @@
       #pageContainer {
         display: flex;
         flex-direction: column;
-        height: 385px;
-        padding-block-end: var(--nearby-page-space-block);
-        padding-block-start: var(--nearby-page-space-block);
+        height: 100%;
       }
 
       #header {
         margin-inline-end:  var(--nearby-page-space-inline);
         margin-inline-start: var(--nearby-page-space-inline);
+        padding-block-end: var(--nearby-page-space-block);
+        padding-block-start: var(--nearby-page-space-block);
       }
 
       #contentContainer {
@@ -37,10 +37,12 @@
       }
 
       #actions {
+        display: flex;
+        justify-content: flex-end;
+        padding-block-end: var(--nearby-page-space-block);
         padding-block-start: var(--nearby-page-space-block);
         padding-inline-end:  var(--nearby-page-space-inline);
         padding-inline-start: var(--nearby-page-space-inline);
-        text-align: end;
       }
 
       #utilityButton {

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

@@ -9,22 +9,6 @@
   <template>
     <style include="cr-icons cr-shared-style"></style>
     <style>
-      :host {
-        --nearby-page-space-block: 26px;
-        --nearby-page-space-inline: 32px;
-        --nearby-page-space-large-inline: 42px;
-      }
-
-      #page-container {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-
-      #header {
-        padding: 30px;
-      }
-
       #center-content {
         box-sizing: border-box;
         display: flex;
@@ -34,54 +18,21 @@
         margin-inline-start: 24px;
         overflow: hidden;
       }
-
-      #page-title {
-        font-size: 125%;
-        font-weight: normal;
-      }
-
-      #page-sub-title {
-        font-weight: normal;
-      }
-
-      #actions {
-        display: flex;
-        margin-block-end: var(--nearby-page-space-block);
-        margin-block-start: 17px;
-        margin-inline-end:  var(--nearby-page-space-inline);
-        margin-inline-start: var(--nearby-page-space-inline);
-        text-align: end;
-      }
-
-      #manage-contacts-button {
-        margin-inline-end: auto;
-      }
     </style>
-    <div id="page-container">
-      <div id="header">
-        <h1 id="page-title">$i18n{nearbyShareVisibilityPageTitle}</h1>
-        <h4 id="page-sub-title">$i18n{nearbyShareVisibilityPageSubtitle}</h4>
-      </div>
-
-      <div id=center-content>
+    <nearby-page-template title="$i18n{nearbyShareVisibilityPageTitle}"
+        sub-title="$i18n{nearbyShareVisibilityPageSubtitle}"
+        action-button-label="$i18n{nearbyShareActionsConfirm}"
+        action-button-event-name="next"
+        cancel-button-label="$i18n{nearbyShareActionsCancel}"
+        cancel-button-event-name="close"
+        utility-button-label="$i18n{nearbyShareVisibilityPageManageContacts}"
+        utility-button-event-name="manage-contacts">
+      <div id=center-content slot="content">
         <nearby-contact-visibility id="contactVisibility"
             settings="{{settings}}">
         </nearby-contact-visibility>
       </div>
-
-      <div id="actions">
-        <cr-button id="manage-contacts-button" on-click="onManageContactsTap_">
-          $i18n{nearbyShareVisibilityPageManageContacts}
-        </cr-button>
-        <cr-button id="cancel-button" class="cancel-button"
-            on-click="onCloseTap_">
-          $i18n{nearbyShareActionsCancel}
-        </cr-button>
-        <cr-button id="next-button" class="action-button" on-click="onNextTap_">
-          $i18n{nearbyShareActionsConfirm}
-        </cr-button>
-      </div>
-    </div>
+    </nearby-page-template>
   </template>
   <script src="nearby_visibility_page.js"></script>
 </dom-module>

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

@@ -24,18 +24,21 @@ Polymer({
     }
   },
 
-  onNextTap_() {
-    this.set('settings.enabled', true);
-    this.fire('change-page', {page: 'discovery'});
+  listeners: {
+    'next': 'onNext_',
+    'manage-contacts': 'onManageContacts_'
   },
 
-  onCloseTap_() {
-    this.fire('close');
+  /** @private */
+  onNext_() {
+    this.set('settings.enabled', true);
+    this.fire('onboarding-complete');
   },
 
-  onManageContactsTap_() {
+  /** @private */
+  onManageContacts_() {
     // TODO(vecore): this is not a final link
-    window.open('https://contacts.google.com');
+    window.open('https://contacts.google.com', '_blank');
   },
 
 });

chrome/browser/resources/settings/chromeos/nearby_share_page/BUILD.gn

@@ -78,7 +78,9 @@ js_library("nearby_share_receive_dialog") {
     ":nearby_share_confirm_page",
     ":nearby_share_high_visibility_page",
     ":nearby_share_receive_manager",
+    "//chrome/browser/resources/nearby_share/shared:nearby_onboarding_page",
     "//chrome/browser/resources/nearby_share/shared:nearby_share_settings_behavior",
+    "//chrome/browser/resources/nearby_share/shared:nearby_visibility_page",
     "//ui/webui/resources/cr_elements/cr_button:cr_button",
     "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog",
     "//ui/webui/resources/cr_elements/cr_view_manager:cr_view_manager",
@@ -217,7 +219,9 @@ js_library("nearby_share_receive_dialog.m") {
     ":nearby_share_confirm_page.m",
     ":nearby_share_high_visibility_page.m",
     ":nearby_share_receive_manager.m",
+    "//chrome/browser/resources/nearby_share/shared:nearby_onboarding_page.m",
     "//chrome/browser/resources/nearby_share/shared:nearby_share_settings_behavior.m",
+    "//chrome/browser/resources/nearby_share/shared:nearby_visibility_page.m",
     "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
     "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog.m",
     "//ui/webui/resources/cr_elements/cr_view_manager:cr_view_manager.m",

chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_receive_dialog.html

@@ -4,7 +4,9 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_view_manager/cr_view_manager.html">
 <link rel="import" href="chrome://resources/html/assert.html">
+<link rel="import" href="../../shared/nearby_onboarding_page.html">
 <link rel="import" href="../../shared/nearby_share_settings_behavior.html">
+<link rel="import" href="../../shared/nearby_visibility_page.html">
 <link rel="import" href="nearby_share_confirm_page.html">
 <link rel="import" href="nearby_share_high_visibility_page.html">
 <link rel="import" href="nearby_share_receive_manager.html">
@@ -12,8 +14,9 @@
 <dom-module id="nearby-share-receive-dialog">
   <template>
     <style>
-      #content {
-        height: 400px;
+      cr-dialog::part(dialog) {
+        height: 600px;
+        width: 512px;
       }
     </style>
     <cr-dialog id="dialog" show-on-attach>
@@ -26,6 +29,12 @@
               share-target="[[shareTarget]]"
               connection-token="[[connectionToken]]">
           </nearby-share-confirm-page>
+          <nearby-onboarding-page id="[[Page.ONBOARDING]]" slot="view"
+              settings="{{settings}}">
+          </nearby-onboarding-page>
+          <nearby-visibility-page id="[[Page.VISIBILITY]]" slot="view"
+              settings="{{settings}}">
+          </nearby-visibility-page>
         </cr-view-manager>
       </div>
     </cr-dialog>

chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_receive_dialog.js

@@ -4,15 +4,27 @@
 
 /**
  * @fileoverview
- * 'nearby-share-receive-dialog' shows two pages:
- * 1) high visibility receive page
- * 2) Non-contact confirm page (contacts are confirmed w/ a notification)
+ * 'nearby-share-receive-dialog' shows two main pages:
+ *  - high visibility receive page
+ *  - Non-contact confirm page (contacts are confirmed w/ a notification)
+ *
+ * This dialog also supports showing the onboarding flow and will automatically
+ * show onboarding if the feature is turned off and one of the two main pages is
+ * requested.
+ *
+ * By default this dialog will not show anything until the caller calls one of
+ * the following:
+ *  - showOnboarding()
+ *  - showHighVisibilityPage()
+ *  - showConfirmPage()
  */
 
 /** @enum {string} */
 const Page = {
   HIGH_VISIBILITY: 'high-visibility',
   CONFIRM: 'confirm',
+  ONBOARDING: 'onboarding',
+  VISIBILITY: 'visibility',
 };
 
 Polymer({
@@ -48,12 +60,29 @@ Polymer({
     'change-page': 'onChangePage_',
     'cancel': 'onCancel_',
     'confirm': 'onConfirm_',
+    'onboarding-complete': 'onOnboardingComplete_',
     'reject': 'onReject_',
   },
 
+  observers: [
+    'onSettingsChanged_(settings.*)',
+  ],
+
   /** @private {boolean} */
   closing_: false,
 
+  /**
+   * What should happen once we get settings values from mojo.
+   * @private {?function()}
+   * */
+  postSettingsCallback: null,
+
+  /**
+   * What should happen once onboarding is complete.
+   * @private {?function()}
+   * */
+  postOnboardingCallback: null,
+
   /** @private {?nearbyShare.mojom.ReceiveManagerInterface} */
   receiveManager_: null,
 
@@ -67,10 +96,6 @@ Polymer({
     this.receiveManager_ = nearby_share.getReceiveManager();
     this.observerReceiver_ = nearby_share.observeReceiveManager(
         /** @type {!nearbyShare.mojom.ReceiveObserverInterface} */ (this));
-    // Request to enter high visibility mode if we have been attached.
-    this.receiveManager_.enterHighVisibility();
-    // TODO(vecore): determine if we need to run onboarding first or not..
-    this.showHighVisibilityPage();
   },
 
   /** @override */
@@ -109,6 +134,21 @@ Polymer({
     this.showConfirmPage();
   },
 
+  /**
+   * @param {PolymerDeepPropertyChange} change a change record
+   * @private
+   */
+  onSettingsChanged_(change) {
+    if (change.path != 'settings.enabled') {
+      return;
+    }
+
+    if (this.postSettingsCallback) {
+      this.postSettingsCallback();
+      this.postSettingsCallback = null;
+    }
+  },
+
   /**
    * @return {!CrViewManagerElement} the view manager
    * @private
@@ -135,21 +175,71 @@ Polymer({
   },
 
   /**
-   * Call to show the high visibility page
+   * Defers running a callback for page navigation in the case that we do not
+   * yet have a settings.enabled value from mojo or if Nearby Share is not
+   * enabled yet and we need to run the onboarding flow first.
+   * @param {function()} callback
+   * @return {boolean} true if the callback has been scheduled for later, false
+   *     if it did not need to be deferred and can be called now.
+   */
+  deferCallIfNecessary(callback) {
+    const haveSettings = !this.settings || this.settings.enabled === undefined;
+    if (haveSettings) {
+      // Let onSettingsChanged_ handle the navigation because we don't know yet
+      // if the feature is enabled and we might need to show onboarding.
+      this.postSettingsCallback = callback;
+      return true;
+    }
+
+    if (!this.settings.enabled) {
+      // We need to show onboarding first because nearby is not enabled, but we
+      // need to run the callback post onboarding.
+      this.postOnboardingCallback = callback;
+      this.getViewManager_().switchView(Page.ONBOARDING);
+      return true;
+    }
+    // We know the feature is enabled so no need to defer the call.
+    return false;
+  },
+
+  /**
+   * Call to show the onboarding flow and then close when complete.
+   */
+  showOnboarding() {
+    // Setup the callback to close this dialog when onboarding is complete.
+    this.postOnboardingCallback = this.close_.bind(this);
+    this.getViewManager_().switchView(Page.ONBOARDING);
+  },
+
+  /**
+   * Call to show the high visibility page.
    */
   showHighVisibilityPage() {
+    // Check if we need to wait for settings values from mojo or if we need to
+    // run onboarding first before showing the page.
+    if (this.deferCallIfNecessary(this.showHighVisibilityPage.bind(this))) {
+      return;
+    }
+
+    // Request to enter high visibility mode and show the page.
+    this.receiveManager_.enterHighVisibility();
     this.getViewManager_().switchView(Page.HIGH_VISIBILITY);
   },
 
   /**
-   * Call to show the share target configuration page
+   * Call to show the share target configuration page.
    */
   showConfirmPage() {
+    // Check if we need to wait for settings values from mojo or if we need to
+    // run onboarding first before showing the page.
+    if (this.deferCallIfNecessary(this.showConfirmPage.bind(this))) {
+      return;
+    }
     this.getViewManager_().switchView(Page.CONFIRM);
   },
 
   /**
-   * Child views can fire a 'change-page' event to trigger a page change
+   * Child views can fire a 'change-page' event to trigger a page change.
    * @param {!CustomEvent<!{page: Page}>} event
    * @private
    */
@@ -175,6 +265,16 @@ Polymer({
     });
   },
 
+  /** @private */
+  onOnboardingComplete_() {
+    if (!this.postOnboardingCallback) {
+      return;
+    }
+
+    this.postOnboardingCallback();
+    this.postOnboardingCallback = null;
+  },
+
   /** @private */
   onReject_() {
     assert(this.shareTarget);

chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_subpage.js

@@ -281,6 +281,12 @@ Polymer({
       this.$$('#receiveDialog').showConfirmPage();
     }
 
+    if (queryParams.has('onboarding')) {
+      this.showReceiveDialog_ = true;
+      Polymer.dom.flush();
+      this.$$('#receiveDialog').showOnboarding();
+    }
+
     this.attemptDeepLink();
   },
 

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

@@ -16,10 +16,14 @@ suite('nearby-onboarding-page', function() {
   let element;
   /** @type {!string} */
   const deviceName = 'Test\'s Device';
+  /** @type {!nearby_share.FakeContactManager} */
+  const fakeContactManager = new nearby_share.FakeContactManager();
 
   setup(function() {
     document.body.innerHTML = '';
 
+    nearby_share.setContactManagerForTesting(fakeContactManager);
+
     element = /** @type {!NearbyOnboardingPageElement} */ (
         document.createElement('nearby-onboarding-page'));
     element.settings = {

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

@@ -7,6 +7,7 @@
 // #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-visibility-page', function() {
@@ -30,8 +31,10 @@ suite('nearby-visibility-page', function() {
 
   test('Renders visibility page', async function() {
     assertFalse(visibility_page.settings.enabled);
-    // Next button sets settings.enabled to true
-    visibility_page.$$('#next-button').click();
+    await test_util.waitAfterNextRender(visibility_page);
+    // Action button on the page template sets settings.enabled to true.
+    const page_template = visibility_page.$$('nearby-page-template');
+    page_template.$$('#actionButton').click();
     assertTrue(visibility_page.settings.enabled);
   });
 });

chrome/test/data/webui/settings/chromeos/nearby_share_receive_dialog_tests.js

@@ -5,29 +5,41 @@
 // clang-format off
 // #import {assertEquals} from '../../chai_assert.js';
 // #import {isChildVisible, waitAfterNextRender} from '../../test_util.m.js';
-// #import {setReceiveManagerForTesting} from 'chrome://os-settings/chromeos/os_settings.js';
+// #import {setReceiveManagerForTesting, setContactManagerForTesting} from 'chrome://os-settings/chromeos/os_settings.js';
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {FakeContactManager} from '../../nearby_share/shared/fake_nearby_contact_manager.m.js';
 // #import {FakeReceiveManager} from './fake_receive_manager.m.js'
 // clang-format on
 
 suite('NearbyShare', function() {
-  /** @type {?NearbyShareReceiveDialogElement} */
-  let dialog = null;
-  /** @type {?FakeReceiveManager} */
-  let fakeReceiveManager = null;
+  /** @type {!NearbyShareReceiveDialogElement} */
+  let dialog;
+  /** @type {!FakeReceiveManager} */
+  let fakeReceiveManager;
+  /** @type {!nearby_share.FakeContactManager} */
+  let fakeContactManager;
 
-  setup(function() {
+  /**
+   * This allows both sub-suites to share the same setup logic but with a
+   * different enabled state which changes the routing of the first view.
+   * @param {boolean} enabled The value of the enabled setting.
+   */
+  function sharedSetup(enabled) {
     fakeReceiveManager = new nearby_share.FakeReceiveManager();
+    fakeContactManager = new nearby_share.FakeContactManager();
+
     nearby_share.setReceiveManagerForTesting(fakeReceiveManager);
+    nearby_share.setContactManagerForTesting(fakeContactManager);
+
     PolymerTest.clearBody();
+
     dialog = document.createElement('nearby-share-receive-dialog');
+    dialog.settings = {
+      enabled: enabled,
+    };
     document.body.appendChild(dialog);
     Polymer.dom.flush();
-  });
-
-  teardown(function() {
-    dialog.remove();
-  });
+  }
 
   /**
    * @param {string} selector
@@ -37,53 +49,127 @@ suite('NearbyShare', function() {
     return test_util.isChildVisible(dialog, selector, false);
   }
 
-  test('show high visibility page, get a target, accept', async function() {
-    // When attached we enter high visibility mode by default
-    assertTrue(isVisible('nearby-share-high-visibility-page'));
-    assertFalse(isVisible('nearby-share-confirm-page'));
-    // If a share target comes in, we show it.
-    const target =
-        fakeReceiveManager.simulateShareTargetArrival('testName', '1234');
-    const confirmPage = dialog.$$('nearby-share-confirm-page');
-    Polymer.dom.flush();
+  /**
+   *
+   * @param {string} page page element name
+   * @param {*} button button selector (i.e. #actionButton)
+   */
+  function getButton(page, button) {
+    return dialog.$$(page).$$('nearby-page-template').$$(button);
+  }
 
-    assertEquals(
-        target.name, confirmPage.$$('#shareTargetName').textContent.trim());
-    assertEquals('1234', confirmPage.$$('#connectionToken').textContent.trim());
+  suite('EnabledTests', function() {
+    setup(function() {
+      sharedSetup(true);
+      dialog.showHighVisibilityPage();
+      Polymer.dom.flush();
+    });
 
-    confirmPage.$$('nearby-page-template').$$('#actionButton').click();
-    const shareTargetId = await fakeReceiveManager.whenCalled('accept');
-    assertEquals(target.id, shareTargetId);
-  });
+    teardown(function() {
+      dialog.remove();
+    });
 
-  test('show high visibility page, get a target, reject', async function() {
-    // When attached we enter high visibility mode by default
-    assertTrue(isVisible('nearby-share-high-visibility-page'));
-    assertFalse(isVisible('nearby-share-confirm-page'));
-    // If a share target comes in, we show it.
-    const target =
-        fakeReceiveManager.simulateShareTargetArrival('testName', '1234');
-    const confirmPage = dialog.$$('nearby-share-confirm-page');
-    Polymer.dom.flush();
+    test('show high visibility page, get a target, accept', async function() {
+      // When attached we enter high visibility mode by default
+      assertTrue(isVisible('nearby-share-high-visibility-page'));
+      assertFalse(isVisible('nearby-share-confirm-page'));
+      // If a share target comes in, we show it.
+      const target =
+          fakeReceiveManager.simulateShareTargetArrival('testName', '1234');
+      const confirmPage = dialog.$$('nearby-share-confirm-page');
+      Polymer.dom.flush();
+
+      assertEquals(
+          target.name, confirmPage.$$('#shareTargetName').textContent.trim());
+      assertEquals(
+          '1234', confirmPage.$$('#connectionToken').textContent.trim());
+
+      confirmPage.$$('nearby-page-template').$$('#actionButton').click();
+      const shareTargetId = await fakeReceiveManager.whenCalled('accept');
+      assertEquals(target.id, shareTargetId);
+    });
 
-    assertEquals(
-        target.name, confirmPage.$$('#shareTargetName').textContent.trim());
-    assertEquals('1234', confirmPage.$$('#connectionToken').textContent.trim());
+    test('show high visibility page, get a target, reject', async function() {
+      // When attached we enter high visibility mode by default
+      assertTrue(isVisible('nearby-share-high-visibility-page'));
+      assertFalse(isVisible('nearby-share-confirm-page'));
+      // If a share target comes in, we show it.
+      const target =
+          fakeReceiveManager.simulateShareTargetArrival('testName', '1234');
+      const confirmPage = dialog.$$('nearby-share-confirm-page');
+      Polymer.dom.flush();
 
-    confirmPage.$$('nearby-page-template').$$('#cancelButton').click();
-    const shareTargetId = await fakeReceiveManager.whenCalled('reject');
-    assertEquals(target.id, shareTargetId);
+      assertEquals(
+          target.name, confirmPage.$$('#shareTargetName').textContent.trim());
+      assertEquals(
+          '1234', confirmPage.$$('#connectionToken').textContent.trim());
+
+      confirmPage.$$('nearby-page-template').$$('#cancelButton').click();
+      const shareTargetId = await fakeReceiveManager.whenCalled('reject');
+      assertEquals(target.id, shareTargetId);
+    });
+
+    test(
+        'show high visibility page, exitHighVisibility, closes dialog',
+        async function() {
+          // When attached we enter high visibility mode by default
+          assertTrue(isVisible('nearby-share-high-visibility-page'));
+          assertFalse(isVisible('nearby-share-confirm-page'));
+          // If a share target comes in, we show it.
+          await fakeReceiveManager.exitHighVisibility();
+          Polymer.dom.flush();
+          assertFalse(isVisible('cr-dialog'));
+        });
   });
 
-  test(
-      'show high visibility page, exitHighVisibility, closes dialog',
-      async function() {
-        // When attached we enter high visibility mode by default
-        assertTrue(isVisible('nearby-share-high-visibility-page'));
-        assertFalse(isVisible('nearby-share-confirm-page'));
-        // If a share target comes in, we show it.
-        await fakeReceiveManager.exitHighVisibility();
-        Polymer.dom.flush();
-        assertFalse(isVisible('cr-dialog'));
-      });
+  suite('DisabledTests', function() {
+    setup(function() {
+      sharedSetup(false);
+    });
+
+    teardown(function() {
+      dialog.remove();
+    });
+
+    test('when disabled, onboarding is shown first', async function() {
+      dialog.showHighVisibilityPage();
+      await test_util.waitAfterNextRender(dialog);
+
+      assertTrue(isVisible('nearby-onboarding-page'));
+      // Advance to the next page.
+      getButton('nearby-onboarding-page', '#actionButton').click();
+
+      await test_util.waitAfterNextRender(dialog);
+
+      assertTrue(isVisible('nearby-visibility-page'));
+      // Advance to the next page.
+      getButton('nearby-visibility-page', '#actionButton').click();
+
+      await test_util.waitAfterNextRender(dialog);
+
+      assertTrue(dialog.settings.enabled);
+      assertTrue(isVisible('nearby-share-high-visibility-page'));
+    });
+
+    test('when showing onboarding, close when complete.', async function() {
+      dialog.showOnboarding();
+      await test_util.waitAfterNextRender(dialog);
+
+      assertTrue(isVisible('nearby-onboarding-page'));
+      // Advance to the next page.
+      getButton('nearby-onboarding-page', '#actionButton').click();
+
+      await test_util.waitAfterNextRender(dialog);
+
+      assertTrue(isVisible('nearby-visibility-page'));
+      // This should close the dialog.
+      getButton('nearby-visibility-page', '#actionButton').click();
+
+      assertTrue(dialog.closing_);
+
+      await test_util.waitAfterNextRender(dialog);
+
+      assertFalse(dialog.$$('#dialog').open);
+    });
+  });
 });

chrome/test/data/webui/settings/chromeos/os_settings_browsertest.js

@@ -1081,6 +1081,7 @@ var OSSettingsNearbyShareReceiveDialogTest =
   /** @override */
   get extraLibraries() {
     return super.extraLibraries.concat([
+      '../../nearby_share/shared/fake_nearby_contact_manager.js',
       '../../test_util.js',
       '../../test_browser_proxy.js',
       'fake_receive_manager.js',