mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-03-05 16:27:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'new-color-picker' of https://github.com/zen-browser/desktop into new-color-picker

Browse Source
This commit is contained in:
mr. M
2025-02-17 22:02:53 +01:00
parent d96655d6b7 327c8f5a57
commit ebaa39e17e
238 changed files with 9073 additions and 5453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/browser/app/profile/zen-browser.js
View File

@@ -8,9 +8,7 @@
#endif
#endif
pref("browser.tabs.cardPreview.enabled", true);
pref("browser.tabs.hoverPreview.enabled", true);
pref("browser.tabs.cardPreview.delayMs", 100);
pref("browser.tabs.hoverPreview.enabled", false);
#ifdef MOZ_UPDATE_CHANNEL
pref("devtools.debugger.prompt-connection", true);
@@ -82,15 +80,17 @@ pref('zen.welcome-screen.seen', false);
pref('zen.tabs.vertical', true);
pref('zen.tabs.vertical.right-side', false);
pref('zen.tabs.rename-tabs', true);
pref('zen.theme.accent-color', "#ffb787");
pref('zen.theme.content-element-separation', 6); // In pixels
pref('zen.theme.pill-button', false);
pref('zen.theme.gradient', true);
pref('zen.theme.essentials-favicon-bg', false);
pref('zen.theme.gradient.show-custom-colors', false);
pref('zen.theme.essentials-favicon-bg', true);
pref('zen.tabs.show-newtab-vertical', true);
pref('zen.view.show-newtab-button-border-top', true);
pref('zen.view.show-newtab-button-top', false);
pref('zen.view.show-newtab-button-border-top', false);
pref('zen.view.show-newtab-button-top', true);
#ifdef MOZILLA_OFFICIAL
pref('zen.rice.api.url', 'https://share.zen-browser.app', locked);
@@ -102,18 +102,12 @@ pref('zen.injections.match-urls', 'http://localhost/*', locked);
pref('zen.rice.share.notice.accepted', false);
#ifdef XP_MACOSX
pref('zen.theme.border-radius', 12); // In pixels
#else
#ifdef XP_WIN
pref('zen.theme.border-radius', 12); // In pixels
pref('zen.theme.border-radius', 10); // In pixels
#else
pref('zen.theme.border-radius', 8); // In pixels
#endif
#endif
pref('zen.theme.color-prefs.use-workspace-colors', true);
pref('zen.theme.color-prefs.amoled', false);
pref('zen.theme.color-prefs.colorful', false);
pref('zen.view.compact.hide-tabbar', true);
pref('zen.view.compact.hide-toolbar', false);
@@ -124,7 +118,9 @@ pref('zen.view.compact.color-toolbar', true);
pref('zen.view.compact.color-sidebar', true);
pref('zen.view.compact.animate-sidebar', true);
pref('zen.urlbar.replace-newtab', true);
pref('zen.urlbar.behavior', 'floating-on-type'); // default, floating-on-type, float
pref('zen.urlbar.wait-to-clear', 45000); // in ms (default 45s)
#ifdef XP_MACOSX
// Disable for macos in the meantime until @HarryHeres finds a solution for hight DPI screens
@@ -133,6 +129,10 @@ pref('zen.view.experimental-rounded-view', false);
pref('zen.view.experimental-rounded-view', true);
#endif
#ifdef XP_WIN
pref('zen.widget.windows.acrylic', true);
#endif
// Glance
pref('zen.glance.enabled', true);
pref('zen.glance.hold-duration', 300); // in ms
@@ -142,6 +142,10 @@ pref('zen.glance.activation-method', 'alt'); // ctrl, alt, shift, none, hold
pref('zen.view.sidebar-height-throttle', 200); // in ms
pref('zen.view.sidebar-expanded.max-width', 500);
#ifdef XP_MACOSX
pref('zen.view.mac.show-three-dot-menu', false);
pref('zen.widget.mac.mono-window-controls', true);
#endif
pref('zen.view.show-bottom-border', false);
pref('zen.view.use-single-toolbar', true);
pref('zen.view.sidebar-expanded', true);
@@ -158,7 +162,6 @@ pref('zen.view.hide-window-controls', true);
pref('zen.view.experimental-no-window-controls', false);
pref('zen.tabs.dim-pending', true);
pref('zen.tabs.newtab-on-middle-click', true);
pref('zen.keyboard.shortcuts.enabled', true);
pref('zen.keyboard.shortcuts.version', 0); // Empty string means default shortcuts
@@ -167,15 +170,15 @@ pref('zen.keyboard.shortcuts.disable-mainkeyset-clear', false); // for debugging
pref('zen.themes.updated-value-observer', false);
pref('zen.tab-unloader.enabled', true);
pref('zen.tab-unloader.timeout-minutes', 20);
pref('zen.tab-unloader.timeout-minutes', 40);
pref('zen.tab-unloader.excluded-urls', "example.com,example.org");
pref('zen.pinned-tab-manager.debug', false);
pref('zen.pinned-tab-manager.restore-pinned-tabs-to-pinned-url', false);
pref('zen.pinned-tab-manager.close-shortcut-behavior', 'switch');
pref('zen.pinned-tab-manager.close-shortcut-behavior', 'unload-switch');
// Pref to enable the new profiles (TODO: Check this out!)
//pref("browser.profiles.enabled", true);
// TODO: Check this out!
pref("browser.profiles.enabled", false);
// Zen webpanels (calling it sidebar due to legacy reasons)
pref('zen.sidebar.data', "{\"data\":\n {\"p1\":{\n \"url\":\"https://www.wikipedia.org/\"\n },\n\"p2\":{\n \"url\":\"https://m.twitter.com/\",\n\"ua\": true\n },\n\"p3\": {\n \"url\": \"https://www.youtube.com/\",\n\"ua\": true\n},\n\"p4\": {\n \"url\": \"https://translate.google.com/\",\n\"ua\": true\n},\n\"p5\": {\n \"url\": \"https://todoist.com/\",\n\"ua\": true\n}},\n\"index\":[\"p1\",\"p2\",\"p3\",\"p4\",\"p5\"]}");
@@ -184,13 +187,12 @@ pref('zen.sidebar.close-on-blur', true);
pref('zen.sidebar.max-webpanels', 8);
// Zen Split View
pref('zen.splitView.working', false);
pref('zen.splitView.min-resize-width', 7);
pref('zen.splitView.change-on-hover', false);
pref('zen.splitView.rearrange-hover-size', 24);
// Startup flags
pref('zen.startup.smooth-scroll-in-tabs', false);
pref('zen.startup.smooth-scroll-in-tabs', true);
// Zen Workspaces
pref('zen.workspaces.disabled_for_testing', false);
@@ -199,7 +201,7 @@ pref('zen.workspaces.hide-default-container-indicator', true);
pref('zen.workspaces.individual-pinned-tabs', true);
pref('zen.workspaces.show-icon-strip', true);
pref('zen.workspaces.force-container-workspace', false);
pref('zen.workspaces.open-new-tab-if-last-unpinned-tab-is-closed', true);
pref('zen.workspaces.open-new-tab-if-last-unpinned-tab-is-closed', false);
pref('zen.workspaces.show-workspace-indicator', true);
pref('zen.workspaces.swipe-actions', true);
pref('zen.workspaces.wrap-around-navigation', true);
@@ -382,6 +384,7 @@ pref("browser.urlbar.quicksuggest.enabled", false);
pref("browser.urlbar.suggest.quicksuggest.sponsored", false);
pref("browser.urlbar.suggest.quicksuggest.nonsponsored", false);
pref("browser.urlbar.groupLabels.enabled", false);
pref("browser.urlbar.keepPanelOpenDuringImeComposition", true); // IMPORTANT: Fixes closing the urlbar when on some languages
pref("browser.formfill.enable", false);
pref("security.insecure_connection_text.enabled", true);
pref("security.insecure_connection_text.pbmode.enabled", true);
@@ -429,7 +432,7 @@ pref("browser.aboutwelcome.enabled", false);
// ---- Experimental settings to try make zen faster
pref("gfx.canvas.accelerated.cache-items", 32768);
pref("gfx.canvas.accelerated.cache-size", 4096);
pref("gfx.canvas.accelerated.cache-size", 256);
pref("gfx.content.skia-font-cache-size", 80);
pref("media.memory_cache_max_size", 1048576);

4
src/browser/base/content/ZenCustomizableUI.sys.mjs
View File

