[NTP] Add selection styling for shortcut options

Add selection styling for the shortcut options in the richer picker.

Screenshots:
https://screenshot.googleplex.com/Xhq71uw82du.png
https://screenshot.googleplex.com/EMCRoFfhnrf.png

Bug: 953822
Change-Id: I5c66cd678d99f6a4e47076705c0f59e73424c212
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1638124
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#665266}

chrome/browser/resources/local_ntp/custom_backgrounds.js

@@ -107,6 +107,8 @@ customBackgrounds.IDS = {
   RESTORE_DEFAULT_TEXT: 'edit-bg-restore-default-text',
   SHORTCUTS_BUTTON: 'shortcuts-button',
   SHORTCUTS_MENU: 'shortcuts-menu',
+  SHORTCUTS_OPTION_CUSTOM_LINKS: 'sh-option-cl',
+  SHORTCUTS_OPTION_MOST_VISITED: 'sh-option-mv',
   UPLOAD_IMAGE: 'edit-bg-upload-image',
   UPLOAD_IMAGE_TEXT: 'edit-bg-upload-image-text',
   TILES: 'bg-sel-tiles',
@@ -587,9 +589,12 @@ customBackgrounds.showCollectionSelectionDialog = function(collectionsSource) {
 /**
  * Apply styling to a selected tile in the richer picker and enable the done
  * button.
- * @param {!Element} tile The tile to apply styling to.
+ * @param {?Element} tile The tile to apply styling to.
  */
 customBackgrounds.richerPicker_selectTile = function(tile) {
+  if (!tile) {
+    return;
+  }
   tile.parentElement.classList.toggle(customBackgrounds.CLASSES.SELECTED, true);
   $(customBackgrounds.IDS.MENU_DONE).disabled = false;
   customBackgrounds.selectedTile = tile;
@@ -610,7 +615,7 @@ customBackgrounds.richerPicker_selectTile = function(tile) {
  * @param {?Element} tile The tile to remove styling from.
  */
 customBackgrounds.richerPicker_deselectTile = function(tile) {
-  if (tile === null) {
+  if (!tile) {
     return;
   }
   tile.parentElement.classList.toggle(
@@ -631,6 +636,21 @@ customBackgrounds.richerPicker_deselectTile = function(tile) {
   }
 };
 
+/**
+ * Apply styling to a selected shortcut option in the richer picker and enable
+ * the done button.
+ * @param {?Element} option The option to apply styling to.
+ */
+customBackgrounds.richerPicker_selectShortcutOption = function(option) {
+  if (!option || customBackgrounds.selectedTile === option) {
+    return;  // The option has already been selected.
+  }
+  // Clear the previous selection, if any.
+  if (customBackgrounds.selectedTile) {
+    customBackgrounds.richerPicker_deselectTile(customBackgrounds.selectedTile);
+  }
+  customBackgrounds.richerPicker_selectTile(option);
+};
 
 /**
  * Apply border and checkmark when a tile is selected
@@ -1436,6 +1456,28 @@ customBackgrounds.initCustomBackgrounds = function(showErrorNotification) {
     }
   };
 
+  const clOption = $(customBackgrounds.IDS.SHORTCUTS_OPTION_CUSTOM_LINKS);
+  clOption.onclick = function() {
+    customBackgrounds.richerPicker_selectShortcutOption(clOption);
+  };
+  clOption.onkeydown = function(event) {
+    if (event.keyCode === customBackgrounds.KEYCODES.ENTER ||
+        event.keyCode === customBackgrounds.KEYCODES.SPACE) {
+      customBackgrounds.richerPicker_selectShortcutOption(clOption);
+    }
+  };
+
+  const mvOption = $(customBackgrounds.IDS.SHORTCUTS_OPTION_MOST_VISITED);
+  mvOption.onclick = function() {
+    customBackgrounds.richerPicker_selectShortcutOption(mvOption);
+  };
+  mvOption.onkeydown = function(event) {
+    if (event.keyCode === customBackgrounds.KEYCODES.ENTER ||
+        event.keyCode === customBackgrounds.KEYCODES.SPACE) {
+      customBackgrounds.richerPicker_selectShortcutOption(mvOption);
+    }
+  };
+
   const richerPickerOpenShortcuts = function() {
     customBackgrounds.richerPicker_resetCustomizationMenu();
     customBackgrounds.richerPicker_selectMenuOption(

chrome/browser/resources/local_ntp/local_ntp.css

@@ -1244,16 +1244,8 @@ html[dir=rtl] #customization-menu .bg-sel-tile .selected-check {
 }
 
 .sh-option {
-  width: 268px;
-}
-
-#sh-option-cl {
   margin-inline-end: 9px;
-}
-
-.sh-option-select {
-  position: absolute;
-  visibility: none;
+  width: 268px;
 }
 
 .sh-option-image {
@@ -1266,6 +1258,11 @@ html[dir=rtl] #customization-menu .bg-sel-tile .selected-check {
   width: 268px;
 }
 
+.selected .sh-option-image {
+  background-color: rgb(var(--GB050-rgb));
+  border-color: rgb(var(--GB600-rgb));
+}
+
 .sh-option-mini {
   background-color: white;
   border: 1px solid rgb(var(--GG300-rgb));
@@ -1283,10 +1280,19 @@ html[dir=rtl] .sh-option-mini {
   right: unset;
 }
 
+.selected .sh-option-mini {
+  box-shadow: 0 1px 3px 0 rgba(var(--GG800-rgb), .3),
+      0 4px 8px 3px rgba(var(--GG800-rgb), .15);
+}
+
 .sh-option-mini .mini-shortcuts {
   background-color: rgb(var(--GG500-rgb));
 }
 
+.selected .sh-option-mini .mini-shortcuts {
+  background-color: rgb(var(--GB600-rgb));
+}
+
 .sh-option-icon {
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-size: 100%;
@@ -1310,7 +1316,34 @@ html[dir=rtl] .sh-option-icon {
   right: 16px;
 }
 
-.sh-title {
+.selected .sh-option-icon {
+  background-color: rgba(var(--GB600-rgb), .24);
+}
+
+.sh-option-image .selected-circle {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .23);
+  height: 24px;
+  left: 208px;
+  top: 8px;
+  width: 24px;
+}
+
+html[dir=rtl] .sh-option-image .selected-circle {
+  left: 0;
+  right: 208px;
+}
+
+.sh-option-image .selected-check {
+  left: -2px;
+  top: -2px;
+}
+
+html[dir=rtl] .sh-option-image .selected-check {
+  left: 0;
+  right: -2px;
+}
+
+.sh-option-title {
   font-weight: bold;
   margin: 8px 0;
 }

chrome/browser/resources/local_ntp/local_ntp.html

@@ -219,8 +219,8 @@
       <div id="backgrounds-image-menu" class="menu-panel"></div>
       <div id="shortcuts-menu" class="menu-panel">
         <div id="sh-options">
-          <div id="sh-option-cl" class="sh-option">
-            <div class="sh-option-image">
+          <div class="sh-option">
+            <div id="sh-option-cl" class="sh-option-image" tabindex="0" role="button">
               <div class="sh-option-icon"></div>
               <div class="sh-option-mini">
                 <div class="mini-page">
@@ -228,13 +228,12 @@
                   <div class="mini-shortcuts"></div>
                 </div>
               </div>
-              <div class="sh-option-select"></div>
             </div>
-            <div class="sh-title">$i18n{myShortcuts}</div>
+            <div class="sh-option-title">$i18n{myShortcuts}</div>
             $i18n{shortcutsCurated}
           </div>
-          <div id="sh-option-mv" class="sh-option">
-            <div class="sh-option-image">
+          <div class="sh-option">
+            <div id="sh-option-mv" class="sh-option-image" tabindex="0" role="button">
               <div class="sh-option-icon"></div>
               <div class="sh-option-mini">
                 <div class="mini-page">
@@ -242,9 +241,8 @@
                   <div class="mini-shortcuts"></div>
                 </div>
               </div>
-              <div class="sh-option-select"></div>
             </div>
-            <div class="sh-title">$i18n{mostVisited}</div>
+            <div class="sh-option-title">$i18n{mostVisited}</div>
             $i18n{shortcutsSuggested}
           </div>
         </div>

chrome/test/data/local_ntp/local_ntp_browsertest.html

@@ -205,8 +205,8 @@
         <div id="backgrounds-image-menu" class="menu-panel"></div>
         <div id="shortcuts-menu" class="menu-panel">
           <div id="sh-options">
-            <div id="sh-option-cl" class="sh-option">
-              <div class="sh-option-image">
+            <div class="sh-option">
+              <div id="sh-option-cl" class="sh-option-image" tabindex="0" role="button">
                 <div class="sh-option-icon"></div>
                 <div class="sh-option-mini">
                   <div class="mini-page">
@@ -214,13 +214,12 @@
                     <div class="mini-shortcuts"></div>
                   </div>
                 </div>
-                <div class="sh-option-select"></div>
               </div>
-              <div class="sh-title">$i18n{myShortcuts}</div>
+              <div class="sh-option-title">$i18n{myShortcuts}</div>
               $i18n{shortcutsCurated}
             </div>
-            <div id="sh-option-mv" class="sh-option">
-              <div class="sh-option-image">
+            <div class="sh-option">
+              <div id="sh-option-mv" class="sh-option-image" tabindex="0" role="button">
                 <div class="sh-option-icon"></div>
                 <div class="sh-option-mini">
                   <div class="mini-page">
@@ -228,9 +227,8 @@
                     <div class="mini-shortcuts"></div>
                   </div>
                 </div>
-                <div class="sh-option-select"></div>
               </div>
-              <div class="sh-title">$i18n{mostVisited}</div>
+              <div class="sh-option-title">$i18n{mostVisited}</div>
               $i18n{shortcutsSuggested}
             </div>
           </div>