Ubuntu UI Toolkit

components.api (+1/-0)
modules/Ubuntu/Components/Header.qml (+19/-2)
modules/Ubuntu/Components/MainView.qml (+9/-1)
modules/Ubuntu/Components/Page.qml (+1/-1)
modules/Ubuntu/Components/Themes/Ambiance/NewHeaderStyle.qml (+146/-0)
modules/Ubuntu/Components/Themes/Ambiance/qmldir (+1/-0)
tests/autopilot/ubuntuuitoolkit/emulators.py (+93/-20)
tests/autopilot/ubuntuuitoolkit/tests/test_emulators.py (+42/-32)
tests/resources/navigation/SimpleTabs.qml (+2/-0)
tests/resources/navigation/Tabs.qml (+4/-2)

To merge this branch:

bzr merge lp:~tpeeters/ubuntu-ui-toolkit/30-optIn-tabsDrawer

Related bugs:

Bug #1228042: Flickable anchor margins changes when you push/pop a page	Critical	Fix Released
Bug #1273187: Tabs in drawer	Critical	Fix Released

Link a bug report

Reviewer	Review Type	Date Requested	Status
Zsombor Egri		2014-04-23	Approve on 2014-04-25
PS Jenkins bot	continuous-integration		Approve on 2014-04-24
Review via email: mp+216960@code.launchpad.net

Commit message

First version of the tabs in a drawer.

Description of the change

First version of the tabs in a drawer.

lp:~tpeeters/ubuntu-ui-toolkit/30-optIn-tabsDrawer updated on 2014-04-23

989. By Tim Peeters on 2014-04-23: link bugs

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-04-23:

FAILED: Continuous integration, rev:988
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/78/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-trusty-touch/392/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/5018/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-trusty-amd64-ci/78/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-trusty-armhf-ci/78/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-trusty-i386-ci/78/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/4630/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/5201/console

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

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-04-23:

FAILED: Continuous integration, rev:989
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/79/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-trusty-touch/393/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/5019/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-trusty-amd64-ci/79/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-trusty-armhf-ci/79/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-trusty-i386-ci/79/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/4631/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/5203/console

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

review: Needs Fixing (continuous-integration)

lp:~tpeeters/ubuntu-ui-toolkit/30-optIn-tabsDrawer updated on 2014-04-24

990. By Tim Peeters on 2014-04-24: improve AP test and fix flake8 warning
991. By Tim Peeters on 2014-04-24: no need to document something obvious
992. By Tim Peeters on 2014-04-24: fix spelling in comment
993. By Tim Peeters on 2014-04-24: update components.api

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-04-24:

29 + property bool useDeprecatedToolbar: true
Is this a name you want to keep there fro the next 5-10 years? :) if it is just a temporary use, use __useDeprecatedToolbar.

On the other hand, as we discussed on mumble, toolbar might be turned back on desktop, so in case we want to keep the API as stable, we need to chose a better name for it.

review: Needs Information

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-04-24:

Living in the past? :)

review: Needs Fixing

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-04-24:

89 +import Ubuntu.Components 0.1
90 +import Ubuntu.Components.Popups 0.1
91 +import Ubuntu.Components.ListItems 0.1 as ListItem

Please import 1.0 everywhere!

review: Needs Fixing

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-04-24:

