Bug 1758166 - Use --focus-outline instead of --deafult-focusring for XUL <radio> and <checkbox>. r=Itiel

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

browser/base/content/pageinfo/pageInfo.js

@@ -473,7 +473,7 @@ async function loadTab(args) {
     document.getElementById("generalTab");
   radioGroup.selectedItem = initialTab;
   radioGroup.selectedItem.doCommand();
-  radioGroup.focus();
+  radioGroup.focus({ preventFocusRing: true });
 }
 
 function openCacheEntry(key, cb) {

browser/themes/linux/pageInfo.css

@@ -24,6 +24,10 @@
   padding: 0 6px;
 }
 
+#viewGroup:focus-visible > radio[focused="true"] > .radio-label-box {
+  outline: var(--default-focusring);
+}
+
 #topBar {
   border-bottom: 1px solid ThreeDShadow;
   padding-inline-start: 10px;

browser/themes/windows/pageInfo.css

@@ -41,6 +41,10 @@
   padding: 0 6px;
 }
 
+#viewGroup:focus-visible > radio[focused="true"] > .radio-label-box {
+  outline: var(--default-focusring);
+}
+
 #generalTab {
   -moz-image-region: rect(0px, 32px, 32px, 0px)
 }

toolkit/themes/linux/global/radio.css

@@ -41,7 +41,7 @@ radio {
 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);
+  outline: var(--focus-outline);
 }
 
 /* ..... disabled state ..... */

toolkit/themes/shared/checkbox.css

@@ -109,8 +109,8 @@ checkbox:not([native]):focus-visible > .checkbox-check {
 
   /* ..... focused state ..... */
 
-  checkbox[native]:-moz-focusring > .checkbox-label-box {
-    outline: var(--default-focusring);
+  checkbox[native]:focus-visible > .checkbox-label-box {
+    outline: var(--focus-outline);
   }
 
   /* ..... disabled state ..... */
@@ -190,10 +190,10 @@ checkbox:not([native]):focus-visible > .checkbox-check {
 
   /* ..... focused state ..... */
 
-  checkbox[native]:-moz-focusring > .checkbox-label-box {
+  checkbox[native]:focus-visible > .checkbox-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);
+    outline: var(--focus-outline);
   }
 
   /* ..... disabled state ..... */

toolkit/themes/windows/global/radio.css

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