mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-02-19 01:48:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(zen-sidebar): improve sidebar buttons customization

Browse Source 
- Improved customization of sidebar buttons in the Zen sidebar.
- Adjusted padding and outer padding of toolbar buttons.
This commit is contained in:
mauro-balades
2024-09-19 21:05:37 +02:00
parent 7bdf52eab6
commit 4ef3ecf0d9
10 changed files with 224 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/browser/app/profile/zen-browser.js
View File

@@ -115,6 +115,7 @@ pref('zen.splitView.working', false);
pref('zen.workspaces.enabled', true);
pref('zen.workspaces.hide-default-container-indicator', true);
pref('zen.workspaces.individual-pinned-tabs', true);
pref('zen.workspaces.show-icon-strip', true);
pref('zen.workspaces.icons', '["🌐", "📁", "📎", "📝", "📅", "📊"]');
// Zen Watermark

49
src/browser/base/content/ZenStartup.mjs
View File

@@ -129,6 +129,7 @@
this._moveWindowButtons();
this._addSidebarButtons();
this._hideToolbarButtons();
},
_moveWindowButtons() {
@@ -139,22 +140,34 @@
}
},
_hideToolbarButtons() {
const elementsToHide = [
'alltabs-button',
];
for (let id of elementsToHide) {
const elem = document.getElementById(id);
if (elem) {
elem.setAttribute('hidden', 'true');
}
}
},
_addSidebarButtons() {
const sidebarBox = window.MozXULElement.parseXULToFragment(`
<toolbar id="zen-sidebar-top-buttons"
fullscreentoolbar="true"
class="browser-toolbar titlebar-color"
class="browser-toolbar customization-target"
brighttext="true"
data-l10n-id="tabs-toolbar"
customizable="true"
toolbarname="Zen Sidebar Top Buttons"
context="toolbar-context-menu"
flex="1"
customizationtarget="zen-sidebar-top-buttons-customization-target"
mode="icons">
<toolbartabstop/>
<hbox id="zen-sidebar-top-buttons-customization-target" flex="1">
<hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
<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="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button chromeclass-toolbar-additional subviewbutton-nav" badge="true" closemenu="none" delegatesanchor="true" cui-areatype="toolbar" id="zen-profile-button" data-l10n-id="toolbar-button-account" onclick="ZenProfileDialogUI.showSubView(this, event)"></toolbarbutton>
<toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button chromeclass-toolbar-additional subviewbutton-nav" badge="true" closemenu="none" delegatesanchor="true" cui-areatype="toolbar" id="zen-profile-button" data-l10n-id="toolbar-button-account" onclick="ZenProfileDialogUI.showSubView(this, event)"></toolbarbutton>
</hbox>
</toolbar>
`);
@@ -162,11 +175,31 @@
const sideBarTopButtons = document.getElementById('zen-sidebar-top-buttons')
.querySelector('#zen-sidebar-top-buttons-customization-target');
const panelMenu = document.getElementById('PanelUI-menu-button');
panelMenu.classList.add('zen-sidebar-action-button');
panelMenu.setAttribute('cui-areatype', 'toolbar');
const newTab = document.getElementById('vertical-tabs-newtab-button');
newTab.classList.add('zen-sidebar-action-button');
newTab.setAttribute('cui-areatype', 'toolbar');
sideBarTopButtons.prepend(panelMenu);
const iconsWrapper = document.getElementById('zen-sidebar-icons-wrapper');
iconsWrapper.appendChild(newTab);
setTimeout(async () => {
CustomizableUI.registerArea(
"zen-sidebar-top-buttons",
{
type: CustomizableUI.TYPE_TOOLBAR,
defaultPlacements: ["zen-expand-sidebar-button", "zen-profile-button"],
}
);
CustomizableUI.registerToolbarNode(
document.getElementById('zen-sidebar-top-buttons')
);
const panelMenu = document.getElementById('PanelUI-menu-button');
panelMenu.classList.add('zen-sidebar-action-button');
panelMenu.setAttribute('cui-areatype', 'toolbar');
sideBarTopButtons.prepend(panelMenu);
}, 100);
},
_focusSearchBar() {

2
src/browser/base/content/zen-components

Submodule src/browser/base/content/zen-components updated: a4ffded16b...1d5e336462

1
src/browser/base/content/zen-sidebar-icons.inc.xhtml
View File

@@ -1,4 +1,3 @@
<toolbar brighttext="true" id="zen-sidebar-icons-wrapper" class="zen-dont-hide-on-fullscreen">
<toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-preferences-button" data-l10n-id="toolbar-settings-button" onclick="event.target.ownerGlobal.openPreferences(undefined);"></toolbarbutton>
<toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
</toolbar>

30
src/browser/base/content/zen-styles/zen-animations.css
View File

@@ -136,3 +136,33 @@
display: none !important;
}
}
@keyframes zen-workspaces-button-active {
from {
bottom: -20px;
}
to {
bottom: -2px;
}
}
@keyframes zen-workspaces-button-active-collapsed-left {
from {
left: -20px;
}
to {
left: -2px;
}
}
@keyframes zen-workspaces-button-active-collapsed-right {
from {
right: -20px;
}
to {
right: -2px;
}
}