useDeprecatedToolbar property was added to Header only, which is not part of the public API. Header should be internal (but it is not defined like that in qmldir, I don't see why not, maybe unity8 was using it?).

MainView useDeprecatedToolbar already landed in trunk some time ago.

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-04-24:

Also, do you see the header style API is stable enough? if yes, maybe we should get the ComboButton first and add the style API doc there as well.

review: Needs Fixing

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-04-24:

101 + /*!
102 + The source of the image that separates the header from the contents of a \l MainView.
103 + The separator will be drawn over the contents.
104 + */
105 + property url separatorSource: "artwork/PageHeaderBaseDividerLight.sci"
106 +
107 + /*!
108 + The source of an additional image attached to the bottom of the separator. The contents
109 + of the \l MainView will be drawn on top of the separator bottom image.
110 + */
111 + property url separatorBottomSource: "artwork/PageHeaderBaseDividerBottom.png"

I do not see these should be part of the style API...

lp:~tpeeters/ubuntu-ui-toolkit/30-optIn-tabsDrawer updated on 2014-04-24

994. By Tim Peeters on 2014-04-24: update imports of Ubuntu.Components to 1.0

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-04-24:

> Also, do you see the header style API is stable enough? if yes, maybe we
> should get the ComboButton first and add the style API doc there as well.

HeaderStyle implementation will depend on Header API. We decided not to work out the full new API for header stuff yet before the sprint, so I propose to wait until after that.

NewHeaderStyle is not a completely new API. It is a copy of HeaderStyle, with some additions. Eventually I think we will remove HeaderStyle and rename NewHeaderStyle to HeaderStyle when we don't need the TabBar any more.

lp:~tpeeters/ubuntu-ui-toolkit/30-optIn-tabsDrawer updated on 2014-04-24

995. By Tim Peeters on 2014-04-24: update comments

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-04-24:

FAILED: Continuous integration, rev:991
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/83/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-trusty-touch/400/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/5025/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-trusty-amd64-ci/83/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-trusty-armhf-ci/83/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-trusty-i386-ci/83/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/4644/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/5213/console

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

review: Needs Fixing (continuous-integration)

lp:~tpeeters/ubuntu-ui-toolkit/30-optIn-tabsDrawer updated on 2014-04-24

996. By Tim Peeters on 2014-04-24: fix test program

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-04-24:

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

review: Approve (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-04-24:

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

review: Approve (continuous-integration)

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-04-24:

I discussed combining pagestack and tabs with Benjamin Keyser, and he agrees that you cannot have flat nav below deep nav (so don't push Tabs on a PageStack), because that would be confusing for the user. This matches the statement "We don’t combine flat with deep navigation in the same view." from http://design.ubuntu.com/apps/global-patterns/navigation

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-04-24:

> 101 + /*!
> 102 + The source of the image that separates the header from the
> contents of a \l MainView.
> 103 + The separator will be drawn over the contents.
> 104 + */
> 105 + property url separatorSource:
> "artwork/PageHeaderBaseDividerLight.sci"
> 106 +
> 107 + /*!
> 108 + The source of an additional image attached to the bottom of the
> separator. The contents
> 109 + of the \l MainView will be drawn on top of the separator bottom
> image.
> 110 + */
> 111 + property url separatorBottomSource:
> "artwork/PageHeaderBaseDividerBottom.png"
>
> I do not see these should be part of the style API...

NewHeaderStyle is a copy of HeaderStyle, with some new things added. I didn't rewrite what is there already to make the API better. Let's make this style API public after Malta.

lp:~tpeeters/ubuntu-ui-toolkit/30-optIn-tabsDrawer updated on 2014-04-24

998. By Tim Peeters on 2014-04-24: merge staging

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-04-24:

I tested the tabs in gallery-app and clock-app on device (with useDeprecatedToolbar: false in MainView) and it works fine :)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-04-24:

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

review: Approve (continuous-integration)

lp:~tpeeters/ubuntu-ui-toolkit/30-optIn-tabsDrawer updated on 2014-04-24

999. By Tim Peeters on 2014-04-24: merge staging :) 20- is in there now

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-04-24:

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

review: Approve (continuous-integration)

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-04-25:

Ok, good to go now!

review: Approve

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:

Dan Chapman 

Leo Arias

Tim Peeters

Tom Mirmar

Ubuntu SDK team

 === modified file 'components.api'
 --- components.api	2014-04-24 18:39:13 +0000
 +++ components.api	2014-04-24 20:35:57 +0000
@@ -62,6 +62,7 @@
      property Item contents
      property var tabsModel
      property Flickable flickable
++    property bool useDeprecatedToolbar
  Icon 0.1 1.0
  Item
      property string name
 === modified file 'modules/Ubuntu/Components/Header.qml'
 --- modules/Ubuntu/Components/Header.qml	2014-04-23 18:14:56 +0000
 +++ modules/Ubuntu/Components/Header.qml	2014-04-24 20:35:57 +0000
@@ -1,5 +1,5 @@
  /*
-- * Copyright 2013 Canonical Ltd.
++ * Copyright 2013-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
@@ -94,6 +94,17 @@
       */
      property var tabsModel: null
++    // FIXME: Currently autopilot can only get visual items, but once bug #1273956
++    //  is fixed to support non-visual items, a QtObject may be used.
++    //  --timp - 2014-03-20
++    Item {
++        // FIXME: This is a workaround to be able to get the properties of
++        //  tabsModel in an autopilot test.
++        objectName: "tabsModelProperties"
++        property int count: tabsModel ? tabsModel.count : 0
++        property int selectedIndex: tabsModel ? tabsModel.selectedIndex : -1
++    }
++
      /*!
        The flickable that controls the movement of the header.
        Will be set automatically by Pages inside a MainView, but can
@@ -106,6 +117,11 @@
          header.show();
+     }
++    /*!
++      Set by \l MainView
++     */
++    property bool useDeprecatedToolbar: true
++
      QtObject {
          id: internal
@@ -193,5 +209,6 @@
+         }
+     }
--    style: Theme.createStyleComponent("HeaderStyle.qml", header)
++    style: header.useDeprecatedToolbar ? Theme.createStyleComponent("HeaderStyle.qml", header) :
++                                         Theme.createStyleComponent("NewHeaderStyle.qml", header)
+ }
 === modified file 'modules/Ubuntu/Components/MainView.qml'
 --- modules/Ubuntu/Components/MainView.qml	2014-04-23 18:14:56 +0000
 +++ modules/Ubuntu/Components/MainView.qml	2014-04-24 20:35:57 +0000
