[Nearby] Extract WebUI strings into grdp file

This removes all hardcoded strings from the HTML WebUI files and adds
proper strings to the grdp file. Also replaces the button to configure
the device name externally with an inline edit control.

Bug: None
Change-Id: Ibd2a17b5b9b8234633399fd6c50fae11fc15e45c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2376857
Commit-Queue: Richard Knoll <knollr@chromium.org>
Reviewed-by: James Vecore <vecore@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#802872}

chrome/app/nearby_share_strings.grdp

 <?xml version="1.0" encoding="utf-8"?>
 <!-- Nearby Share specific strings (included from generated_resources.grd). -->
 <grit-part>
+  <!-- Confirmation page -->
+  <message name="IDS_NEARBY_CONFIRMATION_PAGE_ADD_CONTACT_SUBTITLE" desc="Subtitle of the checkbox to add the person to a users contacts. This will make the local device visible to them once they are nearby.">
+    Adding this contact will remember the next time they share
+  </message>
+  <message name="IDS_NEARBY_CONFIRMATION_PAGE_ADD_CONTACT_TITLE" desc="Title of the checkbox to add the person to a users contacts.">
+    Add <ph name="CONTACT_NAME">$1<ex>Richard</ex></ph> to your contacts
+  </message>
+  <message name="IDS_NEARBY_CONFIRMATION_PAGE_TITLE" desc="Title of the Nearby Share confirmation page after selecting a device to share with.">
+    Share with this device?
+  </message>
+
+  <!-- Contact visibility component -->
+  <message name="IDS_NEARBY_CONTACT_VISIBILITY_CONTACTS_TITLE" desc="Section title of the contacts list when setting up the device visibility for the Nearby Share feature.">
+    Contacts
+  </message>
+  <message name="IDS_NEARBY_CONTACT_VISIBILITY_NEARBY_SHARE_OPEN" desc="Describes that nearby devices are visible while the Nearby Share feature is open on screen.">
+    Devices near you when Nearby Share is open
+  </message>
+  <message name="IDS_NEARBY_CONTACT_VISIBILITY_NO_CONTACTS_SUBTITLE" desc="Help text shown when there are no available contacts with a Google Account to select from. Nearby Share is the feature name.">
+    No contacts are available. To use Nearby Share with your contacts, add the email address linked with their Google Account to your contacts.
+  </message>
+  <message name="IDS_NEARBY_CONTACT_VISIBILITY_NO_CONTACTS_TITLE" desc="Title text shown when there are no available contacts with a Google Account to select from.">
+    No available contacts
+  </message>
+  <message name="IDS_NEARBY_CONTACT_VISIBILITY_OTHERS" desc="Describes when nearby devices are visible to this user when using the Nearby Share feature.">
+    People who have chosen to be visible to you when their screen is unlocked
+  </message>
+  <message name="IDS_NEARBY_CONTACT_VISIBILITY_OTHERS_TITLE" desc="Title of the description for which devices the user can share with using the Nearby Share feature.">
+    Devices you can share with
+  </message>
+  <message name="IDS_NEARBY_CONTACT_VISIBILITY_OWN_ALL" desc="Describes who can see the local device when the Nearby Share visibility setting is set to 'All contacts'.">
+    All contacts near you when your screen is unlocked
+  </message>
+  <message name="IDS_NEARBY_CONTACT_VISIBILITY_OWN_NONE" desc="Describes who can see the local device when the Nearby Share visibility setting is set to 'Hidden'.">
+    No one unless you open Nearby Share
+  </message>
+  <message name="IDS_NEARBY_CONTACT_VISIBILITY_OWN_SOME" desc="Describes who can see the local device when the Nearby Share visibility setting is set to 'Some contacts'.">
+    Selected contacts near you when your screen is unlocked
+  </message>
+  <message name="IDS_NEARBY_CONTACT_VISIBILITY_OWN_TITLE" desc="Title of the description for which nearby devices can share with a users device using the Nearby Share feature.">
+    Who can share with your device
+  </message>
+  <message name="IDS_NEARBY_CONTACT_VISIBILITY_ZERO_STATE_INFO" desc="Help text to learn more about the privacy and visibility settings of the Nearby Share feature.">
+    Learn more
+  </message>
+  <message name="IDS_NEARBY_CONTACT_VISIBILITY_ZERO_STATE_TEXT" desc="Zero state help text to explain how the visibility settings control the Nearby Share feature.">
+    Your device visibility controls who can share with you while your screen is unlocked
+  </message>
+
+  <!-- Discovery page -->
+  <message name="IDS_NEARBY_DISCOVERY_PAGE_INFO" desc="Help text on how to use the Nearby Share feature. Explains how to enable it on a nearby Chromebook to share with it.">
+    Make sure both devices are unlocked, close together, and have Bluetooth turned on. If you’re sharing with a Chromebook, make sure it has Nearby Sharing turned on (open the status area by selecting the time, then select Nearby Share).
+  </message>
+  <message name="IDS_NEARBY_DISCOVERY_PAGE_SUBTITLE" desc="Subtitle of the Nearby Share device discovery page. This is where users select a device to share files with.">
+    Select the device you’d like to share files with
+  </message>
+  <message name="IDS_NEARBY_DISCOVERY_PAGE_TITLE" desc="Title of the Nearby Share device discovery page. This is where users select a device to share files with. Nearby Share is the feature name.">
+    Nearby Share
+  </message>
+
+  <!-- Onboarding page -->
+  <message name="IDS_NEARBY_ONBOARDING_PAGE_DEVICE_NAME" desc="Label of the text input field to set the name of a users device which is shown to other devices for the Nearby Share feature.">
+    Device name
+  </message>
+  <message name="IDS_NEARBY_ONBOARDING_PAGE_SUBTITLE" desc="Subtitle of the Nearby Share onboarding page that sets up the local device for the feature which provides a way for nearby devices to share files, text, and urls.">
+    Share files with people around you
+  </message>
+  <message name="IDS_NEARBY_ONBOARDING_PAGE_TITLE" desc="Title of the Nearby Share onboarding page that sets up the local device for the feature. Nearby Share is the feature name.">
+    Set up Nearby Share
+  </message>
+
+  <!-- Visibility page -->
+  <message name="IDS_NEARBY_VISIBILITY_PAGE_MANAGE_CONTACTS" desc="Action button text to manage the contacts of a user while setting up Nearby Share.">
+    Manage contacts
+  </message>
+  <message name="IDS_NEARBY_VISIBILITY_PAGE_SUBTITLE" desc="Subtitle of the Nearby Share device visibility page that sets up the visibility settings for the local device. This page allows users to configure who can see their local device when nearby.">
+    Select who can share with you
+  </message>
+  <message name="IDS_NEARBY_VISIBILITY_PAGE_TITLE" desc="Title of the Nearby Share device visibility page that sets up the visibility settings for the local device.">
+    Device visibility
+  </message>
+
   <!-- Common strings -->
   <message name="IDS_NEARBY_SHARE_FEATURE_NAME" desc="This is the name of the Nearby Share feature which provides a way for nearby devices to share files, text, and urls">
     Nearby Share
   </message>
