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/js/wallpaper_manager.js

@@ -42,6 +42,7 @@ function WallpaperManager(dialogDom) {
   // the same path, ie. pass the info to |WallpaperThumbnailsGridItem| for
   // actual image rendering.
   this.document_.body.classList.toggle('v2', this.useNewWallpaperPicker_);
+  this.placeWallpaperPicker_();
 
   if (loadTimeData.getBoolean('showBackdropWallpapers')) {
     // |collectionsInfo_| represents the list of wallpaper collections. Each
@@ -209,38 +210,17 @@ WallpaperManager.prototype.fetchManifest_ = function() {
  */
 WallpaperManager.prototype.getCollectionsInfo_ = function() {
   chrome.wallpaperPrivate.getCollectionsInfo(collectionsInfo => {
-    if (chrome.runtime.lastError)
-      this.onGetCollectionsInfoFailed_();
-    else
-      this.onGetCollectionsInfoSucceeded_(collectionsInfo);
+    if (chrome.runtime.lastError) {
+      // TODO(crbug.com/800945): Distinguish the error types and show custom
+      // error messages.
+      this.showError_(str('connectionFailed'));
+      $('wallpaper-grid').classList.add('image-picker-offline');
+    }
+    this.collectionsInfo_ = collectionsInfo;
+    this.postDownloadDomInit_();
   });
 };
 
-/**
- * Called upon the success of fetching the collection info.
- * @param {Object} collectionsInfo The collection info.
- * @private
- */
-WallpaperManager.prototype.onGetCollectionsInfoSucceeded_ = function(
-    collectionsInfo) {
-  this.collectionsInfo_ = collectionsInfo;
-  if (this.collectionsInfo_.length == 0) {
-    // Although fetch succeeds, the collection list may be empty in the first
-    // place, in this case do nothing.
-    return;
-  }
-  // Initialize the category list and show the collection names.
-  this.postDownloadDomInit_();
-};
-
-/**
- * Called upon the failure of fetching the collection names.
- * @private
- */
-WallpaperManager.prototype.onGetCollectionsInfoFailed_ = function() {
-  // TODO(crbug.com/800945): Show error message.
-};
-
 /**
  * Fetches info for the images belonging to the specific wallpaper collection
  * and pass the info to |WallpaperThumbnailsGrid| to display the images.
@@ -248,6 +228,8 @@ WallpaperManager.prototype.onGetCollectionsInfoFailed_ = function() {
  * @private
  */
 WallpaperManager.prototype.showCollection_ = function(index) {
+  // Clear the 'no images' message if there's any.
+  this.document_.body.classList.remove('no-images');
   var collectionId = this.collectionsInfo_[index]['collectionId'];
   // Check if the info for this collection has already been fetched. If so,
   // directly show the images.
@@ -262,8 +244,8 @@ WallpaperManager.prototype.showCollection_ = function(index) {
       return;
     }
     if (imagesInfo.length == 0) {
-      // TODO(crbug.com/800945): Decide if we want to show error message if the
-      // fetch succeeds but the images info list turns out to be empty.
+      // Show a 'no images' message to user.
+      this.document_.body.classList.add('no-images');
       return;
     }
 
@@ -276,7 +258,7 @@ WallpaperManager.prototype.showCollection_ = function(index) {
         layout: Constants.WallpaperThumbnailDefaultLayout,
         source: Constants.WallpaperSourceEnum.Online,
         availableOffline: false,
-        author: imagesInfo[i]['displayText'][0],
+        imageTitle: imagesInfo[i]['displayText'][0],
         authorWebsite: imagesInfo[i]['actionUrl'],
         collectionName: this.collectionsInfo_[index]['collectionName']
       };
@@ -290,6 +272,25 @@ WallpaperManager.prototype.showCollection_ = function(index) {
   });
 };
 
+/**
+ * Places the main dialog in the center of the screen, and the header bar at the
+ * top. Only used for the new wallpaper picker.
+ * @private
+ */
+WallpaperManager.prototype.placeWallpaperPicker_ = function() {
+  if (!this.useNewWallpaperPicker_)
+    return;
+  var totalWidth = this.document_.body.offsetWidth;
+  var totalHeight = this.document_.body.offsetHeight;
+  $('top-header').style.left =
+      (totalWidth - $('top-header').offsetWidth) / 2 + 'px';
+  var dialogContainer = this.document_.querySelector('.dialog-container');
+  dialogContainer.style.left =
+      (totalWidth - dialogContainer.offsetWidth) / 2 + 'px';
+  dialogContainer.style.top =
+      (totalHeight - dialogContainer.offsetHeight) / 2 + 'px';
+};
+
 /**
  * Shows error message in a centered dialog.
  * @private
@@ -410,6 +411,15 @@ WallpaperManager.prototype.postDownloadDomInit_ = function() {
   $('set-wallpaper-layout')
       .addEventListener('change', this.onWallpaperLayoutChanged_.bind(this));
 
+  // On the new wallpaper picker, clicking the refresh button will force
+  // fetching the online wallpapers from scratch.
+  $('refresh').addEventListener('click', this.getCollectionsInfo_.bind(this));
+  $('center').addEventListener(
+      'click', this.setCustomWallpaperLayout_.bind(this, 'CENTER'));
+  $('center-cropped')
+      .addEventListener(
+          'click', this.setCustomWallpaperLayout_.bind(this, 'CENTER_CROPPED'));
+
   // Always prefer the value from local filesystem to avoid the time window
   // of setting the third party app name and the third party wallpaper.
   var getThirdPartyAppName = function(callback) {
@@ -590,6 +600,13 @@ WallpaperManager.prototype.onCommandCanExecute_ = function(event) {
  * Preset to the category which contains current wallpaper.
  */
 WallpaperManager.prototype.presetCategory_ = function() {
+  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;
+    return;
+  }
+
   this.currentWallpaper_ = str('currentWallpaper');
   // The currentWallpaper_ is either a url contains HightResolutionSuffix or a
   // custom wallpaper file name converted from an integer value represent
@@ -832,6 +849,16 @@ WallpaperManager.prototype.setSelectedOnlineWallpaper_ = function(
         'not online.');
     return;
   }
+
+  // Cancel any ongoing wallpaper request, otherwise the wallpaper being set in
+  // the end may not be the one that the user selected the last, because the
+  // time needed to set each wallpaper may vary (e.g. some wallpapers already
+  // exist in the local file system but others need to be fetched from server).
+  if (this.useNewWallpaperPicker_ && this.wallpaperRequest_) {
+    this.wallpaperRequest_.abort();
+    this.wallpaperRequest_ = null;
+  }
+
   var wallpaperURL = selectedItem.baseURL +
       WallpaperUtil.getOnlineWallpaperHighResolutionSuffix();
   var selectedGridItem = this.wallpaperGrid_.getListItem(selectedItem);
@@ -844,9 +871,6 @@ WallpaperManager.prototype.setSelectedOnlineWallpaper_ = function(
         }
 
         // Falls back to request wallpaper from server.
-        if (this.wallpaperRequest_)
-          this.wallpaperRequest_.abort();
-
         this.wallpaperRequest_ = new XMLHttpRequest();
         this.progressManager_.reset(this.wallpaperRequest_, selectedGridItem);
 
@@ -934,7 +958,7 @@ WallpaperManager.prototype.onFileSystemError_ = function(e) {
  * Handles changing of selectedItem in wallpaper manager.
  */
 WallpaperManager.prototype.onSelectedItemChanged_ = function() {
-  this.setWallpaperAttribution_(this.selectedItem_);
+  this.setWallpaperAttribution(this.selectedItem_);
 
   if (!this.selectedItem_ || this.selectedItem_.source == 'ADDNEW')
     return;
@@ -960,14 +984,18 @@ WallpaperManager.prototype.onSelectedItemChanged_ = function() {
  * the attributions.
  * @param {Object} selectedItem the selected item in WallpaperThumbnailsGrid's
  *     data model.
- * @private
  */
-WallpaperManager.prototype.setWallpaperAttribution_ = function(selectedItem) {
+WallpaperManager.prototype.setWallpaperAttribution = function(selectedItem) {
   if (this.useNewWallpaperPicker_) {
-    $('photographer-name').textContent = selectedItem.author;
+    $('image-title').textContent = selectedItem.imageTitle;
     $('collection-name').textContent = selectedItem.collectionName;
-    $('explore').textContent = selectedItem.authorWebsite;
     $('explore').href = selectedItem.authorWebsite;
+    var topHeaderContents =
+        this.document_.querySelector('.top-header-contents');
+    topHeaderContents.classList.toggle(
+        'online', selectedItem.source === Constants.WallpaperSourceEnum.Online);
+    topHeaderContents.classList.toggle(
+        'custom', selectedItem.source === Constants.WallpaperSourceEnum.Custom);
     return;
   }
 
@@ -1021,6 +1049,7 @@ WallpaperManager.prototype.setWallpaperAttribution_ = function(selectedItem) {
  * Resize thumbnails grid and categories list to fit the new window size.
  */
 WallpaperManager.prototype.onResize_ = function() {
+  this.placeWallpaperPicker_();
   this.wallpaperGrid_.redraw();
   this.categoriesList_.redraw();
 };
@@ -1210,18 +1239,26 @@ WallpaperManager.prototype.setCustomWallpaper = function(
  * Handles the layout setting change of custom wallpaper.
  */
 WallpaperManager.prototype.onWallpaperLayoutChanged_ = function() {
-  var layout = getSelectedLayout();
-  var self = this;
-  chrome.wallpaperPrivate.setCustomWallpaperLayout(layout, function() {
+  this.setCustomWallpaperLayout_(getSelectedLayout());
+};
+
+/**
+ * Implementation of |onWallpaperLayoutChanged_|. A wrapper of the
+ * |setCustomWallpaperLayout| api.
+ * @param {string} layout The user selected wallpaper layout.
+ * @private
+ */
+WallpaperManager.prototype.setCustomWallpaperLayout_ = function(layout) {
+  chrome.wallpaperPrivate.setCustomWallpaperLayout(layout, () => {
     if (chrome.runtime.lastError != undefined &&
         chrome.runtime.lastError.message != str('canceledWallpaper')) {
-      self.showError_(chrome.runtime.lastError.message);
-      self.removeCustomWallpaper(fileName);
+      this.showError_(chrome.runtime.lastError.message);
+      this.removeCustomWallpaper(fileName);
       $('set-wallpaper-layout').disabled = true;
     } else {
-      WallpaperUtil.saveToLocalStorage(self.currentWallpaper_, layout);
-      self.onWallpaperChanged_(
-          self.wallpaperGrid_.activeItem, self.currentWallpaper_);
+      WallpaperUtil.saveToLocalStorage(this.currentWallpaper_, layout);
+      this.onWallpaperChanged_(
+          this.wallpaperGrid_.activeItem, this.currentWallpaper_);
     }
   });
 };
@@ -1244,6 +1281,9 @@ WallpaperManager.prototype.onCategoriesChange_ = function() {
   if (selectedListItem.custom) {
     if (this.useNewWallpaperPicker_) {
       chrome.wallpaperPrivate.getLocalImagePaths(localImagePaths => {
+        // Show a 'no images' message to user if there's no local image.
+        this.document_.body.classList.toggle(
+            'no-images', localImagePaths.length == 0);
         var wallpapersDataModel = new cr.ui.ArrayDataModel([]);
         for (var imagePath of localImagePaths) {
           var wallpaperInfo = {
@@ -1259,7 +1299,10 @@ WallpaperManager.prototype.onCategoriesChange_ = function() {
             baseURL: new Date().getTime().toString(),
             layout: Constants.WallpaperThumbnailDefaultLayout,
             source: Constants.WallpaperSourceEnum.Custom,
-            availableOffline: true
+            availableOffline: true,
+            // The file name is displayed as the image title.
+            imageTitle: imagePath.split(/[/\\]/).pop(),
+            collectionName: str('customCategoryLabel')
           };
           wallpapersDataModel.push(wallpaperInfo);
         }

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>