@@ -1,5 +1,5 @@
  /*
-- * Copyright 2012-2013 Canonical Ltd.
++ * Copyright 2012-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
@@ -380,6 +380,8 @@
                          window.title = headerItem.title
+                 }
+             }
++
++            useDeprecatedToolbar: mainView.useDeprecatedToolbar
+         }
          Connections {
@@ -448,6 +450,12 @@
          /*!
            \internal
++          Tabs needs to know whether to use a TabBar or the new header.
++         */
++        property alias useDeprecatedToolbar: mainView.useDeprecatedToolbar
++
++        /*!
++          \internal
            The action manager that has the global context for the MainView's actions,
            and to which a local context can be added for each Page that has actions.actions.
           */
 === modified file 'modules/Ubuntu/Components/Page.qml'
 --- modules/Ubuntu/Components/Page.qml	2014-04-20 19:25:12 +0000
 +++ modules/Ubuntu/Components/Page.qml	2014-04-24 20:35:57 +0000
@@ -1,5 +1,5 @@
  /*
-- * Copyright 2012 Canonical Ltd.
++ * Copyright 2012-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
 === added file 'modules/Ubuntu/Components/Themes/Ambiance/NewHeaderStyle.qml'
 --- modules/Ubuntu/Components/Themes/Ambiance/NewHeaderStyle.qml	1970-01-01 00:00:00 +0000
 +++ modules/Ubuntu/Components/Themes/Ambiance/NewHeaderStyle.qml	2014-04-24 20:35:57 +0000
@@ -0,0 +1,146 @@
++/*
++ * 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.0
++import Ubuntu.Components 1.0
++import Ubuntu.Components.Popups 1.0
++import Ubuntu.Components.ListItems 1.0 as ListItem
++
++Item {
++    id: headerStyle
++    /*!
++      The height of the headercontents, which is the full height of
++      the header minus the separators shown at the bottom of it.
++     */
++    property real contentHeight: units.gu(7.5)
++
++    /*!
++      The source of the image that separates the header from the contents of a \l MainView.
++      The separator will be drawn over the contents.
++     */
++    property url separatorSource: "artwork/PageHeaderBaseDividerLight.sci"
++
++    /*!
++      The source of an additional image attached to the bottom of the separator. The contents
++      of the \l MainView will be drawn on top of the separator bottom image.
++     */
++    property url separatorBottomSource: "artwork/PageHeaderBaseDividerBottom.png"
++
++    property int fontWeight: Font.Light
++    property string fontSize: "x-large"
++    property color textColor: Theme.palette.selected.backgroundText
++    property real textLeftMargin: units.gu(2)
++
++    implicitHeight: headerStyle.contentHeight + separator.height + separatorBottom.height
++
++    BorderImage {
++        id: separator
++        anchors {
++            bottom: parent.bottom
++            left: parent.left
++            right: parent.right
++        }
++        source: headerStyle.separatorSource
++    }
++    Image {
++        id: separatorBottom
++        anchors {
++            top: separator.bottom
++            left: parent.left
++            right: parent.right
++        }
++        source: headerStyle.separatorBottomSource
++    }
++
++    Item {
++        id: leftButtonContainer
++        anchors {
++            left: parent.left
++            top: parent.top
++            bottom: parent.bottom
++        }
++        width: childrenRect.width
++
++        AbstractButton {
++            id: tabsButton
++            objectName: "tabsButton"
++            height: parent ? parent.height : undefined
++            width: visible ? units.gu(5) : 0
++
++            iconName: "navigation-menu"
++            visible: styledItem.tabsModel !== null
++            text: visible ? styledItem.tabsModel.count + " tabs" : ""
++
++            // FIXME: We currently use an AbstractButton with ToolbarButtonStyle because
++            //  a ToolbarButton does not have its own MouseArea to handle interaction,
++            //  that was done in the Toolbar.
++            style: Theme.createStyleComponent("ToolbarButtonStyle.qml", tabsButton)
++
++            onTriggered: {
++                tabsPopover.show();
++            }
++
++            Popover {
++                id: tabsPopover
++                objectName: "tabsPopover"
++                parent: QuickUtils.rootItem(tabsPopover)
++                caller: tabsButton
++                Column {
++                    anchors {
++                        left: parent.left
++                        top: parent.top
++                        right: parent.right
++                    }
++                    Repeater {
++                        model: styledItem.tabsModel
++                        ListItem.Standard {
++                            visible: index !== styledItem.tabsModel.selectedIndex
++                            text: tab.title // FIXME: only "title" doesn't work with i18n.tr(). Why not?
++                            objectName: "tabButton" + index
++                            onClicked: {
++                                styledItem.tabsModel.selectedIndex = index;
++                                tabsPopover.hide();
++                            }
++                        }
++                    }
++                }
++            }
++        }
++    }
++
++    Item {
++        id: foreground
++        anchors {
++            left: leftButtonContainer.right
++            right: parent.right
++            top: parent.top
++        }
++        height: headerStyle.contentHeight
++
++        Label {
++            LayoutMirroring.enabled: Qt.application.layoutDirection == Qt.RightToLeft
++
++            anchors {
++                left: parent.left
++                verticalCenter: parent.verticalCenter
++                leftMargin: headerStyle.textLeftMargin
++            }
++            text: styledItem.title
++            font.weight: headerStyle.fontWeight
++            fontSize: headerStyle.fontSize
++            color: headerStyle.textColor
++        }
++    }
++}
 === modified file 'modules/Ubuntu/Components/Themes/Ambiance/qmldir'
 --- modules/Ubuntu/Components/Themes/Ambiance/qmldir	2013-12-04 10:47:19 +0000
 +++ modules/Ubuntu/Components/Themes/Ambiance/qmldir	2014-04-24 20:35:57 +0000