113
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -27,6 +27,7 @@
padding: var(--zen-toolbox-padding);
padding-top: var(--zen-toolbox-top-align);
padding-bottom: var(--zen-element-separation);
margin-top: 0 !important;
display: flex;
@@ -50,6 +51,12 @@
}
}
#vertical-tabs-newtab-button {
&:hover, &:not(:is(:hover, :active)) .toolbarbutton-icon {
background: transparent !important;
}
}
#tabbrowser-tabs {
margin-inline-start: 0 !important;
padding-inline-start: 0 !important;
@@ -92,31 +99,15 @@
#zen-sidebar-icons-wrapper {
background: transparent;
padding: 0;
& toolbarbutton:not(#zen-workspaces-button) {
width: fit-content;
& > toolbarbutton:not(#zen-workspaces-button) {
padding: 0 !important;
}
}
#newtab-button-container {
margin-inline-end: 0 !important;
padding-top: 0 !important;
border-top: solid transparent 0px !important;
&[showborder] {
padding-top: 4px !important;
&::before {
content: '';
display: block;
height: 1px;
background: color-mix(in srgb, var(--zen-colors-border) 70%, transparent 30%);
margin: 0 auto;
margin-block-end: 4px;
width: 80%;
}
}
display: none !important;
}
#tabbrowser-arrowscrollbox {
@@ -152,7 +143,11 @@
#mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
#navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
#navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])) {
--zen-toolbox-min-width: 150px;
--zen-toolbox-min-width: fit-content;
& #titlebar {
min-width: 150px;
}
& #zen-sidebar-icons-wrapper {
display: flex;
@@ -160,7 +155,7 @@
flex-direction: row;
justify-content: space-between;
padding-top: calc(var(--zen-toolbox-padding) * 2);
padding-top: var(--zen-element-separation);
width: 100%;
position: relative;
@@ -186,28 +181,6 @@
}
}
& #newtab-button-container {
&::before {
width: 100%;
margin-block-end: calc(var(--zen-toolbox-padding) + 2px);
}
& #vertical-tabs-newtab-button {
padding: 0 !important;
& label {
display: flex;
text-align: start;
align-items: center;
padding: 0;
}
&:hover * {
background: transparent !important;
}
}
}
& #tabbrowser-tabs {
& .tabbrowser-tab {
& .tab-background {
@@ -266,7 +239,7 @@
& #zen-sidebar-icons-wrapper {
display: flex;
flex-direction: column;
padding-top: calc(var(--zen-toolbox-padding) * 2);
padding-top: var(--zen-element-separation);
align-items: center;
}
@@ -323,6 +296,38 @@
margin-inline-end: 0 !important;
}
}
& #zen-workspaces-button {
flex-direction: column;
&:not([as-button='true']) {
margin: 5px 0 !important;
& toolbarbutton {
&[active='true']::after {
bottom: 50% !important;
transform: translateY(50%) !important;
:root:has(#navigator-toolbox[zen-right-side='true']) & {
left: unset !important;
right: -2px !important;
animation: zen-workspaces-button-active-collapsed-right 0.1s ease-in-out !important;
}
}
:root:has(#navigator-toolbox:not([zen-right-side='true'])) &[active='true']::after {
left: -2px;
animation: zen-workspaces-button-active-collapsed-left 0.1s ease-in-out !important;
}
:root:has(#navigator-toolbox[zen-right-side='true']) &[active='true']::after {
left: unset !important;
right: -2px !important;
animation: zen-workspaces-button-active-collapsed-right 0.1s ease-in-out !important;
}
}
}
}
}
/* Mark: Separator styling */
@@ -457,20 +462,34 @@
}
/* Customization mode */
/*:root[customizing] #navigator-toolbox {
:root[customizing] #titlebar {
overflow: hidden;
max-width: 0 !important;
margin-right: var(--zen-element-separation);
padding: 0 !important;
opacity: 0;
display: none;
}*/
}
/* Mark: Sidebar top buttons */
#zen-sidebar-top-buttons {
min-width: unset !important;
--toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
gap: 5px;
& #zen-sidebar-top-buttons-customization-target {
height: 100%;
align-items: center;
#nav-bar:has(&) & {
padding-inline-start: calc(var(--zen-toolbox-padding) * 1.5) !important;
}
& toolbarbutton {
height: 100%;
padding: 0 var(--toolbarbutton-outer-padding) !important;
}
}
& .zen-sidebar-action-button {
padding: 0 !important;

1
src/browser/base/content/zen-styles/zen-theme.css
View File

@@ -77,6 +77,7 @@
/* Toolbar */
--zen-toolbar-height: 39px;
--zen-toolbar-button-inner-padding: 6px;
--toolbarbutton-outer-padding: 4px;
/* Other colors */
--urlbar-box-bgcolor: var(--zen-urlbar-background) !important;

2
src/browser/base/content/zen-styles/zen-urlbar.css
View File

@@ -255,7 +255,7 @@ button.popup-notification-dropmarker {
}
#browser:not(:has([zen-expanded="true"])) #nav-bar {
padding-left: calc(var(--zen-toolbox-padding) * 2 + 1px);
padding-left: calc(var(--zen-toolbox-padding) 4px);
}
/* Other small tweaks */

