Bug 1902083 - Move sidebar padding into moz-buttons. r=reusable-components-reviewers,sidebar-reviewers,desktop-theme-reviewers,hjones,jsudiaman,dao,tabbrowser-reviewers

Moves the sidebar padding into the moz-buttons.
This results in an accessibility improvement by giving users a larger
click surface for these buttons.

These changes prevent visual regressions in the sidebar by ensuring
visual consistency in the following cases:
- Pinned tabs in the expanded and collapsed states when using vertical
tabs
- Pinned tabs in the expanded and collapsed states when using
horizontal tabs
- New tab button, actual tabs, and action lists in the expanded and
collapsed states when using vertical tabs

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

browser/components/sidebar/sidebar-main.css

@@ -8,8 +8,10 @@
   box-sizing: border-box;
   height: 100%;
   min-width: 50px;
-  padding: var(--space-small);
+  padding-block: var(--space-small);
-  padding-inline-end: 0;
+  padding-inline: 0;
+  background-color: var(--toolbar-bgcolor);
+  color: var(--toolbar-color);
 
   /* stylelint-disable-next-line media-query-no-invalid */
   @media (-moz-bool-pref: "sidebar.verticalTabs") {
@@ -22,8 +24,20 @@
 .actions-list {
   display: flex;
   flex-direction: column;
-  padding-inline-end: var(--space-small);
+  justify-content: center;
   align-items: center;
+
+  > moz-button {
+    --button-outer-padding-inline: var(--space-medium);
+  }
+}
+
+.tools-and-extensions > moz-button:first-of-type {
+  --button-outer-padding-block-start: var(--space-small);
+}
+
+.bottom-actions > moz-button:last-of-type {
+  --button-outer-padding-block-end: var(--space-small);
 }
 
 @media (prefers-reduced-motion: no-preference) {

browser/themes/shared/tabbrowser/tabs.css

@@ -12,7 +12,7 @@
     --tab-min-height: 41px;
   }
   --collapsed-tab-width: 40px;
-  --inline-tab-padding: 8px;
+  --inline-tab-padding: var(--space-medium);
   --tab-border-radius: 4px;
   --tab-shadow-max-size: 6px;
   --tab-block-margin: 4px;
@@ -807,7 +807,6 @@ tab-group {
   min-height: var(--tab-min-height);
   border-radius: var(--border-radius-medium);
   padding: 0 var(--inline-tab-padding);
-  margin-inline-end: var(--space-medium);
 
   #tabbrowser-tabs:not([orient="vertical"]) > & {
     display: none;
@@ -837,11 +836,15 @@ sidebar-main:not([expanded]) > #vertical-tabs > #tabbrowser-tabs[orient="vertica
 sidebar-main[expanded] > #vertical-tabs > #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab {
   min-width: calc(100% - var(--space-medium));
   flex: none;
+  max-width: none;
+  padding: 0;
 }
 
 #vertical-tabs {
   overflow: hidden;
   display: none;
+  padding-inline: var(--space-medium);
+  padding-block-start: var(--space-medium);
 
   &[visible] {
     display: flex;
@@ -858,7 +861,6 @@ sidebar-main[expanded] > #vertical-tabs > #tabbrowser-tabs[orient="vertical"] .t
   max-height: 244px;
   column-gap: 4px;
   padding-bottom: var(--space-small);
-  margin-inline-end: var(--space-medium);
 
   sidebar-main:not([expanded]) &:not(:empty) {
     border-bottom: var(--tabstrip-inner-border);