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

Merge pull request #57 from HarryHeres/fix/workspaces-icon-picker

Browse source 
Fixing workspaces icon picker
This commit is contained in:
mr. m 🤙 2024-10-18 01:40:31 +03:00 • committed by GitHub
commit d853fa8de4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 107 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

196
src/ZenWorkspaces.mjs
View file

@ -20,15 +20,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
this._expandWorkspacesStrip.bind(this) this._expandWorkspacesStrip.bind(this)
); );
XPCOMUtils.defineLazyPreferenceGetter( XPCOMUtils.defineLazyPreferenceGetter(
this, this,
'shouldForceContainerTabsToWorkspace', 'shouldForceContainerTabsToWorkspace',
'zen.workspaces.force-container-workspace', 'zen.workspaces.force-container-workspace',
true true
); );
ChromeUtils.defineLazyGetter(this, 'tabContainer', () => document.getElementById('tabbrowser-tabs')); ChromeUtils.defineLazyGetter(this, 'tabContainer', () => document.getElementById('tabbrowser-tabs'));
this._activeWorkspace = Services.prefs.getStringPref('zen.workspaces.active', ''); this._activeWorkspace = Services.prefs.getStringPref('zen.workspaces.active', '');
await ZenWorkspacesStorage.init(); await ZenWorkspacesStorage.init();
if(!Weave.Service.engineManager.get("workspaces")) { if (!Weave.Service.engineManager.get('workspaces')) {
Weave.Service.engineManager.register(ZenWorkspacesEngine); Weave.Service.engineManager.register(ZenWorkspacesEngine);
await ZenWorkspacesStorage.migrateWorkspacesFromJSON(); await ZenWorkspacesStorage.migrateWorkspacesFromJSON();
} }
@ -36,7 +36,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
console.info('ZenWorkspaces: ZenWorkspaces initialized'); console.info('ZenWorkspaces: ZenWorkspaces initialized');
// Add observer for sync completion // Add observer for sync completion
Services.obs.addObserver(this, "weave:engine:sync:finish"); Services.obs.addObserver(this, 'weave:engine:sync:finish');
} }
get activeWorkspace() { get activeWorkspace() {
@ -49,16 +49,20 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
} }
async observe(subject, topic, data) { async observe(subject, topic, data) {
if (topic === "weave:engine:sync:finish" && data === "workspaces") { if (topic === 'weave:engine:sync:finish' && data === 'workspaces') {
try { try {
const lastChangeTimestamp = await ZenWorkspacesStorage.getLastChangeTimestamp(); const lastChangeTimestamp = await ZenWorkspacesStorage.getLastChangeTimestamp();
if (!this._workspaceCache || !this._workspaceCache.lastChangeTimestamp || lastChangeTimestamp > this._workspaceCache.lastChangeTimestamp) { if (
!this._workspaceCache ||
!this._workspaceCache.lastChangeTimestamp ||
lastChangeTimestamp > this._workspaceCache.lastChangeTimestamp
) {
this._workspaceCache = null; this._workspaceCache = null;
await this._propagateWorkspaceData(); await this._propagateWorkspaceData();
} }
} catch (error) { } catch (error) {
console.error("Error updating workspaces after sync:", error); console.error('Error updating workspaces after sync:', error);
} }
} }
} }
@ -99,7 +103,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
const [workspaces, lastChangeTimestamp] = await Promise.all([ const [workspaces, lastChangeTimestamp] = await Promise.all([
ZenWorkspacesStorage.getWorkspaces(), ZenWorkspacesStorage.getWorkspaces(),
ZenWorkspacesStorage.getLastChangeTimestamp() ZenWorkspacesStorage.getLastChangeTimestamp(),
]); ]);
this._workspaceCache = { workspaces, lastChangeTimestamp }; this._workspaceCache = { workspaces, lastChangeTimestamp };
@ -270,17 +274,17 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
onWorkspaceIconChangeInner(type = 'create', icon) { onWorkspaceIconChangeInner(type = 'create', icon) {
const container = document.querySelector(`.PanelUI-zen-workspaces-icons-container.${type}`); const container = document.querySelector(`.PanelUI-zen-workspaces-icons-container.${type}`);
container.textContent = icon; container.textContent = icon;
document.getElementById('PanelUI-zen-workspaces-icon-picker').hidePopup(); this.goToPreviousSubView();
} }
onWorkspaceIconContainerClick(event) { onWorkspaceIconContainerClick(event) {
event.preventDefault(); event.preventDefault();
const picker = document.getElementById('PanelUI-zen-workspaces-icon-picker'); const parentPanel = document.getElementById('PanelUI-zen-workspaces-edit');
picker.openPopup(event.target, 'bottomleft topleft', 0, 0, true, false, event); PanelUI.showSubView('PanelUI-zen-workspaces-icon-picker', parentPanel);
} }
closeWorkspacesSubView() { goToPreviousSubView() {
let parentPanel = document.getElementById('PanelUI-zen-workspaces-multiview'); const parentPanel = document.getElementById('PanelUI-zen-workspaces-multiview');
parentPanel.goBack(); parentPanel.goBack();
} }
@ -329,61 +333,79 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
element.setAttribute('draggable', 'true'); element.setAttribute('draggable', 'true');
} }
element.addEventListener('dragstart', function (event) { element.addEventListener(
if (this.isReorderModeOn(browser)) { 'dragstart',
this.draggedElement = element; function (event) {
event.dataTransfer.effectAllowed = 'move'; if (this.isReorderModeOn(browser)) {
event.dataTransfer.setData('text/plain', element.getAttribute('zen-workspace-id')); this.draggedElement = element;
element.classList.add('dragging'); event.dataTransfer.effectAllowed = 'move';
} else { event.dataTransfer.setData('text/plain', element.getAttribute('zen-workspace-id'));
event.preventDefault(); element.classList.add('dragging');
} } else {
}.bind(browser.ZenWorkspaces)); event.preventDefault();
element.addEventListener('dragover', function (event) {
if (this.isReorderModeOn(browser) && this.draggedElement) {
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
}
}.bind(browser.ZenWorkspaces));
element.addEventListener('dragenter', function (event) {
if (this.isReorderModeOn(browser) && this.draggedElement) {
element.classList.add('dragover');
}
}.bind(browser.ZenWorkspaces));
element.addEventListener('dragleave', function (event) {
element.classList.remove('dragover');
}.bind(browser.ZenWorkspaces));
element.addEventListener('drop', async function (event) {
event.preventDefault();
element.classList.remove('dragover');
if (this.isReorderModeOn(browser)) {
const draggedWorkspaceId = event.dataTransfer.getData('text/plain');
const targetWorkspaceId = element.getAttribute('zen-workspace-id');
if (draggedWorkspaceId !== targetWorkspaceId) {
await this.moveWorkspace(draggedWorkspaceId, targetWorkspaceId);
await this._propagateWorkspaceData();
} }
}.bind(browser.ZenWorkspaces)
);
element.addEventListener(
'dragover',
function (event) {
if (this.isReorderModeOn(browser) && this.draggedElement) {
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
}
}.bind(browser.ZenWorkspaces)
);
element.addEventListener(
'dragenter',
function (event) {
if (this.isReorderModeOn(browser) && this.draggedElement) {
element.classList.add('dragover');
}
}.bind(browser.ZenWorkspaces)
);
element.addEventListener(
'dragleave',
function (event) {
element.classList.remove('dragover');
}.bind(browser.ZenWorkspaces)
);
element.addEventListener(
'drop',
async function (event) {
event.preventDefault();
element.classList.remove('dragover');
if (this.isReorderModeOn(browser)) {
const draggedWorkspaceId = event.dataTransfer.getData('text/plain');
const targetWorkspaceId = element.getAttribute('zen-workspace-id');
if (draggedWorkspaceId !== targetWorkspaceId) {
await this.moveWorkspace(draggedWorkspaceId, targetWorkspaceId);
await this._propagateWorkspaceData();
}
if (this.draggedElement) {
this.draggedElement.classList.remove('dragging');
this.draggedElement = null;
}
}
}.bind(browser.ZenWorkspaces)
);
element.addEventListener(
'dragend',
function (event) {
if (this.draggedElement) { if (this.draggedElement) {
this.draggedElement.classList.remove('dragging'); this.draggedElement.classList.remove('dragging');
this.draggedElement = null; this.draggedElement = null;
} }
} const workspaceElements = browser.document.querySelectorAll('.zen-workspace-button');
}.bind(browser.ZenWorkspaces)); for (const elem of workspaceElements) {
elem.classList.remove('dragover');
element.addEventListener('dragend', function (event) { }
if (this.draggedElement) { }.bind(browser.ZenWorkspaces)
this.draggedElement.classList.remove('dragging'); );
this.draggedElement = null;
}
const workspaceElements = browser.document.querySelectorAll('.zen-workspace-button');
for (const elem of workspaceElements) {
elem.classList.remove('dragover');
}
}.bind(browser.ZenWorkspaces));
let childs = browser.MozXULElement.parseXULToFragment(` let childs = browser.MozXULElement.parseXULToFragment(`
<div class="zen-workspace-icon"> <div class="zen-workspace-icon">
@ -409,14 +431,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
); );
} }
childs.querySelector('.zen-workspace-actions').addEventListener('command', ((event) => { childs.querySelector('.zen-workspace-actions').addEventListener(
let button = event.target; 'command',
this._contextMenuId = button ((event) => {
.closest('toolbarbutton[zen-workspace-id]') let button = event.target;
.getAttribute('zen-workspace-id'); this._contextMenuId = button.closest('toolbarbutton[zen-workspace-id]').getAttribute('zen-workspace-id');
const popup = button.ownerDocument.getElementById('zenWorkspaceActionsMenu'); const popup = button.ownerDocument.getElementById('zenWorkspaceActionsMenu');
popup.openPopup(button, 'after_end'); popup.openPopup(button, 'after_end');
}).bind(browser.ZenWorkspaces)); }).bind(browser.ZenWorkspaces)
);
element.appendChild(childs); element.appendChild(childs);
element.onclick = (async () => { element.onclick = (async () => {
if (this.isReorderModeOn(browser)) { if (this.isReorderModeOn(browser)) {
@ -461,8 +484,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
} }
toggleReorderMode() { toggleReorderMode() {
const workspacesList = document.getElementById("PanelUI-zen-workspaces-list"); const workspacesList = document.getElementById('PanelUI-zen-workspaces-list');
const reorderModeButton = document.getElementById("PanelUI-zen-workspaces-reorder-mode"); const reorderModeButton = document.getElementById('PanelUI-zen-workspaces-reorder-mode');
const isActive = workspacesList.getAttribute('reorder-mode') === 'true'; const isActive = workspacesList.getAttribute('reorder-mode') === 'true';
if (isActive) { if (isActive) {
workspacesList.removeAttribute('reorder-mode'); workspacesList.removeAttribute('reorder-mode');
@ -474,7 +497,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
// Update draggable attribute // Update draggable attribute
const workspaceElements = document.querySelectorAll('.zen-workspace-button'); const workspaceElements = document.querySelectorAll('.zen-workspace-button');
workspaceElements.forEach(elem => { workspaceElements.forEach((elem) => {
if (isActive) { if (isActive) {
elem.removeAttribute('draggable'); elem.removeAttribute('draggable');
} else { } else {
@ -483,19 +506,16 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}); });
} }
async moveWorkspace(draggedWorkspaceId, targetWorkspaceId) { async moveWorkspace(draggedWorkspaceId, targetWorkspaceId) {
const workspaces = (await this._workspaces()).workspaces; const workspaces = (await this._workspaces()).workspaces;
const draggedIndex = workspaces.findIndex(w => w.uuid === draggedWorkspaceId); const draggedIndex = workspaces.findIndex((w) => w.uuid === draggedWorkspaceId);
const draggedWorkspace = workspaces.splice(draggedIndex, 1)[0]; const draggedWorkspace = workspaces.splice(draggedIndex, 1)[0];
const targetIndex = workspaces.findIndex(w => w.uuid === targetWorkspaceId); const targetIndex = workspaces.findIndex((w) => w.uuid === targetWorkspaceId);
workspaces.splice(targetIndex, 0, draggedWorkspace); workspaces.splice(targetIndex, 0, draggedWorkspace);
await ZenWorkspacesStorage.updateWorkspacePositions(workspaces); await ZenWorkspacesStorage.updateWorkspacePositions(workspaces);
} }
async openWorkspacesDialog(event) { async openWorkspacesDialog(event) {
if (!this.workspaceEnabled) { if (!this.workspaceEnabled) {
return; return;
@ -631,8 +651,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
} }
} }
// Workspaces management // Workspaces management
get _workspaceCreateInput() { get _workspaceCreateInput() {
@ -692,7 +710,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
icon?.removeAttribute('selected'); icon?.removeAttribute('selected');
await this.createAndSaveWorkspace(workspaceName, false, icon?.label); await this.createAndSaveWorkspace(workspaceName, false, icon?.label);
await this._propagateWorkspaceData(); await this._propagateWorkspaceData();
this.closeWorkspacesSubView(); this.goToPreviousSubView();
} }
async saveWorkspaceFromEdit() { async saveWorkspaceFromEdit() {
@ -710,7 +728,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
workspaceData.icon = icon?.label; workspaceData.icon = icon?.label;
await this.saveWorkspace(workspaceData); await this.saveWorkspace(workspaceData);
await this._propagateWorkspaceData(); await this._propagateWorkspaceData();
this.closeWorkspacesSubView(); this.goToPreviousSubView();
} }
onWorkspaceCreationNameChange(event) { onWorkspaceCreationNameChange(event) {
@ -1003,13 +1021,13 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
} }
getContextIdIfNeeded(userContextId, fromExternal, allowInheritPrincipal) { getContextIdIfNeeded(userContextId, fromExternal, allowInheritPrincipal) {
if(!this.workspaceEnabled) { if (!this.workspaceEnabled) {
return [userContextId, false]; return [userContextId, false];
} }
if(this.shouldForceContainerTabsToWorkspace && typeof userContextId !== 'undefined' && this._workspaceCache?.workspaces) { if (this.shouldForceContainerTabsToWorkspace && typeof userContextId !== 'undefined' && this._workspaceCache?.workspaces) {
const workspace = this._workspaceCache.workspaces.find((workspace) => workspace.containerTabId === userContextId); const workspace = this._workspaceCache.workspaces.find((workspace) => workspace.containerTabId === userContextId);
if(workspace && workspace.uuid !== this.getActiveWorkspaceFromCache().uuid) { if (workspace && workspace.uuid !== this.getActiveWorkspaceFromCache().uuid) {
this.changeWorkspace(workspace); this.changeWorkspace(workspace);
return [userContextId, true]; return [userContextId, true];
} }
@ -1018,7 +1036,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
const activeWorkspace = this.getActiveWorkspaceFromCache(); const activeWorkspace = this.getActiveWorkspaceFromCache();
const activeWorkspaceUserContextId = activeWorkspace?.containerTabId; const activeWorkspaceUserContextId = activeWorkspace?.containerTabId;
if((fromExternal || allowInheritPrincipal === false) && !!activeWorkspaceUserContextId) { if ((fromExternal || allowInheritPrincipal === false) && !!activeWorkspaceUserContextId) {
return [activeWorkspaceUserContextId, true]; return [activeWorkspaceUserContextId, true];
} }