Move flame graph view from QmlProfiler to separate library

We want to use it for other profilers, too.

Change-Id: Ice4bd7fdfce6e0153d62a7c9a83dc7de6d5cba30
Reviewed-by: Christian Kandeler <christian.kandeler@qt.io>

4 files changed, 75 insertions, 355 deletions

diff --git a/src/plugins/qmlprofiler/qml/FlameGraphDetails.qml b/src/plugins/qmlprofiler/qml/FlameGraphDetails.qml
deleted file mode 100644
index 2875d114af3..00000000000
--- a/src/plugins/qmlprofiler/qml/FlameGraphDetails.qml
+++ /dev/null
@@ -1,211 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2016 The Qt Company Ltd.
-** Contact: https://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 https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 3 as published by the Free Software
-** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
-** included in the packaging of this file. Please review the following
-** information to ensure the GNU General Public License requirements will
-** be met: https://www.gnu.org/licenses/gpl-3.0.html.
-**
-****************************************************************************/
-
-import QtQuick 2.1
-
-Item {
-    id: rangeDetails
-
-    property color titleBarColor: "#55a3b8"
-    property color titleBarTextColor: "white"
-    property color contentColor: "white"
-    property color contentTextColor: "black"
-    property color borderColor: "#a0a0a0"
-    property color noteTextColor: "orange"
-
-    property real titleBarHeight: 20
-    property real borderWidth: 1
-    property real outerMargin: 10
-    property real innerMargin: 5
-    property real minimumInnerWidth: 150
-    property real initialWidth: 300
-
-    property real minimumX
-    property real maximumX
-    property real minimumY
-    property real maximumY
-
-    property string dialogTitle
-    property var model
-    property string note
-
-    signal clearSelection
-
-    visible: dialogTitle.length > 0 || model.length > 0
-
-    width: dragHandle.x + dragHandle.width
-    height: contentArea.height + titleBar.height
-
-    onMinimumXChanged: x = Math.max(x, minimumX)
-    onMaximumXChanged: x = Math.min(x, Math.max(minimumX, maximumX - width))
-    onMinimumYChanged: y = Math.max(y, minimumY)
-    onMaximumYChanged: y = Math.min(y, Math.max(minimumY, maximumY - height))
-
-    MouseArea {
-        anchors.fill: parent
-        drag.target: parent
-        drag.minimumX: parent.minimumX
-        drag.maximumX: parent.maximumX - rangeDetails.width
-        drag.minimumY: parent.minimumY
-        drag.maximumY: parent.maximumY - rangeDetails.height
-    }
-
-    Rectangle {
-        id: titleBar
-        width: parent.width
-        height: titleBarHeight
-        color: titleBarColor
-        border.width: borderWidth
-        border.color: borderColor
-
-        FlameGraphText {
-            id: typeTitle
-            text: rangeDetails.dialogTitle
-            font.bold: true
-            verticalAlignment: Text.AlignVCenter
-            anchors.left: parent.left
-            anchors.right: closeIcon.left
-            anchors.leftMargin: outerMargin
-            anchors.rightMargin: innerMargin
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            color: titleBarTextColor
-            elide: Text.ElideRight
-        }
-
-        FlameGraphText {
-            id: closeIcon
-            anchors.right: parent.right
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            anchors.rightMargin: innerMargin
-            verticalAlignment: Text.AlignVCenter
-            text: "X"
-            color: titleBarTextColor
-            MouseArea {
-                anchors.fill: parent
-                onClicked: rangeDetails.clearSelection()
-            }
-        }
-    }
-
-    Rectangle {
-        id: contentArea
-        color: contentColor
-
-        anchors.top: titleBar.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.bottom: dragHandle.bottom
-
-        border.width: borderWidth
-        border.color: borderColor
-    }
-
-    Grid {
-        id: col
-
-        anchors.left: parent.left
-        anchors.top: titleBar.bottom
-        anchors.topMargin: innerMargin
-        anchors.leftMargin: outerMargin
-        anchors.rightMargin: outerMargin
-
-        spacing: innerMargin
-        columns: 2
-        property int minimumWidth: {
-            var result = minimumInnerWidth;
-            for (var i = 0; i < children.length; ++i)
-                result = Math.max(children[i].x, result);
-            return result + 2 * outerMargin;
-        }
-
-        onMinimumWidthChanged: {
-            if (dragHandle.x < minimumWidth)
-                dragHandle.x = minimumWidth;
-        }
-
-        Repeater {
-            model: rangeDetails.model
-            FlameGraphText {
-                property bool isLabel: index % 2 === 0
-                font.bold: isLabel
-                elide: Text.ElideRight
-                width: text === "" ? 0 : (isLabel ? implicitWidth :
-                                                    (dragHandle.x - x - innerMargin))
-                text: isLabel ? (modelData + ":") : modelData
-                color: contentTextColor
-            }
-        }
-    }
-
-
-    TextEdit {
-        id: noteEdit
-
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.leftMargin: outerMargin
-        anchors.rightMargin: outerMargin
-        anchors.topMargin: visible ? innerMargin : 0
-        anchors.top: col.bottom
-        height: visible ? implicitHeight : 0
-
-        readOnly: true
-        visible: text.length > 0
-        text: note
-        wrapMode: Text.Wrap
-        color: noteTextColor
-        font.italic: true
-        font.pixelSize: typeTitle.font.pixelSize
-        font.family: typeTitle.font.family
-        renderType: typeTitle.renderType
-        selectByMouse: true
-    }
-
-    Item {
-        id: dragHandle
-        width: outerMargin
-        height: outerMargin
-        x: initialWidth
-        anchors.top: noteEdit.bottom
-        clip: true
-        MouseArea {
-            anchors.fill: parent
-            drag.target: parent
-            drag.minimumX: col.minimumWidth
-            drag.axis: Drag.XAxis
-            cursorShape: Qt.SizeHorCursor
-        }
-        Rectangle {
-            color: titleBarColor
-            rotation: 45
-            width: parent.width * Math.SQRT2
-            height: parent.height * Math.SQRT2
-            x: parent.width - width / 2
-            y: parent.height - height / 2
-        }
-    }
-}
diff --git a/src/plugins/qmlprofiler/qml/FlameGraphText.qml b/src/plugins/qmlprofiler/qml/FlameGraphText.qml
deleted file mode 100644
index a989b393556..00000000000
--- a/src/plugins/qmlprofiler/qml/FlameGraphText.qml
+++ /dev/null
@@ -1,34 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2016 The Qt Company Ltd.
-** Contact: https://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 https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 3 as published by the Free Software
-** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
-** included in the packaging of this file. Please review the following
-** information to ensure the GNU General Public License requirements will
-** be met: https://www.gnu.org/licenses/gpl-3.0.html.
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Text {
-    font.pixelSize: 12
-    font.family: "sans-serif"
-    textFormat: Text.PlainText
-    renderType: Text.NativeRendering
-}
-
diff --git a/src/plugins/qmlprofiler/qml/FlameGraphView.qml b/src/plugins/qmlprofiler/qml/QmlProfilerFlameGraphView.qml
index b1df306eecc..e9e351b57c6 100644
--- a/src/plugins/qmlprofiler/qml/FlameGraphView.qml
+++ b/src/plugins/qmlprofiler/qml/QmlProfilerFlameGraphView.qml
@@ -26,7 +26,8 @@
 import QtQuick 2.0
 import QtQuick.Controls 1.3
 import FlameGraph 1.0
