feat: Added library, b=(no-bug), c=common, tabs, workspaces

This commit is contained in:
Mr. M 2025-05-24 17:20:50 +02:00
parent a3de3e221c
commit 3724f2a759
No known key found for this signature in database
GPG key ID: 6292C4C8F8652B18
17 changed files with 611 additions and 1118 deletions

View file

@ -1,8 +1,16 @@
diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
index 7d7e8697f02f90d4f336c9ab0a73a89848e0c21c..64e950106dd05b443ce72107613ac9cc405d56ea 100644
index 7d7e8697f02f90d4f336c9ab0a73a89848e0c21c..3819ae72f97900b6d212f8a54550ae569d497741 100644
--- a/browser/base/content/browser-box.inc.xhtml
+++ b/browser/base/content/browser-box.inc.xhtml
@@ -23,7 +23,15 @@
@@ -3,6 +3,7 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
<hbox flex="1" id="browser">
+ <zen-library/>
<box context="sidebar-context-menu" id="sidebar-main" hidden="true">
<html:sidebar-main flex="1">
<box id="vertical-tabs" slot="tabstrip" customizable="true" contextmenu="toolbar-context-menu"></box>
@@ -23,7 +24,15 @@
<browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
</vbox>
<splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>

View file

@ -16,6 +16,7 @@
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-urlbar.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-workspaces.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-decks.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-library.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-folders.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-glance.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-popup.css" />
@ -42,3 +43,4 @@
<script src="chrome://browser/content/zen-components/ZenGlanceManager.mjs"></script>
<script src="chrome://browser/content/zen-components/ZenMediaController.mjs"></script>
<script src="chrome://browser/content/zen-components/ZenDownloadAnimation.mjs"></script>
<script src="chrome://browser/content/zen-components/ZenLibrary.mjs"></script>

View file

@ -39,6 +39,9 @@
content/browser/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs (../../zen/mods/actors/ZenThemeMarketplaceParent.sys.mjs)
content/browser/zen-components/actors/ZenThemeMarketplaceChild.sys.mjs (../../zen/mods/actors/ZenThemeMarketplaceChild.sys.mjs)
content/browser/zen-components/ZenLibrary.mjs (../../zen/library/ZenLibrary.mjs)
content/browser/zen-styles/zen-library.css (../../zen/library/zen-library.css)
content/browser/zen-components/ZenWorkspaceIcons.mjs (../../zen/workspaces/ZenWorkspaceIcons.mjs)
content/browser/zen-components/ZenWorkspace.mjs (../../zen/workspaces/ZenWorkspace.mjs)
content/browser/zen-components/ZenWorkspaces.mjs (../../zen/workspaces/ZenWorkspaces.mjs)

View file

@ -43,6 +43,11 @@
<command id="cmd_zenCopyCurrentURL" />
<command id="cmd_zenCopyCurrentURLMarkdown" />
<command id="cmd_zenCtxDeleteWorkspace" />
<command id="cmd_zenChangeWorkspaceName" />
<command id="cmd_zenToggleLibrary" />
</commandset>
<keyset id="zenKeyset"></keyset>

View file

@ -57,67 +57,11 @@
</panelmultiview>
</panel>
<panel flip="slide" type="arrow" orient="vertical" id="PanelUI-zen-workspaces" position="bottomright topright" mainview="true" side="left">
<panelmultiview id="PanelUI-zen-workspaces-multiview" mainViewId="PanelUI-zen-workspaces-view">
<panelview id="PanelUI-zen-workspaces-view" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true" closemenu="none">
<vbox>
<hbox>
<h3 data-l10n-id="zen-panel-ui-workspaces-text" id="PanelUI-zen-workspaces-header"></h3>
<toolbarbutton id="PanelUI-zen-workspaces-reorder-mode" class="subviewbutton">
<image></image>
</toolbarbutton>
<toolbarbutton id="PanelUI-zen-workspaces-new" class="subviewbutton">
<image></image>
</toolbarbutton>
</hbox>
</vbox>
<html:div id="PanelUI-zen-workspaces-list">
</html:div>
</panelview>
<panelview id="PanelUI-zen-workspaces-create" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
<vbox class="PanelUI-zen-workspaces-user-create">
<h1 data-l10n-id="zen-panel-ui-workspaces-create-text"></h1>
<hbox class="PanelUI-zen-workspaces-creation-wraper">
<hbox class="PanelUI-zen-workspaces-icons-container create"></hbox>
<html:input autofocus="true" id="PanelUI-zen-workspaces-create-input" type="text" placeholder="Enter workspace name" />
</hbox>
</vbox>
<html:moz-button-group class="panel-footer" id="PanelUI-zen-workspaces-create-footer">
<button disabled="true" default="true" slot="primary" id="PanelUI-zen-workspaces-create-save" class="footer-button" data-l10n-id="zen-panel-ui-workspaces-create-save">
</button>
<button id="PanelUI-zen-workspaces-create-cancel" class="footer-button" data-l10n-id="zen-panel-ui-workspaces-create-cancel">
</button>
</html:moz-button-group>
</panelview>
<panelview id="PanelUI-zen-workspaces-edit" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
<vbox class="PanelUI-zen-workspaces-user-create">
<h1 data-l10n-id="zen-panel-ui-workspaces-edit-text"></h1>
<hbox class="PanelUI-zen-workspaces-creation-wraper">
<hbox class="PanelUI-zen-workspaces-icons-container edit"></hbox>
<html:input autofocus="true" id="PanelUI-zen-workspaces-edit-input" type="text" placeholder="Enter workspace name" />
</hbox>
</vbox>
<html:moz-button-group class="panel-footer" id="PanelUI-zen-workspaces-edit-footer">
<button disabled="true" default="true" slot="primary" id="PanelUI-zen-workspaces-edit-save" class="footer-button" data-l10n-id="zen-panel-ui-workspaces-edit-save">
</button>
<button id="PanelUI-zen-workspaces-edit-cancel" class="footer-button" data-l10n-id="zen-panel-ui-workspaces-edit-cancel">
</button>
</html:moz-button-group>
</panelview>
<panelview id="PanelUI-zen-workspaces-icon-picker" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
<vbox id="PanelUI-zen-workspaces-icon-picker-wrapper">
<html:div id="PanelUI-zen-workspaces-icon-search-bar">
<html:input autofocus="true" type="text" id="PanelUI-zen-workspaces-icon-search-input"/>
</html:div>
</vbox>
</panelview>
</panelmultiview>
</panel>
<menupopup id="zenWorkspaceActionsMenu">
<menuitem id="context_zenOpenWorkspace" data-l10n-id="zen-workspaces-panel-context-open"/>
<menuseparator/>
<menuitem id="context_zenEditWorkspace" data-l10n-id="zen-workspaces-panel-context-edit"/>
<menupopup id="zenWorkspaceMoreActions">
<menuitem id="context_zenEditWorkspace" data-l10n-id="zen-workspaces-panel-change-name" command="cmd_zenChangeWorkspaceName"/>
<menuitem class="zenToolbarThemePicker"
data-l10n-id="zen-workspaces-change-gradient"
command="cmd_zenOpenZenThemePicker"/>
<menu id="context_zenWorkspacesOpenInContainerTab"
data-l10n-id="zen-workspaces-panel-context-open-in-container-tab"
selection-type="single"
@ -127,5 +71,5 @@
<menupopup />
</menu>
<menuseparator/>
<menuitem id="context_zenDeleteWorkspace" data-l10n-id="zen-workspaces-panel-context-delete"/>
<menuitem id="context_zenDeleteWorkspace" data-l10n-id="zen-workspaces-panel-context-delete" command="cmd_zenCtxDeleteWorkspace"/>
</menupopup>

View file

