Merge lp:~fboucault/unity-2d/keyboard_navigation_experimental into lp:unity-2d/3.0

[Florian Boucault]

[dash] Implemented keyboard navigation.

[Gerry Boland (gerboland)]

I've found bugs:

- if number of results less than 6, the "See more/fewer results" option is of course hidden but
is still found by the keyboard navigation. Repro: do a search which returns <6 Applications. Hit down: where did focus go? Hit down again: there it is!

- Do search which returns large list of applications, scroll down. Now return to search box &
  do new search (again returning large list). New search results are still scrolled down.

- At Home, if you leave mouse highlighting one gridItem, using keyboard to navigate gives
  you a second "active" looking gridItem.

- At Home, press down, down, right, right, up, up, then Esc to close it. Now
  open Home again, press down, down and you appear on the third column now.

- At Search List of more than 6 rows or so, be about half-way down the applications list.
  Press up, down, left, right, and see how the list moves on the left/right motion - it
  shouldn't. This one is hard to reproduce - I get it searching for "e".

- At "Search Applications", at the search box, press right. Where is focus?

- Quickly type Meta, "w", down. See where focus appears - at "See Fewer Results" in the Files&Folders section

Suggestions/Questions?
- highlighted grid item's text has underline. Correct?

- At Home, continually pressing right on gridItems should wrap around?? Instead of stopping?
  Similarly for down & up? Fewer barriers?

review: Needs Fixing (search for bugs)

[Florian Boucault (fboucault)]

> I've found bugs:
>
> - if number of results less than 6, the "See more/fewer results" option is of
> course hidden but
> is still found by the keyboard navigation. Repro: do a search which returns <6
> Applications. Hit down: where did focus go? Hit down again: there it is!

[REPORT BUG] It is done that way for accessibility reasons. The name of the group needs to be spoken to blind people. Maybe there is a nicer way to do it.

>
> - Do search which returns large list of applications, scroll down. Now return
> to search box &
> do new search (again returning large list). New search results are still
> scrolled down.

[NEEDS FIXING] Scrolling down is done with the keyboard.

>
> - At Home, if you leave mouse highlighting one gridItem, using keyboard to
> navigate gives
> you a second "active" looking gridItem.
>

[REPORT BUG] Not sure what the solution should be. Should the keyboard focus follow the mouse?

> - At Home, press down, down, right, right, up, up, then Esc to close it. Now
> open Home again, press down, down and you appear on the third column now.
>

The dash is going stateful so that behaviour is _probably_ ok.

> - At Search List of more than 6 rows or so, be about half-way down the
> applications list.
> Press up, down, left, right, and see how the list moves on the left/right
> motion - it
> shouldn't. This one is hard to reproduce - I get it searching for "e".
>

[REPORT BUG]

> - At "Search Applications", at the search box, press right. Where is focus?
>

[NEEDS FIXING] I think the focus was sent to the search filters previously.

> - Quickly type Meta, "w", down. See where focus appears - at "See Fewer
> Results" in the Files&Folders section
>

[REPORT BUG] Not a big issue but to solve it it would require acting on keyboard presses only when the results are all in. Not sure if it's right especially if we consider network sources.

>
> Suggestions/Questions?
> - highlighted grid item's text has underline. Correct?
>

[REPORT BUG] Should be like in Unity 3D instead.

> - At Home, continually pressing right on gridItems should wrap around??
> Instead of stopping?
> Similarly for down & up? Fewer barriers?

It's fine like it is I think.

[lp:~fboucault/unity-2d/keyboard_navigation_experimental]

639. By Florian Boucault on 2011-07-27

Remade RendererGrid.interactive false thus preventing mouse interaction with the individual groups.

640. By Florian Boucault on 2011-07-27

Prevent the focus to be on the refine search pane when it is folded.

641. By Florian Boucault on 2011-07-27

Added FIXME/

642. By Florian Boucault on 2011-07-27

Merged colo:proper_grid

[Florian Boucault (fboucault)]

> > I've found bugs:
> >
> > - if number of results less than 6, the "See more/fewer results" option is
> of
> > course hidden but
> > is still found by the keyboard navigation. Repro: do a search which returns
> <6
> > Applications. Hit down: where did focus go? Hit down again: there it is!
>
> [REPORT BUG] It is done that way for accessibility reasons. The name of the
> group needs to be spoken to blind people. Maybe there is a nicer way to do it.
>
> >
> > - Do search which returns large list of applications, scroll down. Now
> return
> > to search box &
> > do new search (again returning large list). New search results are still
> > scrolled down.
>
> [NEEDS FIXING] Scrolling down is done with the keyboard.
>

Fixed.

