Bug 778582 (r=mfinkle)
authorLucas Rocha <lucasr@mozilla.com>
Tue, 28 Aug 2012 16:17:02 +0100
changeset 105693 145fedfb046af5a87956c24bf049efa9339e4d53
parent 105692 c4ceb6420c6089489bdc95bccc082c4aad7830b0
child 105694 c447eff920dbb3fd621718833c4774b7ab714b50
push id55
push usershu@rfrn.org
push dateThu, 30 Aug 2012 01:33:09 +0000
reviewersmfinkle
bugs778582
milestone18.0a1
Bug 778582 (r=mfinkle)
mobile/android/chrome/content/aboutReader.html
mobile/android/chrome/content/aboutReader.js
mobile/android/chrome/jar.mn
mobile/android/components/AboutRedirector.js
mobile/android/components/MobileComponents.manifest
mobile/android/themes/core/aboutReader.css
mobile/android/themes/core/content.css
mobile/android/themes/core/jar.mn
--- a/mobile/android/chrome/content/aboutReader.html
+++ b/mobile/android/chrome/content/aboutReader.html
@@ -5,29 +5,38 @@
   <title></title>
   <meta content="text/html; charset=UTF-8" http-equiv="content-type">
   <meta name="viewport" content="width=device-width; user-scalable=0" />
 
   <link rel="stylesheet" href="chrome://browser/skin/aboutReader.css" type="text/css"/>
 </head>
 
 <body onload="AboutReader.init();" onunload="AboutReader.uninit();">
-  <iframe id="frame" src="about:readercontent"></iframe>
+  <div id="reader-header" class="header">
+    <div id="reader-domain" class="domain"></div>
+    <h1 id="reader-title"></h1>
+    <div id="reader-credits" class="credits"></div>
+  </div>
+
+  <div id="reader-content" class="content">
+  </div>
+
   <ul id="reader-toolbar" class="toolbar toolbar-hidden">
     <li><a id="share-button" class="button share-button" href="#"></a></li>
     <ul class="dropdown">
       <li><a class="dropdown-toggle button style-button" href="#"></a></li>
       <li 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>
       </li>
     </ul>
     <li><a id="list-button" class="button list-button" href="#"></a></li>
     <li><a id="toggle-button" class="button toggle-button" href="#"></a></li>
   </ul>
 
-  <script type="application/javascript;version=1.8" src="chrome://browser/content/aboutReader.js"></script>
+  <script type="application/javascript;version=1.8" src="chrome://browser/content/aboutReader.js">
+  </script>
 </body>
 
 </html>