@ -9,5 +9,6 @@
context="toolbar-context-menu"
mode="icons">
<toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" command="cmd_zenToggleSidebar" data-l10n-id="sidebar-zen-expand"></toolbarbutton>
<toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-open-library" command="cmd_zenToggleLibrary"></toolbarbutton>
<zen-workspace-icons id="zen-workspaces-button" overflows="false" removable="false"></zen-workspace-icons>
</toolbar>

View file

@ -60,6 +60,14 @@
list-style-image: url('sidebars-right.svg') !important;
}
#zen-library-sidebar-workspaces {
list-style-image: url('duplicate-tab.svg');
}
#zen-library-sidebar-mods {
list-style-image: url('edit.svg');
}
#context_zenSplitTabs {
--menu-image: url('sidebars-right.svg') !important;
}
@ -119,6 +127,7 @@
#PanelUI-menu-button,
#appMenu-more-button2,
.zen-workspaces-actions,
#zen-workspace-actions-menu-icon {
list-style-image: url('menu.svg') !important;
}
@ -173,12 +182,7 @@
list-style-image: url('open.svg') !important;
}
#context_zenOpenWorkspace {
--menu-image: url('open.svg') !important;
}
#context_zenEditWorkspace,
#zenToolbarThemePicker {
.zenToolbarThemePicker {
--menu-image: url('edit-theme.svg') !important;
}
@ -199,16 +203,10 @@
#appMenu-zoomEnlarge-button2,
#PanelUI-zen-profiles-newProfile,
#zen-sidebar-add-panel-button,
#PanelUI-zen-workspaces-new image,
#PanelUI-zen-gradient-generator-color-custom-add image {
list-style-image: url('plus.svg') !important;
}
#PanelUI-zen-workspaces-reorder-mode image {
list-style-image: url('move-tab.svg') !important;
rotate: 90deg;
}
#cut-button {
list-style-image: url('edit-cut.svg') !important;
}
@ -303,7 +301,8 @@
list-style-image: url('home.svg') !important;
}
#library-button {
#library-button,
#zen-open-library {
list-style-image: url('library.svg') !important;
}
@ -980,7 +979,8 @@ menuitem[contexttype='fullscreen'][label*='Exit'] {
menuitem[id='placesContext_show_bookmark:info'],
menuitem[id='placesContext_show_folder:info'],
menuitem[id='placesContext_show:info'] {
menuitem[id='placesContext_show:info'],
#context_zenEditWorkspace {
--menu-image: url('edit.svg');
}

View file

@ -4,7 +4,7 @@ export var ZenCustomizableUI = new (class {
constructor() {}
TYPE_TOOLBAR = 'toolbar';
defaultSidebarIcons = ['preferences-button', 'zen-workspaces-button', 'downloads-button'];
defaultSidebarIcons = ['zen-open-library', 'zen-workspaces-button', 'downloads-button'];
startup(CustomizableUIInternal) {
CustomizableUIInternal.registerArea(

View file

@ -989,10 +989,18 @@ var gZenVerticalTabsManager = {
async renameTabKeydown(event) {
event.stopPropagation();
if (event.key === 'Enter') {
let label = this._tabEdited.querySelector('.tab-label-container-editing');
let input = this._tabEdited.querySelector('#tab-label-input');
const isTab = !!event.target.closest('.tabbrowser-tab');
let label = isTab
? this._tabEdited.querySelector('.tab-label-container-editing')
: this._tabEdited;
let input = document.getElementById('tab-label-input');
let newName = input.value.trim();
document.documentElement.removeAttribute('zen-renaming-tab');
input.remove();
if (!isTab) {
await this._tabEdited.onRenameFinished(newName);
} else {
// Check if name is blank, reset if so
// Always remove, so we can always rename and if it's empty,
// it will reset to the original name anyway
@ -1012,7 +1020,6 @@ var gZenVerticalTabsManager = {
!!newName
);
}
document.documentElement.removeAttribute('zen-renaming-tab');
// Maybe add some confetti here?!?
gZenUIManager.motion.animate(
@ -1024,8 +1031,12 @@ var gZenVerticalTabsManager = {
duration: 0.25,
}
);
}
this._tabEdited.querySelector('.tab-editor-container').remove();
const editorContainer = this._tabEdited.querySelector('.tab-editor-container');
if (editorContainer) {
editorContainer.remove();
}
label.classList.remove('tab-label-container-editing');
this._tabEdited = null;
@ -1035,34 +1046,45 @@ var gZenVerticalTabsManager = {
},
renameTabStart(event) {
const isTab = !!event.target.closest('.tabbrowser-tab');
if (
this._tabEdited ||
!Services.prefs.getBoolPref('zen.tabs.rename-tabs') ||
Services.prefs.getBoolPref('browser.tabs.closeTabByDblclick') ||
((!Services.prefs.getBoolPref('zen.tabs.rename-tabs') ||
Services.prefs.getBoolPref('browser.tabs.closeTabByDblclick')) &&
isTab) ||
!gZenVerticalTabsManager._prefsSidebarExpanded
)
return;
this._tabEdited = event.target.closest('.tabbrowser-tab');
this._tabEdited =
event.target.closest('.tabbrowser-tab') ||
event.target.closest('.zen-current-workspace-indicator-name') ||
gZenWorkspaces.activeWorkspaceIndicator.querySelector(
'.zen-current-workspace-indicator-name'
);
if (
!this._tabEdited ||
!this._tabEdited.pinned ||
this._tabEdited.hasAttribute('zen-essential')
((!this._tabEdited.pinned || this._tabEdited.hasAttribute('zen-essential')) && isTab)
) {
this._tabEdited = null;
return;
}
event.stopPropagation();
document.documentElement.setAttribute('zen-renaming-tab', 'true');
const label = this._tabEdited.querySelector('.tab-label-container');
const label = isTab ? this._tabEdited.querySelector('.tab-label-container') : this._tabEdited;
label.classList.add('tab-label-container-editing');
if (isTab) {
const container = window.MozXULElement.parseXULToFragment(`
<vbox class="tab-label-container tab-editor-container" flex="1" align="start" pack="center"></vbox>
`);
label.after(container);
const containerHtml = this._tabEdited.querySelector('.tab-editor-container');
}
const containerHtml = isTab
? this._tabEdited.querySelector('.tab-editor-container')
: this._tabEdited.parentNode;
const input = document.createElement('input');
input.id = 'tab-label-input';
input.value = this._tabEdited.label;
input.value = isTab ? this._tabEdited.label : this._tabEdited.textContent;
input.addEventListener('keydown', this.renameTabKeydown.bind(this));
containerHtml.appendChild(input);
@ -1077,8 +1099,16 @@ var gZenVerticalTabsManager = {
return;
}
document.documentElement.removeAttribute('zen-renaming-tab');
this._tabEdited.querySelector('.tab-editor-container').remove();
const label = this._tabEdited.querySelector('.tab-label-container-editing');
const editorContainer = this._tabEdited.querySelector('.tab-editor-container');
let input = document.getElementById('tab-label-input');
input.remove();
if (editorContainer) {
editorContainer.remove();
}
const isTab = !!this._tabEdited.closest('.tabbrowser-tab');
const label = isTab
? this._tabEdited.querySelector('.tab-label-container-editing')
: this._tabEdited;
label.classList.remove('tab-label-container-editing');
this._tabEdited = null;

View file

@ -73,6 +73,9 @@ document.addEventListener(
event.sourceEvent.target.getAttribute('zen-workspace-id')
);
break;
case 'cmd_zenToggleLibrary':
gZenLibrary.toggle();
break;
case 'cmd_zenToggleTabsOnRight':
gZenVerticalTabsManager.toggleTabsOnRight();
break;
@ -88,6 +91,12 @@ document.addEventListener(
case 'cmd_zenRemoveFromEssentials':
gZenPinnedTabManager.removeEssentials();
break;
case 'cmd_zenCtxDeleteWorkspace':
gZenWorkspaces.contextDeleteWorkspace(event);
break;
case 'cmd_zenChangeWorkspaceName':
gZenVerticalTabsManager.renameTabStart(event);
break;
default:
if (event.target.id.startsWith('cmd_zenWorkspaceSwitch')) {
const index = parseInt(event.target.id.replace('cmd_zenWorkspaceSwitch', ''), 10) - 1;

View file

@ -0,0 +1,270 @@
{
class ZenLibraryElement extends MozXULElement {
#currentTab = null;
#availableTabs = ['workspaces', 'mods'];
static get markup() {
return `
<vbox id="zen-library-sidebar">
<vbox id="zen-library-sidebar-buttons" flex="1">
<toolbarbutton class="toolbarbutton-1 zen-library-sidebar-button" id="zen-library-sidebar-workspaces" data-l10n-id="zen-library-sidebar-workspaces"/>
<toolbarbutton class="toolbarbutton-1 zen-library-sidebar-button" id="zen-library-sidebar-mods" data-l10n-id="zen-library-sidebar-mods"/>
</vbox>
<hbox id="zen-library-sidebar-footer">
<toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-open-library" command="cmd_zenToggleLibrary"></toolbarbutton>
</hbox>
</vbox>
<vbox id="zen-library-content">
<hbox content="workspaces" size="big">
</hbox>
<hbox content="mods" size="small"></hbox>
</vbox>
`;
}
static get inheritedAttributes() {
return {
'#zen-library-content': 'content,size=content-size',
'#zen-library-sidebar': 'content',
};
}
constructor() {
super();
}
set currentTab(tab) {
if (!this.#availableTabs.includes(tab)) {
throw new Error(`Tab "${tab}" is not available in Zen Library.`);
}
this.#currentTab = tab;
this.setAttribute('content', tab);
// Also set if the size is big or small based on the tab.
const element = this.querySelector(`#zen-library-content hbox[content="${tab}"]`);
this.setAttribute('content-size', element.getAttribute('size') || 'small');
for (const availableTab of this.#availableTabs) {
const button = this.querySelector(`#zen-library-sidebar-${availableTab}`);
if (availableTab === tab) {
button.setAttribute('active', 'true');
} else {
button.removeAttribute('active');
}
const contentContainer = this.#getContentContainer(availableTab);
if (availableTab === tab) {
contentContainer.removeAttribute('hidden');
} else {
contentContainer.setAttribute('hidden', 'true');
}
}
}
get currentTab() {
return this.#currentTab;
}
set open(value) {
if (value) {
this.setAttribute('open', 'true');
this.onOpen(); // Trigger the onOpen method to populate the content
} else {
this.removeAttribute('open');
this.onClose(); // Trigger the onClose method if needed
}
}
get open() {
return this.getAttribute('open') === 'true';
}
connectedCallback() {
if (this.delayConnectedCallback()) {
// If we are not ready yet, or if we have already connected, we
// don't need to do anything.
return;
}
this.id = 'zen-library';
this.appendChild(this.constructor.fragment);
this.initializeAttributeInheritance();
for (const availableTab of this.#availableTabs) {
const button = this.querySelector(`#zen-library-sidebar-${availableTab}`);
button.addEventListener('command', () => {
this.currentTab = availableTab;
});
}
window.addEventListener('TabSelect', this);
this.currentTab = 'workspaces'; // Default tab
}
#getContentContainer(tab) {
return this.querySelector(`#zen-library-content hbox[content="${tab}"]`);
}
#createWorkspaceElement(workspace) {
const fragment = window.MozXULElement.parseXULToFragment(`
<vbox class="zen-workspace-item" zen-workspace-id="${workspace.uuid}">
<hbox class="zen-workspace-item-header">
<label class="zen-workspace-item-name"></label>
</hbox>
<vbox class="zen-workspace-item-content">
</vbox>
</vbox>
`);
const workspaceLabel = fragment.querySelector('.zen-workspace-item-name');
workspaceLabel.textContent = workspace.name;
workspaceLabel.addEventListener(
'click',
gZenVerticalTabsManager.renameTabStart.bind(gZenVerticalTabsManager)
);
const workspaceItem = fragment.querySelector('.zen-workspace-item');
workspaceItem.style.setProperty(
'--zen-workspace-gradient',
gZenThemePicker.getGradient(workspace.theme.gradientColors, true, workspace.theme.rotation)
);
// TODO: Not jet! Figure this out
//const workspaceElement = gZenWorkspaces.workspaceElement(workspace.uuid);
//fragment.querySelector('.zen-workspace-item-content').appendChild(workspaceElement);
return fragment;
}
async onOpen(event) {
const conatainer = this.#getContentContainer('workspaces');
conatainer.innerHTML = ''; // Clear the container
const workspaces = await gZenWorkspaces._workspaces();
for (const workspace of workspaces.workspaces) {
const workspaceElement = this.#createWorkspaceElement(workspace);
conatainer.appendChild(workspaceElement);
}
}
async onClose(event) {}
on_TabSelect(event) {
if (!this.open) return;
gZenLibrary.close();
}
}
customElements.define('zen-library', ZenLibraryElement);
class ZenLibrary {
#animating = false;
constructor() {
ChromeUtils.defineLazyGetter(this, 'wrapper', () => document.getElementById('zen-library'));
}
get isOpen() {
return this.wrapper.hasAttribute('open');
}
set isOpen(value) {
if (this.#animating) {
return; // Prevent multiple animations from running at the same time
}
this.#animating = true;
if (value) {
this.wrapper.open = value;
this.animateLibrary(false).then(() => {
this.#animating = false;
});
} else {
this.animateLibrary(true).then(() => {
this.wrapper.open = value;
this.#animating = false;
});
}
}
open() {
this.isOpen = true;
}
close() {
this.isOpen = false;
}
toggle() {
this.isOpen = !this.isOpen;
}
async animateLibrary(open) {
window.docShell.treeOwner
.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsIAppWindow)
.rollupAllPopups();
let elementsToAnimate = [gNavToolbox];
if (gZenVerticalTabsManager._hasSetSingleToolbar) {
elementsToAnimate.push(gURLBar.textbox);
}
const wrapperWidth = this.wrapper.getBoundingClientRect().width;
const appContentWrapper = document.getElementById('zen-appcontent-wrapper');
if (open) {
await Promise.all([
gZenUIManager.motion.animate(
elementsToAnimate,
{
transform: ['translateX(100%)', 'translateX(0)'],
opacity: [0, 1],
},
{
duration: 0.2,
easing: 'ease-in-out',
}
),
gZenUIManager.motion.animate(
this.wrapper,
{
marginLeft: ['0px', `${-wrapperWidth}px`],
transform: ['translateX(0)', 'translateX(100%)'],
},
{
duration: 0.2,
easing: 'ease-in-out',
}
),
]);
appContentWrapper.style.minWidth = ''; // Reset the min-width after the animation
gNavToolbox.style.display = ''; // Hide the toolbox during the animation
} else {
appContentWrapper.style.minWidth = `${appContentWrapper.getBoundingClientRect().width}px`;
await Promise.all([
gZenUIManager.motion.animate(
elementsToAnimate,
{
transform: ['translateX(0)', 'translateX(100%)'],
opacity: [1, 0],
},
{
duration: 0.2,
easing: 'ease-in-out',
}
),
gZenUIManager.motion.animate(
this.wrapper,
{
marginLeft: [`${-wrapperWidth}px`, '0px'],
transform: ['translateX(-100%)', 'translateX(0%)'],
},
{
duration: 0.2,
easing: 'ease-in-out',
}
),
]);
gNavToolbox.style.display = 'none'; // Show the toolbox after the animation
}
}
}
window.gZenLibrary = new ZenLibrary();
}

View file

@ -0,0 +1,103 @@
#zen-library {
order: -1;
z-index: 1;
pointer-events: none;
position: fixed;
left: -200%;
&[open='true'] {
display: flex;
pointer-events: all;
position: relative;
left: 0;
}
}
#zen-library-sidebar {
height: 100%;
background: rgba(255, 255, 255, 0.1);
padding: 0.6rem;
box-shadow: var(--zen-big-shadow);
-moz-window-dragging: drag;
border-right: 1px solid var(--zen-colors-border);
#zen-library-sidebar-buttons {
justify-content: center;
gap: 12px;
}
& .zen-library-sidebar-button {
transition: background-color 0.1s;
padding: 0.8rem 0.7rem;
border-radius: 6px;
background: transparent;
justify-content: center;
align-items: center;
flex-direction: column;
appearance: none;
gap: 0.5rem;
border-radius: 6px !important;
&:hover,
&[active='true'] {
background: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
}
}
#zen-library-sidebar-footer {
justify-content: space-between;
& toolbarbutton {
appearance: none;
}
}
}
#zen-library-content {
transition: width 0.15s;
width: 20vw;
overflow-x: auto;
&[size='big'] {
width: 60vw;
}
& > * {
height: 100%;
}
& > [content='workspaces'] {
justify-content: center;
align-items: center;
gap: 2rem;
padding: 6rem;
& .zen-workspace-item {
width: 16rem;
padding: 0.7rem;
border-radius: var(--zen-border-radius);
box-shadow: var(--zen-big-shadow);
background: var(--zen-workspace-gradient);
border: 1px solid light-dark(
rgba(255, 255, 255, 0.2),
rgba(0, 0, 0, 0.2)
);
height: 100%;
&::before {
background-image: url(chrome://browser/content/zen-images/grain-bg.png);
opacity: var(--zen-grainy-background-opacity, 0);
mix-blend-mode: hard-light;
width: 60%;
height: 60%;
pointer-events: none;
top: 50%;
border-radius: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
content: '';
position: absolute;
}
}
}
}

View file

@ -709,6 +709,7 @@
/* Hide text labels */
& .zen-current-workspace-indicator-name,
& .zen-workspace-actions,
& zen-workspace .toolbarbutton-text {
display: none !important;
}

View file

@ -73,7 +73,7 @@
initContextMenu() {
const menu = window.MozXULElement.parseXULToFragment(`
<menuitem id="zenToolbarThemePicker"
<menuitem class="zenToolbarThemePicker"
data-lazy-l10n-id="zen-workspaces-change-gradient"
command="cmd_zenOpenZenThemePicker"/>
`);
@ -944,7 +944,10 @@
return `rgba(${color.c[0]}, ${color.c[1]}, ${color.c[2]}, ${this.currentOpacity})`;
}
getGradient(colors, forToolbar = false) {
getGradient(colors, forToolbar = false, rotation = undefined) {
if (typeof rotation === 'undefined') {
rotation = this.currentRotation;
}
const themedColors = this.themedColors(colors);
this.useAlgo = themedColors[0]?.algorithm ?? '';
@ -955,12 +958,12 @@
} else if (themedColors.length === 1) {
return this.getSingleRGBColor(themedColors[0], forToolbar);
} else if (themedColors.length !== 3) {
return `linear-gradient(${this.currentRotation}deg, ${themedColors.map((color) => this.getSingleRGBColor(color, forToolbar)).join(', ')})`;
return `linear-gradient(${rotation}deg, ${themedColors.map((color) => this.getSingleRGBColor(color, forToolbar)).join(', ')})`;
} else {
let color1 = this.getSingleRGBColor(themedColors[2], forToolbar);
let color2 = this.getSingleRGBColor(themedColors[0], forToolbar);
let color3 = this.getSingleRGBColor(themedColors[1], forToolbar);
return `linear-gradient(${this.currentRotation}deg, ${color1}, ${color2}, ${color3})`;
return `linear-gradient(${rotation}deg, ${color1}, ${color2}, ${color3})`;
}
}
@ -1122,7 +1125,6 @@
}
}
const appBackground = browser.document.getElementById('zen-browser-background');
if (!skipUpdate) {
browser.document.documentElement.style.setProperty(
'--zen-main-browser-background-old',

View file

@ -5,6 +5,7 @@
<vbox class="zen-workspace-tabs-section zen-current-workspace-indicator" flex="1">
<hbox class="zen-current-workspace-indicator-icon"></hbox>
<hbox class="zen-current-workspace-indicator-name"></hbox>
<toolbarbutton class="toolbarbutton-1 chromeclass-toolbar-additional zen-workspaces-actions" context="zenWorkspaceMoreActions"></toolbarbutton>
</vbox>
<arrowscrollbox orient="vertical" tabindex="-1" class="workspace-arrowscrollbox">
<vbox class="zen-workspace-tabs-section zen-workspace-pinned-tabs-section">
@ -57,6 +58,13 @@
false
);
this.indicator.querySelector('.zen-current-workspace-indicator-name').onRenameFinished =
this.onIndicatorRenameFinished.bind(this);
this.indicator
.querySelector('.zen-workspaces-actions')
.addEventListener('click', this.onActionsCommand.bind(this));
this.scrollbox.addEventListener('wheel', this, true);
this.scrollbox.addEventListener('underflow', this);
this.scrollbox.addEventListener('overflow', this);
@ -168,6 +176,38 @@
gBrowser.tabContainer.handleEvent(event);
}
}
get workspaceUuid() {
return this.id;
}
async onIndicatorRenameFinished(newName) {
if (newName === '') {
return;
}
let workspaces = (await gZenWorkspaces._workspaces()).workspaces;
let workspaceData = workspaces.find((workspace) => workspace.uuid === this.workspaceUuid);
workspaceData.name = newName;
await gZenWorkspaces.saveWorkspace(workspaceData);
this.indicator.querySelector('.zen-current-workspace-indicator-name').textContent = newName;
gZenUIManager.showToast('zen-workspace-renamed-toast');
}
onActionsCommand(event) {
event.stopPropagation();
const popup = document.getElementById('zenWorkspaceMoreActions');
event.target.setAttribute('open', 'true');
this.indicator.setAttribute('open', 'true');
popup.addEventListener(
'popuphidden',
() => {
event.target.removeAttribute('open');
this.indicator.removeAttribute('open');
},
{ once: true }
);
popup.openPopup(event.target, 'after_start');
}
}
customElements.define('zen-workspace', ZenWorkspace);

