[Nearby] Display errors on discovery page

Display a generic error message on the discovery page when the share
target selection fails or if we can't get the discovery manager. Hide
the help section when the error section is showing to avoid crowding
the page, since the help is irrelevant if we're in an error state.

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

chrome/browser/resources/nearby_share/nearby_confirmation_page.html

@@ -112,6 +112,7 @@
       </cr-checkbox>
     </template>
 
+    <!-- TODO(crbug.com/1149546) factor error section into its own component -->
     <template is="dom-if" if="[[errorTitle_]]">
       <div id="errorSection">
         <iron-icon id="errorIcon" icon="nearby20:info"></iron-icon>

chrome/browser/resources/nearby_share/nearby_discovery_page.html

@@ -30,6 +30,41 @@
     margin-inline-start:  var(--nearby-page-space-large-inline);
   }
 
+  #errorSection {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: row;
+    margin-inline-end:  var(--nearby-page-space-inline);
+    margin-inline-start: var(--nearby-page-space-inline);
+    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: 3px 0;
+  }
+
+  #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;
+  }
+
   #help {
     align-items: flex-start;
     color: var(--google-grey-refresh-700);
@@ -113,14 +148,26 @@
         </iron-list>
       </template>
     </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')]]">
+    <!-- TODO(crbug.com/1149546) factor error section into its own component -->
+    <template is="dom-if" if="[[errorTitle_]]">
+      <div id="errorSection">
+        <iron-icon id="errorIcon" icon="nearby20:info"></iron-icon>
+        <div id="error">
+          <div id="errorTitle">[[errorTitle_]]</div>
+          <div id="errorDescription">[[errorDescription_]]</div>
+        </div>
       </div>
-    </div>
+    </template>
+    <template is="dom-if" if="[[!errorTitle_]]">
+      <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>
+    </template>
     <cr-lottie animation-url="nearby_share_pulse_animation.json"
         autoplay="true">
     </cr-lottie>

chrome/browser/resources/nearby_share/nearby_discovery_page.js

@@ -99,6 +99,25 @@ Polymer({
       type: Array,
       value: [],
     },
+
+    /**
+     * Header text for error. The error section is not displayed if this is
+     * falsey.
+     * @private {?string}
+     */
+    errorTitle_: {
+      type: String,
+      value: null,
+    },
+
+    /**
+     * Description text for error, displayed under the error title.
+     * @private {?string}
+     */
+    errorDescription_: {
+      type: String,
+      value: null,
+    },
   },
 
   listeners: {
@@ -187,7 +206,9 @@ Polymer({
         .startDiscovery(this.mojoEventTarget_.$.bindNewPipeAndPassRemote())
         .then(response => {
           if (!response.success) {
-            // TODO(crbug.com/1123934): Show error.
+            this.errorTitle_ = this.i18n('nearbyShareErrorCantShare');
+            this.errorDescription_ =
+                this.i18n('nearbyShareErrorSomethingWrong');
             return;
           }
         });
@@ -259,7 +280,9 @@ Polymer({
           const {result, transferUpdateListener, confirmationManager} =
               response;
           if (result !== nearbyShare.mojom.SelectShareTargetResult.kOk) {
-            // TODO(crbug.com/crbug.com/1123934): Show error.
+            this.errorTitle_ = this.i18n('nearbyShareErrorCantShare');
+            this.errorDescription_ =
+                this.i18n('nearbyShareErrorSomethingWrong');
             return;
           }