Closes mozilla-mobile#2624: ReaderView: Wire up messaging between fea…

…ture and web ext.
csadilek · Apr 30, 2019 · 3f8bced · 3f8bced
1 parent 7e576fc
commit 3f8bced
Show file tree

Hide file tree

Showing 21 changed files with 499 additions and 196 deletions.
diff --git a/components/browser/session/src/main/java/mozilla/components/browser/session/Session.kt b/components/browser/session/src/main/java/mozilla/components/browser/session/Session.kt
@@ -73,6 +73,7 @@ class Session(
         fun onCrashStateChanged(session: Session, crashed: Boolean) = Unit
         fun onIconChanged(session: Session, icon: Bitmap?) = Unit
         fun onReaderableStateUpdated(session: Session, readerable: Boolean) = Unit
+        fun onReaderModeChanged(session: Session, enabled: Boolean) = Unit
     }
 
     /**
@@ -379,6 +380,13 @@ class Session(
         notifyObservers { onReaderableStateUpdated(this@Session, new) }
     }
 
+    /**
+     * Reader mode state, whether or not reader view is enabled, otherwise false.
+     */
+    var readerMode: Boolean by Delegates.observable(false) { _, old, new ->
+        notifyObservers(old, new) { onReaderModeChanged(this@Session, new) }
+    }
+
     /**
      * Returns whether or not this session is used for a Custom Tab.
      */

diff --git a/...er/session/src/main/java/mozilla/components/browser/session/storage/SnapshotSerializer.kt b/...er/session/src/main/java/mozilla/components/browser/session/storage/SnapshotSerializer.kt
@@ -75,6 +75,7 @@ internal fun serializeSession(session: Session): JSONObject {
         put(Keys.SESSION_UUID_KEY, session.id)
         put(Keys.SESSION_PARENT_UUID_KEY, session.parentId ?: "")
         put(Keys.SESSION_TITLE, session.title)
+        put(Keys.SESSION_READER_MODE_KEY, session.readerMode)
     }
 }
 
@@ -95,6 +96,7 @@ internal fun deserializeSession(json: JSONObject): Session {
     )
     session.parentId = json.getString(Keys.SESSION_PARENT_UUID_KEY).takeIf { it != "" }
     session.title = if (json.has(Keys.SESSION_TITLE)) json.getString(Keys.SESSION_TITLE) else ""
+    session.readerMode = json.optBoolean(Keys.SESSION_READER_MODE_KEY, false)
     return session
 }
 
@@ -106,6 +108,7 @@ private object Keys {
     const val SESSION_URL_KEY = "url"
     const val SESSION_UUID_KEY = "uuid"
     const val SESSION_PARENT_UUID_KEY = "parentUuid"
+    const val SESSION_READER_MODE_KEY = "readerMode"
     const val SESSION_TITLE = "title"
 
     const val SESSION_KEY = "session"

diff --git a/components/browser/session/src/test/java/mozilla/components/browser/session/SessionTest.kt b/components/browser/session/src/test/java/mozilla/components/browser/session/SessionTest.kt
@@ -958,4 +958,21 @@ class SessionTest {
 
         assertTrue(session.readerable)
     }
+
+    @Test
+    fun `observer is notified when reader mode state changes`() {
+        val observer = mock(Session.Observer::class.java)
+
+        val session = Session("https://www.mozilla.org")
+        session.register(observer)
+        assertFalse(session.readerMode)
+
+        session.readerMode = true
+
+        verify(observer).onReaderModeChanged(
+                eq(session),
+                eq(true))
+
+        assertTrue(session.readerMode)
+    }
 }
diff --git a/...ession/src/test/java/mozilla/components/browser/session/storage/SnapshotSerializerTest.kt b/...ession/src/test/java/mozilla/components/browser/session/storage/SnapshotSerializerTest.kt
@@ -7,6 +7,8 @@ package mozilla.components.browser.session.storage
 import mozilla.components.browser.session.Session
 import org.json.JSONObject
 import org.junit.Assert.assertEquals
+import org.junit.Assert.assertFalse
+import org.junit.Assert.assertTrue
 import org.junit.Test
 import org.junit.runner.RunWith
 import org.robolectric.RobolectricTestRunner
@@ -20,6 +22,7 @@ class SnapshotSerializerTest {
             source = Session.Source.ACTION_VIEW,
             id = "test-id").apply {
             title = "Hello World"
+            readerMode = true
         }
 
         val json = serializeSession(originalSession)
@@ -29,6 +32,7 @@ class SnapshotSerializerTest {
         assertEquals(Session.Source.ACTION_VIEW, restoredSession.source)
         assertEquals("test-id", restoredSession.id)
         assertEquals("Hello World", restoredSession.title)
+        assertTrue(restoredSession.readerMode)
     }
 
     @Test
@@ -45,5 +49,6 @@ class SnapshotSerializerTest {
         assertEquals("https://www.mozilla.org", restoredSession.url)
         assertEquals(Session.Source.ACTION_VIEW, restoredSession.source)
         assertEquals("test-id", restoredSession.id)
+        assertFalse(restoredSession.readerMode)
     }
 }
