ZenBrowserMirrors/components
1
0
Fork 0
mirror of https://github.com/zen-browser/components.git synced 2025-07-08 15:20:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #5 from bhaveshdaipuria/fix/web-panel-title-unload-bug

Browse source 
fix: remove title from web panel on unload
This commit is contained in:
mauro 🤙 2024-08-28 10:34:44 +02:00 • committed by GitHub
commit fc03a308a4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 191 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

296
src/ZenSidebarManager.mjs
View file

@ -1,4 +1,3 @@
var gZenBrowserManagerSidebar = { var gZenBrowserManagerSidebar = {
_sidebarElement: null, _sidebarElement: null,
_currentPanel: null, _currentPanel: null,
@ -10,7 +9,8 @@ var gZenBrowserManagerSidebar = {
_isDragging: false, _isDragging: false,
contextTab: null, contextTab: null,
DEFAULT_MOBILE_USER_AGENT: "Mozilla/5.0 (Android 12; Mobile; rv:129.0) Gecko/20100101 Firefox/129.0", DEFAULT_MOBILE_USER_AGENT:
"Mozilla/5.0 (Android 12; Mobile; rv:129.0) Gecko/20100101 Firefox/129.0",
MAX_SIDEBAR_PANELS: 8, // +1 for the add panel button MAX_SIDEBAR_PANELS: 8, // +1 for the add panel button
MAX_RUNS: 3, MAX_RUNS: 3,
@ -35,77 +35,100 @@ var gZenBrowserManagerSidebar = {
listenForPrefChanges() { listenForPrefChanges() {
Services.prefs.addObserver("zen.sidebar.data", this.handleEvent.bind(this)); Services.prefs.addObserver("zen.sidebar.data", this.handleEvent.bind(this));
Services.prefs.addObserver("zen.sidebar.enabled", this.handleEvent.bind(this)); Services.prefs.addObserver(
"zen.sidebar.enabled",
this.handleEvent.bind(this)
);
let sidebar = document.getElementById("zen-sidebar-web-panel"); let sidebar = document.getElementById("zen-sidebar-web-panel");
this.splitterElement.addEventListener("mousedown", (function(event) { this.splitterElement.addEventListener(
let computedStyle = window.getComputedStyle(sidebar); "mousedown",
let maxWidth = parseInt(computedStyle.getPropertyValue("max-width").replace("px", "")); function (event) {
let minWidth = parseInt(computedStyle.getPropertyValue("min-width").replace("px", "")); let computedStyle = window.getComputedStyle(sidebar);
let maxWidth = parseInt(
computedStyle.getPropertyValue("max-width").replace("px", "")
);
let minWidth = parseInt(
computedStyle.getPropertyValue("min-width").replace("px", "")
);
if (!this._isDragging) { // Prevent multiple resizes if (!this._isDragging) {
this._isDragging = true; // Prevent multiple resizes
let sidebarWidth = sidebar.getBoundingClientRect().width; this._isDragging = true;
let startX = event.clientX; let sidebarWidth = sidebar.getBoundingClientRect().width;
let startWidth = sidebarWidth; let startX = event.clientX;
let mouseMove = (function(e) { let startWidth = sidebarWidth;
let newWidth = startWidth + e.clientX - startX; let mouseMove = function (e) {
if (newWidth <= minWidth+10) { let newWidth = startWidth + e.clientX - startX;
newWidth = minWidth+1; if (newWidth <= minWidth + 10) {
} else if (newWidth >= maxWidth-10) { newWidth = minWidth + 1;
newWidth = maxWidth-1; } else if (newWidth >= maxWidth - 10) {
} newWidth = maxWidth - 1;
sidebar.style.width = `${newWidth}px`; }
}); sidebar.style.width = `${newWidth}px`;
let mouseUp = (function() { };
this.handleEvent(); let mouseUp = function () {
this._isDragging = false; this.handleEvent();
document.removeEventListener("mousemove", mouseMove); this._isDragging = false;
document.removeEventListener("mouseup", mouseUp); document.removeEventListener("mousemove", mouseMove);
}).bind(this); document.removeEventListener("mouseup", mouseUp);
document.addEventListener("mousemove", mouseMove); }.bind(this);
document.addEventListener("mouseup", mouseUp); document.addEventListener("mousemove", mouseMove);
} document.addEventListener("mouseup", mouseUp);
}).bind(this)); }
}.bind(this)
);
this.hSplitterElement.addEventListener("mousedown", (function(event) { this.hSplitterElement.addEventListener(
let computedStyle = window.getComputedStyle(sidebar); "mousedown",
const parent = sidebar.parentElement; function (event) {
// relative to avoid the top margin let computedStyle = window.getComputedStyle(sidebar);
// 20px is the padding const parent = sidebar.parentElement;
let parentRelativeHeight = parent.getBoundingClientRect().height - parent.getBoundingClientRect().top // relative to avoid the top margin
+ sidebar.getBoundingClientRect().top - 20; // 20px is the padding
let minHeight = parseInt(computedStyle.getPropertyValue("min-height").replace("px", "")); let parentRelativeHeight =
if (!this._isDragging) { // Prevent multiple resizes parent.getBoundingClientRect().height -
this._isDragging = true; parent.getBoundingClientRect().top +
let sidebarHeight = sidebar.getBoundingClientRect().height; sidebar.getBoundingClientRect().top -
let startY = event.clientY; 20;
let startHeight = sidebarHeight; let minHeight = parseInt(
let mouseMove = (function(e) { computedStyle.getPropertyValue("min-height").replace("px", "")
let newHeight = startHeight + e.clientY - startY; );
if (newHeight <= minHeight+10) { if (!this._isDragging) {
newHeight = minHeight+1; // Prevent multiple resizes
} else if (newHeight >= parentRelativeHeight) { // 10px is the padding this._isDragging = true;
newHeight = parentRelativeHeight; let sidebarHeight = sidebar.getBoundingClientRect().height;
} let startY = event.clientY;
sidebar.style.height = `${newHeight}px`; let startHeight = sidebarHeight;
}); let mouseMove = function (e) {
let mouseUp = (function() { let newHeight = startHeight + e.clientY - startY;
this.handleEvent(); if (newHeight <= minHeight + 10) {
this._isDragging = false; newHeight = minHeight + 1;
document.removeEventListener("mousemove", mouseMove); } else if (newHeight >= parentRelativeHeight) {
document.removeEventListener("mouseup", mouseUp); // 10px is the padding
}).bind(this); newHeight = parentRelativeHeight;
document.addEventListener("mousemove", mouseMove); }
document.addEventListener("mouseup", mouseUp); sidebar.style.height = `${newHeight}px`;
} };
}).bind(this)); let mouseUp = function () {
this.handleEvent();
this._isDragging = false;
document.removeEventListener("mousemove", mouseMove);
document.removeEventListener("mouseup", mouseUp);
}.bind(this);
document.addEventListener("mousemove", mouseMove);
document.addEventListener("mouseup", mouseUp);
}
}.bind(this)
);
this.handleEvent(); this.handleEvent();
}, },
get isFloating() { get isFloating() {
return document.getElementById("zen-sidebar-web-panel").hasAttribute("pinned"); return document
.getElementById("zen-sidebar-web-panel")
.hasAttribute("pinned");
}, },
handleEvent() { handleEvent() {
@ -136,7 +159,11 @@ var gZenBrowserManagerSidebar = {
_handleClickOutside(event) { _handleClickOutside(event) {
let sidebar = document.getElementById("zen-sidebar-web-panel"); let sidebar = document.getElementById("zen-sidebar-web-panel");
if (!sidebar.hasAttribute("pinned") || this._isDragging || !this.shouldCloseOnBlur) { if (
!sidebar.hasAttribute("pinned") ||
this._isDragging ||
!this.shouldCloseOnBlur
) {
return; return;
} }
let target = event.target; let target = event.target;
@ -145,7 +172,7 @@ var gZenBrowserManagerSidebar = {
"#zen-sidebar-panels-wrapper", "#zen-sidebar-panels-wrapper",
"#zenWebPanelContextMenu", "#zenWebPanelContextMenu",
"#zen-sidebar-web-panel-splitter", "#zen-sidebar-web-panel-splitter",
"#contentAreaContextMenu" "#contentAreaContextMenu",
].join(", "); ].join(", ");
if (target.closest(closestSelector)) { if (target.closest(closestSelector)) {
return; return;
@ -157,7 +184,9 @@ var gZenBrowserManagerSidebar = {
if (!this._currentPanel) { if (!this._currentPanel) {
this._currentPanel = this._lastOpenedPanel; this._currentPanel = this._lastOpenedPanel;
} }
if (document.getElementById("zen-sidebar-web-panel").hasAttribute("hidden")) { if (
document.getElementById("zen-sidebar-web-panel").hasAttribute("hidden")
) {
this.open(); this.open();
return; return;
} }
@ -179,7 +208,9 @@ var gZenBrowserManagerSidebar = {
_updateSidebarButton() { _updateSidebarButton() {
let button = document.getElementById("zen-sidepanel-button"); let button = document.getElementById("zen-sidepanel-button");
if (!document.getElementById("zen-sidebar-web-panel").hasAttribute("hidden")) { if (
!document.getElementById("zen-sidebar-web-panel").hasAttribute("hidden")
) {
button.setAttribute("open", "true"); button.setAttribute("open", "true");
} else { } else {
button.removeAttribute("open"); button.removeAttribute("open");
@ -206,7 +237,11 @@ var gZenBrowserManagerSidebar = {
continue; continue;
} }
let button = document.createXULElement("toolbarbutton"); let button = document.createXULElement("toolbarbutton");
button.classList.add("zen-sidebar-panel-button", "toolbarbutton-1", "chromeclass-toolbar-additional"); button.classList.add(
"zen-sidebar-panel-button",
"toolbarbutton-1",
"chromeclass-toolbar-additional"
);
button.setAttribute("flex", "1"); button.setAttribute("flex", "1");
button.setAttribute("zen-sidebar-id", site); button.setAttribute("zen-sidebar-id", site);
button.setAttribute("context", "zenWebPanelContextMenu"); button.setAttribute("context", "zenWebPanelContextMenu");
@ -237,13 +272,17 @@ var gZenBrowserManagerSidebar = {
_setPinnedToElements() { _setPinnedToElements() {
let sidebar = document.getElementById("zen-sidebar-web-panel"); let sidebar = document.getElementById("zen-sidebar-web-panel");
sidebar.setAttribute("pinned", "true"); sidebar.setAttribute("pinned", "true");
document.getElementById("zen-sidebar-web-panel-pinned").setAttribute("pinned", "true"); document
.getElementById("zen-sidebar-web-panel-pinned")
.setAttribute("pinned", "true");
}, },
_removePinnedFromElements() { _removePinnedFromElements() {
let sidebar = document.getElementById("zen-sidebar-web-panel"); let sidebar = document.getElementById("zen-sidebar-web-panel");
sidebar.removeAttribute("pinned"); sidebar.removeAttribute("pinned");
document.getElementById("zen-sidebar-web-panel-pinned").removeAttribute("pinned"); document
.getElementById("zen-sidebar-web-panel-pinned")
.removeAttribute("pinned");
}, },
_closeSidebarPanel() { _closeSidebarPanel() {
@ -277,7 +316,9 @@ var gZenBrowserManagerSidebar = {
}, },
_updateButtons() { _updateButtons() {
for (let button of this.sidebarElement.querySelectorAll(".zen-sidebar-panel-button")) { for (let button of this.sidebarElement.querySelectorAll(
".zen-sidebar-panel-button"
)) {
if (button.getAttribute("zen-sidebar-id") === this._currentPanel) { if (button.getAttribute("zen-sidebar-id") === this._currentPanel) {
button.setAttribute("selected", "true"); button.setAttribute("selected", "true");
} else { } else {
@ -300,7 +341,7 @@ var gZenBrowserManagerSidebar = {
_updateWebPanel() { _updateWebPanel() {
this._updateButtons(); this._updateButtons();
let sidebar = document.getElementById("zen-sidebar-web-panel"); // let sidebar = document.getElementById("zen-sidebar-web-panel");
this._hideAllWebPanels(); this._hideAllWebPanels();
if (!this._currentPanel) { if (!this._currentPanel) {
this.introductionPanel.removeAttribute("hidden"); this.introductionPanel.removeAttribute("hidden");
@ -311,12 +352,15 @@ var gZenBrowserManagerSidebar = {
if (existantWebview) { if (existantWebview) {
existantWebview.docShellIsActive = true; existantWebview.docShellIsActive = true;
existantWebview.removeAttribute("hidden"); existantWebview.removeAttribute("hidden");
document.getElementById("zen-sidebar-web-panel-title").textContent = existantWebview.contentTitle; document.getElementById("zen-sidebar-web-panel-title").textContent =
existantWebview.contentTitle;
return; return;
} }
let data = this._getWebPanelData(this._currentPanel); let data = this._getWebPanelData(this._currentPanel);
let browser = this._createWebPanelBrowser(data); let browser = this._createWebPanelBrowser(data);
let browserContainers = document.getElementById("zen-sidebar-web-panel-browser-containers"); let browserContainers = document.getElementById(
"zen-sidebar-web-panel-browser-containers"
);
browserContainers.appendChild(browser); browserContainers.appendChild(browser);
if (data.ua) { if (data.ua) {
browser.browsingContext.customUserAgent = this.DEFAULT_MOBILE_USER_AGENT; browser.browsingContext.customUserAgent = this.DEFAULT_MOBILE_USER_AGENT;
@ -337,7 +381,9 @@ var gZenBrowserManagerSidebar = {
}, },
_createWebPanelBrowser(data) { _createWebPanelBrowser(data) {
const titleContainer = document.getElementById("zen-sidebar-web-panel-title"); const titleContainer = document.getElementById(
"zen-sidebar-web-panel-title"
);
titleContainer.textContent = "Loading..."; titleContainer.textContent = "Loading...";
let browser = gBrowser.createBrowser({}); let browser = gBrowser.createBrowser({});
browser.setAttribute("disablefullscreen", "true"); browser.setAttribute("disablefullscreen", "true");
@ -346,28 +392,33 @@ var gZenBrowserManagerSidebar = {
browser.setAttribute("autoscroll", "false"); browser.setAttribute("autoscroll", "false");
browser.setAttribute("autocompletepopup", "PopupAutoComplete"); browser.setAttribute("autocompletepopup", "PopupAutoComplete");
browser.setAttribute("contextmenu", "contentAreaContextMenu"); browser.setAttribute("contextmenu", "contentAreaContextMenu");
browser.addEventListener("pagetitlechanged", (function(event) { browser.addEventListener(
let browser = event.target; "pagetitlechanged",
let title = browser.contentTitle; function (event) {
if (!title) { let browser = event.target;
return; let title = browser.contentTitle;
} if (!title) {
let id = browser.getAttribute("zen-sidebar-id"); return;
if (id === this._currentPanel) { }
titleContainer.textContent = title; let id = browser.getAttribute("zen-sidebar-id");
} if (id === this._currentPanel) {
}).bind(this)); titleContainer.textContent = title;
}
}.bind(this)
);
return browser; return browser;
}, },
_getWebPanelIcon(url, element) { _getWebPanelIcon(url, element) {
let { preferredURI } = Services.uriFixup.getFixupURIInfo(url); let { preferredURI } = Services.uriFixup.getFixupURIInfo(url);
element.setAttribute("image", `page-icon:${preferredURI.spec}`); element.setAttribute("image", `page-icon:${preferredURI.spec}`);
fetch(`https://s2.googleusercontent.com/s2/favicons?domain_url=${preferredURI.spec}`).then(async response => { fetch(
`https://s2.googleusercontent.com/s2/favicons?domain_url=${preferredURI.spec}`
).then(async (response) => {
if (response.ok) { if (response.ok) {
let blob = await response.blob(); let blob = await response.blob();
let reader = new FileReader(); let reader = new FileReader();
reader.onload = function() { reader.onload = function () {
element.setAttribute("image", reader.result); element.setAttribute("image", reader.result);
}; };
reader.readAsDataURL(blob); reader.readAsDataURL(blob);
@ -430,21 +481,27 @@ var gZenBrowserManagerSidebar = {
get sidebarElement() { get sidebarElement() {
if (!this._sidebarElement) { if (!this._sidebarElement) {
this._sidebarElement = document.getElementById("zen-sidebar-panels-sites"); this._sidebarElement = document.getElementById(
"zen-sidebar-panels-sites"
);
} }
return this._sidebarElement; return this._sidebarElement;
}, },
get splitterElement() { get splitterElement() {
if (!this._splitterElement) { if (!this._splitterElement) {
this._splitterElement = document.getElementById("zen-sidebar-web-panel-splitter"); this._splitterElement = document.getElementById(
"zen-sidebar-web-panel-splitter"
);
} }
return this._splitterElement; return this._splitterElement;
}, },
get hSplitterElement() { get hSplitterElement() {
if (!this._hSplitterElement) { if (!this._hSplitterElement) {
this._hSplitterElement = document.getElementById("zen-sidebar-web-panel-hsplitter"); this._hSplitterElement = document.getElementById(
"zen-sidebar-web-panel-hsplitter"
);
} }
return this._hSplitterElement; return this._hSplitterElement;
}, },
@ -454,7 +511,8 @@ var gZenBrowserManagerSidebar = {
updateContextMenu(aPopupMenu) { updateContextMenu(aPopupMenu) {
let panel = let panel =
aPopupMenu.triggerNode && aPopupMenu.triggerNode &&
(aPopupMenu.triggerNode || aPopupMenu.triggerNode.closest("toolbarbutton[zen-sidebar-id]")); (aPopupMenu.triggerNode ||
aPopupMenu.triggerNode.closest("toolbarbutton[zen-sidebar-id]"));
if (!panel) { if (!panel) {
return; return;
} }
@ -463,20 +521,34 @@ var gZenBrowserManagerSidebar = {
let data = this._getWebPanelData(id); let data = this._getWebPanelData(id);
let browser = this._getBrowserById(id); let browser = this._getBrowserById(id);
let isMuted = browser && browser.audioMuted; let isMuted = browser && browser.audioMuted;
let mutedContextItem = document.getElementById("context_zenToggleMuteWebPanel"); let mutedContextItem = document.getElementById(
document.l10n.setAttributes(mutedContextItem, "context_zenToggleMuteWebPanel"
!isMuted ? "zen-web-side-panel-context-mute-panel" : "zen-web-side-panel-context-unmute-panel"); );
document.l10n.setAttributes(
mutedContextItem,
!isMuted
? "zen-web-side-panel-context-mute-panel"
: "zen-web-side-panel-context-unmute-panel"
);
if (!isMuted) { if (!isMuted) {
mutedContextItem.setAttribute("muted", "true"); mutedContextItem.setAttribute("muted", "true");
} else { } else {
mutedContextItem.removeAttribute("muted"); mutedContextItem.removeAttribute("muted");
} }
document.l10n.setAttributes(document.getElementById("context_zenToogleUAWebPanel"), document.l10n.setAttributes(
data.ua ? "zen-web-side-panel-context-disable-ua" : "zen-web-side-panel-context-enable-ua"); document.getElementById("context_zenToogleUAWebPanel"),
data.ua
? "zen-web-side-panel-context-disable-ua"
: "zen-web-side-panel-context-enable-ua"
);
if (!browser) { if (!browser) {
document.getElementById("context_zenUnloadWebPanel").setAttribute("disabled", "true"); document
.getElementById("context_zenUnloadWebPanel")
.setAttribute("disabled", "true");
} else { } else {
document.getElementById("context_zenUnloadWebPanel").removeAttribute("disabled"); document
.getElementById("context_zenUnloadWebPanel")
.removeAttribute("disabled");
} }
}, },
@ -484,7 +556,7 @@ var gZenBrowserManagerSidebar = {
let browser = this._getBrowserById(this.contextTab); let browser = this._getBrowserById(this.contextTab);
let data = this.sidebarData; let data = this.sidebarData;
let panel = data.data[this.contextTab]; let panel = data.data[this.contextTab];
let url = (browser == null) ? panel.url : browser.currentURI.spec; let url = browser == null ? panel.url : browser.currentURI.spec;
gZenUIManager.openAndChangeToTab(url); gZenUIManager.openAndChangeToTab(url);
this.close(); this.close();
}, },
@ -500,7 +572,10 @@ var gZenBrowserManagerSidebar = {
contextToggleUserAgent() { contextToggleUserAgent() {
let browser = this._getBrowserById(this.contextTab); let browser = this._getBrowserById(this.contextTab);
browser.browsingContext.customUserAgent = browser.browsingContext.customUserAgent ? null : this.DEFAULT_MOBILE_USER_AGENT; browser.browsingContext.customUserAgent = browser.browsingContext
.customUserAgent
? null
: this.DEFAULT_MOBILE_USER_AGENT;
let data = this.sidebarData; let data = this.sidebarData;
data.data[this.contextTab].ua = !data.data[this.contextTab].ua; data.data[this.contextTab].ua = !data.data[this.contextTab].ua;
Services.prefs.setStringPref("zen.sidebar.data", JSON.stringify(data)); Services.prefs.setStringPref("zen.sidebar.data", JSON.stringify(data));
@ -510,10 +585,11 @@ var gZenBrowserManagerSidebar = {
contextDelete() { contextDelete() {
let data = this.sidebarData; let data = this.sidebarData;
delete data.data[this.contextTab]; delete data.data[this.contextTab];
data.index = data.index.filter(id => id !== this.contextTab); data.index = data.index.filter((id) => id !== this.contextTab);
let browser = this._getBrowserById(this.contextTab); let browser = this._getBrowserById(this.contextTab);
if (browser) { if (browser) {
browser.remove(); browser.remove();
document.getElementById("zen-sidebar-web-panel-title").textContent = "";
} }
this._currentPanel = null; this._currentPanel = null;
this._lastOpenedPanel = null; this._lastOpenedPanel = null;
@ -524,6 +600,7 @@ var gZenBrowserManagerSidebar = {
contextUnload() { contextUnload() {
let browser = this._getBrowserById(this.contextTab); let browser = this._getBrowserById(this.contextTab);
browser.remove(); browser.remove();
document.getElementById("zen-sidebar-web-panel-title").textContent = "";
this._closeSidebarPanel(); this._closeSidebarPanel();
this.close(); this.close();
this._lastOpenedPanel = null; this._lastOpenedPanel = null;
@ -534,13 +611,20 @@ var gZenBrowserManagerSidebar = {
const menuitem = document.createXULElement("menuitem"); const menuitem = document.createXULElement("menuitem");
menuitem.setAttribute("id", "context-zenAddToWebPanel"); menuitem.setAttribute("id", "context-zenAddToWebPanel");
menuitem.setAttribute("hidden", "true"); menuitem.setAttribute("hidden", "true");
menuitem.setAttribute("oncommand", "gZenBrowserManagerSidebar.addPanelFromContextMenu();"); menuitem.setAttribute(
menuitem.setAttribute("data-l10n-id", "zen-web-side-panel-context-add-to-panel"); "oncommand",
"gZenBrowserManagerSidebar.addPanelFromContextMenu();"
);
menuitem.setAttribute(
"data-l10n-id",
"zen-web-side-panel-context-add-to-panel"
);
sibling.insertAdjacentElement("afterend", menuitem); sibling.insertAdjacentElement("afterend", menuitem);
}, },
addPanelFromContextMenu() { addPanelFromContextMenu() {
const url = gContextMenu.linkURL || gContextMenu.target.ownerDocument.location.href; const url =
gContextMenu.linkURL || gContextMenu.target.ownerDocument.location.href;
this._createNewPanel(url); this._createNewPanel(url);
}, },
}; };