QmlProfiler: Reduce code duplication and add more anchoring

Anchors are supposed to reduce graphical glitches such as the gradient
borders getting detached from the edges of the timeline while resizing.
I'm not sure if it's actually better like this, but the code certainly
looks nicer.

Change-Id: I9eb6a6a50780ce642ad7cb551d2895a80b00690e
Reviewed-by: Kai Koehne <kai.koehne@digia.com>

src/plugins/qmlprofiler/qml/HorizontalGradientBorder.qml

@@ -0,0 +1,40 @@
+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** 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 Digia.  For licensing terms and
+** conditions see http://qt.digia.com/licensing.  For further information
+** use the contact form at http://qt.digia.com/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, 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, Digia gives you certain additional
+** rights.  These rights are described in the Digia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+****************************************************************************/
+
+import QtQuick 2.1
+
+Rectangle {
+    property color topColor
+    property color bottomColor
+    height: 6
+    gradient: Gradient {
+        GradientStop { position: 0.0; color: bottomColor; }
+        GradientStop { position: 1.0; color: topColor; }
+    }
+}

src/plugins/qmlprofiler/qml/MainView.qml

@@ -435,22 +435,12 @@ Rectangle {
         }
 
         // Gradient borders
-        Item {
+        VerticalGradientBorder {
             anchors.left: labels.right
             anchors.top: labels.top
             anchors.bottom: labelsTail.bottom
-            width: 6
+            leftColor: "#00000000"
-            Rectangle {
+            rightColor: "#86000000"
-                x: parent.width
-                transformOrigin: Item.TopLeft
-                rotation: 90
-                width: parent.height
-                height: parent.width
-                gradient: Gradient {
-                    GradientStop { position: 0.0; color: "#00000000"; }
-                    GradientStop { position: 1.0; color: "#86000000"; }
-                }
-            }
         }
     }
 
@@ -526,32 +516,19 @@ Rectangle {
         }
     }
 
-    Item {
+    VerticalGradientBorder {
         anchors.right: root.right
-        width: 6
         anchors.top: root.top
         anchors.bottom: root.bottom
-        Rectangle {
+        rightColor: "#00000000"
-            x: parent.width
+        leftColor: "#86000000"
-            transformOrigin: Item.TopLeft
-            rotation: 90
-            width: parent.height
-            height: parent.width
-            gradient: Gradient {
-                GradientStop { position: 0.0; color: "#86000000"; }
-                GradientStop { position: 1.0; color: "#00000000"; }
-            }
-        }
     }
 
-    Rectangle {
+    HorizontalGradientBorder {
-        y: root.height - height
+        anchors.bottom: root.bottom
-        height: 6
+        anchors.left: root.left
-        width: root.width
+        anchors.right: root.right
-        x: 0
+        bottomColor: "#00000000"
-        gradient: Gradient {
+        topColor: "#86000000"
-            GradientStop { position: 0.0; color: "#00000000"; }
-            GradientStop { position: 1.0; color: "#86000000"; }
-        }
     }
 }

src/plugins/qmlprofiler/qml/VerticalGradientBorder.qml

@@ -0,0 +1,45 @@
+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** 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 Digia.  For licensing terms and
+** conditions see http://qt.digia.com/licensing.  For further information
+** use the contact form at http://qt.digia.com/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, 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, Digia gives you certain additional
+** rights.  These rights are described in the Digia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+****************************************************************************/
+
+import QtQuick 2.1
+
+Item {
+    property color leftColor
+    property color rightColor
+    width: 6
+    HorizontalGradientBorder {
+        anchors.left: parent.right
+        anchors.top: parent.top
+        transformOrigin: Item.TopLeft
+        rotation: 90
+        width: parent.height
+        topColor: rightColor
+        bottomColor: leftColor
+    }
+}

src/plugins/qmlprofiler/qml/qmlprofiler.qrc

@@ -16,6 +16,8 @@
         <file>Overview.js</file>
         <file>SelectionRange.qml</file>
         <file>SelectionRangeDetails.qml</file>
+        <file>HorizontalGradientBorder.qml</file>
+        <file>VerticalGradientBorder.qml</file>
         <file>arrow_down.png</file>
         <file>arrow_right.png</file>
         <file>dialog_shadow.png</file>

src/plugins/qmlprofiler/qmlprofiler.pro

@@ -78,4 +78,6 @@ OTHER_FILES += \
     qml/TimeMarks.qml \
     qml/SelectionRange.qml \
     qml/SelectionRangeDetails.qml \
-    qml/Overview.qml
+    qml/Overview.qml \
+    qml/VerticalGradientBorder.qml \
+    qml/HorizontalGradientBorder.qml

src/plugins/qmlprofiler/qmlprofiler.qbs

@@ -71,6 +71,8 @@ QtcPlugin {
             "SelectionRangeDetails.qml",
             "TimeDisplay.qml",
             "TimeMarks.qml",
+            "HorizontalGradientBorder.qml",
+            "VerticalGradientBorder.qml",
             "qmlprofiler.qrc",
         ]
     }