Bug 1506510 - add/fix keyboard focus styling for notification and blocked permission icon buttons. r=dao

Differential Revision: https://phabricator.services.mozilla.com/D23557

--HG--
extra : moz-landing-system : lando

browser/themes/linux/browser.css

@@ -267,12 +267,6 @@ menuitem.bookmark-item {
 %include ../shared/notification-icons.inc.css
 %include ../shared/addon-notification.inc.css
 
-/* Notification icon box */
-
-.notification-anchor-icon:-moz-focusring {
-  outline: 1px dotted -moz-DialogText;
-}
-
 /* Translation infobar */
 
 %include ../shared/translation/infobar.inc.css

browser/themes/osx/browser.css

@@ -705,10 +705,6 @@ html|input.urlbar-input {
 
 %include ../shared/notification-icons.inc.css
 
-.notification-anchor-icon:-moz-focusring {
-  box-shadow: var(--focus-ring-box-shadow);
-}
-
 /* Translation */
 
 %include ../shared/translation/infobar.inc.css

browser/themes/shared/notification-icons.inc.css

@@ -18,6 +18,13 @@
   padding-inline-end: 5px;
 }
 
+.blocked-permission-icon:-moz-focusring,
+.notification-anchor-icon:-moz-focusring {
+  outline: var(--toolbarbutton-focus-outline);
+  outline-offset: 4px;
+  -moz-outline-radius: var(--toolbarbutton-border-radius);
+}
+
 /* This class can be used alone or in combination with the class defining the
    type of icon displayed. This rule must be defined before the others in order
    for its list-style-image to be overridden. */

browser/themes/windows/browser.css

@@ -760,12 +760,6 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
 %include ../shared/notification-icons.inc.css
 %include ../shared/addon-notification.inc.css
 
-/* Notification icon box */
-
-.notification-anchor-icon:-moz-focusring {
-  outline: 1px dotted -moz-DialogText;
-}
-
 /* Translation infobar */
 
 %include ../shared/translation/infobar.inc.css