[Nearby] Add page template

Adds a shared component to be used for all pages hosted in the receive
dialog. This template just provides a common title, subTitle and
utility/cancel/action buttons. The buttons fire events for the
container element to receive. Final styling, a11y support will come
in a follow up CL.

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

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

@@ -11,6 +11,7 @@ js_type_check("closure_compile") {
   deps = [
     ":nearby_contact_visibility",
     ":nearby_onboarding_page",
+    ":nearby_page_template",
     ":nearby_share_settings",
     ":nearby_share_settings_behavior",
     ":nearby_visibility_page",
@@ -33,6 +34,9 @@ js_library("nearby_contact_visibility") {
   ]
 }
 
+js_library("nearby_page_template") {
+}
+
 js_library("nearby_onboarding_page") {
   deps = [
     ":nearby_share_settings_behavior",
@@ -75,6 +79,7 @@ js_type_check("closure_compile_module") {
   deps = [
     ":nearby_contact_visibility.m",
     ":nearby_onboarding_page.m",
+    ":nearby_page_template.m",
     ":nearby_share_settings.m",
     ":nearby_share_settings_behavior.m",
     ":nearby_visibility_page.m",
@@ -86,6 +91,7 @@ group("polymer3_elements") {
     ":modulize",
     ":nearby_contact_visibility_module",
     ":nearby_onboarding_page_module",
+    ":nearby_page_template_module",
     ":nearby_shared_icons_module",
     ":nearby_visibility_page_module",
     "//chrome/browser/ui/webui/nearby_share/public/mojom:mojom_js",
@@ -116,6 +122,11 @@ js_library("nearby_onboarding_page.m") {
   extra_deps = [ ":nearby_onboarding_page_module" ]
 }
 
+js_library("nearby_page_template.m") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/nearby_share/shared/nearby_page_template.m.js" ]
+  extra_deps = [ ":nearby_page_template_module" ]
+}
+
 js_library("nearby_share_settings_behavior.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/nearby_share/shared/nearby_share_settings_behavior.m.js" ]
   deps = [
@@ -161,6 +172,14 @@ polymer_modulizer("nearby_onboarding_page") {
   namespace_rewrites = nearby_shared_namespace_rewrites
 }
 
+polymer_modulizer("nearby_page_template") {
+  js_file = "nearby_page_template.js"
+  html_file = "nearby_page_template.html"
+  html_type = "dom-module"
+  auto_imports = nearby_shared_auto_imports
+  namespace_rewrites = nearby_shared_namespace_rewrites
+}
+
 polymer_modulizer("nearby_shared_icons") {
   js_file = "nearby_shared_icons.m.js"
   html_file = "nearby_shared_icons.html"

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
+
+<dom-module id="nearby-page-template">
+  <template>
+    <style include="cr-icons cr-shared-style"></style>
+    <style>
+      :host {
+        --nearby-page-space-block: 24px;
+        --nearby-page-space-inline: 24px;
+      }
+
+      #pageContainer {
+        display: flex;
+        flex-direction: column;
+        height: 385px;
+        padding-block-end: var(--nearby-page-space-block);
+        padding-block-start: var(--nearby-page-space-block);
+      }
+
+      #header {
+        margin-inline-end:  var(--nearby-page-space-inline);
+        margin-inline-start: var(--nearby-page-space-inline);
+      }
+
+      #contentContainer {
+        box-sizing: border-box;
+        display: flex;
+        flex-grow: 1;
+        justify-content: center;
+        overflow: hidden;
+      }
+
+      #pageTitle {
+        font-size: 1.1em;
+        font-weight: bold;
+      }
+
+      #actions {
+        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 {
+        margin-inline-end: auto;
+      }
+    </style>
+    <div id="pageContainer">
+      <div id="header">
+        <div id="pageTitle">[[title]]</div>
+        <div id="pageSubTitle">[[subTitle]]</div>
+      </div>
+
+      <div id="contentContainer">
+        <slot name="content"></slot>
+      </div>
+
+      <div id="actions">
+        <template is="dom-if" if="[[utilityButtonLabel]]">
+          <cr-button id="utilityButton" class="cancel-button"
+              on-click="onUtilityClick_">
+            [[utilityButtonLabel]]
+          </cr-button>
+        </template>
+        <template is="dom-if" if="[[cancelButtonLabel]]">
+          <cr-button id="cancelButton" class="cancel-button"
+              on-click="onCancelClick_">
+            [[cancelButtonLabel]]
+          </cr-button>
+        </template>
+        <template is="dom-if" if="[[actionButtonLabel]]">
+          <cr-button id="actionButton" class="action-button"
+              on-click="onActionClick_">
+            [[actionButtonLabel]]
+          </cr-button>
+        </template>
+      </div>
+    </div>
+  </template>
+  <script src="nearby_page_template.js"></script>
+</dom-module>

chrome/browser/resources/nearby_share/shared/nearby_page_template.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-page-template is used as a template for pages. It
+ * provide a consistent setup for all pages with title, sub-title, body slot
+ * and button options.
+ */
+Polymer({
+  is: 'nearby-page-template',
+
+  properties: {
+    /** @type {?string} */
+    title: {
+      type: String,
+    },
+
+    /** @type {?string} */
+    subTitle: {
+      type: String,
+    },
+
+    /** @type {?string} */
+    actionButtonLabel: {
+      type: String,
+    },
+
+    /** @type {string} */
+    actionButtonEventName: {
+      type: String,
+      value: 'action'
+    },
+
+    /** @type {?string} */
+    cancelButtonLabel: {
+      type: String,
+    },
+
+    /** @type {string} */
+    cancelButtonEventName: {
+      type: String,
+      value: 'cancel',
+    },
+
+    /** @type {?string} */
+    utilityButtonLabel: {
+      type: String,
+    },
+
+    /** @type {string} */
+    utilityButtonEventName: {
+      type: String,
+      value: 'utility',
+    }
+  },
+
+  /** @private */
+  onActionClick_() {
+    this.fire(this.actionButtonEventName);
+  },
+
+  /** @private */
+  onCancelClick_() {
+    this.fire(this.cancelButtonEventName);
+  },
+
+  /** @private */
+  onUtilityClick_() {
+    this.fire(this.utilityButtonEventName);
+  },
+});

chrome/browser/resources/nearby_share/shared/nearby_shared_resources.grd

@@ -21,6 +21,10 @@
                file="nearby_onboarding_page.html" type="BINDATA" compress="false"/>
       <include name="IDR_NEARBY_ONBOARDING_PAGE_JS"
                file="nearby_onboarding_page.js" type="BINDATA" compress="false"/>
+      <include name="IDR_NEARBY_PAGE_TEMPLATE_HTML"
+               file="nearby_page_template.html" type="BINDATA" compress="false"/>
+      <include name="IDR_NEARBY_PAGE_TEMPLATE_JS"
+               file="nearby_page_template.js" type="BINDATA" compress="false"/>
       <include name="IDR_NEARBY_SHARE_SETTINGS_HTML"
                file="nearby_share_settings.html" type="BINDATA" compress="false"/>
       <include name="IDR_NEARBY_SHARE_SETTINGS_JS"

chrome/browser/resources/nearby_share/shared/nearby_shared_resources_v3.grd

@@ -19,6 +19,9 @@
       <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" compress="false"/>
+      <include name="IDR_NEARBY_PAGE_TEMPLATE_M_JS"
+               file="${root_gen_dir}/chrome/browser/resources/nearby_share/shared/nearby_page_template.m.js"
+               use_base_dir="false" type="BINDATA" compress="false"/>
       <include name="IDR_NEARBY_SHARE_SETTINGS_M_JS"
                file="${root_gen_dir}/chrome/browser/resources/nearby_share/shared/nearby_share_settings.m.js"
                use_base_dir="false" type="BINDATA" compress="false"/>

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

@@ -3,6 +3,11 @@
 <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">
+<link rel="import" href="../../shared/nearby_page_template.html">
+<!-- NOTE: The above import is just so this file gets included in the bundle
+           for testing purposes. It will be removed when the actual pages are
+           added in a follow up CL.
+-->
 
 <dom-module id="nearby-share-receive-dialog">
   <template>

chrome/test/data/webui/BUILD.gn

@@ -219,6 +219,7 @@ if (include_js_tests) {
       "$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_page_template_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",

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

@@ -11,6 +11,7 @@ js_modulizer("modulize") {
     "fake_nearby_share_settings.js",
     "nearby_contact_visibility_test.js",
     "nearby_onboarding_page_test.js",
+    "nearby_page_template_test.js",
     "nearby_visibility_page_test.js",
   ]
   namespace_rewrites = test_namespace_rewrites + [
@@ -30,6 +31,7 @@ js_type_check("closure_compile") {
     ":fake_nearby_share_settings.m",
     ":nearby_contact_visibility_test.m",
     ":nearby_onboarding_page_test.m",
+    ":nearby_page_template_test.m",
     ":nearby_visibility_page_test.m",
   ]
 }
@@ -57,6 +59,17 @@ js_library("nearby_onboarding_page_test.m") {
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }
 
+js_library("nearby_page_template_test.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/nearby_page_template_test.m.js" ]
+  deps = [
+    "../..:chai_assert",
+    "../..:test_util.m",
+    "//chrome/browser/resources/nearby_share/shared:nearby_page_template.m",
+  ]
+  extra_deps = [ ":modulize" ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+}
+
 js_library("fake_nearby_share_settings.m") {
   sources = [ "$root_gen_dir/chrome/test/data/webui/nearby_share/shared/fake_nearby_share_settings.m.js" ]
   deps = [

chrome/test/data/webui/nearby_share/shared/nearby_page_template_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://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
+// #import 'chrome://nearby/shared/nearby_page_template.m.js';
+// #import {waitAfterNextRender, isChildVisible} from '../../test_util.m.js';
+// #import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
+// clang-format on
+
+suite('nearby-page-template', function() {
+  /** @type {!NearbyPageTemplateElement} */
+  let element;
+
+  setup(function() {
+    document.body.innerHTML = '';
+
+    element = /** @type {!NearbyPageTemplateElement} */ (
+        document.createElement('nearby-page-template'));
+
+    document.body.appendChild(element);
+  });
+
+  /**
+   * @param {string} selector
+   * @return {boolean} Returns true if the element is visible in the shadow dom.
+   */
+  function isVisible(selector) {
+    return test_util.isChildVisible(element, selector, false);
+  }
+
+  test('No buttons shown by default', async function() {
+    assertEquals('', element.$$('#pageTitle').innerHTML.trim());
+    assertEquals('', element.$$('#pageSubTitle').innerHTML.trim());
+    assertFalse(isVisible('#utilityButton'));
+    assertFalse(isVisible('#actionButton'));
+    assertFalse(isVisible('#cancelButton'));
+  });
+
+  test('Everything on', async function() {
+    element.title = 'title';
+    element.subTitle = 'subTitle';
+    element.utilityButtonLabel = 'utility';
+    element.cancelButtonLabel = 'cancel';
+    element.actionButtonLabel = 'action';
+
+    await test_util.waitAfterNextRender(element);
+
+    assertEquals('title', element.$$('#pageTitle').innerHTML.trim());
+    assertEquals('subTitle', element.$$('#pageSubTitle').innerHTML.trim());
+    assertTrue(isVisible('#utilityButton'));
+    assertTrue(isVisible('#actionButton'));
+    assertTrue(isVisible('#cancelButton'));
+
+    /** @type {boolean} */
+    let utilityTriggered = false;
+    element.addEventListener(
+        element.utilityButtonEventName, () => utilityTriggered = true);
+    element.$$('#utilityButton').click();
+    assertTrue(utilityTriggered);
+
+    /** @type {boolean} */
+    let cancelTriggered = false;
+    element.addEventListener(
+        element.cancelButtonEventName, () => cancelTriggered = true);
+    element.$$('#cancelButton').click();
+    assertTrue(cancelTriggered);
+
+    /** @type {boolean} */
+    let actionTrigger = false;
+    element.addEventListener(
+        element.actionButtonEventName, () => actionTrigger = true);
+    element.$$('#actionButton').click();
+    assertTrue(actionTrigger);
+  });
+});

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

@@ -76,6 +76,25 @@ var NearbyVisibilityPageTest = class extends NearbySharedBrowserTest {
 
 TEST_F('NearbyVisibilityPageTest', 'All', () => mocha.run());
 
+/**
+ * @extends {NearbySharedBrowserTest}
+ */
+var NearbyPageTemplateTest = class extends NearbySharedBrowserTest {
+  /** @override */
+  get browsePreload() {
+    return super.browsePreload + 'shared/nearby_page_template.html';
+  }
+
+  /** @override */
+  get extraLibraries() {
+    return super.extraLibraries.concat([
+      'nearby_page_template_test.js',
+    ]);
+  }
+};
+
+TEST_F('NearbyPageTemplateTest', 'All', () => mocha.run());
+
 /**
  * @extends {NearbySharedBrowserTest}
  */

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

@@ -40,6 +40,7 @@ const NearbySharedV3Test = class extends PolymerTest {
 };
 
 [['OnboardingPage', 'nearby_onboarding_page_test.m.js'],
+ ['PageTemplate', 'nearby_page_template_test.m.js'],
  ['VisibilityPage', 'nearby_visibility_page_test.m.js'],
  ['ContactVisibility', 'nearby_contact_visibility_test.m.js'],
 ].forEach(test => registerTest(...test));