1 files changed, 358 insertions, 0 deletions
diff --git a/toolkit/components/narrate/NarrateControls.sys.mjs b/toolkit/components/narrate/NarrateControls.sys.mjs
new file mode 100644
index 0000000000..d2e7b13b5d
--- /dev/null
+++ b/toolkit/components/narrate/NarrateControls.sys.mjs
@@ -0,0 +1,358 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { AsyncPrefs } from "resource://gre/modules/AsyncPrefs.sys.mjs";
+import { Narrator } from "resource://gre/modules/narrate/Narrator.sys.mjs";
+import { VoiceSelect } from "resource://gre/modules/narrate/VoiceSelect.sys.mjs";
+
+var gStrings = Services.strings.createBundle(
+  "chrome://global/locale/narrate.properties"
+);
+
+export function NarrateControls(win, languagePromise) {
+  this._winRef = Cu.getWeakReference(win);
+  this._languagePromise = languagePromise;
+
+  win.addEventListener("unload", this);
+
+  // Append content style sheet in document head
+  let style = win.document.createElement("link");
+  style.rel = "stylesheet";
+  style.href = "chrome://global/skin/narrate.css";
+  win.document.head.appendChild(style);
+
+  let elemL10nMap = {
+    ".narrate-skip-previous": "back",
+    ".narrate-start-stop": "start-label",
+    ".narrate-skip-next": "forward",
+    ".narrate-rate-input": "speed",
+  };
+
+  let dropdown = win.document.createElement("ul");
+  dropdown.className = "dropdown narrate-dropdown";
+
+  let toggle = win.document.createElement("li");
+  let toggleButton = win.document.createElement("button");
+  toggleButton.className = "dropdown-toggle toolbar-button narrate-toggle";
+  toggleButton.dataset.telemetryId = "reader-listen";
+  let tip = win.document.createElement("span");
+  let shortcutNarrateKey = gStrings.GetStringFromName("narrate-key-shortcut");
+  let labelText = gStrings.formatStringFromName("listen-label", [
+    shortcutNarrateKey,
+  ]);
+  tip.textContent = labelText;
+  tip.className = "hover-label";
+  toggleButton.append(tip);
+  toggleButton.setAttribute("aria-label", labelText);
+  toggleButton.hidden = true;
+  dropdown.appendChild(toggle);
+  toggle.appendChild(toggleButton);
+
+  let dropdownList = win.document.createElement("li");
+  dropdownList.className = "dropdown-popup";
+  dropdown.appendChild(dropdownList);
+
+  let narrateControl = win.document.createElement("div");
+  narrateControl.className = "narrate-row narrate-control";
+  dropdownList.appendChild(narrateControl);
+
+  let narrateRate = win.document.createElement("div");
+  narrateRate.className = "narrate-row narrate-rate";
+  dropdownList.appendChild(narrateRate);
+
+  let narrateVoices = win.document.createElement("div");
+  narrateVoices.className = "narrate-row narrate-voices";
+  dropdownList.appendChild(narrateVoices);
+
+  let dropdownArrow = win.document.createElement("div");
+  dropdownArrow.className = "dropdown-arrow";
+  dropdownList.appendChild(dropdownArrow);
+
+  let narrateSkipPrevious = win.document.createElement("button");
+  narrateSkipPrevious.className = "narrate-skip-previous";
+  narrateSkipPrevious.disabled = true;
+  narrateControl.appendChild(narrateSkipPrevious);
+
+  let narrateStartStop = win.document.createElement("button");
+  narrateStartStop.className = "narrate-start-stop";
+  narrateControl.appendChild(narrateStartStop);
+
+  win.document.addEventListener("keydown", function (event) {
+    if (win.document.hasFocus() && event.key === "n") {
+      narrateStartStop.click();
+    }
+  });
+
+  let narrateSkipNext = win.document.createElement("button");
+  narrateSkipNext.className = "narrate-skip-next";
+  narrateSkipNext.disabled = true;
+  narrateControl.appendChild(narrateSkipNext);
+
+  let narrateRateInput = win.document.createElement("input");
+  narrateRateInput.className = "narrate-rate-input";
+  narrateRateInput.setAttribute("value", "0");
+  narrateRateInput.setAttribute("step", "5");
+  narrateRateInput.setAttribute("max", "100");
+  narrateRateInput.setAttribute("min", "-100");
+  narrateRateInput.setAttribute("type", "range");
+  narrateRate.appendChild(narrateRateInput);
+
+  for (let [selector, stringID] of Object.entries(elemL10nMap)) {
+    if (selector === ".narrate-start-stop") {
+      let shortcut = gStrings.GetStringFromName("narrate-key-shortcut");
+      let label = gStrings.formatStringFromName(stringID, [shortcut]);
+
+      dropdown.querySelector(selector).setAttribute("title", label);
+    } else {
+      dropdown
+        .querySelector(selector)
+        .setAttribute("title", gStrings.GetStringFromName(stringID));
+    }
+  }
+
+  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.classList.add("voice-select");
+  win.speechSynthesis.addEventListener("voiceschanged", this);
+  dropdown
+    .querySelector(".narrate-voices")
+    .appendChild(this.voiceSelect.element);
+
+  dropdown.addEventListener("click", this, true);
+
+  let rateRange = dropdown.querySelector(".narrate-rate > input");
+  rateRange.addEventListener("change", this);
+
+  // The rate is stored as an integer.
+  rateRange.value = branch.getIntPref("rate");
+
+  this._setupVoices();
+
+  let tb = win.document.querySelector(".reader-controls");
+  tb.appendChild(dropdown);
+}
+
+NarrateControls.prototype = {
+  handleEvent(evt) {
+    switch (evt.type) {
+      case "change":
+        if (evt.target.classList.contains("narrate-rate-input")) {
+          this._onRateInput(evt);
+        } else {
+          this._onVoiceChange();
+        }
+        break;
+      case "click":
+        this._onButtonClick(evt);
+        break;
+      case "voiceschanged":
+        this._setupVoices();
+        break;
+      case "unload":
+        this.narrator.stop();
+        break;
+    }
+  },
+
+  /**
+   * Returns true if synth voices are available.
+   */
+  _setupVoices() {
+    return this._languagePromise.then(language => {
+      this.voiceSelect.clear();
+      let win = this._win;
+      let voicePrefs = this._getVoicePref();
+      let selectedVoice = voicePrefs[language || "default"];
+      let comparer = new Services.intl.Collator().compare;
+      let filter = !Services.prefs.getBoolPref("narrate.filter-voices");
+      let options = win.speechSynthesis
+        .getVoices()
+        .filter(v => {
+          return filter || !language || v.lang.split("-")[0] == language;
+        })
+        .map(v => {
+          return {
+            label: this._createVoiceLabel(v),
+            value: v.voiceURI,
+            selected: selectedVoice == v.voiceURI,
+          };
+        })
+        .sort((a, b) => comparer(a.label, b.label));
+
+      if (options.length) {
+        options.unshift({
+          label: gStrings.GetStringFromName("defaultvoice"),
+          value: "automatic",
+          selected: selectedVoice == "automatic",
+        });
+        this.voiceSelect.addOptions(options);
+      }
+
+      let narrateToggle = win.document.querySelector(".narrate-toggle");
+      let histogram = Services.telemetry.getKeyedHistogramById(
+        "NARRATE_CONTENT_BY_LANGUAGE_2"
+      );
+      let initial = !this._voicesInitialized;
+      this._voicesInitialized = true;
+
+      // if language is null, re-assign it to "unknown-language"
+      if (language == null) {
+        language = "unknown-language";
+      }
+
+      if (initial) {
+        histogram.add(language, 0);
+      }
+
+      if (options.length && narrateToggle.hidden) {
+        // About to show for the first time..
+        histogram.add(language, 1);
+      }
+
+      // We disable this entire feature if there are no available voices.
+      narrateToggle.hidden = !options.length;
+    });
+  },
+
+  _getVoicePref() {
+    let voicePref = Services.prefs.getCharPref("narrate.voice");
+    try {
+      return JSON.parse(voicePref);
+    } catch (e) {
+      return { default: voicePref };
+    }
+  },
+
+  _onRateInput(evt) {
+    AsyncPrefs.set("narrate.rate", parseInt(evt.target.value, 10));
+    this.narrator.setRate(this._convertRate(evt.target.value));
+  },
+
+  _onVoiceChange() {
+    let voice = this.voice;
+    this.narrator.setVoice(voice);
+    this._languagePromise.then(language => {
+      if (language) {
+        let voicePref = this._getVoicePref();
+        voicePref[language || "default"] = voice;
+        AsyncPrefs.set("narrate.voice", JSON.stringify(voicePref));
+      }
+    });
+  },
+
+  _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);
+        TelemetryStopwatch.start("NARRATE_CONTENT_SPEAKTIME_MS", this);
+        let options = { rate: this.rate, voice: this.voice };
+        this.narrator
+          .start(options)
+          .catch(err => {
+            console.error(`Narrate failed: ${err}.`);
+          })
+          .then(() => {
+            this._updateSpeechControls(false);
+            TelemetryStopwatch.finish("NARRATE_CONTENT_SPEAKTIME_MS", this);
+          });
+      }
+    }
+  },
+
+  _updateSpeechControls(speaking) {
+    let dropdown = this._doc.querySelector(".narrate-dropdown");
+    if (!dropdown) {
+      // Elements got destroyed, but window lingers on for a bit.
+      return;
+    }
+
+    dropdown.classList.toggle("keep-open", speaking);
+    dropdown.classList.toggle("speaking", speaking);
+
+    let startStopButton = this._doc.querySelector(".narrate-start-stop");
+    let shortcutId = gStrings.GetStringFromName("narrate-key-shortcut");
+
+    startStopButton.title = gStrings.formatStringFromName(
+      speaking ? "stop-label" : "start-label",
+      [shortcutId]
+    );
+
+    this._doc.querySelector(".narrate-skip-previous").disabled = !speaking;
+    this._doc.querySelector(".narrate-skip-next").disabled = !speaking;
+  },
+
+  _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.
+    switch (Services.appinfo.OS) {
+      case "WINNT":
+        // On windows the language is included in the name, so just use the name
+        return voice.name;
+      case "Linux":
+        // On Linux, the name is usually the unlocalized language name.
+        // Use a localized language name, and have the language tag in
+        // parenthisis. This is to avoid six languages called "English".
+        return gStrings.formatStringFromName("voiceLabel", [
+          this._getLanguageName(voice.lang) || voice.name,
+          voice.lang,
+        ]);
+      default:
+        // On Mac the language is not included in the name, find a localized
+        // language name or show the tag if none exists.
+        // This is the ideal naming scheme so it is also the "default".
+        return gStrings.formatStringFromName("voiceLabel", [
+          voice.name,
+          this._getLanguageName(voice.lang) || voice.lang,
+        ]);
+    }
+  },
+
+  _getLanguageName(lang) {
+    try {
+      // This may throw if the lang can't be parsed.
+      let langCode = new Services.intl.Locale(lang).language;
+
+      return Services.intl.getLanguageDisplayNames(undefined, [langCode]);
+    } catch {
+      return "";
+    }
+  },
+
+  _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.
+    return Math.pow(Math.abs(rate / 100) + 1, rate < 0 ? -1 : 1);
+  },
+
+  get _win() {
+    return this._winRef.get();
+  },
+
+  get _doc() {
+    return this._win.document;
+  },
+
+  get rate() {
+    return this._convertRate(
+      this._doc.querySelector(".narrate-rate-input").value
+    );
+  },
+
+  get voice() {
+    return this.voiceSelect.value;
+  },
+};