corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1921060 - Implement full mute button spec r=desktop-theme-reviewers,tabbrowser-reviewers,dao,sessionstore-reviewers,sclements,sidebar-reviewers,fluent-reviewers,bolsson

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D231182
This commit is contained in:
Kelly Cochrane
2025-01-13 17:55:32 +00:00
parent 8050d3e240
commit 50f355f8ec
17 changed files with 191 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
browser/components/sessionstore/SessionStore.sys.mjs
View File

@@ -3197,7 +3197,6 @@ var SessionStoreInternal = {
* Tab reference
*/
resetBrowserToLazyState(aTab) {
const gBrowser = aTab.ownerGlobal.gBrowser;
let browser = aTab.linkedBrowser;
// Browser is already lazy so don't do anything.
if (!browser.isConnected) {
@@ -3211,7 +3210,6 @@ var SessionStoreInternal = {
this._lastKnownFrameLoader.delete(browser.permanentKey);
this._crashedBrowsers.delete(browser.permanentKey);
aTab.removeAttribute("crashed");
gBrowser.tabContainer.updateTabIndicatorAttr(aTab);
let { userTypedValue = null, userTypedClear = 0 } = browser;
let hasStartedLoad = browser.didStartLoadSinceLastUserTyping();
@@ -4959,7 +4957,6 @@ var SessionStoreInternal = {
);
}
const gBrowser = aTab.ownerGlobal.gBrowser;
let browser = aTab.linkedBrowser;
if (!this._crashedBrowsers.has(browser.permanentKey)) {
return;
@@ -4979,7 +4976,6 @@ var SessionStoreInternal = {
// a flash of the about:tabcrashed page after selecting
// the revived tab.
aTab.removeAttribute("crashed");
gBrowser.tabContainer.updateTabIndicatorAttr(aTab);
browser.loadURI(lazy.blankURI, {
triggeringPrincipal: Services.scriptSecurityManager.createNullPrincipal({

74
browser/components/tabbrowser/content/tab.js
View File

@@ -23,17 +23,14 @@
<image class="tab-sharing-icon-overlay" role="presentation"/>
<image class="tab-icon-overlay" role="presentation"/>
</stack>
<html:moz-button type="icon ghost" size="small" class="tab-audio-button" tabindex="-1"></html:moz-button>
<vbox class="tab-label-container"
align="start"
pack="center"
flex="1">
<label class="tab-text tab-label" role="presentation"/>
<hbox class="tab-secondary-label">
<label class="tab-icon-sound-label tab-icon-sound-playing-label" data-l10n-id="browser-tab-audio-playing2" role="presentation"/>
<label class="tab-icon-sound-label tab-icon-sound-muted-label" data-l10n-id="browser-tab-audio-muted2" role="presentation"/>
<label class="tab-icon-sound-label tab-icon-sound-blocked-label" data-l10n-id="browser-tab-audio-blocked" role="presentation"/>
<label class="tab-icon-sound-label tab-icon-sound-pip-label" data-l10n-id="browser-tab-audio-pip" role="presentation"/>
<label class="tab-icon-sound-label tab-icon-sound-tooltip-label" role="presentation"/>
</hbox>
</vbox>
<image class="tab-close-button close-icon" role="button" data-l10n-id="tabbrowser-close-tabs-button" data-l10n-args='{"tabCount": 1}' keyNav="false"/>
@@ -85,7 +82,7 @@
".tab-content":
"pinned,selected=visuallyselected,multiselected,titlechanged,attention",
".tab-icon-stack":
"sharing,pictureinpicture,crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked,indicator-replaces-favicon",
"sharing,pictureinpicture,crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked",
".tab-throbber":
"fadein,pinned,busy,progress,selected=visuallyselected",
".tab-icon-pending":
@@ -94,13 +91,15 @@
"src=image,triggeringprincipal=iconloadingprincipal,requestcontextid,fadein,pinned,selected=visuallyselected,busy,crashed,sharing,pictureinpicture",
".tab-sharing-icon-overlay": "sharing,selected=visuallyselected,pinned",
".tab-icon-overlay":
"sharing,pictureinpicture,crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked,indicator-replaces-favicon",
"sharing,pictureinpicture,crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked",
".tab-audio-button":
"crashed,soundplaying,soundplaying-scheduledremoval,pinned,muted,activemedia-blocked",
".tab-label-container":
"pinned,selected=visuallyselected,labeldirection",
".tab-label":
"text=label,accesskey,fadein,pinned,selected=visuallyselected,attention",
".tab-label-container .tab-secondary-label":
"soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked,pictureinpicture",
"pinned,blocked,selected=visuallyselected,pictureinpicture",
".tab-close-button": "fadein,pinned,selected=visuallyselected",
};
}
@@ -310,10 +309,18 @@
return this.overlayIcon?.matches(":hover");
}
get _overAudioButton() {
return this.audioButton?.matches(":hover");
}
get overlayIcon() {
return this.querySelector(".tab-icon-overlay");
}
get audioButton() {
return this.querySelector(".tab-audio-button");
}
get throbber() {
return this.querySelector(".tab-throbber");
}
@@ -371,24 +378,6 @@
if (event.target.classList.contains("tab-close-button")) {
this.mOverCloseButton = true;
}
if (this._overPlayingIcon) {
const selectedTabs = gBrowser.selectedTabs;
const contextTabInSelection = selectedTabs.includes(this);
const affectedTabsLength = contextTabInSelection
? selectedTabs.length
: 1;
let stringID;
if (this.hasAttribute("activemedia-blocked")) {
stringID = "browser-tab-unblock";
} else {
stringID = this.linkedBrowser.audioMuted
? "browser-tab-unmute"
: "browser-tab-mute";
}
this.setSecondaryTabTooltipLabel(stringID, {
count: affectedTabsLength,
});
}
if (!this.visible) {
return;
@@ -409,9 +398,6 @@
if (event.target.classList.contains("tab-close-button")) {
this.mOverCloseButton = false;
}
if (event.target == this.overlayIcon) {
this.setSecondaryTabTooltipLabel(null);
}
// If the new target is not part of this tab then this is a mouseleave event.
if (!this.contains(event.relatedTarget)) {
@@ -451,7 +437,8 @@
this.style.MozUserFocus = "ignore";
} else if (
event.target.classList.contains("tab-close-button") ||
event.target.classList.contains("tab-icon-overlay")
event.target.classList.contains("tab-icon-overlay") ||
event.target.classList.contains("tab-audio-button")
) {
eventMaySelectTab = false;
}
@@ -516,14 +503,18 @@
if (
gBrowser.multiSelectedTabsCount > 0 &&
!event.target.classList.contains("tab-close-button") &&
!event.target.classList.contains("tab-icon-overlay")
!event.target.classList.contains("tab-icon-overlay") &&
!event.target.classList.contains("tab-audio-button")
) {
// Tabs were previously multi-selected and user clicks on a tab
// without holding Ctrl/Cmd Key
gBrowser.clearMultiSelectedTabs();
}
if (event.target.classList.contains("tab-icon-overlay")) {
if (
event.target.classList.contains("tab-icon-overlay") ||
event.target.classList.contains("tab-audio-button")
) {
if (this.activeMediaBlocked) {
if (this.multiselected) {
gBrowser.resumeDelayedMediaOnMultiSelectedTabs(this);
@@ -611,27 +602,6 @@
this.dispatchEvent(new CustomEvent("TabHoverEnd", { bubbles: true }));
}
setSecondaryTabTooltipLabel(l10nID, l10nArgs) {
this.querySelector(".tab-secondary-label").toggleAttribute(
"showtooltip",
l10nID
);
const tooltipEl = this.querySelector(".tab-icon-sound-tooltip-label");
if (l10nArgs) {
tooltipEl.setAttribute("data-l10n-args", JSON.stringify(l10nArgs));
} else {
tooltipEl.removeAttribute("data-l10n-args");
}
if (l10nID) {
tooltipEl.setAttribute("data-l10n-id", l10nID);
} else {
tooltipEl.removeAttribute("data-l10n-id");
}
// TODO(Itiel): Maybe simplify this when bug 1830989 lands
}
resumeDelayedMedia() {
if (this.activeMediaBlocked) {
this.removeAttribute("activemedia-blocked");

16
browser/components/tabbrowser/content/tabbrowser.js
View File

@@ -2093,9 +2093,6 @@
// process so the browser can no longer be considered to be
// crashed.
tab.removeAttribute("crashed");
// we call updatetabIndicatorAttr here, rather than _tabAttrModified, so as
// to be consistent with how "crashed" attribute changes are handled elsewhere
this.tabContainer.updateTabIndicatorAttr(tab);
}
// If the findbar has been initialised, reset its browser reference.
@@ -6488,8 +6485,13 @@
event.stopPropagation();
let tab = event.target.triggerNode?.closest("tab");
if (!tab) {
event.preventDefault();
return;
if (event.target.triggerNode?.getRootNode()?.host?.closest("tab")) {
// Check if triggerNode is within shadowRoot of moz-button
tab = event.target.triggerNode?.getRootNode().host.closest("tab");
} else {
event.preventDefault();
return;
}
}
const tooltip = event.target;
@@ -6498,7 +6500,7 @@
const tabCount = this.selectedTabs.includes(tab)
? this.selectedTabs.length
: 1;
if (tab._overPlayingIcon) {
if (tab._overPlayingIcon || tab._overAudioButton) {
let l10nId;
const l10nArgs = { tabCount };
if (tab.selected) {
@@ -7112,7 +7114,6 @@
// process so the browser can no longer be considered to be
// crashed.
tab.removeAttribute("crashed");
gBrowser.tabContainer.updateTabIndicatorAttr(tab);
}
if (this.isFindBarInitialized(tab)) {
@@ -7437,7 +7438,6 @@
delete this.mBrowser.initialPageLoadedFromUserAction;
// If the browser is loading it must not be crashed anymore
this.mTab.removeAttribute("crashed");
gBrowser.tabContainer.updateTabIndicatorAttr(this.mTab);
}
if (this._shouldShowProgress(aRequest)) {

72
browser/components/tabbrowser/content/tabs.js
View File

@@ -55,8 +55,6 @@
this.addEventListener("TabAttrModified", this);
this.addEventListener("TabHide", this);
this.addEventListener("TabShow", this);
this.addEventListener("TabPinned", this);
this.addEventListener("TabUnpinned", this);
this.addEventListener("TabHoverStart", this);
this.addEventListener("TabHoverEnd", this);
this.addEventListener("TabGroupExpand", this);
@@ -227,17 +225,6 @@
this.#updateTabMinWidth();
this.#updateTabMinHeight();
let indicatorTabs = gBrowser.visibleTabs.filter(tab => {
return (
tab.hasAttribute("soundplaying") ||
tab.hasAttribute("muted") ||
tab.hasAttribute("activemedia-blocked")
);
});
for (const indicatorTab of indicatorTabs) {
this.updateTabIndicatorAttr(indicatorTab);
}
super.attributeChangedCallback(name, oldValue, newValue);
}
@@ -250,20 +237,19 @@
}
on_TabAttrModified(event) {
if (
["soundplaying", "muted", "activemedia-blocked", "sharing"].some(attr =>
event.detail.changed.includes(attr)
)
) {
this.updateTabIndicatorAttr(event.target);
}
if (
event.detail.changed.includes("soundplaying") &&
!event.target.visible
) {
this._hiddenSoundPlayingStatusChanged(event.target);
}
if (
event.detail.changed.includes("soundplaying") ||
event.detail.changed.includes("muted") ||
event.detail.changed.includes("activemedia-blocked")
) {
this.updateTabSoundLabel(event.target);
}
}
on_TabHide(event) {
@@ -278,14 +264,6 @@
}
}
on_TabPinned(event) {
this.updateTabIndicatorAttr(event.target);
}
on_TabUnpinned(event) {
this.updateTabIndicatorAttr(event.target);
}
on_TabHoverStart(event) {
if (!this._showCardPreviews) {
return;
@@ -3126,22 +3104,28 @@
CustomizableUI.removeListener(this);
}
updateTabIndicatorAttr(tab) {
const theseAttributes = ["soundplaying", "muted", "activemedia-blocked"];
const notTheseAttributes = ["pinned", "sharing", "crashed"];
if (
this.verticalMode ||
notTheseAttributes.some(attr => tab.hasAttribute(attr))
) {
tab.removeAttribute("indicator-replaces-favicon");
return;
updateTabSoundLabel(tab) {
// Add aria-label for inline audio button
const [unmute, mute, unblock] =
gBrowser.tabLocalization.formatMessagesSync([
"tabbrowser-unmute-tab-audio-aria-label",
"tabbrowser-mute-tab-audio-aria-label",
"tabbrowser-unblock-tab-audio-aria-label",
]);
if (tab.audioButton) {
if (tab.hasAttribute("muted") || tab.hasAttribute("soundplaying")) {
let ariaLabel;
tab.linkedBrowser.audioMuted
? (ariaLabel = unmute.attributes[0].value)
: (ariaLabel = mute.attributes[0].value);
tab.audioButton.setAttribute("aria-label", ariaLabel);
} else if (tab.hasAttribute("activemedia-blocked")) {
tab.audioButton.setAttribute(
"aria-label",
unblock.attributes[0].value
);
}
}
tab.toggleAttribute(
"indicator-replaces-favicon",
theseAttributes.some(attr => tab.hasAttribute(attr))
);
}
}

6
browser/components/tabbrowser/test/browser/tabMediaIndicator/browser_mute_webAudio.js
View File

@@ -50,8 +50,7 @@ add_task(async function mute_web_audio() {
info("- mute browser -");
ok(!tab.linkedBrowser.audioMuted, "Audio should not be muted by default");
await hoverIcon(tab.overlayIcon);
await clickIcon(tab.overlayIcon);
await clickIcon(tab.audioButton);
ok(tab.linkedBrowser.audioMuted, "Audio should be muted now");
info("- stop web audip -");
@@ -62,8 +61,7 @@ add_task(async function mute_web_audio() {
info("- unmute browser -");
ok(tab.linkedBrowser.audioMuted, "Audio should be muted now");
await hoverIcon(tab.overlayIcon);
await clickIcon(tab.overlayIcon);
await clickIcon(tab.audioButton);
ok(!tab.linkedBrowser.audioMuted, "Audio should be unmuted now");
info("- tab should be audible -");

13
browser/components/tabbrowser/test/browser/tabs/browser_audioTabIcon.js
View File

@@ -184,7 +184,7 @@ async function test_muting_using_menu(tab, expectMuted) {
}
async function test_playing_icon_on_tab(tab, browser, isPinned) {
let icon = isPinned ? tab.overlayIcon : tab.overlayIcon;
let icon = isPinned ? tab.overlayIcon : tab.audioButton;
let isActiveTab = tab === gBrowser.selectedTab;
await play(tab);
@@ -376,7 +376,7 @@ async function test_swapped_browser_while_playing(oldTab, newBrowser) {
"Expected the correct soundplaying attribute on the new tab"
);
await test_tooltip(newTab.overlayIcon, "Unmute tab", true, newTab);
await test_tooltip(newTab.audioButton, "Unmute tab", true, newTab);
}
async function test_swapped_browser_while_not_playing(oldTab, newBrowser) {
@@ -449,14 +449,14 @@ async function test_swapped_browser_while_not_playing(oldTab, newBrowser) {
"Expected the correct soundplaying attribute on the new tab"
);
await test_tooltip(newTab.overlayIcon, "Unmute tab", true, newTab);
await test_tooltip(newTab.audioButton, "Unmute tab", true, newTab);
}
async function test_browser_swapping(tab) {
// First, test swapping with a playing but muted tab.
await play(tab);
await test_mute_tab(tab, tab.overlayIcon, true);
await test_mute_tab(tab, tab.audioButton, true);
await BrowserTestUtils.withNewTab(
{
@@ -574,11 +574,6 @@ async function test_mute_keybinding() {
let mutedPromise = get_wait_for_mute_promise(tab, true);
EventUtils.synthesizeKey("m", { ctrlKey: true });
await mutedPromise;
is(
tab.hasAttribute("indicator-replaces-favicon"),
!tab.pinned,
"Mute indicator should replace the favicon on hover if the tab isn't pinned"
);
mutedPromise = get_wait_for_mute_promise(tab, false);
EventUtils.synthesizeKey("m", { ctrlKey: true });
await mutedPromise;

8
browser/components/tabbrowser/test/browser/tabs/browser_multiselect_tabs_mute_unmute.js
View File

@@ -39,7 +39,7 @@ add_task(async function muteTabs_usingButton() {
}
// Mute tab0 which is not multiselected, thus other tabs muted state should not be affected
let tab0MuteAudioBtn = tab0.overlayIcon;
let tab0MuteAudioBtn = tab0.audioButton;
await test_mute_tab(tab0, tab0MuteAudioBtn, true);
ok(muted(tab0), "Tab0 is muted");
@@ -72,7 +72,7 @@ add_task(async function muteTabs_usingButton() {
// b) unmuted tabs (tab1, tab3) will become muted.
// b) media-blocked tabs (tab2) will remain media-blocked.
// However tab4 (unmuted) which is not multiselected should not be affected.
let tab1MuteAudioBtn = tab1.overlayIcon;
let tab1MuteAudioBtn = tab1.audioButton;
await test_mute_tab(tab1, tab1MuteAudioBtn, true);
// Check mute state
@@ -130,7 +130,7 @@ add_task(async function unmuteTabs_usingButton() {
// b) unmuted tabs (tab0) will remain unmuted.
// c) media-blocked tabs (tab1, tab2) will remain blocked.
// However tab4 (muted) which is not multiselected should not be affected.
let tab3MuteAudioBtn = tab3.overlayIcon;
let tab3MuteAudioBtn = tab3.audioButton;
await test_mute_tab(tab3, tab3MuteAudioBtn, false);
ok(!muted(tab0), "Tab0 is not muted");
@@ -243,7 +243,7 @@ add_task(async function playTabs_usingButton() {
// b) unmuted tabs (tab3) will remain unmuted.
// c) media-blocked tabs (tab1, tab2) will become unblocked.
// However tab4 (muted) which is not multiselected should not be affected.
let tab2MuteAudioBtn = tab2.overlayIcon;
let tab2MuteAudioBtn = tab2.audioButton;
await test_mute_tab(tab2, tab2MuteAudioBtn, false);
ok(muted(tab0), "Tab0 is muted");

2
browser/components/tabbrowser/test/browser/tabs/browser_multiselect_tabs_play.js
View File

@@ -152,7 +152,7 @@ add_task(async function testDelayPlayWhenUsingButton() {
// Use the overlay icon on tab2 to play media on the selected tabs
info("Press play tab2 icon");
await pressIcon(tab2.overlayIcon);
await pressIcon(tab2.audioButton);
// tab0, tab1, and tab2 were played and multiselected
// They will now be unblocked and playing media

10
browser/locales/en-US/browser/tabbrowser.ftl
View File

@@ -67,6 +67,16 @@ tabbrowser-unblock-tab-audio-tooltip =
*[other] Play { $tabCount } tabs
}
## Tooltips for tab audio control
tabbrowser-unmute-tab-audio-aria-label =
.aria-label = Unmute tab
tabbrowser-mute-tab-audio-aria-label =
.aria-label = Mute tab
# Used to unblock a tab with audio from autoplaying
tabbrowser-unblock-tab-audio-aria-label =
.aria-label = Play tab
## Confirmation dialog when closing a window with more than one tab open,
## or when quitting when only one window is open.

2
browser/modules/ContentCrashHandlers.sys.mjs
View File

@@ -517,7 +517,6 @@ export var TabCrashHandler = {
browser.docShell.displayLoadError(Cr.NS_ERROR_BUILDID_MISMATCH, uri, null);
tab.setAttribute("crashed", true);
gBrowser.tabContainer.updateTabIndicatorAttr(tab);
},
/**
@@ -542,7 +541,6 @@ export var TabCrashHandler = {
browser.docShell.displayLoadError(Cr.NS_ERROR_CONTENT_CRASHED, uri, null);
browser.removeAttribute("crashedPageTitle");
tab.setAttribute("crashed", true);
gBrowser.tabContainer.updateTabIndicatorAttr(tab);
},
/**

1
browser/themes/shared/jar.inc.mn
View File

@@ -238,6 +238,7 @@
skin/classic/browser/tabbrowser/tab-audio-playing-small.svg (../shared/tabbrowser/tab-audio-playing-small.svg)
skin/classic/browser/tabbrowser/tab-audio-muted-small.svg (../shared/tabbrowser/tab-audio-muted-small.svg)
skin/classic/browser/tabbrowser/tab-audio-blocked-small.svg (../shared/tabbrowser/tab-audio-blocked-small.svg)
skin/classic/browser/tabbrowser/tab-audio-blocked-circle-12.svg (../shared/tabbrowser/tab-audio-blocked-circle-12.svg)
skin/classic/browser/tabbrowser/tab-drag-indicator.svg (../shared/tabbrowser/tab-drag-indicator.svg)
skin/classic/browser/tabbrowser/tab-group-chicklet.svg (../shared/tabbrowser/tab-group-chicklet.svg)
skin/classic/browser/tabbrowser/tab-groups.svg (../shared/tabbrowser/tab-groups.svg)

14
browser/themes/shared/tabbrowser/tab-audio-blocked-circle-12.svg Normal file
View File

@@ -0,0 +1,14 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#a)">
<path d="M4.998 3.567a.5.5 0 0 0-.748.434v3.998a.5.5 0 0 0 .748.434l3.5-1.999a.5.5 0 0 0 0-.868l-3.5-1.999z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6a6 6 0 1 1 12 0A6 6 0 0 1 0 6zm10.75 0A4.756 4.756 0 0 0 6 1.25 4.756 4.756 0 0 0 1.25 6 4.756 4.756 0 0 0 6 10.75 4.756 4.756 0 0 0 10.75 6z"/>
</g>
<defs>
<clipPath id="a">
<path d="M0 0h12v12H0z"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 778 B

4
browser/themes/shared/tabbrowser/tab-audio-blocked-small.svg
View File

@@ -1,6 +1,6 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M4.25 8V4A.5.5 0 0 1 5 3.57l3.5 2c.34.19.34.68 0 .87l-3.5 2a.502.502 0 0 1-.75-.43V8z"/>
<svg width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
<path d="M3 9.2V2.8c0-.14.036-.278.104-.4a.79.79 0 0 1 .283-.292.761.761 0 0 1 .777-.003l5.444 3.2a.79.79 0 0 1 .287.294.818.818 0 0 1 0 .802.79.79 0 0 1-.287.294l-5.444 3.2a.76.76 0 0 1-.777-.003.79.79 0 0 1-.283-.293A.818.818 0 0 1 3 9.2z"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 439 B

After

Width:  |  Height:  |  Size: 585 B

4
browser/themes/shared/tabbrowser/tab-audio-muted-small.svg
View File

@@ -1,6 +1,6 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12" fill-opacity="context-fill-opacity">
<path fill="context-fill" d="M6.8 5.5 4.5 3.3l.9-1.1c.4-.5 1.3-.2 1.3.5v2.8zm2 .5c0-1-.5-1.9-1.3-2.4v2.7l1 1c.2-.4.3-.9.3-1.3zM7.7 2.6c1.3.7 2 2 2 3.4 0 .7-.2 1.4-.5 2l.5.5c.5-.8.8-1.6.8-2.5 0-1.7-.9-3.3-2.4-4.1-.2-.1-.4 0-.5.2-.1.2-.1.4.1.5zm-5.1-.1c-.1-.1-.4-.1-.5 0-.1.1-.1.4 0 .5l1.1 1.1h-1c-.4 0-.8.3-.8.8v2.2c0 .4.3.8.8.8h1.5l1.7 2c.4.5 1.3.2 1.3-.5V7.7l1.4 1.4c-.1.1-.2.2-.4.3-.2.1-.2.3-.1.5.1.2.3.2.5.2.2-.1.4-.3.6-.5l.4.4c.1.1.4.1.5 0 .1-.1.1-.4 0-.5l-7-7z"/>
<svg width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
<path d="m2.791 3.581 1.347-2.294C4.654.408 6 .774 6 1.793v8.413c0 1.02-1.346 1.386-1.862.507L2.791 8.419c-.031-.053-.051-.111-.071-.169H1a1 1 0 0 1-1-1v-2.5a1 1 0 0 1 1-1h1.72a.93.93 0 0 1 .071-.169zm8.325-.081L9.5 5.116 7.884 3.5 7 4.384 8.616 6 7 7.616l.884.884L9.5 6.884 11.116 8.5 12 7.616 10.384 6 12 4.384l-.884-.884z"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 810 B

After

Width:  |  Height:  |  Size: 669 B

5
browser/themes/shared/tabbrowser/tab-audio-playing-small.svg
View File

@@ -1,6 +1,7 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity">
<path fill="context-fill" d="M6.7 2.6v6.8c0 .7-.9 1-1.3.5l-1.7-2H2.2c-.4 0-.7-.3-.7-.8V4.9c0-.4.3-.8.7-.8h1.5l1.7-2c.5-.5 1.3-.2 1.3.5zM8.8 6c0-1-.5-1.9-1.3-2.4v4.7C8.3 7.9 8.8 7 8.8 6zm-.7-4.1c-.2-.1-.4 0-.5.2-.1.2 0 .4.2.5 1.3.7 2 2 2 3.4 0 1.4-.8 2.8-2 3.4-.2.1-.3.2-.3.4 0 .2.2.4.4.4.1 0 .1 0 .2 0 1.5-.8 2.5-2.4 2.5-4.1-.1-1.8-1-3.4-2.5-4.2z"/>
<svg width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 1.881V.595A5.499 5.499 0 0 1 12 6a5.499 5.499 0 0 1-4.5 5.405v-1.286C9.36 9.666 10.75 7.997 10.75 6c0-1.997-1.39-3.666-3.25-4.119zm-3.362-.594L2.791 3.581c-.031.053-.051.111-.071.169H1a1 1 0 0 0-1 1v2.5a1 1 0 0 0 1 1h1.72a.93.93 0 0 0 .071.169l1.347 2.294c.516.879 1.862.513 1.862-.507V1.793C6 .774 4.654.408 4.138 1.287z"/>
<path d="M7.5 3.193v5.613c1.161-.413 2-1.504 2-2.807s-.839-2.393-2-2.806z"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 711 B

After

Width:  |  Height:  |  Size: 759 B

144
browser/themes/shared/tabbrowser/tabs.css
View File

@@ -30,8 +30,6 @@
--tab-shadow-max-size: 6px;
--tab-block-margin: 4px;
--tab-icon-end-margin: 5.5px;
--tab-icon-overlay-fill: light-dark(white, black);
--tab-icon-overlay-stroke: light-dark(black, white);
--tab-label-line-height: 1.7;
--tab-loading-fill: #0A84FF;
--tab-hover-background-color: color-mix(in srgb, currentColor 11%, transparent);
@@ -232,6 +230,14 @@
&[multiselected-move-together][multiselected]:not([selected]) {
z-index: 2;
}
&:is([muted], [soundplaying], [activemedia-blocked]) {
--tab-icon-end-margin: 2px;
#tabbrowser-tabs[orient=horizontal] &:not([pinned]) {
--tab-min-width: 100px;
}
}
}
.tab-content {
@@ -471,11 +477,6 @@
display: none;
}
.tab-sharing-icon-overlay[sharing]:not([selected]),
.tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked], [crashed]) {
display: revert;
}
.tab-sharing-icon-overlay {
position: relative;
-moz-context-properties: fill;
@@ -493,11 +494,18 @@
&[sharing="screen"] {
list-style-image: url("chrome://browser/skin/notification-icons/screen.svg");
}
&[sharing]:not([selected]) {
display: revert;
}
}
.tab-icon-overlay {
position: relative;
padding: 2px;
top: -7px;
inset-inline-end: -7px;
z-index: 1; /* Overlay tab title */
#tabbrowser-tabs[orient=vertical] & {
top: 7px;
@@ -507,68 +515,83 @@
list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
}
&:not([crashed]) {
#tabbrowser-tabs[orient="vertical"]:not([expanded]) &:not([crashed]),
&[pinned]:not([crashed]) {
&[soundplaying] {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
}
&[muted] {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
}
&[activemedia-blocked] {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
}
&:is([soundplaying], [muted], [activemedia-blocked]) {
background-color: var(--tab-icon-overlay-stroke);
background-position: center;
background-repeat: no-repeat;
border-radius: 10px;
background-color: var(--lwt-accent-color);
background-image: linear-gradient(var(--toolbox-bgcolor));
-moz-context-properties: fill;
fill: var(--tab-icon-overlay-fill);
}
}
fill: var(--tab-selected-textcolor);
border-radius: 10px;
&:not([indicator-replaces-favicon]) {
top: -5.5px;
inset-inline-end: -6px;
z-index: 1; /* Overlay tab title */
.browser-toolbox-background:-moz-window-inactive &:not([selected]) {
background-image: linear-gradient(var(--toolbox-bgcolor-inactive));
}
&:is([soundplaying], [muted], [activemedia-blocked]) {
top: -8px;
inset-inline-end: -6px;
}
}
&[selected] {
/* We want to make this look like sidebar background. For that,
* we build a stack of `--lwt-accent-color` (guaranteed opaque), then
* then `--toolbox-bgcolor`.
*
* We rely on at least one of `--tab-selected-bgcolor` / `--toolbox-bgcolor`
* being opaque on the system themes, so even though `--lwt-accent-color` is
* not set there, it ends up working out because we never see it through.
*/
background-image: linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor));
color-scheme: var(--tab-selected-color-scheme);
fill: var(--tab-selected-textcolor);
outline: 1px solid var(--tab-selected-outline-color);
}
&[indicator-replaces-favicon] {
border-radius: 2px;
fill-opacity: 0.75;
&:hover {
background-color: color-mix(in srgb, currentColor 15%, transparent);
fill-opacity: 0.95;
}
&:hover:active {
background-color: color-mix(in srgb, currentColor 30%, transparent);
}
&:is([soundplaying], [muted], [activemedia-blocked]) {
&:hover,
&:hover:active {
background-color: color-mix(in srgb, currentColor 50%, transparent);
.browser-toolbox-background:-moz-window-inactive &[selected] {
background-image: linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor-inactive));
}
}
}
:is(
:root[uidensity=compact],
#tabbrowser-tabs[secondarytext-unsupported],
:root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover
) .tab-icon-stack[indicator-replaces-favicon] > :not(&),
:root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) &[indicator-replaces-favicon] {
opacity: 0;
#tabbrowser-tabs[orient="vertical"]:not([expanded]) &:is([soundplaying], [muted], [activemedia-blocked]),
&[pinned]:is([soundplaying], [muted], [activemedia-blocked]),
&[crashed] {
display: revert;
}
}
.tab-audio-button {
display: none;
margin-inline-end: var(--tab-icon-end-margin);
--icon-size-default: 12px;
--button-size-icon-small: 24px;
--button-min-height-small: 24px;
--button-border-radius: var(--border-radius-small);
#tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
&:is([soundplaying], [muted], [activemedia-blocked]) {
display: block;
}
&[soundplaying]::part(button) {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
}
&[muted]::part(button) {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
}
&[activemedia-blocked]::part(button) {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg");
}
}
}
@@ -622,7 +645,7 @@
/* The following rulesets allow showing more of the tab title by shrinking the
* width of the close button. We don't do this in forced-colors mode since
* the button has a visible outline shown. */
* the button has a visible outline shown */
@media not (forced-colors) {
#tabbrowser-tabs[orient="horizontal"] {
.tabbrowser-tab:not([labelendaligned], :hover) > .tab-stack > .tab-content > .tab-close-button {
@@ -644,24 +667,9 @@
#tabbrowser-tabs:is([secondarytext-unsupported], [orient="vertical"]) &,
:root[uidensity=compact] &,
&:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]),
&:not([activemedia-blocked]) > .tab-icon-sound-blocked-label,
&[muted][activemedia-blocked] > .tab-icon-sound-blocked-label,
&[activemedia-blocked] > .tab-icon-sound-playing-label,
&[muted] > .tab-icon-sound-playing-label,
&[pictureinpicture] > .tab-icon-sound-playing-label,
&[pictureinpicture] > .tab-icon-sound-muted-label,
&:not([pictureinpicture]) > .tab-icon-sound-pip-label,
&:not([muted]) > .tab-icon-sound-muted-label,
&:not([showtooltip]) > .tab-icon-sound-tooltip-label,
&[showtooltip] > .tab-icon-sound-label:not(.tab-icon-sound-tooltip-label) {
&:not([pictureinpicture]) {
display: none;
}
&[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
transition: opacity .3s linear var(--soundplaying-removal-delay);
opacity: 0;
}
}
.tab-icon-sound-label {

25
toolkit/components/pictureinpicture/tests/browser_tabIconOverlayPiP.js
View File

@@ -40,12 +40,13 @@ add_task(async () => {
// Use tab to get the tab-icon-overlay element
let tabIconOverlay = tab.getElementsByClassName("tab-icon-overlay")[0];
let tabAudioButton = tab.getElementsByClassName("tab-audio-button")[0];
// Not in PiP yet so the tab-icon-overlay does not have "pictureinpicture" attribute
ok(!tabIconOverlay.hasAttribute("pictureinpicture"), "Not using PiP");
// Sound is playing so tab should have "soundplaying" attribute
ok(tabIconOverlay.hasAttribute("soundplaying"), "Sound is playing");
ok(tabAudioButton.hasAttribute("soundplaying"), "Sound is playing");
// Start the PiP
let pipWin = await triggerPictureInPicture(browser, videoID);
@@ -54,9 +55,9 @@ add_task(async () => {
// Check that video is still playing
ok(!(await isVideoPaused(browser, videoID)), "The video is not paused.");
// Video is still playing so the tab-icon-overlay should have "soundplaying" as an attribute
// Video is still playing so the tab-audio-button should have "soundplaying" as an attribute
ok(
tabIconOverlay.hasAttribute("soundplaying"),
tabAudioButton.hasAttribute("soundplaying"),
"Tab knows sound is playing"
);
@@ -67,24 +68,26 @@ add_task(async () => {
);
// We know the tab has sound playing and it is using PiP so we can check the
// tab-icon-overlay image is showing
let style = window.getComputedStyle(tabIconOverlay);
// tab-audio-button image is showing
let style = window.getComputedStyle(
tabAudioButton.buttonEl.querySelector(".button-background")
);
Assert.equal(
style.backgroundImage,
'url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg")',
"Got the tab-icon-overlay image"
"Got the tab-audio-button image"
);
// Check tab is not muted
ok(!tabIconOverlay.hasAttribute("muted"), "Tab is not muted");
ok(!tabAudioButton.hasAttribute("muted"), "Tab is not muted");
// Click on tab icon overlay to mute tab and check it is muted
tabIconOverlay.click();
ok(tabIconOverlay.hasAttribute("muted"), "Tab is muted");
tabAudioButton.click();
ok(tabAudioButton.hasAttribute("muted"), "Tab is muted");
// Click on tab icon overlay to unmute tab and check it is not muted
tabIconOverlay.click();
ok(!tabIconOverlay.hasAttribute("muted"), "Tab is not muted");
tabAudioButton.click();
ok(!tabAudioButton.hasAttribute("muted"), "Tab is not muted");
}
);
});