> >
> > - At Home, if you leave mouse highlighting one gridItem, using keyboard to
> > navigate gives
> > you a second "active" looking gridItem.
> >
>
> [REPORT BUG] Not sure what the solution should be. Should the keyboard focus
> follow the mouse?
>
> > - At Home, press down, down, right, right, up, up, then Esc to close it. Now
> > open Home again, press down, down and you appear on the third column now.
> >
>
> The dash is going stateful so that behaviour is _probably_ ok.
>
> > - At Search List of more than 6 rows or so, be about half-way down the
> > applications list.
> > Press up, down, left, right, and see how the list moves on the left/right
> > motion - it
> > shouldn't. This one is hard to reproduce - I get it searching for "e".
> >
>
> [REPORT BUG]
>
> > - At "Search Applications", at the search box, press right. Where is focus?
> >
>
> [NEEDS FIXING] I think the focus was sent to the search filters previously.
>

Fixed.

> > - Quickly type Meta, "w", down. See where focus appears - at "See Fewer
> > Results" in the Files&Folders section
> >
>
> [REPORT BUG] Not a big issue but to solve it it would require acting on
> keyboard presses only when the results are all in. Not sure if it's right
> especially if we consider network sources.
>
> >
> > Suggestions/Questions?
> > - highlighted grid item's text has underline. Correct?
> >
>
> [REPORT BUG] Should be like in Unity 3D instead.
>
> > - At Home, continually pressing right on gridItems should wrap around??
> > Instead of stopping?
> > Similarly for down & up? Fewer barriers?
>
> It's fine like it is I think.

=== modified file 'places/CenteredGridView.qml'
--- places/CenteredGridView.qml	2011-06-23 17:08:53 +0000
+++ places/CenteredGridView.qml	2011-07-27 19:03:19 +0000
@@ -24,6 +24,32 @@
     property int delegateWidth: 100
     property int delegateHeight: 100
 
+    /* Manually handle key presses so that when the 'interactive' property is
+       set to false the keyboard navigation still works.
+
+       Ref.: https://bugreports.qt.nokia.com/browse/QTBUG-17051
+    */
+    function selectChild(index) {
+        if (index < 0 || index >= count) return false
+        currentIndex = index
+        return true
+    }
+
+    Keys.onPressed: if (handleKeyPress(event.key)) event.accepted = true
+    function handleKeyPress(key) {
+        switch (key) {
+        case Qt.Key_Right:
+            return selectChild(currentIndex+1)
+        case Qt.Key_Left:
+            return selectChild(currentIndex-1)
+        case Qt.Key_Up:
+            return selectChild(currentIndex-cellsPerRow)
+        case Qt.Key_Down:
+            return selectChild(currentIndex+cellsPerRow)
+        }
+        return false
+    }
+
     /* Compute the number of cells per row and column so that:
         - the items are always centered horizontally within the grid (= same
           margins on the right and left sides of the grid) when flow is set
 
=== modified file 'places/Home.qml'
--- places/Home.qml	2011-07-26 16:36:51 +0000
+++ places/Home.qml	2011-07-27 19:03:19 +0000
@@ -19,7 +19,7 @@
 import QtQuick 1.0
 import Unity2d 1.0 /* Necessary for SortFilterProxyModel and for the ImageProvider serving image://icons/theme_name/icon_name */
 
