Merge into trunk : toolbar-tabs-deactivate : Code : Ubuntu UI Toolkit

Reviewer	Review Type	Status
Cris Dywan		Approve on 2013-11-04
PS Jenkins bot	continuous-integration	Approve on 2013-11-04
Tim Peeters		Approve on 2013-10-31
Review via email: mp+186065@code.launchpad.net

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-09-17:

#

FAILED: Continuous integration, rev:755
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/667/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-saucy/3534/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-touch/1062/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-amd64-ci/524/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/524/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy-i386/3546/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy-armhf/1064/console

Click here to trigger a rebuild:
http://s-jenkins:8080/job/ubuntu-ui-toolkit-ci/667/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-09-17:

#

Click here to trigger a rebuild:
http://s-jenkins:8080/job/ubuntu-ui-toolkit-ci/669/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

Tim Peeters (tpeeters) wrote on 2013-09-18:

#

I downloaded and unzipped http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy-armhf/1082/artifact/work/output/*zip*/output.zip and installed the deb files on a maguro device that I flashed today with 'phablet-flash ubuntu-system' (which installed 20130916.3 image).

Tested with gallery-app, clock-app, notes-app and seems to work well. Tabs and toolbar are visible initially and will hide after a timeout, or when the user interacts with the app contents.

For proposed updates to the behavior, please leave a comment on this MR.

Revision history for this message

Tim Peeters (tpeeters) wrote on 2013-09-18:

#

After installing the packages above you should get the following new behaviors:
- Toolbar visible initially when starting app or changing views
- Toolbar automatically hides after a timeout, or when user interacts with app contents
- Tabs initially visible
- Tab bar automatically leaves selection mode (only current tab title visible) after timeout or when interacting with app contents

The following new behaviors will be implemented later:
- Hide toolbar when interacting with tabs
- Hide tabs when interacting with toolbar

Revision history for this message

Vesa Rautiainen (vesar) wrote on 2013-09-20:

#

We reviewed this MR in design team and here are our comments and issues we found:

Different timeouts in tabs and in toolbar
- Should have the same timeout value. Use the same as what launcher uses.

Showing toolbar when page changes doesn't work with Page Stack
- Happens in e.g. system settings app.
- Seems to work though when going back in stack. Then toolbar visibility is retained.

Re-launching an application: tabs should be expanded and toolbar open
- When opening an application that is in recent application category (stopped/suspended) toolbar is not shown and tabs are not expanded.
- This causes inconsistency between different app launches.
- So every time the app is launched/opened toolbar should be in open state and tabs in expanded state. In place. No animation. No animation because it would be too intrusive when going through app stack with right edge swipe.

Initial tabs scrolling animation in startup
- Sometimes when opening an app tabs are scrolling while expanding like a focused item would have been changed.
- It's not too bad animation and it even might be that we in design team proposed it. We just didn't take right edge back swipe in to account when proposing this. So let's take the animation away and have tabs in open state when application is launched.

Timeout timer doesn't restart when switching page from tabs
- this fails for example in Gallery, Weather and Calendar. In shorts (rss reader) app seems to work fine.
- To reproduce keep tapping on tabs. At some point toolbar hides quite quickly after page switch. It's a sign that timer is never restarted if running on page switch.
- Or is this something that hasn't been implemented because this will not be valid anymore when "tabs interaction closes toolbar" feature lands.

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-09-24:

#

Click here to trigger a rebuild:
http://s-jenkins:8080/job/ubuntu-ui-toolkit-ci/722/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-09-24:

#

Click here to trigger a rebuild:
http://s-jenkins:8080/job/ubuntu-ui-toolkit-ci/723/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

Tim Peeters (tpeeters) wrote on 2013-10-24:

#

This MR is still valid, but should not be accepted yet. I will ask for a review when ready.

review: Needs Fixing

lp:~tpeeters/ubuntu-ui-toolkit/toolbar-tabs-deactivate updated on 2013-10-28

757. By Tim Peeters on 2013-10-28: merge trunk

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-10-28:

#

Click here to trigger a rebuild:
http://10.97.0.26:8080/job/ubuntu-ui-toolkit-ci/1105/rebuild

