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

Refactor ZenWorkspaces to improve workspace icon strip functionality

Browse source
This commit is contained in:
mauro-balades 2024-09-19 21:05:33 +02:00
parent a4ffded16b
commit 1d5e336462
1 changed files with 77 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

81
src/ZenWorkspaces.mjs
View file

@ -17,6 +17,12 @@ var ZenWorkspaces = {
}); });
}, },
get shouldShowIconStrip() {
delete this.shouldShowIconStrip;
this.shouldShowIconStrip = Services.prefs.getBoolPref('zen.workspaces.show-icon-strip', true);
return this.shouldShowIconStrip;
},
get shouldHaveWorkspaces() { get shouldHaveWorkspaces() {
delete this.shouldHaveWorkspaces; delete this.shouldHaveWorkspaces;
let docElement = document.documentElement; let docElement = document.documentElement;
@ -63,8 +69,14 @@ var ZenWorkspaces = {
} }
}, },
async onWorkspacesIconStripChanged() {
this.shouldShowIconStrip = Services.prefs.getBoolPref('zen.workspaces.show-icon-strip', true);
await this._expandWorkspacesStrip();
},
async initializeWorkspaces() { async initializeWorkspaces() {
Services.prefs.addObserver('zen.workspaces.enabled', this.onWorkspacesEnabledChanged.bind(this)); Services.prefs.addObserver('zen.workspaces.enabled', this.onWorkspacesEnabledChanged.bind(this));
Services.prefs.addObserver('zen.workspaces.show-icon-strip', this.onWorkspacesIconStripChanged.bind(this));
await this.initializeWorkspacesButton(); await this.initializeWorkspacesButton();
let file = new FileUtils.File(this._storeFile); let file = new FileUtils.File(this._storeFile);
if (!file.exists()) { if (!file.exists()) {
@ -237,10 +249,14 @@ var ZenWorkspaces = {
return workspace.name[0].toUpperCase(); return workspace.name[0].toUpperCase();
}, },
async _propagateWorkspaceData() { async _propagateWorkspaceData({
ignoreStrip = false
} = {}) {
let currentContainer = document.getElementById('PanelUI-zen-workspaces-current-info'); let currentContainer = document.getElementById('PanelUI-zen-workspaces-current-info');
let workspaceList = document.getElementById('PanelUI-zen-workspaces-list'); let workspaceList = document.getElementById('PanelUI-zen-workspaces-list');
if (!ignoreStrip) {
await this._expandWorkspacesStrip(); await this._expandWorkspacesStrip();
}
const createWorkspaceElement = (workspace) => { const createWorkspaceElement = (workspace) => {
let element = document.createXULElement('toolbarbutton'); let element = document.createXULElement('toolbarbutton');
element.className = 'subviewbutton'; element.className = 'subviewbutton';
@ -330,7 +346,9 @@ var ZenWorkspaces = {
} }
let target = event.target; let target = event.target;
let panel = document.getElementById('PanelUI-zen-workspaces'); let panel = document.getElementById('PanelUI-zen-workspaces');
await this._propagateWorkspaceData(); await this._propagateWorkspaceData({
ignoreStrip: true
});
PanelMultiView.openPopup(panel, target, { PanelMultiView.openPopup(panel, target, {
position: 'bottomright topright', position: 'bottomright topright',
triggerEvent: event, triggerEvent: event,
@ -347,17 +365,19 @@ var ZenWorkspaces = {
} }
const nextSibling = document.getElementById('zen-sidepanel-button'); const nextSibling = document.getElementById('zen-sidepanel-button');
const wrapper = document.createXULElement('toolbarbutton'); const wrapper = document.createXULElement('toolbarbutton');
wrapper.id = 'zen-workspaces-buttons'; wrapper.id = 'zen-workspaces-button';
wrapper.className = 'subviewbutton'; nextSibling.after(wrapper);
nextSibling.before(wrapper);
await this._expandWorkspacesStrip(); await this._expandWorkspacesStrip();
}, },
async _expandWorkspacesStrip() { async _expandWorkspacesStrip() {
let workspaces = await this._workspaces(); let workspaces = await this._workspaces();
let activeWorkspace = workspaces.workspaces.find((workspace) => workspace.used); let workspaceList = document.getElementById('zen-workspaces-button');
let workspaceList = document.getElementById('zen-workspaces-buttons'); const newWorkspacesButton = document.createXULElement(this.shouldShowIconStrip ? 'hbox' : 'toolbarbutton');
workspaceList.innerHTML = ''; newWorkspacesButton.id = 'zen-workspaces-button';
newWorkspacesButton.setAttribute('tooltiptext', 'Workspaces');
if (this.shouldShowIconStrip) {
for (let workspace of workspaces.workspaces) { for (let workspace of workspaces.workspaces) {
let button = document.createXULElement('toolbarbutton'); let button = document.createXULElement('toolbarbutton');
button.className = 'subviewbutton'; button.className = 'subviewbutton';
@ -375,12 +395,16 @@ var ZenWorkspaces = {
let icon = document.createXULElement('div'); let icon = document.createXULElement('div');
icon.className = 'zen-workspace-icon'; icon.className = 'zen-workspace-icon';
icon.textContent = this.getWorkspaceIcon(workspace); icon.textContent = this.getWorkspaceIcon(workspace);
let name = document.createXULElement('div');
name.className = 'zen-workspace-name';
name.textContent = workspace.name;
button.appendChild(icon); button.appendChild(icon);
button.appendChild(name); newWorkspacesButton.appendChild(button);
workspaceList.appendChild(button); }
}
workspaceList.after(newWorkspacesButton);
workspaceList.remove();
if (!this.shouldShowIconStrip) {
await this._updateWorkspacesButton();
} }
}, },
@ -391,20 +415,33 @@ var ZenWorkspaces = {
} }
let activeWorkspace = (await this._workspaces()).workspaces.find((workspace) => workspace.used); let activeWorkspace = (await this._workspaces()).workspaces.find((workspace) => workspace.used);
if (activeWorkspace) { if (activeWorkspace) {
button.innerHTML = ` button.setAttribute('as-button', 'true');
<div class="zen-workspace-sidebar-icon"> button.classList.add('toolbarbutton-1', 'zen-sidebar-action-button');
</div>
<div class="zen-workspace-sidebar-name"> button.addEventListener('click', this.openWorkspacesDialog.bind(this));
</div>
`; const wrapper = document.createXULElement('hbox');
wrapper.className = 'zen-workspace-sidebar-wrapper';
const icon = document.createElement('div');
icon.className = 'zen-workspace-sidebar-icon';
icon.textContent = this.getWorkspaceIcon(activeWorkspace);
// use text content instead of innerHTML to avoid XSS // use text content instead of innerHTML to avoid XSS
button.querySelector('.zen-workspace-sidebar-name').textContent = activeWorkspace.name; const name = document.createElement('div');
button.querySelector('.zen-workspace-sidebar-icon').textContent = this.getWorkspaceIcon(activeWorkspace); name.className = 'zen-workspace-sidebar-name';
name.textContent = activeWorkspace.name;
if (!this.workspaceHasIcon(activeWorkspace)) { if (!this.workspaceHasIcon(activeWorkspace)) {
button.querySelector('.zen-workspace-sidebar-icon').setAttribute('no-icon', 'true'); icon.setAttribute('no-icon', 'true');
} }
wrapper.appendChild(icon);
wrapper.appendChild(name);
button.innerHTML = '';
button.appendChild(wrapper);
} }
}, },