Merge lp:~tpeeters/ubuntu-ui-toolkit/10-headAnimate into lp:ubuntu-ui-toolkit/staging

[Tim Peeters]

Add header animations

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:1210
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/889/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-ci/721
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/721
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/721/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-ci/721

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/889/rebuild

review: Approve (continuous-integration)

[Zsombor Egri (zsombi)]

Looks good, can go in.

review: Approve

[PS Jenkins bot (ps-jenkins)]

FAILED: Autolanding.
More details in the following jenkins job:
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-autolanding/457/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-autolanding/401/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-autolanding/401/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-autolanding/401/console

review: Needs Fixing (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

FAILED: Autolanding.
More details in the following jenkins job:
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-autolanding/458/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-autolanding/402/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-autolanding/402/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-autolanding/402/console

review: Needs Fixing (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:1212
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/910/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-ci/742
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/742
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/742/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-ci/742

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/910/rebuild

review: Approve (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

review: Approve (continuous-integration)

=== modified file 'modules/Ubuntu/Components/AppHeader.qml'
--- modules/Ubuntu/Components/AppHeader.qml	2014-07-17 10:59:18 +0000
+++ modules/Ubuntu/Components/AppHeader.qml	2014-08-26 11:42:43 +0000
@@ -37,6 +37,11 @@
      */
     property bool animate: true
 
+    /*!
+      Animate changing to new title/actions inside the header.
+     */
+    property bool animateContents: false
+
     Behavior on y {
         enabled: animate && !(header.flickable && header.flickable.moving)
         SmoothedAnimation {
 
=== modified file 'modules/Ubuntu/Components/Icon10.qml'
--- modules/Ubuntu/Components/Icon10.qml	2014-07-31 14:14:56 +0000
+++ modules/Ubuntu/Components/Icon10.qml	2014-08-26 11:42:43 +0000
@@ -83,7 +83,7 @@
         visible: active
 
         // Whether or not a color has been set.
-        property bool active: keyColorOut != Qt.rgba(0.0, 0.0, 0.0, 0.0)
+        property bool active: keyColorOut != Qt.rgba(0.0, 0.0, 0.0, 0.0) && source
 
         property Image source: active && image.status == Image.Ready ? image : null
         property color keyColorOut: Qt.rgba(0.0, 0.0, 0.0, 0.0)
 
=== modified file 'modules/Ubuntu/Components/MainView.qml'
--- modules/Ubuntu/Components/MainView.qml	2014-08-18 13:34:29 +0000
+++ modules/Ubuntu/Components/MainView.qml	2014-08-26 11:42:43 +0000
@@ -341,6 +341,7 @@
             id: headerItem
             property real bottomY: headerItem.y + headerItem.height
             animate: canvas.animate
+            animateContents: canvas.animate
 
             title: internal.activePage ? internal.activePage.title : ""
             flickable: internal.activePage ? internal.activePage.flickable : null
 
=== modified file 'modules/Ubuntu/Components/PageStack.qml'
--- modules/Ubuntu/Components/PageStack.qml	2014-08-12 10:03:13 +0000
+++ modules/Ubuntu/Components/PageStack.qml	2014-08-26 11:42:43 +0000
@@ -163,7 +163,6 @@
     function push(page, properties) {
         if (internal.stack.size() > 0) internal.stack.top().active = false;
         internal.stack.push(internal.createWrapper(page, properties));
-        internal.stack.top().active = true;
         internal.stackUpdated();
     }
 
@@ -181,8 +180,6 @@
         if (internal.stack.top().canDestroy) internal.stack.top().destroyObject();
         internal.stack.pop();
         internal.stackUpdated();
-
-        if (internal.stack.size() > 0) internal.stack.top().active = true;
     }
 
     /*!
@@ -216,9 +213,13 @@
         }
 
         function stackUpdated() {
-            pageStack.depth =+ stack.size();
-            if (pageStack.depth > 0) currentPage = stack.top().object;
-            else currentPage = null;
+            pageStack.depth = stack.size();
+            if (pageStack.depth > 0) {
+                internal.stack.top().active = true;
+                currentPage = stack.top().object;
+            } else {
+                currentPage = null;
+            }
         }
     }
 
 
=== modified file 'modules/Ubuntu/Components/PageWrapperUtils.js'
--- modules/Ubuntu/Components/PageWrapperUtils.js	2013-05-24 13:51:12 +0000
+++ modules/Ubuntu/Components/PageWrapperUtils.js	2014-08-26 11:42:43 +0000
@@ -101,8 +101,10 @@
  */
 function destroyObject(pageWrapper) {
     if (pageWrapper.canDestroy) {
-        pageWrapper.object.destroy();
         pageWrapper.object = null;
+        // Rely on garbage collector to destroy the object after all
+        // (other) references are gone. PageHeadStyle uses actions etc.
+        // of the page to show a fade-out animation after it was popped.
         pageWrapper.canDestroy = false;
     }
 }
 
=== modified file 'modules/Ubuntu/Components/Styles/PageHeadStyle.qml'
--- modules/Ubuntu/Components/Styles/PageHeadStyle.qml	2014-06-26 14:24:41 +0000
+++ modules/Ubuntu/Components/Styles/PageHeadStyle.qml	2014-08-26 11:42:43 +0000
@@ -53,7 +53,9 @@
     property int fontWeight
 
     /*!
+      \deprecated
       The color of the title text.
+      Use \l Page.head.foregroundColor instead.
      */
     property color textColor
 
 
=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/PageHeadStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/PageHeadStyle.qml	2014-08-26 11:42:42 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/PageHeadStyle.qml	2014-08-26 11:42:43 +0000
@@ -29,9 +29,127 @@
     textColor: styledItem.config.foregroundColor
     textLeftMargin: units.gu(2)
     maximumNumberOfActions: 3
+    objectName: "PageHeadStyle"
+
+    // workaround because autopilot cannot select the SequentalAnimation
+    // Needed in AppHeader.wait_for_animation() autopilot proxy object and
+    //  in tst_pagestack_new_header.qml unit test.
+    property bool animating: changeAnimation.running
 
     implicitHeight: headerStyle.contentHeight + separator.height + separatorBottom.height
 
+    Component.onCompleted: buffer.update()
+
+    Object {
+        id: buffer
+
+        property PageHeadConfiguration config
+        property string title
+        property Item pageStack: null
+        property int pageStackDepth: 0
+        property var tabsModel: null
+
+        function update() {
+            buffer.config = styledItem.config;
+            buffer.title = styledItem.title;
+            buffer.pageStack = styledItem.pageStack;
+            buffer.pageStackDepth = buffer.pageStack ? buffer.pageStack.depth : 0;
+            buffer.tabsModel = styledItem.tabsModel ? styledItem.tabsModel : null;
+        }
+
+        // Calling changeAnimation.start() a second time has no effect,
+        // so below we can call it whenever something changes.
+        Connections {
+            target: styledItem
+            onConfigChanged: buffer.updateConfigAndTitle()
+            onTitleChanged: buffer.updateConfigAndTitle()
+            onPageStackChanged: buffer.updateConfigAndTitle()
+            onTabsModelChanged: buffer.updateConfigAndTitle()
+        }
+
+        function updateConfigAndTitle() {
+            if (styledItem.animateContents) {
+                changeAnimation.start();
+            } else {
+                buffer.update();
+            }
+        }
+
+        SequentialAnimation {
+            id: changeAnimation
+            objectName: "changeAnimation"
+            ParallelAnimation {
+                UbuntuNumberAnimation {
+                    target: foreground
+                    property: "opacity"
+                    from: 1.0
+                    to: 0.0
+                }
+                UbuntuNumberAnimation {
+                    target: leftButtonContainer
+                    property: "opacity"
+                    from: 1.0
+                    to: 0.0
+                }
+                UbuntuNumberAnimation {
+                    target: actionsContainer
+                    property: "opacity"
+                    from: 1.0
+                    to: 0.0
+                }
+                UbuntuNumberAnimation {
+                    target: leftAnchor
+                    properties: "anchors.leftMargin"
+                    from: 0.0
+                    to: -units.gu(5)
+                }
+                UbuntuNumberAnimation {
+                    target: rightAnchor
+                    properties: "anchors.rightMargin"
+                    from: 0
+                    to: -units.gu(5)
+                }
+            }
+            ScriptAction {
+                script: {
+                    buffer.update();
+                }
+            }
+            ParallelAnimation {
+                UbuntuNumberAnimation {
+                    target: foreground
+                    property: "opacity"
+                    from: 0.0
+                    to: 1.0
+                }
+                UbuntuNumberAnimation {
+                    target: leftButtonContainer
+                    property: "opacity"
+                    from: 0.0
+                    to: 1.0
+                }
+                UbuntuNumberAnimation {
+                    target: actionsContainer
+                    property: "opacity"
+                    from: 0.0
+                    to: 1.0
+                }
+                UbuntuNumberAnimation {
+                    target: leftAnchor
+                    properties: "anchors.leftMargin"
+                    from: -units.gu(5)
+                    to: 0
+                }
+                UbuntuNumberAnimation {
+                    target: rightAnchor
+                    properties: "anchors.rightMargin"
+                    from: -units.gu(5)
+                    to: 0
+                }
+            }
+        }
+    }
+
     // FIXME: Workaround to get sectionsRepeater.count in autopilot tests,
     //  see also FIXME in AppHeader where this property is used.
     property alias __sections_repeater_for_autopilot: sectionsRepeater
@@ -46,7 +164,7 @@
         source: headerStyle.separatorSource
         height: sectionsRow.visible ? units.gu(3) : units.gu(2)
 
-        property PageHeadSections sections: styledItem.config.sections
+        property PageHeadSections sections: buffer.config.sections
 
         Row {
             id: sectionsRow
@@ -121,9 +239,30 @@
     }
 
     Item {
+        id: leftAnchor
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            left: parent.left
+            leftMargin: 0
+        }
+        width: 0
+    }
+    Item {
+        id: rightAnchor
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            right: parent.right
+            rightMargin: 0
+        }
+        width: 0
+    }
+
+    Item {
         id: leftButtonContainer
         anchors {
-            left: parent.left
+            left: leftAnchor.right
             top: parent.top
             leftMargin: width > 0 ? units.gu(1) : 0
         }
@@ -133,10 +272,10 @@
         PageHeadButton {
             id: customBackButton
             objectName: "customBackButton"
-            action: styledItem.config.backAction
-            visible: null !== styledItem.config.backAction &&
-                     styledItem.config.backAction.visible
-            color: styledItem.config.foregroundColor
+            action: buffer.config.backAction
+            visible: null !== buffer.config.backAction &&
+                     buffer.config.backAction.visible
+            color: buffer.config.foregroundColor
         }
 
         PageHeadButton {
@@ -144,16 +283,14 @@
             objectName: "backButton"
 
             iconName: "back"
-            visible: styledItem.pageStack !== null &&
-                     styledItem.pageStack !== undefined &&
-                     styledItem.pageStack.depth > 1 &&
-                     !styledItem.config.backAction
+            visible: buffer.pageStackDepth > 1 &&
+                     !buffer.config.backAction
 
             text: "back"
-            color: styledItem.config.foregroundColor
+            color: buffer.config.foregroundColor
 
             onTriggered: {
-                styledItem.pageStack.pop();
+                buffer.pageStack.pop();
             }
         }
 
@@ -162,12 +299,11 @@
             objectName: "tabsButton"
 
             iconName: "navigation-menu"
-            visible: styledItem.tabsModel !== null &&
-                     styledItem.tabsModel !== undefined &&
+            visible: buffer.tabsModel !== null &&
                      !backButton.visible &&
                      !customBackButton.visible
-            text: visible ? styledItem.tabsModel.count + " tabs" : ""
-            color: styledItem.config.foregroundColor
+            text: visible ? buffer.tabsModel.count + " tabs" : ""
+            color: buffer.config.foregroundColor
 
             onTriggered: PopupUtils.open(tabsPopoverComponent, tabsButton)
 
@@ -187,11 +323,11 @@
                             right: parent.right
                         }
                         Repeater {
-                            model: styledItem.tabsModel
+                            model: buffer.tabsModel
                             AbstractButton {
                                 objectName: "tabButton" + index
                                 onClicked: {
-                                    styledItem.tabsModel.selectedIndex = index;
+                                    buffer.tabsModel.selectedIndex = index;
                                     tabsPopover.hide();
                                 }
                                 implicitHeight: units.gu(6) + bottomDividerLine.height
@@ -224,7 +360,7 @@
                                 ListItem.ThinDivider {
                                     id: bottomDividerLine
                                     anchors.bottom: parent.bottom
-                                    visible: index < styledItem.tabsModel.count - 1
+                                    visible: index < buffer.tabsModel.count - 1
                                 }
                             }
                         }
@@ -238,12 +374,12 @@
         id: foreground
         anchors {
             left: leftButtonContainer.right
-            right: actionsContainer.left
             top: parent.top
             // don't keep a margin if there is already a button with spacing
             leftMargin: leftButtonContainer.width > 0 ? 0 : headerStyle.textLeftMargin
         }
         height: headerStyle.contentHeight
+        width: parent.width - leftButtonContainer.width - actionsContainer.width
 
         Label {
             objectName: "header_title_label"
@@ -254,10 +390,10 @@
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text: styledItem.title
+            text: buffer.title
             font.weight: headerStyle.fontWeight
             fontSize: headerStyle.fontSize
-            color: headerStyle.textColor
+            color: buffer.config.foregroundColor
             elide: Text.ElideRight
         }
 
@@ -267,7 +403,7 @@
             // when the bindings below is no longer active
             id: contentsContainer
             anchors.fill: parent
-            visible: styledItem.contents || styledItem.config.contents
+            visible: styledItem.contents || buffer.config.contents
         }
         Binding {
             target: styledItem.contents
@@ -282,17 +418,17 @@
             when: styledItem.contents
         }
         Binding {
-            target: styledItem.config.contents
+            target: buffer.config.contents
             property: "parent"
             value: contentsContainer
-            when: styledItem.config.contents && !styledItem.contents
+            when: buffer.config.contents && !styledItem.contents
         }
     }
 
     Row {
         id: actionsContainer
 
-        property var visibleActions: getVisibleActions(styledItem.config.actions)
+        property var visibleActions: getVisibleActions(buffer.config.actions)
         function getVisibleActions(actions) {
             var visibleActionList = [];
             for (var i in actions) {
@@ -316,7 +452,7 @@
 
         anchors {
             top: parent.top
-            right: parent.right
+            right: rightAnchor.left
             rightMargin: units.gu(1)
         }
         width: childrenRect.width
@@ -328,7 +464,7 @@
                 id: actionButton
                 objectName: action.objectName + "_header_button"
                 action: actionsContainer.visibleActions[index]
-                color: styledItem.config.foregroundColor
+                color: buffer.config.foregroundColor
             }
         }
 
@@ -337,8 +473,9 @@
             objectName: "actions_overflow_button"
             visible: numberOfSlots.requested > numberOfSlots.right
             iconName: "contextual-menu"
-            color: styledItem.config.foregroundColor
+            color: buffer.config.foregroundColor
             height: actionsContainer.height
+
             onTriggered: PopupUtils.open(actionsOverflowPopoverComponent, actionsOverflowButton)
 
             Component {
 
=== modified file 'tests/autopilot/ubuntuuitoolkit/_custom_proxy_objects/_header.py'
--- tests/autopilot/ubuntuuitoolkit/_custom_proxy_objects/_header.py	2014-08-20 06:45:28 +0000
+++ tests/autopilot/ubuntuuitoolkit/_custom_proxy_objects/_header.py	2014-08-26 11:42:43 +0000
@@ -67,6 +67,7 @@
             raise _common.ToolkitException('Old header has no sections')
 
         try:
+            self.wait_for_animation()
             object_name = "section_button_" + str(index)
             button = self.select_single(objectName=object_name)
         except dbus.StateNotFoundError:
@@ -79,6 +80,7 @@
         if self.useDeprecatedToolbar:
             raise _common.ToolkitException('Old header has no sections')
 
+        self.wait_for_animation()
         sectionsProperties = self.select_single(
             'QQuickItem', objectName='sectionsProperties')
         return sectionsProperties.selectedIndex
@@ -89,12 +91,14 @@
         if self.useDeprecatedToolbar:
             raise _common.ToolkitException('Old header has no back button')
         try:
+            self.wait_for_animation()
             back_button = self.select_single(objectName='backButton')
         except dbus.StateNotFoundError:
             raise _common.ToolkitException('Missing back button in header')
         if not back_button.visible:
             raise _common.ToolkitException('Back button in header not visible')
         self.pointing_device.click_object(back_button)
+        self.wait_for_animation()
 
     def click_custom_back_button(self):
         self._show_if_not_visible()
@@ -103,6 +107,7 @@
             raise _common.ToolkitException(
                 'Old header has no custom back button')
         try:
+            self.wait_for_animation()
             custom_back_button = self.select_single(
                 objectName='customBackButton')
         except dbus.StateNotFoundError:
@@ -112,6 +117,7 @@
             raise _common.ToolkitException(
                 'Custom back button in header not visible')
         self.pointing_device.click_object(custom_back_button)
+        self.wait_for_animation()
 
     def _get_animating(self):
         if self.useDeprecatedToolbar:
@@ -120,6 +126,14 @@
         else:
             return False
 
+    def wait_for_animation(self):
+        try:
+            style = self.select_single(objectName='PageHeadStyle')
+            style.animating.wait_for(False)
+        except dbus.StateNotFoundError:
+            raise _common.ToolkitException(
+                'AppHeader is not using the new PageHeadStyle')
+
     @autopilot_logging.log_action(logger.info)
     def switch_to_next_tab(self):
         """Open the next tab.
@@ -143,6 +157,7 @@
         self._get_animating().wait_for(False)
 
     def _switch_to_next_tab_in_drawer(self):
+        self.wait_for_animation()
         tabs_model_properties = self.select_single(
             'QQuickItem', objectName='tabsModelProperties')
         next_tab_index = (tabs_model_properties.selectedIndex
@@ -167,6 +182,7 @@
             self._switch_to_tab_in_drawer_by_index(index)
 
     def _switch_to_tab_in_drawer_by_index(self, index):
+        self.wait_for_animation()
         try:
             tabs_drawer_button = self.select_single(objectName='tabsButton')
         except dbus.StateNotFoundError:
@@ -187,6 +203,7 @@
                 "Tab button {0} not found.".format(index))
 
         self.pointing_device.click_object(tab_button)
+        self.wait_for_animation()
 
     def click_action_button(self, action_object_name):
         """Click an action button of the header.
@@ -200,8 +217,10 @@
 
         button = self._get_action_button(action_object_name)
         self.pointing_device.click_object(button)
+        self.wait_for_animation()
 
     def _get_action_button(self, action_object_name):
+        self.wait_for_animation()
         try:
             object_name = action_object_name + "_header_button"
             button = self.select_single(objectName=object_name)
 
=== modified file 'tests/autopilot/ubuntuuitoolkit/tests/components/test_header.py'
--- tests/autopilot/ubuntuuitoolkit/tests/components/test_header.py	2014-07-31 08:21:14 +0000
+++ tests/autopilot/ubuntuuitoolkit/tests/components/test_header.py	2014-08-26 11:42:43 +0000
@@ -81,6 +81,7 @@
             objectName='push_button')
         self.pointing_device.move_to_object(pushButton)
         self.pointing_device.click()
+        self.header.wait_for_animation()
 
         self.assertEqual(label.visible, False)
         headerContents = self.header.select_single(
@@ -94,6 +95,7 @@
             objectName='push_button')
         self.pointing_device.move_to_object(pushButton)
         self.pointing_device.click()
+        self.header.wait_for_animation()
 
         headerContents = self.header.select_single(
             objectName='orange_header_contents')
 
=== added file 'tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_tabs.TabsTestCase.deprecated_TabBar.qml'
--- tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_tabs.TabsTestCase.deprecated_TabBar.qml	1970-01-01 00:00:00 +0000
+++ tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_tabs.TabsTestCase.deprecated_TabBar.qml	2014-08-26 11:42:43 +0000
@@ -0,0 +1,61 @@
+/*
+ * Copyright 2014 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser 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 Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.2
+import Ubuntu.Components 1.1
+
+MainView {
+    width: units.gu(70)
+    height: units.gu(60)
+    useDeprecatedToolbar: true
+
+    Tabs {
+        id: tabs
+        Tab {
+            objectName: "tab1"
+            title: "Tab1"
+            Page {
+                tools: ToolbarItems {
+                    ToolbarButton {
+                        text: "Test1"
+                    }
+                }
+            }
+        }
+        Tab {
+            objectName: "tab2"
+            title: "Tab2"
+            Page {
+                tools: ToolbarItems {
+                    ToolbarButton {
+                        text: "Test2"
+                    }
+                }
+            }
+        }
+        Tab {
+            objectName: "tab3"
+            title: "Tab3"
+            Page {
+                tools: ToolbarItems {
+                    ToolbarButton {
+                        text: "Test3"
+                    }
+                }
+            }
+        }
+    }
+}
 
=== added file 'tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_tabs.TabsTestCase.new_header.qml'
--- tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_tabs.TabsTestCase.new_header.qml	1970-01-01 00:00:00 +0000
+++ tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_tabs.TabsTestCase.new_header.qml	2014-08-26 11:42:43 +0000
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2014 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser 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 Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.2
+import Ubuntu.Components 1.1
+
+MainView {
+    width: units.gu(70)
+    height: units.gu(60)
+    useDeprecatedToolbar: false
+
+    Tabs {
+        id: tabs
+        Tab {
+            objectName: "tab1"
+            title: "Tab1"
+            Page { }
+        }
+        Tab {
+            objectName: "tab2"
+            title: "Tab2"
+            Page { }
+        }
+        Tab {
+            objectName: "tab3"
+            title: "Tab3"
+            Page { }
+        }
+    }
+}
 
=== modified file 'tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_tabs.py'
--- tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_tabs.py	2014-06-02 23:21:48 +0000
+++ tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_tabs.py	2014-08-26 11:42:43 +0000
@@ -14,6 +14,8 @@
 # You should have received a copy of the GNU Lesser General Public License
 # along with this program. If not, see <http://www.gnu.org/licenses/>.
 
+import os
+
 try:
     from unittest import mock
 except ImportError:
@@ -23,64 +25,20 @@
 from ubuntuuitoolkit import tests
 
 
-TEST_TABS_QML_FORMAT = ("""
-import QtQuick 2.0
-import Ubuntu.Components 1.0
-
-MainView {{
-    width: units.gu(70)
-    height: units.gu(60)
-    useDeprecatedToolbar: {use_deprecated_toolbar}
-
-    Tabs {{
-        id: tabs
-        Tab {{
-            objectName: "tab1"
-            title: "Tab1"
-            Page {{
-                tools: ToolbarItems {{
-                    ToolbarButton {{
-                        text: "Test1"
-                    }}
-                }}
-            }}
-        }}
-        Tab {{
-            objectName: "tab2"
-            title: "Tab2"
-            Page {{
-                tools: ToolbarItems {{
-                    ToolbarButton {{
-                        text: "Test2"
-                    }}
-                }}
-            }}
-        }}
-        Tab {{
-            objectName: "tab3"
-            title: "Tab3"
-            Page {{
-                tools: ToolbarItems {{
-                    ToolbarButton {{
-                        text: "Test3"
-                    }}
-                }}
-            }}
-        }}
-    }}
-}}
-""")
-
-
-class TabsTestCase(tests.QMLStringAppTestCase):
+class TabsTestCase(tests.QMLFileAppTestCase):
+
+    path = os.path.abspath(__file__)
+    dir_path = os.path.dirname(path)
+    deprecated_tabbar_test_qml_file_path = os.path.join(
+        dir_path, 'test_tabs.TabsTestCase.deprecated_TabBar.qml')
+    new_header_test_qml_file_path = os.path.join(
+        dir_path, 'test_tabs.TabsTestCase.new_header.qml')
 
     scenarios = [
-        ('deprecated tabs', dict(
-            test_qml=TEST_TABS_QML_FORMAT.format(
-                use_deprecated_toolbar='true'))),
-        ('drawer tabs', dict(
-            test_qml=TEST_TABS_QML_FORMAT.format(
-                use_deprecated_toolbar='false')))
+        ('deprecated TabBar',
+         dict(test_qml_file_path=deprecated_tabbar_test_qml_file_path)),
+        ('new header',
+         dict(test_qml_file_path=new_header_test_qml_file_path))
     ]
 
     def test_tabs_custom_proxy_object(self):
 
=== modified file 'tests/resources/header/header.qml'
--- tests/resources/header/header.qml	2014-07-31 14:09:45 +0000
+++ tests/resources/header/header.qml	2014-08-26 11:42:43 +0000
@@ -206,12 +206,10 @@
             anchors.centerIn: parent
             text: "Use back button to return"
         }
-        tools: ToolbarItems {
-            ToolbarButton {
-                action: Action {
-                    iconName: "settings"
-                    text: "settings"
-                }
+        head {
+            actions: Action {
+                iconName: "settings"
+                text: "settings"
             }
         }
     }
 
=== modified file 'tests/resources/navigation/MyCustomPage.qml'
--- tests/resources/navigation/MyCustomPage.qml	2014-08-26 11:42:42 +0000
+++ tests/resources/navigation/MyCustomPage.qml	2014-08-26 11:42:43 +0000
@@ -15,7 +15,7 @@
  */
 
 import QtQuick 2.0
-import Ubuntu.Components 1.0
+import Ubuntu.Components 1.1
 
 Page {
     title: i18n.tr("My custom page")
@@ -30,32 +30,24 @@
                 horizontalCenter: parent.horizontalCenter
             }
 
-            text: i18n.tr("This is an external page\nwith a locked toolbar.")
+            text: i18n.tr("This is an external page.")
             color: "#757373"
         }
     }
 