review: Approve (continuous-integration)

lp:~tpeeters/ubuntu-ui-toolkit/toolbar-tabs-deactivate updated on 2013-10-29

758. By Tim Peeters on 2013-10-29: update tabbar timeout to match the timeout of toolbar and unity's launcher

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-10-29:

#

Click here to trigger a rebuild:
http://10.97.0.26:8080/job/ubuntu-ui-toolkit-ci/1117/rebuild

review: Needs Fixing (continuous-integration)

lp:~tpeeters/ubuntu-ui-toolkit/toolbar-tabs-deactivate updated on 2013-10-30

759. By Tim Peeters on 2013-10-30: empty commit for CI

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-10-30:

#

Click here to trigger a rebuild:
http://10.97.0.26:8080/job/ubuntu-ui-toolkit-ci/1124/rebuild

review: Needs Fixing (continuous-integration)

lp:~tpeeters/ubuntu-ui-toolkit/toolbar-tabs-deactivate updated on 2013-10-31

760. By Tim Peeters on 2013-10-31: fix bug that doesn't show toolbar the first time a page with no tools is pushed

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-10-31:

#

Click here to trigger a rebuild:
http://10.97.0.26:8080/job/ubuntu-ui-toolkit-ci/1138/rebuild

review: Approve (continuous-integration)

lp:~tpeeters/ubuntu-ui-toolkit/toolbar-tabs-deactivate updated on 2013-10-31

761. By Tim Peeters on 2013-10-31: add SimpleTabs test program
762. By Tim Peeters on 2013-10-31: add SimpleTabs test program
763. By Tim Peeters on 2013-10-31: previous change: debugging
764. By Tim Peeters on 2013-10-31: reset toolbar hide timer when tools change

Revision history for this message

Tim Peeters (tpeeters) wrote on 2013-10-31:

#

> We reviewed this MR in design team and here are our comments and issues we
> found:
>
> Different timeouts in tabs and in toolbar
> - Should have the same timeout value. Use the same as what launcher uses.

Ok, all timeouts are 5s now.

> Showing toolbar when page changes doesn't work with Page Stack
> - Happens in e.g. system settings app.
> - Seems to work though when going back in stack. Then toolbar visibility is
> retained.

It should work, but I noticed a bug where it does not work the first time a page is pushed to the stack. The bug was fixed in this MR.

> Re-launching an application: tabs should be expanded and toolbar open
> - When opening an application that is in recent application category
> (stopped/suspended) toolbar is not shown and tabs are not expanded.
> - This causes inconsistency between different app launches.
> - So every time the app is launched/opened toolbar should be in open state and
> tabs in expanded state. In place. No animation. No animation because it would
> be too intrusive when going through app stack with right edge swipe.

Agreed. I will work on that in a separate MR. I reported a bug to track the progress: https://bugs.launchpad.net/ubuntu-ux/+bug/1246790

>
> Initial tabs scrolling animation in startup
> - Sometimes when opening an app tabs are scrolling while expanding like a
> focused item would have been changed.
> - It's not too bad animation and it even might be that we in design team
> proposed it. We just didn't take right edge back swipe in to account when
> proposing this. So let's take the animation away and have tabs in open state
> when application is launched.

I agreed. I reported this bug https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1246792 and will fix it in a separate MR.

> Timeout timer doesn't restart when switching page from tabs
> - this fails for example in Gallery, Weather and Calendar. In shorts (rss
> reader) app seems to work fine.
> - To reproduce keep tapping on tabs. At some point toolbar hides quite quickly
> after page switch. It's a sign that timer is never restarted if running on
> page switch.
> - Or is this something that hasn't been implemented because this will not be
> valid anymore when "tabs interaction closes toolbar" feature lands.

Fixed.

Indeed, the fix may not be valid anymore when the "tabs interaction closes toolbar" feature lands, but I will think about that when implementing that feature.

> We reviewed this MR in design team and here are our comments and issues we
> found:
> 
> Different timeouts in tabs and in toolbar
> - Should have the same timeout value. Use the same as what launcher uses.

Ok, all timeouts are 5s now.
 
