Bug 1696535 - Make tabbar toolbarbuttons use tab dimensions with Proton. r=jaws

This also fixes the new tab button stretching in compact mode by not forcing a min-height.

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

browser/themes/shared/toolbarbuttons.inc.css

@@ -59,6 +59,14 @@
   --bookmark-block-padding: 7px;
 }
 
+@supports -moz-bool-pref("browser.proton.tabs.enabled") {
+:root:not([uidensity=touch]) #TabsToolbar {
+  /* Override the inner padding to ensure the dimensions match the tabs, but also making sure
+     different types of buttons (combined-buttons-dropmarker or text) still look correct. */
+  --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2);
+}
+} /*** END proton ***/
+
 /* We use :-moz-lwtheme-* for toolbarbuttons that aren't inside a toolbar, and
    [brighttext] to cater for OS themes where :-moz-lwtheme-* doesn't apply. */
 :root:-moz-lwtheme-darktext,
@@ -184,16 +192,6 @@ toolbar .toolbarbutton-combined-buttons-dropmarker > .toolbarbutton-icon {
   width: calc(2 * 2px + 12px);
 }
 
-@supports -moz-bool-pref("browser.proton.tabs.enabled") {
-#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
-#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
-  min-height: var(--tab-min-height);
-  /* Increase the vertical padding to account for the taller button
-    and not stretch the icon. */
-  padding-block: calc((var(--tab-min-height) - 16px) / 2);
-}
-} /*** END proton ***/
-
 toolbar .toolbarbutton-1 > .toolbarbutton-text {
   padding-top: var(--toolbarbutton-vertical-text-padding);
   padding-bottom: 0;