Bug 750686 - Implement style toolbar for Reader Mode (r=mfinkle)

2024-09-13 09:24:08 -07:00 · 2012-06-20 18:12:13 +01:00 · 2012-06-20 18:12:13 +01:00 · 14ab60a7c2
commit 14ab60a7c2
parent b5a96fcae9
41 changed files with 746 additions and 17 deletions
--- a/mobile/android/app/mobile.js
+++ b/mobile/android/app/mobile.js
@ -724,3 +724,12 @@ pref("network.manage-offline-status", true);

 // increase the timeout clamp for background tabs to 15 minutes
 pref("dom.min_background_timeout_value", 900000);
+
+// The default of font size in reader (1-7)
+pref("reader.font_size", 4);
+
+// The default of margin size in reader (5%-25%)
+pref("reader.margin_size", 5);
+
+// The default color scheme in reader (light, dark, sepia)
+pref("reader.color_scheme", "light");
--- a/mobile/android/base/Tabs.java
+++ b/mobile/android/base/Tabs.java
@ -15,6 +15,7 @@ import org.json.JSONException;
 import org.json.JSONObject;

 import android.content.ContentResolver;
+import android.content.Intent;
 import android.os.SystemClock;
 import android.util.Log;
 import android.widget.Toast;
@ -42,6 +43,7 @@ public class Tabs implements GeckoEventListener {
        GeckoAppShell.registerGeckoEventListener("Session:RestoreBegin", this);
        GeckoAppShell.registerGeckoEventListener("Session:RestoreEnd", this);
        GeckoAppShell.registerGeckoEventListener("Reader:Added", this);
+        GeckoAppShell.registerGeckoEventListener("Reader:Share", this);
    }

    public int getCount() {
@ -263,6 +265,12 @@ public class Tabs implements GeckoEventListener {
                final String title = message.getString("title");
                final String url = message.getString("url");
                handleReaderAdded(success, title, url);
+            } else if (event.equals("Reader:Share")) {
+                final String title = message.getString("title");
+                final String url = message.getString("url");
+
+                GeckoAppShell.openUriExternal(url, "text/plain", "", "",
+                                              Intent.ACTION_SEND, title);
            }
        } catch (Exception e) { 
            Log.i(LOGTAG, "handleMessage throws " + e + " for message: " + event);
--- a/mobile/android/chrome/content/aboutReader.html
+++ b/mobile/android/chrome/content/aboutReader.html
@ -4,7 +4,7 @@
 <head>
  <title></title>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
-  <meta name="viewport" content="width=480; initial-scale=.6667; user-scalable=0" />
+  <meta name="viewport" content="width=device-width; user-scalable=0" />

  <link rel="icon" type="image/png" href="chrome://branding/content/favicon32.png" />
  <link rel="stylesheet" href="chrome://browser/skin/aboutReader.css" type="text/css"/>
@ -17,6 +17,20 @@
  <div id="reader-content" class="content">
  </div>

+  <ul id="reader-toolbar" class="toolbar">
+    <a id="share-button" class="button share-button" href="#"></a>
+    <li class="dropdown">
+      <a class="dropdown-toggle button style-button" href="#"></a>
+      <div class="dropdown-popup">
+        <ul id="color-scheme-buttons" class="segmented-button"></ul>
+        <hr></hr>
+        <div id="font-size-control" class="step-control"></div>
+        <hr></hr>
+        <div id="margin-size-control" class="step-control"></div>
+      </div>
+    </li>
+  </ul>
+
  <script type="application/javascript;version=1.8" src="chrome://browser/content/aboutReader.js">
  </script>
 </body>
--- a/mobile/android/chrome/content/aboutReader.js
+++ b/mobile/android/chrome/content/aboutReader.js
@ -23,12 +23,51 @@ function dump(s) {
 let gStrings = Services.strings.createBundle("chrome://browser/locale/aboutReader.properties");

 let AboutReader = {
+  _STEP_INCREMENT: 0,
+  _STEP_DECREMENT: 1,
+
  init: function Reader_init() {
    dump("Init()");

-    dump("Feching header and content notes from about:reader");
+    this._article = null;
+
+    dump("Feching toolbar, header and content notes from about:reader");
    this._titleElement = document.getElementById("reader-header");
    this._contentElement = document.getElementById("reader-content");
+    this._toolbarElement = document.getElementById("reader-toolbar");
+
+    this._scrollOffset = window.pageYOffset;
+
+    let body = document.body;
+    body.addEventListener("touchstart", this, false);
+    body.addEventListener("click", this, false);
+    window.addEventListener("scroll", this, false);
+
+    this._setupAllDropdowns();
+    this._setupButton("share-button", this._onShare.bind(this));
+
+    let colorSchemeOptions = [
+      { name: gStrings.GetStringFromName("aboutReader.colorSchemeLight"),
+        value: "light"},
+      { name: gStrings.GetStringFromName("aboutReader.colorSchemeDark"),
+        value: "dark"},
+      { name: gStrings.GetStringFromName("aboutReader.colorSchemeSepia"),
+        value: "sepia"}
+    ];
+
+    let colorScheme = Services.prefs.getCharPref("reader.color_scheme");
+    this._setupSegmentedButton("color-scheme-buttons", colorSchemeOptions, colorScheme, this._setColorScheme.bind(this));
+    this._setColorScheme(colorScheme);
+
+    let fontTitle = gStrings.GetStringFromName("aboutReader.fontTitle");
+    this._setupStepControl("font-size-control", fontTitle, this._onFontSizeChange.bind(this));
+    this._fontSize = 0;
+    this._setFontSize(Services.prefs.getIntPref("reader.font_size"));
+
+    let marginTitle = gStrings.GetStringFromName("aboutReader.marginTitle");
+    this._setupStepControl("margin-size-control", marginTitle, this._onMarginSizeChange.bind(this));
+    this._marginSize = 0;
+    this._setMarginSize(Services.prefs.getIntPref("reader.margin_size"));

    dump("Decoding query arguments");
    let queryArgs = this._decodeQueryString(window.location.href);
@ -46,11 +85,123 @@ let AboutReader = {
    }
  },

-  uninit: function Reader_uninit() {
-    this._hideContent();
+  handleEvent: function Reader_handleEvent(aEvent) {
+    switch (aEvent.type) {
+      case "touchstart":
+        this._scrolled = false;
+        break;
+      case "click":
+        if (!this._scrolled)
+          this._toggleToolbarVisibility();
+        break;
+      case "scroll":
+        if (!this._scrolled) {
+          this._scrolled = true;
+          this._setToolbarVisibility(false);
+        }
+        break;
+    }
+  },

-    delete this._titleElement;
-    delete this._contentElement;
+  uninit: function Reader_uninit() {
+    dump("Uninit()");
+
+    let body = document.body;
+    body.removeEventListener("touchstart", this, false);
+    body.removeEventListener("click", this, false);
+    window.removeEventListener("scroll", this, false);
+
+    this._hideContent();
+  },
+
+  _onShare: function Reader_onShare() {
+    if (!this._article)
+      return;
+
+    gChromeWin.sendMessageToJava({
+      gecko: {
+        type: "Reader:Share",
+        url: this._article.url,
+        title: this._article.title
+      }
+    });
+  },
+
+  _onMarginSizeChange: function Reader_onMarginSizeChange(operation) {
+    if (operation == this._STEP_INCREMENT)
+      this._setMarginSize(this._marginSize + 5);
+    else
+      this._setMarginSize(this._marginSize - 5);
+  },
+
+  _setMarginSize: function Reader_setMarginSize(newMarginSize) {
+    if (this._marginSize === newMarginSize)
+      return;
+
+    this._marginSize = Math.max(5, Math.min(25, newMarginSize));
+    document.body.style.marginLeft = this._marginSize + "%";
+    document.body.style.marginRight = this._marginSize + "%";
+
+    Services.prefs.setIntPref("reader.margin_size", this._marginSize);
+  },
+
+  _onFontSizeChange: function Reader_onFontSizeChange(operation) {
+    if (operation == this._STEP_INCREMENT)
+      this._setFontSize(this._fontSize + 1);
+    else
+      this._setFontSize(this._fontSize - 1);
+  },
+
+  _setFontSize: function Reader_setFontSize(newFontSize) {
+    if (this._fontSize === newFontSize)
+      return;
+
+    let bodyClasses = document.body.classList;
+
+    if (this._fontSize > 0)
+      bodyClasses.remove("font-size" + this._fontSize);
+
+    this._fontSize = Math.max(1, Math.min(7, newFontSize));
+    bodyClasses.add("font-size" + this._fontSize);
+
+    Services.prefs.setIntPref("reader.font_size", this._fontSize);
+  },
+
+  _setColorScheme: function Reader_setColorScheme(newColorScheme) {
+    if (this._colorScheme === newColorScheme)
+      return;
+
+    let bodyClasses = document.body.classList;
+
+    if (this._colorScheme)
+      bodyClasses.remove(this._colorScheme);
+
+    this._colorScheme = newColorScheme;
+    bodyClasses.add(this._colorScheme);
+
+    Services.prefs.setCharPref("reader.color_scheme", this._colorScheme);
+  },
+
+  _getToolbarVisibility: function Reader_getToolbarVisibility() {
+    return !this._toolbarElement.classList.contains("toolbar-hidden");
+  },
+
+  _setToolbarVisibility: function Reader_setToolbarVisibility(visible) {
+    this._closeAllDropdowns();
+
+    if (this._getToolbarVisibility() === visible)
+      return;
+
+    let toolbarElement = this._toolbarElement;
+
+    if (visible)
+      toolbarElement.display = "block";
+
+    toolbarElement.classList.toggle("toolbar-hidden");
+  },
+
+  _toggleToolbarVisibility: function Reader_toggleToolbarVisibility(visible) {
+    this._setToolbarVisibility(!this._getToolbarVisibility());
  },

  _loadFromURL: function Reader_loadFromURL(url) {
@ -84,6 +235,8 @@ let AboutReader = {
  },

  _showContent: function Reader_showContent(article) {
+    this._article = article;
+
    this._titleElement.innerHTML = article.title;
    this._titleElement.style.display = "block";

@ -116,5 +269,126 @@ let AboutReader = {
    }

    return result;
+  },
+
+  _setupStepControl: function Reader_setupStepControl(id, name, callback) {
+    let stepControl = document.getElementById(id);
+
+    let title = document.createElement("h1");
+    title.innerHTML = name;
+    stepControl.appendChild(title);
+
+    let plusButton = document.createElement("div");
+    plusButton.className = "button plus-button";
+    stepControl.appendChild(plusButton);
+
+    let minusButton = document.createElement("div");
+    minusButton.className = "button minus-button";
+    stepControl.appendChild(minusButton);
+
+    plusButton.addEventListener("click", function(aEvent) {
+      aEvent.stopPropagation();
+      callback(this._STEP_INCREMENT);
+    }.bind(this), true);
+
+    minusButton.addEventListener("click", function(aEvent) {
+      aEvent.stopPropagation();
+      callback(this._STEP_DECREMENT);
+    }.bind(this), true);
+  },
+
+  _setupSegmentedButton: function Reader_setupSegmentedButton(id, options, initialValue, callback) {
+    let segmentedButton = document.getElementById(id);
+
+    for (let i = 0; i < options.length; i++) {
+      let option = options[i];
+
+      let item = document.createElement("li");
+      let link = document.createElement("a");
+      link.innerHTML = option.name;
+      item.appendChild(link);
+
+      segmentedButton.appendChild(item);
+
+      link.addEventListener("click", function(aEvent) {
+        aEvent.stopPropagation();
+
+        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 Reader_setupButton(id, callback) {
+    let button = document.getElementById(id);
+
+    button.addEventListener("click", function(aEvent) {
+      callback();
+    }, true);
+  },
+
+  _setupAllDropdowns: function Reader_setupAllDropdowns() {
+    let dropdowns = document.getElementsByClassName("dropdown");
+
+    for (let i = dropdowns.length - 1; i >= 0; i--) {
+      let dropdown = dropdowns[i];
+
+      let dropdownToggle = dropdown.getElementsByClassName("dropdown-toggle")[0];
+      let dropdownPopup = dropdown.getElementsByClassName("dropdown-popup")[0];
+
+      if (!dropdownToggle || !dropdownPopup)
+        continue;
+
+      let dropdownArrow = document.createElement("div");
+      dropdownArrow.className = "dropdown-arrow";
+      dropdownPopup.appendChild(dropdownArrow);
+
+      let updatePopupPosition = function() {
+          let popupWidth = dropdownPopup.offsetWidth + 30;
+          let arrowWidth = dropdownArrow.offsetWidth;
+          let toggleWidth = dropdownToggle.offsetWidth;
+          let toggleLeft = dropdownToggle.offsetLeft;
+
+          let popupShift = (toggleWidth - popupWidth) / 2;
+          let popupLeft = Math.max(0, Math.min(window.innerWidth - popupWidth, toggleLeft + popupShift));
+          dropdownPopup.style.left = popupLeft + "px";
+
+          let arrowShift = (toggleWidth - arrowWidth) / 2;
+          let arrowLeft = toggleLeft - popupLeft + arrowShift;
+          dropdownArrow.style.left = arrowLeft + "px";
+      }
+
+      window.addEventListener("resize", function(aEvent) {
+        updatePopupPosition();
+      }, true);
+
+      dropdownToggle.addEventListener("click", function(aEvent) {
+        aEvent.stopPropagation();
+
+        let dropdownClasses = dropdown.classList;
+
+        if (!dropdownClasses.contains("open")) {
+          updatePopupPosition();
+          this._closeAllDropdowns();
+        }
+
+        dropdownClasses.toggle("open");
+      }.bind(this), true);
+    }
+  },
+
+  _closeAllDropdowns : function Reader_closeAllDropdowns() {
+    let dropdowns = document.getElementsByClassName("dropdown");
+    for (let i = dropdowns.length - 1; i >= 0; i--) {
+      dropdowns[i].classList.remove("open");
+    }
  }
 }
--- a/mobile/android/locales/en-US/chrome/aboutReader.properties
+++ b/mobile/android/locales/en-US/chrome/aboutReader.properties
@ -4,3 +4,10 @@

 aboutReader.loading=Loading...
 aboutReader.loadError=Failed to load article from page
+
+aboutReader.fontTitle=Font
+aboutReader.marginTitle=Margins
+
+aboutReader.colorSchemeLight=Light
+aboutReader.colorSchemeDark=Dark
+aboutReader.colorSchemeSepia=Sepia
--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@ -6,32 +6,415 @@
 %include defines.inc

 html {
-  font-family: Roboto,"Droid Sans",helvetica,arial,clean,sans-serif;
-  font-size: 24px;
-  background: #FFFFFF;
+  font-family: "Droid Serif",serif;
  -moz-text-size-adjust: none;
 }

 body {
-  margin: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.light {
+  background: #ffffff;
+  color: #222222;
+}
+
+.dark {
+  background: #111111;
+  color: #ffffff;
+}
+
+.sepia {
+  background: #fffdf7;
+  color: #7a4d36;
 }

 .header {
  width: 100%;
-  color: black;
  text-align: center;
-  font-size: 30px;
  font-weight: bold;
-  padding-top: 30px;
-  padding-bottom: 30px;
+  padding-top: 20px;
+  padding-bottom: 20px;
  border-bottom: 4px solid;
  -moz-border-bottom-colors: #ff9100 #f27900;
  display: none;
 }

+.font-size1 > .header {
+  font-size: 21px;
+}
+
+.font-size2 > .header {
+  font-size: 23px;
+}
+
+.font-size3 > .header {
+  font-size: 25px;
+}
+
+.font-size4 > .header {
+  font-size: 27px;
+}
+
+.font-size5 > .header {
+  font-size: 29px;
+}
+
+.font-size6 > .header {
+  font-size: 31px;
+}
+
+.font-size7 > .header {
+  font-size: 33px;
+}
+
 .content {
-  font-family: "Droid Serif",serif;
-  padding-top: 30px;
-  padding-bottom: 30px;
+  padding-top: 20px;
+  padding-bottom: 20px;
  display: none;
 }
+
+.font-size1 > .content {
+  font-size: 11px;
+}
+
+.font-size2 > .content {
+  font-size: 13px;
+}
+
+.font-size3 > .content {
+  font-size: 15px;
+}
+
+.font-size4 > .content {
+  font-size: 17px;
+}
+
+.font-size5 > .content {
+  font-size: 19px;
+}
+
+.font-size6 > .content {
+  font-size: 21px;
+}
+
+.font-size7 > .content {
+  font-size: 24px;
+}
+
+.toolbar {
+  font-family: "Droid Sans",helvetica,arial,clean,sans-serif;
+  display: block;
+  position: fixed;
+  width: 100%;
+  bottom: 0px;
+  left: 0px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background-repeat: repeat;
+}
+
+.toolbar-hidden {
+  display: none;
+}
+
+.toolbar > * {
+  float: right;
+}
+
+.button {
+  color: white;
+  display: block;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.button:active {
+  background-color: rgba(170, 170, 170, 1.0);
+}
+
+.dropdown {
+  text-align: center;
+  display: inline-block;
+}
+
+.dropdown li {
+  margin: 0px;
+  padding: 0px;
+}
+
+.dropdown-toggle {
+  margin: 0px;
+  padding: 0px;
+}
+
+.dropdown-popup {
+  text-align: left;
+  position: absolute;
+  left: 0px;
+  z-index: 1000;
+  float: left;
+  background: #dde2e7;
+  margin-top: 12px;
+  margin-bottom: 10px;
+  padding-top: 4px;
+  padding-bottom: 8px;
+  font-size: 14px;
+  box-shadow: 0px -1px 12px #333;
+}
+
+.dropdown-popup > hr {
+  width: 100%;
+  height: 0px;
+  border: 0px;
+  border-top: 1px solid #ccc;
+  border-bottom: 1px solid white;
+  margin: 10px 0px 10px 0px;
+  float: left;
+}
+
+.open > .dropdown-popup {
+  margin-top: 0px;
+  bottom: 100%;
+}
+
+.dropdown-arrow {
+  position: absolute;
+  width: 28px;
+  height: 10px;
+  bottom: -10px;
+  background-image: url('chrome://browser/skin/images/reader-dropdown-arrow.png');
+  background-position: center;
+  display: block;
+}
+
+.segmented-button {
+  list-style: none;
+  margin: 0;
+  padding: 5px;
+  white-space: nowrap;
+}
+
+.segmented-button > li {
+  display: inline-block;
+  padding: 1px 5px;
+  border-left: 1px solid #ccc;
+}
+
+.segmented-button > li:first-child {
+  border-left: 0px;
+}
+
+.segmented-button > li > a,
+.segmented-button > li > a:hover
+.segmented-button > li > a:visited {
+  display: block;
+  padding: 10px 16px;
+  text-decoration: none;
+  color: black;
+  border-radius: 4px;
+}
+
+.segmented-button > li > a:active,
+.segmented-button > li.selected > a {
+  background: #ccc;
+}
+
+.step-control {
+  width: 100%;
+  padding: 0px;
+}
+
+.step-control > h1 {
+  font-size: 16px;
+  font-weight: normal;
+  color: black;
+  margin: 0px;
+  margin-top: 12px;
+  margin-left: 10px;
+  float: left;
+}
+
+.step-control > .button {
+  float: right;
+  text-align: center;
+  width: 56px;
+  height: 43px;
+  background-size: 20px;
+}
+
+.step-control > .plus-button {
+  background-image: url('chrome://browser/skin/images/reader-plus-icon-mdpi.png');
+  border-left: 1px solid #ccc;
+  margin-right: 4px;
+}
+
+.step-control > .minus-button {
+  background-image: url('chrome://browser/skin/images/reader-minus-icon-mdpi.png');
+}
+
+@media screen and (orientation: portrait) {
+  .button {
+    width: 48px;
+    height: 48px;
+    background-size: 30px 24px
+  }
+
+  .toolbar {
+    background-image: url('chrome://browser/skin/images/reader-toolbar-bg-port-mdpi.png');
+  }
+
+  .share-button {
+    background-image: url('chrome://browser/skin/images/reader-share-icon-port-mdpi.png');
+  }
+
+  .style-button {
+    background-image: url('chrome://browser/skin/images/reader-style-icon-port-mdpi.png');
+  }
+}
+
+@media screen and (orientation: landscape) {
+  .button {
+    width: 40px;
+    height: 40px;
+    background-size: 24px 20px
+  }
+
+  .toolbar {
+    background-image: url('chrome://browser/skin/images/reader-toolbar-bg-land-mdpi.png');
+  }
+
+  .share-button {
+    background-image: url('chrome://browser/skin/images/reader-share-icon-land-mdpi.png');
+  }
+
+  .style-button {
+    background-image: url('chrome://browser/skin/images/reader-style-icon-land-mdpi.png');
+  }
+}
+
+@media screen and (min-width: 960px) {
+  .button {
+    width: 56px;
+    height: 56px;
+    background-size: 36px 28px
+  }
+
+  .toolbar {
+    background-image: url('chrome://browser/skin/images/reader-toolbar-bg-xlarge-mdpi.png');
+  }
+
+  .share-button {
+    background-image: url('chrome://browser/skin/images/reader-share-icon-xlarge-mdpi.png');
+  }
+
+  .style-button {
+    background-image: url('chrome://browser/skin/images/reader-style-icon-xlarge-mdpi.png');
+  }
+}
+
+@media screen and (min-resolution: 200dpi) {
+  .step-control > .plus-button {
+    background-image: url('chrome://browser/skin/images/reader-plus-icon-hdpi.png');
+  }
+
+  .step-control > .minus-button {
+    background-image: url('chrome://browser/skin/images/reader-minus-icon-hdpi.png');
+  }
+}
+
+@media screen and (min-resolution: 300dpi) {
+  .step-control > .plus-button {
+    background-image: url('chrome://browser/skin/images/reader-plus-icon-xhdpi.png');
+  }
+
+  .step-control > .minus-button {
+    background-image: url('chrome://browser/skin/images/reader-minus-icon-xhdpi.png');
+  }
+}
+
+@media screen and (orientation: portrait) and (min-resolution: 200dpi) {
+  .toolbar {
+    background-image: url('chrome://browser/skin/images/reader-toolbar-bg-port-hdpi.png');
+  }
+
+  .share-button {
+    background-image: url('chrome://browser/skin/images/reader-share-icon-port-hdpi.png');
+  }
+
+  .style-button {
+    background-image: url('chrome://browser/skin/images/reader-style-icon-port-hdpi.png');
+  }
+}
+
+@media screen and (orientation: landscape) and (min-resolution: 200dpi) {
+  .toolbar {
+    background-image: url('chrome://browser/skin/images/reader-toolbar-bg-land-hdpi.png');
+  }
+
+  .share-button {
+    background-image: url('chrome://browser/skin/images/reader-share-icon-land-hdpi.png');
+  }
+
+  .style-button {
+    background-image: url('chrome://browser/skin/images/reader-style-icon-land-hdpi.png');
+  }
+}
+
+@media screen and (orientation: portrait) and (min-resolution: 300dpi) {
+  .toolbar {
+    background-image: url('chrome://browser/skin/images/reader-toolbar-bg-port-xhdpi.png');
+  }
+
+  .share-button {
+    background-image: url('chrome://browser/skin/images/reader-share-icon-port-xhdpi.png');
+  }
+
+  .style-button {
+    background-image: url('chrome://browser/skin/images/reader-style-icon-port-xhdpi.png');
+  }
+}
+
+@media screen and (orientation: landscape) and (min-resolution: 300dpi) {
+  .toolbar {
+    background-image: url('chrome://browser/skin/images/reader-toolbar-bg-land-xhdpi.png');
+  }
+
+  .share-button {
+    background-image: url('chrome://browser/skin/images/reader-share-icon-land-xhdpi.png');
+  }
+
+  .style-button {
+    background-image: url('chrome://browser/skin/images/reader-style-icon-land-xhdpi.png');
+  }
+}
+
+@media screen and (min-width: 960px) and (min-resolution: 200dpi) {
+  .toolbar {
+    background-image: url('chrome://browser/skin/images/reader-toolbar-bg-xlarge-hdpi.png');
+  }
+
+  .share-button {
+    background-image: url('chrome://browser/skin/images/reader-share-icon-xlarge-hdpi.png');
+  }
+
+  .style-button {
+    background-image: url('chrome://browser/skin/images/reader-style-icon-xlarge-hdpi.png');
+  }
+}
+
+@media screen and (min-width: 960px) and (min-resolution: 300dpi) {
+  .toolbar {
+    background-image: url('chrome://browser/skin/images/reader-toolbar-bg-xlarge-xhdpi.png');
+  }
+
+  .share-button {
+    background-image: url('chrome://browser/skin/images/reader-share-icon-xlarge-xhdpi.png');
+  }
+
+  .style-button {
+    background-image: url('chrome://browser/skin/images/reader-style-icon-xlarge-xhdpi.png');
+  }
+}
--- a/mobile/android/themes/core/images/reader-dropdown-arrow.png
+++ b/mobile/android/themes/core/images/reader-dropdown-arrow.png
--- a/mobile/android/themes/core/images/reader-minus-icon-hdpi.png
+++ b/mobile/android/themes/core/images/reader-minus-icon-hdpi.png
--- a/mobile/android/themes/core/images/reader-minus-icon-mdpi.png
+++ b/mobile/android/themes/core/images/reader-minus-icon-mdpi.png
--- a/mobile/android/themes/core/images/reader-minus-icon-xhdpi.png
+++ b/mobile/android/themes/core/images/reader-minus-icon-xhdpi.png
--- a/mobile/android/themes/core/images/reader-plus-icon-hdpi.png
+++ b/mobile/android/themes/core/images/reader-plus-icon-hdpi.png
--- a/mobile/android/themes/core/images/reader-plus-icon-mdpi.png
+++ b/mobile/android/themes/core/images/reader-plus-icon-mdpi.png
--- a/mobile/android/themes/core/images/reader-plus-icon-xhdpi.png
+++ b/mobile/android/themes/core/images/reader-plus-icon-xhdpi.png
--- a/mobile/android/themes/core/images/reader-share-icon-land-hdpi.png
+++ b/mobile/android/themes/core/images/reader-share-icon-land-hdpi.png
--- a/mobile/android/themes/core/images/reader-share-icon-land-mdpi.png
+++ b/mobile/android/themes/core/images/reader-share-icon-land-mdpi.png
--- a/mobile/android/themes/core/images/reader-share-icon-land-xhdpi.png
+++ b/mobile/android/themes/core/images/reader-share-icon-land-xhdpi.png
--- a/mobile/android/themes/core/images/reader-share-icon-port-hdpi.png
+++ b/mobile/android/themes/core/images/reader-share-icon-port-hdpi.png
--- a/mobile/android/themes/core/images/reader-share-icon-port-mdpi.png
+++ b/mobile/android/themes/core/images/reader-share-icon-port-mdpi.png
--- a/mobile/android/themes/core/images/reader-share-icon-port-xhdpi.png
+++ b/mobile/android/themes/core/images/reader-share-icon-port-xhdpi.png
--- a/mobile/android/themes/core/images/reader-share-icon-xlarge-hdpi.png
+++ b/mobile/android/themes/core/images/reader-share-icon-xlarge-hdpi.png
--- a/mobile/android/themes/core/images/reader-share-icon-xlarge-mdpi.png
+++ b/mobile/android/themes/core/images/reader-share-icon-xlarge-mdpi.png
--- a/mobile/android/themes/core/images/reader-share-icon-xlarge-xhdpi.png
+++ b/mobile/android/themes/core/images/reader-share-icon-xlarge-xhdpi.png
--- a/mobile/android/themes/core/images/reader-style-icon-land-hdpi.png
+++ b/mobile/android/themes/core/images/reader-style-icon-land-hdpi.png
--- a/mobile/android/themes/core/images/reader-style-icon-land-mdpi.png
+++ b/mobile/android/themes/core/images/reader-style-icon-land-mdpi.png
--- a/mobile/android/themes/core/images/reader-style-icon-land-xhdpi.png
+++ b/mobile/android/themes/core/images/reader-style-icon-land-xhdpi.png
--- a/mobile/android/themes/core/images/reader-style-icon-port-hdpi.png
+++ b/mobile/android/themes/core/images/reader-style-icon-port-hdpi.png
--- a/mobile/android/themes/core/images/reader-style-icon-port-mdpi.png
+++ b/mobile/android/themes/core/images/reader-style-icon-port-mdpi.png
--- a/mobile/android/themes/core/images/reader-style-icon-port-xhdpi.png
+++ b/mobile/android/themes/core/images/reader-style-icon-port-xhdpi.png
--- a/mobile/android/themes/core/images/reader-style-icon-xlarge-hdpi.png
+++ b/mobile/android/themes/core/images/reader-style-icon-xlarge-hdpi.png
--- a/mobile/android/themes/core/images/reader-style-icon-xlarge-mdpi.png
+++ b/mobile/android/themes/core/images/reader-style-icon-xlarge-mdpi.png
--- a/mobile/android/themes/core/images/reader-style-icon-xlarge-xhdpi.png
+++ b/mobile/android/themes/core/images/reader-style-icon-xlarge-xhdpi.png
--- a/mobile/android/themes/core/images/reader-toolbar-bg-land-hdpi.png
+++ b/mobile/android/themes/core/images/reader-toolbar-bg-land-hdpi.png
--- a/mobile/android/themes/core/images/reader-toolbar-bg-land-mdpi.png
+++ b/mobile/android/themes/core/images/reader-toolbar-bg-land-mdpi.png
--- a/mobile/android/themes/core/images/reader-toolbar-bg-land-xhdpi.png
+++ b/mobile/android/themes/core/images/reader-toolbar-bg-land-xhdpi.png
--- a/mobile/android/themes/core/images/reader-toolbar-bg-port-hdpi.png
+++ b/mobile/android/themes/core/images/reader-toolbar-bg-port-hdpi.png
--- a/mobile/android/themes/core/images/reader-toolbar-bg-port-mdpi.png
+++ b/mobile/android/themes/core/images/reader-toolbar-bg-port-mdpi.png
--- a/mobile/android/themes/core/images/reader-toolbar-bg-port-xhdpi.png
+++ b/mobile/android/themes/core/images/reader-toolbar-bg-port-xhdpi.png
--- a/mobile/android/themes/core/images/reader-toolbar-bg-xlarge-hdpi.png
+++ b/mobile/android/themes/core/images/reader-toolbar-bg-xlarge-hdpi.png
--- a/mobile/android/themes/core/images/reader-toolbar-bg-xlarge-mdpi.png
+++ b/mobile/android/themes/core/images/reader-toolbar-bg-xlarge-mdpi.png
--- a/mobile/android/themes/core/images/reader-toolbar-bg-xlarge-xhdpi.png
+++ b/mobile/android/themes/core/images/reader-toolbar-bg-xlarge-xhdpi.png
--- a/mobile/android/themes/core/jar.mn
+++ b/mobile/android/themes/core/jar.mn
@ -51,5 +51,39 @@ chrome.jar:
  skin/images/row-bg-light.png              (images/row-bg-light.png)
  skin/images/row-bg-normal.png             (images/row-bg-normal.png)
  skin/images/addons-amo-hdpi.png           (images/addons-amo-hdpi.png)
+  skin/images/reader-dropdown-arrow.png     (images/reader-dropdown-arrow.png)
+  skin/images/reader-plus-icon-mdpi.png     (images/reader-plus-icon-mdpi.png)
+  skin/images/reader-plus-icon-hdpi.png     (images/reader-plus-icon-hdpi.png)
+  skin/images/reader-plus-icon-xhdpi.png    (images/reader-plus-icon-xhdpi.png)
+  skin/images/reader-minus-icon-mdpi.png    (images/reader-minus-icon-mdpi.png)
+  skin/images/reader-minus-icon-hdpi.png    (images/reader-minus-icon-hdpi.png)
+  skin/images/reader-minus-icon-xhdpi.png   (images/reader-minus-icon-xhdpi.png)
+  skin/images/reader-share-icon-port-mdpi.png    (images/reader-share-icon-port-mdpi.png)
+  skin/images/reader-share-icon-land-mdpi.png    (images/reader-share-icon-land-mdpi.png)
+  skin/images/reader-share-icon-xlarge-mdpi.png  (images/reader-share-icon-xlarge-mdpi.png)
+  skin/images/reader-share-icon-port-hdpi.png    (images/reader-share-icon-port-hdpi.png)
+  skin/images/reader-share-icon-land-hdpi.png    (images/reader-share-icon-land-hdpi.png)
+  skin/images/reader-share-icon-xlarge-hdpi.png  (images/reader-share-icon-xlarge-hdpi.png)
+  skin/images/reader-share-icon-port-xhdpi.png   (images/reader-share-icon-port-xhdpi.png)
+  skin/images/reader-share-icon-land-xhdpi.png   (images/reader-share-icon-land-xhdpi.png)
+  skin/images/reader-share-icon-xlarge-xhdpi.png (images/reader-share-icon-xlarge-xhdpi.png)
+  skin/images/reader-style-icon-port-mdpi.png    (images/reader-style-icon-port-mdpi.png)
+  skin/images/reader-style-icon-land-mdpi.png    (images/reader-style-icon-land-mdpi.png)
+  skin/images/reader-style-icon-xlarge-mdpi.png  (images/reader-style-icon-xlarge-mdpi.png)
+  skin/images/reader-style-icon-port-hdpi.png    (images/reader-style-icon-port-hdpi.png)
+  skin/images/reader-style-icon-land-hdpi.png    (images/reader-style-icon-land-hdpi.png)
+  skin/images/reader-style-icon-xlarge-hdpi.png  (images/reader-style-icon-xlarge-hdpi.png)
+  skin/images/reader-style-icon-port-xhdpi.png   (images/reader-style-icon-port-xhdpi.png)
+  skin/images/reader-style-icon-land-xhdpi.png   (images/reader-style-icon-land-xhdpi.png)
+  skin/images/reader-style-icon-xlarge-xhdpi.png (images/reader-style-icon-xlarge-xhdpi.png)
+  skin/images/reader-toolbar-bg-port-mdpi.png    (images/reader-toolbar-bg-port-mdpi.png)
+  skin/images/reader-toolbar-bg-land-mdpi.png    (images/reader-toolbar-bg-land-mdpi.png)
+  skin/images/reader-toolbar-bg-xlarge-mdpi.png  (images/reader-toolbar-bg-xlarge-mdpi.png)
+  skin/images/reader-toolbar-bg-port-hdpi.png    (images/reader-toolbar-bg-port-hdpi.png)
+  skin/images/reader-toolbar-bg-land-hdpi.png    (images/reader-toolbar-bg-land-hdpi.png)
+  skin/images/reader-toolbar-bg-xlarge-hdpi.png  (images/reader-toolbar-bg-xlarge-hdpi.png)
+  skin/images/reader-toolbar-bg-port-xhdpi.png   (images/reader-toolbar-bg-port-xhdpi.png)
+  skin/images/reader-toolbar-bg-land-xhdpi.png   (images/reader-toolbar-bg-land-xhdpi.png)
+  skin/images/reader-toolbar-bg-xlarge-xhdpi.png (images/reader-toolbar-bg-xlarge-xhdpi.png)
  skin/images/handle-start.png              (images/handle-start.png)
  skin/images/handle-end.png                (images/handle-end.png)