+  <message name="IDS_NEARBY_ACTIONS_CANCEL" desc="Action button text to cancel the current step in the Nearby Share UI.">
+    Cancel
+  </message>
+  <message name="IDS_NEARBY_ACTIONS_CONFIRM" desc="Action button text to confirm a transfer in the Nearby Share UI.">
+    Confirm
+  </message>
+  <message name="IDS_NEARBY_ACTIONS_NEXT" desc="Action button text to go to the next step in the Nearby Share UI.">
+    Next
+  </message>
+  <message name="IDS_NEARBY_ACTIONS_REJECT" desc="Action button text to reject a transfer in the Nearby Share UI.">
+    Reject
+  </message>
   <message name="IDS_NEARBY_FILE_ATTACHMENTS_APPS" desc="Describes one or more apps being transfered via Nearby Share.">
     {COUNT, plural, =1 {1 app} other {# apps}}
   </message>

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_ACTIONS_CANCEL.png.sha1

+15f7786f4949deeabcc22ac42019d57f3fc42f5d
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_ACTIONS_CONFIRM.png.sha1

+e58ba170a6c2a7b9137b38d778885fb369e35814
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_ACTIONS_NEXT.png.sha1

+6d60a6bc1d7da23376dde08d4791b46a77732868
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_ACTIONS_REJECT.png.sha1

+0d4f81713da71638bbac8d4925a83eaf77f1d481
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONFIRMATION_PAGE_ADD_CONTACT_SUBTITLE.png.sha1

+5a34a889f8a0ac0f1a61c468bc6f13f035d3d62a
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONFIRMATION_PAGE_ADD_CONTACT_TITLE.png.sha1

+5e5c8fcec51f599f93f8bf9371a853b473d69315
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONFIRMATION_PAGE_TITLE.png.sha1

+b9e3cb7b1201c1a9cc0823105499c7524a5e054b
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONTACT_VISIBILITY_CONTACTS_TITLE.png.sha1

+f03656b6855a546c2eb9d591add1189c1288816a
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONTACT_VISIBILITY_NEARBY_SHARE_OPEN.png.sha1

+ea503bebcdfff256a1bd55a237f6b3895e5fca54
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONTACT_VISIBILITY_NO_CONTACTS_SUBTITLE.png.sha1

+07f38dbd7d3a879140bf3845b68fb1f77f2e25e8
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONTACT_VISIBILITY_NO_CONTACTS_TITLE.png.sha1

+8dc4317de80acf6b9050be3c7234d9845e17cda5
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONTACT_VISIBILITY_OTHERS.png.sha1

+82dd80089245c617004a672c5a1d711f0af69cf2
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONTACT_VISIBILITY_OTHERS_TITLE.png.sha1

+e9a243de4c8fc2a1fbe843208330ef96d58fd140
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONTACT_VISIBILITY_OWN_ALL.png.sha1

+63c28557a5a35614729b9e09d56172aa3c35881e
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONTACT_VISIBILITY_OWN_NONE.png.sha1

+15f933772e67e2cb6a87b95cfc562c9a2e3def63
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONTACT_VISIBILITY_OWN_SOME.png.sha1

+d43ef5c857b9b4d512ced44519a2e90f3e326318
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONTACT_VISIBILITY_OWN_TITLE.png.sha1

+3c6dba64173f135c70ab5b7e26dd50a7ef097fc9
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONTACT_VISIBILITY_ZERO_STATE_INFO.png.sha1

+c6273ae81f616ac04feef6a1a145c6d06d456b92
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONTACT_VISIBILITY_ZERO_STATE_TEXT.png.sha1

+22c5b741b6379060d27586ad5644979ea31a70a6
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_DISCOVERY_PAGE_INFO.png.sha1

+629702181a7d79b35060b405495b98cba09e5a93
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_DISCOVERY_PAGE_SUBTITLE.png.sha1

+e8b3a376c9078998500e2075c143ffff6acad0b6
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_DISCOVERY_PAGE_TITLE.png.sha1

+d0ba1503bad07ccc79d202cca8397a117a533eb2
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_ONBOARDING_PAGE_DEVICE_NAME.png.sha1

+37eab0c55b70c9c5a72148a4d4687b84c836364d
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_ONBOARDING_PAGE_SUBTITLE.png.sha1

+4faf64142c4602417bb7f052ba15d144ffb07eaa
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_ONBOARDING_PAGE_TITLE.png.sha1

+2e3722fc957dcfe124519fcd8c15c226b98ecda7
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_VISIBILITY_PAGE_MANAGE_CONTACTS.png.sha1

+b6c863f754a5c593af1bb5e7033029744d85398c
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_VISIBILITY_PAGE_SUBTITLE.png.sha1

+c150d65f995ca1f4b6338ab418f4e1b27d2a799b
\ No newline at end of file

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_VISIBILITY_PAGE_TITLE.png.sha1

+e236209dd324799a63d4a84edd177aaa41b3a8cf
\ No newline at end of file

chrome/browser/resources/nearby_share/app.js

@@ -113,5 +113,5 @@ Polymer({
    */
   onClose_(event) {
     chrome.send('close');
-  }
+  },
 });

chrome/browser/resources/nearby_share/nearby_confirmation_page.html

@@ -53,14 +53,6 @@
     margin-top: 48px;
   }
 
