Merge lp:~azzar1/unity8/remove-UbuntuShapeForItem into lp:unity8

[Andrea Azzarone]

Remove UbuntuShapeForItem and replace its use with the more standard Ubuntu.Components.UbuntuShape.

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

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

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

 * If you changed the UI, has there been a design review?
N/A

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

FAILED: Continuous integration, rev:2602
https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/2131/
Executed test runs:
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build/2801
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/test-0-autopkgtest/label=amd64,release=vivid+overlay,testname=qmluitests.sh/1551
    FAILURE: https://unity8-jenkins.ubuntu.com/job/test-0-autopkgtest/label=amd64,release=xenial+overlay,testname=qmluitests.sh/1551/console
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/test-0-autopkgtest/label=amd64,release=yakkety,testname=qmluitests.sh/1551
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-0-fetch/2829
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=vivid+overlay/2689
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=vivid+overlay/2689/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=xenial+overlay/2689
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=xenial+overlay/2689/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=yakkety/2689
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=yakkety/2689/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=vivid+overlay/2689
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=vivid+overlay/2689/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=xenial+overlay/2689
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=xenial+overlay/2689/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=yakkety/2689
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=yakkety/2689/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=vivid+overlay/2689
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=vivid+overlay/2689/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=xenial+overlay/2689
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=xenial+overlay/2689/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=yakkety/2689
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=yakkety/2689/artifact/output/*zip*/output.zip

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

review: Needs Fixing (continuous-integration)

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

FAILED: Continuous integration, rev:2602
https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/2259/
Executed test runs:
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build/2979/console
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-0-fetch/3007
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=vivid+overlay/2865
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=vivid+overlay/2865/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=xenial+overlay/2865
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=xenial+overlay/2865/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=yakkety/2865
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=yakkety/2865/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=vivid+overlay/2865
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=vivid+overlay/2865/artifact/output/*zip*/output.zip
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=xenial+overlay/2865/console
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=yakkety/2865/console
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=vivid+overlay/2865
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=vivid+overlay/2865/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=xenial+overlay/2865
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=xenial+overlay/2865/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=yakkety/2865
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=yakkety/2865/artifact/output/*zip*/output.zip

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

review: Needs Fixing (continuous-integration)

[Albert Astals Cid (aacid)]

The destkop spread change breaks something.

How to reproduce:
 * go to the "source root" dir and run
      ln -s `pwd`/tests/graphics .
   (this i needed because it seems the test is a bit broken)
 * go to the builddir
 * run
    make tryDesktopStage
 * start the dialer and webbrowser
 * show the desktop spread
 * without your patch, moving the mouse cursor over each window changes the opacity/brightness/something of the icon of said window
 * with your patch the icon stays the same

review: Needs Fixing

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

FAILED: Continuous integration, rev:2603
https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/2267/
Executed test runs:
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build/2988/console
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build-0-fetch/3016/console

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

review: Needs Fixing (continuous-integration)

[Andrea Azzarone (azzar1)]

> The destkop spread change breaks something.
>
> How to reproduce:
> * go to the "source root" dir and run
> ln -s `pwd`/tests/graphics .
> (this i needed because it seems the test is a bit broken)
> * go to the builddir
> * run
> make tryDesktopStage
> * start the dialer and webbrowser
> * show the desktop spread
> * without your patch, moving the mouse cursor over each window changes the
> opacity/brightness/something of the icon of said window
> * with your patch the icon stays the same

Fixed

[Albert Astals Cid (aacid)]

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

 * Did CI run pass? If not, please explain why.
Waiting for it before top approving

review: Approve

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

FAILED: Continuous integration, rev:2603
https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/2288/
Executed test runs:
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build/3011
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/test-0-autopkgtest/label=amd64,release=vivid+overlay,testname=qmluitests.sh/1668
    UNSTABLE: https://unity8-jenkins.ubuntu.com/job/test-0-autopkgtest/label=amd64,release=xenial+overlay,testname=qmluitests.sh/1668
    UNSTABLE: https://unity8-jenkins.ubuntu.com/job/test-0-autopkgtest/label=amd64,release=yakkety,testname=qmluitests.sh/1668
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-0-fetch/3039
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=vivid+overlay/2896
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=vivid+overlay/2896/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=xenial+overlay/2896
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=xenial+overlay/2896/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=yakkety/2896
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=yakkety/2896/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=vivid+overlay/2896
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=vivid+overlay/2896/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=xenial+overlay/2896
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=xenial+overlay/2896/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=yakkety/2896
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=yakkety/2896/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=vivid+overlay/2896
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=vivid+overlay/2896/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=xenial+overlay/2896
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=xenial+overlay/2896/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=yakkety/2896
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=yakkety/2896/artifact/output/*zip*/output.zip

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

review: Needs Fixing (continuous-integration)

[Lukáš Tinkl (lukas-kde)]

This needs rebasing on top of lp:~mzanetti/unity8/unified-stages

review: Needs Fixing

[lp:~azzar1/unity8/remove-UbuntuShapeForItem]

2604. By Andrea Azzarone on 2016-10-05

Merge with lp:~mzanetti/unity8/unified-stages.

2605. By Andrea Azzarone on 2016-10-06

Resync with lp:~mzanetti/unity8/unified-stages

Unmerged revisions

2601. By Launchpad Translations on behalf of unity-team on 2016-08-29

Launchpad automatic translations update.

=== modified file 'debian/changelog'
--- debian/changelog	2016-10-04 15:02:29 +0000
+++ debian/changelog	2016-10-05 11:22:21 +0000
@@ -7,7 +7,7 @@
 
  -- Michael Terry <[e-mail]>  Mon, 03 Oct 2016 10:43:25 -0400
 