> Showing toolbar when page changes doesn't work with Page Stack
> - Happens in e.g. system settings app.
> - Seems to work though when going back in stack. Then toolbar visibility is
> retained.

It should work, but I noticed a bug where it does not work the first time a page is pushed to the stack. The bug was fixed in this MR.
 
> Re-launching an application: tabs should be expanded and toolbar open
> - When opening an application that is in recent application category
> (stopped/suspended) toolbar is not shown and tabs are not expanded.
> - This causes inconsistency between different app launches.
> - So every time the app is launched/opened toolbar should be in open state and
> tabs in expanded state. In place. No animation. No animation because it would
> be too intrusive when going through app stack with right edge swipe.

Agreed. I will work on that in a separate MR. I reported a bug to track the progress: https://bugs.launchpad.net/ubuntu-ux/+bug/1246790

> 
> Initial tabs scrolling animation in startup
> - Sometimes when opening an app tabs are scrolling while expanding like a
> focused item would have been changed.
> - It's not too bad animation and it even might be that we in design team
> proposed it. We just didn't take right edge back swipe in to account when
> proposing this. So let's take the animation away and have tabs in open state
> when application is launched.

I agreed. I reported this bug https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1246792 and will fix it in a separate MR.

> Timeout timer doesn't restart when switching page from tabs
> - this fails for example in Gallery, Weather and Calendar. In shorts (rss
> reader) app seems to work fine.
> - To reproduce keep tapping on tabs. At some point toolbar hides quite quickly
> after page switch. It's a sign that timer is never restarted if running on
> page switch.
> - Or is this something that hasn't been implemented because this will not be
> valid anymore when "tabs interaction closes toolbar" feature lands.

Fixed.

Indeed, the fix may not be valid anymore when the "tabs interaction closes toolbar" feature lands, but I will think about that when implementing that feature.

Revision history for this message

Tim Peeters (tpeeters) wrote on 2013-10-31:

#

I think everything is ready now.

review: Approve

lp:~tpeeters/ubuntu-ui-toolkit/toolbar-tabs-deactivate updated on 2013-10-31

765. By Tim Peeters on 2013-10-31: merge trunk
766. By Tim Peeters on 2013-10-31: clean text

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-10-31:

#

Click here to trigger a rebuild:
http://10.97.0.26:8080/job/ubuntu-ui-toolkit-ci/1141/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

Cris Dywan (kalikiana) wrote on 2013-10-31:

#

I'm worried by the fact that you didn't change any tests but they still pass. Even though your code looks sane it means it's completely untested.

review: Needs Fixing

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-10-31:

#

Click here to trigger a rebuild:
http://10.97.0.26:8080/job/ubuntu-ui-toolkit-ci/1143/rebuild

review: Approve (continuous-integration)

Revision history for this message

Tim Peeters (tpeeters) wrote on 2013-10-31:

#

> I'm worried by the fact that you didn't change any tests but they still pass.
> Even though your code looks sane it means it's completely untested.

There were some related MRs before this one that changed the tests for the Tabs, including checking whether the tab bar is active before switching tabs (by clicking a tab button), and only clicking the tab bar to activate it if it is not active yet.

