mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-22 03:08:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor ZenStartup to update default placements for sidebar buttons

Browse Source
This commit is contained in:
mauro-balades
2024-09-20 13:33:07 +02:00
parent 3219722c64
commit 1d220623ff
10 changed files with 82 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -74,7 +74,7 @@ pref('zen.tabs.vertical', true);
pref('zen.tabs.vertical.right-side', false);
pref('zen.theme.accent-color', "#aac7ff");
pref('zen.theme.border-radius', 5); // In pixels
pref('zen.theme.content-element-separation', 4); // In pixels
pref('zen.theme.content-element-separation', 8); // In pixels
pref('zen.theme.toolbar-themed', true);
pref('zen.theme.pill-button', false);
pref('zen.view.compact', false);

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

@@ -177,10 +177,6 @@
const newTab = document.getElementById('vertical-tabs-newtab-button');
newTab.classList.add('zen-sidebar-action-button');
newTab.setAttribute('cui-areatype', 'toolbar');
const iconsWrapper = document.getElementById('zen-sidebar-icons-wrapper');
iconsWrapper.appendChild(newTab);
setTimeout(() => {
CustomizableUI.registerArea(

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

Submodule src/browser/base/content/zen-components updated: 20c2fc640f...3c66cbdc24

4
src/browser/base/content/zen-sidebar-panel.inc.xhtml
View File

@@ -1,4 +1,4 @@
<box id="zen-sidebar-web-panel-wrapper">
<hbox flex="1" id="zen-sidebar-web-panel-wrapper">
<box id="zen-sidebar-web-panel" class="chromeclass-extrachrome" hidden="true" persist="pinned style hidden">
<toolbar mode="icons" flex="1" id="zen-sidebar-web-header">
<hbox>
@@ -29,4 +29,4 @@
<html:span id="zen-sidebar-web-panel-splitter"></html:span>
<html:span id="zen-sidebar-web-panel-hsplitter"></html:span>
</box>
</box>
</hbox>

17
src/browser/base/content/zen-styles/zen-browser-container.css
View File

@@ -1,27 +1,10 @@
:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
#tabbrowser-tabbox {
--zen-webview-correction-margin: 2px;
& > *:not(#tabbrowser-tabpanels) {
margin-top: var(--zen-webview-correction-margin);
}
}
& #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
width: -moz-available;
border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
transform: translate3d(0, 0, 0);
position: relative;
/* This fixes an issue with the left border */
margin-left: var(--zen-webview-correction-margin);
margin-top: var(--zen-webview-correction-margin);
#browser:has(#navigator-toolbox[zen-right-side="true"]) & {
margin-left: 0;
margin-right: var(--zen-webview-correction-margin);
}
--uc-tweak-rounded-corners-shadow-color: var(--zen-colors-border);
--uc-tweak-rounded-corners-shadow:

11
src/browser/base/content/zen-styles/zen-sidebar-panels.css
View File

@@ -68,12 +68,16 @@
}
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
margin: var(--zen-appcontent-separator-from-window);
position: absolute;
z-index: 1;
width: -moz-available;
padding: var(--zen-sidebar-web-panel-spacing);
height: calc(100% - var(--zen-element-separation));
margin: var(--zen-sidebar-web-panel-spacing);
/* Why times 3?
* + 1 for the top margin, making the element overflow the view.
* + 1 for the margin we want to add at the bottom
* + 1 so that the panel can be correctly spaced from the border of the webview
*/
height: calc(100% - var(--zen-sidebar-web-panel-spacing) * 3);
}
#zen-sidebar-web-panel {
@@ -147,6 +151,7 @@
position: absolute;
z-index: 1;
animation: zen-sidebar-panel-animation-2 0.15s ease-in-out forwards;
max-height: 100%;
}
#zen-sidebar-web-panel[hidden='true'][pinned='true'] {

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

