git.iko.soy/unity8
on xenial help sign in
Optimize Card by not creating an invisible UbuntuShape when unneeded

Goes from 1.828 msecs per iteration (total: 1,829, iterations: 1000) to 1.461 msecs per iteration (total: 1,462, iterations: 1000)

commitcb32e9492b0e4a2522df2eb282987cce5c44d14f authorAlbert Astals <albert.astals@canonical.com> dateMon 31 Mar 2014, 17:24 (13 years ago) parenta28d49b
3 files changed+110−32
compare with xenial
unifiedsplit
qml/Dash/Card.qml+36−31 tests/qmltests/Dash/tst_Card.qml+2−1 tests/qmltests/Dash/tst_CardBenchmark.qml+72
qml/Dash/Card.qml+36−31
@@ -31,39 +31,44 @@ AbstractButton {
3131 property bool showHeader: true
3232
3333 implicitWidth: childrenRect.width
34− implicitHeight: summary.y + summary.height + (summary.text && background.visible ? units.gu(1) : 0)
34+ implicitHeight: summary.y + summary.height + (summary.text && backgroundLoader.active ? units.gu(1) : 0)
3535
36− UbuntuShape {
37− id: background
38− objectName: "background"
39− radius: "medium"
40− visible: template["card-layout"] !== "horizontal" && (template["card-background"] || components["background"]
41− || artAndSummary)
42− property bool artAndSummary: components["art"]["field"] && components["summary"] || false
43− color: getColor(0) || "white"
44− gradientColor: getColor(1) || color
45− anchors.fill: parent
46− image: backgroundImage.source ? backgroundImage : null
36+ Loader {
37+ id: backgroundLoader
38+ objectName: "backgroundLoader"
4739
48− property real luminance: 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b
40+ readonly property bool artAndSummary: components["art"]["field"] && components["summary"] || false
41+ active: template["card-layout"] !== "horizontal" && (template["card-background"] || components["background"] || artAndSummary)
42+ anchors.fill: parent
4943
50− property Image backgroundImage: Image {
51− objectName: "backgroundImage"
52− source: {
53− if (cardData && typeof cardData["background"] === "string") return cardData["background"]
54− else if (template && typeof template["card-background"] === "string") return template["card-background"]
55− else return ""
44+ sourceComponent: UbuntuShape {
45+ objectName: "background"
46+ radius: "medium"
47+ color: getColor(0) || "white"
48+ gradientColor: getColor(1) || color
49+ anchors.fill: parent
50+ image: backgroundImage.source ? backgroundImage : null
51+
52+ property real luminance: 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b
53+
54+ property Image backgroundImage: Image {
55+ objectName: "backgroundImage"
56+ source: {
57+ if (cardData && typeof cardData["background"] === "string") return cardData["background"]
58+ else if (template && typeof template["card-background"] === "string") return template["card-background"]
59+ else return ""
60+ }
5661 }
57− }
5862
59− function getColor(index) {
60− if (cardData && typeof cardData["background"] === "object"
61− && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) {
62− return cardData["background"]["elements"][index];
63− } else if (template && typeof template["card-background"] === "object"
64− && (template["card-background"]["type"] === "color" || template["card-background"]["type"] === "gradient")) {
65− return template["card-background"]["elements"][index];
66− } else return undefined;
63+ function getColor(index) {
64+ if (cardData && typeof cardData["background"] === "object"
65+ && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) {
66+ return cardData["background"]["elements"][index];
67+ } else if (template && typeof template["card-background"] === "object"
68+ && (template["card-background"]["type"] === "color" || template["card-background"]["type"] === "gradient")) {
69+ return template["card-background"]["elements"][index];
70+ } else return undefined;
71+ }
6772 }
6873 }
6974
@@ -187,7 +192,7 @@ AbstractButton {
187192 opacity: showHeader ? 1 : 0
188193 inOverlay: root.template && root.template["overlay"] === true
189194 fontColor: inOverlay ? "white" : summary.color
190− useMascotShape: !background.visible && !inOverlay
195+ useMascotShape: !backgroundLoader.active && !inOverlay
191196
192197 Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration } }
193198 }
@@ -199,7 +204,7 @@ AbstractButton {
199204 top: header.visible ? header.bottom : artShape.bottom
200205 left: parent.left
201206 right: parent.right
202− margins: background.visible ? units.gu(1) : 0
207+ margins: backgroundLoader.active ? units.gu(1) : 0
203208 topMargin: 0
204209 }
205210 wrapMode: Text.Wrap
@@ -209,6 +214,6 @@ AbstractButton {
209214 height: text ? implicitHeight : 0
210215 fontSize: "small"
211216 // TODO karni: Change "grey" to Ubuntu.Components.Palette color once updated.
212− color: background.visible && background.luminance < 0.7 ? "white" : "grey"
217+ color: backgroundLoader.active && backgroundLoader.item.luminance < 0.7 ? "white" : "grey"
213218 }
214219}
tests/qmltests/Dash/tst_Card.qml+2−1
@@ -187,6 +187,7 @@ Rectangle {
187187 property Item artImage: findChild(card, "artImage")
188188 property Item summary: findChild(card, "summaryLabel")
189189 property Item background: findChild(card, "background")
190+ property Item backgroundLoader: findChild(card, "backgroundLoader")
190191 property Item backgroundImage: findChild(card, "backgroundImage")
191192
192193 function initTestCase() {
@@ -400,7 +401,7 @@ Rectangle {
400401
401402 waitForRendering(card);
402403
403− tryCompare(background, "visible", data.visible);
404+ tryCompare(backgroundLoader, "active", data.visible);
404405
405406 if (data.hasOwnProperty("color")) {
406407 tryCompare(background, "color", data.color);
tests/qmltests/Dash/tst_CardBenchmark.qmlnew file+72
@@ -0,0 +1,72 @@
1+/*
2+ * Copyright (C) 2014 Canonical, Ltd.
3+ *
4+ * This program is free software; you can redistribute it and/or modify
5+ * it under the terms of the GNU General Public License as published by
6+ * the Free Software Foundation; version 3.
7+ *
8+ * This program is distributed in the hope that it will be useful,
9+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
10+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+ * GNU General Public License for more details.
12+ *
13+ * You should have received a copy of the GNU General Public License
14+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
15+ */
16+
17+import QtQuick 2.0
18+import QtTest 1.0
19+import Ubuntu.Components 0.1
20+import Unity.Test 0.1 as UT
21+import "../../../qml/Dash"
22+import "CardHelpers.js" as Helpers
23+
24+Rectangle {
25+ id: root
26+ width: units.gu(80)
27+ height: units.gu(72)
28+ color: "#88FFFFFF"
29+
30+ property string cardData: '
31+ {
32+ "art": "../../tests/qmltests/Dash/artwork/music-player-design.png",
33+ "mascot": "../../tests/qmltests/Dash/artwork/avatar.png",
34+ "title": "foo",
35+ "subtitle": "bar",
36+ "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."
37+ }'
38+
39+ property string artCardModel: '{ "components": { "art": "art" } }'
40+
41+ CardTool {
42+ id: cardTool
43+ template: Helpers.update(JSON.parse(Helpers.defaultLayout), JSON.parse(artCardModel))['template'];
44+ components: Helpers.update(JSON.parse(Helpers.defaultLayout), JSON.parse(artCardModel))['components'];
45+ viewWidth: units.gu(48)
46+ }
47+
48+ Repeater {
49+ id: cardRepeater
50+ model: 0
51+ Card {
52+ width: cardTool.cardWidth || implicitWidth
53+ height: cardTool.cardHeight || implicitHeight
54+
55+ template: cardTool.template
56+ components: cardTool.components
57+ cardData: Helpers.mapData(root.cardData, components)
58+ }
59+ }
60+
61+ UT.UnityTestCase {
62+ id: testCase
63+ name: "CardBenchmark"
64+
65+ when: windowShown
66+
67+ function benchmark_time() {
68+ cardRepeater.model = 1
69+ cardRepeater.model = 0
70+ }
71+ }
72+}