Merge lp:~mterry/unity8/less-ubuntucolors into lp:unity8

[Michael Terry]

Change some dash button colors from orange to green.

And switch other colors from hardcoded values to the same semantic theme value.

UbuntuColors should be avoided when possible. Instead we should use semantic color names from the theme. These are future-proof and potentially locale-proof (for locales where green and red mean different things -- which I heard was a thing, but can't find anything on it in a quick search).

Half this branch simply replaces some color names with the correct theme color. So no visual change there. But it also changes some colors:

plugins/Dash/AudioProgressBar.qml: progress bar color from orange to "activity" (blue)
plugins/Dash/ScopeStyle.qml: preview button color from orange to "positive" (green)
qml/Dash/DashPageHeader.qml: active filter color from orange to "positive" (green)
qml/Dash/Previews/PreviewActions.qml: button color from orange to "positive" (green)
qml/Dash/Previews/PreviewPayments.qml: purchase button color from orange to "positive" (green)

I didn't change any uses of the various "grey" colors (slate, jet, charcoal, etc). That seemed a bit more fiddly and less user visible. But they should in theory be fixed down the road.

 * Are there any related MPs required for this MP to build/function as expected? Please list.
 No

 * Did you perform an exploratory manual test run of your code change and any related functionality?
 Not yet.. will do in a bit

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

 * If you changed the UI, has there been a design review?
 No... Do we need one for just using the correct theme colors? The only border case I'd see is the purchase button -- maybe that's supposed to be branding-colored?

[Unity8 CI Bot (unity8-ci-bot)]

FAILED: Continuous integration, rev:2396
https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/1203/
Executed test runs:
    UNSTABLE: https://unity8-jenkins.ubuntu.com/job/test-0-autopkgtest/label=amd64,release=vivid+overlay,testname=qmluitests.sh/740
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/test-0-autopkgtest/label=amd64,release=xenial+overlay,testname=qmluitests.sh/740
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-0-fetch/1612
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-1-sourcepkg/release=vivid+overlay/1567
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-1-sourcepkg/release=xenial+overlay/1567
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=vivid+overlay/1560
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=vivid+overlay/1560/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=xenial+overlay/1560
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=xenial+overlay/1560/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=vivid+overlay/1560
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=vivid+overlay/1560/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=xenial+overlay/1560
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=xenial+overlay/1560/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=vivid+overlay/1560
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=vivid+overlay/1560/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=xenial+overlay/1560
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=xenial+overlay/1560/artifact/output/*zip*/output.zip

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/1203/rebuild

review: Needs Fixing (continuous-integration)

[Andrea Cimitan (cimi)]

Please rebase on https://code.launchpad.net/~cimi/unity8/uitkPageHeader/+merge/293608 since it will conflict in DashPageHeader.qml

review: Needs Fixing

[lp:~mterry/unity8/less-ubuntucolors]

2331. By Michael Terry on 2016-05-17

Use PageHeader instead Ambiance's PageHeadStyle

2332. By Michael Terry on 2016-05-17

Fix some uses of UbuntuColors

Unmerged revisions

=== modified file 'plugins/Dash/AudioProgressBar.qml'
--- plugins/Dash/AudioProgressBar.qml	2016-01-18 22:56:16 +0000
+++ plugins/Dash/AudioProgressBar.qml	2016-05-16 14:05:53 +0000
@@ -49,6 +49,6 @@
             rightMargin: maxWidth - (maxWidth * root.progress)
         }
         height: units.dp(2)
-        backgroundColor: UbuntuColors.orange
+        backgroundColor: theme.palette.normal.activity
     }
 }
 
=== modified file 'plugins/Dash/ScopeStyle.qml'
--- plugins/Dash/ScopeStyle.qml	2016-03-29 03:47:39 +0000
+++ plugins/Dash/ScopeStyle.qml	2016-05-16 14:05:53 +0000
@@ -70,7 +70,7 @@
     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"] : UbuntuColors.orange
