[files-progress] Add new panel styles for transfer details

Add the following attributes to the existing xf-panels to flag this
new feature (transfer details) via CSS style:

- detailed-panel:
  All new panels (including summary panel) indicated by this attribute.
- detailed-summary:
  Indicates summary panel.
- data-category(expanded|collapsed):
  Indicating panel collapsed or expanded status.

Currently only the expand/collapse button keeps this attribute(status)
but the CL sets this attribute in the panel level as well. It is used
by summary panel text to expand and collapse it along with button. The
|textDiv| is added to handle the expand/collapse status of panels.

Update existing colors to those in files-ng spec. These color values
are identical to the non-files-ng colors, so no visible color change
for the non-files-ng case.

Bug: 953308
Change-Id: Ie456cc31594dec802757729be50e0434653192bf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2307551
Commit-Queue: Omid Tourzan <oto@chromium.org>
Reviewed-by: Alex Danilo <adanilo@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#791138}

ui/file_manager/file_manager/foreground/elements/files_xf_elements_unittest.js

@@ -12,6 +12,22 @@ function setUpPage() {
   document.body.innerHTML +=
       '<xf-display-panel id="test-xf-display-panel"></xf-display-panel>';
   displayPanel = assert(document.querySelector('#test-xf-display-panel'));
+
+  const enableFilesTransferDetails = true;
+
+  // Mock LoadTimeData strings for transfer details feature.
+  window.loadTimeData.data = {
+    FILES_TRANSFER_DETAILS_ENABLED: enableFilesTransferDetails
+  };
+
+  window.loadTimeData.getString = id => {
+    return window.loadTimeData.data_[id] || id;
+  };
+
+  /** @return {boolean} */
+  window.isTransferDetailsEnabled = () => {
+    return enableFilesTransferDetails;
+  };
 }
 
 function tearDown() {

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

@@ -195,7 +195,7 @@ class DisplayPanel extends HTMLElement {
    * @private
    */
   toggleSummary(event) {
-    const panel = event.target.parent;
+    const panel = event.currentTarget.parent;
     const summaryPanel = panel.summary_.querySelector('xf-panel-item');
     const expandButton =
         summaryPanel.shadowRoot.querySelector('#primary-action');
@@ -205,6 +205,7 @@ class DisplayPanel extends HTMLElement {
       panel.panels_.listener_ = panel.panelExpandFinished;
       panel.panels_.addEventListener('animationend', panel.panelExpandFinished);
       panel.panels_.setAttribute('class', 'expanded expanding');
+      summaryPanel.setAttribute('data-category', 'expanded');
     } else {
       panel.collapsed_ = true;
       expandButton.setAttribute('data-category', 'expand');
@@ -215,6 +216,7 @@ class DisplayPanel extends HTMLElement {
       panel.panels_.addEventListener(
           'animationend', panel.panelCollapseFinished);
       panel.panels_.setAttribute('class', 'collapsed expanding');
+      summaryPanel.setAttribute('data-category', 'collapsed');
     }
   }
 
@@ -306,6 +308,12 @@ class DisplayPanel extends HTMLElement {
       if (button) {
         button.removeEventListener('click', this.toggleSummary);
       }
+      if (util.isTransferDetailsEnabled()) {
+        const textDiv = summaryPanel.textDiv;
+        if (textDiv) {
+          textDiv.removeEventListener('click', this.toggleSummary);
+        }
+      }
       summaryPanel.remove();
       this.panels_.hidden = false;
       this.separator_.hidden = true;
@@ -317,18 +325,30 @@ class DisplayPanel extends HTMLElement {
       summaryPanel = document.createElement('xf-panel-item');
       summaryPanel.setAttribute('panel-type', 1);
       summaryPanel.id = 'summary-panel';
+      if (util.isTransferDetailsEnabled()) {
+        summaryPanel.setAttribute('detailed-summary', '');
+      }
       const button = summaryPanel.primaryButton;
       if (button) {
         button.parent = this;
         button.addEventListener('click', this.toggleSummary);
       }
+      if (util.isTransferDetailsEnabled()) {
+        const textDiv = summaryPanel.textDiv;
+        if (textDiv) {
+          textDiv.parent = this;
+          textDiv.addEventListener('click', this.toggleSummary);
+        }
+      }
       summaryHost.appendChild(summaryPanel);
       // Setup the panels based on expand/collapse state of the summary panel.
       if (this.collapsed_) {
         this.panels_.hidden = true;
+        summaryPanel.setAttribute('data-category', 'collapsed');
       } else {
         this.setSummaryExpandedState(button);
         this.panels_.classList.add('expandfinished');
+        summaryPanel.setAttribute('data-category', 'expanded');
       }
     }
     if (summaryPanel) {
@@ -351,6 +371,9 @@ class DisplayPanel extends HTMLElement {
     panel.setAttribute('indicator', 'progress');
     this.items_.push(/** @type {!PanelItem} */ (panel));
     this.setAriaHidden_();
+    if (util.isTransferDetailsEnabled()) {
+      this.setAttribute('detailed-panel', '');
+    }
     return /** @type {!PanelItem} */ (panel);
   }
 

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

@@ -104,7 +104,7 @@ class PanelItem extends HTMLElement {
               }
 
               .xf-panel-label-text {
-                  color: rgb(32, 33, 36);
+                  color: var(--google-grey-900);
                   max-width: 216px;
                   text-overflow: ellipsis;
                   overflow: hidden;
@@ -112,18 +112,18 @@ class PanelItem extends HTMLElement {
               }
 
               .xf-panel-secondary-text {
-                  color: rgb(95, 99, 104);
+                  color: var(--google-grey-700);
               }
 
-              .xf-padder-4 {
+              :host(:not([detailed-panel])) .xf-padder-4 {
                   width: 4px;
               }
 
-              .xf-padder-16 {
+              :host(:not([detailed-panel])) .xf-padder-16 {
                   width: 16px;
               }
 
-              .xf-grow-padder {
+              :host(:not([detailed-panel])) .xf-grow-padder {
                   flex-grow: 16;
                   width: 24px;
               }
@@ -132,7 +132,7 @@ class PanelItem extends HTMLElement {
                   padding: 16px;
               }
 
-              iron-icon {
+              :host(:not([detailed-summary])) iron-icon {
                   height: 36px;
                   padding: 16px;
                   width: 36px;
@@ -148,13 +148,86 @@ class PanelItem extends HTMLElement {
               }
 
               :host([panel-type='0']) .xf-panel-item {
-                height: var(--progress-height);
-                padding-top: var(--progress-padding-top);
-                padding-bottom: var(--progress-padding-bottom);
+                  height: var(--progress-height);
+                  padding-top: var(--progress-padding-top);
+                  padding-bottom: var(--progress-padding-bottom);
               }
 
-              :not(:host([panel-type='0'])) .xf-panel-item {
-                height: 68px;
+              :host(:not([panel-type='0'])) .xf-panel-item {
+                  height: 68px;
+              }
+
+              :host([detailed-panel]) .xf-panel-item {
+                  height: 68px;
+                  width: 400px;
+              }
+
+              :host([detailed-panel]:not([detailed-summary])) .xf-panel-text {
+                  margin-inline-end: 24px;
+                  margin-inline-start: 24px;
+              }
+
+              :host([detailed-panel][panel-type='2']) .xf-panel-secondary-text {
+                  color: var(--google-green-600);
+              }
+
+              :host([detailed-panel]:not([detailed-summary])) xf-button {
+                  margin-inline-end: 12px;
+                  margin-inline-start: auto;
+              }
+
+              :host([detailed-panel]:not([detailed-summary])) #indicator {
+                  display: none;
+              }
+
+              :host([detailed-summary][data-category='collapsed'])
+              .xf-panel-item {
+                  width: 236px;
+              }
+
+              :host([detailed-summary]) .xf-panel-text {
+                  align-items: center;
+                  display: flex;
+                  height: 48px;
+                  max-width: unset;
+                  width: 100%;
+              }
+
+              :host([detailed-summary]) #indicator {
+                  margin-inline-start: 22px;
+                  padding: 0;
+              }
+
+              :host([detailed-summary][data-category='collapsed']) #indicator {
+                  margin-inline-end: 20px;
+                  width: 28px;
+              }
+
+              :host([detailed-summary][data-category='expanded']) #indicator {
+                  margin-inline-end: 18px;
+                  width: 32px;
+              }
+
+              :host([detailed-summary]) #primary-action {
+                  align-items: center;
+                  display: flex;
+                  height: 48px;
+                  justify-content: center;
+                  margin-inline-end: 10px;
+                  margin-inline-start: auto;
+                  width: 48px;
+              }
+
+              :host([detailed-panel]) .xf-padder-4 {
+                  display: none;
+              }
+
+              :host([detailed-panel]) .xf-padder-16 {
+                  display: none;
+              }
+
+              :host([detailed-panel]) .xf-grow-padder {
+                  display: none;
               }
             </style>
             <div class='xf-panel-item'>
@@ -195,6 +268,10 @@ class PanelItem extends HTMLElement {
    * @private
    */
   setPanelType(type) {
+    if (util.isTransferDetailsEnabled()) {
+      this.setAttribute('detailed-panel', 'detailed-panel');
+    }
+
     if (this.panelType_ === type) {
       return;
     }
@@ -596,6 +673,13 @@ class PanelItem extends HTMLElement {
     return this.shadowRoot.querySelector('#secondary-action');
   }
 
+  /**
+   * Getter for the panel text div.
+   */
+  get textDiv() {
+    return this.shadowRoot.querySelector('.xf-panel-text');
+  }
+
   /**
    * Setter to replace the default aria-label on any close button.
    * @param {string} text Text to set for the 'aria-label'.