Bug 486262 - Part 3: Allow muting and unmuting a tab by clicking on the playing icon; r=dao

This commit is contained in:
Ehsan Akhgari 2015-07-18 21:21:03 -04:00
parent f2489ce3b4
commit 86f0b38741
2 changed files with 80 additions and 2 deletions

View File

@ -5690,7 +5690,7 @@
class="tab-icon-image"
validate="never"
role="presentation"/>
<xul:image xbl:inherits="crashed,busy,soundplaying,pinned"
<xul:image xbl:inherits="crashed,busy,soundplaying,pinned,muted"
anonid="overlay-icon"
class="tab-icon-overlay"
role="presentation"/>
@ -5699,7 +5699,7 @@
xbl:inherits="value=visibleLabel,crop,accesskey,fadein,pinned,selected,visuallyselected"
class="tab-text tab-label"
role="presentation"/>
<xul:image xbl:inherits="soundplaying,pinned"
<xul:image xbl:inherits="soundplaying,pinned,muted"
anonid="soundplaying-icon"
class="tab-icon-sound"
role="presentation"/>
@ -5872,6 +5872,23 @@
tabContainer._hoveredTab = null;
]]></body>
</method>
<method name="_toggleMuteAudio">
<body>
<![CDATA[
let tabContainer = this.parentNode;
let browser = this.linkedBrowser;
if (browser.audioMuted) {
browser.unmute();
this.removeAttribute("muted");
} else {
browser.mute();
this.setAttribute("muted", "true");
}
tabContainer.tabbrowser._tabAttrModified(this, ["muted"]);
]]>
</body>
</method>
</implementation>
<handlers>
@ -5912,6 +5929,19 @@
<handler event="mouseup">
this.style.MozUserFocus = '';
</handler>
<handler event="click">
<![CDATA[
if (event.button != 0) {
return;
}
let anonid = event.originalTarget.getAttribute("anonid");
if ((anonid == "soundplaying-icon") ||
((anonid == "overlay-icon") && this.hasAttribute("soundplaying"))) {
this._toggleMuteAudio();
}
]]>
</handler>
</handlers>
</binding>

View File

@ -117,6 +117,18 @@
background-color: white;
}
.tab-icon-overlay[muted][pinned] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
}
.tab-icon-overlay[muted][pinned]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted-hover");
}
.tab-icon-overlay[muted][pinned]:hover:active {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted-pressed");
}
#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying][pinned] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-dark");
}
@ -129,6 +141,18 @@
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-pressed");
}
#TabsToolbar[brighttext] .tab-icon-overlay[muted][pinned] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
}
#TabsToolbar[brighttext] .tab-icon-overlay[muted][pinned]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted-hover");
}
#TabsToolbar[brighttext] .tab-icon-overlay[muted][pinned]:hover:active {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted-pressed");
}
.tab-throbber[busy] {
list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
}
@ -172,6 +196,18 @@
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
}
.tab-icon-sound[muted] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
}
.tab-icon-sound[muted]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
}
.tab-icon-sound[muted]: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");
}
@ -184,6 +220,18 @@
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark-pressed");
}
#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[muted]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark-hover");
}
#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-background,
.tabs-newtab-button {
/* overlap the tab curves */