Unity 8

Merge lp:~saviq/unity8/header-customizations into lp:unity8

header-customizations
Merge into trunk

Proposed by Michał Sawicz on 2014-08-13

Status:	Merged
Approved by:	Andrea Cimitan on 2014-08-22
Approved revision:	1180
Merged at revision:	1206
Proposed branch:	lp:~saviq/unity8/header-customizations
Merge into:	lp:unity8
Prerequisite:	lp:~saviq/unity8/move-pageheader
Diff against target:	920 lines (+309/-174) 21 files modified plugins/Dash/CardAttributes.qml (+1/-0) plugins/Dash/CardCreator.js (+6/-5) plugins/Dash/ScopeStyle.qml (+41/-43) plugins/Utils/Style.js (+37/-0) plugins/Utils/qmldir (+1/-0) qml/Components/Background.qml (+6/-0) qml/Dash/DashNavigationList.qml (+3/-2) qml/Dash/PageHeader.qml (+48/-21) qml/Dash/PreviewListView.qml (+2/-0) qml/Dash/ScopesOverview.qml (+7/-1) qml/Dash/graphics/PageHeaderBaseDivider@18.sci (+0/-5) tests/mocks/Unity/fake_scope.cpp (+2/-0) tests/plugins/Dash/cardcreator/2.res (+3/-3) tests/plugins/Dash/cardcreator/5.res (+3/-3) tests/plugins/Dash/cardcreator/6.res (+4/-4) tests/plugins/Dash/cardcreator/7.res (+4/-4) tests/plugins/Dash/tst_ScopeStyle.qml (+80/-75) tests/plugins/Utils/CMakeLists.txt (+5/-0) tests/plugins/Utils/tst_UtilsStyle.qml (+47/-0) tests/qmltests/Components/tst_Background.qml (+5/-4) tests/qmltests/Dash/tst_GenericScopeView.qml (+4/-4)
To merge this branch:	bzr merge lp:~saviq/unity8/header-customizations
Related bugs:	Link a bug report

Reviewer	Review Type	Date Requested	Status
PS Jenkins bot (community)	continuous-integration		Approve on 2014-08-26
Andrea Cimitan (community)		2014-08-13	Approve on 2014-08-22
Albert Astals Cid (community)	code-only (needs design confirmation)		Approve on 2014-08-21
Review via email: mp+230719@code.launchpad.net

Commit message

Implement scope header customization options

Description of the change

* Are there any related MPs required for this MP to build/function as expected? Please list.
Prerequisite lp:~saviq/unity8/move-pageheader

* Did you perform an exploratory manual test run of your code change and any related functionality?
Yes.

* Did you make sure that your branch does not contain spurious tags?
Yes.

* If you changed the packaging (debian), did you subscribe the ubuntu-unity team to this MP?
N/A

* If you changed the UI, has there been a design review?
It's happening.

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-14:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3893/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-14:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3899/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

Andrea Cimitan (cimi) wrote on 2014-08-14:

This branch introduces a flat design for the header divider, removing the 3D depth effect. This breaks the design principle behind our Suru theme, which consist of different layers of paper on top of each other (one example of it is the Switch component of the SDK).

I've asked design for a clarification.

review: Needs Information

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-15:

FAILED: Continuous integration, rev:1171
http://jenkins.qa.ubuntu.com/job/unity8-ci/3928/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/3602
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-utopic/929
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-amd64-ci/1022
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/1022
        deb: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/1022/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-i386-ci/1022
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/3493
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/4849
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/4849/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/11551

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3928/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-15:

FAILED: Continuous integration, rev:1176
http://jenkins.qa.ubuntu.com/job/unity8-ci/3936/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/3614
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-utopic/937
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-amd64-ci/1030
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/1030
        deb: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/1030/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-i386-ci/1030
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/3504
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/4861
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/4861/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/11567

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3936/rebuild

review: Needs Fixing (continuous-integration)

lp:~saviq/unity8/header-customizations updated on 2014-08-16

1177. By Michał Sawicz on 2014-08-16: Fix expected colors in GenericScopeView test.

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-16:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3954/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-16:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3967/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-17:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3974/rebuild

review: Approve (continuous-integration)

lp:~saviq/unity8/header-customizations updated on 2014-08-18

1178. By Michał Sawicz on 2014-08-18: Merge trunk.

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-18:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3994/rebuild

review: Approve (continuous-integration)

Revision history for this message

Albert Astals Cid (aacid) on 2014-08-18:

review: Needs Fixing

lp:~saviq/unity8/header-customizations updated on 2014-08-18

1179. By Michał Sawicz on 2014-08-18: Work around a crasher in JS

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-18:

FAILED: Continuous integration, rev:1179
http://jenkins.qa.ubuntu.com/job/unity8-ci/4008/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/3724
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-utopic/1009
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-amd64-ci/1102
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/1102
        deb: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/1102/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-i386-ci/1102
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/3599
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/4971
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/4971/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/11688

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/4008/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

Andrea Cimitan (cimi) wrote on 2014-08-20:

With this branch, previews in overview show a light grey divider, I assume we want to address that before landing this...

review: Needs Fixing

Revision history for this message

Albert Astals Cid (aacid) wrote on 2014-08-20:

Workaround for crasher was added.

review: Abstain

Revision history for this message

Albert Astals Cid (aacid) wrote on 2014-08-21:

Code looks good to me, not top approving because seems Cimi has valid comments design wise

review: Approve

Revision history for this message

Albert Astals Cid (aacid) on 2014-08-21:

review: Approve (code-only (needs design confirmation))

Revision history for this message

Andrea Cimitan (cimi) wrote on 2014-08-21:

> Code looks good to me, not top approving because seems Cimi has valid comments
> design wise
the first design comment was addressed, the second one with the overview... let's wait his answer

Revision history for this message

Michał Sawicz (saviq) wrote on 2014-08-21:

> the first design comment was addressed, the second one with the overview... let's wait his answer

Yeah yeah, will fix somewhere, not yet sure where.

lp:~saviq/unity8/header-customizations updated on 2014-08-22

