QmlProfiler: Make timeline renderer vertically flickable

Introduce a second flickable element to encapsulate the timeline as
well as the labels and move SelectionRangeDetails and SelectionRange
out of that to make them float on top.

Task-number: QTCREATORBUG-10420

Change-Id: Ib4af7dc4b0155b9371c582938f1b4abb3e40cf06
Reviewed-by: Ulf Hermann <ulf.hermann@digia.com>
Reviewed-by: Kai Koehne <kai.koehne@digia.com>

src/plugins/qmlprofiler/qml/MainView.qml

@@ -338,6 +338,13 @@ Rectangle {
         }
     }
 
+    Flickable {
+        id: vertflick
+        flickableDirection: Flickable.VerticalFlick
+        width: parent.width
+        height: root.height
+        clip: true
+        contentHeight: labels.height
 
     // ***** child items
     TimeMarks {
@@ -354,9 +361,8 @@ Rectangle {
         anchors.topMargin: labels.y
         anchors.right: parent.right
         anchors.left: labels.right
-        height: root.height
+        contentWidth: 0
-        contentWidth: 0;
+        height: labels.height + labelsTail.height
-        contentHeight: labels.height
         flickableDirection: Flickable.HorizontalFlick
 
         onContentXChanged: {
@@ -392,7 +398,7 @@ Rectangle {
         SelectionRange {
             id: selectionRange
             visible: root.selectionRangeMode
-            height: root.height
+            height: parent.height
             z: 2
         }
 
@@ -403,7 +409,7 @@ Rectangle {
 
             x: flick.contentX
             width: flick.width
-            height: root.height
+            height: parent.height
 
             property real startX: 0
 
@@ -477,7 +483,7 @@ Rectangle {
             id: selectionRangeControl
             enabled: false
             width: flick.width
-            height: root.height
+            height: flick.height
             x: flick.contentX
             hoverEnabled: enabled
             z: 2
@@ -494,19 +500,6 @@ Rectangle {
         }
     }
 
-    SelectionRangeDetails {
-        id: selectionRangeDetails
-        visible: root.selectionRangeMode
-        startTime: selectionRange.startTimeString
-        duration: selectionRange.durationString
-        endTime: selectionRange.endTimeString
-        showDuration: selectionRange.width > 1
-    }
-
-    RangeDetails {
-        id: rangeDetails
-    }
-
     Rectangle {
         id: labels
         width: 150
@@ -527,7 +520,7 @@ Rectangle {
     Rectangle {
         id: labelsTail
         anchors.top: labels.bottom
-        anchors.bottom: root.bottom
+        height: Math.max(0, vertflick.height - labels.height)
         width: labels.width
         color: labels.color
     }
@@ -535,9 +528,9 @@ Rectangle {
     // Gradient borders
     Item {
         anchors.left: labels.right
+        anchors.top: labels.top
+        anchors.bottom: labelsTail.bottom
         width: 6
-        anchors.top: root.top
-        anchors.bottom: root.bottom
         Rectangle {
             x: parent.width
             transformOrigin: Item.TopLeft
@@ -550,6 +543,20 @@ Rectangle {
             }
         }
     }
+    }
+
+    SelectionRangeDetails {
+        id: selectionRangeDetails
+        visible: root.selectionRangeMode
+        startTime: selectionRange.startTimeString
+        duration: selectionRange.durationString
+        endTime: selectionRange.endTimeString
+        showDuration: selectionRange.width > 1
+    }
+
+    RangeDetails {
+        id: rangeDetails
+    }
 
     Item {
         anchors.right: root.right