mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-06 18:06:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor media controls layout and styles; improve visibility and responsiveness

Browse Source
This commit is contained in:
mr. M
2025-03-15 13:40:09 +01:00
parent e780eee207
commit d234e6a701
8 changed files with 169 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/browser/base/content/zen-media-player.inc.xhtml
View File

@@ -5,6 +5,7 @@
hidden="true">
<toolbaritem>
<vbox id="zen-media-main-vbox">
<vbox>
<vbox id="zen-media-info-vbox" class="show-on-hover">
<label id="zen-media-title" fadein="true"/>
<label id="zen-media-artist" fadein="true"/>
@@ -17,6 +18,7 @@
onchange="gZenMediaController.onMediaSeekComplete(event);"/>
<label id="zen-media-duration">0:00</label>
</hbox>
</vbox>
<hbox id="zen-media-controls-hbox">
<toolbarbutton id="zen-media-focus-button"
class="toolbarbutton-1"

46
src/browser/base/content/zen-styles/zen-media-controls.css
View File

@@ -60,13 +60,12 @@
&:hover {
& #zen-media-main-vbox {
transition-delay: 0s;
gap: 8px;
gap: 6px;
}
.show-on-hover {
max-height: 50px;
padding: 2px 6px;
padding-top: 6px;
padding: 5px;
margin-bottom: 0;
opacity: 1;
transform: translateY(0) !important;
@@ -74,7 +73,7 @@
}
}
&.playing:not([muted]) #zen-media-focus-button:not(:hover)::after {
& #zen-media-focus-button::after {
content: '';
position: absolute;
width: 100%;
@@ -87,6 +86,12 @@
transform: translateX(-50%);
z-index: 0;
pointer-events: none;
transition: opacity .8s ease;
opacity: 1;
}
&:is(:not(.playing:not([muted])), :hover) #zen-media-focus-button::after {
opacity: 0;
}
#zen-media-focus-button {
@@ -105,12 +110,11 @@
position: absolute;
left: 0;
bottom: 0;
padding: 4px;
padding: 5px;
border-radius: var(--border-radius-medium);
background: var(--zen-media-control-bg) !important;
width: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.show-on-hover {
@@ -156,14 +160,16 @@
#zen-media-artist {
opacity: 0.7;
font-weight: 500;
font-size: smaller;
&:empty {
display: none;
}
}
#zen-media-title {
height: 16px;
font-size: math;
font-weight: bold;
}
#zen-media-main-vbox,
@@ -173,15 +179,32 @@
}
#zen-media-info-vbox {
#zen-media-controls-toolbar:not([media-position-hidden='true']) & {
transition-delay: 0.01s !important;
transform: translateY(-0.4rem) !important;
transform: translateY(-0.4rem);
}
overflow-x: hidden;
overflow-x: visible;
white-space: nowrap;
/* Overflow inner box shadow from the left to simulate overflow */
mask-image: linear-gradient(to left, transparent, var(--zen-media-control-bg) 0.6em);
&::before {
content: '';
position: absolute;
width: 0.6em;
background: linear-gradient(to right, var(--zen-media-control-bg) 0%, transparent 100%);
pointer-events: none;
top: 6px;
left: -2px;
height: calc(100% - 6px);
z-index: 1;
}
& label {
min-height: 16px;
margin-left: 0;
font-weight: 500;
animation: zen-marquee-h 10s ease-in-out infinite;
}
}
@@ -191,7 +214,6 @@
justify-content: space-between;
transition: gap 0.3s ease;
gap: 0px;
mask-image: linear-gradient(to right, transparent, var(--zen-media-control-bg) 0.6em);
}
#zen-media-progress-hbox {
@@ -199,6 +221,10 @@
height: 1.1rem;
align-items: center;
padding-top: 0px !important;
#zen-media-controls-toolbar[media-position-hidden='true'] & {
display: none;
}
}
#zen-media-controls-hbox {

4
src/browser/base/zen-components/ZenMediaController.mjs
View File

@@ -219,8 +219,8 @@ class ZenMediaController {
this._mediaUpdateInterval = null;
}
if (this._currentDuration >= 900_000) return this.mediaProgressBarContainer.setAttribute('hidden', 'true');
else this.mediaProgressBarContainer.removeAttribute('hidden');
if (this._currentDuration >= 900_000) return this.mediaControlBar.setAttribute('media-position-hidden', 'true');
else this.mediaControlBar.removeAttribute('media-position-hidden');
this.mediaCurrentTime.textContent = this.formatSecondsToTime(this._currentPosition);
this.mediaDuration.textContent = this.formatSecondsToTime(this._currentDuration);

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

