Bug 857987 - Add a 'Night Mode' to Reader Mode. r=mfinkle
authorMargaret Leibovic <margaret.leibovic@gmail.com>
Sun, 12 May 2013 19:24:35 -0700
changeset 131733 d8f738b7da5cb7270db4af7182e8b46b2b42a56a
parent 131732 764540e94692950328efa74b1e4b8926c5fc0878
child 131734 d0344d91c8bfab05eeeb441d80e67a230876ba99
push id24671
push userryanvm@gmail.com
push dateMon, 13 May 2013 20:32:09 +0000
treeherdermozilla-central@81dd97739fa1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs857987
milestone23.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 857987 - Add a 'Night Mode' to Reader Mode. r=mfinkle
mobile/android/app/mobile.js
mobile/android/chrome/content/aboutReader.js
mobile/android/locales/en-US/chrome/aboutReader.properties
mobile/android/themes/core/aboutReader.css
--- a/mobile/android/app/mobile.js
+++ b/mobile/android/app/mobile.js
@@ -660,18 +660,19 @@ pref("reader.parse-on-load.enabled", tru
 pref("reader.parse-on-load.force-enabled", false);
 
 // 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");
+// The default color scheme in reader (light, dark, sepia, auto)
+// auto = color automatically adjusts according to ambient light level
+pref("reader.color_scheme", "auto");
 
 // The font type in reader (sans-serif, serif)
 pref("reader.font_type", "sans-serif");
 
 // Used to show a first-launch tip in reader
 pref("reader.has_used_toolbar", false);
 
 // Media plugins for libstagefright playback on android
--- a/mobile/android/chrome/content/aboutReader.js
+++ b/mobile/android/chrome/content/aboutReader.js
@@ -60,22 +60,24 @@ let AboutReader = function(doc, win) {
   this._setupButton("toggle-button", this._onReaderToggle.bind(this));
   this._setupButton("list-button", this._onList.bind(this));
   this._setupButton("share-button", this._onShare.bind(this));
 
   let colorSchemeOptions = [
     { name: gStrings.GetStringFromName("aboutReader.colorSchemeLight"),
       value: "light"},
     { name: gStrings.GetStringFromName("aboutReader.colorSchemeDark"),
-      value: "dark"}
+      value: "dark"},
+    { name: gStrings.GetStringFromName("aboutReader.colorSchemeAuto"),
+      value: "auto"}
   ];
 
   let colorScheme = Services.prefs.getCharPref("reader.color_scheme");
-  this._setupSegmentedButton("color-scheme-buttons", colorSchemeOptions, colorScheme, this._setColorScheme.bind(this));
-  this._setColorScheme(colorScheme);
+  this._setupSegmentedButton("color-scheme-buttons", colorSchemeOptions, colorScheme, this._setColorSchemePref.bind(this));
+  this._setColorSchemePref(colorScheme);
 
   let fontTypeOptions = [
     { name: gStrings.GetStringFromName("aboutReader.fontTypeSansSerif"),
       value: "sans-serif"},
     { name: gStrings.GetStringFromName("aboutReader.fontTypeSerif"),
       value: "serif"}
   ];
 
@@ -214,16 +216,20 @@ AboutReader.prototype = {
       case "popstate":
         if (!aEvent.state)
           this._closeAllDropdowns();
         break;
       case "resize":
         this._updateImageMargins();
         break;
 
+      case "devicelight":
+        this._handleDeviceLight(aEvent.value);
+        break;
+
       case "unload":
         Services.obs.removeObserver(this, "Reader:Add");
         Services.obs.removeObserver(this, "Reader:Remove");
         break;
     }
   },
 
   _updateToggleButton: function Reader_updateToggleButton() {
@@ -311,29 +317,52 @@ AboutReader.prototype = {
       bodyClasses.remove("font-size" + this._fontSize);
 
     this._fontSize = newFontSize;
     bodyClasses.add("font-size" + this._fontSize);
 
     Services.prefs.setIntPref("reader.font_size", this._fontSize);
   },
 
+  _handleDeviceLight: function Reader_handleDeviceLight(luxValue) {
+    // Ignore changes that are within a certain threshold of previous lux values.
+    if ((this._colorScheme === "dark" && luxValue < 50) ||
+        (this._colorScheme === "light" && luxValue > 25))
+      return;
+
+    if (luxValue < 30)
+      this._setColorScheme("dark");
+    else
+      this._setColorScheme("light");
+  },
+
   _setColorScheme: function Reader_setColorScheme(newColorScheme) {
     if (this._colorScheme === newColorScheme)
       return;
 
     let bodyClasses = this._doc.body.classList;
 
     if (this._colorScheme)
       bodyClasses.remove(this._colorScheme);
 
     this._colorScheme = newColorScheme;
     bodyClasses.add(this._colorScheme);
+  },
 
-    Services.prefs.setCharPref("reader.color_scheme", this._colorScheme);
+  // Pref values include "dark", "light", and "auto", which automatically switches
+  // between light and dark color schemes based on the ambient light level.
+  _setColorSchemePref: function Reader_setColorSchemePref(colorSchemePref) {
+    if (colorSchemePref === "auto") {
+      this._win.addEventListener("devicelight", this, false);
+    } else {
+      this._win.removeEventListener("devicelight", this, false);
+      this._setColorScheme(colorSchemePref);
+    }
+
+    Services.prefs.setCharPref("reader.color_scheme", colorSchemePref);
   },
 
   _setFontType: function Reader_setFontType(newFontType) {
     if (this._fontType === newFontType)
       return;
 
     let bodyClasses = this._doc.body.classList;
 
--- a/mobile/android/locales/en-US/chrome/aboutReader.properties
+++ b/mobile/android/locales/en-US/chrome/aboutReader.properties
@@ -6,13 +6,14 @@ aboutReader.loading=Loading...
 aboutReader.loadError=Failed to load article from page
 
 aboutReader.textTitle=Text
 aboutReader.marginTitle=Margins
 
 aboutReader.colorSchemeLight=Light
 aboutReader.colorSchemeDark=Dark
 aboutReader.colorSchemeSepia=Sepia
+aboutReader.colorSchemeAuto=Auto
 
 aboutReader.fontTypeSansSerif=Sans
 aboutReader.fontTypeSerif=Serif
 
 aboutReader.toolbarTip=Tap the screen to show reader options
--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@@ -4,16 +4,18 @@
 
 html {
   -moz-text-size-adjust: none;
 }
 
 body {
   margin-top: 20px;
   margin-bottom: 20px;
+  -moz-transition-property: background-color, color;
+  -moz-transition-duration: 0.7s;
 }
 
 .light {
   background-color: #ffffff;
   color: #222222;
 }
 
 .dark {