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

Merge pull request #54 from kristijanribaric/feature/workspace-reordering

Browse source 
Feature:  Workspace reordering
This commit is contained in:
mr. m 🤙 2024-10-17 20:29:44 +03:00 • committed by GitHub
commit ec791a3ea1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 231 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

275
src/ZenWorkspaces.mjs
View file

@ -4,6 +4,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
*/
_lastSelectedWorkspaceTabs = {};
_inChangingWorkspace = false;
draggedElement = null;
async init() {
if (!this.shouldHaveWorkspaces) {
@ -305,11 +306,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
async _propagateWorkspaceData({ ignoreStrip = false } = {}) {
await this.foreachWindowAsActive(async (browser) => {
let currentContainer = browser.document.getElementById('PanelUI-zen-workspaces-current-info');
let workspaceList = browser.document.getElementById('PanelUI-zen-workspaces-list');
const createWorkspaceElement = (workspace) => {
let element = browser.document.createXULElement('toolbarbutton');
element.className = 'subviewbutton';
element.className = 'subviewbutton zen-workspace-button';
element.setAttribute('tooltiptext', workspace.name);
element.setAttribute('zen-workspace-id', workspace.uuid);
if (this.isWorkspaceActive(workspace)) {
@ -325,6 +325,66 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
element.classList.add('identity-color-' + containerGroup.color);
element.setAttribute('data-usercontextid', containerGroup.userContextId);
}
if (this.isReorderModeOn(browser)) {
element.setAttribute('draggable', 'true');
}
element.addEventListener('dragstart', function (event) {
if (this.isReorderModeOn(browser)) {
this.draggedElement = element;
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('text/plain', element.getAttribute('zen-workspace-id'));
element.classList.add('dragging');
} else {
event.preventDefault();
}
}.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) {
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(`
<div class="zen-workspace-icon">
</div>
@ -334,6 +394,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
<div class="zen-workspace-container" ${containerGroup ? '' : 'hidden="true"'}>
</div>
</vbox>
<image class="toolbarbutton-icon zen-workspace-actions-reorder-icon" ></image>
<toolbarbutton closemenu="none" class="toolbarbutton-1 zen-workspace-actions">
<image class="toolbarbutton-icon" id="zen-workspace-actions-menu-icon"></image>
</toolbarbutton>
@ -358,6 +419,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}).bind(browser.ZenWorkspaces));
element.appendChild(childs);
element.onclick = (async () => {
if (this.isReorderModeOn(browser)) {
return; // Return early if reorder mode is on
}
if (event.target.closest('.zen-workspace-actions')) {
return; // Ignore clicks on the actions button
}
@ -373,24 +437,16 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
};
browser.ZenWorkspaces._workspaceCache = null;
let workspaces = await browser.ZenWorkspaces._workspaces();
let activeWorkspace = await browser.ZenWorkspaces.getActiveWorkspace();
currentContainer.innerHTML = '';
workspaceList.innerHTML = '';
workspaceList.parentNode.style.display = 'flex';
if (workspaces.workspaces.length - 1 <= 0) {
if (workspaces.workspaces.length <= 0) {
workspaceList.innerHTML = 'No workspaces available';
workspaceList.setAttribute('empty', 'true');
} else {
workspaceList.removeAttribute('empty');
}
if (activeWorkspace) {
let currentWorkspace = createWorkspaceElement(activeWorkspace);
currentContainer.appendChild(currentWorkspace);
}
for (let workspace of workspaces.workspaces) {
if (browser.ZenWorkspaces.isWorkspaceActive(workspace)) {
continue;
}
let workspaceElement = createWorkspaceElement(workspace);
workspaceList.appendChild(workspaceElement);
}
@ -400,6 +456,46 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
});
}
isReorderModeOn(browser) {
return browser.document.getElementById('PanelUI-zen-workspaces-list').getAttribute('reorder-mode') === 'true';
}
toggleReorderMode() {
const workspacesList = document.getElementById("PanelUI-zen-workspaces-list");
const reorderModeButton = document.getElementById("PanelUI-zen-workspaces-reorder-mode");
const isActive = workspacesList.getAttribute('reorder-mode') === 'true';
if (isActive) {
workspacesList.removeAttribute('reorder-mode');
reorderModeButton.removeAttribute('active');
} else {
workspacesList.setAttribute('reorder-mode', 'true');
reorderModeButton.setAttribute('active', 'true');
}
// Update draggable attribute
const workspaceElements = document.querySelectorAll('.zen-workspace-button');
workspaceElements.forEach(elem => {
if (isActive) {
elem.removeAttribute('draggable');
} else {
elem.setAttribute('draggable', 'true');
}
});
}
async moveWorkspace(draggedWorkspaceId, targetWorkspaceId) {
const workspaces = (await this._workspaces()).workspaces;
const draggedIndex = workspaces.findIndex(w => w.uuid === draggedWorkspaceId);
const draggedWorkspace = workspaces.splice(draggedIndex, 1)[0];
const targetIndex = workspaces.findIndex(w => w.uuid === targetWorkspaceId);
workspaces.splice(targetIndex, 0, draggedWorkspace);
await ZenWorkspacesStorage.updateWorkspacePositions(workspaces);
}
async openWorkspacesDialog(event) {
if (!this.workspaceEnabled) {
return;
@ -426,96 +522,116 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
await this._expandWorkspacesStrip();
}
async _expandWorkspacesStrip(browser = undefined) {
if (typeof browser === 'undefined' || typeof browser.ZenWorkspaces === 'undefined') {
async _expandWorkspacesStrip(browser = window) {
if (typeof browser.ZenWorkspaces === 'undefined') {
browser = window;
}
let workspaces = await browser.ZenWorkspaces._workspaces();
let workspaceList = browser.document.getElementById('zen-workspaces-button');
const newWorkspacesButton = browser.document.createXULElement('toolbarbutton');
newWorkspacesButton.id = 'zen-workspaces-button';
newWorkspacesButton.setAttribute('removable', 'true');
newWorkspacesButton.setAttribute('showInPrivateBrowsing', 'false');
newWorkspacesButton.setAttribute('tooltiptext', 'Workspaces');
let button = browser.document.getElementById('zen-workspaces-button');
if (!button) {
button = browser.document.createXULElement('toolbarbutton');
button.id = 'zen-workspaces-button';
let navbar = browser.document.getElementById('nav-bar');
navbar.appendChild(button);
}
while (button.firstChild) {
button.firstChild.remove();
}
for (let attr of [...button.attributes]) {
if (attr.name !== 'id') {
button.removeAttribute(attr.name);
}
}
button.className = '';
if (this._workspacesButtonClickListener) {
button.removeEventListener('click', this._workspacesButtonClickListener);
this._workspacesButtonClickListener = null;
}
if (this._workspaceButtonContextMenuListener) {
button.removeEventListener('contextmenu', this._workspaceButtonContextMenuListener);
this._workspaceButtonContextMenuListener = null;
}
if (this.shouldShowIconStrip) {
button.setAttribute('removable', 'true');
button.setAttribute('showInPrivateBrowsing', 'false');
button.setAttribute('tooltiptext', 'Workspaces');
let workspaces = await this._workspaces();
for (let workspace of workspaces.workspaces) {
let button = browser.document.createXULElement('toolbarbutton');
button.className = 'subviewbutton';
button.setAttribute('tooltiptext', workspace.name);
button.setAttribute('zen-workspace-id', workspace.uuid);
let workspaceButton = browser.document.createXULElement('toolbarbutton');
workspaceButton.className = 'subviewbutton';
workspaceButton.setAttribute('tooltiptext', workspace.name);
workspaceButton.setAttribute('zen-workspace-id', workspace.uuid);
if (this.isWorkspaceActive(workspace)) {
button.setAttribute('active', 'true');
workspaceButton.setAttribute('active', 'true');
} else {
workspaceButton.removeAttribute('active');
}
if (workspace.default) {
button.setAttribute('default', 'true');
workspaceButton.setAttribute('default', 'true');
} else {
workspaceButton.removeAttribute('default');
}
button.onclick = (async (_, event) => {
// Make sure it's not a context menu event
workspaceButton.addEventListener('click', async (event) => {
if (event.button !== 0) {
return;
}
await this.changeWorkspace(workspace);
}).bind(browser.ZenWorkspaces, workspace);
});
let icon = browser.document.createXULElement('div');
icon.className = 'zen-workspace-icon';
icon.textContent = this.getWorkspaceIcon(workspace);
button.appendChild(icon);
newWorkspacesButton.appendChild(button);
workspaceButton.appendChild(icon);
button.appendChild(workspaceButton);
}
// Listen for context menu events and open the all workspaces dialog
newWorkspacesButton.addEventListener(
'contextmenu',
((event) => {
event.preventDefault();
browser.ZenWorkspaces.openWorkspacesDialog(event);
}).bind(this)
);
}
workspaceList.after(newWorkspacesButton);
workspaceList.remove();
this._workspaceButtonContextMenuListener = (event) => {
event.preventDefault();
browser.ZenWorkspaces.openWorkspacesDialog(event);
};
button.addEventListener('contextmenu', this._workspaceButtonContextMenuListener);
} else {
let activeWorkspace = await this.getActiveWorkspace();
if (activeWorkspace) {
button.setAttribute('as-button', 'true');
button.classList.add('toolbarbutton-1', 'zen-sidebar-action-button');
if (!this.shouldShowIconStrip) {
await this._updateWorkspacesButton(browser);
this._workspacesButtonClickListener = browser.ZenWorkspaces.openWorkspacesDialog.bind(browser.ZenWorkspaces);
button.addEventListener('click', this._workspacesButtonClickListener);
const wrapper = browser.document.createXULElement('hbox');
wrapper.className = 'zen-workspace-sidebar-wrapper';
const icon = browser.document.createXULElement('div');
icon.className = 'zen-workspace-sidebar-icon';
icon.textContent = this.getWorkspaceIcon(activeWorkspace);
const name = browser.document.createXULElement('div');
name.className = 'zen-workspace-sidebar-name';
name.textContent = activeWorkspace.name;
if (!this.workspaceHasIcon(activeWorkspace)) {
icon.setAttribute('no-icon', 'true');
}
wrapper.appendChild(icon);
wrapper.appendChild(name);
button.appendChild(wrapper);
}
}
}
async _updateWorkspacesButton(browser = window) {
let button = browser.document.getElementById('zen-workspaces-button');
if (!button) {
return;
}
let activeWorkspace = await this.getActiveWorkspace();
if (activeWorkspace) {
button.setAttribute('as-button', 'true');
button.classList.add('toolbarbutton-1', 'zen-sidebar-action-button');
button.addEventListener('click', browser.ZenWorkspaces.openWorkspacesDialog.bind(browser.ZenWorkspaces));
const wrapper = browser.document.createXULElement('hbox');
wrapper.className = 'zen-workspace-sidebar-wrapper';
const icon = browser.document.createElement('div');
icon.className = 'zen-workspace-sidebar-icon';
icon.textContent = this.getWorkspaceIcon(activeWorkspace);
// use text content instead of innerHTML to avoid XSS
const name = browser.document.createElement('div');
name.className = 'zen-workspace-sidebar-name';
name.textContent = activeWorkspace.name;
if (!this.workspaceHasIcon(activeWorkspace)) {
icon.setAttribute('no-icon', 'true');
}
wrapper.appendChild(icon);
wrapper.appendChild(name);
button.innerHTML = '';
button.appendChild(wrapper);
}
}
// Workspaces management
@ -575,7 +691,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
let icon = document.querySelector('#PanelUI-zen-workspaces-icon-picker [selected]');
icon?.removeAttribute('selected');
await this.createAndSaveWorkspace(workspaceName, false, icon?.label);
await this._updateWorkspacesButton();
await this._propagateWorkspaceData();
this.closeWorkspacesSubView();
}

98
src/ZenWorkspacesStorage.mjs
View file

@ -257,68 +257,6 @@ var ZenWorkspacesStorage = {
});
},
async updateWorkspaceOrder(uuid, newPosition, notifyObservers = true) {
const changedUUIDs = new Set([uuid]);
await PlacesUtils.withConnectionWrapper('ZenWorkspacesStorage.updateWorkspaceOrder', async (db) => {
await db.executeTransaction(async () => {
const now = Date.now();
// Get the positions of the workspaces before and after the new position
const neighborPositions = await db.execute(`
SELECT
(SELECT MAX("position") FROM zen_workspaces WHERE "position" < :newPosition) as before_position,
(SELECT MIN("position") FROM zen_workspaces WHERE "position" > :newPosition) as after_position
`, { newPosition });
let beforePosition = neighborPositions[0].getResultByName('before_position');
let afterPosition = neighborPositions[0].getResultByName('after_position');
// Calculate the new position
if (beforePosition === null && afterPosition === null) {
// This is the only workspace
newPosition = 1000;
} else if (beforePosition === null) {
// This will be the first workspace
newPosition = Math.floor(afterPosition / 2);
} else if (afterPosition === null) {
// This will be the last workspace
newPosition = beforePosition + 1000;
} else {
// This workspace will be between two others
newPosition = Math.floor((beforePosition + afterPosition) / 2);
}
// Update the workspace's position
await db.execute(`
UPDATE zen_workspaces
SET "position" = :newPosition
WHERE uuid = :uuid
`, { uuid, newPosition });
// Record the change
await db.execute(`
INSERT OR REPLACE INTO zen_workspaces_changes (uuid, timestamp)
VALUES (:uuid, :timestamp)
`, {
uuid,
timestamp: Math.floor(now / 1000)
});
await this.updateLastChangeTimestamp(db);
// Check if reordering is necessary
if (this.shouldReorderWorkspaces(beforePosition, newPosition, afterPosition)) {
await this.reorderAllWorkspaces(db, changedUUIDs);
}
});
});
if (notifyObservers) {
this._notifyWorkspacesChanged("zen-workspace-updated", Array.from(changedUUIDs));
}
},
shouldReorderWorkspaces(before, current, after) {
const minGap = 1; // Minimum allowed gap between positions
return (before !== null && current - before < minGap) || (after !== null && after - current < minGap);
@ -357,4 +295,40 @@ var ZenWorkspacesStorage = {
`);
return result.length ? parseInt(result[0].getResultByName('value'), 10) : 0;
},
async updateWorkspacePositions(workspaces) {
const changedUUIDs = new Set();
await PlacesUtils.withConnectionWrapper('ZenWorkspacesStorage.updateWorkspacePositions', async (db) => {
await db.executeTransaction(async () => {
const now = Date.now();
for (let i = 0; i < workspaces.length; i++) {
const workspace = workspaces[i];
const newPosition = (i + 1) * 1000;
await db.execute(`
UPDATE zen_workspaces
SET "position" = :newPosition
WHERE uuid = :uuid
`, { newPosition, uuid: workspace.uuid });
changedUUIDs.add(workspace.uuid);
// Record the change
await db.execute(`
INSERT OR REPLACE INTO zen_workspaces_changes (uuid, timestamp)
VALUES (:uuid, :timestamp)
`, {
uuid: workspace.uuid,
timestamp: Math.floor(now / 1000)
});
}
await this.updateLastChangeTimestamp(db);
});
});
this._notifyWorkspacesChanged("zen-workspace-updated", Array.from(changedUUIDs));
},
};