@@ -4,6 +4,7 @@
  internal CheckBoxStyle CheckBoxStyle.qml
  internal DialogForegroundStyle DialogForegroundStyle.qml
  internal HeaderStyle HeaderStyle.qml
++internal NewHeaderStyle NewHeaderStyle.qml
  MainViewStyle 0.1 MainViewStyle.qml
  ListItemOptionSelector 0.1 ListItemOptionSelector.qml
  OptionSelectorStyle 0.1 OptionSelectorStyle.qml
 === modified file 'tests/autopilot/ubuntuuitoolkit/emulators.py'
 --- tests/autopilot/ubuntuuitoolkit/emulators.py	2014-04-14 22:01:49 +0000
 +++ tests/autopilot/ubuntuuitoolkit/emulators.py	2014-04-24 20:35:57 +0000
@@ -143,20 +143,12 @@
          current_tab.visible.wait_for(True)
          return current_tab
--    @autopilot_logging.log_action(logger.info)
--    def switch_to_tab_by_index(self, index):
--        """Open a tab.
--
--        :parameter index: The index of the tab to open.
--        :return: The newly opened tab.
--        :raise ToolkitEmulatorException: If the tab index is out of range.
--
--        """
--        logger.debug('Switch to tab with index {0}.'.format(index))
++    def _switch_to_tab_in_deprecated_tabbar_by_index(self, index):
          tabs = self.get_tabs()
          number_of_tabs = tabs.get_number_of_tabs()
          if index >= number_of_tabs:
              raise ToolkitEmulatorException('Tab index out of range.')
