Make error panels appear immediately

When a file operation error occurs, the progress panel that was
providing visual feedback is changed to an error panel.

Since file operations that take less than 2 seconds don't show the
progress panels, the side-effect is the error panel won't display
until the 2 second timeout happens.

Call the attachPanel() method immediately when an error status is
sent and add a check in the display panel custom element to ignore
attachPanel() calls when the panel is already attached.

Test needed.

Bug: 1009853
Change-Id: I0829c3747240d35d81607385dab17e57273aa84d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1833022
Commit-Queue: Alex Danilo <adanilo@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#702262}

ui/file_manager/file_manager/foreground/elements/xf_display_panel.js

@@ -333,11 +333,18 @@ class DisplayPanel extends HTMLElement {
    */
   attachPanelItem(panel) {
     const displayPanel = panel.parent;
+
     // Only attach the panel if it hasn't been removed.
     const index = displayPanel.items_.indexOf(panel);
     if (index === -1) {
       return;
     }
+
+    // If it's already attached, nothing to do here.
+    if (panel.isConnected) {
+      return;
+    }
+
     displayPanel.panels_.appendChild(panel);
     displayPanel.updateSummaryPanel();
   }

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

@@ -418,12 +418,11 @@ class ProgressCenterPanel {
         };
         const primaryText =
             this.generateSourceString_(item, panelItem.userData);
-        panelItem.setAttribute('primary-text', primaryText);
+        panelItem.primaryText = primaryText;
         panelItem.setAttribute('data-progress-id', item.id);
         if (item.destinationMessage) {
-          panelItem.setAttribute(
-              'secondary-text',
-              strf('TO_FOLDER_NAME', item.destinationMessage));
+          panelItem.secondaryText =
+              strf('TO_FOLDER_NAME', item.destinationMessage);
         }
         // On progress panels, make the cancel button aria-lable more useful.
         const cancelLabel = strf('CANCEL_ACTIVITY_LABEL', primaryText);
@@ -446,12 +445,10 @@ class ProgressCenterPanel {
               (item.type === 'copy' || item.type === 'move')) {
             const donePanelItem = this.completedHost_.addPanelItem(item.id);
             donePanelItem.panelType = donePanelItem.panelTypeDone;
-            donePanelItem.setAttribute(
-                'primary-text',
-                this.generateSourceString_(item, panelItem.userData));
-            donePanelItem.setAttribute(
-                'secondary-text',
-                this.generateDestinationString_(item, panelItem.userData));
+            donePanelItem.primaryText =
+                this.generateSourceString_(item, panelItem.userData);
+            donePanelItem.secondaryText =
+                this.generateDestinationString_(item, panelItem.userData);
             donePanelItem.signalCallback = (signal) => {
               if (signal === 'dismiss') {
                 this.completedHost_.removePanelItem(donePanelItem);
@@ -470,7 +467,9 @@ class ProgressCenterPanel {
           break;
         case 'error':
           panelItem.panelType = panelItem.panelTypeError;
-          panelItem.setAttribute('primary-text', item.message);
+          panelItem.primaryText = item.message;
+          // Make sure the panel is attached so it shows immediately.
+          this.feedbackHost_.attachPanelItem(panelItem);
           break;
       }
     } else if (panelItem) {