Merge lp:~aacid/unity8/filtergrid_bindingloop into lp:unity8

[Albert Astals Cid]

Fix binding loop in FilterGrid height

[lp:~aacid/unity8/filtergrid_bindingloop]

832. By Albert Astals Cid on 2014-04-16

A bit more of reog

833. By Albert Astals Cid on 2014-04-16

reog++

834. By Albert Astals Cid on 2014-04-16

reorg++

835. By Albert Astals Cid on 2014-04-16

don't need the id anymroe

836. By Albert Astals Cid on 2014-04-17

property rename

837. By Albert Astals Cid on 2014-04-17

Merge

Unmerged revisions

=== modified file 'cmake/modules/QmlTest.cmake'
--- cmake/modules/QmlTest.cmake	2014-04-02 12:08:51 +0000
+++ cmake/modules/QmlTest.cmake	2014-04-16 15:47:25 +0000
@@ -58,7 +58,15 @@
 
 endmacro(add_manual_qml_test)
 
+macro(add_qml_benchmark SUBPATH COMPONENT_NAME ITERATIONS)
+    add_qml_test_internal(${SUBPATH} ${COMPONENT_NAME} ${ITERATIONS} ${ARGN})
+endmacro(add_qml_benchmark)
+
 macro(add_qml_test SUBPATH COMPONENT_NAME)
+    add_qml_test_internal(${SUBPATH} ${COMPONENT_NAME} 0 ${ARGN})
+endmacro(add_qml_test)
+
+macro(add_qml_test_internal SUBPATH COMPONENT_NAME ITERATIONS)
     set(options NO_ADD_TEST NO_TARGETS)
     set(multi_value_keywords IMPORT_PATHS TARGETS PROPERTIES ENVIRONMENT)
 
@@ -88,10 +96,17 @@
         set(function_ARGS "")
     endif()
 
