mirror of
https://github.com/zen-browser/components.git
synced 2025-07-08 18:59:58 +02:00
Merge pull request #57 from HarryHeres/fix/workspaces-icon-picker
Fixing workspaces icon picker
This commit is contained in:
commit
d853fa8de4
1 changed files with 107 additions and 89 deletions
|
@ -28,7 +28,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||||
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,7 +333,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||||
element.setAttribute('draggable', 'true');
|
element.setAttribute('draggable', 'true');
|
||||||
}
|
}
|
||||||
|
|
||||||
element.addEventListener('dragstart', function (event) {
|
element.addEventListener(
|
||||||
|
'dragstart',
|
||||||
|
function (event) {
|
||||||
if (this.isReorderModeOn(browser)) {
|
if (this.isReorderModeOn(browser)) {
|
||||||
this.draggedElement = element;
|
this.draggedElement = element;
|
||||||
event.dataTransfer.effectAllowed = 'move';
|
event.dataTransfer.effectAllowed = 'move';
|
||||||
|
@ -338,26 +344,38 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||||
} else {
|
} else {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
}.bind(browser.ZenWorkspaces));
|
}.bind(browser.ZenWorkspaces)
|
||||||
|
);
|
||||||
|
|
||||||
element.addEventListener('dragover', function (event) {
|
element.addEventListener(
|
||||||
|
'dragover',
|
||||||
|
function (event) {
|
||||||
if (this.isReorderModeOn(browser) && this.draggedElement) {
|
if (this.isReorderModeOn(browser) && this.draggedElement) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.dataTransfer.dropEffect = 'move';
|
event.dataTransfer.dropEffect = 'move';
|
||||||
}
|
}
|
||||||
}.bind(browser.ZenWorkspaces));
|
}.bind(browser.ZenWorkspaces)
|
||||||
|
);
|
||||||
|
|
||||||
element.addEventListener('dragenter', function (event) {
|
element.addEventListener(
|
||||||
|
'dragenter',
|
||||||
|
function (event) {
|
||||||
if (this.isReorderModeOn(browser) && this.draggedElement) {
|
if (this.isReorderModeOn(browser) && this.draggedElement) {
|
||||||
element.classList.add('dragover');
|
element.classList.add('dragover');
|
||||||
}
|
}
|
||||||
}.bind(browser.ZenWorkspaces));
|
}.bind(browser.ZenWorkspaces)
|
||||||
|
);
|
||||||
|
|
||||||
element.addEventListener('dragleave', function (event) {
|
element.addEventListener(
|
||||||
|
'dragleave',
|
||||||
|
function (event) {
|
||||||
element.classList.remove('dragover');
|
element.classList.remove('dragover');
|
||||||
}.bind(browser.ZenWorkspaces));
|
}.bind(browser.ZenWorkspaces)
|
||||||
|
);
|
||||||
|
|
||||||
element.addEventListener('drop', async function (event) {
|
element.addEventListener(
|
||||||
|
'drop',
|
||||||
|
async function (event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
element.classList.remove('dragover');
|
element.classList.remove('dragover');
|
||||||
if (this.isReorderModeOn(browser)) {
|
if (this.isReorderModeOn(browser)) {
|
||||||
|
@ -372,9 +390,12 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||||
this.draggedElement = null;
|
this.draggedElement = null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}.bind(browser.ZenWorkspaces));
|
}.bind(browser.ZenWorkspaces)
|
||||||
|
);
|
||||||
|
|
||||||
element.addEventListener('dragend', function (event) {
|
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;
|
||||||
|
@ -383,7 +404,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||||
for (const elem of workspaceElements) {
|
for (const elem of workspaceElements) {
|
||||||
elem.classList.remove('dragover');
|
elem.classList.remove('dragover');
|
||||||
}
|
}
|
||||||
}.bind(browser.ZenWorkspaces));
|
}.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(
|
||||||
|
'command',
|
||||||
|
((event) => {
|
||||||
let button = event.target;
|
let button = event.target;
|
||||||
this._contextMenuId = button
|
this._contextMenuId = button.closest('toolbarbutton[zen-workspace-id]').getAttribute('zen-workspace-id');
|
||||||
.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];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue