зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1693066 - Implement new proton tab audio indicator design. r=jaws,fluent-reviewers,flod
Differential Revision: https://phabricator.services.mozilla.com/D107733
This commit is contained in:
Tim Nguyen
Родитель
3345f44934
Коммит
46fa6456fb
|
|
@ -29,11 +29,13 @@
|
|||
${background}
|
||||
<hbox class="tab-loading-burst"/>
|
||||
<hbox class="tab-content" align="center">
|
||||
<stack class="tab-icon-stack">
|
||||
<hbox class="tab-throbber" layer="true"/>
|
||||
<hbox class="tab-icon-pending"/>
|
||||
<image class="tab-icon-image" validate="never" role="presentation"/>
|
||||
<image class="tab-sharing-icon-overlay" role="presentation"/>
|
||||
<image class="tab-icon-overlay" role="presentation"/>
|
||||
</stack>
|
||||
<hbox class="tab-label-container"
|
||||
onoverflow="this.setAttribute('textoverflow', 'true');"
|
||||
onunderflow="this.removeAttribute('textoverflow');"
|
||||
|
|
@ -46,14 +48,14 @@
|
|||
onunderflow="this.removeAttribute('textoverflow');"
|
||||
align="start"
|
||||
flex="1">
|
||||
<hbox class="tab-icon-sound">
|
||||
<image class="tab-icon-sound-image" role="presentation"/>
|
||||
<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>
|
||||
<label class="tab-text tab-label" role="presentation"/>
|
||||
</vbox>
|
||||
<image class="tab-close-button close-icon" role="presentation"/>
|
||||
</hbox>
|
||||
|
|
@ -103,6 +105,8 @@
|
|||
".tab-loading-burst": "pinned,bursting,notselectedsinceload",
|
||||
".tab-content":
|
||||
"pinned,selected=visuallyselected,titlechanged,attention",
|
||||
".tab-icon-stack":
|
||||
"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":
|
||||
|
|
@ -111,7 +115,7 @@
|
|||
"src=image,triggeringprincipal=iconloadingprincipal,requestcontextid,fadein,pinned,selected=visuallyselected,busy,crashed,sharing,pictureinpicture",
|
||||
".tab-sharing-icon-overlay": "sharing,selected=visuallyselected,pinned",
|
||||
".tab-icon-overlay":
|
||||
"pictureinpicture,crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked",
|
||||
"sharing,pictureinpicture,crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked",
|
||||
".tab-label-container":
|
||||
"pinned,selected=visuallyselected,labeldirection",
|
||||
".tab-label-container.proton":
|
||||
|
|
@ -122,7 +126,7 @@
|
|||
"text=label,accesskey,fadein,pinned,selected=visuallyselected,attention",
|
||||
".tab-icon-sound":
|
||||
"soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked,pictureinpicture",
|
||||
".tab-label-container.proton .tab-icon-sound":
|
||||
".tab-label-container.proton .tab-secondary-label":
|
||||
"soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked,pictureinpicture",
|
||||
".tab-close-button": "fadein,pinned,selected=visuallyselected",
|
||||
};
|
||||
|
|
@ -270,9 +274,7 @@
|
|||
}
|
||||
|
||||
get soundPlayingIcon() {
|
||||
return gProtonTabs
|
||||
? this.querySelector(".tab-label-container.proton > .tab-icon-sound")
|
||||
: this.querySelector(".tab-icon-sound");
|
||||
return gProtonTabs ? null : this.querySelector(".tab-icon-sound");
|
||||
}
|
||||
|
||||
get overlayIcon() {
|
||||
|
|
@ -299,12 +301,6 @@
|
|||
return this.querySelector(".tab-close-button");
|
||||
}
|
||||
|
||||
_isEventForTabSoundIcon(event) {
|
||||
return gProtonTabs
|
||||
? event.target.closest(".tab-icon-sound")
|
||||
: event.target.classList.contains("tab-icon-sound");
|
||||
}
|
||||
|
||||
updateLastAccessed(aDate) {
|
||||
this._lastAccessed = this.selected ? Infinity : aDate || Date.now();
|
||||
}
|
||||
|
|
@ -313,6 +309,24 @@
|
|||
if (event.target.classList.contains("tab-close-button")) {
|
||||
this.mOverCloseButton = true;
|
||||
}
|
||||
if (gProtonTabs && 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,
|
||||
});
|
||||
}
|
||||
this._mouseenter();
|
||||
}
|
||||
|
||||
|
|
@ -320,6 +334,9 @@
|
|||
if (event.target.classList.contains("tab-close-button")) {
|
||||
this.mOverCloseButton = false;
|
||||
}
|
||||
if (gProtonTabs && event.target == this.overlayIcon) {
|
||||
this.setSecondaryTabTooltipLabel(null);
|
||||
}
|
||||
this._mouseleave();
|
||||
}
|
||||
|
||||
|
|
@ -350,8 +367,7 @@
|
|||
this.style.MozUserFocus = "ignore";
|
||||
} else if (
|
||||
event.target.classList.contains("tab-close-button") ||
|
||||
(this._isEventForTabSoundIcon(event) &&
|
||||
!event.target.className.includes("tab-icon-sound-pip-label")) ||
|
||||
event.target.classList.contains("tab-icon-sound") ||
|
||||
event.target.classList.contains("tab-icon-overlay")
|
||||
) {
|
||||
eventMaySelectTab = false;
|
||||
|
|
@ -417,7 +433,7 @@
|
|||
if (
|
||||
gBrowser.multiSelectedTabsCount > 0 &&
|
||||
!event.target.classList.contains("tab-close-button") &&
|
||||
!this._isEventForTabSoundIcon(event) &&
|
||||
!event.target.classList.contains("tab-icon-sound") &&
|
||||
!event.target.classList.contains("tab-icon-overlay")
|
||||
) {
|
||||
// Tabs were previously multi-selected and user clicks on a tab
|
||||
|
|
@ -426,14 +442,17 @@
|
|||
}
|
||||
|
||||
if (
|
||||
this._isEventForTabSoundIcon(event) ||
|
||||
event.target.classList.contains("tab-icon-sound") ||
|
||||
(event.target.classList.contains("tab-icon-overlay") &&
|
||||
(this.soundPlaying || this.muted || this.activeMediaBlocked))
|
||||
) {
|
||||
if (this.multiselected) {
|
||||
gBrowser.toggleMuteAudioOnMultiSelectedTabs(this);
|
||||
} else {
|
||||
if (this._isEventForTabSoundIcon(event) && this.pictureinpicture) {
|
||||
if (
|
||||
event.target.classList.contains("tab-icon-sound") &&
|
||||
this.pictureinpicture
|
||||
) {
|
||||
// When Picture-in-Picture is open, we repurpose '.tab-icon-sound' as
|
||||
// an inert Picture-in-Picture indicator, and expose the '.tab-icon-overlay'
|
||||
// as the mechanism for muting the tab, so we don't need to handle clicks on
|
||||
|
|
@ -476,7 +495,7 @@
|
|||
this._selectedOnFirstMouseDown &&
|
||||
this.selected &&
|
||||
!(
|
||||
this._isEventForTabSoundIcon(event) ||
|
||||
event.target.classList.contains("tab-icon-sound") ||
|
||||
event.target.classList.contains("tab-icon-overlay")
|
||||
)
|
||||
) {
|
||||
|
|
@ -564,6 +583,26 @@
|
|||
}
|
||||
}
|
||||
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
||||
startUnselectedTabHoverTimer() {
|
||||
// Only record data when we need to.
|
||||
if (!this.linkedBrowser.shouldHandleUnselectedTabHover) {
|
||||
|
|
|
|||
|
|
@ -18,6 +18,29 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("browser.proton.tabs.enabled") {
|
||||
:root[uidensity="compact"] .tab-secondary-label,
|
||||
.tab-secondary-label:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]),
|
||||
.tab-secondary-label:not([activemedia-blocked]) > .tab-icon-sound-blocked-label,
|
||||
.tab-secondary-label[muted][activemedia-blocked] > .tab-icon-sound-blocked-label,
|
||||
.tab-secondary-label[activemedia-blocked] > .tab-icon-sound-playing-label,
|
||||
.tab-secondary-label[muted] > .tab-icon-sound-playing-label,
|
||||
.tab-secondary-label[pictureinpicture] > .tab-icon-sound-playing-label,
|
||||
.tab-secondary-label[pictureinpicture] > .tab-icon-sound-muted-label,
|
||||
.tab-secondary-label:not([pictureinpicture]) > .tab-icon-sound-pip-label,
|
||||
.tab-secondary-label:not([muted]) > .tab-icon-sound-muted-label,
|
||||
.tab-secondary-label:not([showtooltip]) > .tab-icon-sound-tooltip-label,
|
||||
.tab-secondary-label[showtooltip] > .tab-icon-sound-label:not(.tab-icon-sound-tooltip-label) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-sharing-icon-overlay[sharing]:not([selected]),
|
||||
.tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture], [crashed]) {
|
||||
display: revert;
|
||||
}
|
||||
} /* end proton */
|
||||
|
||||
@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
|
||||
.tab-icon-sound:not([activemedia-blocked]) > .tab-icon-sound-blocked-label,
|
||||
.tab-icon-sound[muted][activemedia-blocked] > .tab-icon-sound-blocked-label,
|
||||
.tab-icon-sound[activemedia-blocked] > .tab-icon-sound-playing-label,
|
||||
|
|
@ -37,6 +60,7 @@
|
|||
.tab-icon-overlay[crashed] {
|
||||
display: -moz-box;
|
||||
}
|
||||
} /* end !proton */
|
||||
|
||||
.tab-label {
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -5347,7 +5347,7 @@
|
|||
// When Picture-in-Picture is open, we repurpose '.tab-icon-sound' as
|
||||
// an inert Picture-in-Picture indicator, so we should display
|
||||
// the default tooltip
|
||||
else if (tab._overPlayingIcon && !tab.pictureinpicture) {
|
||||
else if (!gProtonTabs && tab._overPlayingIcon && !tab.pictureinpicture) {
|
||||
let stringID;
|
||||
if (tab.selected) {
|
||||
stringID = tab.linkedBrowser.audioMuted
|
||||
|
|
|
|||
|
|
@ -364,6 +364,28 @@ browser-tab-audio-blocked = AUTOPLAY BLOCKED
|
|||
# This label should be written in all capital letters if your locale supports them.
|
||||
browser-tab-audio-pip = PICTURE-IN-PICTURE
|
||||
|
||||
## These labels should be written in all capital letters if your locale supports them.
|
||||
## Variables:
|
||||
## $count (number): number of affected tabs
|
||||
|
||||
browser-tab-mute =
|
||||
{ $count ->
|
||||
[1] MUTE TAB
|
||||
*[other] MUTE { $count } TABS
|
||||
}
|
||||
|
||||
browser-tab-unmute =
|
||||
{ $count ->
|
||||
[1] UNMUTE TAB
|
||||
*[other] UNMUTE { $count } TABS
|
||||
}
|
||||
|
||||
browser-tab-unblock =
|
||||
{ $count ->
|
||||
[1] PLAY TAB
|
||||
*[other] PLAY { $count } TABS
|
||||
}
|
||||
|
||||
## Bookmarks toolbar items
|
||||
|
||||
browser-import-button2 =
|
||||
|
|
|
|||
|
|
@ -232,8 +232,6 @@
|
|||
skin/classic/browser/tabbrowser/loading.svg (../shared/tabbrowser/loading.svg)
|
||||
skin/classic/browser/tabbrowser/loading-burst.svg (../shared/tabbrowser/loading-burst.svg)
|
||||
skin/classic/browser/tabbrowser/pendingpaint.png (../shared/tabbrowser/pendingpaint.png)
|
||||
skin/classic/browser/tabbrowser/proton-tab-audio-playing.svg (../shared/tabbrowser/proton-tab-audio-playing.svg)
|
||||
skin/classic/browser/tabbrowser/proton-tab-audio-muted.svg (../shared/tabbrowser/proton-tab-audio-muted.svg)
|
||||
skin/classic/browser/tabbrowser/tab-audio-playing.svg (../shared/tabbrowser/tab-audio-playing.svg)
|
||||
skin/classic/browser/tabbrowser/tab-audio-playing-small.svg (../shared/tabbrowser/tab-audio-playing-small.svg)
|
||||
skin/classic/browser/tabbrowser/tab-audio-muted.svg (../shared/tabbrowser/tab-audio-muted.svg)
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
<!-- 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="24" height="24" fill="context-fill" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.4 4.1c-.3-.2-.8 0-1.1.1L5.6 8H2c-.6 0-1 .4-1 1v6c0 .6.4 1 1 1h3.6l4.7 3.8.6.2.4-.1c.3-.2.6-.5.6-.9V5c.1-.4-.1-.7-.5-.9zM10 17l-3.4-2.7L6 14H3v-4h3c.2 0 .4 0 .6-.2L10 7.1V17zm13.7-1.2c.4-.4.4-1 0-1.4L21.4 12l2.3-2.3c.4-.4.4-1 0-1.4a1 1 0 00-1.4 0L20 10.6l-2.3-2.3a1 1 0 00-1.4 0 1 1 0 000 1.4l2.3 2.3-2.3 2.3a1 1 0 000 1.4c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.3-2.3 2.3 2.3c.2.2.4.3.7.3.3 0 .5-.1.7-.3z"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 716 B |
|
|
@ -1,6 +0,0 @@
|
|||
<!-- 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="24" height="24" fill="context-fill" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.3 4.2c.3-.2.8-.3 1 0 .5.1.7.4.6.8v14c0 .3-.3.6-.6.8l-.4.1-.6-.2-4.7-3.8H2c-.6 0-1-.4-1-1V9c0-.5.4-1 1-1h3.6l4.7-3.7zm-3.7 10l3.4 2.6V7.1L6.6 9.8 6 10H3v4h3l.6.1zm9.6-6.4a6 6 0 010 8.4 1 1 0 01-.7.3 1 1 0 01-.7-.3 1 1 0 010-1.4 4 4 0 000-5.6 1 1 0 010-1.4c.4-.4 1-.4 1.4 0zM19 20c.2 0 .5-.1.7-.3a10.8 10.8 0 000-15.4 1 1 0 00-1.4 0 1 1 0 000 1.4 8.9 8.9 0 010 12.6 1 1 0 000 1.4c.2.2.5.3.7.3z"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 713 B |
|
|
@ -1,7 +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" width="16" height="16" fill="context-fill">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
|
||||
<path filter="invert(1)" d="M8 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6m0 10.5c2.4 0 4.5-2 4.5-4.5S10.4 3.5 8 3.5 3.5 5.5 3.5 8s2.1 4.5 4.5 4.5M6 5l5 3-5 3V5m2-4C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm-.7 3.6c.2-.1.4-.1.7-.1 1.5 0 2.9 1.1 3.4 2.5L7.3 4.6zM5 9.7c-.3-.5-.5-1.1-.5-1.7s.2-1.2.5-1.7v3.4zm2.3 1.7L11.4 9c-.4 1.4-1.8 2.5-3.4 2.5-.3 0-.5 0-.7-.1z"/>
|
||||
<path d="M8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm0 10.5c-2.4 0-4.5-2-4.5-4.5S5.6 3.5 8 3.5s4.5 2 4.5 4.5-2.1 4.5-4.5 4.5zM6 5v6l5-3-5-3z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 835 B После Ширина: | Высота: | Размер: 871 B |
|
|
@ -1,7 +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" width="16" height="16" fill="context-fill">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
|
||||
<path filter="invert(1)" d="M5.6,5H4C2.9,5,2,5.9,2,7v2c0,0.7,0.3,1.3,0.9,1.7l-1.8,1.8l2.5,2.5l3-3l2.6,2.6c0.3,0.3,0.9,0.1,0.9-0.4V8.5l3.9-3.9 l-2.5-2.5L10,3.5V1.8c0-0.4-0.5-0.7-0.9-0.4L5.6,5z"/>
|
||||
<path d="M11.5,3.5L9,5.9V3L6,6H4C3.4,6,3,6.4,3,7v2c0,0.6,0.4,1,1,1h0.9l-2.5,2.5l1.1,1.1l9-9L11.5,3.5z M9,13V9.7l-1.7,1.7L9,13z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 632 B После Ширина: | Высота: | Размер: 668 B |
|
|
@ -1,7 +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" width="16" height="16" fill="context-fill">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
|
||||
<path filter="invert(1)" d="M12.4,3.6l-1-0.6l-0.9,2.5H10V1.8c0-0.4-0.5-0.7-0.9-0.4L5.6,5H4C2.9,5,2,5.9,2,7v2c0,1.1,0.9,2,2,2h1.6l3.6,3.6 c0.3,0.3,0.9,0.1,0.9-0.4v-3.7h0.5l0.9,2.5l1-0.6C14,11.5,15,9.8,15,8S14,4.5,12.4,3.6z M9,13l-3-3H4c-0.6,0-1-0.4-1-1V7 c0-0.6,0.4-1,1-1h2l3-3V13z M10,9.5v-3c0.8,0,1.5,0.7,1.5,1.5S10.8,9.5,10,9.5z M11.9,11.5l-0.4-0.9C12.4,10,13,9.1,13,8 s-0.6-2-1.4-2.5l0.3-1C13.2,5.2,14,6.5,14,8S13.2,10.8,11.9,11.5z"/>
|
||||
<path d="M4,6C3.4,6,3,6.4,3,7v2c0,0.6,0.4,1,1,1h2l3,3V3L6,6H4z M10,6.5v3c0.8,0,1.5-0.7,1.5-1.5S10.8,6.5,10,6.5z M11.9,4.5 l-0.4,0.9C12.4,6,13,6.9,13,8s-0.6,2-1.4,2.5l0.4,0.9c1.2-0.7,2.1-2,2.1-3.5S13.2,5.2,11.9,4.5z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 963 B После Ширина: | Высота: | Размер: 999 B |
|
|
@ -208,39 +208,40 @@
|
|||
}
|
||||
|
||||
@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
|
||||
.tab-throbber,
|
||||
.tab-icon-pending,
|
||||
.tab-icon-image,
|
||||
.tab-icon-stack,
|
||||
.tab-icon-sound,
|
||||
.tab-sharing-icon-overlay,
|
||||
.tab-close-button {
|
||||
margin-top: 1px;
|
||||
}
|
||||
} /*** END !proton ***/
|
||||
|
||||
.tab-throbber,
|
||||
/* Width/height & margins apply on tab icon stack children */
|
||||
.tab-throbber-tabslist,
|
||||
.tab-throbber,
|
||||
.tab-icon-pending,
|
||||
.tab-icon-image,
|
||||
.tab-sharing-icon-overlay {
|
||||
.tab-sharing-icon-overlay,
|
||||
.tab-icon-overlay {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
|
||||
.tab-throbber:not([pinned]),
|
||||
.tab-sharing-icon-overlay:not([pinned]),
|
||||
.tab-icon-pending:not([pinned]),
|
||||
.tab-icon-image:not([pinned]) {
|
||||
.tab-icon-image:not([pinned]),
|
||||
.tab-sharing-icon-overlay:not([pinned]),
|
||||
.tab-icon-overlay:not([pinned], [sharing]) {
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
} /*** END !proton ***/
|
||||
|
||||
@supports -moz-bool-pref("browser.proton.tabs.enabled") {
|
||||
.tab-throbber:not([pinned]),
|
||||
.tab-sharing-icon-overlay:not([pinned]),
|
||||
.tab-icon-pending:not([pinned]),
|
||||
.tab-icon-image:not([pinned]) {
|
||||
.tab-icon-image:not([pinned]),
|
||||
.tab-sharing-icon-overlay:not([pinned]),
|
||||
.tab-icon-overlay:not([pinned]) {
|
||||
margin-inline-end: 5.5px;
|
||||
}
|
||||
} /*** END proton ***/
|
||||
|
|
@ -345,17 +346,11 @@
|
|||
}
|
||||
|
||||
.tab-sharing-icon-overlay {
|
||||
/* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
|
||||
margin-inline-start: -22px;
|
||||
position: relative;
|
||||
-moz-context-properties: fill;
|
||||
fill: rgb(224, 41, 29);
|
||||
}
|
||||
|
||||
.tab-sharing-icon-overlay[pinned] {
|
||||
margin-inline-start: -16px;
|
||||
}
|
||||
|
||||
.tab-sharing-icon-overlay[sharing="camera"] {
|
||||
list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
|
||||
}
|
||||
|
|
@ -371,46 +366,94 @@
|
|||
.tab-icon-overlay {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-top: -8px;
|
||||
margin-inline: -15px -1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-icon-overlay[pinned] {
|
||||
margin-inline: -6px -10px;
|
||||
.tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
|
||||
top: -4.5px;
|
||||
inset-inline-end: -9px;
|
||||
z-index: 1; /* Overlay tab title */
|
||||
}
|
||||
|
||||
.tab-icon-overlay[crashed] {
|
||||
list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
|
||||
@supports -moz-bool-pref("browser.proton.tabs.enabled") and
|
||||
(not -moz-bool-pref("browser.proton.tabs.audio-tab-area")) and
|
||||
(not -moz-bool-pref("browser.proton.tabs.audio-tab")) {
|
||||
#navigator-toolbox:not(:hover) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]),
|
||||
#navigator-toolbox:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay) {
|
||||
opacity: 0;
|
||||
}
|
||||
} /*** END proton ***/
|
||||
|
||||
.tab-icon-overlay[soundplaying],
|
||||
|
||||
@supports -moz-bool-pref("browser.proton.tabs.enabled") and
|
||||
-moz-bool-pref("browser.proton.tabs.audio-tab-area") and
|
||||
(not -moz-bool-pref("browser.proton.tabs.audio-tab")) {
|
||||
#TabsToolbar:not(:hover) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]),
|
||||
#TabsToolbar:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay) {
|
||||
opacity: 0;
|
||||
}
|
||||
} /*** END proton ***/
|
||||
|
||||
@supports -moz-bool-pref("browser.proton.tabs.enabled") and
|
||||
(not -moz-bool-pref("browser.proton.tabs.audio-tab-area")) and
|
||||
-moz-bool-pref("browser.proton.tabs.audio-tab") {
|
||||
.tabbrowser-tab:not(:hover) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]),
|
||||
.tabbrowser-tab:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay) {
|
||||
opacity: 0;
|
||||
}
|
||||
} /*** END proton ***/
|
||||
|
||||
.tab-icon-overlay[soundplaying]:not([crashed]),
|
||||
.tab-icon-overlay[muted]:not([crashed]),
|
||||
.tab-icon-overlay[activemedia-blocked]:not([crashed]) {
|
||||
border-radius: 10px;
|
||||
-moz-context-properties: fill;
|
||||
-moz-context-properties: fill, fill-opacity;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.tab-icon-overlay[soundplaying]:hover,
|
||||
.tab-icon-overlay[muted]:not([crashed]):hover,
|
||||
.tab-icon-overlay[activemedia-blocked]:not([crashed]):hover {
|
||||
.tab-icon-overlay:is([pinned], [sharing]):not([crashed])[soundplaying]:hover,
|
||||
.tab-icon-overlay:is([pinned], [sharing]):not([crashed])[muted]:hover,
|
||||
.tab-icon-overlay:is([pinned], [sharing]):not([crashed])[activemedia-blocked]:hover {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("browser.proton.tabs.enabled") {
|
||||
.tab-icon-overlay:not([pinned], [sharing], [crashed])[soundplaying],
|
||||
.tab-icon-overlay:not([pinned], [sharing], [crashed])[muted],
|
||||
.tab-icon-overlay:not([pinned], [sharing], [crashed])[activemedia-blocked] {
|
||||
border-radius: 2px;
|
||||
fill-opacity: 0.75;
|
||||
}
|
||||
.tab-icon-overlay:not([pinned], [sharing], [crashed])[soundplaying]:hover,
|
||||
.tab-icon-overlay:not([pinned], [sharing], [crashed])[muted]:hover,
|
||||
.tab-icon-overlay:not([pinned], [sharing], [crashed])[activemedia-blocked]:hover {
|
||||
background-color: color-mix(in srgb, currentColor 15%, transparent);
|
||||
fill-opacity: 0.95;
|
||||
}
|
||||
.tab-icon-overlay:not([pinned], [sharing], [crashed])[soundplaying]:hover:active,
|
||||
.tab-icon-overlay:not([pinned], [sharing], [crashed])[muted]:hover:active,
|
||||
.tab-icon-overlay:not([pinned], [sharing], [crashed])[activemedia-blocked]:hover:active {
|
||||
background-color: color-mix(in srgb, currentColor 30%, transparent);
|
||||
}
|
||||
} /*** END proton ***/
|
||||
|
||||
.tab-icon-overlay[soundplaying] {
|
||||
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
|
||||
}
|
||||
|
||||
.tab-icon-overlay[muted]:not([crashed]) {
|
||||
.tab-icon-overlay[muted] {
|
||||
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
|
||||
}
|
||||
|
||||
.tab-icon-overlay[activemedia-blocked]:not([crashed]) {
|
||||
.tab-icon-overlay[activemedia-blocked] {
|
||||
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
|
||||
}
|
||||
|
||||
.tab-icon-overlay[crashed] {
|
||||
list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.tab-throbber-tabslist[busy] {
|
||||
list-style-image: url("chrome://browser/skin/tabbrowser/hourglass.svg");
|
||||
|
|
@ -512,27 +555,16 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.tab-icon-sound {
|
||||
-moz-box-align: center;
|
||||
.tab-secondary-label {
|
||||
font-size: .75em;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.tab-icon-sound-image,
|
||||
.tab-icon-sound-label {
|
||||
/* Set height back to equivalent of parent's 1em based
|
||||
on the .tab-icon-sound having a reduced font-size */
|
||||
height: 1.3333em;
|
||||
}
|
||||
|
||||
.tab-icon-sound-image {
|
||||
padding: 0;
|
||||
-moz-context-properties: fill;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.tab-icon-sound-label {
|
||||
margin: 0;
|
||||
padding-inline-start: 3px;
|
||||
}
|
||||
} /*** END proton ***/
|
||||
|
||||
|
|
@ -546,19 +578,6 @@
|
|||
.tab-icon-sound[muted] {
|
||||
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted.svg);
|
||||
}
|
||||
} /*** END !proton ***/
|
||||
|
||||
@supports -moz-bool-pref("browser.proton.tabs.enabled") {
|
||||
.tab-icon-sound[soundplaying],
|
||||
.tab-icon-sound[muted],
|
||||
.tab-icon-sound[activemedia-blocked] {
|
||||
list-style-image: url(chrome://browser/skin/tabbrowser/proton-tab-audio-playing.svg);
|
||||
}
|
||||
|
||||
.tab-icon-sound[muted] {
|
||||
list-style-image: url(chrome://browser/skin/tabbrowser/proton-tab-audio-muted.svg);
|
||||
}
|
||||
} /*** END proton ***/
|
||||
|
||||
.tab-icon-sound[activemedia-blocked] {
|
||||
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-blocked.svg);
|
||||
|
|
@ -588,8 +607,6 @@
|
|||
:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[activemedia-blocked] {
|
||||
filter: drop-shadow(1px 1px 1px black);
|
||||
}
|
||||
|
||||
@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
|
||||
.tab-icon-sound[soundplaying]:not(:hover),
|
||||
.tab-icon-sound[muted]:not(:hover),
|
||||
.tab-icon-sound[activemedia-blocked]:not(:hover) {
|
||||
|
|
@ -604,12 +621,7 @@
|
|||
} /*** END !proton ***/
|
||||
|
||||
@supports -moz-bool-pref("browser.proton.tabs.enabled") {
|
||||
.tab-icon-sound:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) > .tab-icon-sound-image:not(:hover),
|
||||
.tab-icon-sound:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) > .tab-icon-sound-label:not(:hover) {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]) > .tab-icon-sound-image:not(:hover),
|
||||
.tab-secondary-label[soundplaying-scheduledremoval]:not([muted]):not(:hover),
|
||||
.tab-icon-overlay[soundplaying-scheduledremoval]:not([muted], :hover) {
|
||||
transition: opacity .3s linear var(--soundplaying-removal-delay);
|
||||
opacity: 0;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче