Bug 1120735 - Implement desktop reader mode controls. r=jaws,bnicholson
authorMargaret Leibovic <margaret.leibovic@gmail.com>
Wed, 21 Jan 2015 17:21:11 -0800
changeset 228959 5ee524df8201f26cc90a8febe7812d652a4f7016
parent 228958 0fe086880779ac1232eca6c54ac78a2304b7f81f
child 228960 0b63903a6f41f75a8edbcc136541490289598da6
push id28275
push userryanvm@gmail.com
push dateFri, 13 Feb 2015 17:13:18 +0000
treeherdermozilla-central@aa339e258ccd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, bnicholson
bugs1120735
milestone38.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1120735 - Implement desktop reader mode controls. r=jaws,bnicholson
mobile/android/app/mobile.js
mobile/android/themes/core/aboutReader.css
modules/libpref/init/all.js
toolkit/components/reader/AboutReader.jsm
toolkit/components/reader/content/aboutReader.html
toolkit/locales/en-US/chrome/global/aboutReader.properties
toolkit/themes/osx/global/jar.mn
toolkit/themes/shared/reader/RM-Add-24x24.svg
toolkit/themes/shared/reader/RM-Close-24x24.svg
toolkit/themes/shared/reader/RM-Close-hover-24x24.svg
toolkit/themes/shared/reader/RM-Delete-24x24.svg
toolkit/themes/shared/reader/RM-Reading-List-24x24.svg
toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg
toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg
toolkit/themes/windows/global/aboutReader.css
toolkit/themes/windows/global/jar.mn
--- a/mobile/android/app/mobile.js
+++ b/mobile/android/app/mobile.js
@@ -849,8 +849,20 @@ pref("dom.meta-viewport.enabled", true);
 
 // Enable the OpenH264 plugin support in the addon manager.
 pref("media.gmp-gmpopenh264.provider.enabled", true);
 
 // The default color scheme in reader mode (light, dark, auto)
 // auto = color automatically adjusts according to ambient light level
 // (auto only works on platforms where the 'devicelight' event is enabled)
 pref("reader.color_scheme", "auto");
+
+// Color scheme values available in reader mode UI.
+pref("reader.color_scheme.values", "[\"light\",\"dark\",\"auto\"]");
+
+// The font type in reader (charis-sil, clear-sans)
+pref("reader.font_type", "clear-sans");
+
+// Font type values available in reader mode UI.
+pref("reader.font_type.values", "[\"charis-sil\",\"clear-sans\"]");
+
+// Whether to use a vertical or horizontal toolbar.
+pref("reader.toolbar.vertical", false);
--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@@ -20,21 +20,21 @@ body {
   color: #222222;
 }
 
 .dark {
   background-color: #000000;
   color: #eeeeee;
 }
 
