Timeline: Add some theming

While we're at it, also remove all the weird borders and use standard
icons. The timeline doesn't have a "baroque" theme, it's all flat for
now. If the need arises we can add some gradients here and there.

Change-Id: Ia9ce22d7f412c4999feca2284959be4d734267ac
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>

share/qtcreator/themes/dark.creatortheme

@@ -162,6 +162,16 @@ Welcome_DividerColor=ff555555
 Welcome_HoverColor=ff444444
 Welcome_LinkColor=ff5caa15
 
+Timeline_TextColor=text
+Timeline_BackgroundColor1=normalBackground
+Timeline_BackgroundColor2=ff444444
+Timeline_DividerColor=ff555555
+Timeline_HighlightColor=ff3099dc
+Timeline_PanelBackgroundColor=ff808080
+Timeline_PanelHeaderColor=alternateBackground
+Timeline_HandleColor=alternateBackground
+Timeline_RangeColor=selectedBackground
+
 VcsBase_FileStatusUnknown_TextColor=text
 VcsBase_FileAdded_TextColor=ff00ff00
 VcsBase_FileModified_TextColor=ff8ee0ff

share/qtcreator/themes/default.creatortheme

@@ -153,6 +153,16 @@ Welcome_DividerColor=ffd6d6d6
 Welcome_HoverColor=ffe8e8e8
 Welcome_LinkColor=ff5caa15
 
+Timeline_TextColor=darkText
+Timeline_BackgroundColor1=ffffffff
+Timeline_BackgroundColor2=fff6f6f6
+Timeline_DividerColor=ffd6d6d6
+Timeline_HighlightColor=ff71b2db
+Timeline_PanelBackgroundColor=ffd6d6d6
+Timeline_PanelHeaderColor=ff3d3d3d
+Timeline_HandleColor=ff3d3d3d
+Timeline_RangeColor=66000000
+
 VcsBase_FileStatusUnknown_TextColor=ff000000
 VcsBase_FileAdded_TextColor=ff00aa00
 VcsBase_FileModified_TextColor=ff0000ee

share/qtcreator/themes/flat-dark.creatortheme

@@ -167,6 +167,16 @@ Welcome_DividerColor=ff555555
 Welcome_HoverColor=ff444444
 Welcome_LinkColor=ff5caa15
 
+Timeline_TextColor=text
+Timeline_BackgroundColor1=normalBackground
+Timeline_BackgroundColor2=ff444444
+Timeline_DividerColor=ff555555
+Timeline_HighlightColor=ff3099dc
+Timeline_PanelBackgroundColor=ff808080
+Timeline_PanelHeaderColor=alternateBackground
+Timeline_HandleColor=alternateBackground
+Timeline_RangeColor=selectedBackground
+
 VcsBase_FileStatusUnknown_TextColor=text
 VcsBase_FileAdded_TextColor=ff00ff00
 VcsBase_FileModified_TextColor=ff8ee0ff

share/qtcreator/themes/flat-light.creatortheme

@@ -164,6 +164,16 @@ Welcome_DividerColor=ffd6d6d6
 Welcome_HoverColor=fff6f6f6
 Welcome_LinkColor=ff5caa15
 
+Timeline_TextColor=text
+Timeline_BackgroundColor1=normalBackground
+Timeline_BackgroundColor2=fff6f6f6
+Timeline_DividerColor=ffd6d6d6
+Timeline_HighlightColor=ff3099dc
+Timeline_PanelBackgroundColor=ffd6d6d6
+Timeline_PanelHeaderColor=ff888888
+Timeline_HandleColor=ff888888
+Timeline_RangeColor=selectedBackground
+
 VcsBase_FileStatusUnknown_TextColor=ff000000
 VcsBase_FileAdded_TextColor=ff00aa00
 VcsBase_FileModified_TextColor=ff0000ee

share/qtcreator/themes/flat.creatortheme

