1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-08 00:10:00 +02:00

fix: Fixed workspace overflows not working and refined new HSL picker, b=no-bug, c=tabs, common, compact-mode, workspaces

This commit is contained in:
mr. m 2025-06-24 17:44:22 +02:00
parent 9971dbd0ad
commit fe77048619
No known key found for this signature in database
GPG key ID: 928E01ED4C97749F
11 changed files with 89 additions and 49 deletions

View file

@ -57,8 +57,8 @@
style="stroke-width: 8px;"/>
<defs>
<linearGradient id="PanelUI-zen-gradient-generator-slider-wave-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="light-dark(rgb(77, 77, 77), rgb(161, 161, 161))"/>
<stop offset="0%" stop-color="light-dark(rgba(77, 77, 77), rgba(161, 161, 161))"/>
<stop offset="0%" stop-color="light-dark(rgb(90, 90, 90), rgb(161, 161, 161))"/>
<stop offset="0%" stop-color="light-dark(rgb(90, 90, 90), rgba(161, 161, 161))"/>
<stop offset="100%" stop-color="light-dark(rgba(77, 77, 77, 0.5), rgba(161, 161, 161, 0.5))"/>
</linearGradient>
</defs>

View file

@ -1,5 +1,5 @@
diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113c072241f 100644
index 67bba60cfc21b940f263e1eb26b8b5429355660f..9f73966429d8e82bb9ef0af73a996c8cff230eab 100644
--- a/browser/components/tabbrowser/content/tabs.js
+++ b/browser/components/tabbrowser/content/tabs.js
@@ -83,7 +83,7 @@
@ -144,7 +144,15 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
}
get verticalMode() {
@@ -1625,29 +1655,54 @@
@@ -1617,6 +1647,7 @@
}
get overflowing() {
+ gZenWorkspaces.updateOverflowingTabs();
return this.hasAttribute("overflow");
}
@@ -1625,29 +1656,54 @@
if (this.#allTabs) {
return this.#allTabs;
}
@ -207,7 +215,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
}
/**
@@ -1702,23 +1757,18 @@
@@ -1702,23 +1758,18 @@
}
let elementIndex = 0;
@ -235,7 +243,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
let visibleTabsInGroup = child.tabs.filter(tab => tab.visible);
visibleTabsInGroup.forEach(tab => {
tab.elementIndex = elementIndex++;
@@ -1728,10 +1778,7 @@
@@ -1728,10 +1779,7 @@
}
}
@ -247,7 +255,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
return this.#focusableItems;
}
@@ -1739,6 +1786,7 @@
@@ -1739,6 +1787,7 @@
_invalidateCachedTabs() {
this.#allTabs = null;
this._invalidateCachedVisibleTabs();
@ -255,7 +263,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
}
_invalidateCachedVisibleTabs() {
@@ -1753,8 +1801,8 @@
@@ -1753,8 +1802,8 @@
#isContainerVerticalPinnedGrid(tab) {
return (
this.verticalMode &&
@ -266,7 +274,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
!this.expandOnHover
);
}
@@ -1770,7 +1818,7 @@
@@ -1770,7 +1819,7 @@
if (node == null) {
// We have a container for non-tab elements at the end of the scrollbox.
@ -275,7 +283,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
}
node.before(tab);
@@ -1865,7 +1913,7 @@
@@ -1865,7 +1914,7 @@
// There are separate "new tab" buttons for horizontal tabs toolbar, vertical tabs and
// for when the tab strip is overflowed (which is shared by vertical and horizontal tabs);
// Attach the long click popup to all of them.
@ -284,7 +292,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
const newTab2 = this.newTabButton;
const newTabVertical = document.getElementById(
"vertical-tabs-newtab-button"
@@ -1960,10 +2008,12 @@
@@ -1960,10 +2009,12 @@
_handleTabSelect(aInstant) {
let selectedTab = this.selectedItem;
@ -297,7 +305,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
selectedTab._notselectedsinceload = false;
}
@@ -2136,6 +2186,7 @@
@@ -2136,6 +2187,7 @@
}
_positionPinnedTabs() {
@ -305,7 +313,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
let tabs = this.visibleTabs;
let numPinned = gBrowser.pinnedTabCount;
let absPositionHorizontalTabs =
@@ -2210,7 +2261,7 @@
@@ -2210,7 +2262,7 @@
return;
}
@ -314,7 +322,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
let directionX = screenX > dragData.animLastScreenX;
let directionY = screenY > dragData.animLastScreenY;
@@ -2219,6 +2270,8 @@
@@ -2219,6 +2271,8 @@
let { width: tabWidth, height: tabHeight } =
draggedTab.getBoundingClientRect();
@ -323,7 +331,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
let shiftSizeX = tabWidth * movingTabs.length;
let shiftSizeY = tabHeight;
dragData.tabWidth = tabWidth;
@@ -2248,7 +2301,7 @@
@@ -2248,7 +2302,7 @@
let translateX = screenX - dragData.screenX;
let translateY = screenY - dragData.screenY;
translateY +=
@ -332,7 +340,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
let firstBoundX = firstTabInRow.screenX - firstMovingTabScreenX;
let firstBoundY = firstTabInRow.screenY - firstMovingTabScreenY;
let lastBoundX =
@@ -2394,12 +2447,16 @@
@@ -2394,12 +2448,16 @@
this.#clearDragOverCreateGroupTimer();
@ -353,7 +361,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
if (this.#rtlMode) {
tabs.reverse();
@@ -2413,7 +2470,7 @@
@@ -2413,7 +2471,7 @@
let size = this.verticalMode ? "height" : "width";
let translateAxis = this.verticalMode ? "translateY" : "translateX";
let scrollDirection = this.verticalMode ? "scrollTop" : "scrollLeft";
@ -362,7 +370,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
let translateX = event.screenX - dragData.screenX;
let translateY = event.screenY - dragData.screenY;
@@ -2427,12 +2484,21 @@
@@ -2427,12 +2485,21 @@
let lastTab = tabs.at(-1);
let lastMovingTab = movingTabs.at(-1);
let firstMovingTab = movingTabs[0];
@ -385,7 +393,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
translate +=
this.arrowScrollbox.scrollbox[scrollDirection] - dragData.scrollPos;
} else if (isPinned && this.verticalMode) {
@@ -2451,6 +2517,9 @@
@@ -2451,6 +2518,9 @@
// Shift the `.tab-group-label-container` to shift the label element.
item = item.parentElement;
}
@ -395,7 +403,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
item.style.transform = `${translateAxis}(${translate}px)`;
}
@@ -2588,6 +2657,9 @@
@@ -2588,6 +2658,9 @@
break;
}
let element = tabs[mid];
@ -405,7 +413,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
let elementForSize = isTabGroupLabel(element)
? element.parentElement
: element;
@@ -2664,7 +2736,7 @@
@@ -2664,7 +2737,7 @@
let shouldCreateGroupOnDrop;
let dropBefore;
if (dropElement) {
@ -414,7 +422,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
? dropElement.parentElement
: dropElement;
@@ -2726,12 +2798,12 @@
@@ -2726,12 +2799,12 @@
}
}
@ -429,7 +437,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
isTab(dropElement) &&
!dropElement?.group &&
overlapPercent > dragOverGroupingThreshold;
@@ -2773,7 +2845,7 @@
@@ -2773,7 +2846,7 @@
// Dropping right before the tab group.
dropElement = dropElementGroup;
colorCode = undefined;
@ -438,7 +446,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
// Dropping right after the collapsed tab group.
dropElement = dropElementGroup;
colorCode = undefined;
@@ -2803,7 +2875,7 @@
@@ -2803,7 +2876,7 @@
// Shift background tabs to leave a gap where the dragged tab
// would currently be dropped.
for (let item of tabs) {
@ -447,7 +455,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
continue;
}
@@ -2812,6 +2884,9 @@
@@ -2812,6 +2885,9 @@
if (isTabGroupLabel(item)) {
// Shift the `.tab-group-label-container` to shift the label element.
item = item.parentElement;
@ -457,7 +465,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
}
item.style.transform = transform;
}
@@ -2864,8 +2939,9 @@
@@ -2864,8 +2940,9 @@
);
}
@ -469,7 +477,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
return;
}
@@ -2877,6 +2953,12 @@
@@ -2877,6 +2954,12 @@
item = item.parentElement;
}
item.style.transform = "";
@ -482,7 +490,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
item.removeAttribute("dragover-createGroup");
}
this.removeAttribute("movingtab-createGroup");
@@ -2923,7 +3005,7 @@
@@ -2923,7 +3006,7 @@
let postTransitionCleanup = () => {
movingTab._moveTogetherSelectedTabsData.animate = false;
};
@ -491,7 +499,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
postTransitionCleanup();
} else {
let onTransitionEnd = transitionendEvent => {
@@ -3096,7 +3178,7 @@
@@ -3096,7 +3179,7 @@
}
_notifyBackgroundTab(aTab) {
@ -500,7 +508,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
return;
}
@@ -3222,6 +3304,9 @@
@@ -3222,6 +3305,9 @@
return null;
}
}

View file

@ -1,5 +1,5 @@
diff --git a/widget/cocoa/nsCocoaWindow.mm b/widget/cocoa/nsCocoaWindow.mm
index c4627621344d35081f11a7b0e03d02eca2097609..d2e5fe429aaac8b701a03380a67f4ea978d566b3 100644
index c4627621344d35081f11a7b0e03d02eca2097609..709a0dbfe46daa4148a423242c63598ba6904fde 100644
--- a/widget/cocoa/nsCocoaWindow.mm
+++ b/widget/cocoa/nsCocoaWindow.mm
@@ -7376,7 +7376,7 @@ - (id)initWithContentRect:(NSRect)aContentRect
@ -7,7 +7,7 @@ index c4627621344d35081f11a7b0e03d02eca2097609..d2e5fe429aaac8b701a03380a67f4ea9
// Returns an autoreleased NSImage.
static NSImage* GetMenuMaskImage() {
- const CGFloat radius = 6.0f;
+ const CGFloat radius = 14.0f;
+ const CGFloat radius = 11.0f;
const NSSize maskSize = {radius * 3.0f, radius * 3.0f};
NSImage* maskImage = [NSImage imageWithSize:maskSize
flipped:FALSE

View file

@ -46,7 +46,10 @@
pointer-events: none;
isolation: isolate;
:root[zen-should-be-dark-mode] {
background: var(--zen-themed-toolbar-bg-transparent);
}
&::after,
&::before {

View file

@ -64,7 +64,7 @@ panel[type='arrow'] {
--panel-border-radius: 6px;
&::part(content) {
background-color: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)) !important;
background-color: transparent !important;
}
}
}

View file

@ -155,13 +155,13 @@ var gZenCompactModeManager = {
},
updateCompactModeContext(isSingleToolbar) {
const IDs = [
'zen-context-menu-compact-mode-hide-sidebar',
'zen-context-menu-compact-mode-hide-toolbar',
'zen-context-menu-compact-mode-hide-both',
];
for (let id of IDs) {
document.getElementById(id).disabled = isSingleToolbar;
const menuitem = document.getElementById('zen-context-menu-compact-mode-toggle');
const menu = document.getElementById('zen-context-menu-compact-mode');
menu.setAttribute('hidden', isSingleToolbar);
if (isSingleToolbar) {
menu.before(menuitem);
} else {
menu.querySelector('menupopup').prepend(menuitem);
}
},

View file

@ -1110,9 +1110,7 @@
const rotation = -45; // TODO: Detect rotation based on the accent color
if (themedColors.length === 0) {
return forToolbar
? this.getToolbarModifiedBase()
: 'var(--zen-themed-toolbar-bg-transparent)';
return forToolbar ? this.getToolbarModifiedBase() : 'transparent';
} else if (themedColors.length === 1) {
return this.getSingleRGBColor(themedColors[0], forToolbar);
} else if (themedColors.length === 2) {
@ -1282,13 +1280,16 @@
getMostDominantColor(allColors) {
const dominantColor = this.getPrimaryColor(allColors);
if (!dominantColor) {
return this.hexToRgb(this.getNativeAccentColor());
}
const result = this.pSBC(
this.isDarkMode ? 0.2 : -0.5,
`rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
);
const color = result?.match(/\d+/g)?.map(Number);
if (!color || color.length !== 3) {
return this.getNativeAccentColor();
return this.hexToRgb(this.getNativeAccentColor());
}
return color;
}
@ -1492,7 +1493,7 @@
: `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
);
let isDarkMode = this.isDarkMode;
if (dominantColor !== this.hexToRgb(this.getNativeAccentColor())) {
if (dominantColor.toString() !== this.hexToRgb(this.getNativeAccentColor()).toString()) {
isDarkMode = browser.gZenThemePicker.shouldBeDarkMode(dominantColor);
browser.document.documentElement.setAttribute('zen-should-be-dark-mode', isDarkMode);
} else {
@ -1558,7 +1559,7 @@
return primaryColor.c;
}
if (colors.length === 0) {
return this.hexToRgb(this.getNativeAccentColor());
return undefined;
}
// Get the middle color
return colors[Math.floor(colors.length / 2)].c;

View file

@ -119,7 +119,7 @@
}
}
for (const element of ZenWorkspaceCreation.elementsToDisable) {
for (const element of nsZenWorkspaceCreation.elementsToDisable) {
const el = document.getElementById(element);
if (el) {
el.setAttribute('disabled', 'true');

View file

@ -2840,4 +2840,19 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
}
}
updateOverflowingTabs() {
if (!this._hasInitializedTabsStrip) {
return;
}
const currentWorkspaceStrip = this.workspaceElement(this.activeWorkspace);
if (!currentWorkspaceStrip) {
return;
}
if (currentWorkspaceStrip.overflows) {
gBrowser.tabContainer.setAttribute('overflow', 'true');
} else {
gBrowser.tabContainer.removeAttribute('overflow');
}
}
})();

View file

@ -210,6 +210,7 @@
overflow: visible;
min-width: calc(100% + 2rem);
scale: 1.2;
margin-left: 4px;
}
}
@ -298,6 +299,7 @@
transform: translate(-50%, -50%);
white-space: nowrap;
pointer-events: none;
font-size: small;
&[hidden] {
display: none;
@ -437,3 +439,13 @@
max-height: 28px;
margin: 0 !important;
}
:root:not([zen-should-be-dark-mode]) {
#PanelUI-zen-gradient-generator-opacity {
display: none !important;
}
#PanelUI-zen-gradient-slider-wave svg path {
stroke: dimgray !important;
}
}

View file

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