Bug 1749948 - Make focus rings in panels more consistent. r=Itiel

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

browser/themes/linux/controlcenter/panel.css

@@ -9,22 +9,12 @@
   appearance: none;
 }
 
-.identity-popup-expander:-moz-focusring,
-.permission-popup-permission-remove-button:-moz-focusring {
-  outline: 1px -moz-dialogtext dotted;
-  outline-offset: -1px;
-}
-
 /* This overrides color: -moz-buttonhovertext from toolbarbutton.css */
 #protections-popup toolbarbutton:not([disabled="true"]):hover,
 #protections-popup toolbarbutton:not([disabled="true"]):hover:active {
   color: inherit;
 }
 
-.protections-popup-tp-switch:-moz-focusring {
-  outline: var(--default-focusring);
-}
-
 #identity-popup[type="arrow"][side="top"],
 #identity-popup[type="arrow"][side="bottom"],
 #notification-popup[type="arrow"][side="top"],

browser/themes/osx/controlcenter/panel.css

@@ -4,18 +4,12 @@
 
 %include ../../shared/controlcenter/panel.inc.css
 
-.identity-popup-expander:-moz-focusring,
-.permission-popup-permission-remove-button:-moz-focusring {
-  box-shadow: var(--focus-ring-box-shadow);
-}
-
 #identity-popup-securityView-body > button {
   min-height: 30px;
 }
 
-.protections-popup-tp-switch:-moz-focusring,
-#identity-popup-securityView-body > button:-moz-focusring {
-  box-shadow: var(--focus-ring-box-shadow);
+#identity-popup-securityView-body > button:focus-visible {
+  outline: var(--focus-outline);
 }
 
 #identity-popup[type="arrow"][side="top"],

browser/themes/shared/controlcenter/panel.inc.css

@@ -448,14 +448,11 @@ description#identity-popup-content-verifier,
   padding: 0 var(--horizontal-padding);
 }
 
-.protections-popup-category:-moz-focusring,
 .protections-popup-category:hover,
-.protections-popup-footer-button:-moz-focusring,
 .protections-popup-footer-button:hover,
 #protections-popup-not-blocking-section-why:hover,
 #protections-popup-show-report-stack:hover > .protections-popup-footer-button {
   background-color: var(--panel-item-hover-bgcolor);
-  outline: none;
 }
 
 .protections-popup-category:hover:active,
@@ -999,12 +996,22 @@ description#identity-popup-content-verifier,
   margin-inline-end: 0;
 }
 
+.identity-popup-expander:focus-visible,
+.permission-popup-permission-remove-button:focus-visible {
+  outline: var(--focus-outline);
+}
+
 .protections-popup-category:focus-visible,
 .protections-popup-footer-button:focus-visible {
-  box-shadow: var(--panelview-toolbarbutton-focus-box-shadow);
+  outline: var(--focus-outline);
   background: none;
 }
 
+.protections-popup-tp-switch:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
 #blocked-popup-indicator-item,
 #geo-access-indicator-item {
   margin-top: -2px;

browser/themes/shared/customizableui/panelUI.inc.css

@@ -4,18 +4,14 @@
 
 %filter substitution
 
-%define buttonStateHoverOrFocus :not([disabled],[open],:active):is(:hover,:focus-visible)
 %define buttonStateHover :not([disabled],[open],:active):is(:hover)
-%define buttonStateFocus :not([disabled],[open],:active):focus-visible
 %define menuStateHover :not([disabled],:active)[_moz-menuactive]
 %define buttonStateActive :not([disabled]):is([open],:hover:active)
 %define menuStateActive :not([disabled])[_moz-menuactive]:active
 %define menuStateMenuActive :not([disabled])[_moz-menuactive]
 %define inAnyPanel :is(:not([cui-areatype="toolbar"]), [overflowedItem=true])
 
 :root {
-  --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color);
-
   --panel-item-hover-bgcolor: var(--button-hover-bgcolor);
   --panel-item-active-bgcolor: var(--button-active-bgcolor);
   --panel-banner-item-color: var(--button-color);
@@ -201,15 +197,19 @@ toolbarseparator + .panel-subview-body,
   visibility: hidden;
 }
 
-.panel-info-button@buttonStateHoverOrFocus@ {
+.panel-info-button:hover {
   background-color: var(--panel-item-hover-bgcolor);
 }
 
 .panel-info-button:not(:hover)[checked],
-.panel-info-button@buttonStateActive@ {
+.panel-info-button:hover:active {
   background-color: var(--panel-item-active-bgcolor);
 }
 
+.panel-info-button:focus-visible {
+  outline: var(--focus-outline);
+}
+
 .panel-info-button > image {
   list-style-image: url(chrome://global/skin/icons/info.svg);
   -moz-context-properties: fill, fill-opacity;
@@ -957,10 +957,6 @@ panelview .toolbarbutton-1,
   -moz-box-pack: start;
 }
 
-.subviewbutton:focus {
-  outline: 0;
-}
-
 .subviewbutton[disabled="true"] {
   color: var(--panel-disabled-color);
 }
@@ -1020,18 +1016,24 @@ panelview .toolbarbutton-1,
   fill: currentColor;
 }
 
-#appMenu-zoomReduce-button2@buttonStateHoverOrFocus@,
-#appMenu-zoomReduce-button2@buttonStateActive@,
-#appMenu-zoomReset-button2@buttonStateHoverOrFocus@,
-#appMenu-zoomReset-button2@buttonStateActive@,
-#appMenu-zoomEnlarge-button2@buttonStateHoverOrFocus@,
-#appMenu-zoomEnlarge-button2@buttonStateActive@,
-#appMenu-fullscreen-button2@buttonStateHoverOrFocus@,
-#appMenu-fullscreen-button2@buttonStateActive@ {
+#appMenu-zoom-controls2 > .subviewbutton {
+  margin-inline-start: 2px;
+  padding: 4px;
+}
+
+#appMenu-zoom-controls2 > .subviewbutton:is(@buttonStateHover@, @buttonStateActive@) {
   color: unset;
   background-color: unset;
-  box-shadow: unset;
- }
+}
+
+#appMenu-zoom-controls2 > .subviewbutton:focus-visible {
+  outline: none;
+}
+
+#appMenu-zoom-controls2 > .subviewbutton-iconic:focus-visible > .toolbarbutton-icon,
+#appMenu-zoomReset-button2:focus-visible > .toolbarbutton-text {
+  outline: var(--focus-outline);
+}
 
 #appMenu-zoomReduce-button2 > .toolbarbutton-icon,
 #appMenu-zoomEnlarge-button2 > .toolbarbutton-icon {
