Unity 8

Merge lp:~lukas-kde/unity8/hideCursorFullscreen into lp:unity8

hideCursorFullscreen
Merge into trunk

Proposed by Lukáš Tinkl on 2016-09-01

Status:	Superseded
Proposed branch:	lp:~lukas-kde/unity8/hideCursorFullscreen
Merge into:	lp:unity8
Diff against target:	12366 lines (+3516/-6154) 63 files modified debian/changelog (+5/-3) debian/unity8.install (+1/-1) plugins/Ubuntu/Gestures/TouchGate.cpp (+4/-1) plugins/WindowManager/TopLevelSurfaceList.cpp (+0/-5) qml/CMakeLists.txt (+1/-1) qml/Components/EdgeBarrier.qml (+2/-0) qml/Components/FloatingFlickable.qml (+3/-0) qml/Greeter/LoginAreaContainer.qml (+1/-1) qml/Notifications/Notification.qml (+1/-1) qml/Rotation/RotationStates.qml (+0/-6) qml/Shell.qml (+64/-167) qml/Stage/ApplicationWindow.qml (+13/-37) qml/Stage/DecoratedWindow.qml (+123/-31) qml/Stage/MoveHandler.qml (+2/-2) qml/Stage/PromptSurfaceAnimations.qml (+2/-3) qml/Stage/Spread/BezierCurve.qml (+45/-0) qml/Stage/Spread/KeySpline.js (+66/-0) qml/Stage/Spread/MathUtils.js (+95/-0) qml/Stage/Spread/OpacityMask.qml (+82/-0) qml/Stage/Spread/Spread.qml (+162/-0) qml/Stage/Spread/SpreadDelegateInputArea.qml (+183/-0) qml/Stage/Spread/SpreadMaths.qml (+78/-0) qml/Stage/Spread/StagedRightEdgeMaths.qml (+174/-0) qml/Stage/Spread/WindowedRightEdgeMaths.qml (+81/-0) qml/Stage/Spread/cubic-bezier.js (+39/-0) qml/Stage/Stage.qml (+1234/-185) qml/Stage/StageMaths.qml (+79/-0) qml/Stage/SurfaceContainer.qml (+5/-52) qml/Stage/TopLevelSurfaceRepeater.qml (+9/-0) qml/Stage/WindowDecoration.qml (+1/-1) qml/Stage/WindowInfoItem.qml (+53/-0) qml/Stage/WindowResizeArea.qml (+33/-32) qml/Stages/AbstractStage.qml (+0/-93) qml/Stages/DesktopSpread.qml (+0/-576) qml/Stages/DesktopSpreadDelegate.qml (+0/-126) qml/Stages/PhoneStage.qml (+0/-806) qml/Stages/SpreadDelegate.qml (+0/-424) qml/Stages/SpreadMaths.qml (+0/-164) qml/Stages/TabletStage.qml (+0/-1201) qml/Stages/TransformedSpreadDelegate.qml (+0/-391) qml/Stages/TransformedTabletSpreadDelegate.qml (+0/-437) qml/Tutorial/TutorialRight.qml (+1/-1) tests/mocks/Cursor/Cursor.qml (+2/-0) tests/mocks/Unity/Application/ApplicationInfo.cpp (+2/-2) tests/mocks/Unity/Application/ApplicationManager.cpp (+2/-0) tests/mocks/Unity/Application/MirSurface.cpp (+1/-0) tests/mocks/Unity/Application/MirSurfaceItem.cpp (+13/-0) tests/mocks/Unity/Application/MirSurfaceListModel.cpp (+0/-1) tests/mocks/Unity/Application/VirtualKeyboard.cpp (+9/-7) tests/mocks/Unity/Application/resources/MirSurfaceItem.qml (+2/-5) tests/qmltests/CMakeLists.txt (+8/-8) tests/qmltests/Stage/tst_ApplicationWindow.qml (+1/-1) tests/qmltests/Stage/tst_DecoratedWindow.qml (+232/-0) tests/qmltests/Stage/tst_DesktopStage.qml (+29/-71) tests/qmltests/Stage/tst_PhoneStage.qml (+152/-219) tests/qmltests/Stage/tst_Splash.qml (+1/-1) tests/qmltests/Stage/tst_SurfaceContainer.qml (+2/-2) tests/qmltests/Stage/tst_TabletStage.qml (+104/-241) tests/qmltests/Stage/tst_WindowResizeArea.qml (+40/-36) tests/qmltests/Stages/tst_SpreadDelegate.qml (+0/-423) tests/qmltests/tst_OrientedShell.qml (+38/-198) tests/qmltests/tst_Shell.qml (+227/-180) tests/qmltests/tst_ShellWithPin.qml (+9/-11)
To merge this branch:	bzr merge lp:~lukas-kde/unity8/hideCursorFullscreen
Related bugs:	Link a bug report

