Fix width calculations in flamegraph and timeline

Relying on the index of a detail entry in the children array is
dangerous as the repeater may create the children in any order. Rather,
use the isLabel property to find out if an item is a label.

Also, recognize that the drag handle sits in the outer margin.
Therefore, as the minimumWidth includes margins, we have to subtract one
margin in order to get the x value of the handle.

Task-number: QTCREATORBUG-20012
Change-Id: I828b116c2c52d5aa7f8e3e726f59e3fa9f9095ec
Reviewed-by: Christian Kandeler <christian.kandeler@qt.io>

3 files changed, 31 insertions, 17 deletions

diff --git a/src/libs/flamegraph/qml/FlameGraphDetails.qml b/src/libs/flamegraph/qml/FlameGraphDetails.qml
index 2f1110090a..99ff3989b6 100644
--- a/src/libs/flamegraph/qml/FlameGraphDetails.qml
+++ b/src/libs/flamegraph/qml/FlameGraphDetails.qml
@@ -155,14 +155,20 @@ Item {
         property int minimumWidth: {
             // max(width of longest label * 2, minimumInnerWidth)
             var result = minimumInnerWidth;
-            for (var i = 0; i < children.length; i += 2)
-                result = Math.max(children[i].implicitWidth * 2 + innerMargin, result);
+            for (var i = 0; i < children.length; ++i) {
+                if (children[i].isLabel)
+                    result = Math.max(children[i].implicitWidth * 2 + innerMargin, result);
+            }
+
             return result + 2 * outerMargin;
         }
 
+        property int labelWidth: (minimumWidth - innerMargin) / 2 - outerMargin
+        property int valueWidth: dragHandle.x - labelWidth - innerMargin - outerMargin
+
         onMinimumWidthChanged: {
-            if (dragHandle.x < minimumWidth)
-                dragHandle.x = minimumWidth;
+            if (dragHandle.x < minimumWidth - outerMargin)
+                dragHandle.x = minimumWidth - outerMargin;
         }
 
         Repeater {
@@ -171,8 +177,7 @@ Item {
                 property bool isLabel: index % 2 === 0
                 font.bold: isLabel
                 elide: Text.ElideRight
-                width: (text === "" || isLabel)
-                       ? implicitWidth : (dragHandle.x - col.minimumWidth / 2 - innerMargin)
+                width: isLabel ? col.labelWidth : col.valueWidth
                 text: isLabel ? (modelData + ":") : modelData
                 color: contentTextColor
             }
@@ -213,7 +218,7 @@ Item {
         MouseArea {
             anchors.fill: parent
             drag.target: parent
-            drag.minimumX: col.minimumWidth
+            drag.minimumX: col.minimumWidth - outerMargin
             drag.axis: Drag.XAxis
             cursorShape: Qt.SizeHorCursor
         }
diff --git a/src/libs/timeline/qml/Detail.qml b/src/libs/timeline/qml/Detail.qml
index 63668a78a6..e184bde324 100644
--- a/src/libs/timeline/qml/Detail.qml
+++ b/src/libs/timeline/qml/Detail.qml
@@ -28,7 +28,8 @@ import QtQuick 2.1
 TimelineText {
     property bool isLabel: false
     property int valueWidth: 170
+    property int labelWidth: implicitWidth
     font.bold: isLabel
     elide: Text.ElideRight
-    width: text === "" ? 0 : (isLabel ? implicitWidth : valueWidth)
+    width: text === "" ? 0 : (isLabel ? labelWidth : valueWidth)
 }
diff --git a/src/libs/timeline/qml/RangeDetails.qml b/src/libs/timeline/qml/RangeDetails.qml
index f47e9e4c04..803a0526f0 100644
--- a/src/libs/timeline/qml/RangeDetails.qml
+++ b/src/libs/timeline/qml/RangeDetails.qml
@@ -173,27 +173,35 @@ Item {
 
         //details
         Grid {
+            property int outerMargin: 10
+            property int minimumWidth: 150
+            property int labelWidth: (minimumWidth - spacing) / 2 - outerMargin
+            property int valueWidth: dragHandle.x - labelWidth - spacing - outerMargin
+
             id: col
-            x: 10
+            x: outerMargin
             y: 5
             spacing: 5
             columns: 2
-            property int minimumWidth: 150
 
             onChildrenChanged: {
                 // max(width of longest label * 2, 150)
                 var result = 150;
-                for (var i = 0; i < children.length; i += 2)
-                    result = Math.max(children[i].implicitWidth * 2 + spacing, result);
-                minimumWidth = result + 20;
-                if (dragHandle.x < minimumWidth)
-                    dragHandle.x = minimumWidth;
+                for (var i = 0; i < children.length; ++i) {
+                    if (children[i].isLabel)
+                        result = Math.max(children[i].implicitWidth * 2 + spacing, result);
+                }
+
+                minimumWidth = result + 2 * outerMargin;
+                if (dragHandle.x < minimumWidth - outerMargin)
+                    dragHandle.x = minimumWidth - outerMargin;
             }
 
             Repeater {
                 model: eventInfo.ready ? eventInfo : 0
                 Detail {
-                    valueWidth: (dragHandle.x - col.minimumWidth / 2 - col.spacing)
+                    labelWidth: col.labelWidth
+                    valueWidth: col.valueWidth
                     isLabel: index % 2 === 0
                     text: (content === undefined) ? "" : (isLabel ? (content + ":") : content)
                 }
@@ -285,7 +293,7 @@ Item {
         MouseArea {
             anchors.fill: parent
             drag.target: parent
-            drag.minimumX: col.minimumWidth
+            drag.minimumX: col.minimumWidth - col.outerMargin
             drag.axis: Drag.XAxis
             cursorShape: Qt.SizeHorCursor
         }