Bug 1531101 - Update videocontrols error IDs to make it cleaner to introduce new message types. r=jaws

Differential Revision: https://phabricator.services.mozilla.com/D22163

--HG--
extra : moz-landing-system : lando

toolkit/content/tests/widgets/test_videocontrols_error.html

@@ -37,7 +37,7 @@
     await SimpleTest.promiseWaitForCondition(() => statusOverlay.hidden,
       "statusOverlay should not present without error");
 
-    ok(!statusOverlay.hasAttribute("error"), "statusOverlay should not in error state");
+    ok(!statusOverlay.hasAttribute("status"), "statusOverlay should not be showing a state message.");
     isnot(statusIcon.getAttribute("type"), "error", "should not show error icon");
   });
 
@@ -50,7 +50,7 @@
     });
 
     ok(!statusOverlay.hidden, `statusOverlay should show when ${errorType}`);
-    is(statusOverlay.getAttribute("error"), errorType, `statusOverlay should have correct error state: ${errorType}`);
+    is(statusOverlay.getAttribute("status"), errorType, `statusOverlay should have correct error state: ${errorType}`);
     is(statusIcon.getAttribute("type"), "error", `should show error icon when ${errorType}`);
     isnot(statusLabelErrorNoSource.getBoundingClientRect().height, 0,
       "errorNoSource status label should be visible.");

toolkit/content/widgets/videocontrols.js

@@ -517,7 +517,7 @@ this.VideoControlsImplWidget = class {
           case "loadstart":
             this.maxCurrentTimeSeen = 0;
             this.controlsSpacer.removeAttribute("aria-label");
-            this.statusOverlay.removeAttribute("error");
+            this.statusOverlay.removeAttribute("status");
             this.statusIcon.setAttribute("type", "throbber");
             this.isAudioOnly = this.video.localName == "audio";
             this.setPlayButtonState(true);
@@ -799,7 +799,7 @@ this.VideoControlsImplWidget = class {
 
         let label = this.shadowRoot.getElementById(error);
         this.controlsSpacer.setAttribute("aria-label", label.textContent);
-        this.statusOverlay.setAttribute("error", error);
+        this.statusOverlay.setAttribute("status", error);
       },
 
       formatTime(aTime, showHours = false) {
@@ -2206,12 +2206,12 @@ this.VideoControlsImplWidget = class {
         <div id="controlsContainer" class="controlsContainer" role="none">
           <div id="statusOverlay" class="statusOverlay stackItem" hidden="true">
             <div id="statusIcon" class="statusIcon"></div>
-            <span class="errorLabel" id="errorAborted">&error.aborted;</span>
-            <span class="errorLabel" id="errorNetwork">&error.network;</span>
-            <span class="errorLabel" id="errorDecode">&error.decode;</span>
-            <span class="errorLabel" id="errorSrcNotSupported">&error.srcNotSupported;</span>
-            <span class="errorLabel" id="errorNoSource">&error.noSource2;</span>
-            <span class="errorLabel" id="errorGeneric">&error.generic;</span>
+            <span class="statusLabel" id="errorAborted">&error.aborted;</span>
+            <span class="statusLabel" id="errorNetwork">&error.network;</span>
+            <span class="statusLabel" id="errorDecode">&error.decode;</span>
+            <span class="statusLabel" id="errorSrcNotSupported">&error.srcNotSupported;</span>
+            <span class="statusLabel" id="errorNoSource">&error.noSource2;</span>
+            <span class="statusLabel" id="errorGeneric">&error.generic;</span>
           </div>
 
           <div id="controlsOverlay" class="controlsOverlay stackItem" role="none">

toolkit/themes/shared/media/videocontrols.css

@@ -453,8 +453,8 @@
   opacity: 0;
 }
 
-/* Error description formatting */
-.errorLabel {
+/* Status description formatting */
+.statusLabel {
   padding: 0 10px;
   text-align: center;
   font: message-box;
@@ -462,16 +462,16 @@
   color: #ffffff;
 }
 
-.errorLabel {
+.statusLabel {
   display: none;
 }
 
-[error="errorAborted"]         > [id="errorAborted"],
-[error="errorNetwork"]         > [id="errorNetwork"],
-[error="errorDecode"]          > [id="errorDecode"],
-[error="errorSrcNotSupported"] > [id="errorSrcNotSupported"],
-[error="errorNoSource"]        > [id="errorNoSource"],
-[error="errorGeneric"]         > [id="errorGeneric"] {
+[status="errorAborted"]         > [id="errorAborted"],
+[status="errorNetwork"]         > [id="errorNetwork"],
+[status="errorDecode"]          > [id="errorDecode"],
+[status="errorSrcNotSupported"] > [id="errorSrcNotSupported"],
+[status="errorNoSource"]        > [id="errorNoSource"],
+[status="errorGeneric"]         > [id="errorGeneric"] {
   display: inline;
 }