[Nearby] Add empty receive dialog

Adds an empty receive dialog stub that will host high visibility,
confirmation and on-boarding pages within os-settings. The dialog does
not set a title, sub-title or have buttons because a shared page
component will handle these so they are consistent. This also allows
page in and out animations to include the titles and buttons which would
not be possible if the title and buttons were re-used between pages.

Trigger Url: chrome://os-settings/multidevice/nearbyshare?receive
Screenshot: http://screen/3jNcwoQgcQNtq4D.png

See follow-up CLs for usage.

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

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

@@ -13,6 +13,7 @@ js_type_check("closure_compile") {
     ":nearby_share_contact_visibility_dialog",
     ":nearby_share_data_usage_dialog",
     ":nearby_share_device_name_dialog",
+    ":nearby_share_receive_dialog",
     ":nearby_share_subpage",
     ":types",
   ]
@@ -53,11 +54,21 @@ js_library("nearby_share_device_name_dialog") {
   ]
 }
 
+js_library("nearby_share_receive_dialog") {
+  deps = [
+    "//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",
+    "//ui/webui/resources/js:i18n_behavior",
+  ]
+}
+
 js_library("nearby_share_subpage") {
   deps = [
     ":nearby_share_contact_visibility_dialog",
     ":nearby_share_data_usage_dialog",
     ":nearby_share_device_name_dialog",
+    ":nearby_share_receive_dialog",
     ":types",
     "../..:router",
     "../../prefs",
@@ -80,6 +91,7 @@ group("polymer3_elements") {
     ":nearby_share_contact_visibility_dialog_module",
     ":nearby_share_data_usage_dialog_module",
     ":nearby_share_device_name_dialog_module",
+    ":nearby_share_receive_dialog_module",
     ":nearby_share_subpage_module",
     "../../controls:polymer3_elements",
     "../../prefs:polymer3_elements",
@@ -97,6 +109,7 @@ js_type_check("closure_compile_module") {
     ":nearby_share_contact_visibility_dialog.m",
     ":nearby_share_data_usage_dialog.m",
     ":nearby_share_device_name_dialog.m",
+    ":nearby_share_receive_dialog.m",
     ":nearby_share_subpage.m",
   ]
 }
@@ -142,12 +155,24 @@ js_library("nearby_share_device_name_dialog.m") {
   extra_deps = [ ":nearby_share_device_name_dialog_module" ]
 }
 
+js_library("nearby_share_receive_dialog.m") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_receive_dialog.m.js" ]
+  deps = [
+    "//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",
+    "//ui/webui/resources/js:i18n_behavior.m",
+  ]
+  extra_deps = [ ":nearby_share_receive_dialog_module" ]
+}
+
 js_library("nearby_share_subpage.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_subpage.m.js" ]
   deps = [
     ":nearby_share_contact_visibility_dialog.m",
     ":nearby_share_data_usage_dialog.m",
     ":nearby_share_device_name_dialog.m",
+    ":nearby_share_receive_dialog.m",
     ":types.m",
     "../..:router.m",
     "../../prefs:prefs.m",
@@ -211,6 +236,14 @@ polymer_modulizer("nearby_share_device_name_dialog") {
   auto_imports = os_settings_auto_imports
 }
 
+polymer_modulizer("nearby_share_receive_dialog") {
+  js_file = "nearby_share_receive_dialog.js"
+  html_file = "nearby_share_receive_dialog.html"
+  html_type = "dom-module"
+  namespace_rewrites = os_settings_namespace_rewrites
+  auto_imports = os_settings_auto_imports
+}
+
 polymer_modulizer("nearby_share_subpage") {
   js_file = "nearby_share_subpage.js"
   html_file = "nearby_share_subpage.html"

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
+<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">
+
+<dom-module id="nearby-share-receive-dialog">
+  <template>
+    <style>
+      #content {
+        height: 400px;
+      }
+    </style>
+    <cr-dialog id="dialog" show-on-attach>
+      <div id="content" slot="body">
+        <cr-view-manager id="viewManager">
+        </cr-view-manager>
+      </div>
+    </cr-dialog>
+  </template>
+  <script src="nearby_share_receive_dialog.js"></script>
+</dom-module>

chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_receive_dialog.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
+ * 'nearby-share-receive-dialog' shows two pages:
+ * 1) high visibility receive page
+ * 2) Non-contact confirm page (contacts are confirmed w/ a notification)
+ */
+
+Polymer({
+  is: 'nearby-share-receive-dialog',
+
+  /**
+   * @return {!CrViewManagerElement} the view manager
+   * @private
+   */
+  getViewManager_() {
+    return /** @type {!CrViewManagerElement} */ (this.$.viewManager);
+  },
+
+  /** @private */
+  close_() {
+    // TODO(vecore): Unregister foreground receiver.
+    const dialog = /** @type {!CrDialogElement} */ (this.$.dialog);
+    if (dialog.open) {
+      dialog.close();
+    }
+  },
+});

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

