mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-16 23:06:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merged dev into feature/tab-rename, resolved conflicts by incorporating all changes

Browse Source
This commit is contained in:
jso8910
2025-02-12 11:09:09 +08:00
parent f37e80535a c4b4aa6287
commit 3319420c31
143 changed files with 747 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -85,7 +85,6 @@
_initSidebarScrolling() {
// Disable smooth scroll
const canSmoothScroll = Services.prefs.getBoolPref('zen.startup.smooth-scroll-in-tabs', false);
const workspaceIndicator = document.getElementById('zen-current-workspace-indicator');
const tabsWrapper = document.getElementById('zen-browser-tabs-wrapper');
gBrowser.tabContainer.addEventListener('wheel', (event) => {
if (canSmoothScroll) return;

31
src/browser/base/content/ZenUIManager.mjs
View File

@@ -8,6 +8,7 @@ var gZenUIManager = {
document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
XPCOMUtils.defineLazyPreferenceGetter(this, 'sidebarHeightThrottle', 'zen.view.sidebar-height-throttle', 500);
XPCOMUtils.defineLazyPreferenceGetter(this, 'contentElementSeparation', 'zen.theme.content-element-separation', 0);
XPCOMUtils.defineLazyPreferenceGetter(this, 'urlbarWaitToClear', 'zen.urlbar.wait-to-clear', 0);
ChromeUtils.defineLazyGetter(this, 'motion', () => {
return ChromeUtils.importESModule('chrome://browser/content/zen-vendor/motion.min.mjs', { global: 'current' });
@@ -147,16 +148,28 @@ var gZenUIManager = {
this.__currentPopupTrackElement = null;
},
get newtabButton() {
return ZenWorkspaces.activeWorkspaceStrip.querySelector('#tabs-newtab-button');
},
_prevUrlbarLabel: null,
_lastSearch: '',
_clearTimeout: null,
_lastTab: null,
handleNewTab(werePassedURL, searchClipboard, where) {
const shouldOpenURLBar =
Services.prefs.getBoolPref('zen.urlbar.replace-newtab') && !werePassedURL && !searchClipboard && where === 'tab';
if (shouldOpenURLBar) {
if (this._clearTimeout) {
clearTimeout(this._clearTimeout);
}
this._lastTab = gBrowser.selectedTab;
this._lastTab._visuallySelected = false;
this._prevUrlbarLabel = gURLBar._untrimmedValue;
gURLBar._zenHandleUrlbarClose = this.handleUrlbarClose.bind(this);
gURLBar.setAttribute('zen-newtab', true);
this.newtabButton.setAttribute('in-urlbar', true);
document.getElementById('Browser:OpenLocation').doCommand();
gURLBar.search(this._lastSearch);
return true;
@@ -164,16 +177,26 @@ var gZenUIManager = {
return false;
},
clearUrlbarData() {
this._prevUrlbarLabel = null;
this._lastSearch = '';
},
handleUrlbarClose(onSwitch) {
gURLBar._zenHandleUrlbarClose = null;
gURLBar.removeAttribute('zen-newtab');
this._lastTab._visuallySelected = true;
this._lastTab = null;
this.newtabButton.removeAttribute('in-urlbar');
if (onSwitch) {
this._prevUrlbarLabel = null;
this._lastSearch = '';
this.clearUrlbarData();
} else {
this._lastSearch = gURLBar._untrimmedValue;
this._clearTimeout = setTimeout(() => {
this.clearUrlbarData();
}, this.urlbarWaitToClear);
}
gURLBar.setURI(this._prevUrlbarLabel, false, false, false, true);
gURLBar.setURI(this._prevUrlbarLabel, onSwitch, false, false, !onSwitch);
gURLBar.handleRevert();
if (gURLBar.focused) {
gURLBar.view.close({ elementPicked: onSwitch });
@@ -392,6 +415,8 @@ var gZenVerticalTabsManager = {
gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
// on purpose, we set the orient to horizontal, because the arrowScrollbox is vertical
gBrowser.tabContainer.arrowScrollbox.scrollbox.setAttribute('orient', isVerticalTabs ? 'horizontal' : 'vertical');
const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
if (isRightSide) {

17
src/browser/base/content/navigator-toolbox-inc-xhtml.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67aea54a6f47 100644
index a0a382643a2f74b6d789f3641ef300eed202d5e9..340475da315e67b2dd4f93567547cde703a90ee8 100644
--- a/browser/base/content/navigator-toolbox.inc.xhtml
+++ b/browser/base/content/navigator-toolbox.inc.xhtml
@@ -2,7 +2,7 @@
@@ -40,20 +40,17 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67ae
<tabs id="tabbrowser-tabs"
is="tabbrowser-tabs"
aria-multiselectable="true"
@@ -50,6 +50,12 @@
@@ -50,6 +50,9 @@
tooltip="tabbrowser-tab-tooltip"
orient="horizontal"
stopwatchid="FX_TAB_CLICK_MS">
+<html:div id="zen-essentials-container" skipintoolbarset="true"></html:div>
+<hbox id="zen-current-workspace-indicator" skipintoolbarset="true">
+ <hbox id="zen-current-workspace-indicator-icon"></hbox>
+ <hbox id="zen-current-workspace-indicator-name"></hbox>
+</hbox>
+<hbox id="zen-current-workspace-indicator-container"></hbox>
+<html:div id="zen-browser-tabs-wrapper">
<hbox class="tab-drop-indicator" hidden="true"/>
# If the name (tabbrowser-arrowscrollbox) or structure of this changes
# significantly, there is an optimization in
@@ -57,7 +63,7 @@
@@ -57,7 +60,7 @@
# the current structure that we may want to revisit.
<html:div id="vertical-pinned-tabs-container" tabindex="-1"></html:div>
<html:div id="vertical-pinned-tabs-container-separator"></html:div>
@@ -62,7 +59,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67ae
<tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
<hbox id="tabbrowser-arrowscrollbox-periphery">
<toolbartabstop/>
@@ -75,6 +81,7 @@
@@ -75,6 +78,7 @@
tooltip="dynamic-shortcut-tooltip"
data-l10n-id="tabs-toolbar-new-tab"/>
<html:span id="tabbrowser-tab-a11y-desc" hidden="true"/>
@@ -70,7 +67,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67ae
</tabs>
<toolbarbutton id="new-tab-button"
@@ -100,11 +107,12 @@
@@ -100,11 +104,12 @@
#include private-browsing-indicator.inc.xhtml
<toolbarbutton id="content-analysis-indicator"
class="toolbarbutton-1 content-analysis-indicator-icon"/>
@@ -86,7 +83,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67ae
<toolbar id="nav-bar"
class="browser-toolbar chromeclass-location"
data-l10n-id="navbar-accessible"
@@ -490,10 +498,12 @@
@@ -490,10 +495,12 @@
consumeanchor="PanelUI-button"
data-l10n-id="appmenu-menu-button-closed2"/>
</toolbaritem>

4
src/browser/base/content/zen-styles/zen-browser-ui.css
View File

@@ -22,7 +22,7 @@
:root:is([inDOMFullscreen='true'], [chromehidden~='location'], [chromehidden~='toolbar']) {
#navigator-toolbox,
#zen-sidebar-splitter {
display: none;
visibility: collapse;
}
}
@@ -51,7 +51,7 @@
&[animating='true']::after {
background: var(--zen-main-browser-background-old);
backdrop-filter: blur(5px);
animation: zen-main-app-wrapper-animation 0.5s ease forwards;
animation: zen-main-app-wrapper-animation 0.2s ease forwards;
transition: 0s;
}
}

4
src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
View File

@@ -28,7 +28,7 @@
--tab-min-height: 10px !important;
}
#vertical-pinned-tabs-container-separator {
.vertical-pinned-tabs-container-separator {
display: none !important;
}
@@ -214,7 +214,7 @@
}
/* Other UI Elements */
#zen-current-workspace-indicator {
.zen-current-workspace-indicator {
display: none !important;
}

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

@@ -87,17 +87,6 @@
width: -moz-available !important;
}
.sharing-icon,
#identity-icon,
.urlbar-icon,
#permissions-granted-icon,
#tracking-protection-icon,
#tracking-protection-icon-box,
#blocked-permissions-container > .blocked-permission-icon {
width: 14px;
height: 14px;
}
#identity-icon-box,
#identity-permission-box {
margin-top: auto;
@@ -128,7 +117,7 @@
}
}
#vertical-pinned-tabs-container-separator {
.vertical-pinned-tabs-container-separator {
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
margin: 8px auto;
border: none;
@@ -137,8 +126,8 @@
width: 98%;
transition: margin 0.2s ease-in-out, background 0.2s ease-in-out, max-height 0.2s ease-in-out;
#vertical-pinned-tabs-container:not(:has(tab:not([hidden]))) + &,
#tabbrowser-tabs:not(:has(#tabbrowser-arrowscrollbox tab:not([hidden]))) & {
#vertical-pinned-tabs-container .zen-workspace-tabs-section[active]:not(:has(tab:not([hidden]))) &,
#tabbrowser-tabs:not(:has(#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[active] tab:not([hidden]))) & {
max-height: 0;
margin: 0 auto;
}
@@ -261,25 +250,18 @@
--tab-block-margin: 2px;
--tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.12));
--tab-selected-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.1)) !important;
grid-gap: 0 !important;
&[overflow]::after,
#vertical-tabs-newtab-button {
#vertical-tabs-newtab-button,
#vertical-pinned-tabs-container-separator { /* notice #vertical-pinned-tabs-container-separator is an ID */
/* Hide separator they give us, eww */
display: none !important;
}
& .tabbrowser-tab {
transition: scale 0.07s ease;
#tabbrowser-tabs &:not([zen-essential='true']) {
#tabbrowser-tabs[dont-animate-tabs] & {
opacity: 0;
}
&:is([selected], [multiselected], [visuallyselected]) .tab-background {
box-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.1));
}
}
&:active {
scale: 0.98;
@@ -455,7 +437,7 @@
width: calc(100% - 10px) !important;
}
& #zen-current-workspace-indicator-icon[no-icon='true'] {
& .zen-current-workspace-indicator-icon[no-icon='true'] {
display: none;
}
@@ -535,7 +517,7 @@
}
&:hover {
background: var(--toolbarbutton-hover-background) !important;
background: var(--toolbarbutton-hover-background);
& image,
label {
@@ -586,11 +568,11 @@
#navigator-toolbox:not([zen-sidebar-expanded='true']) {
max-width: var(--zen-toolbox-max-width) !important;
min-width: var(--zen-toolbox-max-width) !important;
& #zen-current-workspace-indicator-name,
& .zen-current-workspace-indicator-name,
& .toolbarbutton-text {
display: none !important;
}
& #zen-current-workspace-indicator {
& .zen-current-workspace-indicator {
padding-left: 0;
padding-right: 0;
display: flex;
@@ -902,10 +884,22 @@
@media (-moz-bool-pref: 'zen.tabs.show-newtab-vertical') {
#tabs-newtab-button {
display: flex !important;
transition: scale 0.1s ease;
& .toolbarbutton-text {
align-items: center;
padding-top: 0;
}
&:active,
&[open] {
scale: 0.98;
}
&[in-urlbar] {
background: var(--tab-selected-bgcolor) !important;
opacity: 1 !important;
box-shadow: var(--tab-selected-shadow);
}
}
#tabbrowser-arrowscrollbox-periphery {
@@ -968,11 +962,7 @@
--tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2));
&[selected] .tab-background {
box-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.1));
}
&:not([selected], [multiselected="true"]) .tab-background {
&:not([visuallyselected], [multiselected="true"]) .tab-background {
background: var(--zen-toolbar-element-bg);
border: none;
}
@@ -1144,7 +1134,7 @@
box-shadow: -3px 0 6px -2px var(--toolbarbutton-active-background, rgba(0, 255, 0, 0.2));
}
/* Renaming tab */
/* Renaming tabs */
.tab-label-container-editing {
display: none !important;
}
@@ -1154,3 +1144,10 @@
overflow-x: scroll;
margin: 0;
}
/* Section: tab workspaces stylings */
.zen-workspace-tabs-section {
position: absolute;
transform: translateX(-100%);
min-width: 100%;
}

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

