Merge lp:~osomon/webbrowser-app/flickable-drawer into lp:webbrowser-app

[Olivier Tilloy]

Make the drawer menu flickable so that all its actions can be accessed even on a small mobile screen in landscape orientation.

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:1283
http://jenkins.qa.ubuntu.com/job/webbrowser-app-ci/2492/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/5428
    SUCCESS: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-amd64-ci/1246
    SUCCESS: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-armhf-ci/1246
        deb: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-armhf-ci/1246/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/webbrowser-app-vivid-i386-ci/1246
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-touch/4285
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/5442
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/5442/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/25535

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

review: Approve (continuous-integration)

[Ugo Riboni (uriboni)]

Code looks good and works as expected.

review: Approve

=== modified file 'src/app/webbrowser/Browser.qml'
--- src/app/webbrowser/Browser.qml	2015-11-24 09:35:34 +0000
+++ src/app/webbrowser/Browser.qml	2015-11-26 12:38:38 +0000
@@ -449,6 +449,8 @@
         showTabsBar: browser.wide
         showFaviconInAddressBar: !browser.wide
 
+        availableHeight: tabContainer.height - height - y
+
         property bool hidden: false
         y: hidden ? -height : webview ? webview.locationBarController.offset : 0
         Behavior on y {

=== modified file 'src/app/webbrowser/Chrome.qml'
--- src/app/webbrowser/Chrome.qml	2015-11-23 16:05:42 +0000
+++ src/app/webbrowser/Chrome.qml	2015-11-26 12:38:38 +0000
@@ -38,6 +38,7 @@
     property alias incognito: navigationBar.incognito
     property alias showTabsBar: tabsBar.active
     property alias showFaviconInAddressBar: navigationBar.showFaviconInAddressBar
+    property alias availableHeight: navigationBar.availableHeight
     readonly property alias bookmarkTogglePlaceHolder: navigationBar.bookmarkTogglePlaceHolder
 
     signal switchToTab(int index)

=== modified file 'src/app/webbrowser/NavigationBar.qml'
--- src/app/webbrowser/NavigationBar.qml	2015-11-23 16:05:42 +0000
+++ src/app/webbrowser/NavigationBar.qml	2015-11-26 12:38:38 +0000
@@ -38,6 +38,7 @@
     property alias showFaviconInAddressBar: addressbar.showFavicon
     readonly property alias bookmarkTogglePlaceHolder: addressbar.bookmarkTogglePlaceHolder
     property color iconColor: UbuntuColors.darkGrey
+    property real availableHeight
 
     onFindInPageModeChanged: if (findInPageMode) addressbar.text = ""
     onIncognitoChanged: findInPageMode = false
@@ -246,8 +247,8 @@
                 right: parent.right
             }
             width: units.gu(22)
-            height: actionsColumn.height
-            clip: actionsColumn.y != 0
+            height: actionsListView.height
+            clip: actionsListView.y != 0
 
             InverseMouseArea {
                 enabled: drawer.opened
@@ -255,7 +256,7 @@
             }
 
             Rectangle {
-                anchors.fill: actionsColumn
+                anchors.fill: actionsListView
                 color: Theme.palette.normal.background
 
                 Rectangle {
@@ -279,13 +280,17 @@
                 }
             }
 
-            Column {
-                id: actionsColumn
+            ListView {
+                id: actionsListView
 
                 anchors {
                     left: parent.left
                     right: parent.right
                 }
+                height: Math.min(_contentHeight, availableHeight)
+                // avoid a binding loop
+                property real _contentHeight: 0
+                onContentHeightChanged: _contentHeight = contentHeight
 
                 y: drawer.opened ? 0 : -height
                 Behavior on y { UbuntuNumberAnimation {} }
@@ -295,57 +300,58 @@
                     }
                 }
 
-                Repeater {
-                    model: drawerActions
-                    delegate: AbstractButton {
-                        objectName: action.objectName
+                clip: true
+
+                model: drawerActions
+
+                delegate: AbstractButton {
+                    objectName: action.objectName
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                    }
+                    height: visible ? units.gu(6) : 0
+                    visible: action.enabled
+
+                    action: modelData
+                    onClicked: drawer.opened = false
+
+                    Rectangle {
+                        anchors.fill: parent
+                        color: Theme.palette.selected.background
+                        visible: parent.pressed
+                    }
+
+                    Icon {
+                        id: actionIcon
                         anchors {
                             left: parent.left
+                            leftMargin: units.gu(2)
+                            verticalCenter: parent.verticalCenter
+                        }
+                        width: units.gu(2)
+                        height: width
+
+                        name: model.iconName
+                        Binding on source {
+                            when: model.iconSource.toString()
+                            value: model.iconSource
+                        }
+                        color: UbuntuColors.darkGrey
+                    }
+
+                    Label {
+                        anchors {
+                            left: actionIcon.right
+                            leftMargin: units.gu(2)
+                            verticalCenter: parent.verticalCenter
                             right: parent.right
-                        }
-                        height: units.gu(6)
-                        visible: action.enabled
-
-                        action: modelData
-                        onClicked: drawer.opened = false
-
-                        Rectangle {
-                            anchors.fill: parent
-                            color: Theme.palette.selected.background
-                            visible: parent.pressed
-                        }
-
-                        Icon {
-                            id: actionIcon
-                            anchors {
-                                left: parent.left
-                                leftMargin: units.gu(2)
-                                verticalCenter: parent.verticalCenter
-                            }
-                            width: units.gu(2)
-                            height: width
-
-                            name: model.iconName
-                            Binding on source {
-                                when: model.iconSource.toString()
-                                value: model.iconSource
-                            }
-                            color: UbuntuColors.darkGrey
-                        }
-
-                        Label {
-                            anchors {
-                                left: actionIcon.right
-                                leftMargin: units.gu(2)
-                                verticalCenter: parent.verticalCenter
-                                right: parent.right
-                                rightMargin: units.gu(1)
-                            }
-                            text: model.text
-                            fontSize: "small"
-                            color: UbuntuColors.darkGrey
-                            elide: Text.ElideRight
-                        }
+                            rightMargin: units.gu(1)
+                        }
+                        text: model.text
+                        fontSize: "small"
+                        color: UbuntuColors.darkGrey
+                        elide: Text.ElideRight
                     }
                 }
             }