-  #subtitle {
-    color: rgb(32, 33, 36);
-    font-size: 100%;
-    font-weight: normal;
-    line-height: 154%;
-    margin: 0;
-  }
-
   #title {
     color: rgb(32, 33, 36);
     font-size: 123%;
@@ -72,43 +64,44 @@
 </style>
 
 <div id="page-content">
-  <h1 id="title">Share with this device...</h1>
-  <h2 id="subtitle">Your Chromebook is ready to share</h2>
+  <h1 id="title">[[i18n('nearbyShareConfirmationPageTitle')]]</h1>
 
   <div id="process-row">
-    <nearby-preview title="Doggo.jpg"></nearby-preview>
+    <nearby-preview title="[[attachmentTitle_()]]"></nearby-preview>
     <div id="confirmation-token">
       <template is="dom-if" if="[[confirmationToken_]]">
-        [[i18n('secureConnectionId', confirmationToken_)]]
+        [[i18n('nearbyShareSecureConnectionId', confirmationToken_)]]
       </template>
     </div>
     <nearby-progress share-target="[[shareTarget]]"></nearby-progress>
   </div>
 
-  <cr-checkbox id="add-contacts">
-    <div id="add-contacts-label">
-      Add Richard to contacts
-    </div>
-    <div id="add-contacts-label-secondary">
-      Adding this contact will remember the next time you share
-    </div>
-  </cr-checkbox>
+  <template is="dom-if" if="[[contactName_(shareTarget)]]">
+    <cr-checkbox id="add-contacts">
+      <div id="add-contacts-label">
+        [[contactName_(shareTarget)]]
+      </div>
+      <div id="add-contacts-label-secondary">
+        [[i18n('nearbyShareConfirmationPageAddContactSubtitle')]]
+      </div>
+    </cr-checkbox>
+  </template>
 
   <div id="actions">
     <template is="dom-if" if="[[needsConfirmation_]]">
       <cr-button id="reject-button" class="cancel-button"
           on-click="onRejectTap_">
-        Reject
+        [[i18n('nearbyShareActionsReject')]]
       </cr-button>
       <cr-button id="accept-button" class="action-button"
           on-click="onAcceptTap_">
-        Confirm
+        [[i18n('nearbyShareActionsConfirm')]]
       </cr-button>
     </template>
     <template is="dom-if" if="[[!needsConfirmation_]]">
       <cr-button id="cancel-button" class="action-button"
           on-click="onCancelTap_">
-        Cancel
+        [[i18n('nearbyShareActionsCancel')]]
       </cr-button>
     </template>
   </div>

chrome/browser/resources/nearby_share/nearby_confirmation_page.js

@@ -148,6 +148,19 @@ Polymer({
     }
   },
 
+  /**
+   * @return {string} The contact name of the selected ShareTarget.
+   * @private
+   */
+  contactName_() {
+    // TODO(knollr): Get contact name from ShareTarget.
+    const contactName = null;
+    if (!contactName) {
+      return '';
+    }
+    return this.i18n('nearbyShareConfirmationPageAddContactTitle', contactName);
+  },
+
   /** @private */
   onAcceptTap_() {
     this.confirmationManager.accept().then(
@@ -169,4 +182,13 @@ Polymer({
       this.fire('close');
     });
   },
+
+  /**
+   * @return {!string} The title of the attachment to be shared.
+   * @private
+   */
+  attachmentTitle_() {
+    // TODO(knollr): Pass attachments to UI.
+    return 'Unknown file';
+  },
 });

