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
parent
965147f635
commit
cd052ab20c
9 changed files with 102 additions and 23 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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("#gradient-0"); 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("#gradient-1");" 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();
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue