[NTP] Make default option in the RP work

Add the selected state for the default tile, using a placeholder
icon for now. Make clicking done rest the background to default.

Screencast: http://go/scrcast/NTg4MzA0MjMyMTEzNzY2NHwxYTFhMDM1YS0zNA

Bug: 937570
Change-Id: Iab0b09c16124333caf9513126ee94e7d403d15f2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1606577
Commit-Queue: Kyle Milka <kmilka@chromium.org>
Reviewed-by: Gayane Petrosyan <gayane@chromium.org>
Cr-Commit-Position: refs/heads/master@{#658841}

chrome/browser/resources/local_ntp/custom_backgrounds.js

@@ -75,6 +75,8 @@ customBackgrounds.IDS = {
   ATTR2: 'attr2',
   ATTRIBUTIONS: 'custom-bg-attr',
   BACK_CIRCLE: 'bg-sel-back-circle',
+  BACKGROUNDS_DEFAULT: 'backgrounds-default',
+  BACKGROUNDS_DEFAULT_ICON: 'backgrounds-default-icon',
   BACKGROUNDS_BUTTON: 'backgrounds-button',
   BACKGROUNDS_IMAGE_MENU: 'backgrounds-image-menu',
   BACKGROUNDS_MENU: 'backgrounds-menu',
@@ -316,6 +318,7 @@ customBackgrounds.resetImageMenu = function(showMenu) {
 
   // Reset done button state.
   $(customBackgrounds.IDS.MENU_DONE).disabled = true;
+  customBackgrounds.deselectTile(customBackgrounds.selectedTile);
   customBackgrounds.selectedTile = null;
   $(customBackgrounds.IDS.MENU_DONE).tabIndex = -1;
 };
@@ -493,7 +496,12 @@ customBackgrounds.showCollectionSelectionDialog = function(collectionsSource) {
           $(customBackgrounds.IDS.BACKGROUNDS_IMAGE_MENU)
               .classList.toggle(customBackgrounds.CLASSES.MENU_SHOWN, true);
 
-          customBackgrounds.resetSelectionDialog();
+          // In the RP the upload or default tile may be selected.
+          if (configData.richerPicker) {
+            customBackgrounds.deselectTile(customBackgrounds.selectedTile);
+          } else {
+            customBackgrounds.resetSelectionDialog();
+          }
           customBackgrounds.showImageSelectionDialog(tile.dataset.name);
         } else {
           customBackgrounds.handleError(collImgErrors);
@@ -571,9 +579,12 @@ customBackgrounds.selectTile = function(tile) {
 /**
  * Remove styling from a selected tile in the richer picker and disable the
  * done button.
- * @param {!Element} tile The tile to remove styling from.
+ * @param {?Element} tile The tile to remove styling from.
  */
 customBackgrounds.deselectTile = function(tile) {
+  if (tile === null) {
+    return;
+  }
   tile.parentElement.classList.toggle(
       customBackgrounds.CLASSES.SELECTED, false);
   $(customBackgrounds.IDS.MENU_DONE).disabled = true;
@@ -1321,6 +1332,15 @@ customBackgrounds.initCustomBackgrounds = function(showErrorNotification) {
     }
   };
 
+  $(customBackgrounds.IDS.BACKGROUNDS_DEFAULT).onclick = function() {
+    const tile = $(customBackgrounds.IDS.BACKGROUNDS_DEFAULT_ICON);
+    tile.dataset.url = '';
+    tile.dataset.attributionLine1 = '';
+    tile.dataset.attributionLine2 = '';
+    tile.dataset.attributionActionUrl = '';
+    customBackgrounds.selectTile(tile);
+  };
+
   $(customBackgrounds.IDS.BACKGROUNDS_BUTTON).onclick = function() {
     $(customBackgrounds.IDS.BACKGROUNDS_MENU)
         .classList.toggle(customBackgrounds.CLASSES.MENU_SHOWN, true);

chrome/browser/resources/local_ntp/local_ntp.css

@@ -1008,10 +1008,7 @@ html[dir=rtl] .menu-option {
   margin-bottom: 8px;
 }
 
-#backgrounds-image-menu .bg-sel-tile-bg.selected {
-  background-color: rgba(var(--GB900-rgb), .08);
-}
-
+.selected #backgrounds-default-icon,
 #backgrounds-image-menu .bg-sel-tile-bg.selected .bg-sel-tile {
   height: 144px;
   margin: 16px 16px 0 16px;
@@ -1045,6 +1042,11 @@ html[dir=rtl] .menu-option {
   width: 174px;
 }
 
+#backgrounds-default.selected,
+#backgrounds-image-menu .bg-sel-tile-bg.selected {
+  background-color: rgba(var(--GB900-rgb), .08);
+}
+
 #backgrounds-upload.bg-sel-tile-bg {
   background-color: white;
   border: 1px solid rgb(var(--GG300-rgb));
@@ -1083,7 +1085,7 @@ html[dir=rtl] #menu-back {
   -webkit-mask-image: url(icons/upload.svg);
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-size: 100%;
-  background: 32px 24px rgb(var(--GG700-rgb));
+  background: 32px 32px rgb(var(--GG700-rgb));
   height: 32px;
   margin-bottom: 8px;
   margin-inline-start: 72px;
@@ -1122,3 +1124,12 @@ html[dir=rtl] .bg-sel-tile .selected-check {
   left: 0;
   right: initial;
 }
+
+#backgrounds-default-icon {
+  background-color: white;
+  background-image: url(icons/upload.svg);
+  background-repeat: no-repeat;
+  height: 174px;
+  opacity: 1;
+  width: 174px;
+}

chrome/browser/resources/local_ntp/local_ntp.html

@@ -205,6 +205,7 @@
           <div id="backgrounds-upload-text">$i18n{uploadImage}</div>
         </div>
         <div id="backgrounds-default" class="bg-sel-tile-bg">
+          <div id="backgrounds-default-icon" class="bg-sel-tile"></div>
           <div class="bg-sel-tile-title">Default</div>
         </div>
       </div>

chrome/test/data/local_ntp/local_ntp_browsertest.html

@@ -191,6 +191,7 @@
             <div id="backgrounds-upload-text">$i18n{uploadImage}</div>
           </div>
           <div id="backgrounds-default" class="bg-sel-tile-bg">
+            <div id="backgrounds-default-icon" class="bg-sel-tile"></div>
             <div class="bg-sel-tile-title">Default</div>
           </div>
         </div>