-Item {
+FocusScope {
     property variant model: PageModel {
         /* model.entrySearchQuery is copied over to all place entries's globalSearchQuery property */
         onEntrySearchQueryChanged: {
@@ -96,26 +96,39 @@
     ListViewWithScrollbar {
         id: globalSearch
 
+        focus: globalSearchActive
         opacity: globalSearchActive ? 1 : 0
         anchors.fill: parent
 
-        list.model: dash.places
-
-        list.delegate: UnityDefaultRenderer {
-            width: ListView.view.width
-
-            parentListView: list
-            placeEntryModel: item
-            displayName: item.name
-            iconHint: item.icon
-
-            model: item.globalResultsModel
+        model: dash.places
+
+        bodyDelegate: UnityDefaultRenderer {
+            placeEntryModel: model.item
+            displayName: model.item.name
+            iconHint: model.item.icon
+
+            group_model: model.item.globalResultsModel
+            property bool focusable: group_model != undefined && group_model.count > 0
+        }
+
+        headerDelegate: GroupHeader {
+            visible: body.needHeader && body.focusable
+            height: visible ? 32 : 0
+
+            property bool foldable: body.folded != undefined
+            availableCount: foldable && body.group_model != null ? body.group_model.count - body.cellsPerRow : 0
+            folded: foldable ? body.folded : false
+            onClicked: if(foldable) body.folded = !body.folded
+
+            icon: body.iconHint
+            label: body.displayName
         }
     }
 
-    Rectangle {
+    FocusScope {
         id: shortcuts
 
+        focus: !globalSearchActive
         opacity: (!globalSearchActive && (shortcutsActive || dashView.dashMode == DashDeclarativeView.FullScreenMode)) ? 1 : 0
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
@@ -123,11 +136,14 @@
         width: 888
         height: 466
 
-        radius: 5
-        border.width: 1
-        /* FIXME: wrong colors */
-        border.color: Qt.rgba(1, 1, 1, 0.2)
-        color: Qt.rgba(0, 0, 0, 0.3)
+        Rectangle {
+            anchors.fill: parent
+            radius: 5
+            border.width: 1
+            /* FIXME: wrong colors */
+            border.color: Qt.rgba(1, 1, 1, 0.2)
+            color: Qt.rgba(0, 0, 0, 0.3)
+        }
 
         Button {
             id: closeShortcutsButton
@@ -158,11 +174,13 @@
            on the default version if a custom one doesn’t exist. */
         Loader {
             id: customShortcutsLoader
+            focus: status == Loader.Ready
             anchors.fill: parent
             source: "HomeShortcutsCustomized.qml"
         }
         Loader {
             id: defaultShortcutsLoader
+            focus: !customShortcutsLoader.focus
             anchors.fill: parent
             source: (customShortcutsLoader.status == Loader.Error) ? "HomeShortcuts.qml" : ""
         }
 
=== modified file 'places/HomeShortcuts.qml'
--- places/HomeShortcuts.qml	2011-07-04 23:07:20 +0000
+++ places/HomeShortcuts.qml	2011-07-27 19:03:19 +0000
@@ -19,16 +19,41 @@
 import QtQuick 1.0
 import Unity2d 1.0 /* Necessary for the ImageProvider serving image://icons/theme_name/icon_name */
 
-Flow {
+Grid {
     anchors.fill: parent
     anchors.topMargin: 26
     anchors.bottomMargin: 35
     anchors.leftMargin: 32
     anchors.rightMargin: 32
     spacing: 61
+    columns: 4
+    rows: 2
+
+    function selectChild(index) {
+        if (index < 0 || index >= children.length) return false
+        currentIndex = index
+        children[index].focus = true
+        return true
+    }
+
+    property int currentIndex: 0
+    Keys.onPressed: if (handleKeyPress(event.key)) event.accepted = true
+    function handleKeyPress(key) {
+        switch (key) {
+        case Qt.Key_Right:
+            return selectChild(currentIndex+1)
+        case Qt.Key_Left:
+            return selectChild(currentIndex-1)
+        case Qt.Key_Up:
+            return selectChild(currentIndex-columns)
+        case Qt.Key_Down:
+            return selectChild(currentIndex+columns)
+        }
+    }
 
     /* FIXME: dummy icons need to be replaced by design's */
     HomeButton {
+        focus: true
         label: u2d.tr("Media Apps")
         icon: "artwork/find_media_apps.png"
         onClicked: activatePlaceEntry("/usr/share/unity/places/applications.place", "Files", 9)
 
=== added file 'places/ListViewWithHeaders.qml'
--- places/ListViewWithHeaders.qml	1970-01-01 00:00:00 +0000
+++ places/ListViewWithHeaders.qml	2011-07-27 19:03:19 +0000
@@ -0,0 +1,277 @@
+/*
+ * This file is part of unity-2d
+ *
+ * Copyright 2010-2011 Canonical Ltd.
+ *
+ * This program 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.
+ *
+ * This program 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 1.0
+
+/*
+  List item that behaves similarly to a ListView but supports adding headers
+  before every delegate.
+  It works around the lack of flexibility in section headers positioning of
+  ListView (cf. http://bugreports.qt.nokia.com/browse/QTBUG-12880). It also
+  supports delegates that are flickable by flicking their content properly
+  depending on where you are in the list.
+
+  To use it the following properties need to be set:
+  - bodyDelegate: Component used as a template for each item of the model; it
+    must have the following properties:
+     - 'contentY': same definition as a Flickable's
+     - 'totalHeight': the total height of the content of the body
+     - 'currentItem': a reference to the item of the body (e.g. a delegate of
+                      a ListView) currently focused by the body
+  - headerDelegate: Component used as a template for the header preceding each body
+
+  Two behaviours are available for the headers positioning:
+  - normal: the headers are always positioned just before the body
+  - accordion: the headers are stacked at the top and bottom of the list
+
+  Currently, it only works in a vertical layout.
+*/
+FocusScope {
+    id: list
+
+    property alias flickable: mouse
+    property alias model: repeater.model
+    property bool accordion: false
+    /* bodyDelegate must be an item that has the following properties:
+        - 'contentY'
+        - 'totalHeight'
+        - 'currentItem'
+    */
+    property Component bodyDelegate
+    property Component headerDelegate
+    property int currentIndex: -1
+    /* FIXME: Should be read-only but it is not possible to define a read-only property from QML.
+       Ref.: https://bugreports.qt.nokia.com//browse/QTBUG-15257
+    */
+    property variant currentItem: items.childFromIndex(currentIndex)
+
+
+    clip: true
+
+    /* updateMouseContentY() needs to be called when any of the variable
+       involved in the computation of the 'y' property of the currentSubItem changes.
+
+       if accordion is false:
+       - heightFirstChildren(index)
+       - headerLoader.height
+       - list.height
+
+       if accordion is true:
+       - heightFirstChildren(index)
+       - items.availableHeight
+       - heightFirstHeaders(index)
+
+       items.contentHeight seems to depend on all of those so it's enough to
+       depend only on it.
+    */
+    function updateMouseContentY() {
+        if (currentSubItem != undefined) {
+            mouse.contentY = Math.max(currentSubItem.mapToItem(mouse.contentItem, 0, 0).y -list.height/2, 0)
+        }
+    }
+    property variant currentSubItem: currentItem != undefined ? currentItem.bodyLoader.item.currentItem : undefined
+    onCurrentSubItemChanged: updateMouseContentY()
+
+    Connections {
+        target: items
+        onContentHeightChanged: updateMouseContentY()
+    }
+
+    FocusScope {
+        id: items
+
+        property int availableHeight: list.height - heightFirstHeaders(repeater.count)
+        property int contentHeight: items.heightFirstChildren(repeater.count)
+        property real value: mouse.contentY
+
+        anchors.fill: parent
+
+        function heightFirstChildren(n) {
+            var i
+            var totalHeight = 0
+            /* items.children contains both the repeated items and the repeater
+               itself. Skip and ignore the repeater. */
+            for (i=0; i<n && i<children.length; i++) {
+                if(children[i] == repeater) {n += 1; continue}
+                totalHeight += children[i].height
+            }
+            return totalHeight
+        }
+
+        function heightFirstHeaders(n) {
+            var i
+            var totalHeight = 0
+            /* items.children contains both the repeated items and the repeater
+               itself. Skip and ignore the repeater. */
+            for (i=0; i<n && i<children.length; i++) {
+                if(children[i] == repeater) {n += 1; continue}
+                totalHeight += children[i].headerLoader.height
+            }
+            return totalHeight
+        }
+
+        function clamp(x, min, max) {
+            return Math.max(Math.min(x, max), min)
+        }
+
+
+        /* Keyboard navigation */
+        function isIndexValid(index) {
+            /* Assuming that children contains exactly one item that is not a child (repeater) */
+            return index >= 0 && index < children.length-1
+        }
+
+        focus: true
+        Keys.onPressed: if (handleKeyPress(event.key)) event.accepted = true
+        function handleKeyPress(key) {
+            switch (key) {
+            case Qt.Key_Down:
+                return selectNextEnabled()
+            case Qt.Key_Up:
+                return selectPreviousEnabled()
+            }
+        }
+
+        function childFromIndex(index) {
+            var indexInChildren = 0
+            for(var i=0; i<children.length; i++) {
+                if (children[i] != repeater) {
+                    if (indexInChildren == index) return children[i]
+                    indexInChildren++
+                }
+            }
+
+            return undefined
+        }
+
+        function selectNextEnabled() {
+            var index = currentIndex
+            do {
+                index += 1
+                if (!isIndexValid(index)) return false
+            } while(!childFromIndex(index).focusable)
+            currentIndex = index
+            return true
+        }
+
+        function selectPreviousEnabled() {
+            var index = currentIndex
+            do {
+                index -= 1
+                if (!isIndexValid(index)) return false
+            } while(!childFromIndex(index).focusable)
+            currentIndex = index
+            return true
+        }
+
+        property bool needsFocus: false
+        onChildrenChanged: {
+            /* FIXME: this workarounds the fact that list.focus is set to false
+                      when the child with focus is destroyed
+            */
+            if (needsFocus) {
+                list.focus = true
+                needsFocus = false
+            }
+            /* Assuming that children contains exactly one item that is not a child (repeater) */
+            if(children.length <= 1) {
+                list.currentIndex = -1
+            } else {
+                list.currentIndex = -1
+                selectNextEnabled()
+            }
+        }
+
+        Repeater {
+            id: repeater
+
+            FocusScope {
+                property alias bodyLoader: bodyLoader
+                property alias headerLoader: headerLoader
+
+                focus: index == list.currentIndex
+                Component.onDestruction: items.needsFocus = true
+
+                width: list.width
+                height: headerLoader.height + bodyLoader.item.totalHeight
+                property bool focusable: bodyLoader.item.focusable
+
+                property int pmin: pmax - (ymax - ymin)
+                property int pmax: items.heightFirstChildren(index) - ymin
+                property int ymin: list.accordion ? items.heightFirstHeaders(index) : -headerLoader.height
+                property int ymax: list.accordion ? ymin + items.availableHeight : list.height
+                y: items.clamp(-items.value + ymax + pmin, ymin, ymax)
+
+                Loader {
+                    id: headerLoader
+
+                    focus: visible
+                    KeyNavigation.down: bodyLoader
+                    sourceComponent: headerDelegate
+                    onLoaded: item.focus = true
+                    width: parent.width
+
+                    /* Workaround Qt bug http://bugreports.qt.nokia.com/browse/QTBUG-18857
+                       More documentation at http://bugreports.qt.nokia.com/browse/QTBUG-18011
+                    */
+                    property int index
+                    Binding { target: headerLoader; property: "index"; value: index }
+                    property variant model
+                    Binding { target: headerLoader; property: "model"; value: model }
+                    property variant body
+                    Binding { target: headerLoader; property: "body"; value: bodyLoader.item }
+                }
+
+                Loader {
+                    id: bodyLoader
+
+                    focus: !headerLoader.focus
+                    KeyNavigation.up: headerLoader
+                    sourceComponent: list.bodyDelegate
+                    onLoaded: item.focus = true
+                    width: parent.width
+                    anchors.top: headerLoader.bottom
+                    height: items.clamp(parent.ymax - parent.y, 0, item.totalHeight)
+
+                    Binding {
+                        target: bodyLoader.item
+                        property: "contentY"
+                        value: Math.max(items.value - pmax, 0)
+                    }
+
+                    /* Workaround Qt bug http://bugreports.qt.nokia.com/browse/QTBUG-18857
+                       More documentation at http://bugreports.qt.nokia.com/browse/QTBUG-18011
+                    */
+                    property int index
+                    Binding { target: bodyLoader; property: "index"; value: index }
+                    property variant model
+                    Binding { target: bodyLoader; property: "model"; value: model }
+                }
+            }
+        }
+    }
+
+    Flickable {
+        id: mouse
+
+        z: -1
+        anchors.fill: parent
+        contentWidth: parent.width
+        contentHeight: items.contentHeight
+    }
+}
 
=== modified file 'places/ListViewWithScrollbar.qml'
--- places/ListViewWithScrollbar.qml	2011-06-23 17:08:53 +0000
+++ places/ListViewWithScrollbar.qml	2011-07-27 19:03:19 +0000
@@ -18,44 +18,21 @@
 
 import QtQuick 1.0
 
-Item {
-    property alias list: list
+FocusScope {
     property alias scrollbar: scrollbar
+    property alias model: list.model
+    property alias bodyDelegate: list.bodyDelegate
+    property alias headerDelegate: list.headerDelegate
 
-    ListView {
+    ListViewWithHeaders {
         id: list
 
+        focus: true
         anchors.top: parent.top
         anchors.bottom: parent.bottom
         anchors.left: parent.left
         anchors.right: scrollbar.left
         anchors.rightMargin: 15
-
-        clip: true
-        /* FIXME: proper spacing cannot be set because of the hack in Group.qml
-           whereby empty groups are still in the list but invisible and of
-           height 0.
-        */
-        //spacing: 31
-
-        orientation: ListView.Vertical
-
-        /* WARNING - HACK - FIXME
-           Issue:
-           User wise annoying jumps in the list are observable if cacheBuffer is
-           set to 0 (which is the default value). States such as 'folded' are
-           lost when scrolling a lot.
-
-           Explanation:
-           The height of the Group delegate depends on its content. However its
-           content is not known until the delegate is instantiated because it
-           depends on the number of results displayed by its GridView.
-
-           Resolution:
-           We set the cacheBuffer to the biggest possible int in order to make
-           sure all delegates are always instantiated.
-        */
-        cacheBuffer: 2147483647
     }
 
     Scrollbar {
@@ -67,7 +44,7 @@
         anchors.bottomMargin: 10
         anchors.right: parent.right
 
-        targetFlickable: list
+        targetFlickable: list.flickable
 
         /* Hide the scrollbar if there is less than a page of results */
         opacity: targetFlickable.visibleArea.heightRatio < 1.0 ? 1.0 : 0.0
 
=== modified file 'places/PlaceEntryView.qml'
--- places/PlaceEntryView.qml	2011-07-19 07:46:03 +0000
+++ places/PlaceEntryView.qml	2011-07-27 19:03:19 +0000
@@ -19,7 +19,7 @@
 import QtQuick 1.0
 import Unity2d 1.0 /* Necessary for SortFilterProxyModel */
 
-Item {
+FocusScope {
     id: placeEntryView
 
     /* An instance of PlaceEntryModel */
@@ -33,7 +33,7 @@
         var placeEntry, i
         for (i=0; i<placeEntryView.model.entryGroupsModel.count; i=i+1) {
             firstGroupModel.groupId = i
-            if (firstGroupModel.count() != 0) {
+            if (firstGroupModel.count != 0) {
                 var firstResult = firstGroupModel.get(0)
                 /* Places give back the uri of the item in 'column_0' per specification */
                 var uri = firstResult.column_0
@@ -62,6 +62,7 @@
     ListViewWithScrollbar {
         id: results
 
+        focus: true
         anchors.fill: parent
 
         /* The group's delegate is chosen dynamically depending on what
@@ -74,10 +75,10 @@
            If groupRenderer == 'UnityShowcaseRenderer' then it will look for
            the file 'UnityShowcaseRenderer.qml' and use it to render the group.
         */
-        list.delegate: Loader {
-            property string groupRenderer: column_0
-            property string displayName: column_1
-            property string iconHint: column_2
+        bodyDelegate: Loader {
+            property string groupRenderer: model.column_0
+            property string displayName: model.column_1
+            property string iconHint: model.column_2
             property int groupId: index
 
             source: groupRenderer ? groupRenderer+".qml" : ""
@@ -86,12 +87,8 @@
                     console.log("Failed to load renderer", groupRenderer)
             }
 
-            width: ListView.view.width
-
             /* Model that will be used by the group's delegate */
-            SortFilterProxyModel {
-                id: group_model
-
+            property variant group_model: SortFilterProxyModel {
                 model: placeEntryView.model.entryResultsModel
 
                 /* resultsModel contains data for all the groups of a given Place.
@@ -102,16 +99,37 @@
                 filterRegExp: RegExp("^%1$".arg(groupId)) /* exact match */
             }
 
-            onLoaded: {
-                item.parentListView = results.list
-                item.displayName = displayName
-                item.iconHint = iconHint
-                item.groupId = groupId
-                item.model = group_model
-                item.placeEntryModel = placeEntryView.model
-            }
-        }
-
-        list.model: placeEntryView.model != undefined ? placeEntryView.model.entryGroupsModel : undefined
+            /* Required by ListViewWithHeaders when the loaded Renderer is a Flickable.
+               In that case the list view scrolls the Flickable appropriately.
+            */
+            property int totalHeight: item.totalHeight != undefined ? item.totalHeight : 0
+            property int contentY
+            Binding { target: item; property: "contentY"; value: contentY }
+            property bool focusable: group_model.count > 0
+            property variant currentItem: item.currentItem
+
+            Binding { target: item; property: "displayName"; value: displayName }
+            Binding { target: item; property: "iconHint"; value: iconHint }
+            Binding { target: item; property: "groupId"; value: groupId }
+            Binding { target: item; property: "group_model"; value: group_model }
+            Binding { target: item; property: "placeEntryModel"; value: placeEntryView.model }
+
+            onLoaded: item.focus = true
+        }
+
+        headerDelegate: GroupHeader {
+            visible: body.item.needHeader && body.focusable
+            height: visible ? 32 : 0
+
+            property bool foldable: body.item.folded != undefined
+            availableCount: foldable ? body.group_model.count - body.item.cellsPerRow : 0
+            folded: foldable ? body.item.folded : false
+            onClicked: if(foldable) body.item.folded = !body.item.folded
+
+            icon: body.iconHint
+            label: body.displayName
+        }
+
+        model: placeEntryView.model != undefined ? placeEntryView.model.entryGroupsModel : undefined
     }
 }
 
=== modified file 'places/Renderer.qml'
--- places/Renderer.qml	2011-06-23 17:08:53 +0000
+++ places/Renderer.qml	2011-07-27 19:03:19 +0000
@@ -26,11 +26,11 @@
    itself. A typical renderer is the UnityDefaultRender that lays out the items
    in a grid of icons with the item's title underneath it.
 */
-Item {
+FocusScope {
     property string displayName /* Name of the group typically displayed in the header */
     property string iconHint /* Icon id of the group */
     property int groupId /* Index of the group */
-    property variant model /* List model containing the items to be displayed by the renderer */
+    property variant group_model /* List model containing the items to be displayed by the renderer */
     property variant placeEntryModel /* Reference to the place entry the group belongs to */
-    property variant parentListView /* Reference to the ListView the renderer is nested into */
+    property bool needHeader: false /* Whether or not the renderer requires a header to be displayed */
 }
 
=== modified file 'places/RendererGrid.qml'
--- places/RendererGrid.qml	2011-06-26 15:41:06 +0000
+++ places/RendererGrid.qml	2011-07-27 19:03:19 +0000
@@ -28,6 +28,11 @@
 Renderer {
     id: renderer
 
+    needHeader: true
+    property alias cellsPerRow: results.cellsPerRow
+    property alias contentY: results.contentY
+    property alias currentItem: results.currentItem
+
     property variant cellRenderer
     property bool folded
     folded: {
@@ -44,85 +49,23 @@
     property int horizontalSpacing: 26
     property int verticalSpacing: 26
 
-    /* Using results.contentHeight produces binding loop warnings and potential
-       rendering issues. We compute the height manually.
-    */
-    /* FIXME: tricking the system by making the delegate of height 0 and invisible
-              is no good: the item in the model still exists and some things
-              such as keyboard selection break.
-    */
-    visible: results.model.totalCount > 0
-    height: visible ? header.height + results_layout.anchors.topMargin + results.totalHeight : 0
-    //Behavior on height {NumberAnimation {duration: 200}}
-
-    GroupHeader {
-        id: header
-
-        availableCount: results.model.totalCount - results.cellsPerRow
-        folded: parent.folded
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.right: parent.right
-        height: 32
-        icon: parent.iconHint
-        label: parent.displayName
-
-        onClicked: parent.folded = !parent.folded
-    }
+    /* FIXME: using results_layout.anchors.topMargin in the following expression
+              causes QML to think they might be an anchor loop. */
+    property int totalHeight: results.count > 0 ? results_layout.anchors.topMargin + results.totalHeight : 0
 
     Item {
         id: results_layout
 
-        anchors.top: header.bottom
-        anchors.topMargin: 22
-        anchors.left: parent.left
+        anchors.fill: parent
+        anchors.topMargin: 12
         anchors.leftMargin: 2
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
 
         CenteredGridView {
             id: results
 
-            /* FIXME: this is a gross hack compensating for the lack of sections
-               in GridView (see ListView.section).
-
-               We nest GridViews inside a ListView and add headers manually
-               (GroupHeader). The total height of each Group is computed
-               manually and given back to the ListView. However that size cannot
-               be used by the individual GridViews because it would make them
-               load all of their delegates at once using far too much memory and
-               processing power. Instead we constrain the height of the GridViews
-               and compute their position manually to compensate for the position
-               changes when flicking the ListView.
-
-               We assume that renderer.parentListView is the ListView we nest our
-               GridView into.
-            */
-            property variant flickable: renderer.parentListView.contentItem
-
-            /* flickable.contentY*0 is equal to 0 but is necessary in order to
-               have the entire expression being evaluated at the right moment.
-            */
-            property int inFlickableY: flickable.contentY*0+parent.mapToItem(flickable, 0, 0).y
-            /* note: testing for flickable.height < 0 is probably useless since it is
-               unlikely flickable.height will ever be negative.
-            */
-            property int compensateY: inFlickableY > 0 || flickable.height < 0 || totalHeight < flickable.height ? 0 : -inFlickableY
-
-            /* Synchronise the position and content's position of the GridView
-               with the current position of flickable's visibleArea */
-            function synchronisePosition() {
-                y = compensateY
-                contentY = compensateY
-            }
-
-            onCompensateYChanged: synchronisePosition()
-            /* Any change in content needs to trigger a synchronisation */
-            onCountChanged: synchronisePosition()
-            onModelChanged: synchronisePosition()
-
-            width: flickable.width
-            height: Math.min(totalHeight, flickable.height)
+            focus: true
+
+            anchors.fill: parent
 
             property int totalHeight: results.cellHeight*Math.ceil(count/cellsPerRow)
 
@@ -134,7 +77,7 @@
             interactive: false
             clip: true
 
-            delegate: Item {
+            delegate: FocusScope {
 
                 width: results.cellWidth
                 height: results.cellHeight
@@ -155,6 +98,7 @@
                     height: results.delegateHeight
                     anchors.horizontalCenter: parent.horizontalCenter
 
+                    focus: true
                     sourceComponent: cellRenderer
                     onLoaded: {
                         item.uri = uri
@@ -162,13 +106,14 @@
                         item.mimetype = mimetype
                         item.displayName = displayName
                         item.comment = comment
+                        item.focus = true
                     }
                 }
             }
 
             /* Only display one line of items when folded */
             model: SortFilterProxyModel {
-                model: renderer.model != undefined ? renderer.model : null
+                model: renderer.group_model != undefined ? renderer.group_model : null
                 limit: folded ? results.cellsPerRow : -1
             }
         }
 
=== modified file 'places/Scrollbar.qml'
--- places/Scrollbar.qml	2011-06-26 15:16:43 +0000
+++ places/Scrollbar.qml	2011-07-27 19:03:19 +0000
@@ -83,7 +83,7 @@
             when: !dragMouseArea.drag.active
         }
 
-        height: Math.max(minimalHeight, targetFlickable.visibleArea.heightRatio * scrollbar.height)
+        height: Math.min(scrollbar.height, Math.max(minimalHeight, targetFlickable.visibleArea.heightRatio * scrollbar.height))
 
         Behavior on height {NumberAnimation {duration: 200; easing.type: Easing.InOutQuad}}
 
 
=== modified file 'places/SearchEntry.qml'
--- places/SearchEntry.qml	2011-06-23 17:08:53 +0000
+++ places/SearchEntry.qml	2011-07-27 19:03:19 +0000
@@ -19,7 +19,7 @@
 import QtQuick 1.0
 import Effects 1.0
 
-FocusScope {
+AbstractButton {
     property string searchQuery
 
     /* Cancels current search when the dash becomes invisible */
@@ -37,6 +37,8 @@
     /* Keys forwarded to the search entry are forwarded to the text input. */
     Keys.forwardTo: [search_input]
 
+    opacity: state == "selected" ? 1.0 : 0.7
+
     BorderImage {
         anchors.fill: parent
         source: "artwork/search_background.sci"
 
=== modified file 'places/SearchRefine.qml'
--- places/SearchRefine.qml	2011-06-23 17:08:53 +0000
+++ places/SearchRefine.qml	2011-07-27 19:03:19 +0000
@@ -26,6 +26,9 @@
     property int headerHeight
     property variant placeEntryModel
 
+    /* Give the focus to header when folded */
+    onFoldedChanged: if (folded) header.focus = true
+
     AbstractButton {
         id: header
 
@@ -49,6 +52,9 @@
 
         focus: true
 
+        /* Do not navigate down to the options if they are folded */
+        KeyNavigation.down: !searchRefine.folded ? options : header
+
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: parent.top
@@ -61,6 +67,7 @@
             text: u2d.tr("Refine search")
             font.bold: true
             font.pixelSize: 16
+            font.underline: parent.state == "selected"
 
             anchors.top: parent.top
             anchors.left: parent.left
@@ -92,6 +99,8 @@
         opacity: folded ? 0.0 : 1.0
         Behavior on opacity {NumberAnimation {duration: 100; easing.type: Easing.InOutQuad}}
 
+        KeyNavigation.up: header
+
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: header.bottom
 
=== modified file 'places/SearchRefineOptionType.qml'
--- places/SearchRefineOptionType.qml	2011-07-26 17:05:50 +0000
+++ places/SearchRefineOptionType.qml	2011-07-27 19:03:19 +0000
@@ -21,9 +21,11 @@
 SearchRefineOption {
     id: searchRefineOption
 
-    AbstractButton {
+    Item {
         id: header
 
+        KeyNavigation.down: filters
+
         focus: true
         anchors.top: parent.top
         anchors.left: parent.left
@@ -39,6 +41,7 @@
             text: searchRefineOption.title
             font.pixelSize: 16
             font.bold: true
+            font.underline: parent.state == "selected"
         }
     }
 
@@ -63,6 +66,7 @@
 
         /* Make sure the first item is selected when getting the focus for the first time */
         currentIndex: 0
+        KeyNavigation.up: header
 
         delegate: TickBox {
             height: filters.cellHeight
 
=== modified file 'places/UnityEmptySearchRenderer.qml'
--- places/UnityEmptySearchRenderer.qml	2011-06-23 17:08:53 +0000
+++ places/UnityEmptySearchRenderer.qml	2011-07-27 19:03:19 +0000
@@ -40,7 +40,7 @@
         boundsBehavior: ListView.StopAtBounds
         orientation: ListView.Vertical
 
-        model: renderer.model
+        model: renderer.group_model
         delegate: Button {
             property string uri: column_0
             property string iconHint: column_1
 
=== modified file 'places/dash.qml'
--- places/dash.qml	2011-07-05 19:01:18 +0000
+++ places/dash.qml	2011-07-27 19:03:19 +0000
@@ -30,7 +30,16 @@
         value: (currentPage && currentPage.expanded != undefined) ? currentPage.expanded : true
     }
 
+    /* Unload the current page when closing the dash */
+    Connections {
+        target: dashView
+        onActiveChanged: if (!dashView.active) pageLoader.source = ""
+    }
+
     function activatePage(page) {
+        /* Always give the focus to the search entry when switching pages */
+        search_entry.focus = true
+
         if (page == currentPage) {
             return
         }
@@ -40,12 +49,6 @@
         }
         currentPage = page
         currentPage.visible = true
-        /* FIXME: For some reason currentPage gets the focus when it becomes
-           visible. Reset the focus to the search_bar instead.
-           It could be due to Qt bug QTBUG-13380:
-           "Listview gets focus when it becomes visible"
-        */
-        search_entry.focus = true
     }
 
     function activatePlaceEntry(fileName, groupName, section) {
@@ -121,13 +124,19 @@
         /* Unhandled keys will always be forwarded to the search bar. That way
            the user can type and search from anywhere in the interface without
            necessarily focusing the search bar first. */
-        Keys.forwardTo: [search_entry]
+        /* FIXME: deactivated because it makes the user lose the focus very often */
+        //Keys.forwardTo: [search_entry]
 
 
         SearchEntry {
             id: search_entry
 
             focus: true
+            /* FIXME: check on visible necessary; fixed in Qt Quick 1.1
+                      ref: http://bugreports.qt.nokia.com/browse/QTBUG-15862
+            */
+            KeyNavigation.right: refine_search.visible ? refine_search : search_entry
+            KeyNavigation.down: pageLoader
 
             anchors.top: parent.top
             anchors.topMargin: 10
@@ -142,6 +151,8 @@
         SearchRefine {
             id: refine_search
 
+            KeyNavigation.left: search_entry
+
             /* SearchRefine is only to be displayed for places, not in the home page */
             visible: dashView.activePlaceEntry != ""
             placeEntryModel: visible && currentPage != undefined ? currentPage.model : undefined
@@ -158,6 +169,12 @@
         Loader {
             id: pageLoader
 
+            /* FIXME: check on visible necessary; fixed in Qt Quick 1.1
+                      ref: http://bugreports.qt.nokia.com/browse/QTBUG-15862
+            */
+            KeyNavigation.right: refine_search.visible && !refine_search.folded ? refine_search : pageLoader
+            KeyNavigation.up: search_entry
+
             anchors.top: search_entry.bottom
             anchors.topMargin: 2
             anchors.bottom: parent.bottom
@@ -165,6 +182,7 @@
             anchors.leftMargin: 20
             anchors.right: !refine_search.visible || refine_search.folded ? parent.right : refine_search.left
             anchors.rightMargin: !refine_search.visible || refine_search.folded ? 0 : 15
+            onLoaded: item.focus = true
         }
     }