Themed Profiler timeline: Tool bar

This change implements theming of the toolbars and adds new, High-DPI
capable toolbar icons.

Task-number: QTCREATORBUG-16466
Change-Id: Ibcc774962c740995d8b15fa6c74345d3a48694de
Reviewed-by: Ulf Hermann <ulf.hermann@qt.io>

src/libs/timeline/qml/ButtonsBar.qml

@@ -30,7 +30,6 @@ import QtQuick.Controls.Styles 1.2
 
 ToolBar {
     id: buttons
-    readonly property int buttonWidth: 30
 
     signal jumpToPrev()
     signal jumpToNext()
@@ -63,7 +62,7 @@ ToolBar {
         }
         background: Rectangle {
             anchors.fill: parent
-            color: "#9B9B9B"
+            color: creatorTheme.PanelStatusBarBackgroundColor
         }
     }
 
@@ -71,62 +70,56 @@ ToolBar {
         spacing: 0
         anchors.fill: parent
 
-        ToolButton {
+        ImageToolButton {
             id: jumpToPrevButton
             anchors.top: parent.top
             anchors.bottom: parent.bottom
-            implicitWidth: buttonWidth
 
-            iconSource: "qrc:/timeline/ico_prev.png"
+            imageSource: "image://icons/prev"
             tooltip: qsTr("Jump to previous event.")
             onClicked: buttons.jumpToPrev()
         }
 
-        ToolButton {
+        ImageToolButton {
             id: jumpToNextButton
             anchors.top: parent.top
             anchors.bottom: parent.bottom
-            implicitWidth: buttonWidth
 
-            iconSource: "qrc:/timeline/ico_next.png"
+            imageSource: "image://icons/next"
             tooltip: qsTr("Jump to next event.")
             onClicked: buttons.jumpToNext()
         }
 
-        ToolButton {
+        ImageToolButton {
             id: zoomControlButton
             anchors.top: parent.top
             anchors.bottom: parent.bottom
-            implicitWidth: buttonWidth
 
-            iconSource: "qrc:/timeline/ico_zoom.png"
+            imageSource: "image://icons/zoom"
             tooltip: qsTr("Show zoom slider.")
             checkable: true
             checked: false
             onCheckedChanged: buttons.zoomControlChanged()
         }
 
-        ToolButton {
+        ImageToolButton {
             id: rangeButton
             anchors.top: parent.top
             anchors.bottom: parent.bottom
-            implicitWidth: buttonWidth
 
-            iconSource: checked ? "qrc:/timeline/ico_rangeselected.png" :
+            imageSource: "image://icons/" + (checked ? "rangeselected" : "rangeselection");
-                                  "qrc:/timeline/ico_rangeselection.png"
             tooltip: qsTr("Select range.")
             checkable: true
             checked: false
             onCheckedChanged: buttons.rangeSelectChanged()
         }
 
-        ToolButton {
+        ImageToolButton {
             id: lockButton
             anchors.top: parent.top
             anchors.bottom: parent.bottom
-            implicitWidth: buttonWidth
 
-            iconSource: "qrc:/timeline/ico_selectionmode.png"
+            imageSource: "image://icons/selectionmode"
             tooltip: qsTr("View event information on mouseover.")
             checkable: true
             checked: false

src/libs/timeline/qml/ImageToolButton.qml

@@ -0,0 +1,51 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** 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 The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.1
+import QtQuick.Controls 1.0
+import QtQuick.Controls.Styles 1.2
+
+ToolButton {
+    implicitWidth: 30
+
+    property string imageSource
+
+    Image {
+        source: parent.enabled ? parent.imageSource : parent.imageSource + "/disabled"
+        width: 16
+        height: 16
+        anchors.centerIn: parent
+    }
+
+    style: ButtonStyle {
+        background: Rectangle {
+            color: (control.checked || control.pressed)
+                   ? creatorTheme.FancyToolButtonSelectedColor
+                   : control.hovered
+                     ? creatorTheme.FancyToolButtonHoverColor
+                     : "#00000000"
+        }
+    }
+}

src/libs/timeline/qml/timeline.qrc

@@ -17,11 +17,11 @@
         <file>arrow_right.png</file>
         <file>range_handle.png</file>
         <file>ico_selectionmode.png</file>
-        <file>ico_zoom.png</file>
+        <file>ico_selectionmode@2x.png</file>
-        <file>ico_prev.png</file>
-        <file>ico_next.png</file>
         <file>ico_rangeselection.png</file>
+        <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>
@@ -33,5 +33,6 @@
         <file>RowLabel.qml</file>
         <file>SynchronousReloader.qml</file>
         <file>TimelineText.qml</file>
+        <file>ImageToolButton.qml</file>
     </qresource>
 </RCC>

src/libs/timeline/timeline.pro

@@ -15,7 +15,8 @@ SOURCES += \
     $$PWD/timelinerenderstate.cpp \
     $$PWD/timelinenotesmodel.cpp \
     $$PWD/timelineabstractrenderer.cpp \
-    $$PWD/timelineoverviewrenderer.cpp
+    $$PWD/timelineoverviewrenderer.cpp \
+    $$PWD/timelinetheme.cpp
 
 
 HEADERS += \
@@ -37,7 +38,8 @@ HEADERS += \
     $$PWD/timelineabstractrenderer.h \
     $$PWD/timelineabstractrenderer_p.h \
     $$PWD/timelineoverviewrenderer_p.h \
-    $$PWD/timelineoverviewrenderer.h
+    $$PWD/timelineoverviewrenderer.h \
+    $$PWD/timelinetheme.h
 
 RESOURCES += \
     $$PWD/qml/timeline.qrc

src/libs/timeline/timelinetheme.cpp

@@ -0,0 +1,99 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** 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 The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+#include "timelinetheme.h"
+
+#include <utils/icon.h>
+#include <utils/qtcassert.h>
+#include <utils/utilsicons.h>
+#include <utils/theme/theme.h>
+
+#include <QIcon>
+#include <QQmlContext>
+#include <QQmlEngine>
+#include <QQmlPropertyMap>
+#include <QQuickImageProvider>
+
+namespace Timeline {
+
+class TimelineImageIconProvider : public QQuickImageProvider
+{
+public:
+    TimelineImageIconProvider()
+        : QQuickImageProvider(Pixmap)
+    {
+    }
+
+    QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize) override
+    {
+        Q_UNUSED(requestedSize)
+
+        const QStringList idElements = id.split(QLatin1Char('/'));
+
+        QTC_ASSERT(!idElements.isEmpty(), return QPixmap());
+        const QString &iconName = idElements.first();
+        const QIcon::Mode iconMode = (idElements.count() > 1
+                                      && idElements.at(1) == QLatin1String("disabled"))
+                ? QIcon::Disabled : QIcon::Normal;
+
+        Utils::Icon icon;
+        if (iconName == QLatin1String("prev"))
+            icon = Utils::Icons::PREV_TOOLBAR;
+        else if (iconName == QLatin1String("next"))
+            icon = Utils::Icons::NEXT_TOOLBAR;
+        else if (iconName == QLatin1String("zoom"))
+            icon = Utils::Icons::ZOOM_TOOLBAR;
+        else if (iconName == QLatin1String("rangeselection"))
+            icon = Utils::Icon({{QLatin1String(":/timeline/ico_rangeselection.png"),
+                                 Utils::Theme::IconsBaseColor}});
+        else if (iconName == QLatin1String("rangeselected"))
+            icon = Utils::Icon({{QLatin1String(":/timeline/ico_rangeselected.png"),
+                                 Utils::Theme::IconsBaseColor}});
+        else if (iconName == QLatin1String("selectionmode"))
+            icon = Utils::Icon({{QLatin1String(":/timeline/ico_selectionmode.png"),
+                                 Utils::Theme::IconsBaseColor}});
+
+        const QSize iconSize(16, 16);
+        const QPixmap result = icon.icon().pixmap(iconSize, iconMode);
+
+        if (size)
+            *size = result.size();
+        return result;
+    }
+};
+
+void TimelineTheme::setupTheme(QQmlEngine *engine)
+{
+    QQmlPropertyMap *themePropertyMap = new QQmlPropertyMap(engine);
+    const QVariantHash creatorTheme = Utils::creatorTheme()->values();
+    for (auto it = creatorTheme.constBegin(); it != creatorTheme.constEnd(); ++it)
+        themePropertyMap->insert(it.key(), it.value());
+
+    engine->rootContext()->setContextProperty(QLatin1String("creatorTheme"), themePropertyMap);
+
+    engine->addImageProvider(QLatin1String("icons"), new TimelineImageIconProvider);
+}
+
+} // namespace Timeline

src/libs/timeline/timelinetheme.h

@@ -0,0 +1,39 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** 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 The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+#pragma once
+
+#include "timeline_global.h"
+
+class QQmlEngine;
+
+namespace Timeline {
+
+class TIMELINE_EXPORT TimelineTheme {
+public:
+    static void setupTheme(QQmlEngine* engine);
+};
+
+} // namespace Timeline

src/plugins/qmlprofiler/qmlprofilertraceview.cpp

@@ -46,6 +46,7 @@
 #include "timeline/timelinemodelaggregator.h"
 #include "timeline/timelinerenderer.h"
 #include "timeline/timelineoverviewrenderer.h"
+#include "timeline/timelinetheme.h"
 
 #include <aggregation/aggregate.h>
 // Needed for the load&save actions in the context menu
@@ -143,6 +144,8 @@ QmlProfilerTraceView::QmlProfilerTraceView(QWidget *parent, QmlProfilerViewManag
     // Minimum height: 5 rows of 20 pixels + scrollbar of 50 pixels + 20 pixels margin
     setMinimumHeight(170);
 
+    Timeline::TimelineTheme::setupTheme(d->m_mainView->engine());
+
     d->m_mainView->rootContext()->setContextProperty(QLatin1String("timelineModelAggregator"),
                                                      d->m_modelProxy);
     d->m_mainView->rootContext()->setContextProperty(QLatin1String("zoomControl"),

src/tools/icons/qtcreatoricons.svg

@@ -661,6 +661,17 @@
          offset="1"
          id="stop5101" />
     </linearGradient>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath6127">
+      <rect
+         style="display:inline;fill:#999999;fill-opacity:1"
+         x="1097"
+         y="568"
+         width="16"
+         height="16"
+         id="rect6129" />
+    </clipPath>
   </defs>
   <sodipodi:namedview
      id="base"
@@ -3338,8 +3349,9 @@
          x="1018.5"
          y="570.5" />
       <g
-         id="g5932"
+         id="selectArrow"
-         transform="translate(4,0)">
+         transform="translate(4,0)"
+         inkscape:label="#g5932">
         <path
            sodipodi:nodetypes="ccccc"
            inkscape:connector-curvature="0"
@@ -3400,6 +3412,120 @@
          d="m 1070,583.5 3,-3 -3,-3 z"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
     </g>
+    <g
+       transform="translate(32,0)"
+       style="display:inline"
+       id="src/libs/timeline/qml/ico_rangeselection">
+      <rect
+         id="rect6782-96-0-0-7"
+         height="16"
+         width="16"
+         y="568"
+         x="1064"
+         style="display:inline;fill:#ffffff;fill-opacity:1" />
+      <path
+         sodipodi:nodetypes="cc"
+         inkscape:connector-curvature="0"
+         id="path5087"
+         d="m 1068.5,576 7,0"
+         style="stroke:#000000;stroke-width:2" />
+      <g
+         id="g5092">
+        <path
+           d="m 1066,570 0,12"
+           id="path5068"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="cc"
+           style="stroke:#000000;stroke-width:2" />
+        <path
+           style="fill:#000000"
+           d="m 1067,576 3,-3 0,6"
+           id="path5090"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="ccc" />
+      </g>
+      <use
+         height="100%"
+         width="100%"
+         transform="matrix(-1,0,0,1,2144,0)"
+         id="use5096"
+         xlink:href="#g5092"
+         y="0"
+         x="0" />
+    </g>
+    <g
+       transform="translate(32,0)"
+       style="display:inline"
+       id="src/libs/timeline/qml/ico_rangeselected">
+      <use
+         height="100%"
+         width="100%"
+         transform="translate(-16,0)"
+         id="use5136"
+         xlink:href="#src/libs/timeline/qml/ico_rangeselection"
+         y="0"
+         x="0" />
+      <rect
+         y="570.5"
+         x="1082.5"
+         height="11"
+         width="11"
+         id="rect5138"
+         style="fill:#000000;fill-opacity:0.15686275;stroke:#000000" />
+    </g>
+    <g
+       style="display:inline"
+       id="src/libs/timeline/qml/ico_selectionmode"
+       clip-path="url(#clipPath6127)"
+       transform="translate(31,0)">
+      <rect
+         style="display:inline;fill:#ffffff;fill-opacity:1"
+         x="1097"
+         y="568"
+         width="16"
+         height="16"
+         id="rect6782-96-0-0-7-8" />
+      <rect
+         y="570"
+         x="1099"
+         height="5"
+         width="3"
+         id="rect5184"
+         style="fill:#000000" />
+      <use
+         height="100%"
+         width="100%"
+         transform="translate(4,0)"
+         id="use5201"
+         xlink:href="#rect5184"
+         y="0"
+         x="0" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#rect5184"
+         id="use5071"
+         transform="translate(8,0)"
+         width="100%"
+         height="100%" />
+      <use
+         height="100%"
+         width="100%"
+         id="use5159"
+         xlink:href="#selectArrow"
+         y="0"
+         x="0"
+         style="display:inline"
+         transform="translate(80,2.0000004e-7)" />
+      <use
+         height="100%"
+         width="100%"
+         transform="translate(0,6)"
+         id="use5203"
+         xlink:href="#rect5184"
+         y="0"
+         x="0" />
+    </g>
   </g>
   <g
      inkscape:groupmode="layer"