[Nearby] Enable Polymer3 support in Nearby Share Settings

This CL adds and verifies Polymer3 support in the Nearby Share
subpage. A browser test is used to verify the Polymer3 setup is
working correctly. The test suites added are:
OSSettingsNearbyShareSubPageTest.* and
OSSettingsNearbyShareSubPageV3Test.*

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

chrome/browser/resources/settings/BUILD.gn

@@ -149,6 +149,7 @@ group("closure_compile_module") {
     "controls:closure_compile_module",
     "downloads_page:closure_compile_module",
     "languages_page:closure_compile_module",
+    "nearby_share_page:closure_compile_module",
     "on_startup_page:closure_compile_module",
     "people_page:closure_compile_module",
     "prefs:closure_compile_module",

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

@@ -344,9 +344,12 @@ group("polymer3_elements") {
     ":os_icons_module",
     ":os_page_visibility_module",
     ":os_settings_icons_css_module",
+
+    # Shared with browser settings
     "..:modulize",
     "..:settings_shared_css_module",
     "..:settings_vars_css_module",
+    "../nearby_share_page:polymer3_elements",
     "../prefs:modulize",
     "../prefs:prefs_module",
     "../settings_page:settings_animated_pages_module",

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

@@ -8,6 +8,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_subpage.m.js';
 
 export {LifetimeBrowserProxy, LifetimeBrowserProxyImpl} from '../lifetime_browser_proxy.m.js';
 export {bluetoothApis} from './bluetooth_page/bluetooth_page.m.js';

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

@@ -65,6 +65,21 @@
            use_base_dir="false"
            compress="false"
            type="BINDATA"/>
+  <include name="IDR_OS_SETTINGS_SETTINGS_TOGGLE_BUTTON_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/controls/settings_toggle_button.m.js"
+           use_base_dir="false"
+           compress="false"
+           type="BINDATA" />
+  <include name="IDR_OS_SETTINGS_SETTINGS_BOOLEAN_CONTROL_BEHAVIOR_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/controls/settings_boolean_control_behavior.m.js"
+           use_base_dir="false"
+           compress="false"
+           type="BINDATA" />
+  <include name="IDR_OS_SETTINGS_PREF_CONTROL_BEHAVIOR_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/controls/pref_control_behavior.m.js"
+           use_base_dir="false"
+           compress="false"
+           type="BINDATA" />
   <include name="IDR_OS_SETTINGS_LIFETIME_BROWSER_PROXY_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/lifetime_browser_proxy.m.js"
            use_base_dir="false"
@@ -75,16 +90,21 @@
            use_base_dir="false"
            compress="false"
            type="BINDATA"/>
+  <include name="IDR_OS_SETTINGS_PREFS_BEHAVIOR_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/prefs/prefs_behavior.m.js"
+           use_base_dir="false"
+           compress="false"
+           type="BINDATA"/>
   <include name="IDR_OS_SETTINGS_PREFS_TYPES_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/prefs/prefs_types.m.js"
            use_base_dir="false"
            compress="false"
            type="BINDATA"/>
-  <include name="IDR_OS_SETTINGS_PREFS_BEHAVIOR_M_JS"
-           file="${root_gen_dir}/chrome/browser/resources/settings/prefs/prefs_behavior.m.js"
+  <include name="IDR_OS_SETTINGS_NEARBY_SHARE_SUBPAGE_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/nearby_share_page/nearby_share_subpage.m.js"
            use_base_dir="false"
            compress="false"
-           type="BINDATA"/>
+           type="BINDATA" />
   <include name="IDR_OS_SETTINGS_ROUTER_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/router.m.js"
            use_base_dir="false"
@@ -113,4 +133,4 @@
            file="chromeos/os_settings.js"
            compress="false"
            type="BINDATA" />
-</grit-part>
\ No newline at end of file
+</grit-part>

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

@@ -20,11 +20,18 @@ js_library("nearby_share_subpage") {
   ]
 }
 
-# TODO: Uncomment as the Polymer3 migration makes progress.
-#js_type_check("closure_compile_module") {
-#  is_polymer3 = true
-#  deps = [ ":nearby_share_subpage.m" ]
-#}
+group("polymer3_elements") {
+  public_deps = [
+    "../controls:polymer3_elements",
+    "../prefs:polymer3_elements",
+    ":nearby_share_subpage_module",
+  ]
+}
+
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [ ":nearby_share_subpage.m" ]
+}
 
 js_library("nearby_share_subpage.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/nearby_share_page/nearby_share_subpage.m.js" ]
@@ -42,4 +49,6 @@ polymer_modulizer("nearby_share_subpage") {
   js_file = "nearby_share_subpage.js"
   html_file = "nearby_share_subpage.html"
   html_type = "dom-module"
+  namespace_rewrites = settings_namespace_rewrites
+  auto_imports = settings_auto_imports
 }

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

@@ -4,20 +4,21 @@
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
-<link rel="import" href="../i18n_setup.html">
+<link rel="import" href="../prefs/prefs.html">
+<link rel="import" href="../prefs/prefs_behavior.html">
 <link rel="import" href="../settings_shared_css.html">
 
 <dom-module id="settings-nearby-share-subpage">
   <template>
     <style include="cr-shared-style settings-shared iron-flex">
     </style>