1180. By Michał Sawicz on 2014-08-22: Disable header divider in overview previews

Revision history for this message

Michał Sawicz (saviq) wrote on 2014-08-22:

> With this branch, previews in overview show a light grey divider, I assume we
> want to address that before landing this...
Fixeded.

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-22:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/4065/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

Andrea Cimitan (cimi) wrote on 2014-08-22:

* Did you perform an exploratory manual test run of the code change and any related functionality?
Yes
* Did CI run pass? If not, please explain why.
No, issue on notification renderer

review: Approve

lp:~saviq/unity8/header-customizations updated on 2014-08-26

1181. By Michał Sawicz on 2014-08-26: Merge trunk.

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-26:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/4096/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-26:

PASSED: Continuous integration, rev:1181
http://jenkins.qa.ubuntu.com/job/unity8-ci/4103/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/4051
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-utopic/1104
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-amd64-ci/1197
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-i386-ci/1197
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/3891
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/5303
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/5303/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/12128

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/4103/rebuild

review: Approve (continuous-integration)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk

Subscribers

People subscribed via source and target branches

to all changes:

Michał Sawicz

Mohammad Rakibul Hasan

Unity Team

 === modified file 'plugins/Dash/CardAttributes.qml'
 --- plugins/Dash/CardAttributes.qml	2014-07-23 16:09:17 +0000
 +++ plugins/Dash/CardAttributes.qml	2014-08-26 10:26:04 +0000
@@ -47,6 +47,7 @@
                  height: units.gu(2)
                  sets: ["actions", "status", "apps"]
                  source: "icon" in modelData ? modelData["icon"] : ""
