Timeline: Allow horizontal resizing of detail windows

The details table can become quite large, so we elide the text.
However, as we don't know what kind of information we're hiding and
the user might want to see it it's quite practical to allow resizing.

Also, make sure that the detail window (and the range window) is on
top of everything else so that it can set the cursor shape.

Task-number: QTCREATORBUG-14054
Change-Id: I12850124c327c57c148b69960687b7402bdead90
Reviewed-by: Joerg Bornemann <joerg.bornemann@theqtcompany.com>

src/libs/timeline/qml/Detail.qml

@@ -32,10 +32,12 @@ import QtQuick 2.1
 
 Text {
     property bool isLabel: false
+    property int labelWidth: 85
+    property int valueWidth: 170
     font.pixelSize: 12
     font.bold: isLabel
     textFormat: Text.PlainText
     renderType: Text.NativeRendering
     elide: Text.ElideRight
-    width: text === "" ? 0 : (isLabel ? 85 : 170)
+    width: text === "" ? 0 : (isLabel ? labelWidth : valueWidth)
 }

src/libs/timeline/qml/MainView.qml

@@ -325,7 +325,7 @@ Rectangle {
     }
 
     SelectionRangeDetails {
-        z: 1
+        z: 3
         x: 200
         y: 125
 
@@ -351,7 +351,7 @@ Rectangle {
     RangeDetails {
         id: rangeDetails
 
-        z: 1
+        z: 3
         visible: false
         x: 200
         y: 25

src/libs/timeline/qml/RangeDetails.qml

@@ -54,7 +54,7 @@ Item {
     signal clearSelection
 
     width: col.width + 25
-    height: col.height + 30
+    height: contentArea.height + titleBar.height
 
     function hide() {
         noteEdit.focus = false;
@@ -146,8 +146,8 @@ Item {
         y: px + 1
     }
 
-    // title bar
     Rectangle {
+        id: titleBar
         width: parent.width
         height: 20
         color: "#55a3b8"
@@ -186,6 +186,7 @@ Item {
 
     // Details area
     Rectangle {
+        id: contentArea
         color: "white"
         width: parent.width
         height: 10 + col.height + (noteEdit.visible ? (noteEdit.height + 5) : 0)
@@ -204,6 +205,7 @@ Item {
             Repeater {
                 model: eventInfo
                 Detail {
+                    valueWidth: dragHandle.x - x - 15
                     isLabel: index % 2 === 0
                     text: (content === undefined) ? "" : (isLabel ? (content + ":") : content)
                 }
@@ -298,4 +300,26 @@ Item {
         }
     }
 
+    Item {
+        id: dragHandle
+        width: 10
+        height: 10
+        x: 300
+        anchors.bottom: parent.bottom
+        clip: true
+        MouseArea {
+            anchors.fill: parent
+            drag.target: parent
+            drag.axis: Drag.XAxis
+            cursorShape: Qt.SizeHorCursor
+        }
+        Rectangle {
+            color: "#55a3b8"
+            rotation: 45
+            width: parent.width * Math.SQRT2
+            height: parent.height * Math.SQRT2
+            x: parent.width - width / 2
+            y: parent.height - height / 2
+        }
+    }
 }