Issue #638 - Part 8: Add overlay sound icon for pinned tabs

- This also moves some styles to tabbrowser.css
This commit is contained in:
FranklinDM 2018-11-17 10:55:10 +08:00 • committed by Roy Tam
commit b0a98ca25b
5 changed files with 163 additions and 17 deletions

View file

@ -1766,11 +1766,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
padding: 0;
}
.tab-icon-sound:not(:-moz-any([soundplaying],[muted],[blocked])),
.tab-icon-sound[pinned] {
display: none;
}
.alltabs-endimage[soundplaying],
.tab-icon-sound[soundplaying] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
@ -1798,6 +1793,55 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
opacity: 0;
}
/* Tab icon overlay */
.tab-icon-overlay {
width: 16px;
height: 16px;
margin-top: -8px;
margin-inline-start: -15px;
margin-inline-end: -1px;
position: relative;
}
.tab-icon-overlay[soundplaying],
.tab-icon-overlay[muted]:not([crashed]),
.tab-icon-overlay[blocked]:not([crashed]) {
border-radius: 10px;
}
.tab-icon-overlay[soundplaying]:hover,
.tab-icon-overlay[muted]:not([crashed]):hover,
.tab-icon-overlay[blocked]:not([crashed]):hover {
background-color: white;
}
.tab-icon-overlay[soundplaying] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
}
.tab-icon-overlay[muted] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
}
.tab-icon-overlay[blocked] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
}
#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
.tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
}
#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
.tab-icon-overlay[muted][selected]:-moz-lwtheme-brighttext:not(:hover) {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
}
#TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
.tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
}
/* Tabstrip new tab button */
.tabs-newtab-button,
#TabsToolbar > #new-tab-button ,

View file

@ -1829,11 +1829,6 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-
padding: 0;
}
.tab-icon-sound:not(:-moz-any([soundplaying],[muted],[blocked])),
.tab-icon-sound[pinned] {
display: none;
}
.alltabs-endimage[soundplaying],
.tab-icon-sound[soundplaying] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
@ -1861,6 +1856,55 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-
opacity: 0;
}
/* Tab icon overlay */
.tab-icon-overlay {
width: 16px;
height: 16px;
margin-top: -8px;
margin-inline-start: -15px;
margin-inline-end: -1px;
position: relative;
}
.tab-icon-overlay[soundplaying],
.tab-icon-overlay[muted]:not([crashed]),
.tab-icon-overlay[blocked]:not([crashed]) {
border-radius: 10px;
}
.tab-icon-overlay[soundplaying]:hover,
.tab-icon-overlay[muted]:not([crashed]):hover,
.tab-icon-overlay[blocked]:not([crashed]):hover {
background-color: white;
}
.tab-icon-overlay[soundplaying] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
}
.tab-icon-overlay[muted] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
}
.tab-icon-overlay[blocked] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
}
#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
.tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
}
#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
.tab-icon-overlay[muted][selected]:-moz-lwtheme-brighttext:not(:hover) {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
}
#TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
.tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
}
/* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
.tabbrowser-arrowscrollbox > .scrollbutton-up,

View file

@ -2026,11 +2026,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
padding: 0;
}
.tab-icon-sound:not(:-moz-any([soundplaying],[muted],[blocked])),
.tab-icon-sound[pinned] {
display: none;
}
.alltabs-endimage[soundplaying],
.tab-icon-sound[soundplaying] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
@ -2052,11 +2047,61 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
filter: invert(1);
}
.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
.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;
}
/* Tab icon overlay */
.tab-icon-overlay {
width: 16px;
height: 16px;
margin-top: -8px;
margin-inline-start: -15px;
margin-inline-end: -1px;
position: relative;
}
.tab-icon-overlay[soundplaying],
.tab-icon-overlay[muted]:not([crashed]),
.tab-icon-overlay[blocked]:not([crashed]) {
border-radius: 10px;
}
.tab-icon-overlay[soundplaying]:hover,
.tab-icon-overlay[muted]:not([crashed]):hover,
.tab-icon-overlay[blocked]:not([crashed]):hover {
background-color: white;
}
.tab-icon-overlay[soundplaying] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
}
.tab-icon-overlay[muted] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
}
.tab-icon-overlay[blocked] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
}
#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
.tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
}
#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
.tab-icon-overlay[muted][selected]:-moz-lwtheme-brighttext:not(:hover) {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
}
#TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
.tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
}
/* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
.tabbrowser-arrowscrollbox > .scrollbutton-up,