++                color: grid.color
+             }
              Label {
                  id: label
 === modified file 'plugins/Dash/CardCreator.js'
 --- plugins/Dash/CardCreator.js	2014-08-15 17:37:19 +0000
 +++ plugins/Dash/CardCreator.js	2014-08-26 10:26:04 +0000
@@ -29,7 +29,7 @@
                                      gradientColor: getColor(1) || color; \n\
                                      anchors.fill: parent; \n\
                                      image: backgroundImage.source ? backgroundImage : null; \n\
--                                    property real luminance: 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b; \n\
++                                    property real luminance: Style.luminance(color); \n\
                                      property Image backgroundImage: Image { \n\
                                          objectName: "backgroundImage"; \n\
                                          source: { \n\
@@ -108,7 +108,7 @@
                              sourceComponent: ShaderEffect { \n\
                                  id: overlay; \n\
                                  height: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2); \n\
--                                property real luminance: 0.2126 * overlayColor.r + 0.7152 * overlayColor.g + 0.0722 * overlayColor.b; \n\
++                                property real luminance: Style.luminance(overlayColor); \n\
                                  property color overlayColor: cardData && cardData["overlayColor"] || "#99000000"; \n\
                                  property var source: ShaderEffectSource { \n\
                                      id: shaderSource; \n\
@@ -439,14 +439,14 @@
          mascotCode = kMascotImageCode.arg(mascotAnchors).arg(mascotImageVisible);
+     }
--    var summaryColorWithBackground = 'backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < (root.scopeStyle ? root.scopeStyle.threshold : 0.7) ? (root.scopeStyle ? root.scopeStyle.light : "white") : (root.scopeStyle ? root.scopeStyle.dark : Theme.palette.normal.baseText)';
++    var summaryColorWithBackground = 'backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white")';
      var hasTitleContainer = hasTitle && (hasEmblem || (hasMascot && (hasSubtitle || hasAttributes)));
      var titleSubtitleCode = '';
      if (hasTitle) {
          var titleColor;
          if (headerAsOverlay) {
--            titleColor = 'overlayLoader.item.luminance < (root.scopeStyle ? root.scopeStyle.threshold : 0.7) ? (root.scopeStyle ? root.scopeStyle.light : "white") : (root.scopeStyle ? root.scopeStyle.dark : Theme.palette.normal.baseText)';
++            titleColor = 'root.scopeStyle ? root.scopeStyle.getTextColor(overlayLoader.item.luminance) : (overlayLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white")';
          } else if (hasSummary) {
              titleColor = 'summary.color';
          } else if (hasBackground) {
@@ -652,7 +652,8 @@
  function createCardComponent(parent, template, components) {
      var imports = 'import QtQuick 2.2; \n\
                     import Ubuntu.Components 1.1; \n\
--                   import Dash 0.1;\n';
++                   import Dash 0.1;\n\
++                   import Utils 0.1;\n';
      var card = cardString(template, components);
      var code = imports + 'Component {\n' + card + '}\n';
 === modified file 'plugins/Dash/ScopeStyle.qml'
 --- plugins/Dash/ScopeStyle.qml	2014-08-13 10:29:21 +0000
 +++ plugins/Dash/ScopeStyle.qml	2014-08-26 10:26:04 +0000
@@ -15,6 +15,8 @@
   */
  import QtQuick 2.2
++import Utils 0.1
++import Ubuntu.Components 1.1
  /*! \brief Helper for processing scope customization options.
@@ -27,69 +29,65 @@
      /// Style object passed from the scope
      property var style: Object()
--    /*! \brief Calculate luminance of the passed color
--
--        \note If not fully opaque, luminance is dependant on blending.
--     */
--    function luminance(color) {
--        return 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b;
--    }
--
      /// Color used for text and symbolic icons
      readonly property color foreground: "foreground-color" in style ? style["foreground-color"] : d.defaultDark
      /// Luminance of the foreground color
--    readonly property real foregroundLuminance: foreground ? luminance(foreground) : d.defaultForegroundLuminance
++    readonly property real foregroundLuminance: foreground ? Style.luminance(foreground) : Style.luminance(d.defaultDark)
      /// Color used for the overall background
--    readonly property color background: "background-color" in style ? style["background-color"] : "transparent"
--
--    /// Luminance of the foreground color
--    readonly property real backgroundLuminance: background ? luminance(background) : d.defaultBackgroundLuminance
--
--    /*! \brief Luminance threshold for switching between fore and background color
--
--        \note If background colour is not fully opaque, the defaultLightLuminance it's taken into account instead of it.
--     */
--    readonly property real threshold: background.a !== 1.0 ? (foregroundLuminance + d.defaultLightLuminance) / 2
--                                                           : (foregroundLuminance + backgroundLuminance) / 2
--
--    /*! \brief The lighter of foreground and background colors
--
--        \note If background color is not fully opaque, it's not taken into account
--              and defaults to the theme-provided light color.
--     */
--    readonly property color light: {
--        if (background.a !== 1.0) return foregroundLuminance > d.defaultLightLuminance ? foreground : d.defaultLight;
--        return foregroundLuminance > backgroundLuminance ? foreground : background;
--    }
--
--    /*! \brief The darker of foreground and background colors
--
--        \note If background color is not fully opaque, it's not taken into account
--              and defaults to the theme-provided dark color.
--     */
--    readonly property color dark: {
--        if (background.a !== 1.0) return foregroundLuminance < d.defaultDarkLuminance ? foreground : d.defaultDark;
--        return foregroundLuminance < backgroundLuminance ? foreground : background;
++    readonly property color background: "background-color" in style ? style["background-color"] : "#00f5f5f5"
++
++    /// Luminance of the background color
++    readonly property real backgroundLuminance: background ? Style.luminance(background) : Style.luminance(d.defaultLight)
++
++    /*! \brief Get the most contrasting available color based on luminance
++     *
++     * If background color is transparent, theme provided colors are taken into account
++     */
++    function getTextColor(luminance) {
++        if (Math.abs(foregroundLuminance - luminance) >
++            Math.abs(d.opaqueBackgroundLuminance - luminance)) {
++            return foreground;
++        } else {
++            return d.opaqueBackground;
++        }
+     }
      /// Source of the logo image for the header
      readonly property url headerLogo: "logo" in d.headerStyle ? d.headerStyle["logo"] : ""
      /// Background style for the header
--    readonly property url headerBackground: "background" in d.headerStyle ? d.headerStyle["background"] : ""
++    readonly property url headerBackground: "background" in d.headerStyle ? d.headerStyle["background"] : "color:///#f5f5f5"
      /// Foreground color for the header
      readonly property color headerForeground: "foreground-color" in d.headerStyle ? d.headerStyle["foreground-color"] : foreground
++    /// Color of the header divider
++    readonly property color headerDividerColor: "divider-color" in d.headerStyle ? d.headerStyle["divider-color"] : "#e0e0e0"
++
++    /// Background style for the navigation
++    readonly property url navigationBackground: "navigation-background" in d.headerStyle ? d.headerStyle["navigation-background"] : "color:///#f5f5f5"
++
++    /// Color of the primary preview button
++    readonly property color previewButtonColor: "preview-button-color" in style ? style["preview-button-color"] : Theme.palette.selected.foreground
++
      //! @cond
      property var d: QtObject {
          // FIXME: should be taken from the theme
          readonly property color defaultLight: "white"
--        readonly property color defaultDark: Theme.palette.normal.baseText
--        readonly property real defaultLightLuminance: luminance(defaultLight)
--        readonly property real defaultDarkLuminance: luminance(defaultDark)
++        readonly property color defaultDark: UbuntuColors.darkGrey
++        readonly property real defaultLightLuminance: Style.luminance(defaultLight)
++        readonly property real defaultDarkLuminance: Style.luminance(defaultDark)
++
++        readonly property color opaqueBackground: {
++            background.a > 0 ?
++                        background :
++                        (Math.abs(foregroundLuminance - defaultLightLuminance) >
++                         Math.abs(foregroundLuminance - defaultDarkLuminance)) ?
++                            defaultLight : defaultDark
++        }
++        readonly property real opaqueBackgroundLuminance: Style.luminance(opaqueBackground)
          readonly property var headerStyle: "page-header" in style ? style["page-header"] : { }
+     }
 === added file 'plugins/Utils/Style.js'
 --- plugins/Utils/Style.js	1970-01-01 00:00:00 +0000
 +++ plugins/Utils/Style.js	2014-08-26 10:26:04 +0000
@@ -0,0 +1,37 @@
++/*
++ * Copyright (C) 2014 Canonical, Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU General Public License for more details.
++ *
++ * You should have received a copy of the GNU General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++.pragma library
++
++/*! \brief Calculate average luminance of the passed colors
++
++    \note If not fully opaque, luminance is dependant on blending.
++ */
++function luminance() {
++    var sum = 0;
++    // TODO this was originally
++    // for (var k in arguments) {
++    // but for some unkown reason was causing crashes in testDash/testDashContent
++    // investigate when we have some time
++    for (var k = 0; k < arguments.length; ++k) {
++        // only way to convert string to color
++        var c = Qt.lighter(arguments[k], 1.0);
++
++        sum += 0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b;
++    }
++
++    return sum / arguments.length;
++}
 === modified file 'plugins/Utils/qmldir'
 --- plugins/Utils/qmldir	2014-05-02 22:57:00 +0000
 +++ plugins/Utils/qmldir	2014-08-26 10:26:04 +0000
@@ -1,3 +1,4 @@
  module Utils
  plugin Utils-qml
  typeinfo Utils.qmltypes
++Style 0.1 Style.js
 === modified file 'qml/Components/Background.qml'
 --- qml/Components/Background.qml	2014-07-18 18:09:32 +0000
 +++ qml/Components/Background.qml	2014-08-26 10:26:04 +0000
@@ -15,6 +15,7 @@
   */
  import QtQuick 2.0
++import Utils 0.1 as Utils
  Loader {
      id: root
@@ -23,6 +24,11 @@
      property url style
      readonly property var parsedStyle: String(style)
          .match(/^(color|gradient):\/\/\/(?:(#(?:[0-9a-f]{3,4}){1,2}|[a-z]{3,}))(?:\/(#(?:[0-9a-f]{3,4}){1,2}|[a-z]{3,}))?\/?$/i)
++    readonly property var luminance: {
++        if (!parsedStyle) return 0.5;
++        if (parsedStyle[1] === "color") return Utils.Style.luminance(parsedStyle[2]);
++        else if (parsedStyle[1] === "gradient") return Utils.Style.luminance(parsedStyle[2], parsedStyle[3]);
++    }
      sourceComponent: {
          if (style == "") return null;
 === modified file 'qml/Dash/DashNavigationList.qml'
 --- qml/Dash/DashNavigationList.qml	2014-08-13 10:29:21 +0000
 +++ qml/Dash/DashNavigationList.qml	2014-08-26 10:26:04 +0000
@@ -16,6 +16,7 @@
  import QtQuick 2.2
  import Ubuntu.Components 1.1
++import "../Components"
  Item {
      id: root
@@ -30,8 +31,8 @@
      readonly property color foregroundColor: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText
      implicitHeight: flickable.contentHeight
--    Rectangle {
--        color: !root.scopeStyle || Qt.colorEqual(root.scopeStyle.background, "transparent") ? "white" : root.scopeStyle.background
++    Background {
++        style: root.scopeStyle ? root.scopeStyle.navigationBackground : "color://white"
          anchors.fill: parent
+     }
 === modified file 'qml/Dash/PageHeader.qml'
 --- qml/Dash/PageHeader.qml	2014-08-13 11:56:16 +0000
 +++ qml/Dash/PageHeader.qml	2014-08-26 10:26:04 +0000
@@ -240,6 +240,7 @@
                  contentHeight: height
                  opacity: headerContainer.clip || !headerContainer.showSearch ? 1 : 0 // setting visible false cause column to relayout
                  separatorSource: ""
++                separatorBottomSource: ""
                  property var styledItem: header
                  property string title: root.title
                  property var config: PageHeadConfiguration {
@@ -288,25 +289,6 @@
+         }
+     }
--    Row {
--        spacing: units.gu(.5)
--        Repeater {
--            objectName: "paginationRepeater"
--            model: root.paginationCount
--            Image {
--                objectName: "paginationDots_" + index
--                height: units.gu(1)
--                width: height
--                source: (index == root.paginationIndex) ? "graphics/pagination_dot_on.png" : "graphics/pagination_dot_off.png"
--            }
--        }
--        anchors {
--            top: headerContainer.bottom
--            horizontalCenter: headerContainer.horizontalCenter
--            topMargin: units.gu(.5)
--        }
--    }
--
      Component {
          id: popoverComponent
          Popover {
@@ -344,7 +326,7 @@
+         }
+     }
--    BorderImage {
++    Rectangle {
          id: bottomBorder
          anchors {
              top: headerContainer.bottom
@@ -353,7 +335,52 @@
              bottom: bottomContainer.top
+         }
--        source: "graphics/PageHeaderBaseDivider.sci"
++        color: scopeStyle ? scopeStyle.headerDividerColor : "#e0e0e0"
++
++        Rectangle {
++            anchors {
++                top: parent.top
++                left: parent.left
++                right: parent.right
++            }
++            height: units.dp(1)
++            color: Qt.darker(parent.color, 1.1)
++        }
++    }
++
++    Row {
++        visible: bottomBorder.visible
++        spacing: units.gu(.5)
++        Repeater {
++            objectName: "paginationRepeater"
++            model: root.paginationCount
++            Image {
++                objectName: "paginationDots_" + index
++                height: units.gu(1)
++                width: height
++                source: (index == root.paginationIndex) ? "graphics/pagination_dot_on.png" : "graphics/pagination_dot_off.png"
++            }
++        }
++        anchors {
++            top: headerContainer.bottom
++            horizontalCenter: headerContainer.horizontalCenter
++            topMargin: units.gu(.5)
++        }
++    }
++
++    // FIXME this doesn't work with solid scope backgrounds due to z-ordering
++    Rectangle {
++        visible: bottomBorder.visible
++        anchors {
++            top: bottomContainer.top
++            left: parent.left
++            right: parent.right
++        }
++        height: units.dp(1)
++        opacity: 0.6
++        color: scopeStyle ?
++                   Qt.lighter(Qt.rgba(scopeStyle.background.r, scopeStyle.background.g, scopeStyle.background.b, 1.0), 1.2) :
++                   "#CCFFFFFF"
+     }
      Item {
 === modified file 'qml/Dash/PreviewListView.qml'
 --- qml/Dash/PreviewListView.qml	2014-08-19 13:53:13 +0000
 +++ qml/Dash/PreviewListView.qml	2014-08-26 10:26:04 +0000
@@ -26,6 +26,8 @@
      property var scope: null
      property var scopeStyle: null
++    property alias showSignatureLine: header.showSignatureLine
++
      property alias open: previewListView.open
      property alias model: previewListView.model
      property alias currentIndex: previewListView.currentIndex
 === modified file 'qml/Dash/ScopesOverview.qml'
 --- qml/Dash/ScopesOverview.qml	2014-08-15 17:37:28 +0000
 +++ qml/Dash/ScopesOverview.qml	2014-08-26 10:26:04 +0000
@@ -148,7 +148,12 @@
      ScopeStyle {
          id: overviewScopeStyle
--        style: { "foreground-color" : "white", "background-color" : "transparent" }
++        style: { "foreground-color" : "white",
++                 "background-color" : "transparent",
++                 "page-header": {
++                    "background": "color:///transparent"
++                 }
++        }
+     }
      DashBackground {
@@ -458,6 +463,7 @@
          objectName: "scopesOverviewPreviewListView"
          scope: root.scope
          scopeStyle: overviewScopeStyle
++        showSignatureLine: false
          visible: x != width
          width: parent.width
          height: parent.height
 === removed file 'qml/Dash/graphics/PageHeaderBaseDivider@18.png'
 Binary files qml/Dash/graphics/PageHeaderBaseDivider@18.png	2014-08-13 11:56:16 +0000 and qml/Dash/graphics/PageHeaderBaseDivider@18.png	1970-01-01 00:00:00 +0000 differ
 === removed file 'qml/Dash/graphics/PageHeaderBaseDivider@18.sci'
 --- qml/Dash/graphics/PageHeaderBaseDivider@18.sci	2014-08-13 11:56:16 +0000
 +++ qml/Dash/graphics/PageHeaderBaseDivider@18.sci	1970-01-01 00:00:00 +0000
@@ -1,5 +0,0 @@
--border.top: 4
--border.bottom: 4
--border.left: 0
--border.right: 0
--source: PageHeaderBaseDivider@18.png
 === modified file 'tests/mocks/Unity/fake_scope.cpp'
 --- tests/mocks/Unity/fake_scope.cpp	2014-08-14 11:31:40 +0000
 +++ tests/mocks/Unity/fake_scope.cpp	2014-08-26 10:26:04 +0000
@@ -227,6 +227,8 @@
      } else if (m_id == "MockScope5") {
          h["background"] = "gradient:///lightgrey/grey";
          h["logo"] = QUrl("../../../tests/qmltests/Dash/tst_PageHeader/logo-ubuntu-orange.svg");
++        h["divider-color"] = "red";
++        h["navigation-background"] = "color:///black";
          m["page-header"] = h;
+     }
      return m;
 === modified file 'tests/plugins/Dash/cardcreator/2.res'
 --- tests/plugins/Dash/cardcreator/2.res	2014-08-13 10:29:21 +0000
 +++ tests/plugins/Dash/cardcreator/2.res	2014-08-26 10:26:04 +0000
@@ -26,7 +26,7 @@
                                      gradientColor: getColor(1) || color;
                                      anchors.fill: parent;
                                      image: backgroundImage.source ? backgroundImage : null;
--                                    property real luminance: 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b;
++                                    property real luminance: Style.luminance(color);
                                      property Image backgroundImage: Image {
                                          objectName: "backgroundImage";
                                          source: {
@@ -94,7 +94,7 @@
                          wrapMode: Text.Wrap;
                          maximumLineCount: 2;
                          font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
--                        color: backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < (root.scopeStyle ? root.scopeStyle.threshold : 0.7) ? (root.scopeStyle ? root.scopeStyle.light : "white") : (root.scopeStyle ? root.scopeStyle.dark : Theme.palette.normal.baseText);
++                        color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
                          visible: showHeader ;
                          text: root.title;
                          font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal;
@@ -112,7 +112,7 @@
                              elide: Text.ElideRight;
                              fontSize: "small";
                              font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
--                            color: backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < (root.scopeStyle ? root.scopeStyle.threshold : 0.7) ? (root.scopeStyle ? root.scopeStyle.light : "white") : (root.scopeStyle ? root.scopeStyle.dark : Theme.palette.normal.baseText);
++                            color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
                              visible: titleLabel.visible && titleLabel.text;
                              text: cardData && cardData["subtitle"] || "";
                              font.weight: Font.Light;
 === modified file 'tests/plugins/Dash/cardcreator/5.res'
 --- tests/plugins/Dash/cardcreator/5.res	2014-08-13 10:29:21 +0000
 +++ tests/plugins/Dash/cardcreator/5.res	2014-08-26 10:26:04 +0000
@@ -69,7 +69,7 @@
                              sourceComponent: ShaderEffect {
                                  id: overlay;
                                  height: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2);
--                                property real luminance: 0.2126 * overlayColor.r + 0.7152 * overlayColor.g + 0.0722 * overlayColor.b;
++                                property real luminance: Style.luminance(overlayColor);
                                  property color overlayColor: cardData && cardData["overlayColor"] || "#99000000";
                                  property var source: ShaderEffectSource {
                                      id: shaderSource;
@@ -113,7 +113,7 @@
                          wrapMode: Text.Wrap;
                          maximumLineCount: 2;
                          font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
--                        color: overlayLoader.item.luminance < (root.scopeStyle ? root.scopeStyle.threshold : 0.7) ? (root.scopeStyle ? root.scopeStyle.light : "white") : (root.scopeStyle ? root.scopeStyle.dark : Theme.palette.normal.baseText);
++                        color: root.scopeStyle ? root.scopeStyle.getTextColor(overlayLoader.item.luminance) : (overlayLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
                          visible: showHeader && overlayLoader.active;
                          text: root.title;
                          font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal;
@@ -131,7 +131,7 @@
                              elide: Text.ElideRight;
                              fontSize: "small";
                              font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
--                            color: overlayLoader.item.luminance < (root.scopeStyle ? root.scopeStyle.threshold : 0.7) ? (root.scopeStyle ? root.scopeStyle.light : "white") : (root.scopeStyle ? root.scopeStyle.dark : Theme.palette.normal.baseText);
++                            color: root.scopeStyle ? root.scopeStyle.getTextColor(overlayLoader.item.luminance) : (overlayLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
                              visible: titleLabel.visible && titleLabel.text;
                              text: cardData && cardData["subtitle"] || "";
                              font.weight: Font.Light;
 === modified file 'tests/plugins/Dash/cardcreator/6.res'
 --- tests/plugins/Dash/cardcreator/6.res	2014-08-13 10:29:21 +0000
 +++ tests/plugins/Dash/cardcreator/6.res	2014-08-26 10:26:04 +0000
@@ -26,7 +26,7 @@
                                      gradientColor: getColor(1) || color;
                                      anchors.fill: parent;
                                      image: backgroundImage.source ? backgroundImage : null;
--                                    property real luminance: 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b;
++                                    property real luminance: Style.luminance(color);
                                      property Image backgroundImage: Image {
                                          objectName: "backgroundImage";
                                          source: {
@@ -70,7 +70,7 @@
                          wrapMode: Text.Wrap;
                          maximumLineCount: 2;
                          font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
--                        color: backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < (root.scopeStyle ? root.scopeStyle.threshold : 0.7) ? (root.scopeStyle ? root.scopeStyle.light : "white") : (root.scopeStyle ? root.scopeStyle.dark : Theme.palette.normal.baseText);
++                        color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
                          visible: showHeader ;
                          text: root.title;
                          font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal;
@@ -88,7 +88,7 @@
                              elide: Text.ElideRight;
                              fontSize: "small";
                              font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
--                            color: backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < (root.scopeStyle ? root.scopeStyle.threshold : 0.7) ? (root.scopeStyle ? root.scopeStyle.light : "white") : (root.scopeStyle ? root.scopeStyle.dark : Theme.palette.normal.baseText);
++                            color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
                              visible: titleLabel.visible && titleLabel.text;
                              text: cardData && cardData["subtitle"] || "";
                              font.weight: Font.Light;
@@ -103,7 +103,7 @@
                              rightMargin: units.gu(1);
+                             }
                              source: cardData && cardData["emblem"] || "";
--                            color: backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < (root.scopeStyle ? root.scopeStyle.threshold : 0.7) ? (root.scopeStyle ? root.scopeStyle.light : "white") : (root.scopeStyle ? root.scopeStyle.dark : Theme.palette.normal.baseText);
++                            color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
                              width: height;
                              height: source != "" ? titleLabel.font.pixelSize : 0;
+                         }
 === modified file 'tests/plugins/Dash/cardcreator/7.res'
 --- tests/plugins/Dash/cardcreator/7.res	2014-08-13 10:29:21 +0000
 +++ tests/plugins/Dash/cardcreator/7.res	2014-08-26 10:26:04 +0000
@@ -26,7 +26,7 @@
                                      gradientColor: getColor(1) || color;
                                      anchors.fill: parent;
                                      image: backgroundImage.source ? backgroundImage : null;
--                                    property real luminance: 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b;
++                                    property real luminance: Style.luminance(color);
                                      property Image backgroundImage: Image {
                                          objectName: "backgroundImage";
                                          source: {
@@ -95,7 +95,7 @@
                          wrapMode: Text.Wrap;
                          maximumLineCount: 2;
                          font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
--                        color: backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < (root.scopeStyle ? root.scopeStyle.threshold : 0.7) ? (root.scopeStyle ? root.scopeStyle.light : "white") : (root.scopeStyle ? root.scopeStyle.dark : Theme.palette.normal.baseText);
++                        color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
                          visible: showHeader ;
                          text: root.title;
                          font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal;
@@ -113,7 +113,7 @@
                              elide: Text.ElideRight;
                              fontSize: "small";
                              font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
--                            color: backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < (root.scopeStyle ? root.scopeStyle.threshold : 0.7) ? (root.scopeStyle ? root.scopeStyle.light : "white") : (root.scopeStyle ? root.scopeStyle.dark : Theme.palette.normal.baseText);
++                            color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
                              visible: titleLabel.visible && titleLabel.text;
                              text: cardData && cardData["subtitle"] || "";
                              font.weight: Font.Light;
@@ -127,7 +127,7 @@
                              rightMargin: units.gu(1);
                              top: subtitleLabel.bottom;
+                             }
--                            color: backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < (root.scopeStyle ? root.scopeStyle.threshold : 0.7) ? (root.scopeStyle ? root.scopeStyle.light : "white") : (root.scopeStyle ? root.scopeStyle.dark : Theme.palette.normal.baseText);
++                            color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
                              model: cardData && cardData["attributes"];
+                           }
 === modified file 'tests/plugins/Dash/tst_ScopeStyle.qml'
 --- tests/plugins/Dash/tst_ScopeStyle.qml	2014-08-13 10:29:21 +0000
 +++ tests/plugins/Dash/tst_ScopeStyle.qml	2014-08-26 10:26:04 +0000
@@ -18,6 +18,7 @@
  import QtTest 1.0
  import Dash 0.1
  import Ubuntu.Components 1.1
++import Utils 0.1
  Rectangle {
      width: units.gu(40)
@@ -35,39 +36,23 @@
          property color color
          property var styles: [
              {},
--            { "foreground-color": "red", "background-color": "black", "page-header": { "logo": "/foo/bar" } },
--            { "foreground-color": "green", "background-color": "white", "page-header": { "foreground-color": "black" } },
--            { "foreground-color": "blue", "background-color": "darkgrey", "page-header": { "background": "gradient:///white/blue" } },
++            { "foreground-color": "red", "background-color": "black", "page-header": { "logo": "/foo/bar" },
++              "preview-button-color": "red"},
++            { "foreground-color": "green", "background-color": "white",
++              "page-header": { "foreground-color": "black",
++                               "divider-color": "blue" } },
++            { "foreground-color": "blue", "background-color": "darkgrey",
++              "page-header": { "background": "gradient:///white/blue",
++                               "navigation-background": "gradient:///white/blue" } },
+         ]
          function cleanup() {
              testCase.color = "transparent";
+         }
--        function test_luminance_data() {
--            return [
--                { tag: "#F00", luminance: 0.2126 },
--                { tag: "#0F0", luminance: 0.7152 },
--                { tag: "#00F", luminance: 0.0722 },
--                { tag: "white", luminance: 1.0 },
--                { tag: "black", luminance: 0.0 },
--                { tag: "lightgrey", luminance: 0.8275 },
--                { tag: "grey", luminance: 0.5020 },
--                { tag: "darkgrey", luminance: 0.6627 },
--                { tag: "red", luminance: 0.2126 },
--                { tag: "green", luminance: 0.3590 },
--                { tag: "blue", luminance: 0.0722 },
--            ];
--        }
--
--        function test_luminance(data) {
--            testCase.color = data.tag;
--            compare(tool.luminance(testCase.color).toFixed(4), data.luminance.toFixed(4));
--        }
--
          function test_foreground_data() {
              return [
--                { tag: "default", index: 0, foreground: Theme.palette.normal.foreground, luminance: 0.5725 },
++                { tag: "default", index: 0, foreground: UbuntuColors.darkGrey, luminance: 0.3647 },
                  { tag: "red on black", index: 1, foreground: "red", luminance: 0.2126 },
                  { tag: "green on white", index: 2, foreground: "green", luminance: 0.3590 },
                  { tag: "blue on darkgrey", index: 3, foreground: "blue", luminance: 0.0722 },
@@ -83,7 +68,7 @@
          function test_background_data() {
              return [
--                { tag: "default", index: 0, background: "transparent" },
++                { tag: "default", index: 0, background: "#00f5f5f5", luminance: 0.9608 },
                  { tag: "red on black", index: 1, background: "black", luminance: 0 },
                  { tag: "green on white", index: 2, background: "white", luminance: 1 },
                  { tag: "blue on darkgrey", index: 3, background: "darkgrey", luminance: 0.6627 },
@@ -94,53 +79,35 @@
              tool.style = testCase.styles[data.index];
              verify(Qt.colorEqual(tool.background, data.background),
                     "Background color not equal: %1 != %2".arg(tool.background).arg(data.background));
--            if (data.hasOwnProperty("luminance")) {
--                compare(tool.backgroundLuminance.toFixed(4), data.luminance.toFixed(4));
--            }
--        }
--
--        function test_threshold_data() {
--            return [
--                { tag: "default", index: 0, threshold: 0.7863 },
--                { tag: "red on black", index: 1, threshold: 0.1063 },
--                { tag: "green on white", index: 2, threshold: 0.6795 },
--                { tag: "blue on darkgrey", index: 3, threshold: 0.3675 },
--            ];
--        }
--
--        function test_threshold(data) {
--            tool.style = testCase.styles[data.index];
--            compare(tool.threshold.toFixed(4), data.threshold.toFixed(4), "Luminance threshold was incorrect.");
--        }
--
--        function test_light_data() {
--            return [
--                { tag: "default", index: 0, light: "white" },
--                { tag: "red on black", index: 1, light: "red" },
--                { tag: "green on white", index: 2, light: "white" },
--                { tag: "blue on darkgrey", index: 3, light: "darkgrey" },
--            ];
--        }
--
--        function test_light(data) {
--            tool.style = testCase.styles[data.index];
--            verify(Qt.colorEqual(tool.light, data.light),
--                   "Light color not equal: %1 != %2".arg(tool.light).arg(data.light));
--        }
--
--        function test_dark_data() {
--            return [
--                { tag: "default", index: 0, dark: Theme.palette.normal.baseText },
--                { tag: "red on black", index: 1, dark: "black" },
--                { tag: "green on white", index: 2, dark: "green" },
--                { tag: "blue on darkgrey", index: 3, dark: "blue" },
--            ];
--        }
--
--        function test_dark(data) {
--            tool.style = testCase.styles[data.index];
--            verify(Qt.colorEqual(tool.dark, data.dark),
--                   "Dark color not equal: %1 != %2".arg(tool.dark).arg(data.dark));
++            compare(tool.backgroundLuminance.toFixed(4), data.luminance.toFixed(4));
++        }
++
++        function test_getTextColor_data() {
++            return [
++                { tag: "default on black", background: "black", index: 0, textColor: "white" },
++                { tag: "default on lightgrey", background: "lightgrey", index: 0, textColor: UbuntuColors.darkGrey },
++                { tag: "default on white", background: "white", index: 0, textColor: UbuntuColors.darkGrey },
++                { tag: "default on yellow", background: "yellow", index: 0, textColor: UbuntuColors.darkGrey },
++                { tag: "red/black on black", background: "black", index: 1, textColor: "red" },
++                { tag: "red/black on lightgrey", background: "lightgrey", index: 1, textColor: "black" },
++                { tag: "red/black on white", background: "white", index: 1, textColor: "black" },
++                { tag: "red/black on yellow", background: "yellow", index: 1, textColor: "black" },
++                { tag: "green/white on black", background: "black", index: 2, textColor: "white" },
++                { tag: "green/white on lightgrey", background: "lightgrey", index: 2, textColor: "green" },
++                { tag: "green/white on white", background: "white", index: 2, textColor: "green" },
++                { tag: "green/white on yellow", background: "yellow", index: 2, textColor: "green" },
++                { tag: "blue/darkgrey on black", background: "black", index: 3, textColor: "darkgrey" },
++                { tag: "blue/darkgrey on lightgrey", background: "lightgrey", index: 3, textColor: "blue" },
++                { tag: "blue/darkgrey on white", background: "white", index: 3, textColor: "blue" },
++                { tag: "blue/darkgrey on yellow", background: "yellow", index: 3, textColor: "blue" },
++            ];
++        }
++
++        function test_getTextColor(data) {
++            tool.style = testCase.styles[data.index];
++            var textColor = tool.getTextColor(Style.luminance(data.background));
++            verify(Qt.colorEqual(textColor, data.textColor),
++                   "TextColor not equal: %1 != %2".arg(textColor).arg(data.textColor));
+         }
          function test_headerLogo_data() {
@@ -157,7 +124,7 @@
          function test_headerForeground_data() {
              return [
--                { tag: "default", index: 0, headerForeground: Theme.palette.normal.baseText },
++                { tag: "default", index: 0, headerForeground: UbuntuColors.darkGrey },
                  { tag: "black", index: 2, headerForeground: "black" },
              ];
+         }
@@ -170,7 +137,7 @@
          function test_headerBackground_data() {
              return [
--                { tag: "default", index: 0, headerBackground: "" },
++                { tag: "default", index: 0, headerBackground: "color:///#f5f5f5" },
                  { tag: "black", index: 3, headerBackground: "gradient:///white/blue" },
              ];
+         }
@@ -179,5 +146,43 @@
              tool.style = testCase.styles[data.index];
              compare(tool.headerBackground, data.headerBackground, "Header background was incorrect.");
+         }
++
++        function test_headerDividerColor_data() {
++            return [
++                { tag: "default", index: 0, headerDividerColor: "#e0e0e0" },
++                { tag: "blue", index: 2, headerDividerColor: "blue" },
++            ];
++        }
++
++        function test_headerDividerColor(data) {
++            tool.style = testCase.styles[data.index];
++            verify(Qt.colorEqual(tool.headerDividerColor, data.headerDividerColor),
++                   "Header divider color not equal: %1 != %2".arg(tool.headerDividerColor).arg(data.headerDividerColor));
++        }
++
++        function test_navigationBackground_data() {
++            return [
++                { tag: "default", index: 0, navigationBackground: "color:///#f5f5f5" },
++                { tag: "black", index: 3, navigationBackground: "gradient:///white/blue" },
++            ];
++        }
++
++        function test_navigationBackground(data) {
++            tool.style = testCase.styles[data.index];
++            compare(tool.navigationBackground, data.navigationBackground, "Navigation background was incorrect.");
++        }
++
++        function test_previewButtonColor_data() {
++            return [
++                { tag: "default", index: 0, previewButtonColor: Theme.palette.selected.foreground },
++                { tag: "red", index: 1, previewButtonColor: "red" },
++            ];
++        }
++
++        function test_previewButtonColor(data) {
++            tool.style = testCase.styles[data.index];
++            verify(Qt.colorEqual(tool.previewButtonColor, data.previewButtonColor),
++                   "Preview button color not equal: %1 != %2".arg(tool.previewButtonColor).arg(data.previewButtonColor));
++        }
+     }
+ }
 === modified file 'tests/plugins/Utils/CMakeLists.txt'
 --- tests/plugins/Utils/CMakeLists.txt	2014-05-01 14:25:18 +0000
 +++ tests/plugins/Utils/CMakeLists.txt	2014-08-26 10:26:04 +0000
@@ -27,3 +27,8 @@
      qsortfilterproxymodeltest
      timeformattertest
+     )
++
++# plain qml test
++set(qmltest_DEFAULT_TARGETS qmltests)
++set(qmltest_DEFAULT_PROPERTIES ENVIRONMENT "QT_QPA_PLATFORM=minimal")
++add_qml_test(. UtilsStyle IMPORT_PATHS ${CMAKE_BINARY_DIR}/plugins)
 === added file 'tests/plugins/Utils/tst_UtilsStyle.qml'
 --- tests/plugins/Utils/tst_UtilsStyle.qml	1970-01-01 00:00:00 +0000
 +++ tests/plugins/Utils/tst_UtilsStyle.qml	2014-08-26 10:26:04 +0000
@@ -0,0 +1,47 @@
++/*
++ * Copyright (C) 2014 Canonical, Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU General Public License for more details.
++ *
++ * You should have received a copy of the GNU General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++import QtQuick 2.2
++import QtTest 1.0
++import Utils 0.1
++
++TestCase {
++    id: testCase
++    name: "UtilsStyle"
++
++    property color color
++
++    function test_luminance_data() {
++        return [
++            { tag: "#F00", luminance: 0.2126 },
++            { tag: "#0F0", luminance: 0.7152 },
++            { tag: "#00F", luminance: 0.0722 },
++            { tag: "white", luminance: 1.0 },
++            { tag: "black", luminance: 0.0 },
++            { tag: "lightgrey", luminance: 0.8275 },
++            { tag: "grey", luminance: 0.5020 },
++            { tag: "darkgrey", luminance: 0.6627 },
++            { tag: "red", luminance: 0.2126 },
++            { tag: "green", luminance: 0.3590 },
++            { tag: "blue", luminance: 0.0722 },
++        ];
++    }
++
++    function test_luminance(data) {
++        testCase.color = data.tag;
++        compare(Style.luminance(testCase.color).toFixed(4), data.luminance.toFixed(4));
++    }
++}
 === modified file 'tests/qmltests/Components/tst_Background.qml'
 --- tests/qmltests/Components/tst_Background.qml	2014-07-21 11:46:17 +0000
 +++ tests/qmltests/Components/tst_Background.qml	2014-08-26 10:26:04 +0000
@@ -46,10 +46,10 @@
          function test_style_data() {
              return [
--                { tag: "empty", style: "" },
--                { tag: "solid", style: "color:///black" },
--                { tag: "gradient", style: "gradient:///black/red" },
--                { tag: "image", style: "/some/path" },
++                { tag: "empty", style: "", luminance: 0.5 },
++                { tag: "solid", style: "color:///black", luminance: 0 },
++                { tag: "gradient", style: "gradient:///black/red", luminance: 0.1063 },
++                { tag: "image", style: "/some/path", luminance: 0.5 },
              ];
+         }
@@ -58,6 +58,7 @@
              expectFail("empty", "Empty style should not create a background.");
              loadedSpy.wait();
              compare(background.item.objectName, data.tag, "Background should be %1".arg(data.style));
++            compare(background.luminance, data.luminance);
+         }
          function test_solid() {
 === modified file 'tests/qmltests/Dash/tst_GenericScopeView.qml'
 --- tests/qmltests/Dash/tst_GenericScopeView.qml	2014-08-15 17:37:47 +0000
 +++ tests/qmltests/Dash/tst_GenericScopeView.qml	2014-08-26 10:26:04 +0000
@@ -20,7 +20,7 @@
  import ".."
  import "../../../qml/Dash"
  import "../../../qml/Components"
--import Ubuntu.Components 0.1
++import Ubuntu.Components 1.1
  import Unity.Test 0.1 as UT
  Item {
@@ -364,9 +364,9 @@
              function test_header_style_data() {
                  return [
--                    { tag: "Default", index: 0, foreground: Theme.palette.normal.baseText, background: "", logo: "" },
--                    { tag: "Foreground", index: 1, foreground: "yellow", background: "", logo: "" },
--                    { tag: "Logo+Background", index: 2, foreground: Theme.palette.normal.baseText, background: "gradient:///lightgrey/grey",
++                    { tag: "Default", index: 0, foreground: UbuntuColors.darkGrey, background: "color:///#f5f5f5", logo: "" },
++                    { tag: "Foreground", index: 1, foreground: "yellow", background: "color:///#f5f5f5", logo: "" },
++                    { tag: "Logo+Background", index: 2, foreground: UbuntuColors.darkGrey, background: "gradient:///lightgrey/grey",
                        logo: Qt.resolvedUrl("../Dash/tst_PageHeader/logo-ubuntu-orange.svg") },
                  ];
+             }