diff --git a/.prettierignore b/.prettierignore
index 82e333acc..9ecc5ffd9 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -22,7 +22,7 @@ docs/issue-metrics/*.md
# Some CSS files are preprocessed and prettier doesn't handle them well
# We also dont want to format the CSS files that are generated by the build
-src/zen/tabs/zen-tabs/vertical-tabs.css
+src/zen/tabs/zen-tabs.css
src/zen/compact-mode/zen-compact-mode.css
src/zen/common/ZenEmojies.mjs
diff --git a/README.md b/README.md
index 7bedcb977..e60570472 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,7 @@
## 🖥️ Compatibility
-Zen is currently built using Firefox version `137.0.2`! 🚀
+Zen is currently built using Firefox version `138.0`! 🚀
- [`Zen Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 138.0`!
- Check out the latest [release notes](https://zen-browser.app/release-notes)!
diff --git a/build/firefox-cache/l10n-last-commit-hash b/build/firefox-cache/l10n-last-commit-hash
index 30a227e75..21cd03a56 100644
--- a/build/firefox-cache/l10n-last-commit-hash
+++ b/build/firefox-cache/l10n-last-commit-hash
@@ -1 +1 @@
-7113caf804fda45f011f1900c25de638398d586e
\ No newline at end of file
+8113a66aeeec42dca9739c7b742a3408cb5b7cf7
\ No newline at end of file
diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index c960c3916..834815676 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -387,7 +387,7 @@ pref('zen.widget.linux.transparency', false);
#endif
// Urlbar and autocomplete
-pref("browser.urlbar.maxRichResults", 6);
+pref("browser.urlbar.maxRichResults", 8);
pref("browser.urlbar.trimHttps", true);
pref("browser.search.separatePrivateDefault.ui.enabled", true);
pref("browser.urlbar.update2.engineAliasRefresh", true);
diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn
index 8e3de8d36..04f14da29 100644
--- a/src/browser/base/content/zen-assets.jar.inc.mn
+++ b/src/browser/base/content/zen-assets.jar.inc.mn
@@ -51,8 +51,8 @@
content/browser/zen-components/ZenTabUnloader.mjs (../../zen/tabs/ZenTabUnloader.mjs)
content/browser/zen-components/ZenPinnedTabsStorage.mjs (../../zen/tabs/ZenPinnedTabsStorage.mjs)
content/browser/zen-components/ZenPinnedTabManager.mjs (../../zen/tabs/ZenPinnedTabManager.mjs)
- content/browser/zen-styles/zen-tabs.css (../../zen/tabs/zen-tabs.css)
-* content/browser/zen-styles/zen-tabs/vertical-tabs.css (../../zen/tabs/zen-tabs/vertical-tabs.css)
+* content/browser/zen-styles/zen-tabs.css (../../zen/tabs/zen-tabs.css)
+ content/browser/zen-styles/zen-tabs/vertical-tabs.css (../../zen/tabs/zen-tabs/vertical-tabs.css)
content/browser/zen-components/ZenGlanceManager.mjs (../../zen/glance/ZenGlanceManager.mjs)
content/browser/zen-styles/zen-glance.css (../../zen/glance/zen-glance.css)
@@ -92,3 +92,15 @@
# JS Vendor
content/browser/zen-vendor/tsparticles.confetti.bundle.min.js (../../zen/vendor/tsparticles.confetti.bundle.min.js)
content/browser/zen-vendor/motion.min.mjs (../../zen/vendor/motion.min.mjs)
+
+ # FavIcons for startup
+ content/browser/zen-images/favicons/calendar.ico (../../zen/images/favicons/calendar.ico)
+ content/browser/zen-images/favicons/discord.ico (../../zen/images/favicons/discord.ico)
+ content/browser/zen-images/favicons/figma.ico (../../zen/images/favicons/figma.ico)
+ content/browser/zen-images/favicons/github.ico (../../zen/images/favicons/github.ico)
+ content/browser/zen-images/favicons/notion.ico (../../zen/images/favicons/notion.ico)
+ content/browser/zen-images/favicons/obsidian.ico (../../zen/images/favicons/obsidian.ico)
+ content/browser/zen-images/favicons/slack.ico (../../zen/images/favicons/slack.ico)
+ content/browser/zen-images/favicons/reddit.ico (../../zen/images/favicons/reddit.ico)
+ content/browser/zen-images/favicons/x.ico (../../zen/images/favicons/x.ico)
+ content/browser/zen-images/favicons/trello.ico (../../zen/images/favicons/trello.ico)
\ No newline at end of file
diff --git a/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch b/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch
index b6894c048..2303e8d50 100644
--- a/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch
+++ b/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch
@@ -1,5 +1,5 @@
diff --git a/browser/components/urlbar/UrlbarInput.sys.mjs b/browser/components/urlbar/UrlbarInput.sys.mjs
-index 4b69136aa31bfef3a1d3b57ad0c75fe07fa26be0..a469d122622fcf361eea8faa4a8d3a13a5a9e4f1 100644
+index 4b69136aa31bfef3a1d3b57ad0c75fe07fa26be0..2de9f51784a92442da84ead54312e879c1da127b 100644
--- a/browser/components/urlbar/UrlbarInput.sys.mjs
+++ b/browser/components/urlbar/UrlbarInput.sys.mjs
@@ -68,6 +68,13 @@ XPCOMUtils.defineLazyPreferenceGetter(
@@ -58,7 +58,7 @@ index 4b69136aa31bfef3a1d3b57ad0c75fe07fa26be0..a469d122622fcf361eea8faa4a8d3a13
if (!this.#providesSearchMode(result)) {
- this.view.close({ elementPicked: true });
+ if (this._zenHandleUrlbarClose) {
-+ this._zenHandleUrlbarClose(true);
++ this._zenHandleUrlbarClose(true, true);
+ } else {
+ this.view.close({ elementPicked: true });
+ }
@@ -108,6 +108,15 @@ index 4b69136aa31bfef3a1d3b57ad0c75fe07fa26be0..a469d122622fcf361eea8faa4a8d3a13
this.removeAttribute("breakout-extend");
this.#updateTextboxPosition();
}
+@@ -2485,7 +2529,7 @@ export class UrlbarInput {
+
+ this.textbox.parentNode.style.setProperty(
+ "--urlbar-container-height",
+- px(getBoundsWithoutFlushing(this.textbox.parentNode).height)
++ px(getBoundsWithoutFlushing(this.textbox.parentNode).height + 8)
+ );
+ this.textbox.style.setProperty(
+ "--urlbar-height",
@@ -2998,7 +3042,7 @@ export class UrlbarInput {
*/
_trimValue(val) {
@@ -158,7 +167,7 @@ index 4b69136aa31bfef3a1d3b57ad0c75fe07fa26be0..a469d122622fcf361eea8faa4a8d3a13
}
_on_click(event) {
-+ if (lazy.ZEN_URLBAR_BEHAVIOR === 'float' && event.target == this.inputField) {
++ if (event.target == this.inputField) {
+ event.zenOriginalTarget = this.textbox;
+ this._on_mousedown(event);
+ }
@@ -183,7 +192,7 @@ index 4b69136aa31bfef3a1d3b57ad0c75fe07fa26be0..a469d122622fcf361eea8faa4a8d3a13
+ switch (event.zenOriginalTarget || event.currentTarget) {
case this.textbox: {
this._mousedownOnUrlbarDescendant = true;
-+ if (event.type != "click" && lazy.ZEN_URLBAR_BEHAVIOR === 'float') {
++ if (event.type != "click") {
+ return true;
+ }
diff --git a/src/browser/themes/shared/urlbar-searchbar-css.patch b/src/browser/themes/shared/urlbar-searchbar-css.patch
index 259fe7eaf..3d2c912e2 100644
--- a/src/browser/themes/shared/urlbar-searchbar-css.patch
+++ b/src/browser/themes/shared/urlbar-searchbar-css.patch
@@ -1,5 +1,5 @@
diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
-index 574f83af7fa49ddcdff6711ca8b1d3bed1a35e0c..c2e8cb8b37438176db07a47e1e975ae1aea42252 100644
+index e237ee9edea85c1d2ef22f988df6b22755e343e6..b06fc06686a7a969e924ad0df662dec937b3c70d 100644
--- a/browser/themes/shared/urlbar-searchbar.css
+++ b/browser/themes/shared/urlbar-searchbar.css
@@ -5,7 +5,7 @@
@@ -7,11 +7,11 @@ index 574f83af7fa49ddcdff6711ca8b1d3bed1a35e0c..c2e8cb8b37438176db07a47e1e975ae1
:root {
- --urlbar-container-padding: 1px;
-+ --urlbar-container-padding: 4px;
++ --urlbar-container-padding: 2px;
--urlbar-margin-inline: 5px;
--urlbar-padding-block: 4px;
}
-@@ -291,7 +291,9 @@
+@@ -292,7 +292,9 @@
}
#urlbar[breakout][breakout-extend] {
diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css
index 8de72d45a..21f954682 100644
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/src/browser/themes/shared/zen-icons/icons.css
@@ -324,7 +324,8 @@
}
/* security */
-.identity-popup-security-connection {
+.identity-popup-security-connection,
+#appMenu-report-broken-site-button {
list-style-image: url('security-broken.svg') !important;
}
diff --git a/src/testing/profiles/mochitest/user-js.patch b/src/testing/profiles/mochitest/user-js.patch
index f3aaea0e8..ad2b941d4 100644
--- a/src/testing/profiles/mochitest/user-js.patch
+++ b/src/testing/profiles/mochitest/user-js.patch
@@ -1,8 +1,8 @@
diff --git a/testing/profiles/mochitest/user.js b/testing/profiles/mochitest/user.js
-index a4068ac3f61161d014c49d54ae7a3bf886868f1b..b9861cfaae19a4a71b75ccc73095dc602df22b12 100644
+index a4068ac3f61161d014c49d54ae7a3bf886868f1b..6af5907abb46b6d3b871c159c73eec8373ee8ef5 100644
--- a/testing/profiles/mochitest/user.js
+++ b/testing/profiles/mochitest/user.js
-@@ -41,3 +41,9 @@ user_pref("places.history.floodingPrevention.enabled", false);
+@@ -41,3 +41,10 @@ user_pref("places.history.floodingPrevention.enabled", false);
// permission, and we can open it and wait for the user to give permission, then
// don't do that.
user_pref("geo.prompt.open_system_prefs", false);
@@ -12,3 +12,4 @@ index a4068ac3f61161d014c49d54ae7a3bf886868f1b..b9861cfaae19a4a71b75ccc73095dc60
+user_pref("zen.watermark.enabled", false);
+user_pref("zen.urlbar.replace-newtab", false);
+user_pref("zen.testing.enabled", true);
++user_pref("dom.security.https_only_mode", false); // Dont ask why
diff --git a/src/testing/profiles/profileserver/user-js.patch b/src/testing/profiles/profileserver/user-js.patch
index 6b48c861e..ccfcc06ae 100644
--- a/src/testing/profiles/profileserver/user-js.patch
+++ b/src/testing/profiles/profileserver/user-js.patch
@@ -1,8 +1,8 @@
diff --git a/testing/profiles/profileserver/user.js b/testing/profiles/profileserver/user.js
-index 19ff7d474f6d22d2d386764e2e6942ce6a324470..a68a1f692e050c2a2a7e5e1390dec9556e71d7ed 100644
+index 19ff7d474f6d22d2d386764e2e6942ce6a324470..b8a915b921e624c416d2ec379a2b54aedfcf9c36 100644
--- a/testing/profiles/profileserver/user.js
+++ b/testing/profiles/profileserver/user.js
-@@ -8,3 +8,11 @@
+@@ -8,3 +8,12 @@
user_pref("dom.timeout.enable_budget_timer_throttling", false);
// Turn off update
user_pref("app.update.disabledForTesting", true);
@@ -14,3 +14,4 @@ index 19ff7d474f6d22d2d386764e2e6942ce6a324470..a68a1f692e050c2a2a7e5e1390dec955
+user_pref("zen.watermark.enabled", false);
+user_pref("zen.urlbar.replace-newtab", false);
+user_pref("zen.testing.enabled", true);
++user_pref("dom.security.https_only_mode", false); // Dont ask why
diff --git a/src/toolkit/modules/ShortcutUtils-sys-mjs.patch b/src/toolkit/modules/ShortcutUtils-sys-mjs.patch
index fe61b602a..11dd0b994 100644
--- a/src/toolkit/modules/ShortcutUtils-sys-mjs.patch
+++ b/src/toolkit/modules/ShortcutUtils-sys-mjs.patch
@@ -1,8 +1,16 @@
diff --git a/toolkit/modules/ShortcutUtils.sys.mjs b/toolkit/modules/ShortcutUtils.sys.mjs
-index 360a7dbeeae3899af01945e35d5fe3aa0cb3c562..895d39fe5887ffae9cdbce9576df8b00d4cc8442 100644
+index 360a7dbeeae3899af01945e35d5fe3aa0cb3c562..354c0c9e65e443682a2b12113bc618af9e07910f 100644
--- a/toolkit/modules/ShortcutUtils.sys.mjs
+++ b/toolkit/modules/ShortcutUtils.sys.mjs
-@@ -382,12 +382,12 @@ export var ShortcutUtils = {
+@@ -140,6 +140,7 @@ export var ShortcutUtils = {
+ key = keyCode.replace(/^VK_/, "");
+ }
+ } else {
++ if (!keyAttribute) return "";
+ key = keyAttribute.toUpperCase();
+ }
+
+@@ -382,12 +383,12 @@ export var ShortcutUtils = {
return ShortcutUtils.MOVE_TAB_FORWARD;
}
break;
diff --git a/src/zen/common/ZenCommonUtils.mjs b/src/zen/common/ZenCommonUtils.mjs
index 83a75a1c8..054a22196 100644
--- a/src/zen/common/ZenCommonUtils.mjs
+++ b/src/zen/common/ZenCommonUtils.mjs
@@ -36,6 +36,7 @@ class ZenMultiWindowFeature {
}
for (const browser of ZenMultiWindowFeature.browsers) {
try {
+ if (browser.closed) continue;
await callback(browser);
} catch (e) {
console.error(e);
diff --git a/src/zen/common/ZenCustomizableUI.sys.mjs b/src/zen/common/ZenCustomizableUI.sys.mjs
index db25a7a39..7c4520cfa 100644
--- a/src/zen/common/ZenCustomizableUI.sys.mjs
+++ b/src/zen/common/ZenCustomizableUI.sys.mjs
@@ -77,7 +77,7 @@ export var ZenCustomizableUI = new (class {
});
// remove all styles except for the width, since we are xulstoring the complet style list
- const width = toolbox.style.width || '180px';
+ const width = toolbox.style.width || '228px';
toolbox.removeAttribute('style');
toolbox.style.width = width;
diff --git a/src/zen/common/ZenUIManager.mjs b/src/zen/common/ZenUIManager.mjs
index 0afb0ca06..4d3c8b0fd 100644
--- a/src/zen/common/ZenUIManager.mjs
+++ b/src/zen/common/ZenUIManager.mjs
@@ -323,7 +323,7 @@ var gZenUIManager = {
this._lastSearch = '';
},
- handleUrlbarClose(onSwitch) {
+ handleUrlbarClose(onSwitch = false, onElementPicked = false) {
// Validate browser state first
if (!this._validateBrowserState()) {
console.warn('Browser state invalid for URL bar close operation');
@@ -350,27 +350,29 @@ var gZenUIManager = {
}
// Handle search data
- if (onSwitch) {
- this.clearUrlbarData();
- } else {
- this._lastSearch = gURLBar._untrimmedValue || '';
+ if (!onElementPicked) {
+ if (onSwitch) {
+ this.clearUrlbarData();
+ } else {
+ this._lastSearch = gURLBar._untrimmedValue || '';
- if (this._clearTimeout) {
- clearTimeout(this._clearTimeout);
+ if (this._clearTimeout) {
+ clearTimeout(this._clearTimeout);
+ }
+
+ this._clearTimeout = setTimeout(() => {
+ this.clearUrlbarData();
+ }, this.urlbarWaitToClear);
}
- this._clearTimeout = setTimeout(() => {
- this.clearUrlbarData();
- }, this.urlbarWaitToClear);
- }
+ // Safely restore URL bar state with proper validation
+ if (this._prevUrlbarLabel) {
+ gURLBar.setURI(this._prevUrlbarLabel, onSwitch, false, false, !onSwitch);
+ }
- // Safely restore URL bar state with proper validation
- if (this._prevUrlbarLabel) {
- gURLBar.setURI(this._prevUrlbarLabel, onSwitch, false, false, !onSwitch);
+ gURLBar.handleRevert();
}
- gURLBar.handleRevert();
-
if (gURLBar.focused) {
gURLBar.view.close({ elementPicked: onSwitch });
gURLBar.updateTextOverflow();
diff --git a/src/zen/common/styles/zen-panel-ui.css b/src/zen/common/styles/zen-panel-ui.css
index dcb790190..bcefa1ea9 100644
--- a/src/zen/common/styles/zen-panel-ui.css
+++ b/src/zen/common/styles/zen-panel-ui.css
@@ -20,20 +20,12 @@ panel[type='arrow'][animate='open'] {
}
}
}
- @media (-moz-platform: windows) and (not (-moz-windows-mica-popups)) {
+ @media (-moz-platform: linux) or ((-moz-platform: windows) and (not (-moz-windows-mica-popups))) {
/* Mica popups have a weird background while the animation is running */
&::part(content) {
animation: zen-jello-animation 0.35s ease;
}
}
-
- @media (-moz-platform: linux) {
- /* Check https://github.com/zen-browser/desktop/issues/7633 as in
- * to why we dont animate addons */
- &:not(#customizationui-widget-panel)::part(content) {
- animation: zen-jello-animation 0.35s ease;
- }
- }
}
panel[type='arrow'][animate]:not([animate='open']) {
diff --git a/src/zen/common/styles/zen-urlbar.css b/src/zen/common/styles/zen-urlbar.css
index 7413868a6..d690f68cb 100644
--- a/src/zen/common/styles/zen-urlbar.css
+++ b/src/zen/common/styles/zen-urlbar.css
@@ -9,19 +9,30 @@
padding-block: 0 !important;
}
+:root[zen-single-toolbar='true'] {
+ --urlbar-container-padding: 4px;
+ & #urlbar:not([breakout-extend='true']) {
+ padding: 1px;
+ --toolbarbutton-border-radius: 6px;
+ }
+}
+
#urlbar {
- --toolbarbutton-border-radius: 8px;
--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);
- padding: 1px;
+ border-radius: calc(var(--toolbarbutton-border-radius) - 2px);
+ --urlbarView-results-padding: 10px !important;
:root:not([zen-single-toolbar='true']) &[zen-floating-urlbar='true'] {
--urlbar-container-padding: 2px !important;
}
}
+:root:not([zen-single-toolbar='true']) #urlbar:not([zen-floating-urlbar='true']) {
+ --urlbarView-results-padding: 6px !important;
+}
+
.urlbar-input::placeholder {
text-overflow: ellipsis;
}
@@ -84,8 +95,11 @@
position: relative;
}
-#urlbar:not([breakout-extend='true']) #identity-box {
+:root[zen-single-toolbar='true'] #urlbar:not([breakout-extend='true']) #identity-box {
margin-inline-end: 0 !important;
+ &.chromeUI:not([pageproxystate='invalid']) #identity-icon-box {
+ border-radius: 10px !important;
+ }
}
.urlbar-page-action,
@@ -177,7 +191,7 @@
transform: none !important;
display: flex;
#urlbar:not(:hover) & {
- transition: 0;
+ transition: none;
}
}
@@ -325,11 +339,6 @@ button.popup-notification-dropmarker {
border-radius: var(--urlbar-icon-border-radius) !important;
}
-/* Extensions or similar */
-#urlbar:not([breakout-extend='true']) #identity-box.chromeUI:not([pageproxystate='invalid']) #identity-icon-box {
- border-radius: 10px !important;
-}
-
/* Notification Stack */
.notificationbox-stack {
@@ -407,7 +416,7 @@ button.popup-notification-dropmarker {
#urlbar[open] {
z-index: 2;
- --urlbar-margin-inline: 5px !important;
+ --urlbar-margin-inline: 5px;
& #identity-box {
margin-right: var(--urlbar-margin-inline);
@@ -538,4 +547,8 @@ button.popup-notification-dropmarker {
color: color-mix(in srgb, var(--zen-colors-primary) 30%, lightgray) !important;
}
}
+
+ &[selected] {
+ background-color: color-mix(in srgb, var(--zen-primary-color) 50%, transparent 50%) !important;
+ }
}
diff --git a/src/zen/images/favicons/calendar.ico b/src/zen/images/favicons/calendar.ico
new file mode 100644
index 000000000..7b1720e2c
Binary files /dev/null and b/src/zen/images/favicons/calendar.ico differ
diff --git a/src/zen/images/favicons/discord.ico b/src/zen/images/favicons/discord.ico
new file mode 100644
index 000000000..deb85436d
Binary files /dev/null and b/src/zen/images/favicons/discord.ico differ
diff --git a/src/zen/images/favicons/figma.ico b/src/zen/images/favicons/figma.ico
new file mode 100644
index 000000000..108a33de2
Binary files /dev/null and b/src/zen/images/favicons/figma.ico differ
diff --git a/src/zen/images/favicons/github.ico b/src/zen/images/favicons/github.ico
new file mode 100644
index 000000000..497be7368
Binary files /dev/null and b/src/zen/images/favicons/github.ico differ
diff --git a/src/zen/images/favicons/notion.ico b/src/zen/images/favicons/notion.ico
new file mode 100644
index 000000000..b179b1fcf
Binary files /dev/null and b/src/zen/images/favicons/notion.ico differ
diff --git a/src/zen/images/favicons/obsidian.ico b/src/zen/images/favicons/obsidian.ico
new file mode 100644
index 000000000..8aad7e461
Binary files /dev/null and b/src/zen/images/favicons/obsidian.ico differ
diff --git a/src/zen/images/favicons/reddit.ico b/src/zen/images/favicons/reddit.ico
new file mode 100644
index 000000000..7b1a4b433
Binary files /dev/null and b/src/zen/images/favicons/reddit.ico differ
diff --git a/src/zen/images/favicons/slack.ico b/src/zen/images/favicons/slack.ico
new file mode 100644
index 000000000..3279160cf
Binary files /dev/null and b/src/zen/images/favicons/slack.ico differ
diff --git a/src/zen/images/favicons/trello.ico b/src/zen/images/favicons/trello.ico
new file mode 100644
index 000000000..c8bb9d9be
Binary files /dev/null and b/src/zen/images/favicons/trello.ico differ
diff --git a/src/zen/images/favicons/x.ico b/src/zen/images/favicons/x.ico
new file mode 100644
index 000000000..67f374015
Binary files /dev/null and b/src/zen/images/favicons/x.ico differ
diff --git a/src/zen/tabs/ZenPinnedTabManager.mjs b/src/zen/tabs/ZenPinnedTabManager.mjs
index f68fa1174..114835927 100644
--- a/src/zen/tabs/ZenPinnedTabManager.mjs
+++ b/src/zen/tabs/ZenPinnedTabManager.mjs
@@ -83,8 +83,23 @@
onTabIconChanged(tab, url = null) {
const iconUrl = url ?? tab.iconImage.src;
- if (tab.hasAttribute('zen-essential')) {
- tab.querySelector('.tab-background').style.setProperty('--zen-tab-icon', `url(${iconUrl})`);
+ if (!iconUrl) {
+ try {
+ setTimeout(() => {
+ PlacesUtils.favicons.getFaviconURLForPage(
+ tab.linkedBrowser.currentURI,
+ (url) => {
+ if (url) gBrowser.setIcon(tab, url.spec);
+ },
+
+ 0
+ );
+ });
+ } catch {}
+ } else {
+ if (tab.hasAttribute('zen-essential')) {
+ tab.querySelector('.tab-background').style.setProperty('--zen-tab-icon', `url(${iconUrl})`);
+ }
}
// TODO: work on this
//if (tab.hasAttribute('zen-pinned-changed') || !this._pinsCache) {
@@ -570,9 +585,9 @@
const state = JSON.parse(tabState);
const foundEntryIndex = state.entries?.findIndex((entry) => entry.url === pin.url);
- if (!foundEntryIndex || foundEntryIndex === -1) {
+ if (foundEntryIndex === -1) {
state.entries = [
- {
+ [state.entries[0]] ?? {
url: pin.url,
title: pin.title,
triggeringPrincipal_base64: lazy.E10SUtils.SERIALIZED_SYSTEMPRINCIPAL,
diff --git a/src/zen/tabs/zen-tabs.css b/src/zen/tabs/zen-tabs.css
index 5ddb9c656..e8f15ccd7 100644
--- a/src/zen/tabs/zen-tabs.css
+++ b/src/zen/tabs/zen-tabs.css
@@ -16,3 +16,100 @@
display: none !important;
}
}
+
+/* ==========================================================================
+ Single Toolbar Mode - Top Bar Handling (Includes External CSS)
+ ========================================================================== */
+:root[zen-single-toolbar='true']:not([customizing]) {
+ #zen-appcontent-navbar-container {
+ display: flex;
+ -moz-window-dragging: drag; /* Allow dragging the window via this bar */
+ min-height: var(--zen-element-separation);
+ height: var(--zen-element-separation);
+
+ /* Ensure Personal Toolbar takes available width */
+ & #PersonalToolbar {
+ width: -moz-available;
+ }
+
+ /* Include styles for the top bar under certain conditions:
+ * - Bookmarks toolbar is visible OR
+ * - The container is explicitly marked to hide controls (e.g., on Linux with reversed controls)
+ */
+ &:has(#PersonalToolbar[collapsed='false']) {
+%include zen-tabs/vertical-tabs-topbar.inc.css
+ }
+ &[should-hide='true'] {
+%include zen-tabs/vertical-tabs-topbar.inc.css
+ }
+
+ /* Hide the top bar completely in fullscreen mode */
+ :root[inDOMFullscreen='true'] & {
+ max-height: 0 !important;
+ min-height: unset !important;
+ opacity: 0 !important;
+ pointer-events: none !important;
+ }
+ }
+}
+
+
+/* ==========================================================================
+ Very Special Occasions - Complex Layout Fixes
+ ========================================================================== */
+
+/* Exclude these complex fixes if in compact mode */
+:root:not([zen-compact-mode='true']) {
+
+ /* --- Fix: Right Sidebar + Collapsed + Standard Window Buttons --- */
+ &[zen-right-side='true']:not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']) {
+ /* Push toolbox down below the top toolbar */
+ & #navigator-toolbox {
+ margin-top: var(--zen-toolbar-height) !important;
+ }
+ /* Pull window buttons container leftwards over the collapsed sidebar */
+ & .titlebar-buttonbox-container {
+ margin-right: calc(-1 * var(--zen-toolbox-max-width)) !important;
+ }
+ /* Allow overflow for the button box */
+ & #zen-appcontent-wrapper {
+ overflow-x: visible;
+ }
+ /* Reset padding for top buttons */
+ & #zen-sidebar-top-buttons-customization-target {
+ padding-top: 0;
+ }
+ /* Add padding to the left of the nav container */
+ & #zen-appcontent-navbar-container {
+ padding-left: var(--zen-element-separation);
+ }
+ /* Include common fixes for this top-button scenario */
+%include zen-tabs/vertical-tabs-topbuttons-fix.css
+ }
+
+ /* --- Fix: Left Sidebar + Collapsed + Reversed Window Buttons --- */
+ &:not([zen-right-side='true']):not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] {
+ /* Push toolbox down below the top toolbar */
+ & #navigator-toolbox {
+ margin-top: var(--zen-toolbar-height) !important;
+ }
+ /* Pull window buttons container rightwards over the collapsed sidebar */
+ & .titlebar-buttonbox-container {
+ margin-left: calc(-1 * var(--zen-toolbox-max-width) + var(--zen-toolbox-padding) / 2) !important;
+ }
+ /* Allow overflow for the button box */
+ & #zen-appcontent-wrapper {
+ overflow-x: visible;
+ }
+ /* Reset padding for top buttons */
+ & #zen-sidebar-top-buttons-customization-target {
+ padding-top: 0;
+ }
+ /* Add padding to the right of the nav container */
+ & #zen-appcontent-navbar-container {
+ padding-right: var(--zen-element-separation);
+ }
+ /* Include common fixes for this top-button scenario */
+%include zen-tabs/vertical-tabs-topbuttons-fix.css
+ }
+}
\ No newline at end of file
diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css
index 5e1edd0e1..c0217d85f 100644
--- a/src/zen/tabs/zen-tabs/vertical-tabs.css
+++ b/src/zen/tabs/zen-tabs/vertical-tabs.css
@@ -4,306 +4,342 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
+/* ==========================================================================
+ Initial Setup & Layout Changes for Vertical Tabs
+ ========================================================================== */
+
+/* Ensure tabs, toolbar, and titlebar stack vertically */
#tabbrowser-tabs,
#TabsToolbar,
#titlebar,
#TabsToolbar-customization-target {
flex-direction: column;
- height: 100%;
+ height: 100%; /* Make sure they take up full height */
}
+/* ==========================================================================
+ Single Toolbar Mode Specific Styles (`zen-single-toolbar='true'`)
+ ========================================================================== */
:root[zen-single-toolbar='true'] {
+ /* Define and apply a smaller toolbar height for single toolbar mode */
& #zen-appcontent-navbar-container,
& #zen-sidebar-top-buttons {
--zen-toolbar-height: 32px;
height: var(--zen-toolbar-height);
}
+ /* Specific styling for macOS when the three-dot menu is hidden */
@media (-moz-platform: macos) and (not -moz-pref('zen.view.mac.show-three-dot-menu')) {
+ /* Hide the PanelUI (hamburger) button when not customizing or open */
&:not([customizing]) #PanelUI-button:not([open]):not([panelopen]) {
- position: absolute;
+ position: absolute; /* Remove from layout flow */
opacity: 0;
- pointer-events: none;
+ pointer-events: none; /* Make it unclickable */
}
}
- & #zen-sidebar-top-buttons .toolbarbutton-1 {
- & > .toolbarbutton-icon {
- padding: 4px;
- }
+ /* Adjust padding for top sidebar buttons */
+ & #zen-sidebar-top-buttons .toolbarbutton-1 > .toolbarbutton-icon {
+ padding: 4px;
}
+ /* Make the separator take full width */
& #zen-sidebar-top-buttons-separator {
width: 100%;
}
}
+/* ==========================================================================
+ Vertical Tabs Mode Specific Styles (`zen.tabs.vertical` pref)
+ ========================================================================== */
@media -moz-pref('zen.tabs.vertical') {
:root:not([zen-window-buttons-reversed='true']) {
+ /* Align window controls to the right by default */
& .titlebar-buttonbox-container {
margin-left: auto;
width: fit-content;
}
+ /* Specific adjustments for window controls when sidebar is on the right */
&:root[zen-right-side='true'] #zen-sidebar-top-buttons .titlebar-buttonbox-container {
- /* Must have the #zen-sidebar-top-buttons so we target it only when it's on the sidebar */
- margin-right: calc(-1 * var(--zen-toolbox-padding));
- margin-top: -10px /*Make sure this stays synced with the top buttons' margin!*/;
- height: calc(4px + var(--zen-toolbar-height)) !important;
+ /* Selector ensures this only applies when buttons are in the sidebar */
+ margin-right: calc(-1 * var(--zen-toolbox-padding)); /* Pull slightly outside */
+ margin-top: -10px /* Align vertically with top buttons */;
+ height: calc(4px + var(--zen-toolbar-height)) !important; /* Adjust height */
& .titlebar-button {
- align-items: end;
+ align-items: end; /* Align button content to the bottom */
}
}
}
+ /* Ensure arrow scrollbox takes minimum necessary height */
#tabbrowser-arrowscrollbox {
min-height: fit-content !important;
}
}
+/* Alignreversed window controls to the left */
:root[zen-window-buttons-reversed='true'] .titlebar-buttonbox-container {
margin-right: auto;
width: fit-content;
}
+/* Center items within the TabsToolbar */
#TabsToolbar > * {
justify-content: center;
}
+/* ==========================================================================
+ Toolbox Padding & Variables
+ ========================================================================== */
#browser {
- --zen-min-toolbox-padding: .4rem;
+ /* Define base padding with platform-specific overrides */
+ --zen-min-toolbox-padding: 0.4rem;
@media (-moz-platform: macos) {
- --zen-min-toolbox-padding: .52rem;
+ --zen-min-toolbox-padding: 0.52rem;
}
@media (-moz-platform: linux) {
- --zen-min-toolbox-padding: .35rem;
+ --zen-min-toolbox-padding: 0.35rem;
}
+ /* Actual padding used, ensuring it's at least min padding or based on element separation */
--zen-toolbox-padding: max(var(--zen-min-toolbox-padding), calc(var(--zen-element-separation) / 1.5));
}
+/* ==========================================================================
+ Single Toolbar Mode - Further Layout Adjustments
+ ========================================================================== */
:root[zen-single-toolbar='true'] {
+ /* Make URL bar container take available width */
#urlbar-container {
width: -moz-available !important;
}
+ /* Center identity icons vertically */
#identity-icon-box,
#identity-permission-box {
margin-top: auto;
margin-bottom: auto;
- padding: 6px !important;
+ padding: 6px !important; /* Add padding */
}
+ /* Adjust height for floating URL bar */
& #urlbar-container[breakout='true']:has([zen-floating-urlbar='true']) {
--urlbar-container-height: 36px !important;
--urlbar-height: 38px !important;
}
& #nav-bar {
+ /* Add bottom margin */
margin-bottom: var(--zen-toolbox-padding);
+ /* Hide flexible spaces */
& toolbarspring {
display: none;
}
}
+ /* Add vertical margins to the top sidebar buttons area */
& #zen-sidebar-top-buttons {
margin: var(--zen-toolbox-padding) 0 calc(var(--zen-toolbox-padding) / 2) 0;
}
+ /* Remove padding from PanelUI button */
& #PanelUI-menu-button {
padding: 0 !important;
}
}
+/* ==========================================================================
+ Pinned Tabs Separator
+ ========================================================================== */
.vertical-pinned-tabs-container-separator {
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
- margin: 8px auto;
+ margin: 8px auto; /* Center horizontally */
border: none;
height: 1px;
max-height: 1px;
- width: 98%;
- transition: margin 0.2s ease-in-out, background 0.2s ease-in-out, max-height 0.2s ease-in-out;
+ width: 98%; /* Slightly less than full width */
+ transition:
+ margin 0.2s ease-in-out,
+ background 0.2s ease-in-out,
+ max-height 0.2s ease-in-out;
+ /* Hide separator when specified by parent container attribute */
#vertical-pinned-tabs-container .zen-workspace-tabs-section[hide-separator] & {
max-height: 0;
- margin: 0 auto;
+ margin: 0 auto; /* Collapse margins */
}
}
+/* ==========================================================================
+ Navigator Toolbox (Main Sidebar Container) Base Styles
+ ========================================================================== */
#navigator-toolbox {
+ /* Define theme variables, including platform specifics for native look */
--border-radius-medium: 10px;
--tab-border-radius: 6px;
- --zen-toolbox-min-width: 1px;
+ --zen-toolbox-min-width: 1px; /* Default minimum width (used when collapsed) */
@media (-moz-platform: windows) {
- /* More native look */
--border-radius-medium: 8px;
--tab-border-radius: 6px;
}
@media (-moz-platform: macos) {
- /* More native look */
--border-radius-medium: 12px;
--tab-border-radius: 10px;
}
+ /* Define tab hover background color */
--tab-hover-background-color: color-mix(in srgb, var(--toolbarbutton-hover-background) 50%, transparent 50%);
min-width: var(--zen-toolbox-min-width);
- margin-top: 0 !important; /* Fix full screen mode */
-
- border: none;
- order: 0 !important;
-
- display: flex;
+ margin-top: 0 !important; /* Fix potential issues in full screen mode */
+ border: none; /* Remove default borders */
+ order: 0 !important; /* Default order (can be changed for right-side) */
+ display: flex; /* Use flex layout */
}
+/* Hide default titlebar spacers */
.titlebar-spacer[type='pre-tabs'],
.titlebar-spacer[type='post-tabs'] {
display: none;
}
-:root[zen-single-toolbar='true']:not([customizing]) {
- #zen-appcontent-navbar-container {
- display: flex;
- -moz-window-dragging: drag;
- min-height: var(--zen-element-separation);
- height: var(--zen-element-separation);
-
- & #PersonalToolbar {
- width: -moz-available;
- }
-
- /* We enable this trick IF we follow any of theses conditions:
- * - We are supposed to hide the window controls (e.g. left sidebar, windows like layouts)
- * - This also involves linux's reverse GTK window controls, we'll need to handle that a bit differently
- * - If we are not in any of the above, we can still enable it if the user has bookmarks toolbar enabled
- */
- &:has(#PersonalToolbar[collapsed='false']) {
-%include vertical-tabs-topbar.inc.css
- }
-
- &[should-hide='true'] {
-%include vertical-tabs-topbar.inc.css
- }
-
- :root[inDOMFullscreen='true'] & {
- max-height: 0 !important;
- min-height: unset !important;
- opacity: 0 !important;
- pointer-events: none !important;
- }
- }
-}
-
+/* ==========================================================================
+ Tabs Toolbar Customization Target
+ ========================================================================== */
#TabsToolbar-customization-target {
- position: relative;
+ position: relative; /* For pseudo-element positioning */
max-width: 100%;
- gap: 0;
+ gap: 0; /* Remove default gap */
+
+ /* Add a separator line at the bottom */
&::after {
content: '';
display: block;
height: 1px;
-
margin: 0 auto;
width: 80%;
left: 50%;
transform: translateX(-50%);
position: absolute;
- bottom: calc(-1 * var(--zen-toolbox-padding));
+ bottom: calc(-1 * var(--zen-toolbox-padding)); /* Position below the target */
}
+ /* Remove top borders from direct children */
& > * {
border-top-width: 0 !important;
}
}
+/* Style the new tab button specifically */
#vertical-tabs-newtab-button {
+ /* Transparent background unless active */
&:hover,
&:not(:is(:hover, :active)) .toolbarbutton-icon {
background: transparent !important;
}
}
+/* ==========================================================================
+ Tab Container (#tabbrowser-tabs) Base Styles
+ ========================================================================== */
#tabbrowser-tabs {
margin-inline-start: 0 !important;
padding-inline-start: 0 !important;
- overflow-y: unset !important; /* DO NOT CHANGE THIS: Firefox renders badly workspace changes */
- overflow-x: clip;
- overflow-clip-margin: var(--zen-toolbox-padding);
+ overflow-y: unset !important; /* Critical: Prevents rendering issues on workspace changes */
+ overflow-x: clip; /* Clip horizontal overflow */
+ overflow-clip-margin: var(--zen-toolbox-padding); /* Add margin to clipping area */
@media (-moz-platform: macos) {
- font-size: 1.1rem;
+ font-size: 1.1rem; /* Slightly larger font on macOS */
}
- --tab-inner-inline-margin: 0;
+ --tab-inner-inline-margin: 0; /* Reset default inner margin */
position: relative;
- border-bottom: 0px solid transparent !important;
+ border-bottom: 0px solid transparent !important; /* Remove default bottom border */
+ /* Define tab variables */
--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;
+ grid-gap: 0 !important; /* Reset grid gap */
+ /* Hide default overflow indicators and the provided separator */
&[overflow]::after,
- #vertical-tabs-newtab-button,
- #vertical-pinned-tabs-container-separator { /* notice #vertical-pinned-tabs-container-separator is an ID */
- /* Hide separator they give us, eww */
+ #vertical-tabs-newtab-button, /* Assuming this is a button *within* #tabbrowser-tabs, but it looks like it's outside */
+ #vertical-pinned-tabs-container-separator {
+ /* Selector targets the specific separator ID */
display: none !important;
}
+ /* ========================================================================
+ Individual Tab Styles (.tabbrowser-tab within #tabbrowser-tabs)
+ ======================================================================== */
& .tabbrowser-tab {
+ /* Add smooth scaling transition */
&,
& .tab-content > image {
transition: scale 0.07s ease;
}
+ /* Hide specific empty tabs (likely placeholders) */
&[zen-empty-tab] {
display: none;
}
+ /* Scale down tab slightly on active press (but not when dragging or clicking images) */
#tabbrowser-tabs:not([movingtab]) &:active:not(:has(.tab-content > image:active)) {
- scale: var(--zen-active-tab-scale);
+ scale: var(--zen-active-tab-scale); /* Requires --zen-active-tab-scale to be defined elsewhere */
}
+ /* Scale down icon/image specifically on active press */
#tabbrowser-tabs:not([movingtab]) & .tab-content > image:active {
scale: 0.92;
}
+ /* Fallback icon for broken/missing favicons */
& .tab-icon-image {
&:not([src]),
&:-moz-broken {
+ /* Use an empty SVG as placeholder */
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3C/svg%3E") !important;
+ /* Semi-transparent background based on primary color */
background: color-mix(in srgb, var(--zen-primary-color) 30%, transparent 70%);
}
}
- max-width: unset;
- padding: 0 !important;
-
- position: relative;
+ max-width: unset; /* Allow tabs to take full width */
+ padding: 0 !important; /* Remove default padding */
+ position: relative; /* For absolute positioning of children */
+ /* Tab Background Styles */
& .tab-background {
- overflow: hidden;
+ overflow: hidden; /* Hide overflowing content/pseudo-elements */
+ /* Context line (usually for container tabs) styling */
& .tab-context-line {
- margin: 0 0px !important;
- width: 3px !important;
+ margin: 0 0px !important; /* Reset margin */
+ width: 3px !important; /* Set specific width */
}
}
+ /* Dim pending tabs if preference is enabled */
@media -moz-pref('zen.tabs.dim-pending') {
&[pending='true'] .tab-icon-image {
opacity: 0.5;
}
}
- /* We have a tab inside a tab, this means, it's a glance tab */
+ /* --- Glance Tab Styles (Nested .tabbrowser-tab) --- */
+ /* Styles for a tab nested within another tab (representing a "glance"?) */
& .tabbrowser-tab {
- pointer-events: none;
- margin: 0 0 0 4px;
+ pointer-events: none; /* Disable interaction */
+ margin: 0 0 0 4px; /* Add left margin */
+ /* Reset/override variables for smaller size */
--toolbarbutton-inner-padding: 0;
--border-radius-medium: 8px;
width: 24px;
@@ -311,22 +347,25 @@
--tab-min-height: 24px;
--tab-min-width: 24px;
+ /* Style glance tab background */
& .tab-background {
background: var(--zen-toolbar-element-bg) !important;
margin-block: 0 !important;
margin-inline: 0 !important;
box-shadow: none !important;
}
+ /* Adjust padding for content */
& .tab-content {
padding: 0 5px;
}
- & label { display: none !important; }
+ /* Hide label and buttons */
+ & label,
& .tab-close-button,
& .tab-reset-button,
& .tab-reset-pin-button {
display: none !important;
}
-
+ /* Style glance tab icon */
& .tab-icon-image {
--toolbarbutton-inner-padding: 0 !important;
width: 14px;
@@ -334,18 +373,21 @@
}
}
- /* On essentials, glance tabs are floating */
+ /* --- Essentials Glance Tab Specifics (Floating) --- */
+ /* Additional styles for glance tabs in "essential" mode */
&[zen-essential='true'] .tabbrowser-tab {
- position: absolute;
+ position: absolute; /* Position absolutely relative to parent tab */
top: 0px;
right: 0px;
+ /* Define variables for size */
--tab-collapsed-width: 34px;
--tab-min-height: 16px;
width: var(--tab-collapsed-width) !important;
- z-index: 1;
- pointer-events: none;
+ z-index: 1; /* Ensure it's above parent tab content */
+ pointer-events: none; /* Still non-interactive */
+
+ /* Specific background and border for floating effect */
& .tab-background {
- /* Solid colors because we don't want to show the background */
background: light-dark(rgb(249, 249, 249), rgb(63, 63, 63)) !important;
border: 2px solid light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
}
@@ -353,110 +395,144 @@
}
}
+/* ==========================================================================
+ Sidebar Bottom Buttons Area
+ ========================================================================== */
#zen-sidebar-bottom-buttons {
background: transparent;
- gap: 5px;
- align-items: center;
-
- padding-top: var(--zen-element-separation);
- --toolbarbutton-inner-padding: 5px;
+ gap: 5px; /* Spacing between buttons */
+ align-items: center; /* Center vertically */
+ padding-top: var(--zen-element-separation); /* Add padding above */
+ --toolbarbutton-inner-padding: 5px; /* Define inner padding for buttons */
+ /* Remove padding from direct children (except workspaces button) */
& > toolbarbutton:not(#zen-workspaces-button) {
padding: 0 !important;
}
}
+/* Hide the default new tab button container */
#newtab-button-container {
display: none !important;
}
+/* ==========================================================================
+ Tab Arrow Scrollbox Adjustments
+ ========================================================================== */
#tabbrowser-arrowscrollbox {
+ /* Remove gap within the scrollbox part */
&::part(scrollbox) {
gap: 0px !important;
}
+ /* Hide default overflow indicators */
&::part(overflow-start-indicator),
&::part(overflow-end-indicator) {
display: none !important;
}
}
+/* ==========================================================================
+ Custom Tab Wrapper & Container Styles
+ ========================================================================== */
+
+/* Wrapper for vertical tabs, enabling scrolling */
#zen-tabs-wrapper {
min-height: fit-content;
- overflow-y: auto;
- height: 100%;
- scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent;
+ overflow-y: auto; /* Allow vertical scrolling */
+ height: 100%; /* Take full available height */
+ scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent; /* Custom scrollbar */
- /* Only do this hack if we have workspaces enabled */
+ /* Negative margin hack for workspace transitions (only if workspaces are enabled) */
:root[zen-workspace-id] & {
margin-left: calc(-1 * var(--zen-toolbox-padding));
width: calc(100% + var(--zen-toolbox-padding) * 2);
}
}
+/* Container for browser tabs within the sidebar */
#zen-browser-tabs-container {
- overflow-x: clip !important; /* might break custom css with new design, so let's force it */
- position: relative;
+ overflow-x: clip !important; /* Force horizontal clipping */
+ position: relative; /* Positioning context */
}
+/* ==========================================================================
+ Pinned Tabs Container Specific Styles
+ ========================================================================== */
#vertical-pinned-tabs-container {
- padding-inline-end: 0 !important;
- display: flex !important;
- flex-direction: column;
+ padding-inline-end: 0 !important; /* Remove end padding */
+ display: flex !important; /* Use flex layout */
+ flex-direction: column; /* Stack pinned tabs vertically */
min-height: fit-content !important;
- overflow-x: clip;
- overflow-y: visible;
- max-height: unset !important;
+ overflow-x: clip; /* Clip horizontal overflow */
+ overflow-y: visible; /* Allow vertical overflow (for menus etc.) */
+ max-height: unset !important; /* Allow it to grow */
+ /* Make non-selected, non-hovered pinned tab backgrounds transparent */
& .tabbrowser-tab:not(:hover) .tab-background:not([selected]):not([multiselected]) {
background: transparent;
}
+ /* Center content within pinned tabs */
& .tabbrowser-tab .tab-content {
display: flex;
align-items: center;
justify-content: center;
}
+ /* Ensure glance tabs within pinned container fit their content */
.tabbrowser-tab[zen-glance-tab='true'] {
width: fit-content !important;
}
}
+/* Styling for the label shown when hovering the reset-pin button */
.tab-reset-pin-label {
- pointer-events: none;
- transition: opacity 0.1s ease-in-out, margin 0.1s ease-in-out, max-height 0.1s ease-in-out;
- max-height: 0px;
+ pointer-events: none; /* Non-interactive */
+ transition:
+ opacity 0.1s ease-in-out,
+ margin 0.1s ease-in-out,
+ max-height 0.1s ease-in-out;
+ max-height: 0px; /* Hidden by default */
opacity: 0;
- transform: translateY(-5px);
+ transform: translateY(-5px); /* Slight offset */
font-size: x-small;
margin: 0;
}
-/* Mark: toolbox as expanded */
+/* ==========================================================================
+ Mark: EXPANDED Sidebar Styles (`zen-sidebar-expanded='true'`)
+ ========================================================================== */
#navigator-toolbox[zen-sidebar-expanded='true'] {
+ /* Set width to fit content when expanded */
--zen-toolbox-min-width: fit-content;
- --tab-icon-end-margin: 8.5px;
+ /* Define margin for tab icons */
+ --tab-icon-end-margin: 8.5px; /* Used later? Not directly applied here */
padding: var(--zen-toolbox-padding);
- padding-left: 0;
- padding-top: 0;
+ padding-left: 0; /* Reset left padding (adjusted later based on side) */
+ padding-top: 0; /* Reset top padding */
+ /* Ensure Personal Toolbar has no left padding when expanded */
#PersonalToolbar:not([collapsed='true']) {
padding-left: 0 !important;
}
+ /* Set a minimum width for the titlebar area */
& #titlebar {
min-width: 150px;
}
+ /* Add margin to the new tab button area */
& #tabbrowser-arrowscrollbox-periphery {
margin-inline: var(--tab-block-margin);
}
+ /* Adjust nav-bar padding */
& #nav-bar {
- padding-right: 0;
+ padding-right: 0; /* Reset right padding */
+ /* Specific padding for URL bar input in single toolbar mode */
:root[zen-single-toolbar='true'] & {
& #urlbar:not([breakout-extend='true']):not([pageproxystate='invalid']) .urlbar-input-container {
padding-left: 8px;
@@ -465,155 +541,170 @@
}
}
+ /* Remove top margin from nav-bar */
& #nav-bar {
margin-top: 0;
}
+ /* Hide workspace indicator icon if it has no specific icon set */
& .zen-current-workspace-indicator-icon[no-icon='true'] {
display: none;
}
+ /* Hide workspace button icon if it has no specific icon set */
& #zen-workspaces-button {
& .zen-workspace-sidebar-icon[no-icon='true'] {
display: none;
}
}
+ /* Style pinned tabs container when it has visible tabs */
& #vertical-pinned-tabs-container:has(tab:not([hidden])) {
position: relative;
+ /* Make pinned tabs take full width */
& .tabbrowser-tab {
width: 100%;
}
}
+ /* Style bottom buttons area when expanded */
& #zen-sidebar-bottom-buttons {
display: flex;
- /* Make sure the icons take most of the space, smartly */
- flex-direction: row;
- justify-content: space-between;
-
+ flex-direction: row; /* Arrange buttons horizontally */
+ justify-content: space-between; /* Distribute space */
width: 100%;
position: relative;
}
+ /* Set min height for tabs in the essentials wrapper */
& #zen-essentials-wrapper {
--tab-min-height: 44px;
}
- /* Mark: Fix separator paddings */
+ /* Adjust padding based on sidebar side */
&[zen-right-side='true'] {
- padding-left: 0;
+ padding-left: 0; /* No padding on the inside edge (left) */
}
-
&:not([zen-right-side='true']) {
- padding-right: 0;
- padding-left: var(--zen-toolbox-padding);
+ padding-right: 0; /* No padding on the inside edge (right) */
+ padding-left: var(--zen-toolbox-padding); /* Add padding on the outside edge (left) */
}
+ /* Style the customization target and its contents when expanded */
& #TabsToolbar-customization-target {
+ /* Make separator full width */
&::after {
width: 100%;
bottom: calc(-0.5 * var(--zen-toolbox-padding));
}
+ /* Style toolbar items (buttons, etc.) */
& > :is(toolbaritem, toolbarbutton):not(#search-container):not(#zen-workspaces-button),
& #tabbrowser-arrowscrollbox-periphery > toolbarbutton {
- width: 100% !important;
- border-radius: var(--border-radius-medium) !important;
-
- padding-left: var(--toolbarbutton-inner-padding) !important;
+ /* Target new tab button too */
+ width: 100% !important; /* Full width */
+ border-radius: var(--border-radius-medium) !important; /* Apply border radius */
+ padding-left: var(--toolbarbutton-inner-padding) !important; /* Apply padding */
padding-right: var(--toolbarbutton-inner-padding) !important;
+ /* Ensure label takes full width */
& label {
display: flex;
width: 100%;
}
+ /* Standardize icon size */
& image {
height: 16px;
width: 16px;
padding: 0 !important;
}
+ /* Style for active/checked state */
&:is([open], [checked]) {
background: var(--toolbarbutton-active-background) !important;
-
& image,
label {
background: transparent !important;
- }
+ } /* Ensure children are transparent */
}
+ /* Style for hover state */
&:hover {
background: var(--toolbarbutton-hover-background);
-
& image,
label {
background: transparent !important;
- }
+ } /* Ensure children are transparent */
}
}
}
+ /* Style tabs container when expanded */
& #tabbrowser-tabs {
- --tab-inline-padding: 8px;
- & .tabbrowser-tab {
+ --tab-inline-padding: 8px; /* Define padding for tab content */
+ & .tabbrowser-tab {
+ /* Show tab label */
& .tab-label-container {
display: flex;
}
+ /* Adjust tab background margin and width */
& .tab-background {
margin-inline: var(--tab-block-margin);
- width: -moz-available;
+ width: -moz-available; /* Take available width */
}
+ /* --- Pinned Tab Icon Repositioning & Reset Button --- */
+ /* Reposition icon stack absolutely when tab is pinned (and not essential) */
&[zen-pinned-changed='true']:not([zen-essential]) > .tab-stack > .tab-content > .tab-icon-stack {
position: absolute;
top: 50%;
transform: translateY(-50%);
- /* 16px divided by 2, it's the icon size */
- left: 8px;
+ left: 8px; /* Position near the start */
margin: 0 !important;
- pointer-events: none;
+ pointer-events: none; /* Icon stack itself is not interactive */
+ /* Allow interaction with elements inside the stack (e.g., overlays) */
& > *:not(.tab-icon-image) {
pointer-events: all;
}
}
+ /* Hide the reset-pin image by default */
&[zen-pinned-changed='true']:not([zen-essential]) .tab-reset-pin-button image {
opacity: 0;
}
+ /* Show reset-pin interactions on hover */
&[zen-pinned-changed='true']:not([zen-essential]) .tab-reset-pin-button:hover {
+ /* Show the helper label */
& ~ .tab-label-container .tab-reset-pin-label {
max-height: 10px;
opacity: 0.6;
}
-
- & ~ .tab-label-container .tab-reset-pin-label {
- max-height: 10px;
- opacity: 0.6;
- }
-
-
+ /* Fade out the original tab icon */
& ~ .tab-icon-stack .tab-icon-image {
opacity: 0;
}
-
+ /* Show the reset-pin button image */
& image {
opacity: 1;
}
}
+ /* --- End Pinned Tab --- */
+ /* Show close button on hover or when selected */
&:is(:hover, [visuallyselected]) .tab-close-button {
display: block;
- --tab-inline-padding: 0; /* Avoid weird padding */
+ /* Reset padding for close button positioning */
+ --tab-inline-padding: 0;
margin-inline-end: 0;
}
+ /* Adjust margins for various tab icon states/overlays */
.tab-throbber,
.tab-icon-pending,
.tab-icon-image,
@@ -626,118 +717,166 @@
}
}
+/* ==========================================================================
+ Mark: COLLAPSED Sidebar Styles (`:not([zen-sidebar-expanded='true'])`)
+ ========================================================================== */
+
+/* Define fixed width and padding for collapsed state */
:root:not([zen-sidebar-expanded='true']) {
--tab-min-width: 36px !important;
--zen-toolbox-padding: 6px !important;
--zen-toolbox-max-width: calc(var(--tab-min-width) + var(--zen-toolbox-padding) * 2);
}
-/* Mark: collapsed sidebar */
#navigator-toolbox:not([zen-sidebar-expanded='true']) {
+ /* Force fixed width */
max-width: var(--zen-toolbox-max-width) !important;
min-width: var(--zen-toolbox-max-width) !important;
- padding-bottom: var(--zen-toolbox-padding);
+ padding-bottom: var(--zen-toolbox-padding); /* Apply bottom padding */
+
+ /* Hide text labels */
& .zen-current-workspace-indicator-name,
& .toolbarbutton-text {
display: none !important;
}
+
+ /* Center and dim workspace indicator */
& .zen-current-workspace-indicator {
padding-left: 0;
padding-right: 0;
display: flex;
align-items: center;
justify-content: center;
- opacity: .4;
- align-items: center;
+ opacity: 0.4;
}
+
+ /* Center items in essentials container */
& .zen-essentials-container {
justify-content: center;
}
+
+ /* Style new tab button when collapsed */
& #vertical-tabs-newtab-button {
padding: 0 !important;
background: transparent !important;
}
+
+ /* Ensure bottom buttons container fits content during customization */
:root[customizing] & #zen-sidebar-bottom-buttons {
min-width: unset !important;
}
+
+ /* Center top buttons container */
& #zen-sidebar-top-buttons {
justify-content: center;
- max-height: unset !important;
+ max-height: unset !important; /* Allow natural height */
height: fit-content !important;
}
+
+ /* Adjust titlebar layout for collapsed state */
& #titlebar {
display: grid;
- grid-template-rows: auto 1fr;
+ grid-template-rows: auto 1fr; /* Allow content below button box */
}
+
+ /* Style top buttons customization target */
& #zen-sidebar-top-buttons-customization-target {
- flex-direction: column;
+ flex-direction: column; /* Stack items vertically */
padding-top: var(--zen-element-separation);
}
+
+ /* Style bottom buttons area when collapsed */
& #zen-sidebar-bottom-buttons {
display: flex;
- flex-direction: column;
+ flex-direction: column; /* Stack vertically */
padding-top: var(--zen-element-separation);
- align-items: center;
+ align-items: center; /* Center horizontally */
}
+
+ /* Style new tab button area */
& #tabbrowser-arrowscrollbox-periphery {
& > toolbarbutton {
- margin: 0 auto !important;
- padding: 0 !important;
+ margin: 0 auto !important; /* Center the button */
+ padding: 0 !important; /* Remove padding */
}
+ /* Adjust separator */
&::before {
width: 90% !important;
}
}
- & #EssentialsToolbar {
- display: none !important;
- }
+
+ /* Hide optional elements */
+ & #EssentialsToolbar,
& #essentials-accordion-header {
display: none !important;
}
+
+ /* Style pinned tabs container */
& #vertical-pinned-tabs-container:has(tab:not([hidden])) {
position: relative;
+ /* Constrain pinned tab width */
& .tabbrowser-tab {
max-width: var(--tab-min-width);
}
}
+
+ /* Adjust customization target padding and separator */
& #TabsToolbar-customization-target {
padding-bottom: var(--zen-toolbox-padding);
&::after {
- bottom: -1px !important;
+ bottom: -1px !important; /* Position separator correctly */
}
}
+
+ /* Style tabs container when collapsed */
& #tabbrowser-tabs {
- margin-top: -2px;
+ margin-top: -2px; /* Minor visual adjustment */
+
& .tabbrowser-tab {
- margin: 0 auto;
+ margin: 0 auto; /* Center tabs horizontally */
+
+ /* Center background */
& .tab-background {
margin-inline: auto !important;
}
+
+ /* Hide reset buttons */
& .tab-reset-button,
& .tab-reset-pin-button {
display: none !important;
}
+
+ /* Center tab content and hide label */
& .tab-content {
display: flex;
align-content: center;
justify-content: center;
- padding: 0 !important;
+ padding: 0 !important; /* Remove padding */
+
& .tab-label-container {
- display: none !important;
+ display: none !important; /* Hide label */
}
+
+ /* Reset icon end margin */
& .tab-icon-image,
& .tab-icon-pending {
margin-inline-end: 0 !important;
}
- /* Hide glances */
+
+ /* Hide nested glance tabs completely */
& .tabbrowser-tab {
display: none !important;
}
}
}
+
+ /* Optionally hide mute button overlay on non-selected tabs when collapsed */
@media -moz-pref('zen.view.sidebar-collapsed.hide-mute-button') {
& .tab-icon-overlay:is([soundplaying], [muted]):not([selected]) {
display: none !important;
+
+ /* Complex selectors to ensure indicators still show correctly in specific density/hover states */
+ /* This part seems overly complex and might need review/simplification if possible */
:is(
:root[uidensity='compact'],
#tabbrowser-tabs[secondarytext-unsupported],
@@ -749,10 +888,12 @@
#tabbrowser-tabs:not([secondarytext-unsupported])
.tabbrowser-tab:not(:hover)
&[indicator-replaces-favicon] {
- opacity: 1 !important;
+ opacity: 1 !important; /* Ensure full opacity */
}
}
}
+
+ /* Reset end margins for all icon types when collapsed */
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
@@ -761,46 +902,59 @@
margin-inline-end: 0 !important;
}
}
+
+ /* Stack workspace button content vertically */
& #zen-workspaces-button {
flex-direction: column;
}
}
+/* Hide splitter when sidebar is collapsed */
:root:not([zen-sidebar-expanded='true']) #zen-sidebar-splitter {
display: none !important;
}
-/* Mark: Separator styling */
+/* ==========================================================================
+ Mark: Sidebar Splitter Styling
+ ========================================================================== */
#zen-sidebar-splitter {
- opacity: 0;
- max-width: var(--zen-toolbox-padding) !important;
+ opacity: 0; /* Hidden by default, maybe shown on hover/drag? */
+ max-width: var(--zen-toolbox-padding) !important; /* Width based on padding */
min-width: var(--zen-toolbox-padding) !important;
height: 100%;
transition: opacity 0.2s ease-in-out;
- background: var(--zen-colors-border);
- appearance: none;
- position: relative !important;
- order: 0;
+ background: var(--zen-colors-border); /* Use theme border color */
+ appearance: none; /* Remove default styling */
+ position: relative !important; /* Ensure positioning context */
+ order: 0; /* Default order */
}
-/* Mark: Move sidebar to the right */
+/* ==========================================================================
+ Mark: Move Sidebar to the Right (`zen-right-side='true'`)
+ ========================================================================== */
:root[zen-right-side='true'] {
+ /* Move the main toolbox (sidebar) to the right */
& #navigator-toolbox {
- order: 10 !important;
+ order: 10 !important; /* High order value */
}
+ /* Move the splitter just before the toolbox */
& #zen-sidebar-splitter {
order: 9 !important;
}
}
-/* Mark: Override the default tab close button */
+/* ==========================================================================
+ Mark: Override Default Tab Close/Reset Button Behavior
+ ========================================================================== */
#tabbrowser-tabs {
& .tabbrowser-tab {
+ /* Hide standard close button on pinned tabs (except pending) */
&[pinned]:not([pending='true']) .tab-close-button {
display: none !important;
}
+ /* Show custom reset (unpin) button on hover/selection for non-essential pinned tabs */
&[pinned]:not([pending='true']):not([zen-essential]) {
&:hover .tab-reset-button,
&[visuallyselected] .tab-reset-button {
@@ -808,70 +962,80 @@
}
}
+ /* Hide the reset-pin button if tab isn't marked as changed */
&:not([zen-pinned-changed='true']) .tab-reset-pin-button {
display: none;
}
+ /* Never show reset buttons on essential tabs */
&[zen-essential] .tab-reset-button,
&[zen-essential] .tab-reset-pin-button {
display: none;
}
+ /* Hide reset button unless pinned and selected/hovered */
&:not([pinned][visuallyselected]) .tab-reset-button {
display: none;
}
+ /* Ensure selected tab background border is transparent */
&[selected] .tab-background {
border-color: transparent;
}
}
}
-.tab-reset-button,
+/* ==========================================================================
+ Custom Reset/Unpin Button Styles
+ ========================================================================== */
+.tab-reset-button, /* Standard unpin button */
.tab-reset-pin-button {
- display: none;
- -moz-context-properties: fill, fill-opacity;
+ /* Button shown when pinning state changes */
+ display: none; /* Hidden by default, shown conditionally above */
+ -moz-context-properties: fill, fill-opacity; /* Inherit fill properties */
border-radius: var(--tab-border-radius);
color: inherit;
fill: currentColor;
- padding: var(--tab-close-button-padding);
- width: 24px;
+ padding: var(--tab-close-button-padding); /* Use standard close button padding */
+ width: 24px; /* Fixed size */
height: 24px;
- outline: var(--toolbarbutton-outline);
+ outline: var(--toolbarbutton-outline); /* Use standard outline */
+ /* Hover/active outline styles */
&:hover {
outline-color: var(--toolbarbutton-hover-outline-color);
}
-
&:hover:active {
outline-color: var(--toolbarbutton-active-outline-color);
}
}
+/* Specific styling for the alternative reset-pin button */
.tab-reset-pin-button {
- display: flex;
- position: relative;
- height: calc(100% - var(--tab-block-margin) * 2);
- margin-left: calc(-1 * var(--tab-inline-padding) + var(--tab-block-margin));
+ display: flex; /* Use flex for alignment */
+ position: relative; /* For pseudo-element positioning */
+ height: calc(100% - var(--tab-block-margin) * 2); /* Adjust height based on margins */
+ margin-left: calc(-1 * var(--tab-inline-padding) + var(--tab-block-margin)); /* Overlap slightly */
margin-right: 8px;
- padding: 0 calc(var(--toolbarbutton-inner-padding) - 2px) 0 calc(var(--toolbarbutton-inner-padding) / 4 + var(--tab-inline-padding) - 2px);
- border-radius: 0;
- border-top-left-radius: var(--border-radius-medium);
- width: unset;
+ padding: 0 calc(var(--toolbarbutton-inner-padding) - 2px) 0
+ calc(var(--toolbarbutton-inner-padding) / 4 + var(--tab-inline-padding) - 2px); /* Custom padding */
+ border-radius: 0; /* Remove general radius */
+ border-top-left-radius: var(--border-radius-medium); /* Apply radius only to left corners */
+ width: unset; /* Auto width */
border-bottom-left-radius: var(--border-radius-medium);
align-items: center;
justify-content: center;
+ /* Style the image inside (uses original tab icon) */
& > image {
- list-style-image: var(--zen-original-tab-icon);
- width: 100%;
- height: 100%;
- pointer-events: none;
- width: 16px;
+ list-style-image: var(--zen-original-tab-icon); /* Expects variable set elsewhere */
+ width: 16px; /* Fixed size */
height: 16px;
- border-radius: 4px;
+ pointer-events: none;
+ border-radius: 4px; /* Slightly rounded */
}
+ /* Add a decorative vertical line */
&::after {
content: '';
display: block;
@@ -882,32 +1046,36 @@
right: 0;
top: 50%;
border-radius: 2px;
- transform: rotate(15deg) translateY(-50%);
+ transform: rotate(15deg) translateY(-50%); /* Tilted line */
}
+ /* Hide the line on hover (reveals icon change) */
&:hover::after {
opacity: 0;
}
}
-.reset-icon,
+/* Remove default appearance for custom buttons */
+.reset-icon, /* Assuming this is used within .tab-reset-button */
.tab-reset-pin-button {
appearance: none;
}
+/* Background color changes on hover/active (for non-forced-colors mode) */
@media not (forced-colors) {
.tab-reset-button:hover,
.tab-reset-pin-button:hover {
- background-color: color-mix(in srgb, currentColor 10%, transparent);
+ background-color: color-mix(in srgb, currentColor 10%, transparent); /* Slight tint */
}
.tab-reset-button:hover:active,
.tab-reset-pin-button:hover:active {
- background-color: color-mix(in srgb, currentColor 20%, transparent);
+ background-color: color-mix(in srgb, currentColor 20%, transparent); /* Darker tint */
}
}
-.tab-reset-button> .button-icon,
+/* Ensure icons within reset buttons have no margin */
+.tab-reset-button > .button-icon,
.tab-reset-button > .button-box > .button-icon,
.tab-reset-button > .toolbarbutton-icon,
.tab-reset-pin-button > .button-icon,
@@ -916,6 +1084,7 @@
margin: 0;
}
+/* Hide text labels within reset buttons */
.tab-reset-button > .button-box > .button-text,
.tab-reset-button > .toolbarbutton-text,
.tab-reset-pin-button > .button-box > .button-text,
@@ -923,165 +1092,192 @@
display: none;
}
-
-/* Customization mode */
-
+/* ==========================================================================
+ Customization Mode Adjustments
+ ========================================================================== */
:root[customizing] #TabsToolbar > *,
:root[customizing] #TabsToolbar-customization-target {
- min-width: unset !important;
+ min-width: unset !important; /* Allow shrinking during customization */
}
-/* Mark: Sidebar top buttons */
+/* ==========================================================================
+ Mark: Sidebar Top Buttons Area Styles
+ ========================================================================== */
#zen-sidebar-top-buttons {
- order: -1;
-
- min-width: unset !important;
+ order: -1; /* Ensure it appears at the top */
+ min-width: unset !important; /* Allow shrinking */
+ /* Adjust inner padding based on sidebar state */
:root[zen-sidebar-expanded='true'] & {
- --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
+ --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important; /* Use theme variable */
}
-
:root[zen-single-toolbar='true'] & {
- --toolbarbutton-inner-padding: calc(var(--zen-toolbar-button-inner-padding) - 2px) !important;
+ --toolbarbutton-inner-padding: calc(
+ var(--zen-toolbar-button-inner-padding) - 2px
+ ) !important; /* Slightly less in single toolbar */
+ /* Reorder buttons in single toolbar mode */
& #PanelUI-button {
- order: -2;
+ order: -2; /* Hamburger first */
}
-
& #unified-extensions-button {
- order: -1;
+ order: -1; /* Extensions next */
}
}
+ /* Style the customization target within the top buttons area */
& #zen-sidebar-top-buttons-customization-target {
- height: 100%;
- align-items: center;
+ height: 100%; /* Full height */
+ align-items: center; /* Center items vertically */
+ /* Adjust start padding based on state and side */
:root:not([zen-sidebar-expanded='true']):not([zen-right-side='true']) {
padding-inline-start: var(--zen-toolbox-padding);
}
-
#nav-bar & {
+ /* If nested in nav-bar, use outer padding */
padding-inline-start: var(--toolbarbutton-outer-padding);
}
-
:root[zen-right-side='true']:not([zen-window-buttons-reversed='true']) {
- padding-inline-end: var(--zen-toolbox-padding);
+ padding-inline-end: var(--zen-toolbox-padding); /* Add end padding for right sidebar */
}
+ /* Standardize height and padding for toolbar buttons (excluding titlebar buttons) */
& toolbarbutton:not(.titlebar-button) {
- height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
- padding: 0 var(--toolbarbutton-outer-padding) !important;
+ height: calc(2 * var(--toolbarbutton-inner-padding) + 16px); /* Calculate height based on padding + icon */
+ padding: 0 var(--toolbarbutton-outer-padding) !important; /* Apply outer padding */
}
+ /* Hide flexible space when collapsed */
:root:not([zen-sidebar-expanded='true']) & toolbarspring {
display: none;
}
}
+ /* Style specific action buttons (likely icon-only) */
& .zen-sidebar-action-button {
- padding: 0 !important;
-
+ padding: 0 !important; /* Remove padding */
& label {
- display: none !important;
+ display: none !important; /* Hide label */
}
}
}
+/* ==========================================================================
+ Vertical New Tab Button (Optional Feature)
+ ========================================================================== */
+
+/* Hide the button wrapper by default */
#tabs-newtab-button {
display: none;
- opacity: 0.5;
- -moz-user-focus: ignore !important;
+ opacity: 0.5; /* Dimmed by default */
+ -moz-user-focus: ignore !important; /* Prevent focus */
}
+/* Show and style the button if preference `zen.tabs.show-newtab-vertical` is enabled */
@media -moz-pref('zen.tabs.show-newtab-vertical') {
#tabs-newtab-button {
- display: flex !important;
- transition: scale 0.1s ease;
+ display: flex !important; /* Show the button */
+ transition: scale 0.1s ease; /* Add scale transition */
+
+ /* Style text within the button */
& .toolbarbutton-text {
align-items: center;
padding-top: 0;
}
+ /* Scale down slightly on press */
&:active,
&[open] {
scale: 0.98;
}
+ /* Style when placed "in urlbar" (likely a state/attribute) */
&[in-urlbar] {
background: var(--tab-selected-bgcolor) !important;
- opacity: 1 !important;
- box-shadow: var(--tab-selected-shadow);
+ opacity: 1 !important; /* Full opacity */
+ box-shadow: var(--tab-selected-shadow); /* Apply selected tab shadow */
}
}
+ /* Style the container ("periphery") holding the new tab button */
#tabbrowser-arrowscrollbox-periphery {
+ /* Conditional border color for light mode */
@media not (prefers-color-scheme: dark) {
- --zen-colors-border: var(--zen-colors-tertiary);
+ --zen-colors-border: var(--zen-colors-tertiary); /* Use tertiary color */
}
+ /* Move button to the top if preference is set */
@media -moz-pref('zen.view.show-newtab-button-top') {
order: -1;
}
+ /* Add a separator line above the button if preferences are set and there are tabs */
@media -moz-pref('zen.view.show-newtab-button-border-top') and (not -moz-pref('zen.view.show-newtab-button-top')) {
- #tabbrowser-arrowscrollbox:has(tab:not([hidden])) & {
- margin-top: 15px;
- position: relative;
- &::before {
- content: '';
- display: block;
- height: 1px;
- background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
- width: 98%;
- position: absolute;
- top: -8px;
- left: 50%;
- transform: translateX(-50%);
+ #tabbrowser-arrowscrollbox:has(tab:not([hidden])) & {
+ /* Only if tabs exist */
+ margin-top: 15px; /* Space above */
+ position: relative; /* For pseudo-element */
+ &::before {
+ content: '';
+ display: block;
+ height: 1px;
+ background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1)); /* Separator color */
+ width: 98%; /* Near full width */
+ position: absolute;
+ top: -8px; /* Position above the button */
+ left: 50%;
+ transform: translateX(-50%); /* Center horizontally */
+ }
}
}
}
- }
}
+/* ==========================================================================
+ Mark: Essentials Toolbar / Section Styles
+ ========================================================================== */
-/* Mark: Essentials Toolbar */
#zen-essentials-wrapper {
margin-left: calc(-1 * var(--zen-toolbox-padding));
min-width: calc(100% + var(--zen-toolbox-padding) * 2);
}
+/* Container for essential items (often pinned/favorite tabs) */
.zen-essentials-container {
padding-bottom: var(--zen-toolbox-padding);
overflow: hidden;
gap: calc(var(--zen-toolbox-padding) - 2px);
transition: max-height 0.3s ease-out;
opacity: 1;
- grid-template-columns: repeat(auto-fit, minmax(49px, auto));
- overflow: hidden;
+ grid-template-columns: repeat(auto-fit, minmax(48px, 1fr) minmax(48px, 1fr));
+ &[data-hack-type='3'] {
+ grid-template-columns: repeat(auto-fit, minmax(calc(100% / 3 - 1%), auto));
+ }
scrollbar-width: thin;
min-width: calc(100% + var(--zen-toolbox-padding) * 2);
padding: 0 var(--zen-toolbox-padding);
-
display: grid;
}
+/* Style tabs within the Essentials container (and a related welcome sidebar) */
.zen-essentials-container > .tabbrowser-tab,
#zen-welcome-initial-essentials-browser-sidebar-essentials .tabbrowser-tab {
- --toolbarbutton-inner-padding: 0;
- max-width: unset;
- width: 100% !important;
+ --toolbarbutton-inner-padding: 0; /* Reset padding */
+ max-width: unset; /* Allow stretching */
+ width: 100% !important; /* Force full width of grid cell */
+ /* Style background */
& .tab-background {
- border-radius: var(--border-radius-medium) !important;
- transition: background 0.1s ease-in-out;
+ border-radius: var(--border-radius-medium) !important; /* Use medium radius */
+ transition: background 0.1s ease-in-out; /* Smooth background transition */
}
--tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2));
- &:not([visuallyselected], [multiselected="true"]) .tab-background {
- background: var(--zen-toolbar-element-bg);
- border: none;
+ &:not([visuallyselected], [multiselected='true']) .tab-background {
+ background: var(--zen-toolbar-element-bg); /* Use generic element background */
+ border: none; /* No border */
}
& .tab-content {
@@ -1089,10 +1285,7 @@
justify-content: center;
}
- & .tab-label-container {
- display: none !important;
- }
-
+ & .tab-label-container,
& .tab-close-button {
display: none !important;
}
@@ -1106,123 +1299,88 @@
background: var(--tab-selected-bgcolor);
}
+ /* Optional blurred favicon background effect (if pref `zen.theme.essentials-favicon-bg` is enabled) */
@media -moz-pref('zen.theme.essentials-favicon-bg') {
&[visuallyselected] > .tab-stack > .tab-background {
+ /* Create a blurred background pseudo-element using the tab icon */
&::after {
- content: "";
- inset: -50%;
- filter: blur(20px);
+ content: '';
+ inset: -50%; /* Extend beyond bounds */
+ filter: blur(20px); /* Apply blur */
position: absolute;
background-size: contain;
background-clip: padding-box;
- background-image: var(--zen-tab-icon);
- z-index: -1;
+ background-image: var(--zen-tab-icon); /* Use tab icon variable */
+ z-index: -1; /* Place behind content */
background-position: center;
}
- background: transparent;
- overflow: hidden;
- position: relative;
- --zen-essential-bg-margin: 2px;
+ background: transparent; /* Make main background transparent */
+ overflow: hidden; /* Clip pseudo-elements */
+ position: relative; /* Positioning context */
+ --zen-essential-bg-margin: 2px; /* Margin for inner layer */
+ /* Create an inner background layer for contrast */
&::before {
background: light-dark(rgba(255, 255, 255, 0.85), rgba(68, 64, 64, 0.85));
- margin: var(--zen-essential-bg-margin);
- border-radius: calc(var(--border-radius-medium) - var(--zen-essential-bg-margin));
+ margin: var(--zen-essential-bg-margin); /* Apply margin */
+ border-radius: calc(var(--border-radius-medium) - var(--zen-essential-bg-margin)); /* Adjust radius */
position: absolute;
inset: 0;
- z-index: 0;
- content: "";
- transition: background 0.1s ease-in-out;
+ z-index: 0; /* Position above ::after, below content */
+ content: '';
+ transition: background 0.1s ease-in-out; /* Smooth transition */
}
}
+ /* Slightly fade inner background on hover */
&[visuallyselected]:hover .tab-background::before {
- background: light-dark(rgba(255, 255, 255, 0.80), rgba(68, 64, 64, 0.75));
+ background: light-dark(rgba(255, 255, 255, 0.8), rgba(68, 64, 64, 0.75));
}
}
}
-
-/* Very special occasions */
-
-/* Mark: Right side windows controls with collapsed sidebar */
-:root:not([zen-compact-mode='true']) {
- &[zen-right-side='true']:not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']) {
- & #navigator-toolbox {
- margin-top: var(--zen-toolbar-height) !important;
- }
-
- & .titlebar-buttonbox-container {
- margin-right: calc(-1 * var(--zen-toolbox-max-width)) !important;
- }
-
- & #zen-appcontent-wrapper {
- overflow-x: visible;
- }
-
- & #zen-sidebar-top-buttons-customization-target {
- padding-top: 0;
- }
-
- & #zen-appcontent-navbar-container {
- padding-left: var(--zen-element-separation);
- }
-
-%include vertical-tabs-topbuttons-fix.css
- }
-
- &:not([zen-right-side='true']):not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] {
- & #navigator-toolbox {
- margin-top: var(--zen-toolbar-height) !important;
- }
-
- & .titlebar-buttonbox-container {
- margin-left: calc(-1 * var(--zen-toolbox-max-width) + var(--zen-toolbox-padding) / 2) !important;
- }
-
- & #zen-appcontent-wrapper {
- overflow-x: visible;
- }
-
- & #zen-sidebar-top-buttons-customization-target {
- padding-top: 0;
- }
-
- & #zen-appcontent-navbar-container {
- padding-right: var(--zen-element-separation);
- }
-
-%include vertical-tabs-topbuttons-fix.css
- }
-}
-
-/* Vertical tabs reordering indicators */
+/* ==========================================================================
+ Vertical Tabs Reordering Drag Indicator
+ ========================================================================== */
#zen-drag-indicator {
+ /* Define indicator variables */
--zen-drag-indicator-height: 2px;
- --zen-drag-indicator-bg: color-mix(in srgb, var(--zen-primary-color) 50%, light-dark(rgba(0, 0, 0, .85), rgba(255, 255, 255, .95)) 50%);
- position: fixed;
- z-index: 1000;
- background: var(--zen-drag-indicator-bg);
- pointer-events: none;
- border-radius: 5px;
+ --zen-drag-indicator-bg: color-mix(
+ in srgb,
+ var(--zen-primary-color) 50%,
+ light-dark(rgba(0, 0, 0, 0.85), rgba(255, 255, 255, 0.95)) 50%
+ );
+ position: fixed; /* Position relative to viewport */
+ z-index: 1000; /* Ensure it's on top */
+ background: var(--zen-drag-indicator-bg);
+ pointer-events: none; /* Non-interactive */
+ border-radius: 5px; /* Rounded ends */
+
+ /* Add a circle at the start of the indicator */
&::before {
- content: "";
+ content: '';
position: absolute;
- height: calc(2 * var(--zen-drag-indicator-height));
+ height: calc(2 * var(--zen-drag-indicator-height)); /* Circle diameter */
width: calc(2 * var(--zen-drag-indicator-height));
- border: var(--zen-drag-indicator-height) solid var(--zen-drag-indicator-bg);
- border-radius: 50%;
- background: transparent;
+ border: var(--zen-drag-indicator-height) solid var(--zen-drag-indicator-bg); /* Thick border */
+ border-radius: 50%; /* Make it a circle */
+ background: transparent; /* Hollow circle */
}
+ /* Styles for horizontal drag indicator (e.g., between workspaces?) */
&[orientation='horizontal'] {
+ /* Position and size based on external CSS variables */
left: calc(var(--indicator-left) + 2 * var(--zen-drag-indicator-height) + 4px);
width: calc(var(--indicator-width) - 2 * var(--zen-drag-indicator-height) - 4px);
height: var(--zen-drag-indicator-height);
- transition: top 0.1s ease-out, left 0.1s ease-out, width 0.1s ease-out;
+ transition:
+ top 0.1s ease-out,
+ left 0.1s ease-out,
+ width 0.1s ease-out;
+ /* Position the circle at the left end */
&::before {
left: calc(-2 * var(--zen-drag-indicator-height));
top: 50%;
@@ -1230,12 +1388,18 @@
}
}
+ /* Styles for vertical drag indicator (between tabs) */
&[orientation='vertical'] {
+ /* Position and size based on external CSS variables */
top: calc(var(--indicator-top) + 2 * var(--zen-drag-indicator-height) + 4px);
height: calc(var(--indicator-height) - 2 * var(--zen-drag-indicator-height) - 4px);
width: var(--zen-drag-indicator-height);
- transition: top 0.1s ease-out, left 0.1s ease-out, height 0.1s ease-out;
+ transition:
+ top 0.1s ease-out,
+ left 0.1s ease-out,
+ height 0.1s ease-out;
+ /* Position the circle at the top end */
&::before {
top: calc(-2 * var(--zen-drag-indicator-height));
left: 50%;
@@ -1244,7 +1408,10 @@
}
}
-/* Renaming tabs */
+/* ==========================================================================
+ Renaming Tabs Input Styles
+ ========================================================================== */
+
.tab-label-container-editing {
display: none !important;
}
@@ -1258,20 +1425,27 @@
padding: 0;
}
-/* Section: tab workspaces stylings */
-.zen-workspace-tabs-section {
- position: absolute;
- transform: translateX(-100%);
+/* ==========================================================================
+ Section: Tab Workspaces Stylings
+ ========================================================================== */
+/* Style for individual workspace tab sections */
+.zen-workspace-tabs-section {
+ position: absolute; /* Position absolutely for transitions */
+ transform: translateX(-100%); /* Initially off-screen to the left */
+
+ /* Apply flex layout unless it's the essentials container */
&:not(.zen-essentials-container) {
display: flex;
- min-width: calc(100% - var(--zen-toolbox-padding) * 2);
+ min-width: calc(100% - var(--zen-toolbox-padding) * 2); /* Set width based on padding */
}
+ /* Apply horizontal margins unless it's the indicator or essentials */
&:not(.zen-current-workspace-indicator):not(.zen-essentials-container) {
margin: 0 var(--zen-toolbox-padding);
}
+ /* Hide section visually and disable interaction when hidden attribute is present */
&[hidden='true'] {
visibility: hidden;
pointer-events: none;
diff --git a/src/zen/tests/browser.toml b/src/zen/tests/browser.toml
index 4f13eca6f..3a2658416 100644
--- a/src/zen/tests/browser.toml
+++ b/src/zen/tests/browser.toml
@@ -1,2 +1,2 @@
-["browser_zen_workspaces.js"]
+["workspaces/browser_basic_workspaces.js"]
diff --git a/src/zen/tests/browser_zen_workspaces.js b/src/zen/tests/browser_zen_workspaces.js
deleted file mode 100644
index 04fa358c3..000000000
--- a/src/zen/tests/browser_zen_workspaces.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
- https://creativecommons.org/publicdomain/zero/1.0/ */
-
-'use strict';
-
-add_task(async function test_TODO() {
- ok(true, 'TODO: implement the test');
-});
diff --git a/src/zen/tests/workspaces/browser_basic_workspaces.js b/src/zen/tests/workspaces/browser_basic_workspaces.js
new file mode 100644
index 000000000..73d38021e
--- /dev/null
+++ b/src/zen/tests/workspaces/browser_basic_workspaces.js
@@ -0,0 +1,13 @@
+/* Any copyright is dedicated to the Public Domain.
+ https://creativecommons.org/publicdomain/zero/1.0/ */
+
+'use strict';
+
+add_setup(async function () {
+ await ZenWorkspaces.createAndSaveWorkspace('Test Workspace 2');
+});
+
+add_task(async function test_Check_Creation() {
+ const workspaces = await ZenWorkspaces._workspaces();
+ ok(workspaces.workspaces.length, 2);
+});
diff --git a/src/zen/welcome/ZenWelcome.mjs b/src/zen/welcome/ZenWelcome.mjs
index 4e1eb8270..b982844cf 100644
--- a/src/zen/welcome/ZenWelcome.mjs
+++ b/src/zen/welcome/ZenWelcome.mjs
@@ -68,10 +68,9 @@
async function setCachedFaviconForURL(pageUrl, iconURL) {
try {
- // TODO: This always return "NS_ERROR_NOT_AVAILABLE" for some reason, figure out why
await PlacesUtils.favicons.setFaviconForPage(
Services.io.newURI(pageUrl),
- Services.io.newURI('fake-favicon-uri:' + pageUrl),
+ Services.io.newURI(iconURL),
Services.io.newURI(iconURL)
);
} catch (ex) {
@@ -81,9 +80,21 @@
async function openInitialPinTab() {
const tabs = [
- ['https://reddit.com/r/zen_browser', 'Zen on Reddit', 'https://private-cdn.zen-browser.app/reddit.png'],
- ['https://x.com/zen_browser', 'Zen on Twitter', 'https://private-cdn.zen-browser.app/x.png'],
+ ['https://reddit.com/r/zen_browser', 'Zen on Reddit', 'chrome://browser/content/zen-images/favicons/reddit.ico'],
+ ['https://x.com/zen_browser', 'Zen on Twitter', 'chrome://browser/content/zen-images/favicons/x.ico'],
];
+
+ await PlacesUtils.history.insertMany(
+ tabs.map((site) => ({
+ url: site[0],
+ visits: [
+ {
+ transition: PlacesUtils.history.TRANSITIONS.TYPED,
+ },
+ ],
+ }))
+ );
+
for (const site of tabs) {
const tab = window.gBrowser.addTrustedTab(site[0], {
inBackground: true,
@@ -376,47 +387,47 @@