@@ -163,6 +163,16 @@ Welcome_DividerColor=ffd6d6d6
 Welcome_HoverColor=fff6f6f6
 Welcome_LinkColor=ff5caa15
 
+Timeline_TextColor=text
+Timeline_BackgroundColor1=normalBackground
+Timeline_BackgroundColor2=fff6f6f6
+Timeline_DividerColor=ffd6d6d6
+Timeline_HighlightColor=ff71b2db
+Timeline_PanelBackgroundColor=ffd6d6d6
+Timeline_PanelHeaderColor=alternateBackground
+Timeline_HandleColor=alternateBackground
+Timeline_RangeColor=selectedBackground
+
 VcsBase_FileStatusUnknown_TextColor=ff000000
 VcsBase_FileAdded_TextColor=ff00aa00
 VcsBase_FileModified_TextColor=ff0000ee

src/libs/timeline/qml/CategoryLabel.qml

@@ -81,11 +81,13 @@ Item {
 
     TimelineText {
         id: txt
-        x: 5
+        anchors.left: parent.left
+        anchors.leftMargin: 5
+        anchors.right: notesButton.visible ? notesButton.left : notesButton.right
+
         text: labelContainer.text
-        color: "#232323"
+        color: creatorTheme.PanelTextColorLight
         height: model ? model.defaultRowHeight : 0
-        width: 140
         verticalAlignment: Text.AlignVCenter
         elide: Text.ElideRight
     }
@@ -124,11 +126,10 @@ Item {
         }
     }
 
