Bug 1347791 - part1 : rename the attribute for the tab which has blocked the autoplay audio and would show the play-tab icon.
The "blocked" attribute is too general to indicate the real usage, so rename it
to "activemedia-blocked".
This attribute indicates that whether the tab has blocked the autoplay media.
MozReview-Commit-ID: 58U7DJSMtss
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -8283,17 +8283,17 @@ var TabContextMenu = {
// Hide "Bookmark All Tabs" for a pinned tab. Update its state if visible.
let bookmarkAllTabs = document.getElementById("context_bookmarkAllTabs");
bookmarkAllTabs.hidden = this.contextTab.pinned;
if (!bookmarkAllTabs.hidden)
PlacesCommandHook.updateBookmarkAllTabsCommand();
// Adjust the state of the toggle mute menu item.
let toggleMute = document.getElementById("context_toggleMuteTab");
- if (this.contextTab.hasAttribute("blocked")) {
+ if (this.contextTab.hasAttribute("activemedia-blocked")) {
toggleMute.label = gNavigatorBundle.getString("playTab.label");
toggleMute.accessKey = gNavigatorBundle.getString("playTab.accesskey");
} else if (this.contextTab.hasAttribute("muted")) {
toggleMute.label = gNavigatorBundle.getString("unmuteTab.label");
toggleMute.accessKey = gNavigatorBundle.getString("unmuteTab.accesskey");
} else {
toggleMute.label = gNavigatorBundle.getString("muteTab.label");
toggleMute.accessKey = gNavigatorBundle.getString("muteTab.accesskey");
--- a/browser/base/content/tabbrowser.css
+++ b/browser/base/content/tabbrowser.css
@@ -19,27 +19,27 @@
}
.tab-close-button[pinned],
.tabbrowser-tabs[closebuttons="activetab"] > * > * > * > .tab-close-button:not([selected="true"]),
.tab-icon-image:not([src]):not([pinned]):not([crashed])[selected],
.tab-icon-image:not([src]):not([pinned]):not([crashed]):not([sharing]),
.tab-icon-image[busy],
.tab-throbber:not([busy]),
-.tab-icon-sound:not([soundplaying]):not([muted]):not([blocked]),
+.tab-icon-sound:not([soundplaying]):not([muted]):not([activemedia-blocked]),
.tab-icon-sound[pinned],
.tab-sharing-icon-overlay,
.tab-icon-overlay {
display: none;
}
.tab-sharing-icon-overlay[sharing]:not([selected]),
.tab-icon-overlay[soundplaying][pinned],
.tab-icon-overlay[muted][pinned],
-.tab-icon-overlay[blocked][pinned],
+.tab-icon-overlay[activemedia-blocked][pinned],
.tab-icon-overlay[crashed] {
display: -moz-box;
}
.tab-label {
white-space: nowrap;
}
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -5735,33 +5735,33 @@
</handler>
<handler event="DOMAudioPlaybackBlockStarted">
<![CDATA[
var tab = this.getTabFromAudioEvent(event)
if (!tab) {
return;
}
- if (!tab.hasAttribute("blocked")) {
- tab.setAttribute("blocked", true);
- this._tabAttrModified(tab, ["blocked"]);
+ if (!tab.hasAttribute("activemedia-blocked")) {
+ tab.setAttribute("activemedia-blocked", true);
+ this._tabAttrModified(tab, ["activemedia-blocked"]);
tab.startMediaBlockTimer();
}
]]>
</handler>
<handler event="DOMAudioPlaybackBlockStopped">
<![CDATA[
var tab = this.getTabFromAudioEvent(event)
if (!tab) {
return;
}
- if (tab.hasAttribute("blocked")) {
- tab.removeAttribute("blocked");
- this._tabAttrModified(tab, ["blocked"]);
+ if (tab.hasAttribute("activemedia-blocked")) {
+ tab.removeAttribute("activemedia-blocked");
+ this._tabAttrModified(tab, ["activemedia-blocked"]);
let hist = Services.telemetry.getHistogramById("TAB_AUDIO_INDICATOR_USED");
hist.add(2 /* unblockByVisitingTab */);
tab.finishMediaBlockTimer();
}
]]>
</handler>
</handlers>
</binding>
@@ -7347,30 +7347,30 @@
anonid="tab-icon-image"
class="tab-icon-image"
validate="never"
role="presentation"/>
<xul:image xbl:inherits="sharing,selected=visuallyselected"
anonid="sharing-icon"
class="tab-sharing-icon-overlay"
role="presentation"/>
- <xul:image xbl:inherits="crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected"
+ <xul:image xbl:inherits="crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked"
anonid="overlay-icon"
class="tab-icon-overlay"
role="presentation"/>
<xul:hbox class="tab-label-container"
xbl:inherits="pinned,selected=visuallyselected,labeldirection"
onoverflow="this.setAttribute('textoverflow', 'true');"
onunderflow="this.removeAttribute('textoverflow');"
flex="1">
<xul:label class="tab-text tab-label"
xbl:inherits="xbl:text=label,accesskey,fadein,pinned,selected=visuallyselected,attention"
role="presentation"/>
</xul:hbox>
- <xul:image xbl:inherits="soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected"
+ <xul:image xbl:inherits="soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked"
anonid="soundplaying-icon"
class="tab-icon-sound"
role="presentation"/>
<xul:toolbarbutton anonid="close-button"
xbl:inherits="fadein,pinned,selected=visuallyselected"
class="tab-close-button close-icon"/>
</xul:hbox>
</xul:stack>
@@ -7433,21 +7433,16 @@
return this.getAttribute("hidden") == "true";
</getter>
</property>
<property name="muted" readonly="true">
<getter>
return this.getAttribute("muted") == "true";
</getter>
</property>
- <property name="blocked" readonly="true">
- <getter>
- return this.getAttribute("blocked") == "true";
- </getter>
- </property>
<!--
Describes how the tab ended up in this mute state. May be any of:
- undefined: The tabs mute state has never changed.
- null: The mute state was last changed through the UI.
- Any string: The ID was changed through an extension API. The string
must be the ID of the extension which changed it.
-->
@@ -7462,19 +7457,19 @@
</property>
<property name="soundPlaying" readonly="true">
<getter>
return this.getAttribute("soundplaying") == "true";
</getter>
</property>
- <property name="soundBlocked" readonly="true">
+ <property name="activeMediaBlocked" readonly="true">
<getter>
- return this.getAttribute("blocked") == "true";
+ return this.getAttribute("activemedia-blocked") == "true";
</getter>
</property>
<property name="lastAccessed">
<getter>
return this._lastAccessed == Infinity ? Date.now() : this._lastAccessed;
</getter>
</property>
@@ -7485,17 +7480,17 @@
]]></body>
</method>
<field name="mOverCloseButton">false</field>
<property name="_overPlayingIcon" readonly="true">
<getter><![CDATA[
let iconVisible = this.hasAttribute("soundplaying") ||
this.hasAttribute("muted") ||
- this.hasAttribute("blocked");
+ this.hasAttribute("activemedia-blocked");
let soundPlayingIcon =
document.getAnonymousElementByAttribute(this, "anonid", "soundplaying-icon");
let overlayIcon =
document.getAnonymousElementByAttribute(this, "anonid", "overlay-icon");
return soundPlayingIcon && soundPlayingIcon.matches(":hover") ||
(overlayIcon && overlayIcon.matches(":hover") && iconVisible);
]]></getter>
@@ -7583,18 +7578,18 @@
}
let tabContainer = this.parentNode;
let browser = this.linkedBrowser;
let modifiedAttrs = [];
let hist = Services.telemetry.getHistogramById("TAB_AUDIO_INDICATOR_USED");
if (browser.audioBlocked) {
- this.removeAttribute("blocked");
- modifiedAttrs.push("blocked");
+ this.removeAttribute("activemedia-blocked");
+ modifiedAttrs.push("activemedia-blocked");
browser.resumeMedia();
hist.add(3 /* unblockByClickingIcon */);
this.finishMediaBlockTimer();
} else {
if (browser.audioMuted) {
browser.unmute();
this.removeAttribute("muted");
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -138,50 +138,50 @@
}
.tab-icon-overlay[crashed] {
list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
}
.tab-icon-overlay[soundplaying],
.tab-icon-overlay[muted]:not([crashed]),
-.tab-icon-overlay[blocked]:not([crashed]) {
+.tab-icon-overlay[activemedia-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 {
+.tab-icon-overlay[activemedia-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]:not([crashed]) {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
}
-.tab-icon-overlay[blocked]:not([crashed]) {
+.tab-icon-overlay[activemedia-blocked]:not([crashed]) {
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) {
+#TabsToolbar[brighttext] .tab-icon-overlay[activemedia-blocked]:not([crashed]):not([selected]):not(:hover),
+.tab-icon-overlay[activemedia-blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
}
.tab-throbber[busy] {
list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
}
.tab-throbber[progress] {
@@ -203,45 +203,45 @@
margin-inline-start: 1px;
width: 16px;
height: 16px;
padding: 0;
}
.tab-icon-sound[soundplaying],
.tab-icon-sound[muted],
-.tab-icon-sound[blocked] {
+.tab-icon-sound[activemedia-blocked] {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg);
-moz-context-properties: fill;
fill: currentColor;
}
.tab-icon-sound[muted] {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted.svg);
}
-.tab-icon-sound[blocked] {
+.tab-icon-sound[activemedia-blocked] {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-blocked.svg);
}
.tab-icon-sound:-moz-lwtheme-darktext[soundplaying],
.tab-icon-sound:-moz-lwtheme-darktext[muted],
-.tab-icon-sound:-moz-lwtheme-darktext[blocked] {
+.tab-icon-sound:-moz-lwtheme-darktext[activemedia-blocked] {
filter: drop-shadow(1px 1px 1px white);
}
.tab-icon-sound:-moz-lwtheme-brighttext[soundplaying],
.tab-icon-sound:-moz-lwtheme-brighttext[muted],
-.tab-icon-sound:-moz-lwtheme-brighttext[blocked] {
+.tab-icon-sound:-moz-lwtheme-brighttext[activemedia-blocked] {
filter: drop-shadow(1px 1px 1px black);
}
.tab-icon-sound[soundplaying]:not(:hover),
.tab-icon-sound[muted]:not(:hover),
-.tab-icon-sound[blocked]:not(:hover) {
+.tab-icon-sound[activemedia-blocked]:not(:hover) {
opacity: .8;
}
.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;
}
@@ -450,17 +450,17 @@
.tabbrowser-tab {
pointer-events: none;
}
.tab-background-middle,
.tabs-newtab-button,
.tab-icon-overlay[soundplaying],
.tab-icon-overlay[muted]:not([crashed]),
-.tab-icon-overlay[blocked]:not([crashed]),
+.tab-icon-overlay[activemedia-blocked]:not([crashed]),
.tab-icon-sound,
.tab-close-button {
pointer-events: auto;
}
/* Pinned tabs */
/* Pinned tab separators need position: absolute when positioned (during overflow). */
@@ -586,27 +586,27 @@
.alltabs-item[tabIsVisible] {
/* box-shadow instead of background-color to work around native styling */
box-shadow: inset -5px 0 ThreeDShadow;
}
.alltabs-endimage[soundplaying],
.alltabs-endimage[muted],
-.alltabs-endimage[blocked] {
+.alltabs-endimage[activemedia-blocked] {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg);
-moz-context-properties: fill;
fill: currentColor;
}
.alltabs-endimage[muted] {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted.svg);
}
-.alltabs-endimage[blocked] {
+.alltabs-endimage[activemedia-blocked] {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-blocked.svg);
}
.restore-tabs-button-wrapper {
visibility: hidden;
position: fixed; /* so the button does not take up actual space and cause overflow buttons in the tabbar when hidden */
}
--- a/toolkit/content/tests/browser/head.js
+++ b/toolkit/content/tests/browser/head.js
@@ -29,23 +29,23 @@ function pushPrefs(...aPrefs) {
SpecialPowers.pushPrefEnv({"set": aPrefs}, resolve);
});
}
/**
* Used to check whether the audio unblocking icon is in the tab.
*/
async function waitForTabBlockEvent(tab, expectBlocked) {
- if (tab.soundBlocked == expectBlocked) {
+ if (tab.activeMediaBlocked == expectBlocked) {
ok(true, "The tab should " + (expectBlocked ? "" : "not ") + "be blocked");
} else {
info("Block state doens't match, wait for attributes changes.");
await BrowserTestUtils.waitForEvent(tab, "TabAttrModified", false, (event) => {
- if (event.detail.changed.indexOf("blocked") >= 0) {
- is(tab.soundBlocked, expectBlocked, "The tab should " + (expectBlocked ? "" : "not ") + "be blocked");
+ if (event.detail.changed.indexOf("activemedia-blocked") >= 0) {
+ is(tab.activeMediaBlocked, expectBlocked, "The tab should " + (expectBlocked ? "" : "not ") + "be blocked");
return true;
}
return false;
});
}
}
/**