[NTP][Realbox] Header row should not appear focused when clicked

There is no way around not giving the header row focus when clicked.
If the header is unfocusable, clicking it would close the realbox popup.
This CL changes the header CSS rules so that it won't appear as focused
when clicked. The header continues to appear as focused when the toggle
button receives focus.

Bug: 1082516
Change-Id: I5ec63f1adeb4a3f82e621924a5de8bfdacf06136
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2209564
Commit-Queue: Moe Ahmadi <mahmadi@chromium.org>
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Auto-Submit: Moe Ahmadi <mahmadi@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#770357}

chrome/browser/resources/local_ntp/local_ntp.css

@@ -373,7 +373,8 @@ html[dir=rtl] .image-container {
   background-color: var(--search-box-results-bg-hovered, rgb(232, 232, 233));
 }
 
-#realbox-matches a:-webkit-any(:focus-within, .selected) {
+#realbox-matches a:not(.header):-webkit-any(:focus-within, .selected),
+#realbox-matches a.header:focus-within:not(:focus) {
   background-color: var(--search-box-results-bg-selected, rgb(219, 219, 220));
   color: var(--search-box-results-text-selected, rgb(var(--GG900-rgb)));
 }

chrome/browser/resources/new_tab_page/realbox_dropdown.html

@@ -45,14 +45,11 @@
     background-color: var(--search-box-results-bg-hovered, rgba(var(--google-grey-900-rgb), .1));
   }
 
-  ntp-realbox-match:-webkit-any(:focus-within, .selected) {
+  ntp-realbox-match:-webkit-any(:focus-within, .selected),
+  .header:focus-within:not(:focus) {
     background-color: var(--search-box-results-bg-selected, rgba(var(--google-grey-900-rgb), .16));
     color: var(--search-box-results-text-selected, var(--google-grey-900));
   }
-
-  .header:focus-within {
-    background-color: var(--search-box-results-bg-selected, rgba(var(--google-grey-900-rgb), .16));
-  }
 </style>
 <iron-selector id="selector" selectable="ntp-realbox-match"
     items="{{selectableMatchElements_}}" selected="{{selectedMatchIndex}}"