QmlProfiler: changes in rangedetails and selection of items

Change-Id: Ic665596cd4f01459b69738363b64ee3b9e5d5b74
Reviewed-on: http://codereview.qt-project.org/6327
Sanity-Review: Qt Sanity Bot <qt_sanity_bot@ovi.com>
Reviewed-by: Kai Koehne <kai.koehne@nokia.com>

src/libs/qmljsdebugclient/qmlprofilereventlist.cpp

@@ -173,6 +173,8 @@ public:
     QV8EventDescriptions m_v8EventList;
     QHash<int, QV8EventData *> m_v8parents;
 
+    qint64 m_traceEndTime;
+
     // file to load
     QString m_filename;
     ParsingStatus m_parsingStatus;
@@ -187,6 +189,9 @@ QmlProfilerEventList::QmlProfilerEventList(QObject *parent) :
 {
     d->m_parsingStatus = DoneStatus;
     setObjectName("QmlProfilerEventStatistics");
+
+    // todo: read from client
+    d->m_traceEndTime = 0;
 }
 
 QmlProfilerEventList::~QmlProfilerEventList()
@@ -724,6 +729,16 @@ qint64 QmlProfilerEventList::lastTimeMark() const
     }
 }
 
+qint64 QmlProfilerEventList::traceStartTime() const
+{
+    return 0;
+}
+
+qint64 QmlProfilerEventList::traceEndTime() const
+{
+    return d->m_traceEndTime ? d->m_traceEndTime : lastTimeMark();
+}
+
 int QmlProfilerEventList::count() const
 {
     return d->m_startTimeSortedList.count();

src/libs/qmljsdebugclient/qmlprofilereventlist.h

@@ -118,6 +118,9 @@ public:
     Q_INVOKABLE int getLine(int index) const;
     Q_INVOKABLE QString getDetails(int index) const;
 
+    Q_INVOKABLE qint64 traceStartTime() const;
+    Q_INVOKABLE qint64 traceEndTime() const;
+
     void showErrorDialog(const QString &st ) const;
 signals:
     void dataReady();

src/plugins/qmlprofiler/qml/MainView.qml

@@ -41,6 +41,8 @@ Rectangle {
     property int eventCount: 0;
     property real progress: 0;
 
+    property bool mouseOverSelection : true
+
     // move the cursor in the editor
     signal updateCursorPosition
     property string fileName: ""
@@ -58,6 +60,7 @@ Rectangle {
         root.eventCount = 0;
         rangeMover.x = 2
         rangeMover.opacity = 0
+        hideRangeDetails();
     }
 
     function clearAll() {
@@ -87,6 +90,10 @@ Rectangle {
                 rangeMover.x = Math.floor((eventStartTime + eventDuration - startTime) / xs - canvas.canvasWindow.x - rangeMover.zoomWidth/2);
             }
         }
+
+        if (selectedEventIndex == -1) {
+            selectionHighlight.visible = false;
+        }
     }
 
     function nextEvent() {
@@ -111,14 +118,12 @@ Rectangle {
 
         // 0.1 ms minimum zoom
         if (newZoom * Plotter.xScale(canvas) > 100000) {
-            hideRangeDetails();
             rangeMover.zoomWidth =  newZoom
             rangeMover.updateZoomControls();
         }
     }
 
     function zoomOut() {
-        hideRangeDetails();
         // 10%
         var newZoom = rangeMover.zoomWidth * 1.1;
         if (newZoom > canvas.width)
@@ -193,6 +198,9 @@ Rectangle {
         rangeDetails.type = ""
         rangeDetails.file = ""
         rangeDetails.line = -1
+
+        root.mouseOverSelection = true;
+        selectionHighlight.visible = false;
     }
 
     //our main interaction view
@@ -209,19 +217,6 @@ Rectangle {
 
         clip:true
 
-        MouseArea {
-            width: flick.width
-            height: flick.contentHeight
-            x:  flick.contentX
-            onClicked: {
-                root.hideRangeDetails();
-            }
-            hoverEnabled: true
-            onExited: {
-                root.hideRangeDetails();
-            }
-        }
-
         TimelineView {
             id: view
 
@@ -241,7 +236,18 @@ Rectangle {
             }
             startTime: rangeMover.value
             endTime: startTime + (rangeMover.zoomWidth*Plotter.xScale(canvas))
-            onEndTimeChanged: updateTimeline()
+            onEndTimeChanged: {
+                updateTimeline();
+            }
+
+            property real timeSpan: endTime - startTime
+            onTimeSpanChanged: {
+                if (selectedEventIndex != -1 && selectionHighlight.visible) {
+                    var spacing = flick.width / timeSpan;
+                    selectionHighlight.x = (qmlEventList.getStartTime(selectedEventIndex) - qmlEventList.firstTimeMark()) * spacing;
+                    selectionHighlight.width = qmlEventList.getDuration(selectedEventIndex) * spacing;
+               }
+            }
 
             onCachedProgressChanged: root.progress = 0.5 + cachedProgress * 0.5;
             onCacheReady: {
@@ -259,9 +265,7 @@ Rectangle {
 
             delegate: Rectangle {
                 id: obj
-
+                property color myColor: Plotter.colors[type]
-                property color baseColor: Plotter.colors[type]
-                property color myColor: baseColor
 
                 function conditionalHide() {
                     if (!mouseArea.containsMouse)
@@ -292,52 +296,23 @@ Rectangle {
                         if (isSelected) {
                             enableSelected(0, 0);
                         }
-                        else
-                            disableSelected();
                     }
                 }
 
                 function enableSelected(x,y) {
-                    myColor = Qt.darker(baseColor, 1.2)
                     rangeDetails.duration = qmlEventList.getDuration(index)/1000.0;
                     rangeDetails.label = qmlEventList.getDetails(index);
                     rangeDetails.file = qmlEventList.getFilename(index);
                     rangeDetails.line = qmlEventList.getLine(index);
                     rangeDetails.type = Plotter.names[type]
 
-                    var margin = 10;
-
-                    var pos = mapToItem(rangeDetails.parent , x, y)
-                    var preferredX = pos.x + margin;
-
-                    // if over the right side of the window, render it left to the given pos
-                    if (preferredX + rangeDetails.width + margin > rangeDetails.parent.width)
-                        preferredX = pos.x - rangeDetails.width - margin;
-
-                    // if window too narrow, put it at least in "margin" pixels
-                    if (preferredX < margin)
-                        preferredX = margin;
-
-                    rangeDetails.x = preferredX
-
-                    // center on current item
-                    var preferredY = pos.y + height/2 - rangeDetails.height/2;
-
-                    // if too low, put it over the bottom of the window
-                    if (preferredY + rangeDetails.height - margin > root.height)
-                        preferredY = root.height - rangeDetails.height - margin;
-
-                    // but never above the top of the window
-                    if (preferredY < margin)
-                        preferredY = margin;
-
-                    rangeDetails.y = preferredY;
-
                     rangeDetails.visible = true
-                }
 
-                function disableSelected() {
+                    selectionHighlight.x = obj.x;
-                    myColor = baseColor
+                    selectionHighlight.y = obj.y;
+                    selectionHighlight.width = width;
+                    selectionHighlight.height = height;
+                    selectionHighlight.visible = true;
                 }
 
                 MouseArea {
@@ -345,36 +320,47 @@ Rectangle {
                     anchors.fill: parent
                     hoverEnabled: true
                     onEntered: {
+                        if (root.mouseOverSelection) {
+                            root.mouseTracking = true;
+                            root.selectedEventIndex = index;
+                            enableSelected(mouseX, y);
+                            root.mouseTracking = false;
+                        }
+                    }
+
+                    onPressed: {
                         root.mouseTracking = true;
                         root.selectedEventIndex = index;
                         enableSelected(mouseX, y);
                         root.mouseTracking = false;
-                    }
-                    onExited: {
-                        disableSelected();
-                    }
 
-                    onClicked: root.gotoSourceLocation(rangeDetails.file, rangeDetails.line);
+                        root.mouseOverSelection = false;
+                        root.gotoSourceLocation(rangeDetails.file, rangeDetails.line);
+                    }
                 }
             }
+
+            Rectangle {
+                id: selectionHighlight
+                color:"transparent"
+                border.width: 2
+                border.color: "blue"
+                radius: 2
+                visible: false
+                z:1
+            }
+
+            MouseArea {
+                width: parent.width
+                height: parent.height
+                x: flick.contentX
+                onClicked: root.hideRangeDetails();
+            }
         }
     }
-
     //popup showing the details for the hovered range
     RangeDetails {
         id: rangeDetails
-
-        // follow the flickable
-        property int flickableX: flick.contentX;
-        property int lastFlickableX;
-        onXChanged: lastFlickableX = flickableX;
-        onFlickableXChanged: {
-            x = x - flickableX + lastFlickableX;
-            if (visible && (x + width <= 0 || x > root.width)) {
-                root.hideRangeDetails();
-                visible = false;
-            }
-        }
     }
 
     Rectangle {
@@ -403,12 +389,6 @@ Rectangle {
             anchors.right: parent.right
             color: "#cccccc"
         }
-
-        MouseArea {
-            anchors.fill: parent
-            hoverEnabled: true
-            onEntered: root.hideRangeDetails();
-        }
     }
 
     //bottom border divider

src/plugins/qmlprofiler/qml/RangeDetails.qml

@@ -43,6 +43,8 @@ BorderImage {
     property string file
     property int line
 
+    property bool locked: !root.mouseOverSelection
+
     source: "popup.png"
     border {
         left: 10; top: 10
@@ -50,9 +52,11 @@ BorderImage {
     }
 
     width: col.width + 45
-    height: childrenRect.height + 30
+    height: childrenRect.height
     z: 1
     visible: false
+    x: 200
+    y: 200
 
     //title
     Text {
@@ -104,4 +108,42 @@ BorderImage {
             onLinkActivated: Qt.openUrlExternally(url)
         }
     }
+
+    Image {
+        id: lockIcon
+        source: locked?"lock_closed.png" : "lock_open.png"
+        anchors.top: closeIcon.top
+        anchors.right: closeIcon.left
+        anchors.rightMargin: 4
+        width: 8
+        height: 12
+        MouseArea {
+            anchors.fill: parent
+            onClicked: root.mouseOverSelection = !root.mouseOverSelection;
+        }
+    }
+
+    Text {
+        id: closeIcon
+        x: col.width + 20
+        y: 10
+        text:"X"
+        MouseArea {
+            anchors.fill: parent
+            onClicked: root.hideRangeDetails();
+        }
+    }
+
+    MouseArea {
+        width: col.width
+        height: col.height + typeTitle.height + 30
+        drag.target: parent
+        onClicked: {
+            // force reload of selected item
+            var selectedItem = root.selectedEventIndex;
+            root.selectedEventIndex = -1;
+            root.selectedEventIndex = selectedItem;
+            root.gotoSourceLocation(file, line);
+        }
+    }
 }

src/plugins/qmlprofiler/qml/TimeDisplay.qml

@@ -184,9 +184,6 @@ TiledCanvas {
             setStartTime(mouseX);
         }
 
-        onEntered: {
-            root.hideRangeDetails();
-        }
         onExited: {
             if ((!pressed) && (!timeDisplayEnd.visible)) {
                 timeDisplayLabel.hideAll();

src/plugins/qmlprofiler/qml/qml.qrc

@@ -16,5 +16,7 @@
         <file>recordOff.png</file>
         <file>recordOn.png</file>
         <file>StatusDisplay.qml</file>
+        <file>lock_closed.png</file>
+        <file>lock_open.png</file>
     </qresource>
 </RCC>

src/plugins/qmlprofiler/timelineview.cpp

@@ -97,7 +97,7 @@ void TimelineView::updateTimeline(bool updateStartX)
     if (!m_eventList)
         return;
 
-    qreal totalRange = m_eventList->lastTimeMark() - m_eventList->firstTimeMark();
+    qreal totalRange = m_eventList->traceEndTime() - m_eventList->traceStartTime();
     qreal window = m_endTime - m_startTime;
 
     if (window == 0)    //###