[Nearby] Add visibility on-boarding page stub

The visibility page is just stubbed in place without the center content.
A shared component will be added to implement the visibility selection
in a future CL. The link used for "Managed Contacts" is also temporary.
Specs, strings, accessibility handled in a follow-up CL.

The "Confirm" button will however actually enable Nearby Sharing.

Screenshot: https://screenshot.googleplex.com/xOasYwc8hSq
Change-Id: I68ab57e10611045270d261deae1dd66f3e3969f9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2340681
Commit-Queue: James Vecore <vecore@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#796060}

chrome/browser/resources/nearby_share/BUILD.gn

@@ -30,6 +30,7 @@ js_library("app") {
     ":nearby_discovery_page",
     "./shared:nearby_onboarding_page.m",
     "./shared:nearby_share_settings_behavior.m",
+    "./shared:nearby_visibility_page.m",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_view_manager:cr_view_manager.m",
   ]

chrome/browser/resources/nearby_share/app.html

@@ -12,4 +12,7 @@
   <nearby-onboarding-page id="[[Page.ONBOARDING]]" settings="{{settings}}"
       slot="view">
   </nearby-onboarding-page>
+  <nearby-visibility-page id="[[Page.VISIBILITY]]" settings="{{settings}}"
+      slot="view">
+  </nearby-visibility-page>
 </cr-view-manager>

chrome/browser/resources/nearby_share/app.js

@@ -10,6 +10,7 @@
 
 import 'chrome://resources/cr_elements/cr_view_manager/cr_view_manager.m.js';
 import './shared/nearby_onboarding_page.m.js';
+import './shared/nearby_visibility_page.m.js';
 import './nearby_confirmation_page.js';
 import './nearby_discovery_page.js';
 
