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>

13 files changed, 815 insertions, 1 deletions

diff --git a/src/libs/flamegraph/flamegraph.cpp b/src/libs/flamegraph/flamegraph.cpp
new file mode 100644
index 0000000000..79627c2dc5
--- /dev/null
+++ b/src/libs/flamegraph/flamegraph.cpp
@@ -0,0 +1,182 @@
+/****************************************************************************
+**
+** 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.
+**
+****************************************************************************/
+
+#include "flamegraph.h"
+
+namespace FlameGraph {
+
+FlameGraph::FlameGraph(QQuickItem *parent) :
+    QQuickItem(parent)
+{
+}
+
+QQmlComponent *FlameGraph::delegate() const
+{
+    return m_delegate;
+}
+
+void FlameGraph::setDelegate(QQmlComponent *delegate)
+{
+    if (delegate != m_delegate) {
+        m_delegate = delegate;
+        emit delegateChanged(delegate);
+    }
+}
+
+QAbstractItemModel *FlameGraph::model() const
+{
+    return m_model;
+}
+
+void FlameGraph::setModel(QAbstractItemModel *model)
+{
+    if (model != m_model) {
+        if (m_model)
+            disconnect(m_model, &QAbstractItemModel::modelReset, this, &FlameGraph::rebuild);
+
+        m_model = model;
+        if (m_model)
+            connect(m_model, &QAbstractItemModel::modelReset, this, &FlameGraph::rebuild);
+        emit modelChanged(model);
+        rebuild();
+    }
+}
+
+int FlameGraph::sizeRole() const
+{
+    return m_sizeRole;
+}
+
+void FlameGraph::setSizeRole(int sizeRole)
+{
+    if (sizeRole != m_sizeRole) {
+        m_sizeRole = sizeRole;
+        emit sizeRoleChanged(sizeRole);
+        rebuild();
+    }
+}
+
+qreal FlameGraph::sizeThreshold() const
+{
+    return m_sizeThreshold;
+}
+
+void FlameGraph::setSizeThreshold(qreal sizeThreshold)
+{
+    if (sizeThreshold != m_sizeThreshold) {
+        m_sizeThreshold = sizeThreshold;
+        emit sizeThresholdChanged(sizeThreshold);
+        rebuild();
+    }
+}
+
+int FlameGraph::depth() const
+{
+    return m_depth;
+}
+
+FlameGraphAttached *FlameGraph::qmlAttachedProperties(QObject *object)
+{
+    FlameGraphAttached *attached =
+            object->findChild<FlameGraphAttached *>(QString(), Qt::FindDirectChildrenOnly);
+    if (!attached)
+        attached = new FlameGraphAttached(object);
+    return attached;
+}
+
+QObject *FlameGraph::appendChild(QObject *parentObject, QQuickItem *parentItem,
+                                 QQmlContext *context, const QModelIndex &childIndex,
+                                 qreal position, qreal size)
+{
+    QObject *childObject = m_delegate->beginCreate(context);
+    if (parentItem) {
+        QQuickItem *childItem = qobject_cast<QQuickItem *>(childObject);
+        if (childItem)
+            childItem->setParentItem(parentItem);
+    }
+    childObject->setParent(parentObject);
+    FlameGraphAttached *attached = FlameGraph::qmlAttachedProperties(childObject);
+    attached->setRelativePosition(position);
+    attached->setRelativeSize(size);
+    attached->setModelIndex(childIndex);
+    m_delegate->completeCreate();
+    return childObject;
+}
+
+
+int FlameGraph::buildNode(const QModelIndex &parentIndex, QObject *parentObject, int depth,
+                          int maximumDepth)
+{
+    qreal position = 0;
+    qreal skipped = 0;
+    qreal parentSize = m_model->data(parentIndex, m_sizeRole).toReal();
+    QQuickItem *parentItem = qobject_cast<QQuickItem *>(parentObject);
+    QQmlContext *context = qmlContext(this);
+    int rowCount = m_model->rowCount(parentIndex);
+    int childrenDepth = depth;
+    if (depth == maximumDepth - 1) {
+        skipped = parentSize;
+    } else {
+        for (int row = 0; row < rowCount; ++row) {
+            QModelIndex childIndex = m_model->index(row, 0, parentIndex);
+            qreal size = m_model->data(childIndex, m_sizeRole).toReal();
+            if (size / m_model->data(QModelIndex(), m_sizeRole).toReal() < m_sizeThreshold) {
+                skipped += size;
+                continue;
+            }
+
+            QObject *childObject = appendChild(parentObject, parentItem, context, childIndex,
+                                               position / parentSize, size / parentSize);
+            position += size;
+            childrenDepth = qMax(childrenDepth, buildNode(childIndex, childObject, depth + 1,
+                                                          maximumDepth));
+        }
+    }
+
+    if (skipped > 0) {
+        appendChild(parentObject, parentItem, context, QModelIndex(), position / parentSize,
+                    skipped / parentSize);
+        childrenDepth = qMax(childrenDepth, depth + 1);
+    }
+
+    return childrenDepth;
+}
+
+void FlameGraph::rebuild()
+{
+    qDeleteAll(childItems());
+    childItems().clear();
+    m_depth = 0;
+
+    if (!m_model) {
+        emit depthChanged(m_depth);
+        return;
+    }
+
+    m_depth = buildNode(QModelIndex(), this, 0, m_maximumDepth);
+    emit depthChanged(m_depth);
+}
+
+} // namespace FlameGraph
diff --git a/src/libs/flamegraph/flamegraph.h b/src/libs/flamegraph/flamegraph.h
new file mode 100644
index 0000000000..5fe7f88ca0
--- /dev/null
+++ b/src/libs/flamegraph/flamegraph.h
@@ -0,0 +1,107 @@
+/****************************************************************************
+**
+** 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.
+**
+****************************************************************************/
+
+#pragma once
+
+#include "flamegraph_global.h"
+#include "flamegraphattached.h"
+
+#include <QQuickItem>
+#include <QAbstractItemModel>
+
+namespace FlameGraph {
+
+class FLAMEGRAPH_EXPORT FlameGraph : public QQuickItem
+{
+    Q_OBJECT
+    Q_PROPERTY(QQmlComponent* delegate READ delegate WRITE setDelegate NOTIFY delegateChanged)
+    Q_PROPERTY(QAbstractItemModel* model READ model WRITE setModel NOTIFY modelChanged)
+    Q_PROPERTY(int sizeRole READ sizeRole WRITE setSizeRole NOTIFY sizeRoleChanged)
+    Q_PROPERTY(qreal sizeThreshold READ sizeThreshold WRITE setSizeThreshold
+               NOTIFY sizeThresholdChanged)
+    Q_PROPERTY(int maximumDepth READ maximumDepth WRITE setMaximumDepth
+               NOTIFY maximumDepthChanged)
+    Q_PROPERTY(int depth READ depth NOTIFY depthChanged)
+
+public:
+    FlameGraph(QQuickItem *parent = 0);
+
+    QQmlComponent *delegate() const;
+    void setDelegate(QQmlComponent *delegate);
+
+    QAbstractItemModel *model() const;
+    void setModel(QAbstractItemModel *model);
+
+    int sizeRole() const;
+    void setSizeRole(int sizeRole);
+
+    qreal sizeThreshold() const;
+    void setSizeThreshold(qreal sizeThreshold);
+
+    int depth() const;
+
+    int maximumDepth() const
+    {
+        return m_maximumDepth;
+    }
+
+    void setMaximumDepth(int maximumDepth)
+    {
+        if (maximumDepth != m_maximumDepth) {
+            m_maximumDepth = maximumDepth;
+            emit maximumDepthChanged();
+        }
+    }
+
+    static FlameGraphAttached *qmlAttachedProperties(QObject *object);
+
+signals:
+    void delegateChanged(QQmlComponent *delegate);
+    void modelChanged(QAbstractItemModel *model);
+    void sizeRoleChanged(int role);
+    void sizeThresholdChanged(qreal threshold);
+    void depthChanged(int depth);
+    void maximumDepthChanged();
+
+private slots:
+    void rebuild();
+
+private:
+    QQmlComponent *m_delegate = nullptr;
+    QAbstractItemModel *m_model = nullptr;
+    int m_sizeRole = 0;
+    int m_depth = 0;
+    qreal m_sizeThreshold = 0;
+    int m_maximumDepth = std::numeric_limits<int>::max();
+
+    int buildNode(const QModelIndex &parentIndex, QObject *parentObject, int depth,
+                  int maximumDepth);
+    QObject *appendChild(QObject *parentObject, QQuickItem *parentItem, QQmlContext *context,
+                         const QModelIndex &childIndex, qreal position, qreal size);
+};
+
+} // namespace FlameGraph
+
+QML_DECLARE_TYPEINFO(FlameGraph::FlameGraph, QML_HAS_ATTACHED_PROPERTIES)
diff --git a/src/libs/flamegraph/flamegraph.pro b/src/libs/flamegraph/flamegraph.pro
new file mode 100644
index 0000000000..f9fb063e80
--- /dev/null
+++ b/src/libs/flamegraph/flamegraph.pro
@@ -0,0 +1,16 @@
+QT += qml quick
+DEFINES += FLAMEGRAPH_LIBRARY
+
+include(../../qtcreatorlibrary.pri)
+
+SOURCES += \
+    $$PWD/flamegraph.cpp
+
+HEADERS += \
+    $$PWD/flamegraph.h \
+    $$PWD/flamegraph_global.h \
+    $$PWD/flamegraphattached.h
+
+RESOURCES += \
+    $$PWD/qml/flamegraph.qrc
+
diff --git a/src/libs/flamegraph/flamegraph.qbs b/src/libs/flamegraph/flamegraph.qbs
new file mode 100644
index 0000000000..2a44780532
--- /dev/null
+++ b/src/libs/flamegraph/flamegraph.qbs
@@ -0,0 +1,30 @@
+import qbs 1.0
+
+import QtcLibrary
+
+Project {
+    name: "FlameGraph"
+
+    QtcDevHeaders { }
+
+    QtcLibrary {
+        Depends { name: "Qt"; submodules: ["qml", "quick", "gui"] }
+
+        Group {
+            name: "General"
+            files: [
+                "flamegraph.cpp", "flamegraph.h",
+                "flamegraph_global.h",
+                "flamegraphattached.h",
+            ]
+        }
+
+        Group {
+            name: "QML"
+            prefix: "qml/"
+            files: ["flamegraph.qrc"]
+        }
+
+        cpp.defines: base.concat("FLAMEGRAPH_LIBRARY")
+    }
+}
diff --git a/src/libs/flamegraph/flamegraph_dependencies.pri b/src/libs/flamegraph/flamegraph_dependencies.pri
new file mode 100644
index 0000000000..6705c38c3d
--- /dev/null
+++ b/src/libs/flamegraph/flamegraph_dependencies.pri
@@ -0,0 +1,2 @@
+QTC_LIB_NAME = FlameGraph
+
diff --git a/src/libs/flamegraph/flamegraph_global.h b/src/libs/flamegraph/flamegraph_global.h
new file mode 100644
index 0000000000..663c6abe7f
--- /dev/null
+++ b/src/libs/flamegraph/flamegraph_global.h
@@ -0,0 +1,34 @@
+/****************************************************************************
+**
+** 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.
+**
+****************************************************************************/
+
+#pragma once
+
+#include <QtGlobal>
+
+#if defined(FLAMEGRAPH_LIBRARY)
+#  define FLAMEGRAPH_EXPORT Q_DECL_EXPORT
+#else
+#  define FLAMEGRAPH_EXPORT Q_DECL_IMPORT
+#endif
diff --git a/src/libs/flamegraph/flamegraphattached.h b/src/libs/flamegraph/flamegraphattached.h
new file mode 100644
index 0000000000..00d5302b0b
--- /dev/null
+++ b/src/libs/flamegraph/flamegraphattached.h
@@ -0,0 +1,107 @@
+/****************************************************************************
+**
+** 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.
+**
+****************************************************************************/
+
+#pragma once
+
+#include "flamegraph_global.h"
+#include <QObject>
+#include <QModelIndex>
+#include <QVariant>
+
+namespace FlameGraph {
+
+class FLAMEGRAPH_EXPORT FlameGraphAttached : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(qreal relativeSize READ relativeSize WRITE setRelativeSize
+               NOTIFY relativeSizeChanged)
+    Q_PROPERTY(qreal relativePosition READ relativePosition WRITE setRelativePosition
+               NOTIFY relativePositionChanged)
+    Q_PROPERTY(bool dataValid READ isDataValid NOTIFY dataValidChanged)
+
+public:
+    FlameGraphAttached(QObject *parent = 0) :
+        QObject(parent), m_relativeSize(0), m_relativePosition(0) {}
+
+    Q_INVOKABLE QVariant data(int role) const
+    {
+        return m_data.isValid() ? m_data.data(role) : QVariant();
+    }
+
+    bool isDataValid() const
+    {
+        return m_data.isValid();
+    }
+
+    qreal relativeSize() const
+    {
+        return m_relativeSize;
+    }
+
+    void setRelativeSize(qreal relativeSize)
+    {
+        if (relativeSize != m_relativeSize) {
+            m_relativeSize = relativeSize;
+            emit relativeSizeChanged();
+        }
+    }
+
+    qreal relativePosition() const
+    {
+        return m_relativePosition;
+    }
+
+    void setRelativePosition(qreal relativePosition)
+    {
+        if (relativePosition != m_relativePosition) {
+            m_relativePosition = relativePosition;
+            emit relativePositionChanged();
+        }
+    }
+
+    void setModelIndex(const QModelIndex &data)
+    {
+        if (data != m_data) {
+            bool validChanged = (data.isValid() != m_data.isValid());
+            m_data = data;
+            if (validChanged)
+                emit dataValidChanged();
+            emit dataChanged();
+        }
+    }
+
+signals:
+    void dataChanged();
+    void dataValidChanged();
+    void relativeSizeChanged();
+    void relativePositionChanged();
+
+private:
+    QPersistentModelIndex m_data;
+    qreal m_relativeSize;
+    qreal m_relativePosition;
+};
+
+} // namespace FlameGraph
diff --git a/src/libs/flamegraph/qml/FlameGraphDelegate.qml b/src/libs/flamegraph/qml/FlameGraphDelegate.qml
new file mode 100644
index 0000000000..2cf115009d
--- /dev/null
+++ b/src/libs/flamegraph/qml/FlameGraphDelegate.qml
@@ -0,0 +1,82 @@
+/****************************************************************************
+**
+** 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
+import FlameGraph 1.0
+
+Item {
+    id: flamegraphItem
+    property color borderColor
+    property real borderWidth
+    property real itemHeight
+    property bool isSelected
+    property string text;
+
+    signal mouseEntered
+    signal mouseExited
+    signal clicked
+
+    property bool textVisible: width > 20 || isSelected
+    property int level: (parent.level !== undefined ? parent.level + 1 : -1)
+                        + (itemHeight > 0 ? 1 : 0)
+
+    height: parent === null ? 0 : parent.height - (level > 0 ? itemHeight : 0);
+    width: parent === null ? 0 : parent.width * FlameGraph.relativeSize
+    x: parent === null ? 0 : parent.width * FlameGraph.relativePosition
+
+    Rectangle {
+        border.color: borderColor
+        border.width: borderWidth
+        color: Qt.hsla((level % 12) / 72, 0.9 + Math.random() / 10,
+                       0.45 + Math.random() / 10, 0.9 + Math.random() / 10);
+        height: itemHeight;
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+
+        FlameGraphText {
+            id: text
+            visible: textVisible
+            anchors.fill: parent
+            anchors.margins: 5
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignHCenter
+            text: flamegraphItem.text
+            elide: Text.ElideRight
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+            font.bold: isSelected
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            hoverEnabled: true
+
+            onEntered: flamegraphItem.mouseEntered()
+            onExited: flamegraphItem.mouseExited()
+            onClicked: flamegraphItem.clicked()
+
+        }
+    }
+}
diff --git a/src/libs/flamegraph/qml/FlameGraphDetails.qml b/src/libs/flamegraph/qml/FlameGraphDetails.qml
new file mode 100644
index 0000000000..2875d114af
--- /dev/null
+++ b/src/libs/flamegraph/qml/FlameGraphDetails.qml
@@ -0,0 +1,211 @@
+/****************************************************************************
+**
+** 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/libs/flamegraph/qml/FlameGraphText.qml b/src/libs/flamegraph/qml/FlameGraphText.qml
new file mode 100644
index 0000000000..a989b39355
--- /dev/null
+++ b/src/libs/flamegraph/qml/FlameGraphText.qml
@@ -0,0 +1,34 @@
+/****************************************************************************
+**
+** 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/libs/flamegraph/qml/flamegraph.qrc b/src/libs/flamegraph/qml/flamegraph.qrc
new file mode 100644
index 0000000000..cb5c19a9eb
--- /dev/null
+++ b/src/libs/flamegraph/qml/flamegraph.qrc
@@ -0,0 +1,7 @@
+<RCC>
+    <qresource prefix="/flamegraph">
+        <file>FlameGraphText.qml</file>
+        <file>FlameGraphDetails.qml</file>
+        <file>FlameGraphDelegate.qml</file>
+    </qresource>
+</RCC>
diff --git a/src/libs/libs.pro b/src/libs/libs.pro
index ce90722356..7d8ed299cb 100644
--- a/src/libs/libs.pro
+++ b/src/libs/libs.pro
@@ -16,7 +16,8 @@ SUBDIRS   = \
     ssh \
     timeline \
     sqlite \
-    clangbackendipc
+    clangbackendipc \
+    flamegraph
 
 for(l, SUBDIRS) {
     QTC_LIB_DEPENDS =
diff --git a/src/libs/libs.qbs b/src/libs/libs.qbs
index 1a49be9674..29eb744c1a 100644
--- a/src/libs/libs.qbs
+++ b/src/libs/libs.qbs
@@ -7,6 +7,7 @@ Project {
         "clangbackendipc/clangbackendipc.qbs",
         "cplusplus/cplusplus.qbs",
         "extensionsystem/extensionsystem.qbs",
+        "flamegraph/flamegraph.qbs",
         "glsl/glsl.qbs",
         "languageutils/languageutils.qbs",
         "modelinglib/modelinglib.qbs",