Reviewer	Review Type	Date Requested	Status
Albert Astals Cid (community)		2016-09-01	Approve on 2016-09-30
Unity8 CI Bot	continuous-integration		Needs Fixing on 2016-09-29
Review via email: mp+304621@code.launchpad.net

This proposal has been superseded by a proposal from 2016-10-03.

Commit message

Hide the cursor for fullscreen apps after 3 seconds of inactivity

Description of the change

Hide the cursor for fullscreen apps after 3 seconds of inactivity.

The cursor is revealed again when the mouse is moved.

To test, launch the webbrowser app, navigate to youtube, play your favorite video in fullscreen

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

* 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, following unity7 behavior

lp:~lukas-kde/unity8/hideCursorFullscreen updated on 2016-09-01

2606. By Lukáš Tinkl on 2016-09-01: fade in/out nicely

Revision history for this message

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-09-01:

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

review: Needs Fixing (continuous-integration)

Revision history for this message

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-09-01:

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

review: Needs Fixing (continuous-integration)

lp:~lukas-kde/unity8/hideCursorFullscreen updated on 2016-09-09

2607. By Lukáš Tinkl on 2016-09-09: run only when cursor visible

Revision history for this message

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-09-09:

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

review: Needs Fixing (continuous-integration)

Revision history for this message

Albert Astals Cid (aacid) wrote on 2016-09-28:

Do we need a test for this?

Is there a bug/Design card/something where it says this is a wanted feature?

review: Needs Information

lp:~lukas-kde/unity8/hideCursorFullscreen updated on 2016-09-29

2608. By Lukáš Tinkl on 2016-09-29: merge trunk

Revision history for this message

Lukáš Tinkl (lukas-kde) wrote on 2016-09-29:

> Do we need a test for this?

I'll try to think of something, yeah

> Is there a bug/Design card/something where it says this is a wanted feature?

Well it's just filling the gaps for missing features compared to u7; I'm asking Paty for an informal UX approval as I'm writing this

lp:~lukas-kde/unity8/hideCursorFullscreen updated on 2016-09-29

2609. By Lukáš Tinkl on 2016-09-29: add a test

Revision history for this message

Lukáš Tinkl (lukas-kde) wrote on 2016-09-29:

Added the test, Paty's response:

Paty Davila, [29.09.16 13:28]
so go ahead, I think it's nice to have : )

Paty Davila, [29.09.16 13:29]
i don't see anything else that I could question or object

Revision history for this message

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-09-29:

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

review: Needs Fixing (continuous-integration)

lp:~lukas-kde/unity8/hideCursorFullscreen updated on 2016-09-29

2610. By Lukáš Tinkl on 2016-09-29

drop the repeat, not needed as "running" is a binding

adjust the test to prove that

Revision history for this message

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-09-29:

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

review: Approve (continuous-integration)

Revision history for this message

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-09-29:

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

review: Needs Fixing (continuous-integration)

Revision history for this message

Albert Astals Cid (aacid) wrote on 2016-09-30:

* 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.
jenkins failing on its usual java stuff

review: Approve

lp:~lukas-kde/unity8/hideCursorFullscreen updated on 2016-10-03

2611. By Lukáš Tinkl on 2016-10-03: merge unified-stages

Unmerged revisions

2604. By Launchpad Translations on behalf of unity-team on 2016-09-01: Launchpad automatic translations update.

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk

The diff has been truncated for viewing.

Subscribers

