Add butter bar for wallpapaer manager(show downloading progress or error message)

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

Index: chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css
diff --git a/chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css b/chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css
index 5f89135aba0533234d243e9728303a2e74373386..3c62632ee18085b9231f0025e0f03f43d11c2a1b 100644
--- a/chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css
+++ b/chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css
@@ -142,3 +142,109 @@ div.sidebar-splitter {
   height: 80px;
   width: 128px;
 }
+
+/* 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;
+  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: #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: rgba(221, 75, 57, 0.2);
+  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-keyframes bg {
+  0% { background-position: 0 0; }
+  100% { background-position: -16px 0; }
+}