@@ -1071,20 +1073,6 @@ panelview .toolbarbutton-1,
   stroke: var(--panel-item-active-bgcolor);
 }
 
-#appMenu-zoomReset-button2@buttonStateFocus@ > .toolbarbutton-text,
-#appMenu-fullscreen-button2@buttonStateFocus@ > .toolbarbutton-icon {
-  box-shadow: var(--panelview-toolbarbutton-focus-box-shadow);
-}
-#appMenu-zoomReduce-button2@buttonStateFocus@ > .toolbarbutton-icon,
-#appMenu-zoomEnlarge-button2@buttonStateFocus@ > .toolbarbutton-icon {
-  outline: var(--focus-outline);
-}
-
-#appMenu-zoom-controls2 > .subviewbutton {
-  margin-inline-start: 2px;
-  padding: 4px 4px;
-}
-
 /* We don't always display: none this item, and if it has forced width (like above)
  * or margin, that impacts the position of the label. Fix:
  */
@@ -1238,17 +1226,13 @@ panelview .toolbarbutton-1 {
   margin-top: 6px;
 }
 
-/**
- * Focus uses a box-shadow because we want the stroke to be
- * internal to the rect without affecting the surrounding layout. This
- * seemed to be the simplest way to do that.
- */
-panelview .toolbarbutton-1@buttonStateFocus@,
-toolbarbutton.subviewbutton@buttonStateFocus@,
-.navigable.subviewbutton@buttonStateFocus@,
-.widget-overflow-list .toolbarbutton-1@buttonStateFocus@,
-.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateFocus@ {
-  box-shadow: var(--panelview-toolbarbutton-focus-box-shadow);
+panelview .toolbarbutton-1:focus-visible,
+toolbarbutton.subviewbutton:focus-visible,
+.navigable.subviewbutton:focus-visible,
+.widget-overflow-list .toolbarbutton-1:focus-visible,
+.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: calc(var(--focus-outline-width) * -1);
 }
 
 panelview .toolbarbutton-1@buttonStateHover@,
@@ -1525,7 +1509,7 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
   border: 1px solid transparent;
 }
 
-.subviewradio@buttonStateHoverOrFocus@ {
+.subviewradio@buttonStateHover@ {
   background-color: var(--button-hover-bgcolor);
 }
 
@@ -1535,6 +1519,14 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
   background-color: var(--button-active-bgcolor);
 }
 
+radiogroup:focus-visible > .subviewradio[focused="true"] {
+  outline: var(--focus-outline);
+}
+
+radiogroup:focus-visible > .subviewradio[focused="true"] > .radio-label-box {
+  outline: none;
+}
+
 .subviewradio > .radio-check {
   appearance: none;
   width: 16px;
@@ -1619,6 +1611,11 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
   background-color: var(--buttons-destructive-active-bgcolor);
 }
 
+#PanelUI-panic-view-button:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
 #PanelUI-panic-view-button > .toolbarbutton-text {
   text-align: center;
   text-shadow: none;
@@ -1913,12 +1910,7 @@ panelview:not([mainview]) #PanelUI-whatsNew-title {
   text-decoration: underline;
 }
 
-#PanelUI-whatsNew .text-link:focus {
-  color: #0a84ff;
-  text-decoration: underline;
-}
-
-#PanelUI-whatsNew .text-link:active {
+#PanelUI-whatsNew .text-link:hover:active {
   color: #0060df;
 }
 

browser/themes/windows/controlcenter/panel.css

@@ -37,8 +37,3 @@
 #protections-popup[type="arrow"][side="right"] {
   margin-block: calc(-20px + 2 * var(--urlbar-container-padding));
 }
-
-.protections-popup-tp-switch:-moz-focusring {
-  outline: var(--default-focusring);
-  outline-offset: unset;
-}

toolkit/themes/linux/global/radio.css

@@ -38,7 +38,7 @@ radio {
 
 /* ..... focused state ..... */
 
-radio[focused="true"] > .radio-label-box {
+radiogroup:focus-visible > radio[focused="true"] > .radio-label-box {
   /* Native theming should take care of this but it appears to be broken with
      some Gtk themes. Bug 1312169. */
   outline: var(--default-focusring);

toolkit/themes/windows/global/radio.css

@@ -43,7 +43,7 @@ radio {
 
 /* ..... focused state ..... */
 
-radio[focused="true"] > .radio-label-box {
+radiogroup:focus-visible > radio[focused="true"] > .radio-label-box {
   outline: var(--default-focusring);
 }