-unity8 (8.14+16.10.20160922-0ubuntu1) yakkety; urgency=medium
+unity8 (8.14+16.10.20160914-0ubuntu1) yakkety; urgency=medium
 
   [ Albert Astals Cid ]
   * LVWPH: update clipItem height when list height changes (LP:
@@ -55,12 +55,14 @@
     the greeter.
 
   [ Lukáš Tinkl ]
-  * Implement edge maximizing (aka window snapping) (LP: #1602628)
   * On the PC platform (as opposed to running on $devices), use the
     "mute" action instead of silent mode
   * Respect Fitt's law wrt the window control buttons in panel (LP:
     #1611959)
   * Fix 2 failing color-related tests
+  * Implement edge maximizing (aka window snapping) (LP: #1602628,
+    #1611859)
+  * Implement moving windows by Alt + left mouse button
 
   [ Marco Trevisan (Treviño) ]
   * Indicators, mocks: add fake indicators menuitem to populate mocks
@@ -82,7 +84,7 @@
   * Update look of infographic a bit
   * Make infographic bubbles white even on the default wallpaper.
 
- -- Michał Sawicz <[e-mail]>  Thu, 22 Sep 2016 07:46:57 +0000
+ -- Michał Sawicz <[e-mail]>  Wed, 14 Sep 2016 00:46:45 +0000
 
 unity8 (8.14+16.10.20160831.3-0ubuntu1) yakkety; urgency=medium
 

=== modified file 'debian/unity8.install'
--- debian/unity8.install	2016-06-20 22:42:46 +0000
+++ debian/unity8.install	2016-10-05 11:22:21 +0000
@@ -16,7 +16,7 @@
 usr/share/unity8/OrientedShell.qml
 usr/share/unity8/DisabledScreenNotice.qml
 usr/share/unity8/Shell.qml
-usr/share/unity8/Stages
+usr/share/unity8/Stage
 usr/share/unity8/Tutorial
 usr/share/unity8/Wizard
 usr/share/url-dispatcher/urls/unity8-dash.url-dispatcher

=== modified file 'plugins/Ubuntu/Gestures/TouchGate.cpp'
--- plugins/Ubuntu/Gestures/TouchGate.cpp	2016-07-13 07:29:00 +0000
+++ plugins/Ubuntu/Gestures/TouchGate.cpp	2016-10-05 11:22:21 +0000
@@ -61,7 +61,10 @@
         const QTouchEvent::TouchPoint &touchPoint = touchPoints[i];
 
         if (touchPoint.state() == Qt::TouchPointPressed) {
-            Q_ASSERT(!m_touchInfoMap.contains(touchPoint.id()));
+// FIXME: This assert triggers frequently in make trySomething. We have verified
+// that it's a bug in the mouse to touch conversion of the test environment
+// and not in the actual product. Still, it probably should be cleaned up eventually.
+//            Q_ASSERT(!m_touchInfoMap.contains(touchPoint.id()));
             m_touchInfoMap[touchPoint.id()].ownership = OwnershipRequested;
             m_touchInfoMap[touchPoint.id()].ended = false;
             TouchRegistry::instance()->requestTouchOwnership(touchPoint.id(), this);

=== modified file 'plugins/WindowManager/TopLevelSurfaceList.cpp'
--- plugins/WindowManager/TopLevelSurfaceList.cpp	2016-04-04 13:43:41 +0000
+++ plugins/WindowManager/TopLevelSurfaceList.cpp	2016-10-05 11:22:21 +0000
@@ -133,11 +133,6 @@
 
 void TopLevelSurfaceList::connectSurface(MirSurfaceInterface *surface)
 {
-    connect(surface, &MirSurfaceInterface::focusedChanged, this, [this, surface](bool focused){
-            if (focused) {
-                this->raise(surface);
-            }
-        });
     connect(surface, &MirSurfaceInterface::liveChanged, this, [this, surface](bool live){
             if (!live) {
                 onSurfaceDied(surface);

=== modified file 'qml/CMakeLists.txt'
--- qml/CMakeLists.txt	2015-03-06 04:44:11 +0000
+++ qml/CMakeLists.txt	2016-10-05 11:22:21 +0000
@@ -12,7 +12,7 @@
     Launcher
     Notifications
     Panel
-    Stages
+    Stage
     Rotation
     Tutorial
     Wizard

=== modified file 'qml/Components/EdgeBarrier.qml'
--- qml/Components/EdgeBarrier.qml	2016-02-15 16:43:56 +0000
+++ qml/Components/EdgeBarrier.qml	2016-10-05 11:22:21 +0000
@@ -29,6 +29,8 @@
     // Supported values are: Qt.LeftEdge, Qt.RightEdge
     property int edge: Qt.LeftEdge
 
+    readonly property alias progress: controller.progress
+
     property Item target: parent
     function push(amount) { controller.push(amount); }
     signal passed()

=== modified file 'qml/Components/FloatingFlickable.qml'
--- qml/Components/FloatingFlickable.qml	2016-08-08 10:41:38 +0000
+++ qml/Components/FloatingFlickable.qml	2016-10-05 11:22:21 +0000
@@ -35,6 +35,9 @@
     property alias contentX: flickable.contentX
     property alias contentY: flickable.contentY
     property alias direction: swipeArea.direction
+    property alias leftMargin: flickable.leftMargin
+    property alias rightMargin: flickable.rightMargin
+    property alias dragging: flickable.dragging
 
     MouseEventGenerator {
         id: mouseEventGenerator

=== removed file 'qml/Components/UbuntuShapeForItem.qml'
--- qml/Components/UbuntuShapeForItem.qml	2016-03-23 20:05:10 +0000
+++ qml/Components/UbuntuShapeForItem.qml	1970-01-01 00:00:00 +0000
@@ -1,47 +0,0 @@
-/*
- * Copyright (C) 2012 Canonical, Ltd.
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; version 3.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import QtQuick 2.4
-import Ubuntu.Components 1.3
-
-/* FIXME: This component is duplicating the UbuntuShape from the SDK, but shapes more
- * general (Item-based) components. This ability should be incorporated into the SDK's
- * UbuntuShape so this file can be removed.
- * Bug: https://bugs.launchpad.net/tavastia/+bug/1089595
- */
-
-Item {
-    id: root
-
-    property alias radius: shape.radius
-    property alias image: source.sourceItem
-    property alias aspect: shape.aspect
-
-    ShaderEffectSource {
-        id: source
-        anchors.centerIn: parent // Placed under shape, so it's hidden
-        width: 1
-        height: 1
-        hideSource: true
-    }
-
-    Shape {
-        id: shape
-        image: source
-
-        anchors.fill: parent
-    }
-}

=== modified file 'qml/Greeter/LoginAreaContainer.qml'
--- qml/Greeter/LoginAreaContainer.qml	2016-06-14 17:34:35 +0000
+++ qml/Greeter/LoginAreaContainer.qml	2016-10-05 11:22:21 +0000
@@ -26,7 +26,7 @@
             rightMargin: -units.gu(1.5)
             bottomMargin: -units.gu(1.5)
         }
-        source: "../Stages/graphics/dropshadow2gu.sci"
+        source: "../graphics/dropshadow2gu.sci"
         opacity: 0.35
     }
 

=== modified file 'qml/Launcher/LauncherPanel.qml'
--- qml/Launcher/LauncherPanel.qml	2016-08-08 10:42:40 +0000
+++ qml/Launcher/LauncherPanel.qml	2016-10-05 11:22:21 +0000
@@ -632,7 +632,7 @@
         }
     }
 
-    UbuntuShapeForItem {
+    UbuntuShape {
         id: quickListShape
         objectName: "quickListShape"
         anchors.fill: quickList
@@ -645,7 +645,10 @@
             UbuntuNumberAnimation {}
         }
 
-        image: quickList
+        source: ShaderEffectSource {
+            sourceItem: quickList
+            hideSource: true
+        }
 
         Image {
             anchors {

=== modified file 'qml/Notifications/Notification.qml'
--- qml/Notifications/Notification.qml	2016-08-19 13:27:05 +0000
+++ qml/Notifications/Notification.qml	2016-10-05 11:22:21 +0000
@@ -143,7 +143,7 @@
             fill: contents
             margins: shapedBack.visible ? -units.gu(1) : -units.gu(1.5)
         }
-        source: "../Stages/graphics/dropshadow2gu.sci"
+        source: "../graphics/dropshadow2gu.sci"
         opacity: notification.opacity * 0.5
         enabled: !fullscreen
     }

=== modified file 'qml/Rotation/RotationStates.qml'
--- qml/Rotation/RotationStates.qml	2016-04-29 12:52:53 +0000
+++ qml/Rotation/RotationStates.qml	2016-10-05 11:22:21 +0000
@@ -121,12 +121,6 @@
             }
         }
 
-        property var shellBeingResized: Binding {
-            target: root.shell
-            property: "beingResized"
-            value: d.transitioning
-        }
-
         readonly property int fullAnimation: 0
         readonly property int indicatorsBarAnimation: 1
         readonly property int noAnimation: 2

=== modified file 'qml/Shell.qml'
--- qml/Shell.qml	2016-09-22 07:42:01 +0000
+++ qml/Shell.qml	2016-10-05 11:22:21 +0000
@@ -35,7 +35,7 @@
 import "Panel"
 import "Components"
 import "Notifications"
-import "Stages"
+import "Stage"
 import "Tutorial"
 import "Wizard"
 import Unity.Notifications 1.0 as NotificationBackend
@@ -58,24 +58,22 @@
     property real nativeWidth
     property real nativeHeight
     property alias indicatorAreaShowProgress: panel.indicatorAreaShowProgress
-    property bool beingResized
     property string usageScenario: "phone" // supported values: "phone", "tablet" or "desktop"
     property string mode: "full-greeter"
     property alias oskEnabled: inputMethod.enabled
     function updateFocusedAppOrientation() {
-        applicationsDisplayLoader.item.updateFocusedAppOrientation();
+        stage.updateFocusedAppOrientation();
     }
     function updateFocusedAppOrientationAnimated() {
-        applicationsDisplayLoader.item.updateFocusedAppOrientationAnimated();
+        stage.updateFocusedAppOrientationAnimated();
     }
     property bool hasMouse: false
 
     // to be read from outside
-    readonly property int mainAppWindowOrientationAngle:
-            applicationsDisplayLoader.item ? applicationsDisplayLoader.item.mainAppWindowOrientationAngle : 0
+    readonly property int mainAppWindowOrientationAngle: stage.mainAppWindowOrientationAngle
 
     readonly property bool orientationChangesEnabled: panel.indicators.fullyClosed
-            && (applicationsDisplayLoader.item && applicationsDisplayLoader.item.orientationChangesEnabled)
+            && stage.orientationChangesEnabled
             && (!greeter || !greeter.animating)
 
     readonly property bool showingGreeter: greeter && greeter.shown
@@ -89,19 +87,13 @@
             return Qt.PrimaryOrientation;
         } else if (showingGreeter || notifications.topmostIsFullscreen) {
             return Qt.PrimaryOrientation;
-        } else if (applicationsDisplayLoader.item) {
-            return shell.orientations.map(applicationsDisplayLoader.item.supportedOrientations);
         } else {
-            // we just don't care
-            return Qt.PortraitOrientation
-                 | Qt.LandscapeOrientation
-                 | Qt.InvertedPortraitOrientation
-                 | Qt.InvertedLandscapeOrientation;
+            return shell.orientations.map(stage.supportedOrientations);
         }
     }
 
-    readonly property var mainApp:
-            applicationsDisplayLoader.item ? applicationsDisplayLoader.item.mainApp : null
+    readonly property var mainApp: stage.mainApp
+
     onMainAppChanged: {
         if (mainApp) {
             _onMainAppChanged(mainApp.appId);
@@ -278,154 +270,50 @@
             applicationsModel: ApplicationManager
         }
 
-        Loader {
-            id: applicationsDisplayLoader
-            objectName: "applicationsDisplayLoader"
+        Stage {
+            id: stage
+            objectName: "stage"
             anchors.fill: parent
-
-            // When we have a locked app, we only want to show that one app.
-            // FIXME: do this in a less traumatic way.  We currently only allow
-            // locked apps in phone mode (see FIXME in Lockscreen component in
-            // this same file).  When that changes, we need to do something
-            // nicer here.  But this code is currently just to prevent a
-            // theoretical attack where user enters lockedApp mode, then makes
-            // the screen larger (maybe connects to monitor) and tries to enter
-            // tablet mode.
+            focus: true
+
+            dragAreaWidth: shell.edgeSize
+            background: wallpaperResolver.background
+            leftEdgeDragProgress: !greeter || greeter.locked || !tutorial.launcherLongSwipeEnabled ? 0 :
+                                Math.max(0, (launcher.dragDistance * (stage.width - launcher.panelWidth) / stage.width) - launcher.panelWidth)
+
+            applicationManager: ApplicationManager
+            topLevelSurfaceList: topLevelSurfaceList
+            inputMethodRect: inputMethod.visibleRect
 
             property string usageScenario: shell.usageScenario === "phone" || greeter.hasLockedApp
-                                           ? "phone"
-                                           : shell.usageScenario
-            readonly property string qmlComponent: {
-                if (applicationsDisplayLoader.usageScenario === "phone") {
-                    return "Stages/PhoneStage.qml";
-                } else if (applicationsDisplayLoader.usageScenario === "tablet") {
-                    return "Stages/TabletStage.qml";
-                } else {
-                    return "Stages/DesktopStage.qml";
-                }
-            }
-            // TODO: Ensure the current stage is destroyed before the new one gets loaded.
-            //       Currently the new one will get loaded while the old is still hanging
-            //       around for a bit, which might lead to conflicts where both stages
-            //       change the model simultaneously.
-            onQmlComponentChanged: {
-                if (item) item.stageAboutToBeUnloaded();
-                source = qmlComponent;
-            }
-
-            property bool interactive: (!greeter || !greeter.shown)
+                                                       ? "phone"
+                                                       : shell.usageScenario
+
+            mode: usageScenario == "phone" ? "staged"
+                     : usageScenario == "tablet" ? "stagedWithSideStage"
+                     : "windowed"
+
+            shellOrientation: shell.orientation
+            shellOrientationAngle: shell.orientationAngle
+            orientations: shell.orientations
+            nativeWidth: shell.nativeWidth
+            nativeHeight: shell.nativeHeight
+
+            interactive: (!greeter || !greeter.shown)
                     && panel.indicators.fullyClosed
                     && launcher.progress == 0
                     && !notifications.useModal
 
             onInteractiveChanged: { if (interactive) { focus = true; } }
 
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "focus"
-                value: true
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "objectName"
-                value: "stage"
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "dragAreaWidth"
-                value: shell.edgeSize
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "maximizedAppTopMargin"
-                // Not just using panel.panelHeight as that changes depending on the focused app.
-                value: panel.indicators.minimizedPanelHeight
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "interactive"
-                value: applicationsDisplayLoader.interactive
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "spreadEnabled"
-                value: tutorial.spreadEnabled && (!greeter || (!greeter.hasLockedApp && !greeter.shown))
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "inverseProgress"
-                value: !greeter || greeter.locked || !tutorial.launcherLongSwipeEnabled ? 0 : launcher.progress
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "shellOrientationAngle"
-                value: shell.orientationAngle
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "shellOrientation"
-                value: shell.orientation
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "orientations"
-                value: shell.orientations
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "background"
-                value: wallpaperResolver.cachedBackground
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "nativeWidth"
-                value: shell.nativeWidth
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "nativeHeight"
-                value: shell.nativeHeight
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "beingResized"
-                value: shell.beingResized
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "keepDashRunning"
-                value: launcher.shown || launcher.dashSwipe
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "suspended"
-                value: greeter.shown
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "altTabPressed"
-                value: physicalKeysMapper.altTabPressed
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "leftMargin"
-                value: shell.usageScenario == "desktop" && !settings.autohideLauncher ? launcher.panelWidth: 0
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "applicationManager"
-                value: ApplicationManager
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "topLevelSurfaceList"
-                value: topLevelSurfaceList
-            }
-            Binding {
-                target: applicationsDisplayLoader.item
-                property: "oskEnabled"
-                value: shell.oskEnabled
-            }
+            leftMargin: shell.usageScenario == "desktop" && !settings.autohideLauncher ? launcher.panelWidth: 0
+            suspended: greeter.shown
+            keepDashRunning: launcher.shown || launcher.dashSwipe
+            altTabPressed: physicalKeysMapper.altTabPressed
+            oskEnabled: shell.oskEnabled
+
+            // TODO: This is not implemented yet in the new stage...
+            spreadEnabled: tutorial.spreadEnabled && (!greeter || (!greeter.hasLockedApp && !greeter.shown))
         }
     }
 
@@ -442,6 +330,7 @@
 
     Loader {
         id: greeterLoader
+        objectName: "greeterLoader"
         anchors.fill: parent
         anchors.topMargin: panel.panelHeight
         sourceComponent: shell.mode != "shell" ? integratedGreeter :
@@ -650,7 +539,7 @@
             }
             onFocusChanged: {
                 if (!focus) {
-                    applicationsDisplayLoader.focus = true;
+                    stage.focus = true;
                 }
             }
 
@@ -706,12 +595,12 @@
             delayed: dialogs.hasActiveDialog || notifications.hasNotification ||
                      inputMethod.visible ||
                      (launcher.shown && !launcher.lockedVisible) ||
-                     panel.indicators.shown || stage.dragProgress > 0
+                     panel.indicators.shown || stage.rightEdgeDragProgress > 0
             usageScenario: shell.usageScenario
             lastInputTimestamp: inputFilter.lastInputTimestamp
             launcher: launcher
             panel: panel
-            stage: applicationsDisplayLoader.item
+            stage: stage
         }
 
         Wizard {
@@ -802,7 +691,7 @@
         z: dialogs.z + 10
         GlobalShortcut { shortcut: Qt.Key_Print; onTriggered: itemGrabber.capture(shell) }
         Connections {
-            target: applicationsDisplayLoader.item
+            target: stage
             ignoreUnknownSignals: true
             onItemSnapshotRequested: itemGrabber.capture(item)
         }
@@ -814,7 +703,7 @@
         z: itemGrabber.z + 1
         topBoundaryOffset: panel.panelHeight
 
-        confiningItem: applicationsDisplayLoader.item ? applicationsDisplayLoader.item.itemConfiningMouseCursor : null
+        confiningItem: stage.itemConfiningMouseCursor
 
         property bool mouseNeverMoved: true
         Binding {
@@ -828,10 +717,9 @@
 
         height: units.gu(3)
 
-        readonly property var previewRectangle: applicationsDisplayLoader.item && applicationsDisplayLoader.item.previewRectangle &&
-                                                applicationsDisplayLoader.item.previewRectangle.target &&
-                                                applicationsDisplayLoader.item.previewRectangle.target.dragging ?
-                                                    applicationsDisplayLoader.item.previewRectangle : null
+        readonly property var previewRectangle: stage.previewRectangle.target &&
+                                                stage.previewRectangle.target.dragging ?
+                                                stage.previewRectangle : null
 
         onPushedLeftBoundary: {
             if (buttons === Qt.NoButton) {
@@ -842,9 +730,8 @@
         }
 
         onPushedRightBoundary: {
-            if (buttons === Qt.NoButton && applicationsDisplayLoader.item
-                    && applicationsDisplayLoader.item.pushRightEdge) {
-                applicationsDisplayLoader.item.pushRightEdge(amount);
+            if (buttons === Qt.NoButton) {
+                stage.pushRightEdge(amount);
             } else if (buttons === Qt.LeftButton && previewRectangle && previewRectangle.target.canBeMaximizedLeftRight) {
                 previewRectangle.maximizeRight(amount);
             }

=== renamed directory 'qml/Stages' => 'qml/Stage'
=== modified file 'qml/Stage/ApplicationWindow.qml'
--- qml/Stages/ApplicationWindow.qml	2016-08-08 11:18:19 +0000
+++ qml/Stage/ApplicationWindow.qml	2016-10-05 11:22:21 +0000
@@ -20,8 +20,8 @@
 
 FocusScope {
     id: root
-    implicitWidth: surfaceContainer.implicitWidth
-    implicitHeight: surfaceContainer.implicitHeight
+    implicitWidth: requestedWidth
+    implicitHeight: requestedHeight
 
     // to be read from outside
     property alias interactive: surfaceContainer.interactive
@@ -29,22 +29,10 @@
     readonly property string title: surface && surface.name !== "" ? surface.name : d.name
     readonly property QtObject focusedSurface: d.focusedSurface.surface
 
-    // overridable from outside
-    property bool fullscreen: {
-        if (surface) {
-            return surface.state === Mir.FullscreenState;
-        } else if (application) {
-            return application.fullscreen;
-        } else {
-            return false;
-        }
-    }
-
     // to be set from outside
     property QtObject surface
     property QtObject application
     property int surfaceOrientationAngle
-    property alias resizeSurface: surfaceContainer.resizeSurface
     property int requestedWidth: -1
     property int requestedHeight: -1
     property real splashRotation: 0
@@ -156,6 +144,9 @@
         id: screenshotImage
         objectName: "screenshotImage"
         anchors.fill: parent
+        fillMode: Image.PreserveAspectCrop
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
         antialiasing: !root.interactive
         z: 1
 
@@ -197,6 +188,7 @@
 
     SurfaceContainer {
         id: surfaceContainer
+        anchors.fill: parent
         z: splashLoader.z + 1
         requestedWidth: root.requestedWidth
         requestedHeight: root.requestedHeight
@@ -220,6 +212,8 @@
             surface: model.surface
             width: root.width
             height: root.height
+            requestedWidth: root.requestedWidth
+            requestedHeight: root.requestedHeight
             isPromptSurface: true
             z: surfaceContainer.z + (promptSurfacesRepeater.count - index)
             property int index: model.index
@@ -239,28 +233,6 @@
         property Item first: null
     }
 
-    // SurfaceContainer size drives ApplicationWindow size
-    Binding {
-        target: root; property: "width"
-        value: stateGroup.state === "surface" ? surfaceContainer.width : root.requestedWidth
-        when: root.requestedWidth >= 0
-    }
-    Binding {
-        target: root; property: "height"
-        value: stateGroup.state === "surface" ? surfaceContainer.height : root.requestedHeight
-        when: root.requestedHeight >= 0
-    }
-
-    // ApplicationWindow size drives SurfaceContainer size
-    Binding {
-        target: surfaceContainer; property: "width"; value: root.width
-        when: root.requestedWidth < 0
-    }
-    Binding {
-        target: surfaceContainer; property: "height"; value: root.height
-        when: root.requestedHeight < 0
-    }
-
     StateGroup {
         id: stateGroup
         objectName: "applicationWindowStateGroup"
@@ -287,6 +259,11 @@
                       (d.liveSurface ||
                        (d.applicationState !== ApplicationInfoInterface.Running
                         && screenshotImage.status !== Image.Ready))
+                PropertyChanges {
+                    target: root
+                    implicitWidth: surfaceContainer.implicitWidth
+                    implicitHeight: surfaceContainer.implicitHeight
+                }
             },
             State {
                 name: "screenshot"
@@ -424,5 +401,4 @@
             }
         ]
     }
-
 }

=== modified file 'qml/Stage/DecoratedWindow.qml'
--- qml/Stages/DecoratedWindow.qml	2016-09-08 14:13:27 +0000
+++ qml/Stage/DecoratedWindow.qml	2016-10-05 11:22:21 +0000
@@ -17,34 +17,46 @@
 import QtQuick 2.4
 import Ubuntu.Components 1.3
 import Unity.Application 0.1
+import "Spread/MathUtils.js" as MathUtils
 
 FocusScope {
     id: root
 
-    width: !counterRotate ? applicationWindow.width : applicationWindow.height
-    height: visibleDecorationHeight + (!counterRotate ? applicationWindow.height : applicationWindow.width)
+    // The DecoratedWindow takes requestedWidth/requestedHeight and asks its surface to be resized to that
+    // (minus the window decoration size in case hasDecoration and showDecoration are true)
+    // The surface might not be able to resize to the requested values. It will return its actual size
+    // in implicitWidth/implicitHeight.
 
     property alias application: applicationWindow.application
     property alias surface: applicationWindow.surface
     readonly property alias focusedSurface: applicationWindow.focusedSurface
     property alias active: decoration.active
     readonly property alias title: applicationWindow.title
-    property alias fullscreen: applicationWindow.fullscreen
     property alias maximizeButtonShown: decoration.maximizeButtonShown
+    property alias interactive: applicationWindow.interactive
+    readonly property alias orientationChangesEnabled: applicationWindow.orientationChangesEnabled
 
-    readonly property bool decorationShown: !fullscreen
-    property bool highlightShown: false
-    property real shadowOpacity: 1
+    // Changing this will actually add/remove a decoration, meaning, requestedHeight will take the decoration into account.
+    property bool hasDecoration: true
+    // This will temporarily show/hide the decoration without actually changing the surface's dimensions
+    property real showDecoration: 1
+    property bool animateDecoration: false
+    property bool showHighlight: false
+    property int highlightSize: units.gu(1)
+    property real shadowOpacity: 0
+    property bool darkening: false
 
     property real requestedWidth
     property real requestedHeight
+    property real scaleToPreviewProgress: 0
+    property int scaleToPreviewSize: units.gu(30)
 
     property alias surfaceOrientationAngle: applicationWindow.surfaceOrientationAngle
-    readonly property real visibleDecorationHeight: root.decorationShown ? decoration.height : 0
+    readonly property real decorationHeight: Math.min(d.visibleDecorationHeight, d.requestedDecorationHeight)
     readonly property bool counterRotate: surfaceOrientationAngle != 0 && surfaceOrientationAngle != 180
 
     readonly property int minimumWidth: !counterRotate ? applicationWindow.minimumWidth : applicationWindow.minimumHeight
-    readonly property int minimumHeight: visibleDecorationHeight + (!counterRotate ? applicationWindow.minimumHeight : applicationWindow.minimumWidth)
+    readonly property int minimumHeight: decorationHeight + (!counterRotate ? applicationWindow.minimumHeight : applicationWindow.minimumWidth)
     readonly property int maximumWidth: !counterRotate ? applicationWindow.maximumWidth : applicationWindow.maximumHeight
     readonly property int maximumHeight: (root.decorationShown && applicationWindow.maximumHeight > 0 ? decoration.height : 0)
                                          + (!counterRotate ? applicationWindow.maximumHeight : applicationWindow.maximumWidth)
@@ -66,40 +78,97 @@
     signal decorationPressed()
     signal decorationReleased()
 
+    QtObject {
+        id: d
+        property int requestedDecorationHeight: root.hasDecoration ? decoration.height : 0
+        Behavior on requestedDecorationHeight { enabled: root.animateDecoration; UbuntuNumberAnimation { } }
+
+        property int visibleDecorationHeight: root.hasDecoration ? root.showDecoration * decoration.height : 0
+        Behavior on visibleDecorationHeight { enabled: root.animateDecoration; UbuntuNumberAnimation { } }
+    }
+
+    StateGroup {
+        states: [
+            State {
+                name: "normal"; when: root.scaleToPreviewProgress <= 0 && root.application.state === ApplicationInfoInterface.Running
+                PropertyChanges {
+                    target: root
+                    implicitWidth: counterRotate ? applicationWindow.implicitHeight : applicationWindow.implicitWidth
+                    implicitHeight: root.decorationHeight + (counterRotate ? applicationWindow.implicitWidth:  applicationWindow.implicitHeight)
+                }
+            },
+            State {
+                name: "normalSuspended"; when: root.scaleToPreviewProgress <= 0 && root.application.state !== ApplicationInfoInterface.Running
+                PropertyChanges {
+                    target: root
+                    implicitWidth: counterRotate ? applicationWindow.requestedHeight : applicationWindow.requestedWidth
+                    implicitHeight: root.decorationHeight + (counterRotate ? applicationWindow.requestedWidth:  applicationWindow.requestedHeight)
+                }
+//                PropertyChanges { target: applicationWindow; anchors.topMargin: (root.height - applicationWindow.implicitHeight) / 2 }
+//                PropertyChanges { target: dropShadow; anchors.topMargin: (root.height - applicationWindow.implicitHeight) / 2 }
+            },
+            State {
+                name: "preview"; when: root.scaleToPreviewProgress > 0 && root.application.state === ApplicationInfoInterface.Running
+                PropertyChanges {
+                    target: root
+                    implicitWidth: MathUtils.linearAnimation(0, 1, applicationWindow.oldRequestedWidth, root.scaleToPreviewSize, root.scaleToPreviewProgress)
+                    implicitHeight: MathUtils.linearAnimation(0, 1, applicationWindow.oldRequestedHeight, root.scaleToPreviewSize, root.scaleToPreviewProgress)
+                }
+                PropertyChanges {
+                    target: applicationWindow;
+                    requestedWidth: applicationWindow.oldRequestedWidth
+                    requestedHeight: applicationWindow.oldRequestedHeight
+                    width: MathUtils.linearAnimation(0, 1, applicationWindow.oldRequestedWidth, applicationWindow.minSize, root.scaleToPreviewProgress)
+                    height: MathUtils.linearAnimation(0, 1, applicationWindow.oldRequestedHeight, applicationWindow.minSize, root.scaleToPreviewProgress)
+                    itemScale: root.implicitWidth / width
+                }
+            },
+            State {
+                name: "previewSuspended"; when: root.scaleToPreviewProgress > 0 && root.application.state !== ApplicationInfoInterface.Running
+                extend: "preview"
+                PropertyChanges { target: applicationWindow;
+                    anchors.verticalCenterOffset: applicationWindow.implicitHeight < applicationWindow.height ?
+                        (root.height / applicationWindow.itemScale - applicationWindow.implicitHeight) / 2
+                        : (root.height / applicationWindow.itemScale - applicationWindow.height) / 2
+                }
+//                PropertyChanges { target: dropShadow; anchors.topMargin: (root.height - root.implicitHeight) / 2 * (1 - root.scaleToPreviewProgress) }
+            }
+        ]
+    }
+
     Rectangle {
         id: selectionHighlight
+        objectName: "selectionHighlight"
         anchors.fill: parent
-        anchors.margins: -units.gu(1)
+        anchors.margins: -root.highlightSize
         color: "white"
-        opacity: highlightShown ? 0.15 : 0
-    }
-
-    Rectangle {
-        anchors { left: selectionHighlight.left; right: selectionHighlight.right; bottom: selectionHighlight.bottom; }
-        height: units.dp(2)
-        color: theme.palette.normal.focus
-        visible: highlightShown
+        opacity: showHighlight ? 0.55 : 0
+        visible: opacity > 0
     }
 
     BorderImage {
+        id: dropShadow
         anchors {
-            fill: root
+            left: parent.left; top: parent.top; right: parent.right
             margins: active ? -units.gu(2) : -units.gu(1.5)
         }
-        source: "graphics/dropshadow2gu.sci"
-        opacity: root.shadowOpacity * .3
-        visible: !fullscreen
+        height: Math.min(applicationWindow.implicitHeight, applicationWindow.height) * applicationWindow.itemScale
+                + root.decorationHeight * Math.min(1, root.showDecoration) + (active ? units.gu(4) : units.gu(3))
+        source: "../graphics/dropshadow2gu.sci"
+        opacity: root.shadowOpacity
     }
 
     WindowDecoration {
         id: decoration
-        target: root.parent
+        target: root.parent || null
         objectName: "appWindowDecoration"
         anchors { left: parent.left; top: parent.top; right: parent.right }
         height: units.gu(3)
         width: root.width
         title: applicationWindow.title
-        visible: root.decorationShown
+        opacity: root.hasDecoration ? Math.min(1, root.showDecoration) : 0
+
+        Behavior on opacity { UbuntuNumberAnimation { } }
 
         onCloseClicked: root.closeClicked();
         onMaximizeClicked: { root.decorationPressed(); root.maximizeClicked(); }
@@ -126,16 +195,25 @@
     ApplicationWindow {
         id: applicationWindow
         objectName: "appWindow"
-        anchors.top: parent.top
-        anchors.topMargin: decoration.height
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.verticalCenterOffset: (root.decorationHeight * Math.min(1, root.showDecoration)) / 2
         anchors.left: parent.left
-        readonly property real requestedHeightMinusDecoration: root.requestedHeight - root.visibleDecorationHeight
-        requestedHeight: !counterRotate ? requestedHeightMinusDecoration : root.requestedWidth
-        requestedWidth: !counterRotate ? root.requestedWidth : requestedHeightMinusDecoration
-        interactive: true
+        width: implicitWidth
+        height: implicitHeight
+        requestedHeight: !counterRotate ? root.requestedHeight - d.requestedDecorationHeight : root.requestedWidth
+        requestedWidth: !counterRotate ? root.requestedWidth : root.requestedHeight - d.requestedDecorationHeight
+        property int oldRequestedWidth: requestedWidth
+        property int oldRequestedHeight: requestedHeight
+        onRequestedWidthChanged: oldRequestedWidth = requestedWidth
+        onRequestedHeightChanged: oldRequestedHeight = requestedHeight
         focus: true
 
-        transform: Rotation {
+        property real itemScale: 1
+        property real minSize: Math.min(root.scaleToPreviewSize, Math.min(requestedHeight, Math.min(requestedWidth, Math.min(implicitHeight, implicitWidth))))
+
+        transform: [
+            Rotation {
+                id: rotationTransform
                 readonly property int rotationAngle: applicationWindow.application &&
                                                      applicationWindow.application.rotatesWindowContents
                                                      ? ((360 - applicationWindow.surfaceOrientationAngle) % 360) : 0
@@ -152,6 +230,20 @@
                     else return 0;
                 }
                 angle: rotationAngle
-        }
+            },
+            Scale {
+                origin.y: (applicationWindow.implicitHeight < applicationWindow.height ? applicationWindow.implicitHeight : applicationWindow.height) / 2
+                xScale: applicationWindow.itemScale
+                yScale: applicationWindow.itemScale
+            }
+        ]
+
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        color: "black"
+        opacity: root.darkening && !root.showHighlight ? 0.05 : 0
+        Behavior on opacity { UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration } }
     }
 }

=== modified file 'qml/Stage/MoveHandler.qml'
--- qml/Stages/MoveHandler.qml	2016-09-08 14:13:27 +0000
+++ qml/Stage/MoveHandler.qml	2016-10-05 11:22:21 +0000
@@ -112,8 +112,8 @@
             // Use integer coordinate values to ensure that target is left in a pixel-aligned
             // position. Mouse movement could have subpixel precision, yielding a fractional
             // mouse position.
-            target.requestedX = Math.round(pos.x - priv.distanceX);
-            target.requestedY = Math.round(Math.max(pos.y - priv.distanceY, PanelState.panelHeight));
+            target.windowedX = Math.round(pos.x - priv.distanceX);
+            target.windowedY = Math.round(Math.max(pos.y - priv.distanceY, PanelState.panelHeight));
 
             if (sensingPoints) { // edge/corner detection when dragging via the touch overlay
                 if (sensingPoints.topLeft.x < priv.triggerArea && sensingPoints.topLeft.y < PanelState.panelHeight + priv.triggerArea

=== modified file 'qml/Stage/PromptSurfaceAnimations.qml'
--- qml/Stages/PromptSurfaceAnimations.qml	2016-04-04 13:38:56 +0000
+++ qml/Stage/PromptSurfaceAnimations.qml	2016-10-05 11:22:21 +0000
@@ -43,7 +43,7 @@
             SequentialAnimation {
                 // clip so we don't go out of parent's bounds during spread
                 PropertyAction { target: root.container.parent; property: "clip"; value: true }
-                UbuntuNumberAnimation { target: root.surfaceItem; property: "y"; to: root.container.height
+                UbuntuNumberAnimation { target: root.surfaceItem; property: "anchors.topMargin"; to: root.container.height
                                         duration: UbuntuAnimation.BriskDuration }
                 PropertyAction { target: root.surfaceItem; property: "visible"; value: false }
                 PropertyAction { target: container.parent; property: "clip"; value: false }
@@ -61,11 +61,10 @@
                 // clip so we don't go out of parent's bounds during spread
                 PropertyAction { target: root.container.parent; property: "clip"; value: true }
                 ScriptAction { script: {
-                    root.surfaceItem.y = root.container.height;
                     root.surfaceItem.visible = true;
                 } }
                 UbuntuNumberAnimation {
-                    target: root.surfaceItem; property: "y"; to: 0
+                    target: root.surfaceItem; property: "anchors.topMargin"; from: root.container.height; to: 0
                     duration: UbuntuAnimation.BriskDuration
                 }
                 PropertyAction { target: container.parent; property: "clip"; value: false }

=== added directory 'qml/Stage/Spread'
=== added file 'qml/Stage/Spread/BezierCurve.qml'
--- qml/Stage/Spread/BezierCurve.qml	1970-01-01 00:00:00 +0000
+++ qml/Stage/Spread/BezierCurve.qml	2016-10-05 11:22:21 +0000
@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) 2016 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+import QtQuick.Window 2.2
+import 'cubic-bezier.js' as Bezier
+import 'KeySpline.js' as KeySpline
+
+Item {
+    id: root
+
+    property var controlPoint1: {'x':0, 'y':0}
+    property var controlPoint2: {'x':0, 'y':0}
+    property var controlPoint3: {'x':0.58, 'y':1}
+    property var controlPoint4: {'x':1, 'y':1}
+
+    function getValues(t) {
+        if (t<0) t=0
+        else if (t>1)t=1
+
+        return Bezier.getBezier(t, controlPoint1, controlPoint2, controlPoint3, controlPoint4)
+    }
+
+    function getYFromX(x) {
+        var spline = new KeySpline.keySpline(controlPoint2.x, controlPoint2.y, controlPoint3.x, controlPoint3.y)
+        if (x<0) x=0
+        else if (x>1)x=1
+
+        return spline.get(x)
+    }
+}

=== added file 'qml/Stage/Spread/KeySpline.js'
--- qml/Stage/Spread/KeySpline.js	1970-01-01 00:00:00 +0000
+++ qml/Stage/Spread/KeySpline.js	2016-10-05 11:22:21 +0000
@@ -0,0 +1,66 @@
+/** MIT License
+ *
+ * KeySpline - use bezier curve for transition easing function
+ * Copyright (c) 2012 Gaetan Renaudeau <[e-mail]>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ */
+/**
+* KeySpline - use bezier curve for transition easing function
+* is inspired from Firefox's nsSMILKeySpline.cpp
+* Usage:
+* var spline = new KeySpline(0.25, 0.1, 0.25, 1.0)
+* spline.get(x) => returns the easing value | x must be in [0, 1] range
+*/
+
+.pragma library
+
+function keySpline (mX1, mY1, mX2, mY2) {
+
+  this.get = function(aX) {
+    if (mX1 == mY1 && mX2 == mY2) return aX; // linear
+    return CalcBezier(GetTForX(aX), mY1, mY2);
+  }
+
+  function A(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
+  function B(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
+  function C(aA1)      { return 3.0 * aA1; }
+
+  // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+  function CalcBezier(aT, aA1, aA2) {
+    return ((A(aA1, aA2)*aT + B(aA1, aA2))*aT + C(aA1))*aT;
+  }
+
+  // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
+  function GetSlope(aT, aA1, aA2) {
+    return 3.0 * A(aA1, aA2)*aT*aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
+  }
+
+  function GetTForX(aX) {
+    // Newton raphson iteration
+    var aGuessT = aX;
+    for (var i = 0; i < 4; ++i) {
+      var currentSlope = GetSlope(aGuessT, mX1, mX2);
+      if (currentSlope == 0.0) return aGuessT;
+      var currentX = CalcBezier(aGuessT, mX1, mX2) - aX;
+      aGuessT -= currentX / currentSlope;
+    }
+    return aGuessT;
+  }
+}

=== added file 'qml/Stage/Spread/MathUtils.js'
--- qml/Stage/Spread/MathUtils.js	1970-01-01 00:00:00 +0000
+++ qml/Stage/Spread/MathUtils.js	2016-10-05 11:22:21 +0000
@@ -0,0 +1,95 @@
+/*
+ * Copyright (C) 2016 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+.pragma library
+
+/**
+ * From processing.js: https://raw.githubusercontent.com/processing-js/processing-js/v1.4.8/processing.js
+ *
+ * Re-map a number from one range to another. In the example above, the number
+ * '25' is converted from a value in the range 0..100 into a value that
+ * ranges from the left edge (0) to the right edge (width) of the screen.
+ * Numbers outside the range are not clamped to 0 and 1, because out-of-range
+ * values are often intentional and useful.
+ *
+ * @param {Number} value        The incoming value to be converted
+ * @param {Number} istart       Lower bound of the value's current range
+ * @param {Number} istop        Upper bound of the value's current range
+ * @param {Number} ostart       Lower bound of the value's target range
+ * @param {Number} ostop        Upper bound of the value's target range
+ *
+ * @returns {Number}
+ */
+function map(value, istart, istop, ostart, ostop) {
+  return ostart + (ostop - ostart) * ((value - istart) / (istop - istart))
+}
+
+/**
+ * Return a value which is always between `min` and `max`
+ *
+ * @param {Number} value     The current value
+ * @param {Number} min       The minimum value
+ * @param {Number} max       The maximum value
+ *
+ * @returns {Number}
+ */
+function clamp(value, min, max) {
+  if (value < min) return min
+  if (value > max) return max
+  return value
+}
+
+// calculates the distance from the middle of one rect to middle of other rect
+function rectDistance(rect1, rect2) {
+    return pointDistance(Qt.point(rect1.x + rect1.width / 2, rect1.y + rect1.height / 2),
+                         Qt.point(rect2.x + rect2.width / 2, rect2.y + rect2.height / 2))
+}
+
+// calculates the distance between two points
+function pointDistance(point1, point2) {
+    return Math.sqrt(Math.pow(point1.x - point2.x, 2) +
+                     Math.pow(point1.y - point2.y, 2)
+                    )
+}
+
+// from http://stackoverflow.com/questions/14616829/java-method-to-find-the-rectangle-that-is-the-intersection-of-two-rectangles-usi
+function intersectionRect(r1, r2) {
+    var xmin = Math.max(r1.x, r2.x);
+    var xmax1 = r1.x + r1.width;
+    var xmax2 = r2.x + r2.width;
+    var xmax = Math.min(xmax1, xmax2);
+    var out = {x:0, y:0, width:0, height:0}
+    if (xmax > xmin) {
+        var ymin = Math.max(r1.y, r2.y);
+        var ymax1 = r1.y + r1.height;
+        var ymax2 = r2.y + r2.height;
+        var ymax = Math.min(ymax1, ymax2);
+        if (ymax > ymin) {
+            out.x = xmin;
+            out.y = ymin;
+            out.width = xmax - xmin;
+            out.height = ymax - ymin;
+        }
+    }
+    return out;
+}
+
+function easeOutCubic(t) { return (--t)*t*t+1 }
+
+function linearAnimation(startProgress, endProgress, startValue, endValue, progress) {
+    // progress : progressDiff = value : valueDiff => value = progress * valueDiff / progressDiff
+    return (progress - startProgress) * (endValue - startValue) / (endProgress - startProgress) + startValue;
+}

=== added file 'qml/Stage/Spread/OpacityMask.qml'
--- qml/Stage/Spread/OpacityMask.qml	1970-01-01 00:00:00 +0000
+++ qml/Stage/Spread/OpacityMask.qml	2016-10-05 11:22:21 +0000
@@ -0,0 +1,82 @@
+/*
+ * Copyright (C) 2016 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+
+Item {
+    id: root
+    anchors.fill: sourceItem
+    anchors.margins: -units.gu(2)
+    visible: sourceItem !== null
+
+    property var sourceItem: null
+    property int maskX: 0
+    property int maskY: 0
+    property int maskWidth: 0
+    property int maskHeight: 0
+
+    property real opacityValue: 1
+
+    Item {
+        id: opacityMask
+        anchors.fill: parent
+
+        Rectangle {
+            id: clipRect
+            color: "black"
+            x: root.maskX - root.anchors.margins
+            y: root.maskY - root.anchors.margins
+            width: root.maskWidth
+            height: root.maskHeight
+            opacity: 1 - root.opacityValue
+        }
+    }
+
+    ShaderEffect {
+        id: opacityEffect
+        anchors.fill: parent
+
+        property variant source: ShaderEffectSource {
+            id: shaderEffectSource
+            sourceItem: root.sourceItem
+            sourceRect: root.sourceItem ? Qt.rect(sourceItem.x + root.anchors.margins,
+                                                sourceItem.y + root.anchors.margins,
+                                                sourceItem.width - root.anchors.margins * 2,
+                                                sourceItem.height - root.anchors.margins * 2)
+                                        : Qt.rect(0,0,0,0)
+            hideSource: true
+        }
+
+        property var mask: ShaderEffectSource {
+            sourceItem: opacityMask
+            hideSource: true
+        }
+
+        fragmentShader: "
+            varying highp vec2 qt_TexCoord0;
+            uniform sampler2D source;
+            uniform sampler2D mask;
+            void main(void)
+            {
+                highp vec4 sourceColor = texture2D(source, qt_TexCoord0);
+                highp vec4 maskColor = texture2D(mask, qt_TexCoord0);
+
+                sourceColor *= 1.0 - maskColor.a;
+
+                gl_FragColor = sourceColor;
+            }"
+    }
+}

=== added file 'qml/Stage/Spread/Spread.qml'
--- qml/Stage/Spread/Spread.qml	1970-01-01 00:00:00 +0000
+++ qml/Stage/Spread/Spread.qml	2016-10-05 11:22:21 +0000
@@ -0,0 +1,162 @@
+/*
+ * Copyright (C) 2016 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+import "MathUtils.js" as MathUtils
+
+Item {
+    id: root
+
+    // Information about the environment
+    property int highlightedIndex: -1
+    property var model: null
+    property int leftMargin: 0
+    property var spreadFlickable
+
+    // some config options
+    property real contentMargin: 0.16 * root.height
+    property real contentTopMargin: contentMargin
+    property real contentBottomMargin: 0.35 * contentMargin
+    property real windowTitleTopMargin: 3/4 * (contentTopMargin - windowTitle.height)
+    property int stackItemCount: 3
+    property real leftRotationAngle: 22
+    property real rightRotationAngle: 32
+    property real leftStackScale: .82
+    property real rightStackScale: 1
+    property real rightEdgeBreakPoint: Math.min(units.gu(40) / root.width, .35)
+
+    signal leaveSpread()
+
+    // Calculated stuff
+    readonly property int totalItemCount: model.count
+    readonly property real leftStackXPos: 0.03 * root.width + leftMargin
+    readonly property real rightStackXPos: root.width - 1.5 * leftStackXPos + leftMargin
+
+    readonly property real stackHeight: spreadItemHeight - appInfoHeight
+    readonly property real stackWidth: Math.min(leftStackXPos/3, units.gu(1.5))
+
+    readonly property real spreadWidth: rightStackXPos - leftStackXPos
+    readonly property real spreadHeight: root.height
+    readonly property real spreadItemHeight: spreadHeight - contentTopMargin - contentBottomMargin
+    readonly property real spreadItemWidth: stackHeight
+
+    readonly property real dynamicLeftRotationAngle: leftRotationAngle * rotationAngleFactor
+    readonly property real dynamicRightRotationAngle: rightRotationAngle * rotationAngleFactor
+
+    readonly property real appInfoHeight: {
+        var screenHeightReferencePoint = 40 // ref screen height in gu
+        var valueAtReferencePoint = 0.17 // of screen height at the reference point
+        var appInfoHeightValueChange = -0.0014 // units / gu
+        var minAppInfoHeight = 0.08
+        var maxAppInfoHeight = 0.2
+        var screenHeightInGU = root.height / units.gu(1) // screenHeight in gu
+
+        return MathUtils.clamp(valueAtReferencePoint + appInfoHeightValueChange * (screenHeightInGU - screenHeightReferencePoint), minAppInfoHeight, maxAppInfoHeight) * root.height
+    }
+
+    property real rotationAngleFactor: {
+        var spreadHeightReferencePoint = 28 // reference spread height in gu
+        var valueAtReferencePoint = 1.3
+        var rotationAngleValueChange = -0.008 // units / gu
+        var minRotationAngleFactor = 0.6
+        var maxRotationAngleFactor = 1.5
+        var spreadHeightInGU = spreadHeight / units.gu(1)
+
+        return MathUtils.clamp(valueAtReferencePoint + rotationAngleValueChange * (spreadHeightInGU - spreadHeightReferencePoint), minRotationAngleFactor, maxRotationAngleFactor)
+    }
+    readonly property real itemOverlap: {
+        var spreadAspectRatioReferencePoint = 1.0 // ref screen height in gu
+        var valueAtReferencePoint = 0.74 // of screen height at the reference point
+        var itemOverlapValueChange = -0.068
+        var minOverlap = 0.55
+        var maxOverlap = 0.82
+        var spreadAspectRatio = spreadWidth / stackHeight // spread stack aspect ratio (app info not included)
+
+        return MathUtils.clamp(valueAtReferencePoint + itemOverlapValueChange * (spreadAspectRatio - spreadAspectRatioReferencePoint), minOverlap, maxOverlap)
+    }
+
+    readonly property real visibleItemCount: (spreadWidth / spreadItemWidth) / (1 - itemOverlap)
+
+    readonly property real spreadTotalWidth: totalItemCount * spreadWidth / visibleItemCount
+
+    readonly property real centeringOffset: Math.max(spreadWidth - spreadTotalWidth ,0) / (2 * spreadWidth)
+
+
+    readonly property var curve: BezierCurve {
+        controlPoint2: {'x': 0.19, 'y': 0.00}
+        controlPoint3: {'x': 0.91, 'y': 1.00}
+    }
+
+    Label {
+        id: windowTitle
+
+        width: Math.min(implicitWidth, 0.5*root.width)
+        elide: Qt.ElideMiddle
+        anchors.horizontalCenter: parent.horizontalCenter
+        y: windowTitleTopMargin
+        readonly property var highlightedSurface: root.model ? root.model.surfaceAt(root.highlightedIndex) : null
+        readonly property var highlightedApp: root.model ? root.model.applicationAt(root.highlightedIndex) : null
+        text: root.highlightedIndex >= 0 && highlightedSurface && highlightedSurface.name != "" ? highlightedSurface.name :
+                                                                                                  highlightedApp ? highlightedApp.name : ""
+        fontSize: root.height < units.gu(85) ? 'medium' : 'large'
+        color: "white"
+        opacity: root.highlightedIndex >= 0 ? 1 : 0
+        Behavior on opacity { UbuntuNumberAnimation { } }
+    }
+
+    Keys.onPressed: {
+        switch (event.key) {
+        case Qt.Key_Left:
+        case Qt.Key_Backtab:
+            selectPrevious(event.isAutoRepeat)
+            event.accepted = true;
+            break;
+        case Qt.Key_Right:
+        case Qt.Key_Tab:
+            selectNext(event.isAutoRepeat)
+            event.accepted = true;
+            break;
+        case Qt.Key_Escape:
+            highlightedIndex = -1
+            // Falling through intentionally
+        case Qt.Key_Enter:
+        case Qt.Key_Return:
+        case Qt.Key_Space:
+            root.leaveSpread();
+            event.accepted = true;
+        }
+    }
+
+
+    function selectNext(isAutoRepeat) {
+        if (isAutoRepeat && highlightedIndex >= totalItemCount -1) {
+            return; // AutoRepeat is not allowed to wrap around
+        }
+
+        highlightedIndex = (highlightedIndex + 1) % totalItemCount;
+        spreadFlickable.snap(highlightedIndex)
+    }
+
+    function selectPrevious(isAutoRepeat) {
+        if (isAutoRepeat && highlightedIndex == 0) {
+            return; // AutoRepeat is not allowed to wrap around
+        }
+
+        highlightedIndex = highlightedIndex - 1 >= 0 ? highlightedIndex - 1 : totalItemCount - 1;
+        spreadFlickable.snap(highlightedIndex)
+    }
+}

=== added file 'qml/Stage/Spread/SpreadDelegateInputArea.qml'
--- qml/Stage/Spread/SpreadDelegateInputArea.qml	1970-01-01 00:00:00 +0000
+++ qml/Stage/Spread/SpreadDelegateInputArea.qml	2016-10-05 11:22:21 +0000
@@ -0,0 +1,183 @@
+/*
+ * Copyright (C) 2016 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+import Ubuntu.Gestures 0.1
+import "../../Components"
+
+Item {
+    id: root
+
+    property bool closeable: true
+    readonly property real minSpeedToClose: units.gu(40)
+    property bool zeroVelocityCounts: false
+
+    readonly property alias distance: d.distance
+
+    signal clicked()
+    signal close()
+
+    QtObject {
+        id: d
+        property real distance: 0
+        property bool moving: false
+        property var dragEvents: []
+        property real dragVelocity: 0
+        property int threshold: units.gu(2)
+
+        // Can be replaced with a fake implementation during tests
+        // property var __getCurrentTimeMs: function () { return new Date().getTime() }
+        property var __dateTime: new function() {
+            this.getCurrentTimeMs = function() {return new Date().getTime()}
+        }
+
+        function pushDragEvent(event) {
+            var currentTime = __dateTime.getCurrentTimeMs()
+            dragEvents.push([currentTime, event.x, event.y, getEventSpeed(currentTime, event)])
+            cullOldDragEvents(currentTime)
+            updateSpeed()
+        }
+
+        function cullOldDragEvents(currentTime) {
+            // cull events older than 50 ms but always keep the latest 2 events
+            for (var numberOfCulledEvents = 0; numberOfCulledEvents < dragEvents.length-2; numberOfCulledEvents++) {
+                // dragEvents[numberOfCulledEvents][0] is the dragTime
+                if (currentTime - dragEvents[numberOfCulledEvents][0] <= 50) break
+            }
+
+            dragEvents.splice(0, numberOfCulledEvents)
+        }
+
+        function updateSpeed() {
+            var totalSpeed = 0
+            for (var i = 0; i < dragEvents.length; i++) {
+                totalSpeed += dragEvents[i][3]
+            }
+
+            if (zeroVelocityCounts || Math.abs(totalSpeed) > 0.001) {
+                dragVelocity = totalSpeed / dragEvents.length * 1000
+            }
+        }
+
+        function getEventSpeed(currentTime, event) {
+            if (dragEvents.length != 0) {
+                var lastDrag = dragEvents[dragEvents.length-1]
+                var duration = Math.max(1, currentTime - lastDrag[0])
+                return (event.y - lastDrag[2]) / duration
+            } else {
+                return 0
+            }
+        }
+    }
+
+    // Event eater
+    MouseArea {
+        anchors.fill: parent
+        onClicked: root.clicked()
+        onWheel: wheel.accepted = true
+    }
+
+    MultiPointTouchArea {
+        anchors.fill: parent
+        mouseEnabled: false
+        maximumTouchPoints: 1
+        property int offset: 0
+
+        touchPoints: [
+            TouchPoint {
+                id: tp
+            }
+        ]
+
+        onCanceled: {
+            d.moving = false
+            animation.animate("center");
+        }
+
+        onTouchUpdated: {
+            if (!d.moving) {
+                if (Math.abs(tp.startY - tp.y) > d.threshold) {
+                    d.moving = true;
+                    d.dragEvents = []
+                    offset = tp.y - tp.startY;
+                } else {
+                    return;
+                }
+            }
+
+            d.distance = tp.y - tp.startY - offset
+            d.pushDragEvent(tp);
+        }
+
+        onReleased: {
+            if (!d.moving) {
+                root.clicked()
+            }
+
+            if (!root.closeable) {
+                animation.animate("center")
+                return;
+            }
+
+            var touchPoint = touchPoints[0];
+
+            if ((d.dragVelocity < -root.minSpeedToClose && d.distance < -units.gu(8)) || d.distance < -root.height / 2) {
+                animation.animate("up")
+            } else if ((d.dragVelocity > root.minSpeedToClose  && d.distance > units.gu(8)) || d.distance > root.height / 2) {
+                animation.animate("down")
+            } else {
+                animation.animate("center")
+            }
+        }
+    }
+
+    UbuntuNumberAnimation {
+        id: animation
+        objectName: "closeAnimation"
+        target: d
+        property: "distance"
+        property bool requestClose: false
+
+        function animate(direction) {
+            animation.from = dragArea.distance;
+            switch (direction) {
+            case "up":
+                animation.to = -root.height * 1.5;
+                requestClose = true;
+                break;
+            case "down":
+                animation.to = root.height * 1.5;
+                requestClose = true;
+                break;
+            default:
+                animation.to = 0
+            }
+            animation.start();
+        }
+
+        onRunningChanged: {
+            if (!running) {
+                d.moving = false;
+                if (requestClose) {
+                    root.close();
+                } else {
+                    d.distance = 0;
+                }
+            }
+        }
+    }
+}

=== added file 'qml/Stage/Spread/SpreadMaths.qml'
--- qml/Stage/Spread/SpreadMaths.qml	1970-01-01 00:00:00 +0000
+++ qml/Stage/Spread/SpreadMaths.qml	2016-10-05 11:22:21 +0000
@@ -0,0 +1,78 @@
+/*
+ * Copyright (C) 2016 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+import Utils 0.1
+import "MathUtils.js" as MathUtils
+
+Item {
+    id: root
+    anchors { left: parent.left; top: parent.top; margins: units.gu(1) }
+
+    // Information about the environment
+    property Item flickable: null
+    property Spread spread: null
+    property int itemIndex: 0
+
+    // Internal
+    property real spreadPosition: itemIndex/spread.visibleItemCount - flickable.contentX/spread.spreadWidth // 0 -> left stack, 1 -> right stack
+    property real leftStackingProgress: MathUtils.clamp(MathUtils.map(spreadPosition, 0, -spread.stackItemCount/spread.visibleItemCount  , 0, 1), 0, 1)
+    property real rightStackingProgress: MathUtils.clamp(MathUtils.map(spreadPosition, 1, 1 + spread.stackItemCount/spread.visibleItemCount  , 0, 1), 0, 1)
+    property real stackingX: (MathUtils.easeOutCubic(rightStackingProgress) - MathUtils.easeOutCubic(leftStackingProgress)) * spread.stackWidth
+
+
+    QtObject {
+        id: d
+        property real spreadScale: MathUtils.clamp(
+                                       MathUtils.map(spreadPosition, 0, 1, spread.leftStackScale, spread.rightStackScale),
+                                                 spread.leftStackScale, spread.rightStackScale)
+
+        property real selectedScale: (spread.highlightedIndex == itemIndex ? 1.01 : 1)
+        Behavior on selectedScale { UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration } }
+
+    }
+
+    // Output
+    readonly property int targetX: spread.leftStackXPos +
+                                     spread.spreadWidth * spread.curve.getYFromX(spreadPosition + spread.centeringOffset) +
+                                     stackingX
+
+    readonly property int targetY: spread.contentTopMargin
+
+    readonly property real targetAngle: MathUtils.clamp(
+                            MathUtils.map(targetX, spread.leftStackXPos, spread.rightStackXPos, spread.dynamicLeftRotationAngle, spread.dynamicRightRotationAngle),
+                            Math.min(spread.dynamicLeftRotationAngle, spread.dynamicRightRotationAngle), Math.max(spread.dynamicLeftRotationAngle, spread.dynamicRightRotationAngle))
+
+
+    readonly property real targetScale: d.spreadScale * d.selectedScale
+
+    readonly property real shadowOpacity: 0.2 * (1  - rightStackingProgress) * (1 - leftStackingProgress)
+
+
+    readonly property real closeIconOffset: (targetScale - 1) * (-spread.stackHeight / 2)
+
+    readonly property real tileInfoOpacity: Math.min(MathUtils.clamp(MathUtils.map(leftStackingProgress, 0 , 1/(spread.stackItemCount*3), 1, 0), 0 , 1),
+                                                     MathUtils.clamp(MathUtils.map(spreadPosition, 0.9 , 1, 1, 0), 0 , 1)) /** MathUtils.map(curvedSwitcherProgress, 0.7, 0.9, 0, 1)*/
+
+    readonly property bool itemVisible: {
+        var leftStackHidden = spreadPosition < -(spread.stackItemCount + 1)/spread.visibleItemCount
+        // don't hide the rightmost
+        var rightStackHidden = (spreadPosition > 1 + (spread.stackItemCount)/spread.visibleItemCount) && itemIndex !== spread.totalItemCount - 1
+        return !leftStackHidden && !rightStackHidden
+    }
+
+}

=== added file 'qml/Stage/Spread/StagedRightEdgeMaths.qml'
--- qml/Stage/Spread/StagedRightEdgeMaths.qml	1970-01-01 00:00:00 +0000
+++ qml/Stage/Spread/StagedRightEdgeMaths.qml	2016-10-05 11:22:21 +0000
@@ -0,0 +1,174 @@
+/*
+ * Copyright (C) 2016 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+import Unity.Application 0.1
+import "MathUtils.js" as MathUtils
+
+QtObject {
+    id: root
+
+    // Input
+    property int itemIndex: 0
+    property real progress: 0
+    property int sceneWidth: 0
+    property int sideStageWidth: 0
+    property int sceneHeight: 0
+    property int targetX: 0
+    property int startY: 0
+    property int targetY: 0
+    property real startAngle: 30
+    property real targetAngle: 0
+    property int targetHeight: 0
+    property real startScale: 1.3
+    property real targetScale: 0
+    property real breakPoint: units.gu(15) / sceneWidth
+
+    property bool isMainStageApp: false
+    property bool isSideStageApp: false
+    property bool sideStageOpen: false
+    property int nextInStack: 0
+    property int shuffledZ: 0
+
+
+    // Config
+    property int tileDistance: units.gu(10)
+
+    // Output
+
+    readonly property real scaleToPreviewProgress: {
+        return progress < breakPoint ? 0 : MathUtils.clamp(MathUtils.linearAnimation(breakPoint, 1, 0, 1, progress), 0, 1)
+    }
+    readonly property int animatedWidth: {
+        return progress < breakPoint ? root.sceneHeight : MathUtils.linearAnimation(breakPoint, 1, root.sceneWidth, targetHeight, progress)
+    }
+
+    readonly property int animatedHeight: {
+        return progress < breakPoint ? root.sceneHeight : MathUtils.linearAnimation(breakPoint, 1, root.sceneHeight, targetHeight, progress)
+    }
+
+
+    readonly property int animatedX: {
+        var nextStage = appRepeater.itemAt(nextInStack) ? appRepeater.itemAt(nextInStack).stage : ApplicationInfoInterface.MainStage;
+
+        var startX = 0;
+        if (isMainStageApp) {
+            if (progress < breakPoint) {
+                if (nextStage == ApplicationInfoInterface.MainStage) {
+                    return MathUtils.linearAnimation(0, breakPoint, 0, -units.gu(4), progress);
+                } else {
+                    return 0;
+                }
+            } else {
+                if (nextStage == ApplicationInfoInterface.MainStage) {
+                    return MathUtils.linearAnimation(breakPoint, 1, -units.gu(4), targetX, progress);
+                } else {
+                    return MathUtils.linearAnimation(breakPoint, 1, 0, targetX, progress);
+                }
+            }
+        } else if (isSideStageApp) {
+            startX = sceneWidth - sideStageWidth;
+        } else if (itemIndex == nextInStack && itemIndex <= 2 && priv.sideStageDelegate && nextStage == ApplicationInfoInterface.MainStage) {
+            startX = sceneWidth - sideStageWidth;
+        } else {
+            var stageCount = (priv.mainStageDelegate ? 1 : 0) + (priv.sideStageDelegate ? 1 : 0)
+            startX = sceneWidth + Math.max(0, itemIndex - stageCount - 1) * tileDistance;
+        }
+
+        if (itemIndex == nextInStack) {
+            if (progress < breakPoint) {
+                return MathUtils.linearAnimation(0, breakPoint, startX, startX * (1 - breakPoint), progress)
+            }
+            return MathUtils.linearAnimation(breakPoint, 1, startX * (1 - breakPoint), targetX, progress)
+        }
+
+        if (progress < breakPoint) {
+            return startX;
+        }
+
+        return MathUtils.linearAnimation(breakPoint, 1, startX, targetX, progress)
+
+    }
+
+    readonly property int animatedY: progress < breakPoint ? startY : MathUtils.linearAnimation(breakPoint, 1, startY, targetY, progress)
+
+    readonly property int animatedZ: {
+        if (progress < breakPoint + (1 - breakPoint) / 2) {
+            return shuffledZ
+        }
+        return itemIndex;
+    }
+
+    readonly property real animatedAngle: {
+        var nextStage = appRepeater.itemAt(nextInStack) ? appRepeater.itemAt(nextInStack).stage : ApplicationInfoInterface.MainStage;
+
+        var startAngle = 0;
+        if (isMainStageApp) {
+            startAngle = 0;
+        } else if (isSideStageApp) {
+            startAngle = 0;
+        } else {
+            if (stage == ApplicationInfoInterface.SideStage && itemIndex == nextInStack && !sideStageOpen) {
+                startAngle = 0;
+            } else {
+                startAngle = root.startAngle;
+            }
+        }
+
+        if ((itemIndex == nextInStack)
+                || (isMainStageApp && nextStage === ApplicationInfoInterface.MainStage)
+                || (isSideStageApp && nextStage === ApplicationInfoInterface.SideStage)) {
+            return MathUtils.linearAnimation(0, 1, startAngle, targetAngle, progress);
+        }
+
+        if (progress < breakPoint) {
+            return 0;
+        }
+        return MathUtils.linearAnimation(breakPoint, 1, startAngle, targetAngle, progress);
+    }
+
+    readonly property real animatedScale: {
+        var pullingInSideStage = itemIndex == nextInStack && stage == ApplicationInfoInterface.SideStage && !sideStageOpen;
+
+        var startScale = 1;
+        if (isMainStageApp) {
+            startScale = 1;
+        } else if (isSideStageApp) {
+            startScale = 1;
+        } else {
+            if (pullingInSideStage) {
+                startScale = 1
+            } else {
+                startScale = root.startScale;
+            }
+        }
+
+        if (progress < breakPoint) {
+            if (itemIndex == nextInStack && (sideStageOpen || stage == ApplicationInfoInterface.MainStage)) {
+                return MathUtils.linearAnimation(0, 1, startScale, targetScale, progress);
+            }
+            return startScale;
+        }
+        if (itemIndex == nextInStack) {
+            return MathUtils.linearAnimation(0, 1, startScale, targetScale, progress)
+        }
+
+        return MathUtils.linearAnimation(breakPoint, 1, startScale, targetScale, progress)
+    }
+
+    readonly property bool itemVisible: true //animatedX < sceneWidth
+}

=== added file 'qml/Stage/Spread/WindowedRightEdgeMaths.qml'
--- qml/Stage/Spread/WindowedRightEdgeMaths.qml	1970-01-01 00:00:00 +0000
+++ qml/Stage/Spread/WindowedRightEdgeMaths.qml	2016-10-05 11:22:21 +0000
@@ -0,0 +1,81 @@
+/*
+ * Copyright (C) 2016 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+import Unity.Application 0.1
+import "MathUtils.js" as MathUtils
+
+QtObject {
+    id: root
+
+    // Input
+    property int itemIndex: 0
+    property int normalZ: 0
+    property real progress: 0
+    property int startWidth: 0
+    property int startHeight: 0
+    property int startX: 0
+    property int targetX: 0
+    property int startY: 0
+    property int targetY: 0
+//    property real startAngle: 40
+    property real targetAngle: 0
+    property int targetHeight: 0
+    property real targetScale: 0
+
+    // Config
+    property real breakPoint: 0.4
+
+    // Output
+
+    readonly property real scaleToPreviewProgress: {
+        return progress < breakPoint ? 0 : MathUtils.clamp(MathUtils.linearAnimation(breakPoint, 1, 0, 1, progress), 0, 1)
+    }
+    readonly property int animatedWidth: {
+        return progress < breakPoint ? root.startWidth : MathUtils.linearAnimation(breakPoint, 1, root.startWidth, targetHeight, progress)
+    }
+
+    readonly property int animatedHeight: {
+        return progress < breakPoint ? root.startHeight : MathUtils.linearAnimation(breakPoint, 1, root.startHeight, targetHeight, progress)
+    }
+
+    readonly property int animatedX: {
+        if (progress < breakPoint) {
+            return startX;
+        }
+        return MathUtils.linearAnimation(breakPoint, 1, startX, targetX, progress)
+    }
+
+    readonly property int animatedY: progress < breakPoint ? startY : MathUtils.linearAnimation(breakPoint, 1, startY, targetY, progress)
+
+    readonly property real animatedAngle: progress < breakPoint ? 0 : MathUtils.linearAnimation(breakPoint, 1, 0, targetAngle, progress);
+
+    readonly property real decorationHeight: progress < breakPoint ? 1 : MathUtils.linearAnimation(breakPoint, 1, 1, 0, progress);
+
+    readonly property int animatedZ: {
+        if (progress < breakPoint + (1 - breakPoint) / 2) {
+            return itemIndex == 1 ? normalZ + 2 : normalZ
+        }
+        return itemIndex
+    }
+
+    readonly property real opacityMask: itemIndex == 1 ? MathUtils.linearAnimation(0, breakPoint, 0, 1, progress) : 1
+
+    readonly property real animatedScale: progress < breakPoint ? 1 : MathUtils.linearAnimation(breakPoint, 1, 1, targetScale, progress)
+
+//    readonly property bool itemVisible: true //animatedX < sceneWidth
+}

=== added file 'qml/Stage/Spread/cubic-bezier.js'
--- qml/Stage/Spread/cubic-bezier.js	1970-01-01 00:00:00 +0000
+++ qml/Stage/Spread/cubic-bezier.js	2016-10-05 11:22:21 +0000
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2016 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+//====================================\\
+// 13thParallel.org Beziér Curve Code \\
+//   by Dan Pupius (www.pupius.net)   \\
+//====================================\\
+
+
+var coord = function (x,y) {
+  if(!x) var x=0;
+  if(!y) var y=0;
+  return {x: x, y: y};
+}
+
+function B4(t) { return t*t*t }
+function B3(t) { return 3*t*t*(1-t) }
+function B2(t) { return 3*t*(1-t)*(1-t) }
+function B1(t) { return (1-t)*(1-t)*(1-t) }
+
+var getBezier = function(percent,C1,C2,C3,C4) {
+  var pos = new coord();
+  pos.x = C1.x*B1(percent) + C2.x*B2(percent) + C3.x*B3(percent) + C4.x*B4(percent);
+  pos.y = C1.y*B1(percent) + C2.y*B2(percent) + C3.y*B3(percent) + C4.y*B4(percent);
+  return pos;
+}

=== renamed file 'qml/Stages/DesktopStage.qml' => 'qml/Stage/Stage.qml'
--- qml/Stages/DesktopStage.qml	2016-09-07 08:36:59 +0000
+++ qml/Stage/Stage.qml	2016-10-05 11:22:21 +0000
@@ -22,75 +22,152 @@
 import Utils 0.1
 import Ubuntu.Gestures 0.1
 import GlobalShortcut 1.0
+import GSettings 1.0
+import "Spread"
+import "Spread/MathUtils.js" as MathUtils
 
-AbstractStage {
+FocusScope {
     id: root
     anchors.fill: parent
-    paintBackground: false
-
-    // functions to be called from outside
-    function updateFocusedAppOrientation() { /* TODO */ }
-    function updateFocusedAppOrientationAnimated() { /* TODO */}
-    function pushRightEdge(amount) {
-        if (spread.state === "") {
-            edgeBarrier.push(amount);
-        }
-    }
-    function closeFocusedDelegate() {
-        if (priv.focusedAppDelegate && !priv.focusedAppDelegate.isDash) {
-            priv.focusedAppDelegate.close();
-        }
-    }
-
-    // Used by TutorialRight
-    property bool spreadShown: spread.state == "altTab"
+
+    property QtObject applicationManager
+    property QtObject topLevelSurfaceList
+    property bool altTabPressed
+    property url background
+    property int dragAreaWidth
+    property bool interactive
+    property bool keepDashRunning: true
+    property real nativeHeight
+    property real nativeWidth
+    property QtObject orientations
+    property int shellOrientation
+    property int shellOrientationAngle
+    property bool spreadEnabled: true // If false, animations and right edge will be disabled
+    property bool suspended
+    property int leftMargin: 0
+    property bool oskEnabled: false
+    property rect inputMethodRect
+
+    // Configuration
+    property string mode: "staged"
+    property real leftEdgeDragProgress: 0
+
+    // Used by the tutorial code
+    readonly property bool spreadShown: state == "spread"
+    readonly property real rightEdgeDragProgress: rightEdgeDragArea.progress // How far left the stage has been dragged
 
     // used by the snap windows (edge maximize) feature
     readonly property alias previewRectangle: fakeRectangle
 
-    mainApp: priv.focusedAppDelegate ? priv.focusedAppDelegate.application : null
+    readonly property var mainApp: priv.focusedAppDelegate ? priv.focusedAppDelegate.application : null
 
     // application windows never rotate independently
-    mainAppWindowOrientationAngle: shellOrientationAngle
-
-    orientationChangesEnabled: true
-
-
-    itemConfiningMouseCursor: !spreadShown && priv.focusedAppDelegate && priv.focusedAppDelegate.surface &&
+    property int mainAppWindowOrientationAngle: shellOrientationAngle
+
+    property bool orientationChangesEnabled: priv.focusedAppDelegate && priv.focusedAppDelegate.orientationChangesEnabled
+
+    property int supportedOrientations: {
+        if (mainApp) {
+            switch (mode) {
+            case "staged":
+                return mainApp.supportedOrientations;
+            case "stagedWithSideStage":
+                var orientations = mainApp.supportedOrientations;
+                orientations |= Qt.LandscapeOrientation | Qt.InvertedLandscapeOrientation;
+                if (priv.sideStageItemId) {
+                    // If we have a sidestage app, support Portrait orientation
+                    // so that it will switch the sidestage app to mainstage on rotate to portrait
+                    orientations |= Qt.PortraitOrientation|Qt.InvertedPortraitOrientation;
+                }
+                return orientations;
+            }
+        }
+
+        return Qt.PortraitOrientation |
+                Qt.LandscapeOrientation |
+                Qt.InvertedPortraitOrientation |
+                Qt.InvertedLandscapeOrientation;
+    }
+
+
+    onAltTabPressedChanged: priv.goneToSpread = altTabPressed
+
+    property Item itemConfiningMouseCursor: !spreadShown && priv.focusedAppDelegate && priv.focusedAppDelegate.surface &&
                               priv.focusedAppDelegate.surface.confinesMousePointer ?
                               priv.focusedAppDelegate.clientAreaItem : null;
 
+    signal itemSnapshotRequested(Item item)
+
+    // functions to be called from outside
+    function updateFocusedAppOrientation() { /* TODO */ }
+    function updateFocusedAppOrientationAnimated() { /* TODO */}
+    function pushRightEdge(amount) {
+        edgeBarrier.push(amount);
+    }
+
+    onSpreadEnabledChanged: {
+        if (!spreadEnabled && root.state == "spread") {
+            priv.goneToSpread = false;
+        }
+    }
+
+    GSettings {
+        id: lifecycleExceptions
+        schema.id: "com.canonical.qtmir"
+    }
+
+    function isExemptFromLifecycle(appId) {
+        var shortAppId = appId.split('_')[0];
+        for (var i = 0; i < lifecycleExceptions.lifecycleExemptAppids.length; i++) {
+            if (shortAppId === lifecycleExceptions.lifecycleExemptAppids[i]) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    GlobalShortcut {
+        id: closeFocusedShortcut
+        shortcut: Qt.AltModifier|Qt.Key_F4
+        onTriggered: {
+            if (priv.focusedAppDelegate && !priv.focusedAppDelegate.isDash) {
+                priv.focusedAppDelegate.close();
+            }
+        }
+    }
+
     GlobalShortcut {
         id: showSpreadShortcut
         shortcut: Qt.MetaModifier|Qt.Key_W
-        onTriggered: spread.state = "altTab"
+        onTriggered: priv.goneToSpread = true
     }
 
     GlobalShortcut {
         id: minimizeAllShortcut
         shortcut: Qt.MetaModifier|Qt.ControlModifier|Qt.Key_D
         onTriggered: priv.minimizeAllWindows()
+        active: root.state == "windowed"
     }
 
     GlobalShortcut {
         id: maximizeWindowShortcut
         shortcut: Qt.MetaModifier|Qt.ControlModifier|Qt.Key_Up
         onTriggered: priv.focusedAppDelegate.maximize()
-        active: priv.focusedAppDelegate !== null && priv.focusedAppDelegate.canBeMaximized
+        active: root.state == "windowed" && priv.focusedAppDelegate && priv.focusedAppDelegate.canBeMaximized
     }
 
     GlobalShortcut {
         id: maximizeWindowLeftShortcut
         shortcut: Qt.MetaModifier|Qt.ControlModifier|Qt.Key_Left
         onTriggered: priv.focusedAppDelegate.maximizeLeft()
-        active: priv.focusedAppDelegate !== null && priv.focusedAppDelegate.canBeMaximizedLeftRight
+        active: root.state == "windowed" && priv.focusedAppDelegate && priv.focusedAppDelegate.canBeMaximizedLeftRight
     }
 
     GlobalShortcut {
         id: maximizeWindowRightShortcut
         shortcut: Qt.MetaModifier|Qt.ControlModifier|Qt.Key_Right
         onTriggered: priv.focusedAppDelegate.maximizeRight()
-        active: priv.focusedAppDelegate !== null && priv.focusedAppDelegate.canBeMaximizedLeftRight
+        active: root.state == "windowed" && priv.focusedAppDelegate && priv.focusedAppDelegate.canBeMaximizedLeftRight
     }
 
     GlobalShortcut {
@@ -98,7 +175,7 @@
         shortcut: Qt.MetaModifier|Qt.ControlModifier|Qt.Key_Down
         onTriggered: priv.focusedAppDelegate.anyMaximized
                      ? priv.focusedAppDelegate.restoreFromMaximized() : priv.focusedAppDelegate.minimize()
-        active: priv.focusedAppDelegate !== null
+        active: root.state == "windowed" && priv.focusedAppDelegate
     }
 
     GlobalShortcut {
@@ -107,28 +184,17 @@
         active: priv.focusedAppDelegate !== null
     }
 
-    Connections {
-        target: root.topLevelSurfaceList
-        onCountChanged: {
-            if (spread.state == "altTab") {
-                spread.cancel();
-            }
-        }
-    }
-
     QtObject {
         id: priv
         objectName: "DesktopStagePrivate"
 
         property var focusedAppDelegate: null
-        onFocusedAppDelegateChanged: {
-            if (spread.state == "altTab") {
-                spread.state = "";
-            }
-        }
-
         property var foregroundMaximizedAppDelegate: null // for stuff like drop shadow and focusing maximized app by clicking panel
 
+        property bool goneToSpread: false
+        property int closingIndex: -1
+        property int animationDuration: UbuntuAnimation.FastDuration
+
         function updateForegroundMaximizedApp() {
             var found = false;
             for (var i = 0; i < appRepeater.count && !found; i++) {
@@ -162,11 +228,86 @@
             }
         }
 
-        readonly property real virtualKeyboardHeight: SurfaceManager.inputMethodSurface
-                                                          ? SurfaceManager.inputMethodSurface.inputBounds.height
-                                                          : 0
+        readonly property bool sideStageEnabled: root.shellOrientation == Qt.LandscapeOrientation ||
+                                                 root.shellOrientation == Qt.InvertedLandscapeOrientation
+
+        property var mainStageDelegate: null
+        property var sideStageDelegate: null
+        property int mainStageItemId: 0
+        property int sideStageItemId: 0
+        property string mainStageAppId: ""
+        property string sideStageAppId: ""
+
+        onSideStageDelegateChanged: {
+            if (!sideStageDelegate) {
+                sideStage.hide();
+            }
+        }
+
+        function updateMainAndSideStageIndexes() {
+            if (root.mode != "stagedWithSideStage") {
+                priv.sideStageDelegate = null;
+                priv.sideStageItemId = 0;
+                priv.sideStageAppId = "";
+                priv.mainStageDelegate = appRepeater.itemAt(0);
+                priv.mainStageAppId = topLevelSurfaceList.idAt(0);
+                priv.mainStageAppId = topLevelSurfaceList.applicationAt(0) ? topLevelSurfaceList.applicationAt(0).appId : ""
+                return;
+            }
+
+            var choseMainStage = false;
+            var choseSideStage = false;
+
+            if (!root.topLevelSurfaceList)
+                return;
+
+            for (var i = 0; i < appRepeater.count && (!choseMainStage || !choseSideStage); ++i) {
+                var appDelegate = appRepeater.itemAt(i);
+                if (sideStage.shown && appDelegate.stage == ApplicationInfoInterface.SideStage
+                        && !choseSideStage) {
+                    priv.sideStageDelegate = appDelegate
+                    priv.sideStageItemId = root.topLevelSurfaceList.idAt(i);
+                    priv.sideStageAppId = root.topLevelSurfaceList.applicationAt(i).appId;
+                    choseSideStage = true;
+                } else if (!choseMainStage && appDelegate.stage == ApplicationInfoInterface.MainStage) {
+                    priv.mainStageDelegate = appDelegate;
+                    priv.mainStageItemId = root.topLevelSurfaceList.idAt(i);
+                    priv.mainStageAppId = root.topLevelSurfaceList.applicationAt(i).appId;
+                    choseMainStage = true;
+                }
+            }
+            if (!choseMainStage && priv.mainStageDelegate) {
+                priv.mainStageDelegate = null;
+                priv.mainStageItemId = 0;
+                priv.mainStageAppId = "";
+            }
+            if (!choseSideStage && priv.sideStageDelegate) {
+                priv.sideStageDelegate = null;
+                priv.sideStageItemId = 0;
+                priv.sideStageAppId = "";
+            }
+        }
+
+        property int nextInStack: {
+            var mainStageIndex = priv.mainStageDelegate ? priv.mainStageDelegate.itemIndex : -1;
+            var sideStageIndex = priv.sideStageDelegate ? priv.sideStageDelegate.itemIndex : -1;
+            if (sideStageIndex == -1) {
+                return topLevelSurfaceList.count > 1 ? 1 : -1;
+            }
+            if (mainStageIndex == 0 || sideStageIndex == 0) {
+                if (mainStageIndex == 1 || sideStageIndex == 1) {
+                    return topLevelSurfaceList.count > 2 ? 2 : -1;
+                }
+                return 1;
+            }
+            return -1;
+        }
+
+        readonly property real virtualKeyboardHeight: root.inputMethodRect.height
     }
 
+    Component.onCompleted: priv.updateMainAndSideStageIndexes();
+
     Connections {
         target: PanelState
         onCloseClicked: { if (priv.focusedAppDelegate) { priv.focusedAppDelegate.close(); } }
@@ -178,14 +319,13 @@
         target: PanelState
         property: "buttonsVisible"
         value: priv.focusedAppDelegate !== null && priv.focusedAppDelegate.maximized // FIXME for Locally integrated menus
-               && spread.state == ""
     }
 
     Binding {
         target: PanelState
         property: "title"
         value: {
-            if (priv.focusedAppDelegate !== null && spread.state == "") {
+            if (priv.focusedAppDelegate !== null) {
                 if (priv.focusedAppDelegate.maximized)
                     return priv.focusedAppDelegate.title
                 else
@@ -199,7 +339,7 @@
     Binding {
         target: PanelState
         property: "dropShadow"
-        value: priv.focusedAppDelegate && !priv.focusedAppDelegate.maximized && priv.foregroundMaximizedAppDelegate !== null
+        value: priv.focusedAppDelegate && !priv.focusedAppDelegate.maximized && priv.foregroundMaximizedAppDelegate !== null && mode == "windowed"
     }
 
     Binding {
@@ -216,16 +356,34 @@
 
     Instantiator {
         model: root.applicationManager
-        delegate: Binding {
-            target: model.application
-            property: "requestedState"
-
-            // TODO: figure out some lifecycle policy, like suspending minimized apps
-            //       if running on a tablet or something.
-            // TODO: If the device has a dozen suspended apps because it was running
-            //       in staged mode, when it switches to Windowed mode it will suddenly
-            //       resume all those apps at once. We might want to avoid that.
-            value: ApplicationInfoInterface.RequestedRunning // Always running for now
+        delegate: QtObject {
+            property var stateBinding: Binding {
+                readonly property bool isDash: model.application ? model.application.appId == "unity8-dash" : false
+                target: model.application
+                property: "requestedState"
+
+                // TODO: figure out some lifecycle policy, like suspending minimized apps
+                //       or something if running windowed.
+                // TODO: If the device has a dozen suspended apps because it was running
+                //       in staged mode, when it switches to Windowed mode it will suddenly
+                //       resume all those apps at once. We might want to avoid that.
+                value: root.mode === "windowed"
+                       || (isDash && root.keepDashRunning)
+                       || (!root.suspended && model.application && priv.focusedAppDelegate &&
+                           (priv.focusedAppDelegate.appId === model.application.appId ||
+                            priv.mainStageAppId === model.application.appId ||
+                            priv.sideStageAppId === model.application.appId))
+                       ? ApplicationInfoInterface.RequestedRunning
+                       : ApplicationInfoInterface.RequestedSuspended
+            }
+
+            property var lifecycleBinding: Binding {
+                target: model.application
+                property: "exemptFromLifecycle"
+                value: model.application
+                            ? (!model.application.isTouchApp || isExemptFromLifecycle(model.application.appId))
+                            : false
+            }
         }
     }
 
@@ -236,16 +394,203 @@
         when: !appRepeater.startingUp && root.parent
     }
 
+    states: [
+        State {
+            name: "spread"; when: priv.goneToSpread
+            PropertyChanges { target: floatingFlickable; enabled: true }
+            PropertyChanges { target: spreadItem; focus: true }
+            PropertyChanges { target: hoverMouseArea; enabled: true }
+            PropertyChanges { target: rightEdgeDragArea; enabled: false }
+            PropertyChanges { target: cancelSpreadMouseArea; enabled: true }
+        },
+        State {
+            name: "stagedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "staged"
+        },
+        State {
+            name: "sideStagedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "stagedWithSideStage"
+            PropertyChanges {
+                target: sideStage
+                opacity: priv.sideStageDelegate.x === sideStage.x ? 1 : 0
+                visible: true
+            }
+        },
+        State {
+            name: "windowedRightEdge"; when: (rightEdgeDragArea.dragging || edgeBarrier.progress > 0) && root.mode == "windowed"
+        },
+        State {
+            name: "staged"; when: root.mode === "staged"
+        },
+        State {
+            name: "stagedWithSideStage"; when: root.mode === "stagedWithSideStage"
+            PropertyChanges { target: triGestureArea; enabled: true }
+            PropertyChanges { target: sideStage; visible: true }
+        },
+        State {
+            name: "windowed"; when: root.mode === "windowed"
+        }
+    ]
+    transitions: [
+        Transition {
+            from: "stagedRightEdge,sideStagedRightEdge,windowedRightEdge"; to: "spread"
+            PropertyAction { target: spreadItem; property: "highlightedIndex"; value: -1 }
+        },
+        Transition {
+            to: "spread"
+            PropertyAction { target: spreadItem; property: "highlightedIndex"; value: appRepeater.count > 1 ? 1 : 0 }
+            PropertyAction { target: floatingFlickable; property: "contentX"; value: 0 }
+        },
+        Transition {
+            from: "spread"
+            SequentialAnimation {
+                ScriptAction {
+                    script: {
+                        var item = appRepeater.itemAt(Math.max(0, spreadItem.highlightedIndex));
+                        if (item.stage == ApplicationInfoInterface.SideStage && !sideStage.shown) {
+                            sideStage.show();
+                        }
+                        item.playFocusAnimation();
+                    }
+                }
+                PropertyAction { target: spreadItem; property: "highlightedIndex"; value: -1 }
+            }
+        },
+        Transition {
+            to: "stagedRightEdge"
+            PropertyAction { target: floatingFlickable; property: "contentX"; value: 0 }
+        },
+        Transition {
+            to: "stagedWithSideStage"
+            ScriptAction { script: priv.updateMainAndSideStageIndexes(); }
+        }
+
+    ]
+
+    MouseArea {
+        id: cancelSpreadMouseArea
+        anchors.fill: parent
+        enabled: false
+        onClicked: priv.goneToSpread = false
+    }
+
     FocusScope {
         id: appContainer
         objectName: "appContainer"
         anchors.fill: parent
-        focus: spread.state !== "altTab"
+        focus: true
 
         Wallpaper {
             id: wallpaper
             anchors.fill: parent
             source: root.background
+            // Make sure it's the lowest item. Due to the left edge drag we sometimes need
+            // to put the dash at -1 and we don't want it behind the Wallpaper
+            z: -2
+        }
+
+        Spread {
+            id: spreadItem
+            objectName: "spreadItem"
+            anchors.fill: appContainer
+            leftMargin: root.leftMargin
+            model: root.topLevelSurfaceList
+            spreadFlickable: floatingFlickable
+            z: 10
+
+            onLeaveSpread: {
+                priv.goneToSpread = false;
+            }
+        }
+
+        Connections {
+            target: root.topLevelSurfaceList
+            onListChanged: priv.updateMainAndSideStageIndexes()
+        }
+
+
+        DropArea {
+            objectName: "MainStageDropArea"
+            anchors {
+                left: parent.left
+                top: parent.top
+                bottom: parent.bottom
+            }
+            width: appContainer.width - sideStage.width
+            enabled: sideStage.enabled
+
+            onDropped: {
+                drop.source.appDelegate.saveStage(ApplicationInfoInterface.MainStage);
+                drop.source.appDelegate.focus = true;
+            }
+            keys: "SideStage"
+        }
+
+        SideStage {
+            id: sideStage
+            objectName: "sideStage"
+            shown: false
+            height: appContainer.height
+            x: appContainer.width - width
+            visible: false
+            Behavior on opacity { UbuntuNumberAnimation {} }
+            z: {
+                if (!priv.mainStageItemId) return 0;
+
+                if (priv.sideStageItemId && priv.nextInStack > 0) {
+
+                    // Due the order in which bindings are evaluated, this might be triggered while shuffling
+                    // the list and index doesn't yet match with itemIndex (even though itemIndex: index)
+                    // Let's walk the list and compare itemIndex to make sure we have the correct one.
+                    var nextDelegateInStack = -1;
+                    for (var i = 0; i < appRepeater.count; i++) {
+                        if (appRepeater.itemAt(i).itemIndex == priv.nextInStack) {
+                            nextDelegateInStack = appRepeater.itemAt(i);
+                            break;
+                        }
+                    }
+
+                    if (nextDelegateInStack.stage ===  ApplicationInfoInterface.MainStage) {
+                        // if the next app in stack is a main stage app, put the sidestage on top of it.
+                        return 2;
+                    }
+                    return 1;
+                }
+
+                return 1;
+            }
+
+            onShownChanged: {
+                if (!shown && priv.mainStageDelegate) {
+                    priv.mainStageDelegate.claimFocus();
+                }
+            }
+
+            DropArea {
+                id: sideStageDropArea
+                objectName: "SideStageDropArea"
+                anchors.fill: parent
+
+                property bool dropAllowed: true
+
+                onEntered: {
+                    dropAllowed = drag.keys != "Disabled";
+                }
+                onExited: {
+                    dropAllowed = true;
+                }
+                onDropped: {
+                    if (drop.keys == "MainStage") {
+                        drop.source.appDelegate.saveStage(ApplicationInfoInterface.SideStage);
+                        drop.source.appDelegate.focus = true;
+                    }
+                }
+                drag {
+                    onSourceChanged: {
+                        if (!sideStageDropArea.drag.source) {
+                            dropAllowed = true;
+                        }
+                    }
+                }
+            }
         }
 
         TopLevelSurfaceRepeater {
@@ -256,6 +601,7 @@
             delegate: FocusScope {
                 id: appDelegate
                 objectName: "appDelegate_" + model.id
+                property int itemIndex: index // We need this from outside the repeater
                 // z might be overriden in some cases by effects, but we need z ordering
                 // to calculate occlusion detection
                 property int normalZ: topLevelSurfaceList.count - index
@@ -265,10 +611,33 @@
                     }
                 }
                 z: normalZ
-                x: requestedX // may be overridden in some states. Do not directly write to this.
-                y: requestedY // may be overridden in some states. Do not directly write to this.
-                property real requestedX: priv.focusedAppDelegate ? priv.focusedAppDelegate.x + units.gu(3) : (normalZ - 1) * units.gu(3)
-                property real requestedY: priv.focusedAppDelegate ? priv.focusedAppDelegate.y + units.gu(3) : normalZ * units.gu(3)
+
+                // Normally we want x/y where we request it to be. Width/height of our delegate will
+                // match what the actual surface size is.
+                // Don't write to those, they will be set by states
+                x: requestedX
+                y: requestedY
+                width: decoratedWindow.implicitWidth
+                height: decoratedWindow.implicitHeight
+
+                // requestedX/Y/width/height is what we ask the actual surface to be.
+                // Do not write to those, they will be set by states
+                property real requestedX: windowedX
+                property real requestedY: windowedY
+                property real requestedWidth: windowedWidth
+                property real requestedHeight: windowedHeight
+
+                // In those are for windowed mode. Those values basically store the window's properties
+                // when having a floating window. If you want to move/resize a window in normal mode, this is what you want to write to.
+                property real windowedX
+                property real windowedY
+                property real windowedWidth
+                property real windowedHeight
+
+                // unlike windowedX/Y, this is the last known grab position before being pushed against edges/corners
+                // when restoring, the window should return to these, not to the place where it was dropped near the edge
+                property real restoredX
+                property real restoredY
 
                 Binding {
                     target: appDelegate
@@ -277,27 +646,24 @@
                            Math.min(appDelegate.requestedY - PanelState.panelHeight,
                                     Math.max(0, priv.virtualKeyboardHeight - (appContainer.height - (appDelegate.requestedY + appDelegate.height))))
                     when: root.oskEnabled && appDelegate.focus && (appDelegate.state == "normal" || appDelegate.state == "restored")
-                          && SurfaceManager.inputMethodSurface
-                          && SurfaceManager.inputMethodSurface.state != Mir.HiddenState
-                          && SurfaceManager.inputMethodSurface.state != Mir.MinimizedState
+                          && root.inputMethodRect.height > 0
 
                 }
 
-                width: decoratedWindow.width
-                height: decoratedWindow.height
+                Behavior on x { id: xBehavior; enabled: priv.closingIndex >= 0; UbuntuNumberAnimation { onRunningChanged: if (!running) priv.closingIndex = -1} }
 
                 Connections {
                     target: root
                     onShellOrientationAngleChanged: {
                         // at this point decoratedWindow.surfaceOrientationAngle is the old shellOrientationAngle
                         if (application && application.rotatesWindowContents) {
-                            if (state == "normal" || state == "restored") {
+                            if (root.state == "windowed") {
                                 var angleDiff = decoratedWindow.surfaceOrientationAngle - shellOrientationAngle;
                                 angleDiff = (360 + angleDiff) % 360;
                                 if (angleDiff === 90 || angleDiff === 270) {
                                     var aux = decoratedWindow.requestedHeight;
-                                    decoratedWindow.requestedHeight = decoratedWindow.requestedWidth + decoratedWindow.visibleDecorationHeight;
-                                    decoratedWindow.requestedWidth = aux - decoratedWindow.visibleDecorationHeight;
+                                    decoratedWindow.requestedHeight = decoratedWindow.requestedWidth + decoratedWindow.decorationHeight;
+                                    decoratedWindow.requestedWidth = aux - decoratedWindow.decorationHeight;
                                 }
                             }
                             decoratedWindow.surfaceOrientationAngle = shellOrientationAngle;
@@ -306,6 +672,10 @@
                         }
                     }
                 }
+                Connections {
+                    target: priv
+                    onSideStageEnabledChanged: refreshStage()
+                }
 
                 readonly property alias application: decoratedWindow.application
                 readonly property alias minimumWidth: decoratedWindow.minimumWidth
@@ -314,8 +684,6 @@
                 readonly property alias maximumHeight: decoratedWindow.maximumHeight
                 readonly property alias widthIncrement: decoratedWindow.widthIncrement
                 readonly property alias heightIncrement: decoratedWindow.heightIncrement
-                property int requestedWidth: -1
-                property int requestedHeight: -1
 
                 readonly property bool maximized: windowState === WindowStateStorage.WindowStateMaximized
                 readonly property bool maximizedLeft: windowState === WindowStateStorage.WindowStateMaximizedLeft
@@ -330,7 +698,7 @@
                                                      maximizedTopLeft || maximizedTopRight || maximizedBottomLeft || maximizedBottomRight
 
                 readonly property bool minimized: windowState & WindowStateStorage.WindowStateMinimized
-                readonly property alias fullscreen: decoratedWindow.fullscreen
+                readonly property bool fullscreen: surface ? surface.state === Mir.FullscreenState : application.fullscreen
 
                 readonly property bool canBeMaximized: canBeMaximizedHorizontally && canBeMaximizedVertically
                 readonly property bool canBeMaximizedLeftRight: (maximumWidth == 0 || maximumWidth >= appContainer.width/2) &&
@@ -339,6 +707,7 @@
                                                              (maximumHeight == 0 || maximumHeight >= appContainer.height/2)
                 readonly property bool canBeMaximizedHorizontally: maximumWidth == 0 || maximumWidth >= appContainer.width
                 readonly property bool canBeMaximizedVertically: maximumHeight == 0 || maximumHeight >= appContainer.height
+                readonly property alias orientationChangesEnabled: decoratedWindow.orientationChangesEnabled
 
                 property int windowState: WindowStateStorage.WindowStateNormal
                 property bool animationsEnabled: true
@@ -347,23 +716,45 @@
                 property bool visuallyMaximized: false
                 property bool visuallyMinimized: false
 
+                property int stage: ApplicationInfoInterface.MainStage
+                function saveStage(newStage) {
+                    appDelegate.stage = newStage;
+                    WindowStateStorage.saveStage(appId, newStage);
+                    priv.updateMainAndSideStageIndexes()
+                }
+
                 readonly property var surface: model.surface
                 readonly property alias resizeArea: resizeArea
                 readonly property alias focusedSurface: decoratedWindow.focusedSurface
                 readonly property bool dragging: touchControls.overlayShown ? touchControls.dragging : decoratedWindow.dragging
 
-                readonly property bool isDash: model.application.appId == "unity8-dash"
+                readonly property string appId: model.application.appId
+                readonly property bool isDash: appId == "unity8-dash"
                 readonly property alias clientAreaItem: decoratedWindow.clientAreaItem
 
                 function claimFocus() {
-                    if (spread.state == "altTab") {
-                        spread.cancel();
-                    }
-                    appDelegate.restore(true /* animated */, appDelegate.windowState);
+                    if (root.state == "spread") {
+                        spreadItem.highlightedIndex = index
+                        priv.goneToSpread = false;
+                    }
+                    if (root.mode == "stagedWithSideStage") {
+                        if (appDelegate.stage == ApplicationInfoInterface.SideStage && !sideStage.shown) {
+                            sideStage.show();
+                        }
+                        priv.updateMainAndSideStageIndexes();
+                    }
+
+                    if (root.mode == "windowed") {
+                        appDelegate.restore(true /* animated */, appDelegate.windowState);
+                    } else {
+                        appDelegate.focus = true;
+                    }
                 }
                 Connections {
                     target: model.surface
-                    onFocusRequested: claimFocus();
+                    onFocusRequested: {
+                        claimFocus();
+                    }
                 }
                 Connections {
                     target: model.application
@@ -383,14 +774,9 @@
                         return;
 
                     if (focus) {
-                        // If we're orphan (!parent) it means this stage is no longer the current one
-                        // and will be deleted shortly. So we should no longer have a say over the model
-                        if (root.parent) {
-                            topLevelSurfaceList.raiseId(model.id);
-                        }
-
+                        topLevelSurfaceList.raiseId(model.id);
                         priv.focusedAppDelegate = appDelegate;
-                    } else if (!focus && priv.focusedAppDelegate === appDelegate) {
+                    } else if (!focus && priv.focusedAppDelegate === appDelegate && root.state != "spread") {
                         priv.focusedAppDelegate = null;
                         // FIXME: No idea why the Binding{} doens't update when focusedAppDelegate turns null
                         MirFocusController.focusedSurface = null;
@@ -403,13 +789,25 @@
                         decoratedWindow.surfaceOrientationAngle = 0;
                     }
 
+                    // First, cascade the newly created window, relative to the currently/old focused window.
+                    windowedX = priv.focusedAppDelegate ? priv.focusedAppDelegate.windowedX + units.gu(3) : (normalZ - 1) * units.gu(3)
+                    windowedY = priv.focusedAppDelegate ? priv.focusedAppDelegate.windowedY + units.gu(3) : normalZ * units.gu(3)
+                    // Now load any saved state. This needs to happen *after* the cascading!
+                    resizeArea.loadWindowState();
+
                     // NB: We're differentiating if this delegate was created in response to a new entry in the model
                     //     or if the Repeater is just populating itself with delegates to match the model it received.
                     if (!appRepeater.startingUp) {
                         // a top level window is always the focused one when it first appears, unfocusing
                         // any preexisting one
-                        focus = true;
+                        if (root.state == "spread") {
+                            spreadItem.highlightedIndex = index;
+                        }
+                        claimFocus();
                     }
+
+                    refreshStage();
+                    _constructing = false;
                 }
                 Component.onDestruction: {
                     if (!root.parent) {
@@ -435,13 +833,20 @@
 
                 onVisuallyMaximizedChanged: priv.updateForegroundMaximizedApp()
 
+                property bool _constructing: true;
+                onStageChanged: {
+                    if (!_constructing) {
+                        priv.updateMainAndSideStageIndexes();
+                    }
+                }
+
                 visible: (
                           !visuallyMinimized
                           && !greeter.fullyShown
                           && (priv.foregroundMaximizedAppDelegate === null || priv.foregroundMaximizedAppDelegate.normalZ <= z)
                          )
-                         || decoratedWindow.fullscreen
-                         || (spread.state == "altTab" && index === spread.highlightedIndex)
+                         || appDelegate.fullscreen
+                         || focusAnimation.running || rightEdgeFocusAnimation.running || hidingAnimation.running
 
                 function close() {
                     model.surface.close();
@@ -499,7 +904,44 @@
                 }
 
                 function playFocusAnimation() {
-                    focusAnimation.start()
+                    if (state == "stagedRightEdge") {
+                        // TODO: Can we drop this if and find something that always works?
+                        if (root.mode == "staged") {
+                            rightEdgeFocusAnimation.targetX = 0
+                            rightEdgeFocusAnimation.start()
+                        } else if (root.mode == "stagedWithSideStage") {
+                            rightEdgeFocusAnimation.targetX = appDelegate.stage == ApplicationInfoInterface.SideStage ? sideStage.x : 0
+                            rightEdgeFocusAnimation.start()
+                        }
+                    } else if (state == "windowedRightEdge") {
+                        claimFocus();
+                    } else {
+                        focusAnimation.start()
+                    }
+                }
+                function playHidingAnimation() {
+                    if (state != "windowedRightEdge") {
+                        hidingAnimation.start()
+                    }
+                }
+
+                function refreshStage() {
+                    var newStage = ApplicationInfoInterface.MainStage;
+                    if (priv.sideStageEnabled) { // we're in lanscape rotation.
+                        if (!isDash && application && application.supportedOrientations & (Qt.PortraitOrientation|Qt.InvertedPortraitOrientation)) {
+                            var defaultStage = ApplicationInfoInterface.SideStage; // if application supports portrait, it defaults to sidestage.
+                            if (application.supportedOrientations & (Qt.LandscapeOrientation|Qt.InvertedLandscapeOrientation)) {
+                                // if it supports lanscape, it defaults to mainstage.
+                                defaultStage = ApplicationInfoInterface.MainStage;
+                            }
+                            newStage = WindowStateStorage.getStage(application.appId, defaultStage);
+                        }
+                    }
+
+                    stage = newStage;
+                    if (focus && stage == ApplicationInfoInterface.SideStage && !sideStage.shown) {
+                        sideStage.show();
+                    }
                 }
 
                 UbuntuNumberAnimation {
@@ -509,32 +951,255 @@
                     from: 0.98
                     to: 1
                     duration: UbuntuAnimation.SnapDuration
-                }
-
-                // unlike requestedX/Y, this is the last known grab position before being pushed against edges/corners
-                // when restoring, the window should return to these, not to the place where it was dropped near the edge
-                property real restoredX
-                property real restoredY
+                    onStarted: {
+                        topLevelSurfaceList.raiseId(model.id);
+                    }
+                    onStopped: {
+                        appDelegate.claimFocus();
+                    }
+                }
+                ParallelAnimation {
+                    id: rightEdgeFocusAnimation
+                    property int targetX: 0
+                    UbuntuNumberAnimation { target: appDelegate; properties: "x"; to: rightEdgeFocusAnimation.targetX; duration: priv.animationDuration }
+                    UbuntuNumberAnimation { target: decoratedWindow; properties: "angle"; to: 0; duration: priv.animationDuration }
+                    UbuntuNumberAnimation { target: decoratedWindow; properties: "itemScale"; to: 1; duration: priv.animationDuration }
+                    onStopped: {
+                        appDelegate.focus = true
+                    }
+                }
+                ParallelAnimation {
+                    id: hidingAnimation
+                    UbuntuNumberAnimation { target: appDelegate; property: "opacity"; to: 0; duration: priv.animationDuration }
+                    onStopped: appDelegate.opacity = 1
+                }
+
+                SpreadMaths {
+                    id: spreadMaths
+                    spread: spreadItem
+                    itemIndex: index
+                    flickable: floatingFlickable
+                }
+                StageMaths {
+                    id: stageMaths
+                    sceneWidth: root.width
+                    stage: appDelegate.stage
+                    thisDelegate: appDelegate
+                    mainStageDelegate: priv.mainStageDelegate
+                    sideStageDelegate: priv.sideStageDelegate
+                    sideStageWidth: sideStage.panelWidth
+                    sideStageX: sideStage.x
+                    itemIndex: appDelegate.itemIndex
+                    nextInStack: priv.nextInStack
+                    leftEdgeDragProgress: root.leftEdgeDragProgress
+                }
+
+                StagedRightEdgeMaths {
+                    id: stagedRightEdgeMaths
+                    sceneWidth: appContainer.width - root.leftMargin
+                    sceneHeight: appContainer.height
+                    isMainStageApp: priv.mainStageDelegate == appDelegate
+                    isSideStageApp: priv.sideStageDelegate == appDelegate
+                    sideStageWidth: sideStage.width
+                    sideStageOpen: sideStage.shown
+                    itemIndex: index
+                    nextInStack: priv.nextInStack
+                    progress: 0
+                    targetHeight: spreadItem.stackHeight
+                    targetX: spreadMaths.targetX
+                    startY: appDelegate.fullscreen ? 0 : PanelState.panelHeight
+                    targetY: spreadMaths.targetY
+                    targetAngle: spreadMaths.targetAngle
+                    targetScale: spreadMaths.targetScale
+                    shuffledZ: stageMaths.itemZ
+                    breakPoint: spreadItem.rightEdgeBreakPoint
+                }
+
+                WindowedRightEdgeMaths {
+                    id: windowedRightEdgeMaths
+                    itemIndex: index
+                    startWidth: appDelegate.requestedWidth
+                    startHeight: appDelegate.requestedHeight
+                    targetHeight: spreadItem.stackHeight
+                    targetX: spreadMaths.targetX
+                    targetY: spreadMaths.targetY
+                    normalZ: appDelegate.normalZ
+                    targetAngle: spreadMaths.targetAngle
+                    targetScale: spreadMaths.targetScale
+                    breakPoint: spreadItem.rightEdgeBreakPoint
+                }
 
                 states: [
                     State {
+                        name: "spread"; when: root.state == "spread"
+                        PropertyChanges {
+                            target: decoratedWindow;
+                            showDecoration: false;
+                            angle: spreadMaths.targetAngle
+                            itemScale: spreadMaths.targetScale
+                            scaleToPreviewSize: spreadItem.stackHeight
+                            scaleToPreviewProgress: 1
+                            hasDecoration: root.mode === "windowed"
+                            shadowOpacity: spreadMaths.shadowOpacity
+                            showHighlight: spreadItem.highlightedIndex === index
+                            darkening: spreadItem.highlightedIndex >= 0
+                            anchors.topMargin: dragArea.distance
+                        }
+                        PropertyChanges {
+                            target: appDelegate
+                            x: spreadMaths.targetX
+                            y: spreadMaths.targetY
+                            z: index
+                            height: spreadItem.spreadItemHeight
+                            requestedWidth: decoratedWindow.oldRequestedWidth
+                            requestedHeight: decoratedWindow.oldRequestedHeight
+                            visible: spreadMaths.itemVisible
+                        }
+                        PropertyChanges { target: dragArea; enabled: true }
+                        PropertyChanges { target: windowInfoItem; opacity: spreadMaths.tileInfoOpacity; visible: spreadMaths.itemVisible }
+                    },
+                    State {
+                        name: "stagedRightEdge"
+                        when: (root.mode == "staged" || root.mode == "stagedWithSideStage") && (root.state == "sideStagedRightEdge" || root.state == "stagedRightEdge" || rightEdgeFocusAnimation.running || hidingAnimation.running)
+                        PropertyChanges {
+                            target: stagedRightEdgeMaths
+                            progress: Math.max(edgeBarrier.progress, rightEdgeDragArea.draggedProgress)
+                        }
+                        PropertyChanges {
+                            target: appDelegate
+                            x: stagedRightEdgeMaths.animatedX
+                            y: stagedRightEdgeMaths.animatedY
+                            z: stagedRightEdgeMaths.animatedZ
+                            height: stagedRightEdgeMaths.animatedHeight
+                            requestedWidth: decoratedWindow.oldRequestedWidth
+                            requestedHeight: decoratedWindow.oldRequestedHeight
+                            visible: appDelegate.x < root.width
+                        }
+                        PropertyChanges {
+                            target: decoratedWindow
+                            hasDecoration: false
+                            angle: stagedRightEdgeMaths.animatedAngle
+                            itemScale: stagedRightEdgeMaths.animatedScale
+                            scaleToPreviewSize: spreadItem.stackHeight
+                            scaleToPreviewProgress: stagedRightEdgeMaths.scaleToPreviewProgress
+                            shadowOpacity: .3
+                        }
+                    },
+                    State {
+                        name: "windowedRightEdge"
+                        when: root.mode == "windowed" && (root.state == "windowedRightEdge" || rightEdgeFocusAnimation.running || hidingAnimation.running || edgeBarrier.progress > 0)
+                        PropertyChanges {
+                            target: windowedRightEdgeMaths
+                            progress: Math.max(rightEdgeDragArea.progress, edgeBarrier.progress)
+                        }
+                        PropertyChanges {
+                            target: appDelegate
+                            x: windowedRightEdgeMaths.animatedX
+                            y: windowedRightEdgeMaths.animatedY
+                            z: windowedRightEdgeMaths.animatedZ
+                            height: stagedRightEdgeMaths.animatedHeight
+                            requestedWidth: decoratedWindow.oldRequestedWidth
+                            requestedHeight: decoratedWindow.oldRequestedHeight
+                        }
+                        PropertyChanges {
+                            target: decoratedWindow
+                            showDecoration: windowedRightEdgeMaths.decorationHeight
+                            angle: windowedRightEdgeMaths.animatedAngle
+                            itemScale: windowedRightEdgeMaths.animatedScale
+                            scaleToPreviewSize: spreadItem.stackHeight
+                            scaleToPreviewProgress: windowedRightEdgeMaths.scaleToPreviewProgress
+                            shadowOpacity: .3
+                        }
+                        PropertyChanges {
+                            target: opacityEffect;
+                            opacityValue: windowedRightEdgeMaths.opacityMask
+                            sourceItem: windowedRightEdgeMaths.opacityMask < 1 ? decoratedWindow : null
+                        }
+                    },
+                    State {
+                        name: "staged"; when: root.state == "staged"
+                        PropertyChanges {
+                            target: appDelegate
+                            x: stageMaths.itemX
+                            y: appDelegate.fullscreen ? 0 : PanelState.panelHeight
+                            requestedWidth: appContainer.width
+                            requestedHeight: appDelegate.fullscreen ? appContainer.height : appContainer.height - PanelState.panelHeight
+                            visuallyMaximized: true
+                            visible: appDelegate.x < root.width
+                        }
+                        PropertyChanges {
+                            target: decoratedWindow
+                            hasDecoration: false
+                        }
+                        PropertyChanges {
+                            target: resizeArea
+                            enabled: false
+                        }
+                        PropertyChanges {
+                            target: stageMaths
+                            animateX: !focusAnimation.running && itemIndex !== spreadItem.highlightedIndex
+                        }
+                    },
+                    State {
+                        name: "stagedWithSideStage"; when: root.state == "stagedWithSideStage"
+                        PropertyChanges {
+                            target: stageMaths
+                            itemIndex: index
+                        }
+                        PropertyChanges {
+                            target: appDelegate
+                            x: stageMaths.itemX
+                            y: appDelegate.fullscreen ? 0 : PanelState.panelHeight
+                            z: stageMaths.itemZ
+                            requestedWidth: stageMaths.itemWidth
+                            requestedHeight: appDelegate.fullscreen ? appContainer.height : appContainer.height - PanelState.panelHeight
+                            visuallyMaximized: true
+                            visible: appDelegate.x < root.width
+                        }
+                        PropertyChanges {
+                            target: decoratedWindow
+                            hasDecoration: false
+                        }
+                        PropertyChanges {
+                            target: resizeArea
+                            enabled: false
+                        }
+                    },
+                    State {
+                        name: "maximized"; when: appDelegate.windowState == WindowStateStorage.WindowStateMaximized
+                        PropertyChanges {
+                            target: appDelegate;
+                            requestedX: root.leftMargin;
+                            requestedY: 0;
+                            visuallyMinimized: false;
+                            visuallyMaximized: true
+                            requestedWidth: appContainer.width - root.leftMargin;
+                            requestedHeight: appContainer.height;
+                        }
+                        PropertyChanges { target: touchControls; enabled: true }
+                    },
+                    State {
                         name: "fullscreen"; when: appDelegate.fullscreen && !appDelegate.minimized
                         PropertyChanges {
                             target: appDelegate;
-                            x: rotation == 0 ? 0 : (parent.width - width) / 2 + (shellOrientationAngle == 90 ? -PanelState.panelHeight : PanelState.panelHeight)
-                            y: rotation == 0 ? -PanelState.panelHeight : (parent.height - height) / 2
+                            requestedX: 0
+                            requestedY: 0
                             requestedWidth: appContainer.width;
                             requestedHeight: appContainer.height;
                         }
+                        PropertyChanges { target: decoratedWindow; hasDecoration: false }
                     },
                     State {
                         name: "normal";
                         when: appDelegate.windowState == WindowStateStorage.WindowStateNormal
                         PropertyChanges {
-                            target: appDelegate;
-                            visuallyMinimized: false;
+                            target: appDelegate
+                            visuallyMinimized: false
                             visuallyMaximized: false
                         }
+                        PropertyChanges { target: touchControls; enabled: true }
+                        PropertyChanges { target: resizeArea; enabled: true }
+                        PropertyChanges { target: decoratedWindow; shadowOpacity: .3}
                     },
                     State {
                         name: "restored";
@@ -542,30 +1207,25 @@
                         extend: "normal"
                         PropertyChanges {
                             target: appDelegate;
-                            requestedX: restoredX;
-                            requestedY: restoredY;
+                            windowedX: restoredX;
+                            windowedY: restoredY;
                         }
                     },
                     State {
-                        name: "maximized"; when: appDelegate.maximized && !appDelegate.minimized
-                        PropertyChanges {
-                            target: appDelegate;
-                            requestedX: root.leftMargin;
-                            requestedY: 0;
-                            requestedWidth: appContainer.width - root.leftMargin;
-                            requestedHeight: appContainer.height;
-                            visuallyMinimized: false;
-                            visuallyMaximized: true
-                        }
+                        name: "semiMaximized"
+                        PropertyChanges { target: touchControls; enabled: true }
+                        PropertyChanges { target: resizeArea; enabled: true }
+                        PropertyChanges { target: decoratedWindow; shadowOpacity: .3 }
                     },
                     State {
                         name: "maximizedLeft"; when: appDelegate.maximizedLeft && !appDelegate.minimized
+                        extend: "semiMaximized"
                         PropertyChanges {
                             target: appDelegate
-                            requestedX: root.leftMargin
-                            requestedY: PanelState.panelHeight
-                            requestedWidth: (appContainer.width - root.leftMargin)/2
-                            requestedHeight: appContainer.height - PanelState.panelHeight
+                            windowedX: root.leftMargin
+                            windowedY: PanelState.panelHeight
+                            windowedWidth: (appContainer.width - root.leftMargin)/2
+                            windowedHeight: appContainer.height - PanelState.panelHeight
                         }
                     },
                     State {
@@ -573,17 +1233,18 @@
                         extend: "maximizedLeft"
                         PropertyChanges {
                             target: appDelegate;
-                            requestedX: (appContainer.width + root.leftMargin)/2
+                            windowedX: (appContainer.width + root.leftMargin)/2
                         }
                     },
                     State {
                         name: "maximizedTopLeft"; when: appDelegate.maximizedTopLeft && !appDelegate.minimized
+                        extend: "semiMaximized"
                         PropertyChanges {
                             target: appDelegate
-                            requestedX: root.leftMargin
-                            requestedY: PanelState.panelHeight
-                            requestedWidth: (appContainer.width - root.leftMargin)/2
-                            requestedHeight: (appContainer.height - PanelState.panelHeight)/2
+                            windowedX: root.leftMargin
+                            windowedY: PanelState.panelHeight
+                            windowedWidth: (appContainer.width - root.leftMargin)/2
+                            windowedHeight: (appContainer.height - PanelState.panelHeight)/2
                         }
                     },
                     State {
@@ -591,17 +1252,18 @@
                         extend: "maximizedTopLeft"
                         PropertyChanges {
                             target: appDelegate
-                            requestedX: (appContainer.width + root.leftMargin)/2
+                            windowedX: (appContainer.width + root.leftMargin)/2
                         }
                     },
                     State {
                         name: "maximizedBottomLeft"; when: appDelegate.maximizedBottomLeft && !appDelegate.minimized
+                        extend: "semiMaximized"
                         PropertyChanges {
                             target: appDelegate
-                            requestedX: root.leftMargin
-                            requestedY: (appContainer.height + PanelState.panelHeight)/2
-                            requestedWidth: (appContainer.width - root.leftMargin)/2
-                            requestedHeight: appContainer.height/2
+                            windowedX: root.leftMargin
+                            windowedY: (appContainer.height + PanelState.panelHeight)/2
+                            windowedWidth: (appContainer.width - root.leftMargin)/2
+                            windowedHeight: appContainer.height/2
                         }
                     },
                     State {
@@ -609,35 +1271,52 @@
                         extend: "maximizedBottomLeft"
                         PropertyChanges {
                             target: appDelegate
-                            requestedX: (appContainer.width + root.leftMargin)/2
+                            windowedX: (appContainer.width + root.leftMargin)/2
                         }
                     },
                     State {
                         name: "maximizedHorizontally"; when: appDelegate.maximizedHorizontally && !appDelegate.minimized
-                        PropertyChanges { target: appDelegate; requestedX: root.leftMargin; requestedY: requestedY; requestedWidth: appContainer.width - root.leftMargin }
+                        extend: "semiMaximized"
+                        PropertyChanges { target: appDelegate; requestedX: root.leftMargin; requestedY: windowedY;
+                            requestedWidth: appContainer.width - root.leftMargin; requestedHeight: appDelegate.windowedHeight }
                     },
                     State {
                         name: "maximizedVertically"; when: appDelegate.maximizedVertically && !appDelegate.minimized
-                        PropertyChanges { target: appDelegate; requestedX: requestedX; requestedY: PanelState.panelHeight; requestedHeight: appContainer.height - PanelState.panelHeight }
+                        extend: "semiMaximized"
+                        PropertyChanges { target: appDelegate; requestedX: windowedX; requestedY: PanelState.panelHeight;
+                            requestedWidth: appDelegate.windowedWidth; requestedHeight: appContainer.height - PanelState.panelHeight }
                     },
                     State {
                         name: "minimized"; when: appDelegate.minimized
                         PropertyChanges {
-                            target: appDelegate;
-                            requestedX: -appDelegate.width / 2;
-                            scale: units.gu(5) / appDelegate.width;
+                            target: appDelegate
+                            requestedX: -appDelegate.width / 2
+                            scale: units.gu(5) / appDelegate.width
                             opacity: 0;
-                            visuallyMinimized: true;
+                            visuallyMinimized: true
                             visuallyMaximized: false
                         }
                     }
                 ]
                 transitions: [
                     Transition {
+                        from: "staged,stagedWithSideStage"; to: "normal"
+                        enabled: appDelegate.animationsEnabled
+                        PropertyAction { target: appDelegate; properties: "visuallyMinimized,visuallyMaximized" }
+                        UbuntuNumberAnimation { target: appDelegate; properties: "x,y,requestedX,requestedY,opacity,requestedWidth,requestedHeight,scale"; duration: priv.animationDuration }
+                    },
+                    Transition {
+                        from: "normal,maximized,maximizedHorizontally,maximizedVertically,maximizedLeft,maximizedRight,maximizedTopLeft,maximizedBottomLeft,maximizedTopRight,maximizedBottomRight";
+                        to: "staged,stagedWithSideStage"
+                        UbuntuNumberAnimation { target: appDelegate; properties: "x,y,requestedX,requestedY,requestedWidth,requestedHeight"; duration: priv.animationDuration}
+                    },
+                    Transition {
+                        from: "maximized,maximizedHorizontally,maximizedVertically,maximizedLeft,maximizedRight,maximizedTopLeft,maximizedBottomLeft,maximizedTopRight,maximizedBottomRight,minimized";
                         to: "normal,restored"
                         enabled: appDelegate.animationsEnabled
                         PropertyAction { target: appDelegate; properties: "visuallyMinimized,visuallyMaximized" }
-                        UbuntuNumberAnimation { target: appDelegate; properties: "requestedX,requestedY,opacity,scale,requestedWidth,requestedHeight" }
+                        UbuntuNumberAnimation { target: appDelegate; properties: "requestedX,requestedY,windowedX,windowedY,requestedWidth,requestedHeight,windowedWidth,windowedHeight,scale";
+                            duration: priv.animationDuration }
                     },
                     Transition {
                         to: "minimized"
@@ -657,11 +1336,60 @@
                         }
                     },
                     Transition {
-                        to: "*" //maximized and fullscreen
+                        to: "spread"
+                        // DecoratedWindow wants the scaleToPreviewSize set before enabling scaleToPreview
+                        PropertyAction { target: appDelegate; properties: "z,visible" }
+                        PropertyAction { target: decoratedWindow; property: "scaleToPreviewSize" }
+                        UbuntuNumberAnimation { target: appDelegate; properties: "x,y,height"; duration: priv.animationDuration }
+                        UbuntuNumberAnimation { target: decoratedWindow; properties: "width,height,itemScale,angle,scaleToPreviewProgress"; duration: priv.animationDuration }
+                    },
+                    Transition {
+                        from: "normal,staged"; to: "stagedWithSideStage"
+                        UbuntuNumberAnimation { target: appDelegate; properties: "x,y"; duration: priv.animationDuration }
+                        UbuntuNumberAnimation { target: appDelegate; properties: "requestedWidth,requestedHeight"; duration: priv.animationDuration }
+                    },
+                    Transition {
+                        to: "windowedRightEdge"
+                        ScriptAction {
+                            script: {
+                                windowedRightEdgeMaths.startX = appDelegate.requestedX
+                                windowedRightEdgeMaths.startY = appDelegate.requestedY
+
+                                if (index == 1) {
+                                    var thisRect = { x: appDelegate.windowedX, y: appDelegate.windowedY, width: appDelegate.requestedWidth, height: appDelegate.requestedHeight }
+                                    var otherDelegate = appRepeater.itemAt(0);
+                                    var otherRect = { x: otherDelegate.windowedX, y: otherDelegate.windowedY, width: otherDelegate.requestedWidth, height: otherDelegate.requestedHeight }
+                                    var intersectionRect = MathUtils.intersectionRect(thisRect, otherRect)
+                                    var mappedInterSectionRect = appDelegate.mapFromItem(root, intersectionRect.x, intersectionRect.y)
+                                    opacityEffect.maskX = mappedInterSectionRect.x
+                                    opacityEffect.maskY = mappedInterSectionRect.y
+                                    opacityEffect.maskWidth = intersectionRect.width
+                                    opacityEffect.maskHeight = intersectionRect.height
+                                }
+                            }
+                        }
+                    },
+                    Transition {
+                        from: "stagedRightEdge"; to: "staged"
+                        enabled: rightEdgeDragArea.cancelled // only transition back to state if the gesture was cancelled, in the other cases we play the focusAnimations.
+                        SequentialAnimation {
+                            ParallelAnimation {
+                                UbuntuNumberAnimation { target: appDelegate; properties: "x,y,height,width,scale"; duration: priv.animationDuration }
+                                UbuntuNumberAnimation { target: decoratedWindow; properties: "width,height,itemScale,angle,scaleToPreviewProgress"; duration: priv.animationDuration }
+                            }
+                            // We need to release scaleToPreviewSize at last
+                            PropertyAction { target: decoratedWindow; property: "scaleToPreviewSize" }
+                            PropertyAction { target: appDelegate; property: "visible" }
+                        }
+                    },
+                    Transition {
+                        from: "normal,maximized,maximizedLeft,maximizedRight,maximizedTop,maximizedBottom,maximizedTopLeft,maximizedTopRight,maximizedBottomLeft,maximizedBottomRight,maximizedHorizontally,maximizedVertically,fullscreen"
+                        to: "normal,maximized,maximizedLeft,maximizedRight,maximizedTop,maximizedBottom,maximizedTopLeft,maximizedTopRight,maximizedBottomLeft,maximizedBottomRight,maximizedHorizontally,maximizedVertically,fullscreen"
                         enabled: appDelegate.animationsEnabled
-                        PropertyAction { target: appDelegate; property: "visuallyMinimized" }
                         SequentialAnimation {
-                            UbuntuNumberAnimation { target: appDelegate; properties: "requestedX,requestedY,opacity,scale,requestedWidth,requestedHeight" }
+                            PropertyAction { target: appDelegate; property: "visuallyMinimized" }
+                            UbuntuNumberAnimation { target: appDelegate; properties: "requestedX,requestedY,windowedX,windowedY,opacity,scale,requestedWidth,requestedHeight,windowedWidth,windowedHeight";
+                                duration: priv.animationDuration }
                             PropertyAction { target: appDelegate; property: "visuallyMaximized" }
                             ScriptAction { script: { fakeRectangle.stop(); } }
                         }
@@ -669,14 +1397,6 @@
                 ]
 
                 Binding {
-                    id: previewBinding
-                    target: appDelegate
-                    property: "z"
-                    value: topLevelSurfaceList.count + 1
-                    when: index == spread.highlightedIndex && spread.ready
-                }
-
-                Binding {
                     target: PanelState
                     property: "buttonsAlwaysVisible"
                     value: appDelegate && appDelegate.maximized && touchControls.overlayShown
@@ -697,26 +1417,15 @@
                     screenWidth: appContainer.width
                     screenHeight: appContainer.height
                     leftMargin: root.leftMargin
-
-                    onPressed: { appDelegate.focus = true; }
-
-                    Component.onCompleted: {
-                        loadWindowState();
-                    }
-
-                    property bool saveStateOnDestruction: true
-                    Connections {
-                        target: root
-                        onStageAboutToBeUnloaded: {
-                            resizeArea.saveWindowState();
-                            resizeArea.saveStateOnDestruction = false;
-                            fullscreenPolicy.active = false;
-                        }
-                    }
+                    enabled: false
+                    visible: enabled
+
+                    onPressed: {
+                        appDelegate.focus = true;
+                    }
+
                     Component.onDestruction: {
-                        if (saveStateOnDestruction) {
-                            saveWindowState();
-                        }
+                        saveWindowState();
                     }
                 }
 
@@ -729,14 +1438,25 @@
                     surface: model.surface
                     active: appDelegate.focus
                     focus: true
+                    interactive: root.interactive
+                    showDecoration: 1
                     maximizeButtonShown: appDelegate.canBeMaximized
                     overlayShown: touchControls.overlayShown
+                    width: implicitWidth
+                    height: implicitHeight
+                    highlightSize: windowInfoItem.iconMargin / 2
                     stageWidth: appContainer.width
                     stageHeight: appContainer.height
 
                     requestedWidth: appDelegate.requestedWidth
                     requestedHeight: appDelegate.requestedHeight
 
+                    property int oldRequestedWidth: -1
+                    property int oldRequestedHeight: -1
+
+                    onRequestedWidthChanged: oldRequestedWidth = requestedWidth
+                    onRequestedHeightChanged: oldRequestedHeight = requestedHeight
+
                     onCloseClicked: { appDelegate.close(); }
                     onMaximizeClicked: appDelegate.anyMaximized ? appDelegate.restoreFromMaximized() : appDelegate.maximize();
                     onMaximizeHorizontallyClicked: appDelegate.maximizedHorizontally ? appDelegate.restoreFromMaximized() : appDelegate.maximizeHorizontally()
@@ -744,11 +1464,34 @@
                     onMinimizeClicked: appDelegate.minimize()
                     onDecorationPressed: { appDelegate.focus = true; }
                     onDecorationReleased: fakeRectangle.commit();
+
+                    property real angle: 0
+                    property real itemScale: 1
+                    transform: [
+                        Scale {
+                            origin.x: 0
+                            origin.y: decoratedWindow.implicitHeight / 2
+                            xScale: decoratedWindow.itemScale
+                            yScale: decoratedWindow.itemScale
+                        },
+                        Rotation {
+                            origin { x: 0; y: (decoratedWindow.height / 2) }
+                            axis { x: 0; y: 1; z: 0 }
+                            angle: decoratedWindow.angle
+                        }
+                    ]
+                }
+
+                OpacityMask {
+                    id: opacityEffect
+                    anchors.fill: decoratedWindow
                 }
 
                 WindowControlsOverlay {
                     id: touchControls
                     target: appDelegate
+                    enabled: false
+                    visible: enabled
                     stageWidth: appContainer.width
                     stageHeight: appContainer.height
 
@@ -764,9 +1507,89 @@
                 }
 
                 WindowedFullscreenPolicy {
-                    id: fullscreenPolicy
-                    active: true
-                    surface: model.surface
+                    id: windowedFullscreenPolicy
+                    active: root.mode == "windowed"
+                    surface: model.surface
+                }
+                StagedFullscreenPolicy {
+                    id: stagedFullscreenPolicy
+                    active: root.mode == "staged" || root.mode == "stagedWithSideStage"
+                    surface: model.surface
+                }
+
+                SpreadDelegateInputArea {
+                    id: dragArea
+                    objectName: "dragArea"
+                    anchors.fill: decoratedWindow
+                    enabled: false
+                    closeable: !appDelegate.isDash
+
+                    onClicked: {
+                        spreadItem.highlightedIndex = index;
+                        if (distance == 0) {
+                            priv.goneToSpread = false;
+                        }
+                    }
+                    onClose: {
+                        priv.closingIndex = index
+                        if (model.surface) { // could be stopped by OOM
+                            model.surface.close()
+                        } else if (model.application) {
+                            root.applicationManager.stopApplication(model.application.appId);
+                        }
+                    }
+                }
+
+                WindowInfoItem {
+                    id: windowInfoItem
+                    objectName: "windowInfoItem"
+                    anchors { left: parent.left; top: decoratedWindow.bottom; topMargin: units.gu(1) }
+                    title: model.application.name
+                    iconSource: model.application.icon
+                    height: spreadItem.appInfoHeight
+                    opacity: 0
+                    z: 1
+                    visible: opacity > 0
+                    maxWidth: {
+                        var nextApp = appRepeater.itemAt(index + 1);
+                        if (nextApp) {
+                            return nextApp.x - appDelegate.x - units.gu(1)
+                        }
+                        return appDelegate.width;
+                    }
+
+                    onClicked: {
+                        spreadItem.highlightedIndex = index;
+                        priv.goneToSpread = false;
+                    }
+                }
+
+                Image {
+                    id: closeImage
+                    anchors { left: parent.left; top: parent.top; leftMargin: -height / 2; topMargin: -height / 2 + spreadMaths.closeIconOffset }
+                    source: "graphics/window-close.svg"
+                    readonly property var mousePos: hoverMouseArea.mapToItem(appDelegate, hoverMouseArea.mouseX, hoverMouseArea.mouseY)
+                    visible: !appDelegate.isDash
+                             && index == spreadItem.highlightedIndex
+                             && mousePos.y < (decoratedWindow.height / 3)
+                             && mousePos.y > -units.gu(4)
+                             && mousePos.x > -units.gu(4)
+                             && mousePos.x < (decoratedWindow.width * 2 / 3)
+                    height: units.gu(2)
+                    width: height
+                    sourceSize.width: width
+                    sourceSize.height: height
+
+                    MouseArea {
+                        id: closeMouseArea
+                        objectName: "closeMouseArea"
+                        anchors.fill: closeImage
+                        anchors.margins: -units.gu(2)
+                        onClicked: {
+                            priv.closingIndex = index;
+                            appDelegate.close();
+                        }
+                    }
                 }
             }
         }
@@ -786,7 +1609,8 @@
         // NB: it does its own positioning according to the specified edge
         edge: Qt.RightEdge
 
-        onPassed: { spread.show(); }
+        onPassed: priv.goneToSpread = true;
+
         material: Component {
             Item {
                 Rectangle {
@@ -803,23 +1627,248 @@
         }
     }
 
+    MouseArea {
+        id: hoverMouseArea
+        objectName: "hoverMouseArea"
+        anchors.fill: appContainer
+        propagateComposedEvents: true
+        hoverEnabled: true
+        enabled: false
+        visible: enabled
+
+        property int scrollAreaWidth: width / 3
+        property bool progressiveScrollingEnabled: false
+
+        onMouseXChanged: {
+            mouse.accepted = false
+
+            if (hoverMouseArea.pressed) {
+                return;
+            }
+
+            // Find the hovered item and mark it active
+            var mapped = mapToItem(appContainer, hoverMouseArea.mouseX, hoverMouseArea.mouseY)
+            var itemUnder = appContainer.childAt(mapped.x, mapped.y)
+            if (itemUnder) {
+                mapped = mapToItem(itemUnder, hoverMouseArea.mouseX, hoverMouseArea.mouseY)
+                var delegateChild = itemUnder.childAt(mapped.x, mapped.y)
+                if (delegateChild && (delegateChild.objectName === "dragArea" || delegateChild.objectName === "windowInfoItem")) {
+                    spreadItem.highlightedIndex = appRepeater.indexOf(itemUnder)
+                }
+            }
+
+            if (floatingFlickable.contentWidth > floatingFlickable.width) {
+                var margins = floatingFlickable.width * 0.05;
+
+                if (!progressiveScrollingEnabled && mouseX < floatingFlickable.width - scrollAreaWidth) {
+                    progressiveScrollingEnabled = true
+                }
+
+                // do we need to scroll?
+                if (mouseX < scrollAreaWidth + margins) {
+                    var progress = Math.min(1, (scrollAreaWidth + margins - mouseX) / (scrollAreaWidth - margins));
+                    var contentX = (1 - progress) * (floatingFlickable.contentWidth - floatingFlickable.width)
+                    floatingFlickable.contentX = Math.max(0, Math.min(floatingFlickable.contentX, contentX))
+                }
+                if (mouseX > floatingFlickable.width - scrollAreaWidth && progressiveScrollingEnabled) {
+                    var progress = Math.min(1, (mouseX - (floatingFlickable.width - scrollAreaWidth)) / (scrollAreaWidth - margins))
+                    var contentX = progress * (floatingFlickable.contentWidth - floatingFlickable.width)
+                    floatingFlickable.contentX = Math.min(floatingFlickable.contentWidth - floatingFlickable.width, Math.max(floatingFlickable.contentX, contentX))
+                }
+            }
+        }
+
+        onPressed: mouse.accepted = false
+    }
+
+    FloatingFlickable {
+        id: floatingFlickable
+        objectName: "spreadFlickable"
+        anchors.fill: appContainer
+        enabled: false
+        contentWidth: spreadItem.spreadTotalWidth
+
+        function snap(toIndex) {
+            var delegate = appRepeater.itemAt(toIndex)
+            var targetContentX = floatingFlickable.contentWidth / spreadItem.totalItemCount * toIndex;
+            if (targetContentX - floatingFlickable.contentX > spreadItem.rightStackXPos - (spreadItem.spreadItemWidth / 2)) {
+                var offset = (spreadItem.rightStackXPos - (spreadItem.spreadItemWidth / 2)) - (targetContentX - floatingFlickable.contentX)
+                snapAnimation.to = floatingFlickable.contentX - offset;
+                snapAnimation.start();
+            } else if (targetContentX - floatingFlickable.contentX < spreadItem.leftStackXPos + units.gu(1)) {
+                var offset = (spreadItem.leftStackXPos + units.gu(1)) - (targetContentX - floatingFlickable.contentX);
+                snapAnimation.to = floatingFlickable.contentX - offset;
+                snapAnimation.start();
+            }
+        }
+        UbuntuNumberAnimation {id: snapAnimation; target: floatingFlickable; property: "contentX"}
+    }
+
+    PropertyAnimation {
+        id: shortRightEdgeSwipeAnimation
+        property: "x"
+        to: 0
+        duration: priv.animationDuration
+    }
+
     SwipeArea {
+        id: rightEdgeDragArea
+        objectName: "rightEdgeDragArea"
         direction: Direction.Leftwards
         anchors { top: parent.top; right: parent.right; bottom: parent.bottom }
-        width: units.gu(1)
-        onDraggingChanged: { if (dragging) { spread.show(); } }
+        width: root.dragAreaWidth
+
+        property var gesturePoints: []
+        property bool cancelled: false
+
+        property real progress: dragging ? -touchPosition.x / root.width : 0
+        onProgressChanged: {
+            if (dragging) {
+                draggedProgress = progress;
+            }
+        }
+
+        property real draggedProgress: 0
+
+        onTouchPositionChanged: {
+            gesturePoints.push(touchPosition.x);
+            if (gesturePoints.length > 10) {
+                gesturePoints.splice(0, gesturePoints.length - 10)
+            }
+        }
+
+        onDraggingChanged: {
+            if (dragging) {
+                // A potential edge-drag gesture has started. Start recording it
+                gesturePoints = [];
+                cancelled = false;
+                draggedProgress = 0;
+            } else {
+                // Ok. The user released. Did he drag far enough to go to full spread?
+                if (gesturePoints[gesturePoints.length - 1] < -spreadItem.rightEdgeBreakPoint * spreadItem.width ) {
+
+                    // He dragged far enough, but if the last movement was a flick to the right again, he wants to cancel the spread again.
+                    var oneWayFlickToRight = true;
+                    var smallestX = gesturePoints[0]-1;
+                    for (var i = 0; i < gesturePoints.length; i++) {
+                        if (gesturePoints[i] <= smallestX) {
+                            oneWayFlickToRight = false;
+                            break;
+                        }
+                        smallestX = gesturePoints[i];
+                    }
+
+                    if (!oneWayFlickToRight) {
+                        // Ok, the user made it, let's go to spread!
+                        priv.goneToSpread = true;
+                    } else {
+                        cancelled = true;
+                    }
+                } else {
+                    // Ok, the user didn't drag far enough to cross the breakPoint
+                    // Find out if it was a one-way movement to the left, in which case we just switch directly to next app.
+                    var oneWayFlick = true;
+                    var smallestX = rightEdgeDragArea.width;
+                    for (var i = 0; i < gesturePoints.length; i++) {
+                        if (gesturePoints[i] >= smallestX) {
+                            oneWayFlick = false;
+                            break;
+                        }
+                        smallestX = gesturePoints[i];
+                    }
+
+                    if (appRepeater.count > 1 &&
+                            (oneWayFlick && rightEdgeDragArea.distance > units.gu(2) || rightEdgeDragArea.distance > spreadItem.rightEdgeBreakPoint * spreadItem.width)) {
+                        var nextStage = appRepeater.itemAt(priv.nextInStack).stage
+                        for (var i = 0; i < appRepeater.count; i++) {
+                            if (i != priv.nextInStack && appRepeater.itemAt(i).stage == nextStage) {
+                                appRepeater.itemAt(i).playHidingAnimation()
+                                break;
+                            }
+                        }
+                        appRepeater.itemAt(priv.nextInStack).playFocusAnimation()
+                        if (appRepeater.itemAt(priv.nextInStack).stage == ApplicationInfoInterface.SideStage && !sideStage.shown) {
+                            sideStage.show();
+                        }
+
+                    } else {
+                        cancelled = true;
+                    }
+
+                    gesturePoints = [];
+                }
+            }
+        }
     }
 
-    DesktopSpread {
-        id: spread
-        objectName: "spread"
-        anchors.fill: appContainer
-        workspace: appContainer
-        focus: state == "altTab"
-        altTabPressed: root.altTabPressed
-
-        onPlayFocusAnimation: {
-            appRepeater.itemAt(index).playFocusAnimation();
+    TabletSideStageTouchGesture {
+        id: triGestureArea
+        objectName: "triGestureArea"
+        anchors.fill: parent
+        enabled: false
+        property Item appDelegate
+
+        dragComponent: dragComponent
+        dragComponentProperties: { "appDelegate": appDelegate }
+
+        onPressed: {
+            function matchDelegate(obj) { return String(obj.objectName).indexOf("appDelegate") >= 0; }
+
+            var delegateAtCenter = Functions.itemAt(appContainer, x, y, matchDelegate);
+            if (!delegateAtCenter) return;
+
+            appDelegate = delegateAtCenter;
+        }
+
+        onClicked: {
+            if (sideStage.shown) {
+                sideStage.hide();
+            } else  {
+                sideStage.show();
+                priv.updateMainAndSideStageIndexes()
+            }
+        }
+
+        onDragStarted: {
+            // If we're dragging to the sidestage.
+            if (!sideStage.shown) {
+                sideStage.show();
+            }
+        }
+
+        Component {
+            id: dragComponent
+            SurfaceContainer {
+                property Item appDelegate
+
+                surface: appDelegate ? appDelegate.surface : null
+
+                consumesInput: false
+                interactive: false
+                focus: false
+                requestedWidth: appDelegate.requestedWidth
+                requestedHeight: appDelegate.requestedHeight
+
+                width: units.gu(40)
+                height: units.gu(40)
+
+                Drag.hotSpot.x: width/2
+                Drag.hotSpot.y: height/2
+                // only accept opposite stage.
+                Drag.keys: {
+                    if (!surface) return "Disabled";
+                    if (appDelegate.isDash) return "Disabled";
+
+                    if (appDelegate.stage === ApplicationInfo.MainStage) {
+                        if (appDelegate.application.supportedOrientations
+                                & (Qt.PortraitOrientation|Qt.InvertedPortraitOrientation)) {
+                            return "MainStage";
+                        }
+                        return "Disabled";
+                    }
+                    return "SideStage";
+                }
+            }
         }
     }
 }

=== added file 'qml/Stage/StageMaths.qml'
--- qml/Stage/StageMaths.qml	1970-01-01 00:00:00 +0000
+++ qml/Stage/StageMaths.qml	2016-10-05 11:22:21 +0000
@@ -0,0 +1,79 @@
+import QtQuick 2.4
+import Unity.Application 0.1
+import Ubuntu.Components 1.3
+
+QtObject {
+    id: root
+
+    // input
+    property int itemIndex: 0
+    property int nextInStack: 0
+    property int sceneWidth: 0
+    property int sideStageWidth: 0
+    property int sideStageX: sceneWidth
+    property bool animateX: false
+    property int leftEdgeDragProgress: 0
+
+    property int stage: ApplicationInfoInterface.MainStage
+    property var thisDelegate: null
+    property var mainStageDelegate: null
+    property var sideStageDelegate: null
+
+    // output
+
+    // We need to shuffle z ordering a bit in order to keep side stage apps above main stage apps.
+    // We don't want to really reorder them in the model because that allows us to keep track
+    // of the last focused order.
+    readonly property int itemZ: {
+        // only shuffle when we've got a main and side stage
+        if (thisDelegate.isDash && thisDelegate != mainStageDelegate && leftEdgeDragProgress > 0) {
+            return -1; // Keep the dash behind all other apps for the left edge gesture
+        }
+
+        if (!sideStageDelegate) return itemIndex;
+
+        // don't shuffle indexes greater than "actives or next"
+        if (itemIndex > 2) return itemIndex;
+
+        if (thisDelegate == mainStageDelegate) {
+            // Active main stage always at 0
+            return 0;
+        }
+
+        if (nextInStack > 0) {
+            var stageOfNextInStack = appRepeater.itemAt(nextInStack).stage;
+
+            if (itemIndex === nextInStack) {
+                // this is the next app in stack.
+
+                if (stage ===  ApplicationInfoInterface.SideStage) {
+                    // if the next app in stack is a sidestage app, it must order on top of other side stage app
+                    return Math.min(2, topLevelSurfaceList.count-1);
+                }
+                return 1;
+            }
+            if (stageOfNextInStack === ApplicationInfoInterface.SideStage) {
+                // if the next app in stack is a sidestage app, it must order on top of other side stage app
+                return 1;
+            }
+            return Math.min(2, topLevelSurfaceList.count-1);
+        }
+        return Math.min(index+1, topLevelSurfaceList.count-1);
+    }
+
+
+    property int itemX: {
+        if (mainStageDelegate == thisDelegate) {
+            return thisDelegate.isDash ? 0 : leftEdgeDragProgress;
+        }
+        if (sideStageDelegate == thisDelegate) {
+            return sideStageX;
+        }
+        return thisDelegate.isDash && leftEdgeDragProgress > 0 ? 0 : sceneWidth;
+    }
+    Behavior on itemX { enabled: root.animateX; UbuntuNumberAnimation {} }
+
+    readonly property int itemWidth: stage == ApplicationInfoInterface.MainStage ?
+                                     sideStageDelegate != null ? sideStageX : sceneWidth :
+                                     stage == ApplicationInfoInterface.SideStage ? sideStageWidth : sceneWidth
+}

=== modified file 'qml/Stage/SurfaceContainer.qml'
--- qml/Stages/SurfaceContainer.qml	2016-05-18 21:58:39 +0000
+++ qml/Stage/SurfaceContainer.qml	2016-10-05 11:22:21 +0000
@@ -23,6 +23,8 @@
 FocusScope {
     id: root
     objectName: "surfaceContainer"
+    implicitWidth: surfaceItem.implicitWidth
+    implicitHeight: surfaceItem.implicitHeight
 
     // Must be set from outside
     property var surface: null
@@ -32,7 +34,6 @@
     property int requestedHeight: -1
     property bool interactive
     property int surfaceOrientationAngle: 0
-    property bool resizeSurface: true
     property bool isPromptSurface: false
     // FIME - dont export, use interactive property. Need to fix qtmir to handle consumesInputChanged
     // to update surface activeFocus. See mock MirSurfaceItem.
@@ -58,35 +59,15 @@
     MirSurfaceItem {
         id: surfaceItem
         objectName: "surfaceItem"
+        anchors.fill: parent
 
         focus: true
 
         fillMode: MirSurfaceItem.PadOrCrop
         consumesInput: true
 
-        surfaceWidth: {
-            if (root.resizeSurface) {
-                if (root.requestedWidth >= 0) {
-                    return root.requestedWidth;
-                } else {
-                    return width;
-                }
-            } else {
-                return -1;
-            }
-        }
-
-        surfaceHeight: {
-            if (root.resizeSurface) {
-                if (root.requestedHeight >= 0) {
-                    return root.requestedHeight;
-                } else {
-                    return height;
-                }
-            } else {
-                return -1;
-            }
-        }
+        surfaceWidth: root.requestedWidth
+        surfaceHeight: root.requestedHeight
 
         enabled: root.interactive
         antialiasing: !root.interactive
@@ -99,34 +80,6 @@
         enabled: surfaceItem.enabled
     }
 
-    // MirSurface size drives SurfaceContainer size
-    Binding {
-        target: surfaceItem; property: "width"; value: root.surface ? root.surface.size.width : 0
-        when: root.requestedWidth >= 0 && root.surface
-    }
-    Binding {
-        target: surfaceItem; property: "height"; value: root.surface ? root.surface.size.height : 0
-        when: root.requestedHeight >= 0 && root.surface
-    }
-    Binding {
-        target: root; property: "width"; value: surfaceItem.width
-        when: root.requestedWidth >= 0
-    }
-    Binding {
-        target: root; property: "height"; value: surfaceItem.height
-        when: root.requestedHeight >= 0
-    }
-
-    // SurfaceContainer size drives MirSurface size
-    Binding {
-        target: surfaceItem; property: "width"; value: root.width
-        when: root.requestedWidth < 0
-    }
-    Binding {
-        target: surfaceItem; property: "height"; value: root.height
-        when: root.requestedHeight < 0
-    }
-
     Loader {
         id: animationsLoader
         objectName: "animationsLoader"

=== modified file 'qml/Stage/TopLevelSurfaceRepeater.qml'
--- qml/Stages/TopLevelSurfaceRepeater.qml	2016-09-07 09:48:56 +0000
+++ qml/Stage/TopLevelSurfaceRepeater.qml	2016-10-05 11:22:21 +0000
@@ -55,4 +55,13 @@
             startingUp = false;
         }
     }
+
+    function indexOf(delegateItem) {
+        for (var i = 0; i < count; i++) {
+            if (itemAt(i) === delegateItem) {
+                return i;
+            }
+        }
+        return -1;
+    }
 }

=== modified file 'qml/Stage/WindowDecoration.qml'
--- qml/Stages/WindowDecoration.qml	2016-09-22 07:42:18 +0000
+++ qml/Stage/WindowDecoration.qml	2016-10-05 11:22:21 +0000
@@ -79,7 +79,7 @@
             onMaximizeClicked: root.maximizeClicked();
             onMaximizeHorizontallyClicked: if (root.target.canBeMaximizedHorizontally) root.maximizeHorizontallyClicked();
             onMaximizeVerticallyClicked: if (root.target.canBeMaximizedVertically) root.maximizeVerticallyClicked();
-            closeButtonShown: root.target.application.appId !== "unity8-dash"
+            closeButtonShown: root.target.appId !== "unity8-dash"
         }
 
         Label {

=== added file 'qml/Stage/WindowInfoItem.qml'
--- qml/Stage/WindowInfoItem.qml	1970-01-01 00:00:00 +0000
+++ qml/Stage/WindowInfoItem.qml	2016-10-05 11:22:21 +0000
@@ -0,0 +1,53 @@
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+
+Item {
+    id: root
+    implicitWidth: Math.max(iconShape.width, titleLabel.width)
+    implicitHeight: iconShape.height + titleLabel.height + labelMargin + iconMargin
+    property alias title: titleLabel.text
+    property alias iconSource: icon.source
+
+    property real iconHeight: (height - titleLabel.height) * 0.65
+    property real iconMargin: (height - titleLabel.height) * 0.25
+    property real labelMargin: (height - titleLabel.height) * 0.1
+    property int maxWidth: units.gu(10)
+
+    signal clicked()
+
+    ProportionalShape {
+        id: iconShape
+        anchors {
+            top: parent.top
+            topMargin: iconMargin
+            left: parent.left
+        }
+        height: iconHeight
+        borderSource: "undefined"
+        aspect: UbuntuShape.Flat
+        source: Image {
+            id: icon
+            sourceSize.width: iconShape.width
+            sourceSize.height: iconShape.height
+            cache: false // see lpbug#1543290 why no cache
+        }
+    }
+
+    MouseArea {
+        anchors.fill: iconShape
+        onClicked: root.clicked()
+    }
+
+    Label {
+        id: titleLabel
+        anchors {
+            left: iconShape.left
+            top: iconShape.bottom
+            topMargin: labelMargin
+        }
+        width: root.maxWidth
+        fontSize: 'small'
+        color: 'white'
+        elide: Label.ElideRight
+    }
+}

=== modified file 'qml/Stage/WindowResizeArea.qml'
--- qml/Stages/WindowResizeArea.qml	2016-08-31 13:00:26 +0000
+++ qml/Stage/WindowResizeArea.qml	2016-10-05 11:22:21 +0000
@@ -75,14 +75,15 @@
 
     function loadWindowState() {
         var windowGeometry = windowStateStorage.getGeometry(root.windowId,
-                                                            Qt.rect(target.requestedX, target.requestedY, defaultWidth, defaultHeight));
-
-        target.requestedWidth = Qt.binding(function() { return Math.min(Math.max(windowGeometry.width, d.minimumWidth), screenWidth - root.leftMargin); });
-        target.requestedHeight = Qt.binding(function() { return Math.min(Math.max(windowGeometry.height, d.minimumHeight),
+                                                            Qt.rect(target.windowedX, target.windowedY, defaultWidth, defaultHeight));
+
+
+        target.windowedWidth = Qt.binding(function() { return Math.min(Math.max(windowGeometry.width, d.minimumWidth), screenWidth - root.leftMargin); });
+        target.windowedHeight = Qt.binding(function() { return Math.min(Math.max(windowGeometry.height, d.minimumHeight),
                                                                          root.screenHeight - (target.fullscreen ? 0 : PanelState.panelHeight)); });
-        target.requestedX = Qt.binding(function() { return Math.max(Math.min(windowGeometry.x, root.screenWidth - root.leftMargin - target.requestedWidth),
+        target.windowedX = Qt.binding(function() { return Math.max(Math.min(windowGeometry.x, root.screenWidth - root.leftMargin - target.windowedWidth),
                                                            (target.fullscreen ? 0 : root.leftMargin)); });
-        target.requestedY = Qt.binding(function() { return Math.max(Math.min(windowGeometry.y, root.screenHeight - target.requestedHeight), PanelState.panelHeight); });
+        target.windowedY = Qt.binding(function() { return Math.max(Math.min(windowGeometry.y, root.screenHeight - target.windowedHeight), PanelState.panelHeight); });
 
         var windowState = windowStateStorage.getState(root.windowId, WindowStateStorage.WindowStateNormal)
         target.restore(false /* animated */, windowState);
@@ -111,28 +112,28 @@
 
         readonly property int minimumWidth: root.target ? Math.max(root.minWidth, root.target.minimumWidth) : root.minWidth
         onMinimumWidthChanged: {
-            if (target.requestedWidth < minimumWidth) {
-                target.requestedWidth = minimumWidth;
+            if (target.windowedWidth < minimumWidth) {
+                target.windowedWidth = minimumWidth;
             }
         }
         readonly property int minimumHeight: root.target ? Math.max(root.minHeight, root.target.minimumHeight) : root.minHeight
         onMinimumHeightChanged: {
-            if (target.requestedHeight < minimumHeight) {
-                target.requestedHeight = minimumHeight;
+            if (target.windowedHeight < minimumHeight) {
+                target.windowedHeight = minimumHeight;
             }
         }
         readonly property int maximumWidth: root.target && root.target.maximumWidth >= minimumWidth && root.target.maximumWidth > 0
             ? root.target.maximumWidth : maxSafeInt
         onMaximumWidthChanged: {
-            if (target.requestedWidth > maximumWidth) {
-                target.requestedWidth = maximumWidth;
+            if (target.windowedWidth > maximumWidth) {
+                target.windowedWidth = maximumWidth;
             }
         }
         readonly property int maximumHeight: root.target && root.target.maximumHeight >= minimumHeight && root.target.maximumHeight > 0
             ? root.target.maximumHeight : maxSafeInt
         onMaximumHeightChanged: {
-            if (target.requestedHeight > maximumHeight) {
-                target.requestedHeight = maximumHeight;
+            if (target.windowedHeight > maximumHeight) {
+                target.windowedHeight = maximumHeight;
             }
         }
         readonly property int widthIncrement: {
@@ -247,8 +248,8 @@
             var pos = mapToItem(root.target.parent, mouseX, mouseY);
             d.startMousePosX = pos.x;
             d.startMousePosY = pos.y;
-            d.startX = target.requestedX;
-            d.startY = target.requestedY;
+            d.startX = target.windowedX;
+            d.startY = target.windowedY;
             d.startWidth = target.width;
             d.startHeight = target.height;
             d.currentWidth = target.width;
@@ -285,53 +286,53 @@
 
         if (d.leftBorder) {
             var newTargetX = d.startX + deltaX;
-            var rightBorderX = target.requestedX + target.width;
+            var rightBorderX = target.windowedX + target.width;
             if (rightBorderX > newTargetX + d.minimumWidth) {
                 if (rightBorderX  < newTargetX + d.maximumWidth) {
-                    target.requestedWidth = rightBorderX - newTargetX;
+                    target.windowedWidth = rightBorderX - newTargetX;
                 } else {
-                    target.requestedWidth = d.maximumWidth;
+                    target.windowedWidth = d.maximumWidth;
                 }
             } else {
-                target.requestedWidth = d.minimumWidth;
+                target.windowedWidth = d.minimumWidth;
             }
 
         } else if (d.rightBorder) {
             var newWidth = d.startWidth + deltaX;
             if (newWidth > d.minimumWidth) {
                 if (newWidth < d.maximumWidth) {
-                    target.requestedWidth = newWidth;
+                    target.windowedWidth = newWidth;
                 } else {
-                    target.requestedWidth = d.maximumWidth;
+                    target.windowedWidth = d.maximumWidth;
                 }
             } else {
-                target.requestedWidth = d.minimumWidth;
+                target.windowedWidth = d.minimumWidth;
             }
         }
 
         if (d.topBorder) {
             var newTargetY = Math.max(d.startY + deltaY, PanelState.panelHeight); // disallow resizing up past Panel
-            var bottomBorderY = target.requestedY + target.height;
+            var bottomBorderY = target.windowedY + target.height;
             if (bottomBorderY > newTargetY + d.minimumHeight) {
                 if (bottomBorderY < newTargetY + d.maximumHeight) {
-                    target.requestedHeight = bottomBorderY - newTargetY;
+                    target.windowedHeight = bottomBorderY - newTargetY;
                 } else {
-                    target.requestedHeight = d.maximumHeight;
+                    target.windowedHeight = d.maximumHeight;
                 }
             } else {
-                target.requestedHeight = d.minimumHeight;
+                target.windowedHeight = d.minimumHeight;
             }
 
         } else if (d.bottomBorder) {
             var newHeight = d.startHeight + deltaY;
             if (newHeight > d.minimumHeight) {
                 if (newHeight < d.maximumHeight) {
-                    target.requestedHeight = newHeight;
+                    target.windowedHeight = newHeight;
                 } else {
-                    target.requestedHeight = d.maximumHeight;
+                    target.windowedHeight = d.maximumHeight;
                 }
             } else {
-                target.requestedHeight = d.minimumHeight;
+                target.windowedHeight = d.minimumHeight;
             }
         }
     }
@@ -340,13 +341,13 @@
         target: root.target
         onWidthChanged: {
             if (d.moveLeftBorder) {
-                target.requestedX += d.currentWidth - target.width;
+                target.windowedX += d.currentWidth - target.width;
             }
             d.currentWidth = target.width;
         }
         onHeightChanged: {
             if (d.moveTopBorder) {
-                target.requestedY += d.currentHeight - target.height;
+                target.windowedY += d.currentHeight - target.height;
             }
             d.currentHeight = target.height;
         }

=== removed file 'qml/Stages/AbstractStage.qml'
--- qml/Stages/AbstractStage.qml	2016-09-07 08:36:59 +0000
+++ qml/Stages/AbstractStage.qml	1970-01-01 00:00:00 +0000
@@ -1,93 +0,0 @@
-/*
- * Copyright (C) 2015-2016 Canonical, Ltd.
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; version 3.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import QtQuick 2.4
-import Ubuntu.Components 1.3
-import GlobalShortcut 1.0
-import GSettings 1.0
-
-FocusScope {
-    id: root
-
-    // Controls to be set from outside
-    property QtObject applicationManager
-    property QtObject topLevelSurfaceList
-    property bool altTabPressed
-    property url background
-    property bool beingResized
-    property int dragAreaWidth
-    property real dragProgress // How far left the stage has been dragged, used externally by tutorial code
-    property bool interactive
-    property real inverseProgress // This is the progress for left edge drags, in pixels.
-    property bool keepDashRunning: true
-    property real maximizedAppTopMargin
-    property real nativeHeight
-    property real nativeWidth
-    property QtObject orientations
-    property int shellOrientation
-    property int shellOrientationAngle
-    property bool spreadEnabled: true // If false, animations and right edge will be disabled
-    property bool suspended
-     // A Stage should paint a wallpaper etc over its full size but not use the margins for window placement
-    property int leftMargin: 0
-    property alias paintBackground: background.visible
-    property bool oskEnabled: false
-
-    // To be read from outside
-    property var mainApp: null
-    property int mainAppWindowOrientationAngle: 0
-    property bool orientationChangesEnabled
-    property int supportedOrientations: Qt.PortraitOrientation
-                                      | Qt.LandscapeOrientation
-                                      | Qt.InvertedPortraitOrientation
-                                      | Qt.InvertedLandscapeOrientation
-
-    property Item itemConfiningMouseCursor: null
-
-
-    signal stageAboutToBeUnloaded
-    signal itemSnapshotRequested(Item item)
-
-    // Shared code for use in stage implementations
-    GSettings {
-        id: lifecycleExceptions
-        schema.id: "com.canonical.qtmir"
-    }
-
-    function isExemptFromLifecycle(appId) {
-        var shortAppId = appId.split('_')[0];
-        for (var i = 0; i < lifecycleExceptions.lifecycleExemptAppids.length; i++) {
-            if (shortAppId === lifecycleExceptions.lifecycleExemptAppids[i]) {
-                return true;
-            }
-        }
-        return false;
-    }
-
-    Rectangle {
-        id: background
-        color: "#060606"
-        anchors.fill: parent
-    }
-
-    // shared Alt+F4 functionality
-    function closeFocusedDelegate() {} // to be implemented by stages
-
-    GlobalShortcut {
-        shortcut: Qt.AltModifier|Qt.Key_F4
-        onTriggered: closeFocusedDelegate()
-    }
-}

=== removed file 'qml/Stages/DesktopSpread.qml'
--- qml/Stages/DesktopSpread.qml	2016-06-15 14:08:18 +0000
+++ qml/Stages/DesktopSpread.qml	1970-01-01 00:00:00 +0000
@@ -1,576 +0,0 @@
-/*
- * Copyright (C) 2015-2016 Canonical, Ltd.
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; version 3.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import QtQuick 2.4
-import QtQuick.Layouts 1.1
-import Ubuntu.Components 1.3
-import Ubuntu.Gestures 0.1
-import Unity.Application 0.1
-import "../Components"
-import Utils 0.1
-
-FocusScope {
-    id: root
-
-    property bool altTabPressed: false
-    property Item workspace: null
-
-    readonly property alias ready: blurLayer.ready
-    readonly property alias highlightedIndex: spreadRepeater.highlightedIndex
-
-    signal playFocusAnimation(int index)
-
-    function show() {
-        spreadContainer.animateIn = true;
-        root.state = "altTab";
-    }
-
-    onFocusChanged: {
-        // When the spread comes active, we want to keep focus to the input handler below
-        // Make sure nothing inside the ApplicationWindow grabs our focus!
-        if (focus) {
-            forceActiveFocus();
-        }
-    }
-
-    Keys.onPressed: {
-        switch (event.key) {
-        case Qt.Key_Left:
-        case Qt.Key_Backtab:
-            selectPrevious(event.isAutoRepeat)
-            event.accepted = true;
-            break;
-        case Qt.Key_Right:
-        case Qt.Key_Tab:
-            selectNext(event.isAutoRepeat)
-            event.accepted = true;
-            break;
-        case Qt.Key_Escape:
-            spreadRepeater.highlightedIndex = -1
-            // Falling through intentionally
-        case Qt.Key_Enter:
-        case Qt.Key_Return:
-        case Qt.Key_Space:
-            root.state = ""
-            event.accepted = true;
-        }
-    }
-
-    function selectNext(isAutoRepeat) {
-        if (isAutoRepeat && spreadRepeater.highlightedIndex >= topLevelSurfaceList.count -1) {
-            return; // AutoRepeat is not allowed to wrap around
-        }
-
-        spreadRepeater.highlightedIndex = (spreadRepeater.highlightedIndex + 1) % topLevelSurfaceList.count;
-        var newContentX = ((spreadFlickable.contentWidth) / (topLevelSurfaceList.count + 1)) * Math.max(0, Math.min(topLevelSurfaceList.count - 5, spreadRepeater.highlightedIndex - 3));
-        if (spreadFlickable.contentX < newContentX || spreadRepeater.highlightedIndex == 0) {
-            spreadFlickable.snapTo(newContentX)
-        }
-    }
-
-    function selectPrevious(isAutoRepeat) {
-        if (isAutoRepeat && spreadRepeater.highlightedIndex == 0) {
-            return; // AutoRepeat is not allowed to wrap around
-        }
-
-        var newIndex = spreadRepeater.highlightedIndex - 1 >= 0 ? spreadRepeater.highlightedIndex - 1 : topLevelSurfaceList.count - 1;
-        spreadRepeater.highlightedIndex = newIndex;
-        var newContentX = ((spreadFlickable.contentWidth) / (topLevelSurfaceList.count + 1)) * Math.max(0, Math.min(topLevelSurfaceList.count - 5, spreadRepeater.highlightedIndex - 1));
-        if (spreadFlickable.contentX > newContentX || newIndex == topLevelSurfaceList.count -1) {
-            spreadFlickable.snapTo(newContentX)
-        }
-    }
-
-    function focusSelected() {
-        if (spreadRepeater.highlightedIndex != -1) {
-            if (spreadContainer.visible) {
-                root.playFocusAnimation(spreadRepeater.highlightedIndex)
-            }
-            var surface = topLevelSurfaceList.surfaceAt(spreadRepeater.highlightedIndex);
-            surface.requestFocus();
-        }
-    }
-
-    function cancel() {
-        spreadRepeater.highlightedIndex = -1;
-        state = ""
-    }
-
-    BlurLayer {
-        id: blurLayer
-        anchors.fill: parent
-        source: root.workspace
-        visible: false
-    }
-
-    Rectangle {
-        id: spreadBackground
-        anchors.fill: parent
-        color: "#B2000000"
-        visible: false
-        opacity: visible ? 1 : 0
-        Behavior on opacity {
-            UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration }
-        }
-    }
-
-    MouseArea {
-        id: eventEater
-        anchors.fill: parent
-        visible: spreadBackground.visible
-        enabled: visible
-        acceptedButtons: Qt.AllButtons
-        onWheel: wheel.accepted = true;
-    }
-
-    Item {
-        id: spreadContainer
-        objectName: "spreadContainer"
-        anchors.fill: parent
-        visible: false
-
-        property bool animateIn: false
-
-        Repeater {
-            id: spreadRepeater
-            objectName: "spreadRepeater"
-            model: topLevelSurfaceList
-
-            property int highlightedIndex: -1
-            property int closingIndex: -1
-
-            function indexOf(delegateItem) {
-                for (var i = 0; i < spreadRepeater.count; i++) {
-                    if (spreadRepeater.itemAt(i) === delegateItem) {
-                        return i;
-                    }
-                }
-                return -1;
-            }
-
-            delegate: Item {
-                id: spreadDelegate
-                objectName: "spreadDelegate"
-                width: units.gu(20)
-                height: units.gu(20)
-
-                property real angle: 0
-                property real itemScale: 1
-                property int itemScaleOriginX: 0
-                property int itemScaleOriginY: 0
-
-                readonly property string windowTitle: clippedSpreadDelegate.window.title
-
-                Behavior on x {
-                    id: closeBehavior
-                    enabled: spreadRepeater.closingIndex >= 0
-                    UbuntuNumberAnimation {
-                        onRunningChanged: if (!running) spreadRepeater.closingIndex = -1
-                    }
-                }
-
-                DesktopSpreadDelegate {
-                    id: clippedSpreadDelegate
-                    objectName: "clippedSpreadDelegate"
-                    anchors.left: parent.left
-                    anchors.top: parent.top
-                    application: model.application
-                    surface: model.surface
-                    width: spreadMaths.spreadHeight
-                    height: spreadMaths.spreadHeight
-
-                    transform: [
-                        Scale {
-                            origin.x: itemScaleOriginX
-                            origin.y: itemScaleOriginY
-                            xScale: itemScale
-                            yScale: itemScale
-                        },
-                        Rotation {
-                            origin { x: 0; y: (clippedSpreadDelegate.height - (clippedSpreadDelegate.height * itemScale / 2)) }
-                            axis { x: 0; y: 1; z: 0 }
-                            angle: spreadDelegate.angle
-                        }
-                    ]
-
-                    MouseArea {
-                        id: spreadSelectArea
-                        anchors.fill: parent
-                        anchors.margins: -units.gu(2)
-                        enabled: false
-                        onClicked: {
-                            spreadRepeater.highlightedIndex = index;
-                            root.state = "";
-                        }
-                    }
-                }
-
-                SpreadMaths {
-                    id: spreadMaths
-                    flickable: spreadFlickable
-                    itemIndex: index
-                    totalItems: Math.max(6, topLevelSurfaceList.count)
-                    sceneHeight: root.height
-                    itemHeight: spreadDelegate.height
-                }
-
-                states: [
-                    State {
-                        name: "altTab"; when: root.state == "altTab" && spreadContainer.visible
-                        PropertyChanges {
-                            target: spreadDelegate
-                            x: spreadMaths.animatedX
-                            y: spreadMaths.animatedY + (spreadDelegate.height - clippedSpreadDelegate.height) - units.gu(2)
-                            width: spreadMaths.spreadHeight
-                            height: spreadMaths.sceneHeight
-                            angle: spreadMaths.animatedAngle
-                            itemScale: spreadMaths.scale
-                            itemScaleOriginY: clippedSpreadDelegate.height / 2;
-                            z: index
-                            visible: spreadMaths.itemVisible
-                        }
-                        PropertyChanges {
-                            target: clippedSpreadDelegate
-                            highlightShown: index == spreadRepeater.highlightedIndex
-                            state: "transformed"
-                            shadowOpacity: spreadMaths.shadowOpacity
-                            anchors.topMargin: units.gu(2)
-                        }
-                        PropertyChanges {
-                            target: tileInfo
-                            visible: true
-                            opacity: spreadMaths.tileInfoOpacity
-                        }
-                        PropertyChanges {
-                            target: spreadSelectArea
-                            enabled: true
-                        }
-                    }
-                ]
-                transitions: [
-                    Transition {
-                        from: ""
-                        to: "altTab"
-                        SequentialAnimation {
-                            ParallelAnimation {
-                                PropertyAction { target: spreadDelegate; properties: "y,height,width,angle,z,itemScale,itemScaleOriginY,visible" }
-                                PropertyAction { target: clippedSpreadDelegate; properties: "anchors.topMargin" }
-                                PropertyAnimation {
-                                    target: spreadDelegate; properties: "x"
-                                    from: root.width
-                                    duration: spreadContainer.animateIn ? UbuntuAnimation.FastDuration :0
-                                    easing: UbuntuAnimation.StandardEasing
-                                }
-                                UbuntuNumberAnimation { target: clippedSpreadDelegate; property: "shadowOpacity"; from: 0; to: spreadMaths.shadowOpacity; duration: spreadContainer.animateIn ? UbuntuAnimation.FastDuration : 0 }
-                                UbuntuNumberAnimation { target: tileInfo; property: "opacity"; from: 0; to: spreadMaths.tileInfoOpacity; duration: spreadContainer.animateIn ? UbuntuAnimation.FastDuration : 0 }
-                            }
-                            PropertyAction { target: spreadSelectArea; property: "enabled" }
-                        }
-                    }
-                ]
-
-                MouseArea {
-                    id: tileInfo
-                    objectName: "tileInfo"
-                    anchors {
-                        left: parent.left
-                        top: clippedSpreadDelegate.bottom
-                        topMargin: ((spreadMaths.sceneHeight - spreadDelegate.y) - clippedSpreadDelegate.height) * 0.2
-                    }
-                    property int nextItemX: spreadRepeater.count > index + 1 ? spreadRepeater.itemAt(index + 1).x : spreadDelegate.x + units.gu(30)
-                    width: Math.min(units.gu(30), nextItemX - spreadDelegate.x)
-                    height: titleInfoColumn.height
-                    visible: false
-                    hoverEnabled: true
-
-                    onContainsMouseChanged: {
-                        if (containsMouse) {
-                            spreadRepeater.highlightedIndex = index
-                        }
-                    }
-
-                    onClicked: {
-                        root.state = ""
-                    }
-
-                    ColumnLayout {
-                        id: titleInfoColumn
-                        anchors { left: parent.left; top: parent.top; right: parent.right }
-                        spacing: units.gu(1)
-
-                        UbuntuShapeForItem {
-                            Layout.preferredHeight: Math.min(units.gu(6), root.height * .05)
-                            Layout.preferredWidth: height * 8 / 7.6
-                            image: Image {
-                                anchors.fill: parent
-                                source: model.application.icon
-                                Rectangle {
-                                    anchors.fill: parent
-                                    color: "black"
-                                    opacity: clippedSpreadDelegate.highlightShown ? 0 : .1
-                                    Behavior on opacity {
-                                        UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration }
-                                    }
-                                }
-                            }
-                        }
-                        Label {
-                            Layout.fillWidth: true
-                            Layout.preferredHeight: units.gu(6)
-                            text: model.application ? model.application.name : spreadDelegate.windowTitle
-                            wrapMode: Text.WordWrap
-                            elide: Text.ElideRight
-                            maximumLineCount: 2
-                        }
-                    }
-                }
-
-                Image {
-                    id: closeImage
-                    anchors { left: parent.left; top: parent.top; leftMargin: -height / 2; topMargin: -height / 2 + spreadMaths.closeIconOffset + units.gu(2) }
-                    source: "graphics/window-close.svg"
-                    readonly property var mousePos: hoverMouseArea.mapToItem(spreadDelegate, hoverMouseArea.mouseX, hoverMouseArea.mouseY)
-                    visible: index == spreadRepeater.highlightedIndex
-                             && mousePos.y < (clippedSpreadDelegate.height / 3)
-                             && mousePos.y > -units.gu(4)
-                             && mousePos.x > -units.gu(4)
-                             && mousePos.x < (clippedSpreadDelegate.width * 2 / 3)
-                    height: units.gu(1.5)
-                    width: height
-                    sourceSize.width: width
-                    sourceSize.height: height
-
-                    MouseArea {
-                        id: closeMouseArea
-                        objectName: "closeMouseArea"
-                        anchors.fill: closeImage
-                        anchors.margins: -units.gu(2)
-                        onClicked: {
-                            spreadRepeater.closingIndex = index;
-                            model.surface.close();
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-
-    MouseArea {
-        id: hoverMouseArea
-        objectName: "hoverMouseArea"
-        anchors.fill: spreadContainer
-        propagateComposedEvents: true
-        hoverEnabled: true
-        enabled: false
-        visible: enabled
-
-        property int scrollAreaWidth: root.width / 3
-        property bool progressiveScrollingEnabled: false
-
-        onMouseXChanged: {
-            mouse.accepted = false
-
-            if (hoverMouseArea.pressed) {
-                return;
-            }
-
-            // Find the hovered item and mark it active
-            var mapped = mapToItem(spreadContainer, hoverMouseArea.mouseX, hoverMouseArea.mouseY)
-            var itemUnder = spreadContainer.childAt(mapped.x, mapped.y)
-            if (itemUnder) {
-                mapped = mapToItem(itemUnder, hoverMouseArea.mouseX, hoverMouseArea.mouseY)
-                var delegateChild = itemUnder.childAt(mapped.x, mapped.y)
-                if (delegateChild && (delegateChild.objectName === "clippedSpreadDelegate" || delegateChild.objectName === "tileInfo")) {
-                    spreadRepeater.highlightedIndex = spreadRepeater.indexOf(itemUnder)
-                }
-            }
-
-            if (spreadFlickable.contentWidth > spreadFlickable.minContentWidth) {
-                var margins = spreadFlickable.width * 0.05;
-
-                if (!progressiveScrollingEnabled && mouseX < spreadFlickable.width - scrollAreaWidth) {
-                    progressiveScrollingEnabled = true
-                }
-
-                // do we need to scroll?
-                if (mouseX < scrollAreaWidth + margins) {
-                    var progress = Math.min(1, (scrollAreaWidth + margins - mouseX) / (scrollAreaWidth - margins));
-                    var contentX = (1 - progress) * (spreadFlickable.contentWidth - spreadFlickable.width)
-                    spreadFlickable.contentX = Math.max(0, Math.min(spreadFlickable.contentX, contentX))
-                }
-                if (mouseX > spreadFlickable.width - scrollAreaWidth && progressiveScrollingEnabled) {
-                    var progress = Math.min(1, (mouseX - (spreadFlickable.width - scrollAreaWidth)) / (scrollAreaWidth - margins))
-                    var contentX = progress * (spreadFlickable.contentWidth - spreadFlickable.width)
-                    spreadFlickable.contentX = Math.min(spreadFlickable.contentWidth - spreadFlickable.width, Math.max(spreadFlickable.contentX, contentX))
-                }
-            }
-        }
-        onPressed: mouse.accepted = false
-    }
-
-    FloatingFlickable {
-        id: spreadFlickable
-        objectName: "spreadFlickable"
-        anchors.fill: parent
-        property int minContentWidth: 6 * Math.min(height / 4, width / 5)
-        contentWidth: Math.max(6, topLevelSurfaceList.count) * Math.min(height / 4, width / 5)
-        enabled: false
-
-        function snapTo(contentX) {
-            snapAnimation.stop();
-            snapAnimation.to = contentX
-            snapAnimation.start();
-        }
-
-        UbuntuNumberAnimation {
-            id: snapAnimation
-            target: spreadFlickable
-            property: "contentX"
-        }
-    }
-
-    Item {
-        id: workspaceSelector
-        anchors {
-            left: parent.left
-            top: parent.top
-            right: parent.right
-            topMargin: units.gu(3.5)
-        }
-        height: root.height * 0.25
-        visible: false
-
-        RowLayout {
-            anchors.fill: parent
-            spacing: units.gu(1)
-            Item { Layout.fillWidth: true }
-            Repeater {
-                model: 1 // TODO: will be a workspacemodel in the future
-                Item {
-                    Layout.fillHeight: true
-                    Layout.preferredWidth: ((height - units.gu(6)) * root.width / root.height)
-                    Image {
-                        source: root.background
-                        anchors {
-                            left: parent.left
-                            right: parent.right
-                            verticalCenter: parent.verticalCenter
-                        }
-                        height: parent.height * 0.75
-
-                        ShaderEffect {
-                            anchors.fill: parent
-
-                            property var source: ShaderEffectSource {
-                                id: shaderEffectSource
-                                sourceItem: root.workspace
-                            }
-
-                            fragmentShader: "
-                                varying highp vec2 qt_TexCoord0;
-                                uniform sampler2D source;
-                                void main(void)
-                                {
-                                    highp vec4 sourceColor = texture2D(source, qt_TexCoord0);
-                                    gl_FragColor = sourceColor;
-                                }"
-                        }
-                    }
-
-                    // TODO: This is the bar for the currently selected workspace
-                    // Enable this once the workspace stuff is implemented
-    //                    Rectangle {
-    //                        anchors { left: parent.left; right: parent.right; bottom: parent.bottom }
-    //                        height: units.dp(2)
-    //                        color: theme.palette.normal.focus
-    //                        visible: index == 0 // TODO: should be active workspace index
-    //                    }
-                }
-
-            }
-            // TODO: This is the "new workspace" button. Enable this once workspaces are implemented
-    //            Item {
-    //                Layout.fillHeight: true
-    //                Layout.preferredWidth: ((height - units.gu(6)) * root.width / root.height)
-    //                Rectangle {
-    //                    anchors {
-    //                        left: parent.left
-    //                        right: parent.right
-    //                        verticalCenter: parent.verticalCenter
-    //                    }
-    //                    height: parent.height * 0.75
-    //                    color: "#22ffffff"
-
-    //                    Label {
-    //                        anchors.centerIn: parent
-    //                        font.pixelSize: parent.height / 2
-    //                        text: "+"
-    //                    }
-    //                }
-    //            }
-            Item { Layout.fillWidth: true }
-        }
-    }
-
-    Label {
-        id: currentSelectedLabel
-        anchors { bottom: parent.bottom; bottomMargin: root.height * 0.625; horizontalCenter: parent.horizontalCenter }
-        text: spreadRepeater.highlightedIndex >= 0 ? spreadRepeater.itemAt(spreadRepeater.highlightedIndex).windowTitle: ""
-        visible: false
-        fontSize: "large"
-    }
-
-    states: [
-        State {
-            name: "altTab"; when: root.altTabPressed
-            PropertyChanges { target: blurLayer; saturation: 0.8; blurRadius: 60; visible: true }
-            PropertyChanges { target: workspaceSelector; visible: true }
-            PropertyChanges { target: spreadContainer; visible: true }
-            PropertyChanges { target: spreadFlickable; enabled: spreadFlickable.contentWidth > spreadFlickable.minContentWidth }
-            PropertyChanges { target: currentSelectedLabel; visible: true }
-            PropertyChanges { target: spreadBackground; visible: true }
-            PropertyChanges { target: hoverMouseArea; enabled: true }
-        }
-    ]
-    transitions: [
-        Transition {
-            from: "*"
-            to: "altTab"
-            SequentialAnimation {
-                PropertyAction { target: spreadRepeater; property: "highlightedIndex"; value: Math.min(topLevelSurfaceList.count - 1, 1) }
-                PauseAnimation { duration: spreadContainer.animateIn ? 0 : 140 }
-                PropertyAction { target: workspaceSelector; property: "visible" }
-                PropertyAction { target: spreadContainer; property: "visible" }
-                ParallelAnimation {
-                    UbuntuNumberAnimation { target: blurLayer; properties: "saturation,blurRadius"; duration: UbuntuAnimation.SnapDuration }
-                    PropertyAction { target: spreadFlickable; property: "visible" }
-                    PropertyAction { targets: [currentSelectedLabel,spreadBackground]; property: "visible" }
-                    PropertyAction { target: spreadFlickable; property: "contentX"; value: 0 }
-                }
-                PropertyAction { target: hoverMouseArea; properties: "enabled,progressiveScrollingEnabled"; value: false }
-            }
-        },
-        Transition {
-            from: "*"
-            to: "*"
-            PropertyAnimation { property: "opacity" }
-            ScriptAction { script: { root.focusSelected() } }
-            PropertyAction { target: spreadRepeater; property: "highlightedIndex"; value: -1 }
-            PropertyAction { target: spreadContainer; property: "animateIn"; value: false }
-        }
-    ]
-}

=== removed file 'qml/Stages/DesktopSpreadDelegate.qml'
--- qml/Stages/DesktopSpreadDelegate.qml	2016-05-17 20:46:51 +0000
+++ qml/Stages/DesktopSpreadDelegate.qml	1970-01-01 00:00:00 +0000
@@ -1,126 +0,0 @@
-/*
- * Copyright (C) 2014-2016 Canonical, Ltd.
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; version 3.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *
- * Authors: Michael Zanetti <[e-mail]>
- */
-
-import QtQuick 2.4
-import Ubuntu.Components 1.3
-import Unity.Application 0.1
-
-Item {
-    id: root
-
-    property alias window: applicationWindow
-    property alias application: applicationWindow.application
-    property alias surface: applicationWindow.surface
-
-    property bool highlightShown: false
-    property real shadowOpacity: 1
-
-    property int windowWidth: surface ? surface.size.width : 0
-    property int windowHeight: surface ? surface.size.height : 0
-
-    state: "normal"
-    states: [
-        State {
-            name: "normal"
-            PropertyChanges {
-                target: root
-                width: windowWidth
-                height: windowHeight
-            }
-        },
-        State {
-            name: "transformed"
-            PropertyChanges {
-                target: applicationWindow