Add support for showing errors on file operations

Adds support for the 'error' status returned from file operations in
progress. Also allows the error panel item to be dismissed.

The error message can be too long to show on one line with the maximum
width of the panels, so it's split into 2 lines using regexps. This will
need an integration test to make sure translations fit in the maximum
width without generating ellipsis.

Bug: 947388, 979374
Change-Id: I3d33a5ab821c574cc454fb3520089cd949898e4a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1692422Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Alex Danilo <adanilo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#676234}

ui/file_manager/file_manager/foreground/elements/xf_button.js

@@ -37,7 +37,8 @@ class PanelButton extends HTMLElement {
                 background: url(../images/files/ui/pause.svg) no-repeat center;
               }
 
-              :host([data-category='cancel']) {
+              :host([data-category='cancel']),
+              :host([data-category='dismiss']) {
                 background: url(../images/files/ui/cancel.svg) no-repeat center;
               }
 

ui/file_manager/file_manager/foreground/elements/xf_panel_item.js

@@ -212,7 +212,7 @@ class PanelItem extends HTMLElement {
         secondaryButton = document.createElement('xf-button');
         secondaryButton.id = 'secondary-action';
         secondaryButton.onclick = this.onclick;
-        secondaryButton.dataset.category = 'retry';
+        secondaryButton.dataset.category = 'dismiss';
         buttonSpacer.insertAdjacentElement('afterend', secondaryButton);
         break;
       case this.panelTypeInfo:

ui/file_manager/file_manager/foreground/js/ui/progress_center_panel.js

@@ -338,12 +338,25 @@ class ProgressCenterPanel {
         if (signal === 'cancel' && item.cancelCallback) {
           item.cancelCallback();
         }
+        if (signal === 'dismiss') {
+          this.feedbackHost_.removePanelItem(panelItem);
+        }
       };
       panelItem.progress = item.progressRateInPercent.toString();
-      // Remove the feedback panel when complete, and create
-      // an activity complete panel.
-      if (item.state == 'completed') {
-        this.feedbackHost_.removePanelItem(panelItem);
+      switch (item.state) {
+        case 'completed':
+        case 'canceled':
+          // Remove the feedback panel when complete, and TODO(create
+          // an activity complete panel).
+          this.feedbackHost_.removePanelItem(panelItem);
+          break;
+        case 'error':
+          panelItem.panelType = panelItem.panelTypeError;
+          panelItem.setAttribute(
+              'primary-text', item.message.replace(/\. .*/, '.'));
+          panelItem.setAttribute(
+              'secondary-text', item.message.replace(/.*\. /, ''));
+          break;
       }
     } else if (panelItem) {
       this.feedbackHost_.removePanelItem(panelItem);