Move all the butter bar code to a separate class. Fix some style, method & variable names and simpl…

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

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 html.col-resize * {
   cursor: col-resize !important;
 }
 
 /* Outer frame of the dialog. */
 body {
@@ skipping 62 matching lines @@
   border-color: #aaa;
   color: #888;
 }
 
 /* Drop opacity of selected rows to give a visual feedback on copy/cut
  * operation. */
 .blink {
   opacity: 0.8;
 }
 
-.butter-bar {
+#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;
   background-color: rgba(95, 95, 95, 0.17);
   color: #222;
   display: -webkit-box;
   padding-left: 1em;
   padding-right: 1em;
   padding-top: 2px;
   position: absolute;
   top: 0;
 }
 
-.butter-bar.before-show {
+#butter-bar.before-show {
   -webkit-transform: translate3d(0, -30px, 0);
   opacity: 0;
 }
 
-.butter-bar.after-show {
+#butter-bar.after-show {
   -webkit-transform: translate3d(0, 50px, 0);
   opacity: 0;
 }
 
-.butter-bar .content {
+#butter-bar .content {
   padding-bottom: 8px;
   padding-right: 5px;
 }
 
 .hide-in-butter {
   display: none;
 }
 
-.butter-bar .actions {
+#butter-bar .actions {
   -webkit-box-orient: horizontal;
   -webkit-box-pack: end;
   display: -webkit-box;
 }
 
-.butter-bar .actions a {
+#butter-bar .actions a {
   background: center center no-repeat;
   background-image: -webkit-image-set(
     url('../images/files/ui/close_bar.png') 1x,
     url('../images/files/ui/2x/close_bar.png') 2x);
   display: inline-block;
   height: 12px;
   padding: 4px;
   width: 12px;
 }
 
-.butter-bar.error {
+#butter-bar.error {
   background-color: rgba(221, 75, 57, 0.2);
   border: 1px solid rgba(221, 75, 57, 0.5);
   border-radius: 2px;
   padding: 2px 1em;
 }
 
 .progress-bar {
   background-image: -webkit-linear-gradient(top, #e9e9e9 0, #f9f9f9 100%);
   border: 1px solid #a1a1a1;
   border-radius: 3px;
@@ skipping 1314 matching lines @@
   height: 100%;
 }
 
 #list-container .table-header-cell:hover {
   background-color: #f2f2f2;
 }
 
 button:focus {
   outline-color: rgb(77, 144, 254);
 }