cros: Fix broken thumbnail on wallpaper picker

When showing the wallpaper picker for the first time after OOBE,
|saveThumbnail| may not completed, when the bottom left small thumbnail
to show. In this case, initial a HTTP request to fetch the thumbnail.

Bug: 792829
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I3016687326156bc25d7a0e9a09c770efd1d1b4d7
Reviewed-on: https://chromium-review.googlesource.com/887963
Commit-Queue: Wenzhao (Colin) Zang <wzang@chromium.org>
Reviewed-by: Xiaoqian Dai <xdai@chromium.org>
Cr-Commit-Position: refs/heads/master@{#532191}

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

@@ -87,6 +87,11 @@
    */
   CustomWallpaperThumbnailSuffix: '_thumbnail',
 
+  /**
+   * Suffix to append to the base url of an online wallpaper thumbnail.
+   */
+  OnlineWallpaperThumbnailUrlSuffix: '_thumbnail.png',
+
   /**
    * Wallpaper directory enum.
    */

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

@@ -8,7 +8,6 @@ cr.define('wallpapers', function() {
   /** @const */ var GridItem = cr.ui.GridItem;
   /** @const */ var GridSelectionController = cr.ui.GridSelectionController;
   /** @const */ var ListSingleSelectionModel = cr.ui.ListSingleSelectionModel;
-  /** @const */ var ThumbnailSuffix = '_thumbnail.png';
   /** @const */ var ShowSpinnerDelayMs = 500;
 
   /**
@@ -135,7 +134,10 @@ cr.define('wallpapers', function() {
                     Constants.WallpaperSourceEnum.Online) {
                   var xhr = new XMLHttpRequest();
                   xhr.open(
-                      'GET', self.dataItem.baseURL + ThumbnailSuffix, true);
+                      'GET',
+                      self.dataItem.baseURL +
+                          Constants.OnlineWallpaperThumbnailUrlSuffix,
+                      true);
                   xhr.responseType = 'arraybuffer';
                   xhr.send(null);
                   xhr.addEventListener('load', function(e) {

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

@@ -766,33 +766,56 @@ WallpaperManager.prototype.onSelectedItemChanged_ = function() {
 WallpaperManager.prototype.setWallpaperAttribution_ = function(selectedItem) {
   // Only online wallpapers have author and website attributes. All other type
   // of wallpapers should not show attributions.
-  if (selectedItem &&
-      selectedItem.source == Constants.WallpaperSourceEnum.Online) {
-    $('author-name').textContent = selectedItem.author;
-    $('author-website').textContent = $('author-website').href =
-        selectedItem.authorWebsite;
-    chrome.wallpaperPrivate.getThumbnail(
-        selectedItem.baseURL, selectedItem.source, function(data) {
-          var img = $('attribute-image');
-          if (data) {
-            var blob = new Blob([new Int8Array(data)], {'type': 'image\/png'});
-            img.src = window.URL.createObjectURL(blob);
-            img.addEventListener('load', function(e) {
-              window.URL.revokeObjectURL(this.src);
-            });
-          } else {
-            img.src = '';
-          }
-        });
-    $('wallpaper-attribute').hidden = false;
-    $('attribute-image').hidden = false;
+  if (!selectedItem ||
+      selectedItem.source != Constants.WallpaperSourceEnum.Online) {
+    $('wallpaper-attribute').hidden = true;
+    $('attribute-image').hidden = true;
+    $('author-name').textContent = '';
+    $('author-website').textContent = $('author-website').href = '';
+    $('attribute-image').src = '';
     return;
   }
-  $('wallpaper-attribute').hidden = true;
-  $('attribute-image').hidden = true;
-  $('author-name').textContent = '';
-  $('author-website').textContent = $('author-website').href = '';
-  $('attribute-image').src = '';
+
+  $('author-name').textContent = selectedItem.author;
+  $('author-website').textContent = $('author-website').href =
+      selectedItem.authorWebsite;
+  chrome.wallpaperPrivate.getThumbnail(
+      selectedItem.baseURL, selectedItem.source, function(data) {
+        var img = $('attribute-image');
+        if (data) {
+          var blob = new Blob([new Int8Array(data)], {'type': 'image\/png'});
+          img.src = window.URL.createObjectURL(blob);
+          img.addEventListener('load', function(e) {
+            window.URL.revokeObjectURL(this.src);
+          });
+          img.hidden = false;
+        } 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',
+              selectedItem.baseURL +
+                  Constants.OnlineWallpaperThumbnailUrlSuffix,
+              true);
+          xhr.responseType = 'arraybuffer';
+          xhr.send(null);
+          xhr.addEventListener('load', function(e) {
+            if (xhr.status === 200) {
+              var blob = new Blob(
+                  [new Int8Array(xhr.response)], {'type': 'image\/png'});
+              img.src = window.URL.createObjectURL(blob);
+              img.addEventListener('load', function(e) {
+                window.URL.revokeObjectURL(this.src);
+              });
+              img.hidden = false;
+            }
+          });
+        }
+      });
+  $('wallpaper-attribute').hidden = false;
 };
 
 /**