81
src/browser/base/content/zen-styles/zen-workspaces.css
View File

@@ -2,8 +2,71 @@
justify-content: center;
align-items: center;
display: flex;
margin: 0 30px;
opacity: .6;
margin: 0 5px;
position: relative;
&:not([as-button='true']) {
border-radius: var(--zen-button-border-radius);
background: color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%);
padding: 7px;
gap: 3px;
& toolbarbutton {
margin: 0 !important;
width: 25px;
display: flex;
justify-content: center;
padding: 0 !important;
align-items: center;
position: relative;
& > * {
opacity: .6;
}
&[active='true']::after {
content: '';
position: absolute;
width: 4px;
border-radius: 99px;
height: 4px;
background: var(--zen-primary-color);
bottom: -2px;
left: 50%;
transform: translateX(-50%);
animation: zen-workspaces-button-active 0.1s ease-in-out;
}
}
}
&[as-button='true'] {
border-radius: var(--tab-border-radius);
&:hover {
background: var(--toolbarbutton-hover-background);
}
}
:root:has(#navigator-toolbox:not([zen-expanded='true'])) &[as-button='true'] {
margin: 0 !important;
padding: var(--toolbarbutton-inner-padding) !important;
width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
border-radius: var(--tab-border-radius) !important;
&:hover {
background: var(--toolbarbutton-hover-background) !important;
}
}
}
#zen-workspaces-button .zen-workspace-sidebar-wrapper {
position: absolute;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#zen-workspaces-button .zen-workspace-sidebar-name {
@@ -27,17 +90,21 @@
:not([zen-user-hover='true'])
) {
& #zen-workspaces-button {
width: calc(var(--zen-sidebar-action-button-width) - 1px) !important;
margin-top: .2rem;
& #zen-workspaces-button[as-button='true'] {
width: 100% !important;
margin: 0 10px;
}
& #zen-workspaces-button .zen-workspace-sidebar-name {
display: block;
}
& #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] {
display: none;
& #zen-workspaces-button .zen-workspace-sidebar-icon {
margin-inline-end: 5px;
& [no-icon='true'] {
display: none;
}
}
& #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] + .zen-workspace-sidebar-name {

10
src/browser/components/customizableui/CustomizableUI-sys-mjs.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs
index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..f15e9e92a27f1779cda6521e33915ddc4e3a93e5 100644
index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..10967d5e2e1c5f3804ea367caf7b1e075a5680d0 100644
--- a/browser/components/customizableui/CustomizableUI.sys.mjs
+++ b/browser/components/customizableui/CustomizableUI.sys.mjs
@@ -25,7 +25,7 @@ ChromeUtils.defineLazyGetter(lazy, "gWidgetsBundle", function () {
@@ -36,3 +36,11 @@ index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..f15e9e92a27f1779cda6521e33915ddc
],
defaultCollapsed: null,
},
@@ -331,6 +330,7 @@ var CustomizableUIInternal = {
CustomizableUI.AREA_NAVBAR,
CustomizableUI.AREA_BOOKMARKS,
CustomizableUI.AREA_TABSTRIP,
+ "zen-sidebar-top-buttons",
]);
if (AppConstants.platform != "macosx") {
toolbars.add(CustomizableUI.AREA_MENUBAR);