Fix CSS and timeout handling for the Files app butter bar

chrome/browser/resources/file_manager/css/file_manager.css

Index: chrome/browser/resources/file_manager/css/file_manager.css
diff --git a/chrome/browser/resources/file_manager/css/file_manager.css b/chrome/browser/resources/file_manager/css/file_manager.css
index 819f16aa77a8f8e03778df52002972daa7918396..55049647ecf6c1ec299e7389ca64123239368983 100644
--- a/chrome/browser/resources/file_manager/css/file_manager.css
+++ b/chrome/browser/resources/file_manager/css/file_manager.css
@@ -83,42 +83,30 @@ input[type='submit'][disabled]:hover {
 #butter-bar {
   -webkit-box-align: end;
   -webkit-box-orient: horizontal;
-  -webkit-transform: translate3d(0, 1px, 0);
-  -webkit-transition-duration: 300ms;
-  -webkit-transition-property: opacity, -webkit-transform;
+  -webkit-transition: opacity 300ms;
   background-color: rgba(95, 95, 95, 0.17);
   color: #222;
   display: -webkit-box;
-  padding-left: 1em;
-  padding-right: 1em;
-  padding-top: 2px;
+  padding: 0 1em;
   position: absolute;
-  top: 0;
-}
-
-#butter-bar.before-show {
-  -webkit-transform: translate3d(0, -30px, 0);
-  opacity: 0;
+  top: 1px;
 }
 
-#butter-bar.after-show {
-  -webkit-transform: translate3d(0, 50px, 0);
+#butter-bar:not(.visible) {
   opacity: 0;
+  pointer-events: none;
 }
 
 #butter-bar .content {
-  padding-bottom: 8px;
-  padding-right: 5px;
-}
-
-.hide-in-butter {
-  display: none;
+  padding-bottom: 4px;
+  padding-top: 4px;
 }
 
 #butter-bar .actions {
   -webkit-box-orient: horizontal;
   -webkit-box-pack: end;
   display: -webkit-box;
+  height: 20px;
 }
 
 #butter-bar .actions a {
@@ -128,10 +116,18 @@ input[type='submit'][disabled]:hover {
     url('../images/files/ui/2x/close_bar.png') 2x);
   display: inline-block;
   height: 12px;
-  padding: 4px;
+  padding: 4px 2px;
   width: 12px;
 }
 
+#butter-bar .actions a:first-child {
+  margin-left: 2px;
+}
+
+#butter-bar .actions a:last-child {
+  margin-right: -2px;  /* Overlap the padding with butter-bar padding. */
+}
+
 #butter-bar.error {
   background-color: rgba(221, 75, 57, 0.2);
   border: 1px solid rgba(221, 75, 57, 0.5);
@@ -143,6 +139,7 @@ input[type='submit'][disabled]:hover {
   background-image: -webkit-linear-gradient(top, #e9e9e9 0, #f9f9f9 100%);
   border: 1px solid #a1a1a1;
   border-radius: 3px;
+  margin-bottom: 2px;
   margin-top: 3px;
   width: 320px;
 }