++
          current_tab = tabs.get_current_tab()
          number_of_switches = 0
          while not tabs.selectedTabIndex == index:
@@ -171,6 +163,33 @@
              number_of_switches += 1
          return current_tab
++    def _switch_to_tab_in_drawer_by_index(self, index):
++        tabs = self.get_tabs()
++        number_of_tabs = tabs.get_number_of_tabs()
++        if index >= number_of_tabs:
++            raise ToolkitEmulatorException('Tab index out of range.')
++
++        if (index != tabs.selectedTabIndex):
++            self.get_header().switch_to_tab_by_index(index)
++        current_tab = tabs.get_current_tab()
++        return current_tab
++
++    @autopilot_logging.log_action(logger.info)
++    def switch_to_tab_by_index(self, index):
++        """Open a tab.
++
++        :parameter index: The index of the tab to open.
++        :return: The newly opened tab.
++        :raise ToolkitEmulatorException: If the tab index is out of range.
++
++        """
++        logger.debug('Switch to tab with index {0}.'.format(index))
++
++        if (self.useDeprecatedToolbar):
++            return self._switch_to_tab_in_deprecated_tabbar_by_index(index)
++        else:
++            return self._switch_to_tab_in_drawer_by_index(index)
++
      @autopilot_logging.log_action(logger.info)
      def switch_to_previous_tab(self):
          """Open the previous tab.
@@ -226,16 +245,13 @@
          self.pointing_device = get_pointing_device()
      def _get_animating(self):
--        tab_bar_style = self.select_single('TabBarStyle')
--        return tab_bar_style.animating
--
--    @autopilot_logging.log_action(logger.info)
--    def switch_to_next_tab(self):
--        """Open the next tab.
--
--        :raise ToolkitEmulatorException: If the main view has no tabs.
--
--        """
++        if (self.useDeprecatedToolbar):
++            tab_bar_style = self.select_single('TabBarStyle')
++            return tab_bar_style.animating
++        else:
++            return False
++
++    def _switch_to_next_tab_in_deprecated_tabbar(self):
          try:
              tab_bar = self.select_single(TabBar)
          except dbus.StateNotFoundError:
@@ -243,6 +259,63 @@
          tab_bar.switch_to_next_tab()
          self._get_animating().wait_for(False)
++    def _switch_to_next_tab_in_drawer(self):
++        tabs_model_properties = self.select_single(
++            'QQuickItem', objectName='tabsModelProperties')
++        next_tab_index = (tabs_model_properties.selectedIndex
++                          + 1) % tabs_model_properties.count
++        self._switch_to_tab_in_drawer_by_index(next_tab_index)
++
++    @autopilot_logging.log_action(logger.info)
++    def switch_to_next_tab(self):
++        """Open the next tab.
++
++        :raise ToolkitEmulatorException: If the main view has no tabs.
++
++        """
++        if (self.useDeprecatedToolbar):
++            self._switch_to_next_tab_in_deprecated_tabbar()
++        else:
++            self._switch_to_next_tab_in_drawer()
++
++    def _switch_to_tab_in_drawer_by_index(self, index):
++        try:
++            tabs_drawer_button = self.select_single(
++                'AbstractButton', objectName='tabsButton')
++        except dbus.StateNotFoundError:
++            raise ToolkitEmulatorException(_NO_TABS_ERROR)
++        self.pointing_device.click_object(tabs_drawer_button)
++
++        tabs_model_properties = self.select_single(
++            'QQuickItem', objectName='tabsModelProperties')
++
++        if (tabs_model_properties.selectedIndex == index):
++            return
++
++        try:
++            tab_button = self.get_root_instance().select_single(
++                'Standard', objectName='tabButton' + str(index))
++        except dbus.StateNotFoundError:
++            raise ToolkitEmulatorException(
++                "Tab button {0} not found.".format(index))
++
++        self.pointing_device.click_object(tab_button)
++
++    @autopilot_logging.log_action(logger.info)
++    def switch_to_tab_by_index(self, index):
++        """Open a tab. This only supports the new tabs in the header
++
++        :parameter index: The index of the tab to open.
++        :raise ToolkitEmulatorException: If the tab index is out of range or
++                useDeprecatedToolbar is set.
++
++        """
++        if (self.useDeprecatedToolbar):
++            raise ToolkitEmulatorException(
++                "Header.swtich_to_tab_by_index only works with new header")
++        else:
++            self._switch_to_tab_in_drawer_by_index(index)
++
  class Toolbar(UbuntuUIToolkitEmulatorBase):
      """Toolbar Autopilot emulator."""
 === modified file 'tests/autopilot/ubuntuuitoolkit/tests/test_emulators.py'
 --- tests/autopilot/ubuntuuitoolkit/tests/test_emulators.py	2014-04-20 19:25:12 +0000
 +++ tests/autopilot/ubuntuuitoolkit/tests/test_emulators.py	2014-04-24 20:35:57 +0000
@@ -242,56 +242,66 @@
              'Toolbar must be opened before calling click_button().')
--class TabsTestCase(tests.QMLStringAppTestCase):
--
--    test_qml = ("""
++TEST_TABS_QML_FORMAT = ("""
  import QtQuick 2.0
  import Ubuntu.Components 1.0
--import Ubuntu.Components.ListItems 1.0 as ListItem
--MainView {
++MainView {{
      width: units.gu(70)
      height: units.gu(60)
++    useDeprecatedToolbar: {use_deprecated_toolbar}
--    Tabs {
++    Tabs {{
          id: tabs
--        Tab {
++        Tab {{
              objectName: "tab1"
              title: "Tab1"
--            Page {
--                tools: ToolbarItems {
--                    ToolbarButton {
++            Page {{
++                tools: ToolbarItems {{
++                    ToolbarButton {{
                          text: "Test1"
--                    }
--                }
--            }
--        }
--        Tab {
++                    }}
++                }}
++            }}
++        }}
++        Tab {{
              objectName: "tab2"
              title: "Tab2"
--            Page {
--                tools: ToolbarItems {
--                    ToolbarButton {
++            Page {{
++                tools: ToolbarItems {{
++                    ToolbarButton {{
                          text: "Test2"
--                    }
--                }
--            }
--        }
--        Tab {
++                    }}
++                }}
++            }}
++        }}
++        Tab {{
              objectName: "tab3"
              title: "Tab3"
--            Page {
--                tools: ToolbarItems {
--                    ToolbarButton {
++            Page {{
++                tools: ToolbarItems {{
++                    ToolbarButton {{
                          text: "Test3"
--                    }
--                }
--            }
--        }
--    }
--}
++                    }}
++                }}
++            }}
++        }}
++    }}
++}}
  """)
