Initial updates for Reader View.

1 files changed, 64 insertions, 70 deletions

diff --git a/toolkit/components/narrate/NarrateControls.jsm b/toolkit/components/narrate/NarrateControls.jsm
index 7d8794b18..828292cc2 100644
--- a/toolkit/components/narrate/NarrateControls.jsm
+++ b/toolkit/components/narrate/NarrateControls.jsm
@@ -16,9 +16,10 @@ this.EXPORTED_SYMBOLS = ["NarrateControls"];
 
 var gStrings = Services.strings.createBundle("chrome://global/locale/narrate.properties");
 
-function NarrateControls(mm, win) {
+function NarrateControls(mm, win, languagePromise) {
   this._mm = mm;
   this._winRef = Cu.getWeakReference(win);
+  this._languagePromise = languagePromise;
 
   win.addEventListener("unload", this);
 
@@ -37,16 +38,12 @@ function NarrateControls(mm, win) {
   }
 
   let dropdown = win.document.createElement("ul");
-  dropdown.className = "dropdown";
-  dropdown.id = "narrate-dropdown";
+  dropdown.className = "dropdown narrate-dropdown";
   // We need inline svg here for the animation to work (bug 908634 & 1190881).
-  // The style animation can't be scoped (bug 830056).
+  // eslint-disable-next-line no-unsanitized/property
   dropdown.innerHTML =
-    localize`<style scoped>
-      @import url("chrome://global/skin/narrateControls.css");
-    </style>
-    <li>
-       <button class="dropdown-toggle button" id="narrate-toggle"
+    localize`<li>
+       <button class="dropdown-toggle button narrate-toggle"
                title="${"narrate"}" hidden>
          <svg xmlns="http://www.w3.org/2000/svg"
               xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -60,11 +57,11 @@ function NarrateControls(mm, win) {
               100% { transform: scaleY(1);   }
             }
 
-            #waveform > rect {
+            .waveform > rect {
               fill: #808080;
             }
 
-            .speaking #waveform > rect {
+            .speaking .waveform > rect {
               fill: #58bf43;
               transform-box: fill-box;
               transform-origin: 50% 50%;
@@ -74,15 +71,15 @@ function NarrateControls(mm, win) {
               animation-timing-function: linear;
             }
 
-            #waveform > rect:nth-child(2) { animation-delay: 250ms; }
-            #waveform > rect:nth-child(3) { animation-delay: 500ms; }
-            #waveform > rect:nth-child(4) { animation-delay: 750ms; }
-            #waveform > rect:nth-child(5) { animation-delay: 1000ms; }
-            #waveform > rect:nth-child(6) { animation-delay: 1250ms; }
-            #waveform > rect:nth-child(7) { animation-delay: 1500ms; }
+            .waveform > rect:nth-child(2) { animation-delay: 250ms; }
+            .waveform > rect:nth-child(3) { animation-delay: 500ms; }
+            .waveform > rect:nth-child(4) { animation-delay: 750ms; }
+            .waveform > rect:nth-child(5) { animation-delay: 1000ms; }
+            .waveform > rect:nth-child(6) { animation-delay: 1250ms; }
+            .waveform > rect:nth-child(7) { animation-delay: 1500ms; }
 
           </style>
-          <g id="waveform">
+          <g class="waveform">
             <rect x="1"  y="8" width="2" height="8"  rx=".5" ry=".5" />
             <rect x="4"  y="5" width="2" height="14" rx=".5" ry=".5" />
             <rect x="7"  y="8" width="2" height="8"  rx=".5" ry=".5" />
@@ -95,35 +92,35 @@ function NarrateControls(mm, win) {
         </button>
     </li>
     <li class="dropdown-popup">
-      <div id="narrate-control" class="narrate-row">
-        <button disabled id="narrate-skip-previous"
+      <div class="narrate-row narrate-control">
+        <button disabled class="narrate-skip-previous"
                 title="${"back"}"></button>
-        <button id="narrate-start-stop" title="${"start"}"></button>
-        <button disabled id="narrate-skip-next"
+        <button class="narrate-start-stop" title="${"start"}"></button>
+        <button disabled class="narrate-skip-next"
                 title="${"forward"}"></button>
       </div>
-      <div id="narrate-rate" class="narrate-row">
-        <input id="narrate-rate-input" value="0" title="${"speed"}"
+      <div class="narrate-row narrate-rate">
+        <input class="narrate-rate-input" value="0" title="${"speed"}"
                step="5" max="100" min="-100" type="range">
       </div>
-      <div id="narrate-voices" class="narrate-row"></div>
+      <div class="narrate-row narrate-voices"></div>
       <div class="dropdown-arrow"></div>
     </li>`;
 
-  this.narrator = new Narrator(win);
+  this.narrator = new Narrator(win, languagePromise);
 
   let branch = Services.prefs.getBranch("narrate.");
   let selectLabel = gStrings.GetStringFromName("selectvoicelabel");
   this.voiceSelect = new VoiceSelect(win, selectLabel);
   this.voiceSelect.element.addEventListener("change", this);
-  this.voiceSelect.element.id = "voice-select";
+  this.voiceSelect.element.classList.add("voice-select");
   win.speechSynthesis.addEventListener("voiceschanged", this);
-  dropdown.querySelector("#narrate-voices").appendChild(
+  dropdown.querySelector(".narrate-voices").appendChild(
     this.voiceSelect.element);
 
   dropdown.addEventListener("click", this, true);
 
-  let rateRange = dropdown.querySelector("#narrate-rate > input");
+  let rateRange = dropdown.querySelector(".narrate-rate > input");
   rateRange.addEventListener("change", this);
 
   // The rate is stored as an integer.
@@ -131,15 +128,15 @@ function NarrateControls(mm, win) {
 
   this._setupVoices();
 
-  let tb = win.document.getElementById("reader-toolbar");
+  let tb = win.document.querySelector(".reader-toolbar");
   tb.appendChild(dropdown);
 }
 
 NarrateControls.prototype = {
-  handleEvent: function(evt) {
+  handleEvent(evt) {
     switch (evt.type) {
       case "change":
-        if (evt.target.id == "narrate-rate-input") {
+        if (evt.target.classList.contains("narrate-rate-input")) {
           this._onRateInput(evt);
         } else {
           this._onVoiceChange();
@@ -162,8 +159,8 @@ NarrateControls.prototype = {
   /**
    * Returns true if synth voices are available.
    */
-  _setupVoices: function() {
-    return this.narrator.languagePromise.then(language => {
+  _setupVoices() {
+    return this._languagePromise.then(language => {
       this.voiceSelect.clear();
       let win = this._win;
       let voicePrefs = this._getVoicePref();
@@ -190,7 +187,7 @@ NarrateControls.prototype = {
         this.voiceSelect.addOptions(options);
       }
 
-      let narrateToggle = win.document.getElementById("narrate-toggle");
+      let narrateToggle = win.document.querySelector(".narrate-toggle");
       let histogram = Services.telemetry.getKeyedHistogramById(
         "NARRATE_CONTENT_BY_LANGUAGE_2");
       let initial = !this._voicesInitialized;
@@ -210,7 +207,7 @@ NarrateControls.prototype = {
     });
   },
 
-  _getVoicePref: function() {
+  _getVoicePref() {
     let voicePref = Services.prefs.getCharPref("narrate.voice");
     try {
       return JSON.parse(voicePref);
@@ -219,15 +216,15 @@ NarrateControls.prototype = {
     }
   },
 
-  _onRateInput: function(evt) {
+  _onRateInput(evt) {
     AsyncPrefs.set("narrate.rate", parseInt(evt.target.value, 10));
     this.narrator.setRate(this._convertRate(evt.target.value));
   },
 
-  _onVoiceChange: function() {
+  _onVoiceChange() {
     let voice = this.voice;
     this.narrator.setVoice(voice);
-    this.narrator.languagePromise.then(language => {
+    this._languagePromise.then(language => {
       if (language) {
         let voicePref = this._getVoicePref();
         voicePref[language || "default"] = voice;
@@ -236,42 +233,39 @@ NarrateControls.prototype = {
     });
   },
 
-  _onButtonClick: function(evt) {
-    switch (evt.target.id) {
-      case "narrate-skip-previous":
-        this.narrator.skipPrevious();
-        break;
-      case "narrate-skip-next":
-        this.narrator.skipNext();
-        break;
-      case "narrate-start-stop":
-        if (this.narrator.speaking) {
-          this.narrator.stop();
-        } else {
-          this._updateSpeechControls(true);
-          let options = { rate: this.rate, voice: this.voice };
-          this.narrator.start(options).then(() => {
-            this._updateSpeechControls(false);
-          }, err => {
-            Cu.reportError(`Narrate failed: ${err}.`);
-            this._updateSpeechControls(false);
-          });
-        }
-        break;
+  _onButtonClick(evt) {
+    let classList = evt.target.classList;
+    if (classList.contains("narrate-skip-previous")) {
+      this.narrator.skipPrevious();
+    } else if (classList.contains("narrate-skip-next")) {
+      this.narrator.skipNext();
+    } else if (classList.contains("narrate-start-stop")) {
+      if (this.narrator.speaking) {
+        this.narrator.stop();
+      } else {
+        this._updateSpeechControls(true);
+        let options = { rate: this.rate, voice: this.voice };
+        this.narrator.start(options).then(() => {
+          this._updateSpeechControls(false);
+        }, err => {
+          Cu.reportError(`Narrate failed: ${err}.`);
+          this._updateSpeechControls(false);
+        });
+      }
     }
   },
 
-  _updateSpeechControls: function(speaking) {
-    let dropdown = this._doc.getElementById("narrate-dropdown");
+  _updateSpeechControls(speaking) {
+    let dropdown = this._doc.querySelector(".narrate-dropdown");
     dropdown.classList.toggle("keep-open", speaking);
     dropdown.classList.toggle("speaking", speaking);
 
-    let startStopButton = this._doc.getElementById("narrate-start-stop");
+    let startStopButton = this._doc.querySelector(".narrate-start-stop");
     startStopButton.title =
       gStrings.GetStringFromName(speaking ? "stop" : "start");
 
-    this._doc.getElementById("narrate-skip-previous").disabled = !speaking;
-    this._doc.getElementById("narrate-skip-next").disabled = !speaking;
+    this._doc.querySelector(".narrate-skip-previous").disabled = !speaking;
+    this._doc.querySelector(".narrate-skip-next").disabled = !speaking;
 
     if (speaking) {
       TelemetryStopwatch.start("NARRATE_CONTENT_SPEAKTIME_MS", this);
@@ -280,7 +274,7 @@ NarrateControls.prototype = {
     }
   },
 
-  _createVoiceLabel: function(voice) {
+  _createVoiceLabel(voice) {
     // This is a highly imperfect method of making human-readable labels
     // for system voices. Because each platform has a different naming scheme
     // for voices, we use a different method for each platform.
@@ -303,7 +297,7 @@ NarrateControls.prototype = {
     }
   },
 
-  _getLanguageName: function(lang) {
+  _getLanguageName(lang) {
     if (!this._langStrings) {
       this._langStrings = Services.strings.createBundle(
         "chrome://global/locale/languageNames.properties ");
@@ -317,7 +311,7 @@ NarrateControls.prototype = {
     }
   },
 
-  _convertRate: function(rate) {
+  _convertRate(rate) {
     // We need to convert a relative percentage value to a fraction rate value.
     // eg. -100 is half the speed, 100 is twice the speed in percentage,
     // 0.5 is half the speed and 2 is twice the speed in fractions.
@@ -334,7 +328,7 @@ NarrateControls.prototype = {
 
   get rate() {
     return this._convertRate(
-      this._doc.getElementById("narrate-rate-input").value);
+      this._doc.querySelector(".narrate-rate-input").value);
   },
 
   get voice() {