--- a/mobile/android/chrome/content/aboutReader.js
+++ b/mobile/android/chrome/content/aboutReader.js
@@ -34,29 +34,30 @@ let AboutReader = {
   init: function Reader_init() {
     dump("Init()");
 
     Services.obs.addObserver(this, "Reader:FaviconReturn", false);
 
     this._article = null;
 
     dump("Feching toolbar, header and content notes from about:reader");
-    this._frame = document.getElementById("frame");
-    this._headerElement = this._frame.contentDocument.getElementById("reader-header");
-    this._domainElement = this._frame.contentDocument.getElementById("reader-domain");
-    this._creditsElement = this._frame.contentDocument.getElementById("reader-credits");
-    this._contentElement = this._frame.contentDocument.getElementById("reader-content");
+    this._headerElement = document.getElementById("reader-header");
+    this._domainElement = document.getElementById("reader-domain");
+    this._titleElement = document.getElementById("reader-title");
+    this._creditsElement = document.getElementById("reader-credits");
+    this._contentElement = document.getElementById("reader-content");
     this._toolbarElement = document.getElementById("reader-toolbar");
 
     this._toolbarEnabled = false;
 
-    this._frame.contentDocument.addEventListener("DOMSubtreeModified", this, false);
-    this._frame.contentDocument.addEventListener("MozScrolledAreaChanged", this, false);
-    this._frame.contentDocument.addEventListener("touchstart", this, false);
-    this._frame.contentDocument.addEventListener("click", this, false);
+    this._scrollOffset = window.pageYOffset;
+
+    let body = document.body;
+    body.addEventListener("touchstart", this, false);
+    body.addEventListener("click", this, false);
     window.addEventListener("scroll", this, false);
     window.addEventListener("popstate", this, false);
     window.addEventListener("resize", this, false);
 
     this._setupAllDropdowns();
     this._setupButton("toggle-button", this._onReaderToggle.bind(this));
     this._setupButton("list-button", this._onList.bind(this));
     this._setupButton("share-button", this._onShare.bind(this));
@@ -126,35 +127,27 @@ let AboutReader = {
         break;
       case "popstate":
         if (!aEvent.state)
           this._closeAllDropdowns();
         break;
       case "resize":
         this._updateImageMargins();
         break;
-      case "DOMSubtreeModified":
-      case "MozScrolledAreaChanged":
-        let newHeight = this._frame.contentDocument.body.offsetHeight + "px";
-        if (this._frame.style.height != newHeight) {
-          this._frame.style.height = newHeight;
-        }
-        break;
     }
   },
 
   uninit: function Reader_uninit() {
     dump("Uninit()");
 
-    Services.obs.removeObserver(this, "Reader:FaviconReturn");
+    Services.obs.removeObserver(this, "Reader:FaviconReturn", false);
 
-    this._frame.contentDocument.removeEventListener("touchstart", this, false);
-    this._frame.contentDocument.removeEventListener("click", this, false);
-    this._frame.contentDocument.removeEventListener("DOMSubtreeModified", this, false);
-    this._frame.contentDocument.removeEventListener("MozScrolledAreaChanged", this, false);
+    let body = document.body;
+    body.removeEventListener("touchstart", this, false);
+    body.removeEventListener("click", this, false);
     window.removeEventListener("scroll", this, false);
     window.removeEventListener("popstate", this, false);
     window.removeEventListener("resize", this, false);
 
     this._hideContent();
   },
 
   _updateToggleButton: function Reader_updateToggleButton() {
@@ -232,19 +225,18 @@ let AboutReader = {
       this._setMarginSize(this._marginSize - 5);
   },
 
   _setMarginSize: function Reader_setMarginSize(newMarginSize) {
     if (this._marginSize === newMarginSize)
       return;
 
     this._marginSize = Math.max(5, Math.min(25, newMarginSize));
-    let bodyStyle = this._frame.contentDocument.body.style;
-    bodyStyle.marginLeft = this._marginSize + "%";
-    bodyStyle.marginRight = this._marginSize + "%";
+    document.body.style.marginLeft = this._marginSize + "%";
+    document.body.style.marginRight = this._marginSize + "%";
 
     this._updateImageMargins();
 
     Services.prefs.setIntPref("reader.margin_size", this._marginSize);
   },
 
   _onFontSizeChange: function Reader_onFontSizeChange(operation) {
     if (operation == this._STEP_INCREMENT)
@@ -252,42 +244,38 @@ let AboutReader = {
     else
       this._setFontSize(this._fontSize - 1);
   },
 
   _setFontSize: function Reader_setFontSize(newFontSize) {
     if (this._fontSize === newFontSize)
       return;
 
-    let bodyClasses = this._frame.contentDocument.body.classList;
+    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;
-    let frameClasses = this._frame.contentDocument.body.classList;
 
-    if (this._colorScheme) {
+    if (this._colorScheme)
       bodyClasses.remove(this._colorScheme);
-      frameClasses.remove(this._colorScheme);
-    }
 
     this._colorScheme = newColorScheme;
     bodyClasses.add(this._colorScheme);
-    frameClasses.add(this._colorScheme);
 
     Services.prefs.setCharPref("reader.color_scheme", this._colorScheme);
   },
 
   _getToolbarVisibility: function Reader_getToolbarVisibility() {
     return !this._toolbarElement.classList.contains("toolbar-hidden");
   },
 
@@ -415,17 +403,17 @@ let AboutReader = {
   _showContent: function Reader_showContent(article) {
     this._article = article;
 
     let domain = Services.io.newURI(article.url, null, null).host;
     this._domainElement.innerHTML = domain;
 
     this._creditsElement.innerHTML = article.byline;
 
-    this._frame.contentDocument.getElementById("reader-title").innerHTML = article.title;
+    this._titleElement.innerHTML = article.title;
     document.title = article.title;
 
     this._headerElement.style.display = "block";
 
     this._contentElement.innerHTML = article.content;
     this._updateImageMargins();
 
     this._contentElement.style.display = "block";
--- a/mobile/android/chrome/jar.mn
+++ b/mobile/android/chrome/jar.mn
@@ -1,27 +1,26 @@
 #filter substitution
 # 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/.
 
 
 chrome.jar:
-% content browser %content/ contentaccessible=yes
+% content browser %content/
 
 * content/about.xhtml                  (content/about.xhtml)
   content/config.xhtml                 (content/config.xhtml)
   content/aboutAddons.xhtml            (content/aboutAddons.xhtml)
   content/aboutAddons.js               (content/aboutAddons.js)
   content/aboutCertError.xhtml         (content/aboutCertError.xhtml)
   content/aboutDownloads.xhtml         (content/aboutDownloads.xhtml)
   content/aboutDownloads.js            (content/aboutDownloads.js)
   content/aboutFeedback.xhtml          (content/aboutFeedback.xhtml)
   content/aboutReader.html             (content/aboutReader.html)
-  content/aboutReaderContent.html      (content/aboutReaderContent.html)
   content/aboutReader.js               (content/aboutReader.js)
   content/Readability.js               (content/Readability.js)
   content/JSDOMParser.js               (content/JSDOMParser.js)
   content/readerWorker.js              (content/readerWorker.js)
   content/aboutHome.xhtml              (content/aboutHome.xhtml)
 * content/aboutRights.xhtml            (content/aboutRights.xhtml)
 * content/aboutApps.xhtml              (content/aboutApps.xhtml)
   content/aboutApps.js                 (content/aboutApps.js)
--- a/mobile/android/components/AboutRedirector.js
+++ b/mobile/android/components/AboutRedirector.js
@@ -56,23 +56,17 @@ let modules = {
     privileged: true
   },
   downloads: {
     uri: "chrome://browser/content/aboutDownloads.xhtml",
     privileged: true
   },
   reader: {
     uri: "chrome://browser/content/aboutReader.html",
-    privileged: true,
-    hide: true
-  },
-  readercontent: {
-    uri: "chrome://browser/content/aboutReaderContent.html",
-    privileged: false,
-    hide: true
+    privileged: true
   },
   feedback: {
     uri: "chrome://browser/content/aboutFeedback.xhtml",
     privileged: true
   }
 }
 
 function AboutRedirector() {}
--- a/mobile/android/components/MobileComponents.manifest
+++ b/mobile/android/components/MobileComponents.manifest
@@ -5,17 +5,16 @@ contract @mozilla.org/network/protocol/a
 contract @mozilla.org/network/protocol/about;1?what=firefox {322ba47e-7047-4f71-aebf-cb7d69325cd9}
 contract @mozilla.org/network/protocol/about;1?what=empty {322ba47e-7047-4f71-aebf-cb7d69325cd9}
 contract @mozilla.org/network/protocol/about;1?what=rights {322ba47e-7047-4f71-aebf-cb7d69325cd9}
 contract @mozilla.org/network/protocol/about;1?what=certerror {322ba47e-7047-4f71-aebf-cb7d69325cd9}
 contract @mozilla.org/network/protocol/about;1?what=home {322ba47e-7047-4f71-aebf-cb7d69325cd9}
 contract @mozilla.org/network/protocol/about;1?what=apps {322ba47e-7047-4f71-aebf-cb7d69325cd9}
 contract @mozilla.org/network/protocol/about;1?what=downloads {322ba47e-7047-4f71-aebf-cb7d69325cd9}
 contract @mozilla.org/network/protocol/about;1?what=reader {322ba47e-7047-4f71-aebf-cb7d69325cd9}
-contract @mozilla.org/network/protocol/about;1?what=readercontent {322ba47e-7047-4f71-aebf-cb7d69325cd9}
 contract @mozilla.org/network/protocol/about;1?what=feedback {322ba47e-7047-4f71-aebf-cb7d69325cd9}
 #ifdef MOZ_SAFE_BROWSING
 contract @mozilla.org/network/protocol/about;1?what=blocked {322ba47e-7047-4f71-aebf-cb7d69325cd9}
 #endif
 
 # DirectoryProvider.js
 component {ef0f7a87-c1ee-45a8-8d67-26f586e46a4b} DirectoryProvider.js
 contract @mozilla.org/browser/directory-provider;1 {ef0f7a87-c1ee-45a8-8d67-26f586e46a4b}
--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@@ -1,47 +1,357 @@
 /* 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/. */
 
-body {
-  font-family: "OpenSansRegular","Droid Sans",sans-serif;
+%filter substitution
+%include defines.inc
+
+@font-face {
+  font-family: 'OpenSansRegular';
+  src: url('chrome://browser/skin/fonts/opensans-regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
 }
 
-#frame {
-  border: 0;
-  width: 100%;
+@font-face {
+  font-family: 'OpenSansLight';
+  src: url('chrome://browser/skin/fonts/opensans-light.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+html {
+  -moz-text-size-adjust: none;
+}
+
+body {
+  font-family: "OpenSansRegular","Droid Sans",sans-serif;
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
 
 .light {
   background-color: #ffffff;
+  color: #222222;
 }
 
 .dark {
   background-color: #000000;
+  color: #eeeeee;
+}
+
+.header {
+  text-align: left;
+  display: none;
+}
+
+.header > .domain {
+  margin-top: 10px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid; 
+}
+
+.header > h1 {
+  font-family: "OpenSansLight","Droid Sans",sans-serif;
+  font-weight: normal;
+  line-height: 1.1em;
+  width: 100%;
+  margin: 0px;
+  margin-top: 32px;
+  margin-bottom: 16px;
+  padding: 0px;
+}
+
+.header > .credits {
+  padding: 0px;
+  margin: 0px;
+  margin-bottom: 32px;
+}
+
+.light > .header > .domain {
+  color: #ee7600;
+  border-bottom-color: #d0d0d0; 
+}
+
+.light > .header > h1 {
+  color: #222222;
+}
+
+.light > .header > .credits {
+  color: #898989;
+}
+
+.dark > .header > .domain {
+  color: #ff9400;
+  border-bottom-color: #777777; 
+}
+
+.dark > .header > h1 {
+  color: #eeeeee;
+}
+
+.dark > .header > .credits {
+  color: #aaaaaa;
+}
+
+.font-size1 > .header > h1 {
+  font-size: 23px;
+}
+
+.font-size2 > .header > h1 {
+  font-size: 25px;
+}
+
+.font-size3 > .header > h1 {
+  font-size: 27px;
+}
+
+.font-size4 > .header > h1 {
+  font-size: 29px;
+}
+
+.font-size5 > .header > h1 {
+  font-size: 31px;
+}
+
+.font-size6 > .header > h1 {
+  font-size: 33px;
+}
+
+.font-size7 > .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-size: 6px;
+}
+
+.font-size2 > .content .wp-caption-text,
+.font-size2 > .content figcaption,
+.font-size2 > .header > .domain,
+.font-size2 > .header > .credits {
+  font-size: 8px;
+}
+
+.font-size3 > .content .wp-caption-text,
+.font-size3 > .content figcaption,
+.font-size3 > .header > .domain,
+.font-size3 > .header > .credits {
+  font-size: 11px;
+}
+
+.font-size4 > .content .wp-caption-text,
+.font-size4 > .content figcaption,
+.font-size4 > .header > .domain,
+.font-size4 > .header > .credits {
+  font-size: 13px;
+}
+
+.font-size5 > .content .wp-caption-text,
+.font-size5 > .content figcaption,
+.font-size5 > .header > .domain,
+.font-size5 > .header > .credits {
+  font-size: 15px;
+}
+
+.font-size6 > .content .wp-caption-text,
+.font-size6 > .content figcaption,
+.font-size6 > .header > .domain,
+.font-size6 > .header > .credits {
+  font-size: 17px;
+}
+
+.font-size7 > .content .wp-caption-text,
+.font-size7 > .content figcaption,
+.font-size7 > .header > .domain,
+.font-size7 > .header > .credits {
+  font-size: 19px;
+}
+
+.content {
+  display: none;
+}
+
+.content a {
+  text-decoration: underline !important;
+  font-weight: normal;
+}
+
+.light > .content a,
+.light > .content a:visited,
+.light > .content a:hover,
+.light > .content a:active {
+  color: #ee6700 !important;
+}
+
+.dark > .content a,
+.dark > .content a:visited,
+.dark > .content a:hover,
+.dark > .content a:active {
+  color: #ff9400 !important;
+}
+
+.content * {
+  max-width: 100% !important;
+  height: auto !important;
+}
+
+.content p {
+  line-height: 1.4em !important;
+  margin: 0px !important;
+  margin-bottom: 20px !important;
+}
+
+/* Covers all images showing edge-to-edge using a 
+   an optional caption text */
+.content .wp-caption,
+.content figure {
+  display: block !important;
+  width: 100% !important;
+  margin: 0px !important;
+  margin-bottom: 32px !important;
+}
+
+/* Images marked to be shown edge-to-edge with an
+   optional captio ntext */
+.content p > img:only-child,
+.content p > a:only-child > img:only-child,
+.content .wp-caption img,
+.content figure img {
+  max-width: none !important;
+  height: auto !important;
+  display: block !important;
+  margin-top: 0px !important;
+  margin-bottom: 32px !important;
+}
+
+/* If image is place inside one of these blocks
+   there's no need to add margin at the bottom */
+.content .wp-caption img,
+.content figure img {
+  margin-bottom: 0px !important;
+}
+
+/* Image caption text */
+.content .caption,
+.content .wp-caption-text,
+.content figcaption {
+  margin: 0px !important;
+  padding-top: 4px !important;
+}
+
+.light > .content .caption,
+.light > .content .wp-caption-text,
+.light > .content figcaption {
+  color: #898989;
+}
+
+.dark > .content .caption,
+.dark > .content .wp-caption-text,
+.dark > .content figcaption {
+  color: #aaaaaa;
+}
+
+/* Ensure all pre-formatted code inside the reader content
+   are properly wrapped inside content width */
+.content code,
+.content pre {
+  white-space: pre-wrap !important;
+  margin-bottom: 20px !important;
+}
+
+.content blockquote {
+  margin: 0px !important;
+  margin-bottom: 20px !important;
+  padding: 0px !important;
+  padding-left: 16px !important;
+  border: 0px !important;
+  border-left: 2px solid !important;
+}
+
+.light > .content blockquote {
+  color: #898989 !important;
+  border-left-color: #d0d0d0 !important;
+}
+
+.dark > .content blockquote {
+  color: #aaaaaa !important;
+  border-left-color: #777777 !important;
+}
+
+.content ul,
+.content ol {
+  margin: 0px !important;
+  margin-bottom: 20px !important;
+  padding: 0px !important;
+  line-height: 1.5em;
+}
+
+.content ul {
+  padding-left: 30px !important;
+  list-style: disk !important;
+}
+
+.content ol {
+  padding-left: 35px !important;
+  list-style: decimal !important;
+}
+
+.font-size1 > .content {
+  font-size: 10px !important;
+}
+
+.font-size2 > .content {
+  font-size: 12px !important;
+}
+
+.font-size3 > .content {
+  font-size: 14px !important;
+}
+
+.font-size4 > .content {
+  font-size: 16px !important;
+}
+
+.font-size5 > .content {
+  font-size: 18px !important;
+}
+
+.font-size6 > .content {
+  font-size: 20px !important;
+}
+
+.font-size7 > .content {
+  font-size: 22px !important;
 }
 
 .toolbar {
   font-family: "Droid Sans",helvetica,arial,clean,sans-serif;
-  -moz-transition-property: visibility, opacity;
+  -moz-transition-property: visibility opacity;
   -moz-transition-duration: 0.7s;
   visibility: visible;
   opacity: 1.0;
   position: fixed;
   width: 100%;
   bottom: 0px;
   left: 0px;
   margin: 0;
   padding: 0;
   list-style: none;
   background-repeat: repeat;
 }
 
 .toolbar-hidden {
-  -moz-transition-property: visibility, opacity;
+  -moz-transition-property: visibility opacity;
   -moz-transition-duration: 0.7s;
   visibility: hidden;
   opacity: 0.0;
 }
 
 .toolbar > * {
   float: right;
   width: 25%;
--- a/mobile/android/themes/core/content.css
+++ b/mobile/android/themes/core/content.css
@@ -3,32 +3,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 %filter substitution
 %include defines.inc
 
 @namespace url("http://www.w3.org/1999/xhtml");
 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-@-moz-document url(about:readercontent) {
-  @font-face {
-    font-family: 'OpenSansRegular';
-    src: url('chrome://browser/skin/fonts/opensans-regular.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-  }
-
-  @font-face {
-    font-family: 'OpenSansLight';
-    src: url('chrome://browser/skin/fonts/opensans-light.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-  }
-}
-
 ::-moz-selection {
   background-color: @color_background_highlight@;
   color: @color_text_highlight@;
 }
 
 /* Style the scrollbars */
 html xul|scrollbar {
   display: none;
--- a/mobile/android/themes/core/jar.mn
+++ b/mobile/android/themes/core/jar.mn
@@ -7,18 +7,17 @@
 chrome.jar:
 % skin browser classic/1.0 %skin/
   skin/aboutPage.css                        (aboutPage.css)
   skin/about.css                            (about.css)
   skin/aboutAddons.css                      (aboutAddons.css)
   skin/aboutApps.css                        (aboutApps.css)
 * skin/aboutDownloads.css                   (aboutDownloads.css)
   skin/aboutFeedback.css                    (aboutFeedback.css)
-  skin/aboutReader.css                      (aboutReader.css)
-  skin/aboutReaderContent.css               (aboutReaderContent.css)
+* skin/aboutReader.css                      (aboutReader.css)
 * skin/browser.css                          (browser.css)
 * skin/content.css                          (content.css)
   skin/config.css                           (config.css)
   skin/touchcontrols.css                    (touchcontrols.css)
   skin/netError.css                         (netError.css)
 % override chrome://global/skin/about.css chrome://browser/skin/about.css
 % override chrome://global/skin/media/videocontrols.css chrome://browser/skin/touchcontrols.css
 % override chrome://global/skin/netError.css chrome://browser/skin/netError.css