cros: Update new wallpaper picker UI (Part I)

This CL makes the new wallpaper picker fully usable. There're some
corner cases that haven't been determined by UX and they are explicitly
marked as 'TODO'.

Mock: goo.gl/kGgEVr
Spec:
https://drive.google.com/file/d/1nxrxAmlXOMp50IkGFGNobmIS-QpkYtLY/view

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

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

@@ -376,7 +376,9 @@ body:not([surprise-me-disabled]) [visibleif~='surprise-me-disabled'] {
   background-image: url(../images/ui/checkbox_checked.png);
 }
 
-.top-header {
+#top-header,
+#dialog-header,
+#no-images-message {
   display: none;
 }
 
@@ -389,16 +391,33 @@ body.v2 {
 
 .v2 .dialog-container {
   background-color: #fff;
-  flex-direction: row;
-  height: 450px;
+  border-radius: 4px;
+  height: 512px;
   position: absolute;
-  top: 180px;
-  width: 100%;
+  width: 768px;
+}
+
+.v2 #dialog-header {
+  display: flex;
+  height: 40px;
+}
+
+.v2 .dialog-body {
+  display: flex;
+  height: 476px;
 }
 
 .v2 .dialog-topbar {
+  -webkit-margin-end: 32px;
   display: block;
   height: 100%;
+  overflow: visible;
+  padding: unset;
+  width: 192px;
+}
+
+.v2 .dialog-topbar #bar {
+  display: none;
 }
 
 .v2 .image-picker {
@@ -411,22 +430,57 @@ body.v2 {
 }
 
 .v2 #categories-list > li {
-  height: 100%;
+  border-top: unset;
+  height: 36px;
+  margin-bottom: 8px;
+}
+
+.v2 #categories-list > li > div {
+  color: rgb(128, 134, 139);
+  font-family: 'Roboto';
+  font-size: 13px;
+  font-weight: 500;
+  padding: 0 30px;
+}
+
+.v2 #categories-list > li[selected] {
+  background-color: rgb(232, 240, 254);
+  border-radius: 0 32px 32px 0;
 }
 
 .v2 #categories-list > li[selected] > div {
-  color: #000;
+  color: rgb(66, 133, 244);
+  font-weight: 700;
 }
 
 .v2 #surprise-me {
   display: none;
 }
 
+.v2 .image-picker {
+  -webkit-padding-end: unset;
+  -webkit-padding-start: unset;
+  padding-bottom: unset;
+  padding-top: unset;
+}
+
 .v2 .image-picker [role=listitem] {
+  -webkit-margin-end: 8px;
+  border-radius: 4px;
   height: 160px;
+  margin-bottom: 8px;
   width: 160px;
 }
 