-    tools: ToolbarItems {
-        ToolbarButton {
-            action: Action {
-                text: "action 1"
-                iconName: "outgoing-call"
-            }
-        }
-        ToolbarButton {
-            action: Action {
-                text: "action 2"
-                iconName: "missed-call"
-            }
-        }
-        ToolbarButton {
-            action: Action {
-                text: "another one"
-                iconSource: "call_icon.png"
-            }
-        }
-
-        opened: true
-        locked: true
-    }
+    head.actions: [
+        Action {
+            text: "action 1"
+            iconName: "outgoing-call"
+        },
+        Action {
+            text: "action 2"
+            iconSource: "call_icon.png"
+            iconName: "missed-call"
+        },
+        Action {
+            text: "another one"
+            iconName: "contact"
+        }
+    ]
 }
 
=== modified file 'tests/unit_x11/tst_components/tst_headActions.qml'
--- tests/unit_x11/tst_components/tst_headActions.qml	2014-07-28 18:41:55 +0000
+++ tests/unit_x11/tst_components/tst_headActions.qml	2014-08-26 11:42:43 +0000
@@ -64,39 +64,52 @@
         property var app_header
         property var back_button
         property var custom_back_button
+        property var head_animation
 
         function initTestCase() {
             testCase.app_header = findChild(mainView, "MainView_Header");
             testCase.back_button = findChild(app_header, "backButton");
             testCase.custom_back_button = findChild(app_header, "customBackButton");
+            testCase.head_animation = findChild(app_header, "PageHeadStyle");
 
+            waitHeadAnimation();
             compare(page2.head.backAction, null, "Back action set by default.");
             compare(back_button.visible, false, "Back button visible with only 1 page on the stack.");
             compare(custom_back_button.visible, false, "Custom back button visible without custom back action.")
         }
 
