[Nearby] Discovery page layout and "Learn more" link

- Fix spacing of share target buttons.
- Add "Learn more" link. Link doesn't work, see crbug.com/1138445
- Force long filenames to wrap so that the share target list has enough
  space.

Fix: 1131292
Change-Id: I049fa8e4c8a533773906e32d36c6717c1a9c0adf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2465808Reviewed-by: James Vecore <vecore@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Curt Clemens <cclem@google.com>
Cr-Commit-Position: refs/heads/master@{#817242}

chrome/app/nearby_share_strings.grdp

@@ -66,7 +66,7 @@
 
   <!-- 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).
+    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). <ph name="LINK_BEGIN">&lt;a&gt;</ph>Learn more<ph name="LINK_END">&lt;/a&gt;</ph>
   </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

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_DISCOVERY_PAGE_INFO.png.sha1

-629702181a7d79b35060b405495b98cba09e5a93
\ No newline at end of file
+2ee345a76fb36c02485d4dd7afe01e4a44b2fe44
\ No newline at end of file

chrome/browser/resources/nearby_share/nearby_device.html

 <style>
-  :host {
+  #wrapper {
     align-items: center;
     border: 1px solid rgba(216, 216, 216, 0.76);
     border-radius: 8px;
     box-sizing: border-box;
+    cursor: pointer;
     display: flex;
     height: 40px;
     margin-block-end: 6px;
@@ -14,19 +15,22 @@
   }
 
   :host(:focus) {
-    border-color: rgb(95, 99, 104);
     outline: none;
   }
 
-  :host([is-selected]) {
+  :host(:focus) #wrapper {
+    border-color: rgb(95, 99, 104);
+  }
+
+  :host([is-selected]) #wrapper {
     border-color: rgb(66, 133, 244);
   }
 
-  :host([is-selected]) > #done {
+  :host([is-selected]) #done {
     display: flex;
   }
 
-  :host([is-selected]) > #name {
+  :host([is-selected]) #name {
     color: rgb(26, 115, 232);
   }
 
@@ -58,7 +62,9 @@
   }
 </style>
 
-<nearby-device-icon id="icon" share-target="[[shareTarget]]">
-</nearby-device-icon>
-<div id="name">[[shareTarget.name]]</div>
-<iron-icon id="done" icon="nearby-share:done"></iron-icon>
+<div id="wrapper">
+  <nearby-device-icon id="icon" share-target="[[shareTarget]]">
+  </nearby-device-icon>
+  <div id="name">[[shareTarget.name]]</div>
+  <iron-icon id="done" icon="nearby-share:done"></iron-icon>
+</div>

chrome/browser/resources/nearby_share/nearby_discovery_page.html

@@ -28,13 +28,31 @@
   }
 
   #help {
+    align-items: flex-start;
     color: rgb(95, 99, 104);
+    display: flex;
+    flex-direction: row;
     font-size: 9px;
     line-height: 12px;
-    margin-block-end: 12px;
-    margin-block-start: 12px;
     margin-inline-end:  var(--nearby-page-space-inline);
     margin-inline-start: var(--nearby-page-space-inline);
+    padding: 8px;
+  }
+
+  #helpText {
+    margin: auto;
+  }
+
+  #helpText a {
+    color: rgb(26, 115, 232);
+    text-decoration: none;
+  }
+
+  #infoIcon {
+    flex-shrink: 0;
+    height: 20px;
+    margin-inline-end: 12px;
+    width: 20px;
   }
 
   #process-row {
@@ -69,6 +87,13 @@
         </template>
       </iron-list>
     </div>
-    <div id="help">[[i18n('nearbyShareDiscoveryPageInfo')]]</div>
+    <div id="help">
+      <iron-icon id="infoIcon" icon="nearby20:info"></iron-icon>
+      <!-- TODO(vecore): add correct url for learn more link -->
+      <!-- TODO(crbug.com/1138445) link doesn't work -->
+      <div id="helpText"
+          inner-h-t-m-l="[[getAriaLabelledHelpText_('https://google.com')]]">
+      </div>
+    </div>
   </div>
 </nearby-page-template>

chrome/browser/resources/nearby_share/nearby_discovery_page.js

@@ -18,7 +18,7 @@ import './nearby_share.mojom-lite.js';
 import './shared/nearby_page_template.m.js';
 import './strings.m.js';
 
-import {assert} from 'chrome://resources/js/assert.m.js';
+import {assert, assertNotReached} 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';
 
@@ -206,7 +206,9 @@ Polymer({
 
   /** @private */
   clearShareTargets_() {
-    this.shareTargetMap_.clear();
+    if (this.shareTargetMap_) {
+      this.shareTargetMap_.clear();
+    }
     this.lastSelectedShareTarget_ = null;
     this.selectedShareTarget = null;
     this.shareTargets_ = [];
@@ -297,4 +299,64 @@ Polymer({
       this.selectedShareTarget = shareTarget;
     }
   },
+
+  /**
+   * Builds the html for the help text, applying the appropriate aria labels,
+   * and setting the href of the link to |linkUrl|. This function is largely
+   * copied from getAriaLabelledContent_ in <settings-localized-link>, which
+   * can't be used directly because this isn't part of settings.
+   * @param {string} linkUrl
+   * @return {string}
+   * @private
+   */
+  getAriaLabelledHelpText_(linkUrl) {
+    const tempEl = document.createElement('div');
+    const localizedString = this.i18nAdvanced('nearbyShareDiscoveryPageInfo');
+    tempEl.innerHTML = localizedString;
+
+    const ariaLabelledByIds = [];
+    tempEl.childNodes.forEach((node, index) => {
+      // Text nodes should be aria-hidden and associated with an element id
+      // that the anchor element can be aria-labelledby.
+      if (node.nodeType == Node.TEXT_NODE) {
+        const spanNode = document.createElement('span');
+        spanNode.textContent = node.textContent;
+        spanNode.id = `helpText${index}`;
+        ariaLabelledByIds.push(spanNode.id);
+        spanNode.setAttribute('aria-hidden', true);
+        node.replaceWith(spanNode);
+        return;
+      }
+      // The single element node with anchor tags should also be aria-labelledby
+      // itself in-order with respect to the entire string.
+      if (node.nodeType == Node.ELEMENT_NODE && node.nodeName == 'A') {
+        node.id = `helpLink`;
+        ariaLabelledByIds.push(node.id);
+        return;
+      }
+
+      // Only text and <a> nodes are allowed.
+      assertNotReached('nearbyShareDiscoveryPageInfo has invalid node types');
+    });
+
+    const anchorTags = tempEl.getElementsByTagName('a');
+    // In the event the localizedString contains only text nodes, populate the
+    // contents with the localizedString.
+    if (anchorTags.length == 0) {
+      return localizedString;
+    }
+
+    assert(
+        anchorTags.length == 1,
+        'nearbyShareDiscoveryPageInfo should contain exactly one anchor tag');
+    const anchorTag = anchorTags[0];
+    anchorTag.setAttribute('aria-labelledby', ariaLabelledByIds.join(' '));
+
+    if (linkUrl != '') {
+      anchorTag.href = linkUrl;
+      anchorTag.target = '_blank';
+    }
+
+    return tempEl.innerHTML;
+  },
 });

chrome/browser/resources/nearby_share/nearby_preview.html

@@ -23,6 +23,10 @@
     letter-spacing: 0.2px;
     line-height: 20px;
     margin-top: 6px;
+    max-height: 40px;
+    max-width: 200px;
+    overflow: hidden;
+    overflow-wrap: break-word;
     text-align: center;
   }
 </style>