Entry point button should have a focus ring on keypress after mouse click.

Bug: 937218
Change-Id: I66a30f2f095731957055cf082e39657a5c551b3e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1497415Reviewed-by: Kristi Park <kristipark@chromium.org>
Commit-Queue: Gayane Petrosyan <gayane@chromium.org>
Cr-Commit-Position: refs/heads/master@{#638292}

chrome/browser/resources/local_ntp/custom_backgrounds.css

@@ -287,8 +287,7 @@ right, so that every text can stay on its row even on the smallest window */
   display: none;
 }
 
-.using-mouse-nav :focus,
-.using-mouse-nav:focus {
+.using-mouse-nav :focus {
   outline: none;
 }
 

chrome/browser/resources/local_ntp/custom_backgrounds.js

@@ -822,12 +822,6 @@ customBackgrounds.init = function(
     }
   };
 
-  // Handle focus state for the gear icon.
-  $(customBackgrounds.IDS.EDIT_BG).onmousedown = function() {
-    $(customBackgrounds.IDS.EDIT_BG)
-        .classList.add(customBackgrounds.CLASSES.MOUSE_NAV);
-  };
-
   // Interactions to close the customization option dialog.
   let editDialogInteraction = function() {
     editDialog.close();

chrome/browser/resources/local_ntp/local_ntp.css

@@ -87,10 +87,6 @@ button {
   padding: 0;
 }
 
-.mouse-navigation {
-  outline: none;
-}
-
 #ntp-contents {
   display: flex;
   flex-direction: column;

chrome/browser/resources/local_ntp/local_ntp.js

@@ -1211,7 +1211,7 @@ function init() {
   }
 
   utils.setPlatformClass(document.body);
-
+  utils.disableOutlineOnMouseClick($(customBackgrounds.IDS.EDIT_BG));
   document.body.classList.add(CLASSES.INITED);
 }
 

chrome/browser/resources/local_ntp/local_ntp_common.css

@@ -63,3 +63,8 @@ body {
   /* Default font families for MacOS */
   font-family: system-ui, BlinkMacSystemFont, 'Roboto', arial, sans-serif;
 }
+
+/* Removes blue focus ring on mouse navigation */
+.mouse-navigation {
+  outline: none;
+}
\ No newline at end of file

chrome/browser/resources/local_ntp/utils.js

@@ -10,8 +10,10 @@
 const CLASSES = {
   MAC: 'mac',                            // Applies MacOS specific properties.
   WIN: 'win',                            // Applies Windows specific properties.
+  MOUSE_NAVIGATION: 'mouse-navigation',  // Removes blue focus ring.
 };
 
+
 /**
  * Alias for document.getElementById.
  * @param {string} id The ID of the element to find.
@@ -35,9 +37,9 @@ let utils = {};
  */
 utils.disableOutlineOnMouseClick = function(element) {
   element.addEventListener('mousedown', () => {
-    element.classList.add('mouse-navigation');
+    element.classList.add(CLASSES.MOUSE_NAVIGATION);
     element.addEventListener('blur', () => {
-      element.classList.remove('mouse-navigation');
+      element.classList.remove(CLASSES.MOUSE_NAVIGATION);
     }, {once: true});
   });
 };