-    <div class="cr-row first" on-click="onEnableTap_" actionable>
+    <div id="toggleRow" class="cr-row first" on-click="onEnableTap_" actionable>
       <div id="onOff" class="flex cr-padded-text"
           on$="[[prefs.nearby_sharing.enabled.value]]" aria-hidden="true">
         [[getOnOffString_(prefs.nearby_sharing.enabled.value,
             '$i18nPolymer{deviceOn}', '$i18nPolymer{deviceOff}')]]
       </div>
-      <settings-toggle-button aria-describedby="onOff"
+      <settings-toggle-button id="featureToggleButton" aria-describedby="onOff"
           pref="{{prefs.nearby_sharing.enabled}}">
       </settings-toggle-button>
     </div>

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

@@ -2,10 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// clang-format off
-// #import {PrefsBehavior} from '../prefs/prefs_behavior.m.js';
-// clang-format on
-
 /**
  * @fileoverview
  * 'settings-nearby-share-subpage' is the settings subpage for managing the

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

@@ -37,6 +37,7 @@ js_modulizer("modulize") {
     "fake_settings_search_handler.js",
     "fake_user_action_recorder.js",
     "localized_link_test.js",
+    "nearby_share_subpage_tests.js",
     "os_reset_page_test.js",
     "test_os_reset_browser_proxy.js",
     "test_os_lifetime_browser_proxy.js",

chrome/test/data/webui/settings/chromeos/nearby_share_subpage_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 {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import 'chrome://os-settings/chromeos/os_settings.js';
+// clang-format on
+
+suite('NearbyShare', function() {
+  /** @type {?SettingsNearbyShareSubpage} */
+  let subpage = null;
+  /** @type {?HTMLElement} */
+  let onOffText = null;
+  /** @type {?SettingsToggleButtonElement} */
+  let featureToggleButton = null;
+  /** @type {?HTMLElement} */
+  let toggleRow = null;
+
+  setup(function() {
+    PolymerTest.clearBody();
+    subpage = document.createElement('settings-nearby-share-subpage');
+    subpage.prefs = {
+      'nearby_sharing': {
+        'enabled': {
+          value: true,
+        }
+      }
+    };
+
+    document.body.appendChild(subpage);
+    Polymer.dom.flush();
+
+    onOffText = subpage.$$('#onOff');
+    featureToggleButton = subpage.$$('#featureToggleButton');
+    toggleRow = subpage.$$('#toggleRow');
+  });
+
+  teardown(function() {
+    subpage.remove();
+  });
+
+  test('feature toggle button controls preference', function() {
+    assertEquals(true, featureToggleButton.checked);
+    assertEquals(true, subpage.prefs.nearby_sharing.enabled.value);
+    assertEquals('On', onOffText.textContent.trim());
+
+    featureToggleButton.click();
+
+    assertEquals(false, featureToggleButton.checked);
+    assertEquals(false, subpage.prefs.nearby_sharing.enabled.value);
+    assertEquals('Off', onOffText.textContent.trim());
+  });
+
+  test('toggle row controls preference', function() {
+    assertEquals(true, featureToggleButton.checked);
+    assertEquals(true, subpage.prefs.nearby_sharing.enabled.value);
+    assertEquals('On', onOffText.textContent.trim());
+
+    toggleRow.click();
+
+    assertEquals(false, featureToggleButton.checked);
+    assertEquals(false, subpage.prefs.nearby_sharing.enabled.value);
+    assertEquals('Off', onOffText.textContent.trim());
+  });
+});

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

@@ -938,6 +938,26 @@ TEST_F('OSSettingsMultideviceSubpageTest', 'AllJsTests', () => {
   mocha.run();
 });
 
+// Test fixture for the Nearby Share settings subpage.
+// eslint-disable-next-line no-var
+var OSSettingsNearbyShareSubPageTest = class extends OSSettingsBrowserTest {
+  /** @override */
+  get browsePreload() {
+    return super.browsePreload + 'nearby_share_page/nearby_share_subpage.html';
+  }
+
+  /** @override */
+  get extraLibraries() {
+    return super.extraLibraries.concat([
+      'nearby_share_subpage_tests.js',
+    ]);
+  }
+};
+
+TEST_F('OSSettingsNearbyShareSubPageTest', 'AllJsTests', () => {
+  mocha.run();
+});
+
 // eslint-disable-next-line no-var
 var OSSettingsPeoplePageAccountManagerTest =
     class extends OSSettingsBrowserTest {

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

@@ -39,6 +39,7 @@ var OSSettingsV3BrowserTest = class extends PolymerTest {
  ['LocalizedLink', 'localized_link_test.m.js'],
  // Disabled - very flaky (crbug.com/1097021)
  // ['BluetoothPage', 'bluetooth_page_tests.m.js'],
+ ['NearbyShareSubPage', 'nearby_share_subpage_tests.m.js'],
 ].forEach(test => registerTest(...test));
 
 function registerTest(testName, module, caseName) {