Issue #638 - Part 1: Provide a visual indicator for muting/unmuting tabs

This commit is contained in:
FranklinDM 2018-11-16 20:59:11 +08:00 • committed by Roy Tam
commit 6dc555939c
10 changed files with 538 additions and 1 deletions

View file

@ -1758,6 +1758,79 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
-moz-margin-end: -1px;
}
/* Tab sound indicator */
.tab-icon-sound {
-moz-margin-start: 4px;
width: 16px;
height: 16px;
padding: 0;
}
.tab-icon-sound:not(:-moz-any([soundplaying],[muted])),
.tab-icon-sound[pinned] {
display: none;
}
.tab-icon-sound[soundplaying] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
}
.tab-icon-sound[soundplaying]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
}
.tab-icon-sound[soundplaying]:hover:active {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
}
.tab-icon-sound[muted],
.tab-icon-sound[blocked] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
}
.tab-icon-sound[muted]:hover,
.tab-icon-sound[blocked]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
}
.tab-icon-sound[muted]:hover:active,
.tab-icon-sound[blocked]:hover:active {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
}
#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark");
}
#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark-hover");
}
#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark-pressed");
}
#TabsToolbar[brighttext] .tab-icon-sound[blocked],
#TabsToolbar[brighttext] .tab-icon-sound[muted] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark");
}
#TabsToolbar[brighttext] .tab-icon-sound[blocked]:hover,
#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark-hover");
}
#TabsToolbar[brighttext] .tab-icon-sound[blocked]:hover:active,
#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark-pressed");
}
.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
.tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
transition: opacity .3s linear var(--soundplaying-removal-delay);
opacity: 0;
}
/* Tabstrip new tab button */
.tabs-newtab-button,
#TabsToolbar > #new-tab-button ,

View file

@ -123,6 +123,8 @@ browser.jar:
skin/classic/browser/tabbrowser/tab.png (tabbrowser/tab.png)
skin/classic/browser/tabbrowser/tab-overflow-border.png (tabbrowser/tab-overflow-border.png)
skin/classic/browser/tabbrowser/tabDragIndicator.png (tabbrowser/tabDragIndicator.png)
skin/classic/browser/tabbrowser/tab-audio.svg (../shared/tabbrowser/tab-audio.svg)
skin/classic/browser/tabbrowser/tab-audio-small.svg (../shared/tabbrowser/tab-audio-small.svg)
#ifdef MOZ_SERVICES_SYNC
skin/classic/browser/sync-16-throbber.png
skin/classic/browser/sync-16.png