@@ -12,6 +12,7 @@
 <link rel="import" href="nearby_share_contact_visibility_dialog.html">
 <link rel="import" href="nearby_share_device_name_dialog.html">
 <link rel="import" href="nearby_share_data_usage_dialog.html">
+<link rel="import" href="nearby_share_receive_dialog.html">
 <link rel="import" href="types.html">
 
 <dom-module id="settings-nearby-share-subpage">
@@ -87,6 +88,11 @@
           on-close="onDataUsageDialogClose_">
       </nearby-share-data-usage-dialog>
     </template>
+    <template is="dom-if" if="[[showReceiveDialog_]]" restamp>
+      <nearby-share-receive-dialog id="receiveDialog"
+          on-close="onReceiveDialogClose_">
+      </nearby-share-receive-dialog>
+    </template>
   </template>
   <script src="nearby_share_subpage.js"></script>
 </dom-module>

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

@@ -41,6 +41,12 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    /** @private {boolean} */
+    showReceiveDialog_: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   /**
@@ -96,6 +102,14 @@ Polymer({
     this.showDataUsageDialog_ = false;
   },
 
+  /**
+   * @param {!Event} event
+   * @private
+   */
+  onReceiveDialogClose_(event) {
+    this.showReceiveDialog_ = false;
+  },
+
   /**
    * @param {boolean} state boolean state that determines which string to show
    * @param {string} onstr string to show when state is true
@@ -214,9 +228,14 @@ Polymer({
     const router = settings.Router.getInstance();
     if (router.getCurrentRoute().path.endsWith('nearbyshare')) {
       const queryParams = router.getQueryParameters();
+
       if (queryParams.has('deviceName')) {
         this.showDeviceNameDialog_ = true;
       }
+
+      if (queryParams.has('receive')) {
+        this.showReceiveDialog_ = true;
+      }
     }
   },
 });

chrome/browser/resources/settings/chromeos/os_settings.js

@@ -7,6 +7,7 @@ import './localized_link/localized_link.m.js';
 import './bluetooth_page/bluetooth_page.m.js';
 import './bluetooth_page/bluetooth_subpage.m.js';
 import './bluetooth_page/bluetooth_device_list_item.m.js';
+import './nearby_share_page/nearby_share_receive_dialog.m.js';
 import './nearby_share_page/nearby_share_subpage.m.js';
 import './multidevice_page/multidevice_page.m.js';
 import '../prefs/prefs.m.js';

chrome/browser/resources/settings/chromeos/os_settings_resources_v3.grdp

@@ -663,6 +663,11 @@
            use_base_dir="false"
            compress="false"
            type="BINDATA" />
+  <include name="IDR_OS_SETTINGS_NEARBY_SHARE_RECEIVE_DIALOG_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_receive_dialog.m.js"
+           use_base_dir="false"
+           compress="false"
+           type="BINDATA" />
   <include name="IDR_OS_SETTINGS_NEARBY_SHARE_DATA_USAGE_DIALOG_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_data_usage_dialog.m.js"
            use_base_dir="false"

chrome/browser/resources/settings/os_settings_resources.grd

@@ -1328,6 +1328,12 @@
       <structure name="IDR_OS_SETTINGS_NEARBY_SHARE_DEVICE_NAME_DIALOG_JS"
                  file="chromeos/nearby_share_page/nearby_share_device_name_dialog.js"
                  compress="false" type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_NEARBY_SHARE_RECEIVE_DIALOG_HTML"
+                 file="chromeos/nearby_share_page/nearby_share_receive_dialog.html"
+                 compress="false" type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_NEARBY_SHARE_RECEIVE_DIALOG_JS"
+                 file="chromeos/nearby_share_page/nearby_share_receive_dialog.js"
+                 compress="false" type="chrome_html" />
       <structure name="IDR_OS_SETTINGS_NEARBY_SHARE_DATA_USAGE_DIALOG_HTML"
                  file="chromeos/nearby_share_page/nearby_share_data_usage_dialog.html"
                  compress="false" type="chrome_html" />

chrome/test/data/webui/BUILD.gn

@@ -277,6 +277,7 @@ if (include_js_tests) {
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/multidevice_page_tests.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/multidevice_smartlock_subpage_test.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/multidevice_subpage_tests.m.js",
+        "$root_gen_dir/chrome/test/data/webui/settings/chromeos/nearby_share_receive_dialog_tests.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/nearby_share_subpage_tests.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/os_languages_page_tests.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/os_languages_page_v2_tests.m.js",

chrome/test/data/webui/settings/chromeos/BUILD.gn

@@ -47,6 +47,7 @@ js_modulizer("modulize") {
     "multidevice_page_tests.js",
     "multidevice_smartlock_subpage_test.js",
     "multidevice_subpage_tests.js",
+    "nearby_share_receive_dialog_tests.js",
     "nearby_share_subpage_tests.js",
     "os_languages_page_tests.js",
     "os_languages_page_v2_tests.js",

chrome/test/data/webui/settings/chromeos/nearby_share_receive_dialog_tests.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 {assertEquals} from '../../chai_assert.js';
+// #import {isChildVisible, waitAfterNextRender} from '../../test_util.m.js';
+// #import 'chrome://os-settings/chromeos/os_settings.js';
+// #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// clang-format on
+
+suite('NearbyShare', function() {
+  /** @type {?NearbyShareReceiveDialogElement} */
+  let dialog = null;
+
+  setup(function() {
+    PolymerTest.clearBody();
+    dialog = document.createElement('nearby-share-receive-dialog');
+
+    document.body.appendChild(dialog);
+    Polymer.dom.flush();
+  });
+
+  teardown(function() {
+    dialog.remove();
+  });
+
+  /**
+   * @param {string} selector
+   * @return {boolean} Returns true if the element is visible in the shadow dom.
+   */
+  function isVisible(selector) {
+    return test_util.isChildVisible(dialog, selector, false);
+  }
+
+  test('dialog resolves to a polymer element', function() {
+    assertTrue('attached' in dialog);
+  });
+});

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