So the description at the top describes changes of this MR including changes in previous MRs (they were ready a while ago but I couldn't merge them because of the jenkins issues we had back then. And I wanted to give this MR that included all the changes to design so they could have a look).

The main change that was left for this MR is to deactivate/close the tab bar and toolbar when the user interacts with the app contents (the page). I will add a test for that and let you know when it is ready.

lp:~tpeeters/ubuntu-ui-toolkit/toolbar-tabs-deactivate updated on 2013-11-04

767. By Tim Peeters on 2013-11-04: trying to make the tests for automatic timeout of activated tabbar
768. By Tim Peeters on 2013-11-04: fix bug in MainView
769. By Tim Peeters on 2013-11-04: remove debugging code
770. By Tim Peeters on 2013-11-04: fix test_deactivateByTimeout()
771. By Tim Peeters on 2013-11-04: add test

Revision history for this message

Tim Peeters (tpeeters) wrote on 2013-11-04:

#

I moved the tabs test to unit_x11, and added the test_deactivateByTimeout() and test_deactivateByAppInteraction() tests.

lp:~tpeeters/ubuntu-ui-toolkit/toolbar-tabs-deactivate updated on 2013-11-04

772. By Tim Peeters on 2013-11-04: fixed in r768 of this branch

Revision history for this message

Tim Peeters (tpeeters) wrote on 2013-11-04:

#

linked this bug that I fixed here: https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1244660

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-11-04:

#

Click here to trigger a rebuild:
http://10.97.0.26:8080/job/ubuntu-ui-toolkit-ci/1150/rebuild

review: Approve (continuous-integration)

Revision history for this message

Cris Dywan (kalikiana) wrote on 2013-11-04:

#

Your fix for bug 1244660 isn't covered by the tests. The following patch however does catch it:

=== modified file 'tests/unit/tst_mainview/tst_mainview.cpp'
--- tests/unit/tst_mainview/tst_mainview.cpp 2013-09-27 10:56:31 +0000
+++ tests/unit/tst_mainview/tst_mainview.cpp 2013-11-04 17:32:13 +0000
@@ -128,6 +128,9 @@ class tst_MainView : public QObject
}

     void testLocalStorage() {
+ QSignalSpy spy(view->engine(), SIGNAL(warnings(QList<QQmlError>)));
+ spy.setParent(view);
+
         QQuickItem *root = loadTest("LocalStorage.qml");
         QVERIFY(root);
         QQuickItem *mainView = root;
@@ -141,6 +144,9 @@ class tst_MainView : public QObject
         QString hash(QCryptographicHash::hash("pacific.island.tv", QCryptographicHash::Md5).toHex());
         QString database(databaseFolder + "/" + hash + ".sqlite");
         QVERIFY(QFile::exists(database));
+
+ // No warnings from QML
+ QCOMPARE(spy.count(), 0);
     }
};

review: Needs Fixing

Revision history for this message

Cris Dywan (kalikiana) wrote on 2013-11-04:

#

Aside from the above the revamped tests look very nice!

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-11-04:

#

Click here to trigger a rebuild:
http://10.97.0.26:8080/job/ubuntu-ui-toolkit-ci/1151/rebuild

review: Approve (continuous-integration)

lp:~tpeeters/ubuntu-ui-toolkit/toolbar-tabs-deactivate updated on 2013-11-04

773. By Tim Peeters on 2013-11-04: unfix bug. doing that in separate MR

Revision history for this message

Tim Peeters (tpeeters) wrote on 2013-11-04:

#

Removed bugfix and unlinked bug. It is not related to the other changes of this MR, so I'll do it in a separate MR.

Revision history for this message

Cris Dywan (kalikiana) wrote on 2013-11-04:

#

Makes sense.

review: Approve

Ubuntu UI Toolkit

Merge lp:~tpeeters/ubuntu-ui-toolkit/toolbar-tabs-deactivate into lp:ubuntu-ui-toolkit

Commit message

Description of the change

Preview Diff

Subscribers

 === modified file 'components.api'
 --- components.api	2013-10-28 16:33:39 +0000
 +++ components.api	2013-11-04 19:49:51 +0000
@@ -131,6 +131,7 @@
      property string title
      property Flickable flickable
      property list<Action> actions
++    default property internal pageContents
  modules/Ubuntu/Components/PageStack.qml
  PageTreeNode
      property bool __showHeader
@@ -168,6 +169,7 @@
      property real hintSize
      property real triggerSize
      readonly property bool animating
++    property bool __closeOnContentsClicks
  modules/Ubuntu/Components/ProgressBar.qml
  AnimatedItem
      property bool indeterminate
 === modified file 'modules/Ubuntu/Components/Page.qml'
 --- modules/Ubuntu/Components/Page.qml	2013-09-16 00:24:21 +0000
 +++ modules/Ubuntu/Components/Page.qml	2013-11-04 19:49:51 +0000
@@ -120,7 +120,7 @@
        of the header by scrolling in the Flickable. In cases where a flickable should control the header,
        but it is not automatically detected, the flickable property can be set.
       */
