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

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

@@ -5,18 +5,20 @@
hidden="true"> hidden="true">
<toolbaritem> <toolbaritem>
<vbox id="zen-media-main-vbox"> <vbox id="zen-media-main-vbox">
<vbox id="zen-media-info-vbox" class="show-on-hover"> <vbox>
<label id="zen-media-title" fadein="true"/> <vbox id="zen-media-info-vbox" class="show-on-hover">
<label id="zen-media-artist" fadein="true"/> <label id="zen-media-title" fadein="true"/>
<label id="zen-media-artist" fadein="true"/>
</vbox>
<hbox id="zen-media-progress-hbox" class="show-on-hover">
<label id="zen-media-current-time">0:00</label>
<html:input type="range" id="zen-media-progress-bar"
value="0" min="0" max="100" step="0.1"
oninput="gZenMediaController.onMediaSeekDrag(event);"
onchange="gZenMediaController.onMediaSeekComplete(event);"/>
<label id="zen-media-duration">0:00</label>
</hbox>
</vbox> </vbox>
<hbox id="zen-media-progress-hbox" class="show-on-hover">
<label id="zen-media-current-time">0:00</label>
<html:input type="range" id="zen-media-progress-bar"
value="0" min="0" max="100" step="0.1"
oninput="gZenMediaController.onMediaSeekDrag(event);"
onchange="gZenMediaController.onMediaSeekComplete(event);"/>
<label id="zen-media-duration">0:00</label>
</hbox>
<hbox id="zen-media-controls-hbox"> <hbox id="zen-media-controls-hbox">
<toolbarbutton id="zen-media-focus-button" <toolbarbutton id="zen-media-focus-button"
class="toolbarbutton-1" class="toolbarbutton-1"

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

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

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