@@ -4,7 +4,7 @@ export var ZenCustomizableUI = new (class {
constructor() {}
TYPE_TOOLBAR = 'toolbar';
defaultSidebarIcons = ['zen-profile-button', 'zen-workspaces-button', 'downloads-button'];
defaultSidebarIcons = ['preferences-button', 'zen-workspaces-button', 'downloads-button'];
startup(CustomizableUIInternal) {
CustomizableUIInternal.registerArea(
@@ -126,7 +126,7 @@ export var ZenCustomizableUI = new (class {
window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-top-buttons'));
window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-icons-wrapper'));
window.addEventListener(
'MozAfterPaint',
'DOMContentLoaded',
() => {
this._dispatchResizeEvent(window);
},

43
src/browser/base/content/ZenStartup.mjs
View File

@@ -3,11 +3,9 @@
var ZenStartup = {
init() {
this.openWatermark();
window.SessionStore.promiseInitialized.then(() => {
this._changeSidebarLocation();
this._zenInitBrowserLayout();
this._initSearchBar();
});
this._changeSidebarLocation();
this._zenInitBrowserLayout();
this._initSearchBar();
},
_zenInitBrowserLayout() {
@@ -31,11 +29,7 @@
document.getElementById('zen-appcontent-navbar-container').appendChild(deckTemplate);
}
// Disable smooth scroll
gBrowser.tabContainer.arrowScrollbox.smoothScroll = Services.prefs.getBoolPref(
'zen.startup.smooth-scroll-in-tabs',
false
);
this._initSidebarScrolling();
gZenCompactModeManager.init();
ZenWorkspaces.init();
@@ -86,6 +80,35 @@
}
},
_initSidebarScrolling() {
// Disable smooth scroll
const canSmoothScroll = Services.prefs.getBoolPref('zen.startup.smooth-scroll-in-tabs', false);
const tabsWrapper = document.getElementById('zen-tabs-wrapper');
gBrowser.tabContainer.addEventListener('wheel', (event) => {
if (canSmoothScroll) return;
event.preventDefault(); // Prevent the smooth scroll behavior
gBrowser.tabContainer.scrollTop += event.deltaY * 20; // Apply immediate scroll
});
// Detect overflow and underflow
const observer = new ResizeObserver((_) => {
const tabContainer = gBrowser.tabContainer;
// const isVertical = tabContainer.getAttribute('orient') === 'vertical';
// let contentSize = tabsWrapper.getBoundingClientRect()[isVertical ? 'height' : 'width'];
// NOTE: This should be contentSize > scrollClientSize, but due
// to how Gecko internally rounds in those cases, we allow for some
// minor differences (the internal Gecko layout size is 1/60th of a
// pixel, so 0.02 should cover it).
//let overflowing = contentSize - tabContainer.arrowScrollbox.scrollClientSize > 0.02;
let overflowing = true; // cheatign the system, because we want to always show make the element overflowing
window.requestAnimationFrame(() => {
tabContainer.arrowScrollbox.toggleAttribute('overflowing', overflowing);
tabContainer.arrowScrollbox.dispatchEvent(new CustomEvent(overflowing ? 'overflow' : 'underflow'));
});
});
observer.observe(tabsWrapper);
},
_initSearchBar() {
// Only focus the url bar
gURLBar.focus();

329
src/browser/base/content/ZenUIManager.mjs
View File

@@ -1,20 +1,26 @@
var gZenUIManager = {
_popupTrackingElements: [],
_hoverPausedForExpand: false,
_hasLoadedDOM: false,
init() {
document.addEventListener('popupshowing', this.onPopupShowing.bind(this));
document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
XPCOMUtils.defineLazyPreferenceGetter(this, 'sidebarHeightThrottle', 'zen.view.sidebar-height-throttle', 500);
XPCOMUtils.defineLazyPreferenceGetter(this, 'contentElementSeparation', 'zen.theme.content-element-separation', 0);
XPCOMUtils.defineLazyPreferenceGetter(this, 'urlbarWaitToClear', 'zen.urlbar.wait-to-clear', 0);
gURLBar._zenTrimURL = this.urlbarTrim.bind(this);
ChromeUtils.defineLazyGetter(this, 'motion', () => {
return ChromeUtils.importESModule('chrome://browser/content/zen-vendor/motion.min.mjs', { global: 'current' });
});
new ResizeObserver(gZenCommonActions.throttle(this.updateTabsToolbar.bind(this), this.sidebarHeightThrottle)).observe(
document.getElementById('tabbrowser-tabs')
);
ChromeUtils.defineLazyGetter(this, '_toastContainer', () => {
return document.getElementById('zen-toast-container');
});
new ResizeObserver(this.updateTabsToolbar.bind(this)).observe(document.getElementById('TabsToolbar'));
new ResizeObserver(
gZenCommonActions.throttle(
@@ -22,25 +28,60 @@ var gZenUIManager = {
this.sidebarHeightThrottle
)
).observe(document.getElementById('navigator-toolbox'));
SessionStore.promiseAllWindowsRestored.then(() => {
this._hasLoadedDOM = true;
this.updateTabsToolbar();
});
window.addEventListener('TabClose', this.onTabClose.bind(this));
this.tabsWrapper.addEventListener('scroll', this.saveScrollbarState.bind(this));
},
updateTabsToolbar() {
// Set tabs max-height to the "toolbar-items" height
const toolbarItems = document.getElementById('tabbrowser-tabs');
const tabs = document.getElementById('tabbrowser-arrowscrollbox');
tabs.style.maxHeight = '0px'; // reset to 0
const toolbarRect = toolbarItems.getBoundingClientRect();
let height = toolbarRect.height;
// -5 for the controls padding
let totalHeight = toolbarRect.height - this.contentElementSeparation * 2 - 5;
// remove the height from other elements that aren't hidden
const otherElements = document.querySelectorAll('#tabbrowser-tabs > *:not([hidden="true"])');
for (let tab of otherElements) {
if (tabs === tab) continue;
totalHeight -= tab.getBoundingClientRect().height;
const tabs = this.tabsWrapper;
// Remove tabs so we can accurately calculate the height
// without them affecting the height of the toolbar
for (const tab of gBrowser.tabs) {
if (tab.hasAttribute('zen-essential')) {
continue;
}
tab.style.maxHeight = '0px';
}
tabs.style.maxHeight = totalHeight + 'px';
//console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px');
tabs.style.flex = '1';
tabs.style.removeProperty('max-height');
const toolbarRect = tabs.getBoundingClientRect();
let height = toolbarRect.height;
for (const tab of gBrowser.tabs) {
if (tab.hasAttribute('zen-essential')) {
continue;
}
tab.style.removeProperty('max-height');
}
tabs.style.removeProperty('flex');
tabs.style.maxHeight = height + 'px';
},
get tabsWrapper() {
if (this._tabsWrapper) {
return this._tabsWrapper;
}
this._tabsWrapper = document.getElementById('zen-tabs-wrapper');
return this._tabsWrapper;
},
saveScrollbarState() {
this._scrollbarState = this.tabsWrapper.scrollTop;
},
restoreScrollbarState() {
this.tabsWrapper.scrollTop = this._scrollbarState;
},
onTabClose(event) {
this.updateTabsToolbar();
this.restoreScrollbarState();
},
openAndChangeToTab(url, options) {
@@ -55,9 +96,7 @@ var gZenUIManager = {
},
generateUuidv4() {
return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) =>
(+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16)
);
return Services.uuid.generateUUID().toString();
},
toogleBookmarksSidebar() {
@@ -113,6 +152,111 @@ var gZenUIManager = {
this.__currentPopup = null;
this.__currentPopupTrackElement = null;
},
// Section: URL bar
get newtabButtons() {
return document.querySelectorAll('#tabs-newtab-button');
},
_prevUrlbarLabel: null,
_lastSearch: '',
_clearTimeout: null,
_lastTab: null,
handleNewTab(werePassedURL, searchClipboard, where) {
const shouldOpenURLBar =
Services.prefs.getBoolPref('zen.urlbar.replace-newtab') && !werePassedURL && !searchClipboard && where === 'tab';
if (shouldOpenURLBar) {
if (this._clearTimeout) {
clearTimeout(this._clearTimeout);
}
this._lastTab = gBrowser.selectedTab;
this._lastTab._visuallySelected = false;
this._prevUrlbarLabel = gURLBar._untrimmedValue;
gURLBar._zenHandleUrlbarClose = this.handleUrlbarClose.bind(this);
gURLBar.setAttribute('zen-newtab', true);
for (const button of this.newtabButtons) {
button.setAttribute('in-urlbar', true);
}
document.getElementById('Browser:OpenLocation').doCommand();
gURLBar.search(this._lastSearch);
return true;
}
return false;
},
clearUrlbarData() {
this._prevUrlbarLabel = null;
this._lastSearch = '';
},
handleUrlbarClose(onSwitch) {
gURLBar._zenHandleUrlbarClose = null;
gURLBar.removeAttribute('zen-newtab');
this._lastTab._visuallySelected = true;
this._lastTab = null;
for (const button of this.newtabButtons) {
button.removeAttribute('in-urlbar');
}
if (onSwitch) {
this.clearUrlbarData();
} else {
this._lastSearch = gURLBar._untrimmedValue;
this._clearTimeout = setTimeout(() => {
this.clearUrlbarData();
}, this.urlbarWaitToClear);
}
gURLBar.setURI(this._prevUrlbarLabel, onSwitch, false, false, !onSwitch);
gURLBar.handleRevert();
if (gURLBar.focused) {
gURLBar.view.close({ elementPicked: onSwitch });
gURLBar.updateTextOverflow();
if (gBrowser.selectedTab.linkedBrowser && onSwitch) {
gURLBar.getBrowserState(gBrowser.selectedTab.linkedBrowser).urlbarFocused = false;
}
}
},
urlbarTrim(aURL) {
if (gZenVerticalTabsManager._hasSetSingleToolbar) {
let url = BrowserUIUtils.removeSingleTrailingSlashFromURL(aURL);
return url.startsWith('http://') || url.startsWith('https://') ? url.split('/')[2] : url;
}
return BrowserUIUtils.trimURL(aURL);
},
// Section: Notification messages
_createToastElement(messageId, options) {
const element = document.createXULElement('vbox');
const label = document.createXULElement('label');
document.l10n.setAttributes(label, messageId, options);
element.appendChild(label);
if (options.descriptionId) {
const description = document.createXULElement('label');
description.classList.add('description');
document.l10n.setAttributes(description, options.descriptionId, options);
element.appendChild(description);
}
element.classList.add('zen-toast');
return element;
},
async showToast(messageId, options = {}) {
const toast = this._createToastElement(messageId, options);
this._toastContainer.removeAttribute('hidden');
this._toastContainer.appendChild(toast);
await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.4 });
await new Promise((resolve) => setTimeout(resolve, 3000));
await this.motion.animate(toast, { opacity: [1, 0], scale: [1, 0.9] }, { duration: 0.2, bounce: 0 });
const toastHeight = toast.getBoundingClientRect().height;
// 5 for the separation between toasts
await this.motion.animate(toast, { marginBottom: [0, `-${toastHeight + 5}px`] }, { duration: 0.2 });
toast.remove();
if (!this._toastContainer.hasChildNodes()) {
this._toastContainer.setAttribute('hidden', 'true');
}
},
};
var gZenVerticalTabsManager = {
@@ -147,27 +291,14 @@ var gZenVerticalTabsManager = {
window.addEventListener('customizationstarting', this._preCustomize.bind(this));
window.addEventListener('aftercustomization', this._postCustomize.bind(this));
window.addEventListener('DOMContentLoaded', updateEvent, { once: true });
const tabs = document.getElementById('tabbrowser-tabs');
XPCOMUtils.defineLazyPreferenceGetter(this, 'canOpenTabOnMiddleClick', 'zen.tabs.newtab-on-middle-click', true);
this._updateEvent();
if (!this.isWindowsStyledButtons) {
document.documentElement.setAttribute('zen-window-buttons-reversed', true);
}
if (tabs) {
tabs.addEventListener('mouseup', this.openNewTabOnTabsMiddleClick.bind(this));
}
},
openNewTabOnTabsMiddleClick(event) {
if (event.button === 1 && event.target.id === 'tabbrowser-tabs' && this.canOpenTabOnMiddleClick) {
document.getElementById('cmd_newNavigatorTabNoEvent').doCommand();
event.stopPropagation();
event.preventDefault();
}
this._renameTabHalt = this.renameTabHalt.bind(this);
gBrowser.tabContainer.addEventListener('dblclick', this.renameTabStart.bind(this));
},
toggleExpand() {
@@ -204,6 +335,45 @@ var gZenVerticalTabsManager = {
return this.__topButtonsSeparatorElement;
},
animateTab(aTab) {
if (!gZenUIManager.motion || !aTab || !gZenUIManager._hasLoadedDOM) {
return;
}
// get next visible tab
const isLastTab = () => {
const visibleTabs = gBrowser.visibleTabs;
return visibleTabs[visibleTabs.length - 1] === aTab;
};
const tabSize = aTab.getBoundingClientRect().height;
const transform = `-${tabSize}px`;
gZenUIManager.motion
.animate(
aTab,
{
opacity: [0, 1],
transform: ['scale(0.95)', 'scale(1)'],
marginBottom: isLastTab() ? [] : [transform, '0px'],
},
{
duration: 0.2,
easing: 'ease-out',
}
)
.then(() => {
aTab.style.removeProperty('margin-bottom');
aTab.style.removeProperty('transform');
aTab.style.removeProperty('opacity');
});
gZenUIManager.motion
.animate(aTab.querySelector('.tab-content'), {
filter: ['blur(1px)', 'blur(0px)'],
})
.then(() => {
aTab.querySelector('.tab-stack').style.removeProperty('filter');
});
},
get actualWindowButtons() {
// we have multiple ".titlebar-buttonbox-container" in the DOM, because of the titlebar
if (!this.__actualWindowButtons) {
@@ -295,6 +465,11 @@ var gZenVerticalTabsManager = {
gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
// on purpose, we set the orient to horizontal, because the arrowScrollbox is vertical
gBrowser.tabContainer.arrowScrollbox.scrollbox.setAttribute(
'orient',
isVerticalTabs && ZenWorkspaces.workspaceEnabled ? 'horizontal' : 'vertical'
);
const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
if (isRightSide) {
@@ -448,6 +623,7 @@ var gZenVerticalTabsManager = {
} catch (e) {
console.error(e);
}
gZenUIManager.updateTabsToolbar();
this._isUpdating = false;
},
@@ -488,4 +664,85 @@ var gZenVerticalTabsManager = {
}
target.appendChild(child);
},
renameTabKeydown(event) {
if (event.key === 'Enter') {
let label = this._tabEdited.querySelector('.tab-label-container-editing');
let input = this._tabEdited.querySelector('#tab-label-input');
let newName = input.value.trim();
// 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
this._tabEdited.removeAttribute('zen-has-static-label');
if (newName) {
gBrowser._setTabLabel(this._tabEdited, newName);
this._tabEdited.setAttribute('zen-has-static-label', 'true');
} else {
gBrowser.setTabTitle(this._tabEdited);
}
// Maybe add some confetti here?!?
gZenUIManager.motion.animate(
this._tabEdited,
{
scale: [1, 0.98, 1],
},
{
duration: 0.25,
}
);
this._tabEdited.querySelector('.tab-editor-container').remove();
label.classList.remove('tab-label-container-editing');
this._tabEdited = null;
} else if (event.key === 'Escape') {
event.target.blur();
}
},
renameTabStart(event) {
if (
this._tabEdited ||
!Services.prefs.getBoolPref('zen.tabs.rename-tabs') ||
Services.prefs.getBoolPref('browser.tabs.closeTabByDblclick') ||
!gZenVerticalTabsManager._prefsSidebarExpanded
)
return;
this._tabEdited = event.target.closest('.tabbrowser-tab');
if (!this._tabEdited || !this._tabEdited.pinned || this._tabEdited.hasAttribute('zen-essential')) {
this._tabEdited = null;
return;
}
const label = this._tabEdited.querySelector('.tab-label-container');
label.classList.add('tab-label-container-editing');
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 input = document.createElement('input');
input.id = 'tab-label-input';
input.value = this._tabEdited.label;
input.addEventListener('keydown', this.renameTabKeydown.bind(this));
containerHtml.appendChild(input);
input.focus();
input.select();
input.addEventListener('blur', this._renameTabHalt);
},
renameTabHalt(event) {
if (document.activeElement === event.target || !this._tabEdited) {
return;
}
this._tabEdited.querySelector('.tab-editor-container').remove();
const label = this._tabEdited.querySelector('.tab-label-container-editing');
label.classList.remove('tab-label-container-editing');
this._tabEdited = null;
},
};

15
src/browser/base/content/browser-commands-js.patch
View File

@@ -1,8 +1,19 @@
diff --git a/browser/base/content/browser-commands.js b/browser/base/content/browser-commands.js
index 352de44dda36e3f6672eb353f42978ede0cd2681..d6956a318c34bfb12b0ba957edab1166e1a4edaf 100644
index 352de44dda36e3f6672eb353f42978ede0cd2681..66d1616da17df3430cec0994a346f0f446944f1a 100644
--- a/browser/base/content/browser-commands.js
+++ b/browser/base/content/browser-commands.js
@@ -407,8 +407,8 @@ var BrowserCommands = {
@@ -318,6 +318,10 @@ var BrowserCommands = {
}
}
+ if (gZenUIManager.handleNewTab(werePassedURL, searchClipboard, where)) {
+ return;
+ }
+
// A notification intended to be useful for modular peformance tracking
// starting as close as is reasonably possible to the time when the user
// expressed the intent to open a new tab. Since there are a lot of
@@ -407,8 +411,8 @@ var BrowserCommands = {
(event.ctrlKey || event.metaKey || event.altKey) &&
gBrowser.selectedTab.pinned
) {

18
src/browser/base/content/browser-init-js.patch
View File

@@ -1,11 +1,11 @@
diff --git a/browser/base/content/browser-init.js b/browser/base/content/browser-init.js
index 9df41bb3c82919839ee1408aa4d177ea7ee40a56..e37c64fa2c2ea39762be4285a1a7055463ded537 100644
index 63100defacf66c6b3232b9e0a783a5fd14e3a46a..22b79b021ff0baab4dac602447a124308208c828 100644
--- a/browser/base/content/browser-init.js
+++ b/browser/base/content/browser-init.js
@@ -152,13 +152,15 @@ var gBrowserInit = {
elem.setAttribute("skipintoolbarset", "true");
}
}
@@ -162,13 +162,15 @@ var gBrowserInit = {
elem.setAttribute("skipintoolbarset", "true");
}
}
+ ZenCustomizableUI.init(window);
for (let area of CustomizableUI.areas) {
let type = CustomizableUI.getAreaType(area);
@@ -16,10 +16,10 @@ index 9df41bb3c82919839ee1408aa4d177ea7ee40a56..e37c64fa2c2ea39762be4285a1a70554
}
}
+ ZenCustomizableUI.registerToolbarNodes(window);
if (isVerticalTabs) {
// Show the vertical tabs toolbar
setToolbarVisibility(
@@ -253,6 +255,10 @@ var gBrowserInit = {
if (isVerticalTabs) {
// Show the vertical tabs toolbar
setToolbarVisibility(
@@ -287,6 +289,10 @@ var gBrowserInit = {
gPrivateBrowsingUI.init();
BrowserSearch.init();
BrowserPageActions.init();

13
src/browser/base/content/browser-js.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
index 9a65dcc7ad41ab961907c95338e023b173d4f474..9477e0c115ed3c4a670f1ac63846b6de01bf8b8c 100644
index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..1f051e8a1e8a58e8bb721196deecfa36f4089dd6 100644
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -32,6 +32,7 @@ ChromeUtils.defineESModuleGetters(this, {
@@ -10,7 +10,7 @@ index 9a65dcc7ad41ab961907c95338e023b173d4f474..9477e0c115ed3c4a670f1ac63846b6de
DevToolsSocketStatus:
"resource://devtools/shared/security/DevToolsSocketStatus.sys.mjs",
DownloadUtils: "resource://gre/modules/DownloadUtils.sys.mjs",
@@ -630,6 +631,15 @@ XPCOMUtils.defineLazyPreferenceGetter(
@@ -632,6 +633,15 @@ XPCOMUtils.defineLazyPreferenceGetter(
false
);
@@ -26,19 +26,18 @@ index 9a65dcc7ad41ab961907c95338e023b173d4f474..9477e0c115ed3c4a670f1ac63846b6de
customElements.setElementCreationCallback("screenshots-buttons", () => {
Services.scriptloader.loadSubScript(
"chrome://browser/content/screenshots/screenshots-buttons.js",
@@ -3440,6 +3450,11 @@ var XULBrowserWindow = {
@@ -3440,6 +3450,10 @@ var XULBrowserWindow = {
AboutReaderParent.updateReaderButton(gBrowser.selectedBrowser);
TranslationsParent.onLocationChange(gBrowser.selectedBrowser);
+ gZenViewSplitter.onLocationChange(gBrowser.selectedBrowser);
+ ZenWorkspaces.onLocationChange(gBrowser.selectedBrowser);
+ gZenTabUnloader.onLocationChange(gBrowser.selectedBrowser);
+ gZenGlanceManager.onLocationChange(gBrowser.selectedBrowser);
+
PictureInPicture.updateUrlbarToggle(gBrowser.selectedBrowser);
if (!gMultiProcessBrowser) {
@@ -4435,7 +4450,7 @@ nsBrowserAccess.prototype = {
@@ -4435,7 +4449,7 @@ nsBrowserAccess.prototype = {
// Passing a null-URI to only create the content window,
// and pass true for aSkipLoad to prevent loading of
// about:blank
@@ -47,7 +46,7 @@ index 9a65dcc7ad41ab961907c95338e023b173d4f474..9477e0c115ed3c4a670f1ac63846b6de
null,
aParams,
aWhere,
@@ -4443,6 +4458,10 @@ nsBrowserAccess.prototype = {
@@ -4443,6 +4457,10 @@ nsBrowserAccess.prototype = {
aName,
true
);
@@ -58,7 +57,7 @@ index 9a65dcc7ad41ab961907c95338e023b173d4f474..9477e0c115ed3c4a670f1ac63846b6de
},
openURIInFrame: function browser_openURIInFrame(
@@ -7281,6 +7300,12 @@ var gDialogBox = {
@@ -7285,6 +7303,12 @@ var gDialogBox = {
parentElement.showModal();
this._didOpenHTMLDialog = true;

10
src/browser/base/content/browser-sets-js.patch
View File

@@ -1,13 +1,13 @@
diff --git a/browser/base/content/browser-sets.js b/browser/base/content/browser-sets.js
index 3031278749317d153624c6ccfbcc9d47aaf4089f..e67a8c3b56c01334627350c494b0139638ebf19a 100644
index 61aef2d420a78fb1910f556b71f6db75a16180ed..a3a1e70bedb760c165c338c28de6f2ee924df8de 100644
--- a/browser/base/content/browser-sets.js
+++ b/browser/base/content/browser-sets.js
@@ -245,7 +245,7 @@ document.addEventListener(
@@ -250,7 +250,7 @@ document.addEventListener(
}
});
- document.getElementById("mainKeyset").addEventListener("command", event => {
+ document.getElementById("zenKeyset").addEventListener("command", event => {
switch (event.target.id) {
case "goHome":
BrowserCommands.home();
const SIDEBAR_REVAMP_PREF = "sidebar.revamp";
const SIDEBAR_REVAMP_ENABLED = Services.prefs.getBoolPref(
SIDEBAR_REVAMP_PREF,

11
src/browser/base/content/browser-xhtml.patch
View File

@@ -1,17 +1,17 @@
diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
index ca8953f3604f4f70de76576964af5f3c733f17a0..a2731ef6d4392301217cd05f6583e4814f1118e2 100644
index 891c067d6ad718061c410c04743bed25744504b5..b7ded9691225068b23e4d6a5113242d0c0f5f842 100644
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -101,6 +101,8 @@
@@ -99,6 +99,8 @@
<title data-l10n-id="browser-main-window-title"></title>
<title data-l10n-id="browser-main-window-default-title"></title>
+#include zen-preloaded.inc.xhtml
+
# All JS files which are needed by browser.xhtml and other top level windows to
# support MacOS specific features *must* go into the global-scripts.inc file so
# that they can be shared with macWindow.inc.xhtml.
@@ -145,6 +147,7 @@
@@ -143,6 +145,7 @@
window.addEventListener("DOMContentLoaded",
gBrowserInit.onDOMContentLoaded.bind(gBrowserInit), { once: true });
</script>
@@ -19,7 +19,7 @@ index ca8953f3604f4f70de76576964af5f3c733f17a0..a2731ef6d4392301217cd05f6583e481
</head>
<html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
# All sets except for popupsets (commands, keys, and stringbundles)
@@ -166,9 +169,12 @@
@@ -164,9 +167,13 @@
</vbox>
</html:template>
@@ -27,6 +27,7 @@ index ca8953f3604f4f70de76576964af5f3c733f17a0..a2731ef6d4392301217cd05f6583e481
-
-#include browser-box.inc.xhtml
+ <hbox id="zen-main-app-wrapper" flex="1" persist="zen-compact-mode">
+ <vbox id="zen-toast-container"></vbox>
+ #include navigator-toolbox.inc.xhtml
+ <html:span id="zen-sidebar-box-container">
+ </html:span>

12
src/browser/base/content/main-popupset-inc-xhtml.patch
View File

@@ -1,8 +1,8 @@
diff --git a/browser/base/content/main-popupset.inc.xhtml b/browser/base/content/main-popupset.inc.xhtml
index 1fb595272a184f9a40f56f87d86232e3324f7750..8dd0f0ff856be524a5fa27fb8c6180c1fe058134 100644
index e5f3424eaeeec0ba552537f167dd99e912216d94..4bdfcdb23fe9c44ad3d4de273c64f4cc31cb4034 100644
--- a/browser/base/content/main-popupset.inc.xhtml
+++ b/browser/base/content/main-popupset.inc.xhtml
@@ -144,6 +144,10 @@
@@ -181,6 +181,10 @@
hidden="true"
tabspecific="true"
aria-labelledby="editBookmarkPanelTitle">
@@ -13,17 +13,17 @@ index 1fb595272a184f9a40f56f87d86232e3324f7750..8dd0f0ff856be524a5fa27fb8c6180c1
<box class="panel-header">
<html:h1>
<html:span id="editBookmarkPanelTitle"/>
@@ -169,6 +173,7 @@
@@ -206,6 +210,7 @@
class="footer-button"/>
</html:moz-button-group>
</vbox>
+ </vbox>
+ </vbox>
</panel>
</html:template>
@@ -454,6 +459,8 @@
@@ -535,6 +540,8 @@
#include popup-notifications.inc
#include popup-notifications.inc.xhtml
+#include zen-popupset.inc.xhtml
+

38
src/browser/base/content/navigator-toolbox-inc-xhtml.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
index 00391af141d9015fe5839534e5e6b22a91ba65d9..17d8ac96986e698b09033b870c24fc2f61c47a05 100644
index a0a382643a2f74b6d789f3641ef300eed202d5e9..7a2be5fe6cdecb771ce3326008085ae402a465de 100644
--- a/browser/base/content/navigator-toolbox.inc.xhtml
+++ b/browser/base/content/navigator-toolbox.inc.xhtml
@@ -2,7 +2,7 @@
@@ -29,23 +29,30 @@ index 00391af141d9015fe5839534e5e6b22a91ba65d9..17d8ac96986e698b09033b870c24fc2f
<toolbartabstop/>
<hbox id="TabsToolbar-customization-target" flex="1">
<toolbarbutton id="firefox-view-button"
@@ -40,6 +40,7 @@
@@ -40,9 +40,9 @@
data-l10n-id="toolbar-button-firefox-view-2"
role="button"
aria-pressed="false"
+ hidden="true"
cui-areatype="toolbar"
removable="true"/>
@@ -55,9 +56,14 @@
-
<tabs id="tabbrowser-tabs"
is="tabbrowser-tabs"
aria-multiselectable="true"
@@ -50,6 +50,10 @@
tooltip="tabbrowser-tab-tooltip"
orient="horizontal"
stopwatchid="FX_TAB_CLICK_MS">
+<html:div id="zen-essentials-container" skipintoolbarset="true"></html:div>
+<hbox id="zen-current-workspace-indicator-container"></hbox>
+<html:div id="zen-tabs-wrapper">
+<html:div id="zen-browser-tabs-container">
<hbox class="tab-drop-indicator" hidden="true"/>
# If the name (tabbrowser-arrowscrollbox) or structure of this changes
# significantly, there is an optimization in
# DisplayPortUtils::MaybeCreateDisplayPortInFirstScrollFrameEncountered based
@@ -57,7 +61,7 @@
# the current structure that we may want to revisit.
+ <html:div id="zen-essentials-container"></html:div>
+ <hbox id="zen-current-workspace-indicator">
+ <hbox id="zen-current-workspace-indicator-icon"></hbox>
+ <hbox id="zen-current-workspace-indicator-name"></hbox>
+ </hbox>
<html:div id="vertical-pinned-tabs-container" tabindex="-1"></html:div>
<html:div id="vertical-pinned-tabs-container-separator"></html:div>
- <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="horizontal" flex="1" clicktoscroll="" scrolledtostart="" scrolledtoend="">
@@ -53,6 +60,15 @@ index 00391af141d9015fe5839534e5e6b22a91ba65d9..17d8ac96986e698b09033b870c24fc2f
<tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
<hbox id="tabbrowser-arrowscrollbox-periphery">
<toolbartabstop/>
@@ -75,6 +79,8 @@
tooltip="dynamic-shortcut-tooltip"
data-l10n-id="tabs-toolbar-new-tab"/>
<html:span id="tabbrowser-tab-a11y-desc" hidden="true"/>
+</html:div>
+</html:div>
</tabs>
<toolbarbutton id="new-tab-button"
@@ -100,11 +106,12 @@
#include private-browsing-indicator.inc.xhtml
<toolbarbutton id="content-analysis-indicator"
@@ -69,7 +85,7 @@ index 00391af141d9015fe5839534e5e6b22a91ba65d9..17d8ac96986e698b09033b870c24fc2f
<toolbar id="nav-bar"
class="browser-toolbar chromeclass-location"
data-l10n-id="navbar-accessible"
@@ -487,10 +494,12 @@
@@ -490,10 +497,12 @@
consumeanchor="PanelUI-button"
data-l10n-id="appmenu-menu-button-closed2"/>
</toolbaritem>

18
src/browser/base/content/navigator-toolbox-js.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/navigator-toolbox.js b/browser/base/content/navigator-toolbox.js
index 64ded8fb2c08f1dbfec8fe08ab427a24b53f1169..69009d53d7242c26f777ac2e0bb1897ff27ad916 100644
index 64ded8fb2c08f1dbfec8fe08ab427a24b53f1169..9e1e888554279b6e1df3bc1cb907afd2ccb330ca 100644
--- a/browser/base/content/navigator-toolbox.js
+++ b/browser/base/content/navigator-toolbox.js
@@ -8,7 +8,7 @@
@@ -11,3 +11,19 @@ index 64ded8fb2c08f1dbfec8fe08ab427a24b53f1169..69009d53d7242c26f777ac2e0bb1897f
const widgetOverflow = document.getElementById("widget-overflow");
function onPopupShowing(event) {
@@ -187,6 +187,7 @@ document.addEventListener(
#reload-button ,
#urlbar-go-button,
#reader-mode-button,
+ #zen-tabs-wrapper,
#picture-in-picture-button,
#shopping-sidebar-button,
#urlbar-zoom-button,
@@ -208,6 +209,7 @@ document.addEventListener(
case "vertical-tabs-newtab-button":
case "tabs-newtab-button":
case "new-tab-button":
+ case "zen-tabs-wrapper":
gBrowser.handleNewTabMiddleClick(element, event);
break;

1
src/browser/base/content/zen-assets.jar.inc.mn
View File

@@ -4,6 +4,7 @@
content/browser/ZenStartup.mjs (content/ZenStartup.mjs)
content/browser/ZenUIManager.mjs (content/ZenUIManager.mjs)
content/browser/ZenCustomizableUI.sys.mjs (content/ZenCustomizableUI.sys.mjs)
content/browser/zen-components/ZenUIMigration.mjs (zen-components/ZenUIMigration.mjs)
content/browser/zen-components/ZenCompactMode.mjs (zen-components/ZenCompactMode.mjs)
content/browser/zen-components/ZenViewSplitter.mjs (zen-components/ZenViewSplitter.mjs)
content/browser/zen-components/ZenThemesCommon.mjs (zen-components/ZenThemesCommon.mjs)

6
src/browser/base/content/zen-glance.inc.xhtml
View File

@@ -1,4 +1,4 @@
<vbox id="zen-glance-sidebar-container">
<toolbarbutton id="zen-glance-sidebar-close" class="toolbarbutton-1" oncommand="gZenGlanceManager.closeGlance()"/>
<vbox id="zen-glance-sidebar-container" hidden="true">
<toolbarbutton id="zen-glance-sidebar-close" class="toolbarbutton-1" oncommand="gZenGlanceManager.closeGlance({ onTabClose: true })"/>
<toolbarbutton id="zen-glance-sidebar-open" class="toolbarbutton-1" oncommand="gZenGlanceManager.fullyOpenGlance()"/>
</vbox>
</vbox>

13
src/browser/base/content/zen-popupset.inc.xhtml
View File

@@ -105,13 +105,18 @@
<panelmultiview id="PanelUI-zen-gradient-generator-multiview" mainViewId="PanelUI-zen-gradient-generator-view">
<panelview id="PanelUI-zen-gradient-generator-view" class="PanelUI-subView zen-theme-picker" role="document" mainview-with-header="true" has-custom-header="true">
<hbox class="zen-theme-picker-gradient">
<div id="PanelUI-zen-gradient-generator-color-actions">
<button id="PanelUI-zen-gradient-generator-color-add" class="subviewbutton">
</button>
<button id="PanelUI-zen-gradient-generator-color-remove" class="subviewbutton">
</button>
<html:div class="separator"></html:div>
<button id="PanelUI-zen-gradient-generator-color-toggle-algo" class="subviewbutton">
</button>
</div>
</hbox>
<hbox id="PanelUI-zen-gradient-generator-controls">
<vbox id="PanelUI-zen-gradient-generator-options">
<hbox id="PanelUI-zen-gradient-degrees">
<box class="dot"></box>
<box class="text"></box>
</hbox>
</vbox>
<vbox id="PanelUI-zen-gradient-colors-wrapper">
<vbox>

85
src/browser/base/content/zen-styles/zen-animations.css
View File

@@ -56,21 +56,6 @@
}
}
@keyframes zen-new-tab-appear-vertical {
0% {
opacity: 0;
transform: translateY(-25px);
}
60% {
opacity: 0.8;
transform: translateY(4px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes zen-main-app-wrapper-animation {
from {
opacity: 1;
@@ -242,76 +227,6 @@
}
}
@keyframes zen-glance-content-animation-out {
0% {
/* make the box shrink to final width/height and x/y coordinates */
transform: translate(-50%, -50%) translateZ(0);
width: 85%;
height: 100%;
top: 50%;
left: 50%;
opacity: 1;
}
100% {
/* make the box appear from initial width/height and x/y coordinates */
transform: translate(-50%, -50%) translateZ(0);
opacity: 0;
width: 47%;
height: 53%;
top: 50%;
left: 50%;
opacity: 0;
}
}
@keyframes zen-glance-buttons-animation-full {
from {
width: 85%;
height: 85%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
to {
width: 100%;
height: 100%;
top: 50%;
left: 50%;
opacity: 1;
transform: translate(-50%, -50%);
}
}
@keyframes zen-glance-loading-animation {
0% {
opacity: 1;
width: 80%;
}
90% {
width: 100%;
}
100% {
opacity: 0;
}
}
@keyframes zen-glance-buttons-animation {
from {
right: 0;
opacity: 0;
width: fit-content;
}
to {
opacity: 1;
transform: translateX(-100%) translateY(-50%);
}
}
@keyframes zen-rice-form-out {
0% {
transform: translateX(0);

5
src/browser/base/content/zen-styles/zen-browser-container.css
View File

@@ -9,11 +9,6 @@
border-radius: var(--zen-native-inner-radius);
position: relative;
/* For glance */
transition:
transform 0.1s ease-in-out,
opacity 0.1s ease-in-out;
overflow: hidden;
:root:not([zen-no-padding='true']) & {

31
src/browser/base/content/zen-styles/zen-browser-ui.css
View File

@@ -22,13 +22,13 @@
:root:is([inDOMFullscreen='true'], [chromehidden~='location'], [chromehidden~='toolbar']) {
#navigator-toolbox,
#zen-sidebar-splitter {
display: none;
visibility: collapse;
}
}
#browser {
width: 100%;
background: var(--zen-main-browser-background);
background: var(--zen-main-browser-background) !important;
will-change: background-color;
@@ -51,7 +51,7 @@
&[animating='true']::after {
background: var(--zen-main-browser-background-old);
backdrop-filter: blur(5px);
animation: zen-main-app-wrapper-animation 0.4s ease forwards;
animation: zen-main-app-wrapper-animation 0.2s ease forwards;
transition: 0s;
}
}
@@ -152,12 +152,33 @@
gap: var(--zen-element-separation);
}
.titlebar-buttonbox-container {
height: 100%;
@media not (-moz-platform: macos) {
.titlebar-buttonbox-container {
height: 100%;
}
}
@media (-moz-platform: macos) {
.titlebar-buttonbox-container {
margin-inline-end: 8px;
padding: 3px 0;
& > .titlebar-buttonbox {
margin-inline-start: var(--zen-toolbox-padding);
}
}
@media (-moz-bool-pref: 'zen.widget.mac.mono-window-controls') {
.titlebar-buttonbox-container {
/* Draw 3 dots as background to represent the window controls,
all with the same cololr as the titlebar */
background-image: radial-gradient(circle, var(--zen-toolbar-element-bg) 6px, transparent 0.5px);
background-size: 20px 22px;
background-position: 53% 50%;
&:not([zen-has-hover='true']) > .titlebar-buttonbox {
opacity: 0;
}
}
}
}

43
src/browser/base/content/zen-styles/zen-compact-mode.css
View File

@@ -42,13 +42,13 @@
position: absolute;
z-index: 10;
transition:
left 0.25s ease,
right 0.25s ease,
left 0.15s ease,
right 0.15s ease,
opacity 1.5s ease;
top: 0;
bottom: var(--zen-element-separation);
opacity: 0;
padding: 0 var(--zen-compact-float) !important;
opacity: 0;
:root[zen-single-toolbar='true'] & {
top: var(--zen-element-separation);
@@ -59,13 +59,13 @@
margin-left: 0 !important;
}
& #urlbar[open] {
& #urlbar[open]:not([zen-floating-urlbar='true']) {
top: 0 !important;
}
}
&:not([zen-right-side='true']) #navigator-toolbox {
left: calc(-1 * var(--zen-sidebar-width) + var(--zen-element-separation));
left: calc(-1 * var(--zen-sidebar-width) + 1px);
}
/* When we have multiple toolbars and the top-toolbar is NOT being hidden,
@@ -82,7 +82,7 @@
--zen-compact-float: calc(var(--zen-element-separation) + 1px);
&:not([animate='true']) {
right: calc(-1 * var(--zen-sidebar-width) + var(--zen-element-separation));
right: calc(-1 * var(--zen-sidebar-width) + 1px);
}
}
@@ -111,6 +111,15 @@
background-size: 2000px !important; /* Dont ask me why */
backdrop-filter: blur(5px) !important;
}
& #urlbar[open][zen-floating-urlbar='true'] {
--zen-urlbar-offset: var(--zen-sidebar-width);
transition: left 0.05s ease;
#navigator-toolbox:has(&) {
opacity: 1;
}
}
}
#navigator-toolbox:hover,
@@ -121,9 +130,9 @@
#navigator-toolbox[movingtab],
#navigator-toolbox:has(.tabbrowser-tab:active),
#navigator-toolbox:has(
*:is([panelopen='true'], [open='true'], #nav-bar:focus-within):not(tab):not(.zen-compact-mode-ignore)
*:is([panelopen='true'], [open='true'], #urlbar:not([zen-floating-urlbar='true']):focus-within):not(tab):not(.zen-compact-mode-ignore)
) {
&:not([animate='true']) {
&:not([animate='true']):not(:has(#urlbar[zen-floating-urlbar='true']:hover)) {
--zen-compact-mode-func: linear(
0 0%,
0.002748 1%,
@@ -228,14 +237,20 @@
1.003423 100%
);
transition:
left 0.3125s var(--zen-compact-mode-func),
right 0.3125s var(--zen-compact-mode-func);
left 0.3s var(--zen-compact-mode-func),
right 0.3s var(--zen-compact-mode-func);
opacity: 1;
left: -1px;
:root[zen-right-side='true'] & {
right: -1px;
left: auto;
&:not([supress-primary-adjustment='true']) {
left: -1px;
:root[zen-right-side='true'] & {
right: -1px;
left: auto;
}
& #urlbar[open][zen-floating-urlbar='true'] {
--zen-urlbar-offset: 0px;
}
}
}
}

126
src/browser/base/content/zen-styles/zen-glance.css
View File

@@ -9,42 +9,49 @@
visibility: inherit;
}
.zen-glance-background {
transform: scale(0.98);
backdrop-filter: blur(5px);
opacity: 0.6;
}
#zen-glance-sidebar-container {
display: none;
position: absolute;
display: flex;
z-index: 999;
& toolbarbutton:hover {
background: var(--button-background-color-hover);
&[hidden='true'] {
display: none;
}
top: 10%;
transform: translateY(-50%);
padding: 5px;
gap: 12px;
left: 2%;
& toolbarbutton {
width: 32px;
height: 32px;
background: light-dark(rgb(24, 24, 24), rgb(231, 231, 231));
transition: background 0.2s ease;
border-radius: 999px;
appearance: none;
box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.07);
opacity: 0;
&:hover {
background: light-dark(rgb(41, 41, 41), rgb(204, 204, 204));
}
& label {
display: none;
}
& image {
filter: invert(1);
}
}
}
.browserSidebarContainer.zen-glance-overlay {
box-shadow: none !important;
&[fade-out='true'] {
background: transparent;
opacity: 1;
& .browserContainer {
opacity: 1;
animation: zen-glance-content-animation-out 0.3s ease-in-out forwards !important;
& browser {
opacity: 1 !important;
}
& #zen-glance-sidebar-container {
opacity: 0;
transition: opacity 0.1s ease-in-out;
}
}
}
& .browserContainer {
background: var(--zen-dialog-background);
position: fixed;
@@ -69,37 +76,6 @@
overflow: hidden;
}
& #zen-glance-sidebar-container {
position: absolute;
display: flex;
top: 10%;
left: 0;
transform: translateY(-50%);
opacity: 0;
background: var(--zen-dialog-background);
border: 1px solid var(--zen-colors-border);
border-right: none;
border-top-left-radius: var(--zen-native-inner-radius);
border-bottom-left-radius: var(--zen-native-inner-radius);
padding: 5px;
gap: 6px;
animation: zen-glance-buttons-animation 0.2s ease-in-out forwards;
animation-delay: 0.3s;
& toolbarbutton {
width: 32px;
height: 32px;
& label {
display: none;
}
}
}
& browser {
width: 100%;
height: 100%;
@@ -108,9 +84,7 @@
}
&[animate-full='true'] {
opacity: 1;
animation: zen-glance-buttons-animation-full 0.2s ease-in-out forwards !important;
transform: translate(-50%, -50%);
& #zen-glance-sidebar-container {
opacity: 0 !important;
}
@@ -118,22 +92,18 @@
&[animate='true'] {
position: absolute;
transform: translate(-50%, -50%);
&:not([animate-end='true']) {
pointer-events: none;
& browser {
opacity: 0;
visibility: hidden;
}
& #zen-glance-sidebar-container {
opacity: 0;
animation: none;
pointer-events: none;
}
}
}
}
&[fade-out='true'] {
& browser {
transition: opacity 0.1s ease;
opacity: 0;
}
}
& browser[animate-glance-open='true'] {
transition: opacity 0.2s ease-in-out;
opacity: 0;
}
}

103
src/browser/base/content/zen-styles/zen-gradient-generator.css
View File

@@ -5,7 +5,7 @@
*/
#PanelUI-zen-gradient-generator {
--panel-width: 300px;
--panel-width: 350px;
--panel-padding: 10px;
min-width: var(--panel-width);
}
@@ -17,60 +17,10 @@
width: 100%;
}
#PanelUI-zen-gradient-degrees {
position: relative;
border-radius: 999px;
min-height: 50px;
min-width: 50px;
max-height: 50px;
max-width: 50px;
border: 3px solid var(--zen-primary-color);
display: flex;
justify-items: center;
align-items: center;
z-index: 1;
& .dot {
position: absolute;
z-index: 2;
/* +3 because of the border */
width: 53px;
height: 53px;
top: -3px;
left: -3px;
&::after {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--zen-colors-tertiary);
box-shadow: 0 0 0 2px var(--zen-themed-toolbar-bg);
cursor: grab;
content: '';
position: absolute;
bottom: 2px;
right: 0;
border: 2px solid var(--zen-colors-border);
transition: transform 0.2s;
}
&[dragging='true']::after {
transform: scale(1.2);
}
}
& .text {
margin: 0 auto;
}
}
#PanelUI-zen-gradient-generator-controls {
padding-right: var(--panel-padding);
align-items: center;
gap: var(--panel-padding);
border-bottom: 1px solid color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%);
padding-bottom: 15px;
margin-bottom: 15px;
}
#zen-theme-picker-color {
@@ -97,8 +47,8 @@
#PanelUI-zen-gradient-generator-color-custom-add {
position: absolute;
right: 5px;
top: 5px;
right: 0px;
top: 0px;
cursor: pointer;
}
@@ -225,7 +175,7 @@
inset: 0;
background-image: linear-gradient(to right, var(--zen-primary-color) 1px, transparent 1px),
linear-gradient(to bottom, var(--zen-primary-color) 1px, transparent 1px);
background-size: 24px 24px;
background-size: 20px 20px;
content: '';
position: absolute;
top: 0;
@@ -239,13 +189,13 @@
& .zen-theme-picker-dot {
position: absolute;
z-index: 2;
width: 20px;
height: 20px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--zen-theme-picker-dot-color);
box-shadow: 0 0 0 2px var(--zen-themed-toolbar-bg);
cursor: pointer;
border: 2px solid #fff;
border: 3px solid #fff;
animation: zen-theme-picker-dot-animation 0.5s;
transition: transform 0.2s;
transform: translate(-50%, -50%);
@@ -255,3 +205,42 @@
}
}
}
#PanelUI-zen-gradient-generator-color-actions {
display: flex;
position: absolute;
bottom: 20px;
left: 50%;
z-index: 1;
transform: translateX(-50%);
& .separator,
& button {
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
}
& button {
border: none !important;
padding: 0.4rem !important;
min-width: fit-content !important;
transition: background 0.2s;
& .button-text {
display: none;
}
appearance: none;
&:hover {
background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
}
}
& .separator {
width: 1px;
margin: 0 0.5rem;
height: 30px;
}
}
@media not (-moz-bool-pref: 'zen.theme.gradient.show-custom-colors') {
#PanelUI-zen-gradient-generator-custom-colors {
display: none !important;
}
}

32
src/browser/base/content/zen-styles/zen-popup.css
View File

@@ -56,6 +56,11 @@ panel {
--panel-border-radius: var(--zen-native-inner-radius);
}
/* split-view popup */
#confirmation-hint {
--arrowpanel-background: var(--zen-colors-primary);
}
/* app menu */
.addon-banner-item,
.panel-banner-item {
@@ -344,3 +349,30 @@ menuitem {
#editBMPanel_workspaceList input[type='checkbox'] {
margin-right: 8px;
}
/* Section: Toast notifications */
#zen-toast-container {
position: fixed;
top: calc(var(--zen-element-separation) * 2);
right: calc(var(--zen-element-separation) * 2);
z-index: 1000;
gap: 1rem;
& .zen-toast {
padding: 0.9rem 0.8rem;
border-radius: 12px;
background-color: var(--button-primary-bgcolor);
color: var(--button-primary-color);
box-shadow: var(--zen-big-shadow);
display: flex;
gap: 5px;
flex-direction: column;
gap: 2px;
width: fit-content;
& .description {
opacity: 0.6;
}
}
}

3
src/browser/base/content/zen-styles/zen-sidebar.css
View File

@@ -42,14 +42,13 @@
#zen-tabbox-wrapper {
& #sidebar-splitter {
opacity: 0;
margin-inline-end: -4px;
margin: 0 calc(-1 * var(--zen-element-separation));
}
& #sidebar-box {
border-radius: var(--zen-native-inner-radius);
box-shadow: var(--zen-big-shadow);
overflow: hidden;
border: 1px solid var(--zen-colors-border);
:root:not([zen-right-side='true']) &[positionend='true'] {
margin-right: var(--zen-element-separation);

4
src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
View File

@@ -28,7 +28,7 @@
--tab-min-height: 10px !important;
}
#vertical-pinned-tabs-container-separator {
.vertical-pinned-tabs-container-separator {
display: none !important;
}
@@ -214,7 +214,7 @@
}
/* Other UI Elements */
#zen-current-workspace-indicator {
.zen-current-workspace-indicator {
display: none !important;
}

2
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css
View File

@@ -13,7 +13,7 @@ height: var(--zen-toolbar-height);
}
}
&:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within) {
&:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within):not(:has(*:is([panelopen='true'], [open='true']))) {
transition-delay: 0.2s;
height: var(--zen-element-separation);
overflow: hidden;

279
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -19,9 +19,17 @@
height: var(--zen-toolbar-height);
}
@media (-moz-platform: macos) and (not (-moz-bool-pref: 'zen.view.mac.show-three-dot-menu')) {
&:not([customizing]) #PanelUI-button:not([open]):not([panelopen]) {
position: absolute;
opacity: 0;
pointer-events: none;
}
}
& #zen-sidebar-top-buttons .toolbarbutton-1 {
& > .toolbarbutton-icon {
padding: 5px;
padding: 4px;
}
}
@@ -49,10 +57,8 @@
}
}
#vertical-pinned-tabs-container, #tabbrowser-arrowscrollbox {
.tabbrowser-tab[fadein='true'][zen-initial-fadein='true'] {
animation: zen-new-tab-appear-vertical 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}
#tabbrowser-arrowscrollbox {
min-height: fit-content !important;
}
}
@@ -66,7 +72,14 @@
}
#browser {
--zen-toolbox-padding: max(5px, calc(var(--zen-element-separation) / 1.5));
--zen-min-toolbox-padding: .4rem;
@media (-moz-platform: macos) {
--zen-min-toolbox-padding: .52rem;
}
@media (-moz-platform: linux) {
--zen-min-toolbox-padding: .35rem;
}
--zen-toolbox-padding: max(var(--zen-min-toolbox-padding), calc(var(--zen-element-separation) / 1.5));
}
:root[zen-single-toolbar='true'] {
@@ -74,17 +87,6 @@
width: -moz-available !important;
}
.sharing-icon,
#identity-icon,
.urlbar-icon,
#permissions-granted-icon,
#tracking-protection-icon,
#tracking-protection-icon-box,
#blocked-permissions-container > .blocked-permission-icon {
width: 12px;
height: 12px;
}
#identity-icon-box,
#identity-permission-box {
margin-top: auto;
@@ -99,7 +101,7 @@
}
& #nav-bar {
margin-bottom: 6px;
margin-bottom: var(--zen-toolbox-padding);
& toolbarspring {
display: none;
@@ -115,23 +117,38 @@
}
}
#vertical-pinned-tabs-container-separator {
.vertical-pinned-tabs-container-separator {
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
margin: 8px auto;
border: none;
height: 1px;
max-height: 1px;
width: 98%;
transition: margin 0.2s ease-in-out, background 0.2s ease-in-out, max-height 0.2s ease-in-out;
#vertical-pinned-tabs-container:not(:has(tab:not([hidden]))) + & {
display: none;
#vertical-pinned-tabs-container .zen-workspace-tabs-section[hide-separator] & {
max-height: 0;
margin: 0 auto;
}
}
#navigator-toolbox {
--border-radius-medium: 12px;
--tab-border-radius: 8px;
--border-radius-medium: 10px;
--tab-border-radius: 6px;
--zen-toolbox-min-width: 1px;
@media (-moz-platform: windows) {
/* More native look */
--border-radius-medium: 8px;
--tab-border-radius: 6px;
}
@media (-moz-platform: macos) {
/* More native look */
--border-radius-medium: 12px;
--tab-border-radius: 10px;
}
--tab-hover-background-color: color-mix(in srgb, var(--toolbarbutton-hover-background) 50%, transparent 50%);
min-width: var(--zen-toolbox-min-width);
@@ -221,7 +238,9 @@
#tabbrowser-tabs {
margin-inline-start: 0 !important;
padding-inline-start: 0 !important;
overflow-x: hidden;
overflow-y: unset !important; /* DO NOT CHANGE THIS: Firefox renders badly workspace changes */
overflow-x: clip;
overflow-clip-margin: var(--zen-toolbox-padding);
--tab-inner-inline-margin: 0;
@@ -230,27 +249,20 @@
--tab-block-margin: 2px;
--tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.12));
--tab-selected-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.1)) !important;
grid-gap: 0 !important;
&[overflow]::after,
#vertical-tabs-newtab-button {
#vertical-tabs-newtab-button,
#vertical-pinned-tabs-container-separator { /* notice #vertical-pinned-tabs-container-separator is an ID */
/* Hide separator they give us, eww */
display: none !important;
}
& .tabbrowser-tab {
transition: scale 0.07s ease;
#tabbrowser-tabs &:not([zen-essential='true']) {
#tabbrowser-tabs[dont-animate-tabs] & {
opacity: 0;
}
&:is([selected], [multiselected], [visuallyselected]) .tab-background {
box-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.1));
}
}
&:not([zen-essential='true']):active {
&:active {
scale: 0.98;
}
@@ -258,7 +270,6 @@
padding: 0 !important;
position: relative;
border-radius: var(--border-radius-medium);
& .tab-background {
overflow: hidden;
@@ -269,10 +280,6 @@
}
}
&[selected] .tab-background {
backdrop-filter: blur(10px);
}
@media (-moz-bool-pref: 'zen.tabs.dim-pending') {
&[pending='true'] .tab-icon-image {
opacity: 0.5;
@@ -282,14 +289,23 @@
/* We have a tab inside a tab, this means, it's a glance tab */
& .tabbrowser-tab {
pointer-events: none;
margin: 0;
margin: 0 0 0 4px;
--toolbarbutton-inner-padding: 0;
--border-radius-medium: 8px;
width: 24px;
height: 24px;
--tab-min-height: 24px;
--tab-min-width: 24px;
& .tab-background {
background: transparent;
background: var(--zen-toolbar-element-bg) !important;
margin-block: 0 !important;
margin-inline: 0 !important;
box-shadow: none !important;
}
& .tab-content {
padding: 0 5px;
}
& label { display: none !important; }
& .tab-close-button,
& .tab-reset-button {
@@ -298,19 +314,26 @@
& .tab-icon-image {
--toolbarbutton-inner-padding: 0 !important;
width: 14px;
height: 14px;
}
}
/* On essentials, glance tabs are floating */
&[zen-essential='true'] .tabbrowser-tab {
position: absolute;
top: 4px;
right: 4px;
--tab-collapsed-width: 35px;
top: 0px;
right: 0px;
--tab-collapsed-width: 34px;
--tab-min-height: 16px;
width: var(--tab-collapsed-width) !important;
z-index: 1;
pointer-events: none;
& .tab-background {
/* Solid colors because we don't want to show the background */
background: light-dark(rgb(249, 249, 249), rgb(63, 63, 63)) !important;
border: 2px solid light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
}
}
}
}
@@ -321,6 +344,7 @@
align-items: center;
padding-top: var(--zen-element-separation);
--toolbarbutton-inner-padding: 5px;
& > toolbarbutton:not(#zen-workspaces-button) {
padding: 0 !important;
@@ -342,11 +366,26 @@
}
}
#zen-tabs-wrapper {
min-height: fit-content;
overflow-y: auto;
height: 100%;
scrollbar-width: thin;
}
#zen-browser-tabs-container {
overflow-x: clip !important; /* might break custom css with new design, so let's force it */
position: relative;
}
#vertical-pinned-tabs-container {
padding-inline-end: 0 !important;
display: flex !important;
flex-direction: column;
max-height: calc(100vh - 12 * (var(--tab-min-height) + 2 * var(--tab-block-margin))) !important;
min-height: fit-content !important;
overflow-x: clip;
overflow-y: visible;
max-height: unset !important;
& .tabbrowser-tab:not(:hover) .tab-background:not([selected]):not([multiselected]) {
background: transparent !important;
@@ -403,7 +442,7 @@
width: calc(100% - 10px) !important;
}
& #zen-current-workspace-indicator-icon[no-icon='true'] {
& .zen-current-workspace-indicator-icon[no-icon='true'] {
display: none;
}
@@ -454,7 +493,7 @@
bottom: calc(-0.5 * var(--zen-toolbox-padding));
}
& > *:not(tabs):not(#search-container):not(#zen-workspaces-button),
& > :is(toolbaritem, toolbarbutton):not(#search-container):not(#zen-workspaces-button),
& #tabbrowser-arrowscrollbox-periphery > toolbarbutton {
width: 100% !important;
border-radius: var(--border-radius-medium) !important;
@@ -483,7 +522,7 @@
}
&:hover {
background: var(--toolbarbutton-hover-background) !important;
background: var(--toolbarbutton-hover-background);
& image,
label {
@@ -534,11 +573,11 @@
#navigator-toolbox:not([zen-sidebar-expanded='true']) {
max-width: var(--zen-toolbox-max-width) !important;
min-width: var(--zen-toolbox-max-width) !important;
& #zen-current-workspace-indicator-name,
& .zen-current-workspace-indicator-name,
& .toolbarbutton-text {
display: none !important;
}
& #zen-current-workspace-indicator {
& .zen-current-workspace-indicator {
padding-left: 0;
padding-right: 0;
display: flex;
@@ -687,31 +726,33 @@
/* Mark: Move sidebar to the right */
:root[zen-right-side='true'] {
& #navigator-toolbox {
order: 3 !important;
order: 10 !important;
}
& #zen-sidebar-splitter {
order: 2 !important;
order: 9 !important;
}
}
/* Mark: Override the default tab close button */
#tabbrowser-tabs {
& .tabbrowser-tab {
&[pinned] .tab-close-button {
&[pinned]:not([pending='true']) .tab-close-button {
display: none !important;
}
&[pinned]:not([zen-essential]):hover .tab-reset-button,
&[pinned][visuallyselected]:not([zen-essential]) .tab-reset-button {
display: block;
&[pinned]:not([pending='true']):not([zen-essential]) {
&:hover .tab-reset-button,
&[visuallyselected] .tab-reset-button {
display: block;
}
}
&[zen-essential] .tab-reset-button {
display: none;
}
&:not([pinned]) .tab-reset-button {
&:not([pinned][visuallyselected]) .tab-reset-button {
display: none;
}
@@ -727,7 +768,7 @@
border-radius: var(--tab-border-radius);
color: inherit;
fill: currentColor;
padding: 6px;
padding: var(--tab-close-button-padding);
width: 24px;
height: 24px;
outline: var(--toolbarbutton-outline);
@@ -848,10 +889,22 @@
@media (-moz-bool-pref: 'zen.tabs.show-newtab-vertical') {
#tabs-newtab-button {
display: flex !important;
transition: scale 0.1s ease;
& .toolbarbutton-text {
align-items: center;
padding-top: 0;
}
&:active,
&[open] {
scale: 0.98;
}
&[in-urlbar] {
background: var(--tab-selected-bgcolor) !important;
opacity: 1 !important;
box-shadow: var(--tab-selected-shadow);
}
}
#tabbrowser-arrowscrollbox-periphery {
@@ -896,26 +949,25 @@
transition: max-height 0.3s ease-out;
opacity: 1;
grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto));
overflow-y: auto;
overflow-x: hidden;
overflow: hidden;
scrollbar-width: thin;
display: grid;
padding: 0;
}
#zen-essentials-container .tabbrowser-tab {
#zen-essentials-container > .tabbrowser-tab {
--toolbarbutton-inner-padding: 0;
max-width: unset;
width: 100% !important;
border-radius: var(--border-radius-medium);
& .tab-background {
border-radius: var(--border-radius-medium) !important;
transition: background 0.1s ease-in-out;
}
--tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2));
&[selected] .tab-background {
box-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.1));
}
&:not([selected], [multiselected="true"]) .tab-background {
&:not([visuallyselected], [multiselected="true"]) .tab-background {
background: var(--zen-toolbar-element-bg);
border: none;
}
@@ -938,8 +990,12 @@
margin-inline-end: 0 !important;
}
&:hover .tab-background {
background: var(--tab-selected-bgcolor);
}
@media (-moz-bool-pref: 'zen.theme.essentials-favicon-bg') {
&[selected] .tab-background {
&[visuallyselected] > .tab-stack > .tab-background {
&::after {
content: "";
inset: -50%;
@@ -956,19 +1012,19 @@
position: relative;
&::before {
background: light-dark(rgba(255, 255, 255, 0.75), rgba(68, 64, 64, 0.75));
background: light-dark(rgba(255, 255, 255, 0.85), rgba(68, 64, 64, 0.85));
margin: 2px;
border-radius: calc(var(--border-radius-medium) - 2px);
position: absolute;
inset: 0;
z-index: 0;
content: "";
transition: background 0.2s ease-in-out;
transition: background 0.1s ease-in-out;
}
}
&[selected]:hover .tab-background::before {
background: light-dark(rgba(255, 255, 255, 0.70), rgba(68, 64, 64, 0.70));
&[visuallyselected]:hover .tab-background::before {
background: light-dark(rgba(255, 255, 255, 0.80), rgba(68, 64, 64, 0.80));
}
}
}
@@ -1026,3 +1082,80 @@
%include vertical-tabs-topbuttons-fix.css
}
}
/* Vertical tabs reordering indicators */
#zen-drag-indicator {
--zen-drag-indicator-height: 2px;
--zen-drag-indicator-bg: color-mix(in srgb, var(--zen-primary-color) 50%, light-dark(rgba(0, 0, 0, .85), rgba(255, 255, 255, .95)) 50%);
position: fixed;
z-index: 1000;
background: var(--zen-drag-indicator-bg);
pointer-events: none;
border-radius: 5px;
&::before {
content: "";
position: absolute;
height: calc(2 * var(--zen-drag-indicator-height));
width: calc(2 * var(--zen-drag-indicator-height));
border: var(--zen-drag-indicator-height) solid var(--zen-drag-indicator-bg);
border-radius: 50%;
background: transparent;
}
&[orientation='horizontal'] {
left: calc(var(--indicator-left) + 2 * var(--zen-drag-indicator-height) + 4px);
width: calc(var(--indicator-width) - 2 * var(--zen-drag-indicator-height) - 4px);
height: var(--zen-drag-indicator-height);
transition: top 0.1s ease-out, left 0.1s ease-out, width 0.1s ease-out;
&::before {
left: calc(-2 * var(--zen-drag-indicator-height));
top: 50%;
transform: translate(calc(-1 * var(--zen-drag-indicator-height)), -50%);
}
}
&[orientation='vertical'] {
top: calc(var(--indicator-top) + 2 * var(--zen-drag-indicator-height) + 4px);
height: calc(var(--indicator-height) - 2 * var(--zen-drag-indicator-height) - 4px);
width: var(--zen-drag-indicator-height);
transition: top 0.1s ease-out, left 0.1s ease-out, height 0.1s ease-out;
&::before {
top: calc(-2 * var(--zen-drag-indicator-height));
left: 50%;
transform: translate(-50%, calc(-1 * var(--zen-drag-indicator-height)));
}
}
}
/* Horizontal tabs reordering indicators */
#zen-essentials-container .tabbrowser-tab.drag-over-before {
box-shadow: 3px 0 6px -2px var(--toolbarbutton-active-background, rgba(0, 255, 0, 0.2));
}
#zen-essentials-container .tabbrowser-tab.drag-over-after {
box-shadow: -3px 0 6px -2px var(--toolbarbutton-active-background, rgba(0, 255, 0, 0.2));
}
/* Renaming tabs */
.tab-label-container-editing {
display: none !important;
}
#tab-label-input {
white-space: nowrap;
overflow-x: scroll;
margin: 0;
background: transparent;
border: none;
padding: 0;
}
/* Section: tab workspaces stylings */
.zen-workspace-tabs-section {
position: absolute;
transform: translateX(-100%);
min-width: 100%;
}

82
src/browser/base/content/zen-styles/zen-theme.css
View File

@@ -12,8 +12,8 @@
:root,
.zenLooksAndFeelColorOption {
/** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes
* in the preferences page.
*/
* in the preferences page.
*/
/* Default values */
--zen-border-radius: 7px;
@@ -46,21 +46,21 @@
--in-content-primary-button-background: color-mix(
in srgb,
var(--zen-primary-color) 10%,
var(--zen-branding-bg) 90%
var(--zen-primary-color) 30%,
var(--zen-branding-bg-reverse) 70%
) !important;
--in-content-primary-button-background-hover: color-mix(
in srgb,
var(--zen-primary-color) 15%,
var(--zen-branding-bg) 85%
var(--zen-primary-color) 35%,
var(--zen-branding-bg-reverse) 65%
) !important;
--in-content-primary-button-background-active: color-mix(
in srgb,
var(--zen-primary-color) 20%,
var(--zen-branding-bg) 80%
var(--zen-primary-color) 40%,
var(--zen-branding-bg-reverse) 60%
) !important;
--button-text-color-primary: var(--zen-branding-bg-reverse) !important;
--in-content-primary-button-text-color: var(--zen-colors-primary-foreground) !important;
--button-text-color-primary: var(--zen-branding-bg) !important;
--in-content-primary-button-text-color: var(--zen-branding-bg) !important;
--in-content-primary-button-border-color: transparent !important;
--in-content-primary-button-border-hover: transparent !important;
--in-content-primary-button-border-active: var(--zen-colors-border) !important;
@@ -72,7 +72,7 @@
/* This is like the secondary button */
--in-content-button-background: transparent !important;
--in-content-button-text-color: var(--zen-secondary-btn-color) !important;
--in-content-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 5%, var(--zen-branding-bg) 60%) !important;
--in-content-button-background-hover: color-mix(in srgb, currentColor 3%, transparent 97%) !important;
--button-bgcolor: var(--in-content-button-background) !important;
--button-hover-bgcolor: var(--in-content-button-background-hover) !important;
--button-hover-color: var(--in-content-button-text-color-hover) !important;
@@ -88,7 +88,7 @@
--button-background-color: var(--in-content-button-background) !important;
--button-background-color-hover: var(--in-content-button-background-hover) !important;
--button-background-color-active: var(--in-content-primary-button-background-active) !important;
--button-background-color-active: color-mix(in srgb, currentColor 5%, transparent 95%) !important;
--color-accent-primary: var(--button-primary-bgcolor) !important;
--color-accent-primary-hover: var(--button-primary-hover-bgcolor) !important;
@@ -104,7 +104,7 @@
--zen-button-border-radius: 5px;
--zen-button-padding: 0.6rem 1.2rem;
--zen-toolbar-element-bg: light-dark(rgba(0, 0, 0, 0.11), rgba(255, 255, 255, 0.11));
--zen-toolbar-element-bg: light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.11));
/* Toolbar */
--zen-toolbar-height: 38px;
@@ -131,6 +131,8 @@
--toolbarbutton-border-radius: 6px;
--urlbar-margin-inline: 1px !important;
--tab-icon-overlay-stroke: light-dark(white, black) !important;
--fp-contextmenu-border-radius: 8px;
--fp-contextmenu-padding: calc(4px - var(--fp-contextmenu-menuitem-border-width)) 0;
--fp-contextmenu-menuitem-border-radius: calc(4px + var(--fp-contextmenu-menuitem-border-width));
@@ -146,6 +148,8 @@
--fp-contextmenu-bgcolor: light-dark(Menu, rgb(43 42 51 / 0.95));
--toolbar-bgcolor: transparent;
--tab-close-button-padding: 5px !important;
--toolbarbutton-active-background: var(--zen-toolbar-element-bg);
--input-bgcolor: var(--zen-colors-tertiary) !important;
@@ -153,19 +157,19 @@
--zen-themed-toolbar-bg: light-dark(var(--zen-branding-bg), #161616);
--zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #161616);
--zen-workspace-indicator-height: 45px;
@media (-moz-windows-mica) or (-moz-platform: macos) {
background: transparent;
--zen-themed-toolbar-bg-transparency: 0;
--zen-themed-toolbar-bg-transparent: light-dark(
rgba(255, 255, 255, var(--zen-themed-toolbar-bg-transparency)),
rgba(0, 0, 0, var(--zen-themed-toolbar-bg-transparency))
);
--zen-themed-toolbar-bg-transparent: transparent;
@media (-moz-bool-pref: 'zen.widget.windows.acrylic') {
--zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 85%, transparent 15%);
}
}
--toolbar-field-background-color: var(--zen-colors-input-bg) !important;
--arrowpanel-background: var(--zen-dialog-background) !important;
--tab-selected-shadow: none !important;
--zen-big-shadow: 0 0 9.73px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
/* Nativity */
@@ -176,10 +180,10 @@
--zen-native-inner-radius: var(
--zen-webview-border-radius,
/* Inner radius calculation:
* 1. If the native radius - the separation is less than 4px, use 4px.
* 2. Otherwise, use the the calculated value (inner radius = outer radius - separation).
*/
max(5px, calc(var(--zen-native-content-radius) - var(--zen-element-separation)))
* 1. If the native radius - the separation is less than 4px, use 4px.
* 2. Otherwise, use the the calculated value (inner radius = outer radius - separation).
*/
max(5px, calc(var(--zen-native-content-radius) - var(--zen-element-separation) / 2))
);
/** Other theme-related styles */
@@ -209,7 +213,7 @@
--zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-dark-color-mix-base) 99%);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(53, 53, 53) 80%);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(79, 79, 79) 80%);
--zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(255, 255, 255, 0.11) 90%);
--zen-dialog-background: var(--zen-dark-color-mix-base);
@@ -218,33 +222,3 @@
--zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 30%, var(--zen-dark-color-mix-base) 70%);
}
}
@media (prefers-color-scheme: dark) {
@media (-moz-bool-pref: 'zen.theme.color-prefs.amoled') {
:root {
--zen-dark-color-mix-base: hsl(5 5 5);
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 4%, rgb(0, 0, 0) 96%);
}
}
@media (-moz-bool-pref: 'zen.theme.color-prefs.colorful') {
:root {
--zen-in-content-dialog-background: rgb(28, 28, 32);
--zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
--zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 40%, black 60%);
--zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 15%, black 85%);
--zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, black 10%);
--zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 10%, black 80%);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 80%, black 20%);
--zen-dialog-background: color-mix(in srgb, var(--zen-primary-color) 10%, black 90%);
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, rgb(15, 15, 15) 92%);
--zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 30%, black 70%);
}
}
}

