Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 1548 insertions, 0 deletions

diff --git a/toolkit/components/reader/AboutReader.sys.mjs b/toolkit/components/reader/AboutReader.sys.mjs
new file mode 100644
index 0000000000..e9bc0bb729
--- /dev/null
+++ b/toolkit/components/reader/AboutReader.sys.mjs
@@ -0,0 +1,1548 @@
+/* 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 { ReaderMode } from "resource://gre/modules/ReaderMode.sys.mjs";
+
+import { AppConstants } from "resource://gre/modules/AppConstants.sys.mjs";
+import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";
+
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  AsyncPrefs: "resource://gre/modules/AsyncPrefs.sys.mjs",
+  NarrateControls: "resource://gre/modules/narrate/NarrateControls.sys.mjs",
+  NimbusFeatures: "resource://nimbus/ExperimentAPI.sys.mjs",
+});
+
+XPCOMUtils.defineLazyGetter(
+  lazy,
+  "numberFormat",
+  () => new Services.intl.NumberFormat(undefined)
+);
+XPCOMUtils.defineLazyGetter(
+  lazy,
+  "pluralRules",
+  () => new Services.intl.PluralRules(undefined)
+);
+
+const COLORSCHEME_L10N_IDS = {
+  light: "about-reader-color-scheme-light",
+  dark: "about-reader-color-scheme-dark",
+  sepia: "about-reader-color-scheme-sepia",
+  auto: "about-reader-color-scheme-auto",
+};
+
+Services.telemetry.setEventRecordingEnabled("readermode", true);
+
+const zoomOnCtrl =
+  Services.prefs.getIntPref("mousewheel.with_control.action", 3) == 3;
+const zoomOnMeta =
+  Services.prefs.getIntPref("mousewheel.with_meta.action", 1) == 3;
+const isAppLocaleRTL = Services.locale.isAppLocaleRTL;
+
+export var AboutReader = function (
+  actor,
+  articlePromise,
+  docContentType = "document",
+  docTitle = ""
+) {
+  let win = actor.contentWindow;
+  let url = this._getOriginalUrl(win);
+  if (
+    !(
+      url.startsWith("http://") ||
+      url.startsWith("https://") ||
+      url.startsWith("file://")
+    )
+  ) {
+    let errorMsg =
+      "Only http://, https:// and file:// URLs can be loaded in about:reader.";
+    if (Services.prefs.getBoolPref("reader.errors.includeURLs")) {
+      errorMsg += " Tried to load: " + url + ".";
+    }
+    console.error(errorMsg);
+    win.location.href = "about:blank";
+    return;
+  }
+
+  let doc = win.document;
+  if (isAppLocaleRTL) {
+    doc.dir = "rtl";
+  }
+  doc.documentElement.setAttribute("platform", AppConstants.platform);
+
+  doc.title = docTitle;
+
+  this._actor = actor;
+  this._isLoggedInPocketUser = undefined;
+
+  this._docRef = Cu.getWeakReference(doc);
+  this._winRef = Cu.getWeakReference(win);
+  this._innerWindowId = win.windowGlobalChild.innerWindowId;
+
+  this._article = null;
+  this._languagePromise = new Promise(resolve => {
+    this._foundLanguage = resolve;
+  });
+
+  if (articlePromise) {
+    this._articlePromise = articlePromise;
+  }
+
+  this._headerElementRef = Cu.getWeakReference(
+    doc.querySelector(".reader-header")
+  );
+  this._domainElementRef = Cu.getWeakReference(
+    doc.querySelector(".reader-domain")
+  );
+  this._titleElementRef = Cu.getWeakReference(
+    doc.querySelector(".reader-title")
+  );
+  this._readTimeElementRef = Cu.getWeakReference(
+    doc.querySelector(".reader-estimated-time")
+  );
+  this._creditsElementRef = Cu.getWeakReference(
+    doc.querySelector(".reader-credits")
+  );
+  this._contentElementRef = Cu.getWeakReference(
+    doc.querySelector(".moz-reader-content")
+  );
+  this._toolbarContainerElementRef = Cu.getWeakReference(
+    doc.querySelector(".toolbar-container")
+  );
+  this._toolbarElementRef = Cu.getWeakReference(
+    doc.querySelector(".reader-controls")
+  );
+  this._messageElementRef = Cu.getWeakReference(
+    doc.querySelector(".reader-message")
+  );
+  this._containerElementRef = Cu.getWeakReference(
+    doc.querySelector(".container")
+  );
+
+  doc.addEventListener("mousedown", this);
+  doc.addEventListener("click", this);
+  doc.addEventListener("touchstart", this);
+
+  win.addEventListener("pagehide", this);
+  win.addEventListener("resize", this);
+  win.addEventListener("wheel", this, { passive: false });
+
+  this.colorSchemeMediaList = win.matchMedia("(prefers-color-scheme: dark)");
+  this.colorSchemeMediaList.addEventListener("change", this);
+
+  this.forcedColorsMediaList = win.matchMedia("(forced-colors)");
+  this.forcedColorsMediaList.addEventListener("change", this);
+
+  this._topScrollChange = this._topScrollChange.bind(this);
+  this._intersectionObs = new win.IntersectionObserver(this._topScrollChange, {
+    root: null,
+    threshold: [0, 1],
+  });
+  this._intersectionObs.observe(doc.querySelector(".top-anchor"));
+
+  this._ctaIntersectionObserver = new win.IntersectionObserver(
+    this._pocketCTAObserved.bind(this),
+    {
+      threshold: 0.5,
+    }
+  );
+
+  Services.obs.addObserver(this, "inner-window-destroyed");
+
+  this._setupButton("close-button", this._onReaderClose.bind(this));
+
+  // we're ready for any external setup, send a signal for that.
+  this._actor.sendAsyncMessage("Reader:OnSetup");
+
+  let colorSchemeValues = JSON.parse(
+    Services.prefs.getCharPref("reader.color_scheme.values")
+  );
+  let colorSchemeOptions = colorSchemeValues.map(value => ({
+    l10nId: COLORSCHEME_L10N_IDS[value],
+    groupName: "color-scheme",
+    value,
+    itemClass: value + "-button",
+  }));
+  let colorScheme = Services.prefs.getCharPref("reader.color_scheme");
+
+  this._setupSegmentedButton(
+    "color-scheme-buttons",
+    colorSchemeOptions,
+    colorScheme,
+    this._setColorSchemePref.bind(this)
+  );
+  this._setColorSchemePref(colorScheme);
+
+  let fontTypeOptions = [
+    {
+      l10nId: "about-reader-font-type-sans-serif",
+      groupName: "font-type",
+      value: "sans-serif",
+      itemClass: "sans-serif-button",
+    },
+    {
+      l10nId: "about-reader-font-type-serif",
+      groupName: "font-type",
+      value: "serif",
+      itemClass: "serif-button",
+    },
+  ];
+
+  let fontType = Services.prefs.getCharPref("reader.font_type");
+  this._setupSegmentedButton(
+    "font-type-buttons",
+    fontTypeOptions,
+    fontType,
+    this._setFontType.bind(this)
+  );
+  this._setFontType(fontType);
+
+  this._setupFontSizeButtons();
+
+  this._setupContentWidthButtons();
+
+  this._setupLineHeightButtons();
+
+  if (win.speechSynthesis && Services.prefs.getBoolPref("narrate.enabled")) {
+    new lazy.NarrateControls(win, this._languagePromise);
+  }
+
+  this._loadArticle(docContentType);
+};
+
+AboutReader.prototype = {
+  _BLOCK_IMAGES_SELECTOR:
+    ".content p > img:only-child, " +
+    ".content p > a:only-child > img:only-child, " +
+    ".content .wp-caption img, " +
+    ".content figure img",
+
+  _TABLES_SELECTOR: ".content table",
+
+  FONT_SIZE_MIN: 1,
+
+  FONT_SIZE_LEGACY_MAX: 9,
+
+  FONT_SIZE_MAX: 15,
+
+  FONT_SIZE_EXTENDED_VALUES: [32, 40, 56, 72, 96, 128],
+
+  get _doc() {
+    return this._docRef.get();
+  },
+
+  get _win() {
+    return this._winRef.get();
+  },
+
+  get _headerElement() {
+    return this._headerElementRef.get();
+  },
+
+  get _domainElement() {
+    return this._domainElementRef.get();
+  },
+
+  get _titleElement() {
+    return this._titleElementRef.get();
+  },
+
+  get _readTimeElement() {
+    return this._readTimeElementRef.get();
+  },
+
+  get _creditsElement() {
+    return this._creditsElementRef.get();
+  },
+
+  get _contentElement() {
+    return this._contentElementRef.get();
+  },
+
+  get _toolbarElement() {
+    return this._toolbarElementRef.get();
+  },
+
+  get _toolbarContainerElement() {
+    return this._toolbarContainerElementRef.get();
+  },
+
+  get _messageElement() {
+    return this._messageElementRef.get();
+  },
+
+  get _containerElement() {
+    return this._containerElementRef.get();
+  },
+
+  get _isToolbarVertical() {
+    if (this._toolbarVertical !== undefined) {
+      return this._toolbarVertical;
+    }
+    return (this._toolbarVertical = Services.prefs.getBoolPref(
+      "reader.toolbar.vertical"
+    ));
+  },
+
+  receiveMessage({ data, name }) {
+    const doc = this._doc;
+    switch (name) {
+      case "Reader:AddButton": {
+        if (data.id && data.image && !doc.getElementsByClassName(data.id)[0]) {
+          let btn = doc.createElement("button");
+          btn.dataset.buttonid = data.id;
+          btn.dataset.telemetryId = `reader-${data.telemetryId}`;
+          btn.className = "toolbar-button " + data.id;
+          btn.setAttribute("aria-labelledby", "label-" + data.id);
+          let tip = doc.createElement("span");
+          tip.className = "hover-label";
+          tip.id = "label-" + data.id;
+          doc.l10n.setAttributes(tip, data.l10nId);
+          btn.append(tip);
+          btn.style.backgroundImage = "url('" + data.image + "')";
+          if (data.width && data.height) {
+            btn.style.backgroundSize = `${data.width}px ${data.height}px`;
+          }
+          let tb = this._toolbarElement;
+          tb.appendChild(btn);
+          this._setupButton(data.id, button => {
+            this._actor.sendAsyncMessage(
+              "Reader:Clicked-" + button.dataset.buttonid,
+              { article: this._article }
+            );
+          });
+        }
+        break;
+      }
+      case "Reader:RemoveButton": {
+        if (data.id) {
+          let btn = doc.getElementsByClassName(data.id)[0];
+          if (btn) {
+            btn.remove();
+          }
+        }
+        break;
+      }
+      case "Reader:ZoomIn": {
+        this._changeFontSize(+1);
+        break;
+      }
+      case "Reader:ZoomOut": {
+        this._changeFontSize(-1);
+        break;
+      }
+      case "Reader:ResetZoom": {
+        this._resetFontSize();
+        break;
+      }
+    }
+  },
+
+  handleEvent(aEvent) {
+    if (!aEvent.isTrusted) {
+      return;
+    }
+
+    let target = aEvent.target;
+    switch (aEvent.type) {
+      case "touchstart":
+      /* fall through */
+      case "mousedown":
+        if (
+          !target.closest(".dropdown-popup") &&
+          // Skip handling the toggle button here becase
+          // the dropdown will get toggled with the 'click' event.
+          !target.classList.contains("dropdown-toggle")
+        ) {
+          this._closeDropdowns();
+        }
+        break;
+      case "click":
+        const buttonLabel =
+          target.attributes.getNamedItem(`data-telemetry-id`)?.value;
+
+        if (buttonLabel) {
+          Services.telemetry.recordEvent(
+            "readermode",
+            "button",
+            "click",
+            null,
+            {
+              label: buttonLabel,
+            }
+          );
+        }
+
+        if (target.classList.contains("dropdown-toggle")) {
+          this._toggleDropdownClicked(aEvent);
+        }
+        break;
+      case "scroll":
+        let lastHeight = this._lastHeight;
+        let { windowUtils } = this._win;
+        this._lastHeight = windowUtils.getBoundsWithoutFlushing(
+          this._doc.body
+        ).height;
+        // Only close dropdowns if the scroll events are not a result of line
+        // height / font-size changes that caused a page height change.
+        if (lastHeight == this._lastHeight) {
+          this._closeDropdowns(true);
+        }
+
+        break;
+      case "resize":
+        this._updateImageMargins();
+        this._scheduleToolbarOverlapHandler();
+        break;
+
+      case "wheel":
+        let doZoom =
+          (aEvent.ctrlKey && zoomOnCtrl) || (aEvent.metaKey && zoomOnMeta);
+        if (!doZoom) {
+          return;
+        }
+        aEvent.preventDefault();
+
+        // Throttle events to once per 150ms. This avoids excessively fast zooming.
+        if (aEvent.timeStamp <= this._zoomBackoffTime) {
+          return;
+        }
+        this._zoomBackoffTime = aEvent.timeStamp + 150;
+
+        // Determine the direction of the delta (we don't care about its size);
+        // This code is adapted from normalizeWheelEventDelta in
+        // toolkt/components/pdfjs/content/web/viewer.js
+        let delta = Math.abs(aEvent.deltaX) + Math.abs(aEvent.deltaY);
+        let angle = Math.atan2(aEvent.deltaY, aEvent.deltaX);
+        if (-0.25 * Math.PI < angle && angle < 0.75 * Math.PI) {
+          delta = -delta;
+        }
+
+        if (delta > 0) {
+          this._changeFontSize(+1);
+        } else if (delta < 0) {
+          this._changeFontSize(-1);
+        }
+        break;
+
+      case "pagehide":
+        this._closeDropdowns();
+
+        this._actor.readerModeHidden();
+        this.clearActor();
+
+        // Disconnect and delete IntersectionObservers to prevent memory leaks:
+
+        this._intersectionObs.unobserve(this._doc.querySelector(".top-anchor"));
+        this._ctaIntersectionObserver.disconnect();
+
+        delete this._intersectionObs;
+        delete this._ctaIntersectionObserver;
+
+        break;
+
+      case "change":
+        let colorScheme;
+        if (this.forcedColorsMediaList.matches) {
+          colorScheme = "hcm";
+        } else {
+          colorScheme = Services.prefs.getCharPref("reader.color_scheme");
+          // We should be changing the color scheme in relation to a preference change
+          // if the user has the color scheme preference set to "Auto".
+          if (colorScheme == "auto") {
+            colorScheme = this.colorSchemeMediaList.matches ? "dark" : "light";
+          }
+        }
+        this._setColorScheme(colorScheme);
+
+        break;
+    }
+  },
+
+  clearActor() {
+    this._actor = null;
+  },
+
+  _onReaderClose() {
+    if (this._actor) {
+      this._actor.closeReaderMode();
+    }
+  },
+
+  async _resetFontSize() {
+    await lazy.AsyncPrefs.reset("reader.font_size");
+    let currentSize = Services.prefs.getIntPref("reader.font_size");
+    this._setFontSize(currentSize);
+  },
+
+  _setFontSize(newFontSize) {
+    this._fontSize = Math.min(
+      this.FONT_SIZE_MAX,
+      Math.max(this.FONT_SIZE_MIN, newFontSize)
+    );
+    let size;
+    if (this._fontSize > this.FONT_SIZE_LEGACY_MAX) {
+      // -1 because we're indexing into a 0-indexed array, so the first value
+      // over the legacy max should be 0, the next 1, etc.
+      let index = this._fontSize - this.FONT_SIZE_LEGACY_MAX - 1;
+      size = this.FONT_SIZE_EXTENDED_VALUES[index];
+    } else {
+      size = 10 + 2 * this._fontSize;
+    }
+
+    let readerBody = this._doc.body;
+    readerBody.style.setProperty("--font-size", size + "px");
+    return lazy.AsyncPrefs.set("reader.font_size", this._fontSize);
+  },
+
+  _setupFontSizeButtons() {
+    let plusButton = this._doc.querySelector(".plus-button");
+    let minusButton = this._doc.querySelector(".minus-button");
+
+    let currentSize = Services.prefs.getIntPref("reader.font_size");
+    this._setFontSize(currentSize);
+    this._updateFontSizeButtonControls();
+
+    plusButton.addEventListener(
+      "click",
+      event => {
+        if (!event.isTrusted) {
+          return;
+        }
+        event.stopPropagation();
+        this._changeFontSize(+1);
+      },
+      true
+    );
+
+    minusButton.addEventListener(
+      "click",
+      event => {
+        if (!event.isTrusted) {
+          return;
+        }
+        event.stopPropagation();
+        this._changeFontSize(-1);
+      },
+      true
+    );
+  },
+
+  _updateFontSizeButtonControls() {
+    let plusButton = this._doc.querySelector(".plus-button");
+    let minusButton = this._doc.querySelector(".minus-button");
+
+    let currentSize = this._fontSize;
+    let fontValue = this._doc.querySelector(".font-size-value");
+    fontValue.textContent = currentSize;
+
+    if (currentSize === this.FONT_SIZE_MIN) {
+      minusButton.setAttribute("disabled", true);
+    } else {
+      minusButton.removeAttribute("disabled");
+    }
+    if (currentSize === this.FONT_SIZE_MAX) {
+      plusButton.setAttribute("disabled", true);
+    } else {
+      plusButton.removeAttribute("disabled");
+    }
+  },
+
+  _changeFontSize(changeAmount) {
+    let currentSize =
+      Services.prefs.getIntPref("reader.font_size") + changeAmount;
+    this._setFontSize(currentSize);
+    this._updateFontSizeButtonControls();
+    this._scheduleToolbarOverlapHandler();
+  },
+
+  _setContentWidth(newContentWidth) {
+    this._contentWidth = newContentWidth;
+    this._displayContentWidth(newContentWidth);
+    let width = 20 + 5 * (this._contentWidth - 1) + "em";
+    this._doc.body.style.setProperty("--content-width", width);
+    this._scheduleToolbarOverlapHandler();
+    return lazy.AsyncPrefs.set("reader.content_width", this._contentWidth);
+  },
+
+  _displayContentWidth(currentContentWidth) {
+    let contentWidthValue = this._doc.querySelector(".content-width-value");
+    contentWidthValue.textContent = currentContentWidth;
+  },
+
+  _setupContentWidthButtons() {
+    const CONTENT_WIDTH_MIN = 1;
+    const CONTENT_WIDTH_MAX = 9;
+
+    let currentContentWidth = Services.prefs.getIntPref("reader.content_width");
+    currentContentWidth = Math.max(
+      CONTENT_WIDTH_MIN,
+      Math.min(CONTENT_WIDTH_MAX, currentContentWidth)
+    );
+
+    this._displayContentWidth(currentContentWidth);
+
+    let plusButton = this._doc.querySelector(".content-width-plus-button");
+    let minusButton = this._doc.querySelector(".content-width-minus-button");
+
+    function updateControls() {
+      if (currentContentWidth === CONTENT_WIDTH_MIN) {
+        minusButton.setAttribute("disabled", true);
+      } else {
+        minusButton.removeAttribute("disabled");
+      }
+      if (currentContentWidth === CONTENT_WIDTH_MAX) {
+        plusButton.setAttribute("disabled", true);
+      } else {
+        plusButton.removeAttribute("disabled");
+      }
+    }
+
+    updateControls();
+    this._setContentWidth(currentContentWidth);
+
+    plusButton.addEventListener(
+      "click",
+      event => {
+        if (!event.isTrusted) {
+          return;
+        }
+        event.stopPropagation();
+
+        if (currentContentWidth >= CONTENT_WIDTH_MAX) {
+          return;
+        }
+
+        currentContentWidth++;
+        updateControls();
+        this._setContentWidth(currentContentWidth);
+      },
+      true
+    );
+
+    minusButton.addEventListener(
+      "click",
+      event => {
+        if (!event.isTrusted) {
+          return;
+        }
+        event.stopPropagation();
+
+        if (currentContentWidth <= CONTENT_WIDTH_MIN) {
+          return;
+        }
+
+        currentContentWidth--;
+        updateControls();
+        this._setContentWidth(currentContentWidth);
+      },
+      true
+    );
+  },
+
+  _setLineHeight(newLineHeight) {
+    this._displayLineHeight(newLineHeight);
+    let height = 1 + 0.2 * (newLineHeight - 1) + "em";
+    this._containerElement.style.setProperty("--line-height", height);
+    return lazy.AsyncPrefs.set("reader.line_height", newLineHeight);
+  },
+
+  _displayLineHeight(currentLineHeight) {
+    let lineHeightValue = this._doc.querySelector(".line-height-value");
+    lineHeightValue.textContent = currentLineHeight;
+  },
+
+  _setupLineHeightButtons() {
+    const LINE_HEIGHT_MIN = 1;
+    const LINE_HEIGHT_MAX = 9;
+
+    let currentLineHeight = Services.prefs.getIntPref("reader.line_height");
+    currentLineHeight = Math.max(
+      LINE_HEIGHT_MIN,
+      Math.min(LINE_HEIGHT_MAX, currentLineHeight)
+    );
+
+    this._displayLineHeight(currentLineHeight);
+
+    let plusButton = this._doc.querySelector(".line-height-plus-button");
+    let minusButton = this._doc.querySelector(".line-height-minus-button");
+
+    function updateControls() {
+      if (currentLineHeight === LINE_HEIGHT_MIN) {
+        minusButton.setAttribute("disabled", true);
+      } else {
+        minusButton.removeAttribute("disabled");
+      }
+      if (currentLineHeight === LINE_HEIGHT_MAX) {
+        plusButton.setAttribute("disabled", true);
+      } else {
+        plusButton.removeAttribute("disabled");
+      }
+    }
+
+    updateControls();
+    this._setLineHeight(currentLineHeight);
+
+    plusButton.addEventListener(
+      "click",
+      event => {
+        if (!event.isTrusted) {
+          return;
+        }
+        event.stopPropagation();
+
+        if (currentLineHeight >= LINE_HEIGHT_MAX) {
+          return;
+        }
+
+        currentLineHeight++;
+        updateControls();
+        this._setLineHeight(currentLineHeight);
+      },
+      true
+    );
+
+    minusButton.addEventListener(
+      "click",
+      event => {
+        if (!event.isTrusted) {
+          return;
+        }
+        event.stopPropagation();
+
+        if (currentLineHeight <= LINE_HEIGHT_MIN) {
+          return;
+        }
+
+        currentLineHeight--;
+        updateControls();
+        this._setLineHeight(currentLineHeight);
+      },
+      true
+    );
+  },
+
+  _setColorScheme(newColorScheme) {
+    // There's nothing to change if the new color scheme is the same as our current scheme.
+    if (this._colorScheme === newColorScheme) {
+      return;
+    }
+
+    let bodyClasses = this._doc.body.classList;
+
+    if (this._colorScheme) {
+      bodyClasses.remove(this._colorScheme);
+    }
+
+    if (!this._win.matchMedia("(forced-colors)").matches) {
+      if (newColorScheme === "auto") {
+        this._colorScheme = this.colorSchemeMediaList.matches
+          ? "dark"
+          : "light";
+      } else {
+        this._colorScheme = newColorScheme;
+      }
+    } else {
+      this._colorScheme = "hcm";
+    }
+
+    bodyClasses.add(this._colorScheme);
+  },
+
+  // Pref values include "dark", "light", "sepia", and "auto"
+  _setColorSchemePref(colorSchemePref) {
+    this._setColorScheme(colorSchemePref);
+
+    lazy.AsyncPrefs.set("reader.color_scheme", colorSchemePref);
+  },
+
+  _setFontType(newFontType) {
+    if (this._fontType === newFontType) {
+      return;
+    }
+
+    let bodyClasses = this._doc.body.classList;
+
+    if (this._fontType) {
+      bodyClasses.remove(this._fontType);
+    }
+
+    this._fontType = newFontType;
+    bodyClasses.add(this._fontType);
+
+    lazy.AsyncPrefs.set("reader.font_type", this._fontType);
+  },
+
+  async _loadArticle(docContentType = "document") {
+    let url = this._getOriginalUrl();
+    this._showProgressDelayed();
+
+    let article;
+    if (this._articlePromise) {
+      article = await this._articlePromise;
+    }
+
+    if (!article) {
+      try {
+        article = await ReaderMode.downloadAndParseDocument(
+          url,
+          docContentType
+        );
+      } catch (e) {
+        if (e?.newURL && this._actor) {
+          await this._actor.sendQuery("RedirectTo", {
+            newURL: e.newURL,
+            article: e.article,
+          });
+
+          let readerURL = "about:reader?url=" + encodeURIComponent(e.newURL);
+          this._win.location.replace(readerURL);
+          return;
+        }
+      }
+    }
+
+    if (!this._actor) {
+      return;
+    }
+
+    // Replace the loading message with an error message if there's a failure.
+    // Users are supposed to navigate away by themselves (because we cannot
+    // remove ourselves from session history.)
+    if (!article) {
+      this._showError();
+      return;
+    }
+
+    this._showContent(article);
+  },
+
+  async _requestPocketLoginStatus() {
+    let isLoggedIn = await this._actor.sendQuery(
+      "Reader:PocketLoginStatusRequest"
+    );
+
+    return isLoggedIn;
+  },
+
+  async _requestPocketArticleInfo(url) {
+    let articleInfo = await this._actor.sendQuery(
+      "Reader:PocketGetArticleInfo",
+      {
+        url,
+      }
+    );
+
+    return articleInfo?.item_preview?.item_id;
+  },
+
+  async _requestPocketArticleRecs(itemID) {
+    let recs = await this._actor.sendQuery("Reader:PocketGetArticleRecs", {
+      itemID,
+    });
+
+    return recs;
+  },
+
+  async _savePocketArticle(url) {
+    let result = await this._actor.sendQuery("Reader:PocketSaveArticle", {
+      url,
+    });
+
+    return result;
+  },
+
+  async _requestFavicon() {
+    let iconDetails = await this._actor.sendQuery("Reader:FaviconRequest", {
+      url: this._article.url,
+      preferredWidth: 16 * this._win.devicePixelRatio,
+    });
+
+    if (iconDetails) {
+      this._loadFavicon(iconDetails.url, iconDetails.faviconUrl);
+    }
+  },
+
+  _loadFavicon(url, faviconUrl) {
+    if (this._article.url !== url) {
+      return;
+    }
+
+    let doc = this._doc;
+
+    let link = doc.createElement("link");
+    link.rel = "shortcut icon";
+    link.href = faviconUrl;
+
+    doc.getElementsByTagName("head")[0].appendChild(link);
+  },
+
+  _updateImageMargins() {
+    let windowWidth = this._win.innerWidth;
+    let bodyWidth = this._doc.body.clientWidth;
+
+    let setImageMargins = function (img) {
+      img.classList.add("moz-reader-block-img");
+
+      // If the image is at least as wide as the window, make it fill edge-to-edge on mobile.
+      if (img.naturalWidth >= windowWidth) {
+        img.setAttribute("moz-reader-full-width", true);
+      } else {
+        img.removeAttribute("moz-reader-full-width");
+      }
+
+      // If the image is at least half as wide as the body, center it on desktop.
+      if (img.naturalWidth >= bodyWidth / 2) {
+        img.setAttribute("moz-reader-center", true);
+      } else {
+        img.removeAttribute("moz-reader-center");
+      }
+    };
+
+    let imgs = this._doc.querySelectorAll(this._BLOCK_IMAGES_SELECTOR);
+    for (let i = imgs.length; --i >= 0; ) {
+      let img = imgs[i];
+
+      if (img.naturalWidth > 0) {
+        setImageMargins(img);
+      } else {
+        img.onload = function () {
+          setImageMargins(img);
+        };
+      }
+    }
+  },
+
+  _updateWideTables() {
+    let windowWidth = this._win.innerWidth;
+
+    // Avoid horizontal overflow in the document by making tables that are wider than half browser window's size
+    // by making it scrollable.
+    let tables = this._doc.querySelectorAll(this._TABLES_SELECTOR);
+    for (let i = tables.length; --i >= 0; ) {
+      let table = tables[i];
+      let rect = table.getBoundingClientRect();
+      let tableWidth = rect.width;
+
+      if (windowWidth / 2 <= tableWidth) {
+        table.classList.add("moz-reader-wide-table");
+      }
+    }
+  },
+
+  _maybeSetTextDirection: function Read_maybeSetTextDirection(article) {
+    // Set the article's "dir" on the contents.
+    // If no direction is specified, the contents should automatically be LTR
+    // regardless of the UI direction to avoid inheriting the parent's direction
+    // if the UI is RTL.
+    this._containerElement.dir = article.dir || "ltr";
+
+    // The native locale could be set differently than the article's text direction.
+    this._readTimeElement.dir = isAppLocaleRTL ? "rtl" : "ltr";
+
+    // This is used to mirror the line height buttons in the toolbar, when relevant.
+    this._toolbarElement.setAttribute("articledir", article.dir || "ltr");
+  },
+
+  _showError() {
+    this._headerElement.classList.remove("reader-show-element");
+    this._contentElement.classList.remove("reader-show-element");
+
+    this._doc.l10n.setAttributes(
+      this._messageElement,
+      "about-reader-load-error"
+    );
+    this._doc.l10n.setAttributes(
+      this._doc.getElementById("reader-title"),
+      "about-reader-load-error"
+    );
+    this._messageElement.style.display = "block";
+
+    this._doc.documentElement.dataset.isError = true;
+
+    this._error = true;
+
+    this._doc.dispatchEvent(
+      new this._win.CustomEvent("AboutReaderContentError", {
+        bubbles: true,
+        cancelable: false,
+      })
+    );
+  },
+
+  // This function is the JS version of Java's StringUtils.stripCommonSubdomains.
+  _stripHost(host) {
+    if (!host) {
+      return host;
+    }
+
+    let start = 0;
+
+    if (host.startsWith("www.")) {
+      start = 4;
+    } else if (host.startsWith("m.")) {
+      start = 2;
+    } else if (host.startsWith("mobile.")) {
+      start = 7;
+    }
+
+    return host.substring(start);
+  },
+
+  _showContent(article) {
+    this._messageElement.classList.remove("reader-show-element");
+
+    this._article = article;
+
+    this._domainElement.href = article.url;
+    let articleUri = Services.io.newURI(article.url);
+
+    try {
+      this._domainElement.textContent = this._stripHost(articleUri.host);
+    } catch (ex) {
+      let url = this._actor.document.URL;
+      url = url.substring(url.indexOf("%2F") + 6);
+      url = url.substring(0, url.indexOf("%2F"));
+
+      this._domainElement.textContent = url;
+    }
+
+    this._creditsElement.textContent = article.byline;
+
+    this._titleElement.textContent = article.title;
+
+    // TODO: Once formatRange() and selectRange() are available outside Nightly,
+    // use them here. https://bugzilla.mozilla.org/show_bug.cgi?id=1795317
+    const slow = article.readingTimeMinsSlow;
+    const fast = article.readingTimeMinsFast;
+    const fastStr = lazy.numberFormat.format(fast);
+    const slowStr = lazy.numberFormat.format(slow);
+    this._doc.l10n.setAttributes(
+      this._readTimeElement,
+      "about-reader-estimated-read-time",
+      {
+        range: fastStr === slowStr ? `~${fastStr}` : `${fastStr}–${slowStr}`,
+        rangePlural: lazy.pluralRules.select(slow),
+      }
+    );
+
+    // If a document title was not provided in the constructor, we'll fall back
+    // to using the article title.
+    if (!this._doc.title) {
+      this._doc.title = article.title;
+    }
+
+    this._containerElement.setAttribute("lang", article.lang);
+
+    this._headerElement.classList.add("reader-show-element");
+
+    let parserUtils = Cc["@mozilla.org/parserutils;1"].getService(
+      Ci.nsIParserUtils
+    );
+    let contentFragment = parserUtils.parseFragment(
+      article.content,
+      Ci.nsIParserUtils.SanitizerDropForms |
+        Ci.nsIParserUtils.SanitizerAllowStyle,
+      false,
+      articleUri,
+      this._contentElement
+    );
+    this._contentElement.innerHTML = "";
+    this._contentElement.appendChild(contentFragment);
+    this._maybeSetTextDirection(article);
+    this._foundLanguage(article.language);
+
+    this._contentElement.classList.add("reader-show-element");
+    this._updateImageMargins();
+    this._updateWideTables();
+
+    this._requestFavicon();
+    this._doc.body.classList.add("loaded");
+
+    this._goToReference(articleUri.ref);
+
+    Services.obs.notifyObservers(this._win, "AboutReader:Ready");
+
+    this._doc.dispatchEvent(
+      new this._win.CustomEvent("AboutReaderContentReady", {
+        bubbles: true,
+        cancelable: false,
+      })
+    );
+
+    // Show Pocket CTA block after article has loaded to prevent it flashing in prematurely
+    this._setupPocketCTA();
+  },
+
+  _hideContent() {
+    this._headerElement.classList.remove("reader-show-element");
+    this._contentElement.classList.remove("reader-show-element");
+  },
+
+  _showProgressDelayed() {
+    this._win.setTimeout(() => {
+      // No need to show progress if the article has been loaded,
+      // if the window has been unloaded, or if there was an error
+      // trying to load the article.
+      if (this._article || !this._actor || this._error) {
+        return;
+      }
+
+      this._headerElement.classList.remove("reader-show-element");
+      this._contentElement.classList.remove("reader-show-element");
+
+      this._doc.l10n.setAttributes(
+        this._messageElement,
+        "about-reader-loading"
+      );
+      this._messageElement.classList.add("reader-show-element");
+    }, 300);
+  },
+
+  /**
+   * Returns the original article URL for this about:reader view.
+   */
+  _getOriginalUrl(win) {
+    let url = win ? win.location.href : this._win.location.href;
+    return ReaderMode.getOriginalUrl(url) || url;
+  },
+
+  _setupSegmentedButton(id, options, initialValue, callback) {
+    let doc = this._doc;
+    let segmentedButton = doc.getElementsByClassName(id)[0];
+
+    for (let option of options) {
+      let radioButton = doc.createElement("input");
+      radioButton.id = "radio-item" + option.itemClass;
+      radioButton.type = "radio";
+      radioButton.classList.add("radio-button");
+      radioButton.name = option.groupName;
+      segmentedButton.appendChild(radioButton);
+
+      let item = doc.createElement("label");
+      item.htmlFor = radioButton.id;
+      item.classList.add(option.itemClass);
+      doc.l10n.setAttributes(item, option.l10nId);
+
+      segmentedButton.appendChild(item);
+
+      radioButton.addEventListener(
+        "input",
+        function (aEvent) {
+          if (!aEvent.isTrusted) {
+            return;
+          }
+
+          let labels = segmentedButton.children;
+          for (let label of labels) {
+            label.removeAttribute("checked");
+          }
+
+          aEvent.target.nextElementSibling.setAttribute("checked", "true");
+          callback(option.value);
+        },
+        true
+      );
+
+      if (option.value === initialValue) {
+        radioButton.checked = true;
+        item.setAttribute("checked", "true");
+      }
+    }
+  },
+
+  _setupButton(id, callback) {
+    let button = this._doc.querySelector("." + id);
+    button.removeAttribute("hidden");
+    button.addEventListener(
+      "click",
+      function (aEvent) {
+        if (!aEvent.isTrusted) {
+          return;
+        }
+
+        let btn = aEvent.target;
+        callback(btn);
+      },
+      true
+    );
+  },
+
+  _toggleDropdownClicked(event) {
+    let dropdown = event.target.closest(".dropdown");
+
+    if (!dropdown) {
+      return;
+    }
+
+    event.stopPropagation();
+
+    if (dropdown.classList.contains("open")) {
+      this._closeDropdowns();
+    } else {
+      this._openDropdown(dropdown);
+    }
+  },
+
+  /*
+   * If the ReaderView banner font-dropdown is closed, open it.
+   */
+  _openDropdown(dropdown, window) {
+    if (dropdown.classList.contains("open")) {
+      return;
+    }
+
+    this._closeDropdowns();
+
+    // Get the height of the doc and start handling scrolling:
+    let { windowUtils } = this._win;
+    this._lastHeight = windowUtils.getBoundsWithoutFlushing(
+      this._doc.body
+    ).height;
+    this._doc.addEventListener("scroll", this);
+
+    dropdown.classList.add("open");
+    this._toolbarElement.classList.add("dropdown-open");
+
+    this._toolbarContainerElement.classList.add("dropdown-open");
+    this._toggleToolbarFixedPosition(true);
+  },
+
+  /*
+   * If the ReaderView has open dropdowns, close them. If we are closing the
+   * dropdowns because the page is scrolling, allow popups to stay open with
+   * the keep-open class.
+   */
+  _closeDropdowns(scrolling) {
+    let selector = ".dropdown.open";
+    if (scrolling) {
+      selector += ":not(.keep-open)";
+    }
+
+    let openDropdowns = this._doc.querySelectorAll(selector);
+    let haveOpenDropdowns = openDropdowns.length;
+    for (let dropdown of openDropdowns) {
+      dropdown.classList.remove("open");
+    }
+    this._toolbarElement.classList.remove("dropdown-open");
+
+    if (haveOpenDropdowns) {
+      this._toolbarContainerElement.classList.remove("dropdown-open");
+      this._toggleToolbarFixedPosition(false);
+    }
+
+    // Stop handling scrolling:
+    this._doc.removeEventListener("scroll", this);
+  },
+
+  _toggleToolbarFixedPosition(shouldBeFixed) {
+    let el = this._toolbarContainerElement;
+    let fontSize = this._doc.body.style.getPropertyValue("--font-size");
+    let contentWidth = this._doc.body.style.getPropertyValue("--content-width");
+    if (shouldBeFixed) {
+      el.style.setProperty("--font-size", fontSize);
+      el.style.setProperty("--content-width", contentWidth);
+      el.classList.add("transition-location");
+    } else {
+      let expectTransition =
+        el.style.getPropertyValue("--font-size") != fontSize ||
+        el.style.getPropertyValue("--content-width") != contentWidth;
+      if (expectTransition) {
+        el.addEventListener(
+          "transitionend",
+          () => el.classList.remove("transition-location"),
+          { once: true }
+        );
+      } else {
+        el.classList.remove("transition-location");
+      }
+      el.style.removeProperty("--font-size");
+      el.style.removeProperty("--content-width");
+      el.classList.remove("overlaps");
+    }
+  },
+
+  _scheduleToolbarOverlapHandler() {
+    if (this._enqueuedToolbarOverlapHandler) {
+      return;
+    }
+    this._enqueuedToolbarOverlapHandler = this._win.requestAnimationFrame(
+      () => {
+        this._win.setTimeout(() => this._toolbarOverlapHandler(), 0);
+      }
+    );
+  },
+
+  _toolbarOverlapHandler() {
+    delete this._enqueuedToolbarOverlapHandler;
+    // Ensure the dropdown is still open to avoid racing with that changing.
+    if (this._toolbarContainerElement.classList.contains("dropdown-open")) {
+      let { windowUtils } = this._win;
+      let toolbarBounds = windowUtils.getBoundsWithoutFlushing(
+        this._toolbarElement.parentNode
+      );
+      let textBounds = windowUtils.getBoundsWithoutFlushing(
+        this._containerElement
+      );
+      let overlaps = false;
+      if (isAppLocaleRTL) {
+        overlaps = textBounds.right > toolbarBounds.left;
+      } else {
+        overlaps = textBounds.left < toolbarBounds.right;
+      }
+      this._toolbarContainerElement.classList.toggle("overlaps", overlaps);
+    }
+  },
+
+  _topScrollChange(entries) {
+    if (!entries.length) {
+      return;
+    }
+    // If we don't intersect the item at the top of the document, we're
+    // scrolled down:
+    let scrolled = !entries[entries.length - 1].isIntersecting;
+    let tbc = this._toolbarContainerElement;
+    tbc.classList.toggle("scrolled", scrolled);
+  },
+
+  /*
+   * Scroll reader view to a reference
+   */
+  _goToReference(ref) {
+    if (ref) {
+      if (this._doc.readyState == "complete") {
+        this._win.location.hash = ref;
+      } else {
+        this._win.addEventListener(
+          "load",
+          () => {
+            this._win.location.hash = ref;
+          },
+          { once: true }
+        );
+      }
+    }
+  },
+
+  _enableDismissCTA() {
+    let elDismissCta = this._doc.querySelector(`.pocket-dismiss-cta`);
+
+    elDismissCta?.addEventListener(`click`, e => {
+      this._doc.querySelector("#pocket-cta-container").hidden = true;
+
+      Services.telemetry.recordEvent(
+        "readermode",
+        "pocket_cta",
+        "close_cta",
+        null,
+        {}
+      );
+    });
+  },
+
+  _enableRecShowHide() {
+    let elPocketRecs = this._doc.querySelector(`.pocket-recs`);
+    let elCollapseRecs = this._doc.querySelector(`.pocket-collapse-recs`);
+    let elSignUp = this._doc.querySelector(`div.pocket-sign-up-wrapper`);
+
+    let toggleRecsVisibility = () => {
+      let isClosed = elPocketRecs.classList.contains(`closed`);
+
+      isClosed = !isClosed; // Toggle
+
+      if (isClosed) {
+        elPocketRecs.classList.add(`closed`);
+        elCollapseRecs.classList.add(`closed`);
+        elSignUp.setAttribute(`hidden`, true);
+
+        Services.telemetry.recordEvent(
+          "readermode",
+          "pocket_cta",
+          "minimize_recs_click",
+          null,
+          {}
+        );
+      } else {
+        elPocketRecs.classList.remove(`closed`);
+        elCollapseRecs.classList.remove(`closed`);
+        elSignUp.removeAttribute(`hidden`);
+      }
+    };
+
+    elCollapseRecs?.addEventListener(`click`, e => {
+      toggleRecsVisibility();
+    });
+  },
+
+  _buildPocketRec(title, url, publisher, thumb, time) {
+    let fragment = this._doc.createDocumentFragment();
+
+    let elContainer = this._doc.createElement(`div`);
+    let elTitle = this._doc.createElement(`header`);
+    let elMetadata = this._doc.createElement(`p`);
+    let elThumb = this._doc.createElement(`img`);
+    let elSideWrap = this._doc.createElement(`div`);
+    let elTop = this._doc.createElement(`a`);
+    let elBottom = this._doc.createElement(`div`);
+    let elAdd = this._doc.createElement(`button`);
+
+    elAdd.classList.add(`pocket-btn-add`);
+    elBottom.classList.add(`pocket-rec-bottom`);
+    elTop.classList.add(`pocket-rec-top`);
+    elSideWrap.classList.add(`pocket-rec-side`);
+    elContainer.classList.add(`pocket-rec`);
+    elTitle.classList.add(`pocket-rec-title`);
+    elMetadata.classList.add(`pocket-rec-meta`);
+
+    elTop.setAttribute(`href`, url);
+
+    elTop.addEventListener(`click`, e => {
+      Services.telemetry.recordEvent(
+        "readermode",
+        "pocket_cta",
+        "rec_click",
+        null,
+        {}
+      );
+    });
+
+    elThumb.classList.add(`pocket-rec-thumb`);
+    elThumb.setAttribute(`loading`, `lazy`);
+    elThumb.addEventListener(`load`, () => {
+      elThumb.classList.add(`pocket-rec-thumb-loaded`);
+    });
+    elThumb.setAttribute(
+      `src`,
+      `https://img-getpocket.cdn.mozilla.net/132x132/filters:format(jpeg):quality(60):no_upscale():strip_exif()/${thumb}`
+    );
+
+    elAdd.textContent = `Save`;
+    elTitle.textContent = title;
+
+    if (publisher && time) {
+      elMetadata.textContent = `${publisher} · ${time} min`;
+    } else if (publisher) {
+      elMetadata.textContent = `${publisher}`;
+    } else if (time) {
+      elMetadata.textContent = `${time} min`;
+    }
+
+    elSideWrap.appendChild(elTitle);
+    elSideWrap.appendChild(elMetadata);
+    elTop.appendChild(elSideWrap);
+    elTop.appendChild(elThumb);
+    elBottom.appendChild(elAdd);
+    elContainer.appendChild(elTop);
+    elContainer.appendChild(elBottom);
+    fragment.appendChild(elContainer);
+
+    elAdd.addEventListener(`click`, e => {
+      this._savePocketArticle(url);
+      elAdd.textContent = `Saved`;
+      elAdd.classList.add(`saved`);
+
+      Services.telemetry.recordEvent(
+        "readermode",
+        "pocket_cta",
+        "rec_saved",
+        null,
+        {}
+      );
+    });
+
+    return fragment;
+  },
+
+  async _getAndBuildPocketRecs() {
+    let elTarget = this._doc.querySelector(`.pocket-recs`);
+    let url = this._getOriginalUrl();
+    let itemID = await this._requestPocketArticleInfo(url);
+    let articleRecs = await this._requestPocketArticleRecs(itemID);
+
+    articleRecs.recommendations.forEach(rec => {
+      // Parse a domain from the article URL in case the Publisher name isn't available
+      let parsedDomain = new URL(rec.item?.normal_url)?.hostname;
+
+      // Calculate read time from word count in case it's not available
+      let calculatedReadTime = Math.ceil(rec.item?.word_count / 220);
+
+      let elRec = this._buildPocketRec(
+        rec.item?.title,
+        rec.item?.normal_url,
+        rec.item?.domain_metadata?.name || parsedDomain,
+        rec.item?.top_image_url,
+        rec.item?.time_to_read || calculatedReadTime
+      );
+
+      elTarget.appendChild(elRec);
+    });
+  },
+
+  _pocketCTAObserved(entries) {
+    if (entries && entries[0]?.isIntersecting) {
+      this._ctaIntersectionObserver.disconnect();
+
+      Services.telemetry.recordEvent(
+        "readermode",
+        "pocket_cta",
+        "cta_seen",
+        null,
+        {
+          logged_in: `${this._isLoggedInPocketUser}`,
+        }
+      );
+    }
+  },
+
+  async _setupPocketCTA() {
+    let ctaVersion =
+      lazy.NimbusFeatures.readerMode.getAllVariables()?.pocketCTAVersion;
+    this._isLoggedInPocketUser = await this._requestPocketLoginStatus();
+    let elPocketCTAWrapper = this._doc.querySelector("#pocket-cta-container");
+
+    // Show the Pocket CTA container if the pref is set and valid
+    if (ctaVersion === `cta-and-recs` || ctaVersion === `cta-only`) {
+      if (ctaVersion === `cta-and-recs` && this._isLoggedInPocketUser) {
+        this._getAndBuildPocketRecs();
+        this._enableRecShowHide();
+      } else if (ctaVersion === `cta-and-recs` && !this._isLoggedInPocketUser) {
+        // Fall back to cta only for logged out users:
+        ctaVersion = `cta-only`;
+      }
+
+      if (ctaVersion == `cta-only`) {
+        this._enableDismissCTA();
+      }
+
+      elPocketCTAWrapper.hidden = false;
+      elPocketCTAWrapper.classList.add(`pocket-cta-container-${ctaVersion}`);
+      elPocketCTAWrapper.classList.add(
+        `pocket-cta-container-${
+          this._isLoggedInPocketUser ? `logged-in` : `logged-out`
+        }`
+      );
+
+      // Set up tracking for sign up buttons
+      this._doc
+        .querySelectorAll(`.pocket-sign-up, .pocket-discover-more`)
+        .forEach(el => {
+          el.addEventListener(`click`, e => {
+            Services.telemetry.recordEvent(
+              "readermode",
+              "pocket_cta",
+              "sign_up_click",
+              null,
+              {}
+            );
+          });
+        });
+
+      // Set up tracking for user seeing CTA
+      this._ctaIntersectionObserver.observe(
+        this._doc.querySelector(`#pocket-cta-container`)
+      );
+    }
+  },
+};