Bug 1708451 - Temporarily boost z-index of main part of splitbutton when showing its focus ring. r=Itiel,desktop-theme-reviewers
authorMike Conley <mconley@mozilla.com>
Tue, 18 May 2021 22:30:36 +0000
changeset 579973 eacb2478603260678a534bfb10f7d904fe70e896
parent 579972 0c97af20bdadd424c8af6923a24955e8692987d7
child 579974 1573cb8af7c7c3a54825925edbddb884091b763e
push id38473
push usermalexandru@mozilla.com
push dateWed, 19 May 2021 03:32:12 +0000
treeherdermozilla-central@3557d61e4136 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersItiel, desktop-theme-reviewers
bugs1708451
milestone90.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 1708451 - Temporarily boost z-index of main part of splitbutton when showing its focus ring. r=Itiel,desktop-theme-reviewers Differential Revision: https://phabricator.services.mozilla.com/D115408
toolkit/themes/shared/popupnotification.inc.css
--- a/toolkit/themes/shared/popupnotification.inc.css
+++ b/toolkit/themes/shared/popupnotification.inc.css
@@ -224,16 +224,27 @@ popupnotification {
   flex: none;
 }
 
 .panel-footer > .popup-notification-secondary-button:not([dropmarkerhidden="true"]) {
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
 
+/**
+ * The focus ring is an outline thicker than 1px, meaning that for split buttons,
+ * if the main button part of the split button has :focus-visible, the ring will
+ * be partially hidden behind the dropmarker button. We work around this by
+ * temporarily boosting the z-index of the main button while showing its focus
+ * ring.
+ */
+.panel-footer > .popup-notification-secondary-button:not([dropmarkerhidden="true"]):focus-visible {
+  z-index: 2;
+}
+
 .popup-notification-icon:not([hasicon]) {
   display: none;
 }
 
 .popup-notification-icon {
   height: 16px;
   width: 16px;
   margin-inline-end: 6px;