+    if (${ITERATIONS} GREATER 0)
+        set(ITERATIONS_STRING "-iterations" ${ITERATIONS})
+    else()
+        set(ITERATIONS_STRING "")
+    endif()
+
     set(qmltest_command
         env ${qmltest_ENVIRONMENT}
         ${qmltestrunner_exe} -input ${CMAKE_CURRENT_SOURCE_DIR}/${qmltest_FILE}.qml
             ${qmltestrunner_imports}
+            ${ITERATIONS_STRING}
             -o ${CMAKE_BINARY_DIR}/${qmltest_TARGET}.xml,xunitxml
             -o -,txt
             ${function_ARGS}
@@ -114,7 +129,7 @@
     add_qmltest_target(${qmltest_TARGET} "${qmltest_command}" TRUE ${qmltest_NO_ADD_TEST})
     add_qmltest_target(${qmltest_xvfb_TARGET} "${qmltest_xvfb_command}" ${qmltest_NO_TARGETS} TRUE)
     add_manual_qml_test(${SUBPATH} ${COMPONENT_NAME} ${ARGN})
-endmacro(add_qml_test)
+endmacro(add_qml_test_internal)
 
 macro(add_binary_qml_test CLASS_NAME LD_PATH DEPS)
     set(testCommand
 
=== modified file 'qml/Components/FilterGrid.qml'
--- qml/Components/FilterGrid.qml	2014-04-08 13:32:59 +0000
+++ qml/Components/FilterGrid.qml	2014-04-16 15:47:25 +0000
@@ -28,10 +28,13 @@
 Item {
     id: root
 
-    /* If true, the number of elements displayed will be limited by collapsedRowCount.
-       If false, all elements will be displayed, effectively looking the same as a regular
-       ResponsiveGridView. */
-    property bool filter: true
+    QtObject {
+        id: d
+        /* If true, the number of elements displayed will be limited by collapsedRowCount.
+           If false, all elements will be displayed, effectively looking the same as a regular
+           ResponsiveGridView. Manipulate this property through setFilter */
+        property bool filter: true
+    }
 
     /* Whether, when collapsed, a button should be displayed enabling the user to expand
        the grid to its full size. */
@@ -66,29 +69,35 @@
     property alias highlightIndex: iconTileGrid.highlightIndex
     readonly property alias currentItem: iconTileGrid.currentItem
 
-    height: !filterAnimation.running ? childrenRect.height : height
+    height: filter ? root.collapsedHeight : root.uncollapsedHeight
     clip: filterAnimation.running
 
-    NumberAnimation {
-        property bool filterEndValue
-        id: filterAnimation
-        target: root
-        property: "height"
-        to: filterEndValue ? root.collapsedHeight : root.uncollapsedHeight
-        // Duration and easing here match the ListViewWithPageHeader::m_contentYAnimation
-        // otherwise since both animations can run at the same time you'll get
-        // some visual weirdness.
-        duration: 200
-        easing.type: Easing.InOutQuad
-        onStopped: {
-            root.filter = filterEndValue;
+    Behavior on height {
+        id: heightBehaviour
+        enabled: false
+        NumberAnimation {
+            id: filterAnimation
+            // Duration and easing here match the ListViewWithPageHeader::m_contentYAnimation
+            // otherwise since both animations can run at the same time you'll get
+            // some visual weirdness.
+            duration: 200
+            easing.type: Easing.InOutQuad
+            onRunningChanged: {
+                if (!running) {
+                    limitModel.filter = d.filter;
+                }
+                heightBehaviour.enabled = false;
+            }
         }
     }
 
-    function startFilterAnimation(filter) {
-        filterAnimation.filterEndValue = filter
-        filterAnimation.start();
-    }
+    function setFilter(filter, animate) {
+        heightBehaviour.enabled = animate;
+        d.filter = filter;
+        if (!animate || !filter) {
+            limitModel.filter = filter;
+        }
+   }
 
     ResponsiveGridView {
         id: iconTileGrid
@@ -104,8 +113,16 @@
         verticalSpacing: units.gu(2)
 
         model: LimitProxyModel {
+            id: limitModel
+            // We do have another filter property here because
+            // we can't directly use filter from the root since we need to decouple
+            // the real filtering with the animation since the closing animation
+            // i.e. filter=false we still need to not be filtering until
+            // t    he animation finishes otherwise we hide the items when the animation
+            // is still running
+            property bool filter: true
             model: root.model
-            limit: (filter && !filterAnimation.running) ? rowsWhenCollapsed * iconTileGrid.columns : -1
+            limit: filter ? rowsWhenCollapsed * iconTileGrid.columns : -1
         }
     }
 }
 
=== modified file 'qml/Dash/Card.qml'
--- qml/Dash/Card.qml	2014-04-01 22:56:38 +0000
+++ qml/Dash/Card.qml	2014-04-16 15:47:25 +0000
@@ -25,47 +25,53 @@
     property var components
     property var cardData
 
-    property alias fontScale: header.fontScale
-    property alias headerAlignment: header.headerAlignment
-    property alias headerHeight: header.height
-    readonly property alias title: header.title
+    property real fontScale: 1.0
+    property int headerAlignment: Text.AlignLeft
+    readonly property int headerHeight: headerLoader.item ? headerLoader.item.height : 0
+    property int fixedHeaderHeight: -1
+    readonly property string title: cardData && cardData["title"] || ""
 
     property bool showHeader: true
 
     implicitWidth: childrenRect.width
-    implicitHeight: summary.y + summary.height + (summary.text && background.visible ? units.gu(1) : 0)
-
-    UbuntuShape {
-        id: background
-        objectName: "background"
-        radius: "medium"
-        visible: template["card-layout"] !== "horizontal" && (template["card-background"] || components["background"]
-                                                              || artAndSummary)
-        property bool artAndSummary: components["art"]["field"] && components["summary"] || false
-        color: getColor(0) || "white"
-        gradientColor: getColor(1) || color
+    implicitHeight: summary.y + summary.height + (summary.text && backgroundLoader.active ? units.gu(1) : 0)
+
+    Loader {
+        id: backgroundLoader
+        objectName: "backgroundLoader"
+
+        readonly property bool artAndSummary: components["art"]["field"] && components["summary"] || false
+        active: template["card-layout"] !== "horizontal" && (template["card-background"] || components["background"] || artAndSummary)
         anchors.fill: parent
-        image: backgroundImage.source ? backgroundImage : null
-
-        property real luminance: 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b
-
-        property Image backgroundImage: Image {
-            objectName: "backgroundImage"
-            source: {
-                if (cardData && typeof cardData["background"] === "string") return cardData["background"]
-                else if (template && typeof template["card-background"] === "string") return template["card-background"]
-                else return ""
-            }
-        }
-
-        function getColor(index) {
-            if (cardData && typeof cardData["background"] === "object"
-                && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) {
-                return cardData["background"]["elements"][index];
-            } else if (template && typeof template["card-background"] === "object"
-                       && (template["card-background"]["type"] === "color" || template["card-background"]["type"] === "gradient"))  {
-                return template["card-background"]["elements"][index];
-            } else return undefined;
+
+        sourceComponent: UbuntuShape {
+            objectName: "background"
+            radius: "medium"
+            color: getColor(0) || "white"
+            gradientColor: getColor(1) || color
+            anchors.fill: parent
+            image: backgroundImage.source ? backgroundImage : null
+
+            property real luminance: 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b
+
+            property Image backgroundImage: Image {
+                objectName: "backgroundImage"
+                source: {
+                    if (cardData && typeof cardData["background"] === "string") return cardData["background"]
+                    else if (template && typeof template["card-background"] === "string") return template["card-background"]
+                    else return ""
+                }
+            }
+
+            function getColor(index) {
+                if (cardData && typeof cardData["background"] === "object"
+                    && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) {
+                    return cardData["background"]["elements"][index];
+                } else if (template && typeof template["card-background"] === "object"
+                        && (template["card-background"]["type"] === "color" || template["card-background"]["type"] === "gradient"))  {
+                    return template["card-background"]["elements"][index];
+                } else return undefined;
+            }
         }
     }
 
@@ -111,7 +117,7 @@
             function updateWidthHeightBindings() {
                 if (isHorizontal) {
                     width = Qt.binding(function() { return height * artShape.aspect });
-                    height = Qt.binding(function() { return header.height });
+                    height = Qt.binding(function() { return root.headerHeight });
                 } else {
                     width = Qt.binding(function() { return root.width });
                     height = Qt.binding(function() { return width / artShape.aspect });
@@ -120,53 +126,58 @@
         }
     }
 
-    ShaderEffect {
-        id: overlay
+    Loader {
+        id: overlayLoader
         anchors {
             left: artShape.left
             right: artShape.right
             bottom: artShape.bottom
         }
-
-        height: header.height
-        opacity: header.opacity * 0.6
-        visible: template && template["overlay"] && artShape.visible && artShape.image.status === Image.Ready || false
-
-        property var source: ShaderEffectSource {
-            id: shaderSource
-            sourceItem: artShape
-            onVisibleChanged: if (visible) scheduleUpdate()
-            live: false
-            sourceRect: Qt.rect(0, artShape.height - overlay.height, artShape.width, overlay.height)
+        active: template && template["overlay"] && artShape.visible && artShape.image.status === Image.Ready || false
+
+        sourceComponent: ShaderEffect {
+            id: overlay
+
+            height: headerLoader.item ? headerLoader.item.height : 0
+            opacity: headerLoader.item ? headerLoader.item.opacity * 0.6 : 0
+
+            property var source: ShaderEffectSource {
+                id: shaderSource
+                sourceItem: artShape
+                onVisibleChanged: if (visible) scheduleUpdate()
+                live: false
+                sourceRect: Qt.rect(0, artShape.height - overlay.height, artShape.width, overlay.height)
+            }
+
+            vertexShader: "
+                uniform highp mat4 qt_Matrix;
+                attribute highp vec4 qt_Vertex;
+                attribute highp vec2 qt_MultiTexCoord0;
+                varying highp vec2 coord;
+                void main() {
+                    coord = qt_MultiTexCoord0;
+                    gl_Position = qt_Matrix * qt_Vertex;
+                }"
+
+            fragmentShader: "
+                varying highp vec2 coord;
+                uniform sampler2D source;
+                uniform lowp float qt_Opacity;
+                void main() {
+                    lowp vec4 tex = texture2D(source, coord);
+                    gl_FragColor = vec4(0, 0, 0, tex.a) * qt_Opacity;
+                }"
         }
-
-        vertexShader: "
-            uniform highp mat4 qt_Matrix;
-            attribute highp vec4 qt_Vertex;
-            attribute highp vec2 qt_MultiTexCoord0;
-            varying highp vec2 coord;
-            void main() {
-                coord = qt_MultiTexCoord0;
-                gl_Position = qt_Matrix * qt_Vertex;
-            }"
-
-        fragmentShader: "
-            varying highp vec2 coord;
-            uniform sampler2D source;
-            uniform lowp float qt_Opacity;
-            void main() {
-                lowp vec4 tex = texture2D(source, coord);
-                gl_FragColor = vec4(0, 0, 0, tex.a) * qt_Opacity;
-            }"
     }
 
-    CardHeader {
-        id: header
-        objectName: "cardHeader"
+    Loader {
+        id: headerLoader
+        objectName: "cardHeaderLoader"
+
         anchors {
             top: {
                 if (template) {
-                    if (template["overlay"]) return overlay.top;
+                    if (template["overlay"]) return overlayLoader.top;
                     if (template["card-layout"] === "horizontal") return artShape.top;
                 }
                 return artShape.bottom;
@@ -179,29 +190,38 @@
             }
             right: parent.right
         }
-
-        mascot: cardData && cardData["mascot"] || ""
-        title: cardData && cardData["title"] || ""
-        subtitle: cardData && cardData["subtitle"] || ""
-
-        titleWeight: components && components["subtitle"] ? Font.DemiBold : Font.Normal
-
-        opacity: showHeader ? 1 : 0
-        inOverlay: root.template && root.template["overlay"] === true
-        fontColor: inOverlay ? "white" : summary.color
-        useMascotShape: !background.visible && !inOverlay
-
-        Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration } }
+        active: cardData && cardData["title"] || cardData && cardData["mascot"] || false
+
+        sourceComponent: CardHeader {
+            id: header
+            objectName: "cardHeader"
+
+            mascot: cardData && cardData["mascot"] || ""
+            title: root.title
+            subtitle: cardData && cardData["subtitle"] || ""
+
+            titleWeight: components && components["subtitle"] ? Font.DemiBold : Font.Normal
+
+            opacity: showHeader ? 1 : 0
+            inOverlay: root.template && root.template["overlay"] === true
+            fontColor: inOverlay ? "white" : summary.color
+            useMascotShape: !backgroundLoader.active && !inOverlay
+            headerAlignment: root.headerAlignment
+            height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight
+            fontScale: root.fontScale
+
+            Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration } }
+        }
     }
 
     Label {
         id: summary
         objectName: "summaryLabel"
         anchors {
-            top: header.visible ? header.bottom : artShape.bottom
+            top: headerLoader.active ? headerLoader.bottom : artShape.bottom
             left: parent.left
             right: parent.right
-            margins: background.visible ? units.gu(1) : 0
+            margins: backgroundLoader.active ? units.gu(1) : 0
             topMargin: 0
         }
         wrapMode: Text.Wrap
@@ -211,6 +231,6 @@
         height: text ? implicitHeight : 0
         fontSize: "small"
         // TODO karni: Change "grey" to Ubuntu.Components.Palette color once updated.
-        color: background.visible && background.luminance < 0.7 ? "white" : "grey"
+        color: backgroundLoader.active && backgroundLoader.item.luminance < 0.7 ? "white" : "grey"
     }
 }
 
=== modified file 'qml/Dash/CardCarousel.qml'
--- qml/Dash/CardCarousel.qml	2014-03-17 10:38:03 +0000
+++ qml/Dash/CardCarousel.qml	2014-04-16 15:47:25 +0000
@@ -52,7 +52,7 @@
         itemComponent: Card {
             id: card
             objectName: "carouselDelegate" + index
-            headerHeight: carousel.headerHeight
+            fixedHeaderHeight: carousel.headerHeight
             cardData: model
             template: cardTool.template
             components: cardTool.components
 
=== modified file 'qml/Dash/CardFilterGrid.qml'
--- qml/Dash/CardFilterGrid.qml	2014-04-08 13:32:59 +0000
+++ qml/Dash/CardFilterGrid.qml	2014-04-16 15:47:25 +0000
@@ -29,8 +29,8 @@
     currentItem: filterGrid.currentItem
     height: filterGrid.height
 
-    function startFilterAnimation(filter) {
-        filterGrid.startFilterAnimation(filter)
+    function setFilter(filter, animate) {
+        filterGrid.setFilter(filter, animate)
     }
 
     FilterGrid {
@@ -41,18 +41,18 @@
         delegateHeight: cardTool.cardHeight
         verticalSpacing: genericFilterGrid.verticalSpacing
         model: genericFilterGrid.model
-        filter: genericFilterGrid.filter
         collapsedRowCount: Math.min(2, cardTool && cardTool.template && cardTool.template["collapsed-rows"] || 2)
         delegateCreationBegin: genericFilterGrid.delegateCreationBegin
         delegateCreationEnd: genericFilterGrid.delegateCreationEnd
-        delegate: Item {
+        delegate: Loader {
+            asynchronous: true
             width: filterGrid.cellWidth
             height: filterGrid.cellHeight
             Card {
                 id: card
                 width: cardTool.cardWidth
                 height: cardTool.cardHeight
-                headerHeight: cardTool.headerHeight
+                fixedHeaderHeight: cardTool.headerHeight
                 anchors.horizontalCenter: parent.horizontalCenter
                 objectName: "delegate" + index
                 cardData: model
@@ -65,10 +65,5 @@
                 onPressAndHold: genericFilterGrid.pressAndHold(index, card.y)
             }
         }
-
-        onFilterChanged: {
-            genericFilterGrid.filter = filter
-            filter = Qt.binding(function() { return genericFilterGrid.filter })
-        }
     }
 }
 
=== modified file 'qml/Dash/CardHeader.qml'
--- qml/Dash/CardHeader.qml	2014-03-17 11:42:38 +0000
+++ qml/Dash/CardHeader.qml	2014-04-16 15:47:25 +0000
@@ -19,9 +19,9 @@
 
 Item {
     id: root
-    property alias mascot: mascotImage.source
+    property url mascot: ""
     property alias title: titleLabel.text
-    property alias subtitle: subtitleLabel.text
+    property var subtitle
 
     property alias titleWeight: titleLabel.font.weight
     property alias titleSize: titleLabel.fontSize
@@ -35,8 +35,8 @@
     property bool useMascotShape: true
     property color fontColor: Theme.palette.selected.backgroundText
 
-    visible: mascotImage.status === Image.Ready || title
-    height: row.height > 0 ? row.height + row.margins * 2 : 0
+    visible: mascot != "" || title
+    implicitHeight: row.height > 0 ? row.height + row.margins * 2 : 0
 
     Row {
         id: row
@@ -44,7 +44,7 @@
 
         property real margins: units.gu(1)
 
-        spacing: mascotShape.visible || mascotImage.visible || inOverlay ? margins : 0
+        spacing: mascotShapeLoader.active || mascotImageLoader.active || inOverlay ? margins : 0
         anchors {
             top: parent.top; left: parent.left; right: parent.right
             margins: margins
@@ -52,33 +52,40 @@
             rightMargin: spacing
         }
 
-        UbuntuShape {
-            id: mascotShape
-            objectName: "mascotShape"
+        Loader {
+            id: mascotShapeLoader
+            objectName: "mascotShapeLoader"
 
+            active: useMascotShape && mascotImageLoader.item && mascotImageLoader.item.status === Image.Ready
+            visible: active
+            anchors.verticalCenter: parent.verticalCenter
             // TODO karni: Icon aspect-ratio is 8:7.5. Revisit these values to avoid fraction of pixels.
             width: units.gu(6)
             height: units.gu(5.625)
-            anchors.verticalCenter: parent.verticalCenter
-            visible: useMascotShape && image && image.status === Image.Ready
             readonly property int maxSize: Math.max(width, height) * 4
 
-            image: useMascotShape ? mascotImage : null
+            sourceComponent: UbuntuShape {
+                image: mascotImageLoader.item
+            }
         }
 
-        Image {
-            id: mascotImage
-            objectName: "mascotImage"
-
-            width: source ? mascotShape.width : 0
-            height: mascotShape.height
+        Loader {
+            id: mascotImageLoader
+            active: root.mascot != ""
+            visible: active && !useMascotShape && item.status === Image.Ready
             anchors.verticalCenter: parent.verticalCenter
-            visible: !useMascotShape && status === Image.Ready
-
-            sourceSize { width: mascotShape.maxSize; height: mascotShape.maxSize }
-            fillMode: Image.PreserveAspectCrop
-            horizontalAlignment: Image.AlignHCenter
-            verticalAlignment: Image.AlignVCenter
+            sourceComponent: Image {
+                objectName: "mascotImage"
+
+                source: root.mascot
+                width: source ? mascotShapeLoader.width : 0
+                height: mascotShapeLoader.height
+
+                sourceSize { width: mascotShapeLoader.maxSize; height: mascotShapeLoader.maxSize }
+                fillMode: Image.PreserveAspectCrop
+                horizontalAlignment: Image.AlignHCenter
+                verticalAlignment: Image.AlignVCenter
+            }
         }
 
         Column {
@@ -100,16 +107,19 @@
                 color: fontColor
             }
 
-            Label {
-                id: subtitleLabel
-                objectName: "subtitleLabel"
+            Loader {
+                active: titleLabel.text && root.subtitle
                 anchors { left: parent.left; right: parent.right }
-                elide: Text.ElideRight
-                fontSize: "small"
-                font.weight: Font.Light
-                visible: titleLabel.text && text
-                font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale)
-                color: fontColor
+                sourceComponent: Label {
+                    id: subtitleLabel
+                    objectName: "subtitleLabel"
+                    elide: Text.ElideRight
+                    fontSize: "small"
+                    font.weight: Font.Light
+                    font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale)
+                    color: fontColor
+                    text: root.subtitle
+                }
             }
         }
     }
 
=== modified file 'qml/Dash/DashRenderer.qml'
--- qml/Dash/DashRenderer.qml	2014-04-08 13:32:59 +0000
+++ qml/Dash/DashRenderer.qml	2014-04-16 15:47:25 +0000
@@ -20,9 +20,6 @@
     // Can the item be expanded?
     property bool expandable: false
 
-    // In case it can be expanded, should we filter it
-    property bool filter: true
-
     property int collapsedHeight: height
 
     property int margins: 0
@@ -58,6 +55,6 @@
     /// @param itemY is y of the held delegate
     signal pressAndHold(int index, real itemY)
 
-    function startFilterAnimation(filter) {
+    function setFilter(filter, animate) {
     }
 }
 
=== modified file 'qml/Dash/GenericScopeView.qml'
--- qml/Dash/GenericScopeView.qml	2014-04-08 13:32:59 +0000
+++ qml/Dash/GenericScopeView.qml	2014-04-16 15:47:25 +0000
@@ -121,7 +121,7 @@
             showDivider: false
 
             readonly property bool expandable: rendererLoader.item ? rendererLoader.item.expandable : false
-            readonly property bool filtered: rendererLoader.item ? rendererLoader.item.filter : true
+            readonly property bool filtered: categoryView.expandedCategoryId != categoryId
             readonly property string category: categoryId
             readonly property var item: rendererLoader.item
 
@@ -167,9 +167,7 @@
                     item.objectName = Qt.binding(function() { return categoryId })
                     if (item.expandable) {
                         var shouldFilter = categoryId != categoryView.expandedCategoryId;
-                        if (shouldFilter != item.filter) {
-                            item.filter = shouldFilter;
-                        }
+                        item.setFilter(shouldFilter, false /*animate*/);
                     }
                     updateDelegateCreationRange();
                     item.cardTool = cardTool;
@@ -218,11 +216,8 @@
                                 var shrinkingVisible = shouldFilter && y + item.collapsedHeight < categoryView.height;
                                 var growingVisible = !shouldFilter && y + height < categoryView.height;
                                 if (!previewListView.open || !shouldFilter) {
-                                    if (shrinkingVisible || growingVisible) {
-                                        item.startFilterAnimation(shouldFilter)
-                                    } else {
-                                        item.filter = shouldFilter;
-                                    }
+                                    var animate = shrinkingVisible || growingVisible;
+                                    item.setFilter(shouldFilter, animate)
                                     if (!shouldFilter && !previewListView.open) {
                                         categoryView.maximizeVisibleArea(index, item.uncollapsedHeight);
                                     }
@@ -241,7 +236,7 @@
                     // to the stable position and delete/create items without any reason
                     if (categoryView.contentY < categoryView.originY) {
                         return;
-                    } else if (categoryView.contentY + categoryView.height > categoryView.contentHeight) {
+                    } else if (categoryView.contentHeight > categoryView.height && categoryView.contentY + categoryView.height > categoryView.contentHeight) {
                         return;
                     }
 
 
=== modified file 'tests/qmltests/CMakeLists.txt'
--- tests/qmltests/CMakeLists.txt	2014-04-03 10:38:06 +0000
+++ tests/qmltests/CMakeLists.txt	2014-04-16 15:47:25 +0000
@@ -36,6 +36,7 @@
 add_qml_test(Dash Dash IMPORT_PATHS ${CMAKE_BINARY_DIR}/plugins ${qmltest_DEFAULT_IMPORT_PATHS})
 add_qml_test(Dash DashContent IMPORT_PATHS ${CMAKE_BINARY_DIR}/plugins ${qmltest_DEFAULT_IMPORT_PATHS})
 add_qml_test(Dash Card)
+add_qml_benchmark(Dash CardBenchmark 1000)
 add_qml_test(Dash CardHeader)
 add_qml_test(Dash CardTool)
 add_qml_test(Dash GenericScopeView IMPORT_PATHS ${CMAKE_BINARY_DIR}/plugins ${qmltest_DEFAULT_IMPORT_PATHS})
 
=== modified file 'tests/qmltests/Components/tst_FilterGrid.qml'
--- tests/qmltests/Components/tst_FilterGrid.qml	2014-01-29 13:37:23 +0000
+++ tests/qmltests/Components/tst_FilterGrid.qml	2014-04-16 15:47:25 +0000
@@ -50,6 +50,7 @@
             CheckBox {
                 id: filterCheckBox
                 checked: true
+                onCheckedChanged: filterGrid.setFilter(checked, false /*animate*/)
             }
         }
     }
@@ -99,7 +100,6 @@
             maximumNumberOfColumns: 3
             collapsedRowCount:
                 collapsedRowCountSelector.values[collapsedRowCountSelector.selectedIndex]
-            filter: filterCheckBox.checked
             minimumHorizontalSpacing: units.gu(1)
             delegateWidth: units.gu(6)
             delegateHeight: units.gu(6)
 
=== modified file 'tests/qmltests/Dash/tst_Card.qml'
--- tests/qmltests/Dash/tst_Card.qml	2014-03-12 10:55:37 +0000
+++ tests/qmltests/Dash/tst_Card.qml	2014-04-16 15:47:25 +0000
@@ -182,11 +182,13 @@
         when: windowShown
 
         property Item header: findChild(card, "cardHeader")
+        property Item headerLoader: findChild(card, "cardHeaderLoader")
         property Item title: findChild(header, "titleLabel")
         property Item art: findChild(card, "artShape")
         property Item artImage: findChild(card, "artImage")
         property Item summary: findChild(card, "summaryLabel")
         property Item background: findChild(card, "background")
+        property Item backgroundLoader: findChild(card, "backgroundLoader")
         property Item backgroundImage: findChild(card, "backgroundImage")
 
         function initTestCase() {
@@ -244,8 +246,8 @@
                 { tag: "Wide", width: units.gu(18.5), aspect: 0.5, index: 0 },
                 { tag: "Horizontal", width: units.gu(38), index: 5 },
                 // Make sure card ends with header when there's no summary
-                { tag: "NoSummary", height: function() { return header.y + header.height }, index: 6 },
-                { tag: "HorizontalNoSummary", height: function() { return header.height }, card_layout: "horizontal", index: 6 },
+                { tag: "NoSummary", height: function() { return headerLoader.y + headerLoader.height }, index: 6 },
+                { tag: "HorizontalNoSummary", height: function() { return headerLoader.height }, card_layout: "horizontal", index: 6 },
             ]
         }
 
@@ -288,7 +290,7 @@
                 { tag: "Fit", height: units.gu(38), size: "large", width: units.gu(19), index: 4 },
                 { tag: "VerticalWidth", width: function() { return header.width }, index: 0 },
                 { tag: "HorizontalHeight", height: function() { return header.height }, index: 5 },
-                { tag: "HorizontalWidth", width: function() { return header.x }, index: 5 },
+                { tag: "HorizontalWidth", width: function() { return headerLoader.x }, index: 5 },
             ]
         }
 
@@ -332,7 +334,7 @@
         function test_art_layout(data) {
             selector.selectedIndex = data.index;
 
-            tryCompare(testCase.header, "x", data.left());
+            tryCompare(testCase.headerLoader, "x", data.left());
         }
 
         function test_header_layout_data() {
@@ -349,13 +351,13 @@
         function test_header_layout(data) {
             selector.selectedIndex = data.index;
 
-            tryCompareFunction(function() { return testCase.header.y === data.top() }, true);
-            tryCompareFunction(function() { return testCase.header.x === data.left() }, true);
+            tryCompareFunction(function() { return testCase.headerLoader.y === data.top() }, true);
+            tryCompareFunction(function() { return testCase.headerLoader.x === data.left() }, true);
         }
 
         function test_summary_layout_data() {
             return [
-                { tag: "With header", top: function() { return header.y + header.height }, index: 0 },
+                { tag: "With header", top: function() { return headerLoader.y + headerLoader.height }, index: 0 },
                 { tag: "Without header", top: function() { return art.y + art.height }, index: 7 },
             ]
         }
@@ -400,7 +402,7 @@
 
             waitForRendering(card);
 
-            tryCompare(background, "visible", data.visible);
+            tryCompare(backgroundLoader, "active", data.visible);
 
             if (data.hasOwnProperty("color")) {
                 tryCompare(background, "color", data.color);
@@ -467,13 +469,13 @@
         function test_mascotShape(data) {
             selector.selectedIndex = data.index;
 
-            var shape = findChild(card, "mascotShape");
+            var shape = findChild(card, "mascotShapeLoader");
             var image = findChild(card, "mascotImage");
 
             verify(shape, "Could not find shape.");
             verify(image, "Could not find image.");
 
-            tryCompare(shape, "visible", data.shape);
+            tryCompare(shape, "active", data.shape);
             tryCompare(image, "visible", !data.shape);
         }
     }
 
=== added file 'tests/qmltests/Dash/tst_CardBenchmark.qml'
--- tests/qmltests/Dash/tst_CardBenchmark.qml	1970-01-01 00:00:00 +0000
+++ tests/qmltests/Dash/tst_CardBenchmark.qml	2014-04-16 15:47:25 +0000
@@ -0,0 +1,94 @@
+/*
+ * Copyright (C) 2014 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 2.0
+import QtTest 1.0
+import Ubuntu.Components 0.1
+import Unity.Test 0.1 as UT
+import "../../../qml/Dash"
+import "CardHelpers.js" as Helpers
+
+Rectangle {
+    id: root
+    width: units.gu(80)
+    height: units.gu(72)
+    color: "#88FFFFFF"
+
+    property string cardData: '
+    {
+      "art": "../../tests/qmltests/Dash/artwork/music-player-design.png",
+      "mascot": "../../tests/qmltests/Dash/artwork/avatar.png",
+      "title": "foo",
+      "subtitle": "bar",
+      "summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+    }'
+
+    property string currentModel: '{}'
+    property string cardTitleArtSubtitleMascotSummaryModel: '{ "components": { "title": "title", "art": "art", "subtitle": "subtitle", "mascot": "mascot", "summary": "summary" } }'
+    property string cardTitleArtSubtitleMascotModel: '{ "components": { "title": "title", "art": "art", "subtitle": "subtitle", "mascot": "mascot" } }'
+    property string cardTitleArtSubtitleModel: '{ "components": { "title": "title", "art": "art", "subtitle": "subtitle" } }'
+    property string cardTitleArtModel: '{ "components": { "title": "title", "art": "art" } }'
+    property string cardArtModel: '{ "components": { "art": "art" } }'
+    property string cardTitleModel: '{ "components": { "title": "title" } }'
+
+    CardTool {
+        id: cardTool
+        template: Helpers.update(JSON.parse(Helpers.defaultLayout), JSON.parse(currentModel))['template'];
+        components: Helpers.update(JSON.parse(Helpers.defaultLayout), JSON.parse(currentModel))['components'];
+        viewWidth: units.gu(48)
+    }
+
+    Repeater {
+        id: cardRepeater
+        model: 0
+        Card {
+            width: cardTool.cardWidth || implicitWidth
+            height: cardTool.cardHeight || implicitHeight
+
+            template: cardTool.template
+            components: cardTool.components
+            cardData: Helpers.mapData(root.cardData, components)
+        }
+    }
+
+    UT.UnityTestCase {
+        id: testCase
+        name: "CardBenchmark"
+
+        when: windowShown
+
+        function init() {
+            wait(1);
+        }
+
+        function benchmark_time_data() {
+            return [
+                { tag: "cardTitleArtSubtitleMascotSummaryModel", model: cardTitleArtSubtitleMascotSummaryModel },
+                { tag: "cardTitleArtSubtitleMascotModel",        model: cardTitleArtSubtitleMascotModel },
+                { tag: "cardTitleArtSubtitleModel",              model: cardTitleArtSubtitleModel },
+                { tag: "cardTitleArtModel",                      model: cardTitleArtModel },
+                { tag: "cardArtModel",                           model: cardArtModel },
+                { tag: "cardTitleModel",                         model: cardTitleModel },
+            ];
+        }
+
+        function benchmark_time(data) {
+            currentModel = data.model;
+            cardRepeater.model = 1;
+            cardRepeater.model = 0;
+        }
+    }
+}
 
=== modified file 'tests/qmltests/Dash/tst_CardHeader.qml'
--- tests/qmltests/Dash/tst_CardHeader.qml	2014-03-17 11:44:05 +0000
+++ tests/qmltests/Dash/tst_CardHeader.qml	2014-04-16 15:47:25 +0000
@@ -43,7 +43,7 @@
 
         when: windowShown
 
-        property Item mascot: findChild(cardHeader, "mascotShape")
+        property Item mascot: findChild(cardHeader, "mascotShapeLoader")
         property Item titleLabel: findChild(cardHeader, "titleLabel")
         property Item subtitleLabel: findChild(cardHeader, "subtitleLabel")
         property Item oldPriceLabel: findChild(cardHeader, "oldPriceLabel")