Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bugfix/fix inconsistent tabs #2379

Closed
wants to merge 5 commits into from
Closed

Bugfix/fix inconsistent tabs #2379

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3f1d0ca
Fix tabs jumping around and having different styles
kwilcz Oct 28, 2024
936d858
sync with recent changes
kwilcz Oct 28, 2024
d112b6a
Remove whitespace changes
kwilcz Oct 28, 2024
e89e5ae
Move logic related to compact mode to `zen-compact-mode.css`
kwilcz Oct 29, 2024
6870ae3
Remove unneeded change for `toolbarbutton` styling
kwilcz Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 29 additions & 27 deletions src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
height: 100%;
}

#TabsToolbar {
padding: var(--zen-toolbox-padding);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure about this, itll make the tabs be un-aligned

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It actually aligns all tabs and makes sure they all share common padding. Otherwise every tab must have its margin set, and they were not consistent between different modes.

Also setting it as --zen-toolbox-padding will allow additional consistency.

Then only difference is between expandable & non-expandable as the top border adds 1px padding.
See:
zen_UMlIAv9Bfa

}

#TabsToolbar > * {
justify-content: center;
}
Expand All @@ -16,7 +20,7 @@
}

#browser {
--zen-toolbox-padding: 5px;
--zen-toolbox-padding: var(--zen-element-separation);
}

#navigator-toolbox {
Expand Down Expand Up @@ -91,7 +95,6 @@
animation: zen-slide-in 0.2s ease-in-out;

max-width: unset !important;
padding: 0 !important;

position: relative;

Expand Down Expand Up @@ -185,7 +188,6 @@
#navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])
) {
--zen-toolbox-min-width: fit-content;
padding: var(--zen-toolbox-padding);
padding-left: 0;
padding-top: 0;

Expand Down Expand Up @@ -242,9 +244,6 @@

&:not([zen-right-side='true']):not([zen-user-hover='true']) {
padding-right: 0;
& #titlebar {
padding-left: var(--zen-toolbox-padding);
}
}

& #TabsToolbar-customization-target {
Expand Down Expand Up @@ -300,7 +299,6 @@
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
}
margin-inline: var(--tab-block-margin);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is necessary for the shadows to appear

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shadows are still there. The issue with this margin being here is the inconsistency.
See:
PowerToys CropAndLock_v7CKalk4EL

I can change it so all tabs (collapsed & expanded) have this margin applied.

}

&:not([pinned]):is(:hover, [visuallyselected]) .tab-close-button {
Expand All @@ -313,19 +311,20 @@
.tab-sharing-icon-overlay,
.tab-icon-overlay {
&:not([pinned]) {
margin-inline-end: var(--toolbarbutton-inner-padding) !important;
margin-inline-start: calc(var(--toolbarbutton-inner-padding) / 4) !important;
margin-inline-end: var(--toolbarbutton-inner-padding);
/* for no reason this button shifts its position 1px to left. Fix it by applying margin */
margin-inline-start: 1px;
}
}
}
}

@media (-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-toolbar') and (not (-moz-bool-pref: 'zen.view.compact.hide-tabbar')) {
& {
margin-top: var(--zen-element-separation) !important;
}
& {
margin-top: var(--zen-element-separation) !important;
}
}
}

/* Mark: toolbox as collapsed */
#navigator-toolbox:not(
Expand All @@ -340,8 +339,7 @@
)
) {
/* Important: When changin this value, make sure expand on hover doesn't break! */
--zen-toolbox-max-width: 49px; /* 1px more because the browser view has one pixel of padding to avoid the border being cut off */
--zen-toolbox-padding: 8px;
--zen-toolbox-max-width: 50px; /* 1px more because the browser view has one pixel of padding to avoid the border being cut off */
max-width: var(--zen-toolbox-max-width) !important;
min-width: var(--zen-toolbox-max-width) !important;

Expand All @@ -367,8 +365,15 @@

& #tabbrowser-arrowscrollbox-periphery {
& > toolbarbutton {
padding: var(--toolbarbutton-inner-padding);

& image {
height: 16px;
width: 16px;
padding: 0 !important;
}

margin: 0 auto !important;
padding: 0 !important;
kwilcz marked this conversation as resolved.
Show resolved Hide resolved
}

&::before {
Expand All @@ -394,15 +399,14 @@
}

& #TabsToolbar-customization-target {
padding-bottom: var(--zen-toolbox-padding);

&::after {
bottom: -1px !important;
}
}

& #tabbrowser-tabs {
--tab-min-width: 36px !important;
--tab-min-width: 38px !important;

& .tabbrowser-tab {
margin: 0 auto;
Expand All @@ -423,11 +427,6 @@
& .tab-label-container {
display: none;
}

& .tab-icon-image,
& .tab-icon-pending {
margin-inline-end: 0 !important;
}
}
}

Expand Down Expand Up @@ -535,24 +534,22 @@
#navigator-toolbox[has-popup-menu],
#navigator-toolbox:has(.tabbrowser-tab:active),
#navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
--zen-toolbox-max-width: 49px;
--zen-toolbox-max-width: 50px;
max-width: var(--zen-toolbox-max-width) !important;
min-width: var(--zen-toolbox-max-width) !important;
padding: 0 !important;

& #TabsToolbar {
z-index: 100 !important;
width: 250px !important;

background: var(--zen-main-browser-background) !important;
background-attachment: fixed !important;
background-size: 2000px !important; /* Dont ask me why */

box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);

position: absolute;
padding: var(--zen-toolbox-padding);
padding-top: 0;
transition: 0 !important;
/*animation: zen-vtabs-animation 0.3s ease-in-out;*/
-moz-window-dragging: no-drag;
Expand All @@ -561,7 +558,6 @@

& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay {
transition: 0.1s !important;
Expand Down Expand Up @@ -699,6 +695,7 @@
}

margin-top: 10px;
padding: 0 2px;
position: relative;

&::before {
Expand All @@ -714,4 +711,9 @@
}
}
}
@media (-moz-bool-pref: 'zen.view.compact') {
kwilcz marked this conversation as resolved.
Show resolved Hide resolved
#TabsToolbar {
margin-top: 0;
}
}
}
Loading