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
parent
a8831bfa73
commit
66254e79d3
5 changed files with 171 additions and 4 deletions
|
|
@ -122,6 +122,8 @@ pref('zen.view.sidebar-expanded.max-width', 400);
|
|||
|
||||
pref('zen.view.show-bottom-border', false);
|
||||
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
|
||||
pref('zen.view.hide-window-controls', true);
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export var ZenCustomizableUI = new (class {
|
|||
customizationtarget="zen-sidebar-top-buttons-customization-target"
|
||||
mode="icons">
|
||||
<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>
|
||||
</hbox>
|
||||
</toolbar>
|
||||
|
|
|
|||
|
|
@ -126,6 +126,7 @@ var gZenVerticalTabsManager = {
|
|||
Services.prefs.addObserver('zen.tabs.vertical.right-side', 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.sidebar-expanded', updateEvent);
|
||||
|
||||
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() {
|
||||
if (this._navigatorToolbox) {
|
||||
return this._navigatorToolbox;
|
||||
|
|
@ -202,15 +208,16 @@ var gZenVerticalTabsManager = {
|
|||
const topButtons = document.getElementById('zen-sidebar-top-buttons');
|
||||
const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
|
||||
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 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');
|
||||
|
||||
gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
|
||||
gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
|
||||
|
||||
const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
|
||||
if (isRightSide && isVerticalTabs) {
|
||||
if (isRightSide) {
|
||||
this.navigatorToolbox.setAttribute('zen-right-side', 'true');
|
||||
document.documentElement.setAttribute('zen-right-side', 'true');
|
||||
} else {
|
||||
|
|
@ -218,6 +225,12 @@ var gZenVerticalTabsManager = {
|
|||
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');
|
||||
if ((!isRightSide && this.isWindowsStyledButtons) || (isRightSide && !this.isWindowsStyledButtons) || isCompactMode) {
|
||||
appContentNavbarContaienr.setAttribute('should-hide', 'true');
|
||||
|
|
|
|||
|
|
@ -327,12 +327,13 @@
|
|||
}
|
||||
|
||||
/* Mark: toolbox as expanded */
|
||||
#navigator-toolbox {
|
||||
#navigator-toolbox[zen-sidebar-expanded='true'] {
|
||||
--zen-toolbox-min-width: fit-content;
|
||||
--tab-icon-end-margin: 8.5px;
|
||||
padding: var(--zen-toolbox-padding);
|
||||
padding-left: 0;
|
||||
padding-top: 0;
|
||||
z-index: 1;
|
||||
|
||||
& #titlebar {
|
||||
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 */
|
||||
#zen-sidebar-splitter {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -126,6 +126,10 @@
|
|||
}
|
||||
|
||||
:root[zen-single-toolbar='true'] {
|
||||
#urlbar[breakout-extend='true'] {
|
||||
top: calc(var(--zen-toolbar-height) + 2px) !important;
|
||||
}
|
||||
|
||||
#notification-popup-box {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue