Butter bar visual refresh.

BUG=137610
TEST=Manual test.


Review URL: https://chromiumcodereview.appspot.com/10827296

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@151484 0039d316-1c4b-4281-b951-d872f2087c98

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

@@ -84,16 +84,31 @@ input[type='submit'][disabled]:hover {
   opacity: 0.8;
 }
 
+#butter-bar-container {
+  -webkit-box-pack: center;
+  display: -webkit-box;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 3;
+}
+
 #butter-bar {
   -webkit-box-align: end;
   -webkit-box-orient: horizontal;
   -webkit-transition: opacity 300ms;
-  background-color: rgba(95, 95, 95, 0.17);
+  background-color: #e3e3e3;
   color: #222;
   display: -webkit-box;
+  max-width: 340px;
+  min-width: 40px;
   padding: 0 1em;
-  position: absolute;
+  pointer-events: auto;
   top: 1px;
+  width: 30%;
+  z-index: 2;
 }
 
 #butter-bar:not(.visible) {
@@ -102,6 +117,8 @@ input[type='submit'][disabled]:hover {
 }
 
 #butter-bar .content {
+  -webkit-box-flex: 1;
+  overflow: hidden;
   padding-bottom: 4px;
   padding-top: 4px;
 }
@@ -140,11 +157,11 @@ input[type='submit'][disabled]:hover {
 }
 
 .progress-bar {
+  -webkit-box-flex: 1;
   border: 1px solid #999;
   margin-bottom: 2px;
   margin-top: 3px;
   padding: 1px;
-  width: 320px;
 }
 
 .progress-track {

chrome/browser/resources/file_manager/js/butter_bar.js

@@ -119,9 +119,6 @@ ButterBar.prototype.update_ = function(message, opt_options) {
     this.butter_.querySelector('.progress-track').style.width =
         (opt_options.progress * 100) + '%';
   }
-
-  this.butter_.style.left =
-      (this.dialogDom_.clientWidth - this.butter_.clientWidth) / 2 + 'px';
 };
 
 /**

chrome/browser/resources/file_manager/main.html

@@ -244,6 +244,7 @@
       </div>
       <button class=cancel i18n-content=CANCEL_LABEL>[CANCEL]</button>
     </div>
+    <div id="butter-bar-container">
       <div id="butter-bar">
         <div class="content">
           <div class="butter-message"></div>
@@ -253,6 +254,7 @@
         </div>
         <div class="actions" hidden></div>
       </div>
+    </div>
     <div id="drag-image-container"></div>
     <iframe id="command-dispatcher" hidden></iframe>
   </body>