@@ -8,6 +8,11 @@
height: 100%;
}
#TabsToolbar > * {
justify-content: center;
}
#private-browsing-indicator-with-label {
display: none !important;
}
@@ -29,14 +34,14 @@
padding-top: var(--zen-toolbox-top-align);
padding-bottom: var(--zen-element-separation);
margin-top: 0 !important;
margin-top: -4px !important;
display: flex;
}
#TabsToolbar-customization-target {
position: relative;
gap: var(--zen-toolbox-padding);
gap: 0;
&::after {
content: '';
display: block;
@@ -49,6 +54,10 @@
position: absolute;
bottom: calc(-1 * var(--zen-toolbox-padding));
}
& > * {
border-top-width: 0 !important;
}
}
#vertical-tabs-newtab-button {
@@ -101,6 +110,7 @@
background: transparent;
padding: 0;
gap: 5px;
align-items: center;
& > toolbarbutton:not(#zen-workspaces-button) {
padding: 0 !important;
@@ -182,6 +192,41 @@
width: 100%;
bottom: calc(-0.5 * var(--zen-toolbox-padding));
}
& > *:not(tabs):not(#search-container) {
width: 100%;
border-radius: var(--tab-border-radius);
padding-left: var(--toolbarbutton-inner-padding);
padding-right: var(--toolbarbutton-inner-padding);
& label {
display: flex;
width: 0;
}
& image {
height: 16px;
width: 16px;
padding: 0 !important;
}
&:is([open], [checked]) {
background: var(--toolbarbutton-active-background) !important;
& image, label {
background: transparent !important;
}
}
&:hover {
background: var(--toolbarbutton-hover-background) !important;
& image, label {
background: transparent !important;
}
}
}
}
& #tabbrowser-tabs {
@@ -285,8 +330,12 @@
border-bottom-right-radius: 0;
}
& #TabsToolbar-customization-target::after {
bottom: 0 !important;
& #TabsToolbar-customization-target {
padding-bottom: var(--zen-toolbox-padding);
&::after {
bottom: -1px !important;
}
}
& #tabbrowser-tabs {
@@ -348,12 +397,6 @@
&[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 {
@@ -363,7 +406,7 @@
:root:has(#navigator-toolbox[zen-right-side='true']) &[active='true']::after {
left: unset !important;
right: -2px !important;
right: -2px;
animation: zen-workspaces-button-active-collapsed-right 0.1s ease-in-out !important;
}
}
@@ -478,13 +521,17 @@
}
/* Customization mode */
:root[customizing] #TabsToolbar > *:not(#zen-sidebar-icons-wrapper) {
/*:root[customizing] #TabsToolbar > *:not(#zen-sidebar-icons-wrapper) {
overflow: hidden;
max-width: 0 !important;
margin-right: var(--zen-element-separation);
padding: 0 !important;
opacity: 0;
display: none;
}*/
:root[customizing] #TabsToolbar > * {
min-width: unset !important;
}
/* Mark: Sidebar top buttons */
@@ -497,7 +544,7 @@
align-items: center;
#nav-bar:has(&) & {
padding-inline-start: calc(var(--zen-toolbox-padding) * 1.5) !important;
padding-inline-start: calc(var(--zen-toolbox-padding) + var(--toolbarbutton-outer-padding)) !important;
}
& toolbarbutton {
@@ -514,9 +561,4 @@
}
}
}
/** Add transition delays */
#navigator-toolbox, #navigator-toolbox > * {
transition-delay: 2s !important;
}
}

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

@@ -1,5 +1,10 @@
/* URL and tool bars */
#urlbar-container {
padding-block: 0 !important;
padding-bottom: 2px !important;
}
#urlbar {
--toolbarbutton-border-radius: 10px;
--urlbarView-separator-color: var(--zen-colors-border);

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

@@ -8,7 +8,8 @@
&: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;
padding: 5px;
height: fit-content;
gap: 3px;
& toolbarbutton {

5
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..10967d5e2e1c5f3804ea367caf7b1e075a5680d0 100644
index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..07ecece92643203d376378818facfc55774c63e9 100644
--- a/browser/components/customizableui/CustomizableUI.sys.mjs
+++ b/browser/components/customizableui/CustomizableUI.sys.mjs
@@ -25,7 +25,7 @@ ChromeUtils.defineLazyGetter(lazy, "gWidgetsBundle", function () {
@@ -30,8 +30,9 @@ index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..10967d5e2e1c5f3804ea367caf7b1e07
- "firefox-view-button",
+// "firefox-view-button",
"tabbrowser-tabs",
"new-tab-button",
- "new-tab-button",
- "alltabs-button",
+// "new-tab-button",
+// "alltabs-button",
],
defaultCollapsed: null,