Closes mozilla-mobile#2624: Wire up messaging between feature and web…

… ext.
csadilek · Apr 29, 2019 · ddbcc7f · ddbcc7f
1 parent 671f998
commit ddbcc7f
Show file tree

Hide file tree

Showing 15 changed files with 234 additions and 89 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/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/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,22 @@
   color: #00acff !important;
 }
 
+.mozac-readerview-content h1, h2, h3 {
+  margin-top: 16px;
+  margin-bottom: 16px;
+  font-weight: 700;
+}
+
+.mozac-readerview-content h1 {
+  font-size: 1.6em;
+}
+
 .mozac-readerview-content h2 {
-  margin-bottom: 20px !important;
+  font-size: 1.2em;
+}
+
+.mozac-readerview-content h3 {
+  font-size: 1em;
 }
 
 .mozac-readerview-content * {
@@ -171,6 +189,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;
@@ -56,13 +60,17 @@ class ReaderView {
     );
 
     document.body.outerHTML = this.createHtml(article);
+    console.log(`FontSize ${fontSize}`)
+    console.log(`FontType ${fontType}`)
+    console.log(`ColorScheme ${colorScheme}`)
     this.setFontSize(fontSize);
     this.setFontType(fontType);
     this.setColorScheme(colorScheme);
   }
 
   hide() {
     document.body.outerHTML = this.originalBody;
+    location.reload(false)
   }
 
   /**
@@ -95,10 +103,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 +125,6 @@ class ReaderView {
       return;
     }
 
-    if (this.colorScheme === colorScheme) {
-      return;
-    }
-
     let bodyClasses = document.body.classList;
 
     if (this.colorScheme) {
@@ -279,30 +279,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"});
-}