Skip to content
This repository has been archived by the owner on Jan 22, 2022. It is now read-only.

Add reader mode #517

Open
wants to merge 5 commits into
base: xenial
Choose a base branch
from
Open

Add reader mode #517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
21f5b4b
add reader mode
DavidVentura Sep 9, 2021
d511b81
use built-in stock_ebook icon
DavidVentura Sep 10, 2021
d15658d
add height: auto to css
DavidVentura Sep 10, 2021
8665c91
minimal styling changes
DavidVentura Sep 10, 2021
ca99e2f
add style for scrollbar
DavidVentura Sep 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 29 additions & 1 deletion src/app/webbrowser/AddressBar.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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

name: "stock_ebook"
color: readerMode ? theme.palette.normal.focus : addressbar.fgColor
}

onClicked: addressbar.toggleReaderMode()

Item {
id: readerTogglePlaceHolderItem
anchors.fill: parent
}
}
MouseArea {
id: bookmarkToggle
objectName: "bookmarkToggle"
Expand Down Expand Up @@ -273,7 +301,7 @@ FocusScope {
anchors {
fill: parent
leftMargin: icons.width
rightMargin: bookmarkToggle.width
rightMargin: secondaryIconsRow.width
}

enabled: !addressbar.activeFocus
Expand Down
10 changes: 9 additions & 1 deletion src/app/webbrowser/NavigationBar.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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 : ({})
Expand Down Expand Up @@ -197,11 +200,16 @@ FocusScope {
}
onRequestStop: internal.webview.stop()
onToggleBookmark: root.toggleBookmark()
onToggleReaderMode: {
tab.toggleReaderMode()

}

Connections {
target: tab
onUrlChanged: addressbar.actualUrl = tab.url
}

}

Row {
Expand Down
27 changes: 27 additions & 0 deletions src/app/webbrowser/TabComponent.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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) {

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -279,5 +296,15 @@ Component {
}
}
}
function toggleReaderMode() {
if (browserTab.readerMode) {
browserTab.reload()
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i thought about storing the entire dom in the makeDomReadable function, but I'm not sure it's worth the tradeoff.
I don't really understand how that'd work with something like a video that's playing (if a reference is stored in a "shadow dom", does it keep playing? etc)

return
}

browser.currentWebview.runJavaScript("makeDomReadable()", function(r) {
browserTab.readerMode = true
})
}
}
}
Loading