[Nearby] Fix share target list button state, align list to top

The <nearby-device> items inside the <iron-list> of share targets on the
discovery page weren't getting styled correctly on selection because
their is-selected property wasn't getting set with the right value by
the binding. This had to do with changes to the order in which the
bindings update introduced when this list was moved into a dom-if.

The list is also now aligned to the top of its div. It was mistakenly
aligned to the center when the placeholder text was introduced, which
had to be centered.

Bug: b/163036847
Change-Id: I80798c02088f223ab3e76f2ac5797fb92a2522e8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2537999
Commit-Queue: Curt Clemens <cclem@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#827542}

chrome/browser/resources/nearby_share/nearby_discovery_page.html

@@ -18,6 +18,7 @@
 
   #deviceList {
     display: block;
+    margin-top: 12px;
     overflow: auto;
     padding-inline-end:  var(--nearby-page-space-large-inline);
     padding-inline-start:  var(--nearby-page-space-large-inline);
@@ -58,10 +59,10 @@
   }
 
   #process-row {
-    align-items: center;
+    align-items: flex-start;
     display: flex;
-    flex-grow: 1;
     justify-content: space-between;
+    margin: auto 0;
     margin-block-start: 48px;
     overflow: hidden;
   }
@@ -73,6 +74,7 @@
   }
 
   #placeholder {
+    align-self: center;
     color: rgb(95, 99, 104);
     font-size: 13px;
     line-height: 20px;
@@ -103,11 +105,9 @@
             aria-label="$i18n{nearbyShareDiscoveryPageSubtitle}">
           <template>
             <nearby-device tabindex$="[[tabIndex]]" share-target="[[item]]"
-                is-selected="[[isShareTargetSelected_(
-                                 item, selectedShareTarget)]]"
+                is-selected="[[selected]]"
                 role="radio"
-                aria-checked$="[[isShareTargetSelectedStr_(
-                                 item, selectedShareTarget)]]">
+                aria-checked$="[[boolToString_(selected)]]">
             </nearby-device>
           </template>
         </iron-list>

chrome/browser/resources/nearby_share/nearby_discovery_page.js

@@ -271,35 +271,35 @@ Polymer({
 
   /** @private */
   onSelectedShareTargetChanged_() {
-    // The device list gets removed from the DOM if there are no share targets.
-    if (!this.$.deviceList) {
+    const deviceList = this.$$('#deviceList');
+    if (!deviceList) {
+      // deviceList is in dom-if and may not be found
       return;
     }
 
-    // <iron-list> causes |this.$.deviceList.selectedItem| to be null if tapped
-    // a second time. Manually reselect the last item to preserve selection.
-    if (!this.$.deviceList.selectedItem && this.lastSelectedShareTarget_) {
-      this.$.deviceList.selectItem(this.lastSelectedShareTarget_);
+    // <iron-list> causes |selectedItem| to be null if tapped a second time.
+    // Manually reselect the last item to preserve selection.
+    if (!deviceList.selectedItem && this.lastSelectedShareTarget_) {
+      // Use async to make sure this happens after |selectedItem| gets its
+      // final value.
+      this.async(() => {
+        const deviceList = this.$$('#deviceList');
+        if (!deviceList.selectedItem) {
+          deviceList.selectItem(this.lastSelectedShareTarget_);
+        }
+      });
+    } else {
+      this.lastSelectedShareTarget_ = deviceList.selectedItem;
     }
-    this.lastSelectedShareTarget_ = this.$.deviceList.selectedItem;
-  },
-
-  /**
-   * @param {!nearbyShare.mojom.ShareTarget} shareTarget
-   * @return {boolean}
-   * @private
-   */
-  isShareTargetSelected_(shareTarget) {
-    return this.selectedShareTarget === shareTarget;
   },
 
   /**
-   * @param {!nearbyShare.mojom.ShareTarget} shareTarget
+   * @param {boolean} bool
    * @return {string}
    * @private
    */
-  isShareTargetSelectedStr_(shareTarget) {
-    return this.isShareTargetSelected_(shareTarget).toString();
+  boolToString_(bool) {
+    return bool.toString();
   },
 
   /**