--    property Flickable flickable: internal.getFlickableChild(page)
++    property Flickable flickable: internal.getFlickableChild(contentsItem)
      /*! \internal */
      onActiveChanged: {
@@ -216,7 +216,7 @@
                  for (var i=0; i < item.children.length; i++) {
                      var child = item.children[i];
                      if (internal.isVerticalFlickable(child)) {
--                        if (child.anchors.top === page.top || child.anchors.fill === page) {
++                        if (child.anchors.top === contentsItem.top || child.anchors.fill === contentsItem) {
                              return item.children[i];
+                         }
+                     }
@@ -240,4 +240,43 @@
+             }
+         }
+     }
++
++    /*!
++      \internal
++      The contents of the page.
++     */
++    default property alias pageContents: contentsItem.data
++    Item {
++        id: contentsItem
++        anchors.fill: parent
++    }
++
++    MouseArea {
++        id: contentsArea
++        anchors.fill: contentsItem
++        // This mouse area will be on top of the page contents, but
++        // under the toolbar and header.
++        // It is used for detecting interaction with the page contents
++        // which can close the toolbar and take a tab bar out of selection mode.
++
++        property Toolbar toolbar: page.__propagated && page.__propagated.toolbar ?
++                                      page.__propagated.toolbar : null
++
++        property TabBar tabBar: page.__propagated && page.__propagated.header &&
++                                page.__propagated.header.contents &&
++                                page.__propagated.header.contents.hasOwnProperty("selectionMode") &&
++                                page.__propagated.header.contents.hasOwnProperty("alwaysSelectionMode") ?
++                                    page.__propagated.header.contents : null
++
++        onPressed: {
++            mouse.accepted = false;
++            if (contentsArea.toolbar && !toolbar.locked) {
++                contentsArea.toolbar.close();
++                }
++            if (contentsArea.tabBar && !contentsArea.tabBar.alwaysSelectionMode) {
++                contentsArea.tabBar.selectionMode = false;
++            }
++        }
++        propagateComposedEvents: true
++    }
+ }
 === modified file 'modules/Ubuntu/Components/Panel.qml'
 --- modules/Ubuntu/Components/Panel.qml	2013-10-21 17:28:37 +0000
 +++ modules/Ubuntu/Components/Panel.qml	2013-11-04 19:49:51 +0000
