[Nearby] Setup button on settings row.

When Nearby Share is not yet set up, we'll show a "Set Up" button on the
settings row instead of the toggle.

Screenshot:
  https://screenshot.googleplex.com/4WXi2TR865p4jbm.png

Fixed: 1154767
Change-Id: I919aad75bcea98963ca75b21fbaf938a7e132dd9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2573856
Commit-Queue: Michael Hansen <hansenmichael@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#833972}

chrome/app/shared_settings_strings.grdp

@@ -96,6 +96,9 @@
   <message name="IDS_SETTINGS_NEARBY_SHARE_TITLE" desc="Name of the settings page for the Nearby Share feature">
     Nearby Share
   </message>
+  <message name="IDS_SETTINGS_NEARBY_SHARE_SET_UP_BUTTON_TITLE" desc="Title of the button that lets the user set up and enable the Nearby Share feature for the first time.">
+    Set up
+  </message>
   <message name="IDS_SETTINGS_NEARBY_SHARE_DEVICE_NAME_ROW_TITLE" desc="Text for the row in settings which allows a user to set the name of their device which is shown to other devices for the Nearby Share feature.">
     Device name
   </message>

chrome/app/shared_settings_strings_grdp/IDS_SETTINGS_NEARBY_SHARE_SET_UP_BUTTON_TITLE.png.sha1

+40934fa308097a8225f37a26ff7b8bfb0efb2ac2
\ No newline at end of file

chrome/browser/resources/settings/chromeos/multidevice_page/multidevice_page.html

@@ -34,6 +34,10 @@
       cr-policy-indicator {
         padding: 0 var(--cr-controlled-by-spacing);
       }
+
+      #nearbySetUp {
+        margin: 0 16px;
+      }
     </style>
     <settings-animated-pages id="pages" section="multidevice"
         focus-config="[[focusConfig_]]">
@@ -133,10 +137,21 @@
               </template>
             </div>
             <div class="separator"></div>
-            <settings-toggle-button id="nearbySharingToggleButton"
-                pref="{{prefs.nearby_sharing.enabled}}"
-                deep-link-focus-id$="[[Setting.kNearbyShareOnOff]]">
-            </settings-toggle-button>
+            <template is="dom-if"
+                if="[[prefs.nearby_sharing.onboarding_complete.value]]"
+                restamp>
+              <settings-toggle-button id="nearbySharingToggleButton"
+                  pref="{{prefs.nearby_sharing.enabled}}"
+                  deep-link-focus-id$="[[Setting.kNearbyShareOnOff]]">
+              </settings-toggle-button>
+            </template>
+            <template is="dom-if"
+                if="[[!prefs.nearby_sharing.onboarding_complete.value]]"
+                restamp>
+              <cr-button id="nearbySetUp" on-click="handleNearbySetUpClick_">
+                $i18n{nearbyShareSetUpButtonTitle}
+              </cr-button>
+            </template>
           </div>
         </template>
       </div>

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

@@ -511,4 +511,12 @@ Polymer({
   onHideNotificationSetupAccessDialog_() {
     this.showNotificationAccessSetupDialog_ = false;
   },
+
+  /** @private */
+  handleNearbySetUpClick_() {
+    const params = new URLSearchParams();
+    params.set('onboarding', '');
+    settings.Router.getInstance().navigateTo(
+        settings.routes.NEARBY_SHARE, params);
+  },
 });

chrome/browser/ui/webui/settings/shared_settings_localized_strings_provider.cc

@@ -244,6 +244,8 @@ void AddSyncPageStrings(content::WebUIDataSource* html_source) {
 void AddNearbyShareData(content::WebUIDataSource* html_source) {
   static constexpr webui::LocalizedString kLocalizedStrings[] = {
       {"nearbyShareTitle", IDS_SETTINGS_NEARBY_SHARE_TITLE},
+      {"nearbyShareSetUpButtonTitle",
+       IDS_SETTINGS_NEARBY_SHARE_SET_UP_BUTTON_TITLE},
       {"nearbyShareDeviceNameRowTitle",
        IDS_SETTINGS_NEARBY_SHARE_DEVICE_NAME_ROW_TITLE},
       {"nearbyShareDeviceNameDialogTitle",

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

@@ -11,7 +11,8 @@
 // #import {assertEquals, assertFalse, assertNotEquals, assertTrue} from '../../chai_assert.js';
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 // #import {TestMultideviceBrowserProxy, createFakePageContentData, HOST_DEVICE} from './test_multidevice_browser_proxy.m.js';
-// #import {waitAfterNextRender} from 'chrome://test/test_util.m.js';
+// #import {isChildVisible, waitAfterNextRender} from 'chrome://test/test_util.m.js';
+// import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 // #import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
 // clang-format on
 
@@ -135,10 +136,27 @@ suite('Multidevice', function() {
     browserProxy = new multidevice.TestMultideviceBrowserProxy();
     settings.MultiDeviceBrowserProxyImpl.instance_ = browserProxy;
 
+    loadTimeData.overrideValues({
+      nearbySharingFeatureFlag: true,
+    });
+
     multidevicePage = document.createElement('settings-multidevice-page');
     assertTrue(!!multidevicePage);
 
+    multidevicePage.prefs = {
+      'nearby_sharing': {
+        'onboarding_complete': {
+          value: false,
+        },
+        'enabled': {
+          value: false,
+        },
+      },
+    };
+
     document.body.appendChild(multidevicePage);
+    Polymer.dom.flush();
+
     return browserProxy.whenCalled('getPageContentData');
   });
 
@@ -367,4 +385,19 @@ suite('Multidevice', function() {
           return enableFeatureWithAuthFn(Feature.SMART_LOCK);
         });
   });
+
+  test('Nearby setup button visibility', async () => {
+    assertTrue(
+        test_util.isChildVisible(multidevicePage, '#nearbySetUp', false));
+    assertFalse(test_util.isChildVisible(
+        multidevicePage, '#nearbySharingToggleButton', false));
+
+    multidevicePage.setPrefValue('nearby_sharing.onboarding_complete', true);
+    Polymer.dom.flush();
+
+    assertFalse(
+        test_util.isChildVisible(multidevicePage, '#nearbySetUp', false));
+    assertTrue(test_util.isChildVisible(
+        multidevicePage, '#nearbySharingToggleButton', false));
+  });
 });