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

no-bug - Improved icon handling and added support for rearranging, c=common, folders, tabs, t=feat

This commit is contained in:
Mr. M 2025-06-06 11:51:04 +02:00
parent 965147f635
commit cd052ab20c
No known key found for this signature in database
GPG key ID: 6292C4C8F8652B18
9 changed files with 102 additions and 23 deletions

View file

@ -1,5 +1,5 @@
diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
index d5aa64842a35c6697263c63fd3a0571b64b01344..e6dd6f42cb2bb1fc8957ea3c4bfe87d6538a1f24 100644
index d5aa64842a35c6697263c63fd3a0571b64b01344..c9a0a404324ae0ae139f92d82270206683470e4f 100644
--- a/browser/components/tabbrowser/content/tabbrowser.js
+++ b/browser/components/tabbrowser/content/tabbrowser.js
@@ -413,11 +413,41 @@
@ -9,7 +9,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e6dd6f42cb2bb1fc8957ea3c4bfe87d6
+ get _numVisiblePinTabsWithoutCollapsed() {
+ let i = 0;
+ for (let item of this.tabContainer.ariaFocusableItems) {
+ if (!!item?.classList?.contains("tab-group-label") && item.closest("tab-folder").pinned) {
+ if (this.isTabGroupLabel(item) && item.closest("zen-folder")?.pinned) {
+ i += 1;
+ continue;
+ }
@ -54,7 +54,13 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..e6dd6f42cb2bb1fc8957ea3c4bfe87d6
tab.linkedPanel = uniqueId;
this._selectedTab = tab;
this._selectedBrowser = browser;
@@ -834,11 +865,13 @@
@@ -829,16 +860,18 @@
}
pinTab(aTab) {
- if (aTab.pinned || aTab == FirefoxViewHandler.tab) {
+ if (aTab.pinned || aTab == FirefoxViewHandler.tab || aTab.hasAttribute("zen-empty-tab")) {
return;
}
this.showTab(aTab);

View file

@ -1,5 +1,5 @@
diff --git a/browser/components/tabbrowser/content/tabgroup.js b/browser/components/tabbrowser/content/tabgroup.js
index 6dc774ea335b0c5dba7dcf76cdb23728faae1343..3872cef8158d391f56ec417382382bc641a859b8 100644
index 6dc774ea335b0c5dba7dcf76cdb23728faae1343..523ae38163c04ba8e37b767394bc98e8d5138537 100644
--- a/browser/components/tabbrowser/content/tabgroup.js
+++ b/browser/components/tabbrowser/content/tabgroup.js
@@ -13,10 +13,13 @@
@ -7,12 +7,11 @@ index 6dc774ea335b0c5dba7dcf76cdb23728faae1343..3872cef8158d391f56ec417382382bc6
class MozTabbrowserTabGroup extends MozXULElement {
static markup = `
- <vbox class="tab-group-label-container" pack="center">
- <label class="tab-group-label" role="button"/>
+ <hbox class="tab-group-label-container" pack="center">
+ <html:div class="tab-group-folder-icon"/>
<label class="tab-group-label" role="button"/>
- </vbox>
- <html:slot/>
+ <hbox class="tab-group-label-container" pack="center">
+ <image class="tab-group-folder-icon"/>
+ <label class="tab-group-label" role="button"/>
+ </hbox>
+ <html:div class="tab-group-container">
+ <html:div class="zen-tab-group-start" />

View file

@ -1 +0,0 @@
<svg width="28" height="19" viewBox="-5 0 30 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 3.5C1 2.39543 1.89543 1.5 3 1.5H8L10 3.5H15C16.1046 3.5 17 4.39543 17 5.5V15.5C17 16.6046 16.1046 17.5 15 17.5H3C1.89543 17.5 1 16.6046 1 15.5V3.5Z" fill="context-stroke"></path><path d="M1 3.5C1 2.39543 1.89543 1.5 3 1.5H8L10 3.5H15C16.1046 3.5 17 4.39543 17 5.5V15.5C17 16.6046 16.1046 17.5 15 17.5H3C1.89543 17.5 1 16.6046 1 15.5V3.5Z" fill="context-fill" fill-opacity="0.7"></path><path d="M1 3.5C1 2.39543 1.89543 1.5 3 1.5H8L10 3.5H15C16.1046 3.5 17 4.39543 17 5.5V15.5C17 16.6046 16.1046 17.5 15 17.5H3C1.89543 17.5 1 16.6046 1 15.5V3.5Z" stroke="context-stroke" stroke-width="1.5"></path><path d="M1 8.5C1 7.39543 1.89543 6.5 3 6.5H15C16.1046 6.5 17 7.39543 17 8.5V15.5C17 16.6046 16.1046 17.5 15 17.5H3C1.89543 17.5 1 16.6046 1 15.5V8.5Z" fill="context-fill" stroke="context-stroke" stroke-width="1.5" style="stroke-opacity: 1;"></path></svg>

Before

Width:  |  Height:  |  Size: 960 B

View file

@ -1 +0,0 @@
<svg width="28" height="19" viewBox="-3 0 30 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.44411 3.86858C1.21333 2.63775 2.15758 1.5 3.40985 1.5H7.81325C8.40681 1.5 8.96971 1.76365 9.34969 2.21963L9.40031 2.28037C9.7803 2.73635 10.3432 3 10.9367 3H15.3153C16.2888 3 17.1208 3.70088 17.2862 4.66019L19.0966 15.1602C19.3073 16.3826 18.3661 17.5 17.1257 17.5H5.65985C4.69742 17.5 3.87147 16.8145 3.69411 15.8686L1.44411 3.86858Z" fill="context-stroke" fill-opacity="1"></path><path d="M1.44411 3.86858C1.21333 2.63775 2.15758 1.5 3.40985 1.5H7.81325C8.40681 1.5 8.96971 1.76365 9.34969 2.21963L9.40031 2.28037C9.7803 2.73635 10.3432 3 10.9367 3H15.3153C16.2888 3 17.1208 3.70088 17.2862 4.66019L19.0966 15.1602C19.3073 16.3826 18.3661 17.5 17.1257 17.5H5.65985C4.69742 17.5 3.87147 16.8145 3.69411 15.8686L1.44411 3.86858Z" fill="context-fill" fill-opacity="0.7"></path><path d="M1.44411 3.86858C1.21333 2.63775 2.15758 1.5 3.40985 1.5H7.81325C8.40681 1.5 8.96971 1.76365 9.34969 2.21963L9.40031 2.28037C9.7803 2.73635 10.3432 3 10.9367 3H15.3153C16.2888 3 17.1208 3.70088 17.2862 4.66019L19.0966 15.1602C19.3073 16.3826 18.3661 17.5 17.1257 17.5H5.65985C4.69742 17.5 3.87147 16.8145 3.69411 15.8686L1.44411 3.86858Z" fill="url(#paint0_linear_70_12)" fill-opacity="0.15"></path><path d="M1.44411 3.86858C1.21333 2.63775 2.15758 1.5 3.40985 1.5H7.81325C8.40681 1.5 8.96971 1.76365 9.34969 2.21963L9.40031 2.28037C9.7803 2.73635 10.3432 3 10.9367 3H15.3153C16.2888 3 17.1208 3.70088 17.2862 4.66019L19.0966 15.1602C19.3073 16.3826 18.3661 17.5 17.1257 17.5H5.65985C4.69742 17.5 3.87147 16.8145 3.69411 15.8686L1.44411 3.86858Z" stroke="context-stroke" stroke-width="1.5"></path><path d="M5.59806 7.97376C5.83537 7.10364 6.62569 6.5 7.52759 6.5H19.3815C20.7002 6.5 21.658 7.75396 21.311 9.02623L19.4019 16.0262C19.1646 16.8964 18.3743 17.5 17.4724 17.5H5.6185C4.29975 17.5 3.34199 16.246 3.68897 14.9738L5.59806 7.97376Z" fill="context-fill" fill-opacity="1"></path><path d="M5.59806 7.97376C5.83537 7.10364 6.62569 6.5 7.52759 6.5H19.3815C20.7002 6.5 21.658 7.75396 21.311 9.02623L19.4019 16.0262C19.1646 16.8964 18.3743 17.5 17.4724 17.5H5.6185C4.29975 17.5 3.34199 16.246 3.68897 14.9738L5.59806 7.97376Z" fill="url(#paint1_linear_70_12)" fill-opacity="0.15"></path><path d="M5.59806 7.97376C5.83537 7.10364 6.62569 6.5 7.52759 6.5H19.3815C20.7002 6.5 21.658 7.75396 21.311 9.02623L19.4019 16.0262C19.1646 16.8964 18.3743 17.5 17.4724 17.5H5.6185C4.29975 17.5 3.34199 16.246 3.68897 14.9738L5.59806 7.97376Z" stroke="context-stroke" stroke-width="1.5"></path><defs><linearGradient id="paint0_linear_70_12" x1="13.5" y1="5.8125" x2="13.5" y2="17.5" gradientUnits="userSpaceOnUse"><stop stop-opacity="0"></stop><stop offset="1" stop-color="black" stop-opacity="1"></stop></linearGradient><linearGradient id="paint1_linear_70_12" x1="12.5" y1="5.49404" x2="12.5" y2="17.5" gradientUnits="userSpaceOnUse"><stop stop-opacity="0"></stop><stop offset="1" stop-color="black" stop-opacity="1"></stop></linearGradient></defs></svg>

Before

Width:  |  Height:  |  Size: 3 KiB

View file

@ -768,9 +768,5 @@
/* Tab folders */
.tab-group-folder-icon {
list-style-image: url('folder-open.svg');
tab-group[collapsed] > .tab-group-label-container & {
list-style-image: url('folder-closed.svg');
}
list-style-image: url('folder.svg');
}

View file

@ -413,7 +413,5 @@
skin/classic/browser/zen-icons/zoom-control.svg (../shared/zen-icons/lin/zoom-control.svg)
skin/classic/browser/zen-icons/zoom-out.svg (../shared/zen-icons/lin/zoom-out.svg)
#endif
skin/classic/browser/zen-icons/folder-closed.svg (../shared/zen-icons/common/folder-closed.svg)
skin/classic/browser/zen-icons/folder-open.svg (../shared/zen-icons/common/folder-open.svg)
skin/classic/browser/zen-icons/urlbar-arrow.svg (../shared/zen-icons/common/urlbar-arrow.svg)
skin/classic/browser/zen-icons/icons.css (../shared/zen-icons/icons.css)

View file

@ -3,12 +3,62 @@
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
{
class ZenFolder extends MozTabbrowserTabGroup {
#initialized = false;
static rawIcon = new DOMParser().parseFromString(
`
<svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="-67.409 -14.145 29.279 28.92">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="-53.05" y1="-3.8" x2="-53.05" y2="8.998" id="gradient-1">
<stop offset="0" style="stop-color: rgb(255, 255, 255);"/>
<stop offset="1" style="stop-color: rgb(0% 0% 0%)"/>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="-40.286" y1="-3.091" x2="-40.286" y2="13.31" id="gradient-0" gradientTransform="matrix(1, 0, 0, 1, -12.717999, -4.409)">
<stop offset="0" style="stop-color: rgb(255, 255, 255);"/>
<stop offset="1" style="stop-color: rgb(0% 0% 0%)"/>
</linearGradient>
</defs>
<path d="M -61.3 -5.25 C -61.3 -6.492 -60.293 -7.5 -59.05 -7.5 L -55.102 -7.5 C -54.591 -7.5 -54.096 -7.326 -53.697 -7.007 L -52.84 -6.321 C -52.175 -5.79 -51.349 -5.5 -50.498 -5.5 L -47.05 -5.5 C -45.807 -5.5 -44.8 -4.492 -44.8 -3.25 L -44.731 4.42 L -44.708 6.651 C -44.708 7.894 -45.715 8.901 -46.958 8.901 L -58.958 8.901 C -60.201 8.901 -61.208 7.894 -61.208 6.651 L -61.3 4.752 L -61.3 -5.25 Z" style="stroke-width: 1.25px; transform-box: fill-box; transform-origin: 50% 50%; fill: var(--zen-workspace-color-bg); stroke: currentColor;">
<animateTransform type="skewX" additive="sum" attributeName="transform" values="0;17" dur="0.4s" fill="freeze" keyTimes="0; 1" end="0.6s" max="0.6s" calcMode="spline" keySplines="0.42 0 0.58 1"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;-0.4 -0.2" dur="0.4s" keyTimes="0; 1" fill="freeze" end="0.6s" max="0.6s" calcMode="spline" keySplines="0.42 0 0.58 1"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.9 0.9" begin="0s" dur="0.4s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
</path>
<path d="M -61.3 -5.25 C -61.3 -6.492 -60.293 -7.5 -59.05 -7.5 L -55.102 -7.5 C -54.591 -7.5 -54.096 -7.326 -53.697 -7.007 L -52.84 -6.321 C -52.175 -5.79 -51.349 -5.5 -50.498 -5.5 L -47.05 -5.5 C -45.807 -5.5 -44.8 -4.492 -44.8 -3.25 L -44.731 4.42 L -44.708 6.651 C -44.708 7.894 -45.715 8.901 -46.958 8.901 L -58.958 8.901 C -60.201 8.901 -61.208 7.894 -61.208 6.651 L -61.3 4.752 L -61.3 -5.25 Z" style="stroke-width: 1.25; fill-opacity: 0.15; fill: url(&quot;#gradient-0&quot;); transform-origin: -53.004px 0.701px;">
<animateTransform type="skewX" additive="sum" attributeName="transform" values="0;17" dur="0.4s" fill="freeze" keyTimes="0; 1" end="0.6s" max="0.6s" calcMode="spline" keySplines="0.42 0 0.58 1"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;-0.4 -0.2" dur="0.4s" keyTimes="0; 1" fill="freeze" end="0.6s" max="0.6s" calcMode="spline" keySplines="0.42 0 0.58 1"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.9 0.9" begin="0s" dur="0.4s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
</path>
<rect x="-61.301" y="-3.768" width="16.5" height="12.798" rx="2.25" style="stroke-width: 1.25px; transform-box: fill-box; transform-origin: 50% 50%; fill: var(--zen-colors-primary); stroke: currentColor;" id="object-0">
<animateTransform type="skewX" additive="sum" attributeName="transform" values="0;-17" dur="0.4s" keyTimes="0; 1" max="0.6s" fill="freeze" calcMode="spline" keySplines="0.42 0 0.58 1"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;3 -0.5" dur="0.4s" fill="freeze" keyTimes="0; 1" max="0.6s" calcMode="spline" keySplines="0.42 0 0.58 1"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.9 0.9" begin="0s" dur="0.4s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
</rect>
<rect x="-61.3" y="-3.8" width="16.5" height="12.798" style="stroke-width: 1.25; fill-opacity: 0.15; transform-origin: -53.05px 2.599px; fill: url(&quot;#gradient-1&quot;);" id="rect-1" rx="2.25">
<animateTransform type="skewX" additive="sum" attributeName="transform" values="0;-17" dur="0.4s" keyTimes="0; 1" max="0.6s" fill="freeze" calcMode="spline" keySplines="0.42 0 0.58 1"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;3 -0.5" dur="0.4s" fill="freeze" keyTimes="0; 1" max="0.6s" calcMode="spline" keySplines="0.42 0 0.58 1"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.9 0.9" dur="0.4s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
</rect>
</svg>
`,
'image/svg+xml'
).documentElement;
constructor() {
super();
}
connectedCallback() {
super.connectedCallback();
if (this.#initialized) {
return;
}
this.#initialized = true;
this.icon.appendChild(ZenFolder.rawIcon.cloneNode(true));
this.labelElement.pinned = true;
}
get icon() {
return this.querySelector('.tab-group-folder-icon');
}
/**
@ -190,8 +240,8 @@
folder.label = label;
folder.collapsed = !!options.collapsed;
folder.pinned = true;
folder.addTabs(tabs);
insertBefore.before(folder);
folder.addTabs(tabs);
// Fixes bug1953801 and bug1954689
// Ensure that the tab state cache is updated immediately after creating
@ -203,6 +253,7 @@
gBrowser.TabStateFlusher.flush(tab.linkedBrowser);
});
this.#updateFolderIcon(folder, false);
return folder;
}
@ -215,6 +266,7 @@
let heightUntilSelected = 0;
let selectedItem = null;
let itemsAfterSelected = [];
animations.push(...this.#updateFolderIcon(group));
for (const item of tabsContainer.children) {
const rect = item.getBoundingClientRect();
if (item.hasAttribute('visuallyselected')) {
@ -247,6 +299,7 @@
const groupStart = group.querySelector('.zen-tab-group-start');
const animations = [];
tabsContainer.style.overflow = 'hidden';
animations.push(...this.#updateFolderIcon(group));
animations.push(
gZenUIManager.motion.animate(
groupStart,
@ -262,6 +315,30 @@
await Promise.all(animations);
tabsContainer.style.overflow = '';
}
#updateFolderIcon(group, actuallyAnimate = true) {
const svgElement = group.icon.querySelector('svg');
if (!svgElement) {
return;
}
const targetIsCollapsed = !group.collapsed;
const iconContainer = group.icon;
svgElement.querySelectorAll('animate, animateTransform, animateMotion').forEach((anim) => {
const v = anim.getAttribute('values');
if (v) {
const o = v.split(';');
if (o.length === 2) anim.setAttribute('values', `${o[1]};${o[0]}`);
}
});
iconContainer.innerHTML = '';
iconContainer.appendChild(svgElement);
if (!actuallyAnimate) {
svgElement.pauseAnimations();
svgElement.setCurrentTime(targetIsCollapsed ? 0 : 0.4);
}
iconContainer.dataset.iconIsCollapsed = String(targetIsCollapsed);
return [];
}
}
window.gZenFolders = new ZenFolders();

View file

@ -201,12 +201,11 @@ zen-folder {
}
.tab-group-folder-icon {
width: 28px;
width: 30px;
height: 28px;
margin-inline-end: calc(var(--toolbarbutton-inner-padding) / 3) !important;
-moz-context-properties: fill, stroke, fill-opacity, stroke-opacity;
stroke: currentColor;
fill: var(--zen-colors-primary);
align-content: center;
pointer-events: none;
}
&:hover {

View file

@ -793,6 +793,7 @@
if (!this.enabled) {
return false;
}
movingTabs = [...movingTabs];
try {
const pinnedTabsTarget =
event.target.closest('.zen-workspace-pinned-tabs-section') ||
@ -803,7 +804,7 @@
// with the sub tabs
for (let i = 0; i < movingTabs.length; i++) {
const draggedTab = movingTabs[i];
if (draggedTab.classList.contains('tab-group-label')) {
if (gBrowser.isTabGroupLabel(draggedTab)) {
const group = draggedTab.group;
// remove label and add sub tabs to moving tabs
if (group) {
@ -1004,6 +1005,11 @@
if (!this.enabled) {
return;
}
if (gBrowser.isTabGroupLabel(draggedTab)) {
// If the target is a tab group label, we don't want to apply the dragover class
this.removeTabContainersDragoverClass();
return;
}
const pinnedTabsTarget = event.target.closest('.zen-workspace-pinned-tabs-section');
const essentialTabsTarget = event.target.closest('.zen-essentials-container');
const tabsTarget = event.target.closest('.zen-workspace-normal-tabs-section');