diff --git a/components/feature/readerview/src/main/assets/extensions/readerview/readerview.css b/components/feature/readerview/src/main/assets/extensions/readerview/readerview.css
@@ -29,12 +29,12 @@
   color: #eeeeee;
 }
 
-.mozac-readerview-body.sans-serif {
-  font-family: sans-serif;
+.mozac-readerview-body.sans-serif * {
+  font-family: sans-serif !important;
 }
 
-.mozac-readerview-body.serif {
-  font-family: serif;
+.mozac-readerview-body.serif * {
+  font-family: serif !important;
 }
 
 /* Override some controls and content styles based on color scheme */
@@ -106,7 +106,6 @@
 
 .mozac-readerview-body > .container > .header > .credits {
   font-size: 0.9em;
-  font-family: sans-serif;
 }
 
 .mozac-readerview-body > .container > .header > .domain {
@@ -139,6 +138,11 @@
   margin-bottom: 32px;
 }
 
+.mozac-readerview-body > .container > .header > .meta-data {
+  font-size: 0.65em;
+  margin: 0 0 15px 0;
+}
+
 .mozac-readerview-body > .container > .content {
   padding-left: 0px;
   padding-right: 0px;
@@ -161,8 +165,25 @@
   color: #00acff !important;
 }
 
+.mozac-readerview-content h1 {
+  margin-top: 16px;
+  margin-bottom: 16px;
+  font-weight: 700;
+  font-size: 1.6em;
+}
+
 .mozac-readerview-content h2 {
-  margin-bottom: 20px !important;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  font-weight: 700;
+  font-size: 1.2em;
+}
+
+.mozac-readerview-content h3 {
+  margin-top: 16px;
+  margin-bottom: 16px;
+  font-weight: 700;
+  font-size: 1em;
 }
 
 .mozac-readerview-content * {
@@ -171,6 +192,7 @@
 }
 
 .mozac-readerview-content p {
+  font-size: 1em !important;
   line-height: 1.4em !important;
   margin: 0px !important;
   margin-bottom: 20px !important;

diff --git a/components/feature/readerview/src/main/assets/extensions/readerview/readerview.js b/components/feature/readerview/src/main/assets/extensions/readerview/readerview.js
@@ -26,7 +26,7 @@ class ReaderView {
       return false;
     }
 
-    return isProbablyReaderable(document);
+    return isProbablyReaderable(document, ReaderView._isNodeVisible);
   }
 
   static get MIN_FONT_SIZE() {
@@ -37,6 +37,10 @@ class ReaderView {
     return 9;
   }
 
+  static _isNodeVisible(node) {
+    return node.clientHeight > 0 && node.clientWidth > 0;
+  }
+
   constructor(document) {
     this.document = document;
     this.originalBody = document.body.outerHTML;
@@ -63,6 +67,7 @@ class ReaderView {
 
   hide() {
     document.body.outerHTML = this.originalBody;
+    location.reload(false)
   }
 
   /**
@@ -95,10 +100,6 @@ class ReaderView {
    * @param fontType the font type to use.
    */
   setFontType(fontType) {
-    if (this.fontType === fontType) {
-      return;
-    }
-
     let bodyClasses = document.body.classList;
 
     if (this.fontType) {
@@ -121,10 +122,6 @@ class ReaderView {
       return;
     }
 
-    if (this.colorScheme === colorScheme) {
-      return;
-    }
-
     let bodyClasses = document.body.classList;
 
     if (this.colorScheme) {
@@ -279,30 +276,30 @@ class ReaderView {
    }
 }
 
-let port = browser.runtime.connectNative("mozacReaderview");
+let readerView = new ReaderView(document);
 
+let port = browser.runtime.connectNative("mozacReaderview");
 port.onMessage.addListener((message) => {
     switch (message.action) {
       case 'show':
-        readerView.show({fontSize: 3, fontType: "serif", colorScheme: "light"});
+        readerView.show(message.value);
         break;
       case 'hide':
         readerView.hide();
         break;
+      case 'setColorScheme':
+        readerView.setColorScheme(message.value.toLowerCase());
+        break;
+      case 'changeFontSize':
+        readerView.changeFontSize(message.value);
+        break;
+      case 'setFontType':
+        readerView.setFontType(message.value.toLowerCase());
+        break;
       case 'checkReaderable':
         port.postMessage({readerable: ReaderView.isReaderable()});
         break;
       default:
         console.error(`Received invalid action ${message.action}`);
     }
 });
-
-// TODO remove hostname check (for testing purposes only)
-// e.g. https://blog.mozilla.org/firefox/reader-view
-if (ReaderView.isReaderable() && location.hostname.endsWith("blog.mozilla.org")) {
-  // TODO send message to app to inform that readerview is available
-  // For now we show reader view for every page on blog.mozilla.org
-  let readerView = new ReaderView(document);
-  // TODO Parameters need to be passed down in message to display readerview
-  readerView.show({fontSize: 3, fontType: "serif", colorScheme: "light"});
-}