[NTP] Add pressed state to back arrow in the richer picker

Bug: http://go/scrcast/NTgxNzAwNTcyODg1ODExMnxmMTJmYzk0YS0xMw

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

chrome/browser/resources/local_ntp/custom_backgrounds.js

@@ -96,7 +96,7 @@ customBackgrounds.IDS = {
   EDIT_BG_ICON: 'edit-bg-icon',
   EDIT_BG_MENU: 'edit-bg-menu',
   EDIT_BG_TEXT: 'edit-bg-text',
-  MENU_BACK: 'menu-back',
+  MENU_BACK_CIRCLE: 'menu-back-circle',
   MENU_CANCEL: 'menu-cancel',
   MENU_DONE: 'menu-done',
   MENU_TITLE: 'menu-title',
@@ -1336,7 +1336,7 @@ customBackgrounds.initCustomBackgrounds = function(showErrorNotification) {
         customBackgrounds.dialogCollectionsSource);
   };
   $(customBackgrounds.IDS.BACK_CIRCLE).onclick = backInteraction;
-  $(customBackgrounds.IDS.MENU_BACK).onclick = backInteraction;
+  $(customBackgrounds.IDS.MENU_BACK_CIRCLE).onclick = backInteraction;
   $(customBackgrounds.IDS.BACK_CIRCLE).onkeyup = function(event) {
     if (event.keyCode === customBackgrounds.KEYCODES.ENTER ||
         event.keyCode === customBackgrounds.KEYCODES.SPACE) {

chrome/browser/resources/local_ntp/local_ntp.css

@@ -950,14 +950,13 @@ html[darkmode=true] .menu-option-icon {
 #menu-title-wrapper {
   display: inline-block;
   height: 80px;
+  line-height: 80px;
   position: absolute;
+  vertical-align: center;
 }
 
 #menu-title {
   font-size: 16px;
-  height: 20px;
-  line-height: 20px;
-  margin-top: 38px;
   user-select: none;
   width: fit-content;
 }
@@ -1095,10 +1094,9 @@ html[darkmode=true] #backgrounds-menu .bg-sel-tile-title {
   -webkit-mask-size: 20px;
   background-color: rgb(var(--GG900-rgb));
   height: 20px;
-  margin-inline-start: 192px;
-  margin-top: 39px;
+  margin-inline-start: 8px;
+  margin-top: 8px;
   outline: none;
-  visibility: hidden;
   width: 20px;
 }
 
@@ -1106,15 +1104,42 @@ html[darkmode=true] #menu-back {
   background-color: rgb(var(--GG200-rgb));
 }
 
-html[dir=rtl] #menu-back {
-  transform: scaleX(-1);
+#menu-back-circle {
+  border-radius: 50%;
+  display: inline-block;
+  height: 36px;
+  margin-inline-start: 192px;
+  margin-top: 22px;
+  outline: none;
+  visibility: hidden;
+  width: 36px;
 }
 
-.on-img-menu #menu-back {
+html[darkmode=true] #menu-back-circle:active,
+html[darkmode=true] #menu-back-circle:focus {
+  background: rgb(var(--GG800-rgb));
+}
+
+.on-img-menu #menu-back-circle {
   margin-inline-start: 212px;
   visibility: visible;
 }
 
+#menu-back-circle:active,
+#menu-back-circle:focus {
+  background: rgb(var(--GG300-rgb));
+  background-position: center;
+  background-size: 36px 36px;
+}
+
+html[darkmode=true] #menu-back {
+  background-color: rgb(var(--GG200-rgb));
+}
+
+html[dir=rtl] #menu-back {
+  transform: scaleX(-1);
+}
+
 #backgrounds-upload-icon {
   -webkit-mask-image: url(icons/upload.svg);
   -webkit-mask-repeat: no-repeat;

chrome/browser/resources/local_ntp/local_ntp.html

@@ -172,7 +172,9 @@
   <dialog id="customization-menu" class="customize-dialog">
     <div id="menu-header">
       <div id="menu-back-wrapper">
-        <div id="menu-back"></div>
+        <div id="menu-back-circle" tabindex="0">
+          <div id="menu-back"></div>
+        </div>
       </div>
       <div id="menu-title-wrapper">
         <div id="menu-title">$i18n{customizeMenuTitle}</div>

chrome/test/data/local_ntp/local_ntp_browsertest.html

@@ -158,7 +158,9 @@
     <dialog id="customization-menu" class="customize-dialog">
       <div id="menu-header">
         <div id="menu-back-wrapper">
-          <div id="menu-back"></div>
+          <div id="menu-back-circle" tabindex="0">
+            <div id="menu-back"></div>
+          </div>
         </div>
         <div id="menu-title-wrapper">
           <div id="menu-title">$i18n{customizeMenuTitle}</div>