ZenBrowserMirrors/zen-desktop
1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-09 19:05:29 +02:00
Code Releases Wiki Activity

Enhance animations and sidebar panel styles for improved UI transitions

Browse source
This commit is contained in:
mr. M 2024-11-28 18:29:22 +01:00
parent 63a2ccf3da
commit f35cc90ea4
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
8 changed files with 134 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/browser/base/content/zen-styles/zen-animations.css
View file

@ -56,7 +56,18 @@
@keyframes zen-slide-in {
from {
transform: translateX(-30px);
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes zen-slide-in-reverse {
from {
transform: translateX(100%);
opacity: 0;
}
to {
@ -228,9 +239,9 @@
height: 0%;
}
70% {
80% {
/* make the box grow to full width/height */
opacity: .5;
opacity: 1;
transform: translate(-50%, -50%) translateZ(0);
top: 50%;
left: 50%;
@ -253,31 +264,22 @@
0% {
/* make the box shrink to final width/height and x/y coordinates */
transform: translate(-50%, -50%) translateZ(0);
opacity: 1;
width: 85%;
height: 100%;
top: 50%;
left: 50%;
}
50% {
/* make the box grow to full width/height */
opacity: 1;
transform: translate(-50%, -50%) translateZ(0);
top: 50%;
left: 50%;
width: 87%;
height: 102%;
}
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%;
transform: translate(-50%, -50%) translateZ(0);
width: 0%;
height: 0%;
opacity: 0;
}
}
@ -293,10 +295,10 @@
to {
width: 100%;
height: 100%;
top: 0;
left: 0;
top: 50%;
left: 50%;
opacity: 1;
transform: none;
transform: translate(-50%, -50%);
}
}

3
src/browser/base/content/zen-styles/zen-browser-container.css
View file

@ -4,6 +4,9 @@
border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
position: relative;
/* For glance */
transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
overflow: hidden;
margin: 1px;

3
src/browser/base/content/zen-styles/zen-glance.css
View file

@ -5,7 +5,6 @@
}
.zen-glance-background {
transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
transform: scale(0.98);
backdrop-filter: blur(5px);
opacity: 0.6;
@ -28,7 +27,7 @@
& .browserContainer {
opacity: 1;
animation: zen-glance-content-animation-out .5s ease-in-out forwards !important;
animation: zen-glance-content-animation-out .3s ease-in-out forwards !important;
& browser {
opacity: 1 !important;

2
src/browser/base/content/zen-styles/zen-sidebar-panels.css
View file

@ -277,7 +277,7 @@
}
:root:not([zen-right-side='true']) {
#zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[pinned='true'])) {
#zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel:is([hidden='true'], [pinned='true']))) {
margin-left: 0 !important;
margin-right: calc(var(--zen-element-separation) * 2 - 3px) !important;
}

14
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View file

@ -215,7 +215,21 @@
}
& .tabbrowser-tab {
animation: none;
transition: none;
&[fadein='true']:not([zen-essential='true']) {
#tabbrowser-tabs[zen-workspace-animation='previous'] & {
animation: zen-slide-in-reverse 0.2s ease-in-out;
}
#tabbrowser-tabs[zen-workspace-animation='next'] & {
animation: zen-slide-in 0.2s ease-in-out;
}
&[pinned] {
animation-delay: .03s !important;
}
}
max-width: unset;
padding: 0 !important;

16
src/browser/base/zen-components/ZenWorkspaces.mjs
View file

@ -1106,6 +1106,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
async _performWorkspaceChange(window, onInit) {
const previousWorkspace = await this.getActiveWorkspace();
this.activeWorkspace = window.uuid;
const containerId = window.containerTabId?.toString();
const workspaces = await this._workspaces();
@ -1121,6 +1123,20 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
// Update UI and state
await this._updateWorkspaceState(window, onInit);
// Animate acordingly
if (previousWorkspace && !this._animatingChange) {
// we want to know if we are moving forward or backward in sense of animation
let isNextWorkspace = onInit ||
(workspaces.workspaces.findIndex((w) => w.uuid === previousWorkspace.uuid)
< workspaces.workspaces.findIndex((w) => w.uuid === window.uuid));
gBrowser.tabContainer.setAttribute('zen-workspace-animation', isNextWorkspace ? 'next' : 'previous');
this._animatingChange = true;
setTimeout(() => {
this._animatingChange = false;
gBrowser.tabContainer.removeAttribute('zen-workspace-animation');
}, 300);
}
}

53
src/browser/components/tabbrowser/content/tabbrowser-js.patch
View file

@ -1,8 +1,8 @@
diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338e14216df 100644
index fec3dc8129a4d235fdd05e0390145a02064ebaa5..636b56754f48c1ec931152cf34bab8414a75cebc 100644
--- a/browser/components/tabbrowser/content/tabbrowser.js
+++ b/browser/components/tabbrowser/content/tabbrowser.js
@@ -462,11 +462,26 @@
@@ -402,11 +402,26 @@
return count;
},
@ -31,7 +31,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
}
return i;
},
@@ -860,7 +875,7 @@
@@ -800,7 +815,7 @@
if (this.tabContainer.verticalMode) {
let wasFocused = document.activeElement == this.selectedTab;
let oldPosition = aTab._tPos;
@ -40,7 +40,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
this._updateAfterMoveTabTo(aTab, oldPosition, wasFocused);
} else {
this.moveTabTo(aTab, this.pinnedTabCount);
@@ -1107,6 +1122,7 @@
@@ -1047,6 +1062,7 @@
let LOCAL_PROTOCOLS = ["chrome:", "about:", "resource:", "data:"];
@ -48,7 +48,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
if (
aIconURL &&
!aLoadingPrincipal &&
@@ -1117,6 +1133,9 @@
@@ -1057,6 +1073,9 @@
);
return;
}
@ -58,7 +58,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
let browser = this.getBrowserForTab(aTab);
browser.mIconURL = aIconURL;
@@ -1346,6 +1365,7 @@
@@ -1286,6 +1305,7 @@
if (!this._previewMode) {
newTab.recordTimeFromUnloadToReload();
newTab.updateLastAccessed();
@ -66,7 +66,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
oldTab.updateLastAccessed();
// if this is the foreground window, update the last-seen timestamps.
if (this.ownerGlobal == BrowserWindowTracker.getTopWindow()) {
@@ -2431,7 +2451,7 @@
@@ -2371,7 +2391,7 @@
let panel = this.getPanel(browser);
let uniqueId = this._generateUniquePanelID();
@ -75,7 +75,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
aTab.linkedPanel = uniqueId;
// Inject the <browser> into the DOM if necessary.
@@ -2491,7 +2511,7 @@
@@ -2431,7 +2451,7 @@
// hasSiblings=false on both the existing browser and the new browser.
if (this.tabs.length == 2) {
this.tabs[0].linkedBrowser.browsingContext.hasSiblings = true;
@ -84,7 +84,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
} else {
aTab.linkedBrowser.browsingContext.hasSiblings = this.tabs.length > 1;
}
@@ -2711,6 +2731,11 @@
@@ -2651,6 +2671,11 @@
);
}
@ -96,7 +96,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
if (!UserInteraction.running("browser.tabs.opening", window)) {
UserInteraction.start("browser.tabs.opening", "initting", window);
}
@@ -2780,6 +2805,9 @@
@@ -2720,6 +2745,9 @@
noInitialLabel,
skipBackgroundNotify,
});
@ -106,7 +106,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
if (insertTab) {
// insert the tab into the tab container in the correct position
this._insertTabAtIndex(t, {
@@ -3291,6 +3319,23 @@
@@ -3342,6 +3370,23 @@
) {
tabWasReused = true;
tab = this.selectedTab;
@ -130,7 +130,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
if (!tabData.pinned) {
this.unpinTab(tab);
} else {
@@ -3304,6 +3349,9 @@
@@ -3355,6 +3400,9 @@
restoreTabsLazily && !select && !tabData.pinned;
let url = "about:blank";
@ -140,7 +140,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
if (tabData.entries?.length) {
let activeIndex = (tabData.index || tabData.entries.length) - 1;
// Ensure the index is in bounds.
@@ -3340,6 +3388,21 @@
@@ -3391,6 +3439,21 @@
preferredRemoteType,
});
@ -162,7 +162,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
if (select) {
tabToSelect = tab;
}
@@ -3374,7 +3437,6 @@
@@ -3444,7 +3507,6 @@
this.tabContainer._invalidateCachedTabs();
}
}
@ -170,7 +170,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
tab.initialize();
}
@@ -3831,6 +3893,10 @@
@@ -3992,6 +4054,10 @@
return;
}
@ -181,7 +181,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
this.removeTabs(selectedTabs);
},
@@ -4148,6 +4214,13 @@
@@ -4309,6 +4375,13 @@
TelemetryStopwatch.start("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
}
@ -195,7 +195,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
// Handle requests for synchronously removing an already
// asynchronously closing tab.
if (!animate && aTab.closing) {
@@ -4163,6 +4236,10 @@
@@ -4324,6 +4397,10 @@
// state).
let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
@ -206,7 +206,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
if (
!this._beginRemoveTab(aTab, {
closeWindowFastpath: true,
@@ -4311,7 +4388,7 @@
@@ -4472,7 +4549,7 @@
var closeWindow = false;
var newTab = false;
@ -215,7 +215,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
closeWindow =
closeWindowWithLastTab != null
? closeWindowWithLastTab
@@ -5123,10 +5200,10 @@
@@ -5265,10 +5342,10 @@
SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
},
@ -228,7 +228,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
aTab.selected ||
aTab.closing ||
// Tabs that are sharing the screen, microphone or camera cannot be hidden.
@@ -7042,6 +7119,7 @@
@@ -7181,6 +7258,7 @@
aWebProgress.isTopLevel
) {
this.mTab.setAttribute("busy", "true");
@ -236,7 +236,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
gBrowser._tabAttrModified(this.mTab, ["busy"]);
this.mTab._notselectedsinceload = !this.mTab.selected;
gBrowser.syncThrobberAnimations(this.mTab);
@@ -7874,7 +7952,7 @@ var TabContextMenu = {
@@ -8114,7 +8192,7 @@ var TabContextMenu = {
);
contextUnpinSelectedTabs.hidden =
!this.contextTab.pinned || !multiselectionContext;
@ -245,7 +245,16 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
// Move Tab items
let contextMoveTabOptions = document.getElementById(
"context_moveTabOptions"
@@ -8136,6 +8214,7 @@ var TabContextMenu = {
@@ -8148,7 +8226,7 @@ var TabContextMenu = {
let contextMoveTabToStart = document.getElementById("context_moveToStart");
let isFirstTab =
tabsToMove[0] == visibleTabs[0] ||
- tabsToMove[0] == visibleTabs[gBrowser.pinnedTabCount];
+ tabsToMove[0] == visibleTabs[gBrowser._numVisiblePinTabs];
contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent;
document.getElementById("context_openTabInWindow").disabled =
@@ -8376,6 +8454,7 @@ var TabContextMenu = {
if (this.contextTab.multiselected) {
gBrowser.removeMultiSelectedTabs();
} else {

47
src/browser/components/tabbrowser/content/tabs-js.patch
View file

@ -1,7 +1,16 @@
diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
index f9e256b143786c18ba85859ca1b11182ab23f1aa..82368b940a6f2c526c471c0e4cc608b836cedbbd 100644
index f9e256b143786c18ba85859ca1b11182ab23f1aa..f60a8850305f1d7c2eadb6ac6996302f42a08a8a 100644
--- a/browser/components/tabbrowser/content/tabs.js
+++ b/browser/components/tabbrowser/content/tabs.js
@@ -541,7 +541,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
- let pinnedTabs = this.visibleTabs.slice(0, gBrowser.pinnedTabCount);
+ let pinnedTabs = this.visibleTabs.slice(0, gBrowser._numVisiblePinTabs);
let tabsPerRow = 0;
let position = 0;
for (let pinnedTab of pinnedTabs) {
@@ -918,7 +918,7 @@
let postTransitionCleanup = () => {
tab.removeAttribute("tabdrop-samewindow");
@ -55,6 +64,15 @@ index f9e256b143786c18ba85859ca1b11182ab23f1aa..82368b940a6f2c526c471c0e4cc608b8
selectedTab._notselectedsinceload = false;
}
@@ -1571,7 +1574,7 @@
if (isEndTab && !this._hasTabTempMaxWidth) {
return;
}
- let numPinned = gBrowser.pinnedTabCount;
+ let numPinned = gBrowser._numVisiblePinTabs;
// 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.
@@ -1586,7 +1589,7 @@
let tabsToReset = [];
for (let i = numPinned; i < tabs.length; i++) {
@ -80,6 +98,33 @@ index f9e256b143786c18ba85859ca1b11182ab23f1aa..82368b940a6f2c526c471c0e4cc608b8
}
}
@@ -1681,7 +1684,7 @@
_positionPinnedTabs() {
let tabs = this.visibleTabs;
- let numPinned = gBrowser.pinnedTabCount;
+ let numPinned = gBrowser._numVisiblePinTabs;
let absPositionHorizontalTabs =
this.overflowing && tabs.length > numPinned && numPinned > 0;
@@ -1762,7 +1765,7 @@
return;
}
- let tabs = this.visibleTabs.slice(0, gBrowser.pinnedTabCount);
+ let tabs = this.visibleTabs.slice(0, gBrowser._numVisiblePinTabs);
let directionX = screenX > dragData.animLastScreenX;
let directionY = screenY > dragData.animLastScreenY;
@@ -1948,7 +1951,7 @@
}
let pinned = draggedTab.pinned;
- let numPinned = gBrowser.pinnedTabCount;
+ let numPinned = gBrowser._numVisiblePinTabs;
let tabs = this.visibleTabs.slice(
pinned ? 0 : numPinned,
pinned ? numPinned : undefined
@@ -2140,8 +2143,8 @@
);
}