chrome/browser/resources/nearby_share/nearby_discovery_page.html

@@ -84,13 +84,13 @@
 </style>
 
 <div id="page-content">
-  <h1 id="title">Nearby Share</h1>
-  <h2 id="subtitle">Select people you would like to share with</h2>
+  <h1 id="title">[[i18n('nearbyShareDiscoveryPageTitle')]]</h1>
+  <h2 id="subtitle">[[i18n('nearbyShareDiscoveryPageSubtitle')]]</h2>
 
   <div id="center-content">
 
     <div id="process-row">
-      <nearby-preview title="Doggo.jpg"></nearby-preview>
+      <nearby-preview title="[[attachmentTitle_()]]"></nearby-preview>
       <iron-list items="[[shareTargets_]]" id="deviceList"
           selected-item="{{selectedShareTarget}}"
           on-selected-item-changed="onSelectedShareTargetChanged_"
@@ -105,21 +105,17 @@
       </iron-list>
     </div>
 
-    <div id="help">
-      Make sure both devices are unlocked, close together (within 1 ft), and
-      have Bluetooth turned on. If you’re sharing with a Chromebook make sure
-      Nearby Share is turned on from quick settings.
-    </div>
+    <div id="help">[[i18n('nearbyShareDiscoveryPageInfo')]]</div>
 
   </div>
 
   <div id="actions">
     <cr-button class="cancel-button" on-click="onCancelTap_">
-      Cancel
+      [[i18n('nearbyShareActionsCancel')]]
     </cr-button>
     <cr-button id="next-button" class="action-button" on-click="onNextTap_"
         disabled="[[!selectedShareTarget]]">
-      Next
+      [[i18n('nearbyShareActionsNext')]]
     </cr-button>
   </div>
 </div>

chrome/browser/resources/nearby_share/nearby_discovery_page.js

@@ -15,8 +15,10 @@ import './nearby_device.js';
 import './nearby_preview.js';
 import './nearby_share_target_types.mojom-lite.js';
 import './nearby_share.mojom-lite.js';
