Fix padding for multiple progress panel display.

CL:1673254 changes the height of panel items when there are
multiple progress panels being shown.

This reduces the padding between the panels and adds padding
at the top and bottom of the plurality of panel items.

Bug: 947388
Change-Id: Idd44e3f567b28f3ce618654c389014d320d8a8cd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1679720Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#672785}

ui/file_manager/file_manager/foreground/elements/files_xf_elements.css

@@ -19,7 +19,6 @@ xf-display-panel {
     display: flex;
     flex-direction: row;
     max-width: 400px;
-    min-height: 68px;
 }
 
 .xf-button {

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

@@ -79,10 +79,19 @@ class DisplayPanel extends HTMLElement {
               }
               /* Limit to 3 visible progress panels before scroll */
               #panels {
-                  max-height: calc(92px * 3);
+                  max-height: calc(192px + 28px);
               }
               xf-panel-item:not(:only-child) {
-                --multi-progress-height: 92px;
+                --progress-height: 64px;
+              }
+              xf-panel-item:not(:only-child):first-child {
+                --progress-padding-top: 14px;
+              }
+              xf-panel-item:not(:only-child):last-child {
+                --progress-padding-bottom: 14px;
+              }
+              xf-panel-item:only-child {
+                --progress-height: 68px;
               }
               @keyframes setcollapse {
                 0% {
@@ -91,12 +100,12 @@ class DisplayPanel extends HTMLElement {
                   opacity: 0;
                 }
                 75% {
-                  max-height: calc(92px * 3);;
+                  max-height: calc(192px + 28px);
                   max-width: 400px;
                   opacity: 0;
                 }
                 100% {
-                  max-height: calc(92px * 3);;
+                  max-height: calc(192px + 28px);
                   max-width: 400px;
                   opacity: 1;
                 }
@@ -104,12 +113,12 @@ class DisplayPanel extends HTMLElement {
 
               @keyframes setexpand {
                 0% {
-                  max-height: calc(92px * 3);;
+                  max-height: calc(192px + 28px);
                   max-width: 400px;
                   opacity: 1;
                 }
                 25% {
-                  max-height: calc(92px * 3);;
+                  max-height: calc(192px + 28px);
                   max-width: 400px;
                   opacity: 0;
                 }

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

@@ -43,7 +43,12 @@ class PanelItem extends HTMLElement {
               href='foreground/elements/files_xf_elements.css'>
             <style>
               :host([panel-type='0']) .xf-panel-item {
-                height: var(--multi-progress-height);
+                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;
               }
             </style>
             <div class='xf-panel-item'>