Bug 1117258 - Implement reader mode content CSS for desktop. r=jaws

mobile/android/app/mobile.js

@@ -846,3 +846,8 @@ 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, print, 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");

modules/libpref/init/all.js

@@ -4531,9 +4531,10 @@ pref("reader.parse-on-load.force-enabled", false);
 // The default relative font size in reader mode (1-5)
 pref("reader.font_size", 3);
 
-// The default color scheme in reader mode (light, dark, auto)
+// The default color scheme in reader mode (light, dark, print, auto)
 // auto = color automatically adjusts according to ambient light level
-pref("reader.color_scheme", "auto");
+// (auto only works on platforms where the 'devicelight' event is enabled)
+pref("reader.color_scheme", "light");
 
 // The font type in reader (sans-serif, serif)
 pref("reader.font_type", "sans-serif");

toolkit/components/reader/AboutReader.jsm

@@ -590,10 +590,10 @@ AboutReader.prototype = {
                                                     false, articleUri, this._contentElement);
     this._contentElement.innerHTML = "";
     this._contentElement.appendChild(contentFragment);
-    this._updateImageMargins();
     this._maybeSetTextDirection(article);
 
     this._contentElement.style.display = "block";
+    this._updateImageMargins();
     this._requestReadingListStatus();
 
     this._toolbarEnabled = true;

toolkit/themes/windows/global/aboutReader.css

@@ -1,3 +1,195 @@
 /* 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 {
+  padding: 64px 0;
+  max-width: 660px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.light {
+  color: #333333;
+  background-color: #ffffff;
+}
+
+.dark {
+  color: #eeeeee;
+  background-color: #333333;
+}
+
+.print {
+  color: #333333;
+  background-color: #fff1df;
+}
+
+.sans-serif {
+  font-family: sans-serif;
+}
+
+.serif {
+  font-family: serif;
+}
+
+/* Loading/error message */
+
+.message {
+  margin-top: 40px;
+  display: none;
+  text-align: center;
+  width: 100%;
+  font-size: 16px;
+}
+
+/* Header */
+
+.header {
+  text-align: start;
+  display: none;
+}
+
+.domain {
+  font-size: 16px;
+  line-height: 24px;
+  padding-bottom: 4px;
+  font-family: sans-serif;
+  text-decoration: none;
+  border-bottom: 1px solid;
+  color: #0095dd;
+}
+
+.light > .header > .domain,
+.print > .header > .domain {
+  border-bottom-color: #333333;
+}
+
+.dark > .header > .domain {
+  border-bottom-color: #eeeeee;
+}
+
+.header > h1 {
+  font-size: 24px;
+  line-height: 30px;
+  width: 100%;
+  margin: 30px 0;
+  padding: 0;
+}
+
+.header > .credits {
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0 0 30px 0;
+  padding: 0;
+  font-style: italic;
+}
+
+/* Content */
+
+.content {
+  display: none;
+  font-size: 18px;
+  line-height: 26px;
+}
+
+.content h1,
+.content h2,
+.content h3 {
+  font-weight: bold;
+}
+
+.content h1 {
+  font-size: 24px;
+  line-height: 30px;
+}
+
+.content h2 {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+.content h3 {
+  font-size: 18px;
+  line-height: 26px;
+}
+
+.content a {
+  text-decoration: underline;
+  font-weight: normal;
+}
+
+.content a,
+.content a:visited,
+.content a:hover,
+.content a:active {
+  color: #0095dd;
+}
+
+.content * {
+  max-width: 100%;
+  height: auto;
+}
+
+.content p,
+.content img,
+.content code,
+.content pre,
+.content blockquote,
+.content ul,
+.content ol,
+.content li {
+  margin: 0 0 30px 0;
+}
+
+.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-style: italic;
+}
+
+.content code,
+.content pre {
+  white-space: pre-wrap;
+}
+
+.content blockquote {
+  padding: 0;
+  -moz-padding-start: 16px;
+}
+
+.light > .content blockquote,
+.print > .content blockquote {
+  -moz-border-start: 2px solid #333333;
+}
+
+.dark > .content blockquote {
+  -moz-border-start: 2px solid #eeeeee;
+}
+
+.content ul,
+.content ol {
+  padding: 0;
+}
+
+.content ul {
+  -moz-padding-start: 30px;
+  list-style: disk;
+}
+
+.content ol {
+  -moz-padding-start: 30px;
+  list-style: decimal;
+}
+
+/* Toolbar */
+
+.toolbar {
+  display: none;
+}