@@ -398,6 +398,16 @@
+         }
+     }
++    /*!
++      \internal
++      Enable the InverseMouseArea that closes the panel when the user clicks outside of the panel.
++      This functionality moved to the Toolbar/Page implementation because the mouse area needs to
++      access with the toolbar and header, but this InverseMouseArea is still in the Panel for backwards
++      compatibility in apps that use it directly. Default value is true, but it is set to false in Toolbar.
++
++      FIXME: Remove __detectContentsClicks and the IMA below when all apps use Toolbar instead of Panel.
++     */
++    property bool __closeOnContentsClicks: true
      Toolkit.InverseMouseArea {
          anchors.fill: draggingArea
          onClicked: {
@@ -407,7 +417,7 @@
              if (!panel.locked) panel.close();
+         }
          propagateComposedEvents: true
--        visible: panel.locked == false && panel.state == "spread"
++        visible: panel.__closeOnContentsClicks && panel.locked == false && panel.state == "spread"
+     }
      DraggingArea {
 === modified file 'modules/Ubuntu/Components/Themes/Ambiance/TabBarStyle.qml'
 --- modules/Ubuntu/Components/Themes/Ambiance/TabBarStyle.qml	2013-09-20 10:55:21 +0000
 +++ modules/Ubuntu/Components/Themes/Ambiance/TabBarStyle.qml	2013-11-04 19:49:51 +0000
@@ -35,7 +35,7 @@
      property real buttonPositioningVelocity: styledItem.animate ? 1.0 : -1
      // The time of inactivity before leaving selection mode automatically
--    property int deactivateTime: 3000
++    property int deactivateTime: 5000
      /*!
        The set of tabs this tab bar belongs to
 === modified file 'modules/Ubuntu/Components/Toolbar.qml'
 --- modules/Ubuntu/Components/Toolbar.qml	2013-10-21 17:30:11 +0000
 +++ modules/Ubuntu/Components/Toolbar.qml	2013-11-04 19:49:51 +0000
@@ -33,6 +33,9 @@
+     }
      height: background.height
++    // Closing of the toolbar on app contents ineraction is handled by the Page.
++    __closeOnContentsClicks: false
++
      /*!
        \preliminary
        The list of \l Actions to be shown on the toolbar
@@ -63,6 +66,7 @@
              if (tools && tools.hasOwnProperty("opened")) {
                  tools.opened = toolbar.opened;
+             }
++            hideTimer.restart();
          } else { // no tools
              locked = true;
              toolbar.close();
@@ -83,7 +87,7 @@
          if (tools && tools.hasOwnProperty("opened")) {
              tools.opened = toolbar.opened;
+         }
--        if (!toolbar.locked) hideTimer.restart()
++        if (!toolbar.locked) hideTimer.restart();
+     }
      Connections {
@@ -96,7 +100,12 @@
                  toolbar.close();
+             }
+         }
--        onLockedChanged: toolbar.locked = tools.locked;
++        onLockedChanged: {
++            toolbar.locked = tools.locked;
++            // open the toolbar when it becomes unlocked
++            // (may be because a new page was pushed to the page stack)
++            if (!toolbar.locked) toolbar.open();
++        }
+     }
      QtObject {
 === added file 'tests/resources/navigation/SimpleTabs.qml'
 --- tests/resources/navigation/SimpleTabs.qml	1970-01-01 00:00:00 +0000
 +++ tests/resources/navigation/SimpleTabs.qml	2013-11-04 19:49:51 +0000
@@ -0,0 +1,58 @@
++/*
++ * Copyright 2013 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 0.1
++
++MainView {
++    width: 800
++    height: 600
++    Tabs {
++        id: tabs
++        selectedTabIndex: 0
++
++        Tab {
++            title: i18n.tr("One")
++            page: Page {
++                Label {
++                    anchors.centerIn: parent
++                    text: i18n.tr("First page")
++                }
++                tools: ToolbarItems {
++                    ToolbarButton {
++                        text: "1111"
++                        iconSource: "call_icon.png"
++                    }
++                }
++            }
++        }
++        Tab {
++            title: i18n.tr("Two")
++            page: Page {
++                Label {
++                    anchors.centerIn: parent
++                    text: i18n.tr("Second page")
++                }
++                tools: ToolbarItems {
++                    ToolbarButton {
++                        text: "2222"
++                        iconSource: "call_icon.png"
++                    }
++                }
++            }
++        }
++    }
++}
 === renamed file 'tests/unit/tst_components/tst_tabs.qml' => 'tests/unit_x11/tst_components/tst_tabs.qml'
 --- tests/unit/tst_components/tst_tabs.qml	2013-10-02 06:23:44 +0000
 +++ tests/unit_x11/tst_components/tst_tabs.qml	2013-11-04 19:49:51 +0000
@@ -18,72 +18,9 @@
  import QtTest 1.0
  import Ubuntu.Components 0.1
--TestCase {
--    name: "TabsAPI"
--
--    function test_emptyTabs() {
--        compare(emptyTabs.selectedTabIndex, -1, "The default value for selectedTabIndex is -1 when there are no tabs");
--        compare(emptyTabs.selectedTab, null, "The default selected tab is null when there are no tabs");
--        compare(emptyTabs.currentPage, null, "The default currentPage is null when there are no tabs");
--    }
--
--    function test_tabsDefaults() {
--        compare(tabs.selectedTabIndex, 0, "The default selectedTabIndex is 0 when Tabs has contents");
--        compare(tabs.selectedTab, tab1, "The default selectedTab is the first tab");
--        compare(tabs.currentPage, page1, "The default currentPage is the page of the first tab");
--        compare(mainView.__propagated.toolbar.tools, page1.tools, "The default tools are the tools of the first tab");
--        compare(mainView.__propagated.header.contents, tabs.tabBar, "Tabs updates the Header contents");
--    }
--
--    function test_tabsSetSelectedTab() {
--        var tabArray = [tab1, tab2, tab3];
--        var pageArray = [page1, page2, page3];
--        for (var i=0; i < 3; i++) {
--            tabs.selectedTabIndex = i;
--            compare(tabs.selectedTabIndex, i, "Can set selectedTabIndex");
--            compare(tabs.selectedTab, tabArray[i], "Can update selectedTab by setting selectedTabIndex");
--            compare(tabs.currentPage, pageArray[i], "Can update currentPage by setting selectedTabIndex");
--            compare(mainView.__propagated.toolbar.tools, pageArray[i].tools, "Activating a Tab updates the tools of the Toolbar");
--            for (var j=0; j < 3; j++) {
--                compare(pageArray[j].active, j===i, "Only the page of the selected tab is active");
--            }
--        }
--    }
--
--    function test_flickable() {
--        // ensure that the flickable of the header is set to the flickable of the selected tab.
--        tabs.selectedTabIndex = 3;
--        compare(mainView.__propagated.header.flickable, flickable1, "Header flickable correctly initialized");
--        tabs.selectedTabIndex = 4;
--        compare(mainView.__propagated.header.flickable, flickable2, "Header flickable correctly updated");
--        tabs.selectedTabIndex = 0;
--    }
--
--    function test_pageLoader() {
--        tabs.selectedTabIndex = 0;
--        compare(loader.item, null, "Page not loaded when tab is not selected");
--        tabs.selectedTabIndex = 5;
--        compare(tabs.currentPage, loader, "Selected loader for current page");
--        compare(loader.item.title, "Loaded page", "Loaded item is a page");
--        tabs.selectedTabIndex = 0;
--        compare(loader.item, null, "Loaded page was properly unloaded");
--    }
--
--    function test_bug1088740() {
--        tabs.selectedTabIndex = 5;
--        compare(mainView.__propagated.header.flickable, loader.item.flick, "Header flickable correctly updated with Loader");
--        compare(loader.item.flick.contentHeight, 1000, "Header flickable is correct flickable");
--        tabs.selectedTabIndex = 0;
--    }
--
--    function test_index() {
--        compare(tab1.index, 0, "tab1 is at 0");
--        compare(tab2.index, 1, "tab2 is at 1");
--        compare(tab3.index, 2, "tab3 is at 2");
--        compare(tabFlick1.index, 3, "tabFlick1 is at 3");
--        compare(tabFlick2.index, 4, "tabFlick2 is at 4");
--        compare(tabFlickLoader.index, 5, "tabFlickLoader is at 5");
--    }
++Item {
++    width: units.gu(50)
++    height: units.gu(80)
      Tabs {
          id: emptyTabs
@@ -91,28 +28,40 @@
      MainView {
          id: mainView
++        anchors.fill: parent
          Tabs {
              id: tabs
              Tab {
                  id: tab1
++                title: "tab 1"
                  page: Page {
                      id: page1
++                    Rectangle {
++                        id: centerRect
++                        width: units.gu(10)
++                        height: units.gu(5)
++                        color: "navy"
++                        anchors.centerIn: parent
++                    }
+                 }
+             }
              Tab {
                  id: tab2
++                title: "tab 2"
                  page: Page {
                      id: page2
+                 }
+             }
              Tab {
                  id: tab3
++                title: "tab 3"
                  page: Page {
                      id: page3
+                 }
--            }
++            }
              Tab {
                  id: tabFlick1
++                title: "flick"
                  page: Page {
                      Flickable {
                          id: flickable1
@@ -122,6 +71,7 @@
+             }
              Tab {
                  id: tabFlick2
++                title: "flick 2"
                  page: Page {
                      Flickable {
                          id: flickable2
@@ -131,6 +81,7 @@
+             }
              Tab {
                  id: tabFlickLoader
++                title: "load"
                  page: Loader {
                      id: loader
                      sourceComponent: tabs.selectedTabIndex != 5 ? null : pageComponent
@@ -150,4 +101,90 @@
+             }
+         }
+     }
++
++
++
++    TestCase {
++        name: "TabsAPI"
++        when: windowShown
++
++        function test_emptyTabs() {
++            compare(emptyTabs.selectedTabIndex, -1, "The default value for selectedTabIndex is -1 when there are no tabs");
++            compare(emptyTabs.selectedTab, null, "The default selected tab is null when there are no tabs");
++            compare(emptyTabs.currentPage, null, "The default currentPage is null when there are no tabs");
++        }
++
++        function test_tabsDefaults() {
++            compare(tabs.selectedTabIndex, 0, "The default selectedTabIndex is 0 when Tabs has contents");
++            compare(tabs.selectedTab, tab1, "The default selectedTab is the first tab");
++            compare(tabs.currentPage, page1, "The default currentPage is the page of the first tab");
++            compare(mainView.__propagated.toolbar.tools, page1.tools, "The default tools are the tools of the first tab");
++            compare(mainView.__propagated.header.contents, tabs.tabBar, "Tabs updates the Header contents");
++        }
++
++        function test_tabsSetSelectedTab() {
++            var tabArray = [tab1, tab2, tab3];
++            var pageArray = [page1, page2, page3];
++            for (var i=0; i < 3; i++) {
++                tabs.selectedTabIndex = i;
++                compare(tabs.selectedTabIndex, i, "Can set selectedTabIndex");
++                compare(tabs.selectedTab, tabArray[i], "Can update selectedTab by setting selectedTabIndex");
++                compare(tabs.currentPage, pageArray[i], "Can update currentPage by setting selectedTabIndex");
++                compare(mainView.__propagated.toolbar.tools, pageArray[i].tools, "Activating a Tab updates the tools of the Toolbar");
++                for (var j=0; j < 3; j++) {
++                    compare(pageArray[j].active, j===i, "Only the page of the selected tab is active");
++                }
++            }
++        }
++
++        function test_flickable() {
++            // ensure that the flickable of the header is set to the flickable of the selected tab.
++            tabs.selectedTabIndex = 3;
++            compare(mainView.__propagated.header.flickable, flickable1, "Header flickable correctly initialized");
++            tabs.selectedTabIndex = 4;
++            compare(mainView.__propagated.header.flickable, flickable2, "Header flickable correctly updated");
++            tabs.selectedTabIndex = 0;
++        }
++
++        function test_pageLoader() {
++            tabs.selectedTabIndex = 0;
++            compare(loader.item, null, "Page not loaded when tab is not selected");
++            tabs.selectedTabIndex = 5;
++            compare(tabs.currentPage, loader, "Selected loader for current page");
++            compare(loader.item.title, "Loaded page", "Loaded item is a page");
++            tabs.selectedTabIndex = 0;
++            compare(loader.item, null, "Loaded page was properly unloaded");
++        }
++
++        function test_bug1088740() {
++            tabs.selectedTabIndex = 5;
++            compare(mainView.__propagated.header.flickable, loader.item.flick, "Header flickable correctly updated with Loader");
++            compare(loader.item.flick.contentHeight, 1000, "Header flickable is correct flickable");
++            tabs.selectedTabIndex = 0;
++        }
++
++        function test_index() {
++            compare(tab1.index, 0, "tab1 is at 0");
++            compare(tab2.index, 1, "tab2 is at 1");
++            compare(tab3.index, 2, "tab3 is at 2");
++            compare(tabFlick1.index, 3, "tabFlick1 is at 3");
++            compare(tabFlick2.index, 4, "tabFlick2 is at 4");
++            compare(tabFlickLoader.index, 5, "tabFlickLoader is at 5");
++        }
++
++        function test_deactivateByTimeout() {
++            tabs.tabBar.selectionMode = true;
++            compare(tabs.tabBar.selectionMode, true, "Tab bar can be put into selection mode");
++            compare(tabs.tabBar.__styleInstance.deactivateTime > 0, true, "There is a positive deactivate time");
++            wait(tabs.tabBar.__styleInstance.deactivateTime + 500); // add 500 ms margin
++            compare(tabs.tabBar.selectionMode, false, "Tab bar automatically leaves selection mode after a timeout.");
++        }
++
++        function test_deactivateByAppInteraction() {
++            tabs.tabBar.selectionMode = true;
++            compare(tabs.tabBar.selectionMode, true, "Tab bar can be put into selection mode");
++            mouseClick(centerRect, units.gu(1), units.gu(1), Qt.LeftButton);
++            compare(tabs.tabBar.selectionMode, false, "Tab bar deactivated by interactiong with the page contents");
++        }
++    }
+ }