Add m-esr52 at 52.6.0

1 files changed, 997 insertions, 0 deletions

diff --git a/toolkit/components/reader/AboutReader.jsm b/toolkit/components/reader/AboutReader.jsm
new file mode 100644
index 000000000..1fb9db123
--- /dev/null
+++ b/toolkit/components/reader/AboutReader.jsm
@@ -0,0 +1,997 @@
+/* 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";
+
+var Ci = Components.interfaces, Cc = Components.classes, Cu = Components.utils;
+
+this.EXPORTED_SYMBOLS = [ "AboutReader" ];
+
+Cu.import("resource://gre/modules/ReaderMode.jsm");
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "AsyncPrefs", "resource://gre/modules/AsyncPrefs.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "NarrateControls", "resource://gre/modules/narrate/NarrateControls.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "Rect", "resource://gre/modules/Geometry.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "Task", "resource://gre/modules/Task.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "UITelemetry", "resource://gre/modules/UITelemetry.jsm");
+
+var gStrings = Services.strings.createBundle("chrome://global/locale/aboutReader.properties");
+
+var AboutReader = function(mm, win, articlePromise) {
+  let url = this._getOriginalUrl(win);
+  if (!(url.startsWith("http://") || url.startsWith("https://"))) {
+    let errorMsg = "Only http:// and https:// URLs can be loaded in about:reader.";
+    if (Services.prefs.getBoolPref("reader.errors.includeURLs"))
+      errorMsg += " Tried to load: " + url + ".";
+    Cu.reportError(errorMsg);
+    win.location.href = "about:blank";
+    return;
+  }
+
+  let doc = win.document;
+
+  this._mm = mm;
+  this._mm.addMessageListener("Reader:CloseDropdown", this);
+  this._mm.addMessageListener("Reader:AddButton", this);
+  this._mm.addMessageListener("Reader:RemoveButton", this);
+  this._mm.addMessageListener("Reader:GetStoredArticleData", this);
+
+  this._docRef = Cu.getWeakReference(doc);
+  this._winRef = Cu.getWeakReference(win);
+  this._innerWindowId = win.QueryInterface(Ci.nsIInterfaceRequestor)
+    .getInterface(Ci.nsIDOMWindowUtils).currentInnerWindowID;
+
+  this._article = null;
+
+  if (articlePromise) {
+    this._articlePromise = articlePromise;
+  }
+
+  this._headerElementRef = Cu.getWeakReference(doc.getElementById("reader-header"));
+  this._domainElementRef = Cu.getWeakReference(doc.getElementById("reader-domain"));
+  this._titleElementRef = Cu.getWeakReference(doc.getElementById("reader-title"));
+  this._creditsElementRef = Cu.getWeakReference(doc.getElementById("reader-credits"));
+  this._contentElementRef = Cu.getWeakReference(doc.getElementById("moz-reader-content"));
+  this._toolbarElementRef = Cu.getWeakReference(doc.getElementById("reader-toolbar"));
+  this._messageElementRef = Cu.getWeakReference(doc.getElementById("reader-message"));
+
+  this._scrollOffset = win.pageYOffset;
+
+  doc.addEventListener("click", this, false);
+
+  win.addEventListener("pagehide", this, false);
+  win.addEventListener("scroll", this, false);
+  win.addEventListener("resize", this, false);
+
+  Services.obs.addObserver(this, "inner-window-destroyed", false);
+
+  doc.addEventListener("visibilitychange", this, false);
+
+  this._setupStyleDropdown();
+  this._setupButton("close-button", this._onReaderClose.bind(this), "aboutReader.toolbar.close");
+
+  const gIsFirefoxDesktop = Services.appinfo.ID == "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}";
+  if (gIsFirefoxDesktop) {
+    // we're ready for any external setup, send a signal for that.
+    this._mm.sendAsyncMessage("Reader:OnSetup");
+  }
+
+  let colorSchemeValues = JSON.parse(Services.prefs.getCharPref("reader.color_scheme.values"));
+  let colorSchemeOptions = colorSchemeValues.map((value) => {
+    return { name: gStrings.GetStringFromName("aboutReader.colorScheme." + value),
+             value: 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 fontTypeSample = gStrings.GetStringFromName("aboutReader.fontTypeSample");
+  let fontTypeOptions = [
+    { name: fontTypeSample,
+      description: gStrings.GetStringFromName("aboutReader.fontType.sans-serif"),
+      value: "sans-serif",
+      itemClass: "sans-serif-button"
+    },
+    { name: fontTypeSample,
+      description: gStrings.GetStringFromName("aboutReader.fontType.serif"),
+      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 NarrateControls(mm, win);
+  }
+
+  this._loadArticle();
+};
+
+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",
+
+  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 _creditsElement() {
+    return this._creditsElementRef.get();
+  },
+
+  get _contentElement() {
+    return this._contentElementRef.get();
+  },
+
+  get _toolbarElement() {
+    return this._toolbarElementRef.get();
+  },
+
+  get _messageElement() {
+    return this._messageElementRef.get();
+  },
+
+  get _isToolbarVertical() {
+    if (this._toolbarVertical !== undefined) {
+      return this._toolbarVertical;
+    }
+    return this._toolbarVertical = Services.prefs.getBoolPref("reader.toolbar.vertical");
+  },
+
+  // Provides unique view Id.
+  get viewId() {
+    let _viewId = Cc["@mozilla.org/uuid-generator;1"].
+      getService(Ci.nsIUUIDGenerator).generateUUID().toString();
+    Object.defineProperty(this, "viewId", { value: _viewId });
+
+    return _viewId;
+  },
+
+  receiveMessage: function (message) {
+    switch (message.name) {
+      // Triggered by Android user pressing BACK while the banner font-dropdown is open.
+      case "Reader:CloseDropdown": {
+        // Just close it.
+        this._closeDropdowns();
+        break;
+      }
+
+      case "Reader:AddButton": {
+        if (message.data.id && message.data.image &&
+            !this._doc.getElementById(message.data.id)) {
+          let btn = this._doc.createElement("button");
+          btn.setAttribute("class", "button");
+          btn.setAttribute("style", "background-image: url('" + message.data.image + "')");
+          btn.setAttribute("id", message.data.id);
+          if (message.data.title)
+            btn.setAttribute("title", message.data.title);
+          if (message.data.text)
+            btn.textContent = message.data.text;
+          let tb = this._doc.getElementById("reader-toolbar");
+          tb.appendChild(btn);
+          this._setupButton(message.data.id, button => {
+            this._mm.sendAsyncMessage("Reader:Clicked-" + button.getAttribute("id"), { article: this._article });
+          });
+        }
+        break;
+      }
+      case "Reader:RemoveButton": {
+        if (message.data.id) {
+          let btn = this._doc.getElementById(message.data.id);
+          if (btn)
+            btn.remove();
+        }
+        break;
+      }
+      case "Reader:GetStoredArticleData": {
+        this._mm.sendAsyncMessage("Reader:StoredArticleData", { article: this._article });
+      }
+    }
+  },
+
+  handleEvent: function(aEvent) {
+    if (!aEvent.isTrusted)
+      return;
+
+    switch (aEvent.type) {
+      case "click":
+        let target = aEvent.target;
+        if (target.classList.contains('dropdown-toggle')) {
+          this._toggleDropdownClicked(aEvent);
+        } else if (!target.closest('.dropdown-popup')) {
+          this._closeDropdowns();
+        }
+        break;
+      case "scroll":
+        this._closeDropdowns(true);
+        let isScrollingUp = this._scrollOffset > aEvent.pageY;
+        this._setSystemUIVisibility(isScrollingUp);
+        this._scrollOffset = aEvent.pageY;
+        break;
+      case "resize":
+        this._updateImageMargins();
+        if (this._isToolbarVertical) {
+          this._win.setTimeout(() => {
+            for (let dropdown of this._doc.querySelectorAll('.dropdown.open')) {
+              this._updatePopupPosition(dropdown);
+            }
+          }, 0);
+        }
+        break;
+
+      case "devicelight":
+        this._handleDeviceLight(aEvent.value);
+        break;
+
+      case "visibilitychange":
+        this._handleVisibilityChange();
+        break;
+
+      case "pagehide":
+        // Close the Banners Font-dropdown, cleanup Android BackPressListener.
+        this._closeDropdowns();
+
+        this._mm.removeMessageListener("Reader:CloseDropdown", this);
+        this._mm.removeMessageListener("Reader:AddButton", this);
+        this._mm.removeMessageListener("Reader:RemoveButton", this);
+        this._mm.removeMessageListener("Reader:GetStoredArticleData", this);
+        this._windowUnloaded = true;
+        break;
+    }
+  },
+
+  observe: function(subject, topic, data) {
+    if (subject.QueryInterface(Ci.nsISupportsPRUint64).data != this._innerWindowId) {
+      return;
+    }
+
+    Services.obs.removeObserver(this, "inner-window-destroyed", false);
+
+    this._mm.removeMessageListener("Reader:CloseDropdown", this);
+    this._mm.removeMessageListener("Reader:AddButton", this);
+    this._mm.removeMessageListener("Reader:RemoveButton", this);
+    this._windowUnloaded = true;
+  },
+
+  _onReaderClose: function() {
+    ReaderMode.leaveReaderMode(this._mm.docShell, this._win);
+  },
+
+  _setFontSize: function(newFontSize) {
+    let containerClasses = this._doc.getElementById("container").classList;
+
+    if (this._fontSize > 0)
+      containerClasses.remove("font-size" + this._fontSize);
+
+    this._fontSize = newFontSize;
+    containerClasses.add("font-size" + this._fontSize);
+    return AsyncPrefs.set("reader.font_size", this._fontSize);
+  },
+
+  _setupFontSizeButtons: function() {
+    const FONT_SIZE_MIN = 1;
+    const FONT_SIZE_MAX = 9;
+
+    // Sample text shown in Android UI.
+    let sampleText = this._doc.getElementById("font-size-sample");
+    sampleText.textContent = gStrings.GetStringFromName("aboutReader.fontTypeSample");
+
+    let currentSize = Services.prefs.getIntPref("reader.font_size");
+    currentSize = Math.max(FONT_SIZE_MIN, Math.min(FONT_SIZE_MAX, currentSize));
+
+    let plusButton = this._doc.getElementById("font-size-plus");
+    let minusButton = this._doc.getElementById("font-size-minus");
+
+    function updateControls() {
+      if (currentSize === FONT_SIZE_MIN) {
+        minusButton.setAttribute("disabled", true);
+      } else {
+        minusButton.removeAttribute("disabled");
+      }
+      if (currentSize === FONT_SIZE_MAX) {
+        plusButton.setAttribute("disabled", true);
+      } else {
+        plusButton.removeAttribute("disabled");
+      }
+    }
+
+    updateControls();
+    this._setFontSize(currentSize);
+
+    plusButton.addEventListener("click", (event) => {
+      if (!event.isTrusted) {
+        return;
+      }
+      event.stopPropagation();
+
+      if (currentSize >= FONT_SIZE_MAX) {
+        return;
+      }
+
+      currentSize++;
+      updateControls();
+      this._setFontSize(currentSize);
+    }, true);
+
+    minusButton.addEventListener("click", (event) => {
+      if (!event.isTrusted) {
+        return;
+      }
+      event.stopPropagation();
+
+      if (currentSize <= FONT_SIZE_MIN) {
+        return;
+      }
+
+      currentSize--;
+      updateControls();
+      this._setFontSize(currentSize);
+    }, true);
+  },
+
+  _setContentWidth: function(newContentWidth) {
+    let containerClasses = this._doc.getElementById("container").classList;
+
+    if (this._contentWidth > 0)
+      containerClasses.remove("content-width" + this._contentWidth);
+
+    this._contentWidth = newContentWidth;
+    containerClasses.add("content-width" + this._contentWidth);
+    return AsyncPrefs.set("reader.content_width", this._contentWidth);
+  },
+
+  _setupContentWidthButtons: function() {
+    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));
+
+    let plusButton = this._doc.getElementById("content-width-plus");
+    let minusButton = this._doc.getElementById("content-width-minus");
+
+    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: function(newLineHeight) {
+    let contentClasses = this._doc.getElementById("moz-reader-content").classList;
+
+    if (this._lineHeight > 0)
+      contentClasses.remove("line-height" + this._lineHeight);
+
+    this._lineHeight = newLineHeight;
+    contentClasses.add("line-height" + this._lineHeight);
+    return AsyncPrefs.set("reader.line_height", this._lineHeight);
+  },
+
+  _setupLineHeightButtons: function() {
+    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));
+
+    let plusButton = this._doc.getElementById("line-height-plus");
+    let minusButton = this._doc.getElementById("line-height-minus");
+
+    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);
+  },
+
+  _handleDeviceLight: function(newLux) {
+    // Desired size of the this._luxValues array.
+    let luxValuesSize = 10;
+    // Add new lux value at the front of the array.
+    this._luxValues.unshift(newLux);
+    // Add new lux value to this._totalLux for averaging later.
+    this._totalLux += newLux;
+
+    // Don't update when length of array is less than luxValuesSize except when it is 1.
+    if (this._luxValues.length < luxValuesSize) {
+      // Use the first lux value to set the color scheme until our array equals luxValuesSize.
+      if (this._luxValues.length == 1) {
+        this._updateColorScheme(newLux);
+      }
+      return;
+    }
+    // Holds the average of the lux values collected in this._luxValues.
+    let averageLuxValue = this._totalLux/luxValuesSize;
+
+    this._updateColorScheme(averageLuxValue);
+    // Pop the oldest value off the array.
+    let oldLux = this._luxValues.pop();
+    // Subtract oldLux since it has been discarded from the array.
+    this._totalLux -= oldLux;
+  },
+
+  _handleVisibilityChange: function() {
+    let colorScheme = Services.prefs.getCharPref("reader.color_scheme");
+    if (colorScheme != "auto") {
+      return;
+    }
+
+    // Turn off the ambient light sensor if the page is hidden
+    this._enableAmbientLighting(!this._doc.hidden);
+  },
+
+  // Setup or teardown the ambient light tracking system.
+  _enableAmbientLighting: function(enable) {
+    if (enable) {
+      this._win.addEventListener("devicelight", this, false);
+      this._luxValues = [];
+      this._totalLux = 0;
+    } else {
+      this._win.removeEventListener("devicelight", this, false);
+      delete this._luxValues;
+      delete this._totalLux;
+    }
+  },
+
+  _updateColorScheme: function(luxValue) {
+    // Upper bound value for "dark" color scheme beyond which it changes to "light".
+    let upperBoundDark = 50;
+    // Lower bound value for "light" color scheme beyond which it changes to "dark".
+    let lowerBoundLight = 10;
+    // Threshold for color scheme change.
+    let colorChangeThreshold = 20;
+
+    // Ignore changes that are within a certain threshold of previous lux values.
+    if ((this._colorScheme === "dark" && luxValue < upperBoundDark) ||
+        (this._colorScheme === "light" && luxValue > lowerBoundLight))
+      return;
+
+    if (luxValue < colorChangeThreshold)
+      this._setColorScheme("dark");
+    else
+      this._setColorScheme("light");
+  },
+
+  _setColorScheme: function(newColorScheme) {
+    // "auto" is not a real color scheme
+    if (this._colorScheme === newColorScheme || newColorScheme === "auto")
+      return;
+
+    let bodyClasses = this._doc.body.classList;
+
+    if (this._colorScheme)
+      bodyClasses.remove(this._colorScheme);
+
+    this._colorScheme = newColorScheme;
+    bodyClasses.add(this._colorScheme);
+  },
+
+  // Pref values include "dark", "light", and "auto", which automatically switches
+  // between light and dark color schemes based on the ambient light level.
+  _setColorSchemePref: function(colorSchemePref) {
+    this._enableAmbientLighting(colorSchemePref === "auto");
+    this._setColorScheme(colorSchemePref);
+
+    AsyncPrefs.set("reader.color_scheme", colorSchemePref);
+  },
+
+  _setFontType: function(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);
+
+    AsyncPrefs.set("reader.font_type", this._fontType);
+  },
+
+  _setSystemUIVisibility: function(visible) {
+    this._mm.sendAsyncMessage("Reader:SystemUIVisibility", { visible: visible });
+  },
+
+  _loadArticle: Task.async(function* () {
+    let url = this._getOriginalUrl();
+    this._showProgressDelayed();
+
+    let article;
+    if (this._articlePromise) {
+      article = yield this._articlePromise;
+    } else {
+      try {
+        article = yield this._getArticle(url);
+      } catch (e) {
+        if (e && e.newURL) {
+          let readerURL = "about:reader?url=" + encodeURIComponent(e.newURL);
+          this._win.location.replace(readerURL);
+          return;
+        }
+      }
+    }
+
+    if (this._windowUnloaded) {
+      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);
+  }),
+
+  _getArticle: function(url) {
+    return new Promise((resolve, reject) => {
+      let listener = (message) => {
+        this._mm.removeMessageListener("Reader:ArticleData", listener);
+        if (message.data.newURL) {
+          reject({ newURL: message.data.newURL });
+          return;
+        }
+        resolve(message.data.article);
+      };
+      this._mm.addMessageListener("Reader:ArticleData", listener);
+      this._mm.sendAsyncMessage("Reader:ArticleGet", { url: url });
+    });
+  },
+
+  _requestFavicon: function() {
+    let handleFaviconReturn = (message) => {
+      this._mm.removeMessageListener("Reader:FaviconReturn", handleFaviconReturn);
+      this._loadFavicon(message.data.url, message.data.faviconUrl);
+    };
+
+    this._mm.addMessageListener("Reader:FaviconReturn", handleFaviconReturn);
+    this._mm.sendAsyncMessage("Reader:FaviconRequest", { url: this._article.url });
+  },
+
+  _loadFavicon: function(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: function() {
+    let windowWidth = this._win.innerWidth;
+    let bodyWidth = this._doc.body.clientWidth;
+
+    let setImageMargins = function(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);
+        };
+      }
+    }
+  },
+
+  _maybeSetTextDirection: function Read_maybeSetTextDirection(article) {
+    if (!article.dir)
+      return;
+
+    // Set "dir" attribute on content
+    this._contentElement.setAttribute("dir", article.dir);
+    this._headerElement.setAttribute("dir", article.dir);
+  },
+
+  _fixLocalLinks() {
+    // We need to do this because preprocessing the content through nsIParserUtils
+    // gives back a DOM with a <base> element. That influences how these URLs get
+    // resolved, making them no longer match the document URI (which is
+    // about:reader?url=...). To fix this, make all the hash URIs absolute. This
+    // is hacky, but the alternative of removing the base element has potential
+    // security implications if Readability has not successfully made all the URLs
+    // absolute, so we pick just fixing these in-document links explicitly.
+    let localLinks = this._contentElement.querySelectorAll("a[href^='#']");
+    for (let localLink of localLinks) {
+      // Have to get the attribute because .href provides an absolute URI.
+      localLink.href = this._doc.documentURI + localLink.getAttribute("href");
+    }
+  },
+
+  _showError: function() {
+    this._headerElement.style.display = "none";
+    this._contentElement.style.display = "none";
+
+    let errorMessage = gStrings.GetStringFromName("aboutReader.loadError");
+    this._messageElement.textContent = errorMessage;
+    this._messageElement.style.display = "block";
+
+    this._doc.title = errorMessage;
+
+    this._error = true;
+  },
+
+  // This function is the JS version of Java's StringUtils.stripCommonSubdomains.
+  _stripHost: function(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: function(article) {
+    this._messageElement.style.display = "none";
+
+    this._article = article;
+
+    this._domainElement.href = article.url;
+    let articleUri = Services.io.newURI(article.url, null, null);
+    this._domainElement.textContent = this._stripHost(articleUri.host);
+    this._creditsElement.textContent = article.byline;
+
+    this._titleElement.textContent = article.title;
+    this._doc.title = article.title;
+
+    this._headerElement.style.display = "block";
+
+    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._fixLocalLinks();
+    this._maybeSetTextDirection(article);
+
+    this._contentElement.style.display = "block";
+    this._updateImageMargins();
+
+    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 }));
+  },
+
+  _hideContent: function() {
+    this._headerElement.style.display = "none";
+    this._contentElement.style.display = "none";
+  },
+
+  _showProgressDelayed: function() {
+    this._win.setTimeout(function() {
+      // 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._windowUnloaded || this._error) {
+        return;
+      }
+
+      this._headerElement.style.display = "none";
+      this._contentElement.style.display = "none";
+
+      this._messageElement.textContent = gStrings.GetStringFromName("aboutReader.loading2");
+      this._messageElement.style.display = "block";
+    }.bind(this), 300);
+  },
+
+  /**
+   * Returns the original article URL for this about:reader view.
+   */
+  _getOriginalUrl: function(win) {
+    let url = win ? win.location.href : this._win.location.href;
+    return ReaderMode.getOriginalUrl(url) || url;
+  },
+
+  _setupSegmentedButton: function(id, options, initialValue, callback) {
+    let doc = this._doc;
+    let segmentedButton = doc.getElementById(id);
+
+    for (let i = 0; i < options.length; i++) {
+      let option = options[i];
+
+      let item = doc.createElement("button");
+
+      // Put the name in a div so that Android can hide it.
+      let div = doc.createElement("div");
+      div.textContent = option.name;
+      div.classList.add("name");
+      item.appendChild(div);
+
+      if (option.itemClass !== undefined)
+        item.classList.add(option.itemClass);
+
+      if (option.description !== undefined) {
+        let description = doc.createElement("div");
+        description.textContent = option.description;
+        description.classList.add("description");
+        item.appendChild(description);
+      }
+
+      segmentedButton.appendChild(item);
+
+      item.addEventListener("click", function(aEvent) {
+        if (!aEvent.isTrusted)
+          return;
+
+        aEvent.stopPropagation();
+
+        // Just pass the ID of the button as an extra and hope the ID doesn't change
+        // unless the context changes
+        UITelemetry.addEvent("action.1", "button", null, id);
+
+        let items = segmentedButton.children;
+        for (let j = items.length - 1; j >= 0; j--) {
+          items[j].classList.remove("selected");
+        }
+
+        item.classList.add("selected");
+        callback(option.value);
+      }.bind(this), true);
+
+      if (option.value === initialValue)
+        item.classList.add("selected");
+    }
+  },
+
+  _setupButton: function(id, callback, titleEntity, textEntity) {
+    if (titleEntity) {
+      this._setButtonTip(id, titleEntity);
+    }
+
+    let button = this._doc.getElementById(id);
+    if (textEntity) {
+      button.textContent = gStrings.GetStringFromName(textEntity);
+    }
+    button.removeAttribute("hidden");
+    button.addEventListener("click", function(aEvent) {
+      if (!aEvent.isTrusted)
+        return;
+
+      aEvent.stopPropagation();
+      let btn = aEvent.target;
+      callback(btn);
+    }, true);
+  },
+
+  /**
+   * Sets a toolTip for a button. Performed at initial button setup
+   * and dynamically as button state changes.
+   * @param   Localizable string providing UI element usage tip.
+   */
+  _setButtonTip: function(id, titleEntity) {
+    let button = this._doc.getElementById(id);
+    button.setAttribute("title", gStrings.GetStringFromName(titleEntity));
+  },
+
+  _setupStyleDropdown: function() {
+    let dropdownToggle = this._doc.querySelector("#style-dropdown .dropdown-toggle");
+    dropdownToggle.setAttribute("title", gStrings.GetStringFromName("aboutReader.toolbar.typeControls"));
+  },
+
+  _updatePopupPosition: function(dropdown) {
+    let dropdownToggle = dropdown.querySelector(".dropdown-toggle");
+    let dropdownPopup = dropdown.querySelector(".dropdown-popup");
+
+    let toggleHeight = dropdownToggle.offsetHeight;
+    let toggleTop = dropdownToggle.offsetTop;
+    let popupTop = toggleTop - toggleHeight / 2;
+
+    dropdownPopup.style.top = popupTop + "px";
+  },
+
+  _toggleDropdownClicked: function(event) {
+    let dropdown = event.target.closest('.dropdown');
+
+    if (!dropdown)
+      return;
+
+    event.stopPropagation();
+
+    if (dropdown.classList.contains("open")) {
+      this._closeDropdowns();
+    } else {
+      this._openDropdown(dropdown);
+      if (this._isToolbarVertical) {
+        this._updatePopupPosition(dropdown);
+      }
+    }
+  },
+
+  /*
+   * If the ReaderView banner font-dropdown is closed, open it.
+   */
+  _openDropdown: function(dropdown) {
+    if (dropdown.classList.contains("open")) {
+      return;
+    }
+
+    this._closeDropdowns();
+
+    // Trigger BackPressListener initialization in Android.
+    dropdown.classList.add("open");
+    this._mm.sendAsyncMessage("Reader:DropdownOpened", this.viewId);
+  },
+
+  /*
+   * 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: function(scrolling) {
+    let selector = ".dropdown.open";
+    if (scrolling) {
+      selector += ":not(.keep-open)";
+    }
+
+    let openDropdowns = this._doc.querySelectorAll(selector);
+    for (let dropdown of openDropdowns) {
+      dropdown.classList.remove("open");
+    }
+
+    // Trigger BackPressListener cleanup in Android.
+    if (openDropdowns.length) {
+      this._mm.sendAsyncMessage("Reader:DropdownClosed", this.viewId);
+    }
+  },
+
+  /*
+   * Scroll reader view to a reference
+   */
+  _goToReference(ref) {
+    if (ref) {
+      this._win.location.hash = ref;
+    }
+  }
+};