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 3204779395ce
parent 464405 19ec728351ac
child 464407 893781729409
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;
 }