1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-09 19:05:29 +02:00

Added back collapsed toolbar mode!

This commit is contained in:
mr. M 2024-11-28 11:38:31 +01:00
parent a8831bfa73
commit 66254e79d3
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
5 changed files with 171 additions and 4 deletions

View file

@ -122,6 +122,8 @@ pref('zen.view.sidebar-expanded.max-width', 400);
pref('zen.view.show-bottom-border', false); pref('zen.view.show-bottom-border', false);
pref('zen.view.use-single-toolbar', true); pref('zen.view.use-single-toolbar', true);
pref('zen.view.sidebar-expanded', true);
pref('zen.view.sidebar-collapsed.hide-mute-button', true);
#ifndef XP_MACOSX #ifndef XP_MACOSX
pref('zen.view.hide-window-controls', true); pref('zen.view.hide-window-controls', true);

View file

@ -45,7 +45,7 @@ export var ZenCustomizableUI = new (class {
customizationtarget="zen-sidebar-top-buttons-customization-target" customizationtarget="zen-sidebar-top-buttons-customization-target"
mode="icons"> mode="icons">
<hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1"> <hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
<toolbarbutton hidden="true" removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" cui-areatype="toolbar" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton> <toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" cui-areatype="toolbar" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
<toolbarbutton removable="true" class="toolbarbutton-1 zen-sidebar-action-button zen-compact-mode-ignore" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton> <toolbarbutton removable="true" class="toolbarbutton-1 zen-sidebar-action-button zen-compact-mode-ignore" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
</hbox> </hbox>
</toolbar> </toolbar>

View file

@ -126,6 +126,7 @@ var gZenVerticalTabsManager = {
Services.prefs.addObserver('zen.tabs.vertical.right-side', updateEvent); Services.prefs.addObserver('zen.tabs.vertical.right-side', updateEvent);
Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', updateEvent); Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', updateEvent);
Services.prefs.addObserver('zen.view.use-single-toolbar', updateEvent); Services.prefs.addObserver('zen.view.use-single-toolbar', updateEvent);
Services.prefs.addObserver('zen.view.sidebar-expanded', updateEvent);
this._toolbarOriginalParent = document.getElementById('nav-bar').parentElement; this._toolbarOriginalParent = document.getElementById('nav-bar').parentElement;
@ -154,6 +155,11 @@ var gZenVerticalTabsManager = {
} }
}, },
toggleExpand() {
const newVal = !Services.prefs.getBoolPref('zen.view.sidebar-expanded');
Services.prefs.setBoolPref('zen.view.sidebar-expanded', newVal);
},
get navigatorToolbox() { get navigatorToolbox() {
if (this._navigatorToolbox) { if (this._navigatorToolbox) {
return this._navigatorToolbox; return this._navigatorToolbox;
@ -202,15 +208,16 @@ var gZenVerticalTabsManager = {
const topButtons = document.getElementById('zen-sidebar-top-buttons'); const topButtons = document.getElementById('zen-sidebar-top-buttons');
const isCompactMode = Services.prefs.getBoolPref('zen.view.compact'); const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
const isVerticalTabs = Services.prefs.getBoolPref('zen.tabs.vertical'); const isVerticalTabs = Services.prefs.getBoolPref('zen.tabs.vertical');
const isSidebarExpanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded') && isVerticalTabs;
const isRightSide = Services.prefs.getBoolPref('zen.tabs.vertical.right-side') && isVerticalTabs; const isRightSide = Services.prefs.getBoolPref('zen.tabs.vertical.right-side') && isVerticalTabs;
const isSingleToolbar = Services.prefs.getBoolPref('zen.view.use-single-toolbar') && isVerticalTabs; const isSingleToolbar = Services.prefs.getBoolPref('zen.view.use-single-toolbar') && isVerticalTabs && isSidebarExpanded;
const titlebar = document.getElementById('titlebar'); const titlebar = document.getElementById('titlebar');
gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal'); gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal'); gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target'); const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
if (isRightSide && isVerticalTabs) { if (isRightSide) {
this.navigatorToolbox.setAttribute('zen-right-side', 'true'); this.navigatorToolbox.setAttribute('zen-right-side', 'true');
document.documentElement.setAttribute('zen-right-side', 'true'); document.documentElement.setAttribute('zen-right-side', 'true');
} else { } else {
@ -218,6 +225,12 @@ var gZenVerticalTabsManager = {
document.documentElement.removeAttribute('zen-right-side'); document.documentElement.removeAttribute('zen-right-side');
} }
if (isSidebarExpanded) {
this.navigatorToolbox.setAttribute('zen-sidebar-expanded', 'true');
} else {
this.navigatorToolbox.removeAttribute('zen-sidebar-expanded');
}
const appContentNavbarContaienr = document.getElementById('zen-appcontent-navbar-container'); const appContentNavbarContaienr = document.getElementById('zen-appcontent-navbar-container');
if ((!isRightSide && this.isWindowsStyledButtons) || (isRightSide && !this.isWindowsStyledButtons) || isCompactMode) { if ((!isRightSide && this.isWindowsStyledButtons) || (isRightSide && !this.isWindowsStyledButtons) || isCompactMode) {
appContentNavbarContaienr.setAttribute('should-hide', 'true'); appContentNavbarContaienr.setAttribute('should-hide', 'true');

View file

@ -327,12 +327,13 @@
} }
/* Mark: toolbox as expanded */ /* Mark: toolbox as expanded */
#navigator-toolbox { #navigator-toolbox[zen-sidebar-expanded='true'] {
--zen-toolbox-min-width: fit-content; --zen-toolbox-min-width: fit-content;
--tab-icon-end-margin: 8.5px; --tab-icon-end-margin: 8.5px;
padding: var(--zen-toolbox-padding); padding: var(--zen-toolbox-padding);
padding-left: 0; padding-left: 0;
padding-top: 0; padding-top: 0;
z-index: 1;
& #titlebar { & #titlebar {
min-width: 150px; min-width: 150px;
@ -499,6 +500,153 @@
} }
} }
/* Mark: toolbox as collapsed */
#navigator-toolbox:not([zen-sidebar-expanded='true']) {
--tab-min-width: 36px !important;
/* Important: When changin this value, make sure expand on hover doesn't break! */
--zen-toolbox-padding: calc(var(--zen-element-separation) / 2 + 1px);
--zen-toolbox-max-width: calc(var(--tab-min-width) + var(--zen-toolbox-padding) * 2);
max-width: var(--zen-toolbox-max-width) !important;
min-width: var(--zen-toolbox-max-width) !important;
--zen-tabbar-offset: 1px; /* Fix the tabbar offset, because there's a shadow */
&[zen-right-side='true'] {
margin-left: var(--zen-tabbar-offset);
}
&:not([zen-right-side='true']) {
margin-right: var(--zen-tabbar-offset);
}
& #zen-current-workspace-indicator-name,
& .toolbarbutton-text {
display: none !important;
}
& #zen-current-workspace-indicator {
padding-left: 0;
padding-right: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: .4;
}
& #zen-essentials-container {
justify-content: center;
}
& #vertical-tabs-newtab-button {
padding: 0 !important;
background: transparent !important;
}
:root[customizing] & #zen-sidebar-icons-wrapper {
min-width: unset !important;
}
& #zen-sidebar-icons-wrapper {
display: flex;
flex-direction: column;
padding-top: var(--zen-element-separation);
align-items: center;
}
:root:has(&) #zen-sidebar-splitter {
display: none !important;
}
& #tabbrowser-arrowscrollbox-periphery {
& > toolbarbutton {
margin: 0 auto !important;
padding: 0 !important;
}
&::before {
width: 90% !important;
}
}
& #EssentialsToolbar {
display: none !important;
}
& #essentials-accordion-header {
display: none !important;
}
& #vertical-pinned-tabs-container:has(tab:not([hidden])) {
position: relative;
& .tabbrowser-tab {
max-width: var(--tab-min-width);
}
}
& #TabsToolbar-customization-target {
padding-bottom: var(--zen-toolbox-padding);
&::after {
bottom: -1px !important;
}
}
& #tabbrowser-tabs {
margin-top: -2px;
& .tabbrowser-tab {
margin: 0 auto;
& .tab-background {
margin-inline: auto !important;
&:is([selected], [multiselected]) {
box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
@media not (prefers-color-scheme: dark) {
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.12) !important;
}
}
}
& .tab-reset-button {
display: none !important;
}
& .tab-content {
display: flex;
align-content: center;
justify-content: center;
padding: 0 !important;
& .tab-label-container {
display: none !important;
}
& .tab-icon-image,
& .tab-icon-pending {
margin-inline-end: 0 !important;
}
/* Hide glances */
& .tabbrowser-tab {
display: none !important;
}
}
}
@media (-moz-bool-pref: 'zen.view.sidebar-collapsed.hide-mute-button') {
& .tab-icon-overlay:is([soundplaying], [muted]):not([selected]) {
display: none !important;
:is(
:root[uidensity='compact'],
#tabbrowser-tabs[secondarytext-unsupported],
:root:not([uidensity='compact']) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover
)
.tab-icon-stack[indicator-replaces-favicon]
> :not(&),
:root:not([uidensity='compact'])
#tabbrowser-tabs:not([secondarytext-unsupported])
.tabbrowser-tab:not(:hover)
&[indicator-replaces-favicon] {
opacity: 1 !important;
}
}
}
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay {
margin-inline-end: 0 !important;
}
}
& #zen-workspaces-button {
flex-direction: column;
&:not([as-button='true']) {
& toolbarbutton {
&[active='true']::after {
bottom: 50% !important;
transform: translateY(50%) !important;
}
}
}
}
}
/* Mark: Separator styling */ /* Mark: Separator styling */
#zen-sidebar-splitter { #zen-sidebar-splitter {
opacity: 0; opacity: 0;

View file

@ -126,6 +126,10 @@
} }
:root[zen-single-toolbar='true'] { :root[zen-single-toolbar='true'] {
#urlbar[breakout-extend='true'] {
top: calc(var(--zen-toolbar-height) + 2px) !important;
}
#notification-popup-box { #notification-popup-box {
align-items: center; align-items: center;
justify-content: center; justify-content: center;