cros: Additional UI polishing for new wallpaper picker

1) Add animation for showing preview wallpaper/wallpaper thumbnails.

2) Set min height/width for the picker window.

3) Add "Preset category" for the new picker.

Bug: 837485, 837329, 836848, 835352, 835196
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ifddc5e2af900b7c9b9f8e0001b605f70d2f9b079
Reviewed-on: https://chromium-review.googlesource.com/1054141
Commit-Queue: Wenzhao (Colin) Zang <wzang@chromium.org>
Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/heads/master@{#558396}

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

@@ -466,6 +466,7 @@ body.v2 {
 
 .v2 .image-picker [role=listitem] {
   -webkit-margin-end: 8px;
+  background-color: rgb(241, 243, 244);
   border-radius: 4px;
   height: 160px;
   margin-bottom: 8px;
@@ -490,6 +491,10 @@ body.v2 {
   width: unset;
 }
 
+.v2 .image-picker img:not(.slide-show) {
+  animation: fade-in 250ms;
+}
+
 .v2 .image-picker .check {
   background-image: url(../images/ui/selected_wallpaper_checkmark.svg);
   background-repeat: no-repeat;
@@ -745,16 +750,21 @@ body.v2 {
   height: 128px;
   opacity: 0;
   position: absolute;
-  transition: opacity 800ms;
+  transition: opacity 250ms;
   width: 704px;
   z-index: -1;
 }
 
-.v2 #current-wallpaper-info-bar.show-info-bar {
+.v2:not(.preview-animation):not(.preview-mode) #current-wallpaper-info-bar.show-info-bar {
   opacity: 1;
   z-index: 4;
 }
 
+.v2.preview-animation {
+  animation: fade-in 800ms;
+  animation-direction: reverse;
+}
+
 .v2 #current-wallpaper-image {
   -webkit-margin-end: 16px;
   -webkit-margin-start: 8px;
@@ -783,6 +793,10 @@ body.v2 {
   width: 320px;
 }
 
+.v2 #current-wallpaper-description.small-font {
+  font-size: 11px;
+}
+
 .v2 #current-wallpaper-more-options {
   -webkit-margin-end: 32px;
   color: rgb(66, 133, 244);
@@ -847,3 +861,12 @@ body.v2 {
   bottom: 0;
   top: unset;
 }
+
+@keyframes fade-in {
+  from { filter: blur(15px);
+         opacity: 0;
+       }
+  to { filter: none;
+       opacity: 1;
+     }
+}

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

@@ -323,10 +323,10 @@ chrome.app.runtime.onLaunched.addListener(function() {
     return;
   }
 
-  chrome.commandLinePrivate.hasSwitch('new-wallpaper-picker', (result) => {
+  chrome.commandLinePrivate.hasSwitch('new-wallpaper-picker', result => {
     var options = result ? {
       frame: 'none',
-      innerBounds: {width: 768, height: 512},
+      innerBounds: {width: 768, height: 512, minWidth: 480, minHeight: 480},
       resizable: true,
       alphaEnabled: true
     } :
@@ -416,6 +416,17 @@ chrome.storage.onChanged.addListener(function(changes, namespace) {
         if (!wallpaperPickerWindow)
           return;
         var wpDocument = wallpaperPickerWindow.contentWindow.document;
+        var hideCheckMarkIfNeeded = () => {
+          chrome.commandLinePrivate.hasSwitch(
+              'new-wallpaper-picker', result => {
+                // Do not hide the check mark on the new picker.
+                if (!result && wpDocument.querySelector('.check')) {
+                  wpDocument.querySelector('.check').style.visibility =
+                      'hidden';
+                }
+              });
+        };
+
         if (!!appName) {
           chrome.wallpaperPrivate.getStrings(function(strings) {
             var message =
@@ -423,8 +434,7 @@ chrome.storage.onChanged.addListener(function(changes, namespace) {
             wpDocument.querySelector('#wallpaper-set-by-message').textContent =
                 message;
             wpDocument.querySelector('#wallpaper-grid').classList.add('small');
-            if (wpDocument.querySelector('.check'))
-              wpDocument.querySelector('.check').style.visibility = 'hidden';
+            hideCheckMarkIfNeeded();
             wpDocument.querySelector('#checkbox').classList.remove('checked');
             wpDocument.querySelector('#categories-list').disabled = false;
             wpDocument.querySelector('#wallpaper-grid').disabled = false;
@@ -442,9 +452,7 @@ chrome.storage.onChanged.addListener(function(changes, namespace) {
                 if (enable) {
                   wpDocument.querySelector('#checkbox')
                       .classList.add('checked');
-                  if (wpDocument.querySelector('.check'))
-                    wpDocument.querySelector('.check').style.visibility =
-                        'hidden';
+                  hideCheckMarkIfNeeded();
                 } else {
                   wpDocument.querySelector('#checkbox')
                       .classList.remove('checked');

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

@@ -372,7 +372,9 @@ cr.define('wallpapers', function() {
      * @type {Array<Object>}
      */
     get dailyRefreshImages() {
-      return this.dailyRefreshItem.querySelectorAll('.slide-show');
+      return this.dailyRefreshItem ?
+          this.dailyRefreshItem.querySelectorAll('.slide-show') :
+          {};
     },
 
     /**
@@ -702,7 +704,7 @@ cr.define('wallpapers', function() {
      */
     showNextImage_: function(index) {
       var images = this.dailyRefreshImages;
-      if (images.length == 0)
+      if (images.length <= index)
         return;
       images[index].style.opacity = 1;
 

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

@@ -315,6 +315,13 @@ WallpaperManager.prototype.placeWallpaperPicker_ = function() {
   if (!this.useNewWallpaperPicker_)
     return;
 
+  // Wallpaper preview must always be in full screen. Exit preview if the
+  // window is not in full screen for any reason (e.g. when device locks).
+  if (!chrome.app.window.current().isFullscreen() &&
+      this.document_.body.classList.contains('preview-mode')) {
+    $('cancel-preview-wallpaper').click();
+  }
+
   var totalWidth = this.document_.body.offsetWidth;
   centerElement($('set-successfully-message'), totalWidth, null);
   centerElement($('top-header'), totalWidth, null);
@@ -419,11 +426,6 @@ WallpaperManager.prototype.toggleSurpriseMe = function() {
       WallpaperUtil.saveToLocalStorage(
           Constants.AccessLocalSurpriseMeEnabledKey, shouldEnable, onSuccess);
   });
-
-  // Show a success message and quit after the user enables surprime me on
-  // the new picker.
-  if (shouldEnable && this.useNewWallpaperPicker_)
-    this.showSuccessMessageAndQuit_();
 };
 
 /**
@@ -655,9 +657,23 @@ WallpaperManager.prototype.presetCategory_ = function() {
   // custom wallpaper file name.
   this.currentWallpaper_ = str('currentWallpaper');
   if (this.useNewWallpaperPicker_) {
-    // TODO(crbug.com/812725): Implement preset category for the new picker. For
-    // now, autoselect the first category.
-    this.categoriesList_.selectionModel.selectedIndex = 0;
+    // The default category is the last one (the custom category).
+    var categoryIndex = this.categoriesList_.dataModel.length - 1;
+    Object.entries(this.imagesInfoMap_).forEach(([
+                                                  collectionId, imagesInfo
+                                                ]) => {
+      for (var i = 0; i < imagesInfo.length; ++i) {
+        if (this.currentWallpaper_.includes(imagesInfo.item(i).baseURL)) {
+          for (var index = 0; index < this.collectionsInfo_.length; ++index) {
+            // Find the index of the category which the current wallpaper
+            // belongs to based on the collection id.
+            if (this.collectionsInfo_[index]['collectionId'] == collectionId)
+              categoryIndex = index;
+          }
+        }
+      }
+    });
+    this.categoriesList_.selectionModel.selectedIndex = categoryIndex;
     return;
   }
 
@@ -789,10 +805,15 @@ WallpaperManager.prototype.decorateCurrentWallpaperInfoBar_ = function() {
     $('current-wallpaper-title').textContent =
         currentWallpaperInfo.displayText[0];
     $('current-wallpaper-description').innerHTML = '';
+    $('current-wallpaper-description')
+        .classList.toggle(
+            'small-font', currentWallpaperInfo.displayText.length > 2);
     for (var i = 1; i < currentWallpaperInfo.displayText.length; ++i) {
       $('current-wallpaper-description')
           .appendChild(
               document.createTextNode(currentWallpaperInfo.displayText[i]));
+      $('current-wallpaper-description')
+          .appendChild(document.createElement('br'));
     }
   } else {
     // Request the thumbnail of the current wallpaper as fallback, since the
@@ -1127,10 +1148,13 @@ WallpaperManager.prototype.onPreviewModeStarted_ = function(
   if (this.document_.body.classList.contains('preview-mode'))
     return;
 
-  this.document_.body.classList.add('preview-mode');
-  this.document_.body.classList.toggle(
-      'custom-wallpaper', source == Constants.WallpaperSourceEnum.Custom);
-  chrome.app.window.current().fullscreen();
+  this.document_.body.classList.add('preview-animation');
+  window.setTimeout(() => {
+    chrome.app.window.current().fullscreen();
+    this.document_.body.classList.add('preview-mode');
+    this.document_.body.classList.toggle(
+        'custom-wallpaper', source == Constants.WallpaperSourceEnum.Custom);
+  }, 800);
 
   var onConfirmClicked = () => {
     chrome.wallpaperPrivate.confirmPreviewWallpaper(() => {
@@ -1148,8 +1172,12 @@ WallpaperManager.prototype.onPreviewModeStarted_ = function(
       // Deselect the image.
       this.wallpaperGrid_.selectedItem = null;
       this.document_.body.classList.remove('preview-mode');
-      // Exit full screen.
-      chrome.app.window.current().restore();
+      this.document_.body.classList.remove('preview-animation');
+      // Exit full screen, but the window should still be maximized.
+      chrome.app.window.current().maximize();
+      // TODO(crbug.com/841968): This is a workaround until the issue is fixed.
+      if (this.wallpaperGrid_.scrollTop == 0)
+        this.wallpaperGrid_.scrollTop = 1;
     });
   };
   $('cancel-preview-wallpaper').addEventListener('click', onCancelClicked);
@@ -1254,10 +1282,12 @@ WallpaperManager.prototype.onSelectedItemChanged_ = function() {
  */
 WallpaperManager.prototype.setWallpaperAttribution = function(selectedItem) {
   if (this.useNewWallpaperPicker_) {
-    // The first element in |displayText| is used as title.
-    if (selectedItem.displayText)
-      $('image-title').textContent = selectedItem.displayText[0];
-    $('collection-name').textContent = selectedItem.collectionName;
+    if (selectedItem) {
+      $('collection-name').textContent = selectedItem.collectionName;
+      // The first element in |displayText| is used as title.
+      if (selectedItem.displayText)
+        $('image-title').textContent = selectedItem.displayText[0];
+    }
     return;
   }
 

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

@@ -137,33 +137,6 @@ 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" i18n-content="currentlySetLabel"></div>
-        <div id="current-wallpaper-title"></div>
-        <div id="current-wallpaper-description"></div>
-      </div>
-      <div id="current-wallpaper-more-options">
-        <div id="refresh">
-          <div class="icon"></div>
-          <div class="text" i18n-content="refreshLabel"></div>
-        </div>
-        <div id="explore">
-          <div class="icon"></div>
-          <a class="text" id="current-wallpaper-explore-link"
-              i18n-content="exploreLabel" target="_blank"></a>
-        </div>
-        <div id="center">
-          <div class="icon"></div>
-          <div class="text" i18n-content="centerLayout"></div>
-        </div>
-        <div id="center-cropped">
-          <div class="icon"></div>
-          <div class="text" i18n-content="centerCroppedLayout"></div>
-        </div>
-      </div>
-    </div>
   </div>
   <div id="top-header">
     <div class="top-header-contents">
@@ -185,6 +158,33 @@ 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" i18n-content="currentlySetLabel"></div>
+      <div id="current-wallpaper-title"></div>
+      <div id="current-wallpaper-description"></div>
+    </div>
+    <div id="current-wallpaper-more-options">
+      <div id="refresh">
+        <div class="icon"></div>
+        <div class="text" i18n-content="refreshLabel"></div>
+      </div>
+      <div id="explore">
+        <div class="icon"></div>
+        <a class="text" id="current-wallpaper-explore-link"
+            i18n-content="exploreLabel" target="_blank"></a>
+      </div>
+      <div id="center">
+        <div class="icon"></div>
+        <div class="text" i18n-content="centerLayout"></div>
+      </div>
+      <div id="center-cropped">
+        <div class="icon"></div>
+        <div class="text" i18n-content="centerCroppedLayout"></div>
+      </div>
+    </div>
+  </div>
   <div id="set-successfully-message"
       i18n-content="setSuccessfullyMessage"></div>
   <div class="daily-refresh-banner" hidden>