+import './strings.m.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
+import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {getDiscoveryManager} from './discovery_manager.js';
@@ -42,6 +44,8 @@ function tokensEqual(a, b) {
 Polymer({
   is: 'nearby-discovery-page',
 
+  behaviors: [I18nBehavior],
+
   _template: html`{__html_template__}`,
 
   properties: {
@@ -97,26 +101,11 @@ Polymer({
   /** @private {?nearbyShare.mojom.ShareTarget} */
   lastSelectedShareTarget_: null,
 
+  /** @type {ResizeObserver} used to observer size changes to this element */
+  resizeObserver_: null,
+
   /** @override */
   attached() {
-    // TODO(knollr): Remove this once prototyping is done.
-    this.shareTargets_ = [
-      {
-        id: {high: 0, low: 1},
-        name: 'Alyssa\'s Pixel',
-        type: nearbyShare.mojom.ShareTargetType.kTablet,
-      },
-      {
-        id: {high: 0, low: 2},
-        name: 'Shangela\'s Pixel 2XL',
-        type: nearbyShare.mojom.ShareTargetType.kPhone,
-      },
-      {
-        id: {high: 0, low: 3},
-        name: 'Mira\'s Chromebook',
-        type: nearbyShare.mojom.ShareTargetType.kLaptop,
-      }
-    ];
     this.shareTargetMap_ = new Map();
 
     this.mojoEventTarget_ =
@@ -138,6 +127,22 @@ Polymer({
             return;
           }
         });
+
+    // This is a required work around to get the iron-list to display on first
+    // view. Currently iron-list won't generate item elements on attach if the
+    // element is not visible. Because we are hosted in a cr-view-manager for
+    // on-boarding, this component is not visible when the items are bound. To
+    // fix this issue, we listen for resize events (which happen when display is
+    // switched from none to block by the view manager) and manually call
+    // notifyResize on the iron-list
+    this.resizeObserver_ = new ResizeObserver(entries => {
+      const deviceList =
+          /** @type {IronListElement} */ (this.$$('#deviceList'));
+      if (deviceList) {
+        deviceList.notifyResize();
+      }
+    });
+    this.resizeObserver_.observe(this);
   },
 
   /** @override */
@@ -145,6 +150,7 @@ Polymer({
     this.listenerIds_.forEach(
         id => assert(this.mojoEventTarget_.removeListener(id)));
     this.mojoEventTarget_.$.close();
+    this.resizeObserver_.disconnect();
   },
 
   /**
@@ -237,4 +243,13 @@ Polymer({
   onCancelTap_() {
     this.fire('close');
   },
+
+  /**
+   * @return {!string} The title of the attachment to be shared.
+   * @private
+   */
+  attachmentTitle_() {
+    // TODO(knollr): Pass attachments to UI.
+    return 'Unknown file';
+  },
 });

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

@@ -37,7 +37,8 @@ js_library("nearby_onboarding_page") {
   deps = [
     ":nearby_share_settings_behavior",
     "//third_party/polymer/v1_0/components-chromium/iron-icon:iron-icon-extracted",
-    "//ui/webui/resources/cr_elements/cr_link_row",
+    "//ui/webui/resources/cr_elements/cr_input:cr_input",
+    "//ui/webui/resources/js:i18n_behavior",
   ]
 }
 
@@ -59,6 +60,7 @@ js_library("nearby_visibility_page") {
   deps = [
     ":nearby_contact_visibility",
     ":nearby_share_settings_behavior",
+    "//ui/webui/resources/js:i18n_behavior",
   ]
 }
 
@@ -109,6 +111,7 @@ js_library("nearby_onboarding_page.m") {
     ":nearby_share_settings_behavior.m",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_link_row:cr_link_row.m",
+    "//ui/webui/resources/js:i18n_behavior.m",
   ]
   extra_deps = [ ":nearby_onboarding_page_module" ]
 }
@@ -137,6 +140,7 @@ js_library("nearby_visibility_page.m") {
     ":nearby_contact_visibility.m",
     ":nearby_share_settings_behavior.m",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:i18n_behavior.m",
   ]
   extra_deps = [ ":nearby_visibility_page_module" ]
 }

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

@@ -111,6 +111,12 @@
         margin-block-end: 8px;
       }
 
+      .explanation-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
       .explanation-section {
         display: flex;
         margin-block-end: 8px;
@@ -176,7 +182,7 @@
             <iron-icon icon="nearby20:contact-all" class="card-icon">
             </iron-icon>
             <div class="card-label">
-              All Contacts
+              $i18n{nearbyShareContactVisibilityAll}
             </div>
           </div>
         </cr-card-radio-button>
@@ -185,7 +191,7 @@
             <iron-icon icon="nearby20:contact-group" class="card-icon">
             </iron-icon>
             <div class="card-label">
-              Some Contacts
+              $i18n{nearbyShareContactVisibilitySome}
             </div>
           </div>
         </cr-card-radio-button>
@@ -194,7 +200,7 @@
             <iron-icon icon="nearby20:visibility-off" class="card-icon">
             </iron-icon>
             <div class="card-label">
-              Hidden
+              $i18n{nearbyShareContactVisibilityNone}
             </div>
           </div>
         </cr-card-radio-button>
@@ -210,13 +216,12 @@
           </div>
           <div id="zeroStateTextContainer">
             <div id="zeroStateText" class="cr-title-text">
-              Your device visibility controls who can share with you while your
-              screen is unlocked.
+              $i18n{nearbyShareContactVisibilityZeroStateText}
             </div>
             <div id="zeroStateInfoContainer">
               <iron-icon id="zeroStateIcon" icon="cr:info"></iron-icon>
               <div class="cr-secondary-text">
-                Learn more about device visibility
+                $i18n{nearbyShareContactVisibilityZeroStateInfo}
               </div>
             </div>
           </div>
@@ -230,10 +235,14 @@
             <iron-icon icon="nearby20:radar" class="padded-icon grey-icon">
             </iron-icon>
             <div class="viz-description-section">
-              <div class="cr-title-text">Who you see</div>
+              <div class="cr-title-text">
+                $i18n{nearbyShareContactVisibilityOthersTitle}
+              </div>
               <div class="cr-secondary-text">
-                Nearby sharing users who are temporarily visible to everyone or
-                have chosen to always be visible to you
+                <ul class="explanation-list">
+                  <li>$i18n{nearbyShareContactVisibilityOthers}</li>
+                  <li>$i18n{nearbyShareContactVisibilityNearbyShareOpen}</li>
+                </ul>
               </div>
             </div>
           </div>
@@ -242,22 +251,34 @@
             <iron-icon icon="nearby20:visibility" class="padded-icon grey-icon">
             </iron-icon>
             <div class="viz-description-section">
-              <div class="cr-title-text">Who sees you</div>
+              <div class="cr-title-text">
+                $i18n{nearbyShareContactVisibilityOwnTitle}
+              </div>
               <template is="dom-if"
                   if="[[isVisibility_(selectedVisibility,'all')]]">
                 <div class="cr-secondary-text">
-                  Current and future contacts who have Nearby Share turned on
+                  <ul class="explanation-list">
+                    <li>$i18n{nearbyShareContactVisibilityOwnAll}</li>
+                    <li>$i18n{nearbyShareContactVisibilityNearbyShareOpen}</li>
+                  </ul>
                 </div>
               </template>
               <template is="dom-if"
                   if="[[isVisibility_(selectedVisibility,'some')]]">
                 <div class="cr-secondary-text">
-                  Selected contacts who have Nearby Share turned on
+                  <ul class="explanation-list">
+                    <li>$i18n{nearbyShareContactVisibilityOwnSome}</li>
+                    <li>$i18n{nearbyShareContactVisibilityNearbyShareOpen}</li>
+                  </ul>
                 </div>
               </template>
               <template is="dom-if"
                   if="[[isVisibility_(selectedVisibility,'none')]]">
-                <div class="cr-secondary-text">Nobody!</div>
+                <div class="cr-secondary-text">
+                  <ul class="explanation-list">
+                    <li>$i18n{nearbyShareContactVisibilityOwnNone}</li>
+                  </ul>
+                </div>
               </template>
             </div>
           </div>
@@ -265,7 +286,9 @@
         </div>
 
         <div id="contactsWrapper">
-          <div id="contactsHeading">Contacts</div>
+          <div id="contactsHeading">
+            $i18n{nearbyShareContactVisibilityContactsTitle}
+          </div>
 
           <!-- Show when the user has one or more contacts-->
           <template is="dom-if" if="[[showContactsList_(contacts)]]">
@@ -295,8 +318,12 @@
           <!-- Show when the user has no contacts available -->
           <template is="dom-if" if="[[!showContactsList_(contacts)]]">
             <div id="noContactsContainer">
-              <div class="cr-title-text">No Reachable Contacts</div>
-              <div class="cr-secondary-text">No Reachable Contacts Subtext</div>
+              <div class="cr-title-text">
+                $i18n{nearbyShareContactVisibilityNoContactsTitle}
+              </div>
+              <div class="cr-secondary-text">
+                $i18n{nearbyShareContactVisibilityNoContactsSubtitle}
+              </div>
             </div>
           </template>
         </div>

chrome/browser/resources/nearby_share/shared/nearby_onboarding_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="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="./nearby_share_settings_behavior.html">
 
@@ -57,9 +58,8 @@
         border-radius: 5px;
       }
 
-      #device-name-desc-group {
-        margin-inline-start: 10px;
-        padding: 10px;
+      #deviceName {
+        margin-top: 60px;
       }
 
       #device-name-group {
