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:
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.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);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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');
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue