corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Tim Giles
2024-09-12 14:35:55 +00:00
parent 632e1e9672
commit 2a57ef1dd6
2 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
browser/components/sidebar/sidebar-main.css
View File

@@ -8,8 +8,10 @@
box-sizing: border-box;
height: 100%;
min-width: 50px;
padding: var(--space-small);
padding-inline-end: 0;
padding-block: var(--space-small);
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) {

8
browser/themes/shared/tabbrowser/tabs.css
View File

@@ -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);