Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lazy-load toolbar features to improve launch performance #604

Open
wants to merge 3 commits into
base: next
Choose a base branch
from
Open

Lazy-load toolbar features to improve launch performance #604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9ba7cc2
[sailfish-browser] Only load secondary bar when shown. Contributes to…
Aug 28, 2018
e1855f5
[sailfish-browser] Only load favorite grid when shown. Contributes to…
Aug 28, 2018
7a5b3ad
[sailfish-browser] Postpone processing history model and delegate unt…
Aug 28, 2018
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
6 changes: 0 additions & 6 deletions src/pages/BrowserPage.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ Page {
property Component tabPageComponent

property alias tabs: webView.tabModel
property alias history: historyModel
property alias viewLoading: webView.loading
property alias url: webView.url
property alias title: webView.title
Expand Down Expand Up @@ -110,10 +109,6 @@ Page {
onApplyContentOrientation: webView.applyContentOrientation(browserPage.orientation)
}

HistoryModel {
id: historyModel
}

Private.VirtualKeyboardObserver {
id: virtualKeyboardObserver

Expand Down Expand Up @@ -270,7 +265,6 @@ Page {

active: browserPage.status == PageStatus.Active
webView: webView
historyModel: historyModel
browserPage: browserPage

onEnteringNewTabUrlChanged: window.opaqueBackground = webView.tabModel.waitingForNewTab || enteringNewTabUrl
Expand Down
283 changes: 154 additions & 129 deletions src/pages/components/FavoriteGrid.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,39 +13,32 @@ import QtQuick 2.0
import Sailfish.Silica 1.0
import Sailfish.Browser 1.0

SilicaGridView {
id: favoriteGrid
Loader {
id: root

readonly property real pageHeight: Math.ceil(browserPage.height + pageStack.panelSize)

readonly property Item contextMenu: currentItem ? currentItem._menuItem : null
readonly property bool contextMenuActive: contextMenu && contextMenu.active

// Figure out which delegates need to be moved down to make room
// for the context menu when it's open.
readonly property int minOffsetIndex: contextMenu ? currentIndex - (currentIndex % columns) + columns : 0
readonly property int yOffset: contextMenu ? contextMenu.height : 0

readonly property int rows: Math.floor(pageHeight / minimumCellHeight)
readonly property int columns: Math.floor(browserPage.width / minimumCellWidth)

readonly property int horizontalMargin: largeScreen ? 6 * Theme.paddingLarge : Theme._homePageMargin
readonly property int initialCellWidth: (browserPage.width - 2*horizontalMargin) / columns

// The multipliers below for Large screens are magic. They look good on Jolla tablet.
readonly property real minimumCellWidth: largeScreen ? Theme.itemSizeExtraLarge * 1.6 : Theme.itemSizeExtraLarge
// phone reference row height: 960 / 6
readonly property real minimumCellHeight: largeScreen ? Theme.itemSizeExtraLarge * 1.6 : Theme.pixelRatio * 160
property Component header
property bool showFavorites
property QtObject model
readonly property real contentY: item ? item.contentY : 0
readonly property Item contextMenu: item ? item.contextMenu : null
readonly property bool moving: item && item.moving
readonly property int count: item ? item.count : 0

signal load(string url, string title)
signal newTab(string url, string title)
signal share(string url, string title)

function positionViewAtBeginning() {
if (item) {
item.positionViewAtBeginning()
}
}

function fetchAndSaveBookmark() {
var webPage = webView && webView.contentItem
if (webPage) {
// Fetcher itself does async fetching. No need to create this asynchronously.
var fetcher = iconFetcher.createObject(favoriteGrid,
var fetcher = iconFetcher.createObject(root,
{
"url": webPage.url,
"title": webPage.title,
Expand All @@ -55,103 +48,159 @@ SilicaGridView {
}
}

width: cellWidth * columns
currentIndex: -1
anchors.horizontalCenter: parent.horizontalCenter
cellWidth: Math.floor(initialCellWidth + (initialCellWidth - Theme.iconSizeLauncher) / (columns - 1))
cellHeight: Math.round(pageHeight / rows)
onActiveChanged: if (active) active = true // remove binding
active: showFavorites
asynchronous: true

displaced: Transition { NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: 200 } }
cacheBuffer: cellHeight * 2
sourceComponent: SilicaGridView {
id: favoriteGrid

onVisibleChanged: {
if (!visible && contextMenuActive) {
contextMenu.hide()
}
}
readonly property real pageHeight: Math.ceil(browserPage.height + pageStack.panelSize)

delegate: ListItem {
id: container

property real offsetY: largeScreen
? - (((-favoriteGrid.originY+container.contentHeight/2)%favoriteGrid.pageHeight)/favoriteGrid.pageHeight - 0.5) * (Theme.paddingLarge*4)
: 0

signal addToLauncher
signal editBookmark

width: favoriteGrid.cellWidth
_showPress: false
contentHeight: favoriteGrid.cellHeight
menu: favoriteContextMenu
down: favoriteItem.down
openMenuOnPressAndHold: false
// Do not capture mouse events here. This ListItem only handles
// menu creation and destruction.
enabled: false

onAddToLauncher: {
// url, title, favicon
pageStack.push(addToLauncherDialog,
{
"url": url,
"title": title,
"icon": favicon
})
}
readonly property Item contextMenu: currentItem ? currentItem._menuItem : null
readonly property bool contextMenuActive: contextMenu && contextMenu.active

// Figure out which delegates need to be moved down to make room
// for the context menu when it's open.
readonly property int minOffsetIndex: contextMenu ? currentIndex - (currentIndex % columns) + columns : 0
readonly property int yOffset: contextMenu ? contextMenu.height : 0

onEditBookmark: {
// index, url, title
pageStack.push(editDialog,
{
"url": url,
"title": title,
"index": index,
})
readonly property int rows: Math.floor(pageHeight / minimumCellHeight)
readonly property int columns: Math.floor(browserPage.width / minimumCellWidth)

readonly property int horizontalMargin: largeScreen ? 6 * Theme.paddingLarge : Theme._homePageMargin
readonly property int initialCellWidth: (browserPage.width - 2*horizontalMargin) / columns

// The multipliers below for Large screens are magic. They look good on Jolla tablet.
readonly property real minimumCellWidth: largeScreen ? Theme.itemSizeExtraLarge * 1.6 : Theme.itemSizeExtraLarge
// phone reference row height: 960 / 6
readonly property real minimumCellHeight: largeScreen ? Theme.itemSizeExtraLarge * 1.6 : Theme.pixelRatio * 160

header: root.header
model: root.model
width: cellWidth * columns
currentIndex: -1
anchors.horizontalCenter: parent.horizontalCenter
_quickScrollRightMargin: -(browserPage.width - width) / 2
cellWidth: Math.floor(initialCellWidth + (initialCellWidth - Theme.iconSizeLauncher) / (columns - 1))
cellHeight: Math.round(pageHeight / rows)

displaced: Transition { NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: 200 } }
cacheBuffer: cellHeight * 2

onVisibleChanged: {
if (!visible && contextMenuActive) {
contextMenu.hide()
}
}

FavoriteItem {
id: favoriteItem
delegate: ListItem {
id: container

property real offsetY: largeScreen
? - (((-favoriteGrid.originY+container.contentHeight/2)%favoriteGrid.pageHeight)/favoriteGrid.pageHeight - 0.5) * (Theme.paddingLarge*4)
: 0

signal addToLauncher
signal editBookmark

width: favoriteGrid.cellWidth
height: favoriteGrid.cellHeight
y: index >= favoriteGrid.minOffsetIndex ? favoriteGrid.yOffset : 0.0

onClicked: favoriteGrid.load(model.url, model.title)
onShowContextMenuChanged: {
if (showContextMenu) {
// Set currentIndex for grid to make minOffsetIndex calculation to work.
favoriteGrid.currentIndex = model.index
container.openMenu(
{
"view": favoriteGrid,
"delegate": container,
"title": model.title,
"url": model.url,
"index": model.index
})
_showPress: false
contentHeight: favoriteGrid.cellHeight
menu: favoriteContextMenu
down: favoriteItem.down
openMenuOnPressAndHold: false
// Do not capture mouse events here. This ListItem only handles
// menu creation and destruction.
enabled: false

onAddToLauncher: {
// url, title, favicon
pageStack.push(addToLauncherDialog,
{
"url": url,
"title": title,
"icon": favicon
})
}

onEditBookmark: {
// index, url, title
pageStack.push(editDialog,
{
"url": url,
"title": title,
"index": index,
})
}

FavoriteItem {
id: favoriteItem

width: favoriteGrid.cellWidth
height: favoriteGrid.cellHeight
y: index >= favoriteGrid.minOffsetIndex ? favoriteGrid.yOffset : 0.0

onClicked: root.load(model.url, model.title)
onShowContextMenuChanged: {
if (showContextMenu) {
// Set currentIndex for grid to make minOffsetIndex calculation to work.
favoriteGrid.currentIndex = model.index
container.openMenu(
{
"view": root,
"delegate": container,
"title": model.title,
"url": model.url,
"index": model.index
})
}
}

GridView.onAdd: AddAnimation { target: favoriteItem }
GridView.onRemove: animateRemoval()
}
}

GridView.onAdd: AddAnimation { target: favoriteItem }
GridView.onRemove: animateRemoval()
FavoriteContextMenu {
id: favoriteContextMenu
}
}

FavoriteContextMenu {
id: favoriteContextMenu
}
VerticalScrollDecorator {
parent: favoriteGrid
anchors.rightMargin: -(browserPage.width - favoriteGrid.width) / 2
flickable: favoriteGrid
}

VerticalScrollDecorator {
parent: favoriteGrid
anchors.rightMargin: -(browserPage.width - favoriteGrid.width) / 2
flickable: favoriteGrid
}
Component {
id: desktopBookmarkWriter
DesktopBookmarkWriter {
onSaved: destroy()
}
}

Component {
id: desktopBookmarkWriter
DesktopBookmarkWriter {
onSaved: destroy()
Component {
id: editDialog
BookmarkEditDialog {
onAccepted: bookmarkModel.edit(index, editedUrl, editedTitle)
}
}

Component {
id: addToLauncherDialog
BookmarkEditDialog {
property string icon
property var bookmarkWriter

//: Title of the "Add to App Grid" dialog.
//% "Add to App Grid"
title: qsTrId("sailfish_browser-he-add_bookmark_to_launcher")
canAccept: editedUrl !== "" && editedTitle !== ""
onAccepted: {
bookmarkWriter = desktopBookmarkWriter.createObject(favoriteGrid)
bookmarkWriter.save(editedUrl, editedTitle, icon)
}
}
}
}

Expand Down Expand Up @@ -199,28 +248,4 @@ SilicaGridView {
}
}
}

Component {
id: editDialog
BookmarkEditDialog {
onAccepted: bookmarkModel.edit(index, editedUrl, editedTitle)
}
}

Component {
id: addToLauncherDialog
BookmarkEditDialog {
property string icon
property var bookmarkWriter

//: Title of the "Add to App Grid" dialog.
//% "Add to App Grid"
title: qsTrId("sailfish_browser-he-add_bookmark_to_launcher")
canAccept: editedUrl !== "" && editedTitle !== ""
onAccepted: {
bookmarkWriter = desktopBookmarkWriter.createObject(favoriteGrid)
bookmarkWriter.save(editedUrl, editedTitle, icon)
}
}
}
}
2 changes: 1 addition & 1 deletion src/pages/components/HistoryList.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ SilicaListView {
ViewPlaceholder {
x: (view.width - width) / 2
y: view.originY + (view.height - height) / 2
enabled: !history.count
enabled: !view.count

//: Shown as placeholder in history list when entered text or url did not match to history.
//% "Press enter to open"
Expand Down
Loading