@@ -77,10 +77,8 @@
     </style>
     <div id="page-container">
       <div id="header">
-        <h1 id="page-title">Turn on Nearby Share</h1>
-        <h4 id="page-sub-title">
-          Nearby allows you to send and receive files from people nearby
-        </h4>
+        <h1 id="page-title">$i18n{nearbyShareOnboardingPageTitle}</h1>
+        <h4 id="page-sub-title">$i18n{nearbyShareOnboardingPageSubtitle}</h4>
       </div>
 
       <div id=center-content>
@@ -88,25 +86,18 @@
             icon="nearby-images:nearby-onboarding-splash">
         </iron-icon>
         <div id="device-name-column">
-            <div id="device-name-desc-group">
-              <div>Device Name</div>
-              <div class="cr-secondary-text">
-                Visible to people you share with
-              </div>
-            </div>
-            <cr-link-row id="link-row" label="[[settings.deviceName]]"
-                sub-label="Your device name" on-click="onDeviceNameTap_"
-                start-icon="cr:person" external=true>
-            </cr-link-row>
+          <cr-input label="$i18n{nearbyShareOnboardingPageDeviceName}"
+              id="deviceName" value="[[settings.deviceName]]" autofocus>
+          </cr-input>
         </div>
       </div>
 
       <div id="actions">
         <cr-button class="cancel-button" on-click="onCloseTap_">
-          Cancel
+          $i18n{nearbyShareActionsCancel}
         </cr-button>
         <cr-button id="next-button" class="action-button" on-click="onNextTap_">
-          Next
+          $i18n{nearbyShareActionsNext}
         </cr-button>
       </div>
     </div>

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

