Merge lp:~rpadovani/webbrowser-app/new-tab-landscape-mode into lp:webbrowser-app

[Riccardo Padovani]

Add the landscape mode to new tab view

Add the landscape mode accordingly to design spec.

Sections have a slightly different style (no underlined text, no bold text) due the change in the sdk theme. I preferred to implement sections as they're implemented in the sdk instead following browser specs that probably are outdated

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1051
http://jenkins.qa.ubuntu.com/job/webbrowser-app-ci/1857/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/3102/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-amd64-ci/614/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-armhf-ci/614/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-i386-ci/614/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/3100/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/webbrowser-app-ci/1857/rebuild

review: Needs Fixing (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:1051
http://jenkins.qa.ubuntu.com/job/webbrowser-app-ci/1870/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/3157
    SUCCESS: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-amd64-ci/627
    SUCCESS: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-armhf-ci/627
        deb: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-armhf-ci/627/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-i386-ci/627
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-mako/2654
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/3155
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/3155/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/21119

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/webbrowser-app-ci/1870/rebuild

review: Approve (continuous-integration)

[Ugo Riboni (uriboni)]

Thanks Riccardo for the work on this.

The bookmarks UrlList needs the limit property to be set on it, or it does not show anything. Design suggests using a limit of 10.

The UI Toolkit team is working on a new component called Sections that will allow you to easily implement the design for the switch between the Top Sites and Bookmarks sections.
You can find the work in this branch: lp:~tpeeters/ubuntu-ui-toolkit/100-SectionBar/

I pushed a branch here, based on yours, that uses the new Sections component: lp:~uriboni/webbrowser-app/new-tab-wide

Please base your branch on the use of Sections, since they will land in the UI toolkit soon.

Finally, the design for this feature calls for remembering the state so that we can go back to the last section that was active when creating a new tab after re-opening the browser.

And you should probably investigate the use of conditional layouts from the UITK to implement the switch between layouts.

review: Needs Fixing

[lp:~rpadovani/webbrowser-app/new-tab-landscape-mode]

1052. By Riccardo Padovani on 2015-06-20

Merge from upstream

1053. By Riccardo Padovani on 2015-06-20

Set UrlsList limit property

1054. By Riccardo Padovani on 2015-06-20

Use conditional layout

1055. By Riccardo Padovani on 2015-06-20

Base the new landscape page on the new sections component

1056. By Riccardo Padovani on 2015-06-20

Save which section in landscape view user used last time

[Riccardo Padovani (rpadovani)]

Thanks for the review!

> The UI Toolkit team is working on a new component called Sections that will
> allow you to easily implement the design for the switch between the Top Sites
> and Bookmarks sections.
> You can find the work in this branch: lp:~tpeeters/ubuntu-ui-
> toolkit/100-SectionBar/

This is awesome, thanks for pointing it to me, and thanks for your implementation, I used it in my branch!

> And you should probably investigate the use of conditional layouts from the
> UITK to implement the switch between layouts.

I never used them, hope my implementation is good.

Thanks again!

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1056
http://jenkins.qa.ubuntu.com/job/webbrowser-app-ci/1911/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/3262
    SUCCESS: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-amd64-ci/668
    SUCCESS: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-armhf-ci/668
        deb: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-armhf-ci/668/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-i386-ci/668
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-mako/2724
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/3260
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/3260/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/21343

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/webbrowser-app-ci/1911/rebuild

review: Needs Fixing (continuous-integration)

=== modified file 'src/app/webbrowser/Browser.qml'
--- src/app/webbrowser/Browser.qml	2015-06-18 08:12:33 +0000
+++ src/app/webbrowser/Browser.qml	2015-06-20 09:58:29 +0000
@@ -20,6 +20,7 @@
 import QtQuick.Window 2.0
 import Qt.labs.settings 1.0
 import com.canonical.Oxide 1.5 as Oxide
+import Ubuntu.Layouts 1.0
 import Ubuntu.Components 1.1
 import Ubuntu.Components.Popups 1.0
 import webbrowserapp.private 0.1
@@ -98,12 +99,14 @@
         property string searchEngine: settingsDefaults.searchEngine
         property string allowOpenInBackgroundTab: settingsDefaults.allowOpenInBackgroundTab
         property bool restoreSession: settingsDefaults.restoreSession
+        property int selectedIndexNewTabViewLandscape: settingsDefaults.selectedIndexNewTabViewLandscape
 
         function restoreDefaults() {
             homepage  = settingsDefaults.homepage
             searchEngine = settingsDefaults.searchEngine
             allowOpenInBackgroundTab = settingsDefaults.allowOpenInBackgroundTab
             restoreSession = settingsDefaults.restoreSession
+            selectedIndexNewTabViewLandscape = settingsDefaults.selectedIndexNewTabViewLandscape
         }
     }
 
