mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor zen-glance styles and improve tab handling with enhanced animations

Browse Source
This commit is contained in:
mr. M
2025-02-02 13:08:59 +01:00
parent da1a032c96
commit b55e0eb1d3
4 changed files with 97 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/browser/base/content/browser-js.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
index 9a65dcc7ad41ab961907c95338e023b173d4f474..9477e0c115ed3c4a670f1ac63846b6de01bf8b8c 100644
index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..1f051e8a1e8a58e8bb721196deecfa36f4089dd6 100644
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -32,6 +32,7 @@ ChromeUtils.defineESModuleGetters(this, {
@@ -10,7 +10,7 @@ index 9a65dcc7ad41ab961907c95338e023b173d4f474..9477e0c115ed3c4a670f1ac63846b6de
DevToolsSocketStatus:
"resource://devtools/shared/security/DevToolsSocketStatus.sys.mjs",
DownloadUtils: "resource://gre/modules/DownloadUtils.sys.mjs",
@@ -630,6 +631,15 @@ XPCOMUtils.defineLazyPreferenceGetter(
@@ -632,6 +633,15 @@ XPCOMUtils.defineLazyPreferenceGetter(
false
);
@@ -26,19 +26,18 @@ index 9a65dcc7ad41ab961907c95338e023b173d4f474..9477e0c115ed3c4a670f1ac63846b6de
customElements.setElementCreationCallback("screenshots-buttons", () => {
Services.scriptloader.loadSubScript(
"chrome://browser/content/screenshots/screenshots-buttons.js",
@@ -3440,6 +3450,11 @@ var XULBrowserWindow = {
@@ -3440,6 +3450,10 @@ var XULBrowserWindow = {
AboutReaderParent.updateReaderButton(gBrowser.selectedBrowser);
TranslationsParent.onLocationChange(gBrowser.selectedBrowser);
+ gZenViewSplitter.onLocationChange(gBrowser.selectedBrowser);
+ ZenWorkspaces.onLocationChange(gBrowser.selectedBrowser);
+ gZenTabUnloader.onLocationChange(gBrowser.selectedBrowser);
+ gZenGlanceManager.onLocationChange(gBrowser.selectedBrowser);
+
PictureInPicture.updateUrlbarToggle(gBrowser.selectedBrowser);
if (!gMultiProcessBrowser) {
@@ -4435,7 +4450,7 @@ nsBrowserAccess.prototype = {
@@ -4435,7 +4449,7 @@ nsBrowserAccess.prototype = {
// Passing a null-URI to only create the content window,
// and pass true for aSkipLoad to prevent loading of
// about:blank
@@ -47,7 +46,7 @@ index 9a65dcc7ad41ab961907c95338e023b173d4f474..9477e0c115ed3c4a670f1ac63846b6de
null,
aParams,
aWhere,
@@ -4443,6 +4458,10 @@ nsBrowserAccess.prototype = {
@@ -4443,6 +4457,10 @@ nsBrowserAccess.prototype = {
aName,
true
);
@@ -58,7 +57,7 @@ index 9a65dcc7ad41ab961907c95338e023b173d4f474..9477e0c115ed3c4a670f1ac63846b6de
},
openURIInFrame: function browser_openURIInFrame(
@@ -7281,6 +7300,12 @@ var gDialogBox = {
@@ -7285,6 +7303,12 @@ var gDialogBox = {
parentElement.showModal();
this._didOpenHTMLDialog = true;

16
src/browser/base/content/zen-styles/zen-glance.css
View File

@@ -31,15 +31,22 @@
padding: 5px;
gap: 12px;
right: 1%;
left: 3%;
& toolbarbutton {
width: 32px;
height: 32px;
background: var(--zen-dialog-background);
background: light-dark(rgba(0, 0, 0, 0.9), rgba(255, 255, 255, 0.9));
fill: light-dark(white, black);
transition: background 0.2s ease;
border-radius: 999px;
appearance: none;
box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.07);
opacity: 0;
&:hover {
background: light-dark(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));
}
& label {
display: none;
@@ -99,4 +106,9 @@
opacity: 0;
}
}
& browser[animate-glance-open='true'] {
transition: opacity 0.2s ease-in-out;
opacity: 0;
}
}

107
src/browser/base/zen-components/ZenGlanceManager.mjs
View File

@@ -9,6 +9,7 @@
init() {
window.addEventListener('keydown', this.onKeyDown.bind(this));
window.addEventListener('TabClose', this.onTabClose.bind(this));
window.addEventListener('TabSelect', this.onLocationChange.bind(this));
XPCOMUtils.defineLazyPreferenceGetter(
this._lazyPref,
@@ -106,8 +107,8 @@
if (this.sidebarButtons.hasAttribute('hidden') && animate) {
gZenUIManager.motion.animate(
this.sidebarButtons.querySelectorAll('toolbarbutton'),
{ x: [-50, 0], opacity: [0, 1] },
{ delay: gZenUIManager.motion.stagger(0.2) }
{ x: [50, 0], opacity: [0, 1] },
{ delay: gZenUIManager.motion.stagger(0.1) }
);
}
this.sidebarButtons.removeAttribute('hidden');
@@ -121,6 +122,12 @@
if (this.#currentBrowser) {
return;
}
if (gBrowser.selectedTab === this.#currentParentTab) {
gBrowser.selectedTab = this.#currentTab;
return;
}
this.animatingOpen = true;
this._animating = true;
const initialX = data.x;
const initialY = data.y;
@@ -135,26 +142,23 @@
const currentTab = ownerTab ?? gBrowser.selectedTab;
this.animatingOpen = true;
this._animating = true;
const browserElement = this.createBrowserElement(data.url, currentTab, existingTab);
this.fillOverlay(browserElement);
this.showSidebarButtons(true);
this.overlay.classList.add('zen-glance-overlay');
this.browserWrapper.removeAttribute('animate-end');
window.requestAnimationFrame(() => {
this.quickOpenGlance();
this.quickOpenGlance({ dontOpenButtons: true });
this.showSidebarButtons(true);
gZenUIManager.motion.animate(
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer'),
{
scale: 0.98,
backdropFilter: 'blur(5px)',
opacity: 0.6,
scale: [1, 0.98],
backdropFilter: ['blur(0px)', 'blur(5px)'],
opacity: [1, 0.5],
},
{
duration: 0.4,
@@ -162,7 +166,7 @@
bounce: 0.2,
}
);
this.#currentBrowser.setAttribute('animate-glance-open', true);
this.overlay.removeAttribute('fade-out');
this.browserWrapper.setAttribute('animate', true);
const top = initialY + initialHeight / 2;
@@ -191,12 +195,13 @@
opacity: 1,
},
{
duration: 0.4,
duration: 0.3,
type: 'spring',
bounce: 0.2,
}
)
.then(() => {
this.#currentBrowser.removeAttribute('animate-glance-open');
this.overlay.style.removeProperty('overflow');
this.browserWrapper.removeAttribute('animate');
this.browserWrapper.setAttribute('animate-end', true);
@@ -207,7 +212,7 @@
});
}
closeGlance({ noAnimation = false, onTabClose = false } = {}) {
closeGlance({ noAnimation = false, onTabClose = false, setNewID = null, isDifferent = false } = {}) {
if (this._animating || !this.#currentBrowser || this.animatingOpen || this._duringOpening) {
return;
}
@@ -240,15 +245,29 @@
this.overlay.style.pointerEvents = 'none';
this.quickCloseGlance({ justAnimateParent: true, clearID: false });
const originalPosition = this.#glances.get(this.#currentGlanceID).originalPosition;
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer').removeAttribute('style');
gZenUIManager.motion.animate(
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer'),
{
scale: [0.98, 1],
backdropFilter: ['blur(5px)', 'blur(0px)'],
opacity: [0.5, 1],
},
{
duration: 0.4,
type: 'spring',
bounce: 0.2,
}
).then(() => {
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer').removeAttribute('style');
});
gZenUIManager.motion
.animate(
this.browserWrapper,
{
...originalPosition,
opacity: 0,
opacity: 0.3,
},
{ type: 'spring', bounce: 0, duration: 0.7 }
{ type: 'spring', bounce: 0, duration: 0.4, easing: 'ease' }
)
.then(() => {
this.browserWrapper.removeAttribute('animate');
@@ -282,8 +301,13 @@
this.lastCurrentTab._closingGlance = true;
gBrowser.tabContainer._invalidateCachedTabs();
gBrowser.selectedTab = this.#currentParentTab;
gBrowser.removeTab(this.lastCurrentTab, { animate: false });
const prevSelected = gBrowser.selectedTab;
if (!isDifferent) {
gBrowser.selectedTab = this.#currentParentTab;
}
if (!(onTabClose && prevSelected === this.lastCurrentTab)) {
gBrowser.removeTab(this.lastCurrentTab, { animate: true });
}
this.#currentBrowser.remove();
setTimeout(() => {
@@ -293,23 +317,27 @@
this.#currentParentTab.removeAttribute('glance-id');
this.#glances.delete(this.#currentGlanceID);
this.#currentGlanceID = null;
this.#currentGlanceID = setNewID;
this.lastCurrentTab = null;
this._duringOpening = false;
this._animating = false;
if (this.#currentGlanceID) {
this.quickOpenGlance();
}
});
}
quickOpenGlance() {
quickOpenGlance({ dontOpenButtons = false } = {}) {
if (!this.#currentBrowser || this._duringOpening) {
return;
}
this._duringOpening = true;
this.showSidebarButtons();
gBrowser.selectedTab = this.#currentTab;
if (!dontOpenButtons) {
this.showSidebarButtons();
}
const parentBrowserContainer = this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer');
parentBrowserContainer.classList.add('zen-glance-background');
@@ -323,9 +351,11 @@
this.fillOverlay(this.#currentBrowser);
this.#currentParentTab._visuallySelected = true;
setTimeout(() => {
// just to make sure
parentBrowserContainer.classList.add('deck-selected');
this.#currentParentTab._visuallySelected = true;
setTimeout(() => {
// just to make sure
parentBrowserContainer.classList.add('deck-selected');
this.#currentParentTab._visuallySelected = true;
}, 0);
}, 0);
this.overlay.classList.add('deck-selected');
@@ -337,7 +367,7 @@
quickCloseGlance({ closeCurrentTab = true, closeParentTab = true, justAnimateParent = false, clearID = true } = {}) {
const parentHasBrowser = !!this.#currentParentTab.linkedBrowser;
this.hideSidebarButtons();
if (!justAnimateParent) {
if (!justAnimateParent && this.overlay) {
if (parentHasBrowser) {
if (closeParentTab) {
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer').classList.remove('deck-selected');
@@ -367,9 +397,15 @@
}
}
onLocationChangeOpenGlance() {
if (!this.animatingOpen) {
this.quickOpenGlance();
}
}
// note: must be async to avoid timing issues
onLocationChange(browser) {
const tab = gBrowser.getTabForBrowser(browser);
onLocationChange(event) {
const tab = event.target;
if (this.animatingFullOpen) {
return;
}
@@ -388,8 +424,8 @@
setTimeout(() => {
gBrowser.selectedTab = curTab;
}, 0);
} else if (gBrowser.selectedTab === this.#currentTab && this.#currentParentTab) {
setTimeout(this.quickOpenGlance.bind(this), 0);
} else if (gBrowser.selectedTab === this.#currentTab) {
setTimeout(this.onLocationChangeOpenGlance.bind(this), 0);
}
}
@@ -409,13 +445,10 @@
this._ignoreClose = false;
return false;
}
this._ignoreClose = true;
this.closeGlance({ noAnimation: isDifferent, onTabClose: true });
if (isDifferent) {
this.#currentGlanceID = oldGlanceID;
}
this._ignoreClose = isDifferent;
this.closeGlance({ onTabClose: true, setNewID: isDifferent ? oldGlanceID : null, isDifferent });
// only keep continueing tab close if we are not on the currently selected tab
return !isDifferent;
return true;
}
return false;
}

11
src/browser/components/tabbrowser/content/tabs-js.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
index 8aeb244ffca9f48661805f5b7d860b5896055562..e07019130c199401702889c6765434de0bd708a2 100644
index 8aeb244ffca9f48661805f5b7d860b5896055562..566fe3b925738589910598d0242931dd680a8d1e 100644
--- a/browser/components/tabbrowser/content/tabs.js
+++ b/browser/components/tabbrowser/content/tabs.js
@@ -94,7 +94,7 @@
@@ -204,11 +204,11 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..e07019130c199401702889c6765434de
}
- let tabs = this.visibleTabs.slice(0, gBrowser.pinnedTabCount);
+ let tabs = this.visibleTabs.slice(0, gBrowser._numVisiblePinTabs);
+ let tabs = this.visibleTabs.slice(0, gBrowser._numVisiblePinTabs).filter(tab => !tab.hasAttribute("zen-glance-tab"));
let directionX = screenX > dragData.animLastScreenX;
let directionY = screenY > dragData.animLastScreenY;
@@ -2257,9 +2281,9 @@
@@ -2257,11 +2281,11 @@
}
let pinned = draggedTab.pinned;
@@ -218,8 +218,11 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..e07019130c199401702889c6765434de
- pinned ? 0 : numPinned,
+ pinned ? gBrowser._numZenEssentials : numPinned,
pinned ? numPinned : undefined
);
- );
+ ).filter(tab => !tab.hasAttribute("zen-glance-tab"));
if (this.#rtlMode) {
tabs.reverse();
@@ -2502,8 +2526,9 @@
);
}