mozilla-mobile · boek · May 3, 2019 · May 2, 2019
diff --git a/app/build.gradle b/app/build.gradle
@@ -287,6 +287,7 @@ dependencies {
     implementation Deps.mozilla_feature_findinpage
     implementation Deps.mozilla_feature_session_bundling
     implementation Deps.mozilla_feature_site_permissions
+    implementation Deps.mozilla_feature_readerview
 
     implementation Deps.mozilla_service_firefox_accounts
     implementation Deps.mozilla_service_fretboard

diff --git a/app/src/main/java/org/mozilla/fenix/browser/BrowserFragment.kt b/app/src/main/java/org/mozilla/fenix/browser/BrowserFragment.kt
@@ -39,6 +39,7 @@ import mozilla.components.feature.contextmenu.ContextMenuFeature
 import mozilla.components.feature.downloads.DownloadsFeature
 import mozilla.components.feature.intent.IntentProcessor
 import mozilla.components.feature.prompts.PromptFeature
+import mozilla.components.feature.readerview.ReaderViewFeature
 import mozilla.components.feature.session.FullScreenFeature
 import mozilla.components.feature.session.SessionFeature
 import mozilla.components.feature.session.SessionUseCases
@@ -101,6 +102,7 @@ class BrowserFragment : Fragment(), BackHandler, CoroutineScope,
     private val promptsFeature = ViewBoundFeatureWrapper<PromptFeature>()
     private val findInPageIntegration = ViewBoundFeatureWrapper<FindInPageIntegration>()
     private val toolbarIntegration = ViewBoundFeatureWrapper<ToolbarIntegration>()
+    private val readerViewFeature = ViewBoundFeatureWrapper<ReaderViewFeature>()
     private val sitePermissionsFeature = ViewBoundFeatureWrapper<SitePermissionsFeature>()
     private val fullScreenFeature = ViewBoundFeatureWrapper<FullScreenFeature>()
     private val thumbnailsFeature = ViewBoundFeatureWrapper<ThumbnailsFeature>()
@@ -286,6 +288,24 @@ class BrowserFragment : Fragment(), BackHandler, CoroutineScope,
             view = view
         )
 
+        readerViewFeature.set(
+            feature = ReaderViewFeature(
+                requireContext(),
+                requireComponents.core.engine,
+                requireComponents.core.sessionManager,
+                view.readerViewControlsBar
+            ) {
+                getManagedEmitter<QuickActionChange>().apply {
+                    onNext(QuickActionChange.ReadableStateChange(it))
+                    onNext(QuickActionChange.ReaderActiveStateChange(
+                        sessionManager.selectedSession?.readerMode ?: false)
+                    )
+                }
+            },
+            owner = this,
+            view = view
+        )
+
         val actionEmitter = ActionBusFactory.get(this).getManagedEmitter(SearchAction::class.java)
 
         customTabSessionId?.let {
@@ -380,8 +400,24 @@ class BrowserFragment : Fragment(), BackHandler, CoroutineScope,
                         bookmarkTapped()
                     }
                     is QuickActionAction.ReadPressed -> {
-                        requireComponents.analytics.metrics.track(Event.QuickActionSheetReadTapped)
-                        ItsNotBrokenSnack(context!!).showSnackbar(issueNumber = "908")
+                        readerViewFeature.withFeature { feature ->
+                            requireComponents.analytics.metrics.track(Event.QuickActionSheetReadTapped)
+                            val actionEmitter = getManagedEmitter<QuickActionChange>()
+                            val enabled = requireComponents.core.sessionManager.selectedSession?.readerMode ?: false
+                            if (enabled) {
+                                feature.hideReaderView()
+                                actionEmitter.onNext(QuickActionChange.ReaderActiveStateChange(false))
+                            } else {
+                                feature.showReaderView()
+                                actionEmitter.onNext(QuickActionChange.ReaderActiveStateChange(true))
+                            }
+                        }
+                    }
+                    is QuickActionAction.ReadAppearancePressed -> {
+                        // TODO telemetry: https://github.com/mozilla-mobile/fenix/issues/2267
+                        readerViewFeature.withFeature { feature ->
+                            feature.showControls()
+                        }
                     }
                 }
             }
@@ -454,6 +490,7 @@ class BrowserFragment : Fragment(), BackHandler, CoroutineScope,
         return when {
             findInPageIntegration.onBackPressed() -> true
             fullScreenFeature.onBackPressed() -> true
+            readerViewFeature.onBackPressed() -> true
             sessionFeature.onBackPressed() -> true
             else -> false
         }