63
src/browser/base/content/zen-styles/zen-urlbar.css
View File

@@ -10,8 +10,8 @@
}
#urlbar {
--toolbarbutton-border-radius: 10px;
--urlbarView-separator-color: var(--zen-colors-border);
--toolbarbutton-border-radius: 8px;
--urlbarView-separator-color: light-dark(hsl(0, 0%, 90%), hsl(0, 0%, 20%));
--urlbarView-hover-background: var(--toolbarbutton-hover-background);
--urlbarView-highlight-background: var(--toolbarbutton-hover-background);
border-radius: var(--toolbarbutton-border-radius);
@@ -32,10 +32,9 @@
#urlbar-background {
background: var(--zen-toolbar-element-bg) !important;
border-radius: var(--border-radius-medium);
outline: none !important;
}
#urlbar-background {
border: none !important;
margin: 1px;
@@ -122,26 +121,32 @@
}
#urlbar[breakout-extend='true'] #urlbar-background {
border: 1px solid var(--zen-colors-border) !important;
box-shadow: var(--zen-big-shadow) !important;
box-shadow:
inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.1),
/* 2. shadow ring 👇 */ 0 0 0 1px hsla(230, 13%, 9%, 0.075),
/* 3. multiple soft shadows 👇 */ 0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
0 6.5px 12px hsla(230, 13%, 9%, 0.1) !important;
backdrop-filter: none !important;
}
:root[zen-single-toolbar='true'] {
.urlbar-page-action:not([open]),
.identity-box-button:not([open]),
#tracking-protection-icon-container {
margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding)) !important;
margin-inline-end: calc(-8px - 2 * var(--urlbar-icon-padding)) !important;
opacity: 0;
transition: all 0.2s;
transition: all 0.1s ease;
}
#identity-permission-box > *:not(#permissions-granted-icon) {
visibility: collapse;
}
#urlbar[open] :is(#tracking-protection-icon-container, .urlbar-page-action),
#urlbar:hover :is(#tracking-protection-icon-container, .urlbar-page-action),
#urlbar[open] :is(#tracking-protection-icon-container, .urlbar-page-action, .identity-box-button),
#urlbar:hover :is(#tracking-protection-icon-container, .urlbar-page-action, .identity-box-button),
.urlbar-page-action[open],
.identity-box-button[open],
#tracking-protection-icon-container[open] {
opacity: 1;
margin-inline-end: 0 !important;
@@ -235,9 +240,23 @@ button.popup-notification-dropmarker {
}
@container urlbar-container (width < 350px) {
#userContext-icons {
transition: all 0.1s ease;
}
#userContext-label {
display: none;
}
#userContext-indicator {
margin-inline-end: 4px;
}
#urlbar:hover:not([breakout-extend='true']) #userContext-icons {
margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding)) !important;
opacity: 0;
pointer-events: none;
}
}
@media (max-width: 550px) {
@@ -275,7 +294,7 @@ button.popup-notification-dropmarker {
#urlbar .urlbar-page-action,
#urlbar #tracking-protection-icon-container,
#urlbar:not([breakout-extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) #identity-icon-box {
border-radius: 10px !important;
border-radius: 8px !important;
}
/* Extensions or similar */
@@ -374,13 +393,14 @@ button.popup-notification-dropmarker {
/* We cant have a transparent background with a backdrop-filter because on normal websites,
the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended
due to performance issues */
background-color: light-dark(rgb(247, 247, 247), var(--zen-branding-bg)) !important;
background-color: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 14%)) !important;
outline: 1px solid rgba(0, 0, 0, 0.3) !important;
}
}
:root[zen-single-toolbar='true'] {
#urlbar[open] {
min-width: 30vw;
min-width: 35vw;
}
&[zen-right-side='true'] #urlbar[open]:not([zen-floating-urlbar='true']) {
@@ -392,20 +412,24 @@ button.popup-notification-dropmarker {
z-index: 1000;
max-width: 45vw;
min-width: 45vw !important;
font-size: 1.1em;
--urlbar-container-height: 55px !important;
--urlbar-margin-inline: 10px !important;
position: absolute;
font-size: 1.15em !important;
@media (-moz-platform: macos) {
font-size: 1.5em !important;
}
top: calc(var(--zen-toolbar-height) * 2) !important;
--zen-urlbar-center: calc(var(--zen-urlbar-offset, 0px) + 28vw);
:root[zen-right-side='true'] & {
right: 28vw !important;
right: var(--zen-urlbar-center) !important;
}
:root:not([zen-right-side='true']) & {
left: 28vw !important;
left: var(--zen-urlbar-center) !important;
}
#urlbar-container:has(&) {
@@ -476,10 +500,9 @@ button.popup-notification-dropmarker {
}
&:hover {
background-color: light-dark(var(--zen-colors-secondary), var(--zen-colors-primary)) !important;
.urlbarView-favicon {
background-color: color-mix(in srgb, var(--zen-branding-bg-reverse) 20%, transparent 80%) !important;
.urlbarView-favicon,
& {
background-color: color-mix(in srgb, var(--zen-branding-bg-reverse) 5%, transparent 95%) !important;
}
.urlbarView-url,

89
src/browser/base/content/zen-styles/zen-workspaces.css
View File

@@ -61,17 +61,22 @@
@media not (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
& {
opacity: 0.4;
filter: grayscale(1);
opacity: 0.5;
transition:
opacity 0.2s,
filter 0.2s;
filter 0.2s,
opacity 0.2s;
}
&[active='true'] {
filter: none;
&[active='true'],
&:hover {
filter: grayscale(0);
opacity: 1;
}
&:hover {
background-color: var(--zen-toolbar-element-bg);
}
}
}
}
@@ -140,14 +145,6 @@
& #zen-workspaces-button .zen-workspace-sidebar-icon {
margin-inline-end: 5px;
& [no-icon='true'] {
display: none;
}
}
& #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] + .zen-workspace-sidebar-name {
margin-left: 0;
}
& #zen-workspaces-button {
@@ -430,8 +427,8 @@
min-height: 1px !important;
padding: 3px;
border-radius: 4px;
width: 20px;
height: 20px;
width: 24px;
height: 24px;
}
#PanelUI-zen-workspaces-create-footer,
@@ -453,44 +450,60 @@
}
/* Mark workspaces indicator */
#zen-current-workspace-indicator {
#zen-current-workspace-indicator-container {
margin-bottom: var(--zen-workspace-indicator-height);
}
.zen-current-workspace-indicator {
padding: 15px calc(4px + var(--tab-inline-padding));
font-weight: 600;
align-items: center;
position: relative;
position: absolute;
max-height: var(--zen-workspace-indicator-height);
min-height: var(--zen-workspace-indicator-height);
gap: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-direction: row !important;
& #zen-current-workspace-indicator-icon {
font-size: 14px;
&::before {
border-radius: var(--border-radius-medium);
background: transparent;
transition: background 0.1s;
pointer-events: none;
content: '';
position: absolute;
top: 4px;
left: 2px;
z-index: -1;
width: calc(100% - 4px);
height: calc(100% - 10px);
}
#zen-current-workspace-indicator-name {
&:hover,
&[open='true'] {
&::before {
background: var(--tab-hover-background-color);
}
}
& .zen-current-workspace-indicator-icon {
font-size: 12px;
}
.zen-current-workspace-indicator-name {
font-size: 13px;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
position: absolute;
max-width: calc(100% - var(--zen-toolbox-padding) * 4);
}
& #zen-current-workspace-indicator-icon {
min-height: 16px;
}
& #zen-current-workspace-indicator-icon:not([hidden]) + #zen-current-workspace-indicator-name {
padding-left: 24px;
}
}
@media not (-moz-bool-pref: 'zen.workspaces.show-workspace-indicator') {
#zen-current-workspace-indicator {
#zen-current-workspace-indicator-container {
display: none !important;
}
}
#zen-current-workspace-indicator[hidden='true'] {
#zen-current-workspace-indicator-container[hidden='true'] {
display: none !important;
}

17
src/browser/base/zen-components/ZenCommonUtils.mjs
View File

@@ -69,7 +69,22 @@ var gZenCommonActions = {
transferable.addDataFlavor('text/plain');
transferable.setTransferData('text/plain', str);
Services.clipboard.setData(transferable, null, Ci.nsIClipboard.kGlobalClipboard);
ConfirmationHint.show(document.getElementById('PanelUI-menu-button'), 'zen-copy-current-url-confirmation');
gZenUIManager.showToast('zen-copy-current-url-confirmation');
}
},
copyCurrentURLAsMarkdownToClipboard() {
const currentUrl = gBrowser.currentURI.spec;
const tabTitle = gBrowser.selectedTab.label;
if (currentUrl && tabTitle) {
const markdownLink = `[${tabTitle}](${currentUrl})`;
let str = Cc['@mozilla.org/supports-string;1'].createInstance(Ci.nsISupportsString);
str.data = markdownLink;
let transferable = Cc['@mozilla.org/widget/transferable;1'].createInstance(Ci.nsITransferable);
transferable.init(getLoadContext());
transferable.addDataFlavor('text/plain');
transferable.setTransferData('text/plain', str);
Services.clipboard.setData(transferable, null, Ci.nsIClipboard.kGlobalClipboard);
gZenUIManager.showToast('zen-copy-current-url-confirmation');
}
},

53
src/browser/base/zen-components/ZenCompactMode.mjs
View File