@@ -10,6 +10,8 @@
 Polymer({
   is: 'nearby-onboarding-page',
 
+  behaviors: [I18nBehavior],
+
   properties: {
     /** @type {?nearby_share.NearbySettings} */
     settings: {
@@ -18,14 +20,11 @@ Polymer({
   },
 
   onNextTap_() {
+    this.set('settings.deviceName', this.$.deviceName.value);
     this.fire('change-page', {page: 'visibility'});
   },
 
   onCloseTap_() {
     this.fire('close');
   },
-
-  onDeviceNameTap_() {
-    window.open('chrome://os-settings/multidevice/nearbyshare?deviceName');
-  },
 });

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="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="nearby_share_settings_behavior.html">
 <link rel="import" href="nearby_contact_visibility.html">
 
@@ -58,10 +59,8 @@
     </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>
+        <h1 id="page-title">$i18n{nearbyShareVisibilityPageTitle}</h1>
+        <h4 id="page-sub-title">$i18n{nearbyShareVisibilityPageSubtitle}</h4>
       </div>
 
       <div id=center-content>
@@ -72,14 +71,14 @@
 
       <div id="actions">
         <cr-button id="manage-contacts-button" on-click="onManageContactsTap_">
-          Manage Contacts
+          $i18n{nearbyShareVisibilityPageManageContacts}
         </cr-button>
         <cr-button id="cancel-button" class="cancel-button"
             on-click="onCloseTap_">
-          Cancel
+          $i18n{nearbyShareActionsCancel}
         </cr-button>
         <cr-button id="next-button" class="action-button" on-click="onNextTap_">
-          Confirm
+          $i18n{nearbyShareActionsConfirm}
         </cr-button>
       </div>
     </div>

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

@@ -14,6 +14,8 @@
 Polymer({
   is: 'nearby-visibility-page',
 
+  behaviors: [I18nBehavior],
+
   properties: {
     /** @type {?nearby_share.NearbySettings} */
     settings: {

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

@@ -66,7 +66,7 @@
           $i18n{cancel}
         </cr-button>
         <cr-button class="action-button" on-click="onUpdateTap_">
-          $i18n{updateDataUsage}
+          $i18n{nearbyShareUpdateDataUsage}
         </cr-button>
     </cr-dialog>
   </template>

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

@@ -79,7 +79,7 @@
       <cr-button id="editDataUsageButton" on-click="onDataUsageTap_"
           aria-description="[[getEditDataUsageButtonAriaDescription_(
               prefs.nearby_sharing.data_usage.value)]]">
-        $i18n{editDataUsage}
+        $i18n{nearbyShareEditDataUsage}
       </cr-button>
     </div>
     <template is="dom-if" if="[[showDataUsageDialog_]]" restamp>

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

@@ -124,13 +124,13 @@ Polymer({
   getVisibilityText_(visibility) {
     switch (visibility) {
       case nearbyShare.mojom.Visibility.kAllContacts:
-        return this.i18n('visibilityAllContacts');
+        return this.i18n('nearbyShareContactVisibilityAll');
       case nearbyShare.mojom.Visibility.kSelectedContacts:
-        return this.i18n('visibilitySomeContacts');
+        return this.i18n('nearbyShareContactVisibilitySome');
       case nearbyShare.mojom.Visibility.kNoOne:
-        return this.i18n('visibilityHidden');
+        return this.i18n('nearbyShareContactVisibilityNone');
       case nearbyShare.mojom.Visibility.kUnknown:
-        return this.i18n('visibilityUnknown');
+        return this.i18n('nearbyShareContactVisibilityUnknown');
       default:
         return '';  // Make closure happy.
     }
@@ -144,13 +144,13 @@ Polymer({
   getVisibilityDescription_(visibility) {
     switch (visibility) {
       case nearbyShare.mojom.Visibility.kAllContacts:
-        return this.i18n('visibilityAllContactsDescription');
+        return this.i18n('nearbyShareContactVisibilityAllDescription');
       case nearbyShare.mojom.Visibility.kSelectedContacts:
-        return this.i18n('visibilitySomeContactsDescription');
+        return this.i18n('nearbyShareContactVisibilitySomeDescription');
       case nearbyShare.mojom.Visibility.kNoOne:
-        return this.i18n('visibilityHiddenDescription');
+        return this.i18n('nearbyShareContactVisibilityNoneDescription');
       case nearbyShare.mojom.Visibility.kUnknown:
-        return this.i18n('visibilityUnknownDescription');
+        return this.i18n('nearbyShareContactVisibilityUnknownDescription');
       default:
         return '';  // Make closure happy.
     }

chrome/browser/ui/webui/nearby_share/shared_resources.cc

@@ -62,19 +62,66 @@ void RegisterNearbySharedResources(content::WebUIDataSource* data_source) {
 
 void RegisterNearbySharedStrings(content::WebUIDataSource* data_source) {
   static constexpr webui::LocalizedString kLocalizedStrings[] = {
-      {"secureConnectionId", IDS_NEARBY_SECURE_CONNECTION_ID},
-      {"nearbyShareFeatureName", IDS_NEARBY_SHARE_FEATURE_NAME},
-      {"visibilityAllContacts", IDS_NEARBY_VISIBLITY_ALL_CONTACTS},
-      {"visibilityAllContactsDescription",
+      {"nearbyShareActionsCancel", IDS_NEARBY_ACTIONS_CANCEL},
+      {"nearbyShareActionsConfirm", IDS_NEARBY_ACTIONS_CONFIRM},
+      {"nearbyShareActionsNext", IDS_NEARBY_ACTIONS_NEXT},
+      {"nearbyShareActionsReject", IDS_NEARBY_ACTIONS_REJECT},
+      {"nearbyShareConfirmationPageAddContactSubtitle",
+       IDS_NEARBY_CONFIRMATION_PAGE_ADD_CONTACT_SUBTITLE},
+      {"nearbyShareConfirmationPageAddContactTitle",
+       IDS_NEARBY_CONFIRMATION_PAGE_ADD_CONTACT_TITLE},
+      {"nearbyShareConfirmationPageTitle", IDS_NEARBY_CONFIRMATION_PAGE_TITLE},
+      {"nearbyShareContactVisibilityAll", IDS_NEARBY_VISIBLITY_ALL_CONTACTS},
+      {"nearbyShareContactVisibilityAllDescription",
        IDS_NEARBY_VISIBLITY_ALL_CONTACTS_DESCRIPTION},
-      {"visibilitySomeContacts", IDS_NEARBY_VISIBLITY_SOME_CONTACTS},
-      {"visibilitySomeContactsDescription",
+      {"nearbyShareContactVisibilityContactsTitle",
+       IDS_NEARBY_CONTACT_VISIBILITY_CONTACTS_TITLE},
+      {"nearbyShareContactVisibilityNearbyShareOpen",
+       IDS_NEARBY_CONTACT_VISIBILITY_NEARBY_SHARE_OPEN},
+      {"nearbyShareContactVisibilityNoContactsSubtitle",
+       IDS_NEARBY_CONTACT_VISIBILITY_NO_CONTACTS_SUBTITLE},
+      {"nearbyShareContactVisibilityNoContactsTitle",
+       IDS_NEARBY_CONTACT_VISIBILITY_NO_CONTACTS_TITLE},
+      {"nearbyShareContactVisibilityNone", IDS_NEARBY_VISIBLITY_HIDDEN},
+      {"nearbyShareContactVisibilityNoneDescription",
+       IDS_NEARBY_VISIBLITY_HIDDEN_DESCRIPTION},
+      {"nearbyShareContactVisibilityOthers",
+       IDS_NEARBY_CONTACT_VISIBILITY_OTHERS},
+      {"nearbyShareContactVisibilityOthersTitle",
+       IDS_NEARBY_CONTACT_VISIBILITY_OTHERS_TITLE},
+      {"nearbyShareContactVisibilityOwnAll",
+       IDS_NEARBY_CONTACT_VISIBILITY_OWN_ALL},
+      {"nearbyShareContactVisibilityOwnNone",
+       IDS_NEARBY_CONTACT_VISIBILITY_OWN_NONE},
+      {"nearbyShareContactVisibilityOwnSome",
+       IDS_NEARBY_CONTACT_VISIBILITY_OWN_SOME},
+      {"nearbyShareContactVisibilityOwnTitle",
+       IDS_NEARBY_CONTACT_VISIBILITY_OWN_TITLE},
+      {"nearbyShareContactVisibilitySome", IDS_NEARBY_VISIBLITY_SOME_CONTACTS},
+      {"nearbyShareContactVisibilitySomeDescription",
        IDS_NEARBY_VISIBLITY_SOME_CONTACTS_DESCRIPTION},
-      {"visibilityHidden", IDS_NEARBY_VISIBLITY_HIDDEN},
-      {"visibilityHiddenDescription", IDS_NEARBY_VISIBLITY_HIDDEN_DESCRIPTION},
-      {"visibilityUnknown", IDS_NEARBY_VISIBLITY_UNKNOWN},
-      {"visibilityUnknownDescription",
+      {"nearbyShareContactVisibilityUnknown", IDS_NEARBY_VISIBLITY_UNKNOWN},
+      {"nearbyShareContactVisibilityUnknownDescription",
        IDS_NEARBY_VISIBLITY_UNKNOWN_DESCRIPTION},
+      {"nearbyShareContactVisibilityZeroStateInfo",
+       IDS_NEARBY_CONTACT_VISIBILITY_ZERO_STATE_INFO},
+      {"nearbyShareContactVisibilityZeroStateText",
+       IDS_NEARBY_CONTACT_VISIBILITY_ZERO_STATE_TEXT},
+      {"nearbyShareDiscoveryPageInfo", IDS_NEARBY_DISCOVERY_PAGE_INFO},
+      {"nearbyShareDiscoveryPageSubtitle", IDS_NEARBY_DISCOVERY_PAGE_SUBTITLE},
+      {"nearbyShareDiscoveryPageTitle", IDS_NEARBY_DISCOVERY_PAGE_TITLE},
+      {"nearbyShareFeatureName", IDS_NEARBY_SHARE_FEATURE_NAME},
+      {"nearbyShareOnboardingPageDeviceName",
+       IDS_NEARBY_ONBOARDING_PAGE_DEVICE_NAME},
+      {"nearbyShareOnboardingPageSubtitle",
+       IDS_NEARBY_ONBOARDING_PAGE_SUBTITLE},
+      {"nearbyShareOnboardingPageTitle", IDS_NEARBY_ONBOARDING_PAGE_TITLE},
+      {"nearbyShareSecureConnectionId", IDS_NEARBY_SECURE_CONNECTION_ID},
+      {"nearbyShareVisibilityPageManageContacts",
+       IDS_NEARBY_VISIBILITY_PAGE_MANAGE_CONTACTS},
+      {"nearbyShareVisibilityPageSubtitle",
+       IDS_NEARBY_VISIBILITY_PAGE_SUBTITLE},
+      {"nearbyShareVisibilityPageTitle", IDS_NEARBY_VISIBILITY_PAGE_TITLE},
   };
   webui::AddLocalizedStringsBulk(data_source, kLocalizedStrings);
 }

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

@@ -257,8 +257,9 @@ void AddNearbyShareData(content::WebUIDataSource* html_source) {
       {"nearbyShareEditDeviceName", IDS_SETTINGS_NEARBY_SHARE_EDIT_DEVICE_NAME},
       {"nearbyShareDeviceNameAriaDescription",
        IDS_SETTINGS_NEARBY_SHARE_DEVICE_NAME_ARIA_DESCRIPTION},
-      {"editDataUsage", IDS_SETTINGS_NEARBY_SHARE_EDIT_DATA_USAGE},
-      {"updateDataUsage", IDS_SETTINGS_NEARBY_SHARE_UPDATE_DATA_USAGE},
+      {"nearbyShareEditDataUsage", IDS_SETTINGS_NEARBY_SHARE_EDIT_DATA_USAGE},
+      {"nearbyShareUpdateDataUsage",
+       IDS_SETTINGS_NEARBY_SHARE_UPDATE_DATA_USAGE},
       {"nearbyShareDataUsageDialogTitle",
        IDS_SETTINGS_NEARBY_SHARE_DATA_USAGE_DIALOG_TITLE},
       {"nearbyShareDataUsageWifiOnlyLabel",

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

@@ -33,6 +33,6 @@ suite('nearby-onboarding-page', function() {
   test('Renders onboarding page', async function() {
     assertEquals('NEARBY-ONBOARDING-PAGE', element.tagName);
     // Verify the device name is shown correctly.
-    assertEquals(deviceName, element.$$('#link-row').$$('#label').innerText);
+    assertEquals(deviceName, element.$$('#deviceName').value);
   });
 });