@@ -36,10 +36,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
this._resolveInitialized = resolve;
});
promiseEmptyTabInitialized = new Promise((resolve) => {
this._resolveEmptyTabInitialized = resolve;
});
workspaceIndicatorXUL = `
<hbox class="zen-current-workspace-indicator-icon"></hbox>
<hbox class="zen-current-workspace-indicator-name"></hbox>
@@ -621,11 +617,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (Services.prefs.getBoolPref('zen.workspaces.disable_empty_state_for_testing', false)) {
return;
}
if (this._initialTab) {
this.moveTabToWorkspace(this._initialTab, this.activeWorkspace);
gBrowser.selectedTab = this._initialTab;
gBrowser.moveTabTo(this._initialTab, 0, { forceStandaloneTab: true });
this._initialTab._possiblyEmpty = false;
this._initialTab = null;
}
const currentTab = gBrowser.selectedTab;
let showed = false;
await this.promiseEmptyTabInitialized;
this._resolveEmptyTabInitialized = null;
this.promiseEmptyTabInitialized = null;
if (currentTab.pinned) {
this.selectEmptyTab();
try {
@@ -640,8 +640,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (
(currentTab.isEmpty &&
(currentTab.getAttribute('image') === gPageIcons[currentTabURL] || !currentTab.hasAttribute('image'))) ||
currentTab.hasAttribute('zen-empty-tab') ||
(currentTab._possibleEmptyTab && currentTab.isEmpty)
currentTab._possiblyEmpty
) {
this.selectEmptyTab();
this._removedByStartupPage = true;
@@ -654,6 +653,14 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
}
handleInitialTab(tab, isEmpty) {
if (isEmpty) {
tab._possiblyEmpty = true;
} else {
this._initialTab = tab;
}
}
initIndicatorContextMenu(indicator) {
const th = (event) => {
event.preventDefault();

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

@@ -1,5 +1,5 @@
diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991bacb7b545 100644
index 628aa6596627c85efe361fc1ece8fd58f7ee653e..06a4aae50ebe8a42d08d4689d8e80a63af1fa8a3 100644
--- a/browser/components/tabbrowser/content/tabbrowser.js
+++ b/browser/components/tabbrowser/content/tabbrowser.js
@@ -412,11 +412,50 @@
@@ -55,7 +55,15 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
}
return i;
}
@@ -811,12 +850,13 @@
@@ -546,6 +585,7 @@
this.tabpanels.appendChild(panel);
let tab = this.tabs[0];
+ ZenWorkspaces.handleInitialTab(tab, (!remoteType || remoteType === E10SUtils.PRIVILEGEDABOUT_REMOTE_TYPE) && !Services.prefs.getBoolPref('zen.workspaces.disable_empty_state_for_testing', false));
tab.linkedPanel = uniqueId;
this._selectedTab = tab;
this._selectedBrowser = browser;
@@ -811,12 +851,13 @@
}
this.showTab(aTab);
@@ -73,7 +81,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
this.moveTabTo(aTab, this.pinnedTabCount, { forceStandaloneTab: true });
}
aTab.setAttribute("pinned", "true");
@@ -830,12 +870,15 @@
@@ -830,12 +871,15 @@
}
if (this.tabContainer.verticalMode) {
@@ -90,7 +98,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
});
} else {
this.moveTabTo(aTab, this.pinnedTabCount - 1, {
@@ -1018,6 +1061,8 @@
@@ -1018,6 +1062,8 @@
let LOCAL_PROTOCOLS = ["chrome:", "about:", "resource:", "data:"];
@@ -99,7 +107,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (
aIconURL &&
!aLoadingPrincipal &&
@@ -1028,6 +1073,9 @@
@@ -1028,6 +1074,9 @@
);
return;
}
@@ -109,7 +117,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
let browser = this.getBrowserForTab(aTab);
browser.mIconURL = aIconURL;
@@ -1273,6 +1321,7 @@
@@ -1273,6 +1322,7 @@
if (!this._previewMode) {
newTab.recordTimeFromUnloadToReload();
newTab.updateLastAccessed();
@@ -117,7 +125,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
oldTab.updateLastAccessed();
// if this is the foreground window, update the last-seen timestamps.
if (this.ownerGlobal == BrowserWindowTracker.getTopWindow()) {
@@ -1425,6 +1474,9 @@
@@ -1425,6 +1475,9 @@
}
let activeEl = document.activeElement;
@@ -127,7 +135,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
// If focus is on the old tab, move it to the new tab.
if (activeEl == oldTab) {
newTab.focus();
@@ -1748,7 +1800,7 @@
@@ -1748,7 +1801,7 @@
}
_setTabLabel(aTab, aLabel, { beforeTabOpen, isContentTitle, isURL } = {}) {
@@ -136,7 +144,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
return false;
}
@@ -1851,7 +1903,7 @@
@@ -1851,7 +1904,7 @@
newIndex = this.selectedTab._tPos + 1;
}
@@ -145,7 +153,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
let browser;
if (targetTab) {
browser = this.getBrowserForTab(targetTab);
@@ -2108,6 +2160,7 @@
@@ -2108,6 +2161,7 @@
uriIsAboutBlank,
userContextId,
skipLoad,
@@ -153,7 +161,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
} = {}) {
let b = document.createXULElement("browser");
// Use the JSM global to create the permanentKey, so that if the
@@ -2181,8 +2234,7 @@
@@ -2181,8 +2235,7 @@
// we use a different attribute name for this?
b.setAttribute("name", name);
}
@@ -163,7 +171,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
b.setAttribute("transparent", "true");
}
@@ -2347,7 +2399,7 @@
@@ -2347,7 +2400,7 @@
let panel = this.getPanel(browser);
let uniqueId = this._generateUniquePanelID();
@@ -172,7 +180,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
aTab.linkedPanel = uniqueId;
// Inject the <browser> into the DOM if necessary.
@@ -2406,8 +2458,8 @@
@@ -2406,8 +2459,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) {
@@ -183,7 +191,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
} else {
aTab.linkedBrowser.browsingContext.hasSiblings = this.tabs.length > 1;
}
@@ -2629,6 +2681,7 @@
@@ -2629,6 +2682,7 @@
schemelessInput,
hasValidUserGestureActivation = false,
textDirectiveUserActivation = false,
@@ -191,7 +199,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
} = {}
) {
// all callers of addTab that pass a params object need to pass
@@ -2639,6 +2692,12 @@
@@ -2639,6 +2693,12 @@
);
}
@@ -204,7 +212,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (!UserInteraction.running("browser.tabs.opening", window)) {
UserInteraction.start("browser.tabs.opening", "initting", window);
}
@@ -2702,6 +2761,15 @@
@@ -2702,6 +2762,15 @@
noInitialLabel,
skipBackgroundNotify,
});
@@ -220,7 +228,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (insertTab) {
// insert the tab into the tab container in the correct position
this._insertTabAtIndex(t, {
@@ -2726,6 +2794,7 @@
@@ -2726,6 +2795,7 @@
initialBrowsingContextGroupId,
openWindowInfo,
skipLoad,
@@ -228,7 +236,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
}));
if (focusUrlBar) {
@@ -2845,6 +2914,9 @@
@@ -2845,6 +2915,9 @@
}
}
@@ -238,7 +246,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
// Additionally send pinned tab events
if (pinned) {
this._notifyPinnedStatus(t);
@@ -2904,6 +2976,7 @@
@@ -2904,6 +2977,7 @@
label = "",
insertBefore = null,
showCreateUI = false,
@@ -246,7 +254,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
} = {}
) {
if (!tabs?.length) {
@@ -2918,7 +2991,12 @@
@@ -2918,7 +2992,12 @@
id = `${Date.now()}-${Math.round(Math.random() * 100)}`;
}
let group = this._createTabGroup(id, color, false, label);
@@ -260,7 +268,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
group,
insertBefore?.group ?? insertBefore
);
@@ -3126,6 +3204,7 @@
@@ -3126,6 +3205,7 @@
initialBrowsingContextGroupId,
openWindowInfo,
skipLoad,
@@ -268,7 +276,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
}
) {
// If we don't have a preferred remote type, and we have a remote
@@ -3189,6 +3268,7 @@
@@ -3189,6 +3269,7 @@
openWindowInfo,
name,
skipLoad,
@@ -276,7 +284,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
});
}
@@ -3367,6 +3447,27 @@
@@ -3367,6 +3448,27 @@
) {
tabWasReused = true;
tab = this.selectedTab;
@@ -304,7 +312,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (!tabData.pinned) {
this.unpinTab(tab);
} else {
@@ -3380,6 +3481,7 @@
@@ -3380,6 +3482,7 @@
restoreTabsLazily && !select && !tabData.pinned;
let url = "about:blank";
@@ -312,7 +320,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (tabData.entries?.length) {
let activeIndex = (tabData.index || tabData.entries.length) - 1;
// Ensure the index is in bounds.
@@ -3415,7 +3517,27 @@
@@ -3415,7 +3518,27 @@
skipLoad: true,
preferredRemoteType,
});
@@ -341,7 +349,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (select) {
tabToSelect = tab;
}
@@ -3428,8 +3550,8 @@
@@ -3428,8 +3551,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) {
@@ -352,17 +360,17 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
tab.toggleAttribute("pinned", true);
this.tabContainer._invalidateCachedTabs();
// Then ensure all the tab open/pinning information is sent.
@@ -3504,6 +3626,9 @@
@@ -3504,6 +3627,9 @@
this.selectedTab = tabToSelect;
this.removeTab(leftoverTab);
}
+ else {
+ this.selectedTab._possibleEmptyTab = true; // Not needed, but just in case.
+ this.selectedTab._possiblyEmpty = this.selectedTab.isEmpty; // Not needed, but just in case.
+ }
if (tabs.length > 1 || !tabs[0].selected) {
this._updateTabsAfterInsert();
@@ -3693,7 +3818,7 @@
@@ -3693,7 +3819,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.
@@ -371,7 +379,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (
!bulkOrderedOpen &&
((openerTab &&
@@ -3736,18 +3861,18 @@
@@ -3736,18 +3862,18 @@
// Ensure index is within bounds.
if (tab.pinned) {
@@ -394,7 +402,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (tabAfter && tabAfter.group == tabGroup) {
// Place at the front of, or between tabs in, the same tab group
this.tabContainer.insertBefore(tab, tabAfter);
@@ -4059,6 +4184,9 @@
@@ -4059,6 +4185,9 @@
return;
}
@@ -404,7 +412,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
this.removeTabs(selectedTabs);
}
@@ -4391,6 +4519,7 @@
@@ -4391,6 +4520,7 @@
skipSessionStore,
} = {}
) {
@@ -412,7 +420,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (UserInteraction.running("browser.tabs.opening", window)) {
UserInteraction.finish("browser.tabs.opening", window);
}
@@ -4407,6 +4536,12 @@
@@ -4407,6 +4537,12 @@
TelemetryStopwatch.start("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
}
@@ -425,7 +433,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
// Handle requests for synchronously removing an already
// asynchronously closing tab.
if (!animate && aTab.closing) {
@@ -4421,7 +4556,9 @@
@@ -4421,7 +4557,9 @@
// frame created for it (for example, by updating the visually selected
// state).
let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
@@ -436,7 +444,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (
!this._beginRemoveTab(aTab, {
closeWindowFastpath: true,
@@ -4435,7 +4572,6 @@
@@ -4435,7 +4573,6 @@
TelemetryStopwatch.cancel("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
return;
}
@@ -444,7 +452,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
let lockTabSizing =
!this.tabContainer.verticalMode &&
!aTab.pinned &&
@@ -4574,14 +4710,14 @@
@@ -4574,14 +4711,14 @@
!!this.tabsInCollapsedTabGroups.length;
if (
aTab.visible &&
@@ -461,7 +469,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (closeWindow) {
// We've already called beforeunload on all the relevant tabs if we get here,
@@ -4605,6 +4741,7 @@
@@ -4605,6 +4742,7 @@
newTab = true;
}
@@ -469,7 +477,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
aTab._endRemoveArgs = [closeWindow, newTab];
// swapBrowsersAndCloseOther will take care of closing the window without animation.
@@ -4645,9 +4782,7 @@
@@ -4645,9 +4783,7 @@
aTab._mouseleave();
if (newTab) {
@@ -480,7 +488,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
} else {
TabBarVisibility.update();
}
@@ -4776,6 +4911,8 @@
@@ -4776,6 +4912,8 @@
this.tabs[i]._tPos = i;
}
@@ -489,7 +497,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (!this._windowIsClosing) {
if (wasPinned) {
this.tabContainer._positionPinnedTabs();
@@ -4994,7 +5131,7 @@
@@ -4994,7 +5132,7 @@
!excludeTabs.has(aTab.owner) &&
Services.prefs.getBoolPref("browser.tabs.selectOwnerOnClose")
) {
@@ -498,7 +506,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
}
// Try to find a remaining tab that comes after the given tab
@@ -5016,7 +5153,7 @@
@@ -5016,7 +5154,7 @@
}
if (tab) {
@@ -507,7 +515,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
}
// If no qualifying visible tab was found, see if there is a tab in
@@ -5434,10 +5571,10 @@
@@ -5434,10 +5572,10 @@
SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
}
@@ -520,7 +528,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
aTab.selected ||
aTab.closing ||
// Tabs that are sharing the screen, microphone or camera cannot be hidden.
@@ -5675,7 +5812,7 @@
@@ -5675,7 +5813,7 @@
// Don't allow mixing pinned and unpinned tabs.
if (aTab.pinned) {
@@ -529,7 +537,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
} else {
aIndex = Math.max(aIndex, this.pinnedTabCount);
}
@@ -5685,10 +5822,17 @@
@@ -5685,10 +5823,17 @@
this._handleTabMove(aTab, () => {
let neighbor = this.tabs[aIndex];
@@ -549,7 +557,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
neighbor.after(aTab);
} else {
this.tabContainer.insertBefore(aTab, neighbor);
@@ -5697,7 +5841,7 @@
@@ -5697,7 +5842,7 @@
}
moveTabToGroup(aTab, aGroup) {
@@ -558,7 +566,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
return;
}
if (aTab.group && aTab.group.id === aGroup.id) {
@@ -5721,6 +5865,10 @@
@@ -5721,6 +5866,10 @@
moveActionCallback();
@@ -569,7 +577,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
// Clear tabs cache after moving nodes because the order of tabs may have
// changed.
this.tabContainer._invalidateCachedTabs();
@@ -5771,7 +5919,7 @@
@@ -5771,7 +5920,7 @@
createLazyBrowser,
};
@@ -578,7 +586,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (aIndex < numPinned || (aTab.pinned && aIndex == numPinned)) {
params.pinned = true;
}
@@ -6513,7 +6661,7 @@
@@ -6513,7 +6662,7 @@
// preventDefault(). It will still raise the window if appropriate.
break;
}
@@ -587,7 +595,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
window.focus();
aEvent.preventDefault();
break;
@@ -7415,6 +7563,7 @@
@@ -7415,6 +7564,7 @@
aWebProgress.isTopLevel
) {
this.mTab.setAttribute("busy", "true");
@@ -595,7 +603,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
gBrowser._tabAttrModified(this.mTab, ["busy"]);
this.mTab._notselectedsinceload = !this.mTab.selected;
}
@@ -8381,7 +8530,7 @@ var TabContextMenu = {
@@ -8381,7 +8531,7 @@ var TabContextMenu = {
);
contextUnpinSelectedTabs.hidden =
!this.contextTab.pinned || !multiselectionContext;
@@ -604,7 +612,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
// Move Tab items
let contextMoveTabOptions = document.getElementById(
"context_moveTabOptions"
@@ -8414,7 +8563,7 @@ var TabContextMenu = {
@@ -8414,7 +8564,7 @@ var TabContextMenu = {
let contextMoveTabToStart = document.getElementById("context_moveToStart");
let isFirstTab =
tabsToMove[0] == visibleTabs[0] ||
@@ -613,7 +621,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent;
document.getElementById("context_openTabInWindow").disabled =
@@ -8647,6 +8796,7 @@ var TabContextMenu = {
@@ -8647,6 +8797,7 @@ var TabContextMenu = {
if (this.contextTab.multiselected) {
gBrowser.removeMultiSelectedTabs();
} else {

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

@@ -1,5 +1,5 @@
diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a84f01452 100644
index fa96568d366fd3608f9bd583fa793150bd815c8b..1c940a3b162919256ca73fa867c5c261a3395e25 100644
--- a/browser/components/tabbrowser/content/tabs.js
+++ b/browser/components/tabbrowser/content/tabs.js
@@ -94,7 +94,7 @@
@@ -11,16 +11,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
}
return true;
};
@@ -135,6 +135,8 @@
this.previewPanel = null;
this.allTabs[0].label = this.emptyTabTitle;
+ this.allTabs[0]._possibleEmptyTab = true;
+ ZenWorkspaces._resolveEmptyTabInitialized();
// Hide the secondary text for locales where it is unsupported due to size constraints.
const language = Services.locale.appLocaleAsBCP47;
@@ -339,7 +341,7 @@
@@ -339,7 +339,7 @@
// and we're not hitting the scroll buttons.
if (
event.button != 0 ||
@@ -29,7 +20,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
event.composedTarget.localName == "toolbarbutton"
) {
return;
@@ -388,6 +390,7 @@
@@ -388,6 +388,7 @@
// Reset the "ignored click" flag
target._ignoredCloseButtonClicks = false;
}
@@ -37,7 +28,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
}
/* Protects from close-tab-button errant doubleclick:
@@ -683,7 +686,7 @@
@@ -683,7 +684,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
@@ -46,7 +37,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
let tabsPerRow = 0;
let position = 0;
for (let pinnedTab of pinnedTabs) {
@@ -883,6 +886,10 @@
@@ -883,6 +884,10 @@
}
let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0);
@@ -57,7 +48,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
if (
(effects == "move" || effects == "copy") &&
this == draggedTab.container &&
@@ -996,6 +1003,18 @@
@@ -996,6 +1001,18 @@
this._tabDropIndicator.hidden = true;
event.stopPropagation();
@@ -76,7 +67,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
if (draggedTab && dropEffect == "copy") {
// copy the dropped tab (wherever it's from)
let newIndex = this._getDropIndex(event);
@@ -1034,10 +1053,11 @@
@@ -1034,10 +1051,11 @@
}
} else {
let pinned = draggedTab.pinned;
@@ -92,7 +83,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
);
let size = this.verticalMode ? "height" : "width";
let screenAxis = this.verticalMode ? "screenY" : "screenX";
@@ -1114,7 +1134,7 @@
@@ -1114,7 +1132,7 @@
let postTransitionCleanup = () => {
tab.removeAttribute("tabdrop-samewindow");
@@ -101,7 +92,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
if (dropIndex !== false) {
gBrowser.moveTabTo(tab, dropIndex);
if (!directionForward) {
@@ -1122,7 +1142,7 @@
@@ -1122,7 +1140,7 @@
}
}
};
@@ -110,7 +101,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
postTransitionCleanup();
} else {
let onTransitionEnd = transitionendEvent => {
@@ -1249,7 +1269,7 @@
@@ -1249,7 +1267,7 @@
return;
}
}
@@ -119,7 +110,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
gBrowser.loadTabs(urls, {
inBackground,
replace,
@@ -1279,13 +1299,23 @@
@@ -1279,13 +1297,23 @@
return;
}
@@ -145,7 +136,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
) {
delete draggedTab._dragData;
return;
@@ -1517,7 +1547,7 @@
@@ -1517,7 +1545,7 @@
}
get newTabButton() {
@@ -154,7 +145,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
}
get verticalMode() {
@@ -1537,28 +1567,40 @@
@@ -1537,28 +1565,40 @@
if (this.#allTabs) {
return this.#allTabs;
}
@@ -203,7 +194,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
return children.filter(node => node.tagName == "tab-group");
}
@@ -1579,7 +1621,7 @@
@@ -1579,7 +1619,7 @@
*/
get visibleTabs() {
if (!this.#visibleTabs) {
@@ -212,7 +203,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
}
return this.#visibleTabs;
}
@@ -1613,10 +1655,8 @@
@@ -1613,10 +1653,8 @@
return this.#focusableItems;
}
@@ -225,7 +216,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
let focusableItems = [];
for (let child of children) {
@@ -1632,6 +1672,7 @@
@@ -1632,6 +1670,7 @@
}
this.#focusableItems = [
@@ -233,7 +224,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
...verticalPinnedTabsContainer.children,
...focusableItems,
];
@@ -1642,6 +1683,7 @@
@@ -1642,6 +1681,7 @@
_invalidateCachedTabs() {
this.#allTabs = null;
this._invalidateCachedVisibleTabs();
@@ -241,7 +232,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
}
_invalidateCachedVisibleTabs() {
@@ -1656,8 +1698,8 @@
@@ -1656,8 +1696,8 @@
#isContainerVerticalPinnedExpanded(tab) {
return (
this.verticalMode &&
@@ -252,7 +243,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
);
}
@@ -1672,7 +1714,7 @@
@@ -1672,7 +1712,7 @@
if (node == null) {
// We have a container for non-tab elements at the end of the scrollbox.
@@ -261,7 +252,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
}
node.before(tab);
@@ -1772,7 +1814,7 @@
@@ -1772,7 +1812,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.
@@ -270,7 +261,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
const newTab2 = this.newTabButton;
const newTabVertical = document.getElementById(
"vertical-tabs-newtab-button"
@@ -1855,7 +1897,7 @@
@@ -1855,7 +1895,7 @@
let rect = ele => {
return window.windowUtils.getBoundsWithoutFlushing(ele);
};
@@ -279,7 +270,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
if (tab && rect(tab).width <= this._tabClipWidth) {
this.setAttribute("closebuttons", "activetab");
} else {
@@ -1867,10 +1909,12 @@
@@ -1867,10 +1907,12 @@
_handleTabSelect(aInstant) {
let selectedTab = this.selectedItem;
@@ -292,7 +283,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
selectedTab._notselectedsinceload = false;
}
@@ -1882,7 +1926,7 @@
@@ -1882,7 +1924,7 @@
return;
}
@@ -301,7 +292,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
if (!tabs.length) {
return;
}
@@ -1918,7 +1962,7 @@
@@ -1918,7 +1960,7 @@
if (isEndTab && !this._hasTabTempMaxWidth) {
return;
}
@@ -310,7 +301,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
// 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.
@@ -1933,7 +1977,7 @@
@@ -1933,7 +1975,7 @@
let tabsToReset = [];
for (let i = numPinned; i < tabs.length; i++) {
let tab = tabs[i];
@@ -319,7 +310,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
if (!isEndTab) {
// keep tabs the same width
tab.style.transition = "none";
@@ -1999,16 +2043,15 @@
@@ -1999,16 +2041,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.
@@ -342,7 +333,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
}
}
@@ -2016,9 +2059,7 @@
@@ -2016,9 +2057,7 @@
}
_resetVerticalPinnedTabs() {
@@ -353,7 +344,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
if (!verticalTabsContainer.children.length) {
return;
@@ -2031,8 +2072,8 @@
@@ -2031,8 +2070,8 @@
}
_positionPinnedTabs() {
@@ -364,7 +355,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
let absPositionHorizontalTabs =
this.overflowing && tabs.length > numPinned && numPinned > 0;
@@ -2041,7 +2082,7 @@
@@ -2041,7 +2080,7 @@
if (this.verticalMode) {
this._updateVerticalPinnedTabs();
@@ -373,7 +364,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
let layoutData = this._pinnedTabsLayoutCache;
let uiDensity = document.documentElement.getAttribute("uidensity");
if (!layoutData || layoutData.uiDensity != uiDensity) {
@@ -2113,7 +2154,7 @@
@@ -2113,7 +2152,7 @@
return;
}
@@ -382,7 +373,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
let directionX = screenX > dragData.animLastScreenX;
let directionY = screenY > dragData.animLastScreenY;
@@ -2121,7 +2162,7 @@
@@ -2121,7 +2160,7 @@
dragData.animLastScreenX = screenX;
let { width: tabWidth, height: tabHeight } =
@@ -391,7 +382,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
let shiftSizeX = tabWidth * movingTabs.length;
let shiftSizeY = tabHeight;
dragData.tabWidth = tabWidth;
@@ -2296,10 +2337,11 @@
@@ -2296,10 +2335,11 @@
}
let pinned = draggedTab.pinned;
@@ -407,7 +398,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
);
if (this.#rtlMode) {
@@ -2348,7 +2390,11 @@
@@ -2348,7 +2388,11 @@
translate = Math.min(Math.max(translate, firstBound), lastBound);
for (let tab of movingTabs) {
@@ -420,7 +411,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
}
dragData.translatePos = translate;
@@ -2484,12 +2530,16 @@
@@ -2484,12 +2528,16 @@
// Shift background tabs to leave a gap where the dragged tab
// would currently be dropped.
for (let tab of tabs) {
@@ -438,7 +429,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
if (tab.group?.tabs[0] == tab) {
tab.group.style.setProperty(
"--tabgroup-dragover-transform",
@@ -2541,8 +2591,9 @@
@@ -2541,8 +2589,9 @@
);
}
@@ -450,7 +441,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
return;
}
@@ -2553,6 +2604,7 @@
@@ -2553,6 +2602,7 @@
tab.style.transform = "";
if (tab.group) {
tab.group.style.removeProperty("--tabgroup-dragover-transform");
@@ -458,7 +449,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
}
tab.removeAttribute("dragover-createGroup");
}
@@ -2604,7 +2656,7 @@
@@ -2604,7 +2654,7 @@
movingTab._moveTogetherSelectedTabsData.newIndex = movingTabNewIndex;
movingTab._moveTogetherSelectedTabsData.animate = false;
};
@@ -467,7 +458,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
postTransitionCleanup();
} else {
let onTransitionEnd = transitionendEvent => {
@@ -2707,9 +2759,9 @@
@@ -2707,9 +2757,9 @@
function newIndex(aTab, index) {
// Don't allow mixing pinned and unpinned tabs.
if (aTab.pinned) {
@@ -479,7 +470,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
}
}
@@ -2793,7 +2845,7 @@
@@ -2793,7 +2843,7 @@
}
_notifyBackgroundTab(aTab) {

2
src/browser/themes/shared/zen-icons/lin/media-mute.svg
View File

@@ -1 +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="context-fill" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M13.75,5.143V2.664c0-.395-.437-.634-.77-.421l-5.48,3.508H3.75c-.828,0-1.5,.672-1.5,1.5v3.5c0,.828,.672,1.5,1.5,1.5h2.63"></path><path d="M9,13.21l3.981,2.548c.333,.213,.77-.026,.77-.421v-6.72"></path><line x1="2.75" y1="15.75" x2="16.75" y2="2.25" data-color="color-2"></line></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M3.75,13h1.853L14.5,4.422v-1.758c0-.457-.249-.877-.65-1.097-.4-.219-.887-.203-1.273,.044l-5.296,3.389H3.75c-1.24,0-2.25,1.009-2.25,2.25v3.5c0,1.241,1.01,2.25,2.25,2.25Z" fill="context-fill" fill-opacity="context-fill-opacity"></path><path d="M8.22,13.601l4.356,2.788c.205,.131,.439,.198,.674,.198,.206,0,.412-.051,.6-.153,.401-.219,.65-.64,.65-1.097V7.545l-6.28,6.056Z" fill="context-fill" fill-opacity="context-fill-opacity"></path><path d="M2.75,16.5c-.196,0-.393-.077-.54-.229-.287-.298-.278-.773,.02-1.061L16.229,1.71c.299-.286,.773-.279,1.061,.02,.287,.298,.278,.773-.02,1.061L3.271,16.29c-.146,.14-.333,.21-.521,.21Z" fill="context-fill" fill-opacity="context-fill-opacity" data-color="color-2"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 544 B

After

Width:  |  Height:  |  Size: 870 B

2
src/browser/themes/shared/zen-icons/lin/media-unmute.svg
View File

@@ -1 +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="context-fill" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M5,5.75H2.25c-.828,0-1.5,.672-1.5,1.5v3.5c0,.828,.672,1.5,1.5,1.5h2.75l5.48,3.508c.333,.213,.77-.026,.77-.421V2.664c0-.395-.437-.634-.77-.421l-5.48,3.508Z"></path><path d="M13.914,7.586c.781,.781,.781,2.047,0,2.828" data-color="color-2"></path><path d="M15.859,5.641c1.855,1.855,1.855,4.863,0,6.718" data-color="color-2"></path></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M11.35,1.567c-.4-.219-.889-.203-1.273,.044l-5.295,3.389H2.25c-1.241,0-2.25,1.009-2.25,2.25v3.5c0,1.241,1.009,2.25,2.25,2.25h2.531l5.295,3.389c.205,.131,.439,.198,.675,.198,.206,0,.412-.051,.599-.153,.401-.219,.65-.64,.65-1.097V2.664c0-.457-.249-.877-.65-1.097Z" fill="context-fill" fill-opacity="context-fill-opacity"></path><path d="M14.444,7.056c-.293-.293-.769-.293-1.061,0-.293,.293-.293,.768,0,1.061,.236,.236,.366,.55,.366,.884s-.13,.647-.366,.884c-.293,.292-.293,.768,0,1.061,.146,.146,.338,.22,.53,.22s.384-.073,.53-.22c.52-.519,.806-1.209,.806-1.944s-.286-1.425-.806-1.944Z" fill="context-fill" fill-opacity="context-fill-opacity" data-color="color-2"></path><path d="M15.329,5.111c-.293,.293-.293,.768,0,1.061,1.56,1.56,1.56,4.098,0,5.657-.293,.293-.293,.768,0,1.061,.146,.146,.338,.22,.53,.22s.384-.073,.53-.22c1.039-1.039,1.611-2.42,1.611-3.889s-.572-2.851-1.611-3.889c-.293-.293-.768-.293-1.061,0Z" fill="context-fill" fill-opacity="context-fill-opacity" data-color="color-2"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 596 B

After

Width:  |  Height:  |  Size: 1.1 KiB