From 9ba7cc29e96548a05fd6fa2d78077a230665ae99 Mon Sep 17 00:00:00 2001 From: Joona Petrell Date: Tue, 28 Aug 2018 12:16:36 +0300 Subject: [PATCH 1/3] [sailfish-browser] Only load secondary bar when shown. Contributes to JB#42700 --- src/pages/components/SecondaryBar.qml | 137 ++++++++++++++------------ src/pages/components/ToolBar.qml | 7 +- 2 files changed, 77 insertions(+), 67 deletions(-) diff --git a/src/pages/components/SecondaryBar.qml b/src/pages/components/SecondaryBar.qml index 9e3f17127c95..ff186a0fc9b4 100644 --- a/src/pages/components/SecondaryBar.qml +++ b/src/pages/components/SecondaryBar.qml @@ -15,86 +15,99 @@ import Sailfish.Browser 1.0 import org.nemomobile.dbus 2.0 import "." as Browser -Item { +Loader { id: root property bool bookmarked property int horizontalOffset + property bool toolsActive property int iconWidth - property real midIconWidth: iconWidth + (iconWidth - forwardButton.width) / 3 width: parent.width - height: isPortrait ? Settings.toolbarLarge : Settings.toolbarSmall - clip: opacity < 1.0 + active: toolsActive + visible: opacity > 0.0 || height > 0.0 + onActiveChanged: if (active) active = true // remove binding + opacity: toolsActive && !!item ? 1.0 : 0.0 + Behavior on opacity { FadeAnimator {} } - Row { - width: parent.width - height: parent.height - - Browser.TabButton { - id: addTabButton - width: iconWidth + horizontalOffset - horizontalOffset: root.horizontalOffset - label.text: "+" - onTapped: enterNewTabUrl() - } + sourceComponent: Item { + id: bar - Browser.ExpandingButton { - id: forwardButton - expandedWidth: iconWidth - icon.source: "image://theme/icon-m-forward" - active: webView.canGoForward - onTapped: webView.goForward() - } + property real midIconWidth: iconWidth + (iconWidth - forwardButton.width) / 3 + + width: parent.width + height: isPortrait ? Settings.toolbarLarge : Settings.toolbarSmall + clip: opacity < 1.0 - // Spacer for pushing Search, Favorite, Share, Downloads to the right hand side - Item { + Row { + width: parent.width height: parent.height - width: parent.width - addTabButton.width - forwardButton.width - midIconWidth * 3 - downloadsButton.width - } - Browser.IconButton { - width: midIconWidth - icon.source: "image://theme/icon-m-search" - active: webView.contentItem - onTapped: { - findInPageActive = true - findInPage() + Browser.TabButton { + id: addTabButton + width: iconWidth + horizontalOffset + horizontalOffset: root.horizontalOffset + label.text: "+" + onTapped: enterNewTabUrl() + } + + Browser.ExpandingButton { + id: forwardButton + expandedWidth: iconWidth + icon.source: "image://theme/icon-m-forward" + active: webView.canGoForward + onTapped: webView.goForward() + } + + // Spacer for pushing Search, Favorite, Share, Downloads to the right hand side + Item { + height: parent.height + width: parent.width - addTabButton.width - forwardButton.width - bar.midIconWidth * 3 - downloadsButton.width } - } - Browser.IconButton { - width: midIconWidth - icon.source: bookmarked ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite" - active: webView.contentItem - onClicked: { - if (bookmarked) { - removeActivePageFromBookmarks() - } else { - bookmarkActivePage() + Browser.IconButton { + width: bar.midIconWidth + icon.source: "image://theme/icon-m-search" + active: webView.contentItem + onTapped: { + findInPageActive = true + findInPage() } } - } - Browser.IconButton { - width: midIconWidth - icon.source: "image://theme/icon-m-share" - active: webView.contentItem - onTapped: shareActivePage() - } + Browser.IconButton { + width: bar.midIconWidth + icon.source: bookmarked ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite" + active: webView.contentItem + onClicked: { + if (bookmarked) { + removeActivePageFromBookmarks() + } else { + bookmarkActivePage() + } + } + } - Browser.IconButton { - id: downloadsButton - width: iconWidth + horizontalOffset - icon.source: "image://theme/icon-m-transfer" - icon.anchors.horizontalCenterOffset: -horizontalOffset - onTapped: settingsApp.call("showTransfers", []) + Browser.IconButton { + width: bar.midIconWidth + icon.source: "image://theme/icon-m-share" + active: webView.contentItem + onTapped: shareActivePage() + } + + Browser.IconButton { + id: downloadsButton + width: iconWidth + horizontalOffset + icon.source: "image://theme/icon-m-transfer" + icon.anchors.horizontalCenterOffset: -horizontalOffset + onTapped: settingsApp.call("showTransfers", []) + } } - } - DBusInterface { - id: settingsApp - service: "com.jolla.settings" - iface: "com.jolla.settings.ui" - path: "/com/jolla/settings/ui" + DBusInterface { + id: settingsApp + service: "com.jolla.settings" + iface: "com.jolla.settings.ui" + path: "/com/jolla/settings/ui" + } } } diff --git a/src/pages/components/ToolBar.qml b/src/pages/components/ToolBar.qml index f52b429a5ced..a01d07e771c6 100644 --- a/src/pages/components/ToolBar.qml +++ b/src/pages/components/ToolBar.qml @@ -79,13 +79,10 @@ Column { SecondaryBar { id: secondaryBar - visible: opacity > 0.0 || height > 0.0 - opacity: secondaryToolsActive ? 1.0 : 0.0 - height: secondaryToolsHeight + toolsActive: toolBarRow.secondaryToolsActive horizontalOffset: toolBarRow.horizontalOffset iconWidth: toolBarRow.iconWidth - - Behavior on opacity { FadeAnimation {} } + height: secondaryToolsHeight } Row { From e1855f59c5a0f74141183a54f783680e23f9954c Mon Sep 17 00:00:00 2001 From: Joona Petrell Date: Tue, 28 Aug 2018 12:40:09 +0300 Subject: [PATCH 2/3] [sailfish-browser] Only load favorite grid when shown. Contributes to JB#42700 --- src/pages/components/FavoriteGrid.qml | 283 ++++++++++++++------------ src/pages/components/Overlay.qml | 6 +- 2 files changed, 157 insertions(+), 132 deletions(-) diff --git a/src/pages/components/FavoriteGrid.qml b/src/pages/components/FavoriteGrid.qml index 93fce4bae813..26e115264cdb 100644 --- a/src/pages/components/FavoriteGrid.qml +++ b/src/pages/components/FavoriteGrid.qml @@ -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, @@ -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) + } + } } } @@ -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) - } - } - } } diff --git a/src/pages/components/Overlay.qml b/src/pages/components/Overlay.qml index 89b3adba9676..c246bc29f659 100644 --- a/src/pages/components/Overlay.qml +++ b/src/pages/components/Overlay.qml @@ -477,11 +477,11 @@ Background { Browser.FavoriteGrid { id: favoriteGrid + showFavorites: historyContainer.showFavorites height: historyList.height - opacity: historyContainer.showFavorites && toolBar.opacity < 0.9 ? 1.0 : 0.0 + opacity: showFavorites && toolBar.opacity < 0.9 && count > 0 ? 1.0 : 0.0 enabled: overlayAnimator.atTop - visible: !overlayAnimator.atBottom && !toolBar.findInPageActive && historyContainer.showFavorites - _quickScrollRightMargin: -(browserPage.width - width) / 2 + visible: !overlayAnimator.atBottom && !toolBar.findInPageActive && showFavorites header: Item { width: parent.width From 7a5b3ad03810c49d8655497e5d974127c613394b Mon Sep 17 00:00:00 2001 From: Joona Petrell Date: Tue, 28 Aug 2018 13:22:19 +0300 Subject: [PATCH 3/3] [sailfish-browser] Postpone processing history model and delegate until actual search. Contributes to JB#42700 --- src/pages/BrowserPage.qml | 6 ------ src/pages/components/HistoryList.qml | 2 +- src/pages/components/Overlay.qml | 12 +++++++++--- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/pages/BrowserPage.qml b/src/pages/BrowserPage.qml index 0e2dcf146ecd..d6155c1bdb8f 100644 --- a/src/pages/BrowserPage.qml +++ b/src/pages/BrowserPage.qml @@ -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 @@ -110,10 +109,6 @@ Page { onApplyContentOrientation: webView.applyContentOrientation(browserPage.orientation) } - HistoryModel { - id: historyModel - } - Private.VirtualKeyboardObserver { id: virtualKeyboardObserver @@ -270,7 +265,6 @@ Page { active: browserPage.status == PageStatus.Active webView: webView - historyModel: historyModel browserPage: browserPage onEnteringNewTabUrlChanged: window.opaqueBackground = webView.tabModel.waitingForNewTab || enteringNewTabUrl diff --git a/src/pages/components/HistoryList.qml b/src/pages/components/HistoryList.qml index 33c2b3349997..41e1d64bf8d8 100644 --- a/src/pages/components/HistoryList.qml +++ b/src/pages/components/HistoryList.qml @@ -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" diff --git a/src/pages/components/Overlay.qml b/src/pages/components/Overlay.qml index c246bc29f659..f8847ef438f9 100644 --- a/src/pages/components/Overlay.qml +++ b/src/pages/components/Overlay.qml @@ -21,7 +21,6 @@ Background { property bool active property QtObject webView property Item browserPage - property alias historyModel: historyList.model property alias toolBar: toolBar property alias progressBar: progressBar property alias animator: overlayAnimator @@ -462,16 +461,23 @@ Background { height: searchField.height } - search: searchField.text + model: historyModelLoader.item + search: !!model ? searchField.text : "" opacity: historyContainer.showFavorites || toolBar.opacity > 0.9 ? 0.0 : 1.0 enabled: overlayAnimator.atTop visible: !overlayAnimator.atBottom && !toolBar.findInPageActive && !historyContainer.showFavorites onMovingChanged: if (moving) historyList.focus = true - onSearchChanged: if (search !== webView.url) historyModel.search(search) + onSearchChanged: if (search !== webView.url) model.search(search) onLoad: overlay.loadPage(url, title) Behavior on opacity { FadeAnimator {} } + Loader { + id: historyModelLoader + active: searchField.text.length > 0 && searchField.text !== webView.url + onActiveChanged: if (active) active = true // remove binding + sourceComponent: HistoryModel {} + } } Browser.FavoriteGrid {