diff --git a/app/src/main/java/org/mozilla/fenix/quickactionsheet/QuickActionComponent.kt b/app/src/main/java/org/mozilla/fenix/quickactionsheet/QuickActionComponent.kt
@@ -18,7 +18,8 @@ class QuickActionComponent(
     bus: ActionBusFactory,
     override var initialState: QuickActionState = QuickActionState(
         readable = false,
-        bookmarked = false
+        bookmarked = false,
+        readerActive = false
     )
 ) : UIComponent<QuickActionState, QuickActionAction, QuickActionChange>(
     bus.getManagedEmitter(QuickActionAction::class.java),
@@ -33,6 +34,9 @@ class QuickActionComponent(
             is QuickActionChange.ReadableStateChange -> {
                 state.copy(readable = change.readable)
             }
+            is QuickActionChange.ReaderActiveStateChange -> {
+                state.copy(readerActive = change.active)
+            }
         }
     }
 
@@ -44,7 +48,7 @@ class QuickActionComponent(
     }
 }
 
-data class QuickActionState(val readable: Boolean, val bookmarked: Boolean) : ViewState
+data class QuickActionState(val readable: Boolean, val bookmarked: Boolean, val readerActive: Boolean) : ViewState
 
 sealed class QuickActionAction : Action {
     object Opened : QuickActionAction()
@@ -53,9 +57,11 @@ sealed class QuickActionAction : Action {
     object DownloadsPressed : QuickActionAction()
     object BookmarkPressed : QuickActionAction()
     object ReadPressed : QuickActionAction()
+    object ReadAppearancePressed : QuickActionAction()
 }
 
 sealed class QuickActionChange : Change {
     data class BookmarkedStateChange(val bookmarked: Boolean) : QuickActionChange()
     data class ReadableStateChange(val readable: Boolean) : QuickActionChange()
+    data class ReaderActiveStateChange(val active: Boolean) : QuickActionChange()
 }
diff --git a/app/src/main/java/org/mozilla/fenix/quickactionsheet/QuickActionUIView.kt b/app/src/main/java/org/mozilla/fenix/quickactionsheet/QuickActionUIView.kt
@@ -78,6 +78,10 @@ class QuickActionUIView(
             actionEmitter.onNext(QuickActionAction.ReadPressed)
             quickActionSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED
         }
+        view.quick_action_read_appearance.setOnClickListener {
+            actionEmitter.onNext(QuickActionAction.ReadAppearancePressed)
+            quickActionSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED
+        }
     }
 
     /**
@@ -105,7 +109,16 @@ class QuickActionUIView(
     }
 
     override fun updateView() = Consumer<QuickActionState> {
-        view.quick_action_read.visibility = if (it.readable) View.VISIBLE else View.GONE
+        view.quick_action_read.apply {
+            visibility = if (it.readable) View.VISIBLE else View.GONE
+            isSelected = it.readerActive
+            text = if (it.readerActive) {
+                context.getString(R.string.quick_action_read_close)
+            } else {
+                context.getString(R.string.quick_action_read)
+            }
+        }
+        view.quick_action_read_appearance.visibility = if (it.readerActive) View.VISIBLE else View.GONE
         view.quick_action_bookmark.isSelected = it.bookmarked
     }
 

diff --git a/app/src/main/res/drawable/quick_action_icon_appearance.xml b/app/src/main/res/drawable/quick_action_icon_appearance.xml
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+<item>
+  <shape android:shape="oval">
+    <size
+        android:width="40dp"
+        android:height="40dp"/>
+    <solid android:color="#ECBCFB"/>
+  </shape>
+</item>
+<item
+    android:bottom="8dp"
+    android:left="8dp"
+    android:right="8dp"
+    android:top="8dp">
+  <vector
+          android:width="24dp"
+          android:height="24dp"
+          android:viewportWidth="24"
+          android:viewportHeight="24">
+    <path
+        android:pathData="M18.9,16.1c-0.5,0.4 -1,0.6 -1.5,0.8 -0.4,0.2 -0.9,0.3 -1.3,0.3 -0.6,0 -1.1,-0.2 -1.5,-0.6 -0.4,-0.4 -0.6,-0.9 -0.6,-1.6 0,-0.8 0.3,-1.3 0.9,-1.8 0.6,-0.5 1.9,-0.9 4.1,-1.3v-0.4c0,-0.6 -0.1,-1 -0.4,-1.3 -0.2,-0.3 -0.6,-0.4 -1.2,-0.4L17,9.8c-0.1,0 -0.3,0 -0.4,0.1v1.5h-1.5c-0.3,0 -0.4,0 -0.6,-0.1 -0.1,-0.1 -0.2,-0.2 -0.2,-0.5 0,-0.5 0.3,-0.9 1,-1.3s1.5,-0.6 2.5,-0.6c1.1,0 1.9,0.2 2.4,0.6 0.5,0.4 0.7,1.2 0.7,2.2L20.9,16l0.2,0.2 0.9,0.1v0.7h-2.9l-0.2,-0.9zM18.9,15.4v-2.6c-1.1,0.2 -1.8,0.5 -2.2,0.8 -0.4,0.3 -0.6,0.7 -0.6,1.1 0,0.4 0.1,0.7 0.3,0.9 0.2,0.2 0.5,0.3 0.9,0.3 0.2,0 0.4,0 0.7,-0.1 0.3,-0.1 0.6,-0.2 0.9,-0.4zM6.6,6h1.7L12,16l1,0.2v0.8L8.7,17v-0.8l1,-0.1 0.1,-0.2 -1,-2.8L5.3,13.1l-1,2.7 0.2,0.2 1,0.1v0.9L2,17v-0.8l1,-0.2L6.6,6zM7,8.2l-1.4,4h2.9L7,8.2z"
+        android:fillColor="#482166"
+        android:fillAlpha=".8"/>
+  </vector>
+</item>
+</layer-list>
diff --git a/app/src/main/res/drawable/quick_action_icon_close.xml b/app/src/main/res/drawable/quick_action_icon_close.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+<item>
+  <shape android:shape="oval">
+    <size
+        android:width="40dp"
+        android:height="40dp"/>
+    <solid android:color="@color/quick_action_reader_close_icon_background"/>
+  </shape>
+</item>
+<item
+    android:bottom="8dp"
+    android:left="8dp"
+    android:right="8dp"
+    android:top="8dp">
+  <vector
+          android:width="24dp"
+          android:height="24dp"
+          android:viewportWidth="24"
+          android:viewportHeight="24">
+    <path
+        android:pathData="M13.3588,11.981L17.7411,7.5987C18.0934,7.2259 18.0851,6.6403 17.7224,6.2776C17.3597,5.9149 16.7741,5.9066 16.4013,6.2589L12.019,10.6412L7.6367,6.2589C7.2638,5.9066 6.6783,5.9149 6.3156,6.2776C5.9529,6.6403 5.9446,7.2259 6.2969,7.5987L10.6792,11.981L6.2969,16.3633C6.0461,16.6002 5.9439,16.9547 6.03,17.2888C6.1162,17.6229 6.3771,17.8838 6.7112,17.97C7.0453,18.0561 7.3998,17.9539 7.6367,17.7031L12.019,13.3208L16.4013,17.7031C16.7741,18.0554 17.3597,18.0471 17.7224,17.6844C18.0851,17.3217 18.0934,16.7362 17.7411,16.3633L13.3588,11.981Z"
+        android:fillColor="@color/quick_action_reader_close_icon"/>
+  </vector>
+</item>
+</layer-list>
diff --git a/app/src/main/res/drawable/reader_two_state.xml b/app/src/main/res/drawable/reader_two_state.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_selected="false"
+        android:drawable="@drawable/quick_action_icon_read" />
+    <item android:state_selected="true"
+        android:drawable="@drawable/quick_action_icon_close" />
+</selector>
diff --git a/app/src/main/res/layout/fragment_browser.xml b/app/src/main/res/layout/fragment_browser.xml
@@ -38,4 +38,13 @@
         mozac:findInPageButtonsTint="?primaryText"
         mozac:findInPageResultCountTextColor="?primaryText" />
 
+    <mozilla.components.feature.readerview.view.ReaderViewControlsBar
+        android:id="@+id/readerViewControlsBar"
+        android:background="?foundation"
+        android:elevation="24dp"
+        android:visibility="gone"
+        android:layout_gravity="bottom"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content" />
+
 </androidx.coordinatorlayout.widget.CoordinatorLayout>
diff --git a/app/src/main/res/layout/layout_quick_action_sheet.xml b/app/src/main/res/layout/layout_quick_action_sheet.xml
@@ -77,13 +77,27 @@
                 android:textColor="?primaryText"
                 android:textSize="12sp" />
 
+            <Button
+                android:id="@+id/quick_action_read_appearance"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_weight="1"
+                android:background="?selectableItemBackgroundBorderless"
+                android:drawableTop="@drawable/quick_action_icon_appearance"
+                android:drawablePadding="5dp"
+                android:text="@string/quick_action_read_appearance"
+                android:textAllCaps="false"
+                android:textColor="?primaryText"
+                android:textSize="12sp"
+                android:visibility="gone" />
+
             <Button
                 android:id="@+id/quick_action_read"
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:layout_weight="1"
                 android:background="?selectableItemBackgroundBorderless"
-                android:drawableTop="@drawable/quick_action_icon_read"
+                android:drawableTop="@drawable/reader_two_state"
                 android:drawablePadding="5dp"
                 android:text="@string/quick_action_read"
                 android:textAllCaps="false"

diff --git a/app/src/main/res/values-night/colors.xml b/app/src/main/res/values-night/colors.xml
@@ -21,4 +21,7 @@
     <color name="scrimEnd_normal_theme">@color/scrimStart_dark_theme</color>
     <color name="toggle_off_knob_normal_theme">@color/toggle_off_knob_dark_theme</color>
     <color name="toggle_off_track_normal_theme">@color/toggle_off_track_dark_theme</color>
+
+    <!-- Reader View colors -->
+    <color name="mozac_feature_readerview_text_color">@color/primary_text_dark_theme</color>
 </resources>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
@@ -109,6 +109,12 @@
     <color name="quick_action_read_icon">#8a201f</color>
     <color name="quick_action_read_icon_background">#fce98f</color>
 
+    <color name="quick_action_reader_close_icon">#f9f9fb</color>
+    <color name="quick_action_reader_close_icon_background">#582bcb</color>
+
+    <color name="quick_action_reader_appearance_icon">#482166</color>
+    <color name="quick_action_reader_appearance_icon_background">#ecbcfb</color>
+
     <!-- Toggle Colors -->
     <color name="toggle_off_knob_light_theme">@color/photonGrey10</color>
     <color name="toggle_off_track_light_theme">@color/dark_grey_90</color>
@@ -124,4 +130,7 @@
     <color name="light_grey_05">#FBFBFE</color>
     <color name="dark_grey_90">#15141A</color>
     <color name="neutral_text">@color/white_color</color>
+
+    <!-- Reader View colors -->
+    <color name="mozac_feature_readerview_text_color">@color/primary_text_light_theme</color>
 </resources>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -206,6 +206,10 @@
     <string name="quick_action_bookmark">Bookmark</string>
     <!-- Button in the browser chrome in the browser to put the the current page in reader mode -->
     <string name="quick_action_read">Read</string>
+    <!-- Button in the browser chrome to exit reader mode -->
+    <string name="quick_action_read_close">Close</string>
+    <!-- Button in the browser chrome to configure reader mode appearance e.g. the used font type and size -->
+    <string name="quick_action_read_appearance">Appearance</string>
     <!-- Content description (not visible, for screen readers etc.): Quick action sheet handle to provide users
         with shortcuts to commonly used actions such as Share, Bookmark etc.. -->
     <string name="quick_action_sheet_handle">Quick actions</string>
@@ -475,4 +479,5 @@
     <!-- QR code scanner prompt which appears after scanning a code, but before navigating to it
         First parameter is the name of the app, second parameter is the URL or text scanned-->
     <string name="qr_scanner_confirmation_dialog_message">Allow %1$s to open %2$s</string>
+
 </resources>
diff --git a/buildSrc/src/main/java/Dependencies.kt b/buildSrc/src/main/java/Dependencies.kt
@@ -103,6 +103,7 @@ object Deps {
     const val mozilla_feature_findinpage = "org.mozilla.components:feature-findinpage:${Versions.mozilla_android_components}"
     const val mozilla_feature_session_bundling = "org.mozilla.components:feature-session-bundling:${Versions.mozilla_android_components}"
     const val mozilla_feature_site_permissions = "org.mozilla.components:feature-sitepermissions:${Versions.mozilla_android_components}"
+    const val mozilla_feature_readerview = "org.mozilla.components:feature-readerview:${Versions.mozilla_android_components}"
 
     const val mozilla_service_firefox_accounts = "org.mozilla.components:service-firefox-accounts:${Versions.mozilla_android_components}"
     const val mozilla_service_fretboard = "org.mozilla.components:service-fretboard:${Versions.mozilla_android_components}"