@@ -219,8 +219,8 @@ class ZenMediaController {
this._mediaUpdateInterval = null; this._mediaUpdateInterval = null;
} }
if (this._currentDuration >= 900_000) return this.mediaProgressBarContainer.setAttribute('hidden', 'true'); if (this._currentDuration >= 900_000) return this.mediaControlBar.setAttribute('media-position-hidden', 'true');
else this.mediaProgressBarContainer.removeAttribute('hidden'); else this.mediaControlBar.removeAttribute('media-position-hidden');
this.mediaCurrentTime.textContent = this.formatSecondsToTime(this._currentPosition); this.mediaCurrentTime.textContent = this.formatSecondsToTime(this._currentPosition);
this.mediaDuration.textContent = this.formatSecondsToTime(this._currentDuration); 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; this._resolveInitialized = resolve;
}); });
promiseEmptyTabInitialized = new Promise((resolve) => {
this._resolveEmptyTabInitialized = resolve;
});
workspaceIndicatorXUL = ` workspaceIndicatorXUL = `
<hbox class="zen-current-workspace-indicator-icon"></hbox> <hbox class="zen-current-workspace-indicator-icon"></hbox>
<hbox class="zen-current-workspace-indicator-name"></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)) { if (Services.prefs.getBoolPref('zen.workspaces.disable_empty_state_for_testing', false)) {
return; 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; const currentTab = gBrowser.selectedTab;
let showed = false; let showed = false;
await this.promiseEmptyTabInitialized;
this._resolveEmptyTabInitialized = null;
this.promiseEmptyTabInitialized = null;
if (currentTab.pinned) { if (currentTab.pinned) {
this.selectEmptyTab(); this.selectEmptyTab();
try { try {
@@ -640,8 +640,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if ( if (
(currentTab.isEmpty && (currentTab.isEmpty &&
(currentTab.getAttribute('image') === gPageIcons[currentTabURL] || !currentTab.hasAttribute('image'))) || (currentTab.getAttribute('image') === gPageIcons[currentTabURL] || !currentTab.hasAttribute('image'))) ||
currentTab.hasAttribute('zen-empty-tab') || currentTab._possiblyEmpty
(currentTab._possibleEmptyTab && currentTab.isEmpty)
) { ) {
this.selectEmptyTab(); this.selectEmptyTab();
this._removedByStartupPage = true; 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) { initIndicatorContextMenu(indicator) {
const th = (event) => { const th = (event) => {
event.preventDefault(); 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 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 --- a/browser/components/tabbrowser/content/tabbrowser.js
+++ b/browser/components/tabbrowser/content/tabbrowser.js +++ b/browser/components/tabbrowser/content/tabbrowser.js
@@ -412,11 +412,50 @@ @@ -412,11 +412,50 @@
@@ -55,7 +55,15 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
} }
return i; 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); this.showTab(aTab);
@@ -73,7 +81,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
this.moveTabTo(aTab, this.pinnedTabCount, { forceStandaloneTab: true }); this.moveTabTo(aTab, this.pinnedTabCount, { forceStandaloneTab: true });
} }
aTab.setAttribute("pinned", "true"); aTab.setAttribute("pinned", "true");
@@ -830,12 +870,15 @@ @@ -830,12 +871,15 @@
} }
if (this.tabContainer.verticalMode) { if (this.tabContainer.verticalMode) {
@@ -90,7 +98,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
}); });
} else { } else {
this.moveTabTo(aTab, this.pinnedTabCount - 1, { this.moveTabTo(aTab, this.pinnedTabCount - 1, {
@@ -1018,6 +1061,8 @@ @@ -1018,6 +1062,8 @@
let LOCAL_PROTOCOLS = ["chrome:", "about:", "resource:", "data:"]; let LOCAL_PROTOCOLS = ["chrome:", "about:", "resource:", "data:"];
@@ -99,7 +107,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if ( if (
aIconURL && aIconURL &&
!aLoadingPrincipal && !aLoadingPrincipal &&
@@ -1028,6 +1073,9 @@ @@ -1028,6 +1074,9 @@
); );
return; return;
} }
@@ -109,7 +117,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
let browser = this.getBrowserForTab(aTab); let browser = this.getBrowserForTab(aTab);
browser.mIconURL = aIconURL; browser.mIconURL = aIconURL;
@@ -1273,6 +1321,7 @@ @@ -1273,6 +1322,7 @@
if (!this._previewMode) { if (!this._previewMode) {
newTab.recordTimeFromUnloadToReload(); newTab.recordTimeFromUnloadToReload();
newTab.updateLastAccessed(); newTab.updateLastAccessed();
@@ -117,7 +125,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
oldTab.updateLastAccessed(); oldTab.updateLastAccessed();
// if this is the foreground window, update the last-seen timestamps. // if this is the foreground window, update the last-seen timestamps.
if (this.ownerGlobal == BrowserWindowTracker.getTopWindow()) { if (this.ownerGlobal == BrowserWindowTracker.getTopWindow()) {
@@ -1425,6 +1474,9 @@ @@ -1425,6 +1475,9 @@
} }
let activeEl = document.activeElement; 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 focus is on the old tab, move it to the new tab.
if (activeEl == oldTab) { if (activeEl == oldTab) {
newTab.focus(); newTab.focus();
@@ -1748,7 +1800,7 @@ @@ -1748,7 +1801,7 @@
} }
_setTabLabel(aTab, aLabel, { beforeTabOpen, isContentTitle, isURL } = {}) { _setTabLabel(aTab, aLabel, { beforeTabOpen, isContentTitle, isURL } = {}) {
@@ -136,7 +144,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
return false; return false;
} }
@@ -1851,7 +1903,7 @@ @@ -1851,7 +1904,7 @@
newIndex = this.selectedTab._tPos + 1; newIndex = this.selectedTab._tPos + 1;
} }
@@ -145,7 +153,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
let browser; let browser;
if (targetTab) { if (targetTab) {
browser = this.getBrowserForTab(targetTab); browser = this.getBrowserForTab(targetTab);
@@ -2108,6 +2160,7 @@ @@ -2108,6 +2161,7 @@
uriIsAboutBlank, uriIsAboutBlank,
userContextId, userContextId,
skipLoad, skipLoad,
@@ -153,7 +161,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
} = {}) { } = {}) {
let b = document.createXULElement("browser"); let b = document.createXULElement("browser");
// Use the JSM global to create the permanentKey, so that if the // 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? // we use a different attribute name for this?
b.setAttribute("name", name); b.setAttribute("name", name);
} }
@@ -163,7 +171,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
b.setAttribute("transparent", "true"); b.setAttribute("transparent", "true");
} }
@@ -2347,7 +2399,7 @@ @@ -2347,7 +2400,7 @@
let panel = this.getPanel(browser); let panel = this.getPanel(browser);
let uniqueId = this._generateUniquePanelID(); let uniqueId = this._generateUniquePanelID();
@@ -172,7 +180,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
aTab.linkedPanel = uniqueId; aTab.linkedPanel = uniqueId;
// Inject the <browser> into the DOM if necessary. // 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 // If we transitioned from one browser to two browsers, we need to set
// hasSiblings=false on both the existing browser and the new browser. // hasSiblings=false on both the existing browser and the new browser.
if (this.tabs.length == 2) { if (this.tabs.length == 2) {
@@ -183,7 +191,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
} else { } else {
aTab.linkedBrowser.browsingContext.hasSiblings = this.tabs.length > 1; aTab.linkedBrowser.browsingContext.hasSiblings = this.tabs.length > 1;
} }
@@ -2629,6 +2681,7 @@ @@ -2629,6 +2682,7 @@
schemelessInput, schemelessInput,
hasValidUserGestureActivation = false, hasValidUserGestureActivation = false,
textDirectiveUserActivation = false, textDirectiveUserActivation = false,
@@ -191,7 +199,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
} = {} } = {}
) { ) {
// all callers of addTab that pass a params object need to pass // 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)) { if (!UserInteraction.running("browser.tabs.opening", window)) {
UserInteraction.start("browser.tabs.opening", "initting", window); UserInteraction.start("browser.tabs.opening", "initting", window);
} }
@@ -2702,6 +2761,15 @@ @@ -2702,6 +2762,15 @@
noInitialLabel, noInitialLabel,
skipBackgroundNotify, skipBackgroundNotify,
}); });
@@ -220,7 +228,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (insertTab) { if (insertTab) {
// insert the tab into the tab container in the correct position // insert the tab into the tab container in the correct position
this._insertTabAtIndex(t, { this._insertTabAtIndex(t, {
@@ -2726,6 +2794,7 @@ @@ -2726,6 +2795,7 @@
initialBrowsingContextGroupId, initialBrowsingContextGroupId,
openWindowInfo, openWindowInfo,
skipLoad, skipLoad,
@@ -228,7 +236,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
})); }));
if (focusUrlBar) { if (focusUrlBar) {
@@ -2845,6 +2914,9 @@ @@ -2845,6 +2915,9 @@
} }
} }
@@ -238,7 +246,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
// Additionally send pinned tab events // Additionally send pinned tab events
if (pinned) { if (pinned) {
this._notifyPinnedStatus(t); this._notifyPinnedStatus(t);
@@ -2904,6 +2976,7 @@ @@ -2904,6 +2977,7 @@
label = "", label = "",
insertBefore = null, insertBefore = null,
showCreateUI = false, showCreateUI = false,
@@ -246,7 +254,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
} = {} } = {}
) { ) {
if (!tabs?.length) { if (!tabs?.length) {
@@ -2918,7 +2991,12 @@ @@ -2918,7 +2992,12 @@
id = `${Date.now()}-${Math.round(Math.random() * 100)}`; id = `${Date.now()}-${Math.round(Math.random() * 100)}`;
} }
let group = this._createTabGroup(id, color, false, label); let group = this._createTabGroup(id, color, false, label);
@@ -260,7 +268,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
group, group,
insertBefore?.group ?? insertBefore insertBefore?.group ?? insertBefore
); );
@@ -3126,6 +3204,7 @@ @@ -3126,6 +3205,7 @@
initialBrowsingContextGroupId, initialBrowsingContextGroupId,
openWindowInfo, openWindowInfo,
skipLoad, skipLoad,
@@ -268,7 +276,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
} }
) { ) {
// If we don't have a preferred remote type, and we have a remote // If we don't have a preferred remote type, and we have a remote
@@ -3189,6 +3268,7 @@ @@ -3189,6 +3269,7 @@
openWindowInfo, openWindowInfo,
name, name,
skipLoad, skipLoad,
@@ -276,7 +284,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
}); });
} }
@@ -3367,6 +3447,27 @@ @@ -3367,6 +3448,27 @@
) { ) {
tabWasReused = true; tabWasReused = true;
tab = this.selectedTab; tab = this.selectedTab;
@@ -304,7 +312,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (!tabData.pinned) { if (!tabData.pinned) {
this.unpinTab(tab); this.unpinTab(tab);
} else { } else {
@@ -3380,6 +3481,7 @@ @@ -3380,6 +3482,7 @@
restoreTabsLazily && !select && !tabData.pinned; restoreTabsLazily && !select && !tabData.pinned;
let url = "about:blank"; let url = "about:blank";
@@ -312,7 +320,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (tabData.entries?.length) { if (tabData.entries?.length) {
let activeIndex = (tabData.index || tabData.entries.length) - 1; let activeIndex = (tabData.index || tabData.entries.length) - 1;
// Ensure the index is in bounds. // Ensure the index is in bounds.
@@ -3415,7 +3517,27 @@ @@ -3415,7 +3518,27 @@
skipLoad: true, skipLoad: true,
preferredRemoteType, preferredRemoteType,
}); });
@@ -341,7 +349,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (select) { if (select) {
tabToSelect = tab; tabToSelect = tab;
} }
@@ -3428,8 +3550,8 @@ @@ -3428,8 +3551,8 @@
// inserted in the DOM. If the tab is not yet in the DOM, // inserted in the DOM. If the tab is not yet in the DOM,
// just insert it in the right place from the start. // just insert it in the right place from the start.
if (!tab.parentNode) { if (!tab.parentNode) {
@@ -352,17 +360,17 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
tab.toggleAttribute("pinned", true); tab.toggleAttribute("pinned", true);
this.tabContainer._invalidateCachedTabs(); this.tabContainer._invalidateCachedTabs();
// Then ensure all the tab open/pinning information is sent. // Then ensure all the tab open/pinning information is sent.
@@ -3504,6 +3626,9 @@ @@ -3504,6 +3627,9 @@
this.selectedTab = tabToSelect; this.selectedTab = tabToSelect;
this.removeTab(leftoverTab); this.removeTab(leftoverTab);
} }
+ else { + 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) { if (tabs.length > 1 || !tabs[0].selected) {
this._updateTabsAfterInsert(); this._updateTabsAfterInsert();
@@ -3693,7 +3818,7 @@ @@ -3693,7 +3819,7 @@
// Ensure we have an index if one was not provided. // Ensure we have an index if one was not provided.
if (typeof index != "number") { if (typeof index != "number") {
// Move the new tab after another tab if needed, to the end otherwise. // Move the new tab after another tab if needed, to the end otherwise.
@@ -371,7 +379,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if ( if (
!bulkOrderedOpen && !bulkOrderedOpen &&
((openerTab && ((openerTab &&
@@ -3736,18 +3861,18 @@ @@ -3736,18 +3862,18 @@
// Ensure index is within bounds. // Ensure index is within bounds.
if (tab.pinned) { if (tab.pinned) {
@@ -394,7 +402,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (tabAfter && tabAfter.group == tabGroup) { if (tabAfter && tabAfter.group == tabGroup) {
// Place at the front of, or between tabs in, the same tab group // Place at the front of, or between tabs in, the same tab group
this.tabContainer.insertBefore(tab, tabAfter); this.tabContainer.insertBefore(tab, tabAfter);
@@ -4059,6 +4184,9 @@ @@ -4059,6 +4185,9 @@
return; return;
} }
@@ -404,7 +412,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
this.removeTabs(selectedTabs); this.removeTabs(selectedTabs);
} }
@@ -4391,6 +4519,7 @@ @@ -4391,6 +4520,7 @@
skipSessionStore, skipSessionStore,
} = {} } = {}
) { ) {
@@ -412,7 +420,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (UserInteraction.running("browser.tabs.opening", window)) { if (UserInteraction.running("browser.tabs.opening", window)) {
UserInteraction.finish("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); TelemetryStopwatch.start("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
} }
@@ -425,7 +433,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
// Handle requests for synchronously removing an already // Handle requests for synchronously removing an already
// asynchronously closing tab. // asynchronously closing tab.
if (!animate && aTab.closing) { if (!animate && aTab.closing) {
@@ -4421,7 +4556,9 @@ @@ -4421,7 +4557,9 @@
// frame created for it (for example, by updating the visually selected // frame created for it (for example, by updating the visually selected
// state). // state).
let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width; let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
@@ -436,7 +444,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if ( if (
!this._beginRemoveTab(aTab, { !this._beginRemoveTab(aTab, {
closeWindowFastpath: true, closeWindowFastpath: true,
@@ -4435,7 +4572,6 @@ @@ -4435,7 +4573,6 @@
TelemetryStopwatch.cancel("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab); TelemetryStopwatch.cancel("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
return; return;
} }
@@ -444,7 +452,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
let lockTabSizing = let lockTabSizing =
!this.tabContainer.verticalMode && !this.tabContainer.verticalMode &&
!aTab.pinned && !aTab.pinned &&
@@ -4574,14 +4710,14 @@ @@ -4574,14 +4711,14 @@
!!this.tabsInCollapsedTabGroups.length; !!this.tabsInCollapsedTabGroups.length;
if ( if (
aTab.visible && aTab.visible &&
@@ -461,7 +469,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (closeWindow) { if (closeWindow) {
// We've already called beforeunload on all the relevant tabs if we get here, // We've already called beforeunload on all the relevant tabs if we get here,
@@ -4605,6 +4741,7 @@ @@ -4605,6 +4742,7 @@
newTab = true; newTab = true;
} }
@@ -469,7 +477,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
aTab._endRemoveArgs = [closeWindow, newTab]; aTab._endRemoveArgs = [closeWindow, newTab];
// swapBrowsersAndCloseOther will take care of closing the window without animation. // swapBrowsersAndCloseOther will take care of closing the window without animation.
@@ -4645,9 +4782,7 @@ @@ -4645,9 +4783,7 @@
aTab._mouseleave(); aTab._mouseleave();
if (newTab) { if (newTab) {
@@ -480,7 +488,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
} else { } else {
TabBarVisibility.update(); TabBarVisibility.update();
} }
@@ -4776,6 +4911,8 @@ @@ -4776,6 +4912,8 @@
this.tabs[i]._tPos = i; this.tabs[i]._tPos = i;
} }
@@ -489,7 +497,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (!this._windowIsClosing) { if (!this._windowIsClosing) {
if (wasPinned) { if (wasPinned) {
this.tabContainer._positionPinnedTabs(); this.tabContainer._positionPinnedTabs();
@@ -4994,7 +5131,7 @@ @@ -4994,7 +5132,7 @@
!excludeTabs.has(aTab.owner) && !excludeTabs.has(aTab.owner) &&
Services.prefs.getBoolPref("browser.tabs.selectOwnerOnClose") 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 // Try to find a remaining tab that comes after the given tab
@@ -5016,7 +5153,7 @@ @@ -5016,7 +5154,7 @@
} }
if (tab) { if (tab) {
@@ -507,7 +515,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
} }
// If no qualifying visible tab was found, see if there is a tab in // 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"); SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
} }
@@ -520,7 +528,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
aTab.selected || aTab.selected ||
aTab.closing || aTab.closing ||
// Tabs that are sharing the screen, microphone or camera cannot be hidden. // 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. // Don't allow mixing pinned and unpinned tabs.
if (aTab.pinned) { if (aTab.pinned) {
@@ -529,7 +537,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
} else { } else {
aIndex = Math.max(aIndex, this.pinnedTabCount); aIndex = Math.max(aIndex, this.pinnedTabCount);
} }
@@ -5685,10 +5822,17 @@ @@ -5685,10 +5823,17 @@
this._handleTabMove(aTab, () => { this._handleTabMove(aTab, () => {
let neighbor = this.tabs[aIndex]; let neighbor = this.tabs[aIndex];
@@ -549,7 +557,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
neighbor.after(aTab); neighbor.after(aTab);
} else { } else {
this.tabContainer.insertBefore(aTab, neighbor); this.tabContainer.insertBefore(aTab, neighbor);
@@ -5697,7 +5841,7 @@ @@ -5697,7 +5842,7 @@
} }
moveTabToGroup(aTab, aGroup) { moveTabToGroup(aTab, aGroup) {
@@ -558,7 +566,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
return; return;
} }
if (aTab.group && aTab.group.id === aGroup.id) { if (aTab.group && aTab.group.id === aGroup.id) {
@@ -5721,6 +5865,10 @@ @@ -5721,6 +5866,10 @@
moveActionCallback(); moveActionCallback();
@@ -569,7 +577,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
// Clear tabs cache after moving nodes because the order of tabs may have // Clear tabs cache after moving nodes because the order of tabs may have
// changed. // changed.
this.tabContainer._invalidateCachedTabs(); this.tabContainer._invalidateCachedTabs();
@@ -5771,7 +5919,7 @@ @@ -5771,7 +5920,7 @@
createLazyBrowser, createLazyBrowser,
}; };
@@ -578,7 +586,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
if (aIndex < numPinned || (aTab.pinned && aIndex == numPinned)) { if (aIndex < numPinned || (aTab.pinned && aIndex == numPinned)) {
params.pinned = true; params.pinned = true;
} }
@@ -6513,7 +6661,7 @@ @@ -6513,7 +6662,7 @@
// preventDefault(). It will still raise the window if appropriate. // preventDefault(). It will still raise the window if appropriate.
break; break;
} }
@@ -587,7 +595,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
window.focus(); window.focus();
aEvent.preventDefault(); aEvent.preventDefault();
break; break;
@@ -7415,6 +7563,7 @@ @@ -7415,6 +7564,7 @@
aWebProgress.isTopLevel aWebProgress.isTopLevel
) { ) {
this.mTab.setAttribute("busy", "true"); this.mTab.setAttribute("busy", "true");
@@ -595,7 +603,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
gBrowser._tabAttrModified(this.mTab, ["busy"]); gBrowser._tabAttrModified(this.mTab, ["busy"]);
this.mTab._notselectedsinceload = !this.mTab.selected; this.mTab._notselectedsinceload = !this.mTab.selected;
} }
@@ -8381,7 +8530,7 @@ var TabContextMenu = { @@ -8381,7 +8531,7 @@ var TabContextMenu = {
); );
contextUnpinSelectedTabs.hidden = contextUnpinSelectedTabs.hidden =
!this.contextTab.pinned || !multiselectionContext; !this.contextTab.pinned || !multiselectionContext;
@@ -604,7 +612,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
// Move Tab items // Move Tab items
let contextMoveTabOptions = document.getElementById( let contextMoveTabOptions = document.getElementById(
"context_moveTabOptions" "context_moveTabOptions"
@@ -8414,7 +8563,7 @@ var TabContextMenu = { @@ -8414,7 +8564,7 @@ var TabContextMenu = {
let contextMoveTabToStart = document.getElementById("context_moveToStart"); let contextMoveTabToStart = document.getElementById("context_moveToStart");
let isFirstTab = let isFirstTab =
tabsToMove[0] == visibleTabs[0] || tabsToMove[0] == visibleTabs[0] ||
@@ -613,7 +621,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991b
contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent; contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent;
document.getElementById("context_openTabInWindow").disabled = document.getElementById("context_openTabInWindow").disabled =
@@ -8647,6 +8796,7 @@ var TabContextMenu = { @@ -8647,6 +8797,7 @@ var TabContextMenu = {
if (this.contextTab.multiselected) { if (this.contextTab.multiselected) {
gBrowser.removeMultiSelectedTabs(); gBrowser.removeMultiSelectedTabs();
} else { } 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 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 --- a/browser/components/tabbrowser/content/tabs.js
+++ b/browser/components/tabbrowser/content/tabs.js +++ b/browser/components/tabbrowser/content/tabs.js
@@ -94,7 +94,7 @@ @@ -94,7 +94,7 @@
@@ -11,16 +11,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
} }
return true; return true;
}; };
@@ -135,6 +135,8 @@ @@ -339,7 +339,7 @@
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 @@
// and we're not hitting the scroll buttons. // and we're not hitting the scroll buttons.
if ( if (
event.button != 0 || event.button != 0 ||
@@ -29,7 +20,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
event.composedTarget.localName == "toolbarbutton" event.composedTarget.localName == "toolbarbutton"
) { ) {
return; return;
@@ -388,6 +390,7 @@ @@ -388,6 +388,7 @@
// Reset the "ignored click" flag // Reset the "ignored click" flag
target._ignoredCloseButtonClicks = false; target._ignoredCloseButtonClicks = false;
} }
@@ -37,7 +28,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
} }
/* Protects from close-tab-button errant doubleclick: /* Protects from close-tab-button errant doubleclick:
@@ -683,7 +686,7 @@ @@ -683,7 +684,7 @@
if (this.#isContainerVerticalPinnedExpanded(tab)) { if (this.#isContainerVerticalPinnedExpanded(tab)) {
// In expanded vertical mode, the max number of pinned tabs per row is dynamic // In expanded vertical mode, the max number of pinned tabs per row is dynamic
// Set this before adjusting dragged tab's position // Set this before adjusting dragged tab's position
@@ -46,7 +37,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
let tabsPerRow = 0; let tabsPerRow = 0;
let position = 0; let position = 0;
for (let pinnedTab of pinnedTabs) { for (let pinnedTab of pinnedTabs) {
@@ -883,6 +886,10 @@ @@ -883,6 +884,10 @@
} }
let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0); let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0);
@@ -57,7 +48,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
if ( if (
(effects == "move" || effects == "copy") && (effects == "move" || effects == "copy") &&
this == draggedTab.container && this == draggedTab.container &&
@@ -996,6 +1003,18 @@ @@ -996,6 +1001,18 @@
this._tabDropIndicator.hidden = true; this._tabDropIndicator.hidden = true;
event.stopPropagation(); event.stopPropagation();
@@ -76,7 +67,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
if (draggedTab && dropEffect == "copy") { if (draggedTab && dropEffect == "copy") {
// copy the dropped tab (wherever it's from) // copy the dropped tab (wherever it's from)
let newIndex = this._getDropIndex(event); let newIndex = this._getDropIndex(event);
@@ -1034,10 +1053,11 @@ @@ -1034,10 +1051,11 @@
} }
} else { } else {
let pinned = draggedTab.pinned; let pinned = draggedTab.pinned;
@@ -92,7 +83,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
); );
let size = this.verticalMode ? "height" : "width"; let size = this.verticalMode ? "height" : "width";
let screenAxis = this.verticalMode ? "screenY" : "screenX"; let screenAxis = this.verticalMode ? "screenY" : "screenX";
@@ -1114,7 +1134,7 @@ @@ -1114,7 +1132,7 @@
let postTransitionCleanup = () => { let postTransitionCleanup = () => {
tab.removeAttribute("tabdrop-samewindow"); tab.removeAttribute("tabdrop-samewindow");
@@ -101,7 +92,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
if (dropIndex !== false) { if (dropIndex !== false) {
gBrowser.moveTabTo(tab, dropIndex); gBrowser.moveTabTo(tab, dropIndex);
if (!directionForward) { if (!directionForward) {
@@ -1122,7 +1142,7 @@ @@ -1122,7 +1140,7 @@
} }
} }
}; };
@@ -110,7 +101,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
postTransitionCleanup(); postTransitionCleanup();
} else { } else {
let onTransitionEnd = transitionendEvent => { let onTransitionEnd = transitionendEvent => {
@@ -1249,7 +1269,7 @@ @@ -1249,7 +1267,7 @@
return; return;
} }
} }
@@ -119,7 +110,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
gBrowser.loadTabs(urls, { gBrowser.loadTabs(urls, {
inBackground, inBackground,
replace, replace,
@@ -1279,13 +1299,23 @@ @@ -1279,13 +1297,23 @@
return; return;
} }
@@ -145,7 +136,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
) { ) {
delete draggedTab._dragData; delete draggedTab._dragData;
return; return;
@@ -1517,7 +1547,7 @@ @@ -1517,7 +1545,7 @@
} }
get newTabButton() { get newTabButton() {
@@ -154,7 +145,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
} }
get verticalMode() { get verticalMode() {
@@ -1537,28 +1567,40 @@ @@ -1537,28 +1565,40 @@
if (this.#allTabs) { if (this.#allTabs) {
return this.#allTabs; return this.#allTabs;
} }
@@ -203,7 +194,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
return children.filter(node => node.tagName == "tab-group"); return children.filter(node => node.tagName == "tab-group");
} }
@@ -1579,7 +1621,7 @@ @@ -1579,7 +1619,7 @@
*/ */
get visibleTabs() { get visibleTabs() {
if (!this.#visibleTabs) { if (!this.#visibleTabs) {
@@ -212,7 +203,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
} }
return this.#visibleTabs; return this.#visibleTabs;
} }
@@ -1613,10 +1655,8 @@ @@ -1613,10 +1653,8 @@
return this.#focusableItems; return this.#focusableItems;
} }
@@ -225,7 +216,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
let focusableItems = []; let focusableItems = [];
for (let child of children) { for (let child of children) {
@@ -1632,6 +1672,7 @@ @@ -1632,6 +1670,7 @@
} }
this.#focusableItems = [ this.#focusableItems = [
@@ -233,7 +224,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
...verticalPinnedTabsContainer.children, ...verticalPinnedTabsContainer.children,
...focusableItems, ...focusableItems,
]; ];
@@ -1642,6 +1683,7 @@ @@ -1642,6 +1681,7 @@
_invalidateCachedTabs() { _invalidateCachedTabs() {
this.#allTabs = null; this.#allTabs = null;
this._invalidateCachedVisibleTabs(); this._invalidateCachedVisibleTabs();
@@ -241,7 +232,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
} }
_invalidateCachedVisibleTabs() { _invalidateCachedVisibleTabs() {
@@ -1656,8 +1698,8 @@ @@ -1656,8 +1696,8 @@
#isContainerVerticalPinnedExpanded(tab) { #isContainerVerticalPinnedExpanded(tab) {
return ( return (
this.verticalMode && this.verticalMode &&
@@ -252,7 +243,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
); );
} }
@@ -1672,7 +1714,7 @@ @@ -1672,7 +1712,7 @@
if (node == null) { if (node == null) {
// We have a container for non-tab elements at the end of the scrollbox. // We have a container for non-tab elements at the end of the scrollbox.
@@ -261,7 +252,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
} }
node.before(tab); node.before(tab);
@@ -1772,7 +1814,7 @@ @@ -1772,7 +1812,7 @@
// There are separate "new tab" buttons for horizontal tabs toolbar, vertical tabs and // 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); // for when the tab strip is overflowed (which is shared by vertical and horizontal tabs);
// Attach the long click popup to all of them. // Attach the long click popup to all of them.
@@ -270,7 +261,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
const newTab2 = this.newTabButton; const newTab2 = this.newTabButton;
const newTabVertical = document.getElementById( const newTabVertical = document.getElementById(
"vertical-tabs-newtab-button" "vertical-tabs-newtab-button"
@@ -1855,7 +1897,7 @@ @@ -1855,7 +1895,7 @@
let rect = ele => { let rect = ele => {
return window.windowUtils.getBoundsWithoutFlushing(ele); return window.windowUtils.getBoundsWithoutFlushing(ele);
}; };
@@ -279,7 +270,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
if (tab && rect(tab).width <= this._tabClipWidth) { if (tab && rect(tab).width <= this._tabClipWidth) {
this.setAttribute("closebuttons", "activetab"); this.setAttribute("closebuttons", "activetab");
} else { } else {
@@ -1867,10 +1909,12 @@ @@ -1867,10 +1907,12 @@
_handleTabSelect(aInstant) { _handleTabSelect(aInstant) {
let selectedTab = this.selectedItem; let selectedTab = this.selectedItem;
@@ -292,7 +283,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
selectedTab._notselectedsinceload = false; selectedTab._notselectedsinceload = false;
} }
@@ -1882,7 +1926,7 @@ @@ -1882,7 +1924,7 @@
return; return;
} }
@@ -301,7 +292,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
if (!tabs.length) { if (!tabs.length) {
return; return;
} }
@@ -1918,7 +1962,7 @@ @@ -1918,7 +1960,7 @@
if (isEndTab && !this._hasTabTempMaxWidth) { if (isEndTab && !this._hasTabTempMaxWidth) {
return; return;
} }
@@ -310,7 +301,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
// Force tabs to stay the same width, unless we're closing the last tab, // 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 // which case we need to let them expand just enough so that the overall
// tabbar width is the same. // tabbar width is the same.
@@ -1933,7 +1977,7 @@ @@ -1933,7 +1975,7 @@
let tabsToReset = []; let tabsToReset = [];
for (let i = numPinned; i < tabs.length; i++) { for (let i = numPinned; i < tabs.length; i++) {
let tab = tabs[i]; let tab = tabs[i];
@@ -319,7 +310,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
if (!isEndTab) { if (!isEndTab) {
// keep tabs the same width // keep tabs the same width
tab.style.transition = "none"; 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 // Move pinned tabs to another container when the tabstrip is toggled to vertical
// and when session restore code calls _positionPinnedTabs; update styling whenever // and when session restore code calls _positionPinnedTabs; update styling whenever
// the number of pinned tabs changes. // the number of pinned tabs changes.
@@ -342,7 +333,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
} }
} }
@@ -2016,9 +2059,7 @@ @@ -2016,9 +2057,7 @@
} }
_resetVerticalPinnedTabs() { _resetVerticalPinnedTabs() {
@@ -353,7 +344,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
if (!verticalTabsContainer.children.length) { if (!verticalTabsContainer.children.length) {
return; return;
@@ -2031,8 +2072,8 @@ @@ -2031,8 +2070,8 @@
} }
_positionPinnedTabs() { _positionPinnedTabs() {
@@ -364,7 +355,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
let absPositionHorizontalTabs = let absPositionHorizontalTabs =
this.overflowing && tabs.length > numPinned && numPinned > 0; this.overflowing && tabs.length > numPinned && numPinned > 0;
@@ -2041,7 +2082,7 @@ @@ -2041,7 +2080,7 @@
if (this.verticalMode) { if (this.verticalMode) {
this._updateVerticalPinnedTabs(); this._updateVerticalPinnedTabs();
@@ -373,7 +364,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
let layoutData = this._pinnedTabsLayoutCache; let layoutData = this._pinnedTabsLayoutCache;
let uiDensity = document.documentElement.getAttribute("uidensity"); let uiDensity = document.documentElement.getAttribute("uidensity");
if (!layoutData || layoutData.uiDensity != uiDensity) { if (!layoutData || layoutData.uiDensity != uiDensity) {
@@ -2113,7 +2154,7 @@ @@ -2113,7 +2152,7 @@
return; return;
} }
@@ -382,7 +373,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
let directionX = screenX > dragData.animLastScreenX; let directionX = screenX > dragData.animLastScreenX;
let directionY = screenY > dragData.animLastScreenY; let directionY = screenY > dragData.animLastScreenY;
@@ -2121,7 +2162,7 @@ @@ -2121,7 +2160,7 @@
dragData.animLastScreenX = screenX; dragData.animLastScreenX = screenX;
let { width: tabWidth, height: tabHeight } = let { width: tabWidth, height: tabHeight } =
@@ -391,7 +382,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
let shiftSizeX = tabWidth * movingTabs.length; let shiftSizeX = tabWidth * movingTabs.length;
let shiftSizeY = tabHeight; let shiftSizeY = tabHeight;
dragData.tabWidth = tabWidth; dragData.tabWidth = tabWidth;
@@ -2296,10 +2337,11 @@ @@ -2296,10 +2335,11 @@
} }
let pinned = draggedTab.pinned; let pinned = draggedTab.pinned;
@@ -407,7 +398,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
); );
if (this.#rtlMode) { if (this.#rtlMode) {
@@ -2348,7 +2390,11 @@ @@ -2348,7 +2388,11 @@
translate = Math.min(Math.max(translate, firstBound), lastBound); translate = Math.min(Math.max(translate, firstBound), lastBound);
for (let tab of movingTabs) { for (let tab of movingTabs) {
@@ -420,7 +411,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
} }
dragData.translatePos = translate; dragData.translatePos = translate;
@@ -2484,12 +2530,16 @@ @@ -2484,12 +2528,16 @@
// Shift background tabs to leave a gap where the dragged tab // Shift background tabs to leave a gap where the dragged tab
// would currently be dropped. // would currently be dropped.
for (let tab of tabs) { for (let tab of tabs) {
@@ -438,7 +429,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
if (tab.group?.tabs[0] == tab) { if (tab.group?.tabs[0] == tab) {
tab.group.style.setProperty( tab.group.style.setProperty(
"--tabgroup-dragover-transform", "--tabgroup-dragover-transform",
@@ -2541,8 +2591,9 @@ @@ -2541,8 +2589,9 @@
); );
} }
@@ -450,7 +441,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
return; return;
} }
@@ -2553,6 +2604,7 @@ @@ -2553,6 +2602,7 @@
tab.style.transform = ""; tab.style.transform = "";
if (tab.group) { if (tab.group) {
tab.group.style.removeProperty("--tabgroup-dragover-transform"); tab.group.style.removeProperty("--tabgroup-dragover-transform");
@@ -458,7 +449,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
} }
tab.removeAttribute("dragover-createGroup"); tab.removeAttribute("dragover-createGroup");
} }
@@ -2604,7 +2656,7 @@ @@ -2604,7 +2654,7 @@
movingTab._moveTogetherSelectedTabsData.newIndex = movingTabNewIndex; movingTab._moveTogetherSelectedTabsData.newIndex = movingTabNewIndex;
movingTab._moveTogetherSelectedTabsData.animate = false; movingTab._moveTogetherSelectedTabsData.animate = false;
}; };
@@ -467,7 +458,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
postTransitionCleanup(); postTransitionCleanup();
} else { } else {
let onTransitionEnd = transitionendEvent => { let onTransitionEnd = transitionendEvent => {
@@ -2707,9 +2759,9 @@ @@ -2707,9 +2757,9 @@
function newIndex(aTab, index) { function newIndex(aTab, index) {
// Don't allow mixing pinned and unpinned tabs. // Don't allow mixing pinned and unpinned tabs.
if (aTab.pinned) { if (aTab.pinned) {
@@ -479,7 +470,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..89a3d8d63a045433f15fae37c8f5df2a
} }
} }
@@ -2793,7 +2845,7 @@ @@ -2793,7 +2843,7 @@
} }
_notifyBackgroundTab(aTab) { _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