mirror of
https://github.com/zen-browser/desktop.git
synced 2025-10-14 13:56:11 +00:00
perf: Remove smooth scroll features, b=no-bug, c=common, workspaces
This commit is contained in:
mr. m
@@ -1,17 +0,0 @@
|
||||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
pref("apz.overscroll.enabled", true);
|
||||
pref("general.smoothScroll", true);
|
||||
pref("general.smoothScroll.msdPhysics.enabled", true);
|
||||
pref("general.smoothScroll.currentVelocityWeighting", "0.15");
|
||||
pref("general.smoothScroll.stopDecelerationWeighting", "0.6");
|
||||
pref("mousewheel.min_line_scroll_amount", 10);
|
||||
pref("general.smoothScroll.mouseWheel.durationMinMS", 80);
|
||||
pref("general.smoothScroll.msdPhysics.continuousMotionMaxDeltaMS", 12);
|
||||
pref("general.smoothScroll.msdPhysics.motionBeginSpringConstant", 600);
|
||||
pref("general.smoothScroll.msdPhysics.regularSpringConstant", 650);
|
||||
pref("general.smoothScroll.msdPhysics.slowdownMinDeltaMS", 25);
|
||||
pref("general.smoothScroll.msdPhysics.slowdownSpringConstant", 250);
|
||||
pref("mousewheel.default.delta_multiplier_y", 200);
|
||||
@@ -36,9 +36,5 @@ pref('toolkit.legacyUserProfileCustomizations.stylesheets', true);
|
||||
|
||||
#include features.inc
|
||||
|
||||
#ifndef XP_MACOSX
|
||||
#include smoothscroll.inc
|
||||
#endif
|
||||
|
||||
#include performance.inc
|
||||
#include pip.inc
|
||||
|
||||
@@ -8,7 +8,6 @@
|
||||
content/browser/zen-sets.js (../../zen/common/zen-sets.js)
|
||||
content/browser/ZenUIManager.mjs (../../zen/common/ZenUIManager.mjs)
|
||||
content/browser/zen-components/ZenActorsManager.mjs (../../zen/common/ZenActorsManager.mjs)
|
||||
content/browser/zen-components/ZenEmojis.mjs (../../zen/common/ZenEmojis.mjs)
|
||||
content/browser/ZenCustomizableUI.sys.mjs (../../zen/common/ZenCustomizableUI.sys.mjs)
|
||||
content/browser/zen-components/ZenUIMigration.mjs (../../zen/common/ZenUIMigration.mjs)
|
||||
content/browser/zen-components/ZenCommonUtils.mjs (../../zen/common/ZenCommonUtils.mjs)
|
||||
|
||||
@@ -36,6 +36,9 @@
|
||||
<command id="cmd_contextZenAddToEssentials" />
|
||||
<command id="cmd_contextZenRemoveFromEssentials" />
|
||||
|
||||
<command id="cmd_zenCtxDeleteWorkspace" />
|
||||
<command id="cmd_zenChangeWorkspaceName" />
|
||||
|
||||
<command id="cmd_zenPinnedTabReset" />
|
||||
<command id="cmd_zenPinnedTabResetNoTab" />
|
||||
|
||||
|
||||
@@ -74,50 +74,14 @@
|
||||
<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 +91,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>
|
||||
|
||||
@@ -107,6 +107,7 @@
|
||||
|
||||
#PanelUI-menu-button,
|
||||
#appMenu-more-button2,
|
||||
.zen-workspaces-actions,
|
||||
#zen-workspace-actions-menu-icon {
|
||||
list-style-image: url('menu.svg') !important;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1084,7 +1084,9 @@ var gZenVerticalTabsManager = {
|
||||
!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');
|
||||
if (
|
||||
!this._tabEdited ||
|
||||
((!this._tabEdited.pinned || this._tabEdited.hasAttribute('zen-essential')) && isTab)
|
||||
|
||||
@@ -88,6 +88,12 @@ document.addEventListener(
|
||||
case 'cmd_contextZenRemoveFromEssentials':
|
||||
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;
|
||||
|
||||
@@ -8,6 +8,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" class="workspace-arrowscrollbox">
|
||||
<vbox class="zen-workspace-tabs-section zen-workspace-pinned-tabs-section">
|
||||
@@ -64,6 +65,13 @@
|
||||
this.scrollbox.addEventListener('underflow', this);
|
||||
this.scrollbox.addEventListener('overflow', this);
|
||||
|
||||
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._getScrollableElements = () => {
|
||||
const children = [...this.pinnedTabsContainer.children, ...this.tabsContainer.children];
|
||||
if (Services.prefs.getBoolPref('zen.view.show-newtab-button-top', false)) {
|
||||
@@ -171,6 +179,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);
|
||||
|
||||
@@ -17,7 +17,11 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
lastDelta: 0,
|
||||
direction: null,
|
||||
};
|
||||
|
||||
_lastScrollTime = 0;
|
||||
|
||||
#workspaceCreationArgs = {};
|
||||
|
||||
bookmarkMenus = [
|
||||
'PlacesToolbar',
|
||||
'bookmarks-menu-button',
|
||||
@@ -136,7 +140,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
await this.promiseSectionsInitialized;
|
||||
|
||||
// Non UI related initializations
|
||||
this._initializeWorkspaceCreationIcons();
|
||||
this._initializeWorkspaceTabContextMenus();
|
||||
if (
|
||||
Services.prefs.getBoolPref('zen.workspaces.swipe-actions', false) &&
|
||||
@@ -995,7 +998,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
this.openWorkspacesDialog(event);
|
||||
};
|
||||
indicator.addEventListener('contextmenu', th);
|
||||
indicator.addEventListener('click', th);
|
||||
}
|
||||
|
||||
shouldCloseWindow() {
|
||||
@@ -1068,39 +1070,38 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
|
||||
addPopupListeners() {
|
||||
const popup = document.getElementById('PanelUI-zen-workspaces');
|
||||
const contextMenu = document.getElementById('zenWorkspaceActionsMenu');
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
contextMenu.addEventListener('popupshowing', this.updateContextMenu.bind(this));
|
||||
contextMenu.addEventListener('command', this.handleContextMenuCommand.bind(this));
|
||||
const workspaceActions = document.getElementById('zenWorkspaceMoreActions');
|
||||
workspaceActions.addEventListener('popupshowing', this.updateWorkspaceActionsMenu.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 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 onWorkspaceIconContainerClick = this.onWorkspaceIconContainerClick.bind(this);
|
||||
for (const element of document.querySelectorAll('.PanelUI-zen-workspaces-icons-container')) {
|
||||
element.addEventListener('click', onWorkspaceIconContainerClick);
|
||||
const openInContainerMenuItem = document.getElementById(
|
||||
'context_zenWorkspacesOpenInContainerTab'
|
||||
);
|
||||
if (this.shouldShowContainers) {
|
||||
openInContainerMenuItem.removeAttribute('hidden');
|
||||
} else {
|
||||
openInContainerMenuItem.setAttribute('hidden', 'true');
|
||||
}
|
||||
|
||||
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) {
|
||||
@@ -1113,161 +1114,16 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
searchIcons(input, icons) {
|
||||
input = input.toLowerCase();
|
||||
|
||||
if (input === ':' || input === '') {
|
||||
return icons;
|
||||
}
|
||||
const emojiScores = [];
|
||||
|
||||
function calculateSearchScore(inputLength, targetLength, weight = 100) {
|
||||
return parseInt((inputLength / targetLength) * weight);
|
||||
}
|
||||
|
||||
for (let currentEmoji of icons) {
|
||||
let alignmentScore = -1;
|
||||
|
||||
let normalizedEmojiName = currentEmoji[1].toLowerCase();
|
||||
let keywordList = currentEmoji[2].split(',').map((keyword) => keyword.trim().toLowerCase());
|
||||
if (input[0] === ':') {
|
||||
let searchTerm = input.slice(1);
|
||||
let nameMatchIndex = normalizedEmojiName.indexOf(searchTerm);
|
||||
|
||||
if (nameMatchIndex !== -1 && nameMatchIndex === 0) {
|
||||
alignmentScore = calculateSearchScore(searchTerm.length, normalizedEmojiName.length, 100);
|
||||
}
|
||||
} else {
|
||||
if (input === currentEmoji[0]) {
|
||||
alignmentScore = 999;
|
||||
}
|
||||
let nameMatchIndex = normalizedEmojiName.replace(/_/g, ' ').indexOf(input);
|
||||
if (nameMatchIndex !== -1) {
|
||||
if (nameMatchIndex === 0) {
|
||||
alignmentScore = calculateSearchScore(input.length, normalizedEmojiName.length, 150);
|
||||
} else if (input[input.length - 1] !== ' ') {
|
||||
alignmentScore += calculateSearchScore(input.length, normalizedEmojiName.length, 40);
|
||||
}
|
||||
}
|
||||
for (let keyword of keywordList) {
|
||||
let keywordMatchIndex = keyword.indexOf(input);
|
||||
if (keywordMatchIndex !== -1) {
|
||||
if (keywordMatchIndex === 0) {
|
||||
alignmentScore += calculateSearchScore(input.length, keyword.length, 50);
|
||||
} else if (input[input.length - 1] !== ' ') {
|
||||
alignmentScore += calculateSearchScore(input.length, keyword.length, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//if match score is not -1, add it
|
||||
if (alignmentScore !== -1) {
|
||||
emojiScores.push({ emoji: currentEmoji[0], score: alignmentScore });
|
||||
}
|
||||
}
|
||||
// Sort the emojis by their score in descending order
|
||||
emojiScores.sort((a, b) => b.score - a.score);
|
||||
|
||||
// Return the emojis in the order of their rank
|
||||
let filteredEmojiScores = emojiScores;
|
||||
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);
|
||||
}
|
||||
updateWorkspaceActionsMenuContainer(event) {
|
||||
const workspace = this.getActiveWorkspaceFromCache();
|
||||
let containerTabId = workspace.containerTabId;
|
||||
return window.createUserContextMenu(event, {
|
||||
isContextMenu: true,
|
||||
excludeUserContextId: containerTabId,
|
||||
showDefaultTab: true,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1317,83 +1173,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 !== '';
|
||||
}
|
||||
@@ -1536,9 +1315,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
</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
|
||||
@@ -1550,25 +1326,11 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
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);
|
||||
@@ -1640,6 +1402,9 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
browser.gZenWorkspaces._workspaceBookmarksCache = null;
|
||||
}
|
||||
let workspaces = await browser.gZenWorkspaces._workspaces();
|
||||
browser.document
|
||||
.getElementById('cmd_zenCtxDeleteWorkspace')
|
||||
.setAttribute('disabled', workspaces.workspaces.length <= 1);
|
||||
if (clearCache) {
|
||||
browser.dispatchEvent(
|
||||
new CustomEvent('ZenWorkspacesUIUpdate', {
|
||||
@@ -1700,8 +1465,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
|
||||
workspacesList?.removeAttribute('reorder-mode');
|
||||
reorderModeButton?.removeAttribute('active');
|
||||
this.resetWorkspaceIconSearch();
|
||||
this.clearEmojis();
|
||||
}
|
||||
|
||||
async moveWorkspaceToEnd(draggedWorkspaceId) {
|
||||
@@ -1781,22 +1544,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
|
||||
// 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(
|
||||
@@ -1862,57 +1609,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 = [];
|
||||
@@ -2821,68 +2517,19 @@ 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
|
||||
(workspace) => workspace.uuid === this.activeWorkspace
|
||||
);
|
||||
let userContextId = parseInt(event.target.getAttribute('data-usercontextid'));
|
||||
workspace.containerTabId = userContextId + 0; // +0 to convert to number
|
||||
await this.saveWorkspace(workspace);
|
||||
window.requestAnimationFrame(async () => {
|
||||
if (workspace.uuid === this.activeWorkspace) {
|
||||
await this.changeWorkspace(workspace, {
|
||||
alwaysChange: true,
|
||||
});
|
||||
}
|
||||
}, 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;
|
||||
async contextDeleteWorkspace() {
|
||||
await this.removeWorkspace(this.activeWorkspace, true);
|
||||
}
|
||||
|
||||
findTabToBlur(tab) {
|
||||
@@ -2892,44 +2539,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;
|
||||
}
|
||||
const lazy = {};
|
||||
Services.scriptloader.loadSubScript(
|
||||
'chrome://browser/content/zen-components/ZenEmojis.mjs',
|
||||
lazy
|
||||
);
|
||||
this._emojis = lazy.zenGlobalEmojis();
|
||||
return this._emojis;
|
||||
}
|
||||
|
||||
clearEmojis() {
|
||||
// Unload from memory
|
||||
this._emojis = null;
|
||||
}
|
||||
|
||||
async changeWorkspaceShortcut(offset = 1, whileScrolling = false) {
|
||||
// Cycle through workspaces
|
||||
let workspaces = await this._workspaces();
|
||||
@@ -2991,16 +2600,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) {
|
||||
|
||||
@@ -141,55 +141,6 @@
|
||||
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;
|
||||
@@ -231,36 +182,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 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);
|
||||
@@ -313,7 +234,6 @@
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
& .zen-workspace-actions,
|
||||
.zen-workspace-actions-reorder-icon {
|
||||
display: none;
|
||||
margin: 0;
|
||||
@@ -383,13 +303,6 @@
|
||||
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;
|
||||
@@ -421,28 +334,13 @@
|
||||
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 +350,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 +386,23 @@
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
pointer-events: none;
|
||||
font-size: small;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user