Add reader mode

src/app/webbrowser/AddressBar.qml

@@ -47,6 +47,9 @@ FocusScope {
     property var findController: null
     property color fgColor: theme.palette.normal.baseText
 
+    property bool isReaderable: false
+    property bool readerMode: false
+    signal toggleReaderMode()
     property var certificateErrorsMap: null
     property bool lastLoadSucceeded
     readonly property bool hasSecurityError: (actualScheme === "https") && (certificateErrorsMap[UrlUtils.extractHost(actualUrl)] !== undefined)
@@ -207,7 +210,32 @@ FocusScope {
 
         secondaryItem: Row {
             height: textField.height
+            id: secondaryIconsRow
+            MouseArea {
+                id: readerToggle
+                objectName: "readerToggle"
+
+                height: parent.height
+                width: visible ? height : 0
+
+                visible: bookmarkToggle.visible && isReaderable
 
+                Icon {
+                    height: parent.height - units.gu(2)
+                    width: height
+                    anchors.centerIn: parent
+
+                    source: "assets/reader_mode.png"
+                    color: readerMode ? theme.palette.normal.focus : addressbar.fgColor
+                }
+
+                onClicked: addressbar.toggleReaderMode()
+
+                Item {
+                    id: readerTogglePlaceHolderItem
+                    anchors.fill: parent
+                }
+            }
             MouseArea {
                 id: bookmarkToggle
                 objectName: "bookmarkToggle"
@@ -273,7 +301,7 @@ FocusScope {
         anchors {
             fill: parent
             leftMargin: icons.width
-            rightMargin: bookmarkToggle.width
+            rightMargin: secondaryIconsRow.width
         }
 
         enabled: !addressbar.activeFocus

src/app/webbrowser/NavigationBar.qml

@@ -29,6 +29,8 @@ FocusScope {
     property alias searchUrl: addressbar.searchUrl
     readonly property string text: addressbar.text
     property alias bookmarked: addressbar.bookmarked
+
+
     signal closeTabRequested()
     signal toggleBookmark()
     signal toggleDownloads()
@@ -166,7 +168,8 @@ FocusScope {
             fgColor: root.fgColor
 
             focus: true
-
+            isReaderable: tab && tab.isReaderable
+            readerMode: tab && tab.readerMode
             findInPageMode: findInPageMode
             findController: internal.webview ? internal.webview.findController : null
             certificateErrorsMap: internal.webview ? internal.webview.certificateErrorsMap : ({})
@@ -197,11 +200,16 @@ FocusScope {
             }
             onRequestStop: internal.webview.stop()
             onToggleBookmark: root.toggleBookmark()
+            onToggleReaderMode: {
+                tab.toggleReaderMode()
+
+            }
 
             Connections {
                 target: tab
                 onUrlChanged: addressbar.actualUrl = tab.url
             }
+
         }
 
         Row {

src/app/webbrowser/TabComponent.qml

@@ -51,6 +51,8 @@ Component {
         property var internal
         property var recentView
         property var tabsModel
+        property bool readerMode: false
+        property bool isReaderable: false
 
         Item {
             id: contextualMenuTarget
@@ -71,6 +73,15 @@ Component {
             focus: true
 
             enabled: current && !bottomEdgeHandle.dragging && !recentView.visible && parent.focus
+            userScripts: [
+                WebEngineScript {
+                    name: "readability"
+                    injectionPoint: WebEngineScript.DocumentReady
+                    sourceUrl: Qt.resolvedUrl("readability.js")
+                    runOnSubframes: true
+                    worldId: WebEngineScript.MainWorld
+                }
+            ]
 
             onNewViewRequested: function(request) {
 
@@ -143,6 +154,12 @@ Component {
                     chrome.findInPageMode = false
                     webviewInternal.titleSet = false
                     webviewInternal.title = title
+                    readerMode = false
+
+                    webviewimpl.runJavaScript("isProbablyReaderable(document)", function(res) {
+                        isReaderable = res
+                        console.log('readerable', res)
+                    });
                 }
 
                 if (webviewimpl.incognito) {
@@ -279,5 +296,15 @@ Component {
                 }
             }
         }
+        function toggleReaderMode() {
+            if (browserTab.readerMode) {
+                browserTab.reload()
+                return
+            }
+
+            browser.currentWebview.runJavaScript("makeDomReadable()", function(r) {
+                browserTab.readerMode = true
+            })
+        }
     }
 }