[Nearby] Show errors on receive confirmation page

Add an error section to the receive confirmation page. Add a
|transferStatus_| property the receive dialog and bind it to a
corresponding property on the confirm page. Set the error strings
when the transfer status changes.

The error messages shown are not final -- more work to follow. I wanted
to get this CL submitted first since it sets up some basic layout for
the receive confirmation page, and other work on that page can be done
in parallel.

Screenshot: https://screenshot.googleplex.com/6DUqcghbkevoRwG.png

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

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="../../shared/nearby_page_template.html">
 <link rel="import" href="../../shared/nearby_device.html">
 <link rel="import" href="../../shared/nearby_preview.html">
@@ -7,15 +8,88 @@
 
 <dom-module id="nearby-share-confirm-page">
   <template>
+    <style>
+      #centerContent {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        margin: 0 32px;
+      }
+
+      #processRow {
+        display: flex;
+        flex-grow: 1;
+      }
+
+      #processRowContent {
+        align-self: center;
+        display: flex;
+        flex-grow: 1;
+        margin: 24px 8px;
+      }
+
+      #errorSection {
+        align-items: flex-start;
+        display: flex;
+        flex-direction: row;
+        padding: 8px;
+      }
+
+      #error {
+        align-items: flex-start;
+        display: flex;
+        flex-direction: column;
+        font-size: 12px;
+      }
+
+      #errorTitle {
+        color: var(--google-red-600);
+        font-weight: bold;
+        margin-bottom: 3px;
+      }
+
+      #errorDescription {
+        color: var(--google-grey-refresh-700);
+        line-height: 13px;
+      }
+
+      #errorIcon {
+        fill: var(--google-red-600);
+        flex-shrink: 0;
+        height: 20px;
+        margin-inline-end: 12px;
+        width: 20px;
+      }
+    </style>
     <nearby-page-template title="$i18n{nearbyShareReceiveConfirmPageTitle}"
         action-button-label="$i18n{confirm}"
         action-button-event-name="confirm"
         cancel-button-label="$i18n{cancel}"
-        cancel-button-event-name="reject">
-      <div slot="content">
-        <!-- TODO(vecore): Replace with real ui. -->
-        <div id="shareTargetName">[[shareTarget.name]]</div>
-        <div id="connectionToken">[[connectionToken]]</div>
+        cancel-button-event-name="reject"
+        close-only="[[errorTitle_]]">
+      <div id="centerContent" slot="content">
+        <div id="processRow">
+          <div id="processRowContent">
+            <!-- TODO(vecore): Replace with real ui. -->
+            <div id="shareTargetName">[[shareTarget.name]]</div>
+            <div id="connectionToken">[[connectionToken]]</div>
+          </div>
+        </div>
+
+        <!-- TODO(crbug.com/1149546) factor error section out -->
+        <template is="dom-if" if="[[errorTitle_]]">
+          <div id="errorSection">
+            <iron-icon id="errorIcon" icon="nearby20:info"></iron-icon>
+            <div id="error" role="alert" aria-labelledby="errorTitle"
+                aria-describedby="errorDescription">
+              <div id="errorTitle" aria-hidden="true">[[errorTitle_]]</div>
+              <div id="errorDescription" aria-hidden="true">
+                [[errorDescription_]]
+              </div>
+            </div>
+          </div>
+        </template>
       </div>
     </nearby-page-template>
   </template>

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

@@ -10,6 +10,8 @@
 Polymer({
   is: 'nearby-share-confirm-page',
 
+  behaviors: [I18nBehavior],
+
   properties: {
     /** @type {?nearbyShare.mojom.ShareTarget} */
     shareTarget: {
@@ -22,5 +24,65 @@ Polymer({
       type: String,
       value: null,
     },
-  }
+
+    /**
+     * @type {?nearbyShare.mojom.TransferStatus}
+     */
+    transferStatus: {
+      type: nearbyShare.mojom.TransferStatus,
+      value: null,
+      observer: 'onTransferStatusChanged_',
+    },
+
+    /**
+     * Header text for error. Controls error display on the confirm page.
+     * The error section is not displayed if this is falsey.
+     * @private {?string}
+     */
+    errorTitle_: {
+      type: String,
+      value: null,
+    },
+
+    /**
+     * Description text for error display on confirm page, displayed under the
+     * error title.
+     * @private {?string}
+     */
+    errorDescription_: {
+      type: String,
+      value: null,
+    },
+  },
+
+  /**
+   * Update the |errorTitle_| and the |errorDescription_| when the transfer
+   * status changes.
+   * @param {?nearbyShare.mojom.TransferStatus} newStatus
+   */
+  onTransferStatusChanged_(newStatus) {
+    // TODO(cclem) review this mapping, add missing statuses, make sure the
+    // strings still make sense in the context of the receive page
+    switch (newStatus) {
+      case nearbyShare.mojom.TransferStatus.kTimedOut:
+        this.errorTitle_ = this.i18n('nearbyShareErrorTimeOut');
+        this.errorDescription_ = this.i18n('nearbyShareErrorNoResponse');
+        break;
+      case nearbyShare.mojom.TransferStatus.kUnsupportedAttachmentType:
+        this.errorTitle_ = this.i18n('nearbyShareErrorCantShare');
+        this.errorDescription_ =
+            this.i18n('nearbyShareErrorUnsupportedFileType');
+        break;
+      case nearbyShare.mojom.TransferStatus.kMediaUnavailable:
+      case nearbyShare.mojom.TransferStatus.kNotEnoughSpace:
+      case nearbyShare.mojom.TransferStatus.kFailed:
+      case nearbyShare.mojom.TransferStatus.kAwaitingRemoteAcceptanceFailed:
+        this.errorTitle_ = this.i18n('nearbyShareErrorCantShare');
+        this.errorDescription_ = this.i18n('nearbyShareErrorSomethingWrong');
+        break;
+      default:
+        this.errorTitle_ = null;
+        this.errorDescription = null;
+    }
+  },
 });

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

@@ -29,7 +29,8 @@
           </nearby-share-high-visibility-page>
           <nearby-share-confirm-page id="[[Page.CONFIRM]]" slot="view"
               share-target="[[shareTarget]]"
-              connection-token="[[connectionToken]]">
+              connection-token="[[connectionToken]]"
+              transfer-status="[[transferStatus_]]">
           </nearby-share-confirm-page>
           <nearby-onboarding-page id="[[Page.ONBOARDING]]" slot="view"
               settings="{{settings}}">

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

@@ -54,6 +54,15 @@ Polymer({
       type: Object,
       value: {},
     },
+
+    /**
+     * Status of the current transfer.
+     * @private {?nearbyShare.mojom.TransferStatus}
+     */
+    transferStatus_: {
+      type: nearbyShare.mojom.TransferStatus,
+      value: null,
+    }
   },
 
   listeners: {
@@ -141,6 +150,8 @@ Polymer({
    * @param {!nearbyShare.mojom.TransferMetadata} metadata
    */
   onTransferUpdate(shareTarget, metadata) {
+    this.transferStatus_ = metadata.status;
+
     if (metadata.status ===
         nearbyShare.mojom.TransferStatus.kAwaitingLocalConfirmation) {
       clearTimeout(this.closeTimeoutId_);