mirror of
https://github.com/zen-browser/desktop.git
synced 2025-09-05 19:08:18 +00:00
Merge pull request #5273 from zen-browser/new-workspaces-layout
Started working on new workspaec layout
This commit is contained in:
mr. m
@@ -85,7 +85,6 @@
|
||||
_initSidebarScrolling() {
|
||||
// Disable smooth scroll
|
||||
const canSmoothScroll = Services.prefs.getBoolPref('zen.startup.smooth-scroll-in-tabs', false);
|
||||
const workspaceIndicator = document.getElementById('zen-current-workspace-indicator');
|
||||
const tabsWrapper = document.getElementById('zen-browser-tabs-wrapper');
|
||||
gBrowser.tabContainer.addEventListener('wheel', (event) => {
|
||||
if (canSmoothScroll) return;
|
||||
|
||||
@@ -149,11 +149,7 @@ var gZenUIManager = {
|
||||
},
|
||||
|
||||
get newtabButton() {
|
||||
if (this._newtabButton) {
|
||||
return this._newtabButton;
|
||||
}
|
||||
this._newtabButton = document.getElementById('tabs-newtab-button');
|
||||
return this._newtabButton;
|
||||
return ZenWorkspaces.activeWorkspaceStrip.querySelector('#tabs-newtab-button');
|
||||
},
|
||||
|
||||
_prevUrlbarLabel: null,
|
||||
@@ -417,6 +413,8 @@ 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 ? 'horizontal' : 'vertical');
|
||||
|
||||
const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
|
||||
if (isRightSide) {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
|
||||
index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67aea54a6f47 100644
|
||||
index a0a382643a2f74b6d789f3641ef300eed202d5e9..340475da315e67b2dd4f93567547cde703a90ee8 100644
|
||||
--- a/browser/base/content/navigator-toolbox.inc.xhtml
|
||||
+++ b/browser/base/content/navigator-toolbox.inc.xhtml
|
||||
@@ -2,7 +2,7 @@
|
||||
@@ -40,20 +40,17 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67ae
|
||||
<tabs id="tabbrowser-tabs"
|
||||
is="tabbrowser-tabs"
|
||||
aria-multiselectable="true"
|
||||
@@ -50,6 +50,12 @@
|
||||
@@ -50,6 +50,9 @@
|
||||
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" skipintoolbarset="true">
|
||||
+ <hbox id="zen-current-workspace-indicator-icon"></hbox>
|
||||
+ <hbox id="zen-current-workspace-indicator-name"></hbox>
|
||||
+</hbox>
|
||||
+<hbox id="zen-current-workspace-indicator-container"></hbox>
|
||||
+<html:div id="zen-browser-tabs-wrapper">
|
||||
<hbox class="tab-drop-indicator" hidden="true"/>
|
||||
# If the name (tabbrowser-arrowscrollbox) or structure of this changes
|
||||
# significantly, there is an optimization in
|
||||
@@ -57,7 +63,7 @@
|
||||
@@ -57,7 +60,7 @@
|
||||
# the current structure that we may want to revisit.
|
||||
<html:div id="vertical-pinned-tabs-container" tabindex="-1"></html:div>
|
||||
<html:div id="vertical-pinned-tabs-container-separator"></html:div>
|
||||
@@ -62,7 +59,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67ae
|
||||
<tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
|
||||
<hbox id="tabbrowser-arrowscrollbox-periphery">
|
||||
<toolbartabstop/>
|
||||
@@ -75,6 +81,7 @@
|
||||
@@ -75,6 +78,7 @@
|
||||
tooltip="dynamic-shortcut-tooltip"
|
||||
data-l10n-id="tabs-toolbar-new-tab"/>
|
||||
<html:span id="tabbrowser-tab-a11y-desc" hidden="true"/>
|
||||
@@ -70,7 +67,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67ae
|
||||
</tabs>
|
||||
|
||||
<toolbarbutton id="new-tab-button"
|
||||
@@ -100,11 +107,12 @@
|
||||
@@ -100,11 +104,12 @@
|
||||
#include private-browsing-indicator.inc.xhtml
|
||||
<toolbarbutton id="content-analysis-indicator"
|
||||
class="toolbarbutton-1 content-analysis-indicator-icon"/>
|
||||
@@ -86,7 +83,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67ae
|
||||
<toolbar id="nav-bar"
|
||||
class="browser-toolbar chromeclass-location"
|
||||
data-l10n-id="navbar-accessible"
|
||||
@@ -490,10 +498,12 @@
|
||||
@@ -490,10 +495,12 @@
|
||||
consumeanchor="PanelUI-button"
|
||||
data-l10n-id="appmenu-menu-button-closed2"/>
|
||||
</toolbaritem>
|
||||
|
||||
@@ -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.5s ease forwards;
|
||||
animation: zen-main-app-wrapper-animation 0.2s ease forwards;
|
||||
transition: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -117,7 +117,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
@@ -126,8 +126,8 @@
|
||||
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]))) + &,
|
||||
#tabbrowser-tabs:not(:has(#tabbrowser-arrowscrollbox tab:not([hidden]))) & {
|
||||
#vertical-pinned-tabs-container .zen-workspace-tabs-section[active]:not(:has(tab:not([hidden]))) &,
|
||||
#tabbrowser-tabs:not(:has(#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[active] tab:not([hidden]))) & {
|
||||
max-height: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -254,18 +254,14 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
scale: 0.98;
|
||||
@@ -441,7 +437,7 @@
|
||||
width: calc(100% - 10px) !important;
|
||||
}
|
||||
|
||||
& #zen-current-workspace-indicator-icon[no-icon='true'] {
|
||||
& .zen-current-workspace-indicator-icon[no-icon='true'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -572,11 +568,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;
|
||||
@@ -893,7 +889,7 @@
|
||||
align-items: center;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
|
||||
&:active,
|
||||
&[open] {
|
||||
scale: 0.98;
|
||||
@@ -966,7 +962,7 @@
|
||||
|
||||
--tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2));
|
||||
|
||||
&:not([selected], [multiselected="true"]) .tab-background {
|
||||
&:not([visuallyselected], [multiselected="true"]) .tab-background {
|
||||
background: var(--zen-toolbar-element-bg);
|
||||
border: none;
|
||||
}
|
||||
@@ -1137,3 +1133,10 @@
|
||||
#zen-essentials-container .tabbrowser-tab.drag-over-after {
|
||||
box-shadow: -3px 0 6px -2px var(--toolbarbutton-active-background, rgba(0, 255, 0, 0.2));
|
||||
}
|
||||
|
||||
/* Section: tab workspaces stylings */
|
||||
.zen-workspace-tabs-section {
|
||||
position: absolute;
|
||||
transform: translateX(-100%);
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
@@ -157,6 +157,8 @@
|
||||
--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;
|
||||
|
||||
@@ -414,7 +414,10 @@ button.popup-notification-dropmarker {
|
||||
--urlbar-margin-inline: 10px !important;
|
||||
position: absolute;
|
||||
|
||||
font-size: 1.5em !important;
|
||||
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);
|
||||
|
||||
@@ -446,11 +446,20 @@
|
||||
}
|
||||
|
||||
/* 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: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex-direction: row !important;
|
||||
|
||||
&::before {
|
||||
border-radius: var(--border-radius-medium);
|
||||
@@ -459,11 +468,11 @@
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
top: 4px;
|
||||
left: 2px;
|
||||
z-index: -1;
|
||||
width: calc(100% - 4px);
|
||||
height: calc(100% - 12px);
|
||||
height: calc(100% - 10px);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
@@ -473,38 +482,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
& #zen-current-workspace-indicator-icon {
|
||||
font-size: 14px;
|
||||
& .zen-current-workspace-indicator-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#zen-current-workspace-indicator-name {
|
||||
.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;
|
||||
}
|
||||
|
||||
@@ -614,7 +614,7 @@
|
||||
// Reactivate the transition after the animation
|
||||
appWrapper.removeAttribute('post-animating');
|
||||
}, 100);
|
||||
}, 500);
|
||||
}, 200);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -648,7 +648,7 @@
|
||||
|
||||
moveToAnotherTabContainerIfNecessary(event, draggedTab) {
|
||||
const pinnedTabsTarget =
|
||||
event.target.closest('#vertical-pinned-tabs-container') || event.target.closest('#zen-current-workspace-indicator');
|
||||
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');
|
||||
|
||||
@@ -717,7 +717,7 @@
|
||||
removeTabContainersDragoverClass() {
|
||||
this.dragIndicator.remove();
|
||||
this._dragIndicator = null;
|
||||
document.getElementById('zen-current-workspace-indicator').removeAttribute('open');
|
||||
ZenWorkspaces.activeWorkspaceIndicator.removeAttribute('open');
|
||||
}
|
||||
|
||||
get dragIndicator() {
|
||||
@@ -738,11 +738,11 @@
|
||||
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')) {
|
||||
if (event.target.closest('.zen-current-workspace-indicator')) {
|
||||
this.removeTabContainersDragoverClass();
|
||||
event.target.setAttribute('open', true);
|
||||
ZenWorkspaces.activeWorkspaceIndicator.setAttribute('open', true);
|
||||
} else {
|
||||
document.getElementById('zen-current-workspace-indicator').removeAttribute('open');
|
||||
ZenWorkspaces.activeWorkspaceIndicator.removeAttribute('open');
|
||||
}
|
||||
|
||||
// If there's no valid target tab, nothing to do
|
||||
|
||||
@@ -28,13 +28,18 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
this._resolvePinnedInitialized = 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]);
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
@@ -77,6 +82,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
if (!this.workspaceEnabled) {
|
||||
return;
|
||||
}
|
||||
this._pinnedTabsResizeObserver = new ResizeObserver(this.onPinnedTabsResize.bind(this));
|
||||
await this.waitForPromises();
|
||||
await this.initializeWorkspaces();
|
||||
console.info('ZenWorkspaces: ZenWorkspaces initialized');
|
||||
@@ -97,6 +103,114 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
);
|
||||
}
|
||||
|
||||
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.workspaceEnabled || !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.filter((tab) => !tab.pinned);
|
||||
for (const workspace of (await this._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}"]`
|
||||
);
|
||||
for (const tab of tabs) {
|
||||
// before to the last child (perifery)
|
||||
defaultSelectedContainer.insertBefore(tab, defaultSelectedContainer.lastChild);
|
||||
}
|
||||
this.tabContainer._invalidateCachedTabs();
|
||||
}
|
||||
perifery.setAttribute('hidden', 'true');
|
||||
this._hasInitializedTabsStrip = true;
|
||||
this.registerPinnedResizeObserver();
|
||||
}
|
||||
|
||||
_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) {
|
||||
// remove tab from list
|
||||
tabs.splice(tabs.indexOf(tab), 1);
|
||||
if (tab.pinned) {
|
||||
pinnedSection.appendChild(tab);
|
||||
} else {
|
||||
section.appendChild(tab);
|
||||
}
|
||||
}
|
||||
this.tabContainer._invalidateCachedTabs();
|
||||
}
|
||||
|
||||
initializeWorkspaceNavigation() {
|
||||
this._setupAppCommandHandlers();
|
||||
this._setupSidebarHandlers();
|
||||
@@ -256,9 +370,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
const stripWidth = document.getElementById('tabbrowser-tabs').scrollWidth;
|
||||
const translateX = Math.max(-stripWidth, Math.min(delta, stripWidth));
|
||||
|
||||
for (const element of this._animateTabsElements) {
|
||||
element.style.transform = `translateX(${translateX}px)`;
|
||||
}
|
||||
const currentWorkspace = this.activeWorkspace;
|
||||
this._organizeWorkspaceStripLocations({ uuid: currentWorkspace }, true, translateX);
|
||||
}
|
||||
|
||||
async _handleSwipeEnd(event) {
|
||||
@@ -411,6 +524,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
this.activeWorkspace = activeWorkspace?.uuid;
|
||||
}
|
||||
}
|
||||
await this.initializeTabsStripSections();
|
||||
try {
|
||||
if (activeWorkspace) {
|
||||
window.gZenThemePicker = new ZenThemePicker();
|
||||
@@ -420,11 +534,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
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();
|
||||
@@ -738,7 +850,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');
|
||||
@@ -1032,7 +1143,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,
|
||||
@@ -1189,13 +1300,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-browser-tabs-container');
|
||||
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++;
|
||||
}
|
||||
}
|
||||
@@ -1208,7 +1331,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
let tab = gZenUIManager.openAndChangeToTab(BROWSER_NEW_TAB_URL);
|
||||
|
||||
if (window.uuid) {
|
||||
tab.setAttribute('zen-workspace-id', window.uuid);
|
||||
this.moveTabToWorkspace(tab, window.uuid);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1281,26 +1404,12 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
await this._performWorkspaceChange(window, ...args);
|
||||
} finally {
|
||||
this._inChangingWorkspace = false;
|
||||
this.tabContainer.removeAttribute('dont-animate-tabs');
|
||||
}
|
||||
}
|
||||
|
||||
_cancelSwipeAnimation() {
|
||||
const existingTransform = this._animateTabsElements[0].style.transform;
|
||||
const newTransform = 'translateX(0)';
|
||||
for (const element of this._animateTabsElements) {
|
||||
gZenUIManager.motion.animate(
|
||||
element,
|
||||
{
|
||||
transform: existingTransform ? [existingTransform, newTransform] : newTransform,
|
||||
},
|
||||
{
|
||||
type: 'spring',
|
||||
bounce: 0,
|
||||
duration: 0.12,
|
||||
}
|
||||
);
|
||||
}
|
||||
const currentWorkspace = this.activeWorkspace;
|
||||
this._animateTabs({ uuid: currentWorkspace }, true);
|
||||
}
|
||||
|
||||
async _performWorkspaceChange(window, { onInit = false, alwaysChange = false, explicitAnimationDirection = undefined } = {}) {
|
||||
@@ -1317,105 +1426,123 @@ 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);
|
||||
}
|
||||
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, previousWorkspace.uuid);
|
||||
this.tabContainer._invalidateCachedTabs();
|
||||
await this._handleTabSelection(window, onInit, containerId, workspaces, previousWorkspace.uuid);
|
||||
this.tabContainer._updateVerticalPinnedTabs();
|
||||
|
||||
// Update UI and state
|
||||
await this._updateWorkspaceState(window, onInit);
|
||||
}
|
||||
|
||||
if (animationDirection) {
|
||||
await this._animateTabs(animationDirection);
|
||||
_updateMarginTopPinnedTabs(arrowscrollbox, pinnedContainer) {
|
||||
if (arrowscrollbox) {
|
||||
arrowscrollbox.style.marginTop = pinnedContainer.getBoundingClientRect().height + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
get _animateTabsElements() {
|
||||
const selector = `#zen-browser-tabs-wrapper`;
|
||||
const extraSelector = `#zen-current-workspace-indicator`;
|
||||
return [...this.tabContainer.querySelectorAll(selector), ...this.tabContainer.querySelectorAll(extraSelector)];
|
||||
}
|
||||
|
||||
async _animateTabs(direction, out = false) {
|
||||
this.tabContainer.removeAttribute('dont-animate-tabs');
|
||||
const tabsWidth = this.tabContainer.getBoundingClientRect().width;
|
||||
// order by actual position in the children list to animate
|
||||
const elements = this._animateTabsElements;
|
||||
if (out) {
|
||||
const existingTransform = elements[0].style.transform;
|
||||
const newTransform = `translateX(${direction === 'left' ? '-' : ''}${tabsWidth}px)`;
|
||||
return gZenUIManager.motion.animate(
|
||||
elements,
|
||||
{
|
||||
transform: existingTransform ? [existingTransform, newTransform] : newTransform,
|
||||
},
|
||||
{
|
||||
type: 'spring',
|
||||
bounce: 0,
|
||||
duration: 0.12,
|
||||
}
|
||||
);
|
||||
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' ? '-' : ''}${tabsWidth}px)`, 'translateX(0px)'],
|
||||
},
|
||||
{
|
||||
duration: 0.15,
|
||||
type: 'spring',
|
||||
bounce: 0,
|
||||
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(calc(${newTransform}% + ${offsetPixels}px))`;
|
||||
container.style.opacity = !newTransform;
|
||||
}
|
||||
);
|
||||
if (!justMove) {
|
||||
const pinnedContainerId = '#vertical-pinned-tabs-container ';
|
||||
const arrowScrollboxId = '#tabbrowser-arrowscrollbox ';
|
||||
const pinnedContainer = document.querySelector(pinnedContainerId + selector);
|
||||
const arrowScrollbox = document.querySelector(arrowScrollboxId + selector);
|
||||
this._updateMarginTopPinnedTabs(arrowScrollbox, pinnedContainer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
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}%)`;
|
||||
if (shouldAnimate) {
|
||||
animations.push(
|
||||
gZenUIManager.motion.animate(
|
||||
element,
|
||||
{
|
||||
transform: existingTransform ? [existingTransform, newTransform] : newTransform,
|
||||
// -0 to convert to number
|
||||
opacity: [!!offset - 0, !offset - 0],
|
||||
},
|
||||
{
|
||||
type: 'spring',
|
||||
bounce: 0,
|
||||
duration: 0.3,
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
if (offset === 0) {
|
||||
element.setAttribute('active', 'true');
|
||||
} 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) {
|
||||
@@ -1446,15 +1573,15 @@ 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;
|
||||
}
|
||||
|
||||
// Show if tab belongs to current workspace
|
||||
return tabWorkspaceId === workspaceUuid;
|
||||
return true;
|
||||
}
|
||||
|
||||
async _handleTabSelection(window, onInit, visibleTabs, containerId, workspaces, previousWorkspaceId) {
|
||||
async _handleTabSelection(window, onInit, containerId, workspaces, previousWorkspaceId) {
|
||||
const currentSelectedTab = gBrowser.selectedTab;
|
||||
const oldWorkspaceId = previousWorkspaceId;
|
||||
const lastSelectedTab = this._lastSelectedWorkspaceTabs[window.uuid];
|
||||
@@ -1465,29 +1592,18 @@ 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);
|
||||
if (!tabToSelect && visibleTabs.length) {
|
||||
tabToSelect = Array.from(visibleTabs)[visibleTabs.length - 1];
|
||||
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;
|
||||
@@ -1498,17 +1614,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
gBrowser.selectedTab = newTab;
|
||||
this._lastSelectedWorkspaceTabs[window.uuid] = newTab;
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
async _updateWorkspaceState(window, onInit) {
|
||||
// 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();
|
||||
@@ -1522,6 +1636,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
}
|
||||
}
|
||||
|
||||
await this._animateTabs(window, !onInit && !this._animatingChange);
|
||||
|
||||
// Reset bookmarks
|
||||
this._invalidateBookmarkContainers();
|
||||
|
||||
@@ -1539,22 +1655,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();
|
||||
|
||||
@@ -1588,6 +1688,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
theme: ZenThemePicker.getTheme([]),
|
||||
};
|
||||
this._prepareNewWorkspace(window);
|
||||
const perifery = document.querySelector('#tabbrowser-arrowscrollbox-periphery[hidden]');
|
||||
preifery?.removeAttribute('hidden');
|
||||
this._createWorkspaceTabsSection(window, [], perifery);
|
||||
preifery.setAttribute('hidden', 'true');
|
||||
return window;
|
||||
}
|
||||
|
||||
@@ -1598,9 +1702,23 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
let workspaceData = this._createWorkspaceData(name, isDefault, icon);
|
||||
await this.saveWorkspace(workspaceData);
|
||||
await this.changeWorkspace(workspaceData);
|
||||
this.registerPinnedResizeObserver();
|
||||
return workspaceData;
|
||||
}
|
||||
|
||||
onPinnedTabsResize(entries) {
|
||||
if (!this.workspaceEnabled) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
async onTabBrowserInserted(event) {
|
||||
let tab = event.originalTarget;
|
||||
const isEssential = tab.getAttribute('zen-essential') === 'true';
|
||||
@@ -1642,6 +1760,30 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
}
|
||||
}
|
||||
|
||||
makeSurePinTabIsInCorrectPosition() {
|
||||
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-essential') === '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();
|
||||
}
|
||||
}
|
||||
|
||||
// Context menu management
|
||||
|
||||
_contextMenuId = null;
|
||||
@@ -1777,7 +1919,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
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
|
||||
index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..f7c02c14498b4ec5fcf5521480c88abac25a2283 100644
|
||||
index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..c90119b4b248887fd8612beb9aac83c6eeb57088 100644
|
||||
--- a/browser/components/tabbrowser/content/tabbrowser.js
|
||||
+++ b/browser/components/tabbrowser/content/tabbrowser.js
|
||||
@@ -406,11 +406,39 @@
|
||||
@@ -49,7 +49,7 @@ index ff90a70bdad6c94ec4b90027ff102972d0eb28e5..f7c02c14498b4ec5fcf5521480c88aba
|
||||
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, { forceStandaloneTab: true });
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
|
||||
index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441bde7b604 100644
|
||||
index 8aeb244ffca9f48661805f5b7d860b5896055562..ab0a6a6ed80608385b4663775b4edf67709dae7d 100644
|
||||
--- a/browser/components/tabbrowser/content/tabs.js
|
||||
+++ b/browser/components/tabbrowser/content/tabs.js
|
||||
@@ -94,7 +94,7 @@
|
||||
@@ -101,7 +101,25 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
|
||||
) {
|
||||
delete draggedTab._dragData;
|
||||
return;
|
||||
@@ -1512,9 +1525,19 @@
|
||||
@@ -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 = [
|
||||
@@ -117,12 +135,35 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
|
||||
+ // 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;
|
||||
}
|
||||
|
||||
@@ -1593,6 +1616,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 = [
|
||||
@@ -130,7 +171,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
|
||||
...verticalPinnedTabsContainer.children,
|
||||
...focusableItems,
|
||||
];
|
||||
@@ -1617,8 +1641,8 @@
|
||||
@@ -1617,8 +1643,8 @@
|
||||
#isContainerVerticalPinnedExpanded(tab) {
|
||||
return (
|
||||
this.verticalMode &&
|
||||
@@ -141,7 +182,25 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1816,7 +1840,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);
|
||||
};
|
||||
@@ -150,7 +209,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
|
||||
if (tab && rect(tab).width <= this._tabClipWidth) {
|
||||
this.setAttribute("closebuttons", "activetab");
|
||||
} else {
|
||||
@@ -1832,6 +1856,7 @@
|
||||
@@ -1832,6 +1858,7 @@
|
||||
this.arrowScrollbox.ensureElementIsVisible(selectedTab, aInstant);
|
||||
}
|
||||
|
||||
@@ -158,7 +217,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
|
||||
selectedTab._notselectedsinceload = false;
|
||||
}
|
||||
|
||||
@@ -1843,7 +1868,7 @@
|
||||
@@ -1843,7 +1870,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -167,7 +226,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
|
||||
if (!tabs.length) {
|
||||
return;
|
||||
}
|
||||
@@ -1879,7 +1904,7 @@
|
||||
@@ -1879,7 +1906,7 @@
|
||||
if (isEndTab && !this._hasTabTempMaxWidth) {
|
||||
return;
|
||||
}
|
||||
@@ -176,7 +235,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
|
||||
// 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.
|
||||
@@ -1894,7 +1919,7 @@
|
||||
@@ -1894,7 +1921,7 @@
|
||||
let tabsToReset = [];
|
||||
for (let i = numPinned; i < tabs.length; i++) {
|
||||
let tab = tabs[i];
|
||||
@@ -185,22 +244,40 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
|
||||
if (!isEndTab) {
|
||||
// keep tabs the same width
|
||||
tab.style.transition = "none";
|
||||
@@ -1965,11 +1990,11 @@
|
||||
);
|
||||
@@ -1960,16 +1987,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) {
|
||||
- let tabs = this.visibleTabs;
|
||||
+ if (gBrowser.pinnedTabCount !== (verticalTabsContainer.children.length + document.getElementById("zen-essentials-container").children.length)) {
|
||||
+ ZenWorkspaces.makeSurePinTabIsInCorrectPosition();
|
||||
+ if (gBrowser.pinnedTabCount !== (verticalTabsContainer.children.length - 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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1992,8 +2017,8 @@
|
||||
@@ -1977,9 +2003,7 @@
|
||||
}
|
||||
|
||||
_resetVerticalPinnedTabs() {
|
||||
- let verticalTabsContainer = document.getElementById(
|
||||
- "vertical-pinned-tabs-container"
|
||||
- );
|
||||
+ let verticalTabsContainer = this.verticalPinnedTabsContainer;
|
||||
|
||||
if (!verticalTabsContainer.children.length) {
|
||||
return;
|
||||
@@ -1992,8 +2016,8 @@
|
||||
}
|
||||
|
||||
_positionPinnedTabs() {
|
||||
@@ -211,7 +288,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
|
||||
let absPositionHorizontalTabs =
|
||||
this.overflowing && tabs.length > numPinned && numPinned > 0;
|
||||
|
||||
@@ -2074,7 +2099,7 @@
|
||||
@@ -2074,7 +2098,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -220,7 +297,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
|
||||
|
||||
let directionX = screenX > dragData.animLastScreenX;
|
||||
let directionY = screenY > dragData.animLastScreenY;
|
||||
@@ -2257,9 +2282,9 @@
|
||||
@@ -2257,9 +2281,9 @@
|
||||
}
|
||||
|
||||
let pinned = draggedTab.pinned;
|
||||
@@ -233,7 +310,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
|
||||
pinned ? numPinned : undefined
|
||||
);
|
||||
|
||||
@@ -2502,8 +2527,9 @@
|
||||
@@ -2502,8 +2526,9 @@
|
||||
);
|
||||
}
|
||||
|
||||
@@ -245,7 +322,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -2668,9 +2694,9 @@
|
||||
@@ -2668,9 +2693,9 @@
|
||||
function newIndex(aTab, index) {
|
||||
// Don't allow mixing pinned and unpinned tabs.
|
||||
if (aTab.pinned) {
|
||||
@@ -257,7 +334,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2754,7 +2780,7 @@
|
||||
@@ -2754,7 +2779,7 @@
|
||||
}
|
||||
|
||||
_notifyBackgroundTab(aTab) {
|
||||
@@ -266,7 +343,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -2772,12 +2798,14 @@
|
||||
@@ -2772,12 +2797,14 @@
|
||||
selectedTab = {
|
||||
left: selectedTab.left,
|
||||
right: selectedTab.right,
|
||||
@@ -282,7 +359,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
|
||||
selectedTab,
|
||||
];
|
||||
})
|
||||
@@ -2794,8 +2822,11 @@
|
||||
@@ -2794,8 +2821,11 @@
|
||||
delete this._lastTabToScrollIntoView;
|
||||
// Is the new tab already completely visible?
|
||||
if (
|
||||
@@ -296,7 +373,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441
|
||||
) {
|
||||
return;
|
||||
}
|
||||
@@ -2803,21 +2834,29 @@
|
||||
@@ -2803,21 +2833,29 @@
|
||||
if (this.arrowScrollbox.smoothScroll) {
|
||||
// Can we make both the new tab and the selected tab completely visible?
|
||||
if (
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
|
||||
index 96f930638c04c7ddcc8dc1a7fe4dce8b12a325e6..64487674de1afb711258a36757508cd9b741fcd9 100644
|
||||
index 96f930638c04c7ddcc8dc1a7fe4dce8b12a325e6..9e11e715ade485c33ba4c8f719b41002f3008dde 100644
|
||||
--- a/browser/themes/shared/tabbrowser/tabs.css
|
||||
+++ b/browser/themes/shared/tabbrowser/tabs.css
|
||||
@@ -33,7 +33,7 @@
|
||||
@@ -64,6 +64,15 @@ index 96f930638c04c7ddcc8dc1a7fe4dce8b12a325e6..64487674de1afb711258a36757508cd9
|
||||
direction: rtl;
|
||||
mask-image: linear-gradient(to right, transparent, black var(--tab-label-mask-size));
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
@@ -73,6 +82,15 @@ index 96f930638c04c7ddcc8dc1a7fe4dce8b12a325e6..64487674de1afb711258a36757508cd9
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -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 @@
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user