@@ -41,9 +41,15 @@ var gZenCompactModeManager = {
get preference() {
if (!document.documentElement.hasAttribute('zen-compact-mode')) {
document.documentElement.setAttribute(
'zen-compact-mode',
lazyCompactMode.mainAppWrapper.getAttribute('zen-compact-mode')
window.addEventListener(
'MozAfterPaint',
() => {
document.documentElement.setAttribute(
'zen-compact-mode',
lazyCompactMode.mainAppWrapper.getAttribute('zen-compact-mode')
);
},
{ once: true }
);
}
return lazyCompactMode.mainAppWrapper.getAttribute('zen-compact-mode') === 'true';
@@ -100,8 +106,6 @@ var gZenCompactModeManager = {
},
updateCompactModeContext(isSingleToolbar) {
this.getAndApplySidebarWidth(); // Ignore return value
const IDs = [
'zen-context-menu-compact-mode-hide-sidebar',
'zen-context-menu-compact-mode-hide-toolbar',
@@ -140,6 +144,7 @@ var gZenCompactModeManager = {
getAndApplySidebarWidth() {
let sidebarWidth = this.sidebar.getBoundingClientRect().width;
if (sidebarWidth > 1) {
gZenUIManager.restoreScrollbarState();
this.sidebar.style.setProperty('--zen-sidebar-width', `${sidebarWidth}px`);
}
return sidebarWidth;
@@ -157,6 +162,9 @@ var gZenCompactModeManager = {
if (canAnimate) {
this.sidebar.setAttribute('animate', 'true');
}
this.sidebar.style.removeProperty('margin-right');
this.sidebar.style.removeProperty('margin-left');
this.sidebar.style.removeProperty('transform');
window.requestAnimationFrame(() => {
let sidebarWidth = this.getAndApplySidebarWidth();
if (!canAnimate) {
@@ -176,24 +184,23 @@ var gZenCompactModeManager = {
{
ease: 'easeIn',
type: 'spring',
stiffness: 3000,
damping: 150,
mass: 1,
bounce: 0,
duration: 0.2,
}
)
.then(() => {
this.sidebar.removeAttribute('animate');
this.sidebar.style.transition = 'none';
this.sidebar.style.removeProperty('margin-right');
this.sidebar.style.removeProperty('margin-left');
this.sidebar.style.removeProperty('transform');
this._animating = false;
this.sidebar.style.transition = 'none';
setTimeout(() => {
this._animating = false;
this.sidebar.style.removeProperty('transition');
});
});
} else if (canHideSidebar && !isCompactMode) {
document.getElementById('browser').style.overflow = 'hidden';
document.getElementById('browser').style.overflow = 'clip';
if (this.sidebarIsOnRight) {
this.sidebar.style.marginRight = `-${sidebarWidth}px`;
} else {
@@ -204,16 +211,15 @@ var gZenCompactModeManager = {
this.sidebar,
this.sidebarIsOnRight
? {
marginRight: 0,
marginRight: [`-${sidebarWidth}px`, 0],
transform: ['translateX(100%)', 'translateX(0)'],
}
: { marginLeft: 0 },
{
ease: 'easeOut',
type: 'spring',
stiffness: 3000,
damping: 150,
mass: 1,
bounce: 0,
duration: 0.2,
}
)
.then(() => {
@@ -286,6 +292,9 @@ var gZenCompactModeManager = {
element: document.getElementById('zen-appcontent-navbar-container'),
screenEdge: 'top',
},
{
element: gZenVerticalTabsManager.actualWindowButtons,
},
];
},
@@ -330,9 +339,15 @@ var gZenCompactModeManager = {
target.addEventListener('mouseleave', (event) => {
// If on Mac, ignore mouseleave in the area of window buttons
if (AppConstants.platform == 'macosx') {
const MAC_WINDOW_BUTTONS_X_BORDER = 75;
const MAC_WINDOW_BUTTONS_Y_BORDER = 40;
if (event.clientX < MAC_WINDOW_BUTTONS_X_BORDER && event.clientY < MAC_WINDOW_BUTTONS_Y_BORDER) {
const buttonRect = gZenVerticalTabsManager.actualWindowButtons.getBoundingClientRect();
const MAC_WINDOW_BUTTONS_X_BORDER = buttonRect.width + buttonRect.x;
const MAC_WINDOW_BUTTONS_Y_BORDER = buttonRect.height + buttonRect.y;
if (
event.clientX < MAC_WINDOW_BUTTONS_X_BORDER &&
event.clientY < MAC_WINDOW_BUTTONS_Y_BORDER &&
event.clientX > buttonRect.x &&
event.clientY > buttonRect.y
) {
return;
}
}
@@ -342,7 +357,7 @@ var gZenCompactModeManager = {
return;
}
if (this.hoverableElements[i].keepHoverDuration) {
if (this.hoverableElements[i].keepHoverDuration && !event.target.querySelector('#urlbar[zen-floating-urlbar]')) {
this.flashElement(target, this.hoverableElements[i].keepHoverDuration, 'has-hover' + target.id, 'zen-has-hover');
} else {
this._removeHoverFrames[target.id] = window.requestAnimationFrame(() => target.removeAttribute('zen-has-hover'));

2
src/browser/base/zen-components/ZenEmojies.mjs
View File

File diff suppressed because one or more lines are too long

411
src/browser/base/zen-components/ZenGlanceManager.mjs
View File

@@ -1,14 +1,15 @@
{
class ZenGlanceManager extends ZenDOMOperatedFeature {
#currentBrowser = null;
#currentTab = null;
_animating = false;
_lazyPref = {};
#glances = new Map();
#currentGlanceID = null;
init() {
window.addEventListener('keydown', this.onKeyDown.bind(this));
window.addEventListener('TabClose', this.onTabClose.bind(this));
window.addEventListener('TabSelect', this.onLocationChange.bind(this));
XPCOMUtils.defineLazyPreferenceGetter(
this._lazyPref,
@@ -24,17 +25,29 @@
Services.obs.addObserver(this, 'quit-application-requested');
}
get #currentBrowser() {
return this.#glances.get(this.#currentGlanceID)?.browser;
}
get #currentTab() {
return this.#glances.get(this.#currentGlanceID)?.tab;
}
get #currentParentTab() {
return this.#glances.get(this.#currentGlanceID)?.parentTab;
}
onKeyDown(event) {
if (event.key === 'Escape' && this.#currentBrowser) {
if (event.key === 'Escape' && this.#currentGlanceID) {
event.preventDefault();
event.stopPropagation();
this.closeGlance();
this.closeGlance({ onTabClose: true });
}
}
onOverlayClick(event) {
if (event.target === this.overlay && event.originalTarget !== this.contentWrapper) {
this.closeGlance();
this.closeGlance({ onTabClose: true });
}
}
@@ -48,13 +61,13 @@
onUnload() {
// clear everything
if (this.#currentBrowser) {
gBrowser.removeTab(this.#currentTab);
for (let [id, glance] of this.#glances) {
gBrowser.removeTab(glance.tab, { animate: false });
}
}
getTabPosition(tab) {
return Math.max(gBrowser._numVisiblePinTabs, tab._tPos) + 1;
return Math.max(gBrowser._numVisiblePinTabs, tab._tPos);
}
createBrowserElement(url, currentTab, existingTab = null) {
@@ -65,21 +78,57 @@
skipLoad: false,
index: this.getTabPosition(currentTab),
};
this.currentParentTab = currentTab;
currentTab._selected = true;
const newUUID = gZenUIManager.generateUuidv4();
const newTab = existingTab ?? gBrowser.addTrustedTab(Services.io.newURI(url).spec, newTabOptions);
gBrowser.selectedTab = newTab;
if (currentTab.hasAttribute('zenDefaultUserContextId')) {
newTab.setAttribute('zenDefaultUserContextId', true);
}
currentTab.querySelector('.tab-content').appendChild(newTab);
newTab.setAttribute('zen-glance-tab', true);
this.#currentBrowser = newTab.linkedBrowser;
this.#currentTab = newTab;
newTab.setAttribute('glance-id', newUUID);
currentTab.setAttribute('glance-id', newUUID);
this.#glances.set(newUUID, {
tab: newTab,
parentTab: currentTab,
browser: newTab.linkedBrowser,
});
this.#currentGlanceID = newUUID;
gBrowser.selectedTab = newTab;
return this.#currentBrowser;
}
fillOverlay(browser) {
this.overlay = browser.closest('.browserSidebarContainer');
this.browserWrapper = browser.closest('.browserContainer');
this.contentWrapper = browser.closest('.browserStack');
}
showSidebarButtons(animate = false) {
if (this.sidebarButtons.hasAttribute('hidden') && animate) {
gZenUIManager.motion.animate(
this.sidebarButtons.querySelectorAll('toolbarbutton'),
{ x: [50, 0], opacity: [0, 1] },
{ delay: gZenUIManager.motion.stagger(0.1) }
);
}
this.sidebarButtons.removeAttribute('hidden');
}
hideSidebarButtons() {
this.sidebarButtons.setAttribute('hidden', true);
}
openGlance(data, existingTab = null, ownerTab = null) {
if (this.#currentBrowser) {
return;
}
if (gBrowser.selectedTab === this.#currentParentTab) {
gBrowser.selectedTab = this.#currentTab;
return;
}
this.animatingOpen = true;
this._animating = true;
const initialX = data.x;
const initialY = data.y;
@@ -89,36 +138,52 @@
this.browserWrapper?.removeAttribute('animate');
this.browserWrapper?.removeAttribute('animate-end');
this.browserWrapper?.removeAttribute('animate-full');
this.browserWrapper?.removeAttribute('animate-full-end');
this.browserWrapper?.removeAttribute('has-finished-animation');
this.overlay?.removeAttribute('post-fade-out');
const currentTab = ownerTab ?? gBrowser.selectedTab;
this.animatingOpen = true;
this._animating = true;
const browserElement = this.createBrowserElement(data.url, currentTab, existingTab);
this.overlay = browserElement.closest('.browserSidebarContainer');
this.browserWrapper = browserElement.closest('.browserContainer');
this.contentWrapper = browserElement.closest('.browserStack');
this.browserWrapper.prepend(this.sidebarButtons);
this.fillOverlay(browserElement);
this.overlay.classList.add('zen-glance-overlay');
this.browserWrapper.removeAttribute('animate-end');
window.requestAnimationFrame(() => {
this.quickOpenGlance();
this.quickOpenGlance({ dontOpenButtons: true });
this.showSidebarButtons(true);
gZenUIManager.motion.animate(
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer'),
{
scale: [1, 0.98],
backdropFilter: ['blur(0px)', 'blur(5px)'],
opacity: [1, 0.5],
},
{
duration: 0.4,
type: 'spring',
bounce: 0.2,
}
);
this.#currentBrowser.setAttribute('animate-glance-open', true);
this.overlay.removeAttribute('fade-out');
this.browserWrapper.setAttribute('animate', true);
this.browserWrapper.style.top = `${initialY + initialHeight / 2}px`;
this.browserWrapper.style.left = `${initialX + initialWidth / 2}px`;
const top = initialY + initialHeight / 2;
const left = initialX + initialWidth / 2;
this.browserWrapper.style.top = `${top}px`;
this.browserWrapper.style.left = `${left}px`;
this.browserWrapper.style.width = `${initialWidth}px`;
this.browserWrapper.style.height = `${initialHeight}px`;
this.browserWrapper.style.opacity = 0.8;
this.#glances.get(this.#currentGlanceID).originalPosition = {
top: this.browserWrapper.style.top,
left: this.browserWrapper.style.left,
width: this.browserWrapper.style.width,
height: this.browserWrapper.style.height,
};
this.browserWrapper.style.transform = 'translate(-50%, -50%)';
this.overlay.style.overflow = 'visible';
gZenUIManager.motion
.animate(
@@ -131,12 +196,13 @@
opacity: 1,
},
{
duration: 0.4,
duration: 0.3,
type: 'spring',
bounce: 0.2,
}
)
.then(() => {
this.#currentBrowser.removeAttribute('animate-glance-open');
this.overlay.style.removeProperty('overflow');
this.browserWrapper.removeAttribute('animate');
this.browserWrapper.setAttribute('animate-end', true);
@@ -147,166 +213,236 @@
});
}
closeGlance({ noAnimation = false, onTabClose = false } = {}) {
closeGlance({ noAnimation = false, onTabClose = false, setNewID = null, isDifferent = false } = {}) {
if (this._animating || !this.#currentBrowser || this.animatingOpen || this._duringOpening) {
return;
}
this.browserWrapper.removeAttribute('has-finished-animation');
if (noAnimation) {
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer').removeAttribute('style');
this.quickCloseGlance({ closeCurrentTab: false });
this.#currentBrowser = null;
this.#currentTab = null;
return;
}
this.closingGlance = true;
this._animating = true;
gBrowser._insertTabAtIndex(this.#currentTab, {
index: this.getTabPosition(this.currentParentTab),
index: this.getTabPosition(this.#currentParentTab),
});
let quikcCloseZen = false;
if (onTabClose) {
// Create new tab if no more ex
if (gBrowser.tabs.length === 1) {
gBrowser.selectedTab = gZenUIManager.openAndChangeToTab(Services.prefs.getStringPref('browser.startup.homepage'));
BrowserCommands.openTab();
return;
} else if (gBrowser.selectedTab === this.#currentTab) {
this._duringOpening = true;
gBrowser.tabContainer.advanceSelectedTab(1, true); // to skip the current tab
this._duringOpening = false;
quikcCloseZen = true;
}
}
// do NOT touch here, I don't know what it does, but it works...
window.requestAnimationFrame(() => {
this.#currentTab.style.display = 'none';
this.browserWrapper.removeAttribute('animate');
this.browserWrapper.removeAttribute('animate-end');
this.overlay.setAttribute('fade-out', true);
window.requestAnimationFrame(() => {
this.quickCloseGlance({ justAnimateParent: true });
this.browserWrapper.setAttribute('animate', true);
setTimeout(() => {
if (!this.currentParentTab) {
return;
}
if (!onTabClose || quikcCloseZen) {
this.quickCloseGlance();
}
this.overlay.removeAttribute('fade-out');
this.browserWrapper.removeAttribute('animate');
this.lastCurrentTab = this.#currentTab;
this.overlay.classList.remove('zen-glance-overlay');
gBrowser._getSwitcher().setTabStateNoAction(this.lastCurrentTab, gBrowser.AsyncTabSwitcher.STATE_UNLOADED);
if (!onTabClose && gBrowser.selectedTab === this.lastCurrentTab) {
this._duringOpening = true;
gBrowser.selectedTab = this.currentParentTab;
}
// reset everything
this.currentParentTab = null;
this.browserWrapper = null;
this.overlay = null;
this.contentWrapper = null;
this.lastCurrentTab.removeAttribute('zen-glance-tab');
this.lastCurrentTab._closingGlance = true;
gBrowser.tabContainer._invalidateCachedTabs();
gBrowser.removeTab(this.lastCurrentTab, { animate: true });
this.#currentTab = null;
this.#currentBrowser = null;
this.lastCurrentTab = null;
this._duringOpening = false;
this._animating = false;
}, 400);
this.#currentTab.style.display = 'none';
this.overlay.setAttribute('fade-out', true);
this.overlay.style.pointerEvents = 'none';
this.quickCloseGlance({ justAnimateParent: true, clearID: false });
const originalPosition = this.#glances.get(this.#currentGlanceID).originalPosition;
gZenUIManager.motion
.animate(
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer'),
{
scale: [0.98, 1],
backdropFilter: ['blur(5px)', 'blur(0px)'],
opacity: [0.5, 1],
},
{
duration: 0.4,
type: 'spring',
bounce: 0.2,
}
)
.then(() => {
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer').removeAttribute('style');
});
gZenUIManager.motion
.animate(
this.browserWrapper,
{
...originalPosition,
opacity: 0.3,
},
{ type: 'spring', bounce: 0, duration: 0.4, easing: 'ease' }
)
.then(() => {
this.browserWrapper.removeAttribute('animate');
this.browserWrapper.removeAttribute('animate-end');
if (!this.#currentParentTab) {
return;
}
if (!onTabClose || quikcCloseZen) {
this.quickCloseGlance({ clearID: false });
}
this.overlay.removeAttribute('fade-out');
this.browserWrapper.removeAttribute('animate');
this.lastCurrentTab = this.#currentTab;
this.overlay.classList.remove('zen-glance-overlay');
gBrowser._getSwitcher().setTabStateNoAction(this.lastCurrentTab, gBrowser.AsyncTabSwitcher.STATE_UNLOADED);
if (!onTabClose) {
this.#currentParentTab._visuallySelected = false;
}
// reset everything
const prevOverlay = this.overlay;
this.browserWrapper = null;
this.overlay = null;
this.contentWrapper = null;
this.lastCurrentTab.removeAttribute('zen-glance-tab');
this.lastCurrentTab._closingGlance = true;
if (!isDifferent) {
gBrowser.selectedTab = this.#currentParentTab;
}
this._ignoreClose = true;
gBrowser.removeTab(this.lastCurrentTab, { animate: true });
gBrowser.tabContainer._invalidateCachedTabs();
this.#currentParentTab.removeAttribute('glance-id');
this.#glances.delete(this.#currentGlanceID);
this.#currentGlanceID = setNewID;
this.lastCurrentTab = null;
this._duringOpening = false;
this._animating = false;
this.closingGlance = false;
if (this.#currentGlanceID) {
this.quickOpenGlance();
}
});
});
}
quickOpenGlance() {
quickOpenGlance({ dontOpenButtons = false } = {}) {
if (!this.#currentBrowser || this._duringOpening) {
return;
}
this._duringOpening = true;
try {
gBrowser.selectedTab = this.#currentTab;
} catch (e) {}
if (!dontOpenButtons) {
this.showSidebarButtons();
}
this.currentParentTab.linkedBrowser
.closest('.browserSidebarContainer')
.classList.add('deck-selected', 'zen-glance-background');
this.currentParentTab.linkedBrowser.closest('.browserSidebarContainer').classList.remove('zen-glance-overlay');
this.currentParentTab.linkedBrowser.zenModeActive = true;
const parentBrowserContainer = this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer');
parentBrowserContainer.classList.add('zen-glance-background');
parentBrowserContainer.classList.remove('zen-glance-overlay');
parentBrowserContainer.classList.add('deck-selected');
this.#currentParentTab.linkedBrowser.zenModeActive = true;
this.#currentParentTab.linkedBrowser.docShellIsActive = true;
this.#currentBrowser.zenModeActive = true;
this.currentParentTab.linkedBrowser.docShellIsActive = true;
this.#currentBrowser.docShellIsActive = true;
this.#currentBrowser.setAttribute('zen-glance-selected', true);
this.fillOverlay(this.#currentBrowser);
this.#currentParentTab._visuallySelected = true;
this.currentParentTab._visuallySelected = true;
this.overlay.classList.add('deck-selected');
this.overlay.classList.add('zen-glance-overlay');
this._duringOpening = false;
}
quickCloseGlance({ closeCurrentTab = true, closeParentTab = true, justAnimateParent = false } = {}) {
const parentHasBrowser = !!this.currentParentTab.linkedBrowser;
if (!justAnimateParent) {
quickCloseGlance({ closeCurrentTab = true, closeParentTab = true, justAnimateParent = false, clearID = true } = {}) {
const parentHasBrowser = !!this.#currentParentTab.linkedBrowser;
this.hideSidebarButtons();
if (parentHasBrowser) {
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer').classList.remove('zen-glance-background');
}
if (!justAnimateParent && this.overlay) {
if (parentHasBrowser) {
if (closeParentTab) {
this.currentParentTab.linkedBrowser.closest('.browserSidebarContainer').classList.remove('deck-selected');
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer').classList.remove('deck-selected');
}
this.currentParentTab.linkedBrowser.zenModeActive = false;
this.#currentParentTab.linkedBrowser.zenModeActive = false;
}
this.#currentBrowser.zenModeActive = false;
if (closeParentTab && parentHasBrowser) {
this.currentParentTab.linkedBrowser.docShellIsActive = false;
this.#currentParentTab.linkedBrowser.docShellIsActive = false;
}
if (closeCurrentTab) {
this.#currentBrowser.docShellIsActive = false;
this.overlay.classList.remove('deck-selected');
this.#currentTab._selected = false;
}
if (!this.currentParentTab._visuallySelected && closeParentTab) {
this.currentParentTab._visuallySelected = false;
if (!this.#currentParentTab._visuallySelected && closeParentTab) {
this.#currentParentTab._visuallySelected = false;
}
this.#currentBrowser.removeAttribute('zen-glance-selected');
this.overlay.classList.remove('zen-glance-overlay');
}
if (parentHasBrowser) {
this.currentParentTab.linkedBrowser.closest('.browserSidebarContainer').classList.remove('zen-glance-background');
if (clearID) {
this.#currentGlanceID = null;
}
}
onLocationChange(_) {
if (this._duringOpening) {
onLocationChangeOpenGlance() {
if (!this.animatingOpen) {
this.quickOpenGlance();
}
}
// note: must be async to avoid timing issues
onLocationChange(event) {
const tab = event.target;
if (this.animatingFullOpen || this.closingGlance) {
return;
}
if (gBrowser.selectedTab === this.#currentTab && !this.animatingOpen && !this._duringOpening && this.#currentBrowser) {
this.quickOpenGlance();
if (this._duringOpening || !tab.hasAttribute('glance-id')) {
if (this.#currentGlanceID && !this._duringOpening) {
this.quickCloseGlance();
}
return;
}
if (gBrowser.selectedTab === this.currentParentTab && this.#currentBrowser) {
this.quickOpenGlance();
} else if ((!this.animatingFullOpen || this.animatingOpen) && this.#currentBrowser) {
this.closeGlance();
if (this.#currentGlanceID && this.#currentGlanceID !== tab.getAttribute('glance-id')) {
this.quickCloseGlance();
}
this.#currentGlanceID = tab.getAttribute('glance-id');
if (gBrowser.selectedTab === this.#currentParentTab && this.#currentBrowser) {
const curTab = this.#currentTab;
setTimeout(() => {
gBrowser.selectedTab = curTab;
}, 0);
} else if (gBrowser.selectedTab === this.#currentTab) {
setTimeout(this.onLocationChangeOpenGlance.bind(this), 0);
}
}
onTabClose(event) {
if (event.target === this.currentParentTab) {
if (event.target === this.#currentParentTab) {
this.closeGlance({ onTabClose: true });
}
}
manageTabClose(tab) {
if (tab.hasAttribute('glance-id')) {
const oldGlanceID = this.#currentGlanceID;
const newGlanceID = tab.getAttribute('glance-id');
this.#currentGlanceID = newGlanceID;
const isDifferent = newGlanceID !== oldGlanceID;
if (this._ignoreClose) {
this._ignoreClose = false;
return false;
}
this.closeGlance({ onTabClose: true, setNewID: isDifferent ? oldGlanceID : null, isDifferent });
// only keep continueing tab close if we are not on the currently selected tab
return !isDifferent;
}
return false;
}
tabDomainsDiffer(tab1, url2) {
try {
if (!tab1) {
@@ -350,29 +486,41 @@
}
fullyOpenGlance() {
this.animatingFullOpen = true;
gBrowser._insertTabAtIndex(this.#currentTab, {
index: this.getTabPosition(this.#currentTab),
});
this.animatingFullOpen = true;
this.currentParentTab._visuallySelected = false;
this.browserWrapper.removeAttribute('style');
this.browserWrapper.removeAttribute('has-finished-animation');
this.browserWrapper.setAttribute('animate-full', true);
this.#currentTab.removeAttribute('zen-glance-tab');
this.#currentTab.removeAttribute('glance-id');
this.#currentParentTab.removeAttribute('glance-id');
gBrowser.selectedTab = this.#currentTab;
this.currentParentTab.linkedBrowser.closest('.browserSidebarContainer').classList.remove('zen-glance-background');
setTimeout(() => {
window.requestAnimationFrame(() => {
this.browserWrapper.setAttribute('animate-full-end', true);
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer').classList.remove('zen-glance-background');
this.#currentParentTab._visuallySelected = false;
this.hideSidebarButtons();
gZenUIManager.motion
.animate(
this.browserWrapper,
{
width: ['85%', '100%'],
height: ['100%', '100%'],
},
{
duration: 0.4,
type: 'spring',
}
)
.then(() => {
this.browserWrapper.removeAttribute('animate-full');
this.overlay.classList.remove('zen-glance-overlay');
setTimeout(() => {
this.animatingFullOpen = false;
this.closeGlance({ noAnimation: true });
}, 600);
this.browserWrapper.removeAttribute('style');
this.animatingFullOpen = false;
this.closeGlance({ noAnimation: true });
this.#glances.delete(this.#currentGlanceID);
});
}, 300);
}
openGlanceForBookmark(event) {
@@ -406,6 +554,10 @@
return false;
}
getFocusedTab(aDir) {
return aDir < 0 ? this.#currentParentTab : this.#currentTab;
}
}
window.gZenGlanceManager = new ZenGlanceManager();
@@ -422,6 +574,7 @@
DOMContentLoaded: {},
},
},
matches: ['https://*/*'],
});
}
}

599
src/browser/base/zen-components/ZenGradientGenerator.mjs
View File

@@ -2,13 +2,12 @@
class ZenThemePicker extends ZenMultiWindowFeature {
static GRADIENT_IMAGE_URL = 'chrome://browser/content/zen-images/gradient.png';
static GRADIENT_DISPLAY_URL = 'chrome://browser/content/zen-images/gradient-display.png';
static MAX_DOTS = 5;
static MAX_DOTS = 3;
currentOpacity = 0.5;
currentRotation = 45;
numberOfDots = 0;
dots = [];
useAlgo = '';
constructor() {
super();
if (!Services.prefs.getBoolPref('zen.theme.gradient', true) || !ZenWorkspaces.shouldHaveWorkspaces) {
@@ -33,11 +32,9 @@
this.onDarkModeChange.bind(this)
);
this.initRotation();
this.initCanvas();
this.initCustomColorInput();
ZenWorkspaces.addChangeListeners(this.onWorkspaceChange.bind(this));
window.matchMedia('(prefers-color-scheme: dark)').addListener(this.onDarkModeChange.bind(this));
}
@@ -80,7 +77,7 @@
onImageLoad() {
// resize the image to fit the panel
const imageSize = 300 - 20; // 20 is the padding (10px)
const imageSize = 350 - 20; // 20 is the padding (10px)
const scale = imageSize / Math.max(this.image.width, this.image.height);
this.image.width *= scale;
this.image.height *= scale;
@@ -99,80 +96,12 @@
this.onDarkModeChange(null);
}
initRotation() {
this.rotationInput = document.getElementById('PanelUI-zen-gradient-degrees');
this.rotationInputDot = this.rotationInput.querySelector('.dot');
this.rotationInputText = this.rotationInput.querySelector('.text');
this.rotationInputDot.addEventListener('mousedown', this.onRotationMouseDown.bind(this));
this.rotationInput.addEventListener('wheel', this.onRotationWheel.bind(this));
}
onRotationWheel(event) {
event.preventDefault();
const delta = event.deltaY;
const degrees = this.currentRotation + (delta > 0 ? 10 : -10);
this.setRotationInput(degrees);
this.updateCurrentWorkspace();
}
onRotationMouseDown(event) {
event.preventDefault();
this.rotationDragging = true;
this.rotationInputDot.style.zIndex = 2;
this.rotationInputDot.classList.add('dragging');
document.addEventListener('mousemove', this.onRotationMouseMove.bind(this));
document.addEventListener('mouseup', this.onRotationMouseUp.bind(this));
}
onRotationMouseUp(event) {
this.rotationDragging = false;
this.rotationInputDot.style.zIndex = 1;
this.rotationInputDot.classList.remove('dragging');
document.removeEventListener('mousemove', this.onRotationMouseMove.bind(this));
document.removeEventListener('mouseup', this.onRotationMouseUp.bind(this));
}
onRotationMouseMove(event) {
if (this.rotationDragging) {
event.preventDefault();
const rect = this.rotationInput.getBoundingClientRect();
// Make the dot follow the mouse in a circle, it can't go outside or inside the circle
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const angle = Math.atan2(event.clientY - centerY, event.clientX - centerX);
const distance = Math.sqrt((event.clientX - centerX) ** 2 + (event.clientY - centerY) ** 2);
const radius = rect.width / 2;
let x = centerX + Math.cos(angle) * radius;
let y = centerY + Math.sin(angle) * radius;
if (distance > radius) {
x = event.clientX;
y = event.clientY;
}
const degrees = Math.round((Math.atan2(y - centerY, x - centerX) * 180) / Math.PI);
this.setRotationInput(degrees);
this.updateCurrentWorkspace();
}
}
setRotationInput(degrees) {
let fixedRotation = degrees;
while (fixedRotation < 0) {
fixedRotation += 360;
}
while (fixedRotation >= 360) {
fixedRotation -= 360;
}
this.currentRotation = degrees;
this.rotationInputDot.style.transform = `rotate(${degrees - 20}deg)`;
this.rotationInputText.textContent = `${fixedRotation}°`;
}
initCustomColorInput() {
this.customColorInput.addEventListener('keydown', this.onCustomColorKeydown.bind(this));
}
onCustomColorKeydown(event) {
//checks for enter key for custom colors
// Check for Enter key to add custom colors
if (event.key === 'Enter') {
event.preventDefault();
this.addCustomColor();
@@ -184,6 +113,7 @@
themePicker.style.setProperty('--zen-theme-picker-gradient-image', `url(${ZenThemePicker.GRADIENT_DISPLAY_URL})`);
themePicker.addEventListener('mousemove', this.onDotMouseMove.bind(this));
themePicker.addEventListener('mouseup', this.onDotMouseUp.bind(this));
themePicker.addEventListener('mousedown', this.onDotMouseDown.bind(this));
themePicker.addEventListener('click', this.onThemePickerClick.bind(this));
}
@@ -234,135 +164,31 @@
dot.style.opacity = 0;
dot.style.setProperty('--zen-theme-picker-dot-color', color.c);
} else {
dot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${r}, ${g}, ${b})`);
const { x, y } = this.calculateInitialPosition(color);
const dotPad = this.panel.querySelector('.zen-theme-picker-gradient');
const dot = document.createElement('div');
dot.classList.add('zen-theme-picker-dot');
dot.style.left = `${x * 100}%`;
dot.style.top = `${y * 100}%`;
dot.addEventListener('mousedown', this.onDotMouseDown.bind(this));
dotPad.appendChild(dot);
let id = this.dots.length;
dot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${r}, ${g}, ${b})`);
this.dots.push({
ID: id,
Element: dot,
Position: { x: parseFloat(dot.style.left), y: parseFloat(dot.style.top) },
});
}
if (color.isPrimary) {
dot.classList.add('primary');
}
const lastDot = this.panel.querySelector('.zen-theme-picker-dot:last-child');
let newIndex = 0;
if (lastDot) {
newIndex = parseInt(lastDot.getAttribute('data-index')) + 1;
}
dot.setAttribute('data-index', newIndex);
this.panel.querySelector('.zen-theme-picker-gradient').appendChild(dot);
if (!fromWorkspace) {
this.updateCurrentWorkspace(true);
}
}
onDotMouseDown(event) {
event.preventDefault();
if (event.button === 2) {
return;
}
this.dragging = true;
this.draggedDot = event.target;
this.draggedDot.style.zIndex = 1;
this.draggedDot.classList.add('dragging');
// Store the starting position of the drag
this.dragStartPosition = {
x: event.clientX,
y: event.clientY,
};
}
onDotMouseMove(event) {
if (this.dragging) {
event.preventDefault();
const rect = this.panel.querySelector('.zen-theme-picker-gradient').getBoundingClientRect();
const padding = 90; // each side
// do NOT let the ball be draged outside of an imaginary circle. You can drag it anywhere inside the circle
// if the distance between the center of the circle and the dragged ball is bigger than the radius, then the ball
// should be placed on the edge of the circle. If it's inside the circle, then the ball just follows the mouse
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const radius = (rect.width - padding) / 2;
let pixelX = event.clientX;
let pixelY = event.clientY;
const distance = Math.sqrt((pixelX - centerX) ** 2 + (pixelY - centerY) ** 2);
if (distance > radius) {
const angle = Math.atan2(pixelY - centerY, pixelX - centerX);
pixelX = centerX + Math.cos(angle) * radius;
pixelY = centerY + Math.sin(angle) * radius;
}
// set the location of the dot in pixels
const relativeX = pixelX - rect.left;
const relativeY = pixelY - rect.top;
this.draggedDot.style.left = `${relativeX}px`;
this.draggedDot.style.top = `${relativeY}px`;
const color = this.getColorFromPosition(relativeX, relativeY);
this.draggedDot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${color[0]}, ${color[1]}, ${color[2]})`);
this.updateOtherColorsAndUpdateTheme(color);
}
}
updateOtherColorsAndUpdateTheme(primaryColor) {
// Convert the other colors into the correct color by using color theory
const dots = this.panel.querySelectorAll('.zen-theme-picker-dot');
const primaryColorRGB = primaryColor;
const primaryColorDot = this.draggedDot;
const primaryColorIndex = parseInt(primaryColorDot.getAttribute('data-index'));
for (const dot of dots) {
if (dot.classList.contains('primary') || dot.classList.contains('custom')) {
continue;
}
const index = parseInt(dot.getAttribute('data-index'));
if (index === primaryColorIndex) {
continue;
}
const [r, g, b] = this.getColorFromPosition(parseInt(dot.style.left), parseInt(dot.style.top));
const color = [r, g, b];
// modify the color based on the index and color theory
const modifiedColor = this.modifyColor(primaryColorRGB, color, index - primaryColorIndex);
dot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${modifiedColor[0]}, ${modifiedColor[1]}, ${modifiedColor[2]})`);
// update y and x
const rect = this.panel.querySelector('.zen-theme-picker-gradient').getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const radius = (rect.width - 90) / 2;
const angle = Math.atan2(modifiedColor[1] - primaryColorRGB[1], modifiedColor[0] - primaryColorRGB[0]);
const distance = Math.sqrt((modifiedColor[0] - primaryColorRGB[0]) ** 2 + (modifiedColor[1] - primaryColorRGB[1]) ** 2);
let x = centerX + Math.cos(angle) * radius;
let y = centerY + Math.sin(angle) * radius;
if (distance > radius) {
x = primaryColorDot.style.left;
y = primaryColorDot.style.top;
}
dot.style.left = x + 'px';
dot.style.top = y + 'px';
}
this.updateCurrentWorkspace();
}
modifyColor(primaryColor, color, index) {
// index may be negative
if (index < 0) {
index = -(1 / index);
}
const [r, g, b] = primaryColor;
const [r2, g2, b2] = color;
const factor = 0.5;
const modifiedColor = [
Math.floor(Math.min(255, r + (r2 - r) * factor * index)),
Math.floor(Math.min(255, g + (g2 - g) * factor * index)),
Math.floor(Math.min(255, b + (b2 - b) * factor * index)),
];
return modifiedColor;
}
addColorToCustomList(color) {
const listItems = window.MozXULElement.parseXULToFragment(`
<hbox class="zen-theme-picker-custom-list-item">
@@ -400,14 +226,240 @@
await this.updateCurrentWorkspace();
}
spawnDot(relativePosition, primary = false) {
const dotPad = this.panel.querySelector('.zen-theme-picker-gradient');
const dot = document.createElement('div');
dot.classList.add('zen-theme-picker-dot');
dot.style.left = `${relativePosition.x}px`;
dot.style.top = `${relativePosition.y}px`;
dotPad.appendChild(dot);
let id = this.dots.length;
if (primary === true) {
id = 0;
const existingPrimaryDot = this.dots.find((d) => d.ID === 0);
if (existingPrimaryDot) {
existingPrimaryDot.ID = this.dots.length;
}
}
const colorFromPos = this.getColorFromPosition(relativePosition.x, relativePosition.y);
dot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`);
this.dots.push({
ID: id,
Element: dot,
Position: { x: parseFloat(dot.style.left), y: parseFloat(dot.style.top) },
});
}
calculateCompliments(dots, action = 'update', useHarmony = '') {
const colorHarmonies = [
{ type: 'complementary', angles: [180] },
{ type: 'splitComplementary', angles: [150, 210] },
{ type: 'analogous', angles: [30, 330] },
{ type: 'triadic', angles: [120, 240] },
{ type: 'floating', angles: [] },
];
function getColorHarmonyType(numDots) {
if (useHarmony !== '') {
const selectedHarmony = colorHarmonies.find((harmony) => harmony.type === useHarmony);
if (selectedHarmony) {
if (action === 'remove') {
return colorHarmonies.find((harmony) => harmony.angles.length === selectedHarmony.angles.length - 1);
}
if (action === 'add') {
return colorHarmonies.find((harmony) => harmony.angles.length === selectedHarmony.angles.length + 1);
}
if (action === 'update') {
return selectedHarmony;
}
}
}
if (action === 'remove') {
return colorHarmonies.find((harmony) => harmony.angles.length === numDots);
}
if (action === 'add') {
return colorHarmonies.find((harmony) => harmony.angles.length + 1 === numDots);
}
if (action === 'update') {
return colorHarmonies.find((harmony) => harmony.angles.length + 1 === numDots);
}
}
function getAngleFromPosition(position, centerPosition) {
let deltaX = position.x - centerPosition.x;
let deltaY = position.y - centerPosition.y;
let angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
return (angle + 360) % 360;
}
function getDistanceFromCenter(position, centerPosition) {
const deltaX = position.x - centerPosition.x;
const deltaY = position.y - centerPosition.y;
return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
}
const dotPad = this.panel.querySelector('.zen-theme-picker-gradient');
const rect = dotPad.getBoundingClientRect();
const padding = 90;
let updatedDots = [...dots];
const centerPosition = { x: rect.width / 2, y: rect.height / 2 };
const harmonyAngles = getColorHarmonyType(dots.length + (action === 'add' ? 1 : action === 'remove' ? -1 : 0));
this.useAlgo = harmonyAngles.type;
if (!harmonyAngles || harmonyAngles.angles.length === 0) return [];
let primaryDot = dots.find((dot) => dot.ID === 0);
if (!primaryDot) return [];
if (action === 'add' && this.dots.length) {
updatedDots.push({ ID: this.dots.length, Position: centerPosition });
}
const baseAngle = getAngleFromPosition(primaryDot.Position, centerPosition);
let distance = getDistanceFromCenter(primaryDot.Position, centerPosition);
const radius = (rect.width - padding) / 2;
if (distance > radius) distance = radius;
if (this.dots.length > 0) {
updatedDots = [{ ID: 0, Position: primaryDot.Position }];
}
harmonyAngles.angles.forEach((angleOffset, index) => {
let newAngle = (baseAngle + angleOffset) % 360;
let radian = (newAngle * Math.PI) / 180;
let newPosition = {
x: centerPosition.x + distance * Math.cos(radian),
y: centerPosition.y + distance * Math.sin(radian),
};
updatedDots.push({ ID: index + 1, Position: newPosition });
});
return updatedDots;
}
handleColorPositions(colorPositions) {
colorPositions.sort((a, b) => a.ID - b.ID);
if (this.useAlgo === 'floating') {
this.dots.forEach((dot) => {
dot.Element.style.zIndex = 999;
const colorFromPos = this.getColorFromPosition(dot.Position.x, dot.Position.y);
dot.Element.style.setProperty(
'--zen-theme-picker-dot-color',
`rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
);
});
}
const existingPrimaryDot = this.dots.find((d) => d.ID === 0);
if (existingPrimaryDot) {
existingPrimaryDot.Element.style.zIndex = 999;
const colorFromPos = this.getColorFromPosition(existingPrimaryDot.Position.x, existingPrimaryDot.Position.y);
existingPrimaryDot.Element.style.setProperty(
'--zen-theme-picker-dot-color',
`rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
);
}
colorPositions.forEach((dotPosition) => {
const existingDot = this.dots.find((dot) => dot.ID === dotPosition.ID);
if (existingDot) {
existingDot.Position = dotPosition.Position;
existingDot.Element.style.left = `${dotPosition.Position.x}px`;
existingDot.Element.style.top = `${dotPosition.Position.y}px`;
const colorFromPos = this.getColorFromPosition(dotPosition.Position.x, dotPosition.Position.y);
existingDot.Element.style.setProperty(
'--zen-theme-picker-dot-color',
`rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
);
if (!this.dragging) {
gZenUIManager.motion.animate(
existingDot.Element,
{
left: `${dotPosition.Position.x}px`,
top: `${dotPosition.Position.y}px`,
},
{
duration: 0.4,
type: 'spring',
bounce: 0.3,
}
);
}
} else {
this.spawnDot(dotPosition.Position);
}
});
}
onThemePickerClick(event) {
event.preventDefault();
const target = event.target;
if (target.id === 'PanelUI-zen-gradient-generator-color-add') {
if (this.dots.length >= ZenThemePicker.MAX_DOTS) return;
let colorPositions = this.calculateCompliments(this.dots, 'add', this.useAlgo);
this.handleColorPositions(colorPositions);
this.updateCurrentWorkspace();
return;
} else if (target.id === 'PanelUI-zen-gradient-generator-color-remove') {
this.dots.sort((a, b) => a.ID - b.ID);
if (this.dots.length === 0) return;
if (event.button !== 0 || this.dragging) return;
const lastDot = this.dots.pop();
lastDot.Element.remove();
this.dots.forEach((dot, index) => {
dot.ID = index;
});
let colorPositions = this.calculateCompliments(this.dots, 'remove', this.useAlgo);
this.handleColorPositions(colorPositions);
this.updateCurrentWorkspace();
return;
} else if (target.id === 'PanelUI-zen-gradient-generator-color-toggle-algo') {
const colorHarmonies = [
{ type: 'complementary', angles: [180] },
{ type: 'splitComplementary', angles: [150, 210] },
{ type: 'analogous', angles: [30, 330] },
{ type: 'triadic', angles: [120, 240] },
{ type: 'floating', angles: [] },
];
const applicableHarmonies = colorHarmonies.filter(
(harmony) => harmony.angles.length + 1 === this.dots.length || harmony.type === 'floating'
);
let currentIndex = applicableHarmonies.findIndex((harmony) => harmony.type === this.useAlgo);
let nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % applicableHarmonies.length;
this.useAlgo = applicableHarmonies[nextIndex].type;
let colorPositions = this.calculateCompliments(this.dots, 'update', this.useAlgo);
this.handleColorPositions(colorPositions);
this.updateCurrentWorkspace();
return;
}
if (event.button !== 0 || this.dragging || this.recentlyDragged) return;
const gradient = this.panel.querySelector('.zen-theme-picker-gradient');
const rect = gradient.getBoundingClientRect();
const padding = 90; // each side
const padding = 60;
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
@@ -415,39 +467,62 @@
let pixelX = event.clientX;
let pixelY = event.clientY;
// Check if the click is within the circle
const distance = Math.sqrt((pixelX - centerX) ** 2 + (pixelY - centerY) ** 2);
if (distance > radius) {
const clickedElement = event.target;
let clickedDot = null;
const existingPrimaryDot = this.dots.find((d) => d.ID === 0);
clickedDot = this.dots.find((dot) => dot.Element === clickedElement);
if (clickedDot) {
existingPrimaryDot.ID = clickedDot.ID;
clickedDot.ID = 0;
clickedDot.Element.style.zIndex = 999;
let colorPositions = this.calculateCompliments(this.dots, 'update', this.useAlgo);
this.handleColorPositions(colorPositions);
return;
}
const clickedElement = event.target;
const isExistingDot = clickedElement.classList.contains('zen-theme-picker-dot');
const distance = Math.sqrt((pixelX - centerX) ** 2 + (pixelY - centerY) ** 2);
if (distance > radius) {
const angle = Math.atan2(pixelY - centerY, pixelX - centerX);
pixelX = centerX + Math.cos(angle) * radius;
pixelY = centerY + Math.sin(angle) * radius;
}
if (!isExistingDot && this.numberOfDots < ZenThemePicker.MAX_DOTS) {
const relativeX = event.clientX - rect.left;
const relativeY = event.clientY - rect.top;
const relativeX = pixelX - rect.left;
const relativeY = pixelY - rect.top;
const color = this.getColorFromPosition(relativeX, relativeY);
const dot = document.createElement('div');
dot.classList.add('zen-theme-picker-dot');
dot.addEventListener('mousedown', this.onDotMouseDown.bind(this));
dot.style.left = `${relativeX}px`;
dot.style.top = `${relativeY}px`;
dot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${color[0]}, ${color[1]}, ${color[2]})`);
const lastDot = this.panel.querySelector('.zen-theme-picker-dot:last-child');
let newIndex = 0;
if (lastDot) {
newIndex = parseInt(lastDot.getAttribute('data-index')) + 1;
if (!clickedDot && this.dots.length < 1) {
if (this.dots.length === 0) {
this.spawnDot({ x: relativeX, y: relativeY }, true);
} else {
this.spawnDot({ x: relativeX, y: relativeY });
}
dot.setAttribute('data-index', newIndex);
gradient.appendChild(dot);
this.updateCurrentWorkspace(true);
} else if (!clickedDot && existingPrimaryDot) {
existingPrimaryDot.Element.style.left = `${relativeX}px`;
existingPrimaryDot.Element.style.top = `${relativeY}px`;
existingPrimaryDot.Position = {
x: relativeX,
y: relativeY,
};
let colorPositions = this.calculateCompliments(this.dots, 'update', this.useAlgo);
this.handleColorPositions(colorPositions);
this.updateCurrentWorkspace(true);
gZenUIManager.motion.animate(
existingPrimaryDot.Element,
{
left: `${existingPrimaryDot.Position.x}px`,
top: `${existingPrimaryDot.Position.y}px`,
},
{
duration: 0.4,
type: 'spring',
bounce: 0.3,
}
);
}
}
@@ -456,13 +531,12 @@
if (event.button === 2) {
return;
}
if (!event.target.classList.contains('primary')) {
return;
const draggedDot = this.dots.find((dot) => dot.Element === event.target);
if (draggedDot) {
this.dragging = true;
this.draggedDot = event.target;
this.draggedDot.classList.add('dragging');
}
this.dragging = true;
this.draggedDot = event.target;
this.draggedDot.style.zIndex = 1;
this.draggedDot.classList.add('dragging');
// Store the starting position of the drag
this.dragStartPosition = {
@@ -476,9 +550,20 @@
if (!event.target.classList.contains('zen-theme-picker-dot')) {
return;
}
this.dots = this.dots.filter((dot) => dot.Element !== event.target);
event.target.remove();
this.dots.sort((a, b) => a.ID - b.ID);
// Reassign the IDs after sorting
this.dots.forEach((dot, index) => {
dot.ID = index;
});
let colorPositions = this.calculateCompliments(this.dots, 'update', this.useAlgo);
this.handleColorPositions(colorPositions);
this.updateCurrentWorkspace();
this.numberOfDots--;
return;
}
@@ -486,14 +571,55 @@
event.preventDefault();
event.stopPropagation();
this.dragging = false;
this.draggedDot.style.zIndex = 1;
this.draggedDot.classList.remove('dragging');
this.draggedDot = null;
this.dragStartPosition = null; // Reset the drag start position
this.recentlyDragged = true;
setTimeout(() => {
this.recentlyDragged = false;
}, 100);
return;
}
}
this.numberOfDots = this.panel.querySelectorAll('.zen-theme-picker-dot').length;
onDotMouseMove(event) {
if (this.dragging) {
event.preventDefault();
const rect = this.panel.querySelector('.zen-theme-picker-gradient').getBoundingClientRect();
const padding = 90; // each side
// do NOT let the ball be draged outside of an imaginary circle. You can drag it anywhere inside the circle
// if the distance between the center of the circle and the dragged ball is bigger than the radius, then the ball
// should be placed on the edge of the circle. If it's inside the circle, then the ball just follows the mouse
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const radius = (rect.width - padding) / 2;
let pixelX = event.clientX;
let pixelY = event.clientY;
const distance = Math.sqrt((pixelX - centerX) ** 2 + (pixelY - centerY) ** 2);
if (distance > radius) {
const angle = Math.atan2(pixelY - centerY, pixelX - centerX);
pixelX = centerX + Math.cos(angle) * radius;
pixelY = centerY + Math.sin(angle) * radius;
}
// set the location of the dot in pixels
const relativeX = pixelX - rect.left;
const relativeY = pixelY - rect.top;
const draggedDot = this.dots.find((dot) => dot.Element === this.draggedDot);
draggedDot.Element.style.left = `${relativeX}px`;
draggedDot.Element.style.top = `${relativeY}px`;
draggedDot.Position = {
x: relativeX,
y: relativeY,
};
let colorPositions = this.calculateCompliments(this.dots, 'update', this.useAlgo);
this.handleColorPositions(colorPositions);
this.updateCurrentWorkspace();
}
}
themedColors(colors) {
@@ -676,7 +802,7 @@
// Reactivate the transition after the animation
appWrapper.removeAttribute('post-animating');
}, 100);
}, 500);
}, 200);
});
}
@@ -695,13 +821,10 @@
browser.gZenThemePicker.currentRotation = workspaceTheme.rotation ?? 45;
browser.gZenThemePicker.currentTexture = workspaceTheme.texture ?? 0;
browser.gZenThemePicker.numberOfDots = workspaceTheme.gradientColors.length;
browser.document.getElementById('PanelUI-zen-gradient-generator-opacity').value =
browser.gZenThemePicker.currentOpacity;
browser.document.getElementById('PanelUI-zen-gradient-generator-texture').value =
browser.gZenThemePicker.currentTexture;
browser.gZenThemePicker.setRotationInput(browser.gZenThemePicker.currentRotation);
const gradient = browser.gZenThemePicker.getGradient(workspaceTheme.gradientColors);
const gradientToolbar = browser.gZenThemePicker.getGradient(workspaceTheme.gradientColors, true);
@@ -725,6 +848,7 @@
}
if (!skipUpdate) {
this.dots = [];
browser.gZenThemePicker.recalculateDots(workspaceTheme.gradientColors);
}
});
@@ -782,7 +906,6 @@
}
recalculateDots(colors) {
//THIS IS PART OF THE ISSUE
for (const color of colors) {
this.createDot(color, true);
}
@@ -805,7 +928,7 @@
if (!skipSave) {
await ZenWorkspacesStorage.saveWorkspaceTheme(currentWorkspace.uuid, gradient);
await ZenWorkspaces._propagateWorkspaceData();
ConfirmationHint.show(document.getElementById('PanelUI-menu-button'), 'zen-panel-ui-gradient-generator-saved-message');
gZenUIManager.showToast('zen-panel-ui-gradient-generator-saved-message');
currentWorkspace = await ZenWorkspaces.getActiveWorkspace();
}

34
src/browser/base/zen-components/ZenKeyboardShortcuts.mjs
View File

@@ -80,6 +80,7 @@ const defaultKeyboardGroups = {
'zen-search-find-again-shortcut-prev',
],
pageOperations: [
'zen-text-action-copy-url-markdown-shortcut',
'zen-text-action-copy-url-shortcut',
'zen-location-open-shortcut',
'zen-location-open-shortcut-alt',
@@ -755,7 +756,7 @@ class ZenKeyboardShortcutsLoader {
}
class ZenKeyboardShortcutsVersioner {
static LATEST_KBS_VERSION = 7;
static LATEST_KBS_VERSION = 8;
constructor() {}
@@ -809,6 +810,20 @@ class ZenKeyboardShortcutsVersioner {
return this.migrateIfNeeded(data);
}
fillDefaultIfNotPresent(data) {
for (let shortcut of ZenKeyboardShortcutsLoader.zenGetDefaultShortcuts()) {
// If it has an ID and we dont find it in the data, we add it
if (shortcut.getID() && !data.find((s) => s.getID() == shortcut.getID())) {
data.push(shortcut);
}
}
return data;
}
fixedKeyboardShortcuts(data) {
return this.fillDefaultIfNotPresent(this.migrateIfNeeded(data));
}
migrate(data, version) {
if (version < 1) {
// Migrate from 0 to 1
@@ -907,6 +922,21 @@ class ZenKeyboardShortcutsVersioner {
gZenKeyboardShortcutsManager._hasToLoadDefaultDevtools = true;
window.addEventListener('zen-devtools-keyset-added', listener);
}
if (version < 8) {
// Migrate from 7 to 8
// In this new version, we add the "Copy URL as Markdown" shortcut to the default shortcuts
data.push(
new KeyShortcut(
'zen-copy-url-markdown',
'C',
'',
ZEN_OTHER_SHORTCUTS_GROUP,
KeyShortcutModifiers.fromObject({ accel: true, shift: true, alt: true }),
'code:gZenCommonActions.copyCurrentURLAsMarkdownToClipboard()',
'zen-text-action-copy-url-markdown-shortcut'
)
);
}
return data;
}
}
@@ -934,7 +964,7 @@ var gZenKeyboardShortcutsManager = {
if (this.inBrowserView) {
const loadedShortcuts = await this._loadSaved();
this._currentShortcutList = this.versioner.migrateIfNeeded(loadedShortcuts);
this._currentShortcutList = this.versioner.fixedKeyboardShortcuts(loadedShortcuts);
this._applyShortcuts();
await this._saveShortcuts();

245
src/browser/base/zen-components/ZenPinnedTabManager.mjs
View File

@@ -69,7 +69,9 @@
return;
}
await this._refreshPinnedTabs(newWorkspace, { init: onInit });
if (onInit) {
await this._refreshPinnedTabs(newWorkspace, { init: onInit });
}
}
log(message) {
@@ -152,7 +154,7 @@
const pinsToCreate = new Set(pins.map((p) => p.uuid));
// First pass: identify existing tabs and remove those without pins
for (let tab of gBrowser.tabs) {
for (let tab of ZenWorkspaces.allStoredTabs) {
const pinId = tab.getAttribute('zen-pin-id');
if (!pinId) {
continue;
@@ -178,10 +180,6 @@
continue; // Skip pins that already have tabs
}
if (!this._shouldShowPin(pin, currentWorkspace, workspaces)) {
continue; // Skip pins not relevant to current workspace
}
let params = {
skipAnimation: true,
allowInheritPrincipal: false,
@@ -234,6 +232,13 @@
this.log(`Created new pinned tab for pin ${pin.uuid} (isEssential: ${pin.isEssential})`);
gBrowser.pinTab(newTab);
if (!pin.isEssential) {
const contaienr = document.querySelector(
`#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${pin.workspaceUuid}"]`
);
contaienr.insertBefore(newTab, contaienr.lastChild);
}
gBrowser.tabContainer._invalidateCachedTabs();
newTab.initialize();
}
@@ -244,43 +249,7 @@
}
gBrowser._updateTabBarForPinnedTabs();
}
_shouldShowPin(pin, currentWorkspace, workspaces) {
const isEssential = pin.isEssential;
const pinWorkspaceUuid = pin.workspaceUuid;
const pinContextId = pin.containerTabId ? pin.containerTabId.toString() : '0';
const workspaceContextId = currentWorkspace.containerTabId?.toString() || '0';
const containerSpecificEssentials = ZenWorkspaces.containerSpecificEssentials;
// Handle essential pins
if (isEssential) {
if (!containerSpecificEssentials) {
return true; // Show all essential pins when containerSpecificEssentials is false
}
if (workspaceContextId !== '0') {
// In workspaces with default container: Show essentials that match the container
return pinContextId === workspaceContextId;
} else {
// In workspaces without a default container: Show essentials that aren't in container-specific workspaces
// or have userContextId="0" or no userContextId
return (
!pinContextId ||
pinContextId === '0' ||
!workspaces.workspaces.some((workspace) => workspace.containerTabId === parseInt(pinContextId, 10))
);
}
}
// For non-essential pins
if (!pinWorkspaceUuid) {
// Pins without a workspace belong to all workspaces (if that's your desired behavior)
return true;
}
// Show if pin belongs to current workspace
return pinWorkspaceUuid === currentWorkspace.uuid;
gZenUIManager.updateTabsToolbar();
}
_onPinnedTabEvent(action, event) {
@@ -321,12 +290,19 @@
for (let otherTab of gBrowser.tabs) {
if (otherTab.pinned && otherTab._tPos > tab.position) {
const actualPin = this._pinsCache.find((pin) => pin.uuid === otherTab.getAttribute('zen-pin-id'));
if (!actualPin) {
continue;
}
actualPin.position = otherTab._tPos;
await ZenPinnedTabsStorage.savePin(actualPin, false);
}
}
const actualPin = this._pinsCache.find((pin) => pin.uuid === tab.getAttribute('zen-pin-id'));
if (!actualPin) {
return;
}
actualPin.position = tab.position;
await ZenPinnedTabsStorage.savePin(actualPin);
}
@@ -446,7 +422,7 @@
}
}
_onCloseTabShortcut(event, selectedTab = gBrowser.selectedTab) {
_onCloseTabShortcut(event, selectedTab = gBrowser.selectedTab, behavior = lazy.zenPinnedTabCloseShortcutBehavior) {
if (!selectedTab?.pinned) {
return;
}
@@ -454,8 +430,6 @@
event.stopPropagation();
event.preventDefault();
const behavior = lazy.zenPinnedTabCloseShortcutBehavior;
switch (behavior) {
case 'close':
this._removePinnedAttributes(selectedTab, true);
@@ -470,6 +444,9 @@
this._resetTabToStoredState(selectedTab);
}
if (behavior.includes('unload')) {
if (selectedTab.hasAttribute('glance-id')) {
break;
}
gBrowser.explicitUnloadTabs([selectedTab]);
selectedTab.removeAttribute('linkedpanel');
}
@@ -557,8 +534,8 @@
}
}
addToEssentials() {
const tabs = TabContextMenu.contextTab.multiselected ? gBrowser.selectedTabs : [TabContextMenu.contextTab];
addToEssentials(tab) {
const tabs = tab ? [tab] : TabContextMenu.contextTab.multiselected ? gBrowser.selectedTabs : [TabContextMenu.contextTab];
for (let i = 0; i < tabs.length; i++) {
const tab = tabs[i];
tab.setAttribute('zen-essential', 'true');
@@ -572,10 +549,11 @@
gBrowser.pinTab(tab);
this.onTabIconChanged(tab);
}
gZenUIManager.updateTabsToolbar();
}
removeEssentials() {
const tabs = TabContextMenu.contextTab.multiselected ? gBrowser.selectedTabs : [TabContextMenu.contextTab];
removeEssentials(tab) {
const tabs = tab ? [tab] : TabContextMenu.contextTab.multiselected ? gBrowser.selectedTabs : [TabContextMenu.contextTab];
for (let i = 0; i < tabs.length; i++) {
const tab = tabs[i];
tab.removeAttribute('zen-essential');
@@ -584,6 +562,7 @@
}
gBrowser.unpinTab(tab);
}
gZenUIManager.updateTabsToolbar();
}
_insertItemsIntoTabContextMenu() {
@@ -638,6 +617,172 @@
document.getElementById('context_unpinSelectedTabs').hidden || contextTab.getAttribute('zen-essential');
document.getElementById('context_zen-pinned-tab-separator').hidden = !isVisible;
}
moveToAnotherTabContainerIfNecessary(event, movingTabs) {
const pinnedTabsTarget =
event.target.closest('#vertical-pinned-tabs-container') || event.target.closest('.zen-current-workspace-indicator');
const essentialTabsTarget = event.target.closest('#zen-essentials-container');
const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
let isVertical = this.expandedSidebarMode;
let moved = false;
for (const draggedTab of movingTabs) {
let isRegularTabs = false;
// Check for pinned tabs container
if (pinnedTabsTarget) {
if (!draggedTab.pinned) {
gBrowser.pinTab(draggedTab);
moved = true;
} else if (draggedTab.hasAttribute('zen-essential')) {
this.removeEssentials(draggedTab);
gBrowser.pinTab(draggedTab);
moved = true;
}
}
// Check for essentials container
else if (essentialTabsTarget) {
if (!draggedTab.hasAttribute('zen-essential')) {
this.addToEssentials(draggedTab);
moved = true;
isVertical = false;
}
}
// Check for normal tabs container
else if (tabsTarget || event.target.id === 'zen-tabs-wrapper') {
if (draggedTab.pinned && !draggedTab.hasAttribute('zen-essential')) {
gBrowser.unpinTab(draggedTab);
moved = true;
isRegularTabs = true;
} else if (draggedTab.hasAttribute('zen-essential')) {
this.removeEssentials(draggedTab);
moved = true;
isRegularTabs = true;
}
}
// If the tab was moved, adjust its position relative to the target tab
if (moved) {
const targetTab = event.target.closest('.tabbrowser-tab');
if (targetTab) {
const rect = targetTab.getBoundingClientRect();
let newIndex = targetTab._tPos;
if (isVertical) {
const middleY = targetTab.screenY + rect.height / 2;
if (!isRegularTabs && event.screenY > middleY) {
newIndex++;
} else if (isRegularTabs && event.screenY < middleY) {
newIndex--;
}
} else {
const middleX = targetTab.screenX + rect.width / 2;
if (event.screenX > middleX) {
newIndex++;
}
}
gBrowser.moveTabTo(draggedTab, newIndex);
}
}
}
return moved;
}
removeTabContainersDragoverClass() {
this.dragIndicator.remove();
this._dragIndicator = null;
ZenWorkspaces.activeWorkspaceIndicator.removeAttribute('open');
}
get dragIndicator() {
if (!this._dragIndicator) {
this._dragIndicator = document.createElement('div');
this._dragIndicator.id = 'zen-drag-indicator';
document.body.appendChild(this._dragIndicator);
}
return this._dragIndicator;
}
get expandedSidebarMode() {
return document.documentElement.getAttribute('zen-sidebar-expanded') === 'true';
}
applyDragoverClass(event, draggedTab) {
const pinnedTabsTarget = event.target.closest('#vertical-pinned-tabs-container');
const essentialTabsTarget = event.target.closest('#zen-essentials-container');
const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
const targetTab = event.target.closest('.tabbrowser-tab');
if (event.target.closest('.zen-current-workspace-indicator')) {
this.removeTabContainersDragoverClass();
ZenWorkspaces.activeWorkspaceIndicator.setAttribute('open', true);
} else {
ZenWorkspaces.activeWorkspaceIndicator.removeAttribute('open');
}
// If there's no valid target tab, nothing to do
if (!targetTab) {
return;
}
let shouldAddDragOverElement = false;
let isVertical = this.expandedSidebarMode;
// Decide whether we should show a dragover class for the given target
if (pinnedTabsTarget) {
if (!draggedTab.pinned || draggedTab.hasAttribute('zen-essential')) {
shouldAddDragOverElement = true;
}
} else if (essentialTabsTarget) {
if (!draggedTab.hasAttribute('zen-essential')) {
shouldAddDragOverElement = true;
isVertical = false;
}
} else if (tabsTarget) {
if (draggedTab.pinned || draggedTab.hasAttribute('zen-essential')) {
shouldAddDragOverElement = true;
}
}
if (!shouldAddDragOverElement) {
this.removeTabContainersDragoverClass();
return;
}
// Calculate middle to decide 'before' or 'after'
const rect = targetTab.getBoundingClientRect();
if (isVertical) {
const separation = 8;
const middleY = targetTab.screenY + rect.height / 2;
const indicator = this.dragIndicator;
let top = 0;
if (event.screenY > middleY) {
top = rect.top + rect.height + 'px';
} else {
top = rect.top + 'px';
}
indicator.setAttribute('orientation', 'horizontal');
indicator.style.setProperty('--indicator-left', rect.left + separation / 2 + 'px');
indicator.style.setProperty('--indicator-width', rect.width - separation + 'px');
indicator.style.top = top;
indicator.style.removeProperty('left');
} else {
const separation = 8;
const middleX = targetTab.screenX + rect.width / 2;
const indicator = this.dragIndicator;
let left = 0;
if (event.screenX > middleX) {
left = rect.left + rect.width + 1 + 'px';
} else {
left = rect.left - 2 + 'px';
}
indicator.setAttribute('orientation', 'vertical');
indicator.style.setProperty('--indicator-top', rect.top + separation / 2 + 'px');
indicator.style.setProperty('--indicator-height', rect.height - separation + 'px');
indicator.style.left = left;
indicator.style.removeProperty('top');
}
}
}
window.gZenPinnedTabManager = new ZenPinnedTabManager();

1
src/browser/base/zen-components/ZenPinnedTabsStorage.mjs
View File

@@ -46,7 +46,6 @@ var ZenPinnedTabsStorage = {
CREATE INDEX IF NOT EXISTS idx_zen_pins_changes_uuid ON zen_pins_changes(uuid)
`);
await SessionStore.promiseInitialized;
this._resolveInitialized();
});
},

5
src/browser/base/zen-components/ZenTabUnloader.mjs
View File

@@ -173,7 +173,7 @@
}
handleTabClose(tab) {
// Nothing yet
tab.lastActivity = null;
}
handleTabOpen(tab) {
@@ -226,7 +226,7 @@
unloadTab() {
const tabs = TabContextMenu.contextTab.multiselected ? gBrowser.selectedTabs : [TabContextMenu.contextTab];
for (let i = 0; i < tabs.length; i++) {
if (this.canUnloadTab(tabs[i], Date.now(), [], true)) {
if (this.canUnloadTab(tabs[i], Date.now(), this.intervalUnloader.excludedUrls, true)) {
this.unload(tabs[i]);
}
}
@@ -258,6 +258,7 @@
!tab.linkedPanel ||
tab.splitView ||
tab.attention ||
tab.hasAttribute('glance-id') ||
tab.linkedBrowser?.zenModeActive ||
(tab.pictureinpicture && !ignoreTimestamp) ||
(tab.soundPlaying && !ignoreTimestamp) ||

63
src/browser/base/zen-components/ZenUIMigration.mjs Normal file
View File

@@ -0,0 +1,63 @@
const lazy = {};
ChromeUtils.defineESModuleGetters(lazy, {
BrowserWindowTracker: 'resource:///modules/BrowserWindowTracker.sys.mjs',
});
class ZenUIMigration {
PREF_NAME = 'zen.migration.version';
MIGRATION_VERSION = 1;
init(isNewProfile, win) {
if (!isNewProfile) {
this._migrate(win);
}
this.clearVariables();
}
get _migrationVersion() {
return Services.prefs.getIntPref(this.PREF_NAME, 0);
}
set _migrationVersion(value) {
Services.prefs.setIntPref(this.PREF_NAME, value);
}
_migrate(win) {
if (this._migrationVersion < 1) {
this._migrateV1(win);
}
}
clearVariables() {
this._migrationVersion = this.MIGRATION_VERSION;
}
async _migrateV1(win) {
// Introduction of the new URL bar, show a message to the user
const notification = win.gNotificationBox.appendNotification(
'zen-new-urlbar-notification',
{
label: { 'l10n-id': 'zen-new-urlbar-notification' },
image: 'chrome://browser/skin/notification-icons/persistent-storage-blocked.svg',
priority: win.gNotificationBox.PRIORITY_WARNING_HIGH,
},
[
{
'l10n-id': 'zen-disable',
accessKey: 'D',
callback: () => {
Services.prefs.setBoolPref('zen.urlbar.replace-newtab', false);
},
},
{
link: 'https://docs.zen-browser.app/user-manual/urlbar/',
'l10n-id': 'zen-learn-more-text',
},
]
);
notification.persistence = -1;
}
}
export var gZenUIMigration = new ZenUIMigration();

5
src/browser/base/zen-components/ZenViewSplitter.mjs
View File

@@ -192,14 +192,13 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
afterRearangeAction() {
document.getElementById('zenSplitViewModifier').hidePopup();
ConfirmationHint.show(document.getElementById('zen-split-views-box'), 'zen-split-view-modifier-enabled-toast', {
gZenUIManager.showToast('zen-split-view-modifier-enabled-toast', {
descriptionId: 'zen-split-view-modifier-enabled-toast-description',
showDescription: true,
});
}
afterRearangeRemove() {
ConfirmationHint.show(document.getElementById('zen-split-views-box'), 'zen-split-view-modifier-disabled-toast');
gZenUIManager.showToast('zen-split-view-modifier-disabled-toast');
}
toggleWrapperDisplay(value) {

645
src/browser/base/zen-components/ZenWorkspaces.mjs
View File

@@ -8,7 +8,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
_swipeState = {
isGestureActive: true,
cumulativeDelta: 0,
lastDelta: 0,
direction: null,
};
_lastScrollTime = 0;
@@ -28,13 +28,22 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
this._resolvePinnedInitialized = resolve;
});
promiseSectionsInitialized = new Promise((resolve) => {
this._resolveSectionsInitialized = resolve;
});
workspaceIndicatorXUL = `
<hbox class="zen-current-workspace-indicator-icon"></hbox>
<hbox class="zen-current-workspace-indicator-name"></hbox>
`;
async waitForPromises() {
await Promise.all([this.promiseDBInitialized, this.promisePinnedInitialized, SessionStore.promiseAllWindowsRestored]);
await Promise.all([this.promiseDBInitialized, this.promisePinnedInitialized]);
}
async init() {
if (!this.shouldHaveWorkspaces) {
document.getElementById('zen-current-workspace-indicator').setAttribute('hidden', 'true');
document.getElementById('zen-current-workspace-indicator-container').setAttribute('hidden', 'true');
console.warn('ZenWorkspaces: !!! ZenWorkspaces is disabled in hidden windows !!!');
return; // We are in a hidden window, don't initialize ZenWorkspaces
}
@@ -70,17 +79,25 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
);
ChromeUtils.defineLazyGetter(this, 'tabContainer', () => document.getElementById('tabbrowser-tabs'));
this._activeWorkspace = Services.prefs.getStringPref('zen.workspaces.active', '');
this._delayedStartup();
await SessionStore.promiseInitialized;
if (!this._hasInitializedTabsStrip) {
await this.delayedStartup();
}
await this.promiseSectionsInitialized;
window.addEventListener(
'MozAfterPaint',
async () => {
await SessionStore.promiseAllWindowsRestored;
await this.afterLoadInit();
},
{ once: true }
);
}
async _delayedStartup() {
if (!this.workspaceEnabled) {
return;
}
await this.waitForPromises();
await this.initializeWorkspaces();
async afterLoadInit() {
console.info('ZenWorkspaces: ZenWorkspaces initialized');
await this.initializeWorkspaces();
if (Services.prefs.getBoolPref('zen.workspaces.swipe-actions', false) && this.workspaceEnabled) {
this.initializeGestureHandlers();
this.initializeWorkspaceNavigation();
@@ -97,6 +114,137 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
);
}
async delayedStartup() {
if (!this.workspaceEnabled) {
return;
}
this._pinnedTabsResizeObserver = new ResizeObserver(this.onPinnedTabsResize.bind(this));
await this.waitForPromises();
await this.initializeTabsStripSections();
this._resolveSectionsInitialized();
}
registerPinnedResizeObserver() {
if (!this._hasInitializedTabsStrip) {
return;
}
this._pinnedTabsResizeObserver.disconnect();
for (let element of document.getElementById('vertical-pinned-tabs-container').children) {
if (element.classList.contains('tabbrowser-tab')) {
continue;
}
this._pinnedTabsResizeObserver.observe(element);
}
}
get activeWorkspaceStrip() {
if (!this._hasInitializedTabsStrip) {
return gBrowser.tabContainer.arrowScrollbox;
}
const activeWorkspace = this.activeWorkspace;
return document.querySelector(
`#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[zen-workspace-id="${activeWorkspace}"]`
);
}
get activeWorkspaceIndicator() {
return document.querySelector(
`#zen-current-workspace-indicator-container .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]`
);
}
get tabboxChildren() {
return this.activeWorkspaceStrip.children;
}
get pinnedTabsContainer() {
if (!this.workspaceEnabled || !this._hasInitializedTabsStrip) {
return document.getElementById('vertical-pinned-tabs-container');
}
return document.querySelector(
`#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]`
);
}
async initializeTabsStripSections() {
const perifery = document.getElementById('tabbrowser-arrowscrollbox-periphery');
const tabs = gBrowser.tabContainer.allTabs;
const workspaces = await this._workspaces();
for (const workspace of workspaces.workspaces) {
this._createWorkspaceTabsSection(workspace, tabs, perifery);
}
if (tabs.length) {
const defaultSelectedContainer = document.querySelector(
`#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]`
);
// New profile with no workspaces does not have a default selected container
if (defaultSelectedContainer) {
const pinnedContainer = document.querySelector(
`#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]`
);
for (const tab of tabs) {
if (tab.pinned) {
pinnedContainer.insertBefore(tab, pinnedContainer.lastChild);
continue;
}
// before to the last child (perifery)
defaultSelectedContainer.insertBefore(tab, defaultSelectedContainer.lastChild);
}
}
}
perifery.setAttribute('hidden', 'true');
this._hasInitializedTabsStrip = true;
this.registerPinnedResizeObserver();
this._fixIndicatorsNames(workspaces);
}
_createWorkspaceSection(workspace) {
const section = document.createXULElement('vbox');
section.className = 'zen-workspace-tabs-section';
section.setAttribute('flex', '1');
section.setAttribute('zen-workspace-id', workspace.uuid);
return section;
}
async _createWorkspaceTabsSection(workspace, tabs, perifery) {
const container = gBrowser.tabContainer.arrowScrollbox;
const section = this._createWorkspaceSection(workspace);
container.appendChild(section);
const pinnedContainer = document.getElementById('vertical-pinned-tabs-container');
const pinnedSection = this._createWorkspaceSection(workspace);
this._organizeTabsToWorkspaceSections(workspace, section, pinnedSection, tabs);
section.appendChild(perifery.cloneNode(true));
pinnedSection.appendChild(
window.MozXULElement.parseXULToFragment(`
<html:div class="vertical-pinned-tabs-container-separator"></html:div>
`)
);
pinnedContainer.appendChild(pinnedSection);
const workspaceIndicator = this._createWorkspaceSection(workspace);
workspaceIndicator.classList.add('zen-current-workspace-indicator');
workspaceIndicator.appendChild(window.MozXULElement.parseXULToFragment(this.workspaceIndicatorXUL));
document.getElementById('zen-current-workspace-indicator-container').appendChild(workspaceIndicator);
this.initIndicatorContextMenu(workspaceIndicator);
}
_organizeTabsToWorkspaceSections(workspace, section, pinnedSection, tabs) {
const workspaceTabs = Array.from(tabs).filter((tab) => tab.getAttribute('zen-workspace-id') === workspace.uuid);
for (const tab of workspaceTabs) {
if (tab.hasAttribute('zen-essential')) {
continue; // Ignore essentials as they need to be in their own section
}
// remove tab from list
tabs.splice(tabs.indexOf(tab), 1);
if (tab.pinned) {
pinnedSection.appendChild(tab);
} else {
section.appendChild(tab);
}
}
}
initializeWorkspaceNavigation() {
this._setupAppCommandHandlers();
this._setupSidebarHandlers();
@@ -207,7 +355,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
element.addEventListener('MozSwipeGestureMayStart', this._handleSwipeMayStart.bind(this), true);
element.addEventListener('MozSwipeGestureStart', this._handleSwipeStart.bind(this), true);
element.addEventListener('MozSwipeGestureUpdate', this._handleSwipeUpdate.bind(this), true);
element.addEventListener('MozSwipeGestureEnd', this._handleSwipeEnd.bind(this), true);
// Use MozSwipeGesture instead of MozSwipeGestureEnd because MozSwipeGestureEnd is fired after animation ends,
// while MozSwipeGesture is fired immediately after swipe ends.
element.addEventListener('MozSwipeGesture', this._handleSwipeEnd.bind(this), true);
}
_handleSwipeMayStart(event) {
@@ -231,7 +382,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
this._swipeState = {
isGestureActive: true,
cumulativeDelta: 0,
lastDelta: 0,
direction: null,
};
}
@@ -242,13 +393,19 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
event.preventDefault();
event.stopPropagation();
// Update cumulative delta
this._swipeState.cumulativeDelta += event.delta;
const delta = event.delta * 300;
this._swipeState.lastDelta = delta;
// Determine swipe direction based on cumulative delta
if (Math.abs(this._swipeState.cumulativeDelta) > 0.25) {
this._swipeState.direction = this._swipeState.cumulativeDelta > 0 ? 'left' : 'right';
if (Math.abs(delta) > 1) {
this._swipeState.direction = delta > 0 ? 'left' : 'right';
}
// Apply a translateX to the tab strip to give the user feedback on the swipe
const stripWidth = document.getElementById('tabbrowser-tabs').scrollWidth;
const translateX = Math.max(-stripWidth, Math.min(delta, stripWidth));
const currentWorkspace = this.activeWorkspace;
this._organizeWorkspaceStripLocations({ uuid: currentWorkspace }, true, translateX);
}
async _handleSwipeEnd(event) {
@@ -261,13 +418,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
let rawDirection = moveForward ? 1 : -1;
if (this._swipeState.direction) {
let direction = this.naturalScroll ? -1 : 1;
this.changeWorkspaceShortcut(rawDirection * direction);
this.changeWorkspaceShortcut(rawDirection * direction, true);
} else {
this._cancelSwipeAnimation();
}
// Reset swipe state
this._swipeState = {
isGestureActive: false,
cumulativeDelta: 0,
lastDelta: 0,
direction: null,
};
}
@@ -384,35 +543,28 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
this._initializeWorkspaceTabContextMenus();
await this.workspaceBookmarks();
window.addEventListener('TabBrowserInserted', this.onTabBrowserInserted.bind(this));
window.addEventListener('TabOpen', this.updateTabsContainers.bind(this));
let workspaces = await this._workspaces();
let activeWorkspace = null;
if (workspaces.workspaces.length === 0) {
activeWorkspace = await this.createAndSaveWorkspace('Default Workspace', true, '🏠');
} else {
activeWorkspace = await this.getActiveWorkspace();
if (!activeWorkspace) {
activeWorkspace = workspaces.workspaces.find((workspace) => workspace.default);
this.activeWorkspace = activeWorkspace?.uuid;
}
if (!activeWorkspace) {
activeWorkspace = workspaces.workspaces[0];
this.activeWorkspace = activeWorkspace?.uuid;
}
this.activeWorkspace = activeWorkspace?.uuid;
}
try {
if (activeWorkspace) {
window.gZenThemePicker = new ZenThemePicker();
await this.changeWorkspace(activeWorkspace, { onInit: true });
gBrowser.tabContainer._positionPinnedTabs();
}
} catch (e) {
console.error('ZenWorkspaces: Error initializing theme picker', e);
}
}
this.initIndicatorContextMenu();
}
initIndicatorContextMenu() {
const indicator = document.getElementById('zen-current-workspace-indicator');
initIndicatorContextMenu(indicator) {
const th = (event) => {
event.preventDefault();
event.stopPropagation();
@@ -624,7 +776,11 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
async getActiveWorkspace() {
const workspaces = await this._workspaces();
return workspaces.workspaces.find((workspace) => workspace.uuid === this.activeWorkspace) ?? workspaces.workspaces[0];
return (
workspaces.workspaces.find((workspace) => workspace.uuid === this.activeWorkspace) ??
workspaces.workspaces.find((workspace) => workspace.default) ??
workspaces.workspaces[0]
);
}
// Workspaces dialog UI management
@@ -726,7 +882,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (!browser.ZenWorkspaces.workspaceEnabled) {
return;
}
await browser.ZenWorkspaces.updateWorkspaceIndicator();
let workspaceList = browser.document.getElementById('PanelUI-zen-workspaces-list');
const createWorkspaceElement = (workspace) => {
let element = browser.document.createXULElement('toolbarbutton');
@@ -1020,7 +1175,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (!this.workspaceEnabled) {
return;
}
let target = event.target.closest('#zen-current-workspace-indicator') || document.getElementById('zen-workspaces-button');
let target = event.target.closest('.zen-current-workspace-indicator') || document.getElementById('zen-workspaces-button');
let panel = document.getElementById('PanelUI-zen-workspaces');
await this._propagateWorkspaceData({
ignoreStrip: true,
@@ -1177,13 +1332,25 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
}
moveTabToWorkspace(tab, workspaceID) {
if (tab.getAttribute('zen-workspace-id') === workspaceID) {
return;
}
tab.setAttribute('zen-workspace-id', workspaceID);
const parent = tab.pinned ? '#zen-browser-tabs-pinned ' : '#zen-browser-tabs ';
const container = document.querySelector(parent + '.zen-workspace-tabs-section');
if (container) {
container.insertBefore(tab, container.firstChild);
}
}
_prepareNewWorkspace(window) {
document.documentElement.setAttribute('zen-workspace-id', window.uuid);
let tabCount = 0;
for (let tab of gBrowser.tabs) {
const isEssential = tab.getAttribute('zen-essential') === 'true';
if (!tab.hasAttribute('zen-workspace-id') && !tab.pinned && !isEssential) {
tab.setAttribute('zen-workspace-id', window.uuid);
this.moveTabToWorkspace(tab, window.uuid);
tabCount++;
}
}
@@ -1198,6 +1365,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (window.uuid) {
tab.setAttribute('zen-workspace-id', window.uuid);
}
return tab;
}
async saveWorkspaceFromCreate() {
@@ -1262,21 +1431,25 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (!this.workspaceEnabled || this._inChangingWorkspace) {
return;
}
await SessionStore.promiseInitialized;
this._inChangingWorkspace = true;
try {
await this._performWorkspaceChange(window, ...args);
} finally {
this._inChangingWorkspace = false;
this.tabContainer.removeAttribute('dont-animate-tabs');
}
}
async _performWorkspaceChange(window, { onInit = false, explicitAnimationDirection = undefined } = {}) {
const previousWorkspace = await this.getActiveWorkspace();
_cancelSwipeAnimation() {
const currentWorkspace = this.activeWorkspace;
this._animateTabs({ uuid: currentWorkspace }, true);
}
if (previousWorkspace && previousWorkspace.uuid === window.uuid && !onInit) {
async _performWorkspaceChange(window, { onInit = false, alwaysChange = false, whileScrolling = false } = {}) {
const previousWorkspace = await this.getActiveWorkspace();
alwaysChange = alwaysChange || onInit;
if (previousWorkspace && previousWorkspace.uuid === window.uuid && !alwaysChange) {
this._cancelSwipeAnimation();
return;
}
@@ -1285,107 +1458,130 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
const workspaces = await this._workspaces();
// Refresh tab cache
gBrowser.verticalPinnedTabsContainer = this.pinnedTabsContainer;
gBrowser.tabContainer.verticalPinnedTabsContainer = this.pinnedTabsContainer;
this.tabContainer._invalidateCachedTabs();
let animationDirection;
if (previousWorkspace && !onInit && !this._animatingChange) {
animationDirection =
explicitAnimationDirection ??
(workspaces.workspaces.findIndex((w) => w.uuid === previousWorkspace.uuid) <
workspaces.workspaces.findIndex((w) => w.uuid === window.uuid)
? 'right'
: 'left');
}
if (animationDirection) {
// Animate tabs out of view before changing workspace, therefor we
// need to animate in the opposite direction
await this._animateTabs(animationDirection === 'left' ? 'right' : 'left', true);
if (!whileScrolling) {
await this._organizeWorkspaceStripLocations(previousWorkspace);
}
// First pass: Handle tab visibility and workspace ID assignment
const visibleTabs = this._processTabVisibility(window.uuid, containerId, workspaces);
this._processTabVisibility(window.uuid, containerId, workspaces);
// Second pass: Handle tab selection
await this._handleTabSelection(window, onInit, visibleTabs, containerId, workspaces);
this.tabContainer._invalidateCachedTabs();
const tabToSelect = await this._handleTabSelection(window, onInit, containerId, workspaces, previousWorkspace.uuid);
// Update UI and state
await this._updateWorkspaceState(window, onInit);
await this._updateWorkspaceState(window, onInit, tabToSelect);
}
if (animationDirection) {
await this._animateTabs(animationDirection);
_updateMarginTopPinnedTabs(arrowscrollbox, pinnedContainer) {
if (arrowscrollbox) {
arrowscrollbox.style.marginTop = pinnedContainer.getBoundingClientRect().height + 'px';
}
}
async _animateTabs(direction, out = false) {
const selector = `#tabbrowser-tabs *:is(#zen-current-workspace-indicator, #vertical-pinned-tabs-container-separator, .tabbrowser-tab:not([zen-essential], [hidden]))`;
const extraSelector = `#tabbrowser-arrowscrollbox-periphery > toolbarbutton`;
this.tabContainer.removeAttribute('dont-animate-tabs');
// order by actual position in the children list to animate
const elements = Array.from([
...this.tabContainer.querySelectorAll(selector),
...this.tabContainer.querySelectorAll(extraSelector),
])
.sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING)
.reverse();
if (out) {
return gZenUIManager.motion.animate(
elements,
{
transform: `translateX(${direction === 'left' ? '-' : ''}100%)`,
opacity: 0,
},
{
type: 'spring',
bounce: 0,
duration: 0.12,
// delay: gZenUIManager.motion.stagger(0.01),
}
);
async _organizeWorkspaceStripLocations(workspace, justMove = false, offsetPixels = 0) {
const workspaces = await this._workspaces();
let workspaceIndex = workspaces.workspaces.findIndex((w) => w.uuid === workspace.uuid);
if (!justMove) {
this._fixIndicatorsNames(workspaces);
}
return gZenUIManager.motion.animate(
elements,
{
transform: [`translateX(${direction === 'left' ? '-' : ''}100%)`, 'translateX(0%)'],
opacity: 1,
},
{
duration: 0.15,
type: 'spring',
bounce: 0,
// delay: gZenUIManager.motion.stagger(0.02),
for (const otherWorkspace of workspaces.workspaces) {
const selector = `.zen-workspace-tabs-section[zen-workspace-id="${otherWorkspace.uuid}"]`;
const newTransform = -(workspaceIndex - workspaces.workspaces.indexOf(otherWorkspace)) * 100;
for (const container of document.querySelectorAll(selector)) {
container.style.transform = `translateX(${newTransform + offsetPixels / 2}%)`;
container.style.opacity = offsetPixels ? 1 : !newTransform;
if (!offsetPixels && !container.hasAttribute('active')) {
container.setAttribute('hidden', 'true');
} else {
container.removeAttribute('hidden');
}
}
);
}
}
updateWorkspaceIndicator(currentWorkspace, workspaceIndicator) {
if (!workspaceIndicator) {
return;
}
const indicatorName = workspaceIndicator.querySelector('.zen-current-workspace-indicator-name');
const indicatorIcon = workspaceIndicator.querySelector('.zen-current-workspace-indicator-icon');
if (this.workspaceHasIcon(currentWorkspace)) {
indicatorIcon.removeAttribute('no-icon');
} else {
indicatorIcon.setAttribute('no-icon', 'true');
}
indicatorIcon.textContent = this.getWorkspaceIcon(currentWorkspace);
indicatorName.textContent = currentWorkspace.name;
}
_fixIndicatorsNames(workspaces) {
for (const workspace of workspaces.workspaces) {
const workspaceIndicator = document.querySelector(
`#zen-current-workspace-indicator-container .zen-workspace-tabs-section[zen-workspace-id="${workspace.uuid}"]`
);
this.updateWorkspaceIndicator(workspace, workspaceIndicator);
}
}
async _animateTabs(newWorkspace, shouldAnimate, tabToSelect = null) {
this._animatingChange = true;
const animations = [];
const workspaces = await this._workspaces();
const newWorkspaceIndex = workspaces.workspaces.findIndex((w) => w.uuid === newWorkspace.uuid);
for (const element of document.querySelectorAll('.zen-workspace-tabs-section')) {
const existingTransform = element.style.transform;
const elementWorkspaceId = element.getAttribute('zen-workspace-id');
const elementWorkspaceIndex = workspaces.workspaces.findIndex((w) => w.uuid === elementWorkspaceId);
const offset = -(newWorkspaceIndex - elementWorkspaceIndex) * 100;
const newTransform = `translateX(${offset}%)`;
const isCurrent = offset === 0;
if (shouldAnimate) {
element.removeAttribute('hidden');
if (isCurrent) {
element.style.opacity = 1;
}
animations.push(
gZenUIManager.motion.animate(
element,
{
transform: existingTransform ? [existingTransform, newTransform] : newTransform,
// -0 to convert to number
opacity: !isCurrent ? [!!offset - 0, !offset - 0] : [1, 1],
},
{
type: 'spring',
bounce: 0,
duration: 0.3,
}
)
);
}
if (offset === 0) {
element.setAttribute('active', 'true');
if (tabToSelect != gBrowser.selectedTab) {
gBrowser.selectedTab = tabToSelect;
}
} else {
element.removeAttribute('active');
}
}
await Promise.all(animations);
this._animatingChange = false;
}
_processTabVisibility(workspaceUuid, containerId, workspaces) {
const visibleTabs = new Set();
const lastSelectedTab = this._lastSelectedWorkspaceTabs[workspaceUuid];
this.tabContainer.setAttribute('dont-animate-tabs', 'true');
for (const tab of gBrowser.tabs) {
const tabWorkspaceId = tab.getAttribute('zen-workspace-id');
const isEssential = tab.getAttribute('zen-essential') === 'true';
// Always hide last selected tabs from other workspaces
if (lastSelectedTab === tab && tabWorkspaceId !== workspaceUuid && !isEssential) {
gBrowser.hideTab(tab, undefined, true);
continue;
}
if (this._shouldShowTab(tab, workspaceUuid, containerId, workspaces)) {
gBrowser.showTab(tab);
visibleTabs.add(tab);
// Assign workspace ID if needed
if (!tabWorkspaceId && !isEssential) {
tab.setAttribute('zen-workspace-id', workspaceUuid);
}
} else {
if (!this._shouldShowTab(tab, workspaceUuid, containerId, workspaces)) {
gBrowser.hideTab(tab, undefined, true);
} else if (tab.hasAttribute('zen-essential')) {
gBrowser.showTab(tab, undefined, true);
}
}
return visibleTabs;
}
_shouldShowTab(tab, workspaceUuid, containerId, workspaces) {
@@ -1416,7 +1612,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
// For non-essential tabs (both normal and pinned)
if (!tabWorkspaceId) {
// Assign workspace ID to tabs without one
tab.setAttribute('zen-workspace-id', workspaceUuid);
this.moveTabToWorkspace(tab, workspaceUuid);
return true;
}
@@ -1424,9 +1620,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
return tabWorkspaceId === workspaceUuid;
}
async _handleTabSelection(window, onInit, visibleTabs, containerId, workspaces) {
async _handleTabSelection(window, onInit, containerId, workspaces, previousWorkspaceId) {
const currentSelectedTab = gBrowser.selectedTab;
const oldWorkspaceId = currentSelectedTab.getAttribute('zen-workspace-id');
const oldWorkspaceId = previousWorkspaceId;
const lastSelectedTab = this._lastSelectedWorkspaceTabs[window.uuid];
// Save current tab as last selected for old workspace if it shouldn't be visible in new workspace
@@ -1435,53 +1631,54 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
let tabToSelect = null;
// If current tab is visible in new workspace, keep it
if (this._shouldShowTab(currentSelectedTab, window.uuid, containerId, workspaces) && visibleTabs.has(currentSelectedTab)) {
tabToSelect = currentSelectedTab;
}
// Try last selected tab if it is visible
else if (
lastSelectedTab &&
this._shouldShowTab(lastSelectedTab, window.uuid, containerId, workspaces) &&
visibleTabs.has(lastSelectedTab)
) {
if (lastSelectedTab && this._shouldShowTab(lastSelectedTab, window.uuid, containerId, workspaces)) {
tabToSelect = lastSelectedTab;
}
// Find first suitable tab
else {
tabToSelect = Array.from(visibleTabs).find((tab) => !tab.pinned);
tabToSelect = gBrowser.visibleTabs.find((tab) => !tab.pinned);
if (!tabToSelect && gBrowser.visibleTabs.length) {
tabToSelect = gBrowser.visibleTabs[gBrowser.visibleTabs.length - 1];
}
}
const previousSelectedTab = gBrowser.selectedTab;
// If we found a tab to select, select it
if (tabToSelect) {
gBrowser.selectedTab = tabToSelect;
this._lastSelectedWorkspaceTabs[window.uuid] = tabToSelect;
} else if (!onInit) {
if (!onInit && !tabToSelect) {
// Create new tab if needed and no suitable tab was found
const newTab = this._createNewTabForWorkspace(window);
gBrowser.selectedTab = newTab;
this._lastSelectedWorkspaceTabs[window.uuid] = newTab;
tabToSelect = newTab;
}
if (tabToSelect) {
tabToSelect._visuallySelected = true;
}
// After selecting the new tab, hide the previous selected tab if it shouldn't be visible in the new workspace
if (!this._shouldShowTab(previousSelectedTab, window.uuid, containerId, workspaces)) {
gBrowser.hideTab(previousSelectedTab, undefined, true);
// Always make sure we always unselect the tab from the old workspace
if (currentSelectedTab && currentSelectedTab !== tabToSelect) {
currentSelectedTab._selected = false;
}
return tabToSelect;
}
async _updateWorkspaceState(window, onInit) {
async _updateWorkspaceState(window, onInit, tabToSelect) {
// Update document state
document.documentElement.setAttribute('zen-workspace-id', window.uuid);
// Recalculate new tab observers
gBrowser.tabContainer.observe(null, 'nsPref:changed', 'privacy.userContext.enabled');
// Update workspace UI
await this._updateWorkspacesChangeContextMenu();
document.getElementById('tabbrowser-tabs')._positionPinnedTabs();
gZenUIManager.updateTabsToolbar();
await this._propagateWorkspaceData({ clearCache: false });
gZenThemePicker.onWorkspaceChange(window);
document.getElementById('zen-tabs-wrapper').style.scrollbarWidth = 'none';
await this._animateTabs(window, !onInit && !this._animatingChange, tabToSelect);
await this._organizeWorkspaceStripLocations(window, true);
document.getElementById('zen-tabs-wrapper').style.scrollbarWidth = '';
// Notify listeners
if (this._changeListeners?.length) {
for (const listener of this._changeListeners) {
@@ -1493,7 +1690,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
this._invalidateBookmarkContainers();
// Update workspace indicator
await this.updateWorkspaceIndicator();
await this.updateWorkspaceIndicator(window, this.workspaceIndicator);
}
_invalidateBookmarkContainers() {
@@ -1506,22 +1703,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
}
async updateWorkspaceIndicator() {
// Update current workspace indicator
const currentWorkspace = await this.getActiveWorkspace();
if (!currentWorkspace) return;
const indicatorName = document.getElementById('zen-current-workspace-indicator-name');
const indicatorIcon = document.getElementById('zen-current-workspace-indicator-icon');
if (this.workspaceHasIcon(currentWorkspace)) {
indicatorIcon.removeAttribute('no-icon');
} else {
indicatorIcon.setAttribute('no-icon', 'true');
}
indicatorIcon.textContent = this.getWorkspaceIcon(currentWorkspace);
indicatorName.textContent = currentWorkspace.name;
}
async _updateWorkspacesChangeContextMenu() {
const workspaces = await this._workspaces();
@@ -1546,7 +1727,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
}
_createWorkspaceData(name, isDefault, icon) {
_createWorkspaceData(name, isDefault, icon, tabs) {
let window = {
uuid: gZenUIManager.generateUuidv4(),
default: isDefault,
@@ -1555,6 +1736,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
theme: ZenThemePicker.getTheme([]),
};
this._prepareNewWorkspace(window);
const perifery = document.querySelector('#tabbrowser-arrowscrollbox-periphery[hidden]');
perifery?.removeAttribute('hidden');
this._createWorkspaceTabsSection(window, tabs, perifery);
perifery.setAttribute('hidden', 'true');
return window;
}
@@ -1562,12 +1747,49 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (!this.workspaceEnabled) {
return;
}
let workspaceData = this._createWorkspaceData(name, isDefault, icon);
// get extra tabs remaning (e.g. on new profiles) and just move them to the new workspace
const extraTabs = Array.from(gBrowser.tabContainer.arrowScrollbox.children).filter(
(child) => child.tagName === 'tab' && !child.hasAttribute('zen-workspace-id')
);
let workspaceData = this._createWorkspaceData(name, isDefault, icon, extraTabs);
await this.saveWorkspace(workspaceData);
this.registerPinnedResizeObserver();
let changed = extraTabs.length > 0;
if (changed) {
gBrowser.tabContainer._invalidateCachedTabs();
gBrowser.selectedTab = extraTabs[0];
}
await this.changeWorkspace(workspaceData);
return workspaceData;
}
updateTabsContainers() {
this.onPinnedTabsResize([{ target: this.pinnedTabsContainer }]);
}
updateShouldHideSeparator(arrowScrollbox, pinnedContainer) {
const shouldHideSeparator = pinnedContainer.children.length === 1 || arrowScrollbox.children.length === 1;
if (shouldHideSeparator) {
pinnedContainer.setAttribute('hide-separator', 'true');
} else {
pinnedContainer.removeAttribute('hide-separator');
}
}
onPinnedTabsResize(entries) {
if (!this._hasInitializedTabsStrip) {
return;
}
for (const entry of entries) {
const workspaceId = entry.target.getAttribute('zen-workspace-id');
const arrowScrollbox = document.querySelector(
`#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[zen-workspace-id="${workspaceId}"]`
);
this._updateMarginTopPinnedTabs(arrowScrollbox, entry.target);
this.updateShouldHideSeparator(arrowScrollbox, entry.target);
}
}
async onTabBrowserInserted(event) {
let tab = event.originalTarget;
const isEssential = tab.getAttribute('zen-essential') === 'true';
@@ -1603,12 +1825,48 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
// Switch workspace if needed
if (workspaceID && workspaceID !== activeWorkspace.uuid) {
if (workspaceID && workspaceID !== activeWorkspace.uuid && parent.ZenWorkspaces._hasInitializedTabsStrip) {
await parent.ZenWorkspaces.changeWorkspace({ uuid: workspaceID });
}
}
}
makeSurePinTabIsInCorrectPosition() {
if (!this.pinnedTabsContainer) {
return 0; // until we initialize the pinned tabs container
}
const tabsInsidePinTab = Array.from(this.pinnedTabsContainer.parentElement.children).filter(
(child) => child.tagName === 'tab'
);
let changed = false;
for (const tab of tabsInsidePinTab) {
if (tab.getAttribute('zen-glance-tab') === 'true') {
continue;
}
if (tab.getAttribute('zen-essential') === 'true') {
const container = document.getElementById('zen-essentials-container');
container.appendChild(tab);
changed = true;
continue;
}
const workspaceId = tab.getAttribute('zen-workspace-id');
if (!workspaceId) {
continue;
}
const contaienr = document.querySelector(
`#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${workspaceId}"]`
);
contaienr.insertBefore(tab, contaienr.firstChild);
changed = true;
}
if (changed) {
gBrowser.tabContainer._invalidateCachedTabs();
}
// Return the number of essentials INSIDE the pinned tabs container so we can correctly change their parent
return Array.from(this.pinnedTabsContainer.children).filter((child) => child.getAttribute('zen-essential') === 'true')
.length;
}
// Context menu management
_contextMenuId = null;
@@ -1705,7 +1963,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
this._emojis = null;
}
async changeWorkspaceShortcut(offset = 1) {
async changeWorkspaceShortcut(offset = 1, whileScrolling = false) {
// Cycle through workspaces
let workspaces = await this._workspaces();
let activeWorkspace = await this.getActiveWorkspace();
@@ -1722,7 +1980,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
let nextWorkspace = workspaces.workspaces[targetIndex];
await this.changeWorkspace(nextWorkspace, { explicitAnimationDirection: offset > 0 ? 'right' : 'left' });
await this.changeWorkspace(nextWorkspace, { whileScrolling });
}
_initializeWorkspaceTabContextMenus() {
@@ -1744,7 +2002,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
document.getElementById('tabContextMenu').hidePopup();
const previousWorkspaceID = document.documentElement.getAttribute('zen-workspace-id');
for (let tab of tabs) {
tab.setAttribute('zen-workspace-id', workspaceID);
this.moveTabToWorkspace(tab, workspaceID);
if (this._lastSelectedWorkspaceTabs[previousWorkspaceID] === tab) {
// This tab is no longer the last selected tab in the previous workspace because it's being moved to
// the current workspace
@@ -1782,7 +2040,13 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (matchingWorkspaces.length === 1) {
const workspace = matchingWorkspaces[0];
if (workspace.uuid !== this.getActiveWorkspaceFromCache().uuid) {
this.changeWorkspace(workspace);
window.addEventListener(
'TabSelected',
(event) => {
this.changeWorkspace(workspace, { alwaysChange: true });
},
{ once: true }
);
return [userContextId, true, workspace.uuid];
}
}
@@ -1831,4 +2095,43 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
// Return true only if the bookmark is in another workspace and not in the active one
return isInOtherWorkspace && !isInActiveWorkspace;
}
// Session restore functions
get allStoredTabs() {
if (!this._hasInitializedTabsStrip) {
const children = Array.from(this.tabboxChildren);
children.pop(); // Remove the last child which is the new tab button
return children;
}
const tabs = [];
// we need to go through each tab in each container
const essentialsContainer = document.getElementById('zen-essentials-container');
const pinnedContainers = document.querySelectorAll('#vertical-pinned-tabs-container .zen-workspace-tabs-section');
const normalContainers = document.querySelectorAll('#tabbrowser-arrowscrollbox .zen-workspace-tabs-section');
const containers = [essentialsContainer, ...pinnedContainers, ...normalContainers];
for (const container of containers) {
for (const tab of container.children) {
if (tab.tagName === 'tab' || tab.tagName == 'tab-group') {
tabs.push(tab);
}
}
}
return tabs;
}
get pinnedTabCount() {
return this.pinnedTabsContainer.children.length - 1;
}
get normalTabCount() {
return this.tabboxChildren.length - 1;
}
get allWorkspaceTabs() {
const currentWorkspace = this.activeWorkspace;
return this.allStoredTabs.filter(
(tab) => tab.hasAttribute('zen-essential') || tab.getAttribute('zen-workspace-id') === currentWorkspace
);
}
})();

2
src/browser/base/zen-components/actors/ZenGlanceChild.sys.mjs
View File

@@ -96,7 +96,7 @@ export class ZenGlanceChild extends JSWindowActorChild {
}
handleClick(event) {
if (this.ensureOnlyKeyModifiers(event)) {
if (this.ensureOnlyKeyModifiers(event) || event.button !== 0 || event.defaultPrevented) {
return;
}
const activationMethod = this._activationMethod;

4
src/browser/base/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs
View File

@@ -122,10 +122,10 @@ export class ZenThemeMarketplaceParent extends JSWindowActorParent {
}
getStyleSheetFullContent(style = '') {
let stylesheet = '@-moz-document url-prefix("chrome:") {';
let stylesheet = '@-moz-document url-prefix("chrome:") {\n';
for (const line of style.split('\n')) {
stylesheet += ` ${line}`;
stylesheet += ` ${line}\n`;
}
stylesheet += '}';

22
src/browser/components/BrowserGlue-sys-mjs.patch
View File

@@ -1,8 +1,24 @@
diff --git a/browser/components/BrowserGlue.sys.mjs b/browser/components/BrowserGlue.sys.mjs
index 2de73e75bf98b21dde9ec05213a66f9e9039200f..04ab3ea4c47d674778e8965654867c4cf0f99161 100644
index b888a753a7f23a9800fe04da51a4e6b898314ff2..35eea774e1ea4b1807ec65ebc767f423d81602bd 100644
--- a/browser/components/BrowserGlue.sys.mjs
+++ b/browser/components/BrowserGlue.sys.mjs
@@ -4643,6 +4643,7 @@ BrowserGlue.prototype = {
@@ -121,6 +121,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
WindowsGPOParser: "resource://gre/modules/policies/WindowsGPOParser.sys.mjs",
clearTimeout: "resource://gre/modules/Timer.sys.mjs",
setTimeout: "resource://gre/modules/Timer.sys.mjs",
+ gZenUIMigration: "chrome://browser/content/zen-components/ZenUIMigration.mjs",
});
if (AppConstants.MOZ_UPDATER) {
@@ -1951,6 +1952,7 @@ BrowserGlue.prototype = {
lazy.UrlbarPrefs.updateFirefoxSuggestScenario();
+ lazy.gZenUIMigration.init(this._isNewProfile, aWindow);
// A channel for "remote troubleshooting" code...
let channel = new lazy.WebChannel(
"remote-troubleshooting",
@@ -4761,6 +4763,7 @@ BrowserGlue.prototype = {
},
async _maybeShowDefaultBrowserPrompt() {
@@ -10,7 +26,7 @@ index 2de73e75bf98b21dde9ec05213a66f9e9039200f..04ab3ea4c47d674778e8965654867c4c
// Highest priority is about:welcome window modal experiment
// Second highest priority is the upgrade dialog, which can include a "primary
// browser" request and is limited in various ways, e.g., major upgrades.
@@ -5169,6 +5170,16 @@ BrowserGlue.prototype = {
@@ -5302,6 +5305,16 @@ BrowserGlue.prototype = {
"nsIObserver",
"nsISupportsWeakReference",
]),

36
src/browser/components/customizableui/CustomizableUI-sys-mjs.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs
index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..410aabf3a58d8d8df68098cbfb45729be3bead4a 100644
index e6b9b7dcfab179e7552c146eb1551b45ad042266..d9d838a7a51f67b52b69f419024cc3174ae5260b 100644
--- a/browser/components/customizableui/CustomizableUI.sys.mjs
+++ b/browser/components/customizableui/CustomizableUI.sys.mjs
@@ -13,6 +13,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
@@ -19,8 +19,8 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..410aabf3a58d8d8df68098cbfb45729b
const kSpecialWidgetPfx = "customizableui-special-";
@@ -307,13 +308,11 @@ var CustomizableUIInternal = {
"spring",
@@ -317,13 +318,11 @@ var CustomizableUIInternal = {
"vertical-spacer",
"urlbar-container",
"spring",
- "save-to-pocket-button",
@@ -35,7 +35,7 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..410aabf3a58d8d8df68098cbfb45729b
this.registerArea(
CustomizableUI.AREA_NAVBAR,
{
@@ -321,7 +320,6 @@ var CustomizableUIInternal = {
@@ -331,7 +330,6 @@ var CustomizableUIInternal = {
overflowable: true,
defaultPlacements: navbarPlacements,
verticalTabsDefaultPlacements: [
@@ -43,7 +43,7 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..410aabf3a58d8d8df68098cbfb45729b
"alltabs-button",
],
defaultCollapsed: false,
@@ -346,10 +344,7 @@ var CustomizableUIInternal = {
@@ -356,10 +354,7 @@ var CustomizableUIInternal = {
{
type: CustomizableUI.TYPE_TOOLBAR,
defaultPlacements: [
@@ -54,7 +54,7 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..410aabf3a58d8d8df68098cbfb45729b
],
verticalTabsDefaultPlacements: [],
defaultCollapsed: null,
@@ -412,6 +407,7 @@ var CustomizableUIInternal = {
@@ -422,6 +417,7 @@ var CustomizableUIInternal = {
CustomizableUI.AREA_NAVBAR,
CustomizableUI.AREA_BOOKMARKS,
CustomizableUI.AREA_TABSTRIP,
@@ -62,7 +62,7 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..410aabf3a58d8d8df68098cbfb45729b
]);
if (AppConstants.platform != "macosx") {
toolbars.add(CustomizableUI.AREA_MENUBAR);
@@ -1127,6 +1123,9 @@ var CustomizableUIInternal = {
@@ -1151,6 +1147,9 @@ var CustomizableUIInternal = {
placements = gPlacements.get(area);
}
@@ -72,7 +72,7 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..410aabf3a58d8d8df68098cbfb45729b
// For toolbars that need it, mark as dirty.
let defaultPlacements = areaProperties.get("defaultPlacements");
if (
@@ -1540,7 +1539,7 @@ var CustomizableUIInternal = {
@@ -1564,7 +1563,7 @@ var CustomizableUIInternal = {
lazy.log.info(
"Widget " + aWidgetId + " not found, unable to remove from " + aArea
);
@@ -81,7 +81,7 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..410aabf3a58d8d8df68098cbfb45729b
}
this.notifyDOMChange(widgetNode, null, container, true, () => {
@@ -1550,7 +1549,7 @@ var CustomizableUIInternal = {
@@ -1574,7 +1573,7 @@ var CustomizableUIInternal = {
// We also need to remove the panel context menu if it's there:
this.ensureButtonContextMenu(widgetNode);
if (gPalette.has(aWidgetId) || this.isSpecialWidget(aWidgetId)) {
@@ -90,7 +90,7 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..410aabf3a58d8d8df68098cbfb45729b
} else {
window.gNavToolbox.palette.appendChild(widgetNode);
}
@@ -2654,7 +2653,6 @@ var CustomizableUIInternal = {
@@ -2678,7 +2677,6 @@ var CustomizableUIInternal = {
if (!this.isWidgetRemovable(aWidgetId)) {
return;
}
@@ -98,7 +98,7 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..410aabf3a58d8d8df68098cbfb45729b
let placements = gPlacements.get(oldPlacement.area);
let position = placements.indexOf(aWidgetId);
if (position != -1) {
@@ -3609,7 +3607,7 @@ var CustomizableUIInternal = {
@@ -3669,7 +3667,7 @@ var CustomizableUIInternal = {
}
},
@@ -107,7 +107,7 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..410aabf3a58d8d8df68098cbfb45729b
for (let [areaId, areaNodes] of gBuildAreas) {
let placements = gPlacements.get(areaId);
let isFirstChangedToolbar = true;
@@ -3620,7 +3618,7 @@ var CustomizableUIInternal = {
@@ -3680,7 +3678,7 @@ var CustomizableUIInternal = {
if (area.get("type") == CustomizableUI.TYPE_TOOLBAR) {
let defaultCollapsed = area.get("defaultCollapsed");
let win = areaNode.ownerGlobal;
@@ -116,7 +116,7 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..410aabf3a58d8d8df68098cbfb45729b
win.setToolbarVisibility(
areaNode,
typeof defaultCollapsed == "string"
@@ -4583,6 +4581,7 @@ export var CustomizableUI = {
@@ -4658,6 +4656,7 @@ export var CustomizableUI = {
unregisterArea(aName, aDestroyPlacements) {
CustomizableUIInternal.unregisterArea(aName, aDestroyPlacements);
},
@@ -124,7 +124,7 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..410aabf3a58d8d8df68098cbfb45729b
/**
* Add a widget to an area.
* If the area to which you try to add is not known to CustomizableUI,
@@ -6408,11 +6407,11 @@ class OverflowableToolbar {
@@ -6483,11 +6482,11 @@ class OverflowableToolbar {
parseFloat(style.paddingLeft) -
parseFloat(style.paddingRight) -
toolbarChildrenWidth;
@@ -138,17 +138,17 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..410aabf3a58d8d8df68098cbfb45729b
});
lazy.log.debug(
@@ -6422,7 +6421,8 @@ class OverflowableToolbar {
@@ -6497,7 +6496,8 @@ class OverflowableToolbar {
// If the target has min-width: 0, their children might actually overflow
// it, so check for both cases explicitly.
let targetContentWidth = Math.max(targetWidth, targetChildrenWidth);
- let isOverflowing = Math.floor(targetContentWidth) > totalAvailWidth;
+ if (win.gZenVerticalTabsManager._hasSetSingleToolbar && this.#toolbar == 'nav-bar') return { isOverflowing: false, targetContentWidth, totalAvailWidth };
+ if (win.gZenVerticalTabsManager._hasSetSingleToolbar && this.#toolbar.id == 'nav-bar') return { isOverflowing: false, targetContentWidth, totalAvailWidth };
+ let isOverflowing = Math.floor(targetContentWidth) + (win.gZenVerticalTabsManager._hasSetSingleToolbar ? 0.1 : 0) > totalAvailWidth;
return { isOverflowing, targetContentWidth, totalAvailWidth };
}
@@ -6516,7 +6516,7 @@ class OverflowableToolbar {
@@ -6591,7 +6591,7 @@ class OverflowableToolbar {
}
}
if (!inserted) {
@@ -157,7 +157,7 @@ index b953d7d2c8fa7fe2d320bd7cb7af9aeeef0abc86..410aabf3a58d8d8df68098cbfb45729b
}
child.removeAttribute("cui-anchorid");
child.removeAttribute("overflowedItem");
@@ -6678,6 +6678,9 @@ class OverflowableToolbar {
@@ -6753,6 +6753,9 @@ class OverflowableToolbar {
* @param {MouseEvent} aEvent the click event.
*/
#onClickDefaultListButton(aEvent) {

72
src/browser/components/places/content/editBookmarkPanel-inc-xhtml.patch
View File

@@ -1,58 +1,50 @@
diff --git a/browser/components/places/content/editBookmarkPanel.inc.xhtml b/browser/components/places/content/editBookmarkPanel.inc.xhtml
index 3ec3f094831c2143a818b43d1761a571f0ffa63d..98704f399089f2a33776c6ae9565b8ff9b8ddd34 100644
index 40366677b60123c66bf0739d1b2374b423d3061c..3e722dce6b21ab62535369f20afe5f0acd43838f 100644
--- a/browser/components/places/content/editBookmarkPanel.inc.xhtml
+++ b/browser/components/places/content/editBookmarkPanel.inc.xhtml
@@ -5,7 +5,7 @@
<div id="editBookmarkPanelContent">
<label id="editBMPanel_itemsCountText"
class="editBMPanel_selectionCount"/>
@@ -12,14 +12,15 @@
<html:input id="editBMPanel_namePicker"
class="editBMPanel_nameRow hideable"
type="text"/>
-
+<hbox flex="1" class="zenEditBMPanel_fieldContainer">
<label data-l10n-id="bookmark-overlay-name-2"
class="editBMPanel_nameRow hideable"
control="editBMPanel_namePicker"/>
@@ -13,7 +13,7 @@
class="editBMPanel_nameRow hideable"
type="text"
onchange="gEditItemOverlay.onNamePickerChange().catch(Cu.reportError);"/>
-
+</hbox>
<label data-l10n-id="bookmark-overlay-url"
class="editBMPanel_locationRow hideable"
control="editBMPanel_locationField"/>
@@ -21,7 +21,7 @@
<html:input id="editBMPanel_locationField"
class="editBMPanel_locationRow uri-element hideable"
type="text"
onchange="gEditItemOverlay.onLocationFieldChange();"/>
type="text"/>
-
+</hbox>
+<hbox flex="1" class="zenEditBMPanel_fieldContainer">
<label data-l10n-id="bookmark-overlay-location-2"
class="editBMPanel_folderRow hideable"
control="editBMPanel_folderMenuList"/>
@@ -51,6 +51,26 @@
data-l10n-id="bookmark-overlay-folders-expander2"
oncommand="gEditItemOverlay.toggleFolderTreeVisibility();"/>
@@ -47,7 +48,26 @@
class="expander-down panel-button"
data-l10n-id="bookmark-overlay-folders-expander2"/>
</hbox>
+</hbox>
+ <hbox flex="1" class="zenEditBMPanel_fieldContainer">
+ <label data-l10n-id="zen-bookmark-edit-panel-workspace-selector"
+ class="hideable"
+ control="editBMPanel_workspacesSelectorExpander"/>
+ <div id="editBMPanel_workspaceDropdown"
+ class="editBMPanel_workspaceRow hideable workspace-dropdown">
+ <div
+ id="editBMPanel_workspaceSummary"
+ class="workspace-trigger">-</div>
+ <button id="editBMPanel_workspacesSelectorExpander"
+ class="expander-down panel-button"
+ data-l10n-id="bookmark-overlay-tags-expander2"
+ oncommand="gEditItemOverlay.onWorkspaceDropdownToggle();"/>
+
+ </div>
-
+ </hbox>
+
+ <ul id="editBMPanel_workspaceList" class="workspace-list hideable" hidden="true">
+ </ul>
+ <hbox flex="1" class="zenEditBMPanel_fieldContainer">
+ <label data-l10n-id="zen-bookmark-edit-panel-workspace-selector"
+ class="hideable"
+ control="editBMPanel_workspacesSelectorExpander"/>
+ <div id="editBMPanel_workspaceDropdown"
+ class="editBMPanel_workspaceRow hideable workspace-dropdown">
+ <div
+ id="editBMPanel_workspaceSummary"
+ class="workspace-trigger">-</div>
+ <button id="editBMPanel_workspacesSelectorExpander"
+ class="expander-down panel-button"
+ data-l10n-id="bookmark-overlay-tags-expander2"
+ oncommand="gEditItemOverlay.onWorkspaceDropdownToggle();"/>
+
+ </div>
+ </hbox>
+
+ <ul id="editBMPanel_workspaceList" class="workspace-list hideable" hidden="true">
+ </ul>
<vbox id="editBMPanel_folderTreeRow"
class="hideable"
hidden="true">

52
src/browser/components/preferences/zen-settings.js
View File

@@ -495,19 +495,14 @@ var gZenLooksAndFeel = {
this._initializeColorPicker(this._getInitialAccentColor());
window.zenPageAccentColorChanged = this._handleAccentColorChange.bind(this);
gZenMarketplaceManager.init();
var onPreferColorSchemeChange = this.onPreferColorSchemeChange.bind(this);
window.matchMedia('(prefers-color-scheme: dark)').addListener(onPreferColorSchemeChange);
for (const pref of [kZenExtendedSidebar, kZenSingleToolbar]) {
Services.prefs.addObserver(pref, this);
}
this.onPreferColorSchemeChange();
window.addEventListener('unload', () => {
window.matchMedia('(prefers-color-scheme: dark)').removeListener(onPreferColorSchemeChange);
for (const pref of [kZenExtendedSidebar, kZenSingleToolbar]) {
Services.prefs.removeObserver(pref, this);
}
});
this.setDarkThemeListener();
this.setCompactModeStyle();
this.applySidebarLayout();
@@ -550,51 +545,6 @@ var gZenLooksAndFeel = {
}
},
onPreferColorSchemeChange(event) {
const darkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
let elem = document.getElementById('ZenDarkThemeStyles');
if (darkTheme) {
elem.removeAttribute('hidden');
} else {
elem.setAttribute('hidden', 'true');
}
},
setDarkThemeListener() {
const chooser = document.getElementById('zen-dark-theme-styles-form');
const radios = [...chooser.querySelectorAll('input')];
for (let radio of radios) {
if (radio.value === 'amoled' && Services.prefs.getBoolPref('zen.theme.color-prefs.amoled')) {
radio.checked = true;
} else if (radio.value === 'colorful' && Services.prefs.getBoolPref('zen.theme.color-prefs.colorful')) {
radio.checked = true;
} else if (
radio.value === 'default' &&
!Services.prefs.getBoolPref('zen.theme.color-prefs.amoled') &&
!Services.prefs.getBoolPref('zen.theme.color-prefs.colorful')
) {
radio.checked = true;
}
radio.addEventListener('change', (e) => {
let value = e.target.value;
switch (value) {
case 'amoled':
Services.prefs.setBoolPref('zen.theme.color-prefs.amoled', true);
Services.prefs.setBoolPref('zen.theme.color-prefs.colorful', false);
break;
case 'colorful':
Services.prefs.setBoolPref('zen.theme.color-prefs.amoled', false);
Services.prefs.setBoolPref('zen.theme.color-prefs.colorful', true);
break;
default:
Services.prefs.setBoolPref('zen.theme.color-prefs.amoled', false);
Services.prefs.setBoolPref('zen.theme.color-prefs.colorful', false);
break;
}
});
}
},
setCompactModeStyle() {
const chooser = document.getElementById('zen-compact-mode-styles-form');
const radios = [...chooser.querySelectorAll('input')];
@@ -719,6 +669,8 @@ var zenMissingKeyboardShortcutL10n = {
goHome: 'zen-key-go-home',
key_redo: 'zen-key-redo',
key_inspectorMac: 'zen-key-inspector-mac',
// Devtools
key_toggleToolbox: 'zen-devtools-toggle-shortcut',
key_browserToolbox: 'zen-devtools-toggle-browser-toolbox-shortcut',

141
src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
View File

@@ -68,147 +68,6 @@
<hbox id="zenLooksAndFeelGradientPickerParent"></hbox>
<html:div id="ZenDarkThemeStyles">
<html:h2 data-l10n-id="zen-dark-theme-styles-header"/>
<description class="description-deemphasized" data-l10n-id="zen-dark-theme-styles-description" />
<form xmlns="http://www.w3.org/1999/xhtml" autocomplete="off" id="zen-dark-theme-styles-form">
<label class="web-appearance-choice">
<div class="web-appearance-choice-image-container">
<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:transparent"/>
</g>
<g id="Outline">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
</g>
<g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
<path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
</g>
</g>
<g id="Top-Bar" serif:id="Top Bar">
<g transform="matrix(1.19149,0,0,1.19149,-7.8979,-3.64443)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,128.569,-3.64443)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
</g>
<g transform="matrix(1.29333,0,0,1,-30.3604,4.42935)">
<path d="M149.424,24.359C149.424,26.626 148,28.467 146.247,28.467L77.764,28.467C76.01,28.467 74.587,26.626 74.587,24.359C74.587,22.091 76.01,20.25 77.764,20.25L146.247,20.25C148,20.25 149.424,22.091 149.424,24.359Z" style="fill:var(--zen-colors-primary);"/>
</g>
</g>
<g id="Side-Bar" serif:id="Side Bar">
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,20.8338)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,44.7817)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,68.7295)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
</g>
</g>
</g>
</svg>
</div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="amoled" data-l10n-id="preferences-web-appearance-choice-input-auto"
/><span data-l10n-id="zen-dark-theme-styles-amoled" />
</div>
</label>
<label class="web-appearance-choice">
<div class="web-appearance-choice-image-container">
<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:color-mix(in srgb, var(--zen-colors-secondary) 17%, transparent 98%)"/>
</g>
<g id="Outline">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
</g>
<g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
<path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
</g>
</g>
<g id="Top-Bar" serif:id="Top Bar">
<g transform="matrix(1.19149,0,0,1.19149,-7.8979,-3.64443)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,128.569,-3.64443)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.29333,0,0,1,-30.3604,4.42935)">
<path d="M149.424,24.359C149.424,26.626 148,28.467 146.247,28.467L77.764,28.467C76.01,28.467 74.587,26.626 74.587,24.359C74.587,22.091 76.01,20.25 77.764,20.25L146.247,20.25C148,20.25 149.424,22.091 149.424,24.359Z" style="fill:var(--zen-primary-color);"/>
</g>
</g>
<g id="Side-Bar" serif:id="Side Bar">
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,20.8338)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,44.7817)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,68.7295)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
</g>
</g>
</svg>
</div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="default" data-l10n-id="preferences-web-appearance-choice-input-light"
/><span data-l10n-id="zen-dark-theme-styles-default" />
</div>
</label>
<label class="web-appearance-choice">
<div class="web-appearance-choice-image-container">
<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:var(--zen-colors-secondary);"/>
</g>
<g id="Outline">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:4px;"/>
</g>
<g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
<path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:4.78px;"/>
</g>
</g>
<g id="Top-Bar" serif:id="Top Bar">
<g transform="matrix(1.19149,0,0,1.19149,-7.8979,-3.64443)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,128.569,-3.64443)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.29333,0,0,1,-30.3604,4.42935)">
<path d="M149.424,24.359C149.424,26.626 148,28.467 146.247,28.467L77.764,28.467C76.01,28.467 74.587,26.626 74.587,24.359C74.587,22.091 76.01,20.25 77.764,20.25L146.247,20.25C148,20.25 149.424,22.091 149.424,24.359Z" style="fill:var(--zen-primary-color);"/>
</g>
</g>
<g id="Side-Bar" serif:id="Side Bar">
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,20.8338)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,44.7817)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,68.7295)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
</g>
</g>
</svg>
</div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="colorful" data-l10n-id="preferences-web-appearance-choice-input-dark"
/><span data-l10n-id="zen-dark-theme-styles-colorful" />
</div>
</label>
</form>
</html:div>
<html:div data-l10n-id="preferences-web-appearance-footer">
<html:a id="web-appearance-manage-themes-link" class="text-link" data-l10n-name="themes-link" href="about:addons" target="_blank" />
</html:div>

25
src/browser/components/sessionstore/SessionStore-sys-mjs.patch
View File

@@ -1,8 +1,20 @@
diff --git a/browser/components/sessionstore/SessionStore.sys.mjs b/browser/components/sessionstore/SessionStore.sys.mjs
index 8125c1afc07f3365a2ad030adaf6a560453d7fe6..2856c5f93bfc9d68b98e09b2f26e3d5266c1f46a 100644
index 908743177d9f95e2e6549c689e7a493ca8668701..2dd53f5fdbffb21dfdc8bf68a6771d4ac0acd8be 100644
--- a/browser/components/sessionstore/SessionStore.sys.mjs
+++ b/browser/components/sessionstore/SessionStore.sys.mjs
@@ -3679,6 +3679,7 @@ var SessionStoreInternal = {
@@ -2174,9 +2174,10 @@ var SessionStoreInternal = {
TelemetryStopwatch.finish(
"FX_SESSION_RESTORE_STARTUP_ONLOAD_INITIAL_WINDOW_MS"
);
-
+ aWindow.ZenWorkspaces.delayedStartup().then(() => {
// Let everyone know we're done.
this._deferredInitialized.resolve();
+ });
}
})
.catch(ex => {
@@ -3848,6 +3849,7 @@ var SessionStoreInternal = {
aWindow.gBrowser.selectedTab = newTab;
}
@@ -10,3 +22,12 @@ index 8125c1afc07f3365a2ad030adaf6a560453d7fe6..2856c5f93bfc9d68b98e09b2f26e3d52
// Restore the state into the new tab.
this.restoreTab(newTab, tabState, {
restoreImmediately: aRestoreImmediately,
@@ -5315,7 +5317,7 @@ var SessionStoreInternal = {
}
let tabbrowser = aWindow.gBrowser;
- let tabs = tabbrowser.tabs;
+ let tabs = aWindow.ZenWorkspaces.allStoredTabs;
/** @type {WindowStateData} */
let winData = this._windows[aWindow.__SSi];
let tabsData = (winData.tabs = []);

5
src/browser/components/sessionstore/TabState-sys-mjs.patch
View File

@@ -1,8 +1,8 @@
diff --git a/browser/components/sessionstore/TabState.sys.mjs b/browser/components/sessionstore/TabState.sys.mjs
index 8f7ed557e6aa61e7e16ed4a8d785ad5fe651b3d8..83bf443ca158c07e05075777da02b7f228d83dff 100644
index 8f7ed557e6aa61e7e16ed4a8d785ad5fe651b3d8..dc0fdf17952df397a684f8a1da2f71739d007350 100644
--- a/browser/components/sessionstore/TabState.sys.mjs
+++ b/browser/components/sessionstore/TabState.sys.mjs
@@ -84,6 +84,13 @@ class _TabState {
@@ -84,6 +84,14 @@ class _TabState {
tabData.groupId = tab.group.id;
}
@@ -12,6 +12,7 @@ index 8f7ed557e6aa61e7e16ed4a8d785ad5fe651b3d8..83bf443ca158c07e05075777da02b7f2
+ tabData.zenDefaultUserContextId = tab.getAttribute("zenDefaultUserContextId");
+ tabData.zenPinnedEntry = tab.getAttribute("zen-pinned-entry");
+ tabData.zenPinnedIcon = tab.getAttribute("zen-pinned-icon");
+ tabData.zenHasStaticLabel = tab.getAttribute("zen-has-static-label");
+
tabData.searchMode = tab.ownerGlobal.gURLBar.getSearchMode(browser, true);

30
src/browser/components/sidebar/browser-sidebar-js.patch
View File

@@ -1,8 +1,8 @@
diff --git a/browser/components/sidebar/browser-sidebar.js b/browser/components/sidebar/browser-sidebar.js
index 4a124003976684e014435854aef69ce29da541d2..61ce44751c36eea3e5ae2ddcc62e42c01459629b 100644
index 1937a01b9940c79782cc2ad002b09ea5938b89e0..a702e8c520fad651a98615215f94657b7e1c58eb 100644
--- a/browser/components/sidebar/browser-sidebar.js
+++ b/browser/components/sidebar/browser-sidebar.js
@@ -578,7 +578,7 @@ var SidebarController = {
@@ -671,7 +671,7 @@ var SidebarController = {
*/
setPosition() {
// First reset all ordinals to match DOM ordering.
@@ -11,26 +11,12 @@ index 4a124003976684e014435854aef69ce29da541d2..61ce44751c36eea3e5ae2ddcc62e42c0
[...browser.children].forEach((node, i) => {
node.style.order = i + 1;
});
@@ -592,9 +592,10 @@ var SidebarController = {
@@ -681,7 +681,7 @@ var SidebarController = {
// DOM ordering is: sidebar-main | launcher-splitter | sidebar-box | splitter | tabbrowser-tabbox |
// Want to display as: | tabbrowser-tabbox | splitter | sidebar-box | launcher-splitter | sidebar-main
// So we just swap box and tabbrowser-tabbox ordering and move sidebar-main to the end
- let tabbox = document.getElementById("tabbrowser-tabbox");
+ let tabbox = document.getElementById("tabbrowser-tabpanels");
let boxOrdinal = this._box.style.order;
this._box.style.order = tabbox.style.order;
- tabbox.style.order = boxOrdinal;
// the launcher should be on the right of the sidebar-box
- sidebarContainer.style.order = parseInt(this._box.style.order) + 1;
+ this._box.style.order = browser.children.length + 2;
+ this._splitter.style.order = browser.children.length + 1;
+ this._splitter.style.marginRight = 0;
// Indicate we've switched ordering to the box
this._box.toggleAttribute("positionend", true);
sidebarMain.toggleAttribute("positionend", true);
@@ -603,6 +604,9 @@ var SidebarController = {
this._box.toggleAttribute("positionend", false);
sidebarMain.toggleAttribute("positionend", false);
sidebarContainer.toggleAttribute("positionend", false);
+ this._box.style.order = 1;
+ this._splitter.style.order = 2;
+ this._splitter.style.removeProperty("margin-right");
this.toolbarButton &&
this.toolbarButton.toggleAttribute("positionend", false);
}

29
src/browser/components/tabbrowser/content/tab-js.patch
View File

@@ -1,16 +1,25 @@
diff --git a/browser/components/tabbrowser/content/tab.js b/browser/components/tabbrowser/content/tab.js
index 60061540d79843281f3ee2ce905824b224da6f46..c01f8a7f18921588ecdc635c281cf01041ef627b 100644
index d41c486c02a6f09dcff5741a59ad8b617294c481..abaccd1935fc117924c44dd22cae0b322fc6a0c4 100644
--- a/browser/components/tabbrowser/content/tab.js
+++ b/browser/components/tabbrowser/content/tab.js
@@ -39,6 +39,7 @@
@@ -37,6 +37,7 @@
</hbox>
</vbox>
<image class="tab-close-button close-icon" role="button" data-l10n-id="tabbrowser-close-tabs-button" data-l10n-args='{"tabCount": 1}' keyNav="false"/>
+ <image class="tab-reset-button reset-icon" role="button" data-l10n-id="tabbrowser-reset-tabs-button" data-l10n-args='{"tabCount": 1}' keyNav="false"/>
+ <image class="tab-reset-button reset-icon" role="button" data-l10n-id="tabbrowser-unload-tab-button" data-l10n-args='{"tabCount": 1}' keyNav="false"/>
</hbox>
</stack>
`;
@@ -447,6 +448,7 @@
@@ -168,7 +169,7 @@
}
set _visuallySelected(val) {
- if (val == this.hasAttribute("visuallyselected")) {
+ if (val == this.hasAttribute("visuallyselected") || (!val && this.linkedBrowser?.closest('.browserSidebarContainer').classList.contains('zen-glance-background'))) {
return;
}
@@ -451,6 +452,7 @@
this.style.MozUserFocus = "ignore";
} else if (
event.target.classList.contains("tab-close-button") ||
@@ -18,13 +27,21 @@ index 60061540d79843281f3ee2ce905824b224da6f46..c01f8a7f18921588ecdc635c281cf010
event.target.classList.contains("tab-icon-overlay")
) {
eventMaySelectTab = false;
@@ -549,6 +551,11 @@
@@ -544,6 +546,7 @@
if (this.multiselected) {
gBrowser.removeMultiSelectedTabs();
} else {
+ gZenPinnedTabManager._removePinnedAttributes(this, true);
gBrowser.removeTab(this, {
animate: true,
triggeringEvent: event,
@@ -553,6 +556,11 @@
// (see tabbrowser-tabs 'click' handler).
gBrowser.tabContainer._blockDblClick = true;
}
+
+ if (event.target.classList.contains("tab-reset-button")) {
+ gZenPinnedTabManager._resetTabToStoredState(this);
+ gZenPinnedTabManager._onCloseTabShortcut(event, this, 'unload-switch');
+ gBrowser.tabContainer._blockDblClick = true;
+ }
}

228
src/browser/components/tabbrowser/content/tabbrowser-js.patch
View File

@@ -1,18 +1,31 @@
diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54da793e76 100644
index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..8f2cd9ecd708e58a6b162740bb21dafeda43b085 100644
--- a/browser/components/tabbrowser/content/tabbrowser.js
+++ b/browser/components/tabbrowser/content/tabbrowser.js
@@ -409,11 +409,39 @@
return count;
@@ -406,11 +406,52 @@
return this.tabContainer.visibleTabs;
}
+ get _numVisiblePinTabs() {
+ let i = 0;
+ for (let tab of this.tabs) {
+ if (!tab.pinned) {
+ if (!tab.pinned && !tab.hasAttribute("zen-glance-tab")) {
+ break;
+ }
+ if (!tab.hidden) {
+ i += !tab.hasAttribute("zen-glance-tab");
+ }
+ }
+ return i;
+ }
+
+ get _numVisiblePinTabsWithoutGlance() {
+ let i = 0;
+ for (let tab of this.tabs) {
+ if (!tab.pinned) {
+ break;
+ }
+ if (!tab.hidden && !tab.hasAttribute("zen-glance-tab")) {
+ i++;
+ }
+ }
@@ -22,11 +35,11 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54
+ get _numZenEssentials() {
+ let i = 0;
+ for (let tab of this.tabs) {
+ if (!tab.hasAttribute("zen-essential")) {
+ if (!tab.hasAttribute("zen-essential") && !tab.hasAttribute("zen-glance-tab")) {
+ break;
+ }
+ if (!tab.hidden) {
+ i++;
+ i += !tab.hasAttribute("zen-glance-tab");
+ }
+ }
+ return i;
@@ -37,23 +50,32 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54
- if (!this.tabs[i].pinned) {
+ let i = 0;
+ for (let tab of this.tabs) {
+ if (!tab.pinned) {
+ if (!tab.pinned && !tab.hasAttribute("zen-glance-tab")) {
break;
}
+ i++;
+ i += !tab.hasAttribute("zen-glance-tab");
}
return i;
}
@@ -806,7 +834,7 @@
@@ -807,7 +848,7 @@
this.showTab(aTab);
if (this.tabContainer.verticalMode) {
this._handleTabMove(aTab, () =>
- this.verticalPinnedTabsContainer.appendChild(aTab)
+ aTab.hasAttribute("zen-essential") ? document.getElementById("zen-essentials-container").appendChild(aTab) : this.verticalPinnedTabsContainer.appendChild(aTab)
+ aTab.hasAttribute("zen-essential") ? document.getElementById("zen-essentials-container").appendChild(aTab) : this.verticalPinnedTabsContainer.insertBefore(aTab, this.verticalPinnedTabsContainer.lastChild)
);
} else {
this.moveTabTo(aTab, this.pinnedTabCount);
@@ -1052,6 +1080,8 @@
this.moveTabTo(aTab, this.pinnedTabCount, { forceStandaloneTab: true });
@@ -828,7 +869,7 @@
// the moving of a tab from the vertical pinned tabs container
// and back into arrowscrollbox.
aTab.removeAttribute("pinned");
- this.tabContainer.arrowScrollbox.prepend(aTab);
+ ZenWorkspaces.activeWorkspaceStrip.prepend(aTab);
});
} else {
this.moveTabTo(aTab, this.pinnedTabCount - 1, {
@@ -1055,6 +1096,8 @@
let LOCAL_PROTOCOLS = ["chrome:", "about:", "resource:", "data:"];
@@ -62,7 +84,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54
if (
aIconURL &&
!aLoadingPrincipal &&
@@ -1062,6 +1092,9 @@
@@ -1065,6 +1108,9 @@
);
return;
}
@@ -72,7 +94,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54
let browser = this.getBrowserForTab(aTab);
browser.mIconURL = aIconURL;
@@ -1291,6 +1324,7 @@
@@ -1310,6 +1356,7 @@
if (!this._previewMode) {
newTab.recordTimeFromUnloadToReload();
newTab.updateLastAccessed();
@@ -80,7 +102,26 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54
oldTab.updateLastAccessed();
// if this is the foreground window, update the last-seen timestamps.
if (this.ownerGlobal == BrowserWindowTracker.getTopWindow()) {
@@ -2374,7 +2408,7 @@
@@ -1462,6 +1509,9 @@
}
let activeEl = document.activeElement;
+ if (gURLBar._zenHandleUrlbarClose) {
+ gURLBar._zenHandleUrlbarClose(true);
+ }
// If focus is on the old tab, move it to the new tab.
if (activeEl == oldTab) {
newTab.focus();
@@ -1785,7 +1835,7 @@
}
_setTabLabel(aTab, aLabel, { beforeTabOpen, isContentTitle, isURL } = {}) {
- if (!aLabel || aLabel.includes("about:reader?")) {
+ if (!aLabel || aLabel.includes("about:reader?") || aTab.hasAttribute("zen-has-static-label")) {
return false;
}
@@ -2387,7 +2437,7 @@
let panel = this.getPanel(browser);
let uniqueId = this._generateUniquePanelID();
@@ -89,16 +130,18 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54
aTab.linkedPanel = uniqueId;
// Inject the <browser> into the DOM if necessary.
@@ -2434,7 +2468,7 @@
@@ -2446,8 +2496,8 @@
// If we transitioned from one browser to two browsers, we need to set
// hasSiblings=false on both the existing browser and the new browser.
if (this.tabs.length == 2) {
this.tabs[0].linkedBrowser.browsingContext.hasSiblings = true;
- this.tabs[0].linkedBrowser.browsingContext.hasSiblings = true;
- this.tabs[1].linkedBrowser.browsingContext.hasSiblings = true;
+ if (this.tabs[0].linkedBrowser.browsingContext) this.tabs[0].linkedBrowser.browsingContext.hasSiblings = true;
+ if (this.tabs[1].linkedBrowser.browsingContext) this.tabs[1].linkedBrowser.browsingContext.hasSiblings = true;
} else {
aTab.linkedBrowser.browsingContext.hasSiblings = this.tabs.length > 1;
}
@@ -2666,6 +2700,12 @@
@@ -2679,6 +2729,12 @@
);
}
@@ -111,7 +154,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54
if (!UserInteraction.running("browser.tabs.opening", window)) {
UserInteraction.start("browser.tabs.opening", "initting", window);
}
@@ -2735,6 +2775,12 @@
@@ -2742,6 +2798,12 @@
noInitialLabel,
skipBackgroundNotify,
});
@@ -124,25 +167,20 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54
if (insertTab) {
// insert the tab into the tab container in the correct position
this._insertTabAtIndex(t, {
@@ -2878,6 +2924,13 @@
@@ -2885,6 +2947,9 @@
}
}
+ requestAnimationFrame(() => {
+ t.setAttribute("zen-initial-fadein", "true");
+ setTimeout(() => {
+ t.removeAttribute("zen-initial-fadein");
+ }, 2000);
+ });
+
+ if (typeof window.gZenVerticalTabsManager !== "undefined") {
+ gZenVerticalTabsManager.animateTab(t);
+ }
// Additionally send pinned tab events
if (pinned) {
this._notifyPinnedStatus(t);
@@ -3389,6 +3442,23 @@
@@ -3403,6 +3468,21 @@
) {
tabWasReused = true;
tab = this.selectedTab;
+
+ if (tabData.zenWorkspace) {
+ tab.setAttribute("zen-workspace-id", tabData.zenWorkspace);
+ }
@@ -158,24 +196,22 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54
+ if (tabData.zenPinnedEntry) {
+ tab.setAttribute("zen-pinned-entry", tabData.zenPinnedEntry);
+ }
+
if (!tabData.pinned) {
this.unpinTab(tab);
} else {
@@ -3402,6 +3472,9 @@
@@ -3416,6 +3496,7 @@
restoreTabsLazily && !select && !tabData.pinned;
let url = "about:blank";
+
+ gZenPinnedTabManager.resetPinnedTabData(tabData);
+
if (tabData.entries?.length) {
let activeIndex = (tabData.index || tabData.entries.length) - 1;
// Ensure the index is in bounds.
@@ -3438,6 +3511,21 @@
@@ -3451,7 +3532,21 @@
skipLoad: true,
preferredRemoteType,
});
-
+ if (tabData.zenWorkspace) {
+ tab.setAttribute("zen-workspace-id", tabData.zenWorkspace);
+ }
@@ -194,26 +230,54 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54
if (select) {
tabToSelect = tab;
}
@@ -3491,7 +3579,6 @@
@@ -3464,8 +3559,8 @@
// inserted in the DOM. If the tab is not yet in the DOM,
// just insert it in the right place from the start.
if (!tab.parentNode) {
- tab._tPos = this.pinnedTabCount;
- this.tabContainer.insertBefore(tab, this.tabs[this.pinnedTabCount]);
+ tab._tPos = this._numVisiblePinTabs;
+ this.tabContainer.insertBefore(tab, this.tabs[this._numVisiblePinTabs]);
tab.toggleAttribute("pinned", true);
this.tabContainer._invalidateCachedTabs();
}
}
-
tab.initialize();
// Then ensure all the tab open/pinning information is sent.
@@ -3729,7 +3824,7 @@
// Ensure we have an index if one was not provided.
if (typeof index != "number") {
// Move the new tab after another tab if needed, to the end otherwise.
- index = Infinity;
+ index = Services.prefs.getBoolPref("zen.view.show-newtab-button-top") ? this.pinnedTabCount : Infinity;
if (
!bulkOrderedOpen &&
((openerTab &&
@@ -3780,7 +3875,7 @@
}
@@ -4070,6 +4157,10 @@
/** @type {MozTabbrowserTab|undefined} */
- let tabAfter = this.tabs.at(index);
+ let tabAfter = this.tabs.filter(tab => !tab.hasAttribute("zen-glance-tab")).at(index);
this.tabContainer._invalidateCachedTabs();
if (tabGroup) {
@@ -4095,6 +4190,9 @@
return;
}
+ for (let tab of selectedTabs) {
+ gZenPinnedTabManager._removePinnedAttributes(tab, true);
+ }
+
this.removeTabs(selectedTabs);
}
@@ -4389,6 +4480,13 @@
@@ -4427,6 +4525,7 @@
skipSessionStore,
} = {}
) {
+ gZenUIManager.saveScrollbarState();
if (UserInteraction.running("browser.tabs.opening", window)) {
UserInteraction.finish("browser.tabs.opening", window);
}
@@ -4443,6 +4542,12 @@
TelemetryStopwatch.start("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
}
@@ -223,22 +287,29 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54
+ this.selectedTab = newTab;
+ }
+ }
+
// Handle requests for synchronously removing an already
// asynchronously closing tab.
if (!animate && aTab.closing) {
@@ -4404,6 +4502,10 @@
@@ -4457,7 +4562,9 @@
// frame created for it (for example, by updating the visually selected
// state).
let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
+ if (aTab.hasAttribute("zen-glance-tab")) {
+ gZenGlanceManager.closeGlance();
-
+ if (gZenGlanceManager.manageTabClose(aTab)) {
+ return;
+ }
if (
!this._beginRemoveTab(aTab, {
closeWindowFastpath: true,
@@ -4556,14 +4658,14 @@
@@ -4471,7 +4578,6 @@
TelemetryStopwatch.cancel("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
return;
}
-
let lockTabSizing =
!this.tabContainer.verticalMode &&
!aTab.pinned &&
@@ -4610,14 +4716,14 @@
!!this.tabsInCollapsedTabGroups.length;
if (
aTab.visible &&
@@ -255,7 +326,16 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54
if (closeWindow) {
// We've already called beforeunload on all the relevant tabs if we get here,
@@ -5411,10 +5513,10 @@
@@ -4812,6 +4918,8 @@
this.tabs[i]._tPos = i;
}
+ ZenWorkspaces.updateTabsContainers();
+
if (!this._windowIsClosing) {
if (wasPinned) {
this.tabContainer._positionPinnedTabs();
@@ -5465,10 +5573,10 @@
SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
}
@@ -268,7 +348,47 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54
aTab.selected ||
aTab.closing ||
// Tabs that are sharing the screen, microphone or camera cannot be hidden.
@@ -7384,6 +7486,7 @@
@@ -5706,9 +5814,9 @@
// Don't allow mixing pinned and unpinned tabs.
if (aTab.pinned) {
- aIndex = Math.min(aIndex, this.pinnedTabCount - 1);
+ aIndex = Math.min(aIndex, (aTab.hasAttribute('zen-essential') ? this._numZenEssentials : this._numVisiblePinTabsWithoutGlance) - 1);
} else {
- aIndex = Math.max(aIndex, this.pinnedTabCount);
+ aIndex = Math.max(aIndex, this._numVisiblePinTabsWithoutGlance);
}
if (aTab._tPos == aIndex) {
return;
@@ -5717,7 +5825,7 @@
this._lastRelatedTabMap = new WeakMap();
this._handleTabMove(aTab, () => {
- let neighbor = this.tabs[aIndex];
+ let neighbor = this.tabs.filter(tab => !tab.hasAttribute("zen-glance-tab"))[aIndex];
if (forceStandaloneTab && neighbor.group) {
neighbor = neighbor.group;
}
@@ -5727,6 +5835,9 @@
this.tabContainer.insertBefore(aTab, neighbor);
}
});
+ if (aTab.hasAttribute("glance-id")) {
+ this.moveTabTo(aTab.querySelector("tab[glance-id]"), aIndex, options);
+ }
}
moveTabToGroup(aTab, aGroup) {
@@ -5802,7 +5913,7 @@
createLazyBrowser,
};
- let numPinned = this.pinnedTabCount;
+ let numPinned = this._numVisiblePinTabs;
if (aIndex < numPinned || (aTab.pinned && aIndex == numPinned)) {
params.pinned = true;
}
@@ -7443,6 +7554,7 @@
aWebProgress.isTopLevel
) {
this.mTab.setAttribute("busy", "true");
@@ -276,7 +396,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54
gBrowser._tabAttrModified(this.mTab, ["busy"]);
this.mTab._notselectedsinceload = !this.mTab.selected;
gBrowser.syncThrobberAnimations(this.mTab);
@@ -8344,7 +8447,7 @@ var TabContextMenu = {
@@ -8411,7 +8523,7 @@ var TabContextMenu = {
);
contextUnpinSelectedTabs.hidden =
!this.contextTab.pinned || !multiselectionContext;
@@ -285,7 +405,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54
// Move Tab items
let contextMoveTabOptions = document.getElementById(
"context_moveTabOptions"
@@ -8378,7 +8481,7 @@ var TabContextMenu = {
@@ -8444,7 +8556,7 @@ var TabContextMenu = {
let contextMoveTabToStart = document.getElementById("context_moveToStart");
let isFirstTab =
tabsToMove[0] == visibleTabs[0] ||
@@ -294,7 +414,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54
contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent;
document.getElementById("context_openTabInWindow").disabled =
@@ -8607,6 +8710,7 @@ var TabContextMenu = {
@@ -8677,6 +8789,7 @@ var TabContextMenu = {
if (this.contextTab.multiselected) {
gBrowser.removeMultiSelectedTabs();
} else {

249
src/browser/components/tabbrowser/content/tabs-js.patch
View File

@@ -1,8 +1,34 @@
diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
index f7c39fe804182e2bdf53045ba3b6a5ba17079fc3..c98043855e7528fc9458ffd736101f15183b717d 100644
index 8aeb244ffca9f48661805f5b7d860b5896055562..393458caa425e0a980223cd3800ea0ef33542c84 100644
--- a/browser/components/tabbrowser/content/tabs.js
+++ b/browser/components/tabbrowser/content/tabs.js
@@ -649,7 +649,7 @@
@@ -94,7 +94,7 @@
};
this.arrowScrollbox._canScrollToElement = element => {
if (isTab(element)) {
- return !element.pinned || !this.hasAttribute("positionpinnedtabs");
+ return !element.hasAttribute("zen-essential") || !this.hasAttribute("positionpinnedtabs");
}
return true;
};
@@ -362,7 +362,7 @@
// and we're not hitting the scroll buttons.
if (
event.button != 0 ||
- event.target != this.arrowScrollbox ||
+ event.target != document.getElementById("zen-tabs-wrapper") ||
event.composedTarget.localName == "toolbarbutton"
) {
return;
@@ -411,6 +411,7 @@
// Reset the "ignored click" flag
target._ignoredCloseButtonClicks = false;
}
+ gZenUIManager.saveScrollbarState();
}
/* Protects from close-tab-button errant doubleclick:
@@ -659,7 +660,7 @@
if (this.#isContainerVerticalPinnedExpanded(tab)) {
// In expanded vertical mode, the max number of pinned tabs per row is dynamic
// Set this before adjusting dragged tab's position
@@ -11,16 +37,43 @@ index f7c39fe804182e2bdf53045ba3b6a5ba17079fc3..c98043855e7528fc9458ffd736101f15
let tabsPerRow = 0;
let position = 0;
for (let pinnedTab of pinnedTabs) {
@@ -997,7 +997,7 @@
@@ -859,6 +860,9 @@
}
let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0);
+ if (draggedTab && effects === "move") {
+ gZenPinnedTabManager.applyDragoverClass(event, draggedTab);
+ }
if (
(effects == "move" || effects == "copy") &&
this == draggedTab.container &&
@@ -972,6 +976,14 @@
this._tabDropIndicator.hidden = true;
event.stopPropagation();
+ if (draggedTab && dropEffect == "move") {
+ let moved = gZenPinnedTabManager.moveToAnotherTabContainerIfNecessary(event, movingTabs);
+
+ if (moved) {
+ this._finishMoveTogetherSelectedTabs(draggedTab);
+ return;
+ }
+ }
if (draggedTab && dropEffect == "copy") {
// copy the dropped tab (wherever it's from)
let newIndex = this._getDropIndex(event);
@@ -1010,8 +1022,8 @@
}
} else {
let pinned = draggedTab.pinned;
- let numPinned = gBrowser.pinnedTabCount;
- let tabs = this.visibleTabs.slice(
+ let numPinned = gBrowser._numVisiblePinTabs;
let tabs = this.visibleTabs.slice(
+ let tabs = this.visibleTabs.filter(tab => !tab.hasAttribute("zen-glance-tab")).slice(
pinned ? 0 : numPinned,
pinned ? numPinned : undefined
@@ -1076,7 +1076,7 @@
);
@@ -1090,7 +1102,7 @@
let postTransitionCleanup = () => {
tab.removeAttribute("tabdrop-samewindow");
@@ -28,8 +81,8 @@ index f7c39fe804182e2bdf53045ba3b6a5ba17079fc3..c98043855e7528fc9458ffd736101f15
+ this._finishAnimateTabMove(true);
if (dropIndex !== false) {
gBrowser.moveTabTo(tab, dropIndex);
if (incrementDropIndex) {
@@ -1086,7 +1086,7 @@
if (!directionForward) {
@@ -1100,7 +1112,7 @@
gBrowser.syncThrobberAnimations(tab);
};
@@ -38,7 +91,7 @@ index f7c39fe804182e2bdf53045ba3b6a5ba17079fc3..c98043855e7528fc9458ffd736101f15
postTransitionCleanup();
} else {
let onTransitionEnd = transitionendEvent => {
@@ -1238,7 +1238,8 @@
@@ -1263,7 +1275,8 @@
if (
dt.mozUserCancelled ||
dt.dropEffect != "none" ||
@@ -48,16 +101,69 @@ index f7c39fe804182e2bdf53045ba3b6a5ba17079fc3..c98043855e7528fc9458ffd736101f15
) {
delete draggedTab._dragData;
return;
@@ -1487,7 +1488,7 @@
@@ -1478,7 +1491,7 @@
}
get newTabButton() {
- return this.querySelector("#tabs-newtab-button");
+ return ZenWorkspaces.activeWorkspaceStrip.querySelector("#tabs-newtab-button");
}
get verticalMode() {
@@ -1498,7 +1511,7 @@
if (this.#allTabs) {
return this.#allTabs;
}
- let children = Array.from(this.arrowScrollbox.children);
+ let children = Array.from(ZenWorkspaces.tabboxChildren);
// remove arrowScrollbox periphery element
children.pop();
@@ -1512,14 +1525,28 @@
}
this.#allTabs = [
- ...this.verticalPinnedTabsContainer.children,
+ ...document.getElementById("zen-essentials-container").children, ...this.verticalPinnedTabsContainer.children,
+ ...document.getElementById("zen-essentials-container").children, ...this.verticalPinnedTabsContainer.children,
...children,
];
+ const lastPinnedTabIdx = gBrowser.pinnedTabCount;
+ for (let i = 0; i < this.#allTabs.length; i++) {
+ // add glance tabs (tabs inside tabs) to the list
+ const glanceTab = this.#allTabs[i].querySelector("tab[zen-glance-tab]");
+ if (glanceTab) {
+ // insert right after the parent tab
+ this.#allTabs.splice(Math.min(i + 1, lastPinnedTabIdx), 0, glanceTab);
+ i++;
+ } else if (this.#allTabs[i].classList.contains("vertical-pinned-tabs-container-separator")) {
+ // remove the separator from the list
+ this.#allTabs.splice(i, 1);
+ i--;
+ }
+ }
return this.#allTabs;
@@ -1556,6 +1557,7 @@
}
get allGroups() {
- let children = Array.from(this.arrowScrollbox.children);
+ let children = Array.from(ZenWorkspaces.tabboxChildren);
return children.filter(node => node.tagName == "tab-group");
}
@@ -1574,10 +1601,8 @@
return this.#focusableItems;
}
- let verticalPinnedTabsContainer = document.getElementById(
- "vertical-pinned-tabs-container"
- );
- let children = Array.from(this.arrowScrollbox.children);
+ let verticalPinnedTabsContainer = this.verticalPinnedTabsContainer;
+ let children = Array.from(ZenWorkspaces.tabboxChildren);
let focusableItems = [];
for (let child of children) {
@@ -1593,6 +1618,7 @@
}
this.#focusableItems = [
@@ -65,7 +171,7 @@ index f7c39fe804182e2bdf53045ba3b6a5ba17079fc3..c98043855e7528fc9458ffd736101f15
...verticalPinnedTabsContainer.children,
...focusableItems,
];
@@ -1579,8 +1581,8 @@
@@ -1617,8 +1643,8 @@
#isContainerVerticalPinnedExpanded(tab) {
return (
this.verticalMode &&
@@ -76,7 +182,25 @@ index f7c39fe804182e2bdf53045ba3b6a5ba17079fc3..c98043855e7528fc9458ffd736101f15
);
}
@@ -1778,7 +1780,7 @@
@@ -1633,7 +1659,7 @@
if (node == null) {
// We have a container for non-tab elements at the end of the scrollbox.
- node = this.arrowScrollbox.lastChild;
+ node = ZenWorkspaces.activeWorkspaceStrip.lastChild;
}
node.before(tab);
@@ -1733,7 +1759,7 @@
// There are separate "new tab" buttons for horizontal tabs toolbar, vertical tabs and
// for when the tab strip is overflowed (which is shared by vertical and horizontal tabs);
// Attach the long click popup to all of them.
- const newTab = document.getElementById("new-tab-button");
+ const newTab = ZenWorkspaces.activeWorkspaceStrip.querySelector("#tabs-newtab-button");
const newTab2 = this.newTabButton;
const newTabVertical = document.getElementById(
"vertical-tabs-newtab-button"
@@ -1816,7 +1842,7 @@
let rect = ele => {
return window.windowUtils.getBoundsWithoutFlushing(ele);
};
@@ -85,7 +209,12 @@ index f7c39fe804182e2bdf53045ba3b6a5ba17079fc3..c98043855e7528fc9458ffd736101f15
if (tab && rect(tab).width <= this._tabClipWidth) {
this.setAttribute("closebuttons", "activetab");
} else {
@@ -1794,6 +1796,7 @@
@@ -1828,10 +1854,12 @@
_handleTabSelect(aInstant) {
let selectedTab = this.selectedItem;
+ if (!selectedTab) return;
if (this.overflowing) {
this.arrowScrollbox.ensureElementIsVisible(selectedTab, aInstant);
}
@@ -93,7 +222,16 @@ index f7c39fe804182e2bdf53045ba3b6a5ba17079fc3..c98043855e7528fc9458ffd736101f15
selectedTab._notselectedsinceload = false;
}
@@ -1841,7 +1844,7 @@
@@ -1843,7 +1871,7 @@
return;
}
- let tabs = this.visibleTabs;
+ let tabs = this.visibleTabs.filter(tab => !tab.hasAttribute("zen-glance-tab"));
if (!tabs.length) {
return;
}
@@ -1879,7 +1907,7 @@
if (isEndTab && !this._hasTabTempMaxWidth) {
return;
}
@@ -102,7 +240,7 @@ index f7c39fe804182e2bdf53045ba3b6a5ba17079fc3..c98043855e7528fc9458ffd736101f15
// Force tabs to stay the same width, unless we're closing the last tab,
// which case we need to let them expand just enough so that the overall
// tabbar width is the same.
@@ -1856,7 +1859,7 @@
@@ -1894,7 +1922,7 @@
let tabsToReset = [];
for (let i = numPinned; i < tabs.length; i++) {
let tab = tabs[i];
@@ -111,65 +249,93 @@ index f7c39fe804182e2bdf53045ba3b6a5ba17079fc3..c98043855e7528fc9458ffd736101f15
if (!isEndTab) {
// keep tabs the same width
tab.style.transition = "none";
@@ -1922,13 +1925,13 @@
let verticalTabsContainer = document.getElementById(
"vertical-pinned-tabs-container"
);
- let numPinned = gBrowser.pinnedTabCount;
+ let numPinned = gBrowser._numVisiblePinTabs;
@@ -1960,16 +1988,15 @@
// Move pinned tabs to another container when the tabstrip is toggled to vertical
// and when session restore code calls _positionPinnedTabs; update styling whenever
// the number of pinned tabs changes.
- let verticalTabsContainer = document.getElementById(
- "vertical-pinned-tabs-container"
- );
+ let verticalTabsContainer = this.verticalPinnedTabsContainer;
let numPinned = gBrowser.pinnedTabCount;
- if (gBrowser.pinnedTabCount !== verticalTabsContainer.children.length) {
+ if (gBrowser.pinnedTabCount !== (verticalTabsContainer.children.length + document.getElementById("zen-essentials-container").children.length)) {
let tabs = this.visibleTabs;
- let tabs = this.visibleTabs;
+ let count = ZenWorkspaces.makeSurePinTabIsInCorrectPosition();
+ if (gBrowser.pinnedTabCount !== (verticalTabsContainer.children.length - count - 1 + document.getElementById("zen-essentials-container").children.length)) {
+ let tabs = this.allTabs.filter(tab => !tab.hasAttribute("zen-glance-tab"));
for (let i = 0; i < numPinned; i++) {
tabs[i].style.marginInlineStart = "";
- verticalTabsContainer.appendChild(tabs[i]);
+ tabs[i].hasAttribute("zen-essential") ? document.getElementById("zen-essentials-container").appendChild(tabs[i]) : verticalTabsContainer.appendChild(tabs[i]);
+ tabs[i].hasAttribute("zen-essential") ? document.getElementById("zen-essentials-container").appendChild(tabs[i]) : verticalTabsContainer.insertBefore(tabs[i], verticalTabsContainer.lastChild);
}
}
@@ -1952,7 +1955,7 @@
@@ -1977,9 +2004,7 @@
}
_resetVerticalPinnedTabs() {
- let verticalTabsContainer = document.getElementById(
- "vertical-pinned-tabs-container"
- );
+ let verticalTabsContainer = this.verticalPinnedTabsContainer;
if (!verticalTabsContainer.children.length) {
return;
@@ -1992,8 +2017,8 @@
}
_positionPinnedTabs() {
let tabs = this.visibleTabs;
- let tabs = this.visibleTabs;
- let numPinned = gBrowser.pinnedTabCount;
+ let tabs = this.visibleTabs.filter(tab => !tab.hasAttribute("zen-glance-tab"));
+ let numPinned = gBrowser._numVisiblePinTabs;
let absPositionHorizontalTabs =
this.overflowing && tabs.length > numPinned && numPinned > 0;
@@ -2033,7 +2036,7 @@
@@ -2003,6 +2028,7 @@
if (this.verticalMode) {
this._updateVerticalPinnedTabs();
} else if (absPositionHorizontalTabs) {
+ return;
let layoutData = this._pinnedTabsLayoutCache;
let uiDensity = document.documentElement.getAttribute("uidensity");
if (!layoutData || layoutData.uiDensity != uiDensity) {
@@ -2074,7 +2100,7 @@
return;
}
- let tabs = this.visibleTabs.slice(0, gBrowser.pinnedTabCount);
+ let tabs = this.visibleTabs.slice(0, gBrowser._numVisiblePinTabs);
+ let tabs = this.visibleTabs.filter(tab => !tab.hasAttribute("zen-glance-tab")).slice(0, gBrowser._numVisiblePinTabs);
let directionX = screenX > dragData.animLastScreenX;
let directionY = screenY > dragData.animLastScreenY;
@@ -2221,9 +2224,9 @@
@@ -2257,9 +2283,9 @@
}
let pinned = draggedTab.pinned;
- let numPinned = gBrowser.pinnedTabCount;
+ let numPinned = gBrowser._numVisiblePinTabs;
let tabs = this.visibleTabs.slice(
- let tabs = this.visibleTabs.slice(
- pinned ? 0 : numPinned,
+ let numPinned = gBrowser._numVisiblePinTabs;
+ let tabs = this.visibleTabs.filter(tab => !tab.hasAttribute("zen-glance-tab")).slice(
+ pinned ? gBrowser._numZenEssentials : numPinned,
pinned ? numPinned : undefined
);
@@ -2456,8 +2459,8 @@
@@ -2502,8 +2528,9 @@
);
}
- _finishAnimateTabMove() {
- if (!this.hasAttribute("movingtab")) {
+ _finishAnimateTabMove(always = false) {
+ gZenPinnedTabManager.removeTabContainersDragoverClass();
+ if (!this.hasAttribute("movingtab") && !always) {
return;
}
@@ -2622,9 +2625,9 @@
@@ -2668,9 +2695,9 @@
function newIndex(aTab, index) {
// Don't allow mixing pinned and unpinned tabs.
if (aTab.pinned) {
@@ -181,7 +347,16 @@ index f7c39fe804182e2bdf53045ba3b6a5ba17079fc3..c98043855e7528fc9458ffd736101f15
}
}
@@ -2726,12 +2729,14 @@
@@ -2754,7 +2781,7 @@
}
_notifyBackgroundTab(aTab) {
- if (aTab.pinned || !aTab.visible || !this.overflowing) {
+ if (aTab.hasAttribute("zen-essential") || !aTab.visible || !this.overflowing) {
return;
}
@@ -2772,12 +2799,14 @@
selectedTab = {
left: selectedTab.left,
right: selectedTab.right,
@@ -197,7 +372,7 @@ index f7c39fe804182e2bdf53045ba3b6a5ba17079fc3..c98043855e7528fc9458ffd736101f15
selectedTab,
];
})
@@ -2748,8 +2753,11 @@
@@ -2794,8 +2823,11 @@
delete this._lastTabToScrollIntoView;
// Is the new tab already completely visible?
if (
@@ -211,7 +386,7 @@ index f7c39fe804182e2bdf53045ba3b6a5ba17079fc3..c98043855e7528fc9458ffd736101f15
) {
return;
}
@@ -2757,21 +2765,29 @@
@@ -2803,21 +2835,29 @@
if (this.arrowScrollbox.smoothScroll) {
// Can we make both the new tab and the selected tab completely visible?
if (

98
src/browser/components/urlbar/UrlbarInput-sys-mjs.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/components/urlbar/UrlbarInput.sys.mjs b/browser/components/urlbar/UrlbarInput.sys.mjs
index 3ab07e5864b3bb200608e7f619645f92ade129fe..31085d82271b0259cd69ec9691ea5f33fe29e19e 100644
index 50968dc04b527438acf30151f0c2e92f8b45097c..ff77a2407b8ca628bcad06a9822ba2dbf0d43a51 100644
--- a/browser/components/urlbar/UrlbarInput.sys.mjs
+++ b/browser/components/urlbar/UrlbarInput.sys.mjs
@@ -67,6 +67,13 @@ XPCOMUtils.defineLazyPreferenceGetter(
@@ -16,7 +16,56 @@ index 3ab07e5864b3bb200608e7f619645f92ade129fe..31085d82271b0259cd69ec9691ea5f33
const DEFAULT_FORM_HISTORY_NAME = "searchbar-history";
const SEARCH_BUTTON_CLASS = "urlbar-search-button";
@@ -2152,6 +2159,11 @@ export class UrlbarInput {
@@ -348,7 +355,11 @@ export class UrlbarInput {
// See _on_select(). HTMLInputElement.select() dispatches a "select"
// event but does not set the primary selection.
this._suppressPrimaryAdjustment = true;
+ this.document.getElementById("navigator-toolbox").setAttribute("supress-primary-adjustment", !this.document.getElementById("navigator-toolbox").hasAttribute("zen-has-hover"));
this.inputField.select();
+ this.document.ownerGlobal.setTimeout(() => {
+ this.document.getElementById("navigator-toolbox").removeAttribute("supress-primary-adjustment");
+ }, 100);
this._suppressPrimaryAdjustment = false;
}
@@ -424,6 +435,10 @@ export class UrlbarInput {
hideSearchTerms = false,
isSameDocument = false
) {
+ if (this.hasAttribute("zen-newtab")) {
+ return;
+ }
+
// We only need to update the searchModeUI on tab switch conditionally
// as we only persist searchMode with ScotchBonnet enabled.
if (
@@ -697,8 +712,11 @@ export class UrlbarInput {
return;
}
}
-
+ this.document.getElementById("navigator-toolbox").setAttribute("supress-primary-adjustment", !this.document.getElementById("navigator-toolbox").hasAttribute("zen-has-hover"));
this.handleNavigation({ event });
+ this.document.ownerGlobal.setTimeout(() => {
+ this.document.getElementById("navigator-toolbox").removeAttribute("supress-primary-adjustment");
+ }, 200);
}
/**
@@ -1087,7 +1105,11 @@ export class UrlbarInput {
}
if (!result.payload.providesSearchMode) {
- this.view.close({ elementPicked: true });
+ if (this._zenHandleUrlbarClose) {
+ this._zenHandleUrlbarClose(true);
+ } else {
+ this.view.close({ elementPicked: true });
+ }
}
this.controller.recordSelectedResult(event, result);
@@ -2144,6 +2166,11 @@ export class UrlbarInput {
this.setAttribute("breakout-extend", "true");
@@ -28,7 +77,37 @@ index 3ab07e5864b3bb200608e7f619645f92ade129fe..31085d82271b0259cd69ec9691ea5f33
// Enable the animation only after the first extend call to ensure it
// doesn't run when opening a new window.
if (!this.hasAttribute("breakout-extend-animate")) {
@@ -3875,6 +3887,11 @@ export class UrlbarInput {
@@ -2163,6 +2190,11 @@ export class UrlbarInput {
return;
}
+ if (this._zenHandleUrlbarClose) {
+ this._zenHandleUrlbarClose();
+ }
+ this.removeAttribute("zen-floating-urlbar");
+
this.removeAttribute("breakout-extend");
this.#updateTextboxPosition();
}
@@ -2946,7 +2978,7 @@ export class UrlbarInput {
*/
_trimValue(val) {
let trimmedValue = lazy.UrlbarPrefs.get("trimURLs")
- ? lazy.BrowserUIUtils.trimURL(val)
+ ? this._zenTrimURL(val)
: val;
// Only trim value if the directionality doesn't change to RTL and we're not
// showing a strikeout https protocol.
@@ -3305,7 +3337,7 @@ export class UrlbarInput {
} else {
where = lazy.BrowserUtils.whereToOpenLink(event, false, false);
}
- if (lazy.UrlbarPrefs.get("openintab")) {
+ if (lazy.UrlbarPrefs.get("openintab") || this.hasAttribute("zen-newtab")) {
if (where == "current") {
where = "tab";
} else if (where == "tab") {
@@ -3859,6 +3891,11 @@ export class UrlbarInput {
}
_on_click(event) {
@@ -40,7 +119,16 @@ index 3ab07e5864b3bb200608e7f619645f92ade129fe..31085d82271b0259cd69ec9691ea5f33
if (
event.target == this.inputField ||
event.target == this._inputContainer ||
@@ -3986,9 +4003,12 @@ export class UrlbarInput {
@@ -3930,7 +3967,7 @@ export class UrlbarInput {
}
}
- if (this.focusedViaMousedown) {
+ if (this.focusedViaMousedown || this.hasAttribute("zen-newtab")) {
this.view.autoOpen({ event });
} else {
if (this._untrimOnFocusAfterKeydown) {
@@ -3970,9 +4007,12 @@ export class UrlbarInput {
}
_on_mousedown(event) {
@@ -54,7 +142,7 @@ index 3ab07e5864b3bb200608e7f619645f92ade129fe..31085d82271b0259cd69ec9691ea5f33
if (
event.target != this.inputField &&
@@ -3998,8 +4018,8 @@ export class UrlbarInput {
@@ -3982,8 +4022,8 @@ export class UrlbarInput {
break;
}

7
src/browser/components/zen-welcome/welcome.css
View File

@@ -39,7 +39,7 @@ body {
#welcome .zen-branding-title,
#thanks .zen-branding-title {
text-align: center;
font-size: 9rem;
font-size: 7rem;
}
#buttons-footer {
@@ -62,11 +62,6 @@ body {
}
}
body:has(#welcome:not([hidden='true'])) {
background: var(--zen-branding-coral);
color: var(--zen-branding-paper);
}
body:has(:is(#welcome, #thanks):not([hidden='true'])) {
& #buttons-footer {
justify-content: center;

22
src/browser/themes/shared/browser-shared-css.patch Normal file
View File

@@ -0,0 +1,22 @@
diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css
index 7fcb1d906c3aaec3e6b099ae731267c2b9d0b96a..ea8e0f510b09faaed0955e9974a2d9f285a52649 100644
--- a/browser/themes/shared/browser-shared.css
+++ b/browser/themes/shared/browser-shared.css
@@ -78,7 +78,7 @@ body {
--toolbarbutton-border-radius: 4px;
--identity-box-margin-inline: 4px;
--urlbar-min-height: max(32px, 1.4em);
- --urlbar-icon-padding: calc((var(--urlbar-min-height) - 2px /* border */ - 2px /* padding */ - 16px /* icon */) / 2);
+ --urlbar-icon-padding: calc((var(--urlbar-min-height) - 2px /* border */ - 14px /* icon */) / 2);
/* This should be used for icons and chiclets inside the input field. It makes
the gap around them more uniform when they are close to the field edges */
@@ -148,8 +148,6 @@ body {
*/
&.fullscreen-with-menubar {
z-index: var(--browser-area-z-index-toolbox-while-animating);
- box-shadow: var(--content-area-shadow);
- border-bottom-color: var(--chrome-content-separator-color);
}
/* Themes define a set of toolbox foreground and background colors which we

8
src/browser/themes/shared/customizableui/panelUI-shared-css.patch
View File

@@ -1,8 +1,8 @@
diff --git a/browser/themes/shared/customizableui/panelUI-shared.css b/browser/themes/shared/customizableui/panelUI-shared.css
index e4409ac75f6ee794d400559b0b01ae30904d01bc..4c10051d6bbc77440195b08397743c03a11d1fb0 100644
index bdbfd3521b4921f7d6d44623181019a8263b5825..d4c4bab98197b2e5948a34daa1e435b74880a700 100644
--- a/browser/themes/shared/customizableui/panelUI-shared.css
+++ b/browser/themes/shared/customizableui/panelUI-shared.css
@@ -16,7 +16,7 @@
@@ -18,7 +18,7 @@
--menu-panel-width-wide: 29em;
--arrowpanel-menuitem-margin-block: 0;
@@ -11,7 +11,7 @@ index e4409ac75f6ee794d400559b0b01ae30904d01bc..4c10051d6bbc77440195b08397743c03
--arrowpanel-menuitem-margin: var(--arrowpanel-menuitem-margin-block) var(--arrowpanel-menuitem-margin-inline);
--arrowpanel-menuitem-padding-block: 8px;
--arrowpanel-menuitem-padding-inline: 8px;
@@ -720,15 +720,15 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
@@ -819,15 +819,15 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
/* Firefox Account Toolbar Panel */
#fxa-avatar-image {
@@ -29,4 +29,4 @@ index e4409ac75f6ee794d400559b0b01ae30904d01bc..4c10051d6bbc77440195b08397743c03
+ --avatar-image-url: var(--zen-avatar-image-url);
}
&:not([fxatoolbarmenu]) #fxa-toolbar-menu-button {
/**

19
src/browser/themes/shared/preferences/zen-preferences.css
View File

@@ -51,24 +51,6 @@ groupbox {
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
}
@media (prefers-color-scheme: dark) {
@media (-moz-bool-pref: 'zen.theme.color-prefs.amoled') {
groupbox {
background: #141414;
}
}
@media (-moz-bool-pref: 'zen.theme.color-prefs.colorful') {
groupbox {
background: light-dark(white, color-mix(in srgb, var(--zen-primary-color) 10%, #1b1b1b 90%));
}
:root {
--zen-settings-secondary-background: light-dark(#f2f4f4, color-mix(in srgb, var(--zen-colors-tertiary) 70%, #0f0f0f 30%));
}
}
}
.subcategory + groupbox,
#noFxaAccount,
#hasFxaAccount {
@@ -182,7 +164,6 @@ groupbox h2 {
margin-bottom: 15px;
}
#zen-dark-theme-styles-form,
#zen-compact-mode-styles-form {
display: flex;
justify-content: space-between;

64
src/browser/themes/shared/tabbrowser/tabs-css.patch
View File

@@ -1,8 +1,8 @@
diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
index d48aad3a397909056ee43be4e65797875e80b772..d9728867a69a935caf2176d492a7aa78dcee7424 100644
index 96f930638c04c7ddcc8dc1a7fe4dce8b12a325e6..9e11e715ade485c33ba4c8f719b41002f3008dde 100644
--- a/browser/themes/shared/tabbrowser/tabs.css
+++ b/browser/themes/shared/tabbrowser/tabs.css
@@ -26,7 +26,7 @@
@@ -33,7 +33,7 @@
--tab-icon-overlay-fill: light-dark(white, black);
--tab-icon-overlay-stroke: light-dark(black, white);
--tab-label-line-height: 1.7;
@@ -11,7 +11,7 @@ index d48aad3a397909056ee43be4e65797875e80b772..d9728867a69a935caf2176d492a7aa78
--tab-hover-background-color: color-mix(in srgb, currentColor 11%, transparent);
--tab-selected-textcolor: var(--toolbar-color);
--tab-selected-bgcolor: var(--toolbar-bgcolor);
@@ -145,8 +145,7 @@
@@ -207,8 +207,7 @@
}
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > &[pinned] {
@@ -21,7 +21,31 @@ index d48aad3a397909056ee43be4e65797875e80b772..d9728867a69a935caf2176d492a7aa78
}
#tabbrowser-tabs[movingtab] &:is([selected], [multiselected]) {
@@ -498,14 +497,14 @@
@@ -238,7 +237,6 @@
}
:root:not([uidensity=compact]) &[pinned] {
- padding: 0 10px;
}
&:is([selected], [multiselected]) {
@@ -252,6 +250,7 @@
border-radius: inherit;
position: relative;
overflow: hidden;
+ display: none;
&::before {
position: absolute;
@@ -511,7 +510,6 @@
background-repeat: no-repeat;
border-radius: 10px;
-moz-context-properties: fill;
- fill: var(--tab-icon-overlay-fill);
}
}
@@ -569,14 +567,14 @@
}
&[textoverflow] {
@@ -40,7 +64,16 @@ index d48aad3a397909056ee43be4e65797875e80b772..d9728867a69a935caf2176d492a7aa78
direction: rtl;
mask-image: linear-gradient(to right, transparent, black var(--tab-label-mask-size));
}
@@ -863,7 +862,7 @@ tab-group {
@@ -1135,7 +1133,7 @@
}
}
-#tabbrowser-arrowscrollbox[orient="vertical"] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,
+#tabbrowser-arrowscrollbox[orient="vertical"] #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,
#vertical-tabs-newtab-button {
appearance: none;
min-height: var(--tab-min-height);
@@ -1146,7 +1144,7 @@
margin-inline: var(--tab-inner-inline-margin);
#tabbrowser-tabs[orient="vertical"]:not([expanded]) & > .toolbarbutton-text {
@@ -49,7 +82,24 @@ index d48aad3a397909056ee43be4e65797875e80b772..d9728867a69a935caf2176d492a7aa78
}
&:hover {
@@ -1052,7 +1051,7 @@ tab-group {
@@ -1170,7 +1168,7 @@
* flex container. #tabs-newtab-button is a child of the arrowscrollbox where
* we don't want a gap (between tabs), so we have to add some margin.
*/
-#tabbrowser-arrowscrollbox[orient="vertical"] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
+#tabbrowser-arrowscrollbox[orient="vertical"] #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
margin-block: var(--tab-block-margin);
}
@@ -1194,7 +1192,6 @@
}
#vertical-pinned-tabs-container {
- --tab-inline-padding: calc((calc(var(--tab-collapsed-background-width) + 2 * var(--tab-pinned-margin-inline-expanded) - var(--icon-size-default)) / 2));
display: none;
grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto));
overflow-y: auto;
@@ -1347,7 +1344,7 @@
toolbarbutton:not(#firefox-view-button),
toolbarpaletteitem:not(#wrapper-firefox-view-button)
) ~ #tabbrowser-tabs {
@@ -58,7 +108,7 @@ index d48aad3a397909056ee43be4e65797875e80b772..d9728867a69a935caf2176d492a7aa78
padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 2px);
margin-inline-start: 2px;
}
@@ -1087,7 +1086,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
@@ -1381,7 +1378,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
list-style-image: url(chrome://global/skin/icons/plus.svg);
}

15
src/browser/themes/shared/urlbar-searchbar-css.patch Normal file
View File

@@ -0,0 +1,15 @@
diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
index 45aa61f93d354da432eceb1c276466609a6910d0..6585158b855af19689e86ef6a833f63736ec225c 100644
--- a/browser/themes/shared/urlbar-searchbar.css
+++ b/browser/themes/shared/urlbar-searchbar.css
@@ -291,7 +291,9 @@
}
#urlbar[breakout][breakout-extend] {
- margin-left: calc(-1 * var(--urlbar-margin-inline));
+ :root:not([zen-single-toolbar='true']) {
+ margin-left: calc(-1 * var(--urlbar-margin-inline));
+ }
width: calc(var(--urlbar-width) + 2 * var(--urlbar-margin-inline));
> .urlbar-input-container {

9
src/browser/themes/shared/zen-icons/accessibility.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M8 0a2.5 2.5 0 0 0-2.396 3.213l-2.24-.847a1.746 1.746 0 0 0-1.245 3.26L5 6.736v2.398l-1.643 4.524a1.747 1.747 0 0 0 3.284 1.194L8 11.145l1.365 3.702a1.745 1.745 0 0 0 3.278-1.2L11 9.124V6.73l2.867-1.087a1.752 1.752 0 1 0-1.244-3.278l-2.227.843A2.5 2.5 0 0 0 8 0zm0 1a1.5 1.5 0 1 1 0 2.999 1.5 1.5 0 0 1 0-3zM2.729 3.252a.74.74 0 0 1 .28.05l4.104 1.551c.571.216 1.201.216 1.772 0l4.094-1.552a.754.754 0 1 1 .535 1.41l-3.192 1.208a.498.498 0 0 0-.322.467V9.21c0 .058.01.117.03.171l1.673 4.608a.745.745 0 0 1-1.4.511l-1.37-3.719c-.319-.867-1.547-.866-1.865.002L5.703 14.51a.747.747 0 1 1-1.404-.511l1.67-4.606A.497.497 0 0 0 6 9.222v-2.83a.5.5 0 0 0-.32-.467L2.479 4.693a.745.745 0 0 1 .25-1.44z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="2.25" r="1.5" data-color="color-2"></circle><line x1="7.25" y1="16.5" x2="7.25" y2="6.24"></line><line x1="10.75" y1="6.24" x2="10.75" y2="16.5"></line><path d="M2.75,5.75c1.751,.3,3.86,.531,6.25,.531,1.777,0,3.894-.128,6.25-.531"></path><line x1="7.25" y1="11.25" x2="10.75" y2="11.25"></line></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 572 B

10
src/browser/themes/shared/zen-icons/add-to-dictionary.svg
View File

@@ -1,9 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4.35a5.769 5.769 0 0 1-1.076-1H4.001a1 1 0 0 1-1-1h3.605a5.376 5.376 0 0 1-.406-1H3V2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v4.199a5.2 5.2 0 0 1 1 .398V2a2 2 0 0 0-2-2H4zm1 2a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H5zm0 1h6v1H5V3z"/>
<path d="M16 11.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0zm-4-2a.5.5 0 0 0-1 0V11H9.5a.5.5 0 0 0 0 1H11v1.5a.5.5 0 0 0 1 0V12h1.5a.5.5 0 0 0 0-1H12z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M14.181,3.257c-.221-.865-.998-1.507-1.931-1.507H5.75c-1.105,0-2,.896-2,2v12.5l5.25-3.5,5.25,3.5v-3"></path><line x1="14.25" y1="5.75" x2="14.25" y2="10.75" data-color="color-2"></line><line x1="16.75" y1="8.25" x2="11.75" y2="8.25" data-color="color-2"></line></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 791 B

After

Width:  |  Height:  |  Size: 528 B

9
src/browser/themes/shared/zen-icons/arrow-down.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M8 11.5a.547.547 0 0 1-.389-.162L2.146 5.854a.5.5 0 1 1 .707-.705L8 10.313l5.146-5.164a.5.5 0 1 1 .71.705l-5.466 5.484A.55.55 0 0 1 8 11.5z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="15.25 6.5 9 12.75 2.75 6.5"></polyline></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 501 B

After

Width:  |  Height:  |  Size: 316 B

9
src/browser/themes/shared/zen-icons/arrow-left.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path transform="scale(-1 1) translate(-16 0)" d="M5.5 2a.5.5 0 0 0-.354.853L10.313 8l-5.167 5.146a.5.5 0 0 0 .707.71l5.484-5.468a.548.548 0 0 0 0-.777L5.853 2.143A.496.496 0 0 0 5.5 2z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="11.5 15.25 5.25 9 11.5 2.75"></polyline></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 538 B

After

Width:  |  Height:  |  Size: 317 B

9
src/browser/themes/shared/zen-icons/arrow-right.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M5.5 2a.5.5 0 0 0-.354.853L10.313 8l-5.167 5.146a.5.5 0 0 0 .707.71l5.484-5.468a.548.548 0 0 0 0-.777L5.853 2.143A.496.496 0 0 0 5.5 2z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="6.5 2.75 12.75 9 6.5 15.25"></polyline></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 497 B

After

Width:  |  Height:  |  Size: 316 B

9
src/browser/themes/shared/zen-icons/arrow-up.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M8 4.5a.547.547 0 0 0-.389.162l-5.465 5.484a.5.5 0 1 0 .707.705L8 5.687l5.146 5.164a.5.5 0 1 0 .71-.705L8.388 4.662A.55.55 0 0 0 8 4.5z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="2.75 11.5 9 5.25 15.25 11.5"></polyline></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 497 B

After

Width:  |  Height:  |  Size: 317 B

10
src/browser/themes/shared/zen-icons/audio-save.svg
View File

@@ -1,9 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M14.13 7c-.478 0-.957.18-1.322.547l-4.828 4.83a2.2 2.2 0 0 0-.578 1.02l-.375 1.498a.889.889 0 0 0 1.078 1.078l1.498-.375a2.2 2.2 0 0 0 1.02-.578l4.828-4.828A1.872 1.872 0 0 0 14.13 7zm-.002 1.002c.427.002.671.224.8.537.13.314.116.643-.187.947l-4.826 4.826a1.204 1.204 0 0 1-.556.315l-1.316.332.33-1.32H8.37c.053-.21.163-.403.316-.557l4.828-4.83a.85.85 0 0 1 .614-.25zm-6.266 7 .002.002H7.86z"/>
<path d="M12.94.182c-.08.004-.162.02-.242.045l-7 2.188a.998.998 0 0 0-.701.953V11.5a2.5 2.5 0 1 0 1 2V6.368l7-2.188v2.055c.32-.137.66-.213 1-.229V1.18c0-.59-.5-1.032-1.057-.998zm.057.998v1.953l-7 2.188V3.368l7-2.188zM3.497 12a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="5.75" y1="7.25" x2="5.75" y2="13.75"></line><line x1="14.75" y1="5.75" x2="14.75" y2="12.25"></line><path d="m8.6399,3.0186l4.9461-.8246c.61-.102,1.164.368,1.164.986v2.57l-9,1.5"></path><circle cx="3.75" cy="13.75" r="2"></circle><circle cx="12.75" cy="12.25" r="2"></circle><line x1="3.75" y1="1.25" x2="3.75" y2="6.25" data-color="color-2"></line><line x1="6.25" y1="3.75" x2="1.25" y2="3.75" data-color="color-2"></line></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1021 B

After

Width:  |  Height:  |  Size: 692 B

11
src/browser/themes/shared/zen-icons/autoplay-media-blocked.svg
View File

@@ -1,10 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<defs><clipPath id="a"><path d="M2.1 0 16 13.9V0zM0 .7V16h15.3z"/></clipPath></defs>
<path clip-path="url(#a)" d="M12.94.182c-.08.004-.162.017-.242.043l-7 2.188a1 1 0 0 0-.701.955V11.5a2.5 2.5 0 1 0 1 2V6.368l7-2.188V9.5a2.5 2.5 0 1 0 1 2V1.18c0-.59-.5-1.032-1.057-.998zm.057.998v1.953l-7 2.188V3.368l7-2.188zm-1.5 8.82a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm-8 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z"/>
<path d="M.5 0a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .707l15 15a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.707l-15-15A.5.5 0 0 0 .499 0z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M9.25,8.75V1.75s1.303,2.048,3.427,3.573"></path><path d="M5.406,16.13c.268,.078,.551,.12,.844,.12,1.657,0,3-1.343,3-3,0-.293-.042-.577-.12-.844"></path><path d="M7.485,10.515c-.377-.17-.795-.265-1.235-.265-1.657,0-3,1.343-3,3,0,.44,.095,.858,.265,1.235"></path><line x1="2" y1="16" x2="16" y2="2" data-color="color-2"></line></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 878 B

After

Width:  |  Height:  |  Size: 593 B

9
src/browser/themes/shared/zen-icons/autoplay-media.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M12.94.182c-.08.004-.162.017-.242.043l-7 2.188a1 1 0 0 0-.701.955V11.5a2.5 2.5 0 1 0 1 2V6.368l7-2.188V9.5a2.5 2.5 0 1 0 1 2V1.18c0-.59-.5-1.032-1.057-.998zm.057.998v1.953l-7 2.188V3.368l7-2.188zm-1.5 8.82a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm-8 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M9.75,13.25V1.75s1.75,2.75,4.5,4.25" data-color="color-2"></path><circle cx="6.75" cy="13.25" r="3"></circle></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 646 B

After

Width:  |  Height:  |  Size: 377 B

10
src/browser/themes/shared/zen-icons/back.svg
View File

@@ -1,9 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity"
viewBox="0 0 16 16" xml:space="preserve">
<path d="M9.7,13.9L3.8,8l5.9-5.9l0.7,0.7L5.1,8l5.3,5.3L9.7,13.9z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="2.75" y1="9" x2="15.25" y2="9" data-color="color-2"></line><polyline points="7 13.25 2.75 9 7 4.75"></polyline></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 458 B

After

Width:  |  Height:  |  Size: 380 B

9
src/browser/themes/shared/zen-icons/bookmark-hollow.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M8.002.3a.99.99 0 0 0-.898.557L5.174 4.77l-4.316.627a1 1 0 0 0-.555 1.705l3.123 3.045-.736 4.3A1 1 0 0 0 4.14 15.5l3.862-2.029 3.859 2.03a1 1 0 0 0 1.45-1.056l-.736-4.299 3.123-3.045a1 1 0 0 0-.554-1.705l-4.316-.627L8.898.857A.987.987 0 0 0 8 .301zm0 1 1.93 3.91c.146.296.426.5.752.548l4.318.629-3.125 3.043c-.236.23-.343.562-.287.886l.738 4.3-3.86-2.03a1.002 1.002 0 0 0-.932 0l-3.86 2.03.737-4.3a1.003 1.003 0 0 0-.287-.886L1.003 6.387l4.316-.63a.998.998 0 0 0 .752-.546z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M12.25,16.25l-4.75-3.5-4.75,3.5V6.75c0-1.105,.895-2,2-2h5.5c1.105,0,2,.895,2,2v9.5Z"></path><path d="M6.781,2c.287-.159,.617-.25,.969-.25h5.5c1.105,0,2,.895,2,2V13.25" data-color="color-2"></path></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 835 B

After

Width:  |  Height:  |  Size: 464 B

10
src/browser/themes/shared/zen-icons/bookmark-star-on-tray.svg
View File

@@ -1,9 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="context-fill" stroke-opacity="context-fill-opacity" stroke-linecap="round" stroke-width="1.001">
<path d="m8 12.95-4.09 2.151a.501.501 0 0 1-.727-.528l.731-4.266a.561.562 0 0 0-.161-.498L.655 6.79a.501.501 0 0 1 .278-.855l4.28-.623a.561.562 0 0 0 .423-.307L7.55 1.123a.501.501 0 0 1 .9 0l2.031 4.115a.475.475 0 0 0 .426.264H15.5"/>
<path d="M15.5 8.5h-5M10.5 11.5h5"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M12.25,16.25l-4.75-3.5-4.75,3.5V6.75c0-1.105,.895-2,2-2h5.5c1.105,0,2,.895,2,2v9.5Z"></path><path d="M6.781,2c.287-.159,.617-.25,.969-.25h5.5c1.105,0,2,.895,2,2V13.25" data-color="color-2"></path></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 683 B

After

Width:  |  Height:  |  Size: 464 B

9
src/browser/themes/shared/zen-icons/bookmark.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M8.002.3a.99.99 0 0 0-.898.557L5.174 4.77l-4.316.627a1 1 0 0 0-.555 1.705l3.123 3.045-.736 4.3A1 1 0 0 0 4.14 15.5l3.862-2.029 3.859 2.03a1 1 0 0 0 1.45-1.056l-.736-4.299 3.123-3.045a1 1 0 0 0-.554-1.705l-4.316-.627L8.898.857A.987.987 0 0 0 8 .301z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M14.25,16.25l-5.25-3.5-5.25,3.5V3.75c0-1.105,.895-2,2-2h6.5c1.105,0,2,.895,2,2v12.5Z"></path><polyline points="6.497 8 8.106 9.5 11.503 5" data-color="color-2"></polyline></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 610 B

After

Width:  |  Height:  |  Size: 439 B

11
src/browser/themes/shared/zen-icons/camera-blocked.svg
View File

@@ -1,10 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<defs><clipPath id="a"><path d="M2.1 0 16 13.9V0zM0 .7V16h15.3z"/></clipPath></defs>
<path clip-path="url(#a)" d="M6.119 0a1.5 1.5 0 0 0-1.34.826L4.189 2H2.5A2.5 2.5 0 0 0 0 4.5v8A2.5 2.5 0 0 0 2.5 15h11a2.5 2.5 0 0 0 2.5-2.5v-8A2.5 2.5 0 0 0 13.5 2h-1.689L11.225.83A1.501 1.501 0 0 0 9.883 0H6.12zm0 1h3.764a.5.5 0 0 1 .447.277l.725 1.445c.085.17.256.278.445.278h2A1.5 1.5 0 0 1 15 4.5v8a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 12.5v-8A1.5 1.5 0 0 1 2.5 3h1.998a.5.5 0 0 0 .447-.276l.727-1.449A.5.5 0 0 1 6.12 1zm1.877 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 1a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"/>
<path d="M.5 0a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .707l15 15a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.707l-15-15A.5.5 0 0 0 .499 0z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M7.285,14.25h6.965c1.105,0,2-.895,2-2V5.75c0-.138-.014-.273-.041-.403"></path><path d="M14.25,3.75h-2.25l-.507-1.351c-.146-.39-.519-.649-.936-.649h-3.114c-.417,0-.79,.259-.936,.649l-.507,1.351H3.75c-1.105,0-2,.895-2,2v6.5c0,1.105,.895,2,2,2"></path><path d="M7.055,10.945c-.498-.498-.805-1.185-.805-1.945,0-1.519,1.231-2.75,2.75-2.75,.759,0,1.447,.308,1.945,.805" data-color="color-2"></path><circle cx="4.25" cy="6.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><line x1="2" y1="16" x2="16" y2="2" data-color="color-2"></line></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 843 B

9
src/browser/themes/shared/zen-icons/camera.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M6.119 0a1.5 1.5 0 0 0-1.34.826L4.189 2H2.5A2.5 2.5 0 0 0 0 4.5v8A2.5 2.5 0 0 0 2.5 15h11a2.5 2.5 0 0 0 2.5-2.5v-8A2.5 2.5 0 0 0 13.5 2h-1.689L11.225.83A1.501 1.501 0 0 0 9.883 0H6.12zm0 1h3.764a.5.5 0 0 1 .447.277l.725 1.445c.085.17.256.278.445.278h2A1.5 1.5 0 0 1 15 4.5v8a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 12.5v-8A1.5 1.5 0 0 1 2.5 3h1.998a.5.5 0 0 0 .447-.276l.727-1.449A.5.5 0 0 1 6.12 1zm1.877 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 1a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M14.25,3.75h-2.25l-.507-1.351c-.146-.39-.519-.649-.936-.649h-3.114c-.417,0-.79,.259-.936,.649l-.507,1.351H3.75c-1.105,0-2,.895-2,2v6.5c0,1.105,.895,2,2,2H14.25c1.105,0,2-.895,2-2V5.75c0-1.105-.895-2-2-2Z"></path><circle cx="9" cy="9" r="2.75" data-color="color-2"></circle><circle cx="4.25" cy="6.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 833 B

After

Width:  |  Height:  |  Size: 660 B

2
src/browser/themes/shared/zen-icons/canvas-blocked.svg
View File

@@ -3,7 +3,7 @@
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-opacity="context-fill-opacity">
<defs><clipPath id="a"><path d="M2.1 0 16 13.9V0zM0 .7V16h15.3z"/></clipPath></defs>
<path clip-path="url(#a)" d="M4 1a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4zm0 1h8a2 2 0 0 1 2 2v8c0 .373-.102.72-.28 1.02L9.05 8.432a1.5 1.5 0 0 0-2.101 0l-4.67 4.588a1.988 1.988 0 0 1-.28-1.02V4a2 2 0 0 1 2-2zm6.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm0 1a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1zM8 9.002c.127 0 .252.047.35.143l4.662 4.582A1.99 1.99 0 0 1 12 14H4c-.37 0-.715-.099-1.012-.273L7.65 9.145A.496.496 0 0 1 8 9.002z"/>
<path d="M.5 0a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .707l15 15a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.707l-15-15A.5.5 0 0 0 .499 0z"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1006 B

After

Width:  |  Height:  |  Size: 1006 B

9
src/browser/themes/shared/zen-icons/canvas.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M4 1a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4zm0 1h8a2 2 0 0 1 2 2v8c0 .373-.102.72-.28 1.02L9.05 8.432a1.5 1.5 0 0 0-2.101 0l-4.67 4.588a1.988 1.988 0 0 1-.28-1.02V4a2 2 0 0 1 2-2zm6.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm0 1a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1zM8 9.002c.127 0 .252.047.35.143l4.662 4.582A1.99 1.99 0 0 1 12 14H4c-.37 0-.715-.099-1.012-.273L7.65 9.145A.496.496 0 0 1 8 9.002z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M3.762,14.989l6.074-6.075c.781-.781,2.047-.781,2.828,0l2.586,2.586" data-color="color-2"></path><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><circle cx="6.25" cy="7.25" r="1.25" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 774 B

After

Width:  |  Height:  |  Size: 556 B

9
src/browser/themes/shared/zen-icons/checkmark.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M14.5 2a.5.5 0 0 0-.379.174l-9.129 10.57-4.12-4.578a.5.5 0 0 0-.706-.037.5.5 0 0 0-.037.705l4.5 5a.5.5 0 0 0 .75-.008l9.5-11a.5.5 0 0 0-.053-.705A.5.5 0 0 0 14.5 2z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="2.75 9.5 6.5 13.25 15.25 4.5"></polyline></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 526 B

After

Width:  |  Height:  |  Size: 318 B

10
src/browser/themes/shared/zen-icons/chevron.svg
View File

@@ -1,9 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M2.5 2a.5.5 0 0 0-.353.146.5.5 0 0 0 0 .708L7.293 8l-5.146 5.145a.5.5 0 0 0 0 .707.5.5 0 0 0 .707 0l5.5-5.5a.5.5 0 0 0 0-.707l-5.5-5.5A.5.5 0 0 0 2.5 2z"/>
<path d="M8.146 2.146a.5.5 0 0 0 0 .707l5.146 5.146-5.146 5.146a.5.5 0 0 0 0 .707.5.5 0 0 0 .707 0l5.5-5.5a.5.5 0 0 0 0-.707l-5.5-5.5a.5.5 0 0 0-.707 0z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="9.75 4.75 14 9 9.75 13.25" data-color="color-2"></polyline><polyline points="5 4.75 9.25 9 5 13.25"></polyline></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 672 B

After

Width:  |  Height:  |  Size: 388 B

7
src/browser/themes/shared/zen-icons/close-all.svg
View File

@@ -1,6 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.5 13.5" fill="context-fill" fill-opacity="context-fill-opacity" ><path d="M7.45,6.85l-.8-.8L5.06,7.64,3.47,6.05l-.79.8L4.27,8.44,2.68,10l.79.79L5.06,9.23l1.59,1.59.8-.79L5.86,8.44Z"/><path d="M3.38,1.12,4.5,0h7.88L13.5,1.12V9l-1.12,1.12H10.12v2.26L9,13.5H1.12L0,12.38V4.5L1.12,3.38H3.38ZM4.5,3.38H9L10.12,4.5V9h2.26V1.12H4.5ZM9,4.5H1.12v7.88H9Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M1.75,16.25v-.5c0-1.105,.895-2,2-2H14.25c1.105,0,2,.895,2,2v.5"></path><path d="M3.75,11.25c0-.828,.672-1.5,1.5-1.5h7.5c.828,0,1.5,.672,1.5,1.5"></path><polyline points="11.5 4.75 9 7.25 6.5 4.75" data-color="color-2"></polyline><line x1="9" y1="7" x2="9" y2="1.75" data-color="color-2"></line></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 653 B

After

Width:  |  Height:  |  Size: 562 B

9
src/browser/themes/shared/zen-icons/close.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M2.5 2a.5.5 0 0 0-.353.146.5.5 0 0 0 0 .708L7.293 8l-5.146 5.145a.5.5 0 0 0 0 .707.5.5 0 0 0 .707 0L8 8.706l5.146 5.146a.5.5 0 0 0 .706 0 .5.5 0 0 0 0-.707L8.708 8l5.146-5.146a.5.5 0 0 0 0-.707.5.5 0 0 0-.707 0L8 7.292 2.854 2.146A.5.5 0 0 0 2.5 2z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="14" y1="4" x2="4" y2="14" data-color="color-2"></line><line x1="4" y1="4" x2="14" y2="14"></line></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 610 B

After

Width:  |  Height:  |  Size: 366 B

9
src/browser/themes/shared/zen-icons/container-tab.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M2 0C.901 0 0 .901 0 2v1.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V2c0-.558.442-1 1-1h1.5A.5.5 0 0 0 4 .5a.5.5 0 0 0-.5-.5H2zm10.5 0a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5H14c.558 0 1 .442 1 1v1.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V2c0-1.099-.901-2-2-2h-1.5zm-8 2A2.508 2.508 0 0 0 2 4.5v7C2 12.875 3.125 14 4.5 14h7c1.375 0 2.5-1.125 2.5-2.5v-7C14 3.125 12.875 2 11.5 2h-7zm0 1H7v1.5C7 5.323 7.677 6 8.5 6H13v5.5c0 .834-.666 1.5-1.5 1.5h-7c-.834 0-1.5-.666-1.5-1.5v-7C3 3.666 3.666 3 4.5 3zM8 3h3.5c.834 0 1.5.666 1.5 1.5V5H8.5a.493.493 0 0 1-.5-.5V3zM.5 12a.5.5 0 0 0-.5.5V14c0 1.099.901 2 2 2h1.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H2c-.558 0-1-.442-1-1v-1.5a.5.5 0 0 0-.5-.5zm15 0a.5.5 0 0 0-.5.5V14c0 .558-.442 1-1 1h-1.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5H14c1.099 0 2-.901 2-2v-1.5a.5.5 0 0 0-.5-.5z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M6.75,2.75h7c1.105,0,2,.895,2,2v1.5" data-color="color-2"></path><line x1="11.25" y1="2.75" x2="11.25" y2="6.25" data-color="color-2"></line><line x1="14.75" y1="11.75" x2="14.75" y2="16.75" data-color="color-2"></line><path d="M15.75,9.461v-3.211H6.75V2.75h-2.5c-1.105,0-2,.895-2,2V13.25c0,1.105,.895,2,2,2h5.711"></path><line x1="17.25" y1="14.25" x2="12.25" y2="14.25" data-color="color-2"></line></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 668 B

9
src/browser/themes/shared/zen-icons/customize.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M3.5 0a.5.5 0 0 0-.5.5v8.504a2 2 0 0 0 2 2h1.004v2.998a2 2 0 1 0 4 0v-2.998H11a2 2 0 0 0 2-2V.5a.5.5 0 0 0-.5-.5h-9zM4 1h4v1.5a.5.5 0 1 0 1 0V1h1v2.502a.5.5 0 0 0 1 0V1h1v6.004H4V1zm0 7.004h8v1a1 1 0 0 1-1 1H9.504a.5.5 0 0 0-.5.5v3.498a1 1 0 1 1-2 0v-3.498a.5.5 0 0 0-.5-.5H5a1 1 0 0 1-1-1v-1z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><polyline points="10.25 12.75 12.75 15.25 15.25 12.75" data-color="color-2"></polyline><polyline points="15.25 5.25 12.75 2.75 10.25 5.25" data-color="color-2"></polyline><line x1="12.75" y1="15" x2="12.75" y2="3" data-color="color-2"></line><rect x="2.75" y="10.25" width="5" height="5" rx="1" ry="1"></rect><rect x="2.75" y="2.75" width="5" height="5" rx="1" ry="1"></rect></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 655 B

After

Width:  |  Height:  |  Size: 634 B

11
src/browser/themes/shared/zen-icons/desktop-notification-blocked.svg
View File

@@ -1,10 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<defs><clipPath id="a"><path d="M2.1 0 16 13.9V0zM0 .7V16h15.3z"/></clipPath></defs>
<path clip-path="url(#a)" d="M8 0C4.692 0 2 2.692 2 6v3.4l-.928 2.229c-.265.636.225 1.371.914 1.371H5.5c0 1.375 1.125 2.5 2.5 2.5s2.5-1.125 2.5-2.5h3.514c.69 0 1.18-.735.914-1.371L14.001 9.4V6c0-3.308-2.692-6-6-6zm0 1c2.767 0 5 2.233 5 5v3.5a.5.5 0 0 0 .04.191l.96 2.31H2l.96-2.31A.5.5 0 0 0 3 9.5V6c0-2.767 2.233-5 5-5zM6.5 13h3c0 .834-.666 1.5-1.5 1.5s-1.5-.666-1.5-1.5z" style="-inkscape-stroke:none;color:#000;stroke-linecap:round;stroke-linejoin:round"/>
<path d="M.5 0a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .707l15 15a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.707l-15-15A.5.5 0 0 0 .499 0z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M13.368,4.632c-.726-1.694-2.408-2.882-4.368-2.882h0c-2.623,0-4.75,2.127-4.75,4.75v4.75c0,1.105-.895,2-2,2h2.5"></path><path d="M8,13.25h7.75c-1.105,0-2-.895-2-2v-3.5"></path><path d="M10.588,15.185c-.095-.117-.237-.185-.388-.185h-2.399c-.151,0-.293,.068-.388,.185-.095,.117-.132,.271-.101,.418,.173,.822,.868,1.397,1.689,1.397s1.516-.575,1.689-1.397c.031-.147-.006-.301-.101-.418Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path><line x1="2" y1="16" x2="16" y2="2" data-color="color-2"></line></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1021 B

After

Width:  |  Height:  |  Size: 795 B

9
src/browser/themes/shared/zen-icons/desktop-notification.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M8 0C4.692 0 2 2.692 2 6v3.4l-.928 2.229c-.265.636.225 1.371.914 1.371H5.5c0 1.375 1.125 2.5 2.5 2.5s2.5-1.125 2.5-2.5h3.514c.69 0 1.18-.735.914-1.371L14.001 9.4V6c0-3.308-2.692-6-6-6zm0 1c2.767 0 5 2.233 5 5v3.5a.5.5 0 0 0 .04.191l.96 2.31H2l.96-2.31A.5.5 0 0 0 3 9.5V6c0-2.767 2.233-5 5-5zM6.5 13h3c0 .834-.666 1.5-1.5 1.5s-1.5-.666-1.5-1.5z" style="-inkscape-stroke:none;color:#000;stroke-linecap:round;stroke-linejoin:round"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M15.75,13.25c-1.105,0-2-.895-2-2V6.5c0-2.623-2.127-4.75-4.75-4.75h0c-2.623,0-4.75,2.127-4.75,4.75v4.75c0,1.105-.895,2-2,2H15.75Z"></path><path d="M10.588,15.185c-.095-.117-.237-.185-.388-.185h-2.399c-.151,0-.293,.068-.388,.185-.095,.117-.132,.271-.101,.418,.173,.822,.868,1.397,1.689,1.397s1.516-.575,1.689-1.397c.031-.147-.006-.301-.101-.418Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 789 B

After

Width:  |  Height:  |  Size: 694 B

9
src/browser/themes/shared/zen-icons/developer.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M11.5 0a4.5 4.5 0 0 0-4.418 5.36L.656 12.016a2.358 2.358 0 0 0 3.375 3.294l6.365-6.447a4.5 4.5 0 0 0 5.207-6.215.503.503 0 0 0-.81-.149L12.5 4.793 11.207 3.5 13.5 1.207A.5.5 0 0 0 13.353.4 4.49 4.49 0 0 0 11.499 0zm0 1c.247 0 .487.026.719.074l-2.072 2.072a.5.5 0 0 0 0 .707l2 2a.5.5 0 0 0 .707 0l2.072-2.072a3.5 3.5 0 0 1-4.52 4.045.502.502 0 0 0-.514.123L3.32 14.61a1.358 1.358 0 0 1-1.943-1.896L7.99 5.859a.498.498 0 0 0 .123-.473A3.5 3.5 0 0 1 11.5.999z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="9" cy="12.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><circle cx="11.75" cy="12.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><circle cx="6.25" cy="12.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><path d="M6.25,15.25h-1c-1.105,0-2-.895-2-2v-2.625c0-.897-.728-1.625-1.625-1.625,.897,0,1.625-.728,1.625-1.625v-2.625c0-1.105,.895-2,2-2h1"></path><path d="M11.75,15.25h1c1.105,0,2-.895,2-2v-2.625c0-.897,.728-1.625,1.625-1.625-.897,0-1.625-.728-1.625-1.625v-2.625c0-1.105-.895-2-2-2h-1"></path></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 818 B

After

Width:  |  Height:  |  Size: 911 B

10
src/browser/themes/shared/zen-icons/downloads.svg
View File

@@ -1,9 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M8 0a.5.5 0 0 0-.5.5v10.79L3.854 7.644a.5.5 0 1 0-.707.707l4.5 4.5a.5.5 0 0 0 .707 0l4.5-4.5a.5.5 0 0 0-.707-.707L8.501 11.29V.5a.5.5 0 0 0-.5-.5z"/>
<path d="M1.5 12a.5.5 0 0 0-.5.5v1C1 14.875 2.125 16 3.5 16h9c1.375 0 2.5-1.125 2.5-2.5v-1a.5.5 0 0 0-1 0v1c0 .834-.666 1.5-1.5 1.5h-9c-.834 0-1.5-.666-1.5-1.5v-1a.5.5 0 0 0-.5-.5z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M15.25,11.75v1.5c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2v-1.5"></path><polyline points="5.5 6.75 9 10.25 12.5 6.75" data-color="color-2"></polyline><line x1="9" y1="10.25" x2="9" y2="2.75" data-color="color-2"></line></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 694 B

After

Width:  |  Height:  |  Size: 489 B

9
src/browser/themes/shared/zen-icons/drag-indicator.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 6C7.32843 6 8 5.32843 8 4.5C8 3.67157 7.32843 3 6.5 3C5.67157 3 5 3.67157 5 4.5C5 5.32843 5.67157 6 6.5 6ZM6.5 11C7.32843 11 8 10.3284 8 9.5C8 8.67157 7.32843 8 6.5 8C5.67157 8 5 8.67157 5 9.5C5 10.3284 5.67157 11 6.5 11ZM8 14.5C8 15.3284 7.32843 16 6.5 16C5.67157 16 5 15.3284 5 14.5C5 13.6716 5.67157 13 6.5 13C7.32843 13 8 13.6716 8 14.5ZM13.5 6C14.3284 6 15 5.32843 15 4.5C15 3.67157 14.3284 3 13.5 3C12.6716 3 12 3.67157 12 4.5C12 5.32843 12.6716 6 13.5 6ZM15 9.5C15 10.3284 14.3284 11 13.5 11C12.6716 11 12 10.3284 12 9.5C12 8.67157 12.6716 8 13.5 8C14.3284 8 15 8.67157 15 9.5ZM13.5 16C14.3284 16 15 15.3284 15 14.5C15 13.6716 14.3284 13 13.5 13C12.6716 13 12 13.6716 12 14.5C12 15.3284 12.6716 16 13.5 16Z" fill="currentColor"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="6.75" cy="9" r=".5" fill="currentColor" data-color="color-2"></circle><circle cx="6.75" cy="3.75" r=".5" fill="currentColor"></circle><circle cx="6.75" cy="14.25" r=".5" fill="currentColor"></circle><circle cx="11.25" cy="9" r=".5" fill="currentColor" data-color="color-2"></circle><circle cx="11.25" cy="3.75" r=".5" fill="currentColor"></circle><circle cx="11.25" cy="14.25" r=".5" fill="currentColor"></circle></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 684 B

9
src/browser/themes/shared/zen-icons/duplicate-tab.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M5.5 0A2.5 2.5 0 0 0 3 2.5v8A2.5 2.5 0 0 0 5.5 13h8a2.5 2.5 0 0 0 2.5-2.5v-8A2.5 2.5 0 0 0 13.5 0h-8zm0 1H7v1.5A1.5 1.5 0 0 0 8.5 4H15v6.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 10.5v-8A1.5 1.5 0 0 1 5.5 1zM8 1h5.5A1.5 1.5 0 0 1 15 2.5V3H8.5a.5.5 0 0 1-.5-.5V1zM2 3.05A2.5 2.5 0 0 0 0 5.5V12a4 4 0 0 0 4 4h6.5a2.5 2.5 0 0 0 2.45-2h-1.036a1.5 1.5 0 0 1-1.414 1H4a3 3 0 0 1-3-3V5.5a1.5 1.5 0 0 1 1-1.414V3.05z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="5.25" y="5.25" width="11" height="11" rx="2" ry="2"></rect><path d="M2.801,11.998L1.772,5.074c-.162-1.093,.592-2.11,1.684-2.272l6.924-1.029c.933-.139,1.81,.39,2.148,1.228" data-color="color-2"></path></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 771 B

After

Width:  |  Height:  |  Size: 468 B

9
src/browser/themes/shared/zen-icons/edit-copy.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M6 0a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H6zm0 1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM3 2.268C2.402 2.614 2 3.26 2 4v8.5A3.5 3.5 0 0 0 5.5 16H10c.74 0 1.387-.402 1.732-1H5.5A2.5 2.5 0 0 1 3 12.5V2.27z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M1.75,6.75v6.5c0,1.105,.895,2,2,2H12.25" data-color="color-2"></path><rect x="4.75" y="2.75" width="11.5" height="9.5" rx="2" ry="2" transform="translate(21 15) rotate(180)"></rect></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 617 B

After

Width:  |  Height:  |  Size: 449 B

9
src/browser/themes/shared/zen-icons/edit-cut.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M3.508 0a.5.5 0 0 0-.428.771L7.404 7.43 5.48 10.39a3 3 0 1 0 .78.636L8 8.347l1.74 2.68a3 3 0 1 0 .78-.636L3.92.23a.503.503 0 0 0-.412-.228zm8.984 0a.503.503 0 0 0-.412.229L8.596 5.594l.598.918L12.92.772A.5.5 0 0 0 12.493 0zM4 11a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm8 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="12.75" y1="7.75" x2="16.25" y2="7.75" data-color="color-2"></line><line x1="4" y1="7.75" x2="9.25" y2="7.75" data-color="color-2"></line><circle cx="4" cy="5.5" r="2.25" data-color="color-2"></circle><line x1="5.409" y1="11.659" x2="14" y2="3"></line><circle cx="7" cy="13.25" r="2.25"></circle></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 652 B

After

Width:  |  Height:  |  Size: 564 B

9
src/browser/themes/shared/zen-icons/edit-delete.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M8 .5A2.5 2.5 0 0 0 5.5 3H1a.5.5 0 0 0-.5.5l.008.09A.5.5 0 0 0 1 4h.553L2.85 14.229A2 2 0 0 0 4.836 16h6.328a2 2 0 0 0 1.986-1.771L14.445 4H15a.5.5 0 0 0 0-1h-4.5A2.5 2.5 0 0 0 8 .5zm0 1A1.5 1.5 0 0 1 9.5 3h-3A1.5 1.5 0 0 1 8 1.5zM2.56 4h10.877l-1.28 10.116a.998.998 0 0 1-.993.884H4.836a.998.998 0 0 1-.992-.884zM6.5 6.5c-.276 0-.5.196-.5.438v5.124l.008.078c.042.204.247.36.492.36.276 0 .5-.196.5-.438V6.938l-.008-.079C6.95 6.655 6.745 6.5 6.5 6.5zm3 0c-.276 0-.5.196-.5.438v5.124l.008.078c.042.204.247.36.492.36.276 0 .5-.196.5-.438V6.938l-.008-.079C9.95 6.655 9.745 6.5 9.5 6.5z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="m13.474,7.25l-.374,7.105c-.056,1.062-.934,1.895-1.997,1.895h-4.205c-1.064,0-1.941-.833-1.997-1.895l-.374-7.105"></path><line x1="2.75" y1="4.75" x2="15.25" y2="4.75" data-color="color-2"></line><path d="m6.75,4.75v-2c0-.552.448-1,1-1h2.5c.552,0,1,.448,1,1v2" data-color="color-2"></path><line x1="7.375" y1="8.75" x2="7.625" y2="13.25" data-color="color-2"></line><line x1="10.625" y1="8.75" x2="10.375" y2="13.25" data-color="color-2"></line></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 943 B

After

Width:  |  Height:  |  Size: 711 B

9
src/browser/themes/shared/zen-icons/edit-paste.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M6.5 0a1.5 1.5 0 0 0-1.414 1H3.5A1.5 1.5 0 0 0 2 2.5v12A1.5 1.5 0 0 0 3.5 16h3a.5.5 0 0 0 0-1h-3a.5.5 0 0 1-.5-.5v-12a.5.5 0 0 1 .5-.5h1.586A1.5 1.5 0 0 0 6.5 3h3a1.5 1.5 0 0 0 1.414-1H12.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 0 1 0v-1A1.5 1.5 0 0 0 12.5 1h-1.586A1.5 1.5 0 0 0 9.5 0h-3zm0 1h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm3 4A1.5 1.5 0 0 0 8 6.5v8A1.5 1.5 0 0 0 9.5 16h5a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 14.5 5h-5zm0 1h5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M6.25,2.75h-1c-1.105,0-2,.895-2,2V14.25c0,1.105,.895,2,2,2h7.5c1.105,0,2-.895,2-2V4.75c0-1.105-.895-2-2-2h-1"></path><rect x="6.25" y="1.25" width="5.5" height="3" rx="1" ry="1" data-color="color-2"></rect></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 859 B

After

Width:  |  Height:  |  Size: 474 B

9
src/browser/themes/shared/zen-icons/edit-redo.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path transform="scale(-1 1) translate(-16 0)" d="M1.5 0a.5.5 0 0 0-.5.5v4.9a.6.6 0 0 0 .6.6h4.9a.5.5 0 0 0 0-1H2.906L6.38 1.98a4 4 0 1 1 5.248 6.04l-8.172 7.103a.5.5 0 1 0 .656.754l8.172-7.104a5.001 5.001 0 0 0-6.56-7.547L2 4.464V.5a.5.5 0 0 0-.5-.5z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M15,10c-.528-.461-2.7-2.251-6-2.251s-5.472,1.79-6,2.251" data-color="color-2"></path><polyline points="13.375 5.598 15 10 10.47 11.222"></polyline></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 604 B

After

Width:  |  Height:  |  Size: 415 B

9
src/browser/themes/shared/zen-icons/edit-select-all.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M6 0a2 2 0 0 0-2 2v.5a.5.5 0 0 0 1 0V2a1 1 0 0 1 1-1h.5a.5.5 0 0 0 0-1H6zm2.5 0a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm5 0a.5.5 0 0 0 0 1h.5a1 1 0 0 1 1 1v.5a.5.5 0 0 0 1 0V2a2 2 0 0 0-2-2h-.5zM2 4a2 2 0 0 0-2 2v6.5A3.5 3.5 0 0 0 3.5 16H10a2 2 0 0 0 2-2v-1h-1v1a1 1 0 0 1-1 1H3.5A2.5 2.5 0 0 1 1 12.5V6a1 1 0 0 1 1-1h1V4H2zm2.5 0a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5zm11 0a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5zm-11 5a.5.5 0 0 0-.5.5v.5a2 2 0 0 0 2 2h.5a.5.5 0 0 0 0-1H6a1 1 0 0 1-1-1v-.5a.5.5 0 0 0-.5-.5zm11 0a.5.5 0 0 0-.5.5v.5a1 1 0 0 1-1 1h-.5a.5.5 0 0 0 0 1h.5a2 2 0 0 0 2-2v-.5a.5.5 0 0 0-.5-.5zm-7 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="14.75" y1=".75" x2="14.75" y2="5.75" data-color="color-2"></line><line x1="17.25" y1="3.25" x2="12.25" y2="3.25" data-color="color-2"></line><path d="M2.25,5.25c0-1.105,.895-2,2-2"></path><path d="M14.75,13.75c0,1.105-.895,2-2,2"></path><path d="M4.25,15.75c-1.105,0-2-.895-2-2"></path><line x1="7.25" y1="3.25" x2="9.25" y2="3.25"></line><line x1="7.25" y1="15.75" x2="9.75" y2="15.75"></line><line x1="14.75" y1="8.75" x2="14.75" y2="10.75"></line><line x1="2.25" y1="8.25" x2="2.25" y2="10.75"></line></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 773 B

1
src/browser/themes/shared/zen-icons/edit-theme.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M11.75,9.247l5.086-5.083c.552-.552,.552-1.448,0-2-.552-.552-1.448-.552-2,0l-5.094,5.096" data-color="color-2"></path><path d="M5.75,11.815c2.162,.65,3.917,.704,5.351-.764,.865-.868,.865-2.276,0-3.145s-2.261-.881-3.133,0c-1.418,1.434-.18,2.795-2.218,3.909Z" data-color="color-2"></path><path d="M16.25,8.284v4.966c0,1.105-.895,2-2,2H3.75c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2h6.965"></path><circle cx="4.25" cy="5.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle><circle cx="6.75" cy="5.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 901 B

9
src/browser/themes/shared/zen-icons/edit-undo.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M1.5 0a.5.5 0 0 0-.5.5v4.9a.6.6 0 0 0 .6.6h4.9a.5.5 0 0 0 0-1H2.906L6.38 1.98a4 4 0 1 1 5.248 6.04l-8.172 7.103a.5.5 0 1 0 .656.754l8.172-7.104a5.001 5.001 0 0 0-6.56-7.547L2 4.464V.5a.5.5 0 0 0-.5-.5z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M3,10c.528-.461,2.7-2.251,6-2.251s5.472,1.79,6,2.251" data-color="color-2"></path><polyline points="4.625 5.598 3 10 7.53 11.222"></polyline></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 563 B

After

Width:  |  Height:  |  Size: 409 B

9
src/browser/themes/shared/zen-icons/edit.svg
View File

@@ -1,8 +1 @@
<!--
- 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/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M11.25.815a2.783 2.783 0 0 1 4.066 3.796l-.13.14-9.606 9.605a2 2 0 0 1-.723.463l-.165.053-4.055 1.106a.5.5 0 0 1-.63-.535l.016-.08L1.13 11.31a2 2 0 0 1 .398-.76l.117-.128zm-.86 2.275-8.04 8.038a1 1 0 0 0-.215.321l-.042.123-.876 3.211 3.212-.876a1 1 0 0 0 .238-.1l.108-.071.098-.086 8.038-8.04zm4.089-1.568a1.784 1.784 0 0 0-2.402-.11l-.12.11-.86.86 2.52 2.522.861-.86a1.784 1.784 0 0 0 .11-2.402z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M2.75,15.25s3.599-.568,4.546-1.515c.947-.947,7.327-7.327,7.327-7.327,.837-.837,.837-2.194,0-3.03-.837-.837-2.194-.837-3.03,0,0,0-6.38,6.38-7.327,7.327s-1.515,4.546-1.515,4.546h0Z"></path></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 758 B

After

Width:  |  Height:  |  Size: 455 B

7
src/browser/themes/shared/zen-icons/essential-add.svg
View File

@@ -1,6 +1 @@
<!--
- 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/.
-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 122.88 109.57" fill="context-fill" fill-opacity="context-fill-opacity" xml:space="preserve"><g><path d="M65.46,19.57c-0.68,0.72-1.36,1.45-2.2,2.32l-2.31,2.41l-2.4-2.33c-0.71-0.69-1.43-1.4-2.13-2.09 c-7.42-7.3-13.01-12.8-24.52-12.95c-0.45-0.01-0.93,0-1.43,0.02c-6.44,0.23-12.38,2.6-16.72,6.65c-4.28,4-7.01,9.67-7.1,16.57 c-0.01,0.43,0,0.88,0.02,1.37c0.69,19.27,19.13,36.08,34.42,50.01c2.95,2.69,5.78,5.27,8.49,7.88l11.26,10.85l14.15-14.04 c2.28-2.26,4.86-4.73,7.62-7.37c4.69-4.5,9.91-9.49,14.77-14.52c3.49-3.61,6.8-7.24,9.61-10.73c2.76-3.42,5.02-6.67,6.47-9.57 c2.38-4.76,3.13-9.52,2.62-13.97c-0.5-4.39-2.23-8.49-4.82-11.99c-2.63-3.55-6.13-6.49-10.14-8.5C96.5,7.29,91.21,6.2,85.8,6.82 C76.47,7.9,71.5,13.17,65.46,19.57L65.46,19.57z M60.77,14.85C67.67,7.54,73.4,1.55,85.04,0.22c6.72-0.77,13.3,0.57,19.03,3.45 c4.95,2.48,9.27,6.1,12.51,10.47c3.27,4.42,5.46,9.61,6.1,15.19c0.65,5.66-0.29,11.69-3.3,17.69c-1.7,3.39-4.22,7.03-7.23,10.76 c-2.95,3.66-6.39,7.44-10,11.17C97.2,74.08,91.94,79.12,87.2,83.66c-2.77,2.65-5.36,5.13-7.54,7.29L63.2,107.28l-2.31,2.29 l-2.34-2.25l-13.6-13.1c-2.49-2.39-5.37-5.02-8.36-7.75C20.38,71.68,0.81,53.85,0.02,31.77C0,31.23,0,30.67,0,30.09 c0.12-8.86,3.66-16.18,9.21-21.36c5.5-5.13,12.97-8.13,21.01-8.42c0.55-0.02,1.13-0.03,1.74-0.02C46,0.48,52.42,6.63,60.77,14.85 L60.77,14.85z"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M8.743,7.769l-.946-.315-.316-.947c-.102-.306-.609-.306-.711,0l-.316,.947-.946,.315c-.153,.051-.257,.194-.257,.356s.104,.305,.257,.356l.946,.315,.316,.947c.051,.153,.194,.256,.355,.256s.305-.104,.355-.256l.316-.947,.946-.315c.153-.051,.257-.194,.257-.356s-.104-.305-.257-.356Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path><path d="M15.144,9.976c.52-.995,.856-2.117,.856-3.367,.008-2.12-1.704-3.846-3.826-3.859-1.277,.016-2.464,.66-3.174,1.72-.709-1.061-1.896-1.704-3.173-1.72-2.123,.013-3.834,1.739-3.826,3.859,0,4.826,4.959,7.794,6.529,8.613,.297,.155,.644,.155,.941,0,.114-.059,.249-.133,.395-.214"></path><path d="M15.658,12.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path><circle cx="12.25" cy="6.25" r=".75" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></circle></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Some files were not shown because too many files have changed in this diff Show More