1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-08 00:10:00 +02:00
zen-desktop/src/zen/workspaces/ZenWorkspaceCreation.mjs

339 lines
11 KiB
JavaScript

{
class ZenWorkspaceCreation extends MozXULElement {
#wasInCollapsedMode = false;
promiseInitialized = new Promise((resolve) => {
this.resolveInitialized = resolve;
});
#hiddenElements = [];
static get elementsToDisable() {
return [
'cmd_zenOpenWorkspacePanel',
'cmd_zenOpenWorkspaceCreation',
'cmd_zenToggleSidebar',
'cmd_newNavigatorTab',
'cmd_newNavigatorTabNoEvent',
];
}
static get markup() {
return `
<vbox class="zen-workspace-creation" flex="1">
<form>
<vbox>
<html:h1 data-l10n-id="zen-workspace-creation-header" class="zen-workspace-creation-title" />
<html:div>
<label data-l10n-id="zen-workspace-creation-label" class="zen-workspace-creation-label" />
</html:div>
</vbox>
<vbox class="zen-workspace-creation-form">
<hbox class="zen-workspace-creation-name-wrapper">
<toolbarbutton class="zen-workspace-creation-icon-label" />
<html:input
class="zen-workspace-creation-name"
type="text"
data-l10n-id="zen-workspace-creation-name" />
</hbox>
<hbox class="zen-workspace-creation-profile-wrapper">
<label class="zen-workspace-creation-profile-label" data-l10n-id="zen-workspace-creation-profile" />
<button class="zen-workspace-creation-profile" />
</hbox>
<button
class="zen-workspace-creation-edit-theme-button"
data-l10n-id="zen-workspaces-change-theme"
command="cmd_zenOpenZenThemePicker" />
<menupopup class="zen-workspace-creation-profiles-popup" />
</vbox>
<vbox class="zen-workspace-creation-buttons">
<html:div>
<button class="zen-workspace-creation-create-button footer-button primary"
data-l10n-id="zen-panel-ui-workspaces-create" disabled="true" />
</html:div>
<button class="zen-workspace-creation-cancel-button footer-button"
data-l10n-id="zen-general-cancel-label" />
</vbox>
</form>
</vbox>
`;
}
get workspaceId() {
return this.getAttribute('workspace-id');
}
get previousWorkspaceId() {
return this.getAttribute('previous-workspace-id');
}
get elementsToAnimate() {
return [
this.querySelector('.zen-workspace-creation-title'),
this.querySelector('.zen-workspace-creation-label').parentElement,
this.querySelector('.zen-workspace-creation-name-wrapper'),
this.querySelector('.zen-workspace-creation-profile-wrapper'),
this.querySelector('.zen-workspace-creation-edit-theme-button'),
this.createButton.parentNode,
this.cancelButton,
];
}
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.appendChild(this.constructor.fragment);
this.initializeAttributeInheritance();
this.inputName = this.querySelector('.zen-workspace-creation-name');
this.inputIcon = this.querySelector('.zen-workspace-creation-icon-label');
this.inputProfile = this.querySelector('.zen-workspace-creation-profile');
this.createButton = this.querySelector('.zen-workspace-creation-create-button');
this.cancelButton = this.querySelector('.zen-workspace-creation-cancel-button');
for (const element of this.elementsToAnimate) {
element.style.opacity = 0;
}
this.#wasInCollapsedMode =
document.documentElement.getAttribute('zen-sidebar-expanded') !== 'true';
gNavToolbox.setAttribute('zen-sidebar-expanded', 'true');
document.documentElement.setAttribute('zen-sidebar-expanded', 'true');
window.docShell.treeOwner
.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsIAppWindow)
.rollupAllPopups();
this.handleZenWorkspacesChangeBind = this.handleZenWorkspacesChange.bind(this);
for (const element of this.parentElement.children) {
if (element !== this) {
element.hidden = true;
this.#hiddenElements.push(element);
}
}
for (const element of ZenWorkspaceCreation.elementsToDisable) {
const el = document.getElementById(element);
if (el) {
el.setAttribute('disabled', 'true');
}
}
this.createButton.addEventListener('command', this.onCreateButtonCommand.bind(this));
this.cancelButton.addEventListener('command', this.onCancelButtonCommand.bind(this));
this.inputName.addEventListener('input', () => {
this.createButton.disabled = !this.inputName.value.trim();
});
this.inputIcon.addEventListener('command', this.onIconCommand.bind(this));
this.profilesPopup = this.querySelector('.zen-workspace-creation-profiles-popup');
if (gZenWorkspaces.shouldShowContainers) {
this.inputProfile.addEventListener('command', this.onProfileCommand.bind(this));
this.profilesPopup.addEventListener('popupshown', this.onProfilePopupShown.bind(this));
this.profilesPopup.addEventListener('command', this.onProfilePopupCommand.bind(this));
this.currentProfile = {
id: 0,
name: 'Default',
};
} else {
this.inputProfile.parentNode.hidden = true;
}
document.getElementById('zen-sidebar-splitter').style.pointerEvents = 'none';
gZenUIManager.motion
.animate(
[gBrowser.tabContainer, gURLBar.textbox],
{
opacity: [1, 0],
},
{
duration: 0.3,
type: 'spring',
bounce: 0,
}
)
.then(() => {
gBrowser.tabContainer.style.visibility = 'collapse';
if (gZenVerticalTabsManager._hasSetSingleToolbar) {
document.getElementById('nav-bar').style.visibility = 'collapse';
}
this.style.visibility = 'visible';
this.resolveInitialized();
gZenUIManager.motion
.animate(
this.elementsToAnimate,
{
y: [20, 0],
opacity: [0, 1],
filter: ['blur(2px)', 'blur(0)'],
},
{
duration: 0.6,
type: 'spring',
bounce: 0,
delay: gZenUIManager.motion.stagger(0.05, { startDelay: 0.2 }),
}
)
.then(() => {
this.inputName.focus();
gZenWorkspaces.workspaceElement(this.workspaceId).hidden = false;
});
});
}
async onCreateButtonCommand() {
const workspace = await gZenWorkspaces.getActiveWorkspace();
workspace.name = this.inputName.value.trim();
workspace.icon = this.inputIcon.label || undefined;
workspace.containerTabId = this.currentProfile;
await gZenWorkspaces.saveWorkspace(workspace);
await this.#cleanup();
await gZenWorkspaces._organizeWorkspaceStripLocations(workspace, true);
await gZenWorkspaces.updateTabsContainers();
gBrowser.tabContainer._invalidateCachedTabs();
}
async onCancelButtonCommand() {
await gZenWorkspaces.changeWorkspaceWithID(this.previousWorkspaceId);
}
onIconCommand(event) {
gZenEmojiPicker
.open(event.target)
.then(async (emoji) => {
this.inputIcon.label = emoji || '';
})
.catch((error) => {
console.warn('Error changing workspace icon:', error);
});
}
set currentProfile(profile) {
this.inputProfile.label = profile.name;
this._profileId = profile.id;
}
get currentProfile() {
return this._profileId;
}
onProfileCommand(event) {
this.profilesPopup.openPopup(event.target, 'after_start');
}
onProfilePopupShown(event) {
return window.createUserContextMenu(event, {
isContextMenu: true,
showDefaultTab: true,
});
}
onProfilePopupCommand(event) {
let userContextId = parseInt(event.target.getAttribute('data-usercontextid'));
if (isNaN(userContextId)) {
return;
}
this.currentProfile = {
id: userContextId,
name: event.target.label,
};
}
finishSetup() {
gZenWorkspaces.addChangeListeners(this.handleZenWorkspacesChangeBind, { once: true });
}
async handleZenWorkspacesChange() {
await gZenWorkspaces.removeWorkspace(this.workspaceId);
await this.#cleanup();
}
async #cleanup() {
await gZenUIManager.motion.animate(
this.elementsToAnimate.reverse(),
{
y: [0, 20],
opacity: [1, 0],
filter: ['blur(0)', 'blur(2px)'],
},
{
duration: 0.4,
type: 'spring',
bounce: 0,
delay: gZenUIManager.motion.stagger(0.05),
}
);
document.getElementById('zen-sidebar-splitter').style.pointerEvents = '';
gZenWorkspaces.removeChangeListeners(this.handleZenWorkspacesChangeBind);
for (const element of this.constructor.elementsToDisable) {
const el = document.getElementById(element);
if (el) {
el.removeAttribute('disabled');
}
}
if (this.#wasInCollapsedMode) {
gNavToolbox.removeAttribute('zen-sidebar-expanded');
document.documentElement.removeAttribute('zen-sidebar-expanded');
}
document.documentElement.removeAttribute('zen-creating-workspace');
gBrowser.tabContainer.style.visibility = '';
gBrowser.tabContainer.style.opacity = 0;
if (gZenVerticalTabsManager._hasSetSingleToolbar) {
document.getElementById('nav-bar').style.visibility = '';
gURLBar.textbox.style.opacity = 0;
}
gZenUIManager.updateTabsToolbar();
const workspace = await gZenWorkspaces.getActiveWorkspace();
await gZenWorkspaces._organizeWorkspaceStripLocations(workspace, true);
await gZenWorkspaces.updateTabsContainers();
await gZenUIManager.motion.animate(
[gBrowser.tabContainer, gURLBar.textbox],
{
opacity: [0, 1],
},
{
duration: 0.3,
type: 'spring',
bounce: 0,
}
);
gBrowser.tabContainer.style.opacity = '';
if (gZenVerticalTabsManager._hasSetSingleToolbar) {
gURLBar.textbox.style.opacity = '';
}
for (const element of this.#hiddenElements) {
element.hidden = false;
}
this.#hiddenElements = [];
this.remove();
}
}
customElements.define('zen-workspace-creation', ZenWorkspaceCreation);
}