+        function waitHeadAnimation() {
+            tryCompareFunction(function(){return testCase.head_animation.animating}, false);
+        }
+
         function test_default_back_button() {
             pageStack.push(page2);
+            waitHeadAnimation();
             compare(back_button.visible, true, "Back button not visible with 2 pages on stack.");
             compare(custom_back_button.visible, false, "Showing custom back button without custom back action.");
             pageStack.pop();
+            waitHeadAnimation();
         }
 
         function test_custom_back_button() {
             page2.head.backAction = customBackAction;
             pageStack.push(page2);
+            waitHeadAnimation();
             compare(back_button.visible, false, "Default back button visible with custom back action.");
             compare(custom_back_button.visible, true, "Custom back button invisible with back action.");
             pageStack.pop();
+            waitHeadAnimation();
             page2.head.backAction = null;
         }
 
         function test_no_back_button() {
             page2.head.backAction = invisibleAction;
             pageStack.push(page2);
+            waitHeadAnimation();
             compare(back_button.visible, false, "Default back button visible with invisible custom back action.");
             compare(custom_back_button.visible, false, "Custom back button visible with invisible custom back action.");
             pageStack.pop();
+            waitHeadAnimation();
             page2.head.backAction = null;
         }
     }
 
=== modified file 'tests/unit_x11/tst_components/tst_pagestack_new_header.qml'
--- tests/unit_x11/tst_components/tst_pagestack_new_header.qml	2014-08-18 10:40:45 +0000
+++ tests/unit_x11/tst_components/tst_pagestack_new_header.qml	2014-08-26 11:42:43 +0000
@@ -27,6 +27,7 @@
 
     MainView {
         id: mainView
+        anchors.fill: parent
         useDeprecatedToolbar: false
         PageStack {
             id: pageStack
@@ -65,7 +66,13 @@
         when: windowShown
         id: testCase
 
+        function waitPageHeadAnimation() {
+            var pageHeadStyle = findChild(mainView, "PageHeadStyle");
+            tryCompare(pageHeadStyle, "animating", false);
+        }
+
         function initTestCase() {
+            waitPageHeadAnimation();
             compare(pageStack.currentPage, null, "is not set by default");
             compare(pageStack.__propagated, mainView.__propagated, "propagated property of pageStack equals mainView.__propagated")
             compare(mainView.__propagated.header.title, "", "empty title by default");
@@ -74,55 +81,73 @@
         function test_depth() {
             compare(pageStack.depth, 0, "depth is 0 by default");
             pageStack.push(page1);
+            waitPageHeadAnimation();
             compare(pageStack.depth, 1, "depth is correctly increased when pushing a page");
             pageStack.push(page2);
+            waitPageHeadAnimation();
             compare(pageStack.depth, 2, "depth is correctly updated when pushing a page");
             pageStack.pop();
+            waitPageHeadAnimation();
             compare(pageStack.depth, 1, "depth is correctly decreased when popping a page");
             pageStack.clear();
+            waitPageHeadAnimation();
             compare(pageStack.depth, 0, "depth is after clearing");
         }
 
         function test_currentPage() {
             compare(pageStack.currentPage, null, "currentPage is null by default");
             pageStack.push(page1);
+            waitPageHeadAnimation();
             compare(pageStack.currentPage, page1, "currentPage properly updated");
             pageStack.clear();
+            waitPageHeadAnimation();
             compare(pageStack.currentPage, null, "currentPage properly reset");
         }
 
         function test_active_bug1260116() {
             pageStack.push(page1);
+            waitPageHeadAnimation();
             compare(page1.active, true, "Page is active after pushing");
             pageStack.push(page2);
+            waitPageHeadAnimation();
             compare(page1.active, false, "Page no longer active after pushing a new page");
             compare(page2.active, true, "New page is active after pushing");
             pageStack.pop();
+            waitPageHeadAnimation();
             compare(page1.active, true, "Page re-activated when on top of the stack");
             compare(page2.active, false, "Page no longer active after being popped");
             pageStack.clear();
+            waitPageHeadAnimation();
 
             compare(pageInStack.active, false, "Page defined inside PageStack is not active by default");
             pageStack.push(pageInStack);
+            waitPageHeadAnimation();
             compare(pageInStack.active, true, "Pushing a page on PageStack makes it active");
             pageStack.pop();
+            waitPageHeadAnimation();
             compare(pageInStack.active, false, "Popping a page from PageStack makes it inactive");
             pageStack.clear();
+            waitPageHeadAnimation();
         }
 
         function test_title_bug1143345_bug1317902() {
             pageStack.push(page1);
+            waitPageHeadAnimation();
             compare(mainView.__propagated.header.title, "Title 1", "Header title is correctly set by page");
             page1.title = "New title";
             compare(mainView.__propagated.header.title, "New title", "Header title correctly updated by page");
             pageStack.push(page2);
+            waitPageHeadAnimation();
             compare(mainView.__propagated.header.title, "Title 2", "Header title is correctly set by page");
             pageStack.clear();
+            waitPageHeadAnimation();
             page1.title = "Title 1";
 
             pageStack.push(pageWithPage);
+            waitPageHeadAnimation();
             compare(mainView.__propagated.header.title, pageWithPage.title, "Embedded page sets title of outer page");
             pageStack.clear();
+            waitPageHeadAnimation();
         }
 
         function get_tabs_button() {
@@ -134,28 +159,36 @@
         function test_tabs_inside_stack_bug1187850() {
             compare(get_tabs_button(), null, "Without tabs there is no visible tabs button.");
             pageStack.push(tabs);
+            waitPageHeadAnimation();
             compare(pageStack.currentPage, tabs, "Tabs can be pushed on a PageStack");
             compare(tabs.active, true, "Tabs on top of a PageStack are active");
             compare(get_tabs_button().visible, true, "Pushing tabs on pagestack enables the tabs button");
             pageStack.push(page1);
+            waitPageHeadAnimation();
             compare(pageStack.currentPage, page1, "A page can be pushed on top of a Tabs");
             compare(tabs.active, false, "Tabs on a PageStack, but not on top, are inactive");
             compare(get_tabs_button(), null, "Contents of inactive Tabs is not applied to header");
             pageStack.pop();
+            waitPageHeadAnimation();
             compare(tabs.active, true, "Tabs on top of PageStack is active");
             compare(get_tabs_button().visible, true, "Active Tabs controls header contents");
             pageStack.clear();
+            waitPageHeadAnimation();
         }
 
         function test_pop_to_tabs_bug1316736() {
             pageStack.push(tabs);
+            waitPageHeadAnimation();
             tabs.selectedTabIndex = 1;
             pageStack.push(page1);
+            waitPageHeadAnimation();
             compare(tabs.active, false, "Tabs on a PageStack, but not on top, are inactive");
             pageStack.pop();
+            waitPageHeadAnimation();
             compare(tabs.active, true, "Tabs on top of PageStack is active");
             compare(tabs.selectedTabIndex, 1, "Pushing and popping another page on top of Tabs does not change selectedTabsIndex");
             pageStack.clear();
+            waitPageHeadAnimation();
         }
     }
 }