QmlProfiler: Improve layout of detail windows

By using the QML Grid element the windows' widths can be made dynamic,
preventing text overflow while still retaining the two-column-layout.

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

src/plugins/qmlprofiler/qml/Detail.qml

@@ -28,32 +28,9 @@
 ****************************************************************************/
 
 import QtQuick 2.1
-import Monitor 1.0
 
-Item {
-    id: detail
-    property string label
-    property string content
-
-    height: childrenRect.height+2
-    width: childrenRect.width
-    Item {
-        id: guideline
-        x: 70
-        width: 5
-    }
 Text {
-        y: 1
-        id: lbl
-        text: label
     font.pixelSize: 12
-        font.bold: true
-    }
-    Text {
-        text: content
-        font.pixelSize: 12
-        anchors.baseline: lbl.baseline
-        anchors.left: guideline.right
+    font.bold: index % 2 === 0
     textFormat: Text.PlainText
 }
-}

src/plugins/qmlprofiler/qml/RangeDetails.qml

@@ -43,7 +43,7 @@ Item {
 
     property bool locked: view.selectionLocked
 
-    width: col.width + 45
+    width: col.width + 25
     height: col.height + 30
     z: 1
     visible: false
@@ -68,7 +68,8 @@ Item {
         rangeDetails.dialogTitle = eventData[0]["title"];
         for (var i = 1; i < eventData.length; i++) {
             for (var k in eventData[i]) {
-                eventInfo.append({"key": k, "value":eventData[i][k]});
+                eventInfo.append({"content" : k});
+                eventInfo.append({"content" : eventData[i][k]})
             }
         }
         rangeDetails.visible = true;
@@ -163,16 +164,17 @@ Item {
         border.color: "#a0a0a0"
 
         //details
-        Column {
+        Grid {
             id: col
             x: 10
             y: 5
+            spacing: 5
+            columns: 2
 
             Repeater {
                 model: eventInfo
                 Detail {
-                    label: key
-                    content: value
+                    text: content
                 }
             }
         }
@@ -211,7 +213,7 @@ Item {
 
     Text {
         id: closeIcon
-        x: col.width + 30
+        x: col.width + 10
         y: 4
         text:"X"
         color: "white"

src/plugins/qmlprofiler/qml/SelectionRangeDetails.qml

@@ -38,7 +38,7 @@ Item {
     property string duration
     property bool showDuration
 
-    width: 170
+    width: Math.max(150, col.width + 25)
     height: col.height + 30
     z: 1
     visible: false
@@ -126,23 +126,25 @@ Item {
         y: 20
         border.width: 1
         border.color: "#a0a0a0"
-        Column {
+        Grid {
             id: col
             x: 10
             y: 5
+            spacing: 5
+            columns: 2
+
+            Repeater {
+                model: [
+                    qsTr("Start"),
+                    startTime,
+                    showDuration ? qsTr("End") : "",
+                    showDuration ? endTime : "",
+                    showDuration ? qsTr("Duration") : "",
+                    showDuration ? duration : ""
+                ]
                 Detail {
-                label: qsTr("Start")
-                content:  selectionRangeDetails.startTime
+                    text: modelData
                 }
-            Detail {
-                label: qsTr("End")
-                visible: selectionRangeDetails.showDuration
-                content:  selectionRangeDetails.endTime
-            }
-            Detail {
-                label: qsTr("Duration")
-                visible: selectionRangeDetails.showDuration
-                content: selectionRangeDetails.duration
             }
         }
     }