People subscribed via source and target branches

to all changes:

Lukáš Tinkl

Mohammad Rakibul Hasan

Unity Team

 === modified file 'debian/changelog'
 --- debian/changelog	2016-09-22 07:46:57 +0000
 +++ debian/changelog	2016-10-03 11:16:14 +0000
@@ -1,4 +1,4 @@
--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:
@@ -46,12 +46,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
@@ -73,7 +75,7 @@
    * Update look of infographic a bit
    * Make infographic bubbles white even on the default wallpaper.
-- -- Michał Sawicz <michal.sawicz@canonical.com>  Thu, 22 Sep 2016 07:46:57 +0000
++ -- Michał Sawicz <michal.sawicz@canonical.com>  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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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
 === modified file 'qml/Greeter/LoginAreaContainer.qml'
 --- qml/Greeter/LoginAreaContainer.qml	2016-06-14 17:34:35 +0000
 +++ qml/Greeter/LoginAreaContainer.qml	2016-10-03 11:16:14 +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/Notifications/Notification.qml'
 --- qml/Notifications/Notification.qml	2016-08-19 13:27:05 +0000
 +++ qml/Notifications/Notification.qml	2016-10-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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,19 +691,27 @@
          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)
+         }
+     }
++    Timer {
++        id: cursorHidingTimer
++        interval: 3000
++        running: panel.focusedSurfaceIsFullscreen && cursor.opacity > 0
++        onTriggered: cursor.opacity = 0;
++    }
++
      Cursor {
          id: cursor
++        objectName: "cursor"
          visible: shell.hasMouse
          z: itemGrabber.z + 1
          topBoundaryOffset: panel.panelHeight
--        confiningItem: applicationsDisplayLoader.item ? applicationsDisplayLoader.item.itemConfiningMouseCursor : null
++        confiningItem: stage.itemConfiningMouseCursor
          property bool mouseNeverMoved: true
          Binding {
@@ -828,10 +725,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 +738,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);
+             }
@@ -885,6 +780,8 @@
              mouseNeverMoved = false;
              cursor.opacity = 1;
+         }
++
++        Behavior on opacity { UbuntuNumberAnimation {} }
+     }
      // non-visual object
 === 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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +0000
@@ -0,0 +1,66 @@
++/** MIT License
++ *
++ * KeySpline - use bezier curve for transition easing function
++ * Copyright (c) 2012 Gaetan Renaudeau <renaudeau.gaetan@gmail.com>
++ *
++ * 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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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-03 11:16:14 +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 <michael.zanetti@canonical.com>
-- */
--
--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
--                itemScale: Math.max(root.width / root.windowWidth, root.height / root.windowHeight)
--                interactive: false
--            }
--            PropertyChanges {
--                target: clipper
--                clip: true
--            }
--        }
--    ]
--
--    scale: highlightShown ? 1.025 : 1
--    Behavior on scale {
--        UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration }
--    }
--
--    BorderImage {
--        anchors {
--            fill: root
--            margins: -units.gu(2)
--        }
--        source: "graphics/dropshadow2gu.sci"
--        opacity: root.shadowOpacity * .3
--    }
--
--    Rectangle {
--        id: selectionHighlight
--        anchors.fill: parent
--        anchors.margins: -units.gu(1)
--        color: "white"
--        opacity: highlightShown ? 0.55 : 0
--        antialiasing: true
--    }
--
--    Rectangle {
--        anchors { left: selectionHighlight.left; right: selectionHighlight.right; bottom: selectionHighlight.bottom; }
--        height: units.dp(2)
--        color: theme.palette.normal.focus
--        visible: root.highlightShown
--        antialiasing: true
--    }
--
--    Item {
--        id: clipper
--        anchors.fill: parent
--
--        ApplicationWindow {
--            id: applicationWindow
--            objectName: application ? "appWindow_" + application.appId : "appWindow_null"
--            anchors.top: parent.top
--            anchors.topMargin: 0
--            anchors.left: parent.left
--            width: root.windowWidth
--            height: root.windowHeight
--            interactive: false
--            resizeSurface: false
--            focus: false
--
--            property real itemScale: 1
--            transform: [