+.v2 .image-picker [role=listitem][selected] {
+  -webkit-margin-end: 24px;
+  -webkit-margin-start: 16px;
+  height: 128px;
+  margin-bottom: 24px;
+  margin-top: 16px;
+  width: 128px;
+}
+
 .v2 .image-picker img {
   height: unset;
   overflow: hidden;
@@ -434,18 +488,77 @@ body.v2 {
   width: unset;
 }
 
+.v2 .close {
+  background-color: rgba(128, 134, 139, 0.3);
+  border-radius: 4px;
+  left: 734px;
+  top: -40px;
+}
+
+.v2 .image-picker .check,
 .v2 .bottom-bar {
   display: none;
 }
 
-.v2 .top-header {
+.v2 #top-header {
   background-color: #fff;
+  border-radius: 0 0 48px 48px;
   display: flex;
-  height: 50px;
+  height: 33px;
+  padding-top: 15px;
   position: absolute;
-  width: 760px;
+  top: 0;
+  width: 698px;
 }
 
-.v2 .top-header .more-options {
+.v2 .top-header-contents {
+  display: none;
+  font-family: 'Roboto';
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.v2:not(.no-images) .top-header-contents {
+  display: flex;
+}
+
+.v2 .top-header-contents #image-title {
+  -webkit-padding-start: 32px;
+  color: rgb(32, 33, 36);
+  max-width: 360px;
+  overflow: hidden;
+}
+
+.v2 .top-header-contents #collection-name {
+  -webkit-padding-start: 24px;
+  color: rgb(128, 134, 139);
+}
+
+.v2 .top-header-contents .more-options {
+  display: flex;
+  position: absolute;
+  right: 0;
+}
+
+.v2 .top-header-contents .more-options > div {
+  -webkit-padding-end: 32px;
+  color: rgb(66, 133, 244);
+  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.no-images #no-images-message {
+  display: block;
+  left: 180px;
+  position: absolute;
+  top: 220px;
 }
\ No newline at end of file

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

@@ -323,26 +323,40 @@ chrome.app.runtime.onLaunched.addListener(function() {
   }
 
   chrome.commandLinePrivate.hasSwitch('new-wallpaper-picker', (result) => {
-    var windowWidth = result ? 800 : 574;
-    var windowHeight = result ? 800 : 420;
-
-    chrome.app.window.create(
-        'main.html', {
-          frame: 'none',
-          width: windowWidth,
-          height: windowHeight,
-          resizable: false,
-          alphaEnabled: true
-        },
-        function(w) {
-          wallpaperPickerWindow = w;
-          chrome.wallpaperPrivate.minimizeInactiveWindows();
-          w.onClosed.addListener(function() {
-            wallpaperPickerWindow = null;
-            chrome.wallpaperPrivate.restoreMinimizedWindows();
-          });
-          WallpaperUtil.testSendMessage('wallpaper-window-created');
+    var options = result ? {
+      frame: 'none',
+      state: 'maximized',
+      resizable: true,
+      alphaEnabled: true
+    } :
+                           {
+                             frame: 'none',
+                             width: 574,
+                             height: 420,
+                             resizable: false,
+                             alphaEnabled: true
+                           };
+
+    chrome.app.window.create('main.html', options, function(w) {
+      wallpaperPickerWindow = w;
+      chrome.wallpaperPrivate.minimizeInactiveWindows();
+      w.onClosed.addListener(function() {
+        wallpaperPickerWindow = null;
+        chrome.wallpaperPrivate.restoreMinimizedWindows();
+      });
+      if (result) {
+        // By design, the new wallpaper picker should never be shown on top of
+        // another window.
+        wallpaperPickerWindow.contentWindow.addEventListener(
+            'focus', function() {
+              chrome.wallpaperPrivate.minimizeInactiveWindows();
+            });
+        w.onMinimized.addListener(function() {
+          chrome.wallpaperPrivate.restoreMinimizedWindows();
         });
+      }
+      WallpaperUtil.testSendMessage('wallpaper-window-created');
+    });
   });
 });
 

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

@@ -94,21 +94,14 @@ cr.define('wallpapers', function() {
           window.setTimeout(this.callback_.bind(this, this.dataModelId_), 0);
           break;
         case Constants.WallpaperSourceEnum.Custom:
-          if (loadTimeData.getBoolean('useNewWallpaperPicker')) {
-            this.decorateCustomWallpaper_(
-                imageEl, this.dataItem,
-                this.callback_.bind(this, this.dataModelId_));
-          } else {
-            this.decorateCustomWallpaperForOldPicker_(
-                imageEl, this.dataItem,
-                this.callback_.bind(this, this.dataModelId_));
-          }
+          if (loadTimeData.getBoolean('useNewWallpaperPicker'))
+            this.decorateCustomWallpaper_(imageEl, this.dataItem);
+          else
+            this.decorateCustomWallpaperForOldPicker_(imageEl, this.dataItem);
           break;
         case Constants.WallpaperSourceEnum.OEM:
         case Constants.WallpaperSourceEnum.Online:
-          this.decorateOnlineOrOEMWallpaper_(
-              imageEl, this.dataItem,
-              this.callback_.bind(this, this.dataModelId_));
+          this.decorateOnlineOrOEMWallpaper_(imageEl, this.dataItem);
           break;
         case Constants.WallpaperSourceEnum.Daily:
         case Constants.WallpaperSourceEnum.ThirdParty:
@@ -129,10 +122,9 @@ cr.define('wallpapers', function() {
      * @param {{filePath: string, baseURL: string, layout: string,
      *          source: string, availableOffline: boolean}
      *     dataItem The info related to the wallpaper image.
-     * @param {function} callback The callback function.
      * @private
      */
-    decorateCustomWallpaper_(imageElement, dataItem, callback) {
+    decorateCustomWallpaper_(imageElement, dataItem) {
       if (dataItem.source != Constants.WallpaperSourceEnum.Custom) {
         console.error(
             '|decorateCustomWallpaper_| is called but the wallpaper source ' +
@@ -148,7 +140,8 @@ cr.define('wallpapers', function() {
               console.error(
                   'Initialization of custom wallpaper grid failed for path ' +
                   dataItem.filePath);
-              callback(null /*opt_wallpaperId=*/, imageElement);
+              this.callback_(
+                  this.dataModelId_, null /*opt_wallpaperId=*/, imageElement);
               return;
             }
 
@@ -157,7 +150,9 @@ cr.define('wallpapers', function() {
             // frequently.
             WallpaperUtil.displayImage(
                 imageElement, imageData,
-                callback.bind(null /*opt_wallpaperId=*/, imageElement));
+                this.callback_.bind(
+                    this, this.dataModelId_, null /*opt_wallpaperId=*/,
+                    imageElement));
           });
     },
 
@@ -168,33 +163,32 @@ cr.define('wallpapers', function() {
      * @param {{filePath: string, baseURL: string, layout: string,
      *          source: string, availableOffline: boolean}
      *     dataItem The info related to the wallpaper image.
-     * @param {function} callback The callback function.
      * @private
      */
-    decorateCustomWallpaperForOldPicker_(imageElement, dataItem, callback) {
+    decorateCustomWallpaperForOldPicker_(imageElement, dataItem) {
       if (dataItem.source != Constants.WallpaperSourceEnum.Custom) {
         console.error(
             '|decorateCustomWallpaperForOldPicker_| is called but the ' +
             'wallpaper source is not custom.');
         return;
       }
-      var errorHandler = function(e) {
+      var errorHandler = e => {
         console.error('Can not access file system.');
-        callback();
+        this.callback_(this.dataModelId_);
       };
-      var setURL = function(fileEntry) {
+      var setURL = fileEntry => {
         imageElement.src = fileEntry.toURL();
-        callback(dataItem.wallpaperId, imageElement);
+        this.callback_(this.dataModelId_, dataItem.wallpaperId, imageElement);
       };
       var wallpaperDirectories = WallpaperDirectories.getInstance();
-      var fallback = function() {
+      var fallback = () => {
         wallpaperDirectories.getDirectory(
             Constants.WallpaperDirNameEnum.ORIGINAL, function(dirEntry) {
               dirEntry.getFile(
                   dataItem.baseURL, {create: false}, setURL, errorHandler);
             }, errorHandler);
       };
-      var success = function(dirEntry) {
+      var success = dirEntry => {
         dirEntry.getFile(dataItem.baseURL, {create: false}, setURL, fallback);
       };
       wallpaperDirectories.getDirectory(
@@ -207,10 +201,9 @@ cr.define('wallpapers', function() {
      * @param {{filePath: string, baseURL: string, layout: string,
      *          source: string, availableOffline: boolean}
      *     dataItem The info related to the wallpaper image.
-     * @param {function} callback The callback function.
      * @private
      */
-    decorateOnlineOrOEMWallpaper_(imageElement, dataItem, callback) {
+    decorateOnlineOrOEMWallpaper_(imageElement, dataItem) {
       if (dataItem.source != Constants.WallpaperSourceEnum.Online &&
           dataItem.source != Constants.WallpaperSourceEnum.OEM) {
         console.error(
@@ -224,7 +217,9 @@ cr.define('wallpapers', function() {
                 if (data) {
                   WallpaperUtil.displayImage(
                       imageElement, data,
-                      callback.bind(dataItem.wallpaperId, imageElement));
+                      this.callback_.bind(
+                          this, this.dataModelId_, dataItem.wallpaperId,
+                          imageElement));
                 } else if (
                     dataItem.source == Constants.WallpaperSourceEnum.Online) {
                   var xhr = new XMLHttpRequest();
@@ -235,15 +230,17 @@ cr.define('wallpapers', function() {
                       true);
                   xhr.responseType = 'arraybuffer';
                   xhr.send(null);
-                  xhr.addEventListener('load', function(e) {
+                  xhr.addEventListener('load', e => {
                     if (xhr.status === 200) {
                       chrome.wallpaperPrivate.saveThumbnail(
                           dataItem.baseURL, xhr.response);
                       WallpaperUtil.displayImage(
                           imageElement, xhr.response,
-                          callback.bind(dataItem.wallpaperId, imageElement));
+                          this.callback_.bind(
+                              this, this.dataModelId_, dataItem.wallpaperId,
+                              imageElement));
                     } else {
-                      callback();
+                      this.callback_(this.dataModelId_);
                     }
                   });
                 }
@@ -360,13 +357,16 @@ cr.define('wallpapers', function() {
         // item is constructed in function itemConstructor below.
         this.pendingItems_ = 0;
 
-        this.style.visibility = 'hidden';
-        // If spinner is hidden, schedule to show the spinner after
-        // ShowSpinnerDelayMs delay. Otherwise, keep it spinning.
-        if ($('spinner-container').hidden) {
-          this.spinnerTimeout_ = window.setTimeout(function() {
-            $('spinner-container').hidden = false;
-          }, ShowSpinnerDelayMs);
+        // Only show the spinner on the old wallpaper picker.
+        if (!this.useNewWallpaperPicker_) {
+          this.style.visibility = 'hidden';
+          // If spinner is hidden, schedule to show the spinner after
+          // ShowSpinnerDelayMs delay. Otherwise, keep it spinning.
+          if ($('spinner-container').hidden) {
+            this.spinnerTimeout_ = window.setTimeout(function() {
+              $('spinner-container').hidden = false;
+            }, ShowSpinnerDelayMs);
+          }
         }
       } else {
         // Sets dataModel to null should hide spinner immediately.
@@ -431,7 +431,7 @@ cr.define('wallpapers', function() {
       if (opt_wallpaperId != null)
         this.thumbnailList_[opt_wallpaperId] = opt_thumbnail;
 
-      if (opt_thumbnail && loadTimeData.getBoolean('useNewWallpaperPicker'))
+      if (opt_thumbnail && this.useNewWallpaperPicker_)
         this.cropImageToFitGrid_(opt_thumbnail);
 
       if (this.pendingItems_ == 0) {
@@ -439,6 +439,12 @@ cr.define('wallpapers', function() {
         window.clearTimeout(this.spinnerTimeout_);
         this.spinnerTimeout_ = 0;
         $('spinner-container').hidden = true;
+        if (this.useNewWallpaperPicker_) {
+          // TODO(crbug.com/812725): Decide what to show in the top header bar
+          // if the current wallpaper in use was not selected from the picker.
+          // For now, show the info of the first wallpaper in this collection.
+          wallpaperManager.setWallpaperAttribution(this.dataModel.item(0));
+        }
       }
     },
 
@@ -452,6 +458,8 @@ cr.define('wallpapers', function() {
       this.checkmark_.classList.add('check');
       this.dataModel = new ArrayDataModel([]);
       this.thumbnailList_ = new ArrayDataModel([]);
+      this.useNewWallpaperPicker_ =
+          loadTimeData.getBoolean('useNewWallpaperPicker');
       var self = this;
       this.itemConstructor = function(value) {
         var dataModelId = self.dataModelId_;

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

@@ -89,54 +89,64 @@ found in the LICENSE file.
     </div>
   </div>
   <div class="dialog-container">
-    <div class="dialog-topbar">
-      <div id="navstrip">
-        <list id="categories-list"></list>
-        <div id="bar"></div>
-      </div>
-      <div class="spacer"></div>
-      <div id="window-close-button" class="close"></div>
-    </div>
-    <div class="dialog-main">
-      <div id="category-container">
-        <div id="wallpaper-set-by-message"></div>
-        <grid id="wallpaper-grid" class="image-picker"></grid>
-        <div id="spinner-container" hidden></div>
-        <div class="progress-bar" hidden>
-          <div class="progress-track"></div>
+    <div id="dialog-header"></div>
+    <div class="dialog-body">
+      <div class="dialog-topbar">
+        <div id="navstrip">
+          <list id="categories-list"></list>
+          <div id="bar"></div>
         </div>
-        <div class="bottom-bar">
-          <div id="online-wallpaper-attribute">
-            <img id="attribute-image" hidden>
-            <div id="wallpaper-attribute" hidden>
-              <div>
-                <label>
-                  <span id="author-name"></span>
-                </label>
-              </div>
-              <div>
-                <a id="author-website" target="_blank"></a>
+        <div class="spacer"></div>
+        <div id="window-close-button" class="close"></div>
+      </div>
+      <div class="dialog-main">
+        <div id="category-container">
+          <div id="wallpaper-set-by-message"></div>
+          <grid id="wallpaper-grid" class="image-picker"></grid>
+          <div id="spinner-container" hidden></div>
+          <div class="progress-bar" hidden>
+            <div class="progress-track"></div>
+          </div>
+          <div id="no-images-message" i18n-content="noImagesAvailable"></div>
+          <div class="bottom-bar">
+            <div id="online-wallpaper-attribute">
+              <img id="attribute-image" hidden>
+              <div id="wallpaper-attribute" hidden>
+                <div>
+                  <label>
+                    <span id="author-name"></span>
+                  </label>
+                </div>
+                <div>
+                  <a id="author-website" target="_blank"></a>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="spacer"></div>
-          <div id="surprise-me" hidden>
-            <div id="checkbox"></div>
-            <span i18n-content="surpriseMeLabel"></span>
+            <div class="spacer"></div>
+            <div id="surprise-me" hidden>
+              <div id="checkbox"></div>
+              <span i18n-content="surpriseMeLabel"></span>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-  <div class="top-header">
-    <div id="photographer-name"></div>
-    <div id="collection-name"></div>
-    <div class="more-options">
-      <div id="refresh"></div>
-      <div>
-        <a id="explore" target="_blank"></a>
+  <div id="top-header">
+    <div class="top-header-contents">
+      <div id="image-title"></div>
+      <div id="collection-name"></div>
+      <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'
+            i18n-content="centerCroppedLayout"></div>
       </div>
-      <div id="preview"></div>
     </div>
   </div>
 </body>