[webui][ntp] Unify focus rings

Creates the CSS var --ntp-focus-shadow describing the box shadow we
customarily use to create a focus ring. Uses this new var throughout the
NTP.

Enlarges the focus ring of the voice search button to make it more
similar to the local NTP.

For promos still uses outline to create the focus ring since we haven't
set up keyboard tracking in the promo iframe. However, colors the
outline like the box shadow of other elements to make it look similar.

Fixed: 1077445
Change-Id: I8cac5a976ee7e5af483f7162e8753584759b57e5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2195333
Auto-Submit: Tibor Goldschwendt <tiborg@chromium.org>
Commit-Queue: Moe Ahmadi <mahmadi@chromium.org>
Reviewed-by: Moe Ahmadi <mahmadi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#768508}

chrome/browser/resources/new_tab_page/app.html

@@ -99,7 +99,7 @@
   }
 
   :host-context(.focus-outline-visible) #customizeButton:focus {
-    box-shadow: 0 0 0 2px var(--ntp-focus-shadow-color);
+    box-shadow: var(--ntp-focus-shadow);
   }
 
   #customizeIcon {

chrome/browser/resources/new_tab_page/customize_backgrounds.html

@@ -17,7 +17,7 @@
   }
 
   :host-context(.focus-outline-visible) .tile:focus {
-    box-shadow: 0 0 0 2px var(--ntp-focus-shadow-color);
+    box-shadow: var(--ntp-focus-shadow);
   }
 
   .image {

chrome/browser/resources/new_tab_page/customize_shortcuts.html

@@ -22,8 +22,8 @@
     width: 268px;
   }
 
-  :host-context(.focus-outline-visible)) .option-image:focus {
-    box-shadow: 0 0 0 2px var(--ntp-focus-shadow-color);
+  :host-context(.focus-outline-visible) .option-image:focus {
+    box-shadow: var(--ntp-focus-shadow);
   }
 
   .selected .option-image {

chrome/browser/resources/new_tab_page/fakebox.html

@@ -100,16 +100,17 @@
     background: url(icons/googlemic_clr_24px.svg) no-repeat center;
     background-size: 21px 21px;
     border: none;
+    border-radius: 2px;
     cursor: pointer;
-    height: 21px;
+    height: 100%;
     outline: none;
     padding: 0;
     pointer-events: auto;
-    width: 21px;
+    width: 26px;
   }
 
   :host-context(.focus-outline-visible) #voiceSearchButton:focus {
-    box-shadow: 0 0 0 2px var(--ntp-focus-shadow-color);
+    box-shadow: var(--ntp-focus-shadow);
   }
 </style>
 <input id="input" on-pointerdown="onPointerDown_" on-paste="onPaste_"

chrome/browser/resources/new_tab_page/most_visited.html

@@ -53,6 +53,7 @@
     height: var(--tile-size);
     margin-bottom: var(--tile-margin);
     opacity: 1;
+    outline: none;
     padding-top: var(--tile-margin);
     position: relative;
     text-decoration: none;
@@ -63,6 +64,11 @@
     width: var(--tile-size);
   }
 
+  :host-context(.focus-outline-visible) .tile:focus,
+  :host-context(.focus-outline-visible) #addShortcut:focus {
+    box-shadow: var(--ntp-focus-shadow);
+  }
+
   #addShortcut {
     background-color: transparent;
     border: none;
@@ -70,14 +76,6 @@
     padding: 0;
   }
 
-  :host-context(.focus-outline-visible) #addShortcut:focus {
-    outline: auto;
-  }
-
-  :host-context(html:not(.focus-outline-visible)) .tile {
-    outline: none;
-  }
-
   :host(:not([reordering_])) .tile:hover,
   :host(:not([reordering_])) #addShortcut:hover,
   .force-hover {

chrome/browser/resources/new_tab_page/realbox.html

@@ -92,16 +92,17 @@
   }
 
   #voiceSearchButton {
-    background-size: 21px;
     background: url(icons/googlemic_clr_24px.svg) no-repeat center;
+    background-size: 21px;
     border: none;
+    border-radius: 2px;
     cursor: pointer;
     height: 100%;
     outline: none;
     padding: 0;
     position: absolute;
     right: 16px;
-    width: 21px;
+    width: 26px;
   }
 
   :host-context([dir='rtl']) #voiceSearchButton {
@@ -110,7 +111,7 @@
   }
 
   :host-context(.focus-outline-visible) #voiceSearchButton:focus {
-    box-shadow: 0 0 0 2px var(--ntp-focus-shadow-color);
+    box-shadow: var(--ntp-focus-shadow);
   }
 </style>
 <div id="realboxInputWrapper">

chrome/browser/resources/new_tab_page/shared_vars.css

@@ -8,6 +8,7 @@
  * 'ui/webui/resources/shared_vars_css.m.js'.
  */
 html {
+  /* Colors: */
   --ntp-active-background-color: rgba(var(--google-grey-900-rgb), .16);
   --ntp-background-override-color: white;
   --ntp-border-color: var(--google-grey-refresh-300);
@@ -20,10 +21,14 @@ html {
   --ntp-selected-border-color: var(--google-blue-600);
   --ntp-selected-light-background-color: rgba(var(--google-blue-600-rgb), .24);
   --ntp-selected-primary-text-color: var(--google-blue-refresh-700);
+
+  /* Other: */
+  --ntp-focus-shadow: 0 0 0 2px var(--ntp-focus-shadow-color);
 }
 
 @media (prefers-color-scheme: dark) {
   html {
+    /* Colors: */
     --ntp-active-background-color: rgba(var(--google-grey-200-rgb), .16);
     --ntp-background-override-color: var(--google-grey-900);
     --ntp-border-color: var(--google-grey-refresh-700);

chrome/browser/resources/new_tab_page/untrusted/promo.html

@@ -11,6 +11,8 @@
         --google-grey-200: rgb(var(--google-grey-200-rgb));
         --google-grey-900-rgb: 32, 33, 36;  /* #202124 */
         --google-grey-900: rgb(var(--google-grey-900-rgb));
+        --google-blue-refresh-300-rgb: 138, 180, 248;  /* #8ab4f8 */
+        --google-blue-refresh-300: rgb(var(--google-blue-refresh-300-rgb));
         --google-grey-refresh-300-rgb: 218, 220, 224;  /* #dadce0 */
         --google-grey-refresh-300: rgb(var(--google-grey-refresh-300-rgb));
         --google-grey-refresh-700-rgb: 95, 99, 104;  /* #5f6368 */
@@ -60,10 +62,18 @@
         text-decoration: none;
       }
 
+      body > div > a:focus {
+        outline: solid 2px rgba(var(--google-blue-600-rgb), .4);
+      }
+
       @media (prefers-color-scheme: dark) {
         body > div > a {
           color: var(--google-blue-400);
         }
+
+        body > div > a:focus {
+          outline: solid 2px rgba(var(--google-blue-refresh-300-rgb), .5);
+        }
       }
 
       body > div > img {

chrome/browser/resources/new_tab_page/voice_search_overlay.html

@@ -48,7 +48,7 @@
   }
 
   :host-context(.focus-outline-visible) #closeButton:focus {
-    box-shadow: 0 0 0 2px var(--ntp-focus-shadow-color);
+    box-shadow: var(--ntp-focus-shadow);
   }
 
   :host-context([dir='ltr']) #closeButton {