-import FlameGraphModel 1.0
+import QmlProfilerFlameGraphModel 1.0
+import "../flamegraph/"
 
 ScrollView {
     id: root
@@ -45,7 +46,6 @@ ScrollView {
 
         FlameGraph {
             property int itemHeight: Math.max(30, flickable.height / depth)
-            property int level: -1
             property color blue: "blue"
             property color blue1: Qt.lighter(blue)
             property color blue2: Qt.rgba(0.375, 0, 1, 1)
@@ -59,21 +59,42 @@ ScrollView {
             width: parent.width
             height: depth * itemHeight
             model: flameGraphModel
-            sizeRole: FlameGraphModel.DurationRole
+            sizeRole: QmlProfilerFlameGraphModel.DurationRole
             sizeThreshold: 0.002
             maximumDepth: 25
             y: flickable.height > height ? flickable.height - height : 0
 
-            delegate: Item {
+            delegate: FlameGraphDelegate {
                 id: flamegraphItem
 
-                property int typeId: FlameGraph.data(FlameGraphModel.TypeIdRole) || -1
+                property int typeId: FlameGraph.data(QmlProfilerFlameGraphModel.TypeIdRole) || -1
                 property bool isBindingLoop: parent.checkBindingLoop(typeId)
-                property int level: parent.level + (rangeTypeVisible ? 1 : 0)
-                property bool isSelected: typeId !== -1 && typeId === root.selectedTypeId
-                                          && rangeTypeVisible
                 property bool rangeTypeVisible:
-                    root.visibleRangeTypes & (1 << FlameGraph.data(FlameGraphModel.RangeTypeRole))
+                    root.visibleRangeTypes & (1 << FlameGraph.data(QmlProfilerFlameGraphModel.RangeTypeRole))
+
+                itemHeight: rangeTypeVisible ? flamegraph.itemHeight : 0
+                isSelected: typeId !== -1 && typeId === root.selectedTypeId && rangeTypeVisible
+
+                borderColor: {
+                    if (isSelected)
+                        return flamegraph.blue2;
+                    else if (tooltip.hoveredNode === flamegraphItem)
+                        return flamegraph.blue1;
+                    else if (note() !== "" || isBindingLoop)
+                        return flamegraph.orange;
+                    else
+                        return flamegraph.grey1;
+                }
+                borderWidth: {
+                    if (tooltip.hoveredNode === flamegraphItem ||
+                            tooltip.selectedNode === flamegraphItem) {
+                        return 2;
+                    } else if (note() !== "") {
+                        return 3;
+                    } else {
+                        return 1;
+                    }
+                }
 
                 onIsSelectedChanged: {
                     if (isSelected && (tooltip.selectedNode === null ||
@@ -93,10 +114,45 @@ ScrollView {
                     }
                 }
 
+                function buildText() {
+                    if (!FlameGraph.dataValid)
+                        return "<others>";
+
+                    return FlameGraph.data(QmlProfilerFlameGraphModel.DetailsRole) + " ("
+                            + FlameGraph.data(QmlProfilerFlameGraphModel.TypeRole) + ", "
+                            + FlameGraph.data(QmlProfilerFlameGraphModel.TimeInPercentRole) + "%)";
+                }
+                text: textVisible ? buildText() : ""
+                FlameGraph.onDataChanged: if (textVisible) text = buildText();
+
+                onMouseEntered: {
+                    tooltip.hoveredNode = flamegraphItem;
+                }
+
+                onMouseExited: {
+                    if (tooltip.hoveredNode === flamegraphItem)
+                        tooltip.hoveredNode = null;
+                }
+
+                onClicked: {
+                    if (flamegraphItem.FlameGraph.dataValid) {
+                        tooltip.selectedNode = flamegraphItem;
+                        root.typeSelected(flamegraphItem.FlameGraph.data(
+                                              QmlProfilerFlameGraphModel.TypeIdRole));
+                        root.gotoSourceLocation(
+                                    flamegraphItem.FlameGraph.data(
+                                        QmlProfilerFlameGraphModel.FilenameRole),
+                                    flamegraphItem.FlameGraph.data(
+                                        QmlProfilerFlameGraphModel.LineRole),
+                                    flamegraphItem.FlameGraph.data(
+                                        QmlProfilerFlameGraphModel.ColumnRole));
+                    }
+                }
+
                 // Functions, not properties to limit the initial overhead when creating the nodes,
                 // and because FlameGraph.data(...) cannot be notified anyway.
-                function title() { return FlameGraph.data(FlameGraphModel.TypeRole) || ""; }
-                function note() { return FlameGraph.data(FlameGraphModel.NoteRole) || ""; }
+                function title() { return FlameGraph.data(QmlProfilerFlameGraphModel.TypeRole) || ""; }
+                function note() { return FlameGraph.data(QmlProfilerFlameGraphModel.NoteRole) || ""; }
                 function details() {
                     var model = [];
                     function addDetail(name, index, format) {
@@ -130,106 +186,17 @@ ScrollView {
                         model.push(qsTr("Details"));
                         model.push(qsTr("Various Events"));
                     } else {
-                        addDetail(qsTr("Details"), FlameGraphModel.DetailsRole, noop);
-                        addDetail(qsTr("Type"), FlameGraphModel.TypeRole, noop);
-                        addDetail(qsTr("Calls"), FlameGraphModel.CallCountRole, noop);
-                        addDetail(qsTr("Total Time"), FlameGraphModel.DurationRole, printTime);
-                        addDetail(qsTr("Mean Time"), FlameGraphModel.TimePerCallRole, printTime);
-                        addDetail(qsTr("In Percent"), FlameGraphModel.TimeInPercentRole,
+                        addDetail(qsTr("Details"), QmlProfilerFlameGraphModel.DetailsRole, noop);
+                        addDetail(qsTr("Type"), QmlProfilerFlameGraphModel.TypeRole, noop);
+                        addDetail(qsTr("Calls"), QmlProfilerFlameGraphModel.CallCountRole, noop);
+                        addDetail(qsTr("Total Time"), QmlProfilerFlameGraphModel.DurationRole, printTime);
+                        addDetail(qsTr("Mean Time"), QmlProfilerFlameGraphModel.TimePerCallRole, printTime);
+                        addDetail(qsTr("In Percent"), QmlProfilerFlameGraphModel.TimeInPercentRole,
                                   addPercent);
-                        addDetail(qsTr("Location"), FlameGraphModel.LocationRole, noop);
+                        addDetail(qsTr("Location"), QmlProfilerFlameGraphModel.LocationRole, noop);
                     }
                     return model;
                 }
-
-                Rectangle {
-                    border.color: {
-                        if (flamegraphItem.isSelected)
-                            return flamegraph.blue2;
-                        else if (tooltip.hoveredNode === flamegraphItem)
-                            return flamegraph.blue1;
-                        else if (flamegraphItem.note() !== "" || flamegraphItem.isBindingLoop)
-                            return flamegraph.orange;
-                        else
-                            return flamegraph.grey1;
-                    }
-                    border.width: {
-                        if (tooltip.hoveredNode === flamegraphItem ||
-                                tooltip.selectedNode === flamegraphItem) {
-                            return 2;
-                        } else if (flamegraphItem.note() !== "") {
-                            return 3;
-                        } else {
-                            return 1;
-                        }
-                    }
-                    color: Qt.hsla((level % 12) / 72, 0.9 + Math.random() / 10,
-                                   0.45 + Math.random() / 10, 0.9 + Math.random() / 10);
-                    height: flamegraphItem.rangeTypeVisible ? flamegraph.itemHeight : 0;
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.bottom: parent.bottom
-
-                    FlameGraphText {
-                        id: text
-                        visible: width > 20 || flamegraphItem === tooltip.selectedNode
-                        anchors.fill: parent
-                        anchors.margins: 5
-                        verticalAlignment: Text.AlignVCenter
-                        horizontalAlignment: Text.AlignHCenter
-                        text: visible ? buildText() : ""
-                        elide: Text.ElideRight
-                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                        font.bold: flamegraphItem === tooltip.selectedNode
-
-                        function buildText() {
-                            if (!flamegraphItem.FlameGraph.dataValid)
-                                return "<others>";
-
-                            return flamegraphItem.FlameGraph.data(FlameGraphModel.DetailsRole)
-                                    + " ("
-                                    + flamegraphItem.FlameGraph.data(FlameGraphModel.TypeRole)
-                                    + ", "
-                                    + flamegraphItem.FlameGraph.data(
-                                        FlameGraphModel.TimeInPercentRole) + "%)";
-                        }
-                    }
-
-                    MouseArea {
-                        anchors.fill: parent
-                        hoverEnabled: true
-
-                        onEntered: {
-                            tooltip.hoveredNode = flamegraphItem;
-                        }
-
-                        onExited: {
-                            if (tooltip.hoveredNode === flamegraphItem)
-                                tooltip.hoveredNode = null;
-                        }
-
-                        onClicked: {
-                            if (flamegraphItem.FlameGraph.dataValid) {
-                                tooltip.selectedNode = flamegraphItem;
-                                root.typeSelected(flamegraphItem.FlameGraph.data(
-                                                      FlameGraphModel.TypeIdRole));
-                                root.gotoSourceLocation(
-                                            flamegraphItem.FlameGraph.data(
-                                                FlameGraphModel.FilenameRole),
-                                            flamegraphItem.FlameGraph.data(
-                                                FlameGraphModel.LineRole),
-                                            flamegraphItem.FlameGraph.data(
-                                                FlameGraphModel.ColumnRole));
-                            }
-                        }
-                    }
-                }
-
-                FlameGraph.onDataChanged: if (text.visible) text.text = text.buildText();
-
-                height: flamegraph.height - level * flamegraph.itemHeight;
-                width: parent === null ? flamegraph.width : parent.width * FlameGraph.relativeSize
-                x: parent === null ? 0 : parent.width * FlameGraph.relativePosition
             }
         }
 
diff --git a/src/plugins/qmlprofiler/qml/qmlprofiler.qrc b/src/plugins/qmlprofiler/qml/qmlprofiler.qrc
index e9d17c44bf1..daf9a34b48e 100644
--- a/src/plugins/qmlprofiler/qml/qmlprofiler.qrc
+++ b/src/plugins/qmlprofiler/qml/qmlprofiler.qrc
@@ -2,8 +2,6 @@
     <qresource prefix="/qmlprofiler">
         <file>bindingloops.vert</file>
         <file>bindingloops.frag</file>
-        <file>FlameGraphView.qml</file>
-        <file>FlameGraphText.qml</file>
-        <file>FlameGraphDetails.qml</file>
+        <file>QmlProfilerFlameGraphView.qml</file>
     </qresource>
 </RCC>