Refactor ZenGlanceManager.mjs to handle opening and closing of glance with Escape key

This commit is contained in:
mr. M 2024-10-31 22:18:28 +01:00
parent c8ab57a01e
commit ec38032192
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB

View file

@ -9,56 +9,15 @@
init() { init() {
document.documentElement.setAttribute("zen-glance-uuid", gZenUIManager.generateUuidv4()); document.documentElement.setAttribute("zen-glance-uuid", gZenUIManager.generateUuidv4());
ChromeUtils.defineLazyGetter(
this,
'overlay',
() => document.getElementById('zen-glance-overlay')
);
ChromeUtils.defineLazyGetter(
this,
'browserWrapper',
() => document.getElementById('zen-glance-browser-container')
);
ChromeUtils.defineLazyGetter(
this,
'browser',
() => document.getElementById('zen-glance-browser')
);
ChromeUtils.defineLazyGetter(
this,
'contentWrapper',
() => document.getElementById('zen-glance-content')
);
ChromeUtils.defineLazyGetter(
this,
'loadingBar',
() => document.getElementById('zen-glance-loading')
);
this.originalOverlayParent = this.overlay.parentNode;
window.addEventListener("keydown", this.onKeyDown.bind(this)); window.addEventListener("keydown", this.onKeyDown.bind(this));
this.initProgressListener(); ChromeUtils.defineLazyGetter(
} this,
'sidebarButtons',
() => document.getElementById('zen-glance-sidebar-container')
);
initProgressListener() { window.addEventListener("unload", this.onUnload.bind(this));
this.progressListener = {
QueryInterface: ChromeUtils.generateQI(['nsIWebProgressListener', 'nsISupportsWeakReference']),
onLocationChange: function (aWebProgress, aRequest, aLocation, aFlags) {
this.loadingBar.removeAttribute("not-loading");
if (aWebProgress.isLoadingDocument) {
this.loadingBar.removeAttribute("loading");
return;
}
this.loadingBar.setAttribute("loading", true);
}.bind(this),
};
} }
onKeyDown(event) { onKeyDown(event) {
@ -75,18 +34,29 @@
} }
} }
onUnload() {
// clear everything
if (this.#currentBrowser) {
gBrowser.removeTab(this.#currentTab, {
animate: false,
});
}
}
createBrowserElement(url, currentTab) { createBrowserElement(url, currentTab) {
console.log(url);
const newTabOptions = { const newTabOptions = {
userContextId: currentTab.getAttribute("usercontextid") || "", userContextId: currentTab.getAttribute("usercontextid") || "",
skipBackgroundNotify: true, skipBackgroundNotify: true,
bulkOrderedOpen: true, insertTab: true,
insertTab: false,
skipLoad: false, skipLoad: false,
index: currentTab._tPos + 1,
}; };
gBrowser.zenGlanceBrowser = true; this.currentParentTab = currentTab;
const newTab = gBrowser.addTrustedTab(Services.io.newURI(url).spec, newTabOptions); const newTab = gBrowser.addTrustedTab(Services.io.newURI(url).spec, newTabOptions);
document.getElementById("zen-glance-tabs").appendChild(newTab);
gBrowser.selectedTab = newTab;
currentTab.querySelector(".tab-content").appendChild(newTab);
this.#currentBrowser = newTab.linkedBrowser; this.#currentBrowser = newTab.linkedBrowser;
this.#currentTab = newTab; this.#currentTab = newTab;
return this.#currentBrowser; return this.#currentBrowser;
@ -102,31 +72,30 @@
const initialWidth = data.width; const initialWidth = data.width;
const initialHeight = data.height; const initialHeight = data.height;
this.browserWrapper.removeAttribute("animate"); this.browserWrapper?.removeAttribute("animate");
this.browserWrapper.removeAttribute("animate-end"); this.browserWrapper?.removeAttribute("animate-end");
this.browserWrapper.removeAttribute("animate-full"); this.browserWrapper?.removeAttribute("animate-full");
this.browserWrapper.removeAttribute("animate-full-end"); this.browserWrapper?.removeAttribute("animate-full-end");
this.browserWrapper.removeAttribute("has-finished-animation"); this.browserWrapper?.removeAttribute("has-finished-animation");
const url = data.url; const url = data.url;
const currentTab = gBrowser.selectedTab; const currentTab = gBrowser.selectedTab;
const overlayWrapper = document.getElementById("tabbrowser-tabbox");
overlayWrapper.prepend(this.overlay);
this.animatingOpen = true;
const browserElement = this.createBrowserElement(url, currentTab); const browserElement = this.createBrowserElement(url, currentTab);
browserElement.zenModeActive = true;
browserElement.addProgressListener(this.progressListener, Ci.nsIWebProgress.NOTIFY_LOCATION); this.overlay = browserElement.closest(".browserSidebarContainer");
browserElement.loadURI(Services.io.newURI(url), { this.browserWrapper = browserElement.closest(".browserContainer");
triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal(), this.contentWrapper = browserElement.closest(".browserStack");
});
browserElement.docShellIsActive = true; this.browserWrapper.prepend(this.sidebarButtons);
this.overlay.classList.add("zen-glance-overlay");
this.loadingBar.setAttribute("not-loading", true);
this.loadingBar.removeAttribute("loading");
this.browserWrapper.removeAttribute("animate-end"); this.browserWrapper.removeAttribute("animate-end");
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
this.quickOpenGlance();
this.browserWrapper.style.setProperty("--initial-x", `${initialX}px`); this.browserWrapper.style.setProperty("--initial-x", `${initialX}px`);
this.browserWrapper.style.setProperty("--initial-y", `${initialY}px`); this.browserWrapper.style.setProperty("--initial-y", `${initialY}px`);
this.browserWrapper.style.setProperty("--initial-width", initialWidth + "px"); this.browserWrapper.style.setProperty("--initial-width", initialWidth + "px");
@ -140,39 +109,21 @@
this.browserWrapper.setAttribute("animate-end", true); this.browserWrapper.setAttribute("animate-end", true);
this.browserWrapper.setAttribute("has-finished-animation", true); this.browserWrapper.setAttribute("has-finished-animation", true);
this.#animating = false; this.#animating = false;
this.animatingOpen = false;
}, 400); }, 400);
}); });
} }
closeGlance({ noAnimation = false } = {}) { closeGlance({ noAnimation = false } = {}) {
if (this.#animating || !this.#currentBrowser) { if (this.#animating || !this.#currentBrowser || this.animatingOpen) {
return; return;
} }
this.browserWrapper.removeAttribute("has-finished-animation"); this.browserWrapper.removeAttribute("has-finished-animation");
if (noAnimation) { if (noAnimation) {
this.overlay.style.opacity = 0; this.quickCloseGlance({ closeCurrentTab: false });
this.overlay.visivility = "collapse";
window.requestAnimationFrame(() => {
this.overlay.setAttribute("hidden", true);
this.overlay.removeAttribute("fade-out");
this.browserWrapper.removeAttribute("animate");
this.browserWrapper.removeAttribute("animate-end");
setTimeout(() => {
this.#currentBrowser?.destroy();
this.#currentBrowser?.remove();
this.#currentTab?.remove();
this.#currentBrowser = null; this.#currentBrowser = null;
this.#currentTab = null; this.#currentTab = null;
this.originalOverlayParent.appendChild(this.overlay);
this.overlay.style.opacity = 1;
this.overlay.visivility = "visible";
this.#animating = false;
}, 500);
});
return; return;
} }
@ -184,48 +135,93 @@
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
this.browserWrapper.setAttribute("animate", true); this.browserWrapper.setAttribute("animate", true);
setTimeout(() => { setTimeout(() => {
this.quickCloseGlance({ closeParentTab: false });
this.overlay.setAttribute("hidden", true); this.overlay.setAttribute("hidden", true);
this.overlay.removeAttribute("fade-out"); this.overlay.removeAttribute("fade-out");
this.browserWrapper.removeAttribute("animate"); this.browserWrapper.removeAttribute("animate");
this.#currentBrowser?.remove(); this.#currentTab.setAttribute("hidden", true);
// remove the tab to avoid memory leaks
this.#currentTab?.remove();
this.#currentBrowser = null;
this.#currentTab = null;
this.originalOverlayParent.appendChild(this.overlay); this.#currentBrowser = null;
this.lastCurrentTab = this.#currentTab;
this.#currentTab = null;
this.currentParentTab = null;
gBrowser.selectedTab = this.currentParentTab;
setTimeout(() => {
gBrowser.removeTab(this.lastCurrentTab);
}, 100);
}, 500); }, 500);
}); });
}); });
} }
onLocationChange(_) { quickOpenGlance() {
if (!this.animatingFullOpen) { if (!this.#currentBrowser || this._duringOpening) {
this.closeGlance();
return; return;
} }
this._duringOpening = true;
try {
gBrowser.selectedTab = this.#currentTab;
} catch (e) {}
this.currentParentTab.linkedBrowser.closest(".browserSidebarContainer").classList.add("deck-selected");
this.currentParentTab.linkedBrowser.zenModeActive = true;
this.#currentBrowser.zenModeActive = true;
this.currentParentTab.linkedBrowser.docShellIsActive = true;
this.#currentBrowser.docShellIsActive = true;
this.#currentBrowser.setAttribute("zen-glance-selected", true);
this.currentParentTab.linkedBrowser.closest(".browserSidebarContainer").classList.add("zen-glance-background");
this._duringOpening = false;
}
quickCloseGlance({ closeCurrentTab = true, closeParentTab = true } = {}) {
if (closeParentTab) {
this.currentParentTab.linkedBrowser.closest(".browserSidebarContainer").classList.remove("deck-selected");
}
this.currentParentTab.linkedBrowser.zenModeActive = false;
this.#currentBrowser.zenModeActive = false;
if (closeParentTab) {
this.currentParentTab.linkedBrowser.docShellIsActive = false;
}
if (closeCurrentTab) {
this.#currentBrowser.docShellIsActive = false;
}
this.#currentBrowser.removeAttribute("zen-glance-selected");
this.currentParentTab.linkedBrowser.closest(".browserSidebarContainer").classList.remove("zen-glance-background");
}
onLocationChange(_) {
if (this._duringOpening) {
return;
}
if (gBrowser.selectedTab === this.#currentTab && !this.animatingOpen && !this._duringOpening && this.#currentBrowser) {
this.quickOpenGlance();
return;
}
if (gBrowser.selectedTab === this.currentParentTab && this.#currentBrowser) {
this.quickOpenGlance();
} else if ((!this.animatingFullOpen || this.animatingOpen) && this.#currentBrowser) {
this.closeGlance();
}
} }
fullyOpenGlance() { fullyOpenGlance() {
const newTabOptions = { gBrowser._insertTabAtIndex(this.#currentTab, {
userContextId: this.#currentTab.getAttribute("usercontextid") || "", index: this.#currentTab._tPos + 1,
skipLoad: true, });
ownerTab: this.#currentTab,
preferredRemoteType: this.#currentTab.linkedBrowser.remoteType,
};
const newTab = gBrowser.duplicateTab(this.#currentTab, true, newTabOptions);
this.animatingFullOpen = true; this.animatingFullOpen = true;
this.browserWrapper.removeAttribute("has-finished-animation"); this.browserWrapper.removeAttribute("has-finished-animation");
this.browserWrapper.setAttribute("animate-full", true); this.browserWrapper.setAttribute("animate-full", true);
gBrowser.selectedTab = this.#currentTab;
setTimeout(() => { setTimeout(() => {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
this.browserWrapper.setAttribute("animate-full-end", true); this.browserWrapper.setAttribute("animate-full-end", true);
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
gBrowser.selectedTab = newTab;
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
setTimeout(() => { setTimeout(() => {
this.animatingFullOpen = false; this.animatingFullOpen = false;