+    readonly property color previewButtonColor: "preview-button-color" in style ? style["preview-button-color"] : theme.palette.normal.positive
 
     //! @cond
     property var d: QtObject {
 
=== modified file 'qml/Components/Dialogs.qml'
--- qml/Components/Dialogs.qml	2016-04-27 15:01:10 +0000
+++ qml/Components/Dialogs.qml	2016-05-16 14:05:53 +0000
@@ -185,7 +185,7 @@
                     unitySessionService.reboot();
                     rebootDialog.hide();
                 }
-                color: UbuntuColors.red
+                color: theme.palette.normal.negative
             }
         }
     }
@@ -203,7 +203,7 @@
                     powerDialog.hide();
                     root.powerOffClicked();
                 }
-                color: UbuntuColors.red
+                color: theme.palette.normal.negative
             }
             Button {
                 text: i18n.ctr("Button: Restart the system", "Restart")
 
=== removed file 'qml/Components/Header.qml'
--- qml/Components/Header.qml	2016-01-25 10:12:48 +0000
+++ qml/Components/Header.qml	1970-01-01 00:00:00 +0000
@@ -1,28 +0,0 @@
-/*
- * 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 Ubuntu.Components 1.3
-import Ubuntu.Components.Themes.Ambiance 1.3
-
-PageHeadStyle {
-    // FIXME: Don't use this but PageHeader from Ubuntu.Components 1.3.
-    id: root
-
-    property var styledItem: root
-    property string title
-    property var config: PageHeadConfiguration {}
-    property var contents: null
-}
 
=== modified file 'qml/Components/ModeSwitchWarningDialog.qml'
--- qml/Components/ModeSwitchWarningDialog.qml	2016-03-08 13:57:52 +0000
+++ qml/Components/ModeSwitchWarningDialog.qml	2016-05-16 14:05:53 +0000
@@ -86,7 +86,7 @@
         Button {
             objectName: "forceCloseButton"
             text: i18n.tr("Close all")
-            color: UbuntuColors.red
+            color: theme.palette.normal.negative
             onClicked: {
                 root.forceClose();
             }
 
=== modified file 'qml/Components/WindowControlButtons.qml'
--- qml/Components/WindowControlButtons.qml	2016-04-27 14:57:19 +0000
+++ qml/Components/WindowControlButtons.qml	2016-05-16 14:05:53 +0000
@@ -43,7 +43,7 @@
             width: units.gu(2)
             height: units.gu(2)
             radius: height / 2
-            color: UbuntuColors.red
+            color: theme.palette.normal.negative
             visible: parent.containsMouse
         }
         Icon {
 
=== modified file 'qml/Dash/DashPageHeader.qml'
--- qml/Dash/DashPageHeader.qml	2016-04-27 15:01:10 +0000
+++ qml/Dash/DashPageHeader.qml	2016-05-16 14:05:53 +0000
@@ -16,7 +16,7 @@
 
 import QtQuick 2.4
 import Ubuntu.Components 1.3
-import Ubuntu.Components.Themes.Ambiance 1.3
+import Ubuntu.Components.Popups 1.3
 import Ubuntu.Components.ListItems 1.3
 import "../Components"
 
@@ -78,13 +78,13 @@
         }
     }
 
-    function closePopup(keepFocus) {
+    function closePopup(keepFocus, keepSearch) {
         if (extraPanel.visible) {
             extraPanel.visible = false;
         } else if (!keepFocus) {
-            unfocus();
+            unfocus(keepSearch);
         }
-        if (!searchTextField.text && !root.navigationTag && searchHistory.count == 0) {
+        if (!keepSearch && !searchTextField.text && !root.navigationTag && searchHistory.count == 0) {
             headerContainer.showSearch = false;
         }
     }
@@ -97,9 +97,9 @@
         closePopup(keepFocus);
     }
 
-    function unfocus() {
+    function unfocus(keepSearch) {
         searchTextField.focus = false;
-        if (!searchTextField.text && !root.navigationTag) {
+        if (!keepSearch && !searchTextField.text && !root.navigationTag) {
             headerContainer.showSearch = false;
         }
     }
@@ -142,7 +142,7 @@
         objectName: "headerContainer"
         clip: contentY < height
         anchors { left: parent.left; top: parent.top; right: parent.right }
-        height: header.contentHeight
+        height: header.__styleInstance.contentHeight
         contentHeight: headersColumn.height
         interactive: false
         contentY: showSearch ? 0 : height
@@ -173,22 +173,18 @@
             id: headersColumn
             anchors { left: parent.left; right: parent.right }
 
-            PageHeadStyle {
-                // FIXME: Replace PageHeadStyle from the Ambiance theme by the new PageHeader from Ubuntu.Components 1.3.
+            PageHeader {
                 id: searchHeader
                 anchors { left: parent.left; right: parent.right }
                 opacity: headerContainer.clip || headerContainer.showSearch ? 1 : 0 // setting visible false cause column to relayout
-                __separator_visible: false
-                // Required to keep PageHeadStyle noise down as it expects the Page's properties around.
-                property var styledItem: searchHeader
-                property color dividerColor: "transparent" // Doesn't matter as we don't have PageHeadSections
-                property color panelColor: background.topColor
-                panelForegroundColor: config.foregroundColor
-                backgroundColor: "transparent"
-                config: PageHeadConfiguration {
+
+                StyleHints {
                     foregroundColor: root.scopeStyle ? root.scopeStyle.headerForeground : theme.palette.normal.baseText
+                    backgroundColor: "transparent"
+                    dividerColor: "transparent"
                 }
-                property var contents: Item {
+
+                contents: Item {
                     anchors.fill: parent
 
                     TextField {
@@ -273,7 +269,7 @@
                             anchors.fill: parent
                             anchors.margins: units.gu(2)
                             name: "filters"
-                            color: root.activeFiltersCount > 0 ? UbuntuColors.orange : header.config.foregroundColor
+                            color: root.activeFiltersCount > 0 ? theme.palette.normal.positive : header.__styleInstance.foregroundColor
                         }
 
                         onClicked: {
@@ -283,6 +279,7 @@
 
                     AbstractButton {
                         id: cancelButton
+                        objectName: "cancelButton"
                         width: cancelLabel.width + cancelLabel.anchors.rightMargin + cancelLabel.anchors.leftMargin
                         anchors {
                             top: parent.top
@@ -296,7 +293,7 @@
                         Label {
                             id: cancelLabel
                             text: i18n.tr("Cancel")
-                            color: header.panelForegroundColor
+                            color: header.__styleInstance.foregroundColor
                             verticalAlignment: Text.AlignVCenter
                             anchors {
                                 verticalCenter: parent.verticalCenter
@@ -309,28 +306,27 @@
                 }
             }
 
-            PageHeadStyle {
-                // FIXME: Replace PageHeadStyle from the Ambiance theme by the new PageHeader from Ubuntu.Components 1.3.
+            PageHeader {
                 id: header
                 objectName: "innerPageHeader"
                 anchors { left: parent.left; right: parent.right }
                 height: headerContainer.height
                 opacity: headerContainer.clip || !headerContainer.showSearch ? 1 : 0 // setting visible false cause column to relayout
-                __separator_visible: false
-                property var styledItem: header
-                property color dividerColor: "transparent" // Doesn't matter as we don't have PageHeadSections
-                property color panelColor: background.topColor
-                panelForegroundColor: config.foregroundColor
-                backgroundColor: "transparent"
-                config: PageHeadConfiguration {
-                    title: root.title
+                title: root.title
+
+                StyleHints {
                     foregroundColor: root.scopeStyle ? root.scopeStyle.headerForeground : theme.palette.normal.baseText
-                    backAction: Action {
-                        iconName: backIsClose ? "close" : "back"
-                        visible: root.showBackButton
-                        onTriggered: root.backClicked()
-                    }
-
+                    backgroundColor: "transparent"
+                    dividerColor: "transparent"
+                }
+
+                leadingActionBar.actions: Action {
+                    iconName: backIsClose ? "close" : "back"
+                    visible: root.showBackButton
+                    onTriggered: root.backClicked()
+                }
+
+                trailingActionBar {
                     actions: [
                         Action {
                             objectName: "store"
@@ -366,7 +362,6 @@
                     ]
                 }
 
-                property var contents: null
                 Component.onCompleted: root.refreshLogo()
 
                 Component {
 
=== modified file 'qml/Dash/GenericScopeView.qml'
--- qml/Dash/GenericScopeView.qml	2016-05-04 18:08:35 +0000
+++ qml/Dash/GenericScopeView.qml	2016-05-16 14:05:53 +0000
@@ -662,6 +662,10 @@
             onShowFiltersPopup: { // item
                 extraPanel.visible = false;
                 scopeView.filtersPopover = PopupUtils.open(Qt.resolvedUrl("FiltersPopover.qml"), item, { "contentWidth": scopeView.width - units.gu(2) } );
+                scopeView.filtersPopover.Component.onDestruction.connect(function () {
+                    categoryView.pageHeader.closePopup(false, true);
+                    categoryView.pageHeader.unfocus(true); // remove the focus from the search field
+                })
             }
         }
 
@@ -683,6 +687,7 @@
             onHistoryItemClicked: {
                 SearchHistoryModel.addQuery(text);
                 categoryView.pageHeader.searchQuery = text;
+                categoryView.pageHeader.unfocus();
             }
 
             onDashNavigationLeafClicked: {
 
=== modified file 'qml/Dash/Previews/PreviewActions.qml'
--- qml/Dash/Previews/PreviewActions.qml	2016-04-01 13:20:27 +0000
+++ qml/Dash/Previews/PreviewActions.qml	2016-05-16 14:05:53 +0000
@@ -66,7 +66,7 @@
             visible: root.actions && root.actions.length > 0
             onTriggeredAction: root.triggered(root.widgetId, actionData.id, actionData)
             width: (root.width - units.gu(1)) / 2
-            color: root.scopeStyle ? root.scopeStyle.previewButtonColor : UbuntuColors.orange
+            color: root.scopeStyle ? root.scopeStyle.previewButtonColor : theme.palette.normal.positive
         }
     }
 }
 
=== modified file 'qml/Dash/Previews/PreviewPayments.qml'
--- qml/Dash/Previews/PreviewPayments.qml	2016-02-16 20:00:47 +0000
+++ qml/Dash/Previews/PreviewPayments.qml	2016-05-16 14:05:53 +0000
@@ -35,7 +35,7 @@
         id: paymentButton
         objectName: "paymentButton"
 
-        color: UbuntuColors.orange
+        color: theme.palette.normal.positive
         text: paymentClient.formattedPrice
         onClicked: {
             paymentClient.start();
 
=== modified file 'qml/Launcher/LauncherDelegate.qml'
--- qml/Launcher/LauncherDelegate.qml	2016-03-29 13:51:56 +0000
+++ qml/Launcher/LauncherDelegate.qml	2016-05-16 14:05:53 +0000
@@ -164,7 +164,7 @@
             }
             width: Math.min(root.itemWidth, Math.max(units.gu(2), countLabel.implicitWidth + units.gu(1)))
             height: units.gu(2)
-            backgroundColor: UbuntuColors.green
+            backgroundColor: theme.palette.normal.positive
             visible: root.countVisible
             aspect: UbuntuShape.Flat
 
@@ -207,7 +207,7 @@
                         top: parent.top
                         bottom: parent.bottom
                     }
-                    backgroundColor: UbuntuColors.blue
+                    backgroundColor: theme.palette.normal.activity
                     borderSource: "none"
                     width: progressOverlay.width
                 }
 
=== modified file 'qml/Panel/Panel.qml'
--- qml/Panel/Panel.qml	2016-04-27 15:01:10 +0000
+++ qml/Panel/Panel.qml	2016-05-16 14:05:53 +0000
@@ -89,7 +89,7 @@
 
         Rectangle {
             id: indicatorAreaBackground
-            color: callHint.visible ? UbuntuColors.green : theme.palette.normal.background
+            color: callHint.visible ? theme.palette.normal.positive : theme.palette.normal.background
             anchors {
                 top: parent.top
                 left: parent.left
 
=== modified file 'qml/Stages/DecoratedWindow.qml'
--- qml/Stages/DecoratedWindow.qml	2016-04-27 15:01:10 +0000
+++ qml/Stages/DecoratedWindow.qml	2016-05-16 14:05:53 +0000
@@ -62,7 +62,7 @@
     Rectangle {
         anchors { left: selectionHighlight.left; right: selectionHighlight.right; bottom: selectionHighlight.bottom; }
         height: units.dp(2)
-        color: UbuntuColors.orange
+        color: theme.palette.normal.focus
         visible: highlightShown
     }
 
 
=== modified file 'qml/Stages/DesktopSpread.qml'
--- qml/Stages/DesktopSpread.qml	2016-04-27 11:55:12 +0000
+++ qml/Stages/DesktopSpread.qml	2016-05-16 14:05:53 +0000
@@ -494,7 +494,7 @@
     //                    Rectangle {
     //                        anchors { left: parent.left; right: parent.right; bottom: parent.bottom }
     //                        height: units.dp(2)
-    //                        color: UbuntuColors.orange
+    //                        color: theme.palette.normal.focus
     //                        visible: index == 0 // TODO: should be active workspace index
     //                    }
                 }
 
=== modified file 'qml/Stages/DesktopSpreadDelegate.qml'
--- qml/Stages/DesktopSpreadDelegate.qml	2016-04-04 13:37:49 +0000
+++ qml/Stages/DesktopSpreadDelegate.qml	2016-05-16 14:05:53 +0000
@@ -83,7 +83,7 @@
     Rectangle {
         anchors { left: selectionHighlight.left; right: selectionHighlight.right; bottom: selectionHighlight.bottom; }
         height: units.dp(2)
-        color: UbuntuColors.orange
+        color: theme.palette.normal.focus
         visible: root.highlightShown
         antialiasing: true
     }
 
=== modified file 'qml/Stages/Splash.qml'
--- qml/Stages/Splash.qml	2016-03-08 20:59:22 +0000
+++ qml/Stages/Splash.qml	2016-05-16 14:05:53 +0000
@@ -29,7 +29,7 @@
     property color footerColor: d.undefinedColor
     property alias imageSource: overlaidImage.source
     property url icon
-    property alias title: headerConfig.title
+    property alias title: header.title
     property alias showHeader: header.visible
 
     Ambiance.Palette {
@@ -75,25 +75,13 @@
         style: Component { MainViewStyle {theme: styledItem.fakeTheme} }
     }
 
-    Ambiance.PageHeadStyle {
-        // FIXME: Replace PageHeadStyle by PageHeader from Ubuntu.Components 1.3.
+    PageHeader {
         id: header
-        anchors {
-            left: parent.left;
-            right: parent.right
-        }
-        property var styledItem: header
-        // FIXME Keep in sync with SDK's MainView.qml values of these two colors
-        property color dividerColor: Qt.darker(styledItem.backgroundColor, 1.1)
-        property color panelColor: Qt.lighter(styledItem.backgroundColor, 1.1)
-        panelForegroundColor: config.foregroundColor
-        backgroundColor: "transparent"
-        config: PageHeadConfiguration {
-            id: headerConfig
-            foregroundColor: styledItem.fakeTheme.palette.normal.backgroundText
-        }
-
-        property var contents: null
+        anchors { left: parent.left; right: parent.right }
+        StyleHints {
+            foregroundColor: styledItem.fakeTheme.palette.selected.backgroundText
+            backgroundColor: "transparent"
+        }
     }
 
     Image {
 
=== modified file 'qml/Stages/SpreadDelegate.qml'
--- qml/Stages/SpreadDelegate.qml	2016-04-27 15:01:10 +0000
+++ qml/Stages/SpreadDelegate.qml	2016-05-16 14:05:53 +0000
@@ -286,7 +286,7 @@
             Rectangle {
                 anchors { left: selectionHighlight.left; right: selectionHighlight.right; bottom: selectionHighlight.bottom; }
                 height: units.dp(2)
-                color: UbuntuColors.orange
+                color: theme.palette.normal.focus
                 visible: root.highlightShown
                 antialiasing: true
             }
 
=== modified file 'tests/plugins/Dash/tst_ScopeStyle.qml'
--- tests/plugins/Dash/tst_ScopeStyle.qml	2016-03-29 03:47:39 +0000
+++ tests/plugins/Dash/tst_ScopeStyle.qml	2016-05-16 14:05:53 +0000
@@ -174,7 +174,7 @@
 
         function test_previewButtonColor_data() {
             return [
-                { tag: "default", index: 0, previewButtonColor: UbuntuColors.orange },
+                { tag: "default", index: 0, previewButtonColor: theme.palette.normal.positive },
                 { tag: "red", index: 1, previewButtonColor: "red" },
             ];
         }
 
=== modified file 'tests/qmltests/Dash/tst_Dash.qml'
--- tests/qmltests/Dash/tst_Dash.qml	2016-02-15 10:14:43 +0000
+++ tests/qmltests/Dash/tst_Dash.qml	2016-05-16 14:05:53 +0000
@@ -125,7 +125,7 @@
             // Go back
             var scopesList = findChild(dash, "scopesList");
             var scopesListPageHeader = findChild(scopesList, "pageHeader");
-            var backButton = findChild(findChild(scopesListPageHeader, "innerPageHeader"), "customBackButton");
+            var backButton = findChild(scopesListPageHeader, "innerPageHeader").leadingActionBar;
             mouseClick(backButton);
             tryCompare(bottomEdgeController, "progress", 0);
         }
@@ -200,7 +200,7 @@
 
             // Go back
             var dashTempScopeItemHeader = findChild(dashTempScopeItem, "scopePageHeader");
-            var backButton = findChild(findChild(dashTempScopeItemHeader, "innerPageHeader"), "customBackButton");
+            var backButton = findChild(dashTempScopeItemHeader, "innerPageHeader").leadingActionBar;
             mouseClick(backButton);
 
             // Check temp scope is gone
@@ -253,7 +253,7 @@
 
             // Go back
             var dashTempScopeItemHeader = findChild(dashTempScopeItem, "scopePageHeader");
-            var backButton = findChild(findChild(dashTempScopeItemHeader, "innerPageHeader"), "customBackButton");
+            var backButton = findChild(dashTempScopeItemHeader, "innerPageHeader").leadingActionBar;
             mouseClick(backButton);
 
             // Check temp scope is gone
@@ -279,7 +279,7 @@
             // Go back
             var scopesList = findChild(dash, "scopesList");
             var scopesListPageHeader = findChild(scopesList, "pageHeader");
-            var backButton = findChild(findChild(scopesListPageHeader, "innerPageHeader"), "customBackButton");
+            var backButton = findChild(scopesListPageHeader, "innerPageHeader").leadingActionBar;
             mouseClick(backButton);
             tryCompare(bottomEdgeController, "progress", 0);
         }
@@ -391,7 +391,7 @@
             // Exit edit mode and go back
             var scopesList = findChild(dash, "scopesList");
             var scopesListPageHeader = findChild(scopesList, "pageHeader");
-            var backButton = findChild(findChild(scopesListPageHeader, "innerPageHeader"), "customBackButton");
+            var backButton = findChild(scopesListPageHeader, "innerPageHeader").leadingActionBar;
             mouseClick(backButton);
             mouseClick(backButton);
             tryCompare(bottomEdgeController, "progress", 0);
@@ -436,7 +436,7 @@
             // Exit edit mode
             var scopesList = findChild(dash, "scopesList");
             var scopesListPageHeader = findChild(scopesList, "pageHeader");
-            var backButton = findChild(findChild(scopesListPageHeader, "innerPageHeader"), "customBackButton");
+            var backButton = findChild(scopesListPageHeader, "innerPageHeader").leadingActionBar;
             mouseClick(backButton);
 
             // Click on third scope
@@ -546,7 +546,7 @@
 
             // Go back
             var dashTempScopeItemHeader = findChild(dashTempScopeItem, "scopePageHeader");
-            var backButton = findChild(findChild(dashTempScopeItemHeader, "innerPageHeader"), "customBackButton");
+            var backButton = findChild(dashTempScopeItemHeader, "innerPageHeader").leadingActionBar;
             mouseClick(backButton);
 
             // Check temp scope is gone
@@ -614,7 +614,7 @@
 
             // Go back
             var dashTempScopeItemHeader = findChild(dashTempScopeItem, "scopePageHeader");
-            var backButton = findChild(findChild(dashTempScopeItemHeader, "innerPageHeader"), "customBackButton");
+            var backButton = findChild(dashTempScopeItemHeader, "innerPageHeader").leadingActionBar;
             mouseClick(backButton);
 
             // Check temp scope is gone
@@ -646,7 +646,7 @@
 
             // Go back
             var dashTempScopeItemHeader = findChild(dashTempScopeItem, "scopePageHeader");
-            var backButton = findChild(findChild(dashTempScopeItemHeader, "innerPageHeader"), "customBackButton");
+            var backButton = findChild(dashTempScopeItemHeader, "innerPageHeader").leadingActionBar;
             mouseClick(backButton);
 
             // Check temp scope is gone
 
=== modified file 'tests/qmltests/Dash/tst_DashContent.qml'
--- tests/qmltests/Dash/tst_DashContent.qml	2016-03-29 03:47:39 +0000
+++ tests/qmltests/Dash/tst_DashContent.qml	2016-05-16 14:05:53 +0000
@@ -215,7 +215,7 @@
             verify(pageHeader, "Could not find the scope page header.");
             var innerHeader = findChild(pageHeader, "innerPageHeader");
             verify(innerHeader, "Could not find the scope page header.");
-            compare(innerHeader.config.title, scopesModel.getScope(data.index).name);
+            compare(innerHeader.title, scopesModel.getScope(data.index).name);
         }
 
         function test_is_active_data() {
@@ -515,10 +515,18 @@
         }
 
         function test_navigationShowFilterPopup() {
-            goToSecondLevel();
-
             var dashContentList = findChild(dashContent, "dashContentList");
+            var pageHeader = findChild(dashContentList.currentItem, "scopePageHeader")
             var settingsButton = findChild(dashContentList.currentItem, "settingsButton");
+            var searchButton = findChild(dashContentList.currentItem, "search_button");
+            var cancelButton = findChild(dashContentList.currentItem, "cancelButton");
+            var searchTextField = findChild(pageHeader, "searchTextField");
+            var peExtraPanel = findChild(dashContentList.currentItem, "peExtraPanel");
+            var headerContainer = findChild(pageHeader, "headerContainer");
+
+            // test that closing the filters popover without a search unfocuses and removes the navigation
+            mouseClick(searchButton);
+            tryCompare(peExtraPanel, "visible", true);
 
             var filtersPopover = findChild(shell, "filtersPopover")
             verify(!filtersPopover);
@@ -526,8 +534,33 @@
             mouseClick(settingsButton);
 
             filtersPopover = findChild(shell, "filtersPopover")
-
-            verify(filtersPopover);
+            verify(filtersPopover);
+
+            mouseClick(shell, shell.width - 1, shell.height - 1);
+
+            tryCompare(pageHeader.extraPanel, "visible", false);
+            tryCompare(headerContainer, "showSearch", true);
+            tryCompare(searchTextField, "focus", false);
+
+            mouseClick(cancelButton);
+            tryCompare(headerContainer, "showSearch", false);
+            tryCompare(headerContainer, "contentY", headerContainer.height);
+
+            // test within a navigation
+            goToSecondLevel();
+
+            filtersPopover = findChild(shell, "filtersPopover")
+            verify(!filtersPopover);
+
+            mouseClick(settingsButton);
+
+            filtersPopover = findChild(shell, "filtersPopover")
+            verify(filtersPopover);
+
+            mouseClick(shell, shell.width - 1, shell.height - 1);
+
+            tryCompare(pageHeader.extraPanel, "visible", false);
+            tryCompare(headerContainer, "showSearch", true);
         }
 
         function test_primaryFilter() {
@@ -625,5 +658,31 @@
             tryCompareFunction(function() { return dashContentList.currentItem.item.scope.id == nextScopeId; }, true);
             compare(dashContentList.currentIndex, 0);
         }
+
+        function test_extraPanel() {
+            var dashContentList = findChild(dashContent, "dashContentList");
+            var pageHeader = findChild(dashContentList.currentItem, "scopePageHeader")
+            pageHeader.searchEntryEnabled = true;
+            pageHeader.searchHistory.clear();
+
+            pageHeader.searchHistory.addQuery("Search1");
+            pageHeader.searchHistory.addQuery("Search2");
+
+            pageHeader.triggerSearch();
+            tryCompare(pageHeader.extraPanel, "visible", true);
+
+            var searchTextField = findChild(pageHeader, "searchTextField");
+            compare(searchTextField.focus, true);
+
+            var recentSearches = findChild(pageHeader.extraPanel, "recentSearchesRepeater");
+            verify(recentSearches, "Could not find recent searches");
+
+            waitForRendering(recentSearches);
+
+            mouseClick(recentSearches.itemAt(0));
+            compare(pageHeader.searchQuery, "Search2");
+            tryCompare(pageHeader.extraPanel, "visible", false);
+            compare(searchTextField.focus, false);
+        }
     }
 }
 
=== modified file 'tests/qmltests/Dash/tst_DashPageHeader.qml'
--- tests/qmltests/Dash/tst_DashPageHeader.qml	2016-03-29 03:47:39 +0000
+++ tests/qmltests/Dash/tst_DashPageHeader.qml	2016-05-16 14:05:53 +0000
@@ -147,30 +147,6 @@
             doResetSearch();
         }
 
-        function test_extraPanel() {
-            searchEnabled = true;
-            pageHeader.searchHistory.clear();
-
-            pageHeader.searchHistory.addQuery("Search1");
-            pageHeader.searchHistory.addQuery("Search2");
-
-            pageHeader.triggerSearch();
-
-            tryCompare(pageHeader.extraPanel, "visible", true);
-
-            var searchTextField = findChild(pageHeader, "searchTextField");
-            compare(searchTextField.focus, true);
-
-            var recentSearches = findChild(pageHeader.extraPanel, "recentSearchesRepeater");
-            verify(recentSearches, "Could not find recent searches");
-            waitForRendering(recentSearches);
-            mouseClick(recentSearches.itemAt(0));
-
-            compare(pageHeader.searchQuery, "Search2");
-            tryCompare(pageHeader.extraPanel, "visible", false);
-            compare(searchTextField.focus, false);
-        }
-
         function test_popup_closing_data() {
             return [
                         { tag: "with search text", searchText: "foobar", hideSearch: false },
 
=== modified file 'tests/qmltests/Dash/tst_GenericScopeView.qml'
--- tests/qmltests/Dash/tst_GenericScopeView.qml	2016-03-29 03:47:39 +0000
+++ tests/qmltests/Dash/tst_GenericScopeView.qml	2016-05-16 14:05:53 +0000
@@ -442,8 +442,8 @@
 
                 var innerHeader = findChild(header, "innerPageHeader");
                 verify(innerHeader, "Could not find the inner header");
-                verify(Qt.colorEqual(innerHeader.config.foregroundColor, data.foreground),
-                       "Foreground color not equal: %1 != %2".arg(innerHeader.config.foregroundColor).arg(data.foreground));
+                verify(Qt.colorEqual(innerHeader.__styleInstance.foregroundColor, data.foreground),
+                       "Foreground color not equal: %1 != %2".arg(innerHeader.__styleInstance.foregroundColor).arg(data.foreground));
 
                 var background = findChild(header, "headerBackground");
                 verify(background, "Could not find the background");
 
=== modified file 'tests/qmltests/Dash/tst_PreviewView.qml'
--- tests/qmltests/Dash/tst_PreviewView.qml	2016-03-29 03:47:39 +0000
+++ tests/qmltests/Dash/tst_PreviewView.qml	2016-05-16 14:05:53 +0000
@@ -98,7 +98,7 @@
             var header = findChild(view, "innerPageHeader");
             verify(header, "Could not find the preview header");
 
-            compare(header.config.title, "Mock Scope");
+            compare(header.title, "Mock Scope");
         }
 
         function test_header_style() {
@@ -107,8 +107,8 @@
 
             var innerHeader = findChild(header, "innerPageHeader");
             verify(innerHeader, "Could not find the inner header");
-            verify(Qt.colorEqual(innerHeader.config.foregroundColor, UbuntuColors.darkGrey),
-                   "Foreground color not equal: %1 != %2".arg(innerHeader.config.foregroundColor).arg(UbuntuColors.darkGrey));
+            verify(Qt.colorEqual(innerHeader.__styleInstance.foregroundColor, UbuntuColors.darkGrey),
+                   "Foreground color not equal: %1 != %2".arg(innerHeader.__styleInstance.foregroundColor).arg(UbuntuColors.darkGrey));
 
             var background = findChild(header, "headerBackground");
             verify(background, "Could not find the background");