QmlProfiler: show ranges in time display

Change-Id: I6f42db3d5de02ee0198ff51aae8421bbdc5ea9c4
Reviewed-on: http://codereview.qt.nokia.com/836
Reviewed-by: Qt Sanity Bot <qt_sanity_bot@ovi.com>
Reviewed-by: Kai Koehne <kai.koehne@nokia.com>

src/plugins/qmlprofiler/qml/MainView.qml

@@ -439,4 +439,60 @@ Rectangle {
         opacity: 0
         anchors.top: canvas.top
     }
+
+    // the next elements are here because I want them rendered on top of the other
+    Rectangle {
+        id: timeDisplayLabel
+        color: "lightsteelblue"
+        border.color: Qt.darker(color)
+        border.width: 1
+        radius: 2
+        height: Math.max(labels.y-2, timeDisplayText.height);
+        y: timeDisplayEnd.visible ? flick.height - 1 : 1
+        width: timeDisplayText.width + 10 + ( timeDisplayEnd.visible ? timeDisplayCloseControl.width + 10 : 0 )
+        visible: false
+
+        function hideAll() {
+            timeDisplayBegin.visible = false;
+            timeDisplayEnd.visible = false;
+            timeDisplayLabel.visible = false;
+        }
+        Text {
+            id: timeDisplayText
+            x: 5
+            y: parent.height/2 - height/2 + 1
+            font.pointSize: 8
+        }
+
+        Text {
+            id: timeDisplayCloseControl
+            text:"X"
+            anchors.right: parent.right
+            anchors.rightMargin: 3
+            y: parent.height/2 - height/2 + 1
+            visible: timeDisplayEnd.visible
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    timeDisplayLabel.hideAll();
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        id: timeDisplayBegin
+        width: 1
+        color: Qt.rgba(0,0,64,0.7);
+        height: flick.height + labels.y
+        visible: false
+    }
+
+    Rectangle {
+        id: timeDisplayEnd
+        width: 1
+        color: Qt.rgba(0,0,64,0.7);
+        height: flick.height + labels.y
+        visible: false
+    }
 }

src/plugins/qmlprofiler/qml/RangeMover.qml

@@ -43,6 +43,7 @@ Item {
     property color darkerColor:"#cc6da1e8"
     property real value: (canvas.canvasWindow.x + x) * Plotter.xScale(canvas)
     property real zoomWidth: 20
+    onZoomWidthChanged: timeDisplayLabel.hideAll();
 
     function updateZoomControls() {
         rightRange.x = rangeMover.width;

src/plugins/qmlprofiler/qml/TimeDisplay.qml

@@ -112,31 +112,53 @@ TiledCanvas {
         width: parent.width
         height: labels.y
         hoverEnabled: true
-        onMousePositionChanged: {
-            var realTime = startTime + mouseX * timePerPixel;
-            displayText.text = detailedPrintTime(realTime);
-            displayRect.x = mouseX
-            displayRect.visible = true
-        }
-        onExited: displayRect.visible = false
-        onEntered: root.hideRangeDetails();
-    }
 
-    Rectangle {
-        id: displayRect
-        color: "lightsteelblue"
-        border.color: Qt.darker(color)
-        border.width: 1
-        radius: 2
-        height: labels.y - 2
-        y: 1
-        width: displayText.width + 10
-        visible: false
-        Text {
-            id: displayText
-            x: 5
-            y: labels.y/2 - 6
-            font.pointSize: 8
+        function setStartTime(xpos) {
+            var realTime = startTime + xpos * timePerPixel;
+            timeDisplayText.text = detailedPrintTime(realTime);
+            timeDisplayBegin.visible = true;
+            timeDisplayBegin.x = xpos + flick.x;
+        }
+
+        function setEndTime(xpos) {
+            var bt = startTime + (timeDisplayBegin.x - flick.x) * timePerPixel;
+            var et = startTime + xpos * timePerPixel;
+            var timeDisplayBeginTime = Math.min(bt, et);
+            var timeDisplayEndTime = Math.max(bt, et);
+
+            timeDisplayText.text = qsTr("length:")+detailedPrintTime(timeDisplayEndTime-timeDisplayBeginTime);
+            timeDisplayEnd.visible = true;
+            timeDisplayEnd.x = xpos + flick.x
+        }
+
+        onMousePositionChanged: {
+            if (!Plotter.ranges.length)
+                return;
+
+            if (!pressed && timeDisplayEnd.visible)
+                return;
+
+            timeDisplayLabel.x = mouseX + flick.x
+            timeDisplayLabel.visible = true
+
+            if (pressed) {
+                setEndTime(mouseX);
+            } else {
+                setStartTime(mouseX);
+            }
+        }
+
+        onPressed:  {
+            setStartTime(mouseX);
+        }
+
+        onEntered: {
+            root.hideRangeDetails();
+        }
+        onExited: {
+            if ((!pressed) && (!timeDisplayEnd.visible)) {
+                timeDisplayLabel.hideAll();
+            }
         }
     }
 }