Bug 1692555 - update toolbar focus outline offset to not visually increase button size. r=ntim

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

browser/themes/shared/browser.inc.css

@@ -20,10 +20,19 @@
   --short-notification-gradient: #9059FF;
 }
 
+@supports not -moz-bool-pref("browser.proton.enabled") {
+  :root {
+    --focus-outline-width: 0;
+  }
+}
+
+/*** END !proton ***/
+
 @supports -moz-bool-pref("browser.proton.enabled") {
   :root {
+    --focus-outline-width: 2px;
     --focus-outline-color: currentColor;
-    --focus-outline: 2px solid var(--focus-outline-color);
+    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
   }
 
   @media not (prefers-contrast) {
@@ -35,7 +44,7 @@
       --focus-outline-color: #00DDFF;
     }
   }
-} /*** END !proton ***/
+} /*** END proton ***/
 
 :root[extradragspace][tabsintitlebar]:not([inFullscreen]) {
   --space-above-tabbar: 8px;

browser/themes/shared/toolbarbuttons.inc.css

@@ -276,7 +276,7 @@ toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-b
   color: inherit;
   outline: var(--toolbarbutton-focus-outline);
   -moz-outline-radius: var(--toolbarbutton-border-radius);
-  outline-offset: unset;
+  outline-offset: calc(var(--focus-outline-width) * -1);
 }
 
 :root[uidensity=compact] .findbar-button:-moz-focusring,
@@ -284,7 +284,7 @@ toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-b
 :root[uidensity=compact] toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-icon,
 :root[uidensity=compact] toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-text,
 :root[uidensity=compact] toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-badge-stack {
-  outline-offset: -1px;
+  outline-offset: calc(var(--focus-outline-width) * -1 - 1px);
 }
 
 #PersonalToolbar .toolbarbutton-1:-moz-focusring,
@@ -331,7 +331,7 @@ toolbar .toolbarbutton-1:-moz-focusring {
 }
 
 :root[uidensity=touch] #back-button:-moz-focusring > .toolbarbutton-icon {
-  outline-offset: -2px;
+  outline-offset: calc(var(--focus-outline-width) * -1 - 2px);
 }
 
 :root[uidensity=touch] #back-button {

browser/themes/shared/urlbar-searchbar.inc.css

@@ -881,7 +881,7 @@
 
 #urlbar-zoom-button:-moz-focusring {
   outline: var(--toolbarbutton-focus-outline);
-  outline-offset: unset;
+  outline-offset: calc(var(--focus-outline-width) * -1);
   -moz-outline-radius: 1em;
 }