Move wallpaper progress bar on top of thumbnails (completely remove butter bar)

chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css

 /* Copyright (c) 2013 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 {
   height: 100%;
 }
 
 body {
   background-color: rgba(20, 20, 20, 0.93);
@@ skipping 55 matching lines @@
 #categories-list > li > div {
   line-height: 34px;
   padding: 0 10px;
 }
 
 #categories-list > li[selected] > div {
   color: #eee;
 }
 
 #close {
-  margin-top: 5px;
-  opacity: 0.5;
+  background-image: -webkit-image-set(
+    url('../images/ui/close-white.png') 1x,
+    url('../images/ui/2x/close-white.png') 2x);
+  height: 14px;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 14px
 }
 
 #close:hover {
-  opacity: 0.7;
+  background-image: -webkit-image-set(
+    url('../images/ui/close-white-hover.png') 1x,
+    url('../images/ui/2x/close-white-hover.png') 2x);
 }
 
 #bar {
   -webkit-transition: left 130ms ease-in-out;
   background-color: #eee;
   height: 4px;
   position: absolute;
   top: 0;
 }
 
@@ skipping 53 matching lines @@
   position: relative;
   width: 108px;
 }
 
 .image-picker [role=listitem]:hover {
   outline: 3px solid #f1f1f1;
   z-index: 1;
 }
 
 .image-picker .check {
-  left: 3px;
+  background-image: -webkit-image-set(
+    url('../images/ui/check.png') 1x,
+    url('../images/ui/2x/check.png') 2x);
+  height: 32px;
+  left: 38px;
   position: absolute;
-  top: 49px;
-}
-
-.image-picker [active] .check {
-  background-image: url('../images/ui/check.png');
-  height: 15px;
-  width: 20px;
+  top: 18px;
+  width: 32px;
   z-index: 3;
 }
 
-
 ::-webkit-scrollbar {
   width: 6px;
 }
 
 ::-webkit-scrollbar-thumb {
   background: #aaa;
 }
 
 ::-webkit-scrollbar-thumb:hover {
   background: #888;
@@ skipping 49 matching lines @@
   -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
   height: 80px;
   width: 128px;
 }
 
 /* [hidden] does display:none, but its priority is too low. */
 [hidden] {
   display: none !important;
 }
 
-/* The butter bar styles are copied from file_manager.css. We will revisit
- * it to see if we can share some code after butter bar is integrated with
- * Photo Editor.
- * See http://codereview.chromium.org/10916149/ for details.
- */
-/* TODO(bshe): Remove these styles if we can share code with file manager. */
-#butter-bar-container {
-  -webkit-box-pack: center;
-  display: -webkit-box;
-  left: 0;
-  pointer-events: none;
+.progress-bar {
+  background-color: rgba(255, 255, 255, 0.7);
+  height: 6px;
   position: absolute;
-  top: 0;
+  top: 62px;
   width: 100%;
-  z-index: 3;
-}
-
-#butter-bar {
-  -webkit-box-align: end;
-  -webkit-box-orient: horizontal;
-  -webkit-transition: opacity 300ms;
-  background-color: #e3e3e3;
-  color: #222;
-  display: -webkit-box;
-  max-width: 340px;
-  min-width: 40px;
-  padding: 0 1em;
-  pointer-events: auto;
-  top: 1px;
-  width: 30%;
-  z-index: 2;
-}
-
-#butter-bar:not(.visible) {
-  opacity: 0;
-  pointer-events: none;
-}
-
-#butter-bar .content {
-  -webkit-box-flex: 1;
-  overflow: hidden;
-  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 {
-  background: center center no-repeat;
-  background-image: -webkit-image-set(
-    url('../images/ui/close_bar.png') 1x,
-    url('../images/ui/2x/close_bar.png') 2x);
-  display: inline-block;
-  height: 12px;
-  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: rgb(236, 207, 203);
-  border: 1px solid rgba(221, 75, 57, 0.5);
-  border-radius: 2px;
-  padding: 2px 1em;
-}
-
-.progress-bar {
-  -webkit-box-flex: 1;
-  border: 1px solid #999;
-  margin-bottom: 2px;
-  margin-top: 3px;
-  padding: 1px;
 }
 
 .progress-track {
-  -webkit-animation-duration: 800ms;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: bg;
-  -webkit-animation-timing-function: linear;
-  background-color: #ccc;
-  background-image: -webkit-linear-gradient(315deg, transparent,
-      transparent 33%, rgba(0, 0, 0, 0.12) 33%, rgba(0, 0, 0, 0.12) 66%,
-      transparent 66%, transparent);
-  background-position: 0 0;
-  background-repeat: repeat-x;
-  background-size: 16px 8px;
-  height: 5px;
+  -webkit-transition: width 1ms linear;
+  background-color: rgb(66, 129, 244);
+  height: 100%;
+  width: 0;
 }
-
-@-webkit-keyframes bg {
-  0% { background-position: 0 0; }
-  100% { background-position: -16px 0; }
-}