++
++class TabsTestCase(tests.QMLStringAppTestCase):
++
++    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')))
++    ]
++
      def test_tabs_custom_emulator(self):
          self.assertIsInstance(self.main_view.get_tabs(), emulators.Tabs)
 === modified file 'tests/resources/navigation/SimpleTabs.qml'
 --- tests/resources/navigation/SimpleTabs.qml	2014-04-20 19:25:12 +0000
 +++ tests/resources/navigation/SimpleTabs.qml	2014-04-24 20:35:57 +0000
@@ -20,6 +20,8 @@
  MainView {
      width: 800
      height: 600
++    useDeprecatedToolbar: false
++
      Tabs {
          id: tabs
          selectedTabIndex: 1
 === modified file 'tests/resources/navigation/Tabs.qml'
 --- tests/resources/navigation/Tabs.qml	2014-04-20 19:25:12 +0000
 +++ tests/resources/navigation/Tabs.qml	2014-04-24 20:35:57 +0000
@@ -21,6 +21,8 @@
  MainView {
      width: 800
      height: 600
++    id: mainView
++    useDeprecatedToolbar: false
      Tabs {
          id: tabs
@@ -40,12 +42,12 @@
                      height: childrenRect.height
                      Button {
                          text: "tab bar on"
--                        enabled: !tabs.tabBar.selectionMode
++                        enabled: mainView.useDeprecatedToolbar && !tabs.tabBar.selectionMode
                          onClicked: tabs.tabBar.selectionMode = true;
+                     }
                      Button {
                          text: "tab bar off"
--                        enabled: tabs.tabBar.selectionMode
++                        enabled: mainView.useDeprecatedToolbar && tabs.tabBar.selectionMode
                          onClicked: tabs.tabBar.selectionMode = false;
+                     }
+                 }