QmlProfiler: main view with fixed height and scrollable

Change-Id: Ib77ad6ba5afe13d692d85c7027e3e1d4b2fbb6a7
Reviewed-by: Kai Koehne <kai.koehne@nokia.com>

src/plugins/qmlprofiler/canvas/qdeclarativetiledcanvas.cpp

@@ -145,7 +145,6 @@ void TiledCanvas::componentComplete()
 void TiledCanvas::mousePressEvent(QGraphicsSceneMouseEvent *event)
 {
     Q_UNUSED(event);
-    qWarning("MPE");
 }
 
 QPixmap TiledCanvas::getTile(int xx, int yy)

src/plugins/qmlprofiler/qml/Detail.qml

@@ -32,7 +32,6 @@
 
 import QtQuick 1.0
 import Monitor 1.0
-import "MainView.js" as Plotter
 
 Item {
     id: detail

src/plugins/qmlprofiler/qml/MainView.js → src/plugins/qmlprofiler/qml/Overview.js

@@ -32,22 +32,8 @@
 
 .pragma library
 
-var xmargin = 0;
-var ymargin = 0;
 var qmlEventList = 0;
 
-var names = [ qsTr("Painting"), qsTr("Compiling"), qsTr("Creating"), qsTr("Binding"), qsTr("Handling Signal")]
-//### need better way to manipulate color from QML. In the meantime, these need to be kept in sync.
-var colors = [ "#99CCB3", "#99CCCC", "#99B3CC", "#9999CC", "#CC99B3", "#CC99CC", "#CCCC99", "#CCB399" ];
-var origColors = [ "#99CCB3", "#99CCCC", "#99B3CC", "#9999CC", "#CC99B3", "#CC99CC", "#CCCC99", "#CCB399" ];
-var xRayColors = [ "#6699CCB3", "#6699CCCC", "#6699B3CC", "#669999CC", "#66CC99B3", "#66CC99CC", "#66CCCC99", "#66CCB399" ];
-
-function reset()
-{
-    xmargin = 0;
-    ymargin = 0;
-}
-
 //draw background of the graph
 function drawGraph(canvas, ctxt, region)
 {
@@ -56,7 +42,7 @@ function drawGraph(canvas, ctxt, region)
     grad.addColorStop(1, '#ccc');
     ctxt.fillStyle = grad;
 
-    ctxt.fillRect(0, 0, canvas.canvasSize.width + xmargin, canvas.canvasSize.height - ymargin);
+    ctxt.fillRect(0, 0, canvas.canvasSize.width, canvas.canvasSize.height);
 }
 
 //draw the actual data to be graphed
@@ -65,8 +51,8 @@ function drawData(canvas, ctxt, region)
     if ((!qmlEventList) || qmlEventList.count() == 0)
         return;
 
-    var width = canvas.canvasSize.width - xmargin;
-    var height = canvas.height - ymargin;
+    var width = canvas.canvasSize.width;
+    var height = canvas.height;
 
     var sumValue = qmlEventList.traceEndTime() - qmlEventList.traceStartTime();
     var spacing = width / sumValue;
@@ -74,10 +60,11 @@ function drawData(canvas, ctxt, region)
     ctxt.fillStyle = "rgba(0,0,0,1)";
     var highest = [0,0,0,0,0];
 
+    // todo: use "region" in the timemarks?
     //### only draw those in range
     for (var ii = 0; ii < qmlEventList.count(); ++ii) {
 
-        var xx = (qmlEventList.getStartTime(ii) - qmlEventList.traceStartTime()) * spacing + xmargin;
+        var xx = (qmlEventList.getStartTime(ii) - qmlEventList.traceStartTime()) * spacing;
         if (xx > region.x + region.width)
             continue;
 
@@ -102,15 +89,3 @@ function plot(canvas, ctxt, region)
     drawGraph(canvas, ctxt, region);
     drawData(canvas, ctxt, region);
 }
-
-function xScale(canvas)
-{
-    if ((!qmlEventList) || qmlEventList.count() == 0)
-        return;
-
-    var width = canvas.canvasSize.width - xmargin;
-
-    var sumValue = qmlEventList.traceEndTime() - qmlEventList.traceStartTime();
-    var spacing = sumValue / width;
-    return spacing;
-}

src/plugins/qmlprofiler/qml/Overview.qml

+/**************************************************************************
+**
+** This file is part of Qt Creator
+**
+** Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
+**
+** Contact: Nokia Corporation (info@qt.nokia.com)
+**
+**
+** GNU Lesser General Public License Usage
+**
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this file.
+** Please review the following information to ensure the GNU Lesser General
+** Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** Other Usage
+**
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at info@qt.nokia.com.
+**
+**************************************************************************/
+
+import QtQuick 1.0
+import Monitor 1.0
+import "Overview.js" as Plotter
+
+TiledCanvas {
+    id: canvas
+
+    // ***** properties
+    height: 50
+    property bool dataAvailable: false
+    property variant startTime : 0
+    property variant endTime : 0
+
+    canvasSize.width: canvas.width
+    canvasSize.height: canvas.height
+
+    tileSize.width: width
+    tileSize.height: height
+
+    canvasWindow.width: width
+    canvasWindow.height: height
+
+    // ***** functions
+    function clearDisplay()
+    {
+        dataAvailable = false;
+        requestPaint();
+    }
+
+    function updateRange() {
+        var newStartTime = Math.round(rangeMover.x * qmlEventList.traceEndTime() / width);
+        var newEndTime = Math.round((rangeMover.x + rangeMover.width) * qmlEventList.traceEndTime() / width);
+        if (startTime !== newStartTime || endTime !== newEndTime) {
+            zoomControl.setRange(newStartTime, newEndTime);
+        }
+    }
+
+    // ***** connections to external objects
+    Connections {
+        target: zoomControl
+        onRangeChanged: {
+            if (qmlEventList) {
+                startTime = zoomControl.startTime();
+                endTime = zoomControl.endTime();
+                var newRangeX = startTime * width / qmlEventList.traceEndTime();
+                if (rangeMover.x !== newRangeX)
+                    rangeMover.x = newRangeX;
+                var newWidth = (endTime-startTime) * width / qmlEventList.traceEndTime();
+                if (rangeMover.width !== newWidth)
+                    rangeMover.width = newWidth;
+            }
+        }
+    }
+
+    Connections {
+        target: qmlEventList
+        onDataReady: {
+            if (qmlEventList.count() > 0) {
+                dataAvailable = true;
+                requestPaint();
+            }
+        }
+    }
+
+    // ***** slots
+    onDrawRegion: {
+        if (dataAvailable)
+            Plotter.plot(canvas, ctxt, region);
+        else {
+            Plotter.qmlEventList = qmlEventList;
+            Plotter.drawGraph(canvas, ctxt, region)    //just draw the background
+        }
+    }
+
+    // ***** child items
+    MouseArea {
+        anchors.fill: canvas
+        function jumpTo(posX) {
+            var newX = posX - rangeMover.width/2;
+            if (newX < 0)
+                newX = 0;
+            if (newX + rangeMover.width > canvas.width)
+                newX = canvas.width - rangeMover.width;
+            rangeMover.x = newX;
+            updateRange();
+        }
+
+        onPressed: {
+            jumpTo(mouse.x);
+        }
+        onMousePositionChanged: {
+            jumpTo(mouse.x);
+        }
+    }
+
+    RangeMover {
+        id: rangeMover
+        visible: dataAvailable
+    }
+
+    Rectangle {
+        height: 1
+        width: parent.width
+        color: "#cccccc"
+    }
+}

src/plugins/qmlprofiler/qml/RangeDetails.qml

@@ -32,7 +32,6 @@
 
 import QtQuick 1.0
 import Monitor 1.0
-import "MainView.js" as Plotter
 
 BorderImage {
     id: rangeDetails
@@ -56,7 +55,7 @@ BorderImage {
     z: 1
     visible: false
     x: 200
-    y: 200
+    y: 25
 
     //title
     Text {
@@ -99,13 +98,12 @@ BorderImage {
             opacity: content.length !== 0 ? 1 : 0
             label: qsTr("Location")
             content: {
-                var file = rangeDetails.file
-                var pos = file.lastIndexOf("/")
+                var file = rangeDetails.file;
+                var pos = file.lastIndexOf("/");
                 if (pos != -1)
-                    file = file.substr(pos+1)
+                    file = file.substr(pos+1);
                 return (file.length !== 0) ? (file + ":" + rangeDetails.line) : "";
             }
-            onLinkActivated: Qt.openUrlExternally(url)
         }
     }
 
@@ -119,7 +117,9 @@ BorderImage {
         height: 12
         MouseArea {
             anchors.fill: parent
-            onClicked: root.mouseOverSelection = !root.mouseOverSelection;
+            onClicked: {
+                root.mouseOverSelection = !root.mouseOverSelection;
+            }
         }
     }
 
@@ -130,7 +130,9 @@ BorderImage {
         text:"X"
         MouseArea {
             anchors.fill: parent
-            onClicked: root.hideRangeDetails();
+            onClicked: {
+                root.hideRangeDetails();
+            }
         }
     }
 

src/plugins/qmlprofiler/qml/RangeMover.qml

@@ -30,124 +30,148 @@
 **
 **************************************************************************/
 
-import "MainView.js" as Plotter
 import QtQuick 1.0
-import Monitor 1.0
 
-Item {
+Rectangle {
     id: rangeMover
 
 
     property color lighterColor:"#cc80b2f6"
     property color darkerColor:"#cc6da1e8"
     property color gapColor: "#666da1e8"
-    property real value: (canvas.canvasWindow.x + x) * Plotter.xScale(canvas)
-    property real zoomWidth: 20
-    onZoomWidthChanged: timeDisplayLabel.hideAll();
+    property color hardBorderColor: "blue"
+    width: 20
+    height: 50
 
-    function updateZoomControls() {
-        rightRange.x = rangeMover.width;
-    }
-    onXChanged: updateZoomControls();
+    color: lighterColor
 
-    width: Math.max(rangeMover.zoomWidth, 20); height: 50
+    property bool dragStarted: false
+    onXChanged: {
+        if (dragStarted) canvas.updateRange()
+    }
 
     MouseArea {
         anchors.fill: parent
         drag.target: rangeMover
         drag.axis: "XAxis"
         drag.minimumX: 0
-        drag.maximumX: canvas.width - rangeMover.zoomWidth //###
-    }
-
-    Rectangle {
-        id: frame
-        color:"transparent"
-        anchors.fill: parent
-        anchors.rightMargin: 1
-        anchors.bottomMargin: 1
-    }
-
-    Rectangle {
-        id: rect
-        color: lighterColor
-        width: parent.zoomWidth
-        height: parent.height
-    }
-
-    Rectangle {
-        id: gapRect
-        color: gapColor
-        anchors.left: rect.right
-        anchors.right: rightRange.left
-        height: parent.height
+        drag.maximumX: canvas.width - rangeMover.width
+        onPressed: {
+            parent.dragStarted = true;
+        }
+        onReleased: {
+            parent.dragStarted = false;
+        }
     }
 
     Rectangle {
         id: leftRange
 
-        property int currentX: rangeMover.x
-        property int currentWidth : rangeMover.zoomWidth
+        // used for dragging the borders
+        property real initialX: 0
+        property real initialWidth: 0
 
-        x: -width
+        x: 0
         height: parent.height
-        width: 15
+        width: 1
         color: darkerColor
+        border.color: hardBorderColor
+        border.width: 0
+
+        states: State {
+            name: "highlighted"
+            PropertyChanges {
+                target: leftRange
+                width: 3
+                border.width: 2
+            }
+        }
 
-        Text {
-            anchors.centerIn: parent
-            text:"<"
+        onXChanged: {
+            if (x !== 0) {
+                rangeMover.width = initialWidth - x;
+                rangeMover.x = initialX + x;
+                x = 0;
+                canvas.updateRange();
+            }
         }
 
         MouseArea {
-            anchors.fill: parent
+            x: -3
+            width: 7
+            y: 0
+            height: parent.height
+
             drag.target: leftRange
             drag.axis: "XAxis"
-            drag.minimumX: -parent.currentX
-            drag.maximumX: parent.currentWidth - width - 1
-            onPressed: {
-                parent.currentX = rangeMover.x;
-                parent.currentWidth = rangeMover.zoomWidth;
+            drag.minimumX: -parent.initialX
+            drag.maximumX: parent.initialWidth - 2
+
+            hoverEnabled: true
+
+            onEntered: {
+                parent.state = "highlighted";
             }
-        }
-        onXChanged: {
-            if (x + width != 0) {
-                rangeMover.zoomWidth = currentWidth - x - width;
-                rangeMover.x = currentX + x + width;
-                x = -width;
+            onExited: {
+                if (!pressed) parent.state = "";
+            }
+            onReleased: {
+                if (!containsMouse) parent.state = "";
+            }
+            onPressed: {
+                parent.initialX = rangeMover.x;
+                parent.initialWidth = rangeMover.width;
             }
         }
     }
 
     Rectangle {
         id: rightRange
-        property int currentX: rangeMover.x
-        property int widthSpace: rangeMover.width - rangeMover.zoomWidth
 
-        height: parent.height
-        width: 15
         x: rangeMover.width
-        color: darkerColor;
+        height: parent.height
+        width: 1
+        color: darkerColor
+        border.color: hardBorderColor
+        border.width: 0
+
+        states: State {
+            name: "highlighted"
+            PropertyChanges {
+                target: rightRange
+                width: 3
+                border.width: 2
+            }
+        }
 
-        Text {
-            anchors.centerIn: parent
-            text:">"
+        onXChanged: {
+            if (x!=rangeMover.width) {
+                rangeMover.width = x;
+                canvas.updateRange();
+            }
         }
+
         MouseArea {
-            anchors.fill: parent
+            x: -3
+            width: 7
+            y: 0
+            height: parent.height
+
             drag.target: rightRange
             drag.axis: "XAxis"
-            drag.minimumX: 1 + parent.widthSpace
-            drag.maximumX: canvas.width - parent.currentX;
-            onPressed: {
-                parent.currentX = rangeMover.x;
-                parent.widthSpace = rangeMover.width - rangeMover.zoomWidth;
+            drag.minimumX: 1
+            drag.maximumX: canvas.width - rangeMover.x
+
+            hoverEnabled: true
+
+            onEntered: {
+                parent.state = "highlighted";
             }
-            onReleased: rightRange.x = rangeMover.width;
-        }
-        onXChanged: {
-            if (x != rangeMover.width) {
-                rangeMover.zoomWidth = x - widthSpace;
+            onExited: {
+                if (!pressed) parent.state = "";
+            }
+            onReleased: {
+                if (!containsMouse) parent.state = "";
             }
         }
     }

src/plugins/qmlprofiler/qml/StatusDisplay.qml

 import QtQuick 1.0
-import "MainView.js" as Plotter
 
 Rectangle {
     id: statusDisplay
 
     property real percentage : root.progress
 
-    width: Math.max(200, statusText.width+20);
+    width: Math.max(200, statusText.width+20)
     height: displayColumn.height + 20
 
     visible: false;
 
     color: "#CCD0CC"
     border.width: 1
-    border.color: "#AAAEAA";
+    border.color: "#AAAEAA"
     radius: 4
 
     Column {
@@ -42,7 +41,7 @@ Rectangle {
                 x: 1
                 y: 1
                 width: (parent.width-1) * statusDisplay.percentage
-                color: Qt.rgba(0.37 + 0.2*(1 - statusDisplay.percentage), 0.58, 0.37, 1);
+                color: Qt.rgba(0.37 + 0.2*(1 - statusDisplay.percentage), 0.58, 0.37, 1)
                 height: parent.height-1
             }
         }
@@ -51,7 +50,7 @@ Rectangle {
     states: [
         // no data available
         State {
-            when: (root.eventCount == 0) && !elapsedTimer.running;
+            when: (root.eventCount == 0) && !elapsedTimer.running
             PropertyChanges {
                 target: statusDisplay
                 visible: true
@@ -59,13 +58,15 @@ Rectangle {
 
             PropertyChanges {
                 target: statusText
-                text: qsTr("No QML events recorded");
+                text: qsTr("No QML events recorded")
+            }
+            onCompleted: {
+                root.clearDisplay();
             }
-            onCompleted: root.clearDisplay();
         },
         // running app
         State {
-            when: elapsedTimer.running;
+            when: elapsedTimer.running
             PropertyChanges {
                 target: statusDisplay
                 visible: true
@@ -73,13 +74,13 @@ Rectangle {
 
             PropertyChanges {
                 target: statusText
-                text: qsTr("Profiling application");
+                text: qsTr("Profiling application")
             }
         },
         // loading data
         State {
             name: "loading"
-            when: (!root.dataAvailable) && (root.eventCount > 0);
+            when: (!root.dataAvailable) && (root.eventCount > 0)
             PropertyChanges {
                 target: statusDisplay
                 visible: true
@@ -87,7 +88,7 @@ Rectangle {
 
             PropertyChanges {
                 target: statusText
-                text: qsTr("Loading data");
+                text: qsTr("Loading data")
             }
 
             PropertyChanges {

src/plugins/qmlprofiler/qml/TimeDisplay.qml

@@ -32,37 +32,43 @@
 
 import QtQuick 1.0
 import Monitor 1.0
-import "MainView.js" as Plotter
 
 TiledCanvas {
     id: timeDisplay
 
-    canvasSize {
-        width: timeDisplay.width
-        height: timeDisplay.height
-    }
+    property variant startTime : 0
+    property variant endTime : 0