View file

@ -42,11 +42,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
this._resolveInitialized = resolve;
});
workspaceIndicatorXUL = `
<hbox class="zen-current-workspace-indicator-icon"></hbox>
<hbox class="zen-current-workspace-indicator-name"></hbox>
`;
async waitForPromises() {
if (this.privateWindowOrDisabled) {
return;
@ -842,7 +837,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
async initializeWorkspaces() {
if (this.workspaceEnabled) {
this._initializeWorkspaceCreationIcons();
this._initializeWorkspaceTabContextMenus();
await this.workspaceBookmarks();
window.addEventListener('TabBrowserInserted', this.onTabBrowserInserted.bind(this));
@ -1066,84 +1060,48 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
addPopupListeners() {
const popup = document.getElementById('PanelUI-zen-workspaces');
const contextMenu = document.getElementById('zenWorkspaceActionsMenu');
const workspaceActions = document.getElementById('zenWorkspaceMoreActions');
workspaceActions.addEventListener('popupshowing', this.updateWorkspaceActionsMenu.bind(this));
popup.addEventListener('popuphidden', this.handlePanelHidden.bind(this));
popup.addEventListener('command', this.handlePanelCommand.bind(this));
contextMenu.addEventListener('popuphidden', (event) => {
if (event.target === contextMenu) {
this.onContextMenuClose(event);
const contextChangeContainerTabMenu = document.getElementById(
'context_zenWorkspacesOpenInContainerTab'
);
contextChangeContainerTabMenu.addEventListener(
'popupshowing',
this.updateWorkspaceActionsMenuContainer.bind(this)
);
contextChangeContainerTabMenu.addEventListener(
'command',
this.contextChangeContainerTab.bind(this)
);
}
updateWorkspaceActionsMenu(event) {
if (event.target.id !== 'zenWorkspaceMoreActions') {
return;
}
const openInContainerMenuItem = document.getElementById(
'context_zenWorkspacesOpenInContainerTab'
);
if (this.shouldShowContainers) {
openInContainerMenuItem.removeAttribute('hidden');
} else {
openInContainerMenuItem.setAttribute('hidden', 'true');
}
}
updateWorkspaceActionsMenuContainer(event) {
const workspace = this.getActiveWorkspaceFromCache();
let containerTabId = workspace.containerTabId;
return window.createUserContextMenu(event, {
isContextMenu: true,
excludeUserContextId: containerTabId,
showDefaultTab: true,
});
contextMenu.addEventListener('popupshowing', this.updateContextMenu.bind(this));
contextMenu.addEventListener('command', this.handleContextMenuCommand.bind(this));
const submenu = document.querySelector('#context_zenWorkspacesOpenInContainerTab > menupopup');
if (submenu) {
submenu.addEventListener('popupshowing', this.createContainerTabMenu.bind(this));
submenu.addEventListener('command', this.contextChangeContainerTab.bind(this));
}
const onWorkspaceIconContainerClick = this.onWorkspaceIconContainerClick.bind(this);
for (const element of document.querySelectorAll('.PanelUI-zen-workspaces-icons-container')) {
element.addEventListener('click', onWorkspaceIconContainerClick);
}
document
.getElementById('PanelUI-zen-workspaces-create-input')
.addEventListener('input', this.onWorkspaceCreationNameChange.bind(this));
document
.getElementById('PanelUI-zen-workspaces-edit-input')
.addEventListener('input', this.onWorkspaceEditChange.bind(this));
document
.getElementById('PanelUI-zen-workspaces-icon-search-input')
.addEventListener('input', this.conductSearch.bind(this));
}
handlePanelCommand(event) {
let target = event.target.closest('toolbarbutton');
target ??= event.target.closest('button');
if (!target) {
return;
}
switch (target.id) {
case 'PanelUI-zen-workspaces-reorder-mode':
this.toggleReorderMode();
break;
case 'PanelUI-zen-workspaces-new':
this.openSaveDialog();
break;
case 'PanelUI-zen-workspaces-create-save':
this.saveWorkspaceFromCreate();
break;
case 'PanelUI-zen-workspaces-edit-cancel':
case 'PanelUI-zen-workspaces-create-cancel':
this.closeWorkspacesSubView();
break;
case 'PanelUI-zen-workspaces-edit-save':
this.saveWorkspaceFromEdit();
break;
}
}
handleContextMenuCommand(event) {
const target = event.target.closest('menuitem');
if (!target) {
return;
}
switch (target.id) {
case 'context_zenOpenWorkspace':
this.openWorkspace();
break;
case 'context_zenEditWorkspace':
this.contextEdit(event);
break;
case 'context_zenDeleteWorkspace':
this.contextDelete(event);
break;
}
async contextDeleteWorkspace() {
await this.removeWorkspace(this.activeWorkspace, true);
}
searchIcons(input, icons) {
@ -1207,69 +1165,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
return filteredEmojiScores.map((score) => score.emoji);
}
resetWorkspaceIconSearch() {
let container = document.getElementById('PanelUI-zen-workspaces-icon-picker-wrapper');
let searchInput = document.getElementById('PanelUI-zen-workspaces-icon-search-input');
// Clear the search input field
searchInput.value = '';
for (let button of container.querySelectorAll('.toolbarbutton-1')) {
button.style.display = '';
}
}
_initializeWorkspaceCreationIcons() {
let container = document.getElementById('PanelUI-zen-workspaces-icon-picker-wrapper');
let searchInput = document.getElementById('PanelUI-zen-workspaces-icon-search-input');
searchInput.value = '';
for (let iconData of this.emojis) {
const icon = iconData[0];
let button = document.createXULElement('toolbarbutton');
button.className = 'toolbarbutton-1 workspace-icon-button';
button.setAttribute('label', icon);
button.onclick = (event) => {
const button = event.target;
let wasSelected = button.hasAttribute('selected');
for (let button of container.children) {
button.removeAttribute('selected');
}
if (!wasSelected) {
button.setAttribute('selected', 'true');
}
if (this.onIconChangeConnectedCallback) {
this.onIconChangeConnectedCallback(icon);
} else {
this.onWorkspaceIconChangeInner('create', icon);
}
};
container.appendChild(button);
}
}
conductSearch() {
const container = document.getElementById('PanelUI-zen-workspaces-icon-picker-wrapper');
const searchInput = document.getElementById('PanelUI-zen-workspaces-icon-search-input');
const query = searchInput.value.toLowerCase();
if (query === '') {
this.resetWorkspaceIconSearch();
return;
}
const buttons = Array.from(container.querySelectorAll('.toolbarbutton-1'));
buttons.forEach((button) => (button.style.display = 'none'));
const filteredIcons = this.searchIcons(query, this.emojis);
filteredIcons.forEach((emoji) => {
const matchingButton = buttons.find((button) => button.getAttribute('label') === emoji);
if (matchingButton) {
matchingButton.style.display = '';
container.appendChild(matchingButton);
}
});
}
async saveWorkspace(workspaceData, preventPropagation = false) {
if (this.privateWindowOrDisabled) {
return;
@ -1316,83 +1211,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
);
}
// Workspaces dialog UI management
openSaveDialog() {
let parentPanel = document.getElementById('PanelUI-zen-workspaces-multiview');
// randomly select an icon
let icon = this.emojis[Math.floor(Math.random() * (this.emojis.length - 257))][0];
this._workspaceCreateInput.textContent = '';
this._workspaceCreateInput.value = '';
this._workspaceCreateInput.setAttribute('data-initial-value', '');
document
.querySelectorAll('#PanelUI-zen-workspaces-icon-picker-wrapper toolbarbutton')
.forEach((button) => {
if (button.label === icon) {
button.setAttribute('selected', 'true');
} else {
button.removeAttribute('selected');
}
});
document.querySelector('.PanelUI-zen-workspaces-icons-container.create').textContent = icon;
PanelUI.showSubView('PanelUI-zen-workspaces-create', parentPanel);
}
async openEditDialog(workspaceUuid) {
this._workspaceEditDialog.setAttribute('data-workspace-uuid', workspaceUuid);
document.getElementById('PanelUI-zen-workspaces-edit-save').setAttribute('disabled', 'true');
let workspaces = (await this._workspaces()).workspaces;
let workspaceData = workspaces.find((workspace) => workspace.uuid === workspaceUuid);
this._workspaceEditInput.textContent = workspaceData.name;
this._workspaceEditInput.value = workspaceData.name;
this._workspaceEditInput.setAttribute('data-initial-value', workspaceData.name);
this._workspaceEditIconsContainer.setAttribute('data-initial-value', workspaceData.icon);
this.onIconChangeConnectedCallback = (...args) => {
this.onWorkspaceIconChangeInner('edit', ...args);
this.onWorkspaceEditChange(...args);
};
document
.querySelectorAll('#PanelUI-zen-workspaces-icon-picker-wrapper toolbarbutton')
.forEach((button) => {
if (button.label === workspaceData.icon) {
button.setAttribute('selected', 'true');
} else {
button.removeAttribute('selected');
}
});
document.querySelector('.PanelUI-zen-workspaces-icons-container.edit').textContent =
this.getWorkspaceIcon(workspaceData);
let parentPanel = document.getElementById('PanelUI-zen-workspaces-multiview');
PanelUI.showSubView('PanelUI-zen-workspaces-edit', parentPanel);
}
onWorkspaceIconChangeInner(type = 'create', icon) {
const container = document.querySelector(`.PanelUI-zen-workspaces-icons-container.${type}`);
if (container.textContent !== icon) {
container.textContent = icon;
}
this.goToPreviousSubView();
}
onWorkspaceIconContainerClick(event) {
event.preventDefault();
const parentPanel = document.getElementById('PanelUI-zen-workspaces-edit');
PanelUI.showSubView('PanelUI-zen-workspaces-icon-picker', parentPanel);
const container = parentPanel.parentNode.querySelector('.panel-viewcontainer');
setTimeout(() => {
if (container) {
container.style.minHeight = 'unset';
}
});
}
goToPreviousSubView() {
const parentPanel = document.getElementById('PanelUI-zen-workspaces-multiview');
parentPanel.goBack();
}
workspaceHasIcon(workspace) {
return workspace.icon && workspace.icon !== '';
}
@ -1426,230 +1244,15 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
return;
}
let workspaceList = browser.document.getElementById('PanelUI-zen-workspaces-list');
const createWorkspaceElement = (workspace) => {
let element = browser.document.createXULElement('toolbarbutton');
element.className = 'subviewbutton zen-workspace-button';
element.setAttribute('tooltiptext', workspace.name);
element.setAttribute('zen-workspace-id', workspace.uuid);
if (this.isWorkspaceActive(workspace)) {
element.setAttribute('active', 'true');
}
let containerGroup = undefined;
try {
containerGroup = browser.ContextualIdentityService.getPublicIdentities().find(
(container) => container.userContextId === workspace.containerTabId
);
} catch (e) {
console.warn('gZenWorkspaces: Error setting container color', e);
}
if (containerGroup) {
element.classList.add('identity-color-' + containerGroup.color);
element.setAttribute('data-usercontextid', containerGroup.userContextId);
}
// Set draggable attribute based on reorder mode
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'));
// Create a transparent drag image for Linux
if (AppConstants.platform === 'linux') {
const dragImage = document.createElement('canvas');
dragImage.width = 1;
dragImage.height = 1;
event.dataTransfer.setDragImage(dragImage, 0, 0);
}
element.classList.add('dragging');
} else {
event.preventDefault();
}
}.bind(browser.gZenWorkspaces)
);
element.addEventListener(
'dragover',
function (event) {
if (this.isReorderModeOn(browser) && this.draggedElement) {
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
// Ensure the dragover effect is visible on Linux
if (AppConstants.platform === 'linux') {
const targetId = element.getAttribute('zen-workspace-id');
const draggedId = this.draggedElement.getAttribute('zen-workspace-id');
if (targetId !== draggedId) {
element.classList.add('dragover');
}
}
}
}.bind(browser.gZenWorkspaces)
);
element.addEventListener('dragenter', function (event) {
if (this.isReorderModeOn(browser) && this.draggedElement) {
element.classList.add('dragover');
}
});
element.addEventListener('dragleave', function (event) {
element.classList.remove('dragover');
});
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);
}
if (this.draggedElement) {
this.draggedElement.classList.remove('dragging');
this.draggedElement = null;
}
}
}.bind(browser.gZenWorkspaces)
);
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.gZenWorkspaces)
);
let childs = browser.MozXULElement.parseXULToFragment(`
<div class="zen-workspace-icon">
</div>
<vbox>
<div class="zen-workspace-name">
</div>
<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>
`);
// use text content instead of innerHTML to avoid XSS
childs.querySelector('.zen-workspace-icon').textContent =
browser.gZenWorkspaces.getWorkspaceIcon(workspace);
childs.querySelector('.zen-workspace-name').textContent = workspace.name;
if (containerGroup) {
childs.querySelector('.zen-workspace-container').textContent =
ContextualIdentityService.getUserContextLabel(containerGroup.userContextId);
}
childs.querySelector('.zen-workspace-actions').addEventListener(
'command',
((event) => {
let button = event.target;
this._contextMenuId = button
.closest('toolbarbutton[zen-workspace-id]')
.getAttribute('zen-workspace-id');
const popup = button.ownerDocument.getElementById('zenWorkspaceActionsMenu');
popup.openPopup(button, 'after_end');
}).bind(browser.gZenWorkspaces)
);
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
}
const workspaceId = element.getAttribute('zen-workspace-id');
const workspaces = await this._workspaces();
const workspace = workspaces.workspaces.find((w) => w.uuid === workspaceId);
await this.changeWorkspace(workspace);
let panel = this.ownerWindow.document.getElementById('PanelUI-zen-workspaces');
PanelMultiView.hidePopup(panel);
}).bind(browser.gZenWorkspaces);
return element;
};
const createLastPositionDropTarget = () => {
const element = browser.document.createXULElement('div');
element.className = 'zen-workspace-last-place-drop-target';
element.addEventListener(
'dragover',
function (event) {
if (this.isReorderModeOn(browser) && this.draggedElement) {
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
// Ensure the dragover effect is visible on Linux
if (AppConstants.platform === 'linux') {
element.classList.add('dragover');
}
}
}.bind(browser.gZenWorkspaces)
);
element.addEventListener(
'dragenter',
function (event) {
if (this.isReorderModeOn(browser) && this.draggedElement) {
element.classList.add('dragover');
}
}.bind(browser.gZenWorkspaces)
);
element.addEventListener(
'dragleave',
function (event) {
element.classList.remove('dragover');
}.bind(browser.gZenWorkspaces)
);
element.addEventListener(
'drop',
async function (event) {
event.preventDefault();
element.classList.remove('dragover');
if (this.isReorderModeOn(browser)) {
const draggedWorkspaceId = event.dataTransfer.getData('text/plain');
await this.moveWorkspaceToEnd(draggedWorkspaceId);
if (this.draggedElement) {
this.draggedElement.classList.remove('dragging');
this.draggedElement = null;
}
}
}.bind(browser.gZenWorkspaces)
);
return element;
};
if (clearCache) {
browser.gZenWorkspaces._workspaceCache = null;
browser.gZenWorkspaces._workspaceBookmarksCache = null;
await browser.gZenWorkspaces.workspaceBookmarks();
}
let workspaces = await browser.gZenWorkspaces._workspaces();
browser.document
.getElementById('cmd_zenCtxDeleteWorkspace')
.setAttribute('disabled', workspaces.workspaces.length <= 1);
if (clearCache) {
browser.dispatchEvent(
new CustomEvent('ZenWorkspacesUIUpdate', {
@ -1658,39 +1261,12 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
})
);
}
await browser.gZenWorkspaces.workspaceBookmarks();
workspaceList.innerHTML = '';
workspaceList.parentNode.style.display = 'flex';
if (workspaces.workspaces.length <= 0) {
workspaceList.innerHTML = 'No workspaces available';
workspaceList.setAttribute('empty', 'true');
} else {
workspaceList.removeAttribute('empty');
}
for (let workspace of workspaces.workspaces) {
let workspaceElement = createWorkspaceElement(workspace);
workspaceList.appendChild(workspaceElement);
}
workspaceList.appendChild(createLastPositionDropTarget());
if (!ignoreStrip) {
browser.gZenWorkspaces._fixIndicatorsNames(workspaces);
}
});
}
handlePanelHidden() {
const workspacesList = document.getElementById('PanelUI-zen-workspaces-list');
const reorderModeButton = document.getElementById('PanelUI-zen-workspaces-reorder-mode');
workspacesList?.removeAttribute('reorder-mode');
reorderModeButton?.removeAttribute('active');
this.resetWorkspaceIconSearch();
this.clearEmojis();
}
async moveWorkspaceToEnd(draggedWorkspaceId) {
const workspaces = (await this._workspaces()).workspaces;
const draggedIndex = workspaces.findIndex((w) => w.uuid === draggedWorkspaceId);
@ -1701,39 +1277,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
await this._propagateWorkspaceData();
}
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) => {
// When reorder mode is toggled off, remove draggable attribute
// When reorder mode is toggled on, set draggable attribute
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);
@ -1745,45 +1288,8 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
await this._propagateWorkspaceData();
}
async openWorkspacesDialog(event) {
if (!this.workspaceEnabled || this.isPrivateWindow) {
return;
}
let target = event.target.closest('.zen-current-workspace-indicator');
let panel = document.getElementById('PanelUI-zen-workspaces');
await this._propagateWorkspaceData({
ignoreStrip: true,
clearCache: false,
});
PanelMultiView.openPopup(panel, target, {
position: 'bottomright topright',
triggerEvent: event,
}).catch(console.error);
}
closeWorkspacesSubView() {
let parentPanel = document.getElementById('PanelUI-zen-workspaces-multiview');
parentPanel.goBack(parentPanel);
}
// Workspaces management
get _workspaceCreateInput() {
return document.getElementById('PanelUI-zen-workspaces-create-input');
}
get _workspaceEditDialog() {
return document.getElementById('PanelUI-zen-workspaces-edit');
}
get _workspaceEditInput() {
return document.getElementById('PanelUI-zen-workspaces-edit-input');
}
get _workspaceEditIconsContainer() {
return document.getElementById('PanelUI-zen-workspaces-icon-picker');
}
_deleteAllTabsInWorkspace(workspaceID) {
gBrowser.removeTabs(
Array.from(this.allStoredTabs).filter(
@ -1849,57 +1355,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
}
async saveWorkspaceFromCreate() {
let workspaceName = this._workspaceCreateInput.value;
if (!workspaceName) {
return;
}
this._workspaceCreateInput.value = '';
let icon = document.querySelector('#PanelUI-zen-workspaces-icon-picker-wrapper [selected]');
icon?.removeAttribute('selected');
await this.createAndSaveWorkspace(workspaceName, icon?.label);
this.goToPreviousSubView();
}
async saveWorkspaceFromEdit() {
let workspaceUuid = this._workspaceEditDialog.getAttribute('data-workspace-uuid');
let workspaceName = this._workspaceEditInput.value;
if (!workspaceName) {
return;
}
this._workspaceEditInput.value = '';
let icon = document.querySelector('#PanelUI-zen-workspaces-icon-picker-wrapper [selected]');
icon?.removeAttribute('selected');
let workspaces = (await this._workspaces()).workspaces;
let workspaceData = workspaces.find((workspace) => workspace.uuid === workspaceUuid);
workspaceData.name = workspaceName;
workspaceData.icon = icon?.label;
await this.saveWorkspace(workspaceData);
this.goToPreviousSubView();
}
onWorkspaceCreationNameChange() {
let button = document.getElementById('PanelUI-zen-workspaces-create-save');
if (this._workspaceCreateInput.value === '') {
button.setAttribute('disabled', 'true');
return;
}
button.removeAttribute('disabled');
}
onWorkspaceEditChange(icon) {
let button = document.getElementById('PanelUI-zen-workspaces-edit-save');
let name = this._workspaceEditInput.value;
if (
name === this._workspaceEditInput.getAttribute('data-initial-value') &&
icon === this._workspaceEditIconsContainer.getAttribute('data-initial-value')
) {
button.setAttribute('disabled', 'true');
return;
}
button.removeAttribute('disabled');
}
addChangeListeners(func) {
if (!this._changeListeners) {
this._changeListeners = [];
@ -2810,49 +2265,9 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
}
// Context menu management
_contextMenuId = null;
async updateContextMenu(_) {
console.assert(this._contextMenuId, 'No context menu ID set');
document
.querySelector(
`#PanelUI-zen-workspaces [zen-workspace-id="${this._contextMenuId}"] .zen-workspace-actions`
)
.setAttribute('active', 'true');
const workspaces = await this._workspaces();
let deleteMenuItem = document.getElementById('context_zenDeleteWorkspace');
if (workspaces.workspaces.length <= 1) {
deleteMenuItem.setAttribute('disabled', 'true');
} else {
deleteMenuItem.removeAttribute('disabled');
}
let openMenuItem = document.getElementById('context_zenOpenWorkspace');
if (
workspaces.workspaces.find(
(workspace) => workspace.uuid === this._contextMenuId && this.isWorkspaceActive(workspace)
)
) {
openMenuItem.setAttribute('disabled', 'true');
} else {
openMenuItem.removeAttribute('disabled');
}
const openInContainerMenuItem = document.getElementById(
'context_zenWorkspacesOpenInContainerTab'
);
if (this.shouldShowContainers) {
openInContainerMenuItem.removeAttribute('hidden');
} else {
openInContainerMenuItem.setAttribute('hidden', 'true');
}
}
async contextChangeContainerTab(event) {
this._organizingWorkspaceStrip = true;
let workspaces = await this._workspaces();
let workspace = workspaces.workspaces.find(
(workspace) => workspace.uuid === this._contextMenuId
);
let workspace = await this.getActiveWorkspace();
let userContextId = parseInt(event.target.getAttribute('data-usercontextid'));
workspace.containerTabId = userContextId + 0; // +0 to convert to number
await this.saveWorkspace(workspace);
@ -2865,16 +2280,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
}, 0);
}
onContextMenuClose() {
let target = document.querySelector(
`#PanelUI-zen-workspaces [zen-workspace-id="${this._contextMenuId}"] .zen-workspace-actions`
);
if (target) {
target.removeAttribute('active');
}
this._contextMenuId = null;
}
findTabToBlur(tab) {
if ((!this._shouldChangeToTab(tab) || !tab) && this._emptyTab) {
return this._emptyTab;
@ -2882,26 +2287,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
return tab;
}
async openWorkspace() {
let workspaces = await this._workspaces();
let workspace = workspaces.workspaces.find(
(workspace) => workspace.uuid === this._contextMenuId
);
await this.changeWorkspace(workspace);
}
async contextDelete(event) {
this.__contextIsDelete = true;
event.stopPropagation();
await this.removeWorkspace(this._contextMenuId);
this.__contextIsDelete = false;
}
async contextEdit(event) {
event.stopPropagation();
await this.openEditDialog(this._contextMenuId);
}
get emojis() {
if (this._emojis) {
return this._emojis;
@ -2941,6 +2326,9 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
_initializeWorkspaceTabContextMenus() {
if (this.privateWindowOrDisabled) {
return;
}
const menu = document.createXULElement('menu');
menu.setAttribute('id', 'context-zen-change-workspace-tab');
menu.setAttribute('data-l10n-id', 'context-zen-change-workspace-tab');
@ -2977,18 +2365,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
);
}
// Tab browser utilities
createContainerTabMenu(event) {
let window = event.target.ownerGlobal;
const workspace = this.getWorkspaceFromId(this._contextMenuId);
let containerTabId = workspace.containerTabId;
return window.createUserContextMenu(event, {
isContextMenu: true,
excludeUserContextId: containerTabId,
showDefaultTab: true,
});
}
getContextIdIfNeeded(userContextId, fromExternal, allowInheritPrincipal) {
if (!this.workspaceEnabled) {
return [userContextId, false, undefined];

View file

@ -122,327 +122,9 @@
}
}
/* Workspaces Panel UI */
#PanelUI-zen-workspaces {
--panel-width: 320px;
--panel-padding: 0;
}
#PanelUI-zen-workspaces > panelmultiview {
align-items: flex-start;
overflow-x: hidden;
overflow-y: auto;
}
#PanelUI-zen-workspaces panelmultiview panelview {
position: relative;
padding: 10px;
width: var(--panel-width);
}
#PanelUI-zen-workspaces-icon-picker toolbarbutton {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid transparent;
border-radius: 7px;
}
#PanelUI-zen-workspaces-icon-picker toolbarbutton[selected='true'] {
border-color: var(--zen-colors-secondary);
}
#PanelUI-zen-workspaces-icon-picker toolbarbutton .toolbarbutton-icon {
display: none;
}
#PanelUI-zen-workspaces-icon-picker toolbarbutton .toolbarbutton-text {
min-width: unset;
}
#PanelUI-zen-workspaces-icon-picker {
padding: 5px !important;
}
#PanelUI-zen-workspaces-icon-picker-wrapper {
overflow-x: hidden;
justify-items: center;
overflow-y: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
max-height: 250px;
.workspace-icon-button {
min-width: 24px;
min-height: 24px;
font-size: 16px;
margin: 2px;
padding: 4px;
}
}
#PanelUI-zen-workspaces-list {
display: flex;
flex-direction: column;
flex-shrink: 0;
}
#PanelUI-zen-workspaces-list[empty='true'] {
font-weight: 600;
padding: 10px;
width: 100%;
text-align: start;
opacity: 0.5;
}
.PanelUI-zen-workspaces-user-create {
height: 100%;
.PanelUI-zen-workspaces-creation-wraper {
border-radius: 5px;
border: 1px solid var(--zen-colors-border);
margin-top: 10px;
& .PanelUI-zen-workspaces-icons-container {
padding: 10px 0;
min-width: 40px;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid var(--zen-colors-border);
margin-right: 2px;
}
& html|input {
border: none;
outline: none !important;
width: 100%;
}
}
}
/* Workspace icon picker styles */
#PanelUI-zen-workspaces-icon-picker-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 5px;
}
#PanelUI-zen-workspaces-icon-search-bar {
display: flex;
position: sticky;
top: 0;
background-color: inherit;
z-index: 1000;
padding: 8px;
width: 100%;
margin: 0;
box-sizing: border-box;
}
#PanelUI-zen-workspaces-icon-search-input {
width: 100%;
padding: 8px 12px;
font-size: 14px;
border: 1px solid var(--panel-separator-color, #ccc);
border-radius: 4px;
box-sizing: border-box;
margin: 0;
}
#PanelUI-zen-workspaces-list toolbarbutton {
padding: 5px;
border-radius: var(--zen-button-border-radius);
margin-left: 0 !important;
margin-right: 0 !important;
display: flex;
align-items: center;
position: relative;
&:first-child {
margin-top: 10px;
}
& .zen-workspace-icon {
position: relative;
width: 30px;
height: 30px;
border-radius: var(--zen-button-border-radius);
margin-right: 10px;
border: 1px solid var(--zen-colors-border);
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
flex-shrink: 0;
}
&[data-usercontextid] .zen-workspace-icon {
border-color: color-mix(in srgb, var(--identity-tab-color) 40%, transparent 60%);
}
& > vbox:has(> .zen-workspace-name) {
overflow: hidden;
}
& .zen-workspace-name {
font-weight: 600;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
& .zen-workspace-container {
font-size: 12px;
opacity: 0.5;
font-weight: normal;
}
& .zen-workspace-actions,
.zen-workspace-actions-reorder-icon {
display: none;
margin: 0;
margin-left: auto !important;
}
&.zen-workspace-button[active='true'] {
position: relative;
}
&.zen-workspace-button[active='true'] .zen-workspace-icon::before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -2px;
width: 2px;
height: 16px;
background-color: var(--toolbarbutton-icon-fill-attention);
border-radius: 5px;
}
}
.zen-workspace-button.dragging {
opacity: 0.5;
}
.zen-workspace-button.dragover::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: var(--toolbarbutton-icon-fill-attention);
}
/* Enhanced visual feedback for Linux platform */
@supports (-moz-gtk-csd-available) {
.zen-workspace-button.dragover {
background-color: color-mix(in srgb, var(--toolbarbutton-icon-fill-attention) 15%, transparent);
}
.zen-workspace-button.dragover::after {
height: 3px;
}
}
.zen-workspace-last-place-drop-target.dragover {
background-color: var(--toolbarbutton-icon-fill-attention);
}
/* Enhanced visual feedback for Linux platform */
@supports (-moz-gtk-csd-available) {
.zen-workspace-last-place-drop-target {
height: 6px;
margin: 4px 0;
}
.zen-workspace-last-place-drop-target.dragover {
background-color: var(--toolbarbutton-icon-fill-attention);
box-shadow: 0 0 4px var(--toolbarbutton-icon-fill-attention);
}
}
#PanelUI-zen-workspaces-reorder-mode[active='true'] {
color: var(--toolbarbutton-icon-fill-attention) !important;
}
#PanelUI-zen-workspaces-list:not([reorder-mode='true']) toolbarbutton {
&:hover .zen-workspace-actions,
& .zen-workspace-actions[active='true'] {
display: flex;
}
}
#PanelUI-zen-workspaces-list[reorder-mode='true'] toolbarbutton {
.zen-workspace-actions-reorder-icon {
display: flex;
}
}
#PanelUI-zen-workspaces-list[reorder-mode='true'] .zen-workspace-last-place-drop-target {
display: block;
}
.zen-workspace-last-place-drop-target {
display: none;
height: 4px;
width: 100%;
border-radius: 5px;
}
#PanelUI-zen-workspaces-view > vbox:nth-child(2) {
margin-top: 10px;
}
#PanelUI-zen-workspaces-new,
#PanelUI-zen-workspaces-reorder-mode,
#PanelUI-zen-gradient-generator-color-custom-add {
min-height: 1px !important;
padding: 3px;
border-radius: 4px;
width: 24px;
height: 24px;
}
#PanelUI-zen-workspaces-create-footer,
#PanelUI-zen-workspaces-edit-footer {
padding-bottom: 0 !important;
margin-top: 10px;
margin-left: 0;
margin-bottom: 0 !important;
width: 100%;
}
#PanelUI-zen-workspaces-create-footer button[default='true'],
#PanelUI-zen-workspaces-edit-footer button[default='true'] {
width: 100%;
}
#PanelUI-zen-workspaces-header {
margin-right: auto;
}
/* Mark workspaces indicator */
.zen-current-workspace-indicator {
padding: calc(15px + var(--zen-toolbox-padding))
calc(4px + var(--tab-inline-padding) + var(--zen-toolbox-padding));
padding: calc(4px + var(--tab-inline-padding) + var(--zen-toolbox-padding));
font-weight: 600;
position: relative;
max-height: var(--zen-workspace-indicator-height);
@ -452,6 +134,8 @@
flex-direction: row !important;
max-width: 100%;
width: 100%;
font-size: small;
padding-right: 10px;
&::before {
border-radius: var(--border-radius-medium);
@ -486,8 +170,23 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
font-size: small;
cursor: auto;
}
.zen-workspaces-actions {
--toolbarbutton-inner-padding: 4px;
margin-left: auto !important;
opacity: 0;
visibility: collapse;
transition: opacity 0.1s;
order: 5;
}
:root:not([zen-private-window]) &:hover .zen-workspaces-actions,
& .zen-workspaces-actions[open='true'] {
visibility: visible;
pointer-events: auto;
opacity: 1;
}
}