summaryrefslogtreecommitdiffstats
path: root/toolkit/components/narrate
diff options
context:
space:
mode:
Diffstat (limited to 'toolkit/components/narrate')
-rw-r--r--toolkit/components/narrate/.eslintrc.js25
-rw-r--r--toolkit/components/narrate/NarrateControls.sys.mjs358
-rw-r--r--toolkit/components/narrate/Narrator.sys.mjs456
-rw-r--r--toolkit/components/narrate/VoiceSelect.sys.mjs294
-rw-r--r--toolkit/components/narrate/moz.build16
-rw-r--r--toolkit/components/narrate/test/NarrateTestUtils.sys.mjs150
-rw-r--r--toolkit/components/narrate/test/browser.toml20
-rw-r--r--toolkit/components/narrate/test/browser_narrate.js146
-rw-r--r--toolkit/components/narrate/test/browser_narrate_disable.js43
-rw-r--r--toolkit/components/narrate/test/browser_narrate_language.js99
-rw-r--r--toolkit/components/narrate/test/browser_narrate_toggle.js37
-rw-r--r--toolkit/components/narrate/test/browser_voiceselect.js139
-rw-r--r--toolkit/components/narrate/test/browser_word_highlight.js76
-rw-r--r--toolkit/components/narrate/test/head.js86
-rw-r--r--toolkit/components/narrate/test/inferno.html238
-rw-r--r--toolkit/components/narrate/test/moby_dick.html218
16 files changed, 2401 insertions, 0 deletions
diff --git a/toolkit/components/narrate/.eslintrc.js b/toolkit/components/narrate/.eslintrc.js
new file mode 100644
index 0000000000..bbd5aa34dc
--- /dev/null
+++ b/toolkit/components/narrate/.eslintrc.js
@@ -0,0 +1,25 @@
+/* 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/. */
+
+"use strict";
+
+module.exports = {
+ rules: {
+ "mozilla/no-aArgs": "error",
+ "mozilla/reject-importGlobalProperties": ["error", "everything"],
+ "mozilla/var-only-at-top-level": "error",
+ "block-scoped-var": "error",
+ camelcase: ["error", { properties: "never" }],
+ complexity: ["error", { max: 20 }],
+ "max-nested-callbacks": ["error", 3],
+ "new-cap": ["error", { capIsNew: false }],
+ "no-extend-native": "error",
+ "no-inline-comments": "error",
+ "no-multi-str": "error",
+ "no-return-assign": "error",
+ "no-shadow": "error",
+ strict: ["error", "global"],
+ yoda: "error",
+ },
+};
diff --git a/toolkit/components/narrate/NarrateControls.sys.mjs b/toolkit/components/narrate/NarrateControls.sys.mjs
new file mode 100644
index 0000000000..316d2a0e34
--- /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;
+ },
+};
diff --git a/toolkit/components/narrate/Narrator.sys.mjs b/toolkit/components/narrate/Narrator.sys.mjs
new file mode 100644
index 0000000000..15b3e841bc
--- /dev/null
+++ b/toolkit/components/narrate/Narrator.sys.mjs
@@ -0,0 +1,456 @@
+/* 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/. */
+
+// Maximum time into paragraph when pressing "skip previous" will go
+// to previous paragraph and not the start of current one.
+const PREV_THRESHOLD = 2000;
+// All text-related style rules that we should copy over to the highlight node.
+const kTextStylesRules = [
+ "font-family",
+ "font-kerning",
+ "font-size",
+ "font-size-adjust",
+ "font-stretch",
+ "font-variant",
+ "font-weight",
+ "line-height",
+ "letter-spacing",
+ "text-orientation",
+ "text-transform",
+ "word-spacing",
+];
+
+export function Narrator(win, languagePromise) {
+ this._winRef = Cu.getWeakReference(win);
+ this._languagePromise = languagePromise;
+ this._inTest = Services.prefs.getBoolPref("narrate.test");
+ this._speechOptions = {};
+ this._startTime = 0;
+ this._stopped = false;
+}
+
+Narrator.prototype = {
+ get _doc() {
+ return this._winRef.get().document;
+ },
+
+ get _win() {
+ return this._winRef.get();
+ },
+
+ get _treeWalker() {
+ if (!this._treeWalkerRef) {
+ let wu = this._win.windowUtils;
+ let nf = this._win.NodeFilter;
+
+ let filter = {
+ _matches: new Set(),
+
+ // We want high-level elements that have non-empty text nodes.
+ // For example, paragraphs. But nested anchors and other elements
+ // are not interesting since their text already appears in their
+ // parent's textContent.
+ acceptNode(node) {
+ if (this._matches.has(node.parentNode)) {
+ // Reject sub-trees of accepted nodes.
+ return nf.FILTER_REJECT;
+ }
+
+ if (!/\S/.test(node.textContent)) {
+ // Reject nodes with no text.
+ return nf.FILTER_REJECT;
+ }
+
+ let bb = wu.getBoundsWithoutFlushing(node);
+ if (!bb.width || !bb.height) {
+ // Skip non-rendered nodes. We don't reject because a zero-sized
+ // container can still have visible, "overflowed", content.
+ return nf.FILTER_SKIP;
+ }
+
+ for (let c = node.firstChild; c; c = c.nextSibling) {
+ if (c.nodeType == c.TEXT_NODE && /\S/.test(c.textContent)) {
+ // If node has a non-empty text child accept it.
+ this._matches.add(node);
+ return nf.FILTER_ACCEPT;
+ }
+ }
+
+ return nf.FILTER_SKIP;
+ },
+ };
+
+ this._treeWalkerRef = new WeakMap();
+
+ // We can't hold a weak reference on the treewalker, because there
+ // are no other strong references, and it will be GC'ed. Instead,
+ // we rely on the window's lifetime and use it as a weak reference.
+ this._treeWalkerRef.set(
+ this._win,
+ this._doc.createTreeWalker(
+ this._doc.querySelector(".container"),
+ nf.SHOW_ELEMENT,
+ filter,
+ false
+ )
+ );
+ }
+
+ return this._treeWalkerRef.get(this._win);
+ },
+
+ get _timeIntoParagraph() {
+ let rv = Date.now() - this._startTime;
+ return rv;
+ },
+
+ get speaking() {
+ return (
+ this._win.speechSynthesis.speaking || this._win.speechSynthesis.pending
+ );
+ },
+
+ _getVoice(voiceURI) {
+ if (!this._voiceMap || !this._voiceMap.has(voiceURI)) {
+ this._voiceMap = new Map(
+ this._win.speechSynthesis.getVoices().map(v => [v.voiceURI, v])
+ );
+ }
+
+ return this._voiceMap.get(voiceURI);
+ },
+
+ _isParagraphInView(paragraph) {
+ if (!paragraph) {
+ return false;
+ }
+
+ let bb = paragraph.getBoundingClientRect();
+ return bb.top >= 0 && bb.top < this._win.innerHeight;
+ },
+
+ _sendTestEvent(eventType, detail) {
+ let win = this._win;
+ win.dispatchEvent(
+ new win.CustomEvent(eventType, {
+ detail: Cu.cloneInto(detail, win.document),
+ })
+ );
+ },
+
+ _speakInner() {
+ this._win.speechSynthesis.cancel();
+ let tw = this._treeWalker;
+ let paragraph = tw.currentNode;
+ if (paragraph == tw.root) {
+ this._sendTestEvent("paragraphsdone", {});
+ return Promise.resolve();
+ }
+
+ let utterance = new this._win.SpeechSynthesisUtterance(
+ paragraph.textContent.replace(/\r?\n/g, " ")
+ );
+ utterance.rate = this._speechOptions.rate;
+ if (this._speechOptions.voice) {
+ utterance.voice = this._speechOptions.voice;
+ } else {
+ utterance.lang = this._speechOptions.lang;
+ }
+
+ this._startTime = Date.now();
+
+ let highlighter = new Highlighter(paragraph);
+
+ if (this._inTest) {
+ let onTestSynthEvent = e => {
+ if (e.detail.type == "boundary") {
+ let args = Object.assign({ utterance }, e.detail.args);
+ let evt = new this._win.SpeechSynthesisEvent(e.detail.type, args);
+ utterance.dispatchEvent(evt);
+ }
+ };
+
+ let removeListeners = () => {
+ this._win.removeEventListener("testsynthevent", onTestSynthEvent);
+ };
+
+ this._win.addEventListener("testsynthevent", onTestSynthEvent);
+ utterance.addEventListener("end", removeListeners);
+ utterance.addEventListener("error", removeListeners);
+ }
+
+ return new Promise((resolve, reject) => {
+ utterance.addEventListener("start", () => {
+ paragraph.classList.add("narrating");
+ let bb = paragraph.getBoundingClientRect();
+ if (bb.top < 0 || bb.bottom > this._win.innerHeight) {
+ paragraph.scrollIntoView({ behavior: "smooth", block: "start" });
+ }
+
+ if (this._inTest) {
+ this._sendTestEvent("paragraphstart", {
+ voice: utterance.chosenVoiceURI,
+ rate: utterance.rate,
+ paragraph: paragraph.textContent,
+ tag: paragraph.localName,
+ });
+ }
+ });
+
+ utterance.addEventListener("end", () => {
+ if (!this._win) {
+ // page got unloaded, don't do anything.
+ return;
+ }
+
+ highlighter.remove();
+ paragraph.classList.remove("narrating");
+ this._startTime = 0;
+ if (this._inTest) {
+ this._sendTestEvent("paragraphend", {});
+ }
+
+ if (this._stopped) {
+ // User pressed stopped.
+ resolve();
+ } else {
+ tw.currentNode = tw.nextNode() || tw.root;
+ this._speakInner().then(resolve, reject);
+ }
+ });
+
+ utterance.addEventListener("error", () => {
+ reject("speech synthesis failed");
+ });
+
+ utterance.addEventListener("boundary", e => {
+ if (e.name != "word") {
+ // We are only interested in word boundaries for now.
+ return;
+ }
+
+ if (e.charLength) {
+ highlighter.highlight(e.charIndex, e.charLength);
+ if (this._inTest) {
+ this._sendTestEvent("wordhighlight", {
+ start: e.charIndex,
+ end: e.charIndex + e.charLength,
+ });
+ }
+ }
+ });
+
+ this._win.speechSynthesis.speak(utterance);
+ });
+ },
+
+ start(speechOptions) {
+ this._speechOptions = {
+ rate: speechOptions.rate,
+ voice: this._getVoice(speechOptions.voice),
+ };
+
+ this._stopped = false;
+ return this._languagePromise.then(language => {
+ if (!this._speechOptions.voice) {
+ this._speechOptions.lang = language;
+ }
+
+ let tw = this._treeWalker;
+ if (!this._isParagraphInView(tw.currentNode)) {
+ tw.currentNode = tw.root;
+ while (tw.nextNode()) {
+ if (this._isParagraphInView(tw.currentNode)) {
+ break;
+ }
+ }
+ }
+ if (tw.currentNode == tw.root) {
+ tw.nextNode();
+ }
+
+ return this._speakInner();
+ });
+ },
+
+ stop() {
+ this._stopped = true;
+ this._win.speechSynthesis.cancel();
+ },
+
+ skipNext() {
+ this._win.speechSynthesis.cancel();
+ },
+
+ skipPrevious() {
+ this._goBackParagraphs(this._timeIntoParagraph < PREV_THRESHOLD ? 2 : 1);
+ },
+
+ setRate(rate) {
+ this._speechOptions.rate = rate;
+ /* repeat current paragraph */
+ this._goBackParagraphs(1);
+ },
+
+ setVoice(voice) {
+ this._speechOptions.voice = this._getVoice(voice);
+ /* repeat current paragraph */
+ this._goBackParagraphs(1);
+ },
+
+ _goBackParagraphs(count) {
+ let tw = this._treeWalker;
+ for (let i = 0; i < count; i++) {
+ if (!tw.previousNode()) {
+ tw.currentNode = tw.root;
+ }
+ }
+ this._win.speechSynthesis.cancel();
+ },
+};
+
+/**
+ * The Highlighter class is used to highlight a range of text in a container.
+ *
+ * @param {Element} container a text container
+ */
+function Highlighter(container) {
+ this.container = container;
+}
+
+Highlighter.prototype = {
+ /**
+ * Highlight the range within offsets relative to the container.
+ *
+ * @param {number} startOffset the start offset
+ * @param {number} length the length in characters of the range
+ */
+ highlight(startOffset, length) {
+ let containerRect = this.container.getBoundingClientRect();
+ let range = this._getRange(startOffset, startOffset + length);
+ let rangeRects = range.getClientRects();
+ let win = this.container.ownerGlobal;
+ let computedStyle = win.getComputedStyle(range.endContainer.parentNode);
+ let nodes = this._getFreshHighlightNodes(rangeRects.length);
+
+ let textStyle = {};
+ for (let textStyleRule of kTextStylesRules) {
+ textStyle[textStyleRule] = computedStyle[textStyleRule];
+ }
+
+ for (let i = 0; i < rangeRects.length; i++) {
+ let r = rangeRects[i];
+ let node = nodes[i];
+
+ let style = Object.assign(
+ {
+ top: `${r.top - containerRect.top + r.height / 2}px`,
+ left: `${r.left - containerRect.left + r.width / 2}px`,
+ width: `${r.width}px`,
+ height: `${r.height}px`,
+ },
+ textStyle
+ );
+
+ // Enables us to vary the CSS transition on a line change.
+ node.classList.toggle("newline", style.top != node.dataset.top);
+ node.dataset.top = style.top;
+
+ // Enables CSS animations.
+ node.classList.remove("animate");
+ win.requestAnimationFrame(() => {
+ node.classList.add("animate");
+ });
+
+ // Enables alternative word display with a CSS pseudo-element.
+ node.dataset.word = range.toString();
+
+ // Apply style
+ node.style = Object.entries(style)
+ .map(s => `${s[0]}: ${s[1]};`)
+ .join(" ");
+ }
+ },
+
+ /**
+ * Releases reference to container and removes all highlight nodes.
+ */
+ remove() {
+ for (let node of this._nodes) {
+ node.remove();
+ }
+
+ this.container = null;
+ },
+
+ /**
+ * Returns specified amount of highlight nodes. Creates new ones if necessary
+ * and purges any additional nodes that are not needed.
+ *
+ * @param {number} count number of nodes needed
+ */
+ _getFreshHighlightNodes(count) {
+ let doc = this.container.ownerDocument;
+ let nodes = Array.from(this._nodes);
+
+ // Remove nodes we don't need anymore (nodes.length - count > 0).
+ for (let toRemove = 0; toRemove < nodes.length - count; toRemove++) {
+ nodes.shift().remove();
+ }
+
+ // Add additional nodes if we need them (count - nodes.length > 0).
+ for (let toAdd = 0; toAdd < count - nodes.length; toAdd++) {
+ let node = doc.createElement("div");
+ node.className = "narrate-word-highlight";
+ this.container.appendChild(node);
+ nodes.push(node);
+ }
+
+ return nodes;
+ },
+
+ /**
+ * Create and return a range object with the start and end offsets relative
+ * to the container node.
+ *
+ * @param {number} startOffset the start offset
+ * @param {number} endOffset the end offset
+ */
+ _getRange(startOffset, endOffset) {
+ let doc = this.container.ownerDocument;
+ let i = 0;
+ let treeWalker = doc.createTreeWalker(
+ this.container,
+ doc.defaultView.NodeFilter.SHOW_TEXT
+ );
+ let node = treeWalker.nextNode();
+
+ function _findNodeAndOffset(offset) {
+ do {
+ let length = node.data.length;
+ if (offset >= i && offset <= i + length) {
+ return [node, offset - i];
+ }
+ i += length;
+ } while ((node = treeWalker.nextNode()));
+
+ // Offset is out of bounds, return last offset of last node.
+ node = treeWalker.lastChild();
+ return [node, node.data.length];
+ }
+
+ let range = doc.createRange();
+ range.setStart(..._findNodeAndOffset(startOffset));
+ range.setEnd(..._findNodeAndOffset(endOffset));
+
+ return range;
+ },
+
+ /*
+ * Get all existing highlight nodes for container.
+ */
+ get _nodes() {
+ return this.container.querySelectorAll(".narrate-word-highlight");
+ },
+};
diff --git a/toolkit/components/narrate/VoiceSelect.sys.mjs b/toolkit/components/narrate/VoiceSelect.sys.mjs
new file mode 100644
index 0000000000..06def29ef0
--- /dev/null
+++ b/toolkit/components/narrate/VoiceSelect.sys.mjs
@@ -0,0 +1,294 @@
+/* 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/. */
+
+export function VoiceSelect(win, label) {
+ this._winRef = Cu.getWeakReference(win);
+
+ let element = win.document.createElement("div");
+ element.classList.add("voiceselect");
+ // eslint-disable-next-line no-unsanitized/property
+ element.innerHTML = `<button class="select-toggle" aria-controls="voice-options">
+ <span class="label">${label}</span> <span class="current-voice"></span>
+ </button>
+ <div class="options" id="voice-options" role="listbox"></div>`;
+
+ this._elementRef = Cu.getWeakReference(element);
+
+ let button = this.selectToggle;
+ button.addEventListener("click", this);
+ button.addEventListener("keydown", this);
+
+ let listbox = this.listbox;
+ listbox.addEventListener("click", this);
+ listbox.addEventListener("mousemove", this);
+ listbox.addEventListener("keydown", this);
+ listbox.addEventListener("wheel", this, true);
+
+ win.addEventListener("resize", () => {
+ this._updateDropdownHeight();
+ });
+}
+
+VoiceSelect.prototype = {
+ add(label, value) {
+ let option = this._doc.createElement("button");
+ option.dataset.value = value;
+ option.classList.add("option");
+ option.tabIndex = "-1";
+ option.setAttribute("role", "option");
+ option.textContent = label;
+ this.listbox.appendChild(option);
+ return option;
+ },
+
+ addOptions(options) {
+ let selected = null;
+ for (let option of options) {
+ if (option.selected) {
+ selected = this.add(option.label, option.value);
+ } else {
+ this.add(option.label, option.value);
+ }
+ }
+
+ this._select(selected || this.options[0], true);
+ },
+
+ clear() {
+ this.listbox.innerHTML = "";
+ },
+
+ toggleList(force, focus = true) {
+ if (this.element.classList.toggle("open", force)) {
+ if (focus) {
+ (this.selected || this.options[0]).focus();
+ }
+
+ this._updateDropdownHeight(true);
+ this.listbox.setAttribute("aria-expanded", true);
+ this._win.addEventListener("focus", this, true);
+ } else {
+ if (focus) {
+ this.element.querySelector(".select-toggle").focus();
+ }
+
+ this.listbox.setAttribute("aria-expanded", false);
+ this._win.removeEventListener("focus", this, true);
+ }
+ },
+
+ handleEvent(evt) {
+ let target = evt.target;
+
+ switch (evt.type) {
+ case "click":
+ target = target.closest(".option, .select-toggle") || target;
+ if (target.classList.contains("option")) {
+ if (!target.classList.contains("selected")) {
+ this.selected = target;
+ }
+
+ this.toggleList(false);
+ } else if (target.classList.contains("select-toggle")) {
+ this.toggleList();
+ }
+ break;
+
+ case "mousemove":
+ this.listbox.classList.add("hovering");
+ break;
+
+ case "keydown":
+ if (target.classList.contains("select-toggle")) {
+ if (evt.altKey) {
+ this.toggleList(true);
+ } else {
+ this._keyDownedButton(evt);
+ }
+ } else {
+ this.listbox.classList.remove("hovering");
+ this._keyDownedInBox(evt);
+ }
+ break;
+
+ case "wheel":
+ // Don't let wheel events bubble to document. It will scroll the page
+ // and close the entire narrate dialog.
+ evt.stopPropagation();
+ break;
+
+ case "focus":
+ if (!target.closest(".voiceselect")) {
+ this.toggleList(false, false);
+ }
+ break;
+ }
+ },
+
+ _getPagedOption(option, up) {
+ let height = elem => elem.getBoundingClientRect().height;
+ let listboxHeight = height(this.listbox);
+
+ let next = option;
+ for (let delta = 0; delta < listboxHeight; delta += height(next)) {
+ let sibling = up ? next.previousElementSibling : next.nextElementSibling;
+ if (!sibling) {
+ break;
+ }
+
+ next = sibling;
+ }
+
+ return next;
+ },
+
+ _keyDownedButton(evt) {
+ if (evt.altKey && (evt.key === "ArrowUp" || evt.key === "ArrowUp")) {
+ this.toggleList(true);
+ return;
+ }
+
+ let toSelect;
+ switch (evt.key) {
+ case "PageUp":
+ case "ArrowUp":
+ toSelect = this.selected.previousElementSibling;
+ break;
+ case "PageDown":
+ case "ArrowDown":
+ toSelect = this.selected.nextElementSibling;
+ break;
+ case "Home":
+ toSelect = this.selected.parentNode.firstElementChild;
+ break;
+ case "End":
+ toSelect = this.selected.parentNode.lastElementChild;
+ break;
+ }
+
+ if (toSelect && toSelect.classList.contains("option")) {
+ evt.preventDefault();
+ this.selected = toSelect;
+ }
+ },
+
+ _keyDownedInBox(evt) {
+ let toFocus;
+ let cur = this._doc.activeElement;
+
+ switch (evt.key) {
+ case "ArrowUp":
+ toFocus = cur.previousElementSibling || this.listbox.lastElementChild;
+ break;
+ case "ArrowDown":
+ toFocus = cur.nextElementSibling || this.listbox.firstElementChild;
+ break;
+ case "PageUp":
+ toFocus = this._getPagedOption(cur, true);
+ break;
+ case "PageDown":
+ toFocus = this._getPagedOption(cur, false);
+ break;
+ case "Home":
+ toFocus = cur.parentNode.firstElementChild;
+ break;
+ case "End":
+ toFocus = cur.parentNode.lastElementChild;
+ break;
+ case "Escape":
+ this.toggleList(false);
+ break;
+ }
+
+ if (toFocus && toFocus.classList.contains("option")) {
+ evt.preventDefault();
+ toFocus.focus();
+ }
+ },
+
+ _select(option, suppressEvent = false) {
+ let oldSelected = this.selected;
+ if (oldSelected) {
+ oldSelected.removeAttribute("aria-selected");
+ oldSelected.classList.remove("selected");
+ }
+
+ if (option) {
+ option.setAttribute("aria-selected", true);
+ option.classList.add("selected");
+ this.element.querySelector(".current-voice").textContent =
+ option.textContent;
+ }
+
+ if (!suppressEvent) {
+ let evt = this.element.ownerDocument.createEvent("Event");
+ evt.initEvent("change", true, true);
+ this.element.dispatchEvent(evt);
+ }
+ },
+
+ _updateDropdownHeight(now) {
+ let updateInner = () => {
+ let winHeight = this._win.innerHeight;
+ let listbox = this.listbox;
+ let listboxTop = listbox.getBoundingClientRect().top;
+ listbox.style.maxHeight = winHeight - listboxTop - 10 + "px";
+ };
+
+ if (now) {
+ updateInner();
+ } else if (!this._pendingDropdownUpdate) {
+ this._pendingDropdownUpdate = true;
+ this._win.requestAnimationFrame(() => {
+ updateInner();
+ delete this._pendingDropdownUpdate;
+ });
+ }
+ },
+
+ _getOptionFromValue(value) {
+ return Array.from(this.options).find(o => o.dataset.value === value);
+ },
+
+ get element() {
+ return this._elementRef.get();
+ },
+
+ get listbox() {
+ return this._elementRef.get().querySelector(".options");
+ },
+
+ get selectToggle() {
+ return this._elementRef.get().querySelector(".select-toggle");
+ },
+
+ get _win() {
+ return this._winRef.get();
+ },
+
+ get _doc() {
+ return this._win.document;
+ },
+
+ set selected(option) {
+ this._select(option);
+ },
+
+ get selected() {
+ return this.element.querySelector(".options > .option.selected");
+ },
+
+ get options() {
+ return this.element.querySelectorAll(".options > .option");
+ },
+
+ set value(value) {
+ this._select(this._getOptionFromValue(value));
+ },
+
+ get value() {
+ let selected = this.selected;
+ return selected ? selected.dataset.value : "";
+ },
+};
diff --git a/toolkit/components/narrate/moz.build b/toolkit/components/narrate/moz.build
new file mode 100644
index 0000000000..18b4c2bda6
--- /dev/null
+++ b/toolkit/components/narrate/moz.build
@@ -0,0 +1,16 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+with Files("**"):
+ BUG_COMPONENT = ("Toolkit", "Reader Mode")
+
+EXTRA_JS_MODULES.narrate = [
+ "NarrateControls.sys.mjs",
+ "Narrator.sys.mjs",
+ "VoiceSelect.sys.mjs",
+]
+
+BROWSER_CHROME_MANIFESTS += ["test/browser.toml"]
diff --git a/toolkit/components/narrate/test/NarrateTestUtils.sys.mjs b/toolkit/components/narrate/test/NarrateTestUtils.sys.mjs
new file mode 100644
index 0000000000..92d88e8e3b
--- /dev/null
+++ b/toolkit/components/narrate/test/NarrateTestUtils.sys.mjs
@@ -0,0 +1,150 @@
+/* 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 { ContentTaskUtils } from "resource://testing-common/ContentTaskUtils.sys.mjs";
+import { Preferences } from "resource://gre/modules/Preferences.sys.mjs";
+import { setTimeout } from "resource://gre/modules/Timer.sys.mjs";
+
+export var NarrateTestUtils = {
+ TOGGLE: ".narrate-toggle",
+ POPUP: ".narrate-dropdown .dropdown-popup",
+ VOICE_SELECT: ".narrate-voices .select-toggle",
+ VOICE_OPTIONS: ".narrate-voices .options",
+ VOICE_SELECTED: ".narrate-voices .options .option.selected",
+ VOICE_SELECT_LABEL: ".narrate-voices .select-toggle .current-voice",
+ RATE: ".narrate-rate-input",
+ START: ".narrate-dropdown:not(.speaking) .narrate-start-stop",
+ STOP: ".narrate-dropdown.speaking .narrate-start-stop",
+ BACK: ".narrate-skip-previous",
+ FORWARD: ".narrate-skip-next",
+
+ isVisible(element) {
+ let win = element.ownerGlobal;
+ let style = win.getComputedStyle(element);
+ if (style.display == "none") {
+ return false;
+ }
+ if (style.visibility != "visible") {
+ return false;
+ }
+ if (win.XULPopupElement.isInstance(element) && element.state != "open") {
+ return false;
+ }
+
+ // Hiding a parent element will hide all its children
+ if (element.parentNode != element.ownerDocument) {
+ return this.isVisible(element.parentNode);
+ }
+
+ return true;
+ },
+
+ isStoppedState(window, ok) {
+ let $ = window.document.querySelector.bind(window.document);
+ ok($(this.BACK).disabled, "back button is disabled");
+ ok($(this.FORWARD).disabled, "forward button is disabled");
+ ok(!!$(this.START), "start button is showing");
+ ok(!$(this.STOP), "stop button is hidden");
+ // This checks for a localized label. Not the best...
+ ok($(this.START).title == "Start (N)", "Button tooltip is correct");
+ },
+
+ isStartedState(window, ok) {
+ let $ = window.document.querySelector.bind(window.document);
+ ok(!$(this.BACK).disabled, "back button is enabled");
+ ok(!$(this.FORWARD).disabled, "forward button is enabled");
+ ok(!$(this.START), "start button is hidden");
+ ok(!!$(this.STOP), "stop button is showing");
+ // This checks for a localized label. Not the best...
+ ok($(this.STOP).title == "Stop (N)", "Button tooltip is correct");
+ },
+
+ selectVoice(window, voiceUri) {
+ if (!this.isVisible(window.document.querySelector(this.VOICE_OPTIONS))) {
+ window.document.querySelector(this.VOICE_SELECT).click();
+ }
+
+ let voiceOption = window.document.querySelector(
+ `.narrate-voices .option[data-value="${voiceUri}"]`
+ );
+
+ voiceOption.focus();
+ voiceOption.click();
+
+ return voiceOption.classList.contains("selected");
+ },
+
+ getEventUtils(window) {
+ let eventUtils = {
+ _EU_Ci: Ci,
+ _EU_Cc: Cc,
+ window,
+ setTimeout,
+ parent: window,
+ navigator: window.navigator,
+ KeyboardEvent: window.KeyboardEvent,
+ KeyEvent: window.KeyEvent,
+ };
+ Services.scriptloader.loadSubScript(
+ "chrome://mochikit/content/tests/SimpleTest/EventUtils.js",
+ eventUtils
+ );
+ return eventUtils;
+ },
+
+ getReaderReadyPromise(window) {
+ return new Promise(resolve => {
+ function observeReady(subject, topic) {
+ if (subject == window) {
+ Services.obs.removeObserver(observeReady, topic);
+ resolve();
+ }
+ }
+
+ if (window.document.body.classList.contains("loaded")) {
+ resolve();
+ } else {
+ Services.obs.addObserver(observeReady, "AboutReader:Ready");
+ }
+ });
+ },
+
+ waitForNarrateToggle(window) {
+ let toggle = window.document.querySelector(this.TOGGLE);
+ return ContentTaskUtils.waitForCondition(() => !toggle.hidden, "");
+ },
+
+ waitForPrefChange(pref) {
+ return new Promise(resolve => {
+ function observeChange() {
+ Services.prefs.removeObserver(pref, observeChange);
+ resolve(Preferences.get(pref));
+ }
+
+ Services.prefs.addObserver(pref, observeChange);
+ });
+ },
+
+ sendBoundaryEvent(window, name, charIndex, charLength) {
+ let detail = { type: "boundary", args: { name, charIndex, charLength } };
+ window.dispatchEvent(new window.CustomEvent("testsynthevent", { detail }));
+ },
+
+ isWordHighlightGone(window, ok) {
+ let $ = window.document.querySelector.bind(window.document);
+ ok(!$(".narrate-word-highlight"), "No more word highlights exist");
+ },
+
+ getWordHighlights(window) {
+ let $$ = window.document.querySelectorAll.bind(window.document);
+ let nodes = Array.from($$(".narrate-word-highlight"));
+ return nodes.map(node => {
+ return {
+ word: node.dataset.word,
+ left: Number(node.style.left.replace(/px$/, "")),
+ top: Number(node.style.top.replace(/px$/, "")),
+ };
+ });
+ },
+};
diff --git a/toolkit/components/narrate/test/browser.toml b/toolkit/components/narrate/test/browser.toml
new file mode 100644
index 0000000000..71257b79bb
--- /dev/null
+++ b/toolkit/components/narrate/test/browser.toml
@@ -0,0 +1,20 @@
+[DEFAULT]
+support-files = [
+ "head.js",
+ "NarrateTestUtils.sys.mjs",
+ "moby_dick.html"
+]
+
+["browser_narrate.js"]
+skip-if = ["os == 'linux' && !debug"] # Bug 1776050
+
+["browser_narrate_disable.js"]
+
+["browser_narrate_language.js"]
+support-files = ["inferno.html"]
+
+["browser_narrate_toggle.js"]
+
+["browser_voiceselect.js"]
+
+["browser_word_highlight.js"]
diff --git a/toolkit/components/narrate/test/browser_narrate.js b/toolkit/components/narrate/test/browser_narrate.js
new file mode 100644
index 0000000000..df76743d2f
--- /dev/null
+++ b/toolkit/components/narrate/test/browser_narrate.js
@@ -0,0 +1,146 @@
+/* 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/. */
+
+"use strict";
+
+registerCleanupFunction(teardown);
+
+add_task(async function testNarrate() {
+ setup();
+
+ await spawnInNewReaderTab(TEST_ARTICLE, async function () {
+ let TEST_VOICE = "urn:moz-tts:fake:teresa";
+ let $ = content.document.querySelector.bind(content.document);
+
+ await NarrateTestUtils.waitForNarrateToggle(content);
+
+ let popup = $(NarrateTestUtils.POPUP);
+ ok(!NarrateTestUtils.isVisible(popup), "popup is initially hidden");
+
+ let toggle = $(NarrateTestUtils.TOGGLE);
+ toggle.click();
+
+ ok(NarrateTestUtils.isVisible(popup), "popup toggled");
+
+ let voiceOptions = $(NarrateTestUtils.VOICE_OPTIONS);
+ ok(
+ !NarrateTestUtils.isVisible(voiceOptions),
+ "voice options are initially hidden"
+ );
+
+ $(NarrateTestUtils.VOICE_SELECT).click();
+ ok(NarrateTestUtils.isVisible(voiceOptions), "voice options pop up");
+
+ let prefChanged = NarrateTestUtils.waitForPrefChange("narrate.voice");
+ ok(
+ NarrateTestUtils.selectVoice(content, TEST_VOICE),
+ "test voice selected"
+ );
+ await prefChanged;
+
+ ok(!NarrateTestUtils.isVisible(voiceOptions), "voice options hidden again");
+
+ NarrateTestUtils.isStoppedState(content, ok);
+
+ let promiseEvent = ContentTaskUtils.waitForEvent(content, "paragraphstart");
+ $(NarrateTestUtils.START).click();
+ let speechinfo = (await promiseEvent).detail;
+ is(speechinfo.voice, TEST_VOICE, "correct voice is being used");
+ let paragraph = speechinfo.paragraph;
+
+ NarrateTestUtils.isStartedState(content, ok);
+
+ promiseEvent = ContentTaskUtils.waitForEvent(content, "paragraphstart");
+ $(NarrateTestUtils.FORWARD).click();
+ speechinfo = (await promiseEvent).detail;
+ is(speechinfo.voice, TEST_VOICE, "same voice is used");
+ isnot(speechinfo.paragraph, paragraph, "next paragraph is being spoken");
+
+ NarrateTestUtils.isStartedState(content, ok);
+
+ promiseEvent = ContentTaskUtils.waitForEvent(content, "paragraphstart");
+ $(NarrateTestUtils.BACK).click();
+ speechinfo = (await promiseEvent).detail;
+ is(speechinfo.paragraph, paragraph, "first paragraph being spoken");
+
+ NarrateTestUtils.isStartedState(content, ok);
+
+ paragraph = speechinfo.paragraph;
+ $(NarrateTestUtils.STOP).click();
+ await ContentTaskUtils.waitForCondition(
+ () => !$(NarrateTestUtils.STOP),
+ "transitioned to stopped state"
+ );
+ NarrateTestUtils.isStoppedState(content, ok);
+
+ promiseEvent = ContentTaskUtils.waitForEvent(content, "paragraphstart");
+ $(NarrateTestUtils.START).click();
+ speechinfo = (await promiseEvent).detail;
+ is(speechinfo.paragraph, paragraph, "read same paragraph again");
+
+ NarrateTestUtils.isStartedState(content, ok);
+
+ let eventUtils = NarrateTestUtils.getEventUtils(content);
+
+ promiseEvent = ContentTaskUtils.waitForEvent(content, "paragraphstart");
+ prefChanged = NarrateTestUtils.waitForPrefChange("narrate.rate");
+ $(NarrateTestUtils.RATE).focus();
+ eventUtils.sendKey("UP", content);
+ let newspeechinfo = (await promiseEvent).detail;
+ is(newspeechinfo.paragraph, speechinfo.paragraph, "same paragraph");
+ isnot(newspeechinfo.rate, speechinfo.rate, "rate changed");
+ await prefChanged;
+
+ promiseEvent = ContentTaskUtils.waitForEvent(content, "paragraphend");
+ $(NarrateTestUtils.STOP).click();
+ await promiseEvent;
+
+ await ContentTaskUtils.waitForCondition(
+ () => !$(NarrateTestUtils.STOP),
+ "transitioned to stopped state"
+ );
+ NarrateTestUtils.isStoppedState(content, ok);
+
+ promiseEvent = ContentTaskUtils.waitForEvent(content, "scroll");
+ content.scrollBy(0, 10);
+ await promiseEvent;
+ ok(!NarrateTestUtils.isVisible(popup), "popup is hidden after scroll");
+
+ toggle.click();
+ ok(NarrateTestUtils.isVisible(popup), "popup is toggled again");
+
+ promiseEvent = ContentTaskUtils.waitForEvent(content, "paragraphstart");
+ $(NarrateTestUtils.START).click();
+ await promiseEvent;
+ NarrateTestUtils.isStartedState(content, ok);
+
+ promiseEvent = ContentTaskUtils.waitForEvent(content, "scroll");
+ content.scrollBy(0, -10);
+ await promiseEvent;
+ ok(NarrateTestUtils.isVisible(popup), "popup stays visible after scroll");
+
+ toggle.click();
+ ok(!NarrateTestUtils.isVisible(popup), "popup is dismissed while speaking");
+ NarrateTestUtils.isStartedState(content, ok);
+
+ // Go forward all the way to the end of the article. We should eventually
+ // stop.
+ do {
+ promiseEvent = Promise.race([
+ ContentTaskUtils.waitForEvent(content, "paragraphstart"),
+ ContentTaskUtils.waitForEvent(content, "paragraphsdone"),
+ ]);
+ $(NarrateTestUtils.FORWARD).click();
+ } while ((await promiseEvent).type == "paragraphstart");
+
+ // This is to make sure we are not actively scrolling when the tab closes.
+ content.scroll(0, 0);
+
+ await ContentTaskUtils.waitForCondition(
+ () => !$(NarrateTestUtils.STOP),
+ "transitioned to stopped state"
+ );
+ NarrateTestUtils.isStoppedState(content, ok);
+ });
+});
diff --git a/toolkit/components/narrate/test/browser_narrate_disable.js b/toolkit/components/narrate/test/browser_narrate_disable.js
new file mode 100644
index 0000000000..5097006c3e
--- /dev/null
+++ b/toolkit/components/narrate/test/browser_narrate_disable.js
@@ -0,0 +1,43 @@
+/* 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/. */
+
+"use strict";
+
+const ENABLE_PREF = "narrate.enabled";
+
+registerCleanupFunction(() => {
+ clearUserPref(ENABLE_PREF);
+ teardown();
+});
+
+add_task(async function testNarratePref() {
+ setup();
+
+ await spawnInNewReaderTab(TEST_ARTICLE, function () {
+ is(
+ content.document.querySelectorAll(NarrateTestUtils.TOGGLE).length,
+ 1,
+ "narrate is inserted by default"
+ );
+ });
+
+ setBoolPref(ENABLE_PREF, false);
+
+ await spawnInNewReaderTab(TEST_ARTICLE, function () {
+ ok(
+ !content.document.querySelector(NarrateTestUtils.TOGGLE),
+ "narrate is disabled and is not in reader mode"
+ );
+ });
+
+ setBoolPref(ENABLE_PREF, true);
+
+ await spawnInNewReaderTab(TEST_ARTICLE, function () {
+ is(
+ content.document.querySelectorAll(NarrateTestUtils.TOGGLE).length,
+ 1,
+ "narrate is re-enabled and appears only once"
+ );
+ });
+});
diff --git a/toolkit/components/narrate/test/browser_narrate_language.js b/toolkit/components/narrate/test/browser_narrate_language.js
new file mode 100644
index 0000000000..d4fcb79f49
--- /dev/null
+++ b/toolkit/components/narrate/test/browser_narrate_language.js
@@ -0,0 +1,99 @@
+/* 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/. */
+
+"use strict";
+
+registerCleanupFunction(teardown);
+
+add_task(async function testVoiceselectDropdownAutoclose() {
+ setup("automatic", true);
+
+ await spawnInNewReaderTab(TEST_ARTICLE, async function () {
+ let $ = content.document.querySelector.bind(content.document);
+
+ await NarrateTestUtils.waitForNarrateToggle(content);
+
+ ok(
+ !!$(".option[data-value='urn:moz-tts:fake:bob']"),
+ "Jamaican English voice available"
+ );
+ ok(
+ !!$(".option[data-value='urn:moz-tts:fake:lenny']"),
+ "Canadian English voice available"
+ );
+ ok(
+ !!$(".option[data-value='urn:moz-tts:fake:amy']"),
+ "British English voice available"
+ );
+
+ ok(
+ !$(".option[data-value='urn:moz-tts:fake:celine']"),
+ "Canadian French voice unavailable"
+ );
+ ok(
+ !$(".option[data-value='urn:moz-tts:fake:julie']"),
+ "Mexican Spanish voice unavailable"
+ );
+
+ $(NarrateTestUtils.TOGGLE).click();
+ ok(
+ NarrateTestUtils.isVisible($(NarrateTestUtils.POPUP)),
+ "popup is toggled"
+ );
+
+ let prefChanged = NarrateTestUtils.waitForPrefChange(
+ "narrate.voice",
+ "getCharPref"
+ );
+ NarrateTestUtils.selectVoice(content, "urn:moz-tts:fake:lenny");
+ let voicePref = JSON.parse(await prefChanged);
+ is(voicePref.en, "urn:moz-tts:fake:lenny", "pref set correctly");
+ });
+});
+
+add_task(async function testVoiceselectDropdownAutoclose() {
+ setup("automatic", true);
+
+ await spawnInNewReaderTab(TEST_ITALIAN_ARTICLE, async function () {
+ let $ = content.document.querySelector.bind(content.document);
+
+ await NarrateTestUtils.waitForNarrateToggle(content);
+
+ ok(
+ !!$(".option[data-value='urn:moz-tts:fake:zanetta']"),
+ "Italian voice available"
+ );
+ ok(
+ !!$(".option[data-value='urn:moz-tts:fake:margherita']"),
+ "Italian voice available"
+ );
+
+ ok(
+ !$(".option[data-value='urn:moz-tts:fake:bob']"),
+ "Jamaican English voice available"
+ );
+ ok(
+ !$(".option[data-value='urn:moz-tts:fake:celine']"),
+ "Canadian French voice unavailable"
+ );
+ ok(
+ !$(".option[data-value='urn:moz-tts:fake:julie']"),
+ "Mexican Spanish voice unavailable"
+ );
+
+ $(NarrateTestUtils.TOGGLE).click();
+ ok(
+ NarrateTestUtils.isVisible($(NarrateTestUtils.POPUP)),
+ "popup is toggled"
+ );
+
+ let prefChanged = NarrateTestUtils.waitForPrefChange(
+ "narrate.voice",
+ "getCharPref"
+ );
+ NarrateTestUtils.selectVoice(content, "urn:moz-tts:fake:zanetta");
+ let voicePref = JSON.parse(await prefChanged);
+ is(voicePref.it, "urn:moz-tts:fake:zanetta", "pref set correctly");
+ });
+});
diff --git a/toolkit/components/narrate/test/browser_narrate_toggle.js b/toolkit/components/narrate/test/browser_narrate_toggle.js
new file mode 100644
index 0000000000..54de276001
--- /dev/null
+++ b/toolkit/components/narrate/test/browser_narrate_toggle.js
@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// This test verifies that the keyboard shortcut "n" will Start/Stop the
+// narration of an article in readermode when the article is in focus.
+
+registerCleanupFunction(teardown);
+
+add_task(async function testToggleNarrate() {
+ setup();
+
+ await spawnInNewReaderTab(TEST_ARTICLE, async function () {
+ let $ = content.document.querySelector.bind(content.document);
+
+ await NarrateTestUtils.waitForNarrateToggle(content);
+
+ let eventUtils = NarrateTestUtils.getEventUtils(content);
+
+ NarrateTestUtils.isStoppedState(content, ok);
+
+ $(NarrateTestUtils.TOGGLE).focus();
+ eventUtils.synthesizeKey("n", {}, content);
+
+ await ContentTaskUtils.waitForEvent(content, "paragraphstart");
+ NarrateTestUtils.isStartedState(content, ok);
+
+ $(NarrateTestUtils.TOGGLE).focus();
+ eventUtils.synthesizeKey("n", {}, content);
+
+ await ContentTaskUtils.waitForCondition(
+ () => !$(NarrateTestUtils.STOP),
+ "transitioned to stopped state"
+ );
+ NarrateTestUtils.isStoppedState(content, ok);
+ });
+});
diff --git a/toolkit/components/narrate/test/browser_voiceselect.js b/toolkit/components/narrate/test/browser_voiceselect.js
new file mode 100644
index 0000000000..4f6c59e3a7
--- /dev/null
+++ b/toolkit/components/narrate/test/browser_voiceselect.js
@@ -0,0 +1,139 @@
+/* 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/. */
+
+"use strict";
+
+registerCleanupFunction(teardown);
+
+add_task(async function testVoiceselectDropdownAutoclose() {
+ setup();
+
+ await spawnInNewReaderTab(TEST_ARTICLE, async function () {
+ let $ = content.document.querySelector.bind(content.document);
+
+ await NarrateTestUtils.waitForNarrateToggle(content);
+
+ $(NarrateTestUtils.TOGGLE).click();
+ ok(
+ NarrateTestUtils.isVisible($(NarrateTestUtils.POPUP)),
+ "popup is toggled"
+ );
+
+ ok(
+ !NarrateTestUtils.isVisible($(NarrateTestUtils.VOICE_OPTIONS)),
+ "voice options are initially hidden"
+ );
+
+ $(NarrateTestUtils.VOICE_SELECT).click();
+ ok(
+ NarrateTestUtils.isVisible($(NarrateTestUtils.VOICE_OPTIONS)),
+ "voice options are toggled"
+ );
+
+ $(NarrateTestUtils.TOGGLE).click();
+ // A focus will follow a real click.
+ $(NarrateTestUtils.TOGGLE).focus();
+ ok(
+ !NarrateTestUtils.isVisible($(NarrateTestUtils.POPUP)),
+ "narrate popup is dismissed"
+ );
+
+ $(NarrateTestUtils.TOGGLE).click();
+ // A focus will follow a real click.
+ $(NarrateTestUtils.TOGGLE).focus();
+ ok(
+ NarrateTestUtils.isVisible($(NarrateTestUtils.POPUP)),
+ "narrate popup is showing again"
+ );
+ ok(
+ !NarrateTestUtils.isVisible($(NarrateTestUtils.VOICE_OPTIONS)),
+ "voice options are hidden after popup comes back"
+ );
+ });
+});
+
+add_task(async function testVoiceselectLabelChange() {
+ setup();
+
+ await spawnInNewReaderTab(TEST_ARTICLE, async function () {
+ let $ = content.document.querySelector.bind(content.document);
+
+ await NarrateTestUtils.waitForNarrateToggle(content);
+
+ $(NarrateTestUtils.TOGGLE).click();
+ ok(
+ NarrateTestUtils.isVisible($(NarrateTestUtils.POPUP)),
+ "popup is toggled"
+ );
+
+ ok(
+ NarrateTestUtils.selectVoice(content, "urn:moz-tts:fake:lenny"),
+ "voice selected"
+ );
+
+ let selectedOption = $(NarrateTestUtils.VOICE_SELECTED);
+ let selectLabel = $(NarrateTestUtils.VOICE_SELECT_LABEL);
+
+ is(
+ selectedOption.textContent,
+ selectLabel.textContent,
+ "new label matches selected voice"
+ );
+ });
+});
+
+add_task(async function testVoiceselectKeyboard() {
+ setup();
+
+ await spawnInNewReaderTab(TEST_ARTICLE, async function () {
+ let $ = content.document.querySelector.bind(content.document);
+
+ await NarrateTestUtils.waitForNarrateToggle(content);
+
+ $(NarrateTestUtils.TOGGLE).click();
+ ok(
+ NarrateTestUtils.isVisible($(NarrateTestUtils.POPUP)),
+ "popup is toggled"
+ );
+
+ let eventUtils = NarrateTestUtils.getEventUtils(content);
+
+ let firstValue = $(NarrateTestUtils.VOICE_SELECTED).dataset.value;
+
+ ok(
+ !NarrateTestUtils.isVisible($(NarrateTestUtils.VOICE_OPTIONS)),
+ "voice options initially are hidden"
+ );
+
+ $(NarrateTestUtils.VOICE_SELECT).focus();
+
+ eventUtils.synthesizeKey("KEY_ArrowDown", {}, content);
+
+ await ContentTaskUtils.waitForCondition(
+ () => $(NarrateTestUtils.VOICE_SELECTED).dataset.value != firstValue,
+ "value changed after pressing ArrowDown key"
+ );
+
+ eventUtils.synthesizeKey("KEY_Enter", {}, content);
+
+ ok(
+ NarrateTestUtils.isVisible($(NarrateTestUtils.VOICE_OPTIONS)),
+ "voice options showing after pressing Enter"
+ );
+
+ eventUtils.synthesizeKey("KEY_ArrowUp", {}, content);
+
+ eventUtils.synthesizeKey("KEY_Enter", {}, content);
+
+ ok(
+ !NarrateTestUtils.isVisible($(NarrateTestUtils.VOICE_OPTIONS)),
+ "voice options hidden after pressing Enter"
+ );
+
+ await ContentTaskUtils.waitForCondition(
+ () => $(NarrateTestUtils.VOICE_SELECTED).dataset.value == firstValue,
+ "value changed back to original after pressing Enter"
+ );
+ });
+});
diff --git a/toolkit/components/narrate/test/browser_word_highlight.js b/toolkit/components/narrate/test/browser_word_highlight.js
new file mode 100644
index 0000000000..709fd06a2e
--- /dev/null
+++ b/toolkit/components/narrate/test/browser_word_highlight.js
@@ -0,0 +1,76 @@
+/* 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/. */
+
+"use strict";
+
+registerCleanupFunction(teardown);
+
+add_task(async function testNarrate() {
+ setup("urn:moz-tts:fake:teresa");
+
+ await spawnInNewReaderTab(TEST_ARTICLE, async function () {
+ let $ = content.document.querySelector.bind(content.document);
+
+ await NarrateTestUtils.waitForNarrateToggle(content);
+
+ let popup = $(NarrateTestUtils.POPUP);
+ ok(!NarrateTestUtils.isVisible(popup), "popup is initially hidden");
+
+ let toggle = $(NarrateTestUtils.TOGGLE);
+ toggle.click();
+
+ ok(NarrateTestUtils.isVisible(popup), "popup toggled");
+
+ NarrateTestUtils.isStoppedState(content, ok);
+
+ let promiseEvent = ContentTaskUtils.waitForEvent(content, "paragraphstart");
+ $(NarrateTestUtils.START).click();
+ let voice = (await promiseEvent).detail.voice;
+ is(voice, "urn:moz-tts:fake:teresa", "double-check voice");
+
+ // Skip forward to first paragraph.
+ let details;
+ do {
+ promiseEvent = ContentTaskUtils.waitForEvent(content, "paragraphstart");
+ $(NarrateTestUtils.FORWARD).click();
+ details = (await promiseEvent).detail;
+ } while (details.tag != "p");
+
+ let boundaryPat = /(\S+)/g;
+ let position = { left: 0, top: 0 };
+ let text = details.paragraph;
+ for (let res = boundaryPat.exec(text); res; res = boundaryPat.exec(text)) {
+ promiseEvent = ContentTaskUtils.waitForEvent(content, "wordhighlight");
+ NarrateTestUtils.sendBoundaryEvent(
+ content,
+ "word",
+ res.index,
+ res[0].length
+ );
+ let { start, end } = (await promiseEvent).detail;
+ let nodes = NarrateTestUtils.getWordHighlights(content);
+ for (let node of nodes) {
+ // Since this is English we can assume each word is to the right or
+ // below the previous one.
+ ok(
+ node.left > position.left || node.top > position.top,
+ "highlight position is moving"
+ );
+ position = { left: node.left, top: node.top };
+ }
+ let wordFromOffset = text.substring(start, end);
+ // XXX: Each node should contain the part of the word it highlights.
+ // Right now, each node contains the entire word.
+ let wordFromHighlight = nodes[0].word;
+ is(wordFromOffset, wordFromHighlight, "Correct word is highlighted");
+ }
+
+ $(NarrateTestUtils.STOP).click();
+ await ContentTaskUtils.waitForCondition(
+ () => !$(NarrateTestUtils.STOP),
+ "transitioned to stopped state"
+ );
+ NarrateTestUtils.isWordHighlightGone(content, ok);
+ });
+});
diff --git a/toolkit/components/narrate/test/head.js b/toolkit/components/narrate/test/head.js
new file mode 100644
index 0000000000..79fa77385e
--- /dev/null
+++ b/toolkit/components/narrate/test/head.js
@@ -0,0 +1,86 @@
+/* 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/. */
+
+/* exported teardown, setup, toggleExtension,
+ spawnInNewReaderTab, TEST_ARTICLE, TEST_ITALIAN_ARTICLE */
+
+"use strict";
+
+const TEST_ARTICLE =
+ "http://example.com/browser/toolkit/components/narrate/test/moby_dick.html";
+
+const TEST_ITALIAN_ARTICLE =
+ "http://example.com/browser/toolkit/components/narrate/test/inferno.html";
+
+ChromeUtils.defineESModuleGetters(this, {
+ AddonManager: "resource://gre/modules/AddonManager.sys.mjs",
+});
+
+const TEST_PREFS = {
+ "reader.parse-on-load.enabled": true,
+ "media.webspeech.synth.enabled": true,
+ "media.webspeech.synth.test": true,
+ "narrate.enabled": true,
+ "narrate.test": true,
+ "narrate.voice": null,
+ "narrate.filter-voices": false,
+};
+
+function setup(voiceUri = "automatic", filterVoices = false) {
+ let prefs = Object.assign({}, TEST_PREFS, {
+ "narrate.filter-voices": filterVoices,
+ "narrate.voice": JSON.stringify({ en: voiceUri }),
+ });
+
+ // Set required test prefs.
+ Object.entries(prefs).forEach(([name, value]) => {
+ switch (typeof value) {
+ case "boolean":
+ setBoolPref(name, value);
+ break;
+ case "string":
+ setCharPref(name, value);
+ break;
+ }
+ });
+}
+
+function teardown() {
+ // Reset test prefs.
+ Object.entries(TEST_PREFS).forEach(pref => {
+ clearUserPref(pref[0]);
+ });
+}
+
+function spawnInNewReaderTab(url, func) {
+ return BrowserTestUtils.withNewTab(
+ { gBrowser, url: `about:reader?url=${encodeURIComponent(url)}` },
+ async function (browser) {
+ // This imports the test utils for all tests, so we'll declare it as
+ // a global here which will make it ESLint happy.
+ /* global NarrateTestUtils */
+ SpecialPowers.addTaskImport(
+ "NarrateTestUtils",
+ "chrome://mochitests/content/browser/" +
+ "toolkit/components/narrate/test/NarrateTestUtils.sys.mjs"
+ );
+ await SpecialPowers.spawn(browser, [], async function () {
+ await NarrateTestUtils.getReaderReadyPromise(content);
+ });
+ await SpecialPowers.spawn(browser, [], func);
+ }
+ );
+}
+
+function setBoolPref(name, value) {
+ Services.prefs.setBoolPref(name, value);
+}
+
+function setCharPref(name, value) {
+ Services.prefs.setCharPref(name, value);
+}
+
+function clearUserPref(name) {
+ Services.prefs.clearUserPref(name);
+}
diff --git a/toolkit/components/narrate/test/inferno.html b/toolkit/components/narrate/test/inferno.html
new file mode 100644
index 0000000000..58dfd24df1
--- /dev/null
+++ b/toolkit/components/narrate/test/inferno.html
@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Inferno - Canto I</title>
+</head>
+<body>
+ <h1>Inferno</h1>
+ <h2>Canto I: Dante nella selva oscura</h2>
+ <p>
+ Nel mezzo del cammin di nostra vita<br>
+ mi ritrovai per una selva oscura,<br>
+ ché la diritta via era smarrita.
+ </p>
+ <p>
+ Ahi quanto a dir qual era è cosa dura<br>
+ esta selva selvaggia e aspra e forte<br>
+ che nel pensier rinova la paura!
+ </p>
+ <p>
+ Tant' è amara che poco è più morte;<br>
+ ma per trattar del ben ch'i' vi trovai,<br>
+ dirò de l'altre cose ch'i' v'ho scorte.
+ </p>
+ <p>
+ Io non so ben ridir com' i' v'intrai,<br>
+ tant' era pien di sonno a quel punto<br>
+ che la verace via abbandonai.
+ </p>
+ <p>
+ Ma poi ch'i' fui al piè d'un colle giunto,<br>
+ là dove terminava quella valle<br>
+ che m'avea di paura il cor compunto,
+ </p>
+ <p>
+ guardai in alto e vidi le sue spalle<br>
+ vestite già de' raggi del pianeta<br>
+ che mena dritto altrui per ogne calle.
+ </p>
+ <p>
+ Allor fu la paura un poco queta,<br>
+ che nel lago del cor m'era durata<br>
+ la notte ch'i' passai con tanta pieta.
+ </p>
+ <p>
+ E come quei che con lena affannata,<br>
+ uscito fuor del pelago a la riva,<br>
+ si volge a l'acqua perigliosa e guata,
+ </p>
+ <p>
+ così l'animo mio, ch'ancor fuggiva,<br>
+ si volse a retro a rimirar lo passo<br>
+ che non lasciò già mai persona viva.
+ </p>
+ <p>
+ Poi ch'èi posato un poco il corpo lasso,<br>
+ ripresi via per la piaggia diserta,<br>
+ sì che 'l piè fermo sempre era 'l più basso.
+ </p>
+ <p>
+ Ed ecco, quasi al cominciar de l'erta,<br>
+ una lonza leggiera e presta molto,<br>
+ che di pel macolato era coverta;
+ </p>
+ <p>
+ e non mi si partia dinanzi al volto,<br>
+ anzi 'mpediva tanto il mio cammino,<br>
+ ch'i' fui per ritornar più volte vòlto.
+ </p>
+ <p>
+ Temp' era dal principio del mattino,<br>
+ e 'l sol montava 'n sù con quelle stelle<br>
+ ch'eran con lui quando l'amor divino
+ </p>
+ <p>
+ mosse di prima quelle cose belle;<br>
+ sì ch'a bene sperar m'era cagione<br>
+ di quella fiera a la gaetta pelle
+ </p>
+ <p>
+ l'ora del tempo e la dolce stagione;<br>
+ ma non sì che paura non mi desse<br>
+ la vista che m'apparve d'un leone.
+ </p>
+ <p>
+ Questi parea che contra me venisse<br>
+ con la test' alta e con rabbiosa fame,<br>
+ sì che parea che l'aere ne tremesse.
+ </p>
+ <p>
+ Ed una lupa, che di tutte brame<br>
+ sembiava carca ne la sua magrezza,<br>
+ e molte genti fé già viver grame,
+ </p>
+ <p>
+ questa mi porse tanto di gravezza<br>
+ con la paura ch'uscia di sua vista,<br>
+ ch'io perdei la speranza de l'altezza.
+ </p>
+ <p>
+ E qual è quei che volontieri acquista,<br>
+ e giugne 'l tempo che perder lo face,<br>
+ che 'n tutti suoi pensier piange e s'attrista;
+ </p>
+ <p>
+ tal mi fece la bestia sanza pace,<br>
+ che, venendomi 'ncontro, a poco a poco<br>
+ mi ripigneva là dove 'l sol tace.
+ </p>
+ <p>
+ Mentre ch'i' rovinava in basso loco,<br>
+ dinanzi a li occhi mi si fu offerto<br>
+ chi per lungo silenzio parea fioco.
+ </p>
+ <p>
+ Quando vidi costui nel gran diserto,<br>
+ «<em>Miserere</em> di me», gridai a lui,<br>
+ «qual che tu sii, od ombra od omo certo!».
+ </p>
+ <p>
+ Rispuosemi: «Non omo, omo già fui,<br>
+ e li parenti miei furon lombardi,<br>
+ mantoani per patrïa ambedui.
+ </p>
+ <p>
+ Nacqui <em>sub Iulio</em>, ancor che fosse tardi,<br>
+ e vissi a Roma sotto 'l buono Augusto<br>
+ nel tempo de li dèi falsi e bugiardi.
+ </p>
+ <p>
+ Poeta fui, e cantai di quel giusto<br>
+ figliuol d'Anchise che venne di Troia,<br>
+ poi che 'l superbo Ilïón fu combusto.
+ </p>
+ <p>
+ Ma tu perché ritorni a tanta noia?<br>
+ perché non sali il dilettoso monte<br>
+ ch'è principio e cagion di tutta gioia?».
+ </p>
+ <p>
+ «Or se' tu quel Virgilio e quella fonte<br>
+ che spandi di parlar sì largo fiume?»,<br>
+ rispuos' io lui con vergognosa fronte.
+ </p>
+ <p>
+ «O de li altri poeti onore e lume,<br>
+ vagliami 'l lungo studio e 'l grande amore<br>
+ che m'ha fatto cercar lo tuo volume.
+ </p>
+ <p>
+ Tu se' lo mio maestro e 'l mio autore,<br>
+ tu se' solo colui da cu' io tolsi<br>
+ lo bello stilo che m'ha fatto onore.
+ </p>
+ <p>
+ Vedi la bestia per cu' io mi volsi;<br>
+ aiutami da lei, famoso saggio,<br>
+ ch'ella mi fa tremar le vene e i polsi».
+ </p>
+ <p>
+ «A te convien tenere altro vïaggio»,<br>
+ rispuose, poi che lagrimar mi vide,<br>
+ «se vuo' campar d'esto loco selvaggio;
+ </p>
+ <p>
+ ché questa bestia, per la qual tu gride,<br>
+ non lascia altrui passar per la sua via,<br>
+ ma tanto lo 'mpedisce che l'uccide;
+ </p>
+ <p>
+ e ha natura sì malvagia e ria,<br>
+ che mai non empie la bramosa voglia,<br>
+ e dopo 'l pasto ha più fame che pria.
+ </p>
+ <p>
+ Molti son li animali a cui s'ammoglia,<br>
+ e più saranno ancora, infin che 'l veltro<br>
+ verrà, che la farà morir con doglia.
+ </p>
+ <p>
+ Questi non ciberà terra né peltro,<br>
+ ma sapïenza, amore e virtute,<br>
+ e sua nazion sarà tra feltro e feltro.
+ </p>
+ <p>
+ Di quella umile Italia fia salute<br>
+ per cui morì la vergine Cammilla,<br>
+ Eurialo e Turno e Niso di ferute.
+ </p>
+ <p>
+ Questi la caccerà per ogne villa,<br>
+ fin che l'avrà rimessa ne lo 'nferno,<br>
+ là onde 'nvidia prima dipartilla.
+ </p>
+ <p>
+ Ond' io per lo tuo me' penso e discerno<br>
+ che tu mi segui, e io sarò tua guida,<br>
+ e trarrotti di qui per loco etterno;
+ </p>
+ <p>
+ ove udirai le disperate strida,<br>
+ vedrai li antichi spiriti dolenti,<br>
+ ch'a la seconda morte ciascun grida;
+ </p>
+ <p>
+ e vederai color che son contenti<br>
+ nel foco, perché speran di venire<br>
+ quando che sia a le beate genti.
+ </p>
+ <p>
+ A le quai poi se tu vorrai salire,<br>
+ anima fia a ciò più di me degna:<br>
+ con lei ti lascerò nel mio partire;
+ </p>
+ <p>
+ ché quello imperador che là sù regna,<br>
+ perch' i' fu' ribellante a la sua legge,<br>
+ non vuol che 'n sua città per me si vegna.
+ </p>
+ <p>
+ In tutte parti impera e quivi regge;<br>
+ quivi è la sua città e l'alto seggio:<br>
+ oh felice colui cu' ivi elegge!».
+ </p>
+ <p>
+ E io a lui: «Poeta, io ti richeggio<br>
+ per quello Dio che tu non conoscesti,<br>
+ a ciò ch'io fugga questo male e peggio,
+ </p>
+ <p>
+ che tu mi meni là dov' or dicesti,<br>
+ sì ch'io veggia la porta di san Pietro<br>
+ e color cui tu fai cotanto mesti».
+ </p>
+ <p>
+ Allor si mosse, e io li tenni dietro.
+ </p>
+</body>
+</html>
diff --git a/toolkit/components/narrate/test/moby_dick.html b/toolkit/components/narrate/test/moby_dick.html
new file mode 100644
index 0000000000..0beaa20fd1
--- /dev/null
+++ b/toolkit/components/narrate/test/moby_dick.html
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Moby Dick - Chapter 1. Loomings</title>
+</head>
+<body>
+ <h1>Moby Dick</h1>
+ <h2>Chapter 1. Loomings</h2>
+ <p>
+ Call me Ishmael. <span>Some <span>years</span></span> ago—never mind how
+ long precisely—having little or no money in my purse, and nothing particular
+ to interest me on shore, I thought I would sail about a little and see the
+ watery part of the world. It is a way I have of driving off the spleen and
+ regulating the circulation. Whenever I find myself growing grim about the
+ mouth; whenever it is a damp, drizzly November in my soul; whenever I find
+ myself involuntarily pausing before coffin warehouses, and bringing up the
+ rear of every funeral I meet; and especially whenever my hypos get such an
+ upper hand of me, that it requires a strong moral principle to prevent me
+ from deliberately stepping into the street, and methodically knocking
+ people's hats off—then, I account it high time to get to sea as soon as I
+ can. This is my substitute for pistol and ball. With a philosophical
+ flourish Cato throws himself upon his sword; I quietly take to the ship.
+ There is nothing surprising in this. If they but knew it, almost all men in
+ their degree, some time or other, cherish very nearly the same feelings
+ towards the ocean with me.
+ </p>
+ <p>
+ There now is your insular city of the Manhattoes, belted round by wharves
+ as Indian isles by coral reefs—commerce surrounds it with her surf.
+ Right and left, the streets take you waterward. Its extreme downtown is
+ the battery, where that noble mole is washed by waves, and cooled by
+ breezes, which a few hours previous were out of sight of land. Look at the
+ crowds of water-gazers there.
+ </p>
+ <p>
+ Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears
+ Hook to Coenties Slip, and from thence, by Whitehall, northward. What do
+ you see?—Posted like silent sentinels all around the town, stand
+ thousands upon thousands of mortal men fixed in ocean reveries. Some
+ leaning against the spiles; some seated upon the pier-heads; some looking
+ over the bulwarks of ships from China; some high aloft in the rigging, as
+ if striving to get a still better seaward peep. But these are all
+ landsmen; of week days pent up in lath and plaster—tied to counters,
+ nailed to benches, clinched to desks. How then is this? Are the green
+ fields gone? What do they here?
+ </p>
+ <p>
+ But look! here come more crowds, pacing straight for the water, and
+ seemingly bound for a dive. Strange! Nothing will content them but the
+ extremest limit of the land; loitering under the shady lee of yonder
+ warehouses will not suffice. No. They must get just as nigh the water as
+ they possibly can without falling in. And there they stand—miles of
+ them—leagues. Inlanders all, they come from lanes and alleys,
+ streets and avenues—north, east, south, and west. Yet here they all
+ unite. Tell me, does the magnetic virtue of the needles of the compasses
+ of all those ships attract them thither?
+ </p>
+ <p>
+ Once more. Say you are in the country; in some high land of lakes. Take
+ almost any path you please, and ten to one it carries you down in a dale,
+ and leaves you there by a pool in the stream. There is magic in it. Let
+ the most absent-minded of men be plunged in his deepest reveries—stand
+ that man on his legs, set his feet a-going, and he will infallibly lead
+ you to water, if water there be in all that region. Should you ever be
+ athirst in the great American desert, try this experiment, if your caravan
+ happen to be supplied with a metaphysical professor. Yes, as every one
+ knows, meditation and water are wedded for ever.
+ </p>
+ <p>
+ But here is an artist. He desires to paint you the dreamiest, shadiest,
+ quietest, most enchanting bit of romantic landscape in all the valley of
+ the Saco. What is the chief element he employs? There stand his trees,
+ each with a hollow trunk, as if a hermit and a crucifix were within; and
+ here sleeps his meadow, and there sleep his cattle; and up from yonder
+ cottage goes a sleepy smoke. Deep into distant woodlands winds a mazy way,
+ reaching to overlapping spurs of mountains bathed in their hill-side blue.
+ But though the picture lies thus tranced, and though this pine-tree shakes
+ down its sighs like leaves upon this shepherd's head, yet all were vain,
+ unless the shepherd's eye were fixed upon the magic stream before him. Go
+ visit the Prairies in June, when for scores on scores of miles you wade
+ knee-deep among Tiger-lilies—what is the one charm wanting?—Water—there
+ is not a drop of water there! Were Niagara but a cataract of sand, would
+ you travel your thousand miles to see it? Why did the poor poet of
+ Tennessee, upon suddenly receiving two handfuls of silver, deliberate
+ whether to buy him a coat, which he sadly needed, or invest his money in a
+ pedestrian trip to Rockaway Beach? Why is almost every robust healthy boy
+ with a robust healthy soul in him, at some time or other crazy to go to
+ sea? Why upon your first voyage as a passenger, did you yourself feel such
+ a mystical vibration, when first told that you and your ship were now out
+ of sight of land? Why did the old Persians hold the sea holy? Why did the
+ Greeks give it a separate deity, and own brother of Jove? Surely all this
+ is not without meaning. And still deeper the meaning of that story of
+ Narcissus, who because he could not grasp the tormenting, mild image he
+ saw in the fountain, plunged into it and was drowned. But that same image,
+ we ourselves see in all rivers and oceans. It is the image of the
+ ungraspable phantom of life; and this is the key to it all.
+ </p>
+ <p>
+ Now, when I say that I am in the habit of going to sea whenever I begin to
+ grow hazy about the eyes, and begin to be over conscious of my lungs, I do
+ not mean to have it inferred that I ever go to sea as a passenger. For to
+ go as a passenger you must needs have a purse, and a purse is but a rag
+ unless you have something in it. Besides, passengers get sea-sick—grow
+ quarrelsome—don't sleep of nights—do not enjoy themselves
+ much, as a general thing;—no, I never go as a passenger; nor, though
+ I am something of a salt, do I ever go to sea as a Commodore, or a
+ Captain, or a Cook. I abandon the glory and distinction of such offices to
+ those who like them. For my part, I abominate all honourable respectable
+ toils, trials, and tribulations of every kind whatsoever. It is quite as
+ much as I can do to take care of myself, without taking care of ships,
+ barques, brigs, schooners, and what not. And as for going as cook,—though
+ I confess there is considerable glory in that, a cook being a sort of
+ officer on ship-board—yet, somehow, I never fancied broiling fowls;—though
+ once broiled, judiciously buttered, and judgmatically salted and peppered,
+ there is no one who will speak more respectfully, not to say
+ reverentially, of a broiled fowl than I will. It is out of the idolatrous
+ dotings of the old Egyptians upon broiled ibis and roasted river horse,
+ that you see the mummies of those creatures in their huge bake-houses the
+ pyramids.
+ </p>
+ <p>
+ No, when I go to sea, I go as a simple sailor, right before the mast,
+ plumb down into the forecastle, aloft there to the royal mast-head. True,
+ they rather order me about some, and make me jump from spar to spar, like
+ a grasshopper in a May meadow. And at first, this sort of thing is
+ unpleasant enough. It touches one's sense of honour, particularly if you
+ come of an old established family in the land, the Van Rensselaers, or
+ Randolphs, or Hardicanutes. And more than all, if just previous to putting
+ your hand into the tar-pot, you have been lording it as a country
+ schoolmaster, making the tallest boys stand in awe of you. The transition
+ is a keen one, I assure you, from a schoolmaster to a sailor, and requires
+ a strong decoction of Seneca and the Stoics to enable you to grin and bear
+ it. But even this wears off in time.
+ </p>
+ <p>
+ What of it, if some old hunks of a sea-captain orders me to get a broom
+ and sweep down the decks? What does that indignity amount to, weighed, I
+ mean, in the scales of the New Testament? Do you think the archangel
+ Gabriel thinks anything the less of me, because I promptly and
+ respectfully obey that old hunks in that particular instance? Who ain't a
+ slave? Tell me that. Well, then, however the old sea-captains may order me
+ about—however they may thump and punch me about, I have the
+ satisfaction of knowing that it is all right; that everybody else is one
+ way or other served in much the same way—either in a physical or
+ metaphysical point of view, that is; and so the universal thump is passed
+ round, and all hands should rub each other's shoulder-blades, and be
+ content.
+ </p>
+ <p>
+ Again, I always go to sea as a sailor, because they make a point of paying
+ me for my trouble, whereas they never pay passengers a single penny that I
+ ever heard of. On the contrary, passengers themselves must pay. And there
+ is all the difference in the world between paying and being paid. The act
+ of paying is perhaps the most uncomfortable infliction that the two
+ orchard thieves entailed upon us. But <i>being paid</i>,—what will compare
+ with it? The urbane activity with which a man receives money is really
+ marvellous, considering that we so earnestly believe money to be the root
+ of all earthly ills, and that on no account can a monied man enter heaven.
+ Ah! how cheerfully we consign ourselves to perdition!
+ </p>
+ <p>
+ Finally, I always go to sea as a sailor, because of the wholesome exercise
+ and pure air of the fore-castle deck. For as in this world, head winds are
+ far more prevalent than winds from astern (that is, if you never violate
+ the Pythagorean maxim), so for the most part the Commodore on the
+ quarter-deck gets his atmosphere at second hand from the sailors on the
+ forecastle. He thinks he breathes it first; but not so. In much the same
+ way do the commonalty lead their leaders in many other things, at the same
+ time that the leaders little suspect it. But wherefore it was that after
+ having repeatedly smelt the sea as a merchant sailor, I should now take it
+ into my head to go on a whaling voyage; this the invisible police officer
+ of the Fates, who has the constant surveillance of me, and secretly dogs
+ me, and influences me in some unaccountable way—he can better answer
+ than any one else. And, doubtless, my going on this whaling voyage, formed
+ part of the grand programme of Providence that was drawn up a long time
+ ago. It came in as a sort of brief interlude and solo between more
+ extensive performances. I take it that this part of the bill must have run
+ something like this:
+ </p>
+ <p>
+ "<i>Grand Contested Election for the Presidency of the United States.</i>
+ "WHALING VOYAGE BY ONE ISHMAEL. "BLOODY BATTLE IN AFFGHANISTAN."
+ </p>
+ <p>
+ Though I cannot tell why it was exactly that those stage managers, the
+ Fates, put me down for this shabby part of a whaling voyage, when others
+ were set down for magnificent parts in high tragedies, and short and easy
+ parts in genteel comedies, and jolly parts in farces—though I cannot
+ tell why this was exactly; yet, now that I recall all the circumstances, I
+ think I can see a little into the springs and motives which being
+ cunningly presented to me under various disguises, induced me to set about
+ performing the part I did, besides cajoling me into the delusion that it
+ was a choice resulting from my own unbiased freewill and discriminating
+ judgment.
+ </p>
+ <p>
+ Chief among these motives was the overwhelming idea of the great whale
+ himself. Such a portentous and mysterious monster roused all my curiosity.
+ Then the wild and distant seas where he rolled his island bulk; the
+ undeliverable, nameless perils of the whale; these, with all the attending
+ marvels of a thousand Patagonian sights and sounds, helped to sway me to
+ my wish. With other men, perhaps, such things would not have been
+ inducements; but as for me, I am tormented with an everlasting itch for
+ things remote. I love to sail forbidden seas, and land on barbarous
+ coasts. Not ignoring what is good, I am quick to perceive a horror, and
+ could still be social with it—would they let me—since it is
+ but well to be on friendly terms with all the inmates of the place one
+ lodges in.
+ </p>
+ <p>
+ By reason of these things, then, the whaling voyage was welcome; the great
+ flood-gates of the wonder-world swung open, and in the wild conceits that
+ swayed me to my purpose, two and two there floated into my inmost soul,
+ endless processions of the whale, and, mid most of them all, one grand
+ hooded phantom, like a snow hill in the air.
+ </p>
+</body>
+</html>