Bug 1543828 - Use <bdi> inside video controls content r=Gijs
authorBrian Grinstead <bgrinstead@mozilla.com>
Thu, 18 Apr 2019 17:45:22 +0000
changeset 470126 ac2351ce41ef7644f399db4d926e499bbb0db711
parent 470125 c992709a5b8079d6cd6ec133e84fbcbdad3ef7ee
child 470127 27157cc6395ef681545b5a8ae5f95fc584f38792
push id35888
push useraiakab@mozilla.com
push dateFri, 19 Apr 2019 09:47:45 +0000
treeherdermozilla-central@0160424142d1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1543828
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1543828 - Use <bdi> inside video controls content r=Gijs Differential Revision: https://phabricator.services.mozilla.com/D27757
toolkit/content/widgets/videocontrols.js
--- a/toolkit/content/widgets/videocontrols.js
+++ b/toolkit/content/widgets/videocontrols.js
@@ -2252,27 +2252,27 @@ this.VideoControlsImplWidget = class {
       <!ENTITY % videocontrolsDTD SYSTEM "chrome://global/locale/videocontrols.dtd">
       %videocontrolsDTD;
       ]>
       <div class="videocontrols" xmlns="http://www.w3.org/1999/xhtml" role="none">
         <link rel="stylesheet" type="text/css" href="chrome://global/skin/media/videocontrols.css" />
         <div id="controlsContainer" class="controlsContainer" role="none">
           <div id="statusOverlay" class="statusOverlay stackItem" hidden="true">
             <div id="statusIcon" class="statusIcon"></div>
-            <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>
+            <bdi class="statusLabel" id="errorAborted">&error.aborted;</bdi>
+            <bdi class="statusLabel" id="errorNetwork">&error.network;</bdi>
+            <bdi class="statusLabel" id="errorDecode">&error.decode;</bdi>
+            <bdi class="statusLabel" id="errorSrcNotSupported">&error.srcNotSupported;</bdi>
+            <bdi class="statusLabel" id="errorNoSource">&error.noSource2;</bdi>
+            <bdi class="statusLabel" id="errorGeneric">&error.generic;</bdi>
           </div>
 
           <div id="pictureInPictureOverlay" class="pictureInPictureOverlay stackItem" status="pictureInPicture" hidden="true">
             <div class="statusIcon" type="pictureInPicture"></div>
-            <span class="statusLabel" id="pictureInPicture">&status.pictureInPicture;</span>
+            <bdi class="statusLabel" id="pictureInPicture">&status.pictureInPicture;</bdi>
           </div>
 
           <div id="controlsOverlay" class="controlsOverlay stackItem" role="none">
             <div class="controlsSpacerStack">
               <div id="controlsSpacer" class="controlsSpacer stackItem" role="none"></div>
               <div id="clickToPlay" class="clickToPlay" hidden="true"></div>
             </div>
 
@@ -2291,21 +2291,21 @@ this.VideoControlsImplWidget = class {
                 <div class="progressBackgroundBar stackItem" role="none">
                   <div class="progressStack" role="none">
                     <progress id="bufferBar" class="bufferBar" value="0" max="100" tabindex="-1"></progress>
                     <progress id="progressBar" class="progressBar" value="0" max="100" tabindex="-1"></progress>
                   </div>
                 </div>
                 <input type="range" id="scrubber" class="scrubber" tabindex="-1"/>
               </div>
-              <span id="positionLabel" class="positionLabel" role="presentation"></span>
-              <span id="durationLabel" class="durationLabel" role="presentation"></span>
-              <span id="positionDurationBox" class="positionDurationBox" aria-hidden="true">
+              <bdi id="positionLabel" class="positionLabel" role="presentation"></bdi>
+              <bdi id="durationLabel" class="durationLabel" role="presentation"></bdi>
+              <bdi id="positionDurationBox" class="positionDurationBox" aria-hidden="true">
                 &positionAndDuration.nameFormat;
-              </span>
+              </bdi>
               <div id="controlBarSpacer" class="controlBarSpacer" hidden="true" role="none"></div>
               <button id="muteButton"
                       class="button muteButton"
                       mutelabel="&muteButton.muteLabel;"
                       unmutelabel="&muteButton.unmuteLabel;"
                       tabindex="-1"/>
               <div id="volumeStack" class="volumeStack progressContainer" role="none">
                 <input type="range" id="volumeControl" class="volumeControl" min="0" max="100" step="1" tabindex="-1"
@@ -2525,17 +2525,17 @@ this.NoControlsPictureInPictureImplWidge
       <!ENTITY % videocontrolsDTD SYSTEM "chrome://global/locale/videocontrols.dtd">
       %videocontrolsDTD;
       ]>
       <div class="videocontrols" xmlns="http://www.w3.org/1999/xhtml" role="none">
         <link rel="stylesheet" type="text/css" href="chrome://global/skin/media/videocontrols.css" />
         <div id="controlsContainer" class="controlsContainer" role="none">
           <div class="pictureInPictureOverlay stackItem" status="pictureInPicture">
             <div id="statusIcon" class="statusIcon" type="pictureInPicture"></div>
-            <span class="statusLabel" id="pictureInPicture">&status.pictureInPicture;</span>
+            <bdi class="statusLabel" id="pictureInPicture">&status.pictureInPicture;</bdi>
           </div>
           <div class="controlsOverlay stackItem"></div>
         </div>
       </div>`, "application/xml");
     this.shadowRoot.importNodeAndAppendChildAt(this.shadowRoot, parserDoc.documentElement, true);
   }
 };