-    ToolButton {
+    ImageToolButton {
         id: notesButton
         anchors.verticalCenter: txt.verticalCenter
         anchors.right: expandButton.left
-        implicitWidth: 17
         implicitHeight: txt.height - 1
         property var eventIds: []
         property var texts: []
@@ -154,7 +155,7 @@ Item {
         }
 
         visible: eventIds.length > 0
-        iconSource: "ico_note.png"
+        imageSource: "image://icons/note"
         tooltip: texts.join("\n");
         onClicked: {
             if (++currentNote >= eventIds.length)
@@ -163,14 +164,13 @@ Item {
         }
     }
 
-    ToolButton {
+    ImageToolButton {
         id: expandButton
         anchors.verticalCenter: txt.verticalCenter
         anchors.right: parent.right
-        implicitWidth: 17
         implicitHeight: txt.height - 1
         enabled: expanded || (model && !model.empty)
-        iconSource: expanded ? "arrow_down.png" : "arrow_right.png"
+        imageSource: expanded ? "image://icons/close_split" : "image://icons/split"
         tooltip: expanded ? qsTr("Collapse category") : qsTr("Expand category")
         onClicked: model.expanded = !expanded
     }
@@ -180,7 +180,7 @@ Item {
         property int visualIndex: labelContainer.visualIndex
         width: labelContainer.width
         height: 0
-        color: "black"
+        color: creatorTheme.PanelStatusBarBackgroundColor
         opacity: 0.5
         anchors.left: parent.left
 
@@ -219,7 +219,7 @@ Item {
             id: draggerText
             visible: parent.Drag.active
             x: txt.x
-            color: "white"
+            color: creatorTheme.PanelTextColorLight
             width: txt.width
             height: txt.height
             verticalAlignment: txt.verticalAlignment

src/libs/timeline/qml/MainView.qml

@@ -49,7 +49,7 @@ Rectangle {
         content.scroll();
     }
 
-    color: "#dcdcdc"
+    color: creatorTheme.Timeline_BackgroundColor1
 
     // ***** connections with external objects
     Connections {
@@ -161,7 +161,7 @@ Rectangle {
         contentY: content.contentY
         selectedModel: root.selectedModel
         selectedItem: root.selectedItem
-        color: root.color
+        color: creatorTheme.PanelStatusBarBackgroundColor
         modelProxy: timelineModelAggregator
         zoomer: zoomControl
         reverseSelect: shiftPressed
@@ -368,18 +368,10 @@ Rectangle {
         }
     }
 
-    Rectangle {
-        anchors.left: buttonsBar.right
-        anchors.bottom: overview.top
-        anchors.top: parent.top
-        width: 1
-        color: "#B0B0B0"
-    }
-
     Rectangle {
         id: zoomSliderToolBar
         objectName: "zoomSliderToolBar"
-        color: "#9b9b9b"
+        color: creatorTheme.Timeline_PanelBackgroundColor
         enabled: buttonsBar.enabled
         visible: false
         width: buttonsBar.width

src/libs/timeline/qml/Overview.qml

@@ -29,7 +29,7 @@ import TimelineOverviewRenderer 1.0
 Rectangle {
     id: overview
     objectName: "Overview"
-    color: parent.color
+    color: creatorTheme.Timeline_BackgroundColor2
 
     property QtObject modelProxy
     property QtObject zoomer
@@ -78,13 +78,9 @@ Rectangle {
         anchors.left: parent.left
         anchors.right: parent.right
         textMargin: 2
-        bottomBorderHeight: 0
-        topBorderHeight: 1
         height: 10
         fontSize: 6
         labelsHeight: 10
-        color1: "#cccccc"
-        color2: "#cccccc"
         windowStart: zoomer.traceStart
         alignedWindowStart: zoomer.traceStart
         rangeDuration: zoomer.traceDuration
@@ -92,7 +88,6 @@ Rectangle {
         offsetX: 0
     }
 
-
     Column {
         anchors.top: timebar.bottom
         anchors.bottom: parent.bottom
@@ -121,7 +116,7 @@ Rectangle {
         }, {});
 
         property int vertSpace: column.height / 7
-        property color noteColor: "orange"
+        property color noteColor: creatorTheme.Timeline_HighlightColor
         readonly property double spacing: parent.width / zoomer.traceDuration
 
         model: modelProxy.notes ? modelProxy.notes.count : 0
@@ -187,10 +182,4 @@ Rectangle {
         onRangeLeftChanged: overview.updateZoomer()
         onRangeRightChanged: overview.updateZoomer()
     }
-
-    Rectangle {
-        height: 1
-        width: parent.width
-        color: "#858585"
-    }
 }

src/libs/timeline/qml/RangeDetails.qml

@@ -131,9 +131,7 @@ Item {
         id: titleBar
         width: parent.width
         height: 20
-        color: "#55a3b8"
+        color: creatorTheme.Timeline_PanelHeaderColor
-        border.width: 1
-        border.color: "#a0a0a0"
     }
     Item {
         width: parent.width+1
@@ -144,9 +142,7 @@ Item {
             width: parent.width-1
             height: 15
             y: -5
-            color: "#55a3b8"
+            color: creatorTheme.Timeline_PanelHeaderColor
-            border.width: 1
-            border.color: "#a0a0a0"
         }
     }
 
@@ -155,24 +151,21 @@ Item {
         id: typeTitle
         text: "  "+rangeDetails.dialogTitle
         font.bold: true
-        height: 18
+        height: 20
-        y: 2
         verticalAlignment: Text.AlignVCenter
         anchors.left: parent.left
         anchors.right: editIcon.left
-        color: "white"
         elide: Text.ElideRight
+        color: creatorTheme.PanelTextColorLight
     }
 
     // Details area
     Rectangle {
         id: contentArea
-        color: "white"
+        color: creatorTheme.Timeline_PanelBackgroundColor
         width: parent.width
         height: 10 + col.height + (noteEdit.visible ? (noteEdit.height + 5) : 0)
         y: 20
-        border.width: 1
-        border.color: "#a0a0a0"
 
         //details
         Grid {
@@ -214,7 +207,7 @@ Item {
             visible: notes && (text.length > 0 || focus)
             width: col.width
             wrapMode: Text.Wrap
-            color: "orange"
+            color: creatorTheme.Timeline_HighlightColor
             font.italic: true
             font.pixelSize: typeTitle.font.pixelSize
             font.family: typeTitle.font.family
@@ -250,46 +243,32 @@ Item {
         onClicked: rangeDetails.recenterOnItem()
     }
 
-    Image {
+    ImageToolButton {
         id: editIcon
-        source: "ico_edit.png"
+        imageSource: "image://icons/edit"
         anchors.top: closeIcon.top
         anchors.right: lockIcon.left
-        anchors.rightMargin: 4
+        implicitHeight: typeTitle.height
         visible: notes
-        width: 8
+        onClicked: noteEdit.focus = true
-        height: 12
-        MouseArea {
-            anchors.fill: parent
-            onClicked: noteEdit.focus = true
-        }
     }
 
-    Image {
+    ImageToolButton {
         id: lockIcon
-        source: locked?"lock_closed.png" : "lock_open.png"
+        imageSource: "image://icons/lock_" + (locked ? "closed" : "open")
         anchors.top: closeIcon.top
         anchors.right: closeIcon.left
-        anchors.rightMargin: 4
+        implicitHeight: typeTitle.height
-        width: 8
+        onClicked: rangeDetails.toggleSelectionLocked()
-        height: 12
-        MouseArea {
-            anchors.fill: parent
-            onClicked: rangeDetails.toggleSelectionLocked()
-        }
     }
 
-
+    ImageToolButton {
-    TimelineText {
         id: closeIcon
-        x: col.width + 10
+        anchors.right: parent.right
-        y: 4
+        anchors.top: parent.top
-        text:"X"
+        implicitHeight: typeTitle.height
-        color: "white"
+        imageSource: "image://icons/close_window"
-        MouseArea {
+        onClicked: rangeDetails.clearSelection()
-            anchors.fill: parent
-            onClicked: rangeDetails.clearSelection()
-        }
     }
 
     Item {
@@ -307,7 +286,7 @@ Item {
             cursorShape: Qt.SizeHorCursor
         }
         Rectangle {
-            color: "#55a3b8"
+            color: creatorTheme.Timeline_PanelHeaderColor
             rotation: 45
             width: parent.width * Math.SQRT2
             height: parent.height * Math.SQRT2

src/libs/timeline/qml/RangeMover.qml

@@ -30,12 +30,11 @@ Item {
     anchors.fill: parent
     signal rangeDoubleClicked()
 
-    property color handleColor: "#fe869cd1"
+    property color handleColor: creatorTheme.Timeline_HandleColor
-    property color rangeColor:"#444a64b8"
+    property color rangeColor: creatorTheme.Timeline_RangeColor
-    property color dragColor:"#664a64b8"
+    property color dragColor: creatorTheme.Timeline_RangeColor
-    property color borderColor:"#cc4a64b8"
+    property color borderColor: creatorTheme.Timeline_RangeColor
-    property color dragMarkerColor: "#fe4a64b8"
+    property color singleLineColor: creatorTheme.Timeline_RangeColor
-    property color singleLineColor: "#fe4a64b8"
 
     property alias rangeLeft: leftRange.x
     property alias rangeRight: rightRange.x
@@ -51,7 +50,7 @@ Item {
         color: width > 1 ? (dragArea.pressed ? dragColor : rangeColor) : singleLineColor
     }
 
-    Rectangle {
+    Item {
         id: leftRange
 
         onXChanged: {
@@ -61,8 +60,6 @@ Item {
 
         x: 0
         height: parent.height
-        width: 1
-        color: borderColor
 
         Rectangle {
             id: leftBorderHandle
@@ -72,12 +69,11 @@ Item {
             color: handleColor
             visible: false
             Image {
-                source: "range_handle.png"
+                source: "image://icons/range_handle"
-                x: 2
+                anchors.left: parent.left
-                width: 4
+                anchors.right: parent.right
-                height: 9
+                anchors.margins: 1
-                fillMode: Image.Tile
+                y: (parent.height - height) / 2
-                y: parent.height / 2 - 4
             }
         }
 
@@ -112,13 +108,11 @@ Item {
         }
     }
 
-    Rectangle {
+    Item {
         id: rightRange
 
         x: 1
         height: parent.height
-        width: 1
-        color: borderColor
 
         Rectangle {
             id: rightBorderHandle
@@ -128,12 +122,11 @@ Item {
             color: handleColor
             visible: false
             Image {
-                source: "range_handle.png"
+                source: "image://icons/range_handle"
-                x: 2
+                anchors.left: parent.left
-                width: 4
+                anchors.right: parent.right
-                height: 9
+                anchors.margins: 1
-                fillMode: Image.Tile
+                y: (parent.height - height) / 2
-                y: parent.height / 2 - 4
             }
         }
 

src/libs/timeline/qml/RowLabel.qml

@@ -45,14 +45,15 @@ Button {
     style: ButtonStyle {
         background: Rectangle {
             border.width: 1
-            border.color: "#c8c8c8"
+            border.color: creatorTheme.Timeline_DividerColor
-            color: "#eaeaea"
+            color: creatorTheme.PanelStatusBarBackgroundColor
         }
         label: TimelineText {
             text: button.labelText
             verticalAlignment: Text.AlignVCenter
             horizontalAlignment: Text.AlignLeft
             elide: Text.ElideRight
+            color: creatorTheme.PanelTextColorLight
         }
     }
     MouseArea {

src/libs/timeline/qml/SelectionRangeDetails.qml

@@ -76,23 +76,7 @@ Item {
     Rectangle {
         width: parent.width
         height: 20
-        color: "#4a64b8"
+        color: creatorTheme.Timeline_PanelHeaderColor
-        border.width: 1
-        border.color: "#a0a0a0"
-    }
-    Item {
-        width: parent.width+1
-        height: 11
-        y: 10
-        clip: true
-        Rectangle {
-            width: parent.width-1
-            height: 15
-            y: -5
-            color: "#4a64b8"
-            border.width: 1
-            border.color: "#a0a0a0"
-        }
     }
 
     //title
@@ -100,21 +84,18 @@ Item {
         id: typeTitle
         text: "  "+qsTr("Selection")
         font.bold: true
-        height: 18
+        height: 20
-        y: 2
         verticalAlignment: Text.AlignVCenter
         width: parent.width
-        color: "white"
+        color: creatorTheme.PanelTextColorLight
     }
 
     // Details area
     Rectangle {
-        color: "white"
+        color: creatorTheme.Timeline_PanelBackgroundColor
         width: parent.width
         height: col.height + 10
         y: 20
-        border.width: 1
-        border.color: "#a0a0a0"
         Grid {
             id: col
             x: 10
@@ -152,16 +133,12 @@ Item {
         onClicked: selectionRangeDetails.recenter()
     }
 
-    TimelineText {
+    ImageToolButton {
         id: closeIcon
-        x: selectionRangeDetails.width - 14
+        imageSource: "image://icons/close_window"
-        y: 4
+        anchors.right: selectionRangeDetails.right
-        text:"X"
+        anchors.top: selectionRangeDetails.top
-        color: "white"
+        implicitHeight: typeTitle.height
-        MouseArea {
+        onClicked: selectionRangeDetails.close()
-            anchors.fill: parent
-            anchors.leftMargin: -8
-            onClicked: selectionRangeDetails.close()
-        }
     }
 }

src/libs/timeline/qml/TimeDisplay.qml

@@ -31,13 +31,9 @@ Item {
     property double windowStart
     property double rangeDuration
 
-    property int topBorderHeight: 2
-    property int bottomBorderHeight: 1
     property int textMargin: 5
     property int labelsHeight: 24
     property int fontSize: 8
-    property color color1: "#E6E6E6"
-    property color color2: "white"
     property int initialBlockLength: 120
     property double spacing: width / rangeDuration
 
@@ -77,6 +73,14 @@ Item {
         return m + "m" + s + "s";
     }
 
+    Rectangle {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        height: timeDisplay.labelsHeight
+        color: creatorTheme.PanelStatusBarBackgroundColor
+    }
+
     Item {
         x: Math.floor(firstBlock * timeDisplay.pixelsPerBlock - timeDisplay.offsetX)
         y: 0
@@ -108,7 +112,7 @@ Item {
                 property double blockStartTime: block * timeDisplay.timePerBlock +
                                                 timeDisplay.alignedWindowStart
 
-                Rectangle {
+                TimelineText {
                     id: timeLabel
 
                     anchors.top: parent.top
@@ -116,19 +120,12 @@ Item {
                     anchors.right: parent.right
                     height: timeDisplay.labelsHeight
 
-                    color: (Math.round(column.block + timeDisplay.alignedWindowStart /
+                    font.pixelSize: timeDisplay.fontSize
-                                       timeDisplay.timePerBlock) % 2) ? color1 : color2;
+                    anchors.leftMargin: timeDisplay.textMargin
-
+                    verticalAlignment: Text.AlignVCenter
-                    TimelineText {
+                    text: prettyPrintTime(column.blockStartTime, timeDisplay.rangeDuration)
-                        id: labelText
+                    visible: width > 0
-                        font.pixelSize: timeDisplay.fontSize
+                    color: creatorTheme.PanelTextColorLight
-                        anchors.fill: parent
-                        anchors.leftMargin: timeDisplay.textMargin
-                        anchors.bottomMargin: timeDisplay.textMargin
-                        verticalAlignment: Text.AlignBottom
-                        text: prettyPrintTime(column.blockStartTime, timeDisplay.rangeDuration)
-                        visible: width > 0
-                    }
                 }
 
                 Row {
@@ -146,7 +143,7 @@ Item {
 
                             Rectangle {
                                 visible: column.stableIndex !== 0 || (-row.x < parent.x + x)
-                                color: "#CCCCCC"
+                                color: creatorTheme.Timeline_DividerColor
                                 width: 1
                                 anchors.top: parent.top
                                 anchors.bottom: parent.bottom
@@ -157,7 +154,7 @@ Item {
                 }
 
                 Rectangle {
-                    color: "#B0B0B0"
+                    color: creatorTheme.Timeline_DividerColor
                     width: 1
                     anchors.top: parent.top
                     anchors.bottom: parent.bottom
@@ -166,20 +163,4 @@ Item {
             }
         }
     }
-
-    Rectangle {
-        height: topBorderHeight
-        anchors.left: parent.left
-        anchors.right: parent.right
-        y: labelsHeight - topBorderHeight
-        color: "#B0B0B0"
-    }
-
-    Rectangle {
-        height: bottomBorderHeight
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: row.bottom
-        color: "#B0B0B0"
-    }
 }

src/libs/timeline/qml/TimeMarks.qml

@@ -73,7 +73,8 @@ Item {
             model: timeMarks.rowCount
             Rectangle {
                 id: row
-                color: ((index + (startOdd ? 1 : 0)) % 2) ? "#f0f0f0" : "white"
+                color: ((index + (startOdd ? 1 : 0)) % 2) ? creatorTheme.Timeline_BackgroundColor1
+                                                          : creatorTheme.Timeline_BackgroundColor2
                 anchors.left: rows.left
                 anchors.right: rows.right
                 height: timeMarks.model ? timeMarks.model.rowHeight(index) : 0
@@ -97,7 +98,6 @@ Item {
                 TimelineText {
                     id: scaleTopLabel
                     visible: parent.scaleVisible
-                    color: "#B0B0B0"
                     font.pixelSize: 8
                     anchors.top: parent.top
                     anchors.leftMargin: 2
@@ -115,9 +115,7 @@ Item {
                         height: row.stepVal * row.height / row.valDiff
                         y: row.height - (index + 1) * height
                         visible: y > scaleTopLabel.height
-                        Text {
+                        TimelineText {
-                            renderType: Text.NativeRendering
-                            color: "#B0B0B0"
                             font.pixelSize: 8
                             anchors.bottom: parent.bottom
                             anchors.bottomMargin: 2
@@ -131,7 +129,7 @@ Item {
                             anchors.left: parent.left
                             anchors.right: parent.right
                             anchors.bottom: parent.bottom
-                            color: "#B0B0B0"
+                            color: creatorTheme.Timeline_DividerColor
                         }
                     }
                 }

src/libs/timeline/qml/TimelineLabels.qml

@@ -144,7 +144,7 @@ Flickable {
 
                     Rectangle {
                         opacity: loader.y === 0 ? 0 : 1
-                        color: "#B0B0B0"
+                        color: creatorTheme.Timeline_DividerColor
                         height: 1
                         anchors.left: parent.left
                         anchors.right: parent.right
@@ -158,12 +158,4 @@ Flickable {
             model: labelsModel
         }
     }
-
-    Rectangle {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: categoryContent.bottom
-        height: 1
-        color: "#B0B0B0"
-    }
 }

src/libs/timeline/qml/TimelineText.qml

@@ -30,5 +30,6 @@ Text {
     font.family: "sans-serif"
     textFormat: Text.PlainText
     renderType: Text.NativeRendering
+    color: creatorTheme.Timeline_TextColor
 }
 

src/libs/timeline/qml/notes.frag

@@ -23,10 +23,10 @@
 **
 ****************************************************************************/
 
-lowp vec4 orange = vec4(1.0, 165.0 / 255.0, 0.0, 1.0);
+varying lowp vec4 color;
 varying lowp float d;
 
 void main()
 {
-    gl_FragColor = orange * float(d < (2.0 / 3.0) || d > (5.0 / 6.0));
+    gl_FragColor = color * float(d < (2.0 / 3.0) || d > (5.0 / 6.0));
 }

src/libs/timeline/qml/notes.vert

@@ -27,6 +27,9 @@ attribute vec4 vertexCoord;
 attribute float distanceFromTop;
 
 uniform mat4 matrix;
+uniform vec4 notesColor;
+
+varying vec4 color;
 varying float d;
 
 void main()
@@ -34,5 +37,6 @@ void main()
     gl_Position = matrix * vertexCoord;
     gl_Position.z -= 0.1;
     gl_Position.w = 1.0;
+    color = notesColor;
     d = distanceFromTop;
 }

src/libs/timeline/qml/timeline.qrc

@@ -13,8 +13,6 @@
         <file>Overview.qml</file>
         <file>SelectionRange.qml</file>
         <file>SelectionRangeDetails.qml</file>
-        <file>arrow_down.png</file>
-        <file>arrow_right.png</file>
         <file>range_handle.png</file>
         <file>ico_selectionmode.png</file>
         <file>ico_selectionmode@2x.png</file>
@@ -22,7 +20,6 @@
         <file>ico_rangeselection@2x.png</file>
         <file>ico_rangeselected.png</file>
         <file>ico_rangeselected@2x.png</file>
-        <file>ico_note.png</file>
         <file>ButtonsBar.qml</file>
         <file>timelineitems.vert</file>
         <file>timelineitems.frag</file>

src/libs/timeline/timeline_dependencies.pri

@@ -1,4 +1,3 @@
 QTC_LIB_NAME = Timeline
 
 QTC_LIB_DEPENDS = utils
-

src/libs/timeline/timelinenotesrenderpass.cpp

@@ -27,6 +27,8 @@
 #include "timelinerenderstate.h"
 #include "timelinenotesmodel.h"
 
+#include <utils/theme/theme.h>
+
 namespace Timeline {
 
 struct Point2DWithDistanceFromTop {
@@ -226,6 +228,7 @@ private:
 
     int m_matrix_id;
     int m_z_range_id;
+    int m_color_id;
 };
 
 NotesMaterialShader::NotesMaterialShader()
@@ -240,6 +243,9 @@ void NotesMaterialShader::updateState(const RenderState &state, QSGMaterial *, Q
     if (state.isMatrixDirty()) {
         program()->setUniformValue(m_matrix_id, state.combinedMatrix());
         program()->setUniformValue(m_z_range_id, GLfloat(1.0));
+        program()->setUniformValue(
+                    m_color_id,
+                    Utils::creatorTheme()->color(Utils::Theme::Timeline_HighlightColor));
     }
 }
 
@@ -253,6 +259,7 @@ void NotesMaterialShader::initialize()
 {
     m_matrix_id = program()->uniformLocation("matrix");
     m_z_range_id = program()->uniformLocation("_qt_zRange");
+    m_color_id = program()->uniformLocation("notesColor");
 }
 
 QSGMaterialType *NotesMaterial::type() const

src/libs/timeline/timelinetheme.cpp

@@ -25,6 +25,7 @@
 
 #include "timelinetheme.h"
 
+#include <coreplugin/coreicons.h>
 #include <utils/icon.h>
 #include <utils/qtcassert.h>
 #include <utils/utilsicons.h>
@@ -74,6 +75,26 @@ public:
         else if (iconName == QLatin1String("selectionmode"))
             icon = Utils::Icon({{QLatin1String(":/timeline/ico_selectionmode.png"),
                                  Utils::Theme::IconsBaseColor}});
+        else if (iconName == QLatin1String("edit"))
+            icon = Utils::Icon({{QLatin1String(":/timeline/ico_edit.png"),
+                                 Utils::Theme::IconsBaseColor}});
+        else if (iconName == QLatin1String("lock_open"))
+            icon = Utils::Icon({{QLatin1String(":/timeline/lock_open.png"),
+                                 Utils::Theme::IconsBaseColor}});
+        else if (iconName == QLatin1String("lock_closed"))
+            icon = Utils::Icon({{QLatin1String(":/timeline/lock_closed.png"),
+                                 Utils::Theme::IconsBaseColor}});
+        else if (iconName == QLatin1String("range_handle"))
+            icon = Utils::Icon({{QLatin1String(":/timeline/range_handle.png"),
+                                 Utils::Theme::IconsBaseColor}});
+        else if (iconName == QLatin1String("note"))
+            icon = Utils::Icons::INFO_TOOLBAR;
+        else if (iconName == QLatin1String("split"))
+            icon = Utils::Icons::SPLIT_HORIZONTAL_TOOLBAR;
+        else if (iconName == QLatin1String("close_split"))
+            icon = Utils::Icons::CLOSE_SPLIT_TOP;
+        else if (iconName == QLatin1String("close_window"))
+            icon = Utils::Icons::CLOSE_TOOLBAR;
 
         const QSize iconSize(16, 16);
         const QPixmap result = icon.icon().pixmap(iconSize, iconMode);

src/libs/utils/theme/theme.h

@@ -255,6 +255,17 @@ public:
         Welcome_LinkColor,
         Welcome_HoverColor,
 
+        /* Timeline Library */
+        Timeline_TextColor,
+        Timeline_BackgroundColor1,
+        Timeline_BackgroundColor2,
+        Timeline_DividerColor,
+        Timeline_HighlightColor,
+        Timeline_PanelBackgroundColor,
+        Timeline_PanelHeaderColor,
+        Timeline_HandleColor,
+        Timeline_RangeColor,
+
         /* VcsBase Plugin */
         VcsBase_FileStatusUnknown_TextColor,
         VcsBase_FileAdded_TextColor,