[Chrome Colors] Remove titles from Colors menu.

Remove titles for both colors and default tiles. This change makes
crbug.com/976415 obsolete.

Bug: 960982
Change-Id: I5138085065566bfad04e84b22ea2337be2e211c4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1693167
Commit-Queue: Gayane Petrosyan <gayane@chromium.org>
Reviewed-by: Kristi Park <kristipark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#677059}

chrome/browser/resources/local_ntp/customize.js

@@ -91,7 +91,7 @@ customize.IDS = {
   BACKGROUNDS_UPLOAD_WRAPPER: 'backgrounds-upload-wrapper',
   CANCEL: 'bg-sel-footer-cancel',
   COLORS_BUTTON: 'colors-button',
-  COLORS_DEFAULT: 'colors-default',
+  COLORS_DEFAULT_ICON: 'colors-default-icon',
   COLORS_THEME: 'colors-theme',
   COLORS_THEME_NAME: 'colors-theme-name',
   COLORS_THEME_UNINSTALL: 'colors-theme-uninstall',
@@ -518,7 +518,7 @@ customize.richerPicker_setShortcutOptions = function() {
  */
 customize.createTileWithTitle = function(
     id, imageUrl, name, dataset, onClickInteraction, onKeyInteraction) {
-  const tile = customize.createTile(
+  const tile = customize.createTileThumbnail(
       id, imageUrl, dataset, onClickInteraction, onKeyInteraction);
   customize.fadeInImageTile(tile, imageUrl, null);
 
@@ -534,14 +534,34 @@ customize.createTileWithTitle = function(
 };
 
 /**
- * Create a tile for customization menu.
+ * Creates a tile for the customization menu without a title.
  * @param {string} id The id for the new element.
  * @param {string} imageUrl The background image url for the new element.
  * @param {Object} dataset The dataset for the new element.
  * @param {?Function} onClickInteraction Function for onclick interaction.
  * @param {?Function} onKeyInteraction Function for onkeydown interaction.
  */
-customize.createTile = function(
+customize.createTileWithoutTitle = function(
+    id, imageUrl, dataset, onClickInteraction, onKeyInteraction) {
+  const tile = customize.createTileThumbnail(
+      id, imageUrl, dataset, onClickInteraction, onKeyInteraction);
+  customize.fadeInImageTile(tile, imageUrl, null);
+
+  const tileBackground = document.createElement('div');
+  tileBackground.classList.add(customize.CLASSES.COLLECTION_TILE_BG);
+  tileBackground.appendChild(tile);
+  return tileBackground;
+};
+
+/**
+ * Create a tile thumbnail with image for customization menu.
+ * @param {string} id The id for the new element.
+ * @param {string} imageUrl The background image url for the new element.
+ * @param {Object} dataset The dataset for the new element.
+ * @param {?Function} onClickInteraction Function for onclick interaction.
+ * @param {?Function} onKeyInteraction Function for onkeydown interaction.
+ */
+customize.createTileThumbnail = function(
     id, imageUrl, dataset, onClickInteraction, onKeyInteraction) {
   const tile = document.createElement('div');
   tile.id = id;
@@ -1115,7 +1135,7 @@ customize.showImageSelectionDialog = function(dialogTitle, collIndex) {
     if (configData.richerPicker) {
       tileId = 'coll_' + collIndex + '_' + tileId;
     }
-    const tile = customize.createTile(
+    const tile = customize.createTileThumbnail(
         tileId, collImg[i].imageUrl, dataset, tileOnClickInteraction,
         tileOnKeyDownInteraction);
 
@@ -1975,18 +1995,16 @@ customize.loadColorsMenu = function() {
   for (let i = 0; i < colorsColl.length; ++i) {
     const id = 'color_' + i;
     const imageUrl = colorsColl[i].icon;
-    const name = colorsColl[i].label;
     const dataset = {'color': colorsColl[i].color};
 
-    const tile = customize.createTileWithTitle(
-        id, imageUrl, name, dataset, customize.colorTileInteraction,
+    const tile = customize.createTileWithoutTitle(
+        id, imageUrl, dataset, customize.colorTileInteraction,
         customize.colorTileInteraction);
     $(customize.IDS.COLORS_MENU).appendChild(tile);
   }
 
   // Configure the default tile.
-  $(customize.IDS.COLORS_DEFAULT).dataset.color = null;
-  $(customize.IDS.COLORS_DEFAULT).onclick =
+  $(customize.IDS.COLORS_DEFAULT_ICON).onclick =
       customize.defaultThemeTileInteraction;
 
   customize.colorsMenuLoaded = true;

chrome/browser/resources/local_ntp/local_ntp.html

@@ -281,7 +281,6 @@
         </div>
         <div id="colors-default" class="bg-sel-tile-bg">
           <div id="colors-default-icon" class="bg-sel-tile"></div>
-          <div class="bg-sel-tile-title">$i18n{noBackground}</div>
         </div>
       </div>
       </div>

chrome/test/data/local_ntp/local_ntp_browsertest.html

@@ -271,7 +271,6 @@
           </div>
           <div id="colors-default" class="bg-sel-tile-bg">
             <div id="colors-default-icon" class="bg-sel-tile"></div>
-            <div class="bg-sel-tile-title">$i18n{noBackground}</div>
           </div>
         </div>
       </div>