Bug 1332994 - highlight current enabled CC item when video first loaded. r=jaws a=gchang
authorRay Lin <ralin@mozilla.com>
Mon, 23 Jan 2017 15:46:42 +0800
changeset 375926 098f633018d5b6e0843fdecd94cb2042706963fd
parent 375925 657818fb14feb7e59d3d92ec7fa61f835195c912
child 375927 e9ebff9c36960e9ffb4407ba073ef28a8a8f665b
push id6996
push userjlorenzo@mozilla.com
push dateMon, 06 Mar 2017 20:48:21 +0000
treeherdermozilla-beta@d89512dab048 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, gchang
bugs1332994
milestone53.0a2
Bug 1332994 - highlight current enabled CC item when video first loaded. r=jaws a=gchang MozReview-Commit-ID: HEpp5Ztp5cB
toolkit/content/tests/widgets/test_videocontrols_vtt.html
toolkit/content/widgets/videocontrols.xml
--- a/toolkit/content/tests/widgets/test_videocontrols_vtt.html
+++ b/toolkit/content/tests/widgets/test_videocontrols_vtt.html
@@ -15,16 +15,17 @@
 </div>
 
 <pre id="test">
 <script clas="testbody" type="application/javascript">
   SimpleTest.waitForExplicitFinish();
 
   const video = document.getElementById("video");
   const ccBtn = getAnonElementWithinVideoByAttribute(video, "anonid", "closedCaptionButton");
+  const ttList = getAnonElementWithinVideoByAttribute(video, "anonid", "textTrackList");
   const testCases = [];
 
   testCases.push(() => new Promise(resolve => {
     is(ccBtn.getAttribute("hidden"), "true", "CC button should hide");
 
     resolve();
   }));
 
@@ -65,22 +66,45 @@
   }));
 
   testCases.push(() => new Promise(resolve => {
     const caption = video.addTextTrack("captions", "English", "en");
     caption.mode = "showing";
 
     SimpleTest.executeSoon(() => {
       is(ccBtn.getAttribute("enabled"), "true", "CC button should be enabled");
-      caption.mode = "disabled";
 
       resolve();
     });
   }));
 
+  testCases.push(() => new Promise(resolve => {
+    synthesizeMouseAtCenter(ccBtn, {});
+
+    SimpleTest.executeSoon(() => {
+      is(ttList.hasAttribute("hidden"), false, "Texttrack menu should show up");
+      is(ttList.lastChild.getAttribute("on"), "true", "The last added item should be highlighted");
+
+      resolve();
+    });
+  }));
+
+  testCases.push(() => new Promise(resolve => {
+    const tt = ttList.children[1];
+
+    isnot(tt.getAttribute("on"), "true", "Item should be off before click");
+    synthesizeMouseAtCenter(tt, {});
+
+    SimpleTest.executeSoon(() => {
+      is(tt.getAttribute("on"), "true", "Selected item should be enabled");
+      is(ttList.getAttribute("hidden"), "true", "Should hide texttrack menu once clicked on an item");
+
+      resolve();
+    });
+  }));
 
   function executeTestCases(tasks) {
     return tasks.reduce((promise, task) => promise.then(task), Promise.resolve());
   }
 
   function loadedmetadata() {
     executeTestCases(testCases).then(SimpleTest.finish);
   }
--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -1433,16 +1433,22 @@
       },
 
       addNewTextTrack(tt) {
         if (!this.isSupportedTextTrack(tt)) {
           return;
         }
 
         if (tt.index && tt.index < this.textTracksCount) {
+          // Don't create items for initialized tracks. However, we
+          // still need to care about mode since TextTrackManager would
+          // turn on the first available track automatically.
+          if (tt.mode === "showing") {
+            this.changeTextTrack(tt.index);
+          }
           return;
         }
 
         tt.index = this.textTracksCount++;
 
         const label = tt.label || "";
         const ttText = document.createTextNode(label);
         const ttBtn = document.createElement("button");
@@ -1525,23 +1531,19 @@
             this.video.dispatchEvent(new CustomEvent("texttrackchange"));
           }
         }
 
         this.setClosedCaptionButtonState();
       },
 
       initTextTracks() {
-        if (!this.isClosedCaptionAvailable) {
-          this.closedCaptionButton.setAttribute("hidden", "true");
-          return;
-        }
-
+        // add 'off' button anyway as new text track might be
+        // dynamically added after initialization.
         const offLabel = this.textTrackList.getAttribute("offlabel");
-
         this.addNewTextTrack({
           label: offLabel,
           kind: "subtitles"
         });
 
         for (let tt of this.overlayableTextTracks) {
           this.addNewTextTrack(tt);
         }