[NTP] "Disable" the shortcut type options when hide shortcuts is toggled on

Add a disabled state for the shortcut type options that is applied when
the hide shortcuts options is toggled on.

Screencast: https://drive.google.com/open?id=1s68slzxxRwizJAJjmzcFjTOEKJi89Vak

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

chrome/browser/resources/local_ntp/customize.js

@@ -170,6 +170,7 @@ customize.CLASSES = {
   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
+  HIDDEN_SELECTED: 'hidden-selected',
   IMAGE_DIALOG: 'is-img-sel',
   ON_IMAGE_MENU: 'on-img-menu',
   OPTION: 'bg-option',
@@ -1032,6 +1033,8 @@ customize.richerPicker_selectShortcutType = function(shortcutType) {
 /**
  * Handles hide shortcuts toggle. Apply/remove styling for the toggle and
  * enable/disable the done button.
+ * Note: If the toggle is enabled, the options for shortcut type will appear
+ * "disabled".
  * @param {boolean} areHidden True if the shortcuts are hidden, i.e. the toggle
  *     is on.
  */
@@ -1040,6 +1043,8 @@ customize.richerPicker_toggleShortcutHide = function(areHidden) {
   $(customize.IDS.SHORTCUTS_HIDE)
       .classList.toggle(customize.CLASSES.SELECTED, areHidden);
   $(customize.IDS.SHORTCUTS_HIDE_TOGGLE).checked = areHidden;
+  $(customize.IDS.SHORTCUTS_MENU)
+      .classList.toggle(customize.CLASSES.HIDDEN_SELECTED, areHidden);
 
   customize.selectedOptions.shortcutsAreHidden = areHidden;
 };
@@ -2027,6 +2032,8 @@ customize.initCustomBackgrounds = function(showErrorNotification) {
           customize.LOG_TYPE.NTP_CUSTOMIZE_SHORTCUT_CUSTOM_LINKS_CLICKED);
     }
     customize.richerPicker_selectShortcutType(clOption);
+    // Selecting a shortcut type will turn off hidden shortcuts.
+    customize.richerPicker_toggleShortcutHide(false);
   };
   clOption.onkeydown = function(event) {
     if (customize.arrowKeys.includes(event.keyCode)) {
@@ -2053,6 +2060,8 @@ customize.initCustomBackgrounds = function(showErrorNotification) {
           customize.LOG_TYPE.NTP_CUSTOMIZE_SHORTCUT_MOST_VISITED_CLICKED);
     }
     customize.richerPicker_selectShortcutType(mvOption);
+    // Selecting a shortcut type will turn off hidden shortcuts.
+    customize.richerPicker_toggleShortcutHide(false);
   };
   mvOption.onkeydown = function(event) {
     if (customize.arrowKeys.includes(event.keyCode)) {

chrome/browser/resources/local_ntp/local_ntp.css

@@ -1368,6 +1368,10 @@ html[dir=rtl] #customization-menu .bg-sel-tile .selected-check {
   width: 268px;
 }
 
+#shortcuts-menu.hidden-selected .sh-option {
+  color: rgb(var(--GG500-rgb));
+}
+
 .sh-option-image {
   border: 1px solid rgb(var(--GG300-rgb));
   border-radius: 4px;
@@ -1384,13 +1388,13 @@ html[dir=rtl] #customization-menu .bg-sel-tile .selected-check {
   }
 }
 
-.selected .sh-option-image {
+#shortcuts-menu:not(.hidden-selected) .selected .sh-option-image {
   background-color: rgb(var(--GB050-rgb));
   border-color: rgb(var(--GB600-rgb));
 }
 
 @media (prefers-color-scheme: dark) {
-  .selected .sh-option-image {
+  #shortcuts-menu:not(.hidden-selected) .selected .sh-option-image {
     background-color: rgba(var(--GB200-rgb), .1);
     border-color: rgb(var(--GB300-rgb));
   }
@@ -1420,13 +1424,13 @@ html[dir=rtl] .sh-option-mini {
   right: unset;
 }
 
-.selected .sh-option-mini {
+#shortcuts-menu:not(.hidden-selected) .selected .sh-option-mini {
   box-shadow: 0 1px 3px 0 rgba(var(--GG800-rgb), .3),
       0 4px 8px 3px rgba(var(--GG800-rgb), .15);
 }
 
 @media (prefers-color-scheme: dark) {
-  .selected .sh-option-mini {
+  #shortcuts-menu:not(.hidden-selected) .selected .sh-option-mini {
     border-color: transparent;
     box-shadow: var(--dark-mode-shadow);
   }
@@ -1436,12 +1440,12 @@ html[dir=rtl] .sh-option-mini {
   background-color: rgb(var(--GG500-rgb));
 }
 
-.selected .sh-option-mini .mini-shortcuts {
+#shortcuts-menu:not(.hidden-selected) .selected .mini-shortcuts {
   background-color: rgb(var(--GB600-rgb));
 }
 
 @media (prefers-color-scheme: dark) {
-  .selected .sh-option-mini .mini-shortcuts {
+  #shortcuts-menu:not(.hidden-selected) .selected .mini-shortcuts {
     background-color: rgb(var(--GB300-rgb));
   }
 }
@@ -1475,12 +1479,12 @@ html[dir=rtl] .sh-option-icon {
   }
 }
 
-.selected .sh-option-icon {
+#shortcuts-menu:not(.hidden-selected) .selected .sh-option-icon {
   background-color: rgba(var(--GB600-rgb), .24);
 }
 
 @media (prefers-color-scheme: dark) {
-  .selected .sh-option-icon {
+  #shortcuts-menu:not(.hidden-selected) .selected .sh-option-icon {
     background-color: rgb(var(--GB300-rgb));
   }
 }
@@ -1510,6 +1514,11 @@ html[dir=rtl] .sh-option-image .selected-check {
   right: initial;
 }
 
+#shortcuts-menu.hidden-selected .sh-option-image
+    :-webkit-any(.selected-circle, .selected-check) {
+  display: none;
+}
+
 .sh-option-title {
   font-weight: bold;
   margin: 8px 0;

chrome/test/data/local_ntp/customize_menu_browsertest.js

@@ -533,6 +533,11 @@ test.customizeMenu.testShortcuts_CanSelectOptionsKeyboard = function() {
   const hiddenToggle = $(test.customizeMenu.IDS.SHORTCUTS_HIDE_TOGGLE);
   hiddenToggle.dispatchEvent(enter);
   assertShortcutOptionsSelected(false, true, true);
+
+  // Select the custom links option. The custom links option should be selected
+  // and the hide shortcuts toggle disabled.
+  $(test.customizeMenu.IDS.SHORTCUTS_OPTION_CUSTOM_LINKS).click();
+  assertShortcutOptionsSelected(true, false, false);
 };
 
 /**