Bug 1347791 - part1 : rename the attribute for the tab which has blocked the autoplay audio and would show the play-tab icon. r=mikedeboer

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

--HG--
extra : rebase_source : 762bfd2be06e21a964fd93076867b4f72a085adc

browser/base/content/browser.js

@@ -8320,7 +8320,7 @@ var TabContextMenu = {
 
     // 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")) {

browser/base/content/tabbrowser.css

@@ -24,7 +24,7 @@
 .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 {
@@ -34,7 +34,7 @@
 .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;
 }

browser/base/content/tabbrowser.xml

@@ -5740,9 +5740,9 @@
             return;
           }
 
-          if (!tab.hasAttribute("blocked")) {
+          if (!tab.hasAttribute("activemedia-blocked")) {
-            tab.setAttribute("blocked", true);
+            tab.setAttribute("activemedia-blocked", true);
-            this._tabAttrModified(tab, ["blocked"]);
+            this._tabAttrModified(tab, ["activemedia-blocked"]);
             tab.startMediaBlockTimer();
           }
         ]]>
@@ -5754,9 +5754,9 @@
             return;
           }
 
-          if (tab.hasAttribute("blocked")) {
+          if (tab.hasAttribute("activemedia-blocked")) {
-            tab.removeAttribute("blocked");
+            tab.removeAttribute("activemedia-blocked");
-            this._tabAttrModified(tab, ["blocked"]);
+            this._tabAttrModified(tab, ["activemedia-blocked"]);
             let hist = Services.telemetry.getHistogramById("TAB_AUDIO_INDICATOR_USED");
             hist.add(2 /* unblockByVisitingTab */);
             tab.finishMediaBlockTimer();
@@ -7352,7 +7352,7 @@
                      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"/>
@@ -7365,7 +7365,7 @@
                        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"/>
@@ -7438,11 +7438,6 @@
           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:
 
@@ -7467,9 +7462,9 @@
         </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>
 
@@ -7490,7 +7485,7 @@
         <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 =
@@ -7588,8 +7583,8 @@
           let hist = Services.telemetry.getHistogramById("TAB_AUDIO_INDICATOR_USED");
 
           if (browser.audioBlocked) {
-            this.removeAttribute("blocked");
+            this.removeAttribute("activemedia-blocked");
-            modifiedAttrs.push("blocked");
+            modifiedAttrs.push("activemedia-blocked");
 
             browser.resumeMedia();
             hist.add(3 /* unblockByClickingIcon */);

browser/themes/shared/tabs.inc.css

@@ -143,13 +143,13 @@
 
 .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;
 }
 
@@ -161,7 +161,7 @@
   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");
 }
 
@@ -175,8 +175,8 @@
   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),
+#TabsToolbar[brighttext] .tab-icon-overlay[activemedia-blocked]:not([crashed]):not([selected]):not(:hover),
-.tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext: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");
 }
 
@@ -208,7 +208,7 @@
 
 .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;
@@ -218,25 +218,25 @@
   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;
 }
 
@@ -455,7 +455,7 @@
 .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;
@@ -591,7 +591,7 @@
 
 .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;
@@ -601,7 +601,7 @@
   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);
 }
 

toolkit/content/tests/browser/head.js

@@ -34,13 +34,13 @@ function pushPrefs(...aPrefs) {
  * 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) {
+      if (event.detail.changed.indexOf("activemedia-blocked") >= 0) {
-        is(tab.soundBlocked, expectBlocked, "The tab should " + (expectBlocked ? "" : "not ") + "be blocked");
+        is(tab.activeMediaBlocked, expectBlocked, "The tab should " + (expectBlocked ? "" : "not ") + "be blocked");
         return true;
       }
       return false;