@@ -21,6 +22,7 @@ const Page = {
   CONFIRMATION: 'confirmation',
   DISCOVERY: 'discovery',
   ONBOARDING: 'onboarding',
+  VISIBILITY: 'visibility',
 };
 
 Polymer({

chrome/browser/resources/nearby_share/nearby_share_dialog_resources.grd

@@ -42,6 +42,10 @@
                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_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"
@@ -73,6 +77,7 @@
                file="${root_gen_dir}/chrome/browser/resources/nearby_share/nearby_progress.js"
                use_base_dir="false" type="BINDATA"/>
 
+      <!-- Generated Polymer 2 to 3 elements -->
       <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"/>
@@ -82,6 +87,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_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"/>
     </includes>
   </release>
 </grit>

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

@@ -11,7 +11,14 @@ js_type_check("closure_compile") {
     ":nearby_onboarding_page",
     ":nearby_share_settings",
     ":nearby_share_settings_behavior",
+    ":nearby_visibility_page",
   ]
+  closure_flags =
+      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_onboarding_page") {
@@ -35,6 +42,10 @@ js_library("nearby_share_settings_behavior") {
   ]
 }
 
+js_library("nearby_visibility_page") {
+  deps = [ ":nearby_share_settings_behavior" ]
+}
+
 js_type_check("closure_compile_module") {
   is_polymer3 = true
   closure_flags =
@@ -47,6 +58,7 @@ js_type_check("closure_compile_module") {
     ":nearby_onboarding_page.m",
     ":nearby_share_settings.m",
     ":nearby_share_settings_behavior.m",
+    ":nearby_visibility_page.m",
   ]
 }
 
@@ -54,6 +66,7 @@ group("polymer3_elements") {
   public_deps = [
     ":modulize",
     ":nearby_onboarding_page_module",
+    ":nearby_visibility_page_module",
     "//chrome/browser/ui/webui/nearby_share/public/mojom:mojom_js",
   ]
 }
@@ -86,11 +99,38 @@ js_library("nearby_share_settings.m") {
   extra_deps = [ ":modulize" ]
 }
 
+js_library("nearby_visibility_page.m") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/nearby_share/shared/nearby_visibility_page.m.js" ]
+  deps = [
+    ":nearby_share_settings_behavior.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":nearby_visibility_page_module" ]
+}
+
+nearby_shared_auto_imports = [ "chrome/browser/resources/nearby_share/shared/nearby_share_settings_behavior.html|NearbyShareSettingsBehavior,NearbySettings" ]
+nearby_shared_namespace_rewrites = [
+  "nearby_share.NearbySettings|NearbySettings",
+  "nearby_share.NearbyShareSettingsBehavior|NearbyShareSettingsBehavior",
+  "nearby_share.getNearbyShareSettings|getNearbyShareSettings",
+  "nearby_share.observeNearbyShareSettings|observeNearbyShareSettings",
+  "nearby_share.setNearbyShareSettingsForTesting|setNearbyShareSettingsForTesting",
+]
+
 polymer_modulizer("nearby_onboarding_page") {
   js_file = "nearby_onboarding_page.js"
   html_file = "nearby_onboarding_page.html"
   html_type = "dom-module"
-  auto_imports = [ "chrome/browser/resources/nearby_share/shared/nearby_share_settings_behavior.html|NearbyShareSettingsBehavior" ]
+  auto_imports = nearby_shared_auto_imports
+  namespace_rewrites = nearby_shared_namespace_rewrites
+}
+
+polymer_modulizer("nearby_visibility_page") {
+  js_file = "nearby_visibility_page.js"
+  html_file = "nearby_visibility_page.html"
+  html_type = "dom-module"
+  auto_imports = nearby_shared_auto_imports
+  namespace_rewrites = nearby_shared_namespace_rewrites
 }
 
 js_modulizer("modulize") {
@@ -98,10 +138,5 @@ js_modulizer("modulize") {
     "nearby_share_settings.js",
     "nearby_share_settings_behavior.js",
   ]
-  namespace_rewrites = [
-    "nearby_share.NearbyShareSettingsBehavior|NearbyShareSettingsBehavior",
-    "nearby_share.getNearbyShareSettings|getNearbyShareSettings",
-    "nearby_share.observeNearbyShareSettings|observeNearbyShareSettings",
-    "nearby_share.setNearbyShareSettingsForTesting|setNearbyShareSettingsForTesting",
-  ]
+  namespace_rewrites = nearby_shared_namespace_rewrites
 }

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

@@ -2,6 +2,7 @@
 <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="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
+<link rel="import" href="./nearby_share_settings_behavior.html">
 
 <dom-module id="nearby-onboarding-page">
   <template>

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

@@ -11,19 +11,18 @@ Polymer({
   is: 'nearby-onboarding-page',
 
   properties: {
-    /** @type {Object} */
+    /** @type {?nearby_share.NearbySettings} */
     settings: {
       type: Object,
     }
   },
 
   onNextTap_() {
-    // TODO(vecore): switch to contacts page once it is added.
-    this.fire('change-page', {page: 'discovery'});
+    this.fire('change-page', {page: 'visibility'});
   },
 
   onCloseTap_() {
-    this.fire('close', {});
+    this.fire('close');
   },
 
   onDeviceNameTap_() {

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

@@ -145,5 +145,6 @@ cr.define('nearby_share', function() {
   // #cr_define_end
   return {
     NearbyShareSettingsBehavior,
+    NearbySettings,
   };
 });

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">
+
+<dom-module id="nearby-visibility-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;
+        flex-grow: 1;
+        justify-content: center;
+        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">Device Visibility</h1>
+        <h4 id="page-sub-title">
+          Select who you want this device to be visible to
+        </h4>
+      </div>
+
+      <div id=center-content>
+        <!-- TODO(vecore): add scroll host and visibility component -->
+      </div>
+
+      <div id="actions">
+        <cr-button id="manage-contacts-button" on-click="onManageContactsTap_">
+          Manage Contacts
+        </cr-button>
+        <cr-button id="cancel-button" class="cancel-button"
+            on-click="onCloseTap_">
+          Cancel
+        </cr-button>
+        <cr-button id="next-button" class="action-button" on-click="onNextTap_">
+          Confirm
+        </cr-button>
+      </div>
+    </div>
+  </template>
+  <script src="nearby_visibility_page.js"></script>
+</dom-module>

chrome/browser/resources/nearby_share/shared/nearby_visibility_page.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-visibility-page' component is part of the Nearby
+ * Share onboarding flow. It allows users to setup their visibility preference
+ * while enabling the feature for the first time.
+ *
+ * It is embedded in chrome://os-settings, chrome://settings and as a standalone
+ * dialog via chrome://nearby.
+ */
+Polymer({
+  is: 'nearby-visibility-page',
+
+  properties: {
+    /** @type {?nearby_share.NearbySettings} */
+    settings: {
+      type: Object,
+    }
+  },
+
+  onNextTap_() {
+    this.set('settings.enabled', true);
+    this.fire('change-page', {page: 'discovery'});
+  },
+
+  onCloseTap_() {
+    this.fire('close');
+  },
+
+  onManageContactsTap_() {
+    // TODO(vecore): this is not a final link
+    window.open('https://contacts.google.com');
+  },
+
+});

chrome/test/data/webui/BUILD.gn

@@ -215,6 +215,7 @@ if (include_js_tests) {
       "$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_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",
       "$root_gen_dir/chrome/test/data/webui/settings/fake_input_method_private.m.js",
       "$root_gen_dir/chrome/test/data/webui/settings/fake_language_settings_private.m.js",

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

@@ -10,6 +10,7 @@ js_modulizer("modulize") {
   input_files = [
     "fake_nearby_share_settings.js",
     "nearby_onboarding_page_test.js",
+    "nearby_visibility_page_test.js",
   ]
   namespace_rewrites = test_namespace_rewrites + [
                          "nearby_share.setNearbyShareSettingsForTesting|setNearbyShareSettingsForTesting",
@@ -27,6 +28,7 @@ js_type_check("closure_compile") {
   deps = [
     ":fake_nearby_share_settings.m",
     ":nearby_onboarding_page_test.m",
+    ":nearby_visibility_page_test.m",
   ]
 }
 
@@ -48,3 +50,14 @@ js_library("fake_nearby_share_settings.m") {
   ]
   extra_deps = [ ":modulize" ]
 }
+
+js_library("nearby_visibility_page_test.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/nearby_visibility_page_test.m.js" ]
+  deps = [
+    ":fake_nearby_share_settings.m",
+    "../..:chai_assert",
+    "//chrome/browser/resources/nearby_share/shared:nearby_visibility_page.m",
+  ]
+  extra_deps = [ ":modulize" ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+}

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

@@ -23,6 +23,9 @@ suite('nearby-onboarding-page', function() {
     element.settings = {
       enabled: false,
       deviceName: deviceName,
+      dataUsage: 1,
+      visibility: 1,
+      allowedContacts: [],
     };
     document.body.appendChild(element);
   });

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

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

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

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

chrome/test/data/webui/nearby_share/shared/nearby_visibility_page_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_visibility_page.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';
+// clang-format on
+
+suite('nearby-visibility-page', function() {
+  /** @type {!NearbyVisibilityPageElement} */
+  let visibility_page;
+
+  setup(function() {
+    document.body.innerHTML = '';
+
+    visibility_page = /** @type {!NearbyVisibilityPageElement} */ (
+        document.createElement('nearby-visibility-page'));
+    visibility_page.settings = {
+      enabled: false,
+      deviceName: 'deviceName',
+      dataUsage: 1,
+      visibility: 1,
+      allowedContacts: [],
+    };
+    document.body.appendChild(visibility_page);
+  });
+
+  test('Renders visibility page', async function() {
+    assertFalse(visibility_page.settings.enabled);
+    // Next button sets settings.enabled to true
+    visibility_page.$$('#next-button').click();
+    assertTrue(visibility_page.settings.enabled);
+  });
+});