diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 5d0a7c5b7..cd2de6f63 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -664,10 +664,10 @@ jobs:
git-token: ${{ secrets.DEPLOY_KEY }}
delete-branch: true
- release-homebrew:
+ release-homebrew-alpha:
if: ${{ inputs.create_release && inputs.update_branch == 'alpha' }}
permissions: write-all
- name: Homebrew release
+ name: Homebrew release for alpha build
needs: [release, mac, build-data]
runs-on: macos-latest
@@ -683,8 +683,33 @@ jobs:
with:
username: zen-browser-auto
- - name: Bump zen-browser
+ - name: Bump cask
uses: Homebrew/actions/bump-packages@master
with:
token: ${{ secrets.DEPLOY_KEY }}
casks: zen-browser
+
+ release-homebrew-twilight:
+ if: ${{ inputs.create_release && inputs.update_branch == 'twilight' }}
+ permissions: write-all
+ name: Homebrew release for twilight build
+ needs: [release, mac, build-data]
+ runs-on: macos-latest
+
+ steps:
+ - name: Set up Homebrew
+ uses: Homebrew/actions/setup-homebrew@master
+ with:
+ cask: true
+ test-bot: false
+
+ - name: Setup git
+ uses: Homebrew/actions/git-user-config@master
+ with:
+ username: zen-browser-auto
+
+ - name: Bump cask
+ uses: Homebrew/actions/bump-packages@master
+ with:
+ token: ${{ secrets.DEPLOY_KEY }}
+ casks: zen-browser@twilight
diff --git a/package.json b/package.json
index bc3c6cf97..14a77dbf4 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
},
"homepage": "https://github.com/zen-browser/core#readme",
"dependencies": {
- "@zen-browser/surfer": "^1.6.3"
+ "@zen-browser/surfer": "^1.6.4"
},
"devDependencies": {
"husky": "^9.1.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9f9705861..46a49dd57 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
.:
dependencies:
'@zen-browser/surfer':
- specifier: ^1.6.3
- version: 1.6.3
+ specifier: ^1.6.4
+ version: 1.6.4
devDependencies:
husky:
specifier: ^9.1.5
@@ -119,8 +119,8 @@ packages:
'@types/node@17.0.45':
resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
- '@zen-browser/surfer@1.6.3':
- resolution: {integrity: sha512-OpBJu4c6AV4P1o9whtvp2BQjcqxS+fMbXJKtgKWuW7E8cfOLIMbHpuxCbTllO/LGz60T0aszxZRPbToTQuwPog==}
+ '@zen-browser/surfer@1.6.4':
+ resolution: {integrity: sha512-JmTHLHTbTLPgrakdU/m1KQgetPMQNGjYgGGVoi2AenvVDlJf3j+L2it0XehAqRFIQhXmbEuF1nSDV4Vla/vUUg==}
hasBin: true
ansi-escapes@7.0.0:
@@ -1003,7 +1003,7 @@ snapshots:
'@types/node@17.0.45': {}
- '@zen-browser/surfer@1.6.3':
+ '@zen-browser/surfer@1.6.4':
dependencies:
'@resvg/resvg-js': 1.4.0
async-icns: 1.0.2
diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index f7df0d30a..78b7c6d4a 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -76,7 +76,7 @@ pref('zen.welcomeScreen.seen', false);
pref('zen.tabs.vertical', true);
pref('zen.tabs.vertical.right-side', false);
-pref('zen.theme.accent-color', "#aac7ff");
+pref('zen.theme.accent-color', "#ffb787");
pref('zen.theme.content-element-separation', 6); // In pixels
pref('zen.theme.pill-button', false);
pref('zen.theme.gradient', true);
@@ -111,17 +111,15 @@ pref('zen.view.compact.color-sidebar', true);
pref('zen.glance.enabled', true);
pref('zen.glance.hold-duration', 300); // in ms
-#ifdef XP_MACOSX
pref('zen.glance.activation-method', 'alt'); // ctrl, alt, shift, none, hold
-#else
-pref('zen.glance.activation-method', 'ctrl'); // ctrl, alt, shift, none, hold
-#endif
pref('zen.view.sidebar-height-throttle', 200); // in ms
pref('zen.view.sidebar-expanded.max-width', 400);
pref('zen.view.show-bottom-border', false);
-pref('zen.view.use-single-toolbar', false, locked);
+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);
diff --git a/src/browser/base/content/ZenCustomizableUI.sys.mjs b/src/browser/base/content/ZenCustomizableUI.sys.mjs
index 88c0a42e9..39a66a713 100644
--- a/src/browser/base/content/ZenCustomizableUI.sys.mjs
+++ b/src/browser/base/content/ZenCustomizableUI.sys.mjs
@@ -45,7 +45,7 @@ export var ZenCustomizableUI = new (class {
customizationtarget="zen-sidebar-top-buttons-customization-target"
mode="icons">
diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs
index 449b62ee4..483d7210c 100644
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -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) || !isVerticalTabs;
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');
@@ -237,9 +250,9 @@ var gZenVerticalTabsManager = {
// tabboxWrapper.prepend(this.navigatorToolbox);
}
- if (!isVerticalTabs) {
- document.getElementById("urlbar-container").after(document.getElementById('navigator-toolbox'));
- }
+ //if (!isVerticalTabs) {
+ // document.getElementById("urlbar-container").after(document.getElementById('navigator-toolbox'));
+ //}
let windowButtons = this.actualWindowButtons;
let doNotChangeWindowButtons = !isCompactMode && isRightSide && this.isWindowsStyledButtons;
diff --git a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
index d39865e50..9dfba3614 100644
--- a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
+++ b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
@@ -1,5 +1,5 @@
diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index eb2d8670874bd5bcaf9253caafb98444cb8cfcd9..eba11edbbcebe8201a6e1153d66a5b63ab62acc7 100644
+index eb2d8670874bd5bcaf9253caafb98444cb8cfcd9..51e6c01c279e0105ec8ac08df0763027179c0616 100644
--- a/browser/base/content/navigator-toolbox.inc.xhtml
+++ b/browser/base/content/navigator-toolbox.inc.xhtml
@@ -2,7 +2,7 @@
@@ -29,7 +29,15 @@ index eb2d8670874bd5bcaf9253caafb98444cb8cfcd9..eba11edbbcebe8201a6e1153d66a5b63
+
+@@ -55,9 +56,14 @@
# significantly, there is an optimization in
# DisplayPortUtils::MaybeCreateDisplayPortInFirstScrollFrameEncountered based
# the current structure that we may want to revisit.
@@ -45,7 +53,7 @@ index eb2d8670874bd5bcaf9253caafb98444cb8cfcd9..eba11edbbcebe8201a6e1153d66a5b63
-@@ -100,11 +105,12 @@
+@@ -100,11 +106,12 @@
#include private-browsing-indicator.inc.xhtml
@@ -61,7 +69,7 @@ index eb2d8670874bd5bcaf9253caafb98444cb8cfcd9..eba11edbbcebe8201a6e1153d66a5b63
diff --git a/src/browser/base/content/zen-styles/zen-animations.css b/src/browser/base/content/zen-styles/zen-animations.css
index 43827a339..e4dffa8eb 100644
--- a/src/browser/base/content/zen-styles/zen-animations.css
+++ b/src/browser/base/content/zen-styles/zen-animations.css
@@ -56,7 +56,18 @@
@keyframes zen-slide-in {
from {
- transform: translateX(-30px);
+ transform: translateX(-100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+@keyframes zen-slide-in-reverse {
+ from {
+ transform: translateX(100%);
opacity: 0;
}
to {
@@ -228,9 +239,9 @@
height: 0%;
}
- 70% {
+ 80% {
/* make the box grow to full width/height */
- opacity: .5;
+ opacity: 1;
transform: translate(-50%, -50%) translateZ(0);
top: 50%;
left: 50%;
@@ -253,31 +264,22 @@
0% {
/* make the box shrink to final width/height and x/y coordinates */
transform: translate(-50%, -50%) translateZ(0);
- opacity: 1;
width: 85%;
height: 100%;
top: 50%;
left: 50%;
- }
-
- 50% {
- /* make the box grow to full width/height */
opacity: 1;
- transform: translate(-50%, -50%) translateZ(0);
- top: 50%;
- left: 50%;
- width: 87%;
- height: 102%;
}
100% {
/* make the box appear from initial width/height and x/y coordinates */
+ transform: translate(-50%, -50%) translateZ(0);
opacity: 0;
+ width: 47%;
+ height: 53%;
top: 50%;
left: 50%;
- transform: translate(-50%, -50%) translateZ(0);
- width: 0%;
- height: 0%;
+ opacity: 0;
}
}
@@ -293,10 +295,10 @@
to {
width: 100%;
height: 100%;
- top: 0;
- left: 0;
+ top: 50%;
+ left: 50%;
opacity: 1;
- transform: none;
+ transform: translate(-50%, -50%);
}
}
diff --git a/src/browser/base/content/zen-styles/zen-browser-container.css b/src/browser/base/content/zen-styles/zen-browser-container.css
index bf4613ebe..db20ccc83 100644
--- a/src/browser/base/content/zen-styles/zen-browser-container.css
+++ b/src/browser/base/content/zen-styles/zen-browser-container.css
@@ -4,8 +4,10 @@
border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
position: relative;
+ /* For glance */
+ transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
+
box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
- border-radius: var(--zen-border-radius);
overflow: hidden;
margin: 1px;
diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css
index c3d9bc4d1..45ed69a55 100644
--- a/src/browser/base/content/zen-styles/zen-browser-ui.css
+++ b/src/browser/base/content/zen-styles/zen-browser-ui.css
@@ -75,6 +75,7 @@
#zen-appcontent-wrapper {
max-width: 100%;
overflow-x: hidden;
+ z-index: 1;
}
:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
diff --git a/src/browser/base/content/zen-styles/zen-glance.css b/src/browser/base/content/zen-styles/zen-glance.css
index 2ec5956ff..8c09c5095 100644
--- a/src/browser/base/content/zen-styles/zen-glance.css
+++ b/src/browser/base/content/zen-styles/zen-glance.css
@@ -5,7 +5,6 @@
}
.zen-glance-background {
- transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
transform: scale(0.98);
backdrop-filter: blur(5px);
opacity: 0.6;
@@ -28,7 +27,7 @@
& .browserContainer {
opacity: 1;
- animation: zen-glance-content-animation-out .5s ease-in-out forwards !important;
+ animation: zen-glance-content-animation-out .3s ease-in-out forwards !important;
& browser {
opacity: 1 !important;
diff --git a/src/browser/base/content/zen-styles/zen-sidebar-panels.css b/src/browser/base/content/zen-styles/zen-sidebar-panels.css
index fced7c987..9c429294c 100644
--- a/src/browser/base/content/zen-styles/zen-sidebar-panels.css
+++ b/src/browser/base/content/zen-styles/zen-sidebar-panels.css
@@ -80,7 +80,7 @@
#zen-sidebar-web-panel {
border-radius: var(--zen-panel-radius);
- overflow: hidden;
+ z-index: 2;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
border: 1px solid var(--zen-colors-border);
background: var(--zen-colors-tertiary);
@@ -105,21 +105,47 @@
top: 0;
left: 0;
height: 100%;
- width: 4px;
+ width: calc(var(--zen-element-separation) * 2 - 3px);
background: transparent;
border: none;
cursor: ew-resize;
+
+ &::before {
+ height: 30px;
+ width: 3px;
+ background: var(--zen-colors-border);
+ border-radius: 2px;
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ opacity: 0;
+ transition: opacity 0.1s ease-in-out;
+ pointer-events: none;
+ }
+
+ &:hover::before {
+ opacity: 1;
+ }
}
.zen-sidebar-web-panel-splitter[side='right'] {
- left: initial;
- right: 0;
+ left: 100%;
+}
+
+.zen-sidebar-web-panel-splitter[side='left'] {
+ right: 100%;
}
.zen-sidebar-web-panel-splitter[orient='horizontal'] {
width: 100%;
height: 7px;
cursor: ns-resize;
+
+ &::before {
+ display: none;
+ }
}
.zen-sidebar-web-panel-splitter[side='bottom'] {
@@ -251,8 +277,9 @@
}
:root:not([zen-right-side='true']) {
- #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[pinned='true'])) {
+ #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel:is([hidden='true'], [pinned='true']))) {
margin-left: 0 !important;
+ margin-right: calc(var(--zen-element-separation) * 2 - 3px) !important;
}
}
diff --git a/src/browser/base/content/zen-styles/zen-tabs.css b/src/browser/base/content/zen-styles/zen-tabs.css
index 6ac218e66..3603023a4 100644
--- a/src/browser/base/content/zen-styles/zen-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs.css
@@ -1,6 +1,6 @@
/* Styles for both vertical and horizontal tabs */
-@import url('chrome://browser/content/zen-styles/zen-tabs/horizontal-tabs.css');
@import url('chrome://browser/content/zen-styles/zen-tabs/vertical-tabs.css');
+@import url('chrome://browser/content/zen-styles/zen-tabs/horizontal-tabs.css');
#zen-tabbox-wrapper {
position: relative;
diff --git a/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
index 91f3bbbae..29dcc61cb 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
@@ -1,20 +1,332 @@
@media not (-moz-bool-pref: 'zen.tabs.vertical') {
- #browser,
- #navigator-toolbox {
- flex-direction: row;
-
- max-width: unset !important;
- width: 100% !important;
+ :root #browser {
+ display: flex !important;
+ flex-direction: column !important;
}
- #zen-sidebar-splitter {
- display: none !important;
+ & #navigator-toolbox {
+ display: flex !important;
+ flex-direction: row !important;
+ max-width: unset !important;
+ min-width: unset !important;
+ width: 100% !important;
+ padding: var(--zen-toolbox-padding) !important;
+ }
+
+
+ #tabbrowser-tabs {
+ display: -webkit-box !important;
+ -webkit-box-orient: horizontal;
+ -webkit-box-pack: start;
+ max-width: 10000px !important;
}
+ #vertical-pinned-tabs-container-separator {
+ display: none !important;
+ }
+
+ #zen-essentials-container,
+ #vertical-pinned-tabs-container,
#tabbrowser-arrowscrollbox {
- max-height: unset !important;
+ -webkit-box-flex: 1;
+ }
+
+ #vertical-pinned-tabs-container:empty {
+ -webkit-box-flex: 0 !important;
+ width: 0 !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ border: none !important;
+ visibility: collapse !important;
+ }
+ #navigator-toolbox {
+ flex-direction: row !important;
}
#titlebar {
+ flex-direction: row !important;
+ width: 100%;
+ height: 40px !important;
+ }
+
+ #zen-essentials-container {
+ --tab-min-height: 36px !important;
+ display: flex !important;
+ flex-direction: row !important;
+ padding-inline-end: 0 !important;
+ }
+
+ #vertical-pinned-tabs-container {
+ display: flex !important;
+ flex-direction: row !important;
+ padding-inline-end: 0 !important;
+ }
+
+ #zen-essentials-container .tabbrowser-tab {
+ width: 0% !important;
+ }
+
+ #vertical-pinned-tabs-container .tabbrowser-tab {
+ width: 0% !important;
+ }
+
+ .tabbrowser-tab[zen-glance-tab="true"] {
+ .tab-content {
+ }
+
+ .tab-label-container {
+ display: none !important;
+ width: 0px !important;
+ max-width: 0px !important;
+ }
+ }
+
+ #tabbrowser-arrowscrollbox {
+ display: flex !important;
+ max-width: -moz-available;
+ overflow: hidden !important;
+ }
+
+ #TabsToolbar {
+ flex-direction: row !important;
+ gap: 8px;
+ overflow: hidden !important;
+ display: flex !important;
+ }
+
+ #TabsToolbar-customization-target {
+ flex-direction: row !important;
+ }
+
+ #tabbrowser-tabs[orient="vertical"] {
+ flex-direction: row !important;
+ }
+
+ tabs {
+ flex-direction: row !important;
+ }
+
+ #zen-essentials-container {
+ container-name: tab-container;
+ container-type: normal;
+ max-width: 36px !important;
+ flex: 1 1 36px !important;
+ }
+ #vertical-pinned-tabs-container {
+ container-name: tab-container;
+ container-type: normal;
+ max-width: 36px !important;
+ min-width: 36px !important;
+ flex: 1 1 36px !important;
+ }
+
+ #vertical-pinned-tabs-container .tab-close-button {
+ display: none !important;
+ }
+
+ #vertical-pinned-tabs-container .tab-label-container {
+ display: none !important;
+ }
+
+ #vertical-pinned-tabs-container .tab-icon-image {
+ margin: 0 !important;
+ }
+
+ .tabbrowser-tab {
+ container-name: tab-container;
+ container-type: normal;
+ max-width: 200px !important;
+ min-width: 36px !important;
+ flex: 1 1 150px !important;
+ }
+
+ .tabbrowser-tab[selected] {
+ flex: 2 1 150px !important;
+ min-width: 32px !important;
+ }
+
+ @container tab-container (max-width: 80px) {
+ .tab-close-button {
+ margin-right: 0px !important;
+ }
+ .tab-icon-image {
+ padding: 0 !important;
+ margin-left: min(2.5px, 5%) !important;
+ margin-right: min(10px, 5%) !important;
+ }
+ .tab-label-container,
+ .tab-content {
+ margin: 0 !important;
+ padding-left: min(8px, 5%) !important;
+ padding-right: min(8px, 5%) !important;
+ }
+ }
+
+ @container tab-container (max-width: 44px) {
+ .tab-label-container {
+ display: none !important;
+ }
+ .tab-content {
+ justify-content: space-around !important;
+ }
+ .tab-close-button {
+ display: none !important;
+ }
+ .tabbrowser-tab[selected] {
+ & .tab-icon-image,
+ .tab-icon-stack {
+ display: none !important;
+ }
+ & .tab-content {
+ justify-content: space-around !important;
+ padding: 0 !important;
+ }
+ .tab-close-button {
+ display: block !important;
+ }
+ }
+ }
+
+ #vertical-pinned-tabs-container::after {
+ z-index: -1;
+ content: "";
+ position: absolute;
+ right: 0;
+ width: 1px;
+ height: 45%;
+ top: 50%;
+ transform: translateY(-50%);
+ background: hsl(255, 10%, 100%);
+ }
+
+ slot {
+ flex-direction: row !important;
+ }
+
+ box.scrollbox-clip scrollbox slot {
+ display: flex !important;
+ width: 100% !important;
+ overflow: hidden !important;
+ }
+
+ .menupopup-arrowscrollbox > slot:nth-child(1) {
+ display: flex;
+ flex-direction: column !important;
+ }
+
+ /* Other UI Elements */
+ #zen-current-workspace-indicator {
+ display: none !important;
+ }
+
+ #zen-sidebar-splitter {
+ display: none !important;
+ }
+
+ #tabbrowser-tabpanels {
+ padding-left: var(--zen-element-separation) !important;
+ }
+
+ #appcontent * {
+ overflow: visible !important;
+ }
+
+ #TabsToolbar-customization-target::after {
+ display: none !important;
+ }
+
+ #zen-sidebar-icons-wrapper {
+ width: auto !important;
+ padding: 0 !important;
+ }
+
+ /* Height Adjustments */
+ #vertical-pinned-tabs-container,
+ #zen-essentials-container,
+ #tabbrowser-arrowscrollbox {
+ max-height: none !important;
+ }
+
+ #PanelUI-zen-gradient-generator {
+ min-width: 390px !important;
+ }
+
+
+ #zen-essentials-container:not(:empty),
+ #vertical-pinned-tabs-container:not(:empty),
+ #tabbrowser-arrowscrollbox {
+ -webkit-box-flex: 1;
+ min-width: min-content;
+ width: auto !important;
+ }
+
+ #vertical-pinned-tabs-container:not(:empty) {
+ display: -webkit-box !important;
+ -webkit-box-orient: horizontal;
+ min-width: fit-content !important;
+ width: fit-content !important;
+ position: relative;
+ margin-right: -1px !important;
+ }
+
+ #vertical-pinned-tabs-container:not(:empty) .tabbrowser-tab {
+ position: relative;
+ display: -webkit-box !important;
+ }
+
+ #tabbrowser-arrowscrollbox {
+ margin-left: 0 !important;
+ }
+
+ #vertical-pinned-tabs-container:empty,
+ #zen-essentials-container:empty {
+ -webkit-box-flex: 0 !important;
+ width: 0 !important;
+ min-width: 0 !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ border: none !important;
+ visibility: collapse !important;
+ }
+
+ #tabbrowser-arrowscrollbox-periphery {
+ margin: 0 !important;
+ }
+
+ hbox#nav-bar-customization-target toolbarbutton.chromeclass-toolbar-additional:nth-of-type(1) {
+ padding-inline-start: var(--toolbar-start-end-padding) !important;
+ }
+
+ toolbar#PersonalToolbar {
+ padding-left: 6px !important;
+ }
+
+ .tab-context-line {
+ width: 100% !important;
+ height: 3px !important;
+ }
+
+ .tabbrowser-tab[zen-glance-tab="true"] {
+ flex-basis: fit-content !important;
+ max-width: 36px !important;
+ }
+
+ #zen-essentials-container .tabbrowser-tab[zen-glance-tab="true"] {
+ left: 2px;
+ }
+
+ #vertical-pinned-tabs-container .tabbrowser-tab[zen-glance-tab="true"] {
+ position: absolute !important;
+ }
+
+ #TabsToolbar-customization-target toolbarbutton,
+ #TabsToolbar-customization-target toolbarpaletteitem {
+ -webkit-box-flex: 0 !important;
+ min-width: min-content;
+ width: auto !important;
+
+ .toolbarbutton-text {
+ display: none !important;
+ }
}
}
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index 750989128..f3ba95b57 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -1,4 +1,3 @@
-@media (-moz-bool-pref: 'zen.tabs.vertical') {
#tabbrowser-tabs,
#TabsToolbar,
#titlebar,
@@ -216,7 +215,21 @@
}
& .tabbrowser-tab {
- animation: zen-slide-in 0.2s ease-in-out;
+ animation: none;
+ transition: none;
+ &[fadein='true']:not([zen-essential='true']) {
+ #tabbrowser-tabs[zen-workspace-animation='previous'] & {
+ animation: zen-slide-in-reverse 0.2s ease-in-out;
+ }
+
+ #tabbrowser-tabs[zen-workspace-animation='next'] & {
+ animation: zen-slide-in 0.2s ease-in-out;
+ }
+
+ &[pinned] {
+ animation-delay: .03s !important;
+ }
+ }
max-width: unset;
padding: 0 !important;
@@ -299,6 +312,11 @@
&::part(scrollbox) {
gap: 0px !important;
}
+
+ &::part(overflow-start-indicator),
+ &::part(overflow-end-indicator) {
+ display: none !important;
+ }
}
#vertical-pinned-tabs-container {
@@ -322,12 +340,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;
@@ -344,16 +363,13 @@
margin-left: var(--zen-toolbox-padding);
width: calc(100% - var(--zen-toolbox-padding));
& .urlbar-input-container {
- padding-left: 2px;
+ padding-left: 4px;
+ padding-right: 4px;
}
:root[zen-right-side='true'] & {
margin-left: 0;
margin-right: var(--zen-toolbox-padding);
-
- & .urlbar-input-container {
- padding-right: 2px;
- }
}
}
}
@@ -479,6 +495,7 @@
&:is(:hover, [visuallyselected]) .tab-close-button {
display: block;
--tab-inline-padding: 0; /* Avoid weird padding */
+ margin-inline-end: 0 !important;
}
.tab-throbber,
@@ -493,6 +510,146 @@
}
}
+ /* 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-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;
@@ -683,7 +840,7 @@
}
}
}
-}
+
/* Mark: Essentials Toolbar */
#zen-essentials-container {
@@ -711,8 +868,8 @@
border-radius: var(--border-radius-medium);
&:not([selected]) .tab-background {
- background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
- box-shadow: none;
+ background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
+ box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
}
backdrop-filter: blur(10px);
diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css
index 56fb077a4..31a4e33eb 100644
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -1,4 +1,4 @@
-/* Here, we contain all the theme related variables, for example theme
+ /* Here, we contain all the theme related variables, for example theme
* colors, border radius, etc.
* We have `--zen-border-radius` and `--zen-primary-color` as variables.
*/
@@ -12,7 +12,11 @@
/* Default values */
--zen-border-radius: 7px;
- --zen-primary-color: #4a90e2;
+ --zen-primary-color: #ffb787;
+
+ --zen-branding-bg-dark: #202020;
+ --zen-branding-bg: light-dark(#F2F0E3, var(--zen-branding-bg-dark));
+ --zen-branding-bg-reverse: light-dark(var(--zen-branding-bg-dark), #F2F0E3);
/** Zen colors are generated automatically from the primary color */
--zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
@@ -20,7 +24,7 @@
--zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 2%, white 98%);
--zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%);
- --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, black 20%);
+ --zen-colors-primary-foreground: var(--zen-branding-bg-reverse);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 97%, black 3%);
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-colors-tertiary) 99%);
@@ -30,19 +34,10 @@
--zen-secondary-btn-color: var(--zen-colors-primary-foreground);
- --in-content-primary-button-background: light-dark(
- color-mix(in srgb, var(--zen-primary-color) 35%, black 65%),
- color-mix(in srgb, var(--zen-primary-color) 85%, black 15%)
- ) !important;
- --in-content-primary-button-background-hover: light-dark(
- color-mix(in srgb, var(--zen-primary-color) 40%, black 60%),
- color-mix(in srgb, var(--zen-primary-color) 40%, white 60%)
- ) !important;
- --in-content-primary-button-background-active: light-dark(
- color-mix(in srgb, var(--zen-primary-color) 50%, black 50%),
- color-mix(in srgb, var(--zen-primary-color) 80%, rgba(255,255,255,.2) 20%)
- ) !important;
- --in-content-primary-button-text-color: light-dark(white, black) !important;
+ --in-content-primary-button-background: color-mix(in srgb, var(--zen-primary-color) 10%, var(--zen-branding-bg-reverse) 90%) !important;
+ --in-content-primary-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 5%, var(--zen-branding-bg-reverse) 60%) !important;
+ --in-content-primary-button-background-active: color-mix(in srgb, var(--zen-primary-color) 7%, var(--zen-branding-bg-reverse) 50%) !important;
+ --in-content-primary-button-text-color: var(--zen-colors-primary-foreground) !important;
--in-content-primary-button-border-color: transparent !important;
--in-content-primary-button-border-hover: transparent !important;
--in-content-primary-button-border-active: var(--zen-colors-border) !important;
@@ -51,18 +46,14 @@
--in-content-accent-color: var(--zen-colors-primary) !important;
/* This is like the secondary button */
- --in-content-button-background: light-dark(
- color-mix(in srgb, var(--zen-primary-color) 20%, transparent 80%),
- color-mix(in srgb, var(--zen-primary-color) 10%, transparent 90%)
- ) !important;
- --in-content-button-background-hover: light-dark(
- color-mix(in srgb, var(--zen-primary-color) 10%, rgb(255, 255, 255) 90%),
- color-mix(in srgb, var(--zen-primary-color) 15%, transparent 85%)
- ) !important;
+ --in-content-button-background: transparent !important;
+ --in-content-button-text-color: var(--zen-secondary-btn-color) !important;
+ --in-content-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 5%, var(--zen-branding-bg-reverse) 60%) !important;
+ --in-content-button-text-color-hover: var(--zen-branding-bg) !important;
--button-bgcolor: var(--in-content-button-background) !important;
--button-hover-bgcolor: var(--in-content-button-background-hover) !important;
+ --button-hover-color: var(--in-content-button-text-color-hover) !important;
--focus-outline-color: var(--button-bgcolor) !important;
- --in-content-button-text-color: var(--zen-secondary-btn-color) !important;
--toolbarbutton-icon-fill-attention: var(--zen-primary-color) !important;
--toolbarbutton-icon-fill: light-dark(rgb(57, 57, 58), rgb(251, 251, 254)) !important;
@@ -74,6 +65,7 @@
--button-background-color: var(--in-content-button-background) !important;
--button-background-color-hover: var(--in-content-button-background-hover) !important;
+ --button-text-color-hover: var(--in-content-button-text-color-hover) !important;
--button-background-color-active: var(--in-content-primary-button-background-active) !important;
--color-accent-primary: var(--button-primary-bgcolor) !important;
@@ -91,16 +83,18 @@
--zen-toolbar-button-inner-padding: 6px;
--toolbarbutton-outer-padding: 4px;
+ --toolbarbutton-hover-background: color-mix(in srgb, var(--zen-branding-bg-reverse) 10%, transparent 90%);
+
/* Other colors */
--urlbar-box-bgcolor: var(--zen-urlbar-background) !important;
--urlbar-box-active-bgcolor: var(--toolbarbutton-hover-background) !important;
--toolbar-field-focus-background-color: var(--urlbar-box-bgcolor) !important;
--zen-input-border-color: light-dark(rgb(204, 204, 204), rgb(66, 65, 77));
+ --urlbar-box-hover-bgcolor: var(--toolbarbutton-hover-background) !important;
/* XUL */
--zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b);
--zen-main-browser-background-toolbar: var(--zen-main-browser-background);
- --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 50%, white 50%);
--zen-appcontent-border: 1px solid var(--zen-colors-border);
--zen-panel-radius: var(--zen-border-radius);
@@ -127,8 +121,8 @@
--input-bgcolor: var(--zen-colors-tertiary) !important;
--input-border-color: var(--zen-input-border-color) !important;
- --zen-themed-toolbar-bg: light-dark(#f7f7f7, var(--zen-colors-tertiary));
- --zen-themed-toolbar-bg-transparent: light-dark(#f7f7f7, var(--zen-colors-tertiary));
+ --zen-themed-toolbar-bg: light-dark(var(--zen-branding-bg), var(--zen-colors-tertiary));
+ --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), var(--zen-colors-tertiary));
@supports (-moz-osx-font-smoothing: auto) {
--zen-themed-toolbar-bg-transparency: 0.05;
@@ -142,8 +136,8 @@
@media (prefers-color-scheme: dark) {
:host(:is(.anonymous-content-host, notification-message)),
:root {
- --zen-in-content-dialog-background: rgb(23, 23, 23);
- --zen-dark-color-mix-base: rgb(21, 21, 21);
+ --zen-in-content-dialog-background: var(--zen-branding-bg);
+ --zen-dark-color-mix-base: var(--zen-branding-bg);
--zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 20%, var(--zen-dark-color-mix-base) 80%);
--zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 30%, var(--zen-dark-color-mix-base) 70%);
--zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-dark-color-mix-base) 99%);
diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
index 3a8b9e8ae..c836765b8 100644
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -126,6 +126,11 @@
}
:root[zen-single-toolbar='true'] {
+ #urlbar[breakout-extend='true'] {
+ top: 0px !important;
+ width: calc(var(--urlbar-width) + 2 * var(--urlbar-margin-inline) * 4);
+ }
+
#notification-popup-box {
align-items: center;
justify-content: center;
diff --git a/src/browser/base/zen-components/ZenProfileDialogUI.mjs b/src/browser/base/zen-components/ZenProfileDialogUI.mjs
index cdc8f7c3b..09faa3232 100644
--- a/src/browser/base/zen-components/ZenProfileDialogUI.mjs
+++ b/src/browser/base/zen-components/ZenProfileDialogUI.mjs
@@ -49,7 +49,11 @@ var ZenProfileDialogUI = {
},
_openProfile(profile) {
- Services.startup.createInstanceWithProfile(profile);
+ SelectableProfileService.getProfile(
+ aEvent.target.getAttribute("profileid")
+ ).then(profile => {
+ SelectableProfileService.launchInstance(profile);
+ });
},
_getProfilesSize(profiles) {
diff --git a/src/browser/base/zen-components/ZenThemeBuilder.mjs b/src/browser/base/zen-components/ZenThemeBuilder.mjs
index 0c375b1e8..7293c9d39 100644
--- a/src/browser/base/zen-components/ZenThemeBuilder.mjs
+++ b/src/browser/base/zen-components/ZenThemeBuilder.mjs
@@ -120,7 +120,7 @@ var gZenThemeBuilder = {
//ctx.fillRect(0, 0, size, size);
// Add the thumb.
- const accentColor = Services.prefs.getStringPref(kZenAccentColorConfigKey, '#aac7ff');
+ const accentColor = Services.prefs.getStringPref(kZenAccentColorConfigKey, '#ffb787');
const pos = this._getPositionFromColor(ctx, this._hexToRgb(accentColor));
let x = pos ? pos[0] : center;
diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs
index 1f6b5866d..219c00f7d 100644
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -1106,6 +1106,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
async _performWorkspaceChange(window, onInit) {
+ const previousWorkspace = await this.getActiveWorkspace();
+
this.activeWorkspace = window.uuid;
const containerId = window.containerTabId?.toString();
const workspaces = await this._workspaces();
@@ -1121,6 +1123,20 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
// Update UI and state
await this._updateWorkspaceState(window, onInit);
+
+ // Animate acordingly
+ if (previousWorkspace && !this._animatingChange) {
+ // we want to know if we are moving forward or backward in sense of animation
+ let isNextWorkspace = onInit ||
+ (workspaces.workspaces.findIndex((w) => w.uuid === previousWorkspace.uuid)
+ < workspaces.workspaces.findIndex((w) => w.uuid === window.uuid));
+ gBrowser.tabContainer.setAttribute('zen-workspace-animation', isNextWorkspace ? 'next' : 'previous');
+ this._animatingChange = true;
+ setTimeout(() => {
+ this._animatingChange = false;
+ gBrowser.tabContainer.removeAttribute('zen-workspace-animation');
+ }, 300);
+ }
}
diff --git a/src/browser/components/preferences/zenTabsManagement.inc.xhtml b/src/browser/components/preferences/zenTabsManagement.inc.xhtml
index 1bdaea5b8..c04dd8a55 100644
--- a/src/browser/components/preferences/zenTabsManagement.inc.xhtml
+++ b/src/browser/components/preferences/zenTabsManagement.inc.xhtml
@@ -81,6 +81,9 @@
+
diff --git a/src/browser/components/tabbrowser/content/tabbrowser-js.patch b/src/browser/components/tabbrowser/content/tabbrowser-js.patch
index 33fed7d35..699cafcd8 100644
--- a/src/browser/components/tabbrowser/content/tabbrowser-js.patch
+++ b/src/browser/components/tabbrowser/content/tabbrowser-js.patch
@@ -1,8 +1,8 @@
diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338e14216df 100644
+index fec3dc8129a4d235fdd05e0390145a02064ebaa5..636b56754f48c1ec931152cf34bab8414a75cebc 100644
--- a/browser/components/tabbrowser/content/tabbrowser.js
+++ b/browser/components/tabbrowser/content/tabbrowser.js
-@@ -462,11 +462,26 @@
+@@ -402,11 +402,26 @@
return count;
},
@@ -31,7 +31,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
}
return i;
},
-@@ -860,7 +875,7 @@
+@@ -800,7 +815,7 @@
if (this.tabContainer.verticalMode) {
let wasFocused = document.activeElement == this.selectedTab;
let oldPosition = aTab._tPos;
@@ -40,7 +40,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
this._updateAfterMoveTabTo(aTab, oldPosition, wasFocused);
} else {
this.moveTabTo(aTab, this.pinnedTabCount);
-@@ -1107,6 +1122,7 @@
+@@ -1047,6 +1062,7 @@
let LOCAL_PROTOCOLS = ["chrome:", "about:", "resource:", "data:"];
@@ -48,7 +48,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
if (
aIconURL &&
!aLoadingPrincipal &&
-@@ -1117,6 +1133,9 @@
+@@ -1057,6 +1073,9 @@
);
return;
}
@@ -58,7 +58,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
let browser = this.getBrowserForTab(aTab);
browser.mIconURL = aIconURL;
-@@ -1346,6 +1365,7 @@
+@@ -1286,6 +1305,7 @@
if (!this._previewMode) {
newTab.recordTimeFromUnloadToReload();
newTab.updateLastAccessed();
@@ -66,7 +66,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
oldTab.updateLastAccessed();
// if this is the foreground window, update the last-seen timestamps.
if (this.ownerGlobal == BrowserWindowTracker.getTopWindow()) {
-@@ -2431,7 +2451,7 @@
+@@ -2371,7 +2391,7 @@
let panel = this.getPanel(browser);
let uniqueId = this._generateUniquePanelID();
@@ -75,7 +75,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
aTab.linkedPanel = uniqueId;
// Inject the into the DOM if necessary.
-@@ -2491,7 +2511,7 @@
+@@ -2431,7 +2451,7 @@
// hasSiblings=false on both the existing browser and the new browser.
if (this.tabs.length == 2) {
this.tabs[0].linkedBrowser.browsingContext.hasSiblings = true;
@@ -84,7 +84,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
} else {
aTab.linkedBrowser.browsingContext.hasSiblings = this.tabs.length > 1;
}
-@@ -2711,6 +2731,11 @@
+@@ -2651,6 +2671,11 @@
);
}
@@ -96,7 +96,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
if (!UserInteraction.running("browser.tabs.opening", window)) {
UserInteraction.start("browser.tabs.opening", "initting", window);
}
-@@ -2780,6 +2805,9 @@
+@@ -2720,6 +2745,9 @@
noInitialLabel,
skipBackgroundNotify,
});
@@ -106,7 +106,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
if (insertTab) {
// insert the tab into the tab container in the correct position
this._insertTabAtIndex(t, {
-@@ -3291,6 +3319,23 @@
+@@ -3342,6 +3370,23 @@
) {
tabWasReused = true;
tab = this.selectedTab;
@@ -130,7 +130,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
if (!tabData.pinned) {
this.unpinTab(tab);
} else {
-@@ -3304,6 +3349,9 @@
+@@ -3355,6 +3400,9 @@
restoreTabsLazily && !select && !tabData.pinned;
let url = "about:blank";
@@ -140,7 +140,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
if (tabData.entries?.length) {
let activeIndex = (tabData.index || tabData.entries.length) - 1;
// Ensure the index is in bounds.
-@@ -3340,6 +3388,21 @@
+@@ -3391,6 +3439,21 @@
preferredRemoteType,
});
@@ -162,7 +162,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
if (select) {
tabToSelect = tab;
}
-@@ -3374,7 +3437,6 @@
+@@ -3444,7 +3507,6 @@
this.tabContainer._invalidateCachedTabs();
}
}
@@ -170,7 +170,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
tab.initialize();
}
-@@ -3831,6 +3893,10 @@
+@@ -3992,6 +4054,10 @@
return;
}
@@ -181,7 +181,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
this.removeTabs(selectedTabs);
},
-@@ -4148,6 +4214,13 @@
+@@ -4309,6 +4375,13 @@
TelemetryStopwatch.start("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
}
@@ -195,7 +195,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
// Handle requests for synchronously removing an already
// asynchronously closing tab.
if (!animate && aTab.closing) {
-@@ -4163,6 +4236,10 @@
+@@ -4324,6 +4397,10 @@
// state).
let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
@@ -206,7 +206,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
if (
!this._beginRemoveTab(aTab, {
closeWindowFastpath: true,
-@@ -4311,7 +4388,7 @@
+@@ -4472,7 +4549,7 @@
var closeWindow = false;
var newTab = false;
@@ -215,7 +215,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
closeWindow =
closeWindowWithLastTab != null
? closeWindowWithLastTab
-@@ -5123,10 +5200,10 @@
+@@ -5265,10 +5342,10 @@
SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
},
@@ -228,7 +228,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
aTab.selected ||
aTab.closing ||
// Tabs that are sharing the screen, microphone or camera cannot be hidden.
-@@ -7042,6 +7119,7 @@
+@@ -7181,6 +7258,7 @@
aWebProgress.isTopLevel
) {
this.mTab.setAttribute("busy", "true");
@@ -236,7 +236,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
gBrowser._tabAttrModified(this.mTab, ["busy"]);
this.mTab._notselectedsinceload = !this.mTab.selected;
gBrowser.syncThrobberAnimations(this.mTab);
-@@ -7874,7 +7952,7 @@ var TabContextMenu = {
+@@ -8114,7 +8192,7 @@ var TabContextMenu = {
);
contextUnpinSelectedTabs.hidden =
!this.contextTab.pinned || !multiselectionContext;
@@ -245,7 +245,16 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
// Move Tab items
let contextMoveTabOptions = document.getElementById(
"context_moveTabOptions"
-@@ -8136,6 +8214,7 @@ var TabContextMenu = {
+@@ -8148,7 +8226,7 @@ var TabContextMenu = {
+ let contextMoveTabToStart = document.getElementById("context_moveToStart");
+ let isFirstTab =
+ tabsToMove[0] == visibleTabs[0] ||
+- tabsToMove[0] == visibleTabs[gBrowser.pinnedTabCount];
++ tabsToMove[0] == visibleTabs[gBrowser._numVisiblePinTabs];
+ contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent;
+
+ document.getElementById("context_openTabInWindow").disabled =
+@@ -8376,6 +8454,7 @@ var TabContextMenu = {
if (this.contextTab.multiselected) {
gBrowser.removeMultiSelectedTabs();
} else {
diff --git a/src/browser/components/tabbrowser/content/tabs-js.patch b/src/browser/components/tabbrowser/content/tabs-js.patch
index 7eebd0b7b..a749c8346 100644
--- a/src/browser/components/tabbrowser/content/tabs-js.patch
+++ b/src/browser/components/tabbrowser/content/tabs-js.patch
@@ -1,7 +1,16 @@
diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index f9e256b143786c18ba85859ca1b11182ab23f1aa..82368b940a6f2c526c471c0e4cc608b836cedbbd 100644
+index f9e256b143786c18ba85859ca1b11182ab23f1aa..f60a8850305f1d7c2eadb6ac6996302f42a08a8a 100644
--- a/browser/components/tabbrowser/content/tabs.js
+++ b/browser/components/tabbrowser/content/tabs.js
+@@ -541,7 +541,7 @@
+ if (this.#isContainerVerticalPinnedExpanded(tab)) {
+ // In expanded vertical mode, the max number of pinned tabs per row is dynamic
+ // Set this before adjusting dragged tab's position
+- let pinnedTabs = this.visibleTabs.slice(0, gBrowser.pinnedTabCount);
++ let pinnedTabs = this.visibleTabs.slice(0, gBrowser._numVisiblePinTabs);
+ let tabsPerRow = 0;
+ let position = 0;
+ for (let pinnedTab of pinnedTabs) {
@@ -918,7 +918,7 @@
let postTransitionCleanup = () => {
tab.removeAttribute("tabdrop-samewindow");
@@ -55,6 +64,15 @@ index f9e256b143786c18ba85859ca1b11182ab23f1aa..82368b940a6f2c526c471c0e4cc608b8
selectedTab._notselectedsinceload = false;
}
+@@ -1571,7 +1574,7 @@
+ if (isEndTab && !this._hasTabTempMaxWidth) {
+ return;
+ }
+- let numPinned = gBrowser.pinnedTabCount;
++ let numPinned = gBrowser._numVisiblePinTabs;
+ // Force tabs to stay the same width, unless we're closing the last tab,
+ // which case we need to let them expand just enough so that the overall
+ // tabbar width is the same.
@@ -1586,7 +1589,7 @@
let tabsToReset = [];
for (let i = numPinned; i < tabs.length; i++) {
@@ -80,6 +98,33 @@ index f9e256b143786c18ba85859ca1b11182ab23f1aa..82368b940a6f2c526c471c0e4cc608b8
}
}
+@@ -1681,7 +1684,7 @@
+
+ _positionPinnedTabs() {
+ let tabs = this.visibleTabs;
+- let numPinned = gBrowser.pinnedTabCount;
++ let numPinned = gBrowser._numVisiblePinTabs;
+ let absPositionHorizontalTabs =
+ this.overflowing && tabs.length > numPinned && numPinned > 0;
+
+@@ -1762,7 +1765,7 @@
+ return;
+ }
+
+- let tabs = this.visibleTabs.slice(0, gBrowser.pinnedTabCount);
++ let tabs = this.visibleTabs.slice(0, gBrowser._numVisiblePinTabs);
+
+ let directionX = screenX > dragData.animLastScreenX;
+ let directionY = screenY > dragData.animLastScreenY;
+@@ -1948,7 +1951,7 @@
+ }
+
+ let pinned = draggedTab.pinned;
+- let numPinned = gBrowser.pinnedTabCount;
++ let numPinned = gBrowser._numVisiblePinTabs;
+ let tabs = this.visibleTabs.slice(
+ pinned ? 0 : numPinned,
+ pinned ? numPinned : undefined
@@ -2140,8 +2143,8 @@
);
}
diff --git a/src/browser/themes/shared/light-dark-overrides-css.patch b/src/browser/themes/shared/light-dark-overrides-css.patch
new file mode 100644
index 000000000..91a8dbccb
--- /dev/null
+++ b/src/browser/themes/shared/light-dark-overrides-css.patch
@@ -0,0 +1,10 @@
+diff --git a/browser/themes/shared/light-dark-overrides.css b/browser/themes/shared/light-dark-overrides.css
+index 8b10da7c3ccbbfca30f77e2b7602794dccbf306d..f9188accee0e02d3ef6944b155da613fa6bd335d 100644
+--- a/browser/themes/shared/light-dark-overrides.css
++++ b/browser/themes/shared/light-dark-overrides.css
+@@ -5,5 +5,4 @@
+ #urlbar {
+ --urlbar-box-bgcolor: var(--toolbar-field-focus-background-color);
+ --urlbar-box-focus-bgcolor: var(--button-background-color);
+- --urlbar-box-hover-bgcolor: var(--button-background-color-hover);
+ }
diff --git a/src/toolkit/themes/shared/in-content/common-shared-css.patch b/src/toolkit/themes/shared/in-content/common-shared-css.patch
index 387b8ffdb..aecd238d8 100644
--- a/src/toolkit/themes/shared/in-content/common-shared-css.patch
+++ b/src/toolkit/themes/shared/in-content/common-shared-css.patch
@@ -1,5 +1,5 @@
diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css
-index 2b59a0604b4bfefd3bdcfdb9a3964937e9699114..d9f5f81158790336c7fa5ad366fd815abfe67087 100644
+index 646a11b699a0b34204cd766836678bfc17e8548e..14ebf803000ccea0de7c4f09ed2a9528bb017778 100644
--- a/toolkit/themes/shared/in-content/common-shared.css
+++ b/toolkit/themes/shared/in-content/common-shared.css
@@ -5,6 +5,8 @@
@@ -11,7 +11,7 @@ index 2b59a0604b4bfefd3bdcfdb9a3964937e9699114..d9f5f81158790336c7fa5ad366fd815a
@namespace html "http://www.w3.org/1999/xhtml";
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
-@@ -63,7 +65,7 @@
+@@ -54,7 +56,7 @@
--in-content-table-border-color: var(--in-content-box-border-color);
--in-content-table-header-background: var(--in-content-primary-button-background);
--in-content-table-header-color: var(--in-content-primary-button-text-color);
@@ -20,7 +20,15 @@ index 2b59a0604b4bfefd3bdcfdb9a3964937e9699114..d9f5f81158790336c7fa5ad366fd815a
--dialog-warning-text-color: var(--red-60);
-@@ -791,7 +793,8 @@ html|*#categories > html|*.category:dir(rtl) {
+@@ -740,7 +742,6 @@ html|*#categories {
+ color: inherit;
+ margin-inline-start: 34px;
+ padding-inline: 10px;
+- transition: background-color 150ms;
+ }
+
+ html|*#categories > html|*.category {
+@@ -777,7 +778,8 @@ html|*#categories > html|*.category:dir(rtl) {
@media not (forced-colors) {
#categories > .category[selected],
#categories > .category.selected {
diff --git a/surfer.json b/surfer.json
index eded62b5d..3ddaa0c64 100644
--- a/surfer.json
+++ b/surfer.json
@@ -18,7 +18,7 @@
"brandShortName": "Zen Browser",
"brandFullName": "Zen Browser",
"release": {
- "displayVersion": "1.0.1-a.21",
+ "displayVersion": "1.0.1-a.22",
"github": {
"repo": "zen-browser/desktop"
},
@@ -40,7 +40,7 @@
"brandShortName": "Zen Twilight",
"brandFullName": "Zen Twilight",
"release": {
- "displayVersion": "1.0.1-t.21",
+ "displayVersion": "1.0.1-t.22",
"github": {
"repo": "zen-browser/desktop"
}