@@ -114,6 +117,7 @@
         readonly property string searchEngine: "google"
         readonly property string allowOpenInBackgroundTab: "default"
         readonly property bool restoreSession: true
+        readonly property int selectedIndexNewTabViewLandscape: 0
     }
 
     Item {
@@ -209,35 +213,70 @@
                 }
             }
 
-            sourceComponent: browser.incognito ? newPrivateTabViewComponent : newTabViewComponent
+            sourceComponent: newTabViewComponent
 
             Component {
                 id: newTabViewComponent
 
-                NewTabView {
-                    historyModel: browser.historyModel
-                    bookmarksModel: browser.bookmarksModel
-                    settingsObject: settings
-                    onBookmarkClicked: {
-                        chrome.requestedUrl = url
-                        currentWebview.url = url
-                        currentWebview.forceActiveFocus()
-                    }
-                    onBookmarkRemoved: browser.bookmarksModel.remove(url)
-                    onHistoryEntryClicked: {
-                        chrome.requestedUrl = url
-                        currentWebview.url = url
-                        currentWebview.forceActiveFocus()
-                    }
+                Layouts {
+                    id: newTabViewLayouts
+
+                    anchors.fill: parent
+
+                    layouts: [
+                        ConditionalLayout {
+                            name: "newTabView"
+                            when: !browser.incognito && Screen.orientation == Screen.primaryOrientation
+
+                            NewTabView {
+                                anchors.fill: parent
+                                historyModel: browser.historyModel
+                                bookmarksModel: browser.bookmarksModel
+                                settingsObject: settings
+                                onBookmarkClicked: {
+                                    chrome.requestedUrl = url
+                                    currentWebview.url = url
+                                    currentWebview.forceActiveFocus()
+                                }
+                                onBookmarkRemoved: browser.bookmarksModel.remove(url)
+                                onHistoryEntryClicked: {
+                                    chrome.requestedUrl = url
+                                    currentWebview.url = url
+                                    currentWebview.forceActiveFocus()
+                                }
+                            }
+                        },
+                        ConditionalLayout {
+                            name: "newTabLandscapeView"
+                            when: !browser.incognito && Screen.orientation != Screen.primaryOrientation
+
+                            NewTabLandscapeView {
+                                anchors.fill: parent
+                                historyModel: browser.historyModel
+                                bookmarksModel: browser.bookmarksModel
+                                settingsObject: settings
+                                onBookmarkClicked: {
+                                    chrome.requestedUrl = url
+                                    currentWebview.url = url
+                                    currentWebview.forceActiveFocus()
+                                }
+                                onBookmarkRemoved: browser.bookmarksModel.remove(url)
+                                onHistoryEntryClicked: {
+                                    chrome.requestedUrl = url
+                                    currentWebview.url = url
+                                    currentWebview.forceActiveFocus()
+                                }
+                            }
+                        },
+                        ConditionalLayout {
+                            name: "newPrivateTabView"
+                            when: browser.incognito
+
+                            NewPrivateTabView { anchors.fill: parent }
+                        }
+                    ]
                 }
             }
-
-            Component {
-                id: newPrivateTabViewComponent
-
-                NewPrivateTabView { }
-            }
-            asynchronous: true
         }
 
         SearchEngine {

=== added file 'src/app/webbrowser/NewTabLandscapeView.qml'
--- src/app/webbrowser/NewTabLandscapeView.qml	1970-01-01 00:00:00 +0000
+++ src/app/webbrowser/NewTabLandscapeView.qml	2015-06-20 09:58:29 +0000
@@ -0,0 +1,171 @@
+/*
+ * Copyright 2015 Canonical Ltd.
+ *
+ * This file is part of webbrowser-app.
+ *
+ * webbrowser-app is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * webbrowser-app is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import Qt.labs.settings 1.0
+import Ubuntu.Components 1.3
+import webbrowserapp.private 0.1
+import ".."
+
+Item {
+    id: newTabViewLandscape
+
+    property QtObject bookmarksModel
+    property alias historyModel: historyTimeframeModel.sourceModel
+    property Settings settingsObject
+    property alias selectedIndex: sections.selectedIndex
+
+    signal bookmarkClicked(url url)
+    signal bookmarkRemoved(url url)
+    signal historyEntryClicked(url url)
+
+    TopSitesModel {
+        id: topSitesModel
+        sourceModel: HistoryTimeframeModel {
+            id: historyTimeframeModel
+        }
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        color: "#f6f6f6"
+    }
+
+    Sections {
+        id: sections
+
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            top: parent.top
+        }
+
+        actions: [
+            Action { text: i18n.tr("Top Sites") },
+            Action { text: i18n.tr("Bookmarks") }
+        ]
+    }
+
+    Binding {
+        target: sections
+        property: "selectedIndex"
+        value: settingsObject.selectedIndexNewTabViewLandscape
+    }
+
+    Flickable {
+        anchors {
+            top: sections.bottom
+            bottom: parent.bottom
+            left: parent.left
+            right: parent.right
+        }
+        contentHeight: contentColumn.height
+
+        clip: true
+
+        Column {
+            id: contentColumn
+            anchors {
+                left: parent.left
+                right: parent.right
+            }
+            height: childrenRect.height
+
+            Column {
+                id: bookmarksColumn
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                }
+
+                visible: newTabViewLandscape.selectedIndex === 1
+
+                height: childrenRect.height
+                spacing: 0
+
+                UrlDelegate {
+                    objectName: "homepageBookmark"
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                    }
+                    height: units.gu(5)
+
+                    title: i18n.tr('Homepage')
+
+                    leadingActions: null
+
+                    url: newTabViewLandscape.settingsObject.homepage
+                    onClicked: newTabViewLandscape.bookmarkClicked(url)
+                }
+
+                UrlsList {
+                    objectName: "bookmarksList"
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                    }
+
+                    spacing: 0
+                    limit: 10
+
+                    model: newTabViewLandscape.bookmarksModel
+
+                    onUrlClicked: newTabViewLandscape.bookmarkClicked(url)
+                    onUrlRemoved: newTabViewLandscape.bookmarkRemoved(url)
+                }
+            }
+
+            Label {
+                objectName: "notopsites"
+
+                height: units.gu(11)
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                }
+                visible: topSitesModel.count == 0 && newTabViewLandscape.selectedIndex === 0
+
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+
+                text: i18n.tr("You haven't visited any site yet")
+                color: "#5d5d5d"
+            }
+
+            UrlsList {
+                objectName: "topSitesList"
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                }
+
+                opacity: internal.seeMoreBookmarksView ? 0.0 : 1.0
+                Behavior on opacity { UbuntuNumberAnimation {} }
+                visible: newTabViewLandscape.selectedIndex === 0
+
+                limit: 10
+                spacing: 0
+
+                model: topSitesModel
+
+                onUrlClicked: newTabViewLandscape.historyEntryClicked(url)
+                onUrlRemoved: newTabViewLandscape.historyModel.hide(url)
+            }
+        }
+    }
+}