Timeline: Load row labels asynchronously where possible

Loading them all at once and keeping them around all the time wastes
memory and time.

Change-Id: I088e0f955a93f94fa460ca17583123eb4d317da9
Reviewed-by: Joerg Bornemann <joerg.bornemann@theqtcompany.com>

src/libs/timeline/qml/CategoryLabel.qml

@@ -55,8 +55,6 @@ Item {
     signal selectNextBySelectionId(int selectionId)
     signal selectPrevBySelectionId(int selectionId)
 
-    readonly property int dragHeight: 5
-
     property bool reverseSelect: false
 
     visible: model && (mockup || (!model.hidden && !model.empty))
@@ -111,57 +109,36 @@ Item {
         visible: expanded
         Repeater {
             model: labels.length
-            Button {
+            Loader {
-                id: button
+                id: loader
-                property string labelText: labels[index].description ? labels[index].description :
+                asynchronous: dragOffset - draggerParent.contentY + y + txt.height >
-                                                                       qsTr("[unknown]")
+                              draggerParent.height
+                active: expanded
                 width: labelContainer.width
                 height: column.parentModel ? column.parentModel.rowHeight(index + 1) : 0
-                action: Action {
-                    onTriggered: {
-                        if (reverseSelect)
-                            labelContainer.selectPrevBySelectionId(labels[index].id);
-                        else
-                            labelContainer.selectNextBySelectionId(labels[index].id);
-                    }
 
-                    tooltip: button.labelText + (labels[index].displayName ?
+                onAsynchronousChanged: {
-                                                     (" (" + labels[index].displayName + ")") : "")
+                    if (!asynchronous && active && status !== Loader.Ready) {
-                }
+                        // Trigger a synchronous reload to avoid glitches
-
+                        var component = sourceComponent;
-                style: ButtonStyle {
+                        sourceComponent = undefined;
-                    background: Rectangle {
+                        sourceComponent = component;
-                        border.width: 1
-                        border.color: "#c8c8c8"
-                        color: "#eaeaea"
-                    }
-                    label: Text {
-                        text: button.labelText
-                        textFormat: Text.PlainText
-                        verticalAlignment: Text.AlignVCenter
-                        horizontalAlignment: Text.AlignLeft
-                        elide: Text.ElideRight
-                        renderType: Text.NativeRendering
                     }
                 }
-                MouseArea {
-                    hoverEnabled: true
-                    property bool resizing: false
-                    onPressed: resizing = true
-                    onReleased: resizing = false
 
-                    height: dragHeight
+                sourceComponent: RowLabel {
-                    anchors.bottom: parent.bottom
+                    label: labels[index];
-                    anchors.left: parent.left
+                    onSelectBySelectionId: {
-                    anchors.right: parent.right
+                        if (labelContainer.reverseSelect) {
-                    cursorShape: Qt.SizeVerCursor
+                            labelContainer.selectPrevBySelectionId(label.id);
-
+                        } else {
-                    onMouseYChanged: {
+                            labelContainer.selectNextBySelectionId(label.id);
-                        if (resizing) {
-                            column.parentModel.setExpandedRowHeight(index + 1, y + mouseY);
-                            parent.height = column.parentModel.rowHeight(index + 1);
                         }
                     }
+                    onSetRowHeight: {
+                        column.parentModel.setExpandedRowHeight(index + 1, newHeight);
+                        loader.height = column.parentModel.rowHeight(index + 1);
+                    }
                 }
             }
         }

src/libs/timeline/qml/RowLabel.qml

@@ -0,0 +1,83 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms and
+** conditions see http://www.qt.io/terms-conditions. For further information
+** use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 or version 3 as published by the Free
+** Software Foundation and appearing in the file LICENSE.LGPLv21 and
+** LICENSE.LGPLv3 included in the packaging of this file. Please review the
+** following information to ensure the GNU Lesser General Public License
+** requirements will be met: https://www.gnu.org/licenses/lgpl.html and
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, The Qt Company gives you certain additional
+** rights. These rights are described in The Qt Company LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2
+
+Button {
+    id: button
+    property var label
+
+    readonly property int dragHeight: 5
+
+    signal selectBySelectionId()
+    signal setRowHeight(int newHeight)
+
+    property string labelText: label.description ? label.description : qsTr("[unknown]")
+    action: Action {
+        onTriggered: button.selectBySelectionId();
+        tooltip: button.labelText + (label.displayName ? (" (" + label.displayName + ")") : "")
+    }
+
+    style: ButtonStyle {
+        background: Rectangle {
+            border.width: 1
+            border.color: "#c8c8c8"
+            color: "#eaeaea"
+        }
+        label: Text {
+            text: button.labelText
+            textFormat: Text.PlainText
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignLeft
+            elide: Text.ElideRight
+            renderType: Text.NativeRendering
+        }
+    }
+    MouseArea {
+        hoverEnabled: true
+        property bool resizing: false
+        onPressed: resizing = true
+        onReleased: resizing = false
+
+        height: dragHeight
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        cursorShape: Qt.SizeVerCursor
+
+        onMouseYChanged: {
+            if (resizing)
+                button.setRowHeight(y + mouseY)
+        }
+    }
+}
+

src/libs/timeline/qml/timeline.qrc

@@ -32,5 +32,6 @@
         <file>notes.frag</file>
         <file>TimelineLabels.qml</file>
         <file>TimelineContent.qml</file>
+        <file>RowLabel.qml</file>
     </qresource>
 </RCC>