-.sans-serif {
+.clear-sans {
   font-family: sans-serif;
 }
 
-.serif {
+.charis-sil {
   font-family: serif;
 }
 
 .message {
   margin-top: 40px;
   display: none;
   text-align: center;
   width: 100%;
@@ -102,71 +102,71 @@ body {
 .dark > .header > h1 {
   color: #eeeeee;
 }
 
 .dark > .header > .credits {
   color: #aaaaaa;
 }
 
-.font-size1 > .header > h1 {
+.font-size1 > body > .header > h1 {
   font-size: 27px;
 }
 
-.font-size2 > .header > h1 {
+.font-size2 > body > .header > h1 {
   font-size: 29px;
 }
 
-.font-size3 > .header > h1 {
+.font-size3 > body > .header > h1 {
   font-size: 31px;
 }
 
-.font-size4 > .header > h1 {
+.font-size4 > body > .header > h1 {
   font-size: 33px;
 }
 
-.font-size5 > .header > h1 {
+.font-size5 > body > .header > h1 {
   font-size: 35px;
 }
 
 /* This covers caption, domain, and credits
    texts in the reader UI */
 
-.font-size1 > .content .wp-caption-text,
-.font-size1 > .content figcaption,
-.font-size1 > .header > .domain,
-.font-size1 > .header > .credits {
+.font-size1 > body > .content .wp-caption-text,
+.font-size1 > body > .content figcaption,
+.font-size1 > body > .header > .domain,
+.font-size1 > body > .header > .credits {
   font-size: 10px;
 }
 
-.font-size2 > .content .wp-caption-text,
-.font-size2 > .content figcaption,
-.font-size2 > .header > .domain,
-.font-size2 > .header > .credits {
+.font-size2 > body > .content .wp-caption-text,
+.font-size2 > body > .content figcaption,
+.font-size2 > body > .header > .domain,
+.font-size2 > body > .header > .credits {
   font-size: 13px;
 }
 
-.font-size3 > .content .wp-caption-text,
-.font-size3 > .content figcaption,
-.font-size3 > .header > .domain,
-.font-size3 > .header > .credits {
+.font-size3 > body > .content .wp-caption-text,
+.font-size3 > body > .content figcaption,
+.font-size3 > body > .header > .domain,
+.font-size3 > body > .header > .credits {
   font-size: 15px;
 }
 
-.font-size4 > .content .wp-caption-text,
-.font-size4 > .content figcaption,
-.font-size4 > .header > .domain,
-.font-size4 > .header > .credits {
+.font-size4 > body > .content .wp-caption-text,
+.font-size4 > body > .content figcaption,
+.font-size4 > body > .header > .domain,
+.font-size4 > body > .header > .credits {
   font-size: 17px;
 }
 
-.font-size5 > .content .wp-caption-text,
-.font-size5 > .content figcaption,
-.font-size5 > .header > .domain,
-.font-size5 > .header > .credits {
+.font-size5 > body > .content .wp-caption-text,
+.font-size5 > body > .content figcaption,
+.font-size5 > body > .header > .domain,
+.font-size5 > body > .header > .credits {
   font-size: 19px;
 }
 
 .content {
   display: none;
 }
 
 .content a {
@@ -291,37 +291,37 @@ body {
 }
 
 .content ol {
   -moz-padding-start: 35px !important;
   list-style: decimal !important;
 }
 
 .font-size1-sample,
-.font-size1 > .content {
+.font-size1 > body > .content {
   font-size: 14px !important;
 }
 
 .font-size2-sample,
-.font-size2 > .content {
+.font-size2 > body > .content {
   font-size: 16px !important;
 }
 
 .font-size3-sample,
-.font-size3 > .content {
+.font-size3 > body > .content {
   font-size: 18px !important;
 }
 
 .font-size4-sample,
-.font-size4 > .content {
+.font-size4 > body > .content {
   font-size: 20px !important;
 }
 
 .font-size5-sample,
-.font-size5 > .content {
+.font-size5 > body > .content {
   font-size: 22px !important;
 }
 
 .toolbar {
   font-family: "Clear Sans",sans-serif;
   transition-property: visibility, opacity;
   transition-duration: 0.7s;
   visibility: visible;
@@ -483,16 +483,22 @@ body {
   font-weight: lighter;
 }
 
 #font-type-buttons > li > div {
   color: #666;
   font-size: 12px;
 }
 
+ /* desktop-only controls */
+.close-button,
+.list-button {
+  display: none;
+}
+
 .toggle-button.on {
   background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-mdpi.png');
 }
 
 .toggle-button {
   background-image: url('chrome://browser/skin/images/reader-toggle-off-icon-mdpi.png');
 }
 
--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@@ -4537,21 +4537,30 @@ pref("reader.parse-on-load.force-enabled
 // The default relative font size in reader mode (1-5)
 pref("reader.font_size", 3);
 
 // The default color scheme in reader mode (light, dark, sepia, auto)
 // auto = color automatically adjusts according to ambient light level
 // (auto only works on platforms where the 'devicelight' event is enabled)
 pref("reader.color_scheme", "light");
 
+// Color scheme values available in reader mode UI.
+pref("reader.color_scheme.values", "[\"light\",\"dark\",\"sepia\"]");
+
 // The font type in reader (sans-serif, serif)
 pref("reader.font_type", "sans-serif");
 
+// Font type values available in reader mode UI.
+pref("reader.font_type.values", "[\"serif\",\"sans-serif\"]");
+
 // Whether or not the user has interacted with the reader mode toolbar.
 // This is used to show a first-launch tip in reader mode.
 pref("reader.has_used_toolbar", false);
 
+// Whether to use a vertical or horizontal toolbar.
+pref("reader.toolbar.vertical", true);
+
 #if defined(XP_LINUX) && defined(MOZ_GMP_SANDBOX)
 // Whether to allow, on a Linux system that doesn't support the necessary sandboxing
 // features, loading Gecko Media Plugins unsandboxed.  However, EME CDMs will not be
 // loaded without sandboxing even if this pref is changed.
 pref("media.gmp.insecure.allow", false);
 #endif
--- a/toolkit/components/reader/AboutReader.jsm
+++ b/toolkit/components/reader/AboutReader.jsm
@@ -51,44 +51,39 @@ let AboutReader = function(mm, win) {
 
   win.addEventListener("unload", this, false);
   win.addEventListener("scroll", this, false);
   win.addEventListener("resize", this, false);
 
   doc.addEventListener("visibilitychange", this, false);
 
   this._setupStyleDropdown();
+  this._setupButton("close-button", this._onReaderClose.bind(this));
   this._setupButton("toggle-button", this._onReaderToggle.bind(this));
   this._setupButton("share-button", this._onShare.bind(this));
 
-  let colorSchemeOptions = [
-    { name: gStrings.GetStringFromName("aboutReader.colorSchemeDark"),
-      value: "dark"},
-    { name: gStrings.GetStringFromName("aboutReader.colorSchemeLight"),
-      value: "light"},
-    { name: gStrings.GetStringFromName("aboutReader.colorSchemeAuto"),
-      value: "auto"}
-  ];
+  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.fontTypeSerif"),
-      value: "serif",
-      linkClass: "serif" },
-    { name: fontTypeSample,
-      description: gStrings.GetStringFromName("aboutReader.fontTypeSansSerif"),
-      value: "sans-serif",
-      linkClass: "sans-serif"
-    },
-  ];
+  let fontTypeValues = JSON.parse(Services.prefs.getCharPref("reader.font_type.values"));
+  let fontTypeOptions = fontTypeValues.map((value) => {
+    return { name: fontTypeSample,
+             description: gStrings.GetStringFromName("aboutReader.fontType." + value),
+             value: value,
+             linkClass: value };
+  });
 
   let fontType = Services.prefs.getCharPref("reader.font_type");
   this._setupSegmentedButton("font-type-buttons", fontTypeOptions, fontType, this._setFontType.bind(this));
   this._setFontType(fontType);
 
   let fontSizeSample = gStrings.GetStringFromName("aboutReader.fontSizeSample");
   let fontSizeOptions = [
     { name: fontSizeSample,
@@ -107,23 +102,21 @@ let AboutReader = function(mm, win) {
       value: 5,
       linkClass: "font-size5-sample" }
   ];
 
   let fontSize = Services.prefs.getIntPref("reader.font_size");
   this._setupSegmentedButton("font-size-buttons", fontSizeOptions, fontSize, this._setFontSize.bind(this));
   this._setFontSize(fontSize);
 
-  let queryArgs = this._decodeQueryString(win.location.href);
-
   // Track status of reader toolbar add/remove toggle button
   this._isReadingListItem = -1;
   this._updateToggleButton();
 
-  this._loadArticle(queryArgs.url);
+  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",
 
@@ -158,16 +151,23 @@ AboutReader.prototype = {
   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");
+  },
+
   receiveMessage: function (message) {
     switch (message.name) {
       case "Reader:Added": {
         // Page can be added by long-press pageAction, or by tap on banner icon.
         if (message.data.url == this._article.url) {
           if (this._isReadingListItem != 1) {
             this._isReadingListItem = 1;
             this._updateToggleButton();
@@ -248,16 +248,20 @@ AboutReader.prototype = {
         }
       }
     };
 
     this._mm.addMessageListener("Reader:ListStatusData", handleListStatusData);
     this._mm.sendAsyncMessage("Reader:ListStatusRequest", { url: this._article.url });
   },
 
+  _onReaderClose: function Reader_onToggle() {
+    this._win.location.href = this._getOriginalUrl();
+  },
+
   _onReaderToggle: function Reader_onToggle() {
     if (!this._article)
       return;
 
     if (this._isReadingListItem == 0) {
       this._mm.sendAsyncMessage("Reader:AddToList", { article: this._article });
       UITelemetry.addEvent("save.1", "button", null, "reader");
     } else {
@@ -273,23 +277,23 @@ AboutReader.prototype = {
     this._mm.sendAsyncMessage("Reader:Share", {
       url: this._article.url,
       title: this._article.title
     });
     UITelemetry.addEvent("share.1", "list", null);
   },
 
   _setFontSize: function Reader_setFontSize(newFontSize) {
-    let bodyClasses = this._doc.body.classList;
+    let htmlClasses = this._doc.documentElement.classList;
 
     if (this._fontSize > 0)
-      bodyClasses.remove("font-size" + this._fontSize);
+      htmlClasses.remove("font-size" + this._fontSize);
 
     this._fontSize = newFontSize;
-    bodyClasses.add("font-size" + this._fontSize);
+    htmlClasses.add("font-size" + this._fontSize);
 
     Services.prefs.setIntPref("reader.font_size", this._fontSize);
   },
 
   _handleDeviceLight: function Reader_handleDeviceLight(newLux) {
     // Desired size of the this._luxValues array.
     let luxValuesSize = 10;
     // Add new lux value at the front of the array.
@@ -433,17 +437,18 @@ AboutReader.prototype = {
   _setBrowserToolbarVisiblity: function Reader_setBrowserToolbarVisiblity(visible) {
     this._mm.sendAsyncMessage("Reader:ToolbarVisibility", { visible: visible });
   },
 
   _setSystemUIVisibility: function Reader_setSystemUIVisibility(visible) {
     this._mm.sendAsyncMessage("Reader:SystemUIVisibility", { visible: visible });
   },
 
-  _loadArticle: Task.async(function* (url) {
+  _loadArticle: Task.async(function* () {
+    let url = this._getOriginalUrl();
     this._showProgressDelayed();
 
     let article = yield this._getArticle(url);
     if (article && article.url == url) {
       this._showContent(article);
     } else {
       this._win.location.href = url;
     }
@@ -612,55 +617,57 @@ AboutReader.prototype = {
       this._headerElement.style.display = "none";
       this._contentElement.style.display = "none";
 
       this._messageElement.innerHTML = gStrings.GetStringFromName("aboutReader.loading");
       this._messageElement.style.display = "block";
     }.bind(this), 300);
   },
 
-  _decodeQueryString: function Reader_decodeQueryString(url) {
-    let result = {};
-    let query = url.split("?")[1];
-    if (query) {
-      let pairs = query.split("&");
-      for (let i = 0; i < pairs.length; i++) {
-        let [name, value] = pairs[i].split("=");
-        result[name] = decodeURIComponent(value);
-      }
+  /**
+   * Returns the original article URL for this about:reader view.
+   */
+  _getOriginalUrl: function() {
+    let url = this._win.location.href;
+    let searchParams = new URLSearchParams(url.split("?")[1]);
+    if (!searchParams.has("url")) {
+      Cu.reportError("Error finding original URL for about:reader URL: " + url);
+      return url;
     }
-
-    return result;
+    return decodeURIComponent(searchParams.get("url"));
   },
 
   _setupSegmentedButton: function Reader_setupSegmentedButton(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("li");
       let link = doc.createElement("a");
       link.textContent = option.name;
       item.appendChild(link);
 
+      if (option.itemClass !== undefined)
+        item.classList.add(option.itemClass);
+
       if (option.linkClass !== undefined)
         link.classList.add(option.linkClass);
 
       if (option.description !== undefined) {
         let description = doc.createElement("div");
         description.textContent = option.description;
         item.appendChild(description);
       }
 
       link.style.MozUserSelect = 'none';
       segmentedButton.appendChild(item);
 
-      link.addEventListener("click", function(aEvent) {
+      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);
@@ -691,53 +698,57 @@ AboutReader.prototype = {
     }, true);
   },
 
   _setupStyleDropdown: function Reader_setupStyleDropdown() {
     let doc = this._doc;
     let win = this._win;
 
     let dropdown = doc.getElementById("style-dropdown");
-
     let dropdownToggle = dropdown.querySelector(".dropdown-toggle");
     let dropdownPopup = dropdown.querySelector(".dropdown-popup");
     let dropdownArrow = dropdown.querySelector(".dropdown-arrow");
 
-    let updatePopupPosition = function() {
-      let popupWidth = dropdownPopup.offsetWidth + 30;
-      let arrowWidth = dropdownArrow.offsetWidth;
-      let toggleWidth = dropdownToggle.offsetWidth;
-      let toggleLeft = dropdownToggle.offsetLeft;
+    let updatePopupPosition = () => {
+      if (this._isToolbarVertical) {
+        let toggleHeight = dropdownToggle.offsetHeight;
+        let toggleTop = dropdownToggle.offsetTop;
+        let popupTop = toggleTop - toggleHeight / 2;
+        dropdownPopup.style.top = popupTop + "px";
+      } else {
+        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(win.innerWidth - popupWidth, toggleLeft + popupShift));
-      dropdownPopup.style.left = popupLeft + "px";
+        let popupShift = (toggleWidth - popupWidth) / 2;
+        let popupLeft = Math.max(0, Math.min(win.innerWidth - popupWidth, toggleLeft + popupShift));
+        dropdownPopup.style.left = popupLeft + "px";
 
-      let arrowShift = (toggleWidth - arrowWidth) / 2;
-      let arrowLeft = toggleLeft - popupLeft + arrowShift;
-      dropdownArrow.style.left = arrowLeft + "px";
+        let arrowShift = (toggleWidth - arrowWidth) / 2;
+        let arrowLeft = toggleLeft - popupLeft + arrowShift;
+        dropdownArrow.style.left = arrowLeft + "px";
+      }
     };
 
     win.addEventListener("resize", event => {
       if (!event.isTrusted)
         return;
 
       // Wait for reflow before calculating the new position of the popup.
       win.setTimeout(updatePopupPosition, 0);
     }, true);
 
     dropdownToggle.addEventListener("click", event => {
       if (!event.isTrusted)
         return;
 
       event.stopPropagation();
 
-      if (!this._getToolbarVisibility())
-        return;
-
       if (dropdown.classList.contains("open")) {
         dropdown.classList.remove("open");
       } else {
         dropdown.classList.add("open");
+        updatePopupPosition();
       }
     }, true);
-  }
+  },
 };
--- a/toolkit/components/reader/content/aboutReader.html
+++ b/toolkit/components/reader/content/aboutReader.html
@@ -20,26 +20,28 @@
 
   <div id="reader-content" class="content">
   </div>
 
   <div id="reader-message" class="message">
   </div>
 
   <ul id="reader-toolbar" class="toolbar toolbar-hidden">
+    <li><a id="close-button" class="button close-button" href="#"></a></li>
     <li><a id="share-button" class="button share-button" href="#"></a></li>
     <ul id="style-dropdown" class="dropdown">
       <li><a class="dropdown-toggle button style-button" href="#"></a></li>
       <li class="dropdown-popup">
         <ul id="font-type-buttons"></ul>
         <hr></hr>
         <ul id="font-size-buttons" class="segmented-button"></ul>
         <hr></hr>
         <ul id="color-scheme-buttons" class="segmented-button"></ul>
         <div class="dropdown-arrow"/>
       </li>
     </ul>
     <li><a id="toggle-button" class="button toggle-button" href="#"></a></li>
+    <li><a id="list-button" class="button list-button" href="#"></a></li>
   </ul>
 
 </body>
 
 </html>
--- a/toolkit/locales/en-US/chrome/global/aboutReader.properties
+++ b/toolkit/locales/en-US/chrome/global/aboutReader.properties
@@ -1,24 +1,29 @@
 # 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/.
 
 aboutReader.loading=Loading...
 aboutReader.loadError=Failed to load article from page
 
-aboutReader.colorSchemeLight=Light
-aboutReader.colorSchemeDark=Dark
-aboutReader.colorSchemeSepia=Sepia
-aboutReader.colorSchemeAuto=Auto
+aboutReader.colorScheme.light=Light
+aboutReader.colorScheme.dark=Dark
+aboutReader.colorScheme.sepia=Sepia
+aboutReader.colorScheme.auto=Auto
 
-# LOCALIZATION NOTE (aboutReader.fontTypeSerif, aboutReader.fontTypeSansSerif):
-# These are the names of the fonts that are used.
-aboutReader.fontTypeSerif=Charis SIL Compact
-aboutReader.fontTypeSansSerif=Clear Sans
+# LOCALIZATION NOTE (aboutReader.fontType.serif, aboutReader.fontType.sans-serif):
+# These are the styles of typeface that are used on desktop.
+aboutReader.fontType.serif=Serif
+aboutReader.fontType.sans-serif=Sans-serif
+
+# LOCALIZATION NOTE (aboutReader.fontType.charis-sil, aboutReader.fontType.clear-sans):
+# These are the names of the fonts that are used on Android
+aboutReader.fontType.charis-sil=Charis SIL Compact
+aboutReader.fontType.clear-sans=Clear Sans
 
 # LOCALIZATION NOTE (aboutReader.fontTypeSample): String used to sample font types.
 aboutReader.fontTypeSample=Aa
 
 # LOCALIZATION NOTE (aboutReader.fontSizeSample): String used to sample a relative font size
 # for the font size setting. Tapping different samples will change the font size.
 aboutReader.fontSizeSample=A
 
--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@@ -191,16 +191,23 @@ toolkit.jar:
 * skin/classic/global/in-content/info-pages.css                      (in-content/info-pages.css)
   skin/classic/global/in-content/check.svg                           (../../shared/in-content/check.svg)
   skin/classic/global/in-content/check-partial.svg                   (../../shared/in-content/check-partial.svg)
   skin/classic/global/in-content/dropdown.svg                        (../../shared/in-content/dropdown.svg)
   skin/classic/global/in-content/help-glyph.svg                      (../../shared/in-content/help-glyph.svg)
   skin/classic/global/in-content/radio.svg                           (../../shared/in-content/radio.svg)
   skin/classic/global/in-content/sorter.png                          (../../shared/in-content/sorter.png)
   skin/classic/global/in-content/sorter@2x.png                       (../../shared/in-content/sorter@2x.png)
+  skin/classic/global/reader/RM-Add-24x24.svg                        (../../shared/reader/RM-Add-24x24.svg)
+  skin/classic/global/reader/RM-Close-24x24.svg                      (../../shared/reader/RM-Close-24x24.svg)
+  skin/classic/global/reader/RM-Close-hover-24x24.svg                (../../shared/reader/RM-Close-hover-24x24.svg)
+  skin/classic/global/reader/RM-Delete-24x24.svg                     (../../shared/reader/RM-Delete-24x24.svg)
+  skin/classic/global/reader/RM-Reading-List-24x24.svg               (../../shared/reader/RM-Reading-List-24x24.svg)
+  skin/classic/global/reader/RM-Type-Controls-24x24.svg              (../../shared/reader/RM-Type-Controls-24x24.svg)
+  skin/classic/global/reader/RM-Type-Controls-Arrow.svg              (../../shared/reader/RM-Type-Controls-Arrow.svg)
   skin/classic/global/scale/scale-tray-horiz.gif                     (scale/scale-tray-horiz.gif)
   skin/classic/global/scale/scale-tray-vert.gif                      (scale/scale-tray-vert.gif)
   skin/classic/global/splitter/dimple.png                            (splitter/dimple.png)
   skin/classic/global/splitter/grip-bottom.gif                       (splitter/grip-bottom.gif)
   skin/classic/global/splitter/grip-top.gif                          (splitter/grip-top.gif)
   skin/classic/global/splitter/grip-left.gif                         (splitter/grip-left.gif)
   skin/classic/global/splitter/grip-right.gif                        (splitter/grip-right.gif)
   skin/classic/global/toolbar/spring.png                             (toolbar/spring.png)
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Add-24x24.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#808080" d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10s10-4.477,10-10
+    C22,6.477,17.523,2,12,2z M17.714,12.714h-5v5h-1.429v-5h-5v-1.429h5v-5h1.429v5h5V12.714z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Close-24x24.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+      viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#808080" points="20,6.748 17.338,4.079 12.038,9.391 6.661,4 4,6.669
+        9.377,12.059 4.157,17.292 6.819,19.961 12.039,14.728 17.298,20 19.959,17.331 14.701,12.06 	"/>
+</g>
+</svg>
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Close-hover-24x24.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="20,6.748 17.338,4.079 12.038,9.391 6.661,4 4,6.669
+        9.377,12.059 4.157,17.292 6.819,19.961 12.039,14.728 17.298,20 19.959,17.331 14.701,12.06 	"/>
+</g>
+</svg>
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Delete-24x24.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#808080" d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10s10-4.477,10-10
+    C22,6.477,17.523,2,12,2z M11.286,6.286 M6.286,12.714v-1.429h11.429v1.429H6.286z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Reading-List-24x24.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+    <rect x="8" y="10" fill-rule="evenodd" clip-rule="evenodd" fill="#808080" width="14" height="4"/>
+    <rect x="8" y="16" fill-rule="evenodd" clip-rule="evenodd" fill="#808080" width="14" height="4"/>
+    <rect x="8" y="4" fill-rule="evenodd" clip-rule="evenodd" fill="#808080" width="14" height="4"/>
+    <circle fill-rule="evenodd" clip-rule="evenodd" fill="#808080" cx="4" cy="6" r="2"/>
+    <circle fill-rule="evenodd" clip-rule="evenodd" fill="#808080" cx="4" cy="12" r="2"/>
+    <circle fill-rule="evenodd" clip-rule="evenodd" fill="#808080" cx="4" cy="18" r="2"/>
+</g>
+<g enable-background="new    ">
+    <g>
+        <defs>
+            <rect id="SVGID_2_" x="-197" y="-1054" width="22" height="34"/>
+        </defs>
+        <clipPath id="SVGID_1_">
+            <use xlink:href="#SVGID_2_"  overflow="visible"/>
+        </clipPath>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_6_" x="-293" y="-1459" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_3_">
+                <use xlink:href="#SVGID_6_"  overflow="visible"/>
+            </clipPath>
+        </g>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_10_" x="-293" y="-1459" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_5_">
+                <use xlink:href="#SVGID_10_"  overflow="visible"/>
+            </clipPath>
+        </g>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_16_" x="-293" y="-1459" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_7_">
+                <use xlink:href="#SVGID_16_"  overflow="visible"/>
+            </clipPath>
+        </g>
+    </g>
+</g>
+</svg>
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+    <path fill="#808080" d="M8.23,18.748v-1.016l1.182-0.146c0.065-0.013,0.12-0.055,0.166-0.127s0.052-0.143,0.02-0.215L8.513,14.07
+        H4.236l-1.104,3.096c-0.039,0.104-0.02,0.199,0.059,0.283s0.153,0.13,0.225,0.137l1.123,0.146v1.016H0.232v-1.016l1.123-0.166
+        L5.837,5.008h2.275l4.443,12.197c0.052,0.124,0.103,0.21,0.151,0.259s0.145,0.089,0.288,0.122l0.762,0.146v1.016H8.23z
+         M6.296,8.084l-1.68,4.805h3.398L6.296,8.084z"/>
+    <path fill="#808080" d="M20.05,18.748l-0.264-0.996c-0.345,0.234-0.706,0.443-1.083,0.625c-0.331,0.156-0.702,0.298-1.112,0.425
+        c-0.409,0.127-0.835,0.19-1.277,0.19c-0.364,0-0.704-0.06-1.02-0.181s-0.592-0.293-0.829-0.518s-0.424-0.497-0.561-0.815
+        S13.7,16.801,13.7,16.404c0-0.299,0.024-0.576,0.073-0.83s0.146-0.49,0.293-0.708s0.356-0.426,0.63-0.625s0.637-0.392,1.089-0.581
+        s1.008-0.377,1.665-0.566s1.445-0.384,2.363-0.586v-0.244c0-0.098,0.003-0.186,0.01-0.264c0-0.091,0.003-0.182,0.01-0.273
+        c0.007-0.189-0.013-0.392-0.059-0.61s-0.137-0.42-0.273-0.605s-0.329-0.338-0.576-0.459s-0.569-0.181-0.967-0.181
+        c-0.137,0-0.259,0.003-0.366,0.01s-0.197,0.016-0.269,0.029c-0.085,0.013-0.159,0.026-0.225,0.039v1.895h-2.061
+        c-0.169,0.013-0.319-0.003-0.449-0.049c-0.11-0.039-0.213-0.107-0.308-0.205s-0.142-0.25-0.142-0.459
+        c0-0.371,0.132-0.703,0.396-0.996c0.263-0.293,0.607-0.542,1.033-0.747s0.904-0.363,1.435-0.474
+        c0.529-0.111,1.058-0.166,1.585-0.166c0.572,0,1.096,0.042,1.57,0.127s0.883,0.249,1.224,0.493c0.342,0.244,0.604,0.587,0.79,1.03
+        s0.278,1.025,0.278,1.748v5.137c0,0.124,0.042,0.229,0.127,0.317s0.188,0.138,0.312,0.151l0.879,0.059v0.938H20.05z M19.793,13.592
+        c-0.645,0.13-1.177,0.264-1.597,0.4s-0.754,0.293-1.001,0.469s-0.42,0.376-0.518,0.601s-0.146,0.487-0.146,0.786
+        c0,0.208,0.034,0.402,0.103,0.581s0.166,0.335,0.293,0.469s0.278,0.239,0.454,0.317s0.368,0.117,0.576,0.117
+        c0.215,0,0.432-0.023,0.649-0.068s0.415-0.094,0.591-0.146c0.208-0.065,0.407-0.14,0.596-0.225V13.592z"/>
+</g>
+</svg>
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<polygon opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" points="16.583,0.015 16.569,0 4.583,12 16.569,24 16.583,23.985
+    "/>
+<g enable-background="new    ">
+    <g>
+        <defs>
+            <rect id="SVGID_2_" x="-125" y="-1086.667" width="22" height="34"/>
+        </defs>
+        <clipPath id="SVGID_1_">
+            <use xlink:href="#SVGID_2_"  overflow="visible"/>
+        </clipPath>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_6_" x="-221" y="-1491.667" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_3_">
+                <use xlink:href="#SVGID_6_"  overflow="visible"/>
+            </clipPath>
+        </g>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_10_" x="-221" y="-1491.667" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_5_">
+                <use xlink:href="#SVGID_10_"  overflow="visible"/>
+            </clipPath>
+        </g>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_16_" x="-221" y="-1491.667" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_7_">
+                <use xlink:href="#SVGID_16_"  overflow="visible"/>
+            </clipPath>
+        </g>
+    </g>
+</g>
+<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FBFBFB" points="16.575,1.021 16.561,1.008 5.583,12 16.577,23.008
+    16.591,22.994 "/>
+</svg>
--- a/toolkit/themes/windows/global/aboutReader.css
+++ b/toolkit/themes/windows/global/aboutReader.css
@@ -4,59 +4,88 @@
 
 body {
   padding: 64px 0;
   max-width: 660px;
   margin-left: auto;
   margin-right: auto;
 }
 
-.light {
+.light,
+.light-button {
   color: #333333;
   background-color: #ffffff;
 }
 
-.dark {
+.dark,
+.dark-button {
   color: #eeeeee;
   background-color: #333333;
 }
 
-.sepia {
+.sepia,
+.sepia-button {
   color: #333333;
   background-color: #f0ece7;
 }
 
 .sans-serif {
   font-family: sans-serif;
 }
 
 .serif {
   font-family: serif;
 }
 
+.font-size1,
+.font-size1-sample {
+  font-size: 14px;
+}
+
+.font-size2,
+.font-size2-sample {
+  font-size: 16px;
+}
+
+.font-size3,
+.font-size3-sample {
+  font-size: 18px;
+}
+
+.font-size4,
+.font-size4-sample {
+  font-size: 20px;
+}
+
+.font-size5,
+.font-size5-sample {
+  font-size: 22px;
+}
+
+
 /* Loading/error message */
 
 .message {
   margin-top: 40px;
   display: none;
   text-align: center;
   width: 100%;
-  font-size: 16px;
+  font-size: 0.9rem;
 }
 
 /* Header */
 
 .header {
   text-align: start;
   display: none;
 }
 
 .domain {
-  font-size: 16px;
-  line-height: 24px;
+  font-size: 0.9rem;
+  line-height: 1.33rem;
   padding-bottom: 4px;
   font-family: sans-serif;
   text-decoration: none;
   border-bottom: 1px solid;
   color: #0095dd;
 }
 
 .light > .header > .domain,
@@ -64,58 +93,58 @@ body {
   border-bottom-color: #333333;
 }
 
 .dark > .header > .domain {
   border-bottom-color: #eeeeee;
 }
 
 .header > h1 {
-  font-size: 24px;
-  line-height: 30px;
+  font-size: 1.33rem;
+  line-height: 1.66rem;
   width: 100%;
   margin: 30px 0;
   padding: 0;
 }
 
 .header > .credits {
-  font-size: 16px;
-  line-height: 24px;
+  font-size: 0.9rem;
+  line-height: 1.33rem;
   margin: 0 0 30px 0;
   padding: 0;
   font-style: italic;
 }
 
 /* Content */
 
 .content {
   display: none;
-  font-size: 18px;
-  line-height: 26px;
+  font-size: 1rem;
+  line-height: 1.44rem;
 }
 
 .content h1,
 .content h2,
 .content h3 {
   font-weight: bold;
 }
 
 .content h1 {
-  font-size: 24px;
-  line-height: 30px;
+  font-size: 1.33rem;
+  line-height: 1.66rem;
 }
 
 .content h2 {
-  font-size: 20px;
-  line-height: 26px;
+  font-size: 1.1rem;
+  line-height: 1.66rem;
 }
 
 .content h3 {
-  font-size: 18px;
-  line-height: 26px;
+  font-size: 1rem;
+  line-height: 1.66rem;
 }
 
 .content a {
   text-decoration: underline;
   font-weight: normal;
 }
 
 .content a,
@@ -144,18 +173,18 @@ body {
 .content .wp-caption,
 .content figure {
   margin: 0 30px 30px 30px;
 }
 
 .content .caption,
 .content .wp-caption-text,
 .content figcaption {
-  font-size: 16px;
-  line-height: 24px;
+  font-size: 0.9rem;
+  line-height: 1.33rem;
   font-style: italic;
 }
 
 .content code,
 .content pre {
   white-space: pre-wrap;
 }
 
@@ -186,10 +215,189 @@ body {
 .content ol {
   -moz-padding-start: 30px;
   list-style: decimal;
 }
 
 /* Toolbar */
 
 .toolbar {
+  font-family: sans-serif;
+  position: fixed;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background-color: #FBFBFB;
+  -moz-user-select: none;
+  border-right: 1px solid #B5B5B5;
+}
+
+.button {
+  color: white;
+  display: block;
+  background-position: center;
+  background-size: 24px 24px;
+  background-repeat: no-repeat;
+  padding: 4px;
+  height: 32px;
+  width: 32px;
+  border-bottom: 1px solid #c1c1c1;
+}
+
+.dropdown {
+  text-align: center;
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+}
+
+.dropdown li {
+  margin: 0px;
+  padding: 0px;
+}
+
+.dropdown-popup {
+  text-align: start;
+  position: absolute;
+  left: 48px; /* offset to account for toolbar width */
+  z-index: 1000;
+  background-color: #FBFBFB;
+  font-size: 14px;
+  visibility: hidden;
+  cursor: pointer;
+  border-radius: 4px;
+  border: 1px solid #B5B5B5;
+  box-shadow: 0px 1px 12px #666;
+  color: black;
+}
+
+.dropdown-popup > hr {
+  width: 100%;
+  height: 0px;
+  border: 0px;
+  border-top: 1px solid #B5B5B5;
+  margin: 0;
+}
+
+.open > .dropdown-popup {
+  visibility: visible;
+}
+
+.dropdown-arrow {
+  position: absolute;
+  top: 30px; /* offset arrow from top of popup */
+  left: -16px;
+  width: 24px;
+  height: 24px;
+  background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
+  display: block;
+}
+
+#font-type-buttons,
+.segmented-button {
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  white-space: nowrap;
+  padding: 0;
+}
+
+#font-type-buttons > li,
+.segmented-button > li {
+  flex: 1 0 auto;
+  text-align: center;
+  border-left: 1px solid #B5B5B5;
+  padding: 10px;
+}
+
+#font-type-buttons > li {
+  width: 50px; /* combined with flex, this acts as a minimum width */
+}
+
+.segmented-button > li {
+  width: 30px; /* combined with flex, this acts as a minimum width */
+  line-height: 20px;
+}
+
+#font-type-buttons > li:first-child,
+.segmented-button > li:first-child {
+  border-left: 0px;
+}
+
+#font-type-buttons > li > a,
+.segmented-button > li > a {
+  vertical-align: middle;
+  text-decoration: none;
+}
+
+#font-type-buttons > li > a {
+  display: inline-block;
+  font-size: 48px;
+  line-height: 50px;
+}
+
+.segmented-button > li > a {
+  display: block;
+  font-family: sans-serif;
+  font-weight: lighter;
+}
+
+#font-type-buttons > li:active:hover,
+#font-type-buttons > li.selected {
+  border-bottom: 3px solid #FC6420;
+}
+
+.button:hover,
+#font-size-buttons > li:hover {
+  background-color: #EBEBEB;
+}
+
+.dropdown.open,
+.button:active,
+#font-size-buttons > li:active,
+#font-size-buttons > li.selected {
+  background-color: #DADADA;
+}
+
+#font-type-buttons > li > .sans-serif {
+  font-weight: lighter;
+}
+
+#font-type-buttons > li > div {
+  color: #666;
+  font-size: 12px;
+}
+
+/* Android-only controls */
+.share-button {
   display: none;
 }
+
+.close-button {
+  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg");
+  height: 60px;
+  background-position: center 8px;
+}
+
+.close-button:active,
+.close-button:hover {
+  background-image: url("chrome://global/skin/reader/RM-Close-hover-24x24.svg");
+  background-color: #d94141;
+}
+
+.style-button {
+  background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
+}
+
+.toggle-button.on {
+  background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg");
+}
+
+.toggle-button {
+  background-image: url("chrome://global/skin/reader/RM-Add-24x24.svg");
+}
+
+.list-button {
+  background-image: url("chrome://global/skin/reader/RM-Reading-List-24x24.svg");
+}
--- a/toolkit/themes/windows/global/jar.mn
+++ b/toolkit/themes/windows/global/jar.mn
@@ -182,16 +182,24 @@ toolkit.jar:
         skin/classic/global/in-content/sorter.png                (../../shared/in-content/sorter.png)
         skin/classic/global/in-content/sorter@2x.png             (../../shared/in-content/sorter@2x.png)
         skin/classic/global/printpreview/arrow-left.png          (printpreview/arrow-left.png)
         skin/classic/global/printpreview/arrow-left-end.png      (printpreview/arrow-left-end.png)
         skin/classic/global/printpreview/arrow-right.png         (printpreview/arrow-right.png)
         skin/classic/global/printpreview/arrow-right-end.png     (printpreview/arrow-right-end.png)
         skin/classic/global/radio/radio-check.gif                (radio/radio-check.gif)
         skin/classic/global/radio/radio-check-dis.gif            (radio/radio-check-dis.gif)
+        skin/classic/global/reader/RM-Add-24x24.svg              (../../shared/reader/RM-Add-24x24.svg)
+        skin/classic/global/reader/RM-Close-24x24.svg            (../../shared/reader/RM-Close-24x24.svg)
+        skin/classic/global/reader/RM-Close-hover-24x24.svg      (../../shared/reader/RM-Close-hover-24x24.svg)
+        skin/classic/global/reader/RM-Delete-24x24.svg           (../../shared/reader/RM-Delete-24x24.svg)
+        skin/classic/global/reader/RM-Reading-List-24x24.svg     (../../shared/reader/RM-Reading-List-24x24.svg)
+        skin/classic/global/reader/RM-Type-Controls-24x24.svg    (../../shared/reader/RM-Type-Controls-24x24.svg)
+        skin/classic/global/reader/RM-Type-Controls-Arrow.svg    (../../shared/reader/RM-Type-Controls-Arrow.svg)
+
         skin/classic/global/scrollbar/slider.gif                 (scrollbar/slider.gif)
         skin/classic/global/splitter/grip-bottom.gif             (splitter/grip-bottom.gif)
         skin/classic/global/splitter/grip-top.gif                (splitter/grip-top.gif)
         skin/classic/global/splitter/grip-left.gif               (splitter/grip-left.gif)
         skin/classic/global/splitter/grip-right.gif              (splitter/grip-right.gif)
         skin/classic/global/toolbar/chevron.gif                  (toolbar/chevron.gif)
         skin/classic/global/toolbar/chevron-inverted.png         (toolbar/chevron-inverted.png)
         skin/classic/global/toolbar/spring.png                   (toolbar/spring.png)
@@ -378,16 +386,23 @@ toolkit.jar:
         skin/classic/aero/global/in-content/sorter.png                   (../../shared/in-content/sorter.png)
         skin/classic/aero/global/in-content/sorter@2x.png                (../../shared/in-content/sorter@2x.png)
         skin/classic/aero/global/printpreview/arrow-left.png             (printpreview/arrow-left-aero.png)
         skin/classic/aero/global/printpreview/arrow-left-end.png         (printpreview/arrow-left-end-aero.png)
         skin/classic/aero/global/printpreview/arrow-right.png            (printpreview/arrow-right-aero.png)
         skin/classic/aero/global/printpreview/arrow-right-end.png        (printpreview/arrow-right-end-aero.png)
         skin/classic/aero/global/radio/radio-check.gif                   (radio/radio-check.gif)
         skin/classic/aero/global/radio/radio-check-dis.gif               (radio/radio-check-dis.gif)
+        skin/classic/aero/global/reader/RM-Add-24x24.svg                 (../../shared/reader/RM-Add-24x24.svg)
+        skin/classic/aero/global/reader/RM-Close-24x24.svg               (../../shared/reader/RM-Close-24x24.svg)
+        skin/classic/aero/global/reader/RM-Close-hover-24x24.svg         (../../shared/reader/RM-Close-hover-24x24.svg)
+        skin/classic/aero/global/reader/RM-Delete-24x24.svg              (../../shared/reader/RM-Delete-24x24.svg)
+        skin/classic/aero/global/reader/RM-Reading-List-24x24.svg        (../../shared/reader/RM-Reading-List-24x24.svg)
+        skin/classic/aero/global/reader/RM-Type-Controls-24x24.svg       (../../shared/reader/RM-Type-Controls-24x24.svg)
+        skin/classic/aero/global/reader/RM-Type-Controls-Arrow.svg       (../../shared/reader/RM-Type-Controls-Arrow.svg)
         skin/classic/aero/global/scrollbar/slider.gif                    (scrollbar/slider.gif)
         skin/classic/aero/global/splitter/grip-bottom.gif                (splitter/grip-bottom.gif)
         skin/classic/aero/global/splitter/grip-top.gif                   (splitter/grip-top.gif)
         skin/classic/aero/global/splitter/grip-left.gif                  (splitter/grip-left.gif)
         skin/classic/aero/global/splitter/grip-right.gif                 (splitter/grip-right.gif)
         skin/classic/aero/global/toolbar/chevron.gif                     (toolbar/chevron.gif)
         skin/classic/aero/global/toolbar/chevron-inverted.png            (toolbar/chevron-inverted.png)
         skin/classic/aero/global/toolbar/spring.png                      (toolbar/spring-aero.png)