@@ -116,4 +116,13 @@ suite('NearbyShare', function() {
 
     assertEquals(2, subpage.prefs.nearby_sharing.data_usage.value);
   });
+
+  test('show receive dialog', function() {
+    subpage.showReceiveDialog_ = true;
+    Polymer.dom.flush();
+
+    const dialog = subpage.$$('nearby-share-receive-dialog');
+    assertTrue(!!dialog);
+  });
+
 });

chrome/test/data/webui/settings/chromeos/os_namespace_rewrites.gni

@@ -22,6 +22,7 @@ os_test_namespace_rewrites = os_settings_namespace_rewrites + [
                                "test_util.eventToPromise|eventToPromise",
                                "test_util.fakeDataBind|fakeDataBind",
                                "test_util.flushTasks|flushTasks",
+                               "test_util.isChildVisible|isChildVisible",
                                "test_util.waitAfterNextRender|waitAfterNextRender",
                                "MockInteractions.keyEventOn|keyEventOn",
                                "cups_printer_test_util.createCupsPrinterInfo|createCupsPrinterInfo",

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

@@ -1056,6 +1056,29 @@ TEST_F('OSSettingsMultideviceSubpageTest', 'AllJsTests', () => {
   mocha.run();
 });
 
+// Test fixture for the Nearby Share receive dialog.
+// eslint-disable-next-line no-var
+var OSSettingsNearbyShareReceiveDialogTest =
+    class extends OSSettingsBrowserTest {
+  /** @override */
+  get browsePreload() {
+    return super.browsePreload +
+        'chromeos/nearby_share_page/nearby_share_receive_dialog.html';
+  }
+
+  /** @override */
+  get extraLibraries() {
+    return super.extraLibraries.concat([
+      '../../test_util.js',
+      'nearby_share_receive_dialog_tests.js',
+    ]);
+  }
+};
+
+TEST_F('OSSettingsNearbyShareReceiveDialogTest', 'AllJsTests', () => {
+  mocha.run();
+});
+
 // Test fixture for the Nearby Share settings subpage.
 // eslint-disable-next-line no-var
 var OSSettingsNearbyShareSubPageTest = class extends OSSettingsBrowserTest {

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

@@ -49,6 +49,7 @@ var OSSettingsV3BrowserTest = class extends PolymerTest {
  ['MultideviceSubPage', 'multidevice_subpage_tests.m.js'],
  ['OsLanguagesPage', 'os_languages_page_tests.m.js'],
  ['OsLanguagesPageV2', 'os_languages_page_v2_tests.m.js'],
+ ['NearbyShareReceiveDialog', 'nearby_share_receive_dialog_tests.m.js'],
  ['NearbyShareSubPage', 'nearby_share_subpage_tests.m.js'],
  ['ParentalControlsPage', 'parental_controls_page_test.m.js'],
  ['PeoplePage', 'os_people_page_test.m.js'],