[NTP] Add background image selection transition effect

Every tile in the custom background dialog are now have the same fade in
effect as when custom background is loaded.

Bug: 870401
Change-Id: I744a891b7afccf0e0ee76526316f13e2181593dd
Reviewed-on: https://chromium-review.googlesource.com/1182450Reviewed-by: Kristi Park <kristipark@chromium.org>
Commit-Queue: Weilun Shi <sweilun@chromium.org>
Cr-Commit-Position: refs/heads/master@{#585166}

chrome/browser/resources/local_ntp/custom_backgrounds.css

@@ -416,7 +416,19 @@ html[dir=rtl] #bg-sel-footer-cancel {
 }
 
 .bg-sel-tile {
-  background-color: rgba(32, 33, 36, .06);
+  background-size: cover;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 700ms;
+  width: 100%;
+}
+
+html[dir=rtl] .bg-sel-tile-bg {
+  margin: 6px 8px 0 0;
+}
+
+.bg-sel-tile-bg {
+  background-color: rgb(241, 243, 244);
   background-size: cover;
   display: inline-block;
   height: 117px;
@@ -425,10 +437,6 @@ html[dir=rtl] #bg-sel-footer-cancel {
   width: 156px;
 }
 
-html[dir=rtl] .bg-sel-tile {
-  margin: 6px 8px 0 0;
-}
-
 .bg-selected {
   border-radius: 4px;
 }

chrome/browser/resources/local_ntp/custom_backgrounds.js

@@ -110,6 +110,7 @@ customBackgrounds.CLASSES = {
   COLLECTION_DIALOG: 'is-col-sel',
   COLLECTION_SELECTED: 'bg-selected',  // Highlight selected tile
   COLLECTION_TILE: 'bg-sel-tile',  // Preview tile for background customization
+  COLLECTION_TILE_BG: 'bg-sel-tile-bg',
   COLLECTION_TITLE: 'bg-sel-tile-title',  // Title of a background image
   DONE_AVAILABLE: 'done-available',
   FLOAT_UP: 'float-up',
@@ -303,10 +304,11 @@ customBackgrounds.setBackground = function(
  * Create a tile for a Chrome Backgrounds collection.
  */
 customBackgrounds.createChromeBackgroundTile = function(data) {
-  var tile = document.createElement('div');
+  let tile = document.createElement('div');
   tile.style.backgroundImage = 'url(' + data.previewImageUrl + ')';
   tile.dataset.id = data.collectionId;
   tile.dataset.name = data.collectionName;
+  fadeInImageTile(tile, data.previewImageUrl);
   return tile;
 };
 
@@ -314,11 +316,12 @@ customBackgrounds.createChromeBackgroundTile = function(data) {
  * Create a tile for a Google Photos album.
  */
 customBackgrounds.createAlbumTile = function(data) {
-  var tile = document.createElement('div');
+  let tile = document.createElement('div');
   tile.style.backgroundImage = 'url(' + data.previewImageUrl + ')';
   tile.dataset.id = data.albumId;
   tile.dataset.name = data.albumName;
   tile.dataset.photoContainerId = data.photoContainerId;
+  fadeInImageTile(tile, data.previewImageUrl);
   return tile;
 };
 
@@ -410,6 +413,9 @@ customBackgrounds.showCollectionSelectionDialog = function(collectionsSource) {
 
   // Create dialog tiles.
   for (var i = 0; i < collData.length; ++i) {
+    let tileBackground = document.createElement('div');
+    tileBackground.classList.add(
+        customBackgrounds.CLASSES.COLLECTION_TILE_BG);
     var tile = null;
     if (sourceIsChromeBackgrounds) {
       tile = customBackgrounds.createChromeBackgroundTile(collData[i]);
@@ -514,7 +520,8 @@ customBackgrounds.showCollectionSelectionDialog = function(collectionsSource) {
     };
 
     tile.appendChild(title);
-    tileContainer.appendChild(tile);
+    tileBackground.appendChild(tile);
+    tileContainer.appendChild(tileBackground);
   }
 
   $(customBackgrounds.IDS.TILES).focus();
@@ -577,6 +584,9 @@ customBackgrounds.showImageSelectionDialog = function(dialogTitle) {
   }
 
   for (var i = 0; i < imageData.length; ++i) {
+    let tileBackground = document.createElement('div');
+    tileBackground.classList.add(
+        customBackgrounds.CLASSES.COLLECTION_TILE_BG);
     var tile = document.createElement('div');
     tile.classList.add(customBackgrounds.CLASSES.COLLECTION_TILE);
     // Accessibility support for screen readers.
@@ -611,6 +621,7 @@ customBackgrounds.showImageSelectionDialog = function(dialogTitle) {
       }
       tile.setAttribute('aria-label', imageData[i].attributions[0]);
       tile.dataset.url = imageData[i].imageUrl;
+      fadeInImageTile(tile, imageData[i].thumbnailImageUrl);
     } else {
       tile.style.backgroundImage =
           'url(' + imageData[i].thumbnailPhotoUrl + ')';
@@ -619,6 +630,7 @@ customBackgrounds.showImageSelectionDialog = function(dialogTitle) {
       tile.dataset.attributionLine2 = '';
       tile.dataset.attributionActionUrl = '';
       tile.setAttribute('aria-label', configData.translatedStrings.photoLabel);
+      fadeInImageTile(tile, imageData[i].thumbnailPhotoUrl);
     }
 
     tile.id = 'img_tile_' + i;
@@ -678,11 +690,20 @@ customBackgrounds.showImageSelectionDialog = function(dialogTitle) {
       }
     };
 
-    tileContainer.appendChild(tile);
+    tileBackground.appendChild(tile);
+    tileContainer.appendChild(tileBackground);
   }
   $(customBackgrounds.IDS.TILES).focus();
 };
 
+let fadeInImageTile = (tile, imageUrl) => {
+  let image = new Image();
+  image.onload = () => {
+    tile.style.opacity = '1';
+  };
+  image.src = imageUrl;
+};
+
 /**
  * Load the NTPBackgroundCollections script. It'll create a global
  * variable name "coll" which is a dict of background collections data.