mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-04-20 14:25:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Mute icons are now properly displayed on pinned tabs, b=no-bug, c=tabs, common, welcome, workspaces

Browse Source
This commit is contained in:
Mr. M
2025-07-08 13:20:38 +02:00
parent c9598e1612
commit 1c09d40851
12 changed files with 72 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/browser/components/tabbrowser/content/tab-js.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/components/tabbrowser/content/tab.js b/browser/components/tabbrowser/content/tab.js
index 793ba822f087f4d198c9876ed208ff16d8a41e3b..e53ccd748de015997c355d5d37cb38cc73e90f3d 100644
index 793ba822f087f4d198c9876ed208ff16d8a41e3b..f0c4bc58d7d48491e0c0ab9eb3e915b1bf4d762a 100644
--- a/browser/components/tabbrowser/content/tab.js
+++ b/browser/components/tabbrowser/content/tab.js
@@ -21,6 +21,7 @@
@@ -21,6 +21,18 @@ index 793ba822f087f4d198c9876ed208ff16d8a41e3b..e53ccd748de015997c355d5d37cb38cc
</hbox>
</stack>
`;
@@ -97,9 +100,9 @@
"src=image,triggeringprincipal=iconloadingprincipal,requestcontextid,fadein,pinned,selected=visuallyselected,busy,crashed,sharing,pictureinpicture,pending,discarded",
".tab-sharing-icon-overlay": "sharing,selected=visuallyselected,pinned",
".tab-icon-overlay":
- "sharing,pictureinpicture,crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked",
+ "zen-essential,sharing,pictureinpicture,crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked",
".tab-audio-button":
- "crashed,soundplaying,soundplaying-scheduledremoval,pinned,muted,activemedia-blocked",
+ "zen-essential,crashed,soundplaying,soundplaying-scheduledremoval,pinned,muted,activemedia-blocked",
".tab-label-container":
"pinned,selected=visuallyselected,labeldirection",
".tab-label":
@@ -180,7 +183,7 @@
}

20
src/browser/themes/shared/tabbrowser/tabs-css.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615e8353936 100644
index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..23a165fdd80abd754a53f941a5edf839143b2044 100644
--- a/browser/themes/shared/tabbrowser/tabs.css
+++ b/browser/themes/shared/tabbrowser/tabs.css
@@ -19,7 +19,7 @@
@@ -103,6 +103,24 @@ index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615
color-scheme: var(--tab-selected-color-scheme);
border-radius: var(--border-radius-circle);
@@ -633,7 +625,7 @@
}
}
- &[pinned]:is([soundplaying], [muted], [activemedia-blocked]),
+ &[zen-essential]:is([soundplaying], [muted], [activemedia-blocked]),
&[crashed] {
display: revert;
}
@@ -737,7 +729,7 @@
has not been added to root. There are certain scenarios when that attribute is temporarily
removed from root such as when toggling the sidebar to expand with the toolbar button. */
#tabbrowser-tabs[orient="horizontal"] &:not([pinned]):not([crashed]),
- :root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"][expanded] &:not([pinned]):not([crashed]) {
+ :root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"][expanded] &:not([zen-essential]):not([crashed]) {
&:is([soundplaying], [muted], [activemedia-blocked]) {
display: block;
}
@@ -1373,7 +1365,7 @@ tab-group {
}
}

4
src/browser/themes/shared/zen-icons/icons.css
View File

@@ -68,6 +68,10 @@
list-style-image: url('downloads.svg') !important;
}
#downloads-indicator-icon {
max-height: 16px;
}
#appMenu-translate-button {
list-style-image: url('translations.svg') !important;
}

15
src/zen/common/ZenUIMigration.mjs
View File

@@ -2,6 +2,8 @@
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
const { AppConstants } = ChromeUtils.importESModule('resource://gre/modules/AppConstants.sys.mjs');
class nsZenUIMigration {
PREF_NAME = 'zen.ui.migration.version';
MIGRATION_VERSION = 2;
@@ -48,19 +50,24 @@ class nsZenUIMigration {
const userContentFile = profileDir.clone();
userContentFile.append('chrome');
userContentFile.append('userContent.css');
if (userChromeFile.exists() || userContentFile.exists()) {
Services.prefs.setBoolPref('toolkit.legacyUserProfileCustomizations.stylesheets', true);
}
Services.prefs.setBoolPref(
'zen.workspaces.separate-essentials',
Services.prefs.getBoolPref('zen.workspaces.container-specific-essentials-enabled', false)
);
const theme = Services.prefs.getIntPref('layout.css.prefers-color-scheme.content-override', 0);
Services.prefs.setIntPref('zen.view.window.scheme', theme);
if (userChromeFile.exists() || userContentFile.exists()) {
Services.prefs.setBoolPref('toolkit.legacyUserProfileCustomizations.stylesheets', true);
console.log('ZenUIMigration: User stylesheets detected, enabling legacy stylesheets.');
Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
return;
}
}
_migrateV2() {
Services.prefs.setIntPref('zen.theme.gradient-legacy-version', 0);
if (AppConstants.platform !== 'linux') {
Services.prefs.setIntPref('zen.theme.gradient-legacy-version', 0);
}
}
}

9
src/zen/common/styles/zen-single-components.css
View File

@@ -106,13 +106,8 @@ body > #confetti {
#zen-sidebar-foot-buttons & {
--tab-border-radius: 6px;
--toolbarbutton-border-radius: var(--tab-border-radius);
--toolbarbutton-inner-padding: 7px;
&,
& stack {
width: 30px;
height: 30px;
}
--toolbarbutton-inner-padding: 5px;
--toolbarbutton-outer-padding: 2px;
}
transition:

5
src/zen/common/styles/zen-theme.css
View File

@@ -261,6 +261,11 @@
color-scheme: dark;
}
}
:root[privatebrowsingmode='temporary'] &,
&[privatebrowsingmode='temporary'] {
color-scheme: dark;
}
}
}

2
src/zen/tabs/ZenPinnedTabManager.mjs
View File

@@ -940,7 +940,7 @@
if (!this._dragIndicator) {
this._dragIndicator = document.createElement('div');
this._dragIndicator.id = 'zen-drag-indicator';
document.body.appendChild(this._dragIndicator);
gNavToolbox.appendChild(this._dragIndicator);
}
return this._dragIndicator;
}

8
src/zen/tabs/zen-tabs/vertical-tabs.css
View File

@@ -1521,3 +1521,11 @@
.zen-current-workspace-indicator-name {
opacity: 0.7;
}
.tab-throbber {
display: none !important; /* Hide throbber always */
}
.tab-icon-image {
display: flex !important;
}

1
src/zen/welcome/ZenWelcome.mjs
View File

@@ -121,7 +121,6 @@
const iconData = await getIconData(site[2]);
await setCachedFaviconForURL(site[0], iconData);
gBrowser.setIcon(tab, iconData);
tab.removeAttribute('pending'); // Make it appear loaded
_tabsToPin.push(tab);
}
}

9
src/zen/workspaces/ZenGradientGenerator.mjs
View File

@@ -132,6 +132,9 @@
}
get isDarkMode() {
if (PrivateBrowsingUtils.isWindowPrivate(window)) {
return true;
}
switch (this.windowSchemeType) {
case 0:
return true;
@@ -1468,17 +1471,17 @@
'--zen-main-browser-background',
gradient
);
const isDarkModeWindow = browser.gZenThemePicker.isDarkMode;
if (dominantColor) {
browser.document.documentElement.style.setProperty(
'--zen-primary-color',
this.pSBC(
this.isDarkMode ? 0.2 : -0.5,
isDarkModeWindow ? 0.2 : -0.5,
`rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
)
);
browser.gZenThemePicker.isLegacyVersion = this.isLegacyVersion;
let isDarkMode = this.isDarkMode;
let isDarkMode = isDarkModeWindow;
if (!isDefaultTheme && !this.isLegacyVersion) {
// Check for the primary color
isDarkMode = browser.gZenThemePicker.shouldBeDarkMode(dominantColor);

2
src/zen/workspaces/ZenWorkspaces.mjs
View File

@@ -2881,7 +2881,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
parent.removeAttribute('icons-overflow');
return;
}
const maxButtonSize = 30; // IMPORTANT: This should match the CSS size of the icons
const maxButtonSize = 26; // IMPORTANT: This should match the CSS size of the icons
const minButtonSize = 15;
const separation = 3; // Space between icons

4
src/zen/workspaces/zen-workspaces.css
View File

@@ -34,8 +34,8 @@
& toolbarbutton {
margin: 0;
max-width: 30px;
height: 30px;
max-width: 26px;
height: 26px;
display: flex;
justify-content: center;
padding: 0 !important;