cros: Add "current wallpaper" info bar to wallpaper picker

The entire new wallpaper picker is hidden behind flag. A mock of the
info bar: https://goo.gl/NTLuik

Bug: 824453
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I8cb106f76fc01fef361ed3c7ca0f0253484518c5
Reviewed-on: https://chromium-review.googlesource.com/961782Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Commit-Queue: Wenzhao (Colin) Zang <wzang@chromium.org>
Cr-Commit-Position: refs/heads/master@{#544968}

chrome/browser/chromeos/extensions/wallpaper_private_api.cc

@@ -264,13 +264,6 @@ ExtensionFunction::ResponseAction WallpaperPrivateGetStringsFunction::Run() {
   dict->SetString("canceledWallpaper",
                   wallpaper_api_util::kCancelWallpaperMessage);
   dict->SetBoolean("useNewWallpaperPicker", IsUsingNewWallpaperPicker());
-
-  bool show_backdrop_wallpapers = false;
-#if defined(GOOGLE_CHROME_BUILD)
-  show_backdrop_wallpapers = IsUsingNewWallpaperPicker();
-#endif
-  dict->SetBoolean("showBackdropWallpapers", show_backdrop_wallpapers);
-
   dict->SetString("highResolutionSuffix", IsUsingNewWallpaperPicker()
                                               ? GetBackdropWallpaperSuffix()
                                               : kHighResolutionSuffix);

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

@@ -378,7 +378,9 @@ body:not([surprise-me-disabled]) [visibleif~='surprise-me-disabled'] {
 
 #top-header,
 #dialog-header,
-#no-images-message {
+#no-images-message,
+#current-wallpaper-info-bar,
+#set-successfully-message {
   display: none;
 }
 
@@ -512,9 +514,14 @@ body.v2 {
   padding-top: 15px;
   position: absolute;
   top: 0;
+  visibility: hidden;  /* Need this for correct positioning. */
   width: 698px;
 }
 
+.v2.preview-mode:not(.wallpaper-set-successfully) #top-header {
+  visibility: visible;
+}
+
 .v2 .top-header-contents {
   display: none;
   font-family: 'Roboto';
@@ -550,16 +557,12 @@ body.v2 {
   display: none;
 }
 
-.v2 .top-header-contents .more-options a {
-  color: inherit;
-  text-decoration: none;
-}
-
 .v2 .top-header-contents.online .online-option,
 .v2 .top-header-contents.custom .custom-option {
   display: flex;
 }
 
+.v2.wallpaper-set-successfully .dialog-container,
 .v2.preview-mode .dialog-container,
 .v2.preview-mode .more-options :not(.preview-option) {
   display: none;
@@ -631,6 +634,81 @@ body.v2 {
   top: 12px;
 }
 
+.v2 #current-wallpaper-info-bar {
+  background-color: #fff;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  font-family: 'Roboto';
+  font-weight: 500;
+  height: 128px;
+  left: 32px;
+  opacity: 0;
+  position: absolute;
+  transition: opacity 800ms;
+  width: 704px;
+  z-index: -1;
+}
+
+.v2 #current-wallpaper-info-bar.show-info-bar {
+  opacity: 1;
+  z-index: 4;
+}
+
+.v2 #current-wallpaper-image {
+  -webkit-margin-end: 16px;
+  -webkit-margin-start: 8px;
+  margin-bottom: 8px;
+  margin-top: 8px;
+  width: 160px;
+}
+
+.v2 #currently-set-message {
+  color: rgb(66, 133, 244);
+  font-size: 13px;
+  padding-top: 18px;
+}
+
+.v2 #current-wallpaper-title {
+  color: rgb(32, 33, 36);
+  font-size: 14px;
+  padding-top: 16px;
+}
+
+.v2 #current-wallpaper-description {
+  color: rgb(32, 33, 36);
+  font-size: 12px;
+  padding-top: 14px;
+  width: 320px;
+}
+
+.v2 #current-wallpaper-explore {
+  -webkit-margin-start: 96px;
+  color: rgb(66, 133, 244);
+  font-size: 14px;
+  padding-top: 45px;
+  text-decoration: none;
+}
+
+.v2 #current-wallpaper-explore a {
+  text-decoration: none;
+}
+
+.v2.wallpaper-set-successfully #set-successfully-message {
+  background-color: #000;
+  border-radius: 18px;
+  bottom: 5px;
+  color: #fff;
+  display: block;
+  padding: 8px 28px;
+  position: absolute;
+  visibility: hidden;  /* Need this for correct positioning. */
+}
+
+.v2.wallpaper-set-successfully #set-successfully-message {
+  visibility: visible;
+}
+
 body:not([surprise-me-disabled]).v2 [role=listitem]:not(.daily-refresh-item) {
   opacity: 0.6;
   pointer-events: none;

chrome/browser/resources/chromeos/wallpaper_manager/js/util.js

@@ -458,6 +458,37 @@ WallpaperUtil.getSurpriseMeCheckboxValue = function() {
       .classList.contains('checked');
 };
 
+/**
+ * A convenience wrapper for displaying the thumbnail image.
+ * @param {Object} imageElement The image element.
+ * @param {string} url The base url of the wallpaper.
+ * @param {string} source The source of the wallpaper corresponding to
+ *     |WallpaperSourceEnum|.
+ */
+WallpaperUtil.displayThumbnail = function(imageElement, url, source) {
+  chrome.wallpaperPrivate.getThumbnail(url, source, data => {
+    if (data) {
+      WallpaperUtil.displayImage(imageElement, data, null /*opt_callback=*/);
+    } else {
+      // The only known case for hitting this branch is when showing the
+      // wallpaper picker for the first time after OOBE, the |saveThumbnail|
+      // operation within |WallpaperThumbnailsGridItem.decorate| hasn't
+      // completed. See http://crbug.com/792829.
+      var xhr = new XMLHttpRequest();
+      xhr.open(
+          'GET', url + WallpaperUtil.getOnlineWallpaperThumbnailSuffix(), true);
+      xhr.responseType = 'arraybuffer';
+      xhr.send(null);
+      xhr.addEventListener('load', function(e) {
+        if (xhr.status === 200) {
+          WallpaperUtil.displayImage(
+              imageElement, xhr.response, null /*opt_callback=*/);
+        }
+      });
+    }
+  });
+};
+
 /**
  * Runs chrome.test.sendMessage in test environment. Does nothing if running
  * in production environment.

chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js

@@ -702,6 +702,9 @@ cr.define('wallpapers', function() {
       // The active thumbnail maybe deleted in the above redraw(). Sets it again
       // to make sure checkmark shows correctly.
       this.updateActiveThumb_();
+      // Show the info bar only when the scroll bar is at the top.
+      $('current-wallpaper-info-bar')
+          .classList.toggle('show-info-bar', this.scrollTop == 0);
     }
   };
 

chrome/browser/resources/chromeos/wallpaper_manager/main.html

@@ -131,6 +131,18 @@ found in the LICENSE file.
         </div>
       </div>
     </div>
+    <div id="current-wallpaper-info-bar">
+      <img id="current-wallpaper-image"></img>
+      <div>
+        <div id="currently-set-message"></div>
+        <div id="current-wallpaper-title"></div>
+        <div id="current-wallpaper-description"></div>
+      </div>
+      <div id="current-wallpaper-explore">
+        <a id="current-wallpaper-explore-link" i18n-content="exploreLabel"
+            target="_blank"></a>
+      </div>
+    </div>
   </div>
   <div id="top-header">
     <div class="top-header-contents">
@@ -139,9 +151,6 @@ found in the LICENSE file.
       <div class="more-options">
         <div id="refresh" class='online-option' i18n-content="refreshLabel">
         </div>
-        <div class='online-option'>
-          <a id="explore" i18n-content="exploreLabel" target="_blank"></a>
-        </div>
         <div id="center" class='custom-option' i18n-content="centerLayout">
         </div>
         <div id="center-cropped" class='custom-option'
@@ -151,6 +160,7 @@ found in the LICENSE file.
       </div>
     </div>
   </div>
+  <div id="set-successfully-message"></div>
   <div class="daily-refresh-banner" hidden>
     <div id="daily-refresh-label" i18n-content="surpriseMeLabel"></div>
     <span class="daily-refresh-slider"></span>