@@ -157,6 +157,8 @@
--zen-themed-toolbar-bg: light-dark(var(--zen-branding-bg), #161616);
--zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #161616);
--zen-workspace-indicator-height: 45px;
@media (-moz-windows-mica) or (-moz-platform: macos) {
background: transparent;
--zen-themed-toolbar-bg-transparency: 0;
@@ -169,7 +171,6 @@
--toolbar-field-background-color: var(--zen-colors-input-bg) !important;
--arrowpanel-background: var(--zen-dialog-background) !important;
--tab-selected-shadow: none !important;
--zen-big-shadow: 0 0 9.73px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
/* Nativity */
@@ -213,7 +214,7 @@
--zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-dark-color-mix-base) 99%);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(53, 53, 53) 80%);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(79, 79, 79) 80%);
--zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(255, 255, 255, 0.11) 90%);
--zen-dialog-background: var(--zen-dark-color-mix-base);

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

@@ -11,7 +11,7 @@
#urlbar {
--toolbarbutton-border-radius: 8px;
--urlbarView-separator-color: var(--zen-colors-border);
--urlbarView-separator-color: light-dark(hsl(0, 0%, 90%), hsl(0, 0%, 20%));
--urlbarView-hover-background: var(--toolbarbutton-hover-background);
--urlbarView-highlight-background: var(--toolbarbutton-hover-background);
border-radius: var(--toolbarbutton-border-radius);
@@ -121,8 +121,12 @@
}
#urlbar[breakout-extend='true'] #urlbar-background {
border: 1px solid var(--zen-colors-border) !important;
box-shadow: var(--zen-big-shadow) !important;
box-shadow:
inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.1),
/* 2. shadow ring 👇 */ 0 0 0 1px hsla(230, 13%, 9%, 0.075),
/* 3. multiple soft shadows 👇 */ 0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
0 6.5px 12px hsla(230, 13%, 9%, 0.1) !important;
backdrop-filter: none !important;
}
@@ -387,13 +391,14 @@ button.popup-notification-dropmarker {
/* We cant have a transparent background with a backdrop-filter because on normal websites,
the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended
due to performance issues */
background-color: light-dark(rgb(247, 247, 247), var(--zen-branding-bg)) !important;
background-color: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 14%)) !important;
outline: 1px solid rgba(0, 0, 0, 0.3) !important;
}
}
:root[zen-single-toolbar='true'] {
#urlbar[open] {
min-width: 30vw;
min-width: 35vw;
}
&[zen-right-side='true'] #urlbar[open]:not([zen-floating-urlbar='true']) {
@@ -405,12 +410,14 @@ button.popup-notification-dropmarker {
z-index: 1000;
max-width: 45vw;
min-width: 45vw !important;
font-size: 1.1em;
--urlbar-container-height: 55px !important;
--urlbar-margin-inline: 10px !important;
position: absolute;
font-size: 1.15em !important;
@media (-moz-platform: macos) {
font-size: 1.5em !important;
}
top: calc(var(--zen-toolbar-height) * 2) !important;
--zen-urlbar-center: calc(var(--zen-urlbar-offset, 0px) + 28vw);
@@ -491,10 +498,9 @@ button.popup-notification-dropmarker {
}
&:hover {
background-color: light-dark(var(--zen-colors-secondary), var(--zen-colors-primary)) !important;
.urlbarView-favicon {
background-color: color-mix(in srgb, var(--zen-branding-bg-reverse) 20%, transparent 80%) !important;
.urlbarView-favicon,
& {
background-color: color-mix(in srgb, var(--zen-branding-bg-reverse) 5%, transparent 95%) !important;
}
.urlbarView-url,

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

@@ -446,11 +446,20 @@
}
/* Mark workspaces indicator */
#zen-current-workspace-indicator {
#zen-current-workspace-indicator-container {
margin-bottom: var(--zen-workspace-indicator-height);
}
.zen-current-workspace-indicator {
padding: 15px calc(4px + var(--tab-inline-padding));
font-weight: 600;
align-items: center;
position: relative;
position: absolute;
max-height: var(--zen-workspace-indicator-height);
min-height: var(--zen-workspace-indicator-height);
gap: 5px;
overflow: hidden;
text-overflow: ellipsis;
flex-direction: row !important;
&::before {
border-radius: var(--border-radius-medium);
@@ -459,11 +468,11 @@
pointer-events: none;
content: '';
position: absolute;
top: 6px;
top: 4px;
left: 2px;
z-index: -1;
width: calc(100% - 4px);
height: calc(100% - 12px);
height: calc(100% - 10px);
}
&:hover,
@@ -473,38 +482,23 @@
}
}
& #zen-current-workspace-indicator-icon {
font-size: 14px;
& .zen-current-workspace-indicator-icon {
font-size: 12px;
}
#zen-current-workspace-indicator-name {
.zen-current-workspace-indicator-name {
font-size: 13px;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
position: absolute;
max-width: calc(100% - var(--zen-toolbox-padding) * 4);
}
& #zen-current-workspace-indicator-icon {
min-height: 16px;
}
& #zen-current-workspace-indicator-icon:not([hidden]) + #zen-current-workspace-indicator-name {
padding-left: 24px;
}
}
@media not (-moz-bool-pref: 'zen.workspaces.show-workspace-indicator') {
#zen-current-workspace-indicator {
#zen-current-workspace-indicator-container {
display: none !important;
}
}
#zen-current-workspace-indicator[hidden='true'] {
#zen-current-workspace-indicator-container[hidden='true'] {
display: none !important;
}