Bug 1506510 - add/fix keyboard focus styling for notification and blocked permission icon buttons. r=dao
authorYura Zenevich <yura.zenevich@gmail.com>
Fri, 15 Mar 2019 16:01:43 +0000
changeset 464406 3204779395ce6e90bfb39558484641a2d63d2fa7
parent 464405 19ec728351acee967f424397f9f3e1b11e11c0f3
child 464407 8937817294094795018b3bb908fb78b4fa9416aa
push id35716
push useraciure@mozilla.com
push dateSun, 17 Mar 2019 09:42:17 +0000
treeherdermozilla-central@8ee97c045359 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1506510
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1506510 - add/fix keyboard focus styling for notification and blocked permission icon buttons. r=dao Differential Revision: https://phabricator.services.mozilla.com/D23557
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/notification-icons.inc.css
browser/themes/windows/browser.css
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -262,22 +262,16 @@ menuitem.bookmark-item {
 
 /* identity box */
 
 %include ../shared/identity-block/identity-block.inc.css
 
 %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
 
 notification[value="translation"] {
   min-height: 40px;
 }
 
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -700,20 +700,16 @@ html|input.urlbar-input {
   list-style-image: none;
   height: 2px;
   margin-inline-end: -4em;
   background-color: Highlight;
 }
 
 %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
 
 notification[value="translation"] {
   color: #484848;
   background-color: #EFEFEF;
   background-image: none;
--- a/browser/themes/shared/notification-icons.inc.css
+++ b/browser/themes/shared/notification-icons.inc.css
@@ -13,16 +13,23 @@
 
 #notification-popup-box {
   padding: 5px 0px;
   margin: -5px 0px;
   margin-inline-end: -5px;
   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. */
 .notification-anchor-icon {
   list-style-image: url(chrome://browser/skin/notification-icons/default-info.svg);
 }
 
 /* INDIVIDUAL NOTIFICATIONS */
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -755,22 +755,16 @@ toolbarbutton.bookmark-item[dragover="tr
   height: 2px;
   margin-inline-end: -4em;
   background-color: Highlight;
 }
 
 %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
 
 notification[value="translation"] {
   min-height: 40px;
 }