WorkspaceThumbnails: show attached modal dialogs togheter with their parents

The window clones in the central part of the overview are showing modal
dialogs now, and this creates an inconsistency if the thumbnail doesn't too.
Code is intentionally similar in the two places.

https://bugzilla.gnome.org/show_bug.cgi?id=650843

NEWS

@@ -1,3 +1,58 @@
+3.7.90
+======
+* Let GNOME Shell work on EGL and GLES2 [Neil; #693225, #693438, #693339]
+* Implement middle-click paste [Jasper; #645019]
+* Fix top bar transition between session modes [Rui; #692966]
+* Trigger the message tray with downward pressure [Jasper; #677215]
+* Don't ask for a password on shutdown [Adel; #693385]
+* Add a context menu to the message tray [Adel; #691035, #693887]
+* Use unicode formatting in the date menu [Matthias; #689251]
+* Use proper ellipsis instead of three dots [Jeremy; #689542]
+* Tweak screen shield animation [Giovanni; #691964]
+* Always hide the OSK when showing the message tray [Florian; #662687]
+* Support sound in notifications [Giovanni; #642831]
+* Place application popup menus above chrome [Jasper; #633620]
+* Hide overview elements while searching [Cosimo; #682050]
+* Implement updated IBus candidate popup designs [Rui; #691902]
+* Add support for enable-animations preference [Cosimo; #655746]
+* Don't always show the message tray in the overview [Cosimo; #693987]
+* Improve arrangement of window previews [Adel; #690313]
+* Remove builtin settings provider [Giovanni; #690824]
+* Minimize fullscreen windows when they end up in the background [Adel; #693991]
+* Add context menu to the background actor [Jasper; #681540]
+* Handle backgrounds in the shell, improve startup animation [Ray; #682429]
+* Hide universal access menu when not needed [Giovanni; #681528]
+* Implement updated app picker designs [Florian; #694192]
+* Improve login manager -> session transition [Ray; #694062]
+* Don't use a grid layout in window picker [Adel; #694210]
+* Use scroll wheel for workspace switching rather than zoom [Florian; #686639]
+* Misc bug fixes and cleanups: [Jasper, Florian, Debarshi, Adel, Matthias,
+  Giovanni, Daiki, Rico, Bastien, Cosimo, Ray, Allan, Antonio; #693284,
+  #692680, #691746, #693303, #693162, #693161, #693522, #693385, #691715,
+  #688915, #689106, #682429, #693570, #693737, #693458, #692845, 693836,
+  #681540, #679925, #688227, #692773, #693909, #683288, #693854, #693746,
+  #693931, #693924, #693940, #693970, #693935, #693937, #693974, #693936,
+  #693975, #693822, #694030, #685849, #694052, #694035, #694038, #694079,
+  #694064, #681735, #694100, #694057, #694070, #693572, #693896, #686984,
+  #694123, #694125, #693756, #693757, #687556, #694215, 694062, #694227,
+  #694240, #694234, #694264, 694276, 694282, #694241, #689394, #694202,
+  #694265, #694289, #691806, #694290, #694296]
+
+Contributors:
+  Jeremy Bicha, Giovanni Campagna, Cosimo Cecchi, Matthias Clasen, Allan Day,
+  António Fernandes, Adel Gadllah, Rui Matos, Florian Müllner, Bastien Nocera,
+  Debarshi Ray, Neil Roberts, Jasper St. Pierre, Ray Strode, Rico Tzschichholz,
+  Daiki Ueno
+
+Translations:
+  Yasumichi Akahoshi [ja], Yoji TOYODA [ja], Dušan Kazik [sk],
+  Wouter Bolsterlee [nl], Matej Urbančič [sl], Gheyret Kenji [ug],
+  Ivaylo Valkov [bg], Daniel Korostil [uk], Gheyret Kenji [ug],
+  Daniel Mustieles [es], Anish A [ml], Gil Forcada [ca],
+  Carles Ferrando [ca@valencia], Мирослав Николић [sr, sr@latin],
+  Aurimas Černius [lt], Rafael Ferreira [pt_BR], Fran Diéguez [gl],
+  Piotr Drąg [pl], Luca Ferretti [it], A S Alam [pa]
+
 3.7.5
 =====
 * MessageTray: pass keyboard events to tray icons [Giovanni; #687425]

configure.ac

@@ -1,5 +1,5 @@
 AC_PREREQ(2.63)
-AC_INIT([gnome-shell],[3.7.5],[https://bugzilla.gnome.org/enter_bug.cgi?product=gnome-shell],[gnome-shell])
+AC_INIT([gnome-shell],[3.7.90],[https://bugzilla.gnome.org/enter_bug.cgi?product=gnome-shell],[gnome-shell])
 
 AC_CONFIG_HEADERS([config.h])
 AC_CONFIG_SRCDIR([src/shell-global.c])
@@ -53,7 +53,7 @@ if $PKG_CONFIG --exists gstreamer-1.0 '>=' $GSTREAMER_MIN_VERSION ; then
    AC_MSG_RESULT(yes)
    build_recorder=true
    recorder_modules="gstreamer-1.0 gstreamer-base-1.0 x11 gtk+-3.0"
-   PKG_CHECK_MODULES(TEST_SHELL_RECORDER, $recorder_modules clutter-1.0 xfixes gl)
+   PKG_CHECK_MODULES(TEST_SHELL_RECORDER, $recorder_modules clutter-1.0 xfixes)
 else
    AC_MSG_RESULT(no)
 fi
@@ -63,17 +63,16 @@ AM_CONDITIONAL(BUILD_RECORDER, $build_recorder)
 CLUTTER_MIN_VERSION=1.13.4
 GOBJECT_INTROSPECTION_MIN_VERSION=0.10.1
 GJS_MIN_VERSION=1.35.4
-MUTTER_MIN_VERSION=3.7.5
-GTK_MIN_VERSION=3.3.9
+MUTTER_MIN_VERSION=3.7.90
+GTK_MIN_VERSION=3.7.9
 GIO_MIN_VERSION=2.35.0
 LIBECAL_MIN_VERSION=3.5.3
 LIBEDATASERVER_MIN_VERSION=3.5.3
 TELEPATHY_GLIB_MIN_VERSION=0.17.5
-TELEPATHY_LOGGER_MIN_VERSION=0.2.4
 POLKIT_MIN_VERSION=0.100
 STARTUP_NOTIFICATION_MIN_VERSION=0.11
 GCR_MIN_VERSION=3.3.90
-GNOME_DESKTOP_REQUIRED_VERSION=3.7.1
+GNOME_DESKTOP_REQUIRED_VERSION=3.7.90
 GNOME_MENUS_REQUIRED_VERSION=3.5.3
 NETWORKMANAGER_MIN_VERSION=0.9.6
 PULSE_MIN_VERS=2.0
@@ -88,14 +87,12 @@ PKG_CHECK_MODULES(GNOME_SHELL, gio-unix-2.0 >= $GIO_MIN_VERSION
 			       libgnome-menu-3.0 >= $GNOME_MENUS_REQUIRED_VERSION
                                $recorder_modules
                                gdk-x11-3.0 libsoup-2.4
-                               gl
 			       clutter-x11-1.0 >= $CLUTTER_MIN_VERSION
 			       clutter-glx-1.0 >= $CLUTTER_MIN_VERSION
                                libstartup-notification-1.0 >= $STARTUP_NOTIFICATION_MIN_VERSION
                                gobject-introspection-1.0 >= $GOBJECT_INTROSPECTION_MIN_VERSION
 			       libcanberra libcanberra-gtk3
                                telepathy-glib >= $TELEPATHY_GLIB_MIN_VERSION
-                               telepathy-logger-0.2 >= $TELEPATHY_LOGGER_MIN_VERSION
                                polkit-agent-1 >= $POLKIT_MIN_VERSION xfixes
                                libnm-glib libnm-util >= $NETWORKMANAGER_MIN_VERSION
                                libnm-gtk >= $NETWORKMANAGER_MIN_VERSION
@@ -109,6 +106,7 @@ PKG_CHECK_MODULES(BROWSER_PLUGIN, gio-2.0 >= $GIO_MIN_VERSION json-glib-1.0 >= 0
 PKG_CHECK_MODULES(TRAY, gtk+-3.0)
 PKG_CHECK_MODULES(GVC, libpulse >= $PULSE_MIN_VERS libpulse-mainloop-glib gobject-2.0)
 PKG_CHECK_MODULES(DESKTOP_SCHEMAS, gsettings-desktop-schemas >= 3.7.4)
+PKG_CHECK_MODULES(CARIBOU, caribou-1.0 >= 0.4.8)
 
 AC_MSG_CHECKING([for bluetooth support])
 PKG_CHECK_EXISTS([gnome-bluetooth-1.0 >= 3.1.0],
@@ -133,14 +131,6 @@ AC_SUBST([GNOME_KEYBINDINGS_KEYSDIR])
 
 GOBJECT_INTROSPECTION_CHECK([$GOBJECT_INTROSPECTION_MIN_VERSION])
 
-saved_CFLAGS=$CFLAGS
-saved_LIBS=$LIBS
-CFLAGS=$GNOME_SHELL_CFLAGS
-LIBS=$GNOME_SHELL_LIBS
-AC_CHECK_FUNCS(XFixesCreatePointerBarrier)
-CFLAGS=$saved_CFLAGS
-LIBS=$saved_LIBS
-
 MUTTER_GIR_DIR=`$PKG_CONFIG --variable=girdir libmutter`
 MUTTER_TYPELIB_DIR=`$PKG_CONFIG --variable=typelibdir libmutter`
 AC_SUBST(MUTTER_GIR_DIR)

data/org.gnome.ShellSearchProvider.xml

@@ -46,7 +46,7 @@
     <!--
         GetResultMetas:
         @identifiers: An array of result identifiers as returned by GetInitialResultSet() or GetSubsearchResultSet()
-        @metas: A dictionary describing the given search result, containing 'id' and 'name' (both strings). Optionally, either 'gicon' (a serialized GIcon) or 'icon-data' (raw image data as (iiibiiay) - width, height, rowstride, has-alpha, bits per sample, channels, data) can be specified if the result can be better served with a thumbnail of the content (such as with images).
+        @metas: A dictionary describing the given search result, containing a human-readable 'name' (string), along with the result identifier this meta is for, 'id' (string). Optionally, either 'gicon' (a serialized GIcon) or 'icon-data' (raw image data as (iiibiiay) - width, height, rowstride, has-alpha, bits per sample, channels, data) can be specified if the result can be better served with a thumbnail of the content (such as with images). A 'description' field (string) may also be specified if more context would help the user find the desired result.
 
         Return an array of meta data used to display each given result
     -->

data/org.gnome.ShellSearchProvider2.xml

@@ -46,7 +46,7 @@
     <!--
         GetResultMetas:
         @identifiers: An array of result identifiers as returned by GetInitialResultSet() or GetSubsearchResultSet()
-        @metas: A dictionary describing the given search result, containing 'id' and 'name' (both strings). Optionally, either 'gicon' (a serialized GIcon) or 'icon-data' (raw image data as (iiibiiay) - width, height, rowstride, has-alpha, bits per sample, channels, data) can be specified if the result can be better served with a thumbnail of the content (such as with images). A 'description' field (string) may also be specified if more context would help the user find the desired result.
+        @metas: A dictionary describing the given search result, containing a human-readable 'name' (string), along with the result identifier this meta is for, 'id' (string). Optionally, either 'gicon' (a serialized GIcon) or 'icon-data' (raw image data as (iiibiiay) - width, height, rowstride, has-alpha, bits per sample, channels, data) can be specified if the result can be better served with a thumbnail of the content (such as with images). A 'description' field (string) may also be specified if more context would help the user find the desired result.
 
         Return an array of meta data used to display each given result
     -->

data/org.gnome.shell.gschema.xml.in.in

@@ -39,6 +39,14 @@
         will be displayed in the favorites area.
       </_description>
     </key>
+    <key name="app-folder-categories" type="as">
+      <default>[ 'Utilities', 'Sundry' ]</default>
+      <_summary>List of categories that should be displayed as folders</_summary>
+      <_description>
+        Each category name in this list will be represented as folder in the
+        application view, rather than being displayed inline in the main view.
+      </_description>
+    </key>
     <key name="command-history" type="as">
       <default>[]</default>
       <_summary>History for command (Alt-F2) dialog</_summary>

data/theme/gnome-shell.css

@@ -38,7 +38,6 @@ stage {
 
 /* small */
 .app-well-menu,
-.contact-details-status,
 .run-dialog-error-label {
     font-size: 9pt;
 }
@@ -128,7 +127,7 @@ StScrollBar StButton#vhandle:active {
 
 .popup-menu-boxpointer {
     -arrow-border-radius: 8px;
-    -arrow-background-color: black;
+    -arrow-background-color: rgba(0,0,0,0.9);
     -arrow-border-width: 2px;
     -arrow-border-color: #a5a5a5;
     -arrow-base: 24px;
@@ -286,24 +285,24 @@ StScrollBar StButton#vhandle:active {
 
 /* Buttons */
 
-.dash-search-button,
+.candidate-page-button,
 .notification-button,
 .notification-icon-button,
 .hotplug-notification-item,
 .hotplug-resident-eject-button,
-.modal-dialog-button {
+.modal-dialog-button,
+.app-view-control {
     border: 1px solid #8b8b8b;
     background-gradient-direction: vertical;
     background-gradient-start: rgba(255, 255, 255, 0.2);
     background-gradient-end: rgba(255, 255, 255, 0);
 }
 
-.dash-search-button,
 .modal-dialog-button {
     font-weight: bold;
 }
 
-.dash-search-button:hover,
+.candidate-page-button:hover,
 .notification-button:hover,
 .notification-icon-button:hover,
 .hotplug-notification-item:hover,
@@ -313,8 +312,6 @@ StScrollBar StButton#vhandle:active {
     background-gradient-end: rgba(255, 255, 255, 0.1);
 }
 
-.dash-search-button:selected,
-.dash-search-button:focus,
 .notification-button:focus,
 .notification-icon-button:focus,
 .hotplug-notification-item:focus,
@@ -322,18 +319,20 @@ StScrollBar StButton#vhandle:active {
     border-width: 2px;
 }
 
-.dash-search-button:active,
-.dash-search-button:pressed,
+.candidate-page-button:active,
+.candidate-page-button:pressed,
 .notification-button:active,
 .notification-icon-button:active,
 .hotplug-notification-item:active,
 .hotplug-resident-eject-button:active,
 .modal-dialog-button:active,
-.modal-dialog-button:pressed {
+.modal-dialog-button:pressed,
+.app-view-control:checked {
     background-gradient-start: rgba(255, 255, 255, 0);
     background-gradient-end: rgba(255, 255, 255, 0.2);
 }
 
+.candidate-page-button:insensitive,
 .notification-button:insensitive,
 .notification-icon-button:insensitive,
 .modal-dialog-button:insensitive {
@@ -343,6 +342,27 @@ StScrollBar StButton#vhandle:active {
     background-color: rgba(102, 102, 102, 0.15);
 }
 
+/* Common radii */
+
+#searchEntry,
+.modal-dialog-button,
+.notification-button,
+.hotplug-notification-item,
+.app-view-controls {
+    border-radius: 18px;
+}
+
+.app-view-control:first-child:ltr,
+.app-view-control:last-child:rtl {
+    border-radius: 18px 0px 0px 18px;
+    border-right-width: 0px;
+}
+
+.app-view-control:last-child:ltr,
+.app-view-control:first-child:rtl {
+    border-radius: 0px 18px 18px 0px;
+}
+
 /* Entries */
 
 #searchEntry,
@@ -429,17 +449,14 @@ StScrollBar StButton#vhandle:active {
     background-color: black;
     font-weight: bold;
     height: 1.86em;
-    transition-duration: 250ms;
 }
 
 #panel.lock-screen {
-    height: 2em;
     background-color: rgba(0,0,0,0.3);
 }
 
 #panel.unlock-screen,
 #panel.login-screen {
-    height: 2em;
     background-color: transparent;
 }
 
@@ -560,7 +577,7 @@ StScrollBar StButton#vhandle:active {
 }
 
 .panel-menu {
-    -boxpointer-gap: 4px
+    -boxpointer-gap: 4px;
 }
 
 .panel-status-button-box {
@@ -629,20 +646,8 @@ StScrollBar StButton#vhandle:active {
     spacing: 24px;
 }
 
-#overview-group {
-    spacing: 32px;
-}
-
-.workspaces-display {
-    spacing: 32px; /* needs to be the same value as #overview-group */
-}
-
-.window-caption {
-    spacing: 25px;
-}
-
-.workspace-controls {
-    visible-width: 32px; /* Amount visible before hovering */
+.overview-controls {
+    padding-bottom: 32px;
 }
 
 .workspace-thumbnails-background {
@@ -662,6 +667,7 @@ StScrollBar StButton#vhandle:active {
 
 .workspace-thumbnails {
     spacing: 11px;
+    visible-width: 32px; /* Amount visible before hovering */
 }
 
 .workspace-thumbnail-indicator {
@@ -671,6 +677,7 @@ StScrollBar StButton#vhandle:active {
 }
 
 .window-caption {
+    spacing: 25px;
     background: rgba(0,0,0,0.5);
     border-radius: 8px;
     padding: 4px 12px;
@@ -678,6 +685,10 @@ StScrollBar StButton#vhandle:active {
     border: 2px solid rgba(0, 0, 0, 0);
 }
 
+.window-caption:hover {
+    border: 2px solid rgba(255, 255, 255, 0);
+}
+
 .window-close, .notification-close {
     background-image: url("close-window.svg");
     background-size: 32px;
@@ -689,10 +700,6 @@ StScrollBar StButton#vhandle:active {
     -shell-close-overlap: 16px;
 }
 
-.window-caption:hover {
-    border: 2px solid rgba(255, 255, 255, 0);
-}
-
 .window-clone-border {
     border: 4px solid rgba(255, 255, 255, 0.5);
     border-radius: 4px;
@@ -725,12 +732,38 @@ StScrollBar StButton#vhandle:active {
 .window-picker {
     -horizontal-spacing: 32px;
     -vertical-spacing: 32px;
+    padding-left: 32px;
+    padding-right: 32px;
+    padding-bottom: 48px;
 }
 
 .window-picker.external-monitor {
     padding: 32px;
 }
 
+.messages-indicator {
+    color: #999999;
+    height: 32px;
+}
+
+.messages-indicator-contents {
+    spacing: 12px;
+    padding-bottom: 12px;
+}
+
+.messages-indicator-contents:hover {
+    color: white;
+    text-shadow: black 0px 2px 2px;
+}
+
+.messages-indicator-highlight {
+    background-gradient-start: transparent;
+    background-gradient-end: #999999;
+    background-gradient-direction: vertical;
+
+    height: 6px;
+}
+
 /* Dash */
 
 #dash {
@@ -758,7 +791,6 @@ StScrollBar StButton#vhandle:active {
 /* Search Box */
 
 #searchEntry {
-    border-radius: 17px;
     width: 320px;
 }
 
@@ -775,7 +807,7 @@ StScrollBar StButton#vhandle:active {
 /* Search Results */
 
 #searchResults {
-    padding: 20px 10px 10px 10px;
+    padding: 20px 10px 0px 10px;
     spacing: 18px;
 }
 
@@ -784,15 +816,11 @@ StScrollBar StButton#vhandle:active {
 }
 
 #searchResultsContent {
+    padding-left: 20px;
     padding-right: 20px;
     spacing: 16px;
 }
 
-#searchResultsContent:rtl {
-    padding-right: 0px;
-    padding-left: 20px;
-}
-
 .search-section {
     /* This should be equal to #searchResultsContent spacing */
     spacing: 16px;
@@ -821,24 +849,6 @@ StScrollBar StButton#vhandle:active {
     spacing: 3px;
 }
 
-/* Text labels are an odd number of pixels tall. The uneven top and bottom
- * padding compensates for this and ensures that the label is vertically
- * centered */
-.dash-search-button {
-    border-radius: 16px;
-    padding-top: 4px;
-    padding-bottom: 5px;
-    width: 300px;
-    font-weight: bold;
-}
-
-.dash-search-button:focus,
-.dash-search-button:selected {
-    padding-top: 3px;
-    padding-bottom: 4px;
-    width: 298px;
-}
-
 .dash-label {
     border-radius: 7px;
     padding: 4px 12px;
@@ -859,40 +869,29 @@ StScrollBar StButton#vhandle:active {
     icon-size: 96px;
 }
 
-.all-app {
-    padding: 16px 25px 16px 16px;
+.app-display {
+    padding: 8px;
     spacing: 20px;
 }
 
-.all-app:rtl {
-    padding-right: 16px;
-    padding-left: 25px;
+.app-view-controls {
+    width: 250px;
+    padding-bottom: 32px;
 }
 
-.app-filter {
-    font-weight: bold;
-    height: 2.85em;
-    color: #aaa;
-    width: 200px;
+.app-view-control {
+    padding: 4px 16px;
 }
 
-.app-filter:hover {
-    color: #eee;
+.search-display > StBoxLayout,
+.all-apps > StBoxLayout,
+.frequent-apps > StBoxLayout {
+    /* horizontal padding to make sure the scrollbar doesn't overlap content */
+    padding: 0px 18px;
 }
 
-.app-filter:selected {
-    color: #ffffff;
-    background-image: url("filter-selected-ltr.svg");
-    background-position: 190px 10px;
-}
-
-.app-filter:selected:rtl {
-    background-image: url("filter-selected-rtl.svg");
-    background-position: 10px 10px;
-}
-
-.app-filter:focus {
-    outline: 1px solid #aaa;
+.app-folder-icon {
+    padding: 5px;
 }
 
 .dash-item-container > StButton {
@@ -911,8 +910,6 @@ StScrollBar StButton#vhandle:active {
 }
 
 .list-search-result-description {
-    font-weight: bold;
-    font-size: 12pt;
     color: #eeeeec;
 }
 
@@ -934,12 +931,27 @@ StScrollBar StButton#vhandle:active {
     text-align: center;
 }
 
+.app-folder-popup {
+    -arrow-border-radius: 8px;
+    -arrow-background-color: black;
+    -arrow-base: 24px;
+    -arrow-rise: 11px;
+}
+
+.app-folder-popup-bin {
+    padding: 15px;
+}
+
 .app-well-app.running > .overview-icon {
     text-shadow: black 0px 2px 2px;
     background-image: url("running-indicator.svg");
     background-size: contain;
 }
 
+.app-well-app.app-folder > .overview-icon {
+    background-color: rgba(0,0,0,0.5);
+}
+
 .app-well-app:hover > .overview-icon,
 .show-apps:hover > .overview-icon,
 .search-provider-icon:hover,
@@ -951,6 +963,10 @@ StScrollBar StButton#vhandle:active {
     color:white;
 }
 
+.list-search-result:hover .list-search-result-description {
+    text-shadow: rgba(0,0,0,0.8) 0px 1px 2px;
+}
+
 .show-apps {
     padding: 4px 0;
 }
@@ -963,6 +979,8 @@ StScrollBar StButton#vhandle:active {
     color: white;
 }
 
+.app-well-app:checked > .overview-icon,
+.app-well-app:active > .overview-icon,
 .show-apps:checked > .overview-icon,
 .show-apps:active > .overview-icon {
     background-gradient-start: rgba(255, 255, 255, .05);
@@ -1321,16 +1339,6 @@ StScrollBar StButton#vhandle:active {
     height: 72px;
 }
 
-#message-tray:keyboard {
-    /* Same as the OSK */
-    background: rgba(0, 0, 0, 0.8);
-}
-
-#message-tray:overview {
-    background: rgba(0, 0, 0, 0.1);
-    outline: 1px solid rgba(128, 128, 128, 0.3);
-}
-
 .message-tray-summary {
     height: 72px;
 }
@@ -1430,7 +1438,6 @@ StScrollBar StButton#vhandle:active {
 }
 
 .notification-button {
-    border-radius: 18px;
     padding: 4px 42px 5px;
 }
 
@@ -1463,7 +1470,6 @@ StScrollBar StButton#vhandle:active {
 
 .hotplug-notification-item {
     padding: 2px 10px;
-    border-radius: 18px;
 }
 
 .hotplug-notification-item:focus {
@@ -1602,12 +1608,26 @@ StScrollBar StButton#vhandle:active {
     -shell-counter-overlap-y: 13px;
 }
 
+/* OSD */
+.osd-window {
+    text-align: center;
+    font-weight: bold;
+    spacing: 1em;
+}
+
+.osd-window .level {
+    height: 0.6em;
+    border-radius: 0.3em;
+    background-color: rgba(190,190,190,0.2);
+}
+
 /* App Switcher */
 .switcher-popup {
     padding: 8px;
     spacing: 16px;
 }
 
+.osd-window,
 .switcher-list {
     background: rgba(0,0,0,0.8);
     border: 1px solid rgba(128,128,128,0.40);
@@ -1759,8 +1779,6 @@ StScrollBar StButton#vhandle:active {
 }
 
 .modal-dialog-button {
-    border-radius: 18px;
-
     margin-left: 10px;
     margin-right: 10px;
     padding: 4px 32px 5px;
@@ -2111,17 +2129,64 @@ StScrollBar StButton#vhandle:active {
 }
 
 /* IBus Candidate Popup */
+.candidate-popup-boxpointer {
+    -arrow-border-radius: 8px;
+    -arrow-background-color: #707070;
+    -arrow-border-width: 0px;
+    -arrow-base: 24px;
+    -arrow-rise: 11px;
+}
+
+.candidate-popup-content {
+    padding: 0.5em;
+    spacing: 0.3em;
+}
+
+.candidate-popup-text {
+    font-size: 9pt;
+}
+
 .candidate-index {
-    padding: 0.5em 0.5em 0.5em 0.5em;
+    padding: 0 0.5em 0 0;
+    color: #cccccc;
 }
 
-.candidate-label {
-    padding: 0.5em 0.5em 0.5em 0.5em;
+.candidate-box {
+    padding: 0.3em 0.5em 0.3em 0.5em;
 }
 
-.candidate-label:selected {
+.candidate-box:selected {
     border-radius: 4px;
-    background-color: rgba(255,255,255,0.33);
+    background-color: rgba(255,255,255,0.2);
+}
+
+.candidate-box:hover {
+    border-radius: 4px;
+    background-color: rgba(255,255,255,0.1);
+}
+.candidate-page-button-box {
+    height: 2em;
+    width: 80px;
+}
+
+.vertical .candidate-page-button-box {
+    padding-top: 0.5em;
+}
+
+.horizontal .candidate-page-button-box {
+    padding-left: 0.5em;
+}
+
+.candidate-page-button-previous {
+    border-radius: 4px 0px 0px 4px;
+}
+
+.candidate-page-button-next {
+    border-radius: 0px 4px 4px 0px;
+}
+
+.candidate-page-button-icon {
+    icon-size: 1em;
 }
 
 /* Login Dialog */
@@ -2357,10 +2422,18 @@ StScrollBar StButton#vhandle:active {
     color: orange;
 }
 
-.unlock-dialog-user-name-container {
+.user-widget {
     spacing: .4em;
 }
 
+.user-widget-label {
+    font-size: 16pt;
+    font-weight: bold;
+    text-align: left;
+    padding-left: 15px;
+    text-shadow: black 0px 4px 3px 0px;
+}
+
 /* Screen shield */
 
 .screen-shield-background {
@@ -2452,7 +2525,13 @@ StScrollBar StButton#vhandle:active {
 }
 
 .input-source-switcher-symbol {
-   font-size: 42pt;
+   font-size: 34pt;
    width: 96px;
    height: 96px;
 }
+
+/* Background menu */
+
+.background-menu {
+    -boxpointer-gap: 4px;
+}

js/Makefile.am

@@ -39,6 +39,8 @@ nobase_dist_js_DATA = 	\
 	ui/altTab.js		\
 	ui/appDisplay.js	\
 	ui/appFavorites.js	\
+	ui/backgroundMenu.js	\
+	ui/background.js	\
 	ui/boxpointer.js	\
 	ui/calendar.js		\
 	ui/checkBox.js		\
@@ -67,7 +69,9 @@ nobase_dist_js_DATA = 	\
 	ui/shellEntry.js	\
 	ui/shellMountOperation.js \
 	ui/notificationDaemon.js \
+	ui/osdWindow.js		\
 	ui/overview.js		\
+	ui/overviewControls.js	\
 	ui/panel.js		\
 	ui/panelMenu.js		\
 	ui/pointerWatcher.js    \
@@ -91,6 +95,7 @@ nobase_dist_js_DATA = 	\
 	ui/tweener.js		\
 	ui/unlockDialog.js	\
 	ui/userMenu.js		\
+	ui/userWidget.js	\
 	ui/viewSelector.js	\
 	ui/wanda.js		\
 	ui/windowAttentionHandler.js	\

js/extensionPrefs/main.js

@@ -45,6 +45,7 @@ const Application = new Lang.Class({
         this._extensionPrefsModules = {};
 
         this._extensionIters = {};
+        this._startupUuid = null;
     },
 
     _buildModel: function() {
@@ -203,6 +204,7 @@ const Application = new Lang.Class({
     _scanExtensions: function() {
         let finder = new ExtensionUtils.ExtensionFinder();
         finder.connect('extension-found', Lang.bind(this, this._extensionFound));
+        finder.connect('extensions-loaded', Lang.bind(this, this._extensionsLoaded));
         finder.scanExtensions();
     },
 
@@ -212,6 +214,11 @@ const Application = new Lang.Class({
         this._extensionIters[extension.uuid] = iter;
     },
 
+    _extensionsLoaded: function() {
+        if (this._startupUuid && this._extensionAvailable(this._startupUuid))
+            this._selectExtension(this._startupUuid);
+        this._startupUuid = null;
+    },
 
     _onActivate: function() {
         this._window.present();
@@ -232,10 +239,10 @@ const Application = new Lang.Class({
             // Strip off "extension:///" prefix which fakes a URI, if it exists
             uuid = stripPrefix(uuid, "extension:///");
 
-            if (!this._extensionAvailable(uuid))
-                return 1;
-
-            this._selectExtension(uuid);
+            if (this._extensionAvailable(uuid))
+                this._selectExtension(uuid);
+            else
+                this._startupUuid = uuid;
         }
         return 0;
     }

js/gdm/loginDialog.js

@@ -43,8 +43,9 @@ const Panel = imports.ui.panel;
 const PanelMenu = imports.ui.panelMenu;
 const Tweener = imports.ui.tweener;
 const UserMenu = imports.ui.userMenu;
+const UserWidget = imports.ui.userWidget;
 
-const _RESIZE_ANIMATION_TIME = 0.25;
+const _FADE_ANIMATION_TIME = 0.25;
 const _SCROLL_ANIMATION_TIME = 0.5;
 const _TIMED_LOGIN_IDLE_THRESHOLD = 5.0;
 const _LOGO_ICON_HEIGHT = 16;
@@ -55,39 +56,6 @@ const WORK_SPINNER_ANIMATION_TIME = 0.3;
 
 let _loginDialog = null;
 
-function _smoothlyResizeActor(actor, width, height) {
-    let finalWidth;
-    let finalHeight;
-
-    if (width < 0)
-        finalWidth = actor.width;
-    else
-        finalWidth = width;
-
-    if (height < 0)
-        finalHeight = actor.height;
-    else
-        finalHeight = height;
-
-    actor.set_size(actor.width, actor.height);
-
-    if (actor.width == finalWidth && actor.height == finalHeight)
-        return null;
-
-    let hold = new Batch.Hold();
-
-    Tweener.addTween(actor,
-                     { width: finalWidth,
-                       height: finalHeight,
-                       time: _RESIZE_ANIMATION_TIME,
-                       transition: 'easeOutQuad',
-                       onComplete: Lang.bind(this, function() {
-                                       hold.release();
-                                   })
-                     });
-    return hold;
-}
-
 const LogoMenuButton = new Lang.Class({
     Name: 'LogoMenuButton',
     Extends: PanelMenu.Button,
@@ -246,155 +214,23 @@ const UserList = new Lang.Class({
         }
     },
 
-    _showItem: function(item) {
-        let tasks = [function() {
-                         return GdmUtil.fadeInActor(item.actor);
-                     }];
-
-        let batch = new Batch.ConsecutiveBatch(this, tasks);
-        return batch.run();
-    },
-
     _onItemActivated: function(activatedItem) {
         this.emit('activate', activatedItem);
     },
 
-    giveUpWhitespace: function() {
-        let container = this.actor.get_parent();
-
-        container.child_set(this.actor, { expand: false });
-    },
-
-    takeOverWhitespace: function() {
-        let container = this.actor.get_parent();
-
-        container.child_set(this.actor, { expand: true });
-    },
-
-    pinInPlace: function() {
-        this._box.set_size(this._box.width, this._box.height);
-    },
-
-    shrinkToNaturalHeight: function() {
-        let oldWidth = this._box.width;
-        let oldHeight = this._box.height;
-        this._box.set_size(-1, -1);
-        let [minHeight, naturalHeight] = this._box.get_preferred_height(-1);
-        this._box.set_size(oldWidth, oldHeight);
-
-        let batch = new Batch.ConsecutiveBatch(this,
-                                               [function() {
-                                                    return _smoothlyResizeActor(this._box, -1, naturalHeight);
-                                                },
-
-                                                function() {
-                                                    this._box.set_size(-1, -1);
-                                                }
-                                               ]);
-
-        return batch.run();
-    },
-
-    hideItemsExcept: function(exception) {
+    updateStyle: function(isExpanded) {
         let tasks = [];
 
-        for (let userName in this._items) {
-            let item = this._items[userName];
-
-            item.actor.set_hover(false);
-            item.actor.reactive = false;
-            item.actor.can_focus = false;
-            item.syncStyleClasses();
-            item._timedLoginIndicator.scale_x = 0.;
-            if (item != exception)
-                tasks.push(function() {
-                    return GdmUtil.fadeOutActor(item.actor);
-                });
-        }
-
-        let batch = new Batch.ConsecutiveBatch(this,
-                                               [function() {
-                                                    return GdmUtil.fadeOutActor(this.actor.vscroll);
-                                                },
-
-                                                new Batch.ConcurrentBatch(this, tasks),
-
-                                                function() {
-                                                    this._box.remove_style_pseudo_class('expanded');
-                                                }
-                                               ]);
-
-        return batch.run();
-    },
-
-    hideItems: function() {
-        return this.hideItemsExcept(null);
-    },
-
-    _getExpandedHeight: function() {
-        let hiddenActors = [];
-        for (let userName in this._items) {
-            let item = this._items[userName];
-            if (!item.actor.visible) {
-                item.actor.show();
-                hiddenActors.push(item.actor);
-            }
-        }
-
-        if (!this._box.visible) {
-            this._box.show();
-            hiddenActors.push(this._box);
-        }
-
-        this._box.set_size(-1, -1);
-        let [minHeight, naturalHeight] = this._box.get_preferred_height(-1);
-
-        for (let i = 0; i < hiddenActors.length; i++) {
-            let actor = hiddenActors[i];
-            actor.hide();
-        }
-
-        return naturalHeight;
-    },
-
-    showItems: function() {
-        let tasks = [];
+        if (isExpanded)
+            this._box.add_style_pseudo_class('expanded');
+        else
+            this._box.remove_style_pseudo_class('expanded');
 
         for (let userName in this._items) {
             let item = this._items[userName];
             item.actor.sync_hover();
-            item.actor.reactive = true;
-            item.actor.can_focus = true;
             item.syncStyleClasses();
-            tasks.push(function() {
-                return this._showItem(item);
-            });
         }
-
-        let batch = new Batch.ConsecutiveBatch(this,
-                                               [function() {
-                                                    this.takeOverWhitespace();
-                                                },
-
-                                                function() {
-                                                    let fullHeight = this._getExpandedHeight();
-                                                    return _smoothlyResizeActor(this._box, -1, fullHeight);
-                                                },
-
-                                                function() {
-                                                    this._box.add_style_pseudo_class('expanded');
-                                                },
-
-                                                new Batch.ConcurrentBatch(this, tasks),
-
-                                                function() {
-                                                    this.actor.set_size(-1, -1);
-                                                },
-
-                                                function() {
-                                                    return GdmUtil.fadeInActor(this.actor.vscroll);
-                                                }]);
-        return batch.run();
     },
 
     scrollToItem: function(item) {
@@ -566,7 +402,7 @@ const SessionList = new Lang.Class({
         box.add_actor(this._triangle);
 
         let label = new St.Label({ style_class: 'login-dialog-session-list-label',
-                                   text: _("Session...") });
+                                   text: _("Session…") });
         box.add_actor(label);
 
         this._button.connect('clicked',
@@ -717,24 +553,20 @@ const LoginDialog = new Lang.Class({
         this._settings.connect('changed::' + GdmUtil.DISABLE_USER_LIST_KEY,
                                Lang.bind(this, this._updateDisableUserList));
 
+        this._userSelectionBox = new St.BoxLayout({ style_class: 'login-dialog-user-selection-box',
+                                                    vertical: true });
+        this.contentLayout.add(this._userSelectionBox);
+
         this._bannerLabel = new St.Label({ style_class: 'login-dialog-banner',
                                            text: '' });
-        this.contentLayout.add(this._bannerLabel);
+        this._userSelectionBox.add(this._bannerLabel);
         this._updateBanner();
 
-        this._titleLabel = new St.Label({ style_class: 'login-dialog-title',
-                                          text: C_("title", "Sign In"),
-                                          visible: false });
-
-        this.contentLayout.add(this._titleLabel,
-                              { y_fill: false,
-                                y_align: St.Align.START });
-
         this._userList = new UserList();
-        this.contentLayout.add(this._userList.actor,
-                               { expand: true,
-                                 x_fill: true,
-                                 y_fill: true });
+        this._userSelectionBox.add(this._userList.actor,
+                                   { expand: true,
+                                     x_fill: true,
+                                     y_fill: true });
 
         this.setInitialKeyFocus(this._userList.actor);
 
@@ -745,6 +577,13 @@ const LoginDialog = new Lang.Class({
                                  x_fill: true,
                                  y_fill: true,
                                  x_align: St.Align.START });
+        this._promptUser = new St.Bin({ x_fill: true,
+                                        x_align: St.Align.START });
+        this._promptBox.add(this._promptUser,
+                            { x_align: St.Align.START,
+                              x_fill: true,
+                              y_fill: true,
+                              expand: true });
         this._promptLabel = new St.Label({ style_class: 'login-dialog-prompt-label' });
 
         this._promptBox.add(this._promptLabel,
@@ -799,10 +638,10 @@ const LoginDialog = new Lang.Class({
 
         this._notListedButton.connect('clicked', Lang.bind(this, this._hideUserListAndLogIn));
 
-        this.contentLayout.add(this._notListedButton,
-                               { expand: false,
-                                 x_align: St.Align.START,
-                                 x_fill: true });
+        this._userSelectionBox.add(this._notListedButton,
+                                   { expand: false,
+                                     x_align: St.Align.START,
+                                     x_fill: true });
 
         if (!this._userManager.is_loaded)
             this._userManagerLoadedId = this._userManager.connect('notify::is-loaded',
@@ -844,9 +683,9 @@ const LoginDialog = new Lang.Class({
 
         if (enabled && text) {
             this._bannerLabel.set_text(text);
-            this._fadeInBanner();
+            this._bannerLabel.show();
         } else {
-            this._fadeOutBanner();
+            this._bannerLabel.hide();
         }
     },
 
@@ -877,73 +716,50 @@ const LoginDialog = new Lang.Class({
         if (message) {
             this._promptMessage.text = message;
             this._promptMessage.styleClass = styleClass;
-            GdmUtil.fadeInActor(this._promptMessage);
+            this._promptMessage.show();
         } else {
-            GdmUtil.fadeOutActor(this._promptMessage);
+            this._promptMessage.hide();
         }
     },
 
     _showLoginHint: function(verifier, message) {
         this._promptLoginHint.set_text(message)
-        GdmUtil.fadeInActor(this._promptLoginHint);
+        this._promptLoginHint.show();
+        this._promptLoginHint.opacity = 255;
     },
 
     _hideLoginHint: function() {
-        GdmUtil.fadeOutActor(this._promptLoginHint);
+        this._promptLoginHint.hide();
         this._promptLoginHint.set_text('');
     },
 
     cancel: function() {
-        this._userVerifier.cancel();
-    },
-
-    _fadeInPrompt: function() {
-        let tasks = [function() {
-                         return GdmUtil.fadeInActor(this._promptLabel);
-                     },
-
-                     function() {
-                         return GdmUtil.fadeInActor(this._promptEntry);
-                     },
-
-                     function() {
-                         // Show it with 0 opacity so we preallocate space for it
-                         // in the event we need to fade in the message
-                         this._promptLoginHint.opacity = 0;
-                         this._promptLoginHint.show();
-                     },
-
-                     function() {
-                         return GdmUtil.fadeInActor(this._promptBox);
-                     },
-
-                     function() {
-                         if (this._user && this._user.is_logged_in())
-                             return null;
-
-                         if (!this._verifyingUser)
-                             return null;
-
-                         return GdmUtil.fadeInActor(this._sessionList.actor);
-                     },
-
-                     function() {
-                         this._promptEntry.grab_key_focus();
-                     }];
-
-        this._sessionList.actor.hide();
-        let batch = new Batch.ConcurrentBatch(this, tasks);
-        return batch.run();
+        if (this._verifyingUser)
+            this._userVerifier.cancel();
+        else
+            this._reset();
     },
 
     _showPrompt: function(forSecret) {
+        this._sessionList.actor.hide();
+        this._promptLabel.show();
+        this._promptEntry.show();
+        this._promptLoginHint.opacity = 0;
+        this._promptLoginHint.show();
+        this._promptBox.opacity = 0;
+        this._promptBox.show();
+        Tweener.addTween(this._promptBox,
+                         { opacity: 255,
+                           time: _FADE_ANIMATION_TIME,
+                           transition: 'easeOutQuad' });
+
+        if ((this._user && !this._user.is_logged_in()) || this._verifyingUser)
+            this._sessionList.actor.show();
+
+        this._promptEntry.grab_key_focus();
+
         let hold = new Batch.Hold();
-
         let tasks = [function() {
-                         return this._fadeInPrompt();
-                     },
-
-                     function() {
                          this._prepareDialog(forSecret, hold);
                      },
 
@@ -1019,26 +835,21 @@ const LoginDialog = new Lang.Class({
             this._promptEntryTextChangedId = 0;
         }
 
-        let tasks = [function() {
-                         this._setWorking(false);
+        this._setWorking(false);
+        this._promptBox.hide();
+        this._promptLoginHint.hide();
 
-                         return GdmUtil.fadeOutActor(this._promptBox);
-                     },
+        this._promptUser.set_child(null);
 
-                     function() {
-                         this._promptLoginHint.hide();
+        this._updateSensitivity(true);
+        this._promptEntry.set_text('');
 
-                         this._updateSensitivity(true);
-                         this._promptEntry.set_text('');
+        this._sessionList.close();
+        this._promptLoginHint.hide();
 
-                         this.clearButtons();
-                         this._workSpinner = null;
-                         this._signInButton = null;
-                     }];
-
-        let batch = new Batch.ConsecutiveBatch(this, tasks);
-
-        return batch.run();
+        this.clearButtons();
+        this._workSpinner = null;
+        this._signInButton = null;
     },
 
     _setWorking: function(working) {
@@ -1060,7 +871,8 @@ const LoginDialog = new Lang.Class({
                                transition: 'linear',
                                onCompleteScope: this,
                                onComplete: function() {
-                                   this._workSpinner.stop();
+                                   if (this._workSpinner)
+                                       this._workSpinner.stop();
                                }
                              });
         }
@@ -1069,6 +881,7 @@ const LoginDialog = new Lang.Class({
     _askQuestion: function(verifier, serviceName, question, passwordChar) {
         this._promptLabel.set_text(question);
 
+        this._updateSensitivity(true);
         this._promptEntry.set_text('');
         this._promptEntry.clutter_text.set_password_char(passwordChar);
 
@@ -1105,7 +918,26 @@ const LoginDialog = new Lang.Class({
     },
 
     _onSessionOpened: function(client, serviceName) {
-        this._greeter.call_start_session_when_ready_sync(serviceName, true, null);
+        Tweener.addTween(this.dialogLayout,
+                         { opacity: 0,
+                           time: _FADE_ANIMATION_TIME,
+                           transition: 'easeOutQuad',
+                           onUpdate: function() {
+                               let children = Main.layoutManager.uiGroup.get_children();
+
+                               for (let i = 0; i < children.length; i++) {
+                                   if (children[i] != Main.layoutManager.screenShieldGroup)
+                                       children[i].opacity = this.dialogLayout.opacity;
+                               }
+                           },
+                           onUpdateScope: this,
+                           onComplete: function() {
+                               Mainloop.idle_add(Lang.bind(this, function() {
+                                   this._greeter.call_start_session_when_ready_sync(serviceName, true, null);
+                                   return false;
+                               }));
+                           },
+                           onCompleteScope: this });
     },
 
     _waitForItemForUser: function(userName) {
@@ -1232,75 +1064,21 @@ const LoginDialog = new Lang.Class({
                              }));
     },
 
+    _setUserListExpanded: function(expanded) {
+        this._userList.updateStyle(expanded);
+        this._userSelectionBox.visible = expanded;
+    },
+
     _hideUserListAndLogIn: function() {
-        let tasks = [function() {
-                         return this._userList.hideItems();
-                     },
-
-                     function() {
-                         return this._userList.giveUpWhitespace();
-                     },
-
-                     function() {
-                         this._userList.actor.hide();
-                     },
-
-                     new Batch.ConcurrentBatch(this, [this._fadeOutTitleLabel,
-                                                      this._fadeOutNotListedButton]),
-
-                     function() {
-                         return this._askForUsernameAndLogIn();
-                     }];
-
-        let batch = new Batch.ConsecutiveBatch(this, tasks);
-        batch.run();
+        this._setUserListExpanded(false);
+        GdmUtil.cloneAndFadeOutActor(this._userSelectionBox);
+        this._askForUsernameAndLogIn();
     },
 
     _showUserList: function() {
-        let tasks = [this._hidePrompt,
-
-                     new Batch.ConcurrentBatch(this, [this._fadeInTitleLabel,
-                                                      this._fadeInNotListedButton]),
-
-                     function() {
-                         this._sessionList.close();
-                         this._promptLoginHint.hide();
-                         this._userList.actor.show();
-                         this._userList.actor.opacity = 255;
-                         return this._userList.showItems();
-                     },
-
-                     function() {
-                         this._userList.actor.reactive = true;
-                         this._userList.actor.grab_key_focus();
-                     }];
-
-        let batch = new Batch.ConsecutiveBatch(this, tasks);
-        batch.run();
-    },
-
-    _fadeInBanner: function() {
-        return GdmUtil.fadeInActor(this._bannerLabel);
-    },
-
-    _fadeOutBanner: function() {
-        return GdmUtil.fadeOutActor(this._bannerLabel);
-    },
-
-    _fadeInTitleLabel: function() {
-        return GdmUtil.fadeInActor(this._titleLabel);
-    },
-
-    _fadeOutTitleLabel: function() {
-        return GdmUtil.fadeOutActor(this._titleLabel);
-    },
-
-    _fadeInNotListedButton: function() {
-        return GdmUtil.fadeInActor(this._notListedButton);
-    },
-
-    _fadeOutNotListedButton: function() {
-        return GdmUtil.fadeOutActor(this._notListedButton);
+        this._hidePrompt();
+        this._setUserListExpanded(true);
+        this._userList.actor.grab_key_focus();
     },
 
     _beginVerificationForUser: function(userName) {
@@ -1311,38 +1089,30 @@ const LoginDialog = new Lang.Class({
         return hold;
     },
 
-    _onUserListActivated: function(activatedItem) {
-        let userName;
+    _beginVerificationForItem: function(item) {
+        let userWidget = new UserWidget.UserWidget(item.user);
+        this._promptUser.set_child(userWidget.actor);
 
         let tasks = [function() {
-                         this._userList.actor.reactive = false;
-                         return this._userList.pinInPlace();
-                     },
-
-                     function() {
-                         return this._userList.hideItemsExcept(activatedItem);
-                     },
-
-                     function() {
-                         return this._userList.giveUpWhitespace();
-                     },
-
-                     new Batch.ConcurrentBatch(this, [this._fadeOutTitleLabel,
-                                                      this._fadeOutNotListedButton]),
-
-                     function() {
-                         return this._userList.shrinkToNaturalHeight();
-                     },
-
-                     function() {
-                         userName = activatedItem.user.get_user_name();
-
+                         let userName = item.user.get_user_name();
                          return this._beginVerificationForUser(userName);
                      }];
+        let batch = new Batch.ConsecutiveBatch(this, tasks);
+        return batch.run();
+    },
+
+    _onUserListActivated: function(activatedItem) {
+        let tasks = [function() {
+                         return GdmUtil.cloneAndFadeOutActor(this._userSelectionBox);
+                     },
+                     function() {
+                         this._setUserListExpanded(false);
+                     }];
 
         this._user = activatedItem.user;
 
-        let batch = new Batch.ConsecutiveBatch(this, tasks);
+        let batch = new Batch.ConcurrentBatch(this, [new Batch.ConsecutiveBatch(this, tasks),
+                                                     this._beginVerificationForItem(activatedItem)]);
         batch.run();
     },
 

js/gdm/util.js

@@ -1,5 +1,6 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 
+const Clutter = imports.gi.Clutter;
 const Gio = imports.gi.Gio;
 const Lang = imports.lang;
 const Mainloop = imports.mainloop;
@@ -15,6 +16,7 @@ const Tweener = imports.ui.tweener;
 const PASSWORD_SERVICE_NAME = 'gdm-password';
 const FINGERPRINT_SERVICE_NAME = 'gdm-fingerprint';
 const FADE_ANIMATION_TIME = 0.16;
+const CLONE_FADE_ANIMATION_TIME = 0.25;
 
 const LOGIN_SCREEN_SCHEMA = 'org.gnome.login-screen';
 const FINGERPRINT_AUTHENTICATION_KEY = 'enable-fingerprint-authentication';
@@ -71,6 +73,34 @@ function fadeOutActor(actor) {
     return hold;
 }
 
+function cloneAndFadeOutActor(actor) {
+    // Immediately hide actor so its sibling can have its space
+    // and position, but leave a non-reactive clone on-screen,
+    // so from the user's point of view it smoothly fades away
+    // and reveals its sibling.
+    actor.hide();
+
+    let clone = new Clutter.Clone({ source: actor,
+                                    reactive: false });
+
+    Main.uiGroup.add_child(clone);
+
+    let [x, y] = actor.get_transformed_position();
+    clone.set_position(x, y);
+
+    let hold = new Batch.Hold();
+    Tweener.addTween(clone,
+                     { opacity: 0,
+                       time: CLONE_FADE_ANIMATION_TIME,
+                       transition: 'easeOutQuad',
+                       onComplete: function() {
+                           clone.destroy();
+                           hold.release();
+                       }
+                     });
+    return hold;
+}
+
 const ShellUserVerifier = new Lang.Class({
     Name: 'ShellUserVerifier',
 

js/misc/extensionUtils.js

@@ -174,10 +174,15 @@ const ExtensionFinder = new Lang.Class({
         this.emit('extension-found', extension);
     },
 
+    _extensionsLoaded: function() {
+        this.emit('extensions-loaded');
+    },
+
     scanExtensions: function() {
         let perUserDir = Gio.File.new_for_path(global.userdatadir);
         FileUtils.collectFromDatadirsAsync('extensions',
                                            { processFile: Lang.bind(this, this._loadExtension),
+                                             loadedCallback: Lang.bind(this, this._extensionsLoaded),
                                              includeUserDir: true,
                                              data: perUserDir });
     }

js/misc/loginManager.js

@@ -33,6 +33,9 @@ const SystemdLoginManagerIface = <interface name='org.freedesktop.login1.Manager
     <arg type='s' direction='in'/>
     <arg type='h' direction='out'/>
 </method>
+<method name='ListSessions'>
+    <arg name='sessions' type='a(susso)' direction='out'/>
+</method>
 <signal name='PrepareForSleep'>
     <arg type='b' direction='out'/>
 </signal>
@@ -142,6 +145,15 @@ const LoginManagerSystemd = new Lang.Class({
         });
     },
 
+    listSessions: function(asyncCallback) {
+        this._proxy.ListSessionsRemote(function(result, error) {
+            if (error)
+                asyncCallback([]);
+            else
+                asyncCallback(result[0]);
+        });
+    },
+
     powerOff: function() {
         this._proxy.PowerOffRemote(true);
     },
@@ -222,7 +234,11 @@ const LoginManagerConsoleKit = new Lang.Class({
     },
 
     canSuspend: function(asyncCallback) {
-        return false;
+        asyncCallback(false);
+    },
+
+    listSessions: function(asyncCallback) {
+        asyncCallback([]);
     },
 
     powerOff: function() {

js/misc/util.js

@@ -1,6 +1,8 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 
+const Clutter = imports.gi.Clutter;
 const GLib = imports.gi.GLib;
+const St = imports.gi.St;
 
 const Main = imports.ui.main;
 
@@ -208,3 +210,27 @@ function insertSorted(array, val, cmp) {
 
     return pos;
 }
+
+function makeCloseButton() {
+    let closeButton = new St.Button({ style_class: 'notification-close'});
+
+    // This is a bit tricky. St.Bin has its own x-align/y-align properties
+    // that compete with Clutter's properties. This should be fixed for
+    // Clutter 2.0. Since St.Bin doesn't define its own setters, the
+    // setters are a workaround to get Clutter's version.
+    closeButton.set_x_align(Clutter.ActorAlign.END);
+    closeButton.set_y_align(Clutter.ActorAlign.START);
+
+    // XXX Clutter 2.0 workaround: ClutterBinLayout needs expand
+    // to respect the alignments.
+    closeButton.set_x_expand(true);
+    closeButton.set_y_expand(true);
+
+    closeButton.connect('style-changed', function() {
+        let themeNode = closeButton.get_theme_node();
+        closeButton.translation_x = themeNode.get_length('-shell-close-overlap-x');
+        closeButton.translation_y = themeNode.get_length('-shell-close-overlap-y');
+    });
+
+    return closeButton;
+}

js/ui/altTab.js

@@ -98,43 +98,13 @@ const AppSwitcherPopup = new Lang.Class({
         }
     },
 
-    _getAppLists: function() {
-        let tracker = Shell.WindowTracker.get_default();
-        let appSys = Shell.AppSystem.get_default();
-        let allApps = appSys.get_running ();
-
-        let screen = global.screen;
-        let display = screen.get_display();
-        let windows = display.get_tab_list(Meta.TabList.NORMAL_ALL, screen,
-                                           screen.get_active_workspace());
-
-        // windows is only the windows on the current workspace. For
-        // each one, if it corresponds to an app we know, move that
-        // app from allApps to apps.
-        let apps = [];
-        for (let i = 0; i < windows.length && allApps.length != 0; i++) {
-            let app = tracker.get_window_app(windows[i]);
-            let index = allApps.indexOf(app);
-            if (index != -1) {
-                apps.push(app);
-                allApps.splice(index, 1);
-            }
-        }
-
-        // Now @apps is a list of apps on the current workspace, in
-        // standard Alt+Tab order (MRU except for minimized windows),
-        // and allApps is a list of apps that only appear on other
-        // workspaces, sorted by user_time, which is good enough.
-        return [apps, allApps];
-    },
-
     _createSwitcher: function() {
-        let [localApps, otherApps] = this._getAppLists();
+        let apps = Shell.AppSystem.get_default().get_running ();
 
-        if (localApps.length == 0 && otherApps.length == 0)
+        if (apps.length == 0)
             return false;
 
-        this._switcherList = new AppSwitcher(localApps, otherApps, this);
+        this._switcherList = new AppSwitcher(apps, this);
         this._items = this._switcherList.icons;
 
         return true;
@@ -265,12 +235,8 @@ const AppSwitcherPopup = new Lang.Class({
         this.parent();
 
         let appIcon = this._items[this._selectedIndex];
-        let window;
-        if (this._currentWindow >= 0)
-            window = appIcon.cachedWindows[this._currentWindow];
-        else
-            window = null;
-        appIcon.app.activate_window(window, timestamp);
+        let window = this._currentWindow > 0 ? this._currentWindow : 0;
+        appIcon.app.activate_window(appIcon.cachedWindows[window], timestamp);
     },
 
     _onDestroy : function() {
@@ -461,34 +427,26 @@ const AppSwitcher = new Lang.Class({
     Name: 'AppSwitcher',
     Extends: SwitcherPopup.SwitcherList,
 
-    _init : function(localApps, otherApps, altTabPopup) {
+    _init : function(apps, altTabPopup) {
         this.parent(true);
 
-        // Construct the AppIcons, add to the popup
-        let activeWorkspace = global.screen.get_active_workspace();
-        let workspaceIcons = [];
-        let otherIcons = [];
-        for (let i = 0; i < localApps.length; i++) {
-            let appIcon = new AppIcon(localApps[i]);
-            // Cache the window list now; we don't handle dynamic changes here,
-            // and we don't want to be continually retrieving it
-            appIcon.cachedWindows = appIcon.app.get_windows();
-            workspaceIcons.push(appIcon);
-        }
-        for (let i = 0; i < otherApps.length; i++) {
-            let appIcon = new AppIcon(otherApps[i]);
-            appIcon.cachedWindows = appIcon.app.get_windows();
-            otherIcons.push(appIcon);
-        }
-
         this.icons = [];
         this._arrows = [];
-        for (let i = 0; i < workspaceIcons.length; i++)
-            this._addIcon(workspaceIcons[i]);
-        if (workspaceIcons.length > 0 && otherIcons.length > 0)
-            this.addSeparator();
-        for (let i = 0; i < otherIcons.length; i++)
-            this._addIcon(otherIcons[i]);
+
+        let windowTracker = Shell.WindowTracker.get_default();
+        let allWindows = global.display.get_tab_list(Meta.TabList.NORMAL,
+                                                     global.screen, null);
+
+        // Construct the AppIcons, add to the popup
+        for (let i = 0; i < apps.length; i++) {
+            let appIcon = new AppIcon(apps[i]);
+            // Cache the window list now; we don't handle dynamic changes here,
+            // and we don't want to be continually retrieving it
+            appIcon.cachedWindows = allWindows.filter(function(w) {
+                return windowTracker.get_window_app (w) == appIcon.app;
+            });
+            this._addIcon(appIcon);
+        }
 
         this._curApp = -1;
         this._iconSize = 0;
@@ -514,8 +472,6 @@ const AppSwitcher = new Lang.Class({
         let [iconMinHeight, iconNaturalHeight] = this.icons[j].label.get_preferred_height(-1);
         let iconSpacing = iconNaturalHeight + iconPadding + iconBorder;
         let totalSpacing = this._list.spacing * (this._items.length - 1);
-        if (this._separator)
-           totalSpacing += this._separator.width + this._list.spacing;
 
         // We just assume the whole screen here due to weirdness happing with the passed width
         let primary = Main.layoutManager.primaryMonitor;
@@ -638,24 +594,12 @@ const ThumbnailList = new Lang.Class({
     _init : function(windows) {
         this.parent(false);
 
-        let activeWorkspace = global.screen.get_active_workspace();
-
-        // We fake the value of 'separatorAdded' when the app has no window
-        // on the current workspace, to avoid displaying a useless separator in
-        // that case.
-        let separatorAdded = windows.length == 0 || windows[0].get_workspace() != activeWorkspace;
-
         this._labels = new Array();
         this._thumbnailBins = new Array();
         this._clones = new Array();
         this._windows = windows;
 
         for (let i = 0; i < windows.length; i++) {
-            if (!separatorAdded && windows[i].get_workspace() != activeWorkspace) {
-              this.addSeparator();
-              separatorAdded = true;
-            }
-
             let box = new St.BoxLayout({ style_class: 'thumbnail-box',
                                          vertical: true });
 

js/ui/appDisplay.js

@@ -3,6 +3,7 @@
 const Clutter = imports.gi.Clutter;
 const Gio = imports.gi.Gio;
 const GLib = imports.gi.GLib;
+const GObject = imports.gi.GObject;
 const Gtk = imports.gi.Gtk;
 const GMenu = imports.gi.GMenu;
 const Shell = imports.gi.Shell;
@@ -14,10 +15,12 @@ const Mainloop = imports.mainloop;
 const Atk = imports.gi.Atk;
 
 const AppFavorites = imports.ui.appFavorites;
+const BoxPointer = imports.ui.boxpointer;
 const DND = imports.ui.dnd;
 const IconGrid = imports.ui.iconGrid;
 const Main = imports.ui.main;
 const Overview = imports.ui.overview;
+const OverviewControls = imports.ui.overviewControls;
 const PopupMenu = imports.ui.popupMenu;
 const Tweener = imports.ui.tweener;
 const Workspace = imports.ui.workspace;
@@ -27,58 +30,232 @@ const Util = imports.misc.util;
 const MAX_APPLICATION_WORK_MILLIS = 75;
 const MENU_POPUP_TIMEOUT = 600;
 const SCROLL_TIME = 0.1;
+const MAX_COLUMNS = 6;
+
+const INACTIVE_GRID_OPACITY = 77;
+const FOLDER_SUBICON_FRACTION = .4;
+
+
+// Recursively load a GMenuTreeDirectory; we could put this in ShellAppSystem too
+function _loadCategory(dir, view) {
+    let iter = dir.iter();
+    let appSystem = Shell.AppSystem.get_default();
+    let nextType;
+    while ((nextType = iter.next()) != GMenu.TreeItemType.INVALID) {
+        if (nextType == GMenu.TreeItemType.ENTRY) {
+            let entry = iter.get_entry();
+            let app = appSystem.lookup_app_by_tree_entry(entry);
+            if (!entry.get_app_info().get_nodisplay())
+                view.addApp(app);
+        } else if (nextType == GMenu.TreeItemType.DIRECTORY) {
+            let itemDir = iter.get_directory();
+            if (!itemDir.get_is_nodisplay())
+                _loadCategory(itemDir, view);
+        }
+    }
+};
 
 const AlphabeticalView = new Lang.Class({
     Name: 'AlphabeticalView',
+    Abstract: true,
 
     _init: function() {
-        this._grid = new IconGrid.IconGrid({ xAlign: St.Align.START });
-        this._appSystem = Shell.AppSystem.get_default();
+        this._grid = new IconGrid.IconGrid({ xAlign: St.Align.MIDDLE,
+                                             columnLimit: MAX_COLUMNS });
 
-        this._pendingAppLaterId = 0;
-        this._appIcons = {}; // desktop file id
-        this._allApps = [];
+        // Standard hack for ClutterBinLayout
+        this._grid.actor.x_expand = true;
+
+        this._items = {};
+        this._allItems = [];
+    },
+
+    removeAll: function() {
+        this._grid.removeAll();
+        this._items = {};
+        this._allItems = [];
+    },
+
+    _getItemId: function(item) {
+        throw new Error('Not implemented');
+    },
+
+    _createItemIcon: function(item) {
+        throw new Error('Not implemented');
+    },
+
+    _compareItems: function(a, b) {
+        throw new Error('Not implemented');
+    },
+
+    _addItem: function(item) {
+        let id = this._getItemId(item);
+        if (this._items[id] !== undefined)
+            return null;
+
+        let itemIcon = this._createItemIcon(item);
+        this._allItems.push(item);
+        this._items[id] = itemIcon;
+
+        return itemIcon;
+    },
+
+    loadGrid: function() {
+        this._allItems.sort(this._compareItems);
+
+        for (let i = 0; i < this._allItems.length; i++) {
+            let id = this._getItemId(this._allItems[i]);
+            if (!id)
+                continue;
+            this._grid.addItem(this._items[id].actor);
+        }
+    }
+});
+
+const FolderView = new Lang.Class({
+    Name: 'FolderView',
+    Extends: AlphabeticalView,
+
+    _init: function() {
+        this.parent();
+        this.actor = this._grid.actor;
+    },
+
+    _getItemId: function(item) {
+        return item.get_id();
+    },
+
+    _createItemIcon: function(item) {
+        return new AppIcon(item);
+    },
+
+    _compareItems: function(a, b) {
+        return a.compare_by_name(b);
+    },
+
+    addApp: function(app) {
+        this._addItem(app);
+    },
+
+    createFolderIcon: function(size) {
+        let icon = new St.Widget({ layout_manager: new Clutter.BinLayout(),
+                                   style_class: 'app-folder-icon',
+                                   width: size, height: size });
+        let subSize = Math.floor(FOLDER_SUBICON_FRACTION * size);
+
+        let aligns = [ Clutter.ActorAlign.START, Clutter.ActorAlign.END ];
+        for (let i = 0; i < Math.min(this._allItems.length, 4); i++) {
+            let texture = this._allItems[i].create_icon_texture(subSize);
+            let bin = new St.Bin({ child: texture,
+                                   x_expand: true, y_expand: true });
+            bin.set_x_align(aligns[i % 2]);
+            bin.set_y_align(aligns[Math.floor(i / 2)]);
+            icon.add_actor(bin);
+        }
+
+        return icon;
+    }
+});
+
+const AllView = new Lang.Class({
+    Name: 'AllView',
+    Extends: AlphabeticalView,
+
+    _init: function() {
+        this.parent();
 
         let box = new St.BoxLayout({ vertical: true });
-        box.add(this._grid.actor, { y_align: St.Align.START, expand: true });
+        this._stack = new St.Widget({ layout_manager: new Clutter.BinLayout() });
+        this._stack.add_actor(this._grid.actor);
+        this._eventBlocker = new St.Widget({ x_expand: true, y_expand: true });
+        this._stack.add_actor(this._eventBlocker);
+        box.add(this._stack, { y_align: St.Align.START, expand: true });
 
         this.actor = new St.ScrollView({ x_fill: true,
                                          y_fill: false,
                                          y_align: St.Align.START,
-                                         style_class: 'vfade' });
+                                         x_expand: true,
+                                         y_expand: true,
+                                         overlay_scrollbars: true,
+                                         style_class: 'all-apps vfade' });
         this.actor.add_actor(box);
         this.actor.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
         let action = new Clutter.PanAction({ interpolate: true });
         action.connect('pan', Lang.bind(this, this._onPan));
         this.actor.add_action(action);
+
+        this._clickAction = new Clutter.ClickAction();
+        this._clickAction.connect('clicked', Lang.bind(this, function() {
+            if (!this._currentPopup)
+                return;
+
+            let [x, y] = this._clickAction.get_coords();
+            let actor = global.stage.get_actor_at_pos(Clutter.PickMode.ALL, x, y);
+            if (!this._currentPopup.actor.contains(actor))
+                this._currentPopup.popdown();
+        }));
+        this._eventBlocker.add_action(this._clickAction);
     },
 
     _onPan: function(action) {
+        this._clickAction.release();
+
         let [dist, dx, dy] = action.get_motion_delta(0);
         let adjustment = this.actor.vscroll.adjustment;
         adjustment.value -= (dy / this.actor.height) * adjustment.page_size;
         return false;
     },
 
-    removeAll: function() {
-        this._grid.removeAll();
-        this._appIcons = {};
-        this._allApps = [];
+    _getItemId: function(item) {
+        if (item instanceof Shell.App)
+            return item.get_id();
+        else if (item instanceof GMenu.TreeDirectory)
+            return item.get_menu_id();
+        else
+            return null;
+    },
+
+    _createItemIcon: function(item) {
+        if (item instanceof Shell.App)
+            return new AppIcon(item);
+        else if (item instanceof GMenu.TreeDirectory)
+            return new FolderIcon(item, this);
+        else
+            return null;
+    },
+
+    _compareItems: function(itemA, itemB) {
+        // bit of a hack: rely on both ShellApp and GMenuTreeDirectory
+        // having a get_name() method
+        let nameA = GLib.utf8_collate_key(itemA.get_name(), -1);
+        let nameB = GLib.utf8_collate_key(itemB.get_name(), -1);
+        return (nameA > nameB) ? 1 : (nameA < nameB ? -1 : 0);
     },
 
     addApp: function(app) {
-        var id = app.get_id();
-        if (this._appIcons[id] !== undefined)
-            return;
+        let appIcon = this._addItem(app);
+        if (appIcon)
+            appIcon.actor.connect('key-focus-in',
+                                  Lang.bind(this, this._ensureIconVisible));
+    },
 
-        let appIcon = new AppWellIcon(app);
-        let pos = Util.insertSorted(this._allApps, app, function(a, b) {
-            return a.compare_by_name(b);
-        });
-        this._grid.addItem(appIcon.actor, pos);
-        appIcon.actor.connect('key-focus-in', Lang.bind(this, this._ensureIconVisible));
+    addFolder: function(dir) {
+        let folderIcon = this._addItem(dir);
+        if (folderIcon)
+            folderIcon.actor.connect('key-focus-in',
+                                     Lang.bind(this, this._ensureIconVisible));
+    },
 
-        this._appIcons[id] = appIcon;
+    addFolderPopup: function(popup) {
+        this._stack.add_actor(popup.actor);
+        popup.connect('open-state-changed', Lang.bind(this,
+            function(popup, isOpen) {
+                this._eventBlocker.reactive = isOpen;
+                this._currentPopup = isOpen ? popup : null;
+                this._updateIconOpacities(isOpen);
+                if (isOpen)
+                    this._ensureIconVisible(popup.actor);
+            }));
     },
 
     _ensureIconVisible: function(icon) {
@@ -86,9 +263,9 @@ const AlphabeticalView = new Lang.Class({
         let [value, lower, upper, stepIncrement, pageIncrement, pageSize] = adjustment.get_values();
 
         let offset = 0;
-        let vfade = this.actor.get_effect("vfade");
+        let vfade = this.actor.get_effect("fade");
         if (vfade)
-            offset = vfade.fade_offset;
+            offset = vfade.vfade_offset;
 
         // If this gets called as part of a right-click, the actor
         // will be needs_allocation, and so "icon.y" would return 0
@@ -107,175 +284,170 @@ const AlphabeticalView = new Lang.Class({
                            transition: 'easeOutQuad' });
     },
 
-    setVisibleApps: function(apps) {
-        if (apps == null) { // null implies "all"
-            for (var id in this._appIcons) {
-                var icon = this._appIcons[id];
-                icon.actor.visible = true;
-            }
-        } else {
-            // Set everything to not-visible, then set to visible what we should see
-            for (var id in this._appIcons) {
-                var icon = this._appIcons[id];
-                icon.actor.visible = false;
-            }
-            for (var i = 0; i < apps.length; i++) {
-                var app = apps[i];
-                var id = app.get_id();
-                var icon = this._appIcons[id];
-                icon.actor.visible = true;
-            }
+    _updateIconOpacities: function(folderOpen) {
+        for (let id in this._items) {
+            if (folderOpen && !this._items[id].actor.checked)
+                this._items[id].actor.opacity = INACTIVE_GRID_OPACITY;
+            else
+                this._items[id].actor.opacity = 255;
         }
     }
 });
 
-const ViewByCategories = new Lang.Class({
-    Name: 'ViewByCategories',
+const FrequentView = new Lang.Class({
+    Name: 'FrequentView',
+
+    _init: function() {
+        this._grid = new IconGrid.IconGrid({ xAlign: St.Align.MIDDLE,
+                                             fillParent: true,
+                                             columnLimit: MAX_COLUMNS });
+        this.actor = new St.Widget({ style_class: 'frequent-apps',
+                                     x_expand: true, y_expand: true });
+        this.actor.add_actor(this._grid.actor);
+
+        this._usage = Shell.AppUsage.get_default();
+    },
+
+    removeAll: function() {
+        this._grid.removeAll();
+    },
+
+    loadApps: function() {
+        let mostUsed = this._usage.get_most_used ("");
+        for (let i = 0; i < mostUsed.length; i++) {
+            let appIcon = new AppIcon(mostUsed[i]);
+            this._grid.addItem(appIcon.actor, -1);
+        }
+    }
+});
+
+const Views = {
+    FREQUENT: 0,
+    ALL: 1
+};
+
+const AppDisplay = new Lang.Class({
+    Name: 'AppDisplay',
 
     _init: function() {
         this._appSystem = Shell.AppSystem.get_default();
-        this.actor = new St.BoxLayout({ style_class: 'all-app' });
-        this.actor._delegate = this;
+        this._appSystem.connect('installed-changed', Lang.bind(this, function() {
+            Main.queueDeferredWork(this._allAppsWorkId);
+        }));
+        Main.overview.connect('showing', Lang.bind(this, function() {
+            Main.queueDeferredWork(this._frequentAppsWorkId);
+        }));
+        global.settings.connect('changed::app-folder-categories', Lang.bind(this, function() {
+            Main.queueDeferredWork(this._allAppsWorkId);
+        }));
 
-        this._view = new AlphabeticalView();
+        this._views = [];
 
-        // categories can be -1 (the All view) or 0...n-1, where n
-        // is the number of sections
-        // -2 is a flag to indicate that nothing is selected
-        // (used only before the actor is mapped the first time)
-        this._currentCategory = -2;
-        this._categories = [];
+        let view, button;
+        view = new FrequentView();
+        button = new St.Button({ label: _("Frequent"),
+                                 style_class: 'app-view-control',
+                                 can_focus: true,
+                                 x_expand: true });
+        this._views[Views.FREQUENT] = { 'view': view, 'control': button };
 
-        this._categoryBox = new St.BoxLayout({ vertical: true,
-                                               reactive: true,
-                                               accessible_role: Atk.Role.LIST });
-        this._categoryScroll = new St.ScrollView({ x_fill: false,
-                                                   y_fill: false,
-                                                   style_class: 'vfade' });
-        this._categoryScroll.add_actor(this._categoryBox);
-        this._categoryScroll.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
-        this.actor.add(this._view.actor, { expand: true, x_fill: true, y_fill: true });
-        this.actor.add(this._categoryScroll, { expand: false, y_fill: false, y_align: St.Align.START });
+        view = new AllView();
+        button = new St.Button({ label: _("All"),
+                                 style_class: 'app-view-control',
+                                 can_focus: true,
+                                 x_expand: true });
+        this._views[Views.ALL] = { 'view': view, 'control': button };
 
-        // Always select the "All" filter when switching to the app view
-        this.actor.connect('notify::mapped', Lang.bind(this,
-            function() {
-                if (this.actor.mapped && this._allCategoryButton)
-                    this._selectCategory(-1);
-            }));
+        this.actor = new St.BoxLayout({ style_class: 'app-display',
+                                        vertical: true,
+                                        x_expand: true, y_expand: true });
+
+        this._viewStack = new St.Widget({ layout_manager: new Clutter.BinLayout(),
+                                          x_expand: true, y_expand: true });
+        this.actor.add(this._viewStack, { expand: true });
+
+        let layout = new Clutter.BoxLayout({ homogeneous: true });
+        this._controls = new St.Widget({ style_class: 'app-view-controls',
+                                         layout_manager: layout });
+        this.actor.add(new St.Bin({ child: this._controls }));
+
+
+        for (let i = 0; i < this._views.length; i++) {
+            this._viewStack.add_actor(this._views[i].view.actor);
+            this._controls.add_actor(this._views[i].control);
+
+            let viewIndex = i;
+            this._views[i].control.connect('clicked', Lang.bind(this,
+                function(actor) {
+                    this._showView(viewIndex);
+                }));
+        }
+        this._showView(Views.FREQUENT);
 
         // We need a dummy actor to catch the keyboard focus if the
         // user Ctrl-Alt-Tabs here before the deferred work creates
         // our real contents
         this._focusDummy = new St.Bin({ can_focus: true });
-        this.actor.add(this._focusDummy);
+        this._viewStack.add_actor(this._focusDummy);
+
+        this._allAppsWorkId = Main.initializeDeferredWork(this.actor, Lang.bind(this, this._redisplayAllApps));
+        this._frequentAppsWorkId = Main.initializeDeferredWork(this.actor, Lang.bind(this, this._redisplayFrequentApps));
     },
 
-    _selectCategory: function(num) {
-        if (this._currentCategory == num) // nothing to do
-            return;
-
-        this._currentCategory = num;
-
-        if (num != -1) {
-            var category = this._categories[num];
-            this._allCategoryButton.remove_style_pseudo_class('selected');
-            this._view.setVisibleApps(category.apps);
-        } else {
-            this._allCategoryButton.add_style_pseudo_class('selected');
-            this._view.setVisibleApps(null);
-        }
-
-        for (var i = 0; i < this._categories.length; i++) {
-            if (i == num)
-                this._categories[i].button.add_style_pseudo_class('selected');
+    _showView: function(activeIndex) {
+        for (let i = 0; i < this._views.length; i++) {
+            let actor = this._views[i].view.actor;
+            let params = { time: OverviewControls.SIDE_CONTROLS_ANIMATION_TIME,
+                           opacity: (i == activeIndex) ? 255 : 0 };
+            if (i == activeIndex)
+                actor.visible = true;
             else
-                this._categories[i].button.remove_style_pseudo_class('selected');
+                params.onComplete = function() { actor.hide(); };
+            Tweener.addTween(actor, params);
+
+            if (i == activeIndex)
+                this._views[i].control.add_style_pseudo_class('checked');
+            else
+                this._views[i].control.remove_style_pseudo_class('checked');
         }
     },
 
-    // Recursively load a GMenuTreeDirectory; we could put this in ShellAppSystem too
-    _loadCategory: function(dir, appList) {
-        var iter = dir.iter();
-        var nextType;
-        while ((nextType = iter.next()) != GMenu.TreeItemType.INVALID) {
-            if (nextType == GMenu.TreeItemType.ENTRY) {
-                var entry = iter.get_entry();
-                var app = this._appSystem.lookup_app_by_tree_entry(entry);
-                if (!entry.get_app_info().get_nodisplay()) {
-                    this._view.addApp(app);
-                    appList.push(app);
-                }
-            } else if (nextType == GMenu.TreeItemType.DIRECTORY) {
-                var itemDir = iter.get_directory();
-                if (!itemDir.get_is_nodisplay())
-                    this._loadCategory(itemDir, appList);
-            }
-        }
+    _redisplay: function() {
+        this._redisplayFrequentApps();
+        this._redisplayAllApps();
     },
 
-    _addCategory: function(name, index, dir) {
-        let apps;
+    _redisplayFrequentApps: function() {
+        let view = this._views[Views.FREQUENT].view;
 
-        if (dir != null) {
-            apps = [];
-            this._loadCategory(dir, apps);
-
-            if (apps.length == 0)
-                return false;
-        }
-
-        let button = new St.Button({ label: GLib.markup_escape_text (name, -1),
-                                     style_class: 'app-filter',
-                                     x_align: St.Align.START,
-                                     can_focus: true ,
-                                     accessible_role: Atk.Role.LIST_ITEM });
-        button.connect('clicked', Lang.bind(this, function() {
-            this._selectCategory(index);
-        }));
-
-        if (dir == null) {
-            this._allCategoryButton = button;
-        } else {
-            this._categories.push({ apps: apps,
-                                    name: name,
-                                    button: button });
-        }
-
-        this._categoryBox.add(button, { expand: true, x_fill: true, y_fill: false });
-        return true;
+        view.removeAll();
+        view.loadApps();
     },
 
-    _removeAll: function() {
-        this._view.removeAll();
-        this._categories = [];
-        this._categoryBox.destroy_all_children();
-    },
+    _redisplayAllApps: function() {
+        let view = this._views[Views.ALL].view;
 
-    refresh: function() {
-        this._removeAll();
+        view.removeAll();
 
-        /* Translators: Filter to display all applications */
-        this._addCategory(_("All"), -1, null);
+        let tree = this._appSystem.get_tree();
+        let root = tree.get_root_directory();
 
-        var tree = this._appSystem.get_tree();
-        var root = tree.get_root_directory();
-
-        var iter = root.iter();
-        var nextType;
-        var i = 0;
+        let iter = root.iter();
+        let nextType;
+        let folderCategories = global.settings.get_strv('app-folder-categories');
         while ((nextType = iter.next()) != GMenu.TreeItemType.INVALID) {
             if (nextType == GMenu.TreeItemType.DIRECTORY) {
-                var dir = iter.get_directory();
+                let dir = iter.get_directory();
                 if (dir.get_is_nodisplay())
                     continue;
 
-                if (this._addCategory(dir.get_name(), i, dir))
-                    i++;
+                if (folderCategories.indexOf(dir.get_menu_id()) != -1)
+                    view.addFolder(dir);
+                else
+                    _loadCategory(dir, view);
             }
         }
-
-        this._selectCategory(-1);
+        view.loadGrid();
 
         if (this._focusDummy) {
             let focused = this._focusDummy.has_key_focus();
@@ -287,29 +459,6 @@ const ViewByCategories = new Lang.Class({
     }
 });
 
-/* This class represents a display containing a collection of application items.
- * The applications are sorted based on their name.
- */
-const AllAppDisplay = new Lang.Class({
-    Name: 'AllAppDisplay',
-
-    _init: function() {
-        this._appSystem = Shell.AppSystem.get_default();
-        this._appSystem.connect('installed-changed', Lang.bind(this, function() {
-            Main.queueDeferredWork(this._workId);
-        }));
-
-        this._appView = new ViewByCategories();
-        this.actor = new St.Bin({ child: this._appView.actor, x_fill: true, y_fill: true });
-
-        this._workId = Main.initializeDeferredWork(this.actor, Lang.bind(this, this._redisplay));
-    },
-
-    _redisplay: function() {
-        this._appView.refresh();
-    }
-});
-
 const AppSearchProvider = new Lang.Class({
     Name: 'AppSearchProvider',
 
@@ -361,70 +510,163 @@ const AppSearchProvider = new Lang.Class({
 
     createResultActor: function (resultMeta, terms) {
         let app = resultMeta['id'];
-        let icon = new AppWellIcon(app);
+        let icon = new AppIcon(app);
         return icon.actor;
     }
 });
 
-const SettingsSearchProvider = new Lang.Class({
-    Name: 'SettingsSearchProvider',
+const FolderIcon = new Lang.Class({
+    Name: 'FolderIcon',
 
-    _init: function() {
-        this.appInfo = Gio.DesktopAppInfo.new('gnome-control-center.desktop');
-        this._appSys = Shell.AppSystem.get_default();
+    _init: function(dir, parentView) {
+        this._dir = dir;
+        this._parentView = parentView;
+
+        this.actor = new St.Button({ style_class: 'app-well-app app-folder',
+                                     button_mask: St.ButtonMask.ONE,
+                                     toggle_mode: true,
+                                     can_focus: true,
+                                     x_fill: true,
+                                     y_fill: true });
+        this.actor._delegate = this;
+
+        let label = this._dir.get_name();
+        this.icon = new IconGrid.BaseIcon(label,
+                                          { createIcon: Lang.bind(this, this._createIcon) });
+        this.actor.set_child(this.icon.actor);
+        this.actor.label_actor = this.icon.label;
+
+        this.view = new FolderView();
+        this.view.actor.reactive = false;
+        _loadCategory(dir, this.view);
+        this.view.loadGrid();
+
+        this.actor.connect('clicked', Lang.bind(this,
+            function() {
+                this._ensurePopup();
+                this._popup.toggle();
+            }));
+        this.actor.connect('notify::mapped', Lang.bind(this,
+            function() {
+                if (!this.actor.mapped && this._popup)
+                    this._popup.popdown();
+            }));
     },
 
-    getResultMetas: function(prefs, callback) {
-        let metas = [];
-        for (let i = 0; i < prefs.length; i++) {
-            let pref = prefs[i];
-            metas.push({ 'id': pref,
-                         'name': pref.get_name(),
-                         'createIcon': function() { return null; }
-                       });
+    _createIcon: function(size) {
+        return this.view.createFolderIcon(size);
+    },
+
+    _ensurePopup: function() {
+        if (this._popup)
+            return;
+
+        let spaceTop = this.actor.y;
+        let spaceBottom = this._parentView.actor.height - (this.actor.y + this.actor.height);
+        let side = spaceTop > spaceBottom ? St.Side.BOTTOM : St.Side.TOP;
+
+        this._popup = new AppFolderPopup(this, side);
+        this._parentView.addFolderPopup(this._popup);
+
+        // Position the popup above or below the source icon
+        if (side == St.Side.BOTTOM) {
+            this._popup.actor.show();
+            this._popup.actor.y = this.actor.y - this._popup.actor.height;
+            this._popup.actor.hide();
+        } else {
+            this._popup.actor.y = this.actor.y + this.actor.height;
         }
-        callback(metas);
+
+        this._popup.connect('open-state-changed', Lang.bind(this,
+            function(popup, isOpen) {
+                if (!isOpen)
+                    this.actor.checked = false;
+            }));
+    },
+});
+
+const AppFolderPopup = new Lang.Class({
+    Name: 'AppFolderPopup',
+
+    _init: function(source, side) {
+        this._source = source;
+        this._view = source.view;
+        this._arrowSide = side;
+
+        this._isOpen = false;
+
+        this.actor = new St.Widget({ layout_manager: new Clutter.BinLayout(),
+                                     visible: false,
+                                     // We don't want to expand really, but look
+                                     // at the layout manager of our parent...
+                                     //
+                                     // DOUBLE HACK: if you set one, you automatically
+                                     // get the effect for the other direction too, so
+                                     // we need to set the y_align
+                                     x_expand: true,
+                                     y_expand: true,
+                                     x_align: Clutter.ActorAlign.CENTER,
+                                     y_align: Clutter.ActorAlign.START });
+        this._boxPointer = new BoxPointer.BoxPointer(this._arrowSide,
+                                                     { style_class: 'app-folder-popup-bin',
+                                                       x_fill: true,
+                                                       y_fill: true,
+                                                       x_align: St.Align.START });
+
+        this._boxPointer.actor.style_class = 'app-folder-popup';
+        this.actor.add_actor(this._boxPointer.actor);
+        this._boxPointer.bin.set_child(this._view.actor);
+
+        let closeButton = Util.makeCloseButton();
+        closeButton.connect('clicked', Lang.bind(this, this.popdown));
+        this.actor.add_actor(closeButton);
+
+        this._boxPointer.actor.bind_property('opacity', closeButton, 'opacity',
+                                             GObject.BindingFlags.SYNC_CREATE);
+
+        source.actor.connect('destroy', Lang.bind(this,
+            function() {
+                this.actor.destroy();
+            }));
     },
 
-    getInitialResultSet: function(terms) {
-        this.searchSystem.pushResults(this, this._appSys.search_settings(terms));
+    toggle: function() {
+        if (this._isOpen)
+            this.popdown();
+        else
+            this.popup();
     },
 
-    getSubsearchResultSet: function(previousResults, terms) {
-        this.searchSystem.pushResults(this, this._appSys.search_settings(terms));
+    popup: function() {
+        if (this._isOpen)
+            return;
+
+        this.actor.show();
+
+        this._boxPointer.setArrowActor(this._source.actor);
+        this._boxPointer.show(BoxPointer.PopupAnimation.FADE |
+                              BoxPointer.PopupAnimation.SLIDE);
+
+        this._isOpen = true;
+        this.emit('open-state-changed', true);
     },
 
-    activateResult: function(pref) {
-        pref.activate();
-    },
+    popdown: function() {
+        if (!this._isOpen)
+            return;
 
-    launchSearch: function(terms) {
-        // FIXME: this should be a remote search provider
-        this.appInfo.launch([], global.create_app_launch_context());
+        this._boxPointer.hide(BoxPointer.PopupAnimation.FADE |
+                              BoxPointer.PopupAnimation.SLIDE);
+        this._isOpen = false;
+        this.emit('open-state-changed', false);
     }
 });
+Signals.addSignalMethods(AppFolderPopup.prototype);
 
 const AppIcon = new Lang.Class({
     Name: 'AppIcon',
-    Extends: IconGrid.BaseIcon,
 
-    _init : function(app, params) {
-        this.app = app;
-
-        let label = this.app.get_name();
-
-        this.parent(label, params);
-    },
-
-    createIcon: function(iconSize) {
-        return this.app.create_icon_texture(iconSize);
-    }
-});
-
-const AppWellIcon = new Lang.Class({
-    Name: 'AppWellIcon',
-
-    _init : function(app, iconParams, onActivateOverride) {
+    _init : function(app, iconParams) {
         this.app = app;
         this.actor = new St.Button({ style_class: 'app-well-app',
                                      reactive: true,
@@ -434,13 +676,15 @@ const AppWellIcon = new Lang.Class({
                                      y_fill: true });
         this.actor._delegate = this;
 
-        this.icon = new AppIcon(app, iconParams);
+        if (!iconParams)
+            iconParams = {};
+
+        iconParams['createIcon'] = Lang.bind(this, this._createIcon);
+        this.icon = new IconGrid.BaseIcon(app.get_name(), iconParams);
         this.actor.set_child(this.icon.actor);
 
         this.actor.label_actor = this.icon.label;
 
-        // A function callback to override the default "app.activate()"; used by preferences
-        this._onActivateOverride = onActivateOverride;
         this.actor.connect('button-press-event', Lang.bind(this, this._onButtonPress));
         this.actor.connect('clicked', Lang.bind(this, this._onClicked));
         this.actor.connect('popup-menu', Lang.bind(this, this._onKeyboardPopupMenu));
@@ -479,6 +723,10 @@ const AppWellIcon = new Lang.Class({
         this._removeMenuTimeout();
     },
 
+    _createIcon: function(iconSize) {
+        return this.app.create_icon_texture(iconSize);
+    },
+
     _removeMenuTimeout: function() {
         if (this._menuTimeoutId > 0) {
             Mainloop.source_remove(this._menuTimeoutId);
@@ -536,6 +784,7 @@ const AppWellIcon = new Lang.Class({
     popupMenu: function() {
         this._removeMenuTimeout();
         this.actor.fake_release();
+        this._draggable.fakeRelease();
 
         if (!this._menu) {
             this._menu = new AppIconMenu(this);
@@ -577,16 +826,13 @@ const AppWellIcon = new Lang.Class({
         this.emit('launching');
         let modifiers = event.get_state();
 
-        if (this._onActivateOverride) {
-            this._onActivateOverride(event);
+        if (modifiers & Clutter.ModifierType.CONTROL_MASK
+            && this.app.state == Shell.AppState.RUNNING) {
+            this.app.open_new_window(-1);
         } else {
-            if (modifiers & Clutter.ModifierType.CONTROL_MASK
-                && this.app.state == Shell.AppState.RUNNING) {
-                this.app.open_new_window(-1);
-            } else {
-                this.app.activate();
-            }
+            this.app.activate();
         }
+
         Main.overview.hide();
     },
 
@@ -607,7 +853,7 @@ const AppWellIcon = new Lang.Class({
         return this.icon.icon;
     }
 });
-Signals.addSignalMethods(AppWellIcon.prototype);
+Signals.addSignalMethods(AppIcon.prototype);
 
 const AppIconMenu = new Lang.Class({
     Name: 'AppIconMenu',

js/ui/background.js

@@ -0,0 +1,724 @@
+// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
+
+const Clutter = imports.gi.Clutter;
+const GDesktopEnums = imports.gi.GDesktopEnums;
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const GnomeDesktop = imports.gi.GnomeDesktop;
+const Lang = imports.lang;
+const Meta = imports.gi.Meta;
+const Signals = imports.signals;
+
+const Main = imports.ui.main;
+const Params = imports.misc.params;
+const Tweener = imports.ui.tweener;
+
+const BACKGROUND_SCHEMA = 'org.gnome.desktop.background';
+const PRIMARY_COLOR_KEY = 'primary-color';
+const SECONDARY_COLOR_KEY = 'secondary-color';
+const COLOR_SHADING_TYPE_KEY = 'color-shading-type';
+const BACKGROUND_STYLE_KEY = 'picture-options';
+const PICTURE_OPACITY_KEY = 'picture-opacity';
+const PICTURE_URI_KEY = 'picture-uri';
+
+const FADE_ANIMATION_TIME = 1.0;
+
+// These parameters affect how often we redraw.
+// The first is how different (percent crossfaded) the slide show
+// has to look before redrawing and the second is the minimum
+// frequency (in seconds) we're willing to wake up
+const ANIMATION_OPACITY_STEP_INCREMENT = 4.0;
+const ANIMATION_MIN_WAKEUP_INTERVAL = 1.0;
+
+let _backgroundCache = null;
+
+const BackgroundCache = new Lang.Class({
+    Name: 'BackgroundCache',
+
+    _init: function() {
+       this._patterns = [];
+       this._images = [];
+       this._fileMonitors = {};
+    },
+
+    getPatternContent: function(params) {
+        params = Params.parse(params, { monitorIndex: 0,
+                                        color: null,
+                                        secondColor: null,
+                                        shadingType: null,
+                                        effects: Meta.BackgroundEffects.NONE });
+
+        let content = null;
+        let candidateContent = null;
+        for (let i = 0; i < this._patterns.length; i++) {
+            if (!this._patterns[i])
+                continue;
+
+            if (this._patterns[i].get_shading() != params.shadingType)
+                continue;
+
+            if (!params.color.equal(this._patterns[i].get_color()))
+                continue;
+
+            if (params.shadingType != GDesktopEnums.BackgroundShading.SOLID &&
+                !params.secondColor.equal(this._patterns[i].get_second_color()))
+                continue;
+
+            candidateContent = this._patterns[i];
+
+            if (params.effects != this._patterns[i].effects)
+                continue;
+
+            break;
+        }
+
+        if (candidateContent) {
+            content = candidateContent.copy(params.monitorIndex, params.effects);
+        } else {
+            content = new Meta.Background({ meta_screen: global.screen,
+                                            monitor: params.monitorIndex,
+                                            effects: params.effects });
+
+            if (params.shadingType == GDesktopEnums.BackgroundShading.SOLID) {
+                content.load_color(params.color);
+            } else {
+                content.load_gradient(params.shadingType, params.color, params.secondColor);
+            }
+
+            this._patterns.push(content);
+        }
+
+        return content;
+    },
+
+    _monitorFile: function(filename) {
+        if (this._fileMonitors[filename])
+            return;
+
+        let file = Gio.File.new_for_path(filename);
+        let monitor = file.monitor(Gio.FileMonitorFlags.NONE, null);
+
+        let signalId = monitor.connect('changed',
+                                       Lang.bind(this, function() {
+                                           for (let i = 0; i < this._images.length; i++) {
+                                               if (this._images[i].get_filename() == filename)
+                                                   this._images.splice(i, 1);
+                                           }
+
+                                           monitor.disconnect(signalId);
+
+                                           this.emit('file-changed', filename);
+                                       }));
+
+        this._fileMonitors[filename] = monitor;
+    },
+
+    _removeContent: function(contentList, content) {
+        let index = contentList.indexOf(content);
+
+        if (index >= 0)
+            contentList.splice(index, 1);
+    },
+
+    removePatternContent: function(content) {
+        this._removeContent(this._patterns, content);
+    },
+
+    removeImageContent: function(content) {
+        this._removeContent(this._images, content);
+    },
+
+    getImageContent: function(params) {
+        params = Params.parse(params, { monitorIndex: 0,
+                                        style: null,
+                                        filename: null,
+                                        effects: Meta.BackgroundEffects.NONE,
+                                        cancellable: null,
+                                        onFinished: null });
+
+        let content = null;
+        let candidateContent = null;
+        for (let i = 0; i < this._images.length; i++) {
+            if (!this._images[i])
+                continue;
+
+            if (this._images[i].get_style() != params.style)
+                continue;
+
+            if (this._images[i].get_filename() != params.filename)
+                continue;
+
+            if (params.style == GDesktopEnums.BackgroundStyle.SPANNED &&
+                this._images[i].monitor_index != this._monitorIndex)
+                continue;
+
+            candidateContent = this._images[i];
+
+            if (params.effects != this._images[i].effects)
+                continue;
+
+            break;
+        }
+
+        if (candidateContent) {
+            content = candidateContent.copy(params.monitorIndex, params.effects);
+
+            if (params.cancellable && params.cancellable.is_cancelled())
+                content = null;
+
+            if (params.onFinished)
+                params.onFinished(content);
+        } else {
+            content = new Meta.Background({ meta_screen: global.screen,
+                                            monitor: params.monitorIndex,
+                                            effects: params.effects });
+
+            content.load_file_async(params.filename,
+                                    params.style,
+                                    params.cancellable,
+                                    Lang.bind(this,
+                                              function(object, result) {
+                                                  try {
+                                                      content.load_file_finish(result);
+
+                                                      this._monitorFile(params.filename);
+                                                      this._images.push(content);
+                                                  } catch(e) {
+                                                       content = null;
+                                                  }
+
+                                                  if (params.onFinished)
+                                                      params.onFinished(content);
+                                              }));
+        }
+    },
+
+    getAnimation: function(params) {
+        params = Params.parse(params, { filename: null,
+                                        onLoaded: null });
+
+        if (this._animationFilename == params.filename) {
+            if (params.onLoaded) {
+                GLib.idle_add(GLib.PRIORITY_DEFAULT, Lang.bind(this, function() {
+                    params.onLoaded(this._animation);
+                }));
+            }
+        }
+
+        let animation = new Animation({ filename: params.filename });
+
+        animation.load(Lang.bind(this, function() {
+                           this._monitorFile(params.filename);
+                           this._animationFilename = params.filename;
+                           this._animation = animation;
+
+                           if (params.onLoaded) {
+                               GLib.idle_add(GLib.PRIORITY_DEFAULT, Lang.bind(this, function() {
+                                   params.onLoaded(this._animation);
+                               }));
+                           }
+                       }));
+    }
+});
+Signals.addSignalMethods(BackgroundCache.prototype);
+
+function getBackgroundCache() {
+    if (!_backgroundCache)
+        _backgroundCache = new BackgroundCache();
+    return _backgroundCache;
+}
+
+const Background = new Lang.Class({
+    Name: 'Background',
+
+    _init: function(params) {
+        params = Params.parse(params, { monitorIndex: 0,
+                                        layoutManager: Main.layoutManager,
+                                        effects: Meta.BackgroundEffects.NONE });
+        this.actor = new Meta.BackgroundGroup();
+        this.actor._delegate = this;
+
+        this._destroySignalId = this.actor.connect('destroy',
+                                                   Lang.bind(this, this._destroy));
+
+        this._settings = new Gio.Settings({ schema: BACKGROUND_SCHEMA });
+        this._monitorIndex = params.monitorIndex;
+        this._layoutManager = params.layoutManager;
+        this._effects = params.effects;
+        this._fileWatches = {};
+        this._pattern = null;
+        // contains a single image for static backgrounds and
+        // two images (from and to) for slide shows
+        this._images = {};
+
+        this._brightness = 1.0;
+        this._vignetteSharpness = 0.2;
+        this._saturation = 1.0;
+        this._cancellable = new Gio.Cancellable();
+        this.isLoaded = false;
+
+        this._settings.connect('changed', Lang.bind(this, function() {
+                                   this.emit('changed');
+                               }));
+
+        this._load();
+    },
+
+    _destroy: function() {
+        this._cancellable.cancel();
+
+        if (this._animationUpdateTimeoutId) {
+            GLib.source_remove (this._animationUpdateTimeoutId);
+            this._animationUpdateTimeoutId = 0
+        }
+
+        let i;
+        let keys = Object.keys(this._fileWatches);
+        for (i = 0; i < keys.length; i++) {
+            this._cache.disconnect(this._fileWatches[keys[i]]);
+        }
+        this._fileWatches = null;
+
+        if (this._pattern) {
+            if (this._pattern.content)
+                this._cache.removePatternContent(this._pattern.content);
+
+            this._pattern.destroy();
+            this._pattern = null;
+        }
+
+        keys = Object.keys(this._images);
+        for (i = 0; i < keys.length; i++) {
+            let actor = this._images[keys[i]];
+
+            if (actor.content)
+                this._cache.removeImageContent(actor.content);
+
+            actor.destroy();
+            this._images[keys[i]] = null;
+        }
+
+        this.actor.disconnect(this._destroySignalId);
+        this._destroySignalId = 0;
+    },
+
+    _setLoaded: function() {
+        if (this.isLoaded)
+            return;
+
+        this.isLoaded = true;
+
+        GLib.idle_add(GLib.PRIORITY_DEFAULT, Lang.bind(this, function() {
+            this.emit('loaded');
+            return false;
+        }));
+    },
+
+    _loadPattern: function() {
+        let colorString, res, color, secondColor;
+
+        colorString = this._settings.get_string(PRIMARY_COLOR_KEY);
+        [res, color] = Clutter.Color.from_string(colorString);
+        colorString = this._settings.get_string(SECONDARY_COLOR_KEY);
+        [res, secondColor] = Clutter.Color.from_string(colorString);
+
+        let shadingType = this._settings.get_enum(COLOR_SHADING_TYPE_KEY);
+
+        let content = this._cache.getPatternContent({ monitorIndex: this._monitorIndex,
+                                                      effects: this._effects,
+                                                      color: color,
+                                                      secondColor: secondColor,
+                                                      shadingType: shadingType });
+
+        this._pattern = new Meta.BackgroundActor();
+        this.actor.add_child(this._pattern);
+
+        this._pattern.content = content;
+    },
+
+    _watchCacheFile: function(filename) {
+        if (this._fileWatches[filename])
+            return;
+
+        let signalId = this._cache.connect('file-changed',
+                                           Lang.bind(this, function(cache, changedFile) {
+                                               if (changedFile == filename) {
+                                                   this.emit('changed');
+                                               }
+                                           }));
+        this._fileWatches[filename] = signalId;
+    },
+
+    _addImage: function(content, index, filename) {
+        content.saturation = this._saturation;
+        content.brightness = this._brightness;
+        content.vignette_sharpness = this._vignetteSharpness;
+
+        let actor = new Meta.BackgroundActor();
+        actor.content = content;
+        this.actor.add_child(actor);
+
+        this._images[index] = actor;
+        this._watchCacheFile(filename);
+    },
+
+    _updateImage: function(content, index, filename) {
+        content.saturation = this._saturation;
+        content.brightness = this._brightness;
+        content.vignette_sharpness = this._vignetteSharpness;
+
+        this._images[index].content = content;
+        this._watchCacheFile(filename);
+    },
+
+    _updateAnimationProgress: function() {
+        if (this._images[1]) {
+            this._images[1].raise_top();
+            this._images[1].opacity = this._animation.transitionProgress * 255;
+        }
+
+        this._queueAnimationUpdate();
+    },
+
+    _updateAnimation: function() {
+        this._animationUpdateTimeoutId = 0;
+
+        let files = this._animation.getKeyFrameFiles(this._layoutManager.monitors[this._monitorIndex]);
+
+        if (!files) {
+            this._setLoaded();
+            this._queueAnimationUpdate();
+            return;
+        }
+
+        let numPendingImages = files.length;
+        for (let i = 0; i < files.length; i++) {
+            if (this._images[i] && this._images[i].content &&
+                this._images[i].content.get_filename() == files[i]) {
+
+                numPendingImages--;
+                if (numPendingImages == 0)
+                    this._updateAnimationProgress();
+                continue;
+            }
+            this._cache.getImageContent({ monitorIndex: this._monitorIndex,
+                                          effects: this._effects,
+                                          style: this._style,
+                                          filename: files[i],
+                                          cancellable: this._cancellable,
+                                          onFinished: Lang.bind(this, function(content) {
+                                              numPendingImages--;
+
+                                              if (!content) {
+                                                  this._setLoaded();
+                                                  if (numPendingImages == 0)
+                                                      this._updateAnimationProgress();
+                                                  return;
+                                              }
+
+                                              if (!this._images[i]) {
+                                                  this._addImage(content, i, files[i]);
+                                              } else {
+                                                  this._updateImage(content, i, files[i]);
+                                              }
+
+                                              if (numPendingImages == 0) {
+                                                  this._setLoaded();
+                                                  this._updateAnimationProgress();
+                                              }
+                                          })
+                                        });
+        }
+    },
+
+    _queueAnimationUpdate: function() {
+        if (this._animationUpdateTimeoutId != 0)
+            return;
+
+        if (!this._cancellable || this._cancellable.is_cancelled())
+            return;
+
+        if (!this._animation.duration)
+            return;
+
+        let interval = Math.max(ANIMATION_MIN_WAKEUP_INTERVAL * 1000,
+                                ANIMATION_OPACITY_STEP_INCREMENT / this._animation.duration);
+        this._animationUpdateTimeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT,
+                                                      interval,
+                                                      Lang.bind(this, function() {
+                                                                    this._animationUpdateTimeoutId = 0;
+                                                                    this._updateAnimation();
+                                                                    return false;
+                                                                }));
+    },
+
+    _loadAnimation: function(filename) {
+        this._cache.getAnimation({ filename: filename,
+                                             onLoaded: Lang.bind(this, function(animation) {
+                                                 this._animation = animation;
+
+                                                 if (!this._animation || this._cancellable.is_cancelled()) {
+                                                     this._setLoaded();
+                                                     return;
+                                                 }
+
+                                                 this._updateAnimation();
+                                                 this._watchCacheFile(filename);
+                                             })
+                                           });
+    },
+
+    _loadFile: function(filename) {
+        this._cache.getImageContent({ monitorIndex: this._monitorIndex,
+                                      effects: this._effects,
+                                      style: this._style,
+                                      filename: filename,
+                                      cancellable: this._cancellable,
+                                      onFinished: Lang.bind(this, function(content) {
+                                          if (!content) {
+                                              if (!this._cancellable.is_cancelled())
+                                                  this._loadAnimation(filename);
+                                              return;
+                                          }
+
+                                          this._addImage(content, 0, filename);
+                                          this._setLoaded();
+                                      })
+                                    });
+
+    },
+
+    _load: function () {
+        this._cache = getBackgroundCache();
+
+        this._loadPattern(this._cache);
+
+        this._style = this._settings.get_enum(BACKGROUND_STYLE_KEY);
+        if (this._style == GDesktopEnums.BackgroundStyle.NONE) {
+            this._setLoaded();
+            return;
+        }
+
+        let uri = this._settings.get_string(PICTURE_URI_KEY);
+        let filename = Gio.File.new_for_uri(uri).get_path();
+
+        this._loadFile(filename);
+    },
+
+    get saturation() {
+        return this._saturation;
+    },
+
+    set saturation(saturation) {
+        this._saturation = saturation;
+
+        if (this._pattern && this._pattern.content)
+            this._pattern.content.saturation = saturation;
+
+        let keys = Object.keys(this._images);
+        for (let i = 0; i < keys.length; i++) {
+            let image = this._images[keys[i]];
+            if (image && image.content)
+                image.content.saturation = saturation;
+        }
+    },
+
+    get brightness() {
+        return this._brightness;
+    },
+
+    set brightness(factor) {
+        this._brightness = factor;
+        if (this._pattern && this._pattern.content)
+            this._pattern.content.brightness = factor;
+
+        let keys = Object.keys(this._images);
+        for (let i = 0; i < keys.length; i++) {
+            let image = this._images[keys[i]];
+            if (image && image.content)
+                image.content.brightness = factor;
+        }
+    },
+
+    get vignetteSharpness() {
+        return this._vignetteSharpness;
+    },
+
+    set vignetteSharpness(sharpness) {
+        this._vignetteSharpness = sharpness;
+        if (this._pattern && this._pattern.content)
+            this._pattern.content.vignette_sharpness = sharpness;
+
+        let keys = Object.keys(this._images);
+        for (let i = 0; i < keys.length; i++) {
+            let image = this._images[keys[i]];
+            if (image && image.content)
+                image.content.vignette_sharpness = sharpness;
+        }
+    }
+});
+Signals.addSignalMethods(Background.prototype);
+
+const SystemBackground = new Lang.Class({
+    Name: 'SystemBackground',
+
+    _init: function() {
+        this._cache = getBackgroundCache();
+        this.actor = new Meta.BackgroundActor();
+
+        this._cache.getImageContent({ style: GDesktopEnums.BackgroundStyle.WALLPAPER,
+                                      filename: global.datadir + '/theme/noise-texture.png',
+                                      effects: Meta.BackgroundEffects.NONE,
+                                      onFinished: Lang.bind(this, function(content) {
+                                          this.actor.content = content;
+                                          this.emit('loaded');
+                                      })
+                                    });
+    }
+});
+Signals.addSignalMethods(SystemBackground.prototype);
+
+const Animation = new Lang.Class({
+    Name: 'Animation',
+
+    _init: function(params) {
+        params = Params.parse(params, { filename: null });
+
+        this.filename = params.filename;
+        this._keyFrames = [];
+        this.duration = 0.0;
+        this.transitionProgress = 0.0;
+        this.loaded = false;
+    },
+
+    load: function(callback) {
+        let file = Gio.File.new_for_path(this.filename);
+
+        this._show = new GnomeDesktop.BGSlideShow({ filename: this.filename });
+
+        this._show.load_async(null,
+                              Lang.bind(this,
+                                        function(object, result) {
+                                            this.duration = this._show.get_total_duration();
+                                            this.loaded = true;
+                                            if (callback)
+                                                callback();
+                                        }));
+    },
+
+    getKeyFrameFiles: function(monitor) {
+        if (!this._show)
+            return null;
+
+        if (this._show.get_num_slides() < 1)
+            return null;
+
+        let [progress, duration, isFixed, file1, file2] = this._show.get_current_slide(monitor.width, monitor.height);
+
+        this.transitionProgress = progress;
+
+        let files = [];
+
+        if (file1)
+            files.push(file1);
+
+        if (file2)
+            files.push(file2);
+
+        return files;
+    },
+});
+Signals.addSignalMethods(Animation.prototype);
+
+const BackgroundManager = new Lang.Class({
+    Name: 'BackgroundManager',
+
+    _init: function(params) {
+        params = Params.parse(params, { container: null,
+                                        layoutManager: Main.layoutManager,
+                                        monitorIndex: null,
+                                        effects: Meta.BackgroundEffects.NONE,
+                                        controlPosition: true });
+
+        this._container = params.container;
+        this._layoutManager = params.layoutManager;
+        this._effects = params.effects;
+        this._monitorIndex = params.monitorIndex;
+        this._controlPosition = params.controlPosition;
+
+        this.background = this._createBackground();
+        this._newBackground = null;
+        this._loadedSignalId = 0;
+        this._changedSignalId = 0;
+    },
+
+    destroy: function() {
+        if (this._loadedSignalId)
+            this._newBackground.disconnect(this._loadedSignalId);
+
+        if (this._changedSignalId)
+            this.background.disconnect(this._changedSignalId);
+
+        if (this._newBackground) {
+            this._newBackground.actor.destroy();
+            this._newBackground = null;
+        }
+
+        if (this.background) {
+            this.background.actor.destroy();
+            this.background = null;
+        }
+    },
+
+    _updateBackground: function(background, monitorIndex) {
+        let newBackground = this._createBackground(monitorIndex);
+        newBackground.vignetteSharpness = background.vignetteSharpness;
+        newBackground.brightness = background.brightness;
+        newBackground.saturation = background.saturation;
+        newBackground.visible = background.visible;
+
+        let signalId = newBackground.connect('loaded',
+            Lang.bind(this, function() {
+                newBackground.disconnect(signalId);
+                Tweener.addTween(background.actor,
+                                 { opacity: 0,
+                                   time: FADE_ANIMATION_TIME,
+                                   transition: 'easeOutQuad',
+                                   onComplete: Lang.bind(this, function() {
+                                       this.background = newBackground;
+                                       this._newBackground = null;
+                                       background.actor.destroy();
+                                       this.emit('changed');
+                                   })
+                                 });
+        }));
+        this._loadedSignalId = signalId;
+
+        this._newBackground = newBackground;
+    },
+
+    _createBackground: function() {
+        let background = new Background({ monitorIndex: this._monitorIndex,
+                                          layoutManager: this._layoutManager,
+                                          effects: this._effects });
+        this._container.add_child(background.actor);
+
+        let monitor = this._layoutManager.monitors[this._monitorIndex];
+
+        background.actor.set_size(monitor.width, monitor.height);
+        if (this._controlPosition) {
+            background.actor.set_position(monitor.x, monitor.y);
+            background.actor.lower_bottom();
+        }
+
+        let signalId = background.connect('changed', Lang.bind(this, function() {
+            background.disconnect(signalId);
+            this._updateBackground(background, this._monitorIndex);
+        }));
+
+        this._changedSignalId = signalId;
+
+        return background;
+    },
+});
+Signals.addSignalMethods(BackgroundManager.prototype);

js/ui/backgroundMenu.js

@@ -0,0 +1,58 @@
+// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
+
+const Clutter = imports.gi.Clutter;
+const Lang = imports.lang;
+const St = imports.gi.St;
+const Shell = imports.gi.Shell;
+
+const BoxPointer = imports.ui.boxpointer;
+const Main = imports.ui.main;
+const PopupMenu = imports.ui.popupMenu;
+
+const BackgroundMenu = new Lang.Class({
+    Name: 'BackgroundMenu',
+    Extends: PopupMenu.PopupMenu,
+
+    _init: function(source) {
+        this.parent(source, 0, St.Side.TOP);
+
+        this.addSettingsAction(_("Settings"), 'gnome-control-center.desktop');
+        this.addMenuItem(new PopupMenu.PopupSeparatorMenuItem());
+        this.addSettingsAction(_("Change Background…"), 'gnome-background-panel.desktop');
+
+        this.actor.add_style_class_name('background-menu');
+
+        Main.uiGroup.add_actor(this.actor);
+        this.actor.hide();
+    }
+});
+
+function addBackgroundMenu(actor) {
+    let cursor = new St.Bin({ opacity: 0 });
+    Main.uiGroup.add_actor(cursor);
+
+    actor.reactive = true;
+    actor._backgroundMenu = new BackgroundMenu(cursor);
+    actor._backgroundManager = new PopupMenu.PopupMenuManager({ actor: actor });
+    actor._backgroundManager.addMenu(actor._backgroundMenu);
+
+    function openMenu() {
+        let [x, y] = global.get_pointer();
+        cursor.set_position(x, y);
+        actor._backgroundMenu.open(BoxPointer.PopupAnimation.NONE);
+    }
+
+    let clickAction = new Clutter.ClickAction();
+    clickAction.connect('long-press', function(action, actor, state) {
+        if (state == Clutter.LongPressState.QUERY)
+            return action.get_button() == 1 && !actor._backgroundMenu.isOpen;
+        if (state == Clutter.LongPressState.ACTIVATE)
+            openMenu();
+        return true;
+    });
+    clickAction.connect('clicked', function(action) {
+        if (action.get_button() == 3)
+            openMenu();
+    });
+    actor.add_action(clickAction);
+}

js/ui/boxpointer.js

@@ -38,6 +38,7 @@ const BoxPointer = new Lang.Class({
         this._arrowSide = arrowSide;
         this._userArrowSide = arrowSide;
         this._arrowOrigin = 0;
+        this._arrowActor = null;
         this.actor = new St.Bin({ x_fill: true,
                                   y_fill: true });
         this._container = new Shell.GenericContainer();
@@ -228,6 +229,19 @@ const BoxPointer = new Lang.Class({
     _drawBorder: function(area) {
         let themeNode = this.actor.get_theme_node();
 
+        if (this._arrowActor) {
+            let [sourceX, sourceY] = this._arrowActor.get_transformed_position();
+            let [sourceWidth, sourceHeight] = this._arrowActor.get_transformed_size();
+            let [absX, absY] = this.actor.get_transformed_position();
+
+            if (this._arrowSide == St.Side.TOP ||
+                this._arrowSide == St.Side.BOTTOM) {
+                this._arrowOrigin = sourceX - absX + sourceWidth / 2;
+            } else {
+                this._arrowOrigin = sourceY - absY + sourceHeight / 2;
+            }
+        }
+
         let borderWidth = themeNode.get_length('-arrow-border-width');
         let base = themeNode.get_length('-arrow-base');
         let rise = themeNode.get_length('-arrow-rise');
@@ -537,6 +551,16 @@ const BoxPointer = new Lang.Class({
         }
     },
 
+    // @actor: an actor relative to which the arrow is positioned.
+    // Differently from setPosition, this will not move the boxpointer itself,
+    // on the arrow
+    setArrowActor: function(actor) {
+        if (this._arrowActor != actor) {
+            this._arrowActor = actor;
+            this._border.queue_repaint();
+        }
+    },
+
     _shiftActor : function() {
         // Since the position of the BoxPointer depends on the allocated size
         // of the BoxPointer and the position of the source actor, trying

js/ui/calendar.js

@@ -2,6 +2,7 @@
 
 const Clutter = imports.gi.Clutter;
 const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
 const Lang = imports.lang;
 const St = imports.gi.St;
 const Signals = imports.signals;
@@ -62,15 +63,18 @@ function _formatEventTime(event, clockFormat) {
     } else {
         switch (clockFormat) {
         case '24h':
-            /* Translators: Shown in calendar event list, if 24h format */
-            ret = event.date.toLocaleFormat(C_("event list time", "%H:%M"));
+            /* Translators: Shown in calendar event list, if 24h format,
+               \u2236 is a ratio character, similar to : */
+            ret = event.date.toLocaleFormat(C_("event list time", "%H\u2236%M"));
             break;
 
         default:
             /* explicit fall-through */
         case '12h':
-            /* Transators: Shown in calendar event list, if 12h format */
-            ret = event.date.toLocaleFormat(C_("event list time", "%l:%M %p"));
+            /* Transators: Shown in calendar event list, if 12h format,
+               \u2236 is a ratio character, similar to : and \u2009 is
+               a thin space */
+            ret = event.date.toLocaleFormat(C_("event list time", "%l\u2236%M\u2009%p"));
             break;
         }
     }
@@ -193,15 +197,12 @@ const CalendarServerIface = <interface name="org.gnome.Shell.CalendarServer">
 const CalendarServerInfo  = Gio.DBusInterfaceInfo.new_for_xml(CalendarServerIface);
 
 function CalendarServer() {
-    var self = new Gio.DBusProxy({ g_connection: Gio.DBus.session,
-                                   g_interface_name: CalendarServerInfo.name,
-                                   g_interface_info: CalendarServerInfo,
-                                   g_name: 'org.gnome.Shell.CalendarServer',
-                                   g_object_path: '/org/gnome/Shell/CalendarServer',
-                                   g_flags: Gio.DBusProxyFlags.DO_NOT_LOAD_PROPERTIES });
-
-    self.init(null);
-    return self;
+    return new Gio.DBusProxy({ g_connection: Gio.DBus.session,
+                               g_interface_name: CalendarServerInfo.name,
+                               g_interface_info: CalendarServerInfo,
+                               g_name: 'org.gnome.Shell.CalendarServer',
+                               g_object_path: '/org/gnome/Shell/CalendarServer',
+                               g_flags: Gio.DBusProxyFlags.DO_NOT_LOAD_PROPERTIES });
 }
 
 function _datesEqual(a, b) {
@@ -229,14 +230,27 @@ const DBusEventSource = new Lang.Class({
     _init: function() {
         this._resetCache();
 
+        this._initialized = false;
         this._dbusProxy = new CalendarServer();
-        this._dbusProxy.connectSignal('Changed', Lang.bind(this, this._onChanged));
+        this._dbusProxy.init_async(GLib.PRIORITY_DEFAULT, null, Lang.bind(this, function(object, result) {
+            try {
+                this._dbusProxy.init_finish(result);
+            } catch(e) {
+                log('Error loading calendars: ' + e.message);
+                return;
+            }
 
-        this._dbusProxy.connect('notify::g-name-owner', Lang.bind(this, function() {
-            if (this._dbusProxy.g_name_owner)
-                this._onNameAppeared();
-            else
-                this._onNameVanished();
+            this._dbusProxy.connectSignal('Changed', Lang.bind(this, this._onChanged));
+
+            this._dbusProxy.connect('notify::g-name-owner', Lang.bind(this, function() {
+                if (this._dbusProxy.g_name_owner)
+                    this._onNameAppeared();
+                else
+                    this._onNameVanished();
+            }));
+
+            this._initialized = true;
+            this._onNameAppeared();
         }));
     },
 
@@ -283,6 +297,10 @@ const DBusEventSource = new Lang.Class({
     },
 
     _loadEvents: function(forceReload) {
+        // Ignore while loading
+        if (!this._initialized)
+            return;
+
         if (this._curRequestBegin && this._curRequestEnd){
             let callFlags = Gio.DBusCallFlags.NO_AUTO_START;
             if (forceReload)

js/ui/components/autorunManager.js

@@ -4,6 +4,7 @@ const Lang = imports.lang;
 const Gio = imports.gi.Gio;
 const St = imports.gi.St;
 
+const GnomeSession = imports.misc.gnomeSession;
 const Main = imports.ui.main;
 const MessageTray = imports.ui.messageTray;
 const ShellMountOperation = imports.ui.shellMountOperation;
@@ -161,6 +162,7 @@ const AutorunManager = new Lang.Class({
     Name: 'AutorunManager',
 
     _init: function() {
+        this._session = new GnomeSession.SessionManager();
         this._volumeMonitor = Gio.VolumeMonitor.get();
 
         this._transDispatcher = new AutorunTransientDispatcher(this);

js/ui/components/networkAgent.js

@@ -587,18 +587,19 @@ const NetworkAgent = new Lang.Class({
     Name: 'NetworkAgent',
 
     _init: function() {
-        this._native = new Shell.NetworkAgent({ auto_register: false,
-                                                identifier: 'org.gnome.Shell.NetworkAgent' });
+        this._native = new Shell.NetworkAgent({ identifier: 'org.gnome.Shell.NetworkAgent' });
 
         this._dialogs = { };
         this._vpnRequests = { };
 
         this._native.connect('new-request', Lang.bind(this, this._newRequest));
         this._native.connect('cancel-request', Lang.bind(this, this._cancelRequest));
+
+        this._enabled = false;
     },
 
     enable: function() {
-        this._native.auto_register = true;
+        this._enabled = true;
     },
 
     disable: function() {
@@ -612,12 +613,15 @@ const NetworkAgent = new Lang.Class({
             this._vpnRequests[requestId].cancel(true);
         this._vpnRequests = { };
 
-        this._native.auto_register = false;
-        if (this._native.registered)
-            this._native.unregister();
+        this._enabled = false;
     },
 
     _newRequest:  function(agent, requestId, connection, settingName, hints, flags) {
+        if (!this._enabled) {
+            agent.respond(requestId, Shell.NetworkAgentResponse.USER_CANCELED);
+            return;
+        }
+
         if (settingName == 'vpn') {
             this._vpnRequest(requestId, connection, hints, flags);
             return;

js/ui/components/polkitAgent.js

@@ -335,11 +335,19 @@ const AuthenticationAgent = new Lang.Class({
     },
 
     enable: function() {
-        this._native.register();
+        try {
+            this._native.register();
+        } catch(e) {
+            log('Failed to register AuthenticationAgent');
+        }
     },
 
     disable: function() {
-        this._native.unregister();
+        try {
+            this._native.unregister();
+        } catch(e) {
+            log('Failed to unregister AuthenticationAgent');
+        }
     },
 
     _onInitiate: function(nativeAgent, actionId, message, iconName, cookie, userNames) {

js/ui/components/telepathyClient.js

@@ -640,6 +640,10 @@ const ChatSource = new Lang.Class({
         return this._pendingMessages.length;
     },
 
+    get indicatorCount() {
+        return this.count;
+    },
+
     get unseenCount() {
         return this.count;
     },

js/ui/dash.js

@@ -22,11 +22,8 @@ const DASH_ITEM_LABEL_HIDE_TIME = 0.1;
 const DASH_ITEM_HOVER_TIMEOUT = 300;
 
 function getAppFromSource(source) {
-    if (source instanceof AppDisplay.AppWellIcon) {
+    if (source instanceof AppDisplay.AppIcon) {
         return source.app;
-    } else if (source.metaWindow) {
-        let tracker = Shell.WindowTracker.get_default();
-        return tracker.get_window_app(source.metaWindow);
     } else {
         return null;
     }
@@ -36,30 +33,26 @@ function getAppFromSource(source) {
 // when requesting a size
 const DashItemContainer = new Lang.Class({
     Name: 'DashItemContainer',
+    Extends: St.Widget,
 
     _init: function() {
-        this.actor = new Shell.GenericContainer({ style_class: 'dash-item-container' });
-        this.actor.connect('get-preferred-width',
-                           Lang.bind(this, this._getPreferredWidth));
-        this.actor.connect('get-preferred-height',
-                           Lang.bind(this, this._getPreferredHeight));
-        this.actor.connect('allocate',
-                           Lang.bind(this, this._allocate));
-        this.actor._delegate = this;
+        this.parent({ style_class: 'dash-item-container' });
 
         this._labelText = "";
         this.label = new St.Label({ style_class: 'dash-label'});
         this.label.hide();
         Main.layoutManager.addChrome(this.label);
-        this.actor.label_actor = this.label;
+        this.label_actor = this.label;
 
         this.child = null;
-        this._childScale = 1;
-        this._childOpacity = 255;
+        this._childScale = 0;
+        this._childOpacity = 0;
         this.animatingOut = false;
     },
 
-    _allocate: function(actor, box, flags) {
+    vfunc_allocate: function(box, flags) {
+        this.set_allocation(box, flags);
+
         if (this.child == null)
             return;
 
@@ -81,28 +74,28 @@ const DashItemContainer = new Lang.Class({
         this.child.allocate(childBox, flags);
     },
 
-    _getPreferredHeight: function(actor, forWidth, alloc) {
-        alloc.min_size = 0;
-        alloc.natural_size = 0;
+    vfunc_get_preferred_height: function(forWidth) {
+        let themeNode = this.get_theme_node();
 
         if (this.child == null)
-            return;
+            return [0, 0];
 
+        forWidth = themeNode.adjust_for_width(forWidth);
         let [minHeight, natHeight] = this.child.get_preferred_height(forWidth);
-        alloc.min_size += minHeight * this.child.scale_y;
-        alloc.natural_size += natHeight * this.child.scale_y;
+        return themeNode.adjust_preferred_height(minHeight * this.child.scale_y,
+                                                 natHeight * this.child.scale_y);
     },
 
-    _getPreferredWidth: function(actor, forHeight, alloc) {
-        alloc.min_size = 0;
-        alloc.natural_size = 0;
+    vfunc_get_preferred_width: function(forHeight) {
+        let themeNode = this.get_theme_node();
 
         if (this.child == null)
-            return;
+            return [0, 0];
 
+        forHeight = themeNode.adjust_for_height(forHeight);
         let [minWidth, natWidth] = this.child.get_preferred_width(forHeight);
-        alloc.min_size = minWidth * this.child.scale_y;
-        alloc.natural_size = natWidth * this.child.scale_y;
+        return themeNode.adjust_preferred_width(minWidth * this.child.scale_y,
+                                                natWidth * this.child.scale_y);
     },
 
     showLabel: function() {
@@ -113,9 +106,9 @@ const DashItemContainer = new Lang.Class({
         this.label.opacity = 0;
         this.label.show();
 
-        let [stageX, stageY] = this.actor.get_transformed_position();
+        let [stageX, stageY] = this.get_transformed_position();
 
-        let itemHeight = this.actor.allocation.y2 - this.actor.allocation.y1;
+        let itemHeight = this.allocation.y2 - this.allocation.y1;
 
         let labelHeight = this.label.get_height();
         let yOffset = Math.floor((itemHeight - labelHeight) / 2)
@@ -129,7 +122,7 @@ const DashItemContainer = new Lang.Class({
         if (Clutter.get_default_text_direction() == Clutter.TextDirection.RTL)
             x = stageX - this.label.get_width() - xOffset;
         else
-            x = stageX + this.actor.get_width() + xOffset;
+            x = stageX + this.get_width() + xOffset;
 
         this.label.set_position(x, y);
         Tweener.addTween(this.label,
@@ -159,22 +152,25 @@ const DashItemContainer = new Lang.Class({
         if (this.child == actor)
             return;
 
-        this.actor.destroy_all_children();
+        this.destroy_all_children();
 
         this.child = actor;
-        this.actor.add_actor(this.child);
+        this.add_actor(this.child);
+
+        this.child.set_scale_with_gravity(this._childScale, this._childScale,
+                                          Clutter.Gravity.CENTER);
+        this.child.set_opacity(this._childOpacity);
     },
 
-    animateIn: function() {
+    show: function(animate) {
         if (this.child == null)
             return;
 
-        this.childScale = 0;
-        this.childOpacity = 0;
+        let time = animate ? DASH_ANIMATION_TIME : 0;
         Tweener.addTween(this,
                          { childScale: 1.0,
                            childOpacity: 255,
-                           time: DASH_ANIMATION_TIME,
+                           time: time,
                            transition: 'easeOutQuad'
                          });
     },
@@ -183,7 +179,7 @@ const DashItemContainer = new Lang.Class({
         if (this.label)
             this.label.destroy();
 
-        this.actor.destroy();
+        this.parent();
     },
 
     animateOutAndDestroy: function() {
@@ -191,19 +187,18 @@ const DashItemContainer = new Lang.Class({
             this.label.destroy();
 
         if (this.child == null) {
-            this.actor.destroy();
+            this.destroy();
             return;
         }
 
         this.animatingOut = true;
-        this.childScale = 1.0;
         Tweener.addTween(this,
                          { childScale: 0.0,
                            childOpacity: 0,
                            time: DASH_ANIMATION_TIME,
                            transition: 'easeOutQuad',
                            onComplete: Lang.bind(this, function() {
-                               this.actor.destroy();
+                               this.destroy();
                            })
                          });
     },
@@ -216,7 +211,7 @@ const DashItemContainer = new Lang.Class({
 
         this.child.set_scale_with_gravity(scale, scale,
                                           Clutter.Gravity.CENTER);
-        this.actor.queue_relayout();
+        this.queue_relayout();
     },
 
     get childScale() {
@@ -230,7 +225,7 @@ const DashItemContainer = new Lang.Class({
             return;
 
         this.child.set_opacity(opacity);
-        this.actor.queue_redraw();
+        this.queue_redraw();
     },
 
     get childOpacity() {
@@ -361,6 +356,23 @@ const DashActor = new Lang.Class({
         childBox.y1 = contentBox.y2 - showAppsNatHeight;
         childBox.y2 = contentBox.y2;
         showAppsButton.allocate(childBox, flags);
+    },
+
+    vfunc_get_preferred_height: function(forWidth) {
+        // We want to request the natural height of all our children
+        // as our natural height, so we chain up to StWidget (which
+        // then calls BoxLayout), but we only request the showApps
+        // button as the minimum size
+
+        let [, natHeight] = this.parent(forWidth);
+
+        let themeNode = this.get_theme_node();
+        let adjustedForWidth = themeNode.adjust_for_width(forWidth);
+        let [, showAppsButton] = this.get_children();
+        let [minHeight, ] = showAppsButton.get_preferred_height(adjustedForWidth);
+        [minHeight, ] = themeNode.adjust_preferred_height(minHeight, natHeight);
+
+        return [minHeight, natHeight];
     }
 });
 
@@ -386,12 +398,14 @@ const Dash = new Lang.Class({
         this._container.add_actor(this._box);
 
         this._showAppsIcon = new ShowAppsIcon();
+        this._showAppsIcon.childScale = 1;
+        this._showAppsIcon.childOpacity = 255;
         this._showAppsIcon.icon.setIconSize(this.iconSize);
         this._hookUpLabel(this._showAppsIcon);
 
         this.showAppsButton = this._showAppsIcon.toggleButton;
 
-        this._container.add_actor(this._showAppsIcon.actor);
+        this._container.add_actor(this._showAppsIcon);
 
         this.actor = new St.Bin({ child: this._container });
         this.actor.connect('notify::height', Lang.bind(this,
@@ -415,12 +429,10 @@ const Dash = new Lang.Class({
                               Lang.bind(this, this._onDragEnd));
         Main.overview.connect('item-drag-cancelled',
                               Lang.bind(this, this._onDragCancelled));
-        Main.overview.connect('window-drag-begin',
-                              Lang.bind(this, this._onDragBegin));
-        Main.overview.connect('window-drag-cancelled',
-                              Lang.bind(this, this._onDragCancelled));
-        Main.overview.connect('window-drag-end',
-                              Lang.bind(this, this._onDragEnd));
+
+        // Translators: this is the name of the dock/favorites area on
+        // the left of the overview
+        Main.ctrlAltTabManager.addGroup(this.actor, _("Dash"), 'user-bookmarks-symbolic');
     },
 
     _onDragBegin: function() {
@@ -455,7 +467,7 @@ const Dash = new Lang.Class({
             return DND.DragMotionResult.CONTINUE;
 
         let showAppsHovered =
-                this._showAppsIcon.actor.contains(dragEvent.targetActor);
+                this._showAppsIcon.contains(dragEvent.targetActor);
 
         if (!this._box.contains(dragEvent.targetActor) || showAppsHovered)
             this._clearDragPlaceholder();
@@ -491,9 +503,9 @@ const Dash = new Lang.Class({
     },
 
     _createAppItem: function(app) {
-        let appIcon = new AppDisplay.AppWellIcon(app,
-                                                 { setSizeManually: true,
-                                                   showLabel: false });
+        let appIcon = new AppDisplay.AppIcon(app,
+                                             { setSizeManually: true,
+                                               showLabel: false });
         appIcon._draggable.connect('drag-begin',
                                    Lang.bind(this, function() {
                                        appIcon.actor.opacity = 50;
@@ -510,7 +522,7 @@ const Dash = new Lang.Class({
         let item = new DashItemContainer();
         item.setChild(appIcon.actor);
 
-        // Override default AppWellIcon label_actor, now the
+        // Override default AppIcon label_actor, now the
         // accessible_name is set at DashItemContainer.setLabelText
         appIcon.actor.label_actor = null;
         item.setLabelText(app.get_name());
@@ -570,13 +582,13 @@ const Dash = new Lang.Class({
         // animating out (which means they will be destroyed at the end of
         // the animation)
         let iconChildren = this._box.get_children().filter(function(actor) {
-            return actor._delegate.child &&
-                   actor._delegate.child._delegate &&
-                   actor._delegate.child._delegate.icon &&
-                   !actor._delegate.animatingOut;
+            return actor.child &&
+                   actor.child._delegate &&
+                   actor.child._delegate.icon &&
+                   !actor.animatingOut;
         });
 
-        iconChildren.push(this._showAppsIcon.actor);
+        iconChildren.push(this._showAppsIcon);
 
         if (this._maxHeight == -1)
             return;
@@ -589,23 +601,18 @@ const Dash = new Lang.Class({
         let availHeight = maxContent.y2 - maxContent.y1;
         let spacing = themeNode.get_length('spacing');
 
-
-        let firstIcon = iconChildren[0]._delegate.child._delegate.icon;
+        let firstButton = iconChildren[0].child;
+        let firstIcon = firstButton._delegate.icon;
 
         let minHeight, natHeight;
 
-        // Enforce the current icon size during the size request if
-        // the icon is animating
-        if (firstIcon._animating) {
-            let [currentWidth, currentHeight] = firstIcon.icon.get_size();
+        // Enforce the current icon size during the size request
+        let [currentWidth, currentHeight] = firstIcon.icon.get_size();
 
-            firstIcon.icon.set_size(this.iconSize, this.iconSize);
-            [minHeight, natHeight] = iconChildren[0].get_preferred_height(-1);
+        firstIcon.icon.set_size(this.iconSize, this.iconSize);
+        [minHeight, natHeight] = firstButton.get_preferred_height(-1);
 
-            firstIcon.icon.set_size(currentWidth, currentHeight);
-        } else {
-            [minHeight, natHeight] = iconChildren[0].get_preferred_height(-1);
-        }
+        firstIcon.icon.set_size(currentWidth, currentHeight);
 
         // Subtract icon padding and box spacing from the available height
         availHeight -= iconChildren.length * (natHeight - this.iconSize) +
@@ -630,7 +637,7 @@ const Dash = new Lang.Class({
 
         let scale = oldIconSize / newIconSize;
         for (let i = 0; i < iconChildren.length; i++) {
-            let icon = iconChildren[i]._delegate.child._delegate.icon;
+            let icon = iconChildren[i].child._delegate.icon;
 
             // Set the new size immediately, to keep the icons' sizes
             // in sync with this.iconSize
@@ -650,15 +657,11 @@ const Dash = new Lang.Class({
             icon.icon.set_size(icon.icon.width * scale,
                                icon.icon.height * scale);
 
-            icon._animating = true;
             Tweener.addTween(icon.icon,
                              { width: targetWidth,
                                height: targetHeight,
                                time: DASH_ANIMATION_TIME,
                                transition: 'easeOutQuad',
-                               onComplete: function() {
-                                   icon._animating = false;
-                               }
                              });
         }
     },
@@ -669,13 +672,13 @@ const Dash = new Lang.Class({
         let running = this._appSystem.get_running();
 
         let children = this._box.get_children().filter(function(actor) {
-                return actor._delegate.child &&
-                       actor._delegate.child._delegate &&
-                       actor._delegate.child._delegate.app;
+                return actor.child &&
+                       actor.child._delegate &&
+                       actor.child._delegate.app;
             });
         // Apps currently in the dash
         let oldApps = children.map(function(actor) {
-                return actor._delegate.child._delegate.app;
+                return actor.child._delegate.app;
             });
         // Apps supposed to be in the dash
         let newApps = [];
@@ -741,7 +744,7 @@ const Dash = new Lang.Class({
             let insertHere = newApps[newIndex + 1] &&
                              newApps[newIndex + 1] == oldApps[oldIndex];
             let alreadyRemoved = removedActors.reduce(function(result, actor) {
-                let removedApp = actor._delegate.child._delegate.app;
+                let removedApp = actor.child._delegate.app;
                 return result || removedApp == newApps[newIndex];
             }, false);
 
@@ -758,11 +761,11 @@ const Dash = new Lang.Class({
         }
 
         for (let i = 0; i < addedItems.length; i++)
-            this._box.insert_child_at_index(addedItems[i].item.actor,
+            this._box.insert_child_at_index(addedItems[i].item,
                                             addedItems[i].pos);
 
         for (let i = 0; i < removedActors.length; i++) {
-            let item = removedActors[i]._delegate;
+            let item = removedActors[i];
 
             // Don't animate item removal when the overview is transitioning
             // or hidden
@@ -776,18 +779,20 @@ const Dash = new Lang.Class({
 
         // Skip animations on first run when adding the initial set
         // of items, to avoid all items zooming in at once
-        if (!this._shownInitially) {
+
+        let animate = this._shownInitially && Main.overview.visible &&
+            !Main.overview.animationInProgress;
+
+        if (!this._shownInitially)
             this._shownInitially = true;
-            return;
+
+        for (let i = 0; i < addedItems.length; i++) {
+            addedItems[i].item.show(animate);
         }
 
-        // Don't animate item addition when the overview is transitioning
-        // or hidden
-        if (!Main.overview.visible || Main.overview.animationInProgress)
-            return;
-
-        for (let i = 0; i < addedItems.length; i++)
-            addedItems[i].item.animateIn();
+        // Workaround for https://bugzilla.gnome.org/show_bug.cgi?id=692744
+        // Without it, StBoxLayout may use a stale size cache
+        this._box.queue_relayout();
     },
 
     _clearDragPlaceholder: function() {
@@ -818,7 +823,7 @@ const Dash = new Lang.Class({
         // the remove target has the same size as "normal" items, we don't
         // need to do the same adjustment there.
         if (this._dragPlaceholder) {
-            boxHeight -= this._dragPlaceholder.actor.height;
+            boxHeight -= this._dragPlaceholder.height;
             numChildren--;
         }
 
@@ -832,7 +837,7 @@ const Dash = new Lang.Class({
                 if (this._dragPlaceholder) {
                     this._dragPlaceholder.animateOutAndDestroy();
                     this._animatingPlaceholdersCount++;
-                    this._dragPlaceholder.actor.connect('destroy',
+                    this._dragPlaceholder.connect('destroy',
                         Lang.bind(this, function() {
                             this._animatingPlaceholdersCount--;
                         }));
@@ -847,7 +852,7 @@ const Dash = new Lang.Class({
             // an animation
             let fadeIn;
             if (this._dragPlaceholder) {
-                this._dragPlaceholder.actor.destroy();
+                this._dragPlaceholder.destroy();
                 fadeIn = false;
             } else {
                 fadeIn = true;
@@ -856,10 +861,9 @@ const Dash = new Lang.Class({
             this._dragPlaceholder = new DragPlaceholderItem();
             this._dragPlaceholder.child.set_width (this.iconSize);
             this._dragPlaceholder.child.set_height (this.iconSize / 2);
-            this._box.insert_child_at_index(this._dragPlaceholder.actor,
+            this._box.insert_child_at_index(this._dragPlaceholder,
                                             this._dragPlaceholderPos);
-            if (fadeIn)
-                this._dragPlaceholder.animateIn();
+            this._dragPlaceholder.show(fadeIn);
         }
 
         // Remove the drag placeholder if we are not in the
@@ -897,10 +901,10 @@ const Dash = new Lang.Class({
         let children = this._box.get_children();
         for (let i = 0; i < this._dragPlaceholderPos; i++) {
             if (this._dragPlaceholder &&
-                children[i] == this._dragPlaceholder.actor)
+                children[i] == this._dragPlaceholder)
                 continue;
 
-            let childId = children[i]._delegate.child._delegate.app.get_id();
+            let childId = children[i].child._delegate.app.get_id();
             if (childId == id)
                 continue;
             if (childId in favorites)

js/ui/dnd.js

@@ -136,9 +136,10 @@ const _Draggable = new Lang.Class({
     },
 
     _ungrabActor: function() {
-        Clutter.ungrab_pointer();
         if (!this._onEventId)
             return;
+
+        Clutter.ungrab_pointer();
         this.actor.disconnect(this._onEventId);
         this._onEventId = null;
     },
@@ -203,6 +204,19 @@ const _Draggable = new Lang.Class({
         return false;
     },
 
+    /**
+     * fakeRelease:
+     *
+     * Fake a release event.
+     * Must be called if you want to intercept release events on draggable
+     * actors for other purposes (for example if you're using
+     * PopupMenu.ignoreRelease())
+     */
+    fakeRelease: function() {
+        this._buttonDown = false;
+        this._ungrabActor();
+    },
+
     /**
      * startDrag:
      * @stageX: X coordinate of event

js/ui/endSessionDialog.js

@@ -19,6 +19,7 @@
  */
 
 const Lang = imports.lang;
+const Mainloop = imports.mainloop;
 const Signals = imports.signals;
 
 const AccountsService = imports.gi.AccountsService;
@@ -50,6 +51,7 @@ const EndSessionDialogIface = <interface name="org.gnome.SessionManager.EndSessi
     <arg type="u" direction="in" />
     <arg type="ao" direction="in" />
 </method>
+<method name="Close" />
 <signal name="ConfirmedLogout" />
 <signal name="ConfirmedReboot" />
 <signal name="ConfirmedShutdown" />
@@ -377,7 +379,12 @@ const EndSessionDialog = new Lang.Class({
             let signal = dialogContent.confirmButtons[i].signal;
             let label = dialogContent.confirmButtons[i].label;
             buttons.push({ action: Lang.bind(this, function() {
-                                       this._confirm(signal);
+                                       this.close(true);
+                                       let signalId = this.connect('closed',
+                                                                   Lang.bind(this, function() {
+                                                                       this.disconnect(signalId);
+                                                                       this._confirm(signal);
+                                                                   }));
                                    }),
                            label: label });
         }
@@ -385,15 +392,17 @@ const EndSessionDialog = new Lang.Class({
         this.setButtons(buttons);
     },
 
-    close: function() {
+    close: function(skipSignal) {
         this.parent();
-        this._dbusImpl.emit_signal('Closed', null);
+
+        if (!skipSignal)
+            this._dbusImpl.emit_signal('Closed', null);
     },
 
     cancel: function() {
         this._stopTimer();
         this._dbusImpl.emit_signal('Canceled', null);
-        this.close(global.get_current_time());
+        this.close();
     },
 
     _confirm: function(signal) {
@@ -408,22 +417,34 @@ const EndSessionDialog = new Lang.Class({
     },
 
     _startTimer: function() {
+        let startTime = GLib.get_monotonic_time();
         this._secondsLeft = this._totalSecondsToStayOpen;
-        Tweener.addTween(this,
-                         { _secondsLeft: 0,
-                           time: this._secondsLeft,
-                           transition: 'linear',
-                           onUpdate: Lang.bind(this, this._updateDescription),
-                           onComplete: Lang.bind(this, function() {
-                                           let dialogContent = DialogContent[this._type];
-                                           let button = dialogContent.confirmButtons[dialogContent.confirmButtons.length - 1];
-                                           this._confirm(button.signal);
-                                       }),
-                         });
+
+        this._timerId = Mainloop.timeout_add_seconds(1, Lang.bind(this,
+            function() {
+                let currentTime = GLib.get_monotonic_time();
+                let secondsElapsed = ((currentTime - startTime) / 1000000);
+
+                this._secondsLeft = this._totalSecondsToStayOpen - secondsElapsed;
+                if (this._secondsLeft > 0) {
+                    this._updateDescription();
+                    return true;
+                }
+
+                let dialogContent = DialogContent[this._type];
+                let button = dialogContent.confirmButtons[dialogContent.confirmButtons.length - 1];
+                this._confirm(button.signal);
+
+                return false;
+            }));
     },
 
     _stopTimer: function() {
-        Tweener.removeTweens(this);
+        if (this._timerId != 0) {
+            Mainloop.source_remove(this._timerId);
+            this._timerId = 0;
+        }
+
         this._secondsLeft = 0;
     },
 
@@ -440,7 +461,7 @@ const EndSessionDialog = new Lang.Class({
             let item = new ListItem(app, reason);
             item.connect('activate',
                          Lang.bind(this, function() {
-                             this.close(global.get_current_time());
+                             this.close();
                          }));
             this._applicationList.add(item.actor, { x_fill: true });
             this._stopTimer();
@@ -488,5 +509,9 @@ const EndSessionDialog = new Lang.Class({
                                         invocation.return_value(null);
                                         this.disconnect(signalId);
                                     }));
+    },
+
+    Close: function(parameters, invocation) {
+        this.close();
     }
 });

js/ui/extensionDownloader.js

@@ -215,7 +215,7 @@ const InstallExtensionDialog = new Lang.Class({
     },
 
     _onCancelButtonPressed: function(button, event) {
-        this.close(global.get_current_time());
+        this.close();
         this._invocation.return_value(GLib.Variant.new('(s)', ['cancelled']));
     },
 
@@ -257,7 +257,7 @@ const InstallExtensionDialog = new Lang.Class({
             gotExtensionZipFile(session, message, uuid, dir, callback, errback);
         }));
 
-        this.close(global.get_current_time());
+        this.close();
     }
 });
 

js/ui/grabHelper.js

@@ -1,4 +1,4 @@
-/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
+// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 
 const Clutter = imports.gi.Clutter;
 const Gtk = imports.gi.Gtk;
@@ -10,17 +10,6 @@ const St = imports.gi.St;
 const Main = imports.ui.main;
 const Params = imports.misc.params;
 
-function _navigateActor(actor) {
-    if (!actor)
-        return;
-
-    let needsGrab = true;
-    if (actor instanceof St.Widget)
-        needsGrab = !actor.navigate_focus(null, Gtk.DirectionType.TAB_FORWARD, false);
-    if (needsGrab)
-        actor.grab_key_focus();
-}
-
 // GrabHelper:
 // @owner: the actor that owns the GrabHelper
 // @params: optional parameters to pass to Main.pushModal()
@@ -46,6 +35,7 @@ const GrabHelper = new Lang.Class({
         this._keyFocusNotifyId = 0;
         this._focusWindowChangedId = 0;
         this._ignoreRelease = false;
+        this._isUngrabbingCount = 0;
 
         this._modalCount = 0;
         this._grabFocusCount = 0;
@@ -77,7 +67,7 @@ const GrabHelper = new Lang.Class({
     },
 
     _isWithinGrabbedActor: function(actor) {
-       let currentActor = this.currentGrab.actor;
+        let currentActor = this.currentGrab.actor;
         while (actor) {
             if (this._actors.indexOf(actor) != -1)
                 return true;
@@ -178,15 +168,18 @@ const GrabHelper = new Lang.Class({
         if (params.grabFocus && !this._takeFocusGrab(hadFocus))
             return false;
 
-        if (params.focus)
+        this._grabStack.push(params);
+
+        if (params.focus) {
             params.focus.grab_key_focus();
-        else if (hadFocus || params.grabFocus)
-            _navigateActor(newFocus);
+        } else if (newFocus && (hadFocus || params.grabFocus)) {
+            if (!newFocus.navigate_focus(null, Gtk.DirectionType.TAB_FORWARD, false))
+                newFocus.grab_key_focus();
+        }
 
         if ((params.grabFocus || params.modal) && !this._capturedEventId)
             this._capturedEventId = global.stage.connect('captured-event', Lang.bind(this, this._onCapturedEvent));
 
-        this._grabStack.push(params);
         return true;
     },
 
@@ -241,7 +234,7 @@ const GrabHelper = new Lang.Class({
             this._keyFocusNotifyId = 0;
         }
 
-        if (!this._focusWindowChanged > 0) {
+        if (this._focusWindowChangedId > 0) {
             let metaDisplay = global.screen.get_display();
             metaDisplay.disconnect(this._focusWindowChangedId);
             this._focusWindowChangedId = 0;
@@ -283,6 +276,14 @@ const GrabHelper = new Lang.Class({
         if (grabStackIndex < 0)
             return;
 
+        // We may get key focus changes when calling onUngrab, which
+        // would cause an extra ungrab() on the next actor in the
+        // stack, which is wrong. Ignore key focus changes during the
+        // ungrab, and restore the saved key focus ourselves afterwards.
+        // We use a count as ungrab() may be re-entrant, as onUngrab()
+        // may ungrab additional actors.
+        this._isUngrabbingCount++;
+
         let focus = global.stage.key_focus;
         let hadFocus = focus && this._isWithinGrabbedActor(focus);
 
@@ -311,8 +312,11 @@ const GrabHelper = new Lang.Class({
 
         if (hadFocus) {
             let poppedGrab = poppedGrabs[0];
-            _navigateActor(poppedGrab.savedFocus);
+            if (poppedGrab.savedFocus)
+                poppedGrab.savedFocus.grab_key_focus();
         }
+
+        this._isUngrabbingCount--;
     },
 
     _onCapturedEvent: function(actor, event) {
@@ -355,6 +359,9 @@ const GrabHelper = new Lang.Class({
     },
 
     _onKeyFocusChanged: function() {
+        if (this._isUngrabbingCount > 0)
+            return;
+
         let focus = global.stage.key_focus;
         if (!focus || !this._isWithinGrabbedActor(focus))
             this.ungrab({ isUser: true });

js/ui/ibusCandidatePopup.js

@@ -3,107 +3,149 @@
 const Clutter = imports.gi.Clutter;
 const IBus = imports.gi.IBus;
 const Lang = imports.lang;
+const Signals = imports.signals;
 const St = imports.gi.St;
 
 const BoxPointer = imports.ui.boxpointer;
 const Main = imports.ui.main;
-const PopupMenu = imports.ui.popupMenu;
 
 const MAX_CANDIDATES_PER_PAGE = 16;
 
 const CandidateArea = new Lang.Class({
     Name: 'CandidateArea',
-    Extends: PopupMenu.PopupBaseMenuItem,
 
     _init: function() {
-        this.parent({ reactive: false });
-
-        // St.Table exhibits some sizing problems so let's go with a
-        // clutter layout manager for now.
-        this._table = new Clutter.Actor();
-        this.addActor(this._table);
-
-        this._tableLayout = new Clutter.TableLayout();
-        this._table.set_layout_manager(this._tableLayout);
-
-        this._indexLabels = [];
-        this._candidateLabels = [];
+        this.actor = new St.BoxLayout({ vertical: true,
+                                        visible: false });
+        this._candidateBoxes = [];
         for (let i = 0; i < MAX_CANDIDATES_PER_PAGE; ++i) {
-            this._indexLabels.push(new St.Label({ style_class: 'candidate-index' }));
-            this._candidateLabels.push(new St.Label({ style_class: 'candidate-label' }));
+            let box = new St.BoxLayout({ style_class: 'candidate-box',
+                                         reactive: true,
+                                         track_hover: true });
+            box._indexLabel = new St.Label({ style_class: 'candidate-index' });
+            box._candidateLabel = new St.Label({ style_class: 'candidate-label' });
+            box.add(box._indexLabel, { y_fill: false });
+            box.add(box._candidateLabel, { y_fill: false });
+            this._candidateBoxes.push(box);
+            this.actor.add(box);
+
+            let j = i;
+            box.connect('button-release-event', Lang.bind(this, function(actor, event) {
+                this.emit('candidate-clicked', j, event.get_button(), event.get_state());
+            }));
         }
 
+        this._buttonBox = new St.BoxLayout({ style_class: 'candidate-page-button-box' });
+
+        this._previousButton = new St.Button({ style_class: 'candidate-page-button candidate-page-button-previous' });
+        this._previousButton.child = new St.Icon({ style_class: 'candidate-page-button-icon' });
+        this._buttonBox.add(this._previousButton, { expand: true });
+
+        this._nextButton = new St.Button({ style_class: 'candidate-page-button candidate-page-button-next' });
+        this._nextButton.child = new St.Icon({ style_class: 'candidate-page-button-icon' });
+        this._buttonBox.add(this._nextButton, { expand: true });
+
+        this.actor.add(this._buttonBox);
+
+        this._previousButton.connect('clicked', Lang.bind(this, function() {
+            this.emit('previous-page');
+        }));
+        this._nextButton.connect('clicked', Lang.bind(this, function() {
+            this.emit('next-page');
+        }));
+
         this._orientation = -1;
         this._cursorPosition = 0;
     },
 
-    _setOrientation: function(orientation) {
+    setOrientation: function(orientation) {
         if (this._orientation == orientation)
             return;
 
         this._orientation = orientation;
 
-        this._table.remove_all_children();
-
-        if (this._orientation == IBus.Orientation.HORIZONTAL)
-            for (let i = 0; i < MAX_CANDIDATES_PER_PAGE; ++i) {
-                this._tableLayout.pack(this._indexLabels[i], i*2, 0);
-                this._tableLayout.pack(this._candidateLabels[i], i*2 + 1, 0);
-            }
-        else                    // VERTICAL || SYSTEM
-            for (let i = 0; i < MAX_CANDIDATES_PER_PAGE; ++i) {
-                this._tableLayout.pack(this._indexLabels[i], 0, i);
-                this._tableLayout.pack(this._candidateLabels[i], 1, i);
-            }
+        if (this._orientation == IBus.Orientation.HORIZONTAL) {
+            this.actor.vertical = false;
+            this.actor.remove_style_class_name('vertical');
+            this.actor.add_style_class_name('horizontal');
+            this._previousButton.child.icon_name = 'go-previous-symbolic';
+            this._nextButton.child.icon_name = 'go-next-symbolic';
+        } else {                // VERTICAL || SYSTEM
+            this.actor.vertical = true;
+            this.actor.add_style_class_name('vertical');
+            this.actor.remove_style_class_name('horizontal');
+            this._previousButton.child.icon_name = 'go-up-symbolic';
+            this._nextButton.child.icon_name = 'go-down-symbolic';
+        }
     },
 
-    setCandidates: function(indexes, candidates, orientation, cursorPosition, cursorVisible) {
-        this._setOrientation(orientation);
-
+    setCandidates: function(indexes, candidates, cursorPosition, cursorVisible) {
         for (let i = 0; i < MAX_CANDIDATES_PER_PAGE; ++i) {
             let visible = i < candidates.length;
-            this._indexLabels[i].visible = visible;
-            this._candidateLabels[i].visible = visible;
+            let box = this._candidateBoxes[i];
+            box.visible = visible;
 
             if (!visible)
                 continue;
 
-            this._indexLabels[i].text = ((indexes && indexes[i]) ? indexes[i] : '%x.'.format(i + 1));
-            this._candidateLabels[i].text = candidates[i];
+            box._indexLabel.text = ((indexes && indexes[i]) ? indexes[i] : '%x'.format(i + 1));
+            box._candidateLabel.text = candidates[i];
         }
 
-        this._candidateLabels[this._cursorPosition].remove_style_pseudo_class('selected');
+        this._candidateBoxes[this._cursorPosition].remove_style_pseudo_class('selected');
         this._cursorPosition = cursorPosition;
         if (cursorVisible)
-            this._candidateLabels[cursorPosition].add_style_pseudo_class('selected');
+            this._candidateBoxes[cursorPosition].add_style_pseudo_class('selected');
+    },
+
+    updateButtons: function(wrapsAround, page, nPages) {
+        if (nPages < 2) {
+            this._buttonBox.hide();
+            return;
+        }
+        this._buttonBox.show();
+        this._previousButton.reactive = wrapsAround || page > 0;
+        this._nextButton.reactive = wrapsAround || page < nPages - 1;
     },
 });
+Signals.addSignalMethods(CandidateArea.prototype);
 
 const CandidatePopup = new Lang.Class({
     Name: 'CandidatePopup',
-    Extends: PopupMenu.PopupMenu,
 
     _init: function() {
         this._cursor = new St.Bin({ opacity: 0 });
         Main.uiGroup.add_actor(this._cursor);
 
-        this.parent(this._cursor, 0, St.Side.TOP);
-        this.actor.hide();
-        Main.uiGroup.add_actor(this.actor);
+        this._boxPointer = new BoxPointer.BoxPointer(St.Side.TOP);
+        this._boxPointer.actor.visible = false;
+        this._boxPointer.actor.style_class = 'candidate-popup-boxpointer';
+        Main.layoutManager.addChrome(this._boxPointer.actor);
 
-        this._preeditTextItem = new PopupMenu.PopupMenuItem('', { reactive: false });
-        this._preeditTextItem.actor.hide();
-        this.addMenuItem(this._preeditTextItem);
+        let box = new St.BoxLayout({ style_class: 'candidate-popup-content',
+                                     vertical: true });
+        this._boxPointer.bin.set_child(box);
 
-        this._auxTextItem = new PopupMenu.PopupMenuItem('', { reactive: false });
-        this._auxTextItem.actor.hide();
-        this.addMenuItem(this._auxTextItem);
+        this._preeditText = new St.Label({ style_class: 'candidate-popup-text',
+                                           visible: false });
+        box.add(this._preeditText);
 
-        this.addMenuItem(new PopupMenu.PopupSeparatorMenuItem());
+        this._auxText = new St.Label({ style_class: 'candidate-popup-text',
+                                       visible: false });
+        box.add(this._auxText);
 
-        this._lookupTableItem = new CandidateArea();
-        this._lookupTableItem.actor.hide();
-        this.addMenuItem(this._lookupTableItem);
+        this._candidateArea = new CandidateArea();
+        box.add(this._candidateArea.actor);
+
+        this._candidateArea.connect('previous-page', Lang.bind(this, function() {
+            this._panelService.page_up();
+        }));
+        this._candidateArea.connect('next-page', Lang.bind(this, function() {
+            this._panelService.page_down();
+        }));
+        this._candidateArea.connect('candidate-clicked', Lang.bind(this, function(ca, index, button, state) {
+            this._panelService.candidate_clicked(index, button, state);
+        }));
 
         this._panelService = null;
     },
@@ -117,66 +159,61 @@ const CandidatePopup = new Lang.Class({
                              Lang.bind(this, function(ps, x, y, w, h) {
                                  this._cursor.set_position(x, y);
                                  this._cursor.set_size(w, h);
+                                 if (this._boxPointer.actor.visible)
+                                     this._boxPointer.setPosition(this._cursor, 0);
                              }));
         panelService.connect('update-preedit-text',
                              Lang.bind(this, function(ps, text, cursorPosition, visible) {
-                                 if (visible)
-                                     this._preeditTextItem.actor.show();
-                                 else
-                                     this._preeditTextItem.actor.hide();
+                                 this._preeditText.visible = visible;
                                  this._updateVisibility();
 
-                                 this._preeditTextItem.actor.label_actor.text = text.get_text();
+                                 this._preeditText.text = text.get_text();
 
                                  let attrs = text.get_attributes();
                                  if (attrs)
-                                     this._setTextAttributes(this._preeditTextItem.actor.label_actor.clutter_text,
+                                     this._setTextAttributes(this._preeditText.clutter_text,
                                                              attrs);
                              }));
         panelService.connect('show-preedit-text',
                              Lang.bind(this, function(ps) {
-                                 this._preeditTextItem.actor.show();
+                                 this._preeditText.show();
                                  this._updateVisibility();
                              }));
         panelService.connect('hide-preedit-text',
                              Lang.bind(this, function(ps) {
-                                 this._preeditTextItem.actor.hide();
+                                 this._preeditText.hide();
                                  this._updateVisibility();
                              }));
         panelService.connect('update-auxiliary-text',
                              Lang.bind(this, function(ps, text, visible) {
-                                 if (visible)
-                                     this._auxTextItem.actor.show();
-                                 else
-                                     this._auxTextItem.actor.hide();
+                                 this._auxText.visible = visible;
                                  this._updateVisibility();
 
-                                 this._auxTextItem.actor.label_actor.text = text.get_text();
+                                 this._auxText.text = text.get_text();
                              }));
         panelService.connect('show-auxiliary-text',
                              Lang.bind(this, function(ps) {
-                                 this._auxTextItem.actor.show();
+                                 this._auxText.show();
                                  this._updateVisibility();
                              }));
         panelService.connect('hide-auxiliary-text',
                              Lang.bind(this, function(ps) {
-                                 this._auxTextItem.actor.hide();
+                                 this._auxText.hide();
                                  this._updateVisibility();
                              }));
         panelService.connect('update-lookup-table',
                              Lang.bind(this, function(ps, lookupTable, visible) {
-                                 if (visible)
-                                     this._lookupTableItem.actor.show();
-                                 else
-                                     this._lookupTableItem.actor.hide();
+                                 this._candidateArea.actor.visible = visible;
                                  this._updateVisibility();
 
+                                 let nCandidates = lookupTable.get_number_of_candidates();
                                  let cursorPos = lookupTable.get_cursor_pos();
                                  let pageSize = lookupTable.get_page_size();
+                                 let nPages = Math.ceil(nCandidates / pageSize);
                                  let page = ((cursorPos == 0) ? 0 : Math.floor(cursorPos / pageSize));
                                  let startIndex = page * pageSize;
-                                 let endIndex = Math.min((page + 1) * pageSize,
-                                                         lookupTable.get_number_of_candidates());
+                                 let endIndex = Math.min((page + 1) * pageSize, nCandidates);
+
                                  let indexes = [];
                                  let indexLabel;
                                  for (let i = 0; indexLabel = lookupTable.get_label(i); ++i)
@@ -186,37 +223,41 @@ const CandidatePopup = new Lang.Class({
                                  for (let i = startIndex; i < endIndex; ++i)
                                      candidates.push(lookupTable.get_candidate(i).get_text());
 
-                                 this._lookupTableItem.setCandidates(indexes,
-                                                                     candidates,
-                                                                     lookupTable.get_orientation(),
-                                                                     cursorPos % pageSize,
-                                                                     lookupTable.is_cursor_visible());
+                                 this._candidateArea.setCandidates(indexes,
+                                                                   candidates,
+                                                                   cursorPos % pageSize,
+                                                                   lookupTable.is_cursor_visible());
+                                 this._candidateArea.setOrientation(lookupTable.get_orientation());
+                                 this._candidateArea.updateButtons(lookupTable.is_round(), page, nPages);
                              }));
         panelService.connect('show-lookup-table',
                              Lang.bind(this, function(ps) {
-                                 this._lookupTableItem.actor.show();
+                                 this._candidateArea.actor.show();
                                  this._updateVisibility();
                              }));
         panelService.connect('hide-lookup-table',
                              Lang.bind(this, function(ps) {
-                                 this._lookupTableItem.actor.hide();
+                                 this._candidateArea.actor.hide();
                                  this._updateVisibility();
                              }));
         panelService.connect('focus-out',
                              Lang.bind(this, function(ps) {
-                                 this.close(BoxPointer.PopupAnimation.NONE);
+                                 this._boxPointer.hide(BoxPointer.PopupAnimation.NONE);
                              }));
     },
 
     _updateVisibility: function() {
-        let isVisible = (this._preeditTextItem.actor.visible ||
-                         this._auxTextItem.actor.visible ||
-                         this._lookupTableItem.actor.visible);
+        let isVisible = (this._preeditText.visible ||
+                         this._auxText.visible ||
+                         this._candidateArea.actor.visible);
 
-        if (isVisible)
-            this.open(BoxPointer.PopupAnimation.NONE);
-        else
-            this.close(BoxPointer.PopupAnimation.NONE);
+        if (isVisible) {
+            this._boxPointer.setPosition(this._cursor, 0);
+            this._boxPointer.show(BoxPointer.PopupAnimation.NONE);
+            this._boxPointer.actor.raise_top();
+        } else {
+            this._boxPointer.hide(BoxPointer.PopupAnimation.NONE);
+        }
     },
 
     _setTextAttributes: function(clutterText, ibusAttrList) {

js/ui/iconGrid.js

@@ -176,13 +176,16 @@ const IconGrid = new Lang.Class({
     _init: function(params) {
         params = Params.parse(params, { rowLimit: null,
                                         columnLimit: null,
+                                        fillParent: false,
                                         xAlign: St.Align.MIDDLE });
         this._rowLimit = params.rowLimit;
         this._colLimit = params.columnLimit;
         this._xAlign = params.xAlign;
+        this._fillParent = params.fillParent;
 
         this.actor = new St.BoxLayout({ style_class: 'icon-grid',
                                         vertical: true });
+
         // Pulled from CSS, but hardcode some defaults here
         this._spacing = 0;
         this._hItemSize = this._vItemSize = ICON_SIZE;
@@ -196,6 +199,11 @@ const IconGrid = new Lang.Class({
     },
 
     _getPreferredWidth: function (grid, forHeight, alloc) {
+        if (this._fillParent)
+            // Ignore all size requests of children and request a size of 0;
+            // later we'll allocate as many children as fit the parent
+            return;
+
         let children = this._grid.get_children();
         let nColumns = this._colLimit ? Math.min(this._colLimit,
                                                  children.length)
@@ -217,12 +225,20 @@ const IconGrid = new Lang.Class({
     },
 
     _getPreferredHeight: function (grid, forWidth, alloc) {
+        if (this._fillParent)
+            // Ignore all size requests of children and request a size of 0;
+            // later we'll allocate as many children as fit the parent
+            return;
+
         let children = this._getVisibleChildren();
-        let nColumns;
-        if (forWidth < 0)
+        let nColumns, spacing;
+        if (forWidth < 0) {
             nColumns = children.length;
-        else
-            nColumns = this._computeLayout(forWidth)[0];
+            spacing = this._spacing;
+        } else {
+            [nColumns, , spacing] = this._computeLayout(forWidth);
+        }
+
         let nRows;
         if (nColumns > 0)
             nRows = Math.ceil(children.length / nColumns);
@@ -230,18 +246,25 @@ const IconGrid = new Lang.Class({
             nRows = 0;
         if (this._rowLimit)
             nRows = Math.min(nRows, this._rowLimit);
-        let totalSpacing = Math.max(0, nRows - 1) * this._spacing;
+        let totalSpacing = Math.max(0, nRows - 1) * spacing;
         let height = nRows * this._vItemSize + totalSpacing;
         alloc.min_size = height;
         alloc.natural_size = height;
     },
 
     _allocate: function (grid, box, flags) {
+        if (this._fillParent) {
+            // Reset the passed in box to fill the parent
+            let parentBox = this.actor.get_parent().allocation;
+            let gridBox = this.actor.get_theme_node().get_content_box(parentBox);
+            box = this._grid.get_theme_node().get_content_box(gridBox);
+        }
+
         let children = this._getVisibleChildren();
         let availWidth = box.x2 - box.x1;
         let availHeight = box.y2 - box.y1;
 
-        let [nColumns, usedWidth] = this._computeLayout(availWidth);
+        let [nColumns, usedWidth, spacing] = this._computeLayout(availWidth);
 
         let leftPadding;
         switch(this._xAlign) {
@@ -280,7 +303,8 @@ const IconGrid = new Lang.Class({
             childBox.x2 = childBox.x1 + width;
             childBox.y2 = childBox.y1 + height;
 
-            if (this._rowLimit && rowIndex >= this._rowLimit) {
+            if (this._rowLimit && rowIndex >= this._rowLimit ||
+                this._fillParent && childBox.y2 > availHeight) {
                 this._grid.set_skip_paint(children[i], true);
             } else {
                 children[i].allocate(childBox, flags);
@@ -294,10 +318,10 @@ const IconGrid = new Lang.Class({
             }
 
             if (columnIndex == 0) {
-                y += this._vItemSize + this._spacing;
+                y += this._vItemSize + spacing;
                 x = box.x1 + leftPadding;
             } else {
-                x += this._hItemSize + this._spacing;
+                x += this._hItemSize + spacing;
             }
         }
     },
@@ -313,16 +337,25 @@ const IconGrid = new Lang.Class({
     _computeLayout: function (forWidth) {
         let nColumns = 0;
         let usedWidth = 0;
+        let spacing = this._spacing;
+
+        if (this._colLimit) {
+            let itemWidth = this._hItemSize * this._colLimit;
+            let emptyArea = forWidth - itemWidth;
+            spacing = Math.max(this._spacing, emptyArea / (2 * this._colLimit));
+            spacing = Math.round(spacing);
+        }
+
         while ((this._colLimit == null || nColumns < this._colLimit) &&
                (usedWidth + this._hItemSize <= forWidth)) {
-            usedWidth += this._hItemSize + this._spacing;
+            usedWidth += this._hItemSize + spacing;
             nColumns += 1;
         }
 
         if (nColumns > 0)
-            usedWidth -= this._spacing;
+            usedWidth -= spacing;
 
-        return [nColumns, usedWidth];
+        return [nColumns, usedWidth, spacing];
     },
 
     _onStyleChanged: function() {

js/ui/keyboard.js

@@ -176,25 +176,19 @@ const Keyboard = new Lang.Class({
         if (this._keyboard)
             this._destroyKeyboard();
 
-        if (this._enableKeyboard) {
-            // If we've been called because the setting actually just
-            // changed to true (as opposed to being called from
-            // this._init()), then we want to pop up the keyboard.
-            let showKeyboard = (settings != null);
-
-            // However, caribou-gtk-module or this._onKeyFocusChanged
-            // will probably immediately tell us to hide it, so we
-            // have to fake things out so we'll ignore that request.
-            if (showKeyboard)
-                this._timestamp = global.display.get_current_time_roundtrip() + 1;
-            this._setupKeyboard(showKeyboard);
-        } else
+        if (this._enableKeyboard)
+            this._setupKeyboard();
+        else
             Main.layoutManager.hideKeyboard(true);
     },
 
     _destroyKeyboard: function() {
         if (this._keyboardNotifyId)
             this._keyboard.disconnect(this._keyboardNotifyId);
+        if (this._keyboardGroupAddedId)
+            this._keyboard.disconnect(this._keyboardGroupAddedId);
+        if (this._keyboardGroupRemovedId)
+            this._keyboard.disconnect(this._keyboardGroupRemovedId);
         if (this._focusNotifyId)
             global.stage.disconnect(this._focusNotifyId);
         this._keyboard = null;
@@ -204,7 +198,7 @@ const Keyboard = new Lang.Class({
         this._destroySource();
     },
 
-    _setupKeyboard: function(show) {
+    _setupKeyboard: function() {
         this.actor = new St.BoxLayout({ name: 'keyboard', vertical: true, reactive: true });
         Main.layoutManager.keyboardBox.add_actor(this.actor);
         Main.layoutManager.trackChrome(this.actor);
@@ -225,12 +219,11 @@ const Keyboard = new Lang.Class({
         this.actor.text_direction = Clutter.TextDirection.LTR;
 
         this._keyboardNotifyId = this._keyboard.connect('notify::active-group', Lang.bind(this, this._onGroupChanged));
+        this._keyboardGroupAddedId = this._keyboard.connect('group-added', Lang.bind(this, this._onGroupAdded));
+        this._keyboardGroupRemovedId = this._keyboard.connect('group-removed', Lang.bind(this, this._onGroupRemoved));
         this._focusNotifyId = global.stage.connect('notify::key-focus', Lang.bind(this, this._onKeyFocusChanged));
 
-        if (show)
-            this.show(Main.layoutManager.focusIndex);
-        else
-            this._createSource();
+        this._createSource();
     },
 
     _onKeyFocusChanged: function () {
@@ -260,58 +253,35 @@ const Keyboard = new Lang.Class({
                                              Lang.bind(this, function() { this.Show(time); }));
     },
 
+    _createLayersForGroup: function (gname) {
+        let group = this._keyboard.get_group(gname);
+        group.connect('notify::active-level', Lang.bind(this, this._onLevelChanged));
+        let layers = {};
+        let levels = group.get_levels();
+        for (let j = 0; j < levels.length; ++j) {
+            let lname = levels[j];
+            let level = group.get_level(lname);
+            let layout = new St.BoxLayout({ style_class: 'keyboard-layout',
+                                                 vertical: true });
+            this._loadRows(level, layout);
+            layers[lname] = layout;
+            this.actor.add(layout, { x_fill: false });
+
+            layout.hide();
+        }
+        return layers;
+    },
+
     _addKeys: function () {
         let groups = this._keyboard.get_groups();
         for (let i = 0; i < groups.length; ++i) {
              let gname = groups[i];
-             let group = this._keyboard.get_group(gname);
-             group.connect('notify::active-level', Lang.bind(this, this._onLevelChanged));
-             let layers = {};
-             let levels = group.get_levels();
-             for (let j = 0; j < levels.length; ++j) {
-                 let lname = levels[j];
-                 let level = group.get_level(lname);
-                 let layout = new St.BoxLayout({ style_class: 'keyboard-layout',
-                                                 vertical: true });
-                 this._loadRows(level, layout);
-                 layers[lname] = layout;
-                 this.actor.add(layout, { x_fill: false });
-
-                 layout.hide();
-             }
-             this._groups[gname] = layers;
+             this._groups[gname] = this._createLayersForGroup(gname);
         }
 
         this._setActiveLayer();
     },
 
-    _getTrayIcon: function () {
-        let trayButton = new St.Button ({ label: _("tray"),
-                                          style_class: 'keyboard-key' });
-        trayButton.key_width = 1;
-        trayButton.connect('button-press-event', Lang.bind(this, function () {
-            Main.messageTray.toggle();
-        }));
-
-        Main.overview.connect('showing', Lang.bind(this, function () {
-            trayButton.reactive = false;
-            trayButton.add_style_pseudo_class('grayed');
-        }));
-        Main.overview.connect('hiding', Lang.bind(this, function () {
-            trayButton.reactive = true;
-            trayButton.remove_style_pseudo_class('grayed');
-        }));
-        Main.sessionMode.connect('updated', Lang.bind(this, function() {
-            trayButton.reactive = !Main.sessionMode.isLocked;
-            if (Main.sessionMode.isLocked)
-                trayButton.add_style_pseudo_class('grayed');
-            else
-                trayButton.remove_style_pseudo_class('grayed');
-        }));
-
-        return trayButton;
-    },
-
     _onCapturedEvent: function(actor, event) {
         let type = event.type();
         let press = type == Clutter.EventType.BUTTON_PRESS;
@@ -329,23 +299,29 @@ const Keyboard = new Lang.Class({
         let keyboard_row = new St.BoxLayout();
         for (let i = 0; i < keys.length; ++i) {
             let children = keys[i].get_children();
-            let right_box = new St.BoxLayout({ style_class: 'keyboard-row' });
             let left_box = new St.BoxLayout({ style_class: 'keyboard-row' });
+            let center_box = new St.BoxLayout({ style_class: 'keyboard-row' });
+            let right_box = new St.BoxLayout({ style_class: 'keyboard-row' });
             for (let j = 0; j < children.length; ++j) {
                 if (this._numOfHorizKeys == 0)
                     this._numOfHorizKeys = children.length;
                 let key = children[j];
                 let button = new Key(key);
 
-                if (key.align == 'right')
+                switch (key.align) {
+                case 'right':
                     right_box.add(button.actor);
-                else
+                    break;
+                case 'center':
+                    center_box.add(button.actor);
+                    break;
+                case 'left':
+                default:
                     left_box.add(button.actor);
+                    break;
+                }
                 if (key.name == 'Caribou_Prefs') {
                     key.connect('key-released', Lang.bind(this, this.hide));
-
-                    // Add new key for hiding message tray
-                    right_box.add(this._getTrayIcon());
                 }
 
                 button.connect('show-subkeys', Lang.bind(this, function() {
@@ -362,6 +338,7 @@ const Keyboard = new Lang.Class({
                 }));
             }
             keyboard_row.add(left_box, { expand: true, x_fill: false, x_align: St.Align.START });
+            keyboard_row.add(center_box, { expand: true, x_fill: false, x_align: St.Align.MIDDLE });
             keyboard_row.add(right_box, { expand: true, x_fill: false, x_align: St.Align.END });
         }
         layout.add(keyboard_row);
@@ -434,6 +411,14 @@ const Keyboard = new Lang.Class({
         this._redraw();
     },
 
+    _onGroupAdded: function (keyboard, gname) {
+        this._groups[gname] = this._createLayersForGroup(gname);
+    },
+
+    _onGroupRemoved: function (keyboard, gname) {
+        delete this._groups[gname];
+    },
+
     _setActiveLayer: function () {
         let active_group_name = this._keyboard.active_group;
         let active_group = this._keyboard.get_group(active_group_name);

js/ui/lookingGlass.js

@@ -685,7 +685,8 @@ const Memory = new Lang.Class({
 const Extensions = new Lang.Class({
     Name: 'Extensions',
 
-    _init: function() {
+    _init: function(lookingGlass) {
+        this._lookingGlass = lookingGlass;
         this.actor = new St.BoxLayout({ vertical: true,
                                         name: 'lookingGlassExtensions' });
         this._noExtensions = new St.Label({ style_class: 'lg-extensions-none',
@@ -912,7 +913,7 @@ const LookingGlass = new Lang.Class({
         this._memory = new Memory();
         notebook.appendPage('Memory', this._memory.actor);
 
-        this._extensions = new Extensions();
+        this._extensions = new Extensions(this);
         notebook.appendPage('Extensions', this._extensions.actor);
 
         this._entry.clutter_text.connect('activate', Lang.bind(this, function (o, e) {
@@ -950,9 +951,7 @@ const LookingGlass = new Lang.Class({
 
     _updateFont: function() {
         let fontName = this._interfaceSettings.get_string('monospace-font-name');
-        // This is mishandled by the scanner - should by Pango.FontDescription_from_string(fontName);
-        // https://bugzilla.gnome.org/show_bug.cgi?id=595889
-        let fontDesc = Pango.font_description_from_string(fontName);
+        let fontDesc = Pango.FontDescription.from_string(fontName);
         // We ignore everything but size and style; you'd be crazy to set your system-wide
         // monospace font to be bold/oblique/etc. Could easily be added here.
         this.actor.style =

js/ui/main.js

@@ -18,6 +18,7 @@ const ExtensionSystem = imports.ui.extensionSystem;
 const ExtensionDownloader = imports.ui.extensionDownloader;
 const Keyboard = imports.ui.keyboard;
 const MessageTray = imports.ui.messageTray;
+const OsdWindow = imports.ui.osdWindow;
 const Overview = imports.ui.overview;
 const Panel = imports.ui.panel;
 const Params = imports.misc.params;
@@ -51,6 +52,7 @@ let screenShield = null;
 let notificationDaemon = null;
 let windowAttentionHandler = null;
 let ctrlAltTabManager = null;
+let osdWindow = null;
 let sessionMode = null;
 let shellDBusService = null;
 let shellMountOpDBusService = null;
@@ -89,12 +91,24 @@ function start() {
     global.logError = window.log;
     global.log = window.log;
 
+    // Hide the stage until we're ready for it
+    global.stage.hide();
+
     // Chain up async errors reported from C
     global.connect('notify-error', function (global, msg, detail) { notifyError(msg, detail); });
 
     Gio.DesktopAppInfo.set_desktop_env('GNOME');
 
     sessionMode = new SessionMode.SessionMode();
+
+    // start session after we know what mode we're running in
+    let signalId = sessionMode.connect('updated', function() {
+                                           sessionMode.disconnect(signalId);
+                                           startSession();
+                                       });
+}
+
+function startSession() {
     sessionMode.connect('updated', _loadDefaultStylesheet);
 
     shellDBusService = new ShellDBus.GnomeShell();
@@ -113,39 +127,19 @@ function start() {
 
     tracker.connect('startup-sequence-changed', _queueCheckWorkspaces);
 
-    // The stage is always covered so Clutter doesn't need to clear it; however
-    // the color is used as the default contents for the Mutter root background
-    // actor so set it anyways.
-    global.stage.color = DEFAULT_BACKGROUND_COLOR;
-    global.stage.no_clear_hint = true;
-
     _loadDefaultStylesheet();
 
-    // Set up stage hierarchy to group all UI actors under one container.
-    uiGroup = new Shell.GenericContainer({ name: 'uiGroup' });
-    uiGroup.connect('allocate',
-                    function (actor, box, flags) {
-                        let children = uiGroup.get_children();
-                        for (let i = 0; i < children.length; i++)
-                            children[i].allocate_preferred_size(flags);
-                    });
-    uiGroup.connect('get-preferred-width',
-                    function(actor, forHeight, alloc) {
-                        let width = global.stage.width;
-                        [alloc.min_size, alloc.natural_size] = [width, width];
-                    });
-    uiGroup.connect('get-preferred-height',
-                    function(actor, forWidth, alloc) {
-                        let height = global.stage.height;
-                        [alloc.min_size, alloc.natural_size] = [height, height];
-                    });
-    global.window_group.reparent(uiGroup);
-    global.overlay_group.reparent(uiGroup);
-    global.stage.add_actor(uiGroup);
-
+    // Setup the stage hierarchy early
     layoutManager = new Layout.LayoutManager();
+
+    // Various parts of the codebase still refers to Main.uiGroup
+    // instead using the layoutManager.  This keeps that code
+    // working until it's updated.
+    uiGroup = layoutManager.uiGroup;
+
     xdndHandler = new XdndHandler.XdndHandler();
     ctrlAltTabManager = new CtrlAltTab.CtrlAltTabManager();
+    osdWindow = new OsdWindow.OsdWindow();
     overview = new Overview.Overview();
     wm = new WindowManager.WindowManager();
     magnifier = new Magnifier.Magnifier();
@@ -153,6 +147,9 @@ function start() {
         screenShield = new ScreenShield.ScreenShield();
     else
         screenShield = new ScreenShield.ScreenShieldFallback();
+
+    // The message tray relies on being constructed
+    // after the panel.
     panel = new Panel.Panel();
     messageTray = new MessageTray.MessageTray();
     keyboard = new Keyboard.Keyboard();
@@ -161,6 +158,7 @@ function start() {
     componentManager = new Components.ComponentManager();
 
     layoutManager.init();
+    layoutManager.prepareStartupAnimation();
     overview.init();
 
     global.screen.override_workspace_layout(Meta.ScreenCorner.TOPLEFT,
@@ -173,6 +171,9 @@ function start() {
     // initiate logouts.
     EndSessionDialog.init();
 
+    // We're ready for the session manager to move to the next phase
+    Meta.register_with_session();
+
     _startDate = new Date();
 
     log('GNOME Shell started at ' + _startDate);
@@ -197,6 +198,10 @@ function start() {
 
     ExtensionDownloader.init();
     ExtensionSystem.init();
+
+    layoutManager.connect('startup-prepared', function() {
+                              layoutManager.startupAnimation();
+                          });
 }
 
 let _workspaces = [];
@@ -472,17 +477,6 @@ function notifyError(msg, details) {
     notify(msg, details);
 }
 
-function isWindowActorDisplayedOnWorkspace(win, workspaceIndex) {
-    return win.get_workspace() == workspaceIndex ||
-        (win.get_meta_window() && win.get_meta_window().is_on_all_workspaces());
-}
-
-function getWindowActorsForWorkspace(workspaceIndex) {
-    return global.get_window_actors().filter(function (win) {
-        return isWindowActorDisplayedOnWorkspace(win, workspaceIndex);
-    });
-}
-
 function _findModal(actor) {
     for (let i = 0; i < modalActorFocusStack.length; i++) {
         if (modalActorFocusStack[i].actor == actor)
@@ -491,10 +485,6 @@ function _findModal(actor) {
     return -1;
 }
 
-function isInModalStack(actor) {
-    return _findModal(actor) != -1;
-}
-
 /**
  * pushModal:
  * @actor: #ClutterActor which will be given keyboard focus

js/ui/messageTray.js

@@ -220,30 +220,6 @@ const URLHighlighter = new Lang.Class({
     }
 });
 
-function makeCloseButton() {
-    let closeButton = new St.Button({ style_class: 'notification-close'});
-
-    // This is a bit tricky. St.Bin has its own x-align/y-align properties
-    // that compete with Clutter's properties. This should be fixed for
-    // Clutter 2.0. Since St.Bin doesn't define its own setters, the
-    // setters are a workaround to get Clutter's version.
-    closeButton.set_x_align(Clutter.ActorAlign.END);
-    closeButton.set_y_align(Clutter.ActorAlign.START);
-
-    // XXX Clutter 2.0 workaround: ClutterBinLayout needs expand
-    // to respect the alignments.
-    closeButton.set_x_expand(true);
-    closeButton.set_y_expand(true);
-
-    closeButton.connect('style-changed', function() {
-        let themeNode = closeButton.get_theme_node();
-        closeButton.translation_x = themeNode.get_length('-shell-close-overlap-x');
-        closeButton.translation_y = themeNode.get_length('-shell-close-overlap-y');
-    });
-
-    return closeButton;
-}
-
 function strHasSuffix(string, suffix) {
     return string.substr(-suffix.length) == suffix;
 }
@@ -331,6 +307,10 @@ Signals.addSignalMethods(NotificationPolicy.prototype);
 // the content and the action area of the notification will be cleared.
 // The content area is also always cleared if 'customContent' is false
 // because it might contain the @banner that didn't fit in the banner mode.
+//
+// If @params contains 'soundName' or 'soundFile', the corresponding
+// event sound is played when the notification is shown (if the policy for
+// @source allows playing sounds).
 const Notification = new Lang.Class({
     Name: 'Notification',
 
@@ -355,11 +335,15 @@ const Notification = new Lang.Class({
         this._customContent = false;
         this.bannerBodyText = null;
         this.bannerBodyMarkup = false;
+        this._bannerBodyAdded = false;
         this._titleFitsInBannerMode = true;
         this._titleDirection = Clutter.TextDirection.DEFAULT;
         this._spacing = 0;
         this._scrollPolicy = Gtk.PolicyType.AUTOMATIC;
         this._imageBin = null;
+        this._soundName = null;
+        this._soundFile = null;
+        this._soundPlayed = false;
 
         source.connect('destroy', Lang.bind(this,
             function (source, reason) {
@@ -426,7 +410,9 @@ const Notification = new Lang.Class({
                                         titleMarkup: false,
                                         bannerMarkup: false,
                                         bodyMarkup: false,
-                                        clear: false });
+                                        clear: false,
+                                        soundName: null,
+                                        soundFile: null });
 
         this._customContent = params.customContent;
 
@@ -512,6 +498,7 @@ const Notification = new Lang.Class({
         // not fitting fully in the single-line mode.
         this.bannerBodyText = this._customContent ? null : banner;
         this.bannerBodyMarkup = params.bannerMarkup;
+        this._bannerBodyAdded = false;
 
         banner = banner ? banner.replace(/\n/g, '  ') : '';
 
@@ -524,6 +511,14 @@ const Notification = new Lang.Class({
 
         if (params.body)
             this.addBody(params.body, params.bodyMarkup);
+
+        if (this._soundName != params.soundName ||
+            this._soundFile != params.soundFile) {
+            this._soundName = params.soundName;
+            this._soundFile = params.soundFile;
+            this._soundPlayed = false;
+        }
+
         this.updated();
     },
 
@@ -585,10 +580,9 @@ const Notification = new Lang.Class({
     },
 
     _addBannerBody: function() {
-        if (this.bannerBodyText) {
-            let text = this.bannerBodyText;
-            this.bannerBodyText = null;
-            this.addBody(text, this.bannerBodyMarkup);
+        if (this.bannerBodyText && !this._bannerBodyAdded) {
+            this._bannerBodyAdded = true;
+            this.addBody(this.bannerBodyText, this.bannerBodyMarkup);
         }
     },
 
@@ -880,10 +874,42 @@ const Notification = new Lang.Class({
     },
 
     _canExpandContent: function() {
-        return this.bannerBodyText ||
+        return (this.bannerBodyText && !this._bannerBodyAdded) ||
                (!this._titleFitsInBannerMode && !this._table.has_style_class_name('multi-line-notification'));
     },
 
+    playSound: function() {
+        if (this._soundPlayed)
+            return;
+
+        if (!this.source.policy.enableSound) {
+            this._soundPlayed = true;
+            return;
+        }
+
+        if (this._soundName) {
+            if (this.source.app) {
+                let app = this.source.app;
+
+                global.play_theme_sound_full(0, this._soundName,
+                                             this.title, null,
+                                             app.get_id(), app.get_name());
+            } else {
+                global.play_theme_sound(0, this._soundName, this.title, null);
+            }
+        } else if (this._soundFile) {
+            if (this.source.app) {
+                let app = this.source.app;
+
+                global.play_sound_file_full(0, this._soundFile,
+                                            this.title, null,
+                                            app.get_id(), app.get_name());
+            } else {
+                global.play_sound_file(0, this._soundFile, this.title, null);
+            }
+        }
+    },
+
     updated: function() {
         if (this.expanded)
             this.expand(false);
@@ -1127,6 +1153,11 @@ const Source = new Lang.Class({
         return this.notifications.length;
     },
 
+    get indicatorCount() {
+        let notifications = this.notifications.filter(function(n) { return !n.isTransient && !n.resident; });
+        return notifications.length;
+    },
+
     get unseenCount() {
         return this.notifications.filter(function(n) { return !n.acknowledged; }).length;
     },
@@ -1233,8 +1264,16 @@ const Source = new Lang.Class({
         notification.acknowledged = false;
         this.pushNotification(notification);
 
-        if (!this.isMuted && this.policy.showBanners)
-            this.emit('notify', notification);
+        if (!this.isMuted) {
+            // Play the sound now, if banners are disabled.
+            // Otherwise, it will be played when the notification
+            // is next shown.
+            if (this.policy.showBanners) {
+                this.emit('notify', notification);
+            } else {
+                notification.playSound();
+            }
+        }
     },
 
     destroy: function(reason) {
@@ -1325,7 +1364,7 @@ const SummaryItem = new Lang.Class({
         this.notificationStackView.add_actor(this.notificationStack);
         this.notificationStackWidget.add_actor(this.notificationStackView);
 
-        this.closeButton = makeCloseButton();
+        this.closeButton = Util.makeCloseButton();
         this.notificationStackWidget.add_actor(this.closeButton);
         this._stackedNotifications = [];
 
@@ -1448,6 +1487,62 @@ const SummaryItem = new Lang.Class({
 });
 Signals.addSignalMethods(SummaryItem.prototype);
 
+const MessageTrayContextMenu = new Lang.Class({
+    Name: 'MessageTrayContextMenu',
+    Extends: PopupMenu.PopupMenu,
+
+    _init: function(tray) {
+        this._dummy = new St.Bin({ opacity: 0 });
+        Main.uiGroup.add_actor(this._dummy);
+
+        this.parent(this._dummy, 0, St.Side.BOTTOM);
+        this._tray = tray;
+
+        this._clearItem = this.addAction(_("Clear Messages"), function() {
+            let toDestroy = [];
+            let sources = tray.getSources();
+            for (let i = 0; i < sources.length; i++) {
+                // We exclude trayIcons, chat and resident sources
+                if (sources[i].trayIcon ||
+                    sources[i].isChat ||
+                    sources[i].resident)
+                    continue;
+                toDestroy.push(sources[i]);
+            }
+
+            for (let i = 0; i < toDestroy.length; i++) {
+                toDestroy[i].destroy();
+            }
+
+            toDestroy = null;
+            tray.close();
+        });
+
+        tray.connect('source-added', Lang.bind(this, this._updateClearSensitivity));
+        tray.connect('source-removed', Lang.bind(this, this._updateClearSensitivity));
+        this._updateClearSensitivity();
+
+        let separator = new PopupMenu.PopupSeparatorMenuItem();
+        this.addMenuItem(separator);
+
+        let settingsItem = this.addSettingsAction(_("Notification Settings"), 'gnome-notifications-panel.desktop');
+        settingsItem.connect('activate', function() { tray.close(); });
+    },
+
+    _updateClearSensitivity: function() {
+        let sources = this._tray.getSources();
+        sources = sources.filter(function(source) {
+            return !source.trayIcon && !source.isChat && !source.resident;
+        });
+        this._clearItem.setSensitive(sources.length > 0);
+    },
+
+    setPosition: function(x, y) {
+        this._dummy.set_position(x, y);
+    }
+
+});
+
 const MessageTray = new Lang.Class({
     Name: 'MessageTray',
 
@@ -1524,12 +1619,11 @@ const MessageTray = new Lang.Class({
         this._clickedSummaryItemMouseButton = -1;
         this._clickedSummaryItemAllocationChangedId = 0;
 
-        this._closeButton = makeCloseButton();
+        this._closeButton = Util.makeCloseButton();
         this._closeButton.hide();
         this._closeButton.connect('clicked', Lang.bind(this, this._closeNotification));
         this._notificationWidget.add_actor(this._closeButton);
 
-        this._idleMonitorBecameActiveId = 0;
         this._userActiveWhileNotificationShown = false;
 
         this.idleMonitor = new GnomeDesktop.IdleMonitor();
@@ -1538,10 +1632,7 @@ const MessageTray = new Lang.Class({
                                                      { keybindingMode: Shell.KeyBindingMode.MESSAGE_TRAY });
         this._grabHelper.addActor(this._summaryBoxPointer.actor);
         this._grabHelper.addActor(this.actor);
-        if (Main.panel.statusArea.activities)
-            this._grabHelper.addActor(Main.panel.statusArea.activities.hotCorner.actor);
 
-        Main.layoutManager.keyboardBox.connect('notify::hover', Lang.bind(this, this._onKeyboardHoverChanged));
         Main.layoutManager.connect('keyboard-visible-changed', Lang.bind(this, this._onKeyboardVisibleChanged));
 
         this._trayState = State.HIDDEN;
@@ -1552,7 +1643,6 @@ const MessageTray = new Lang.Class({
         this._pointerInTray = false;
         this._pointerInKeyboard = false;
         this._keyboardVisible = false;
-        this._keyboardUnderMessageTray = false;
         this._summaryState = State.HIDDEN;
         this._pointerInSummary = false;
         this._notificationClosed = false;
@@ -1562,14 +1652,13 @@ const MessageTray = new Lang.Class({
         this._summaryBoxPointerState = State.HIDDEN;
         this._summaryBoxPointerTimeoutId = 0;
         this._desktopCloneState = State.HIDDEN;
-        this._overviewVisible = Main.overview.visible;
         this._notificationRemoved = false;
         this._reNotifyAfterHideNotification = null;
         this._inFullscreen = false;
         this._desktopClone = null;
         this._inCtrlAltTab = false;
 
-        this._lightbox = new Lightbox.Lightbox(global.window_group,
+        this._lightbox = new Lightbox.Lightbox(global.overlay_group,
                                                { inhibitEvents: true,
                                                  fadeInTime: ANIMATION_TIME,
                                                  fadeOutTime: ANIMATION_TIME,
@@ -1584,20 +1673,13 @@ const MessageTray = new Lang.Class({
 
         Main.layoutManager.connect('primary-fullscreen-changed', Lang.bind(this, this._onFullscreenChanged));
 
-        Main.overview.connect('showing', Lang.bind(this,
-            function() {
-                this._overviewVisible = true;
-                this._grabHelper.ungrab(); // drop modal grab if necessary
-                this.actor.add_style_pseudo_class('overview');
-                this._updateState();
-            }));
-        Main.overview.connect('hiding', Lang.bind(this,
-            function() {
-                this._overviewVisible = false;
-                this._escapeTray();
-                this._updateState();
-            }));
+        // If the overview shows or hides while we're in
+        // the message tray, revert back to normal mode.
+        Main.overview.connect('showing', Lang.bind(this, this._escapeTray));
+        Main.overview.connect('hiding', Lang.bind(this, this._escapeTray));
 
+        // Track if we've added the activities button
+        this._activitiesButtonAdded = false;
         Main.sessionMode.connect('updated', Lang.bind(this, this._sessionUpdated));
 
         Main.wm.addKeybinding('toggle-message-tray',
@@ -1618,12 +1700,8 @@ const MessageTray = new Lang.Class({
         this._sources = new Hash.Map();
         this._chatSummaryItemsCount = 0;
 
-        let pointerWatcher = PointerWatcher.getPointerWatcher();
-        pointerWatcher.addWatch(TRAY_DWELL_CHECK_INTERVAL, Lang.bind(this, this._checkTrayDwell));
         this._trayDwellTimeoutId = 0;
-        this._trayDwelling = false;
-        this._trayDwellUserTime = 0;
-
+        this._setupTrayDwellIfNeeded();
         this._sessionUpdated();
 
         this._noMessages = new St.Label({ text: _("No Messages"),
@@ -1634,6 +1712,62 @@ const MessageTray = new Lang.Class({
                                           y_expand: true });
         this.actor.add_actor(this._noMessages);
         this._updateNoMessagesLabel();
+
+        this._contextMenu = new MessageTrayContextMenu(this);
+
+        let clickAction = new Clutter.ClickAction();
+        this.actor.add_action(clickAction);
+
+        clickAction.connect('clicked', Lang.bind(this, function(action) {
+            let button = action.get_button();
+            if (button == 3)
+                this._openContextMenu();
+            if (button == 1 && this._contextMenu.isOpen)
+                this._grabHelper.ungrab({ actor: this._contextMenu.actor });
+        }));
+
+        clickAction.connect('long-press', Lang.bind(this, function(action, actor, state) {
+            switch (state) {
+            case Clutter.LongPressState.QUERY:
+                return true;
+            case Clutter.LongPressState.ACTIVATE:
+                this._openContextMenu();
+            }
+            return false;
+        }));
+
+        this._contextMenu.actor.hide();
+        Main.layoutManager.addChrome(this._contextMenu.actor);
+
+    },
+
+    _openContextMenu: function () {
+        let [x, y, mask] = global.get_pointer();
+        this._lock();
+        this._contextMenu.setPosition(Math.round(x), Math.round(y));
+        this._grabHelper.grab({ actor: this._contextMenu.actor,
+                                grabFocus: true,
+                                onUngrab: Lang.bind(this, function () {
+                                    this._contextMenu.close(BoxPointer.PopupAnimation.FULL);
+                                    this._unlock();
+                                })
+        });
+        this._contextMenu.open(BoxPointer.PopupAnimation.FULL);
+    },
+
+    close: function() {
+        this._escapeTray();
+    },
+
+    _setupTrayDwellIfNeeded: function() {
+        // If we don't have extended barrier features, then we need
+        // to support the old tray dwelling mechanism.
+        if (!global.display.supports_extended_barriers()) {
+            let pointerWatcher = PointerWatcher.getPointerWatcher();
+            pointerWatcher.addWatch(TRAY_DWELL_CHECK_INTERVAL, Lang.bind(this, this._checkTrayDwell));
+            this._trayDwelling = false;
+            this._trayDwellUserTime = 0;
+        }
     },
 
     _updateNoMessagesLabel: function() {
@@ -1641,6 +1775,11 @@ const MessageTray = new Lang.Class({
     },
 
     _sessionUpdated: function() {
+        if (!this._activitiesButtonAdded && Main.panel.statusArea.activities) {
+            this._activitiesButtonAdded = true;
+            this._grabHelper.addActor(Main.panel.statusArea.activities.hotCorner.actor);
+        }
+
         if ((Main.sessionMode.isLocked || Main.sessionMode.isGreeter) && this._inCtrlAltTab) {
             Main.ctrlAltTabManager.removeGroup(this._summary);
             this._inCtrlAltTab = false;
@@ -1689,7 +1828,10 @@ const MessageTray = new Lang.Class({
     _trayDwellTimeout: function() {
         this._trayDwellTimeoutId = 0;
 
-        if (Main.modalCount > 0)
+        // We don't want to open the tray when a modal dialog
+        // is up, so we check the modal count for that. When we are in the
+        // overview we have to take the overview's modal push into account
+        if (Main.modalCount > (Main.overview.visible ? 1 : 0))
             return false;
 
         // If the user interacted with the focus window since we started the tray
@@ -1699,9 +1841,7 @@ const MessageTray = new Lang.Class({
         if (currentUserTime != this._trayDwellUserTime)
             return false;
 
-        this._traySummoned = true;
-        this._updateState();
-
+        this.openTray();
         return false;
     },
 
@@ -1871,14 +2011,26 @@ const MessageTray = new Lang.Class({
         this._updateState();
     },
 
-    toggle: function() {
-        this._traySummoned = !this._traySummoned;
+    openTray: function() {
+        if (Main.overview.animationInProgress)
+            return;
+
+        this._traySummoned = true;
         this._updateState();
     },
 
+    toggle: function() {
+        if (Main.overview.animationInProgress)
+            return false;
+
+        this._traySummoned = !this._traySummoned;
+        this._updateState();
+        return true;
+    },
+
     toggleAndNavigate: function() {
-        this.toggle();
-        this._summary.navigate_focus(null, Gtk.DirectionType.TAB_FORWARD, false);
+        if (this.toggle())
+            this._summary.navigate_focus(null, Gtk.DirectionType.TAB_FORWARD, false);
     },
 
     hide: function() {
@@ -1904,9 +2056,10 @@ const MessageTray = new Lang.Class({
             } else {
                 // The summary box pointer is showing or shown (otherwise,
                 // this._summaryBoxPointerItem would be null)
-                // Immediately mark the notification as acknowledged, as it's
-                // not going into the queue
+                // Immediately mark the notification as acknowledged and play its
+                // sound, as it's not going into the queue
                 notification.acknowledged = true;
+                notification.playSound();
             }
 
             return;
@@ -2007,38 +2160,8 @@ const MessageTray = new Lang.Class({
         }
     },
 
-    _onKeyboardHoverChanged: function(keyboard) {
-        this._pointerInKeyboard = keyboard.hover;
-
-        if (!keyboard.hover) {
-            let event = Clutter.get_current_event();
-            if (event && event.type() == Clutter.EventType.LEAVE) {
-                let into = event.get_related();
-                if (into && this.actor.contains(into)) {
-                    // Don't call _updateState, because pointerInTray is
-                    // still false
-                    return;
-                }
-            }
-        }
-
-        this._updateState();
-    },
-
     _onKeyboardVisibleChanged: function(layoutManager, keyboardVisible) {
-        let keyboardUnderMessageTray = layoutManager.keyboardIndex == layoutManager.bottomIndex;
-        if (this._keyboardVisible == keyboardVisible &&
-            this._keyboardUnderMesssageTray == keyboardUnderMessageTray)
-            return;
-
         this._keyboardVisible = keyboardVisible;
-        this._keyboardUnderMessageTray = keyboardUnderMessageTray;
-
-        if (keyboardVisible && keyboardUnderMessageTray)
-            this.actor.add_style_pseudo_class('keyboard');
-        else
-            this.actor.remove_style_pseudo_class('keyboard');
-
         this._updateState();
     },
 
@@ -2134,16 +2257,15 @@ const MessageTray = new Lang.Class({
         }
 
         // Summary
-        let summarySummoned = this._pointerInSummary || this._overviewVisible ||  this._traySummoned;
+        let summarySummoned = this._pointerInSummary || this._traySummoned;
         let summaryPinned = this._pointerInTray || summarySummoned || this._locked;
         let summaryHovered = this._pointerInTray || this._pointerInSummary;
 
         let notificationsVisible = this._notificationState != State.HIDDEN;
         let notificationsDone = !notificationsVisible && !notificationsPending;
 
-        let summaryOptionalInOverview = this._overviewVisible && !this._locked && !summaryHovered;
-        let mustHideSummary = (notificationsPending && (notificationUrgent || summaryOptionalInOverview))
-                              || notificationsVisible || !Main.sessionMode.hasNotifications;
+        let mustHideSummary = ((notificationsPending && notificationUrgent)
+                              || notificationsVisible || !Main.sessionMode.hasNotifications);
 
         if (this._summaryState == State.HIDDEN && !mustHideSummary && summarySummoned)
             this._showSummary();
@@ -2180,7 +2302,8 @@ const MessageTray = new Lang.Class({
         let trayIsVisible = (this._trayState == State.SHOWING ||
                              this._trayState == State.SHOWN);
         let trayShouldBeVisible = (this._summaryState == State.SHOWING ||
-                                   this._summaryState == State.SHOWN);
+                                   this._summaryState == State.SHOWN) &&
+                                  !this._keyboardVisible;
         if (!trayIsVisible && trayShouldBeVisible)
             trayShouldBeVisible = this._showTray();
         else if (trayIsVisible && !trayShouldBeVisible)
@@ -2189,14 +2312,12 @@ const MessageTray = new Lang.Class({
         // Desktop clone
         let desktopCloneIsVisible = (this._desktopCloneState == State.SHOWING ||
                                      this._desktopCloneState == State.SHOWN);
-        let desktopCloneShouldBeVisible = (trayShouldBeVisible &&
-                                           !this._overviewVisible &&
-                                           (!this._keyboardVisible || !this._keyboardUnderMessageTray));
+        let desktopCloneShouldBeVisible = (trayShouldBeVisible);
 
         if (!desktopCloneIsVisible && desktopCloneShouldBeVisible) {
             this._showDesktopClone();
         } else if (desktopCloneIsVisible && !desktopCloneShouldBeVisible) {
-            this._hideDesktopClone (this._keyboardVisible && this._keyboardUnderMessageTray);
+            this._hideDesktopClone();
         }
     },
 
@@ -2225,26 +2346,21 @@ const MessageTray = new Lang.Class({
     },
 
     _showTray: function() {
-        // Don't actually take a modal grab in the overview.
-        // Just add something to the grab stack that we can
-        // pop later.
-        let modal = !this._overviewVisible;
-
         if (!this._grabHelper.grab({ actor: this.actor,
-                                     modal: modal,
+                                     modal: true,
                                      onUngrab: Lang.bind(this, this._escapeTray) })) {
             this._traySummoned = false;
             return false;
         }
 
+        this.emit('showing');
         this._tween(this.actor, '_trayState', State.SHOWN,
                     { y: -this.actor.height,
                       time: ANIMATION_TIME,
                       transition: 'easeOutQuad'
                     });
 
-        if (!this._overviewVisible)
-            this._lightbox.show();
+        this._lightbox.show();
 
         return true;
     },
@@ -2267,8 +2383,10 @@ const MessageTray = new Lang.Class({
 
         if (this._desktopClone)
             this._desktopClone.destroy();
-        this._desktopClone = new Clutter.Clone({ source: global.window_group, clip: new Clutter.Geometry(this._bottomMonitorGeometry) });
-        Main.uiGroup.insert_child_above(this._desktopClone, global.window_group);
+        let cloneSource = Main.overview.visible ? global.overlay_group : global.window_group;
+        this._desktopClone = new Clutter.Clone({ source: cloneSource,
+                                                 clip: new Clutter.Geometry(this._bottomMonitorGeometry) });
+        Main.uiGroup.insert_child_above(this._desktopClone, cloneSource);
         this._desktopClone.x = 0;
         this._desktopClone.y = 0;
         this._desktopClone.show();
@@ -2286,12 +2404,11 @@ const MessageTray = new Lang.Class({
         // is distracting, so hide it immediately in case it was visible.
         this._summaryBoxPointer.actor.hide();
 
+        this.emit('hiding');
         this._tween(this.actor, '_trayState', State.HIDDEN,
                     { y: 0,
                       time: ANIMATION_TIME,
-                      transition: 'easeOutQuad',
-                      onComplete: this._onTrayHidden,
-                      onCompleteScope: this
+                      transition: 'easeOutQuad'
                     });
 
         // Note that we might have entered here without a grab,
@@ -2301,15 +2418,10 @@ const MessageTray = new Lang.Class({
         this._lightbox.hide();
     },
 
-    _onTrayHidden: function() {
-        if (!this._overviewVisible)
-            this.actor.remove_style_pseudo_class('overview');
-    },
-
-    _hideDesktopClone: function(now) {
+    _hideDesktopClone: function() {
         this._tween(this._desktopClone, '_desktopCloneState', State.HIDDEN,
                     { y: 0,
-                      time: now ? 0 : ANIMATION_TIME,
+                      time: ANIMATION_TIME,
                       transition: 'easeOutQuad',
                       onComplete: Lang.bind(this, function() {
                           this._desktopClone.destroy();
@@ -2321,9 +2433,6 @@ const MessageTray = new Lang.Class({
     },
 
     _onIdleMonitorBecameActive: function() {
-        this.idleMonitor.disconnect(this._idleMonitorBecameActiveId);
-        this._idleMonitorBecameActiveId = 0;
-
         this._userActiveWhileNotificationShown = true;
         this._updateNotificationTimeout(2000);
         this._updateState();
@@ -2332,12 +2441,11 @@ const MessageTray = new Lang.Class({
     _showNotification: function() {
         this._notification = this._notificationQueue.shift();
 
-        let userIdle = this.idleMonitor.get_idletime() > IDLE_TIME;
-        if (userIdle) {
-            this._userActiveWhileNotificationShown = false;
-            this._idleMonitorBecameActiveId = this.idleMonitor.connect('became-active', Lang.bind(this, this._onIdleMonitorBecameActive));
-        } else {
-            this._userActiveWhileNotificationShown = true;
+        this._userActiveWhileNotificationShown = this.idleMonitor.get_idletime() > IDLE_TIME;
+        if (!this._userActiveWhileNotificationShown) {
+            // If the user isn't active, set up a watch to let us know
+            // when the user becomes active.
+            this.idleMonitor.add_user_active_watch(Lang.bind(this, this._onIdleMonitorBecameActive));
         }
 
         this._notificationClickedId = this._notification.connect('done-displaying',
@@ -2370,6 +2478,7 @@ const MessageTray = new Lang.Class({
 
     _updateShowingNotification: function() {
         this._notification.acknowledged = true;
+        this._notification.playSound();
 
         // We auto-expand notifications with CRITICAL urgency, or for which the relevant setting
         // is on in the control center.
@@ -2454,10 +2563,6 @@ const MessageTray = new Lang.Class({
 
         this._grabHelper.ungrab({ actor: this._notification.actor });
 
-        if (this._idleMonitorBecameActiveId) {
-            this.idleMonitor.disconnect(this._idleMonitorBecameActiveId);
-            this._idleMonitorBecameActiveId = 0;
-        }
         if (this._notificationExpandedId) {
             this._notification.disconnect(this._notificationExpandedId);
             this._notificationExpandedId = 0;
@@ -2674,20 +2779,20 @@ const MessageTray = new Lang.Class({
         return true;
     },
 
-   _onSummaryBoxPointerKeyPress: function(actor, event) {
-       switch (event.get_key_symbol()) {
-           case Clutter.KEY_Down:
-           case Clutter.KEY_Escape:
-               this._setClickedSummaryItem(null);
-               this._updateState();
-               return true;
-           case Clutter.KEY_Delete:
-               this._clickedSummaryItem.source.destroy();
-               this._escapeTray();
-               return true;
-       }
-       return false;
-   },
+    _onSummaryBoxPointerKeyPress: function(actor, event) {
+        switch (event.get_key_symbol()) {
+        case Clutter.KEY_Down:
+        case Clutter.KEY_Escape:
+            this._setClickedSummaryItem(null);
+            this._updateState();
+            return true;
+        case Clutter.KEY_Delete:
+            this._clickedSummaryItem.source.destroy();
+            this._escapeTray();
+            return true;
+        }
+        return false;
+    },
 
     _onSummaryBoxPointerUngrabbed: function() {
         this._summaryBoxPointerState = State.HIDING;

js/ui/modalDialog.js

@@ -58,7 +58,9 @@ const ModalDialog = new Lang.Class({
 
         this._group.connect('destroy', Lang.bind(this, this._onGroupDestroy));
 
+        this._pressedKey = null;
         this._buttonKeys = {};
+        this._group.connect('key-press-event', Lang.bind(this, this._onKeyPressEvent));
         this._group.connect('key-release-event', Lang.bind(this, this._onKeyReleaseEvent));
 
         this._backgroundBin = new St.Bin();
@@ -80,7 +82,7 @@ const ModalDialog = new Lang.Class({
             let stack = new Shell.Stack();
             this._backgroundBin.child = stack;
 
-            this._eventBlocker = new Clutter.Group({ reactive: true });
+            this._eventBlocker = new Clutter.Actor({ reactive: true });
             stack.add_actor(this._eventBlocker);
             stack.add_actor(this.dialogLayout);
         } else {
@@ -179,10 +181,19 @@ const ModalDialog = new Lang.Class({
         return button;
     },
 
-    _onKeyReleaseEvent: function(object, event) {
-        let symbol = event.get_key_symbol();
-        let buttonInfo = this._buttonKeys[symbol];
+    _onKeyPressEvent: function(object, event) {
+        this._pressedKey = event.get_key_symbol();
+    },
 
+    _onKeyReleaseEvent: function(object, event) {
+        let pressedKey = this._pressedKey;
+        this._pressedKey = null;
+
+        let symbol = event.get_key_symbol();
+        if (symbol != pressedKey)
+            return false;
+
+        let buttonInfo = this._buttonKeys[symbol];
         if (!buttonInfo)
             return false;
 
@@ -265,6 +276,7 @@ const ModalDialog = new Lang.Class({
                                function() {
                                    this.state = State.CLOSED;
                                    this._group.hide();
+                                   this.emit('closed');
                                })
                          });
     },

js/ui/notificationDaemon.js

@@ -527,7 +527,9 @@ const NotificationDaemon = new Lang.Class({
 
         notification.update(summary, body, { gicon: gicon,
                                              bannerMarkup: true,
-                                             clear: true });
+                                             clear: true,
+                                             soundFile: hints['sound-file'],
+                                             soundName: hints['sound-name'] });
         notification.setImage(image);
 
         if (actions.length) {
@@ -582,7 +584,7 @@ const NotificationDaemon = new Lang.Class({
             // 'icon-multi',
             'icon-static',
             'persistence',
-            // 'sound',
+            'sound',
         ];
     },
 

js/ui/osdWindow.js

@@ -0,0 +1,179 @@
+// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
+
+const Clutter = imports.gi.Clutter;
+const St = imports.gi.St;
+
+const Lang = imports.lang;
+const Layout = imports.ui.layout;
+const Main = imports.ui.main;
+const Mainloop = imports.mainloop;
+const Tweener = imports.ui.tweener;
+
+const HIDE_TIMEOUT = 1500;
+const FADE_TIME = 0.1;
+const LEVEL_ANIMATION_TIME = 0.1;
+
+const LevelBar = new Lang.Class({
+    Name: 'LevelBar',
+
+    _init: function() {
+        this._level = 0;
+
+        this.actor = new St.Bin({ style_class: 'level',
+                                  x_fill: true, y_fill: true });
+        this._bar = new St.DrawingArea();
+        this._bar.connect('repaint', Lang.bind(this, this._repaint));
+
+        this.actor.set_child(this._bar);
+    },
+
+    get level() {
+        return this._level;
+    },
+
+    set level(value) {
+        let newValue = Math.max(0, Math.min(value, 100));
+        if (newValue == this._level)
+            return;
+        this._level = newValue;
+        this._bar.queue_repaint();
+    },
+
+    _repaint: function() {
+        let cr = this._bar.get_context();
+
+        let node = this.actor.get_theme_node();
+        let radius = node.get_border_radius(0); // assume same radius for all corners
+        Clutter.cairo_set_source_color(cr, node.get_foreground_color());
+
+        let [w, h] = this._bar.get_surface_size();
+        w *= (this._level / 100.);
+
+        if (w == 0)
+            return;
+
+        cr.moveTo(radius, 0);
+        if (w >= radius)
+            cr.arc(w - radius, radius, radius, 1.5 * Math.PI, 2. * Math.PI);
+        else
+            cr.lineTo(w, 0);
+        if (w >= radius)
+            cr.arc(w - radius, h - radius, radius, 0, 0.5 * Math.PI);
+        else
+            cr.lineTo(w, h);
+        cr.arc(radius, h - radius, radius, 0.5 * Math.PI, Math.PI);
+        cr.arc(radius, radius, radius, Math.PI, 1.5 * Math.PI);
+        cr.fill();
+    }
+});
+
+const OsdWindow = new Lang.Class({
+    Name: 'OsdWindow',
+
+    _init: function() {
+        this.actor = new St.Widget({ x_expand: true,
+                                     y_expand: true,
+                                     x_align: Clutter.ActorAlign.CENTER,
+                                     y_align: Clutter.ActorAlign.CENTER });
+        this.actor.add_constraint(new Layout.MonitorConstraint({ primary: true }));
+        this._box = new St.BoxLayout({ style_class: 'osd-window',
+                                       vertical: true });
+        this.actor.add_actor(this._box);
+
+        this._icon = new St.Icon();
+        this._box.add(this._icon, { expand: true });
+
+        this._label = new St.Label();
+        this._box.add(this._label);
+
+        this._level = new LevelBar();
+        this._box.add(this._level.actor);
+
+        this._hideTimeoutId = 0;
+        this._reset();
+
+        Main.layoutManager.connect('monitors-changed',
+                                   Lang.bind(this, this._monitorsChanged));
+        this._monitorsChanged();
+
+        Main.layoutManager.addChrome(this.actor, { affectsInputRegion: false });
+    },
+
+    setIcon: function(icon) {
+        this._icon.gicon = icon;
+    },
+
+    setLabel: function(label) {
+        this._label.visible = (label != undefined);
+        if (label)
+            this._label.text = label;
+    },
+
+    setLevel: function(level) {
+        this._level.actor.visible = (level != undefined);
+        if (this.actor.visible)
+            Tweener.addTween(this._level,
+                             { level: level,
+                               time: LEVEL_ANIMATION_TIME,
+                               transition: 'easeOutQuad' });
+        else
+            this._level.level = level;
+    },
+
+    show: function() {
+        if (!this._icon.gicon)
+            return;
+
+        if (!this.actor.visible) {
+            this.actor.show();
+            this.actor.opacity = 0;
+
+            Tweener.addTween(this.actor,
+                             { opacity: 255,
+                               time: FADE_TIME,
+                               transition: 'easeOutQuad' });
+        }
+
+        if (this._hideTimeoutId)
+            Mainloop.source_remove(this._hideTimeoutId);
+        this._hideTimeoutId = Mainloop.timeout_add(HIDE_TIMEOUT,
+                                                   Lang.bind(this, this._hide));
+    },
+
+    cancel: function() {
+        if (!this._hideTimeoutId)
+            return;
+
+        Mainloop.source_remove(this._hideTimeoutId);
+        this._hideTimeoutId = 0;
+        this._hide();
+    },
+
+    _hide: function() {
+        Tweener.addTween(this.actor,
+                         { opacity: 0,
+                           time: FADE_TIME,
+                           transition: 'easeOutQuad',
+                           onComplete: Lang.bind(this, this._reset) });
+    },
+
+    _reset: function() {
+        this.actor.hide();
+        this.setLabel(null);
+        this.setLevel(null);
+    },
+
+    _monitorsChanged: function() {
+        /* assume 130x130 on a 640x480 display and scale from there */
+        let monitor = Main.layoutManager.primaryMonitor;
+        let scalew = monitor.width / 640.0;
+        let scaleh = monitor.height / 480.0;
+        let scale = Math.min(scalew, scaleh);
+        let size = 130 * Math.max(1, scale);
+
+        this._box.set_size(size, size);
+        this._box.translation_y = monitor.height / 4;
+
+        this._icon.icon_size = size / 2;
+    }
+});

js/ui/overview.js

@@ -10,10 +10,13 @@ const St = imports.gi.St;
 const Shell = imports.gi.Shell;
 const Gdk = imports.gi.Gdk;
 
+const Background = imports.ui.background;
 const Dash = imports.ui.dash;
 const DND = imports.ui.dnd;
+const LayoutManager = imports.ui.layout;
 const Main = imports.ui.main;
 const MessageTray = imports.ui.messageTray;
+const OverviewControls = imports.ui.overviewControls;
 const Panel = imports.ui.panel;
 const Params = imports.misc.params;
 const Tweener = imports.ui.tweener;
@@ -23,25 +26,12 @@ const WorkspaceThumbnail = imports.ui.workspaceThumbnail;
 // Time for initial animation going into Overview mode
 const ANIMATION_TIME = 0.25;
 
-const DND_WINDOW_SWITCH_TIMEOUT = 1250;
+// Must be less than ANIMATION_TIME, since we switch to
+// or from the overview completely after ANIMATION_TIME,
+// and don't want the shading animation to get cut off
+const SHADE_ANIMATION_TIME = .20;
 
-const GLSL_DIM_EFFECT_DECLARATIONS = '';
-const GLSL_DIM_EFFECT_CODE = '\
-   vec2 dist = cogl_tex_coord_in[0].xy - vec2(0.5, 0.5); \
-   float elipse_radius = 0.5; \
-   /* from https://bugzilla.gnome.org/show_bug.cgi?id=669798: \
-      the alpha on the gradient goes from 250 at its darkest to 180 at its most transparent. */ \
-   float y = 250.0 / 255.0; \
-   float x = 180.0 / 255.0; \
-   /* interpolate darkening value, based on distance from screen center */ \
-   float val = min(length(dist), elipse_radius); \
-   float a = mix(x, y, val / elipse_radius); \
-   /* dim_factor varies from [1.0 -> 0.5] when overview is showing \
-      We use it to smooth value, then we clamp it to valid color interval */ \
-   a = clamp(a - cogl_color_in.r + 0.5, 0.0, 1.0); \
-   /* We\'re blending between: color and black color (obviously omitted in the equation) */ \
-   cogl_color_out.xyz = cogl_color_out.xyz * (1.0 - a); \
-   cogl_color_out.a = 1.0;';
+const DND_WINDOW_SWITCH_TIMEOUT = 1250;
 
 const ShellInfo = new Lang.Class({
     Name: 'ShellInfo',
@@ -103,7 +93,9 @@ const Overview = new Lang.Class({
     _init: function() {
         this._overviewCreated = false;
         this._initCalled = false;
+        this._controlPressed = false;
 
+        global.stage.connect('captured-event', Lang.bind(this, this._capturedEvent));
         Main.sessionMode.connect('updated', Lang.bind(this, this._sessionUpdated));
         this._sessionUpdated();
     },
@@ -117,41 +109,49 @@ const Overview = new Lang.Class({
 
         this._overviewCreated = true;
 
-        // The main BackgroundActor is inside global.window_group which is
+        // The main Background actors are inside global.window_group which are
         // hidden when displaying the overview, so we create a new
         // one. Instances of this class share a single CoglTexture behind the
         // scenes which allows us to show the background with different
         // rendering options without duplicating the texture data.
-        this._background = Meta.BackgroundActor.new_for_screen(global.screen);
-        this._background.add_glsl_snippet(Meta.SnippetHook.FRAGMENT,
-                                          GLSL_DIM_EFFECT_DECLARATIONS,
-                                          GLSL_DIM_EFFECT_CODE,
-                                          false);
-        this._background.hide();
-        global.overlay_group.add_actor(this._background);
+        let monitor = Main.layoutManager.primaryMonitor;
 
         this._desktopFade = new St.Bin();
         global.overlay_group.add_actor(this._desktopFade);
 
+        let layout = new Clutter.BinLayout();
+        this._stack = new Clutter.Actor({ layout_manager: layout });
+        this._stack.add_constraint(new LayoutManager.MonitorConstraint({ primary: true }));
+
         /* Translators: This is the main view to select
            activities. See also note for "Activities" string. */
         this._overview = new St.BoxLayout({ name: 'overview',
                                             accessible_name: _("Overview"),
                                             reactive: true,
-                                            vertical: true });
+                                            vertical: true,
+                                            x_expand: true,
+                                            y_expand: true });
         this._overview._delegate = this;
 
-        this._group = new St.BoxLayout({ name: 'overview-group' });
+        this._groupStack = new St.Widget({ layout_manager: new Clutter.BinLayout(),
+                                           x_expand: true, y_expand: true,
+                                           clip_to_allocation: true });
+        this._group = new St.BoxLayout({ name: 'overview-group',
+                                         reactive: true,
+                                         x_expand: true, y_expand: true });
+        this._groupStack.add_actor(this._group);
 
-        this._capturedEventId = 0;
-        this._buttonPressId = 0;
+        this._backgroundGroup = new Meta.BackgroundGroup();
+        global.overlay_group.add_child(this._backgroundGroup);
+        this._backgroundGroup.hide();
+        this._bgManagers = [];
 
         this.visible = false;           // animating to overview, in overview, animating out
         this._shown = false;            // show() and not hide()
         this._shownTemporarily = false; // showTemporarily() and not hideTemporarily()
         this._modal = false;            // have a modal grab
         this.animationInProgress = false;
-        this._hideInProgress = false;
+        this.visibleTarget = false;
 
         // During transitions, we raise this to the top to avoid having the overview
         // area be reactive; it causes too many issues such as double clicks on
@@ -161,8 +161,9 @@ const Overview = new Lang.Class({
         this._overview.add_actor(this._coverPane);
         this._coverPane.connect('event', Lang.bind(this, function (actor, event) { return true; }));
 
-        this._overview.hide();
-        global.overlay_group.add_actor(this._overview);
+        this._stack.hide();
+        this._stack.add_actor(this._overview);
+        global.overlay_group.add_actor(this._stack);
 
         this._coverPane.hide();
 
@@ -175,6 +176,7 @@ const Overview = new Lang.Class({
         Main.xdndHandler.connect('drag-end', Lang.bind(this, this._onDragEnd));
 
         global.screen.connect('restacked', Lang.bind(this, this._onRestacked));
+        this._group.connect('scroll-event', Lang.bind(this, this._onScrollEvent));
 
         this._windowSwitchTimeoutId = 0;
         this._windowSwitchTimestamp = 0;
@@ -186,6 +188,70 @@ const Overview = new Lang.Class({
             this.init();
     },
 
+    _updateBackgrounds: function() {
+        for (let i = 0; i < this._bgManagers.length; i++)
+            this._bgManagers[i].destroy();
+
+        this._bgManagers = [];
+
+        for (let i = 0; i < Main.layoutManager.monitors.length; i++) {
+            let bgManager = new Background.BackgroundManager({ container: this._backgroundGroup,
+                                                               monitorIndex: i,
+                                                               effects: Meta.BackgroundEffects.VIGNETTE });
+            this._bgManagers.push(bgManager);
+        }
+    },
+
+    _unshadeBackgrounds: function() {
+        let backgrounds = this._backgroundGroup.get_children();
+        for (let i = 0; i < backgrounds.length; i++) {
+            let background = backgrounds[i]._delegate;
+
+            Tweener.addTween(background,
+                             { brightness: 1.0,
+                               time: SHADE_ANIMATION_TIME,
+                               transition: 'easeOutQuad'
+                             });
+            Tweener.addTween(background,
+                             { vignetteSharpness: 0.0,
+                               time: SHADE_ANIMATION_TIME,
+                               transition: 'easeOutQuad'
+                             });
+        }
+    },
+
+    _shadeBackgrounds: function() {
+        let backgrounds = this._backgroundGroup.get_children();
+        for (let i = 0; i < backgrounds.length; i++) {
+            let background = backgrounds[i]._delegate;
+
+            Tweener.addTween(background,
+                             { brightness: 0.8,
+                               time: SHADE_ANIMATION_TIME,
+                               transition: 'easeOutQuad'
+                             });
+            Tweener.addTween(background,
+                             { vignetteSharpness: 0.7,
+                               time: SHADE_ANIMATION_TIME,
+                               transition: 'easeOutQuad'
+                             });
+        }
+    },
+
+    _capturedEvent: function(actor, event) {
+        let type = event.type();
+        if (type != Clutter.EventType.KEY_PRESS &&
+            type != Clutter.EventType.KEY_RELEASE)
+            return false;
+
+        let symbol = event.get_key_symbol();
+        if (symbol == Clutter.KEY_Control_L ||
+            symbol == Clutter.KEY_Control_R)
+            this._controlPressed = type == Clutter.EventType.KEY_PRESS;
+
+        return false;
+    },
+
     _sessionUpdated: function() {
         this.isDummy = !Main.sessionMode.hasOverview;
         this._createOverview();
@@ -215,43 +281,46 @@ const Overview = new Lang.Class({
                                               in the search entry when no search is
                                               active; it should not exceed ~30
                                               characters. */
-                                           hint_text: _("Type to search..."),
+                                           hint_text: _("Type to search…"),
                                            track_hover: true,
                                            can_focus: true });
         this._searchEntryBin = new St.Bin({ child: this._searchEntry,
                                             x_align: St.Align.MIDDLE });
         this._overview.add_actor(this._searchEntryBin);
 
-        // TODO - recalculate everything when desktop size changes
+        // Create controls
         this._dash = new Dash.Dash();
-        this._group.add_actor(this._dash.actor);
+        this._viewSelector = new ViewSelector.ViewSelector(this._searchEntry,
+                                                           this._dash.showAppsButton);
+        this._thumbnailsBox = new WorkspaceThumbnail.ThumbnailsBox();
+        this._controls = new OverviewControls.ControlsManager(this._dash,
+                                                              this._thumbnailsBox,
+                                                              this._viewSelector);
+
+        this._controls.dashActor.x_align = Clutter.ActorAlign.START;
+        this._controls.dashActor.y_expand = true;
+
+        // Put the dash in a separate layer to allow content to be centered
+        this._groupStack.add_actor(this._controls.dashActor);
+
+        // Pack all the actors into the group
+        this._group.add_actor(this._controls.dashSpacer);
+        this._group.add(this._viewSelector.actor, { x_fill: true,
+                                                    expand: true });
+        this._group.add_actor(this._controls.thumbnailsActor);
+
+        // Add our same-line elements after the search entry
+        this._overview.add(this._groupStack, { y_fill: true, expand: true });
+
+        this._stack.add_actor(this._controls.indicatorActor);
+
+        // TODO - recalculate everything when desktop size changes
         this.dashIconSize = this._dash.iconSize;
         this._dash.connect('icon-size-changed',
                            Lang.bind(this, function() {
                                this.dashIconSize = this._dash.iconSize;
                            }));
 
-        // Translators: this is the name of the dock/favorites area on
-        // the left of the overview
-        Main.ctrlAltTabManager.addGroup(this._dash.actor, _("Dash"), 'user-bookmarks-symbolic');
-
-        this._viewSelector = new ViewSelector.ViewSelector(this._searchEntry,
-                                                           this._dash.showAppsButton);
-        this._group.add(this._viewSelector.actor, { x_fill: true,
-                                                    expand: true });
-
-        // Add our same-line elements after the search entry
-        this._overview.add(this._group, { y_fill: true,
-                                          expand: true });
-
-        // Then account for message tray
-        this._messageTrayGhost = new St.Bin({ style_class: 'message-tray-summary',
-                                              reactive: false,
-                                              opacity: 0,
-                                              x_fill: true,
-                                              y_fill: true });
-        this._overview.add_actor(this._messageTrayGhost);
-
         Main.layoutManager.connect('monitors-changed', Lang.bind(this, this._relayout));
         this._relayout();
     },
@@ -344,6 +413,10 @@ const Overview = new Lang.Class({
         return DND.DragMotionResult.CONTINUE;
     },
 
+    _onScrollEvent: function(actor, event) {
+        this.emit('scroll-event', event);
+    },
+
     addAction: function(action) {
         if (this.isDummy)
             return;
@@ -373,16 +446,12 @@ const Overview = new Lang.Class({
         // when it is next shown.
         this.hide();
 
-        let primary = Main.layoutManager.primaryMonitor;
+        let workArea = Main.layoutManager.getWorkAreaForMonitor(Main.layoutManager.primaryIndex);
 
-        let contentY = Main.panel.actor.height;
-        let contentHeight = primary.height - contentY - Main.messageTray.actor.height;
+        this._coverPane.set_position(0, workArea.y);
+        this._coverPane.set_size(workArea.width, workArea.height);
 
-        this._overview.set_position(primary.x, primary.y);
-        this._overview.set_size(primary.width, primary.height);
-
-        this._coverPane.set_position(0, contentY);
-        this._coverPane.set_size(primary.width, contentHeight);
+        this._updateBackgrounds();
     },
 
     _onRestacked: function() {
@@ -466,6 +535,7 @@ const Overview = new Lang.Class({
 
         this.visible = true;
         this.animationInProgress = true;
+        this.visibleTarget = true;
 
         // All the the actors in the window group are completely obscured,
         // hiding the group holding them while the Overview is displayed greatly
@@ -478,24 +548,20 @@ const Overview = new Lang.Class({
         // Disable unredirection while in the overview
         Meta.disable_unredirect_for_screen(global.screen);
         global.window_group.hide();
-        this._overview.show();
-        this._background.show();
+        global.top_window_group.hide();
+        this._stack.show();
+        this._backgroundGroup.show();
         this._viewSelector.show();
 
-        this._overview.opacity = 0;
-        Tweener.addTween(this._overview,
+        this._stack.opacity = 0;
+        Tweener.addTween(this._stack,
                          { opacity: 255,
                            transition: 'easeOutQuad',
                            time: ANIMATION_TIME,
                            onComplete: this._showDone,
                            onCompleteScope: this
                          });
-
-        Tweener.addTween(this._background,
-                         { dim_factor: 0.8,
-                           time: ANIMATION_TIME,
-                           transition: 'easeOutQuad'
-                         });
+        this._shadeBackgrounds();
 
         this._coverPane.raise_top();
         this._coverPane.show();
@@ -530,6 +596,9 @@ const Overview = new Lang.Class({
         if (!this._shown)
             return;
 
+        if (this._controlPressed)
+            return;
+
         if (!this._shownTemporarily)
             this._animateNotVisible();
 
@@ -602,24 +671,19 @@ const Overview = new Lang.Class({
             return;
 
         this.animationInProgress = true;
-        this._hideInProgress = true;
+        this.visibleTarget = false;
 
         this._viewSelector.zoomFromOverview();
 
         // Make other elements fade out.
-        Tweener.addTween(this._overview,
+        Tweener.addTween(this._stack,
                          { opacity: 0,
                            transition: 'easeOutQuad',
                            time: ANIMATION_TIME,
                            onComplete: this._hideDone,
                            onCompleteScope: this
                          });
-
-        Tweener.addTween(this._background,
-                         { dim_factor: 1.0,
-                           time: ANIMATION_TIME,
-                           transition: 'easeOutQuad'
-                         });
+        this._unshadeBackgrounds();
 
         this._coverPane.raise_top();
         this._coverPane.show();
@@ -645,15 +709,15 @@ const Overview = new Lang.Class({
         Meta.enable_unredirect_for_screen(global.screen);
 
         global.window_group.show();
+        global.top_window_group.show();
 
         this._viewSelector.hide();
         this._desktopFade.hide();
-        this._background.hide();
-        this._overview.hide();
+        this._backgroundGroup.hide();
+        this._stack.hide();
 
         this.visible = false;
         this.animationInProgress = false;
-        this._hideInProgress = false;
 
         this._coverPane.hide();
 

js/ui/overviewControls.js

@@ -0,0 +1,551 @@
+// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
+
+const Clutter = imports.gi.Clutter;
+const Lang = imports.lang;
+const Meta = imports.gi.Meta;
+const St = imports.gi.St;
+const Shell = imports.gi.Shell;
+
+const Main = imports.ui.main;
+const Params = imports.misc.params;
+const Tweener = imports.ui.tweener;
+const ViewSelector = imports.ui.viewSelector;
+
+const SIDE_CONTROLS_ANIMATION_TIME = 0.16;
+
+function getRtlSlideDirection(direction, actor) {
+    let rtl = (actor.text_direction == Clutter.TextDirection.RTL);
+    if (rtl)
+        direction = (direction == SlideDirection.LEFT) ?
+            SlideDirection.RIGHT : SlideDirection.LEFT;
+
+    return direction;
+};
+
+const SlideDirection = {
+    LEFT: 0,
+    RIGHT: 1
+};
+
+const SlideLayout = new Lang.Class({
+    Name: 'SlideLayout',
+    Extends: Clutter.FixedLayout,
+
+    _init: function(params) {
+        this._slideX = 1;
+        this._direction = SlideDirection.LEFT;
+
+        this.parent(params);
+    },
+
+    vfunc_get_preferred_width: function(container, forHeight) {
+        let child = container.get_first_child();
+
+        let [minWidth, natWidth] = child.get_preferred_width(forHeight);
+
+        minWidth *= this._slideX;
+        natWidth *= this._slideX;
+
+        return [minWidth, natWidth];
+    },
+
+    vfunc_allocate: function(container, box, flags) {
+        let child = container.get_first_child();
+
+        let [, , natWidth, natHeight] = child.get_preferred_size();
+        let availWidth = Math.round(box.x2 - box.x1);
+        let availHeight = Math.round(box.y2 - box.y1);
+
+        let realDirection = getRtlSlideDirection(this._direction, child);
+        let translationX = (realDirection == SlideDirection.LEFT) ?
+            (availWidth - natWidth) : (natWidth - availWidth);
+
+        let actorBox = new Clutter.ActorBox({ x1: translationX,
+                                              y1: 0,
+                                              x2: child.x_expand ? availWidth : natWidth,
+                                              y2: child.y_expand ? availHeight : natHeight });
+
+        child.allocate(actorBox, flags);
+    },
+
+    set slideX(value) {
+        this._slideX = value;
+        this.layout_changed();
+    },
+
+    get slideX() {
+        return this._slideX;
+    },
+
+    set slideDirection(direction) {
+        this._direction = direction;
+        this.layout_changed();
+    },
+
+    get slideDirection() {
+        return this._direction;
+    }
+});
+
+const SlidingControl = new Lang.Class({
+    Name: 'SlidingControl',
+
+    _init: function(params) {
+        params = Params.parse(params, { slideDirection: SlideDirection.LEFT });
+
+        this.visible = true;
+        this.inDrag = false;
+
+        this.layout = new SlideLayout();
+        this.layout.slideDirection = params.slideDirection;
+        this.actor = new St.Widget({ layout_manager: this.layout,
+                                     style_class: 'overview-controls',
+                                     clip_to_allocation: true });
+
+        Main.overview.connect('showing', Lang.bind(this, this._onOverviewShowing));
+
+        Main.overview.connect('item-drag-begin', Lang.bind(this, this._onDragBegin));
+        Main.overview.connect('item-drag-end', Lang.bind(this, this._onDragEnd));
+        Main.overview.connect('item-drag-cancelled', Lang.bind(this, this._onDragEnd));
+
+        Main.overview.connect('window-drag-begin', Lang.bind(this, this._onWindowDragBegin));
+        Main.overview.connect('window-drag-cancelled', Lang.bind(this, this._onWindowDragEnd));
+        Main.overview.connect('window-drag-end', Lang.bind(this, this._onWindowDragEnd));
+    },
+
+    getSlide: function() {
+        throw new Error('getSlide() must be overridden');
+    },
+
+    updateSlide: function() {
+        Tweener.addTween(this.layout, { slideX: this.getSlide(),
+                                        time: SIDE_CONTROLS_ANIMATION_TIME,
+                                        transition: 'easeOutQuad' });
+    },
+
+    getVisibleWidth: function() {
+        let child = this.actor.get_first_child();
+        let [, , natWidth, ] = child.get_preferred_size();
+        return natWidth;
+    },
+
+    _getTranslation: function() {
+        let child = this.actor.get_first_child();
+        let direction = getRtlSlideDirection(this.layout.slideDirection, child);
+        let visibleWidth = this.getVisibleWidth();
+
+        if (direction == SlideDirection.LEFT)
+            return - visibleWidth;
+        else
+            return visibleWidth;
+    },
+
+    _updateTranslation: function() {
+        let translationStart = 0;
+        let translationEnd = 0;
+        let translation = this._getTranslation();
+
+        if (this.visible) {
+            translationStart = translation;
+        } else {
+            translationEnd = translation;
+        }
+
+        if (this.actor.translation_x == translationEnd)
+            return;
+
+        this.actor.translation_x = translationStart;
+        Tweener.addTween(this.actor, { translation_x: translationEnd,
+                                       time: SIDE_CONTROLS_ANIMATION_TIME,
+                                       transition: 'easeOutQuad'
+                                     });
+    },
+
+    _onOverviewShowing: function() {
+        // reset any translation and make sure the actor is visible when
+        // entering the overview
+        this.visible = true;
+        this.layout.slideX = this.getSlide();
+        this.actor.translation_x = 0;
+    },
+
+    _onWindowDragBegin: function() {
+        this._onDragBegin();
+    },
+
+    _onWindowDragEnd: function() {
+        this._onDragEnd();
+    },
+
+    _onDragBegin: function() {
+        this.inDrag = true;
+        this.actor.translation_x = 0;
+        this.updateSlide();
+    },
+
+    _onDragEnd: function() {
+        this.inDrag = false;
+        this.updateSlide();
+    },
+
+    fadeIn: function() {
+        Tweener.addTween(this.actor, { opacity: 255,
+                                       time: SIDE_CONTROLS_ANIMATION_TIME / 2,
+                                       transition: 'easeInQuad'
+                                     });
+    },
+
+    fadeHalf: function() {
+        Tweener.addTween(this.actor, { opacity: 128,
+                                       time: SIDE_CONTROLS_ANIMATION_TIME / 2,
+                                       transition: 'easeOutQuad'
+                                     });
+    },
+
+    slideIn: function() {
+        this.visible = true;
+        // we will update slideX and the translation from pageEmpty
+    },
+
+    slideOut: function() {
+        this.visible = false;
+        this._updateTranslation();
+        // we will update slideX from pageEmpty
+    },
+
+    pageEmpty: function() {
+        // When pageEmpty is received, there's no visible view in the
+        // selector; this means we can now safely set the full slide for
+        // the next page, since slideIn or slideOut might have been called,
+        // changing the visiblity
+        this.layout.slideX = this.getSlide();
+        this._updateTranslation();
+    }
+});
+
+const ThumbnailsSlider = new Lang.Class({
+    Name: 'ThumbnailsSlider',
+    Extends: SlidingControl,
+
+    _init: function(thumbnailsBox) {
+        this.parent({ slideDirection: SlideDirection.RIGHT });
+
+        this._thumbnailsBox = thumbnailsBox;
+
+        // SlideLayout reads the actor's expand flags to decide
+        // whether to allocate the natural size to its child, or the whole
+        // available allocation
+        this._thumbnailsBox.actor.y_expand = true;
+
+        this.actor.request_mode = Clutter.RequestMode.WIDTH_FOR_HEIGHT;
+        this.actor.reactive = true;
+        this.actor.track_hover = true;
+        this.actor.add_actor(this._thumbnailsBox.actor);
+
+        Main.layoutManager.connect('monitors-changed', Lang.bind(this, this.updateSlide));
+        this.actor.connect('notify::hover', Lang.bind(this, this.updateSlide));
+    },
+
+    _getAlwaysZoomOut: function() {
+        // Always show the pager when hover, during a drag, or if workspaces are
+        // actually used, e.g. there are windows on more than one
+        let alwaysZoomOut = this.actor.hover || this.inDrag || !Meta.prefs_get_dynamic_workspaces() || global.screen.n_workspaces > 2;
+
+        if (!alwaysZoomOut) {
+            let monitors = Main.layoutManager.monitors;
+            let primary = Main.layoutManager.primaryMonitor;
+
+            /* Look for any monitor to the right of the primary, if there is
+             * one, we always keep zoom out, otherwise its hard to reach
+             * the thumbnail area without passing into the next monitor. */
+            for (let i = 0; i < monitors.length; i++) {
+                if (monitors[i].x >= primary.x + primary.width) {
+                    alwaysZoomOut = true;
+                    break;
+                }
+            }
+        }
+
+        return alwaysZoomOut;
+    },
+
+    getSlide: function() {
+        if (!this.visible)
+            return 0;
+
+        let alwaysZoomOut = this._getAlwaysZoomOut();
+        if (alwaysZoomOut)
+            return 1;
+
+        let child = this.actor.get_first_child();
+        let preferredHeight = child.get_preferred_height(-1)[1];
+        let expandedWidth = child.get_preferred_width(preferredHeight)[1];
+        let visibleWidth = child.get_theme_node().get_length('visible-width');
+
+        return visibleWidth / expandedWidth;
+    },
+
+    getVisibleWidth: function() {
+        let alwaysZoomOut = this._getAlwaysZoomOut();
+        if (alwaysZoomOut)
+            return this.parent();
+
+        let child = this.actor.get_first_child();
+        return child.get_theme_node().get_length('visible-width');
+    }
+});
+
+const DashSlider = new Lang.Class({
+    Name: 'DashSlider',
+    Extends: SlidingControl,
+
+    _init: function(dash) {
+        this.parent({ slideDirection: SlideDirection.LEFT });
+
+        this._dash = dash;
+
+        // SlideLayout reads the actor's expand flags to decide
+        // whether to allocate the natural size to its child, or the whole
+        // available allocation
+        this._dash.actor.x_expand = true;
+        this._dash.actor.y_expand = true;
+        this.actor.add_actor(this._dash.actor);
+
+        this._dash.connect('icon-size-changed', Lang.bind(this, this.updateSlide));
+    },
+
+    getSlide: function() {
+        if (this.visible || this.inDrag)
+            return 1;
+        else
+            return 0;
+    },
+
+    _onWindowDragBegin: function() {
+        this.fadeHalf();
+    },
+
+    _onWindowDragEnd: function() {
+        this.fadeIn();
+    }
+});
+
+const DashSpacer = new Lang.Class({
+    Name: 'DashSpacer',
+    Extends: St.Widget,
+
+    _init: function(params) {
+        this.parent(params);
+
+        this._bindConstraint = null;
+    },
+
+    setDashActor: function(dashActor) {
+        if (this._bindConstraint) {
+            this.remove_constraint(this._bindConstraint);
+            this._bindConstraint = null;
+        }
+
+        if (dashActor) {
+            this._bindConstraint = new Clutter.BindConstraint({ source: dashActor,
+                                                                coordinate: Clutter.BindCoordinate.SIZE });
+            this.add_constraint(this._bindConstraint);
+        }
+    },
+
+    vfunc_get_preferred_width: function(forHeight) {
+        let box = this.get_allocation_box();
+        let minWidth = this.parent(forHeight)[0];
+        let natWidth = box.x2 - box.x1;
+        return [minWidth, natWidth];
+    },
+
+    vfunc_get_preferred_height: function(forWidth) {
+        let box = this.get_allocation_box();
+        let minHeight = this.parent(forWidth)[0];
+        let natHeight = box.y2 - box.y1;
+        return [minHeight, natHeight];
+    }
+});
+
+const MessagesIndicator = new Lang.Class({
+    Name: 'MessagesIndicator',
+
+    _init: function(viewSelector) {
+        this._count = 0;
+        this._sources = [];
+        this._viewSelector = viewSelector;
+
+        this._container = new St.BoxLayout({ style_class: 'messages-indicator-contents',
+                                             reactive: true,
+                                             track_hover: true,
+                                             x_expand: true,
+                                             y_expand: true,
+                                             x_align: Clutter.ActorAlign.CENTER });
+
+        this._icon = new St.Icon({ icon_name: 'user-idle-symbolic',
+                                   icon_size: 16 });
+        this._container.add_actor(this._icon);
+
+        this._label = new St.Label();
+        this._container.add_actor(this._label);
+
+        this._highlight = new St.Widget({ style_class: 'messages-indicator-highlight',
+                                          x_expand: true,
+                                          y_expand: true,
+                                          y_align: Clutter.ActorAlign.END,
+                                          visible: false });
+
+        this._container.connect('notify::hover', Lang.bind(this,
+            function() {
+                this._highlight.visible = this._container.hover;
+            }));
+
+        let clickAction = new Clutter.ClickAction();
+        this._container.add_action(clickAction);
+        clickAction.connect('clicked', Lang.bind(this,
+            function() {
+                Main.messageTray.openTray();
+            }));
+
+        Main.messageTray.connect('showing', Lang.bind(this,
+            function() {
+                this._highlight.visible = false;
+                this._container.hover = false;
+            }));
+
+        let layout = new Clutter.BinLayout();
+        this.actor = new St.Widget({ layout_manager: layout,
+                                     style_class: 'messages-indicator',
+                                     y_expand: true,
+                                     y_align: Clutter.ActorAlign.END,
+                                     visible: false });
+        this.actor.add_actor(this._container);
+        this.actor.add_actor(this._highlight);
+
+        Main.messageTray.connect('source-added', Lang.bind(this, this._onSourceAdded));
+        Main.messageTray.connect('source-removed', Lang.bind(this, this._onSourceRemoved));
+
+        let sources = Main.messageTray.getSources();
+        sources.forEach(Lang.bind(this, function(source) { this._onSourceAdded(null, source); }));
+
+        this._viewSelector.connect('page-changed', Lang.bind(this, this._updateVisibility));
+        Main.overview.connect('showing', Lang.bind(this, this._updateVisibility));
+    },
+
+    _onSourceAdded: function(tray, source) {
+        if (source.trayIcon)
+            return;
+
+        if (source.isTransient)
+            return;
+
+        source.connect('count-updated', Lang.bind(this, this._updateCount));
+        this._sources.push(source);
+        this._updateCount();
+    },
+
+    _onSourceRemoved: function(tray, source) {
+        this._sources.splice(this._sources.indexOf(source), 1);
+        this._updateCount();
+    },
+
+    _updateCount: function() {
+        let count = 0;
+        this._sources.forEach(Lang.bind(this,
+            function(source) {
+                count += source.indicatorCount;
+            }));
+
+        this._count = count;
+        this._label.text = ngettext("%d new message",
+                                    "%d new messages",
+                                   count).format(count);
+
+        this._updateVisibility();
+    },
+
+    _updateVisibility: function() {
+        let activePage = this._viewSelector.getActivePage();
+        let visible = ((this._count > 0) && (activePage == ViewSelector.ViewPage.WINDOWS));
+
+        this.actor.visible = visible;
+    }
+});
+
+const ControlsManager = new Lang.Class({
+    Name: 'ControlsManager',
+
+    _init: function(dash, thumbnails, viewSelector) {
+        this._dashSlider = new DashSlider(dash);
+        this.dashActor = this._dashSlider.actor;
+        this.dashSpacer = new DashSpacer();
+        this.dashSpacer.setDashActor(this.dashActor);
+
+        this._thumbnailsSlider = new ThumbnailsSlider(thumbnails);
+        this.thumbnailsActor = this._thumbnailsSlider.actor;
+
+        this._indicator = new MessagesIndicator(viewSelector);
+        this.indicatorActor = this._indicator.actor;
+
+        this._viewSelector = viewSelector;
+        this._viewSelector.connect('page-changed', Lang.bind(this, this._setVisibility));
+        this._viewSelector.connect('page-empty', Lang.bind(this, this._onPageEmpty));
+
+        Main.overview.connect('showing', Lang.bind(this, this._updateSpacerVisibility));
+        Main.overview.connect('item-drag-begin', Lang.bind(this,
+            function() {
+                let activePage = this._viewSelector.getActivePage();
+                if (activePage != ViewSelector.ViewPage.WINDOWS)
+                    this._viewSelector.fadeHalf();
+            }));
+        Main.overview.connect('item-drag-end', Lang.bind(this,
+            function() {
+                this._viewSelector.fadeIn();
+            }));
+        Main.overview.connect('item-drag-cancelled', Lang.bind(this,
+            function() {
+                this._viewSelector.fadeIn();
+            }));
+    },
+
+    _setVisibility: function() {
+        // Ignore the case when we're leaving the overview, since
+        // actors will be made visible again when entering the overview
+        // next time, and animating them while doing so is just
+        // unnecessary noise
+        if (!Main.overview.visible ||
+            (Main.overview.animationInProgress && !Main.overview.visibleTarget))
+            return;
+
+        let activePage = this._viewSelector.getActivePage();
+        let dashVisible = (activePage == ViewSelector.ViewPage.WINDOWS ||
+                           activePage == ViewSelector.ViewPage.APPS);
+        let thumbnailsVisible = (activePage == ViewSelector.ViewPage.WINDOWS);
+
+        if (dashVisible)
+            this._dashSlider.slideIn();
+        else
+            this._dashSlider.slideOut();
+
+        if (thumbnailsVisible)
+            this._thumbnailsSlider.slideIn();
+        else
+            this._thumbnailsSlider.slideOut();
+    },
+
+    _updateSpacerVisibility: function() {
+        if (Main.overview.animationInProgress && !Main.overview.visibleTarget)
+            return;
+
+        let activePage = this._viewSelector.getActivePage();
+        this.dashSpacer.visible = (activePage == ViewSelector.ViewPage.WINDOWS);
+    },
+
+    _onPageEmpty: function() {
+        this._dashSlider.pageEmpty();
+        this._thumbnailsSlider.pageEmpty();
+
+        this._updateSpacerVisibility();
+    }
+});

js/ui/panel.js

@@ -203,7 +203,7 @@ const TextShadower = new Lang.Class({
             let child = children[i];
             let childBox = new Clutter.ActorBox();
             // The order of the labels here is arbitrary, except
-            // we know the "real" label is at the end because Clutter.Group
+            // we know the "real" label is at the end because Clutter.Actor
             // sorts by Z order
             switch (i) {
                 case 0: // top
@@ -644,7 +644,7 @@ const ActivitiesButton = new Lang.Class({
 
         this.actor.label_actor = this._label;
 
-        this.hotCorner = new Layout.HotCorner();
+        this.hotCorner = new Layout.HotCorner(Main.layoutManager);
         container.add_actor(this.hotCorner.actor);
 
         this.actor.connect('captured-event', Lang.bind(this, this._onCapturedEvent));
@@ -739,7 +739,6 @@ const ActivitiesButton = new Lang.Class({
         if (pickedActor == this.actor) {
             if (!Main.overview.visible && !Main.overview.animationInProgress) {
                 Main.overview.showTemporarily();
-                Main.overview.beginItemDrag(actor);
             }
         }
 
@@ -920,6 +919,7 @@ const PANEL_ITEM_IMPLEMENTATIONS = {
     'appMenu': AppMenuButton,
     'dateMenu': imports.ui.dateMenu.DateMenuButton,
     'a11y': imports.ui.status.accessibility.ATIndicator,
+    'a11yGreeter': imports.ui.status.accessibility.ATGreeterIndicator,
     'volume': imports.ui.status.volume.Indicator,
     'battery': imports.ui.status.power.Indicator,
     'lockScreen': imports.ui.status.lockScreenMenu.Indicator,
@@ -1065,6 +1065,9 @@ const Panel = new Lang.Class({
     },
 
     _onButtonPress: function(actor, event) {
+        if (Main.modalCount > 0)
+            return false;
+
         if (event.get_source() != actor)
             return false;
 

js/ui/panelMenu.js

@@ -205,10 +205,8 @@ const Button = new Lang.Class({
         // Setting the max-height won't do any good if the minimum height of the
         // menu is higher then the screen; it's useful if part of the menu is
         // scrollable so the minimum height is smaller than the natural height
-        let monitor = Main.layoutManager.primaryMonitor;
-        this.menu.actor.style = ('max-height: ' +
-                                 Math.round(monitor.height - Main.panel.actor.height) +
-                                 'px;');
+        let workArea = Main.layoutManager.getWorkAreaForMonitor(Main.layoutManager.primaryIndex);
+        this.menu.actor.style = ('max-height: ' + Math.round(workArea.height) + 'px;');
     },
 
     destroy: function() {

js/ui/pointerWatcher.js

@@ -42,8 +42,7 @@ const PointerWatcher = new Lang.Class({
 
     _init: function() {
         this._idleMonitor = new GnomeDesktop.IdleMonitor();
-        this._idleMonitor.connect('became-active', Lang.bind(this, this._onIdleMonitorBecameActive));
-        this._idleMonitor.add_watch(IDLE_TIME, Lang.bind(this, this._onIdleMonitorBecameIdle));
+        this._idleMonitor.add_idle_watch(IDLE_TIME, Lang.bind(this, this._onIdleMonitorBecameIdle));
         this._idle = this._idleMonitor.get_idletime() > IDLE_TIME;
         this._watches = [];
         this.pointerX = null;
@@ -87,6 +86,7 @@ const PointerWatcher = new Lang.Class({
 
     _onIdleMonitorBecameIdle: function(monitor) {
         this._idle = true;
+        this._idleMonitor.add_user_active_watch(Lang.bind(this, this._onIdleMonitorBecameActive));
         this._updateTimeout();
     },
 

js/ui/popupMenu.js

@@ -867,7 +867,6 @@ const PopupMenuBase = new Lang.Class({
         this.blockSourceEvents = false;
 
         this._activeMenuItem = null;
-        this._childMenus = [];
         this._settingsActions = { };
 
         this._sessionUpdatedId = Main.sessionMode.connect('updated', Lang.bind(this, this._sessionUpdated));
@@ -914,29 +913,15 @@ const PopupMenuBase = new Lang.Class({
     },
 
     isEmpty: function() {
-        return this.box.get_n_children() == 0;
+        let hasVisibleChildren = this.box.get_children().some(function(child) {
+            return child.visible;
+        });
+
+        return !hasVisibleChildren;
     },
 
-    isChildMenu: function(menu) {
-        return this._childMenus.indexOf(menu) != -1;
-    },
-
-    addChildMenu: function(menu) {
-        if (this.isChildMenu(menu))
-            return;
-
-        this._childMenus.push(menu);
-        this.emit('child-menu-added', menu);
-    },
-
-    removeChildMenu: function(menu) {
-        let index = this._childMenus.indexOf(menu);
-
-        if (index == -1)
-            return;
-
-        this._childMenus.splice(index, 1);
-        this.emit('child-menu-removed', menu);
+    isChildMenu: function() {
+        return false;
     },
 
     /**
@@ -1211,6 +1196,8 @@ const PopupMenu = new Lang.Class({
 
         global.focus_manager.add_group(this.actor);
         this.actor.reactive = true;
+
+        this._childMenus = [];
     },
 
     _boxGetPreferredWidth: function (actor, forHeight, alloc) {
@@ -1237,6 +1224,28 @@ const PopupMenu = new Lang.Class({
         this._boxPointer.setSourceAlignment(alignment);
     },
 
+    isChildMenu: function(menu) {
+        return this._childMenus.indexOf(menu) != -1;
+    },
+
+    addChildMenu: function(menu) {
+        if (this.isChildMenu(menu))
+            return;
+
+        this._childMenus.push(menu);
+        this.emit('child-menu-added', menu);
+    },
+
+    removeChildMenu: function(menu) {
+        let index = this._childMenus.indexOf(menu);
+
+        if (index == -1)
+            return;
+
+        this._childMenus.splice(index, 1);
+        this.emit('child-menu-removed', menu);
+    },
+
     open: function(animate) {
         if (this.isOpen)
             return;
@@ -1258,6 +1267,10 @@ const PopupMenu = new Lang.Class({
         if (this._activeMenuItem)
             this._activeMenuItem.setActive(false);
 
+        this._childMenus.forEach(function(childMenu) {
+            childMenu.close();
+        });
+
         if (this._boxPointer.actor.visible)
             this._boxPointer.hide(animate);
 
@@ -1678,9 +1691,7 @@ const PopupComboBoxMenuItem = new Lang.Class({
     _getTopMenu: function() {
         let actor = this.actor.get_parent();
         while (actor) {
-            if (actor._delegate &&
-                (actor._delegate instanceof PopupMenu ||
-                 actor._delegate instanceof PopupComboMenu))
+            if (actor._delegate && actor._delegate instanceof PopupMenu)
                 return actor._delegate;
 
             actor = actor.get_parent();

js/ui/remoteSearch.js

@@ -123,6 +123,10 @@ function loadRemoteSearchProvider(file, info, data) {
 function remoteProvidersLoaded(loadState) {
     let searchSettings = new Gio.Settings({ schema: Search.SEARCH_PROVIDERS_SCHEMA });
     let sortOrder = searchSettings.get_strv('sort-order');
+
+    // Special case gnome-control-center to be always active and always first
+    sortOrder.unshift('gnome-control-center.desktop');
+
     let numSorted = sortOrder.length;
 
     loadState.loadedProviders.sort(
@@ -251,6 +255,7 @@ const RemoteSearchProvider = new Lang.Class({
                 metas[i][prop] = metas[i][prop].deep_unpack();
             resultMetas.push({ id: metas[i]['id'],
                                name: metas[i]['name'],
+                               description: metas[i]['description'],
                                createIcon: Lang.bind(this,
                                                      this.createIcon, metas[i]) });
         }

js/ui/screenShield.js

@@ -13,6 +13,7 @@ const Signals = imports.signals;
 const St = imports.gi.St;
 const TweenerEquations = imports.tweener.equations;
 
+const Background = imports.ui.background;
 const GnomeSession = imports.misc.gnomeSession;
 const Hash = imports.misc.hash;
 const Layout = imports.ui.layout;
@@ -29,7 +30,6 @@ const SCREENSAVER_SCHEMA = 'org.gnome.desktop.screensaver';
 const LOCK_ENABLED_KEY = 'lock-enabled';
 const LOCK_DELAY_KEY = 'lock-delay';
 
-const CURTAIN_SLIDE_TIME = 0.3;
 // fraction of screen height the arrow must reach before completing
 // the slide up automatically
 const ARROW_DRAG_THRESHOLD = 0.1;
@@ -46,43 +46,18 @@ const BUMP_TIME = 0.3;
 
 const SUMMARY_ICON_SIZE = 48;
 
-// Lightbox fading times
-// STANDARD_FADE_TIME is used when the session goes idle, while
-// SHORT_FADE_TIME is used when requesting lock explicitly from the user menu
+// ScreenShield animation time
+// - STANDARD_FADE_TIME is used when the session goes idle
+// - MANUAL_FADE_TIME is used for lowering the shield when asked by the user,
+//   or when cancelling the dialog
+// - BACKGROUND_FADE_TIME is used when the background changes to crossfade to new background
+// - CURTAIN_SLIDE_TIME is used when raising the shield before unlocking
+// - INITIAL_FADE_IN_TIME is used for the initial fade in at startup
 const STANDARD_FADE_TIME = 10;
-const SHORT_FADE_TIME = 0.3;
-
-function sample(offx, offy) {
-    return 'texel += texture2D (sampler, tex_coord.st + pixel_step * ' +
-        'vec2 (' + offx + ',' + offy + '));\n'
-}
-const GLSL_BLUR_EFFECT_DECLARATIONS = ' \
-uniform vec2 pixel_step;\n \
-uniform float desaturation;\n \
-vec4 apply_blur(in sampler2D sampler, in vec2 tex_coord) {\n \
-  vec4 texel;\n \
-  texel = texture2D (sampler, tex_coord.st);\n'
-  + sample(-1.0, -1.0)
-  + sample( 0.0, -1.0)
-  + sample(+1.0, -1.0)
-  + sample(-1.0,  0.0)
-  + sample(+1.0,  0.0)
-  + sample(-1.0, +1.0)
-  + sample( 0.0, +1.0)
-  + sample(+1.0, +1.0) + ' \
-   texel /= 9.0;\n \
-   return texel;\n \
-}\n \
-vec3 desaturate (const vec3 color)\n \
-{\n \
-   const vec3 gray_conv = vec3 (0.299, 0.587, 0.114);\n \
-   vec3 gray = vec3 (dot (gray_conv, color));\n \
-   return vec3 (mix (color.rgb, gray, desaturation));\n \
-}';
-const GLSL_BLUR_EFFECT_CODE = ' \
-cogl_texel = apply_blur(cogl_sampler, cogl_tex_coord.st);\n \
-cogl_texel.rgb = desaturate(cogl_texel.rgb);\n';
-
+const MANUAL_FADE_TIME = 0.8;
+const BACKGROUND_FADE_TIME = 1.0;
+const CURTAIN_SLIDE_TIME = 0.3;
+const INITIAL_FADE_IN_TIME = 0.25;
 
 const Clock = new Lang.Class({
     Name: 'ScreenShieldClock',
@@ -202,7 +177,10 @@ const NotificationsBox = new Lang.Class({
 
     _makeNotificationDetailedSource: function(source, box) {
         let sourceActor = new MessageTray.SourceActor(source, SUMMARY_ICON_SIZE);
-        box.add(sourceActor.actor, { y_fill: true });
+        let sourceBin = new St.Bin({ y_align: St.Align.START,
+                                     x_align: St.Align.START,
+                                     child: sourceActor.actor });
+        box.add(sourceBin);
 
         let textBox = new St.BoxLayout({ vertical: true });
         box.add(textBox, { y_fill: false, y_align: St.Align.START });
@@ -467,22 +445,17 @@ const ScreenShield = new Lang.Class({
                                                    name: 'lockScreenContents' });
         this._lockScreenContents.add_constraint(new Layout.MonitorConstraint({ primary: true }));
 
-        let backgroundActor = Meta.BackgroundActor.new_for_screen(global.screen);
-        backgroundActor.add_glsl_snippet(Meta.SnippetHook.TEXTURE_LOOKUP,
-                                         GLSL_BLUR_EFFECT_DECLARATIONS,
-                                         GLSL_BLUR_EFFECT_CODE,
-                                         true);
-        backgroundActor.set_uniform_float('desaturation',
-                                          1, 1, [0.6]);
-        backgroundActor.connect('notify::size', function(actor) {
-            actor.set_uniform_float('pixel_step', 2, 1, [1/actor.width, 1/actor.height]);
-        });
-
-        this._background = new St.Bin({ style_class: 'screen-shield-background',
-                                        child: backgroundActor });
-        this._lockScreenGroup.add_actor(this._background);
         this._lockScreenGroup.add_actor(this._lockScreenContents);
 
+        this._backgroundGroup = new Clutter.Actor();
+
+        this._lockScreenGroup.add_actor(this._backgroundGroup);
+        this._backgroundGroup.lower_bottom();
+        this._bgManagers = [];
+
+        this._updateBackgrounds();
+        Main.layoutManager.connect('monitors-changed', Lang.bind(this, this._updateBackgrounds));
+
         this._arrowContainer = new St.BoxLayout({ style_class: 'screen-shield-arrows',
                                                   vertical: true,
                                                   x_align: Clutter.ActorAlign.CENTER,
@@ -506,9 +479,16 @@ const ScreenShield = new Lang.Class({
 
         this._lockDialogGroup = new St.Widget({ x_expand: true,
                                                 y_expand: true,
+                                                opacity: 0,
                                                 pivot_point: new Clutter.Point({ x: 0.5, y: 0.5 }),
                                                 name: 'lockDialogGroup' });
 
+        Tweener.addTween(this._lockDialogGroup,
+                         { opacity: 255,
+                           time: INITIAL_FADE_IN_TIME,
+                           transition: 'easeInQuad',
+                         });
+
         this.actor.add_actor(this._lockDialogGroup);
         this.actor.add_actor(this._lockScreenGroup);
 
@@ -557,6 +537,35 @@ const ScreenShield = new Lang.Class({
         this.idleMonitor = new GnomeDesktop.IdleMonitor();
     },
 
+    _createBackground: function(monitorIndex) {
+        let monitor = Main.layoutManager.monitors[monitorIndex];
+        let widget = new St.Widget({ style_class: 'screen-shield-background',
+                                     x: monitor.x,
+                                     y: monitor.y,
+                                     width: monitor.width,
+                                     height: monitor.height });
+
+        let bgManager = new Background.BackgroundManager({ container: widget,
+                                                           monitorIndex: monitorIndex,
+                                                           effects: Meta.BackgroundEffects.BLUR | Meta.BackgroundEffects.DESATURATE,
+                                                           controlPosition: false });
+        bgManager.background.saturation = 0.6;
+
+        this._bgManagers.push(bgManager);
+
+        this._backgroundGroup.add_child(widget);
+    },
+
+    _updateBackgrounds: function() {
+        for (let i = 0; i < this._bgManagers.length; i++)
+            this._bgManagers[i].destroy();
+
+        this._bgManagers = [];
+
+        for (let i = 0; i < Main.layoutManager.monitors.length; i++)
+            this._createBackground(i);
+    },
+
     _liftShield: function(onPrimary, velocity) {
         if (this._isLocked) {
             this._ensureUnlockDialog(onPrimary, true /* allowCancel */);
@@ -566,6 +575,21 @@ const ScreenShield = new Lang.Class({
         }
     },
 
+    _becomeModal: function() {
+        if (this._isModal)
+            return true;
+
+        this._isModal = Main.pushModal(this.actor, { keybindingMode: Shell.KeyBindingMode.LOCK_SCREEN });
+        if (this._isModal)
+            return true;
+
+        // We failed to get a pointer grab, it means that
+        // something else has it. Try with a keyboard grab only
+        this._isModal = Main.pushModal(this.actor, { options: Meta.ModalOptions.POINTER_ALREADY_GRABBED,
+                                                     keybindingMode: Shell.KeyBindingMode.LOCK_SCREEN });
+        return this._isModal;
+    },
+
     _onLockScreenKeyRelease: function(actor, event) {
         let symbol = event.get_key_symbol();
 
@@ -689,7 +713,7 @@ const ScreenShield = new Lang.Class({
             // restore the lock screen to its original place
             // try to use the same speed as the normal animation
             let h = global.stage.height;
-            let time = CURTAIN_SLIDE_TIME * (-this._lockScreenGroup.y) / h;
+            let time = MANUAL_FADE_TIME * (-this._lockScreenGroup.y) / h;
             Tweener.removeTweens(this._lockScreenGroup);
             Tweener.addTween(this._lockScreenGroup,
                              { y: 0,
@@ -723,10 +747,18 @@ const ScreenShield = new Lang.Class({
             }
         }
 
-        if (!this._isModal) {
-            Main.pushModal(this.actor, { keybindingMode: Shell.KeyBindingMode.LOCK_SCREEN });
-            this._isModal = true;
-            }
+        if (!this._becomeModal()) {
+            // We could not become modal, so we can't activate the
+            // screenshield. The user is probably very upset at this
+            // point, but any application using global grabs is broken
+            // Just tell him to stop using this app
+            // 
+            // XXX: another option is to kick the user into the gdm login
+            // screen, where we're not affected by grabs
+            Main.notifyError(_("Unable to lock"),
+                             _("Lock was blocked by an application"));
+            return;
+        }
 
         if (this._lightbox.actor.visible ||
             this._isActive) {
@@ -746,9 +778,7 @@ const ScreenShield = new Lang.Class({
         if (this._activationTime == 0)
             this._activationTime = GLib.get_monotonic_time();
 
-        if (this._becameActiveId == 0)
-            this._becameActiveId = this.idleMonitor.connect('became-active',
-                                                            Lang.bind(this, this._onUserBecameActive));
+        this._becameActiveId = this.idleMonitor.add_user_active_watch(Lang.bind(this, this._onUserBecameActive));
 
         let shouldLock = this._settings.get_boolean(LOCK_ENABLED_KEY) && !this._isLocked;
 
@@ -782,7 +812,7 @@ const ScreenShield = new Lang.Class({
         //   session is effectivelly locked now, it's time to build and show
         //   the lock screen
 
-        this.idleMonitor.disconnect(this._becameActiveId);
+        this.idleMonitor.remove_watch(this._becameActiveId);
         this._becameActiveId = 0;
 
         let lightboxWasShown = this._lightbox.shown;
@@ -803,9 +833,10 @@ const ScreenShield = new Lang.Class({
         // Ensure that the stage window is mapped, before taking a grab
         // otherwise X errors out
         Meta.later_add(Meta.LaterType.BEFORE_REDRAW, Lang.bind(this, function() {
-            if (!this._isModal) {
-                Main.pushModal(this.actor);
-                this._isModal = true;
+            if (!this._becomeModal()) {
+                // In the login screen, this is a hard error. Fail-whale
+                log('Could not acquire modal grab for the login screen. Aborting login process.');
+                Meta.quit(Meta.ExitCode.ERROR);
             }
 
             return false;
@@ -833,6 +864,14 @@ const ScreenShield = new Lang.Class({
                          });
     },
 
+    _hideLockScreenComplete: function() {
+        if (Main.sessionMode.currentMode == 'lock-screen')
+            Main.sessionMode.popMode('lock-screen');
+
+        this._lockScreenState = MessageTray.State.HIDDEN;
+        this._lockScreenGroup.hide();
+    },
+
     _hideLockScreen: function(animate, velocity) {
         if (this._lockScreenState == MessageTray.State.HIDDEN)
             return;
@@ -856,21 +895,13 @@ const ScreenShield = new Lang.Class({
                              { y: -h,
                                time: time,
                                transition: 'easeInQuad',
-                               onComplete: function() {
-                                   this._lockScreenState = MessageTray.State.HIDDEN;
-                                   this._lockScreenGroup.hide();
-                               },
-                               onCompleteScope: this,
+                               onComplete: Lang.bind(this, this._hideLockScreenComplete),
                              });
         } else {
-            this._lockScreenState = MessageTray.State.HIDDEN;
-            this._lockScreenGroup.hide();
+            this._hideLockScreenComplete();
         }
 
         global.stage.show_cursor();
-
-        if (Main.sessionMode.currentMode == 'lock-screen')
-            Main.sessionMode.popMode('lock-screen');
     },
 
     _ensureUnlockDialog: function(onPrimary, allowCancel) {
@@ -930,7 +961,7 @@ const ScreenShield = new Lang.Class({
             Tweener.removeTweens(this._lockScreenGroup);
             Tweener.addTween(this._lockScreenGroup,
                              { y: 0,
-                               time: SHORT_FADE_TIME,
+                               time: MANUAL_FADE_TIME,
                                transition: 'easeOutQuad',
                                onComplete: function() {
                                    this._lockScreenShown();
@@ -947,7 +978,7 @@ const ScreenShield = new Lang.Class({
             Tweener.removeTweens(this._lockDialogGroup);
             Tweener.addTween(this._lockDialogGroup,
                              { opacity: 255,
-                               time: SHORT_FADE_TIME,
+                               time: MANUAL_FADE_TIME,
                                transition: 'easeOutQuad' });
         } else {
             this._lockDialogGroup.opacity = 255;
@@ -1055,6 +1086,11 @@ const ScreenShield = new Lang.Class({
     deactivate: function(animate) {
         this._hideLockScreen(animate, 0);
 
+        if (Main.sessionMode.currentMode == 'lock-screen')
+            Main.sessionMode.popMode('lock-screen');
+        if (Main.sessionMode.currentMode == 'unlock-dialog')
+            Main.sessionMode.popMode('unlock-dialog');
+
         Tweener.addTween(this._lockDialogGroup, {
             scale_x: 0,
             scale_y: 0,
@@ -1083,13 +1119,8 @@ const ScreenShield = new Lang.Class({
 
         this.actor.hide();
 
-        if (Main.sessionMode.currentMode == 'lock-screen')
-            Main.sessionMode.popMode('lock-screen');
-        if (Main.sessionMode.currentMode == 'unlock-dialog')
-            Main.sessionMode.popMode('unlock-dialog');
-
         if (this._becameActiveId != 0) {
-            this.idleMonitor.disconnect(this._becameActiveId);
+            this.idleMonitor.remove_watch(this._becameActiveId);
             this._becameActiveId = 0;
         }
 
@@ -1133,9 +1164,11 @@ const ScreenShield = new Lang.Class({
     },
 
     lock: function(animate) {
-        if (!this._isModal) {
-            Main.pushModal(this.actor, { keybindingMode: Shell.KeyBindingMode.LOCK_SCREEN });
-            this._isModal = true;
+        // Warn the user if we can't become modal
+        if (!this._becomeModal()) {
+            Main.notifyError(_("Unable to lock"),
+                             _("Lock was blocked by an application"));
+            return;
         }
 
         this._isLocked = true;

js/ui/screenshot.js

@@ -76,6 +76,11 @@ const ScreenshotService = new Lang.Class({
 
     ScreenshotAreaAsync : function (params, invocation) {
         let [x, y, width, height, flash, filename, callback] = params;
+        if (height <= 0 || width <= 0) {
+            invocation.return_error_literal(Gio.IOErrorEnum, Gio.IOErrorEnum.CANCELLED,
+                        "Invalid params");
+            return;
+        }
         let screenshot = new Shell.Screenshot();
         screenshot.screenshot_area (x, y, width, height, filename,
                                 Lang.bind(this, this._onScreenshotComplete,

js/ui/search.js

@@ -60,28 +60,18 @@ const SearchSystem = new Lang.Class({
         this.emit('search-updated', this._previousResults[i]);
     },
 
-    updateSearch: function(searchString) {
-        searchString = searchString.replace(/^\s+/g, '').replace(/\s+$/g, '');
-        if (searchString == '')
-            return;
-
-        let terms = searchString.split(/\s+/);
-        this.updateSearchResults(terms);
-    },
-
     updateSearchResults: function(terms) {
         if (!terms)
             return;
 
-        let isSubSearch = terms.length == this._previousTerms.length;
-        if (isSubSearch) {
-            for (let i = 0; i < terms.length; i++) {
-                if (terms[i].indexOf(this._previousTerms[i]) != 0) {
-                    isSubSearch = false;
-                    break;
-                }
-            }
-        }
+        let searchString = terms.join(' ');
+        let previousSearchString = this._previousTerms.join(' ');
+        if (searchString == previousSearchString)
+            return;
+
+        let isSubSearch = false;
+        if (this._previousTerms.length > 0)
+            isSubSearch = searchString.indexOf(previousSearchString) == 0;
 
         let previousResultsArr = this._previousResults;
 
@@ -110,6 +100,6 @@ const SearchSystem = new Lang.Class({
                 }
             }
         }
-    },
+    }
 });
 Signals.addSignalMethods(SearchSystem.prototype);

js/ui/searchDisplay.js

@@ -103,10 +103,9 @@ const ListSearchResult = new Lang.Class({
                              x_align: St.Align.START,
                              y_align: St.Align.START });
 
-        // TODO: should highlight terms in the description here
         if (this.metaInfo['description']) {
-            let description = new St.Label({ style_class: 'list-search-result-description',
-                                             text: '"' + this.metaInfo['description'] + '"' });
+            let description = new St.Label({ style_class: 'list-search-result-description' });
+            description.clutter_text.set_markup(this.metaInfo['description']);
             details.add(description, { x_fill: false,
                                        y_fill: false,
                                        x_align: St.Align.START,
@@ -331,7 +330,8 @@ const SearchResults = new Lang.Class({
 
         this._scrollView = new St.ScrollView({ x_fill: true,
                                                y_fill: false,
-                                               style_class: 'vfade' });
+                                               overlay_scrollbars: true,
+                                               style_class: 'search-display vfade' });
         this._scrollView.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
         this._scrollView.add_actor(scrollChild);
         let action = new Clutter.PanAction({ interpolate: true });
@@ -423,18 +423,15 @@ const SearchResults = new Lang.Class({
         this._searchSystem.reset();
         this._statusBin.hide();
         this._clearDisplay();
+        this._defaultResult = null;
     },
 
     startingSearch: function() {
         this.reset();
-        this._statusText.set_text(_("Searching..."));
+        this._statusText.set_text(_("Searching…"));
         this._statusBin.show();
     },
 
-    doSearch: function (searchString) {
-        this._searchSystem.updateSearch(searchString);
-    },
-
     _metaForProvider: function(provider) {
         return this._providerMeta[this._providers.indexOf(provider)];
     },

js/ui/sessionMode.js

@@ -47,7 +47,7 @@ const _modes = {
         panel: {
             left: ['logo'],
             center: ['dateMenu'],
-            right: ['a11y', 'display', 'keyboard',
+            right: ['a11yGreeter', 'display', 'keyboard',
                     'volume', 'battery', 'powerMenu']
         },
         panelStyle: 'login-screen'
@@ -84,7 +84,7 @@ const _modes = {
         panel: {
             left: [],
             center: ['dateMenu'],
-            right: ['a11y', 'keyboard', 'volume']
+            right: ['a11yGreeter', 'keyboard', 'volume']
         }
     },
 

js/ui/shellDBus.js

@@ -1,14 +1,16 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 
-const Lang = imports.lang;
 const Gio = imports.gi.Gio;
 const GLib = imports.gi.GLib;
+const Lang = imports.lang;
+const Meta = imports.gi.Meta;
 const Shell = imports.gi.Shell;
 
 const Config = imports.misc.config;
 const ExtensionSystem = imports.ui.extensionSystem;
 const ExtensionDownloader = imports.ui.extensionDownloader;
 const ExtensionUtils = imports.misc.extensionUtils;
+const Hash = imports.misc.hash;
 const Main = imports.ui.main;
 const Screenshot = imports.ui.screenshot;
 
@@ -18,6 +20,26 @@ const GnomeShellIface = <interface name="org.gnome.Shell">
     <arg type="b" direction="out" name="success" />
     <arg type="s" direction="out" name="result" />
 </method>
+<method name="ShowOSD">
+    <arg type="a{sv}" direction="in" name="params"/>
+</method>
+<method name="GrabAccelerator">
+    <arg type="s" direction="in" name="accelerator"/>
+    <arg type="u" direction="in" name="flags"/>
+    <arg type="u" direction="out" name="action"/>
+</method>
+<method name="GrabAccelerators">
+    <arg type="a(su)" direction="in" name="accelerators"/>
+    <arg type="au" direction="out" name="actions"/>
+</method>
+<method name="UngrabAccelerator">
+    <arg type="u" direction="in" name="action"/>
+    <arg type="b" direction="out" name="success"/>
+</method>
+<signal name="AcceleratorActivated">
+    <arg name="action" type="u" />
+    <arg name="deviceid" type="u" />
+</signal>
 <property name="Mode" type="s" access="read" />
 <property name="OverviewActive" type="b" access="readwrite" />
 <property name="ShellVersion" type="s" access="read" />
@@ -47,8 +69,16 @@ const GnomeShell = new Lang.Class({
         this._dbusImpl = Gio.DBusExportedObject.wrapJSObject(GnomeShellIface, this);
         this._dbusImpl.export(Gio.DBus.session, '/org/gnome/Shell');
 
-        this._extensionsSerivce = new GnomeShellExtensions();
+        this._extensionsService = new GnomeShellExtensions();
         this._screenshotService = new Screenshot.ScreenshotService();
+
+        this._grabbedAccelerators = new Hash.Map();
+        this._grabbers = new Hash.Map();
+
+        global.display.connect('accelerator-activated', Lang.bind(this,
+            function(display, action, deviceid) {
+                this._emitAcceleratorActivated(action, deviceid);
+            }));
     },
 
     /**
@@ -84,6 +114,102 @@ const GnomeShell = new Lang.Class({
         return [success, returnValue];
     },
 
+    ShowOSD: function(params) {
+        for (let param in params)
+            params[param] = params[param].deep_unpack();
+
+        let icon = null;
+        if (params['icon'])
+            icon = Gio.Icon.new_for_string(params['icon']);
+
+        Main.osdWindow.setIcon(icon);
+        Main.osdWindow.setLabel(params['label']);
+        Main.osdWindow.setLevel(params['level']);
+
+        Main.osdWindow.show();
+    },
+
+    GrabAcceleratorAsync: function(params, invocation) {
+        let [accel, flags] = params;
+        let sender = invocation.get_sender();
+        let bindingAction = this._grabAcceleratorForSender(accel, flags, sender);
+        return invocation.return_value(GLib.Variant.new('(u)', [bindingAction]));
+    },
+
+    GrabAcceleratorsAsync: function(params, invocation) {
+        let [accels] = params;
+        let sender = invocation.get_sender();
+        let bindingActions = [];
+        for (let i = 0; i < accels.length; i++) {
+            let [accel, flags] = accels[i];
+            bindingActions.push(this._grabAcceleratorForSender(accel, flags, sender));
+        }
+        return invocation.return_value(GLib.Variant.new('(au)', [bindingActions]));
+    },
+
+    UngrabAcceleratorAsync: function(params, invocation) {
+        let [action] = params;
+        let grabbedBy = this._grabbedAccelerators.get(action);
+        if (invocation.get_sender() != grabbedBy)
+            return invocation.return_value(GLib.Variant.new('(b)', [false]));
+
+        let ungrabSucceeded = global.display.ungrab_accelerator(action);
+        if (ungrabSucceeded)
+            this._grabbedAccelerators.delete(action);
+        return invocation.return_value(GLib.Variant.new('(b)', [ungrabSucceeded]));
+    },
+
+    _emitAcceleratorActivated: function(action, deviceid) {
+        let destination = this._grabbedAccelerators.get(action);
+        if (!destination)
+            return;
+
+        let connection = this._dbusImpl.get_connection();
+        let info = this._dbusImpl.get_info();
+        connection.emit_signal(destination,
+                               this._dbusImpl.get_object_path(),
+                               info ? info.name : null,
+                               'AcceleratorActivated',
+                               GLib.Variant.new('(uu)', [action, deviceid]));
+    },
+
+    _grabAcceleratorForSender: function(accelerator, flags, sender) {
+        let bindingAction = global.display.grab_accelerator(accelerator);
+        if (bindingAction == Meta.KeyBindingAction.NONE)
+            return Meta.KeyBindingAction.NONE;
+
+        let bindingName = Meta.external_binding_name_for_action(bindingAction);
+        Main.wm.allowKeybinding(bindingName, flags);
+
+        this._grabbedAccelerators.set(bindingAction, sender);
+
+        if (!this._grabbers.has(sender)) {
+            let id = Gio.bus_watch_name(Gio.BusType.SESSION, sender, 0, null,
+                                        Lang.bind(this, this._onGrabberBusNameVanished));
+            this._grabbers.set(sender, id);
+        }
+
+        return bindingAction;
+    },
+
+    _ungrabAccelerator: function(action) {
+        let ungrabSucceeded = global.display.ungrab_accelerator(action);
+        if (ungrabSucceeded)
+            this._grabbedAccelerators.delete(action);
+    },
+
+    _onGrabberBusNameVanished: function(connection, name) {
+        let grabs = this._grabbedAccelerators.items();
+        for (let i = 0; i < grabs.length; i++) {
+            let [action, sender] = grabs[i];
+            if (sender == name)
+                this._ungrabAccelerator(action);
+        }
+        Gio.bus_unwatch_name(this._grabbers.get(name));
+        this._grabbers.delete(name);
+    },
+
+
     Mode: global.session_mode,
 
     get OverviewActive() {

js/ui/shellEntry.js

@@ -1,8 +1,11 @@
+// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
+
 const Clutter = imports.gi.Clutter;
 const Gtk = imports.gi.Gtk;
 const Lang = imports.lang;
 const St = imports.gi.St;
 
+const BoxPointer = imports.ui.boxpointer;
 const Main = imports.ui.main;
 const Params = imports.misc.params;
 const PopupMenu = imports.ui.popupMenu;
@@ -65,32 +68,33 @@ const EntryMenu = new Lang.Class({
 	}
     },
 
-    open: function() {
+    open: function(animate) {
         this._updatePasteItem();
         this._updateCopyItem();
         if (this._passwordItem)
             this._updatePasswordItem();
 
+        this.parent(animate);
+        this._entry.add_style_pseudo_class('focus');
+
         let direction = Gtk.DirectionType.TAB_FORWARD;
         if (!this.actor.navigate_focus(null, direction, false))
             this.actor.grab_key_focus();
-
-        this.parent();
-        this._entry.add_style_pseudo_class('focus');
     },
 
-    close: function() {
+    close: function(animate) {
         this._entry.grab_key_focus();
-        this.parent();
+        this.parent(animate);
     },
 
     _updateCopyItem: function() {
         let selection = this._entry.clutter_text.get_selection();
-        this._copyItem.setSensitive(selection && selection != '');
+        this._copyItem.setSensitive(!this._entry.clutter_text.password_char &&
+                                    selection && selection != '');
     },
 
     _updatePasteItem: function() {
-        this._clipboard.get_text(Lang.bind(this,
+        this._clipboard.get_text(St.ClipboardType.CLIPBOARD, Lang.bind(this,
             function(clipboard, text) {
                 this._pasteItem.setSensitive(text && text != '');
             }));
@@ -106,11 +110,11 @@ const EntryMenu = new Lang.Class({
 
     _onCopyActivated: function() {
         let selection = this._entry.clutter_text.get_selection();
-        this._clipboard.set_text(selection);
+        this._clipboard.set_text(St.ClipboardType.CLIPBOARD, selection);
     },
 
     _onPasteActivated: function() {
-        this._clipboard.get_text(Lang.bind(this,
+        this._clipboard.get_text(St.ClipboardType.CLIPBOARD, Lang.bind(this,
             function(clipboard, text) {
                 if (!text)
                     return;
@@ -134,12 +138,12 @@ function _setMenuAlignment(entry, stageX) {
 
 function _onButtonPressEvent(actor, event, entry) {
     if (entry.menu.isOpen) {
-        entry.menu.close();
+        entry.menu.close(BoxPointer.PopupAnimation.FULL);
         return true;
     } else if (event.get_button() == 3) {
         let [stageX, stageY] = event.get_coords();
         _setMenuAlignment(entry, stageX);
-        entry.menu.open();
+        entry.menu.open(BoxPointer.PopupAnimation.FULL);
         return true;
     }
     return false;
@@ -149,7 +153,7 @@ function _onPopup(actor, entry) {
     let [success, textX, textY, lineHeight] = entry.clutter_text.position_to_coords(-1);
     if (success)
         entry.menu.setSourceAlignment(textX / entry.width);
-    entry.menu.open();
+    entry.menu.open(BoxPointer.PopupAnimation.FULL);
 };
 
 function addContextMenu(entry, params) {

js/ui/status/accessibility.js

@@ -2,6 +2,7 @@
 
 const Gio = imports.gi.Gio;
 const Lang = imports.lang;
+const Mainloop = imports.mainloop;
 
 const PanelMenu = imports.ui.panelMenu;
 const PopupMenu = imports.ui.popupMenu;
@@ -14,12 +15,7 @@ const KEY_MOUSE_KEYS_ENABLED  = 'mousekeys-enable';
 
 const APPLICATIONS_SCHEMA = 'org.gnome.desktop.a11y.applications';
 
-const DPI_LOW_REASONABLE_VALUE  = 50;
-const DPI_HIGH_REASONABLE_VALUE = 500;
-
 const DPI_FACTOR_LARGE   = 1.25;
-const DPI_FACTOR_LARGER  = 1.5;
-const DPI_FACTOR_LARGEST = 2.0;
 
 const WM_SCHEMA            = 'org.gnome.desktop.wm.preferences';
 const KEY_VISUAL_BELL      = 'visual-bell';
@@ -74,6 +70,25 @@ const ATIndicator = new Lang.Class({
 
         this.menu.addMenuItem(new PopupMenu.PopupSeparatorMenuItem());
         this.menu.addSettingsAction(_("Universal Access Settings"), 'gnome-universal-access-panel.desktop');
+
+        this._syncMenuVisibility();
+    },
+
+    _syncMenuVisibility: function() {
+        this._syncMenuVisibilityIdle = 0;
+
+        let items = this.menu._getMenuItems();
+
+        this.actor.visible = items.some(function(f) { return !!f.state; });
+
+        return false;
+    },
+
+    _queueSyncMenuVisibility: function() {
+        if (this._syncMenuVisibilityIdle)
+            return;
+
+        this._syncMenuVisbilityIdle = Mainloop.idle_add(Lang.bind(this, this._syncMenuVisibility));
     },
 
     _buildItemExtended: function(string, initial_value, writable, on_set) {
@@ -95,9 +110,11 @@ const ATIndicator = new Lang.Class({
             function(enabled) {
                 return settings.set_boolean(key, enabled);
             });
-        settings.connect('changed::'+key, function() {
+        settings.connect('changed::'+key, Lang.bind(this, function() {
             widget.setToggleState(settings.get_boolean(key));
-        });
+
+            this._queueSyncMenuVisibility();
+        }));
         return widget;
     },
 
@@ -129,7 +146,7 @@ const ATIndicator = new Lang.Class({
                     wmSettings.reset(KEY_WM_THEME);
                 }
             });
-        interfaceSettings.connect('changed::' + KEY_GTK_THEME, function() {
+        interfaceSettings.connect('changed::' + KEY_GTK_THEME, Lang.bind(this, function() {
             let value = interfaceSettings.get_string(KEY_GTK_THEME);
             if (value == HIGH_CONTRAST_THEME) {
                 highContrast.setToggleState(true);
@@ -137,7 +154,9 @@ const ATIndicator = new Lang.Class({
                 highContrast.setToggleState(false);
                 gtkTheme = value;
             }
-        });
+
+            this._queueSyncMenuVisibility();
+        }));
         interfaceSettings.connect('changed::' + KEY_ICON_THEME, function() {
             let value = interfaceSettings.get_string(KEY_ICON_THEME);
             if (value != HIGH_CONTRAST_THEME)
@@ -166,11 +185,22 @@ const ATIndicator = new Lang.Class({
                 else
                     settings.reset(KEY_TEXT_SCALING_FACTOR);
             });
-        settings.connect('changed::' + KEY_TEXT_SCALING_FACTOR, function() {
+        settings.connect('changed::' + KEY_TEXT_SCALING_FACTOR, Lang.bind(this, function() {
             let factor = settings.get_double(KEY_TEXT_SCALING_FACTOR);
             let active = (factor > 1.0);
             widget.setToggleState(active);
-        });
+
+            this._queueSyncMenuVisibility();
+        }));
         return widget;
     }
 });
+
+const ATGreeterIndicator = new Lang.Class({
+    Name: 'ATGreeterIndicator',
+    Extends: ATIndicator,
+
+    // Override visibility handling to be always visible
+    _syncMenuVisibility: function() { },
+    _queueSyncMenuVisibility: function() { }
+});

js/ui/status/bluetooth.js

@@ -56,8 +56,8 @@ const Indicator = new Lang.Class({
         this.menu.addMenuItem(new PopupMenu.PopupSeparatorMenuItem());
 
         this._fullMenuItems = [new PopupMenu.PopupSeparatorMenuItem(),
-                               new PopupMenu.PopupMenuItem(_("Send Files to Device...")),
-                               new PopupMenu.PopupMenuItem(_("Set Up a New Device...")),
+                               new PopupMenu.PopupMenuItem(_("Send Files to Device…")),
+                               new PopupMenu.PopupMenuItem(_("Set Up a New Device…")),
                                new PopupMenu.PopupSeparatorMenuItem()];
         this._hasDevices = false;
 
@@ -236,7 +236,7 @@ const Indicator = new Lang.Class({
         }
 
         if (device.capabilities & GnomeBluetoothApplet.Capabilities.OBEX_PUSH) {
-            item.menu.addAction(_("Send Files..."), Lang.bind(this, function() {
+            item.menu.addAction(_("Send Files…"), Lang.bind(this, function() {
                 this._applet.send_to_address(device.bdaddr, device.alias);
             }));
         }

js/ui/status/keyboard.js

@@ -398,6 +398,9 @@ const InputSourceIndicator = new Lang.Class({
     },
 
     _switchInputSource: function(display, screen, window, binding) {
+        if (this._mruSources.length < 2)
+            return;
+
         let popup = new InputSourcePopup(this._mruSources, this._keybindingAction, this._keybindingActionBackward);
         let modifiers = binding.get_modifiers();
         let backwards = modifiers & Meta.VirtualModifier.SHIFT_MASK;
@@ -410,6 +413,9 @@ const InputSourceIndicator = new Lang.Class({
         let newSourceIndex = this._settings.get_uint(KEY_CURRENT_INPUT_SOURCE);
         let newSource = this._inputSources[newSourceIndex];
 
+        let oldSource;
+        [oldSource, this._currentSource] = [this._currentSource, newSource];
+
         if (!newSource || (nVisibleSources < 2 && !newSource.properties)) {
             // This source index might be invalid if we weren't able
             // to build a menu item for it, so we hide ourselves since
@@ -424,16 +430,13 @@ const InputSourceIndicator = new Lang.Class({
 
         this.actor.show();
 
-        let oldSource;
-        [oldSource, this._currentSource] = [this._currentSource, newSource];
-
         if (oldSource) {
             oldSource.menuItem.setShowDot(false);
-            this._container.set_skip_paint(oldSource.indicatorLabel, true);
+            oldSource.indicatorLabel.hide();
         }
 
         newSource.menuItem.setShowDot(true);
-        this._container.set_skip_paint(newSource.indicatorLabel, false);
+        newSource.indicatorLabel.show();
 
         this._buildPropSection(newSource.properties);
 
@@ -510,8 +513,8 @@ const InputSourceIndicator = new Lang.Class({
 
             this.menu.addMenuItem(is.menuItem, menuIndex++);
 
+            is.indicatorLabel.hide();
             this._container.add_actor(is.indicatorLabel);
-            this._container.set_skip_paint(is.indicatorLabel, true);
         }
 
         let sourcesList = [];

js/ui/status/network.js

@@ -49,7 +49,7 @@ const NM80211ApFlags = NetworkManager['80211ApFlags'];
 const NM80211ApSecurityFlags = NetworkManager['80211ApSecurityFlags'];
 
 // number of wireless networks that should be visible
-// (the remaining are placed into More...)
+// (the remaining are placed into More…)
 const NUM_VISIBLE_NETWORKS = 5;
 
 function macToArray(string) {
@@ -549,7 +549,7 @@ const NMDevice = new Lang.Class({
 
                 if (j + activeOffset >= NUM_VISIBLE_NETWORKS) {
                     if (!this._overflowItem) {
-                        this._overflowItem = new PopupMenu.PopupSubMenuMenuItem(_("More..."));
+                        this._overflowItem = new PopupMenu.PopupSubMenuMenuItem(_("More…"));
                         this.section.addMenuItem(this._overflowItem);
                     }
                     this._overflowItem.menu.addMenuItem(obj.item);
@@ -1432,7 +1432,7 @@ const NMDeviceWireless = new Lang.Class({
             this.section.addMenuItem(apObj.item, position);
         } else {
             if (!this._overflowItem) {
-                this._overflowItem = new PopupMenu.PopupSubMenuMenuItem(_("More..."));
+                this._overflowItem = new PopupMenu.PopupSubMenuMenuItem(_("More…"));
                 this.section.addMenuItem(this._overflowItem);
             }
             this._overflowItem.menu.addMenuItem(apObj.item, position - NUM_VISIBLE_NETWORKS);
@@ -1624,7 +1624,7 @@ const NMVPNSection = new Lang.Class({
 
                 if (j >= NUM_VISIBLE_NETWORKS) {
                     if (!this._overflowItem) {
-                        this._overflowItem = new PopupMenu.PopupSubMenuMenuItem(_("More..."));
+                        this._overflowItem = new PopupMenu.PopupSubMenuMenuItem(_("More…"));
                         this.section.addMenuItem(this._overflowItem);
                     }
                     this._overflowItem.menu.addMenuItem(obj.item);
@@ -1669,7 +1669,59 @@ const NMApplet = new Lang.Class({
         this.secondaryIcon = this.addIcon(new Gio.ThemedIcon({ name: 'network-vpn-symbolic' }));
         this.secondaryIcon.hide();
 
-        this._client = NMClient.Client.new();
+        // Device types
+        this._dtypes = { };
+        this._dtypes[NetworkManager.DeviceType.ETHERNET] = NMDeviceWired;
+        this._dtypes[NetworkManager.DeviceType.WIFI] = NMDeviceWireless;
+        this._dtypes[NetworkManager.DeviceType.MODEM] = NMDeviceModem;
+        this._dtypes[NetworkManager.DeviceType.BT] = NMDeviceBluetooth;
+        this._dtypes[NetworkManager.DeviceType.INFINIBAND] = NMDeviceSimple;
+        // TODO: WiMax support
+
+        // Virtual device types
+        this._vtypes = { };
+        if (NMGtk) {
+            this._vtypes[NetworkManager.SETTING_VLAN_SETTING_NAME] = NMDeviceVirtual;
+            this._vtypes[NetworkManager.SETTING_BOND_SETTING_NAME] = NMDeviceVirtual;
+            this._vtypes[NetworkManager.SETTING_BRIDGE_SETTING_NAME] = NMDeviceVirtual;
+        }
+
+        // Connection types
+        this._ctypes = { };
+        this._ctypes[NetworkManager.SETTING_WIRELESS_SETTING_NAME] = NMConnectionCategory.WIRELESS;
+        this._ctypes[NetworkManager.SETTING_WIRED_SETTING_NAME] = NMConnectionCategory.WIRED;
+        this._ctypes[NetworkManager.SETTING_PPPOE_SETTING_NAME] = NMConnectionCategory.WIRED;
+        this._ctypes[NetworkManager.SETTING_PPP_SETTING_NAME] = NMConnectionCategory.WIRED;
+        this._ctypes[NetworkManager.SETTING_BLUETOOTH_SETTING_NAME] = NMConnectionCategory.WWAN;
+        this._ctypes[NetworkManager.SETTING_CDMA_SETTING_NAME] = NMConnectionCategory.WWAN;
+        this._ctypes[NetworkManager.SETTING_GSM_SETTING_NAME] = NMConnectionCategory.WWAN;
+        this._ctypes[NetworkManager.SETTING_INFINIBAND_SETTING_NAME] = NMConnectionCategory.WIRED;
+        if (NMGtk) {
+            this._ctypes[NetworkManager.SETTING_VLAN_SETTING_NAME] = NMConnectionCategory.VIRTUAL;
+            this._ctypes[NetworkManager.SETTING_BOND_SETTING_NAME] = NMConnectionCategory.VIRTUAL;
+            this._ctypes[NetworkManager.SETTING_BRIDGE_SETTING_NAME] = NMConnectionCategory.VIRTUAL;
+        }
+        this._ctypes[NetworkManager.SETTING_VPN_SETTING_NAME] = NMConnectionCategory.VPN;
+
+        NMClient.Client.new_async(null, Lang.bind(this, this._clientGot));
+        NMClient.RemoteSettings.new_async(null, null, Lang.bind(this, this._remoteSettingsGot));
+    },
+
+    _clientGot: function(obj, result) {
+        this._client = NMClient.Client.new_finish(result);
+
+        this._tryLateInit();
+    },
+
+    _remoteSettingsGot: function(obj, result) {
+        this._settings = NMClient.RemoteSettings.new_finish(result);
+
+        this._tryLateInit();
+    },
+
+    _tryLateInit: function() {
+        if (!this._client || !this._settings)
+            return;
 
         this._statusSection = new PopupMenu.PopupMenuSection();
         this._statusItem = new PopupMenu.PopupMenuItem('', { reactive: false });
@@ -1737,59 +1789,17 @@ const NMApplet = new Lang.Class({
         this.menu.addMenuItem(new PopupMenu.PopupSeparatorMenuItem());
         this.menu.addSettingsAction(_("Network Settings"), 'gnome-network-panel.desktop');
 
-        // Device types
-        this._dtypes = { };
-        this._dtypes[NetworkManager.DeviceType.ETHERNET] = NMDeviceWired;
-        this._dtypes[NetworkManager.DeviceType.WIFI] = NMDeviceWireless;
-        this._dtypes[NetworkManager.DeviceType.MODEM] = NMDeviceModem;
-        this._dtypes[NetworkManager.DeviceType.BT] = NMDeviceBluetooth;
-        this._dtypes[NetworkManager.DeviceType.INFINIBAND] = NMDeviceSimple;
-        // TODO: WiMax support
+        this._readConnections();
+        this._readDevices();
+        this._syncNMState();
 
-        // Virtual device types
-        this._vtypes = { };
-        if (NMGtk) {
-            this._vtypes[NetworkManager.SETTING_VLAN_SETTING_NAME] = NMDeviceVirtual;
-            this._vtypes[NetworkManager.SETTING_BOND_SETTING_NAME] = NMDeviceVirtual;
-            this._vtypes[NetworkManager.SETTING_BRIDGE_SETTING_NAME] = NMDeviceVirtual;
-        }
-
-        // Connection types
-        this._ctypes = { };
-        this._ctypes[NetworkManager.SETTING_WIRELESS_SETTING_NAME] = NMConnectionCategory.WIRELESS;
-        this._ctypes[NetworkManager.SETTING_WIRED_SETTING_NAME] = NMConnectionCategory.WIRED;
-        this._ctypes[NetworkManager.SETTING_PPPOE_SETTING_NAME] = NMConnectionCategory.WIRED;
-        this._ctypes[NetworkManager.SETTING_PPP_SETTING_NAME] = NMConnectionCategory.WIRED;
-        this._ctypes[NetworkManager.SETTING_BLUETOOTH_SETTING_NAME] = NMConnectionCategory.WWAN;
-        this._ctypes[NetworkManager.SETTING_CDMA_SETTING_NAME] = NMConnectionCategory.WWAN;
-        this._ctypes[NetworkManager.SETTING_GSM_SETTING_NAME] = NMConnectionCategory.WWAN;
-        this._ctypes[NetworkManager.SETTING_INFINIBAND_SETTING_NAME] = NMConnectionCategory.WIRED;
-        if (NMGtk) {
-            this._ctypes[NetworkManager.SETTING_VLAN_SETTING_NAME] = NMConnectionCategory.VIRTUAL;
-            this._ctypes[NetworkManager.SETTING_BOND_SETTING_NAME] = NMConnectionCategory.VIRTUAL;
-            this._ctypes[NetworkManager.SETTING_BRIDGE_SETTING_NAME] = NMConnectionCategory.VIRTUAL;
-        }
-        this._ctypes[NetworkManager.SETTING_VPN_SETTING_NAME] = NMConnectionCategory.VPN;
-
-        this._settings = NMClient.RemoteSettings.new(null);
-        this._connectionsReadId = this._settings.connect('connections-read', Lang.bind(this, function() {
-            this._readConnections();
-            this._readDevices();
-            this._syncNMState();
-
-            // Connect to signals late so that early signals don't find in inconsistent state
-            // and connect only once (this signal handler can be called again if NetworkManager goes up and down)
-            if (!this._inited) {
-                this._inited = true;
-                this._client.connect('notify::manager-running', Lang.bind(this, this._syncNMState));
-                this._client.connect('notify::networking-enabled', Lang.bind(this, this._syncNMState));
-                this._client.connect('notify::state', Lang.bind(this, this._syncNMState));
-                this._client.connect('notify::active-connections', Lang.bind(this, this._updateIcon));
-                this._client.connect('device-added', Lang.bind(this, this._deviceAdded));
-                this._client.connect('device-removed', Lang.bind(this, this._deviceRemoved));
-                this._settings.connect('new-connection', Lang.bind(this, this._newConnection));
-            }
-        }));
+        this._client.connect('notify::manager-running', Lang.bind(this, this._syncNMState));
+        this._client.connect('notify::networking-enabled', Lang.bind(this, this._syncNMState));
+        this._client.connect('notify::state', Lang.bind(this, this._syncNMState));
+        this._client.connect('notify::active-connections', Lang.bind(this, this._updateIcon));
+        this._client.connect('device-added', Lang.bind(this, this._deviceAdded));
+        this._client.connect('device-removed', Lang.bind(this, this._deviceRemoved));
+        this._settings.connect('new-connection', Lang.bind(this, this._newConnection));
     },
 
     _ensureSource: function() {

js/ui/status/power.js

@@ -96,7 +96,7 @@ const Indicator = new Lang.Class({
                 if (time == 0) {
                     // 0 is reported when UPower does not have enough data
                     // to estimate battery life
-                    this._batteryItem.label.text = _("Estimating...");
+                    this._batteryItem.label.text = _("Estimating…");
                 } else {
                     let minutes = time % 60;
                     let hours = Math.floor(time / 60);

js/ui/switcherPopup.js

@@ -160,6 +160,7 @@ const SwitcherPopup = new Lang.Class({
         // disturbed by the popup briefly flashing.
         this._initialDelayTimeoutId = Mainloop.timeout_add(POPUP_DELAY_TIMEOUT,
                                                            Lang.bind(this, function () {
+                                                               Main.osdWindow.cancel();
                                                                this.actor.opacity = 255;
                                                                this._initialDelayTimeoutId = 0;
                                                            }));
@@ -304,7 +305,7 @@ const SwitcherList = new Lang.Class({
         this.actor.connect('allocate', Lang.bind(this, this._allocateTop));
 
         // Here we use a GenericContainer so that we can force all the
-        // children except the separator to have the same width.
+        // children to have the same width.
         this._list = new Shell.GenericContainer({ style_class: 'switcher-list-item-container' });
         this._list.spacing = 0;
         this._list.connect('style-changed', Lang.bind(this, function() {
@@ -339,7 +340,6 @@ const SwitcherList = new Lang.Class({
 
         this._items = [];
         this._highlighted = -1;
-        this._separator = null;
         this._squareItems = squareItems;
         this._minSize = 0;
         this._scrollableRight = true;
@@ -402,12 +402,6 @@ const SwitcherList = new Lang.Class({
         this._itemEntered(index);
     },
 
-    addSeparator: function () {
-        let box = new St.Bin({ style_class: 'separator' });
-        this._separator = box;
-        this._list.add_actor(box);
-    },
-
     highlight: function(index, justOutline) {
         if (this._highlighted != -1) {
             this._items[this._highlighted].remove_style_pseudo_class('outlined');
@@ -515,14 +509,8 @@ const SwitcherList = new Lang.Class({
     _getPreferredWidth: function (actor, forHeight, alloc) {
         let [maxChildMin, maxChildNat] = this._maxChildWidth(forHeight);
 
-        let separatorWidth = 0;
-        if (this._separator) {
-            let [sepMin, sepNat] = this._separator.get_preferred_width(forHeight);
-            separatorWidth = sepNat + this._list.spacing;
-        }
-
         let totalSpacing = this._list.spacing * (this._items.length - 1);
-        alloc.min_size = this._items.length * maxChildMin + separatorWidth + totalSpacing;
+        alloc.min_size = this._items.length * maxChildMin + totalSpacing;
         alloc.natural_size = alloc.min_size;
         this._minSize = alloc.min_size;
     },
@@ -553,14 +541,7 @@ const SwitcherList = new Lang.Class({
         let [maxChildMin, maxChildNat] = this._maxChildWidth(childHeight);
         let totalSpacing = this._list.spacing * (this._items.length - 1);
 
-        let separatorWidth = 0;
-        if (this._separator) {
-            let [sepMin, sepNat] = this._separator.get_preferred_width(childHeight);
-            separatorWidth = sepNat;
-            totalSpacing += this._list.spacing;
-        }
-
-        let childWidth = Math.floor(Math.max(0, box.x2 - box.x1 - totalSpacing - separatorWidth) / this._items.length);
+        let childWidth = Math.floor(Math.max(0, box.x2 - box.x1 - totalSpacing) / this._items.length);
 
         let x = 0;
         let children = this._list.get_children();
@@ -580,14 +561,6 @@ const SwitcherList = new Lang.Class({
                 children[i].allocate(childBox, flags);
 
                 x += this._list.spacing + childWidth;
-            } else if (children[i] == this._separator) {
-                // We want the separator to be more compact than the rest.
-                childBox.x1 = x;
-                childBox.y1 = 0;
-                childBox.x2 = x + separatorWidth;
-                childBox.y2 = childHeight;
-                children[i].allocate(childBox, flags);
-                x += this._list.spacing + separatorWidth;
             } else {
                 // Something else, eg, AppSwitcher's arrows;
                 // we don't allocate it.

js/ui/tweener.js

@@ -2,6 +2,7 @@
 
 const Clutter = imports.gi.Clutter;
 const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
 const Lang = imports.lang;
 const Mainloop = imports.mainloop;
 const Shell = imports.gi.Shell;
@@ -73,6 +74,9 @@ function _wrapTweening(target, tweeningParameters) {
         }
     }
 
+    if (!Gtk.Settings.get_default().gtk_enable_animations)
+        tweeningParameters['time'] = 0.000001;
+
     _addHandler(target, tweeningParameters, 'onStart', _tweenStarted);
     _addHandler(target, tweeningParameters, 'onComplete', _tweenCompleted);
 }

js/ui/unlockDialog.js

@@ -18,6 +18,7 @@ const Panel = imports.ui.panel;
 const ShellEntry = imports.ui.shellEntry;
 const Tweener = imports.ui.tweener;
 const UserMenu = imports.ui.userMenu;
+const UserWidget = imports.ui.userWidget;
 
 const Batch = imports.gdm.batch;
 const GdmUtil = imports.gdm.util;
@@ -55,59 +56,6 @@ function isSupported() {
     }
 }
 
-// A widget showing the user avatar and name
-const UserWidget = new Lang.Class({
-    Name: 'UserWidget',
-
-    _init: function(user) {
-        this._user = user;
-
-        this.actor = new St.BoxLayout({ style_class: 'unlock-dialog-user-name-container',
-                                        vertical: false });
-
-        this._avatar = new UserMenu.UserAvatarWidget(user);
-        this.actor.add(this._avatar.actor,
-                       { x_fill: true, y_fill: true });
-
-        this._label = new St.Label({ style_class: 'login-dialog-username' });
-        this.actor.add(this._label,
-                       { expand: true,
-                         x_fill: true,
-                         y_fill: false,
-                         y_align: St.Align.MIDDLE });
-
-        this._userLoadedId = this._user.connect('notify::is-loaded',
-                                                Lang.bind(this, this._updateUser));
-        this._userChangedId = this._user.connect('changed',
-                                                 Lang.bind(this, this._updateUser));
-        if (this._user.is_loaded)
-            this._updateUser();
-    },
-
-    destroy: function() {
-        if (this._userLoadedId != 0) {
-            this._user.disconnect(this._userLoadedId);
-            this._userLoadedId = 0;
-        }
-
-        if (this._userChangedId != 0) {
-            this._user.disconnect(this._userChangedId);
-            this._userChangedId = 0;
-        }
-
-        this.actor.destroy();
-    },
-
-    _updateUser: function() {
-        if (this._user.is_loaded)
-            this._label.text = this._user.get_real_name();
-        else
-            this._label.text = '';
-
-        this._avatar.update();
-    }
-});
-
 const UnlockDialog = new Lang.Class({
     Name: 'UnlockDialog',
     Extends: ModalDialog.ModalDialog,
@@ -138,7 +86,7 @@ const UnlockDialog = new Lang.Class({
         this._userVerifier.connect('show-login-hint', Lang.bind(this, this._showLoginHint));
         this._userVerifier.connect('hide-login-hint', Lang.bind(this, this._hideLoginHint));
 
-        this._userWidget = new UserWidget(this._user);
+        this._userWidget = new UserWidget.UserWidget(this._user);
         this.contentLayout.add_actor(this._userWidget.actor);
 
         this._promptLayout = new St.BoxLayout({ style_class: 'login-dialog-prompt-layout',
@@ -229,7 +177,7 @@ const UnlockDialog = new Lang.Class({
         Main.ctrlAltTabManager.addGroup(this.dialogLayout, _("Unlock Window"), 'dialog-password-symbolic');
 
         this._idleMonitor = new GnomeDesktop.IdleMonitor();
-        this._idleWatchId = this._idleMonitor.add_watch(IDLE_TIMEOUT * 1000, Lang.bind(this, this._escape));
+        this._idleWatchId = this._idleMonitor.add_idle_watch(IDLE_TIMEOUT * 1000, Lang.bind(this, this._escape));
     },
 
     _updateSensitivity: function(sensitive) {

js/ui/userMenu.js

@@ -4,17 +4,20 @@ const AccountsService = imports.gi.AccountsService;
 const Gdm = imports.gi.Gdm;
 const Gio = imports.gi.Gio;
 const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
 const Lang = imports.lang;
 const Pango = imports.gi.Pango;
 const Shell = imports.gi.Shell;
 const St = imports.gi.St;
 const Tp = imports.gi.TelepathyGLib;
 const Atk = imports.gi.Atk;
+const Clutter = imports.gi.Clutter;
 
 const BoxPointer = imports.ui.boxpointer;
 const GnomeSession = imports.misc.gnomeSession;
 const LoginManager = imports.misc.loginManager;
 const Main = imports.ui.main;
+const ModalDialog = imports.ui.modalDialog;
 const PanelMenu = imports.ui.panelMenu;
 const PopupMenu = imports.ui.popupMenu;
 const Params = imports.misc.params;
@@ -31,6 +34,8 @@ const SHOW_FULL_NAME_IN_TOP_BAR_KEY = 'show-full-name-in-top-bar';
 
 const DIALOG_ICON_SIZE = 64;
 
+const MAX_USERS_IN_SESSION_DIALOG = 5;
+
 const IMStatus = {
     AVAILABLE: 0,
     BUSY: 1,
@@ -41,6 +46,17 @@ const IMStatus = {
     LAST: 6
 };
 
+
+const SystemdLoginSessionIface = <interface name='org.freedesktop.login1.Session'>
+    <property name="Id" type="s" access="read"/>
+    <property name="Remote" type="b" access="read"/>
+    <property name="Class" type="s" access="read"/>
+    <property name="Type" type="s" access="read"/>
+    <property name="State" type="s" access="read"/>
+</interface>;
+
+const SystemdLoginSession = Gio.DBusProxy.makeProxyWrapper(SystemdLoginSessionIface);
+
 // Adapted from gdm/gui/user-switch-applet/applet.c
 //
 // Copyright (C) 2004-2005 James M. Cape <jcape@ignore-your.tv>.
@@ -68,7 +84,7 @@ const UserAvatarWidget = new Lang.Class({
 
     update: function() {
         let iconFile = this._user.get_icon_file();
-        if (!GLib.file_test(iconFile, GLib.FileTest.EXISTS))
+        if (iconFile && !GLib.file_test(iconFile, GLib.FileTest.EXISTS))
             iconFile = null;
 
         if (iconFile) {
@@ -864,12 +880,112 @@ const UserMenuButton = new Lang.Class({
         this._session.RebootRemote();
     },
 
+    _openSessionWarnDialog: function(sessions) {
+        let dialog = new ModalDialog.ModalDialog();
+        let subjectLabel = new St.Label({ style_class: 'end-session-dialog-subject',
+                                          text: _("Other users are logged in.") });
+        dialog.contentLayout.add(subjectLabel, { y_fill: true,
+                                                 y_align: St.Align.START });
+
+        let descriptionLabel = new St.Label({ style_class: 'end-session-dialog-description'});
+        descriptionLabel.set_text(_("Shutting down might cause them to lose unsaved work."));
+        descriptionLabel.clutter_text.line_wrap = true;
+        dialog.contentLayout.add(descriptionLabel, { x_fill: true,
+                                                     y_fill: true,
+                                                     y_align: St.Align.START });
+
+        let scrollView = new St.ScrollView({ style_class: 'end-session-dialog-app-list' });
+        scrollView.add_style_class_name('vfade');
+        scrollView.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
+        dialog.contentLayout.add(scrollView, { x_fill: true, y_fill: true });
+
+        let userList = new St.BoxLayout({ vertical: true });
+        scrollView.add_actor(userList);
+
+        for (let i = 0; i < sessions.length; i++) {
+            let session = sessions[i];
+            let userEntry = new St.BoxLayout({ style_class: 'login-dialog-user-list-item',
+                                               vertical: false });
+            let avatar = new UserAvatarWidget(session.user);
+            avatar.update();
+            userEntry.add(avatar.actor);
+
+            let userLabelText = "";;
+            let userName = session.user.get_real_name() ?
+                           session.user.get_real_name() : session.username;
+
+            if (session.info.remote)
+                userLabelText = _("%s (remote)").format(userName);
+            else if (session.info.type == "tty")
+                userLabelText = _("%s (console)").format(userName);
+            else
+                userLabelText = userName;
+
+            let textLayout = new St.BoxLayout({ style_class: 'login-dialog-user-list-item-text-box',
+                                                vertical: true });
+            textLayout.add(new St.Label({ text: userLabelText }),
+                           { y_fill: false,
+                             y_align: St.Align.MIDDLE,
+                             expand: true });
+            userEntry.add(textLayout, { expand: true });
+            userList.add(userEntry, { x_fill: true });
+        }
+
+        let cancelButton = { label: _("Cancel"),
+                             action: function() { dialog.close(); },
+                             key: Clutter.Escape };
+
+        let powerOffButton = { label: _("Power Off"),  action: Lang.bind(this, function() {
+            dialog.close();
+            this._session.ShutdownRemote();
+        }), default: true };
+
+        dialog.setButtons([cancelButton, powerOffButton]);
+
+        dialog.open();
+    },
+
     _onSuspendOrPowerOffActivate: function() {
         Main.overview.hide();
 
         if (this._haveShutdown &&
             this._suspendOrPowerOffItem.state == PopupMenu.PopupAlternatingMenuItemState.DEFAULT) {
-            this._session.ShutdownRemote();
+            this._loginManager.listSessions(Lang.bind(this,
+                function(result) {
+                    let sessions = [];
+                    let n = 0;
+                    for (let i = 0; i < result.length; i++) {
+                        let[id, uid, userName, seat, sessionPath] = result[i];
+                        let proxy = new SystemdLoginSession(Gio.DBus.system,
+                                                            'org.freedesktop.login1',
+                                                            sessionPath);
+
+                        if (proxy.Class != 'user')
+                            continue;
+
+                        if (proxy.State == 'closing')
+                            continue;
+
+                        if (proxy.Id == GLib.getenv('XDG_SESSION_ID'))
+                            continue;
+
+                        sessions.push({ user: this._userManager.get_user(userName),
+                                        username: userName,
+                                        info: { type: proxy.Type,
+                                                remote: proxy.Remote }
+                        });
+
+                        // limit the number of entries
+                        n++;
+                        if (n == MAX_USERS_IN_SESSION_DIALOG)
+                            break;
+                    }
+
+                    if (n != 0)
+                        this._openSessionWarnDialog(sessions);
+                    else
+                        this._session.ShutdownRemote();
+            }));
         } else {
             this.menu.close(BoxPointer.PopupAnimation.NONE);
             this._loginManager.suspend();

js/ui/userWidget.js

@@ -0,0 +1,61 @@
+
+// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
+//
+// A widget showing the user avatar and name
+const AccountsService = imports.gi.AccountsService;
+const Lang = imports.lang;
+const St = imports.gi.St;
+
+const UserMenu = imports.ui.userMenu;
+
+const UserWidget = new Lang.Class({
+    Name: 'UserWidget',
+
+    _init: function(user) {
+        this._user = user;
+
+        this.actor = new St.BoxLayout({ style_class: 'user-widget',
+                                        vertical: false });
+
+        this._avatar = new UserMenu.UserAvatarWidget(user);
+        this.actor.add(this._avatar.actor,
+                       { x_fill: true, y_fill: true });
+
+        this._label = new St.Label({ style_class: 'user-widget-label' });
+        this.actor.add(this._label,
+                       { expand: true,
+                         x_fill: true,
+                         y_fill: false,
+                         y_align: St.Align.MIDDLE });
+
+        this._userLoadedId = this._user.connect('notify::is-loaded',
+                                                Lang.bind(this, this._updateUser));
+        this._userChangedId = this._user.connect('changed',
+                                                 Lang.bind(this, this._updateUser));
+        if (this._user.is_loaded)
+            this._updateUser();
+    },
+
+    destroy: function() {
+        if (this._userLoadedId != 0) {
+            this._user.disconnect(this._userLoadedId);
+            this._userLoadedId = 0;
+        }
+
+        if (this._userChangedId != 0) {
+            this._user.disconnect(this._userChangedId);
+            this._userChangedId = 0;
+        }
+
+        this.actor.destroy();
+    },
+
+    _updateUser: function() {
+        if (this._user.is_loaded)
+            this._label.text = this._user.get_real_name();
+        else
+            this._label.text = '';
+
+        this._avatar.update();
+    }
+});

js/ui/viewSelector.js

@@ -12,6 +12,7 @@ const St = imports.gi.St;
 
 const AppDisplay = imports.ui.appDisplay;
 const Main = imports.ui.main;
+const OverviewControls = imports.ui.overviewControls;
 const Params = imports.misc.params;
 const RemoteSearch = imports.ui.remoteSearch;
 const Search = imports.ui.search;
@@ -23,6 +24,12 @@ const WorkspacesView = imports.ui.workspacesView;
 
 const SHELL_KEYBINDINGS_SCHEMA = 'org.gnome.shell.keybindings';
 
+const ViewPage = {
+    WINDOWS: 1,
+    APPS: 2,
+    SEARCH: 3
+};
+
 const FocusTrap = new Lang.Class({
     Name: 'FocusTrap',
     Extends: St.Widget,
@@ -35,6 +42,14 @@ const FocusTrap = new Lang.Class({
     }
 });
 
+function getTermsForSearchString(searchString) {
+    searchString = searchString.replace(/^\s+/g, '').replace(/\s+$/g, '');
+    if (searchString == '')
+        return [];
+
+    let terms = searchString.split(/\s+/);
+    return terms;
+}
 
 const ViewSelector = new Lang.Class({
     Name: 'ViewSelector',
@@ -42,6 +57,7 @@ const ViewSelector = new Lang.Class({
     _init : function(searchEntry, showAppsButton) {
         this.actor = new Shell.Stack({ name: 'viewSelector' });
 
+        this._showAppsBlocked = false;
         this._showAppsButton = showAppsButton;
         this._showAppsButton.connect('notify::checked', Lang.bind(this, this._onShowAppsButtonToggled));
 
@@ -67,11 +83,10 @@ const ViewSelector = new Lang.Class({
         this._entry.connect('notify::mapped', Lang.bind(this, this._onMapped));
         global.stage.connect('notify::key-focus', Lang.bind(this, this._onStageKeyFocusChanged));
 
-        this._inactiveIcon = new St.Icon({ style_class: 'search-entry-icon',
-                                           icon_name: 'edit-find-symbolic' });
-        this._activeIcon = new St.Icon({ style_class: 'search-entry-icon',
-                                         icon_name: 'edit-clear-symbolic' });
-        this._entry.set_secondary_icon(this._inactiveIcon);
+        this._entry.set_primary_icon(new St.Icon({ style_class: 'search-entry-icon',
+                                                   icon_name: 'edit-find-symbolic' }));
+        this._clearIcon = new St.Icon({ style_class: 'search-entry-icon',
+                                        icon_name: 'edit-clear-symbolic' });
 
         this._iconClickedId = 0;
         this._capturedEventId = 0;
@@ -80,7 +95,7 @@ const ViewSelector = new Lang.Class({
         this._workspacesPage = this._addPage(this._workspacesDisplay.actor,
                                              _("Windows"), 'emblem-documents-symbolic');
 
-        this._appDisplay = new AppDisplay.AllAppDisplay();
+        this._appDisplay = new AppDisplay.AppDisplay();
         this._appsPage = this._addPage(this._appDisplay.actor,
                                        _("Applications"), 'view-grid-symbolic');
 
@@ -98,7 +113,6 @@ const ViewSelector = new Lang.Class({
         // Wanda comes obviously first
         this.addSearchProvider(new Wanda.WandaSearchProvider());
         this.addSearchProvider(new AppDisplay.AppSearchProvider());
-        this.addSearchProvider(new AppDisplay.SettingsSearchProvider());
 
         // Load remote search providers provided by applications
         RemoteSearch.loadRemoteSearchProviders(Lang.bind(this, this.addSearchProvider));
@@ -114,9 +128,6 @@ const ViewSelector = new Lang.Class({
 
         global.focus_manager.add_group(this._searchResults.actor);
 
-        Main.overview.connect('item-drag-begin',
-                              Lang.bind(this, this._resetShowAppsButton));
-
         this._stageKeyPressId = 0;
         Main.overview.connect('showing', Lang.bind(this,
             function () {
@@ -149,6 +160,7 @@ const ViewSelector = new Lang.Class({
     show: function() {
         this._activePage = this._workspacesPage;
 
+        this.reset();
         this._appsPage.hide();
         this._searchPage.hide();
         this._workspacesDisplay.show();
@@ -156,7 +168,7 @@ const ViewSelector = new Lang.Class({
         if (!this._workspacesDisplay.activeWorkspaceHasMaximizedWindows())
             Main.overview.fadeOutDesktop();
 
-        this._showPage(this._workspacesPage);
+        this._showPage(this._workspacesPage, true);
     },
 
     zoomFromOverview: function() {
@@ -192,29 +204,40 @@ const ViewSelector = new Lang.Class({
         return page;
     },
 
-    _showPage: function(page) {
-        if(page == this._activePage)
+    _fadePageIn: function(oldPage) {
+        if (oldPage)
+            oldPage.hide();
+
+        this.emit('page-empty');
+
+        this._activePage.show();
+        Tweener.addTween(this._activePage,
+            { opacity: 255,
+              time: OverviewControls.SIDE_CONTROLS_ANIMATION_TIME,
+              transition: 'easeOutQuad'
+            });
+    },
+
+    _showPage: function(page, noFade) {
+        if (page == this._activePage)
             return;
 
-        if(this._activePage) {
-            Tweener.addTween(this._activePage,
+        let oldPage = this._activePage;
+        this._activePage = page;
+        this.emit('page-changed');
+
+        if (oldPage && !noFade)
+            Tweener.addTween(oldPage,
                              { opacity: 0,
-                               time: 0.1,
+                               time: OverviewControls.SIDE_CONTROLS_ANIMATION_TIME,
                                transition: 'easeOutQuad',
                                onComplete: Lang.bind(this,
                                    function() {
-                                       this._activePage.hide();
-                                       this._activePage = page;
+                                       this._fadePageIn(oldPage);
                                    })
                              });
-        }
-
-        page.show();
-        Tweener.addTween(page,
-                         { opacity: 255,
-                           time: 0.1,
-                           transition: 'easeOutQuad'
-                         });
+        else
+            this._fadePageIn(oldPage);
     },
 
     _a11yFocusPage: function(page) {
@@ -223,15 +246,19 @@ const ViewSelector = new Lang.Class({
     },
 
     _onShowAppsButtonToggled: function() {
-        if (this._searchActive)
-            this.reset();
-        else
-            this._showPage(this._showAppsButton.checked ? this._appsPage
-                                                        : this._workspacesPage);
+        if (this._showAppsBlocked)
+            return;
+
+        this._showPage(this._showAppsButton.checked ?
+                       this._appsPage : this._workspacesPage);
     },
 
     _resetShowAppsButton: function() {
+        this._showAppsBlocked = true;
         this._showAppsButton.checked = false;
+        this._showAppsBlocked = false;
+
+        this._showPage(this._workspacesPage, true);
     },
 
     _onStageKeyPress: function(actor, event) {
@@ -247,12 +274,11 @@ const ViewSelector = new Lang.Class({
             if (this._searchActive)
                 this.reset();
             else if (this._showAppsButton.checked)
-                this._resetShowAppsButton();
+                this._showAppsButton.checked = false;
             else
                 Main.overview.hide();
             return true;
-        } else if (Clutter.keysym_to_unicode(symbol) ||
-                   (symbol == Clutter.BackSpace && this._searchActive)) {
+        } else if (this._shouldTriggerSearch(symbol)) {
             this.startSearch(event);
         } else if (!this._searchActive) {
             if (symbol == Clutter.Tab || symbol == Clutter.Down) {
@@ -317,6 +343,17 @@ const ViewSelector = new Lang.Class({
         }
     },
 
+    _shouldTriggerSearch: function(symbol) {
+        let unicode = Clutter.keysym_to_unicode(symbol);
+        if (unicode == 0)
+            return false;
+
+        if (getTermsForSearchString(String.fromCharCode(unicode)).length > 0)
+            return true;
+
+        return symbol == Clutter.BackSpace && this._searchActive;
+    },
+
     startSearch: function(event) {
         global.stage.set_key_focus(this._text);
         this._text.event(event, true);
@@ -328,15 +365,17 @@ const ViewSelector = new Lang.Class({
     },
 
     _onTextChanged: function (se, prop) {
+        let terms = getTermsForSearchString(this._entry.get_text());
+
         let searchPreviouslyActive = this._searchActive;
-        this._searchActive = this._entry.get_text() != '';
+        this._searchActive = (terms.length > 0);
 
         let startSearch = this._searchActive && !searchPreviouslyActive;
         if (startSearch)
             this._searchResults.startingSearch();
 
         if (this._searchActive) {
-            this._entry.set_secondary_icon(this._activeIcon);
+            this._entry.set_secondary_icon(this._clearIcon);
 
             if (this._iconClickedId == 0)
                 this._iconClickedId = this._entry.connect('secondary-icon-clicked',
@@ -356,7 +395,7 @@ const ViewSelector = new Lang.Class({
                 this._searchTimeoutId = 0;
             }
 
-            this._entry.set_secondary_icon(this._inactiveIcon);
+            this._entry.set_secondary_icon(null);
             this._searchCancelled();
         }
     },
@@ -423,9 +462,10 @@ const ViewSelector = new Lang.Class({
 
     _doSearch: function () {
         this._searchTimeoutId = 0;
-        let text = this._text.get_text().replace(/^\s+/g, '').replace(/\s+$/g, '');
-        this._searchResults.doSearch(text);
 
+        let terms = getTermsForSearchString(this._entry.get_text());
+
+        this._searchSystem.updateSearchResults(terms);
         this._showPage(this._searchPage);
     },
 
@@ -462,6 +502,31 @@ const ViewSelector = new Lang.Class({
     removeSearchProvider: function(provider) {
         this._searchSystem.unregisterProvider(provider);
         this._searchResults.destroyProviderMeta(provider);
+    },
+
+    getActivePage: function() {
+        if (this._activePage == this._workspacesPage)
+            return ViewPage.WINDOWS;
+        else if (this._activePage == this._appsPage)
+            return ViewPage.APPS;
+        else
+            return ViewPage.SEARCH;
+    },
+
+    fadeIn: function() {
+        let actor = this._activePage;
+        Tweener.addTween(actor, { opacity: 255,
+                                  time: OverviewControls.SIDE_CONTROLS_ANIMATION_TIME / 2,
+                                  transition: 'easeInQuad'
+                                });
+    },
+
+    fadeHalf: function() {
+        let actor = this._activePage;
+        Tweener.addTween(actor, { opacity: 128,
+                                  time: OverviewControls.SIDE_CONTROLS_ANIMATION_TIME / 2,
+                                  transition: 'easeOutQuad'
+                                });
     }
 });
 Signals.addSignalMethods(ViewSelector.prototype);

js/ui/windowManager.js

@@ -174,15 +174,6 @@ const WindowManager = new Lang.Class({
                            Meta.KeyBindingFlags.NONE,
                            Shell.KeyBindingMode.NORMAL,
                            Lang.bind(this, this._openAppMenu));
-
-        Main.overview.connect('showing', Lang.bind(this, function() {
-            for (let i = 0; i < this._dimmedWindows.length; i++)
-                this._undimWindow(this._dimmedWindows[i]);
-        }));
-        Main.overview.connect('hiding', Lang.bind(this, function() {
-            for (let i = 0; i < this._dimmedWindows.length; i++)
-                this._dimWindow(this._dimmedWindows[i]);
-        }));
     },
 
     setCustomKeybindingHandler: function(name, modes, handler) {
@@ -245,29 +236,9 @@ const WindowManager = new Lang.Class({
 
         this._minimizing.push(actor);
 
-        let xDest, yDest, xScale, yScale;
-        let [success, geom] = actor.meta_window.get_icon_geometry();
-        if (success) {
-            xDest = geom.x;
-            yDest = geom.y;
-            xScale = geom.width / actor.width;
-            yScale = geom.height / actor.height;
-        } else {
-            /* scale window down to 0x0.  */
-            let monitor = Main.layoutManager.findMonitorForWindow(actor.meta_window);
-            xDest = monitor.x;
-            yDest = monitor.y;
-            xScale = 0.0;
-            yScale = 0.0;
-            if (Clutter.get_default_text_direction() == Clutter.TextDirection.RTL)
-                xDest += monitor.width;
-        }
-
-        Tweener.addTween(actor,
-                         { scale_x: xScale,
-                           scale_y: yScale,
-                           x: xDest,
-                           y: yDest,
+        if (actor.meta_window.is_monitor_sized()) {
+            Tweener.addTween(actor,
+                         { opacity: 0,
                            time: WINDOW_ANIMATION_TIME,
                            transition: 'easeOutQuad',
                            onComplete: this._minimizeWindowDone,
@@ -277,12 +248,46 @@ const WindowManager = new Lang.Class({
                            onOverwriteScope: this,
                            onOverwriteParams: [shellwm, actor]
                          });
+        } else {
+            let xDest, yDest, xScale, yScale;
+            let [success, geom] = actor.meta_window.get_icon_geometry();
+            if (success) {
+                xDest = geom.x;
+                yDest = geom.y;
+                xScale = geom.width / actor.width;
+                yScale = geom.height / actor.height;
+            } else {
+                let monitor = Main.layoutManager.monitors[actor.meta_window.get_monitor()];
+                xDest = monitor.x;
+                yDest = monitor.y;
+                if (Clutter.get_default_text_direction() == Clutter.TextDirection.RTL)
+                    xDest += monitor.width;
+                xScale = 0;
+                yScale = 0;
+            }
+
+            Tweener.addTween(actor,
+                             { scale_x: xScale,
+                               scale_y: yScale,
+                               x: xDest,
+                               y: yDest,
+                               time: WINDOW_ANIMATION_TIME,
+                               transition: 'easeOutQuad',
+                               onComplete: this._minimizeWindowDone,
+                               onCompleteScope: this,
+                               onCompleteParams: [shellwm, actor],
+                               onOverwrite: this._minimizeWindowOverwritten,
+                               onOverwriteScope: this,
+                               onOverwriteParams: [shellwm, actor]
+                             });
+        }
     },
 
     _minimizeWindowDone : function(shellwm, actor) {
         if (this._removeEffect(this._minimizing, actor)) {
             Tweener.removeTweens(actor);
             actor.set_scale(1.0, 1.0);
+            actor.set_opacity(255);
             actor.move_anchor_point_from_gravity(Clutter.Gravity.NORTH_WEST);
 
             shellwm.completed_minimize(actor);
@@ -328,15 +333,13 @@ const WindowManager = new Lang.Class({
         if (shouldDim && !window._dimmed) {
             window._dimmed = true;
             this._dimmedWindows.push(window);
-            if (!Main.overview.visible)
-                this._dimWindow(window);
+            this._dimWindow(window);
         } else if (!shouldDim && window._dimmed) {
             window._dimmed = false;
             this._dimmedWindows = this._dimmedWindows.filter(function(win) {
                                                                  return win != window;
                                                              });
-            if (!Main.overview.visible)
-                this._undimWindow(window);
+            this._undimWindow(window);
         }
     },
 
@@ -533,11 +536,11 @@ const WindowManager = new Lang.Class({
         if (direction == Meta.MotionDirection.UP ||
             direction == Meta.MotionDirection.UP_LEFT ||
             direction == Meta.MotionDirection.UP_RIGHT)
-                yDest = global.screen_height;
+                yDest = global.screen_height - Main.panel.actor.height;
         else if (direction == Meta.MotionDirection.DOWN ||
             direction == Meta.MotionDirection.DOWN_LEFT ||
             direction == Meta.MotionDirection.DOWN_RIGHT)
-                yDest = -global.screen_height;
+                yDest = -global.screen_height + Main.panel.actor.height;
 
         if (direction == Meta.MotionDirection.LEFT ||
             direction == Meta.MotionDirection.UP_LEFT ||
@@ -550,9 +553,9 @@ const WindowManager = new Lang.Class({
 
         let switchData = {};
         this._switchData = switchData;
-        switchData.inGroup = new Clutter.Group();
-        switchData.outGroup = new Clutter.Group();
-        switchData.movingWindowBin = new Clutter.Group();
+        switchData.inGroup = new Clutter.Actor();
+        switchData.outGroup = new Clutter.Actor();
+        switchData.movingWindowBin = new Clutter.Actor();
         switchData.windows = [];
 
         let wgroup = global.window_group;
@@ -579,7 +582,7 @@ const WindowManager = new Lang.Class({
                 switchData.windows.push({ window: window,
                                           parent: window.get_parent() });
                 window.reparent(switchData.inGroup);
-                window.show_all();
+                window.show();
             }
         }
 

js/ui/workspace.js

@@ -15,6 +15,7 @@ const Main = imports.ui.main;
 const Overview = imports.ui.overview;
 const Panel = imports.ui.panel;
 const Tweener = imports.ui.tweener;
+const WindowManager = imports.ui.windowManager;
 
 const FOCUS_ANIMATION_TIME = 0.15;
 
@@ -41,46 +42,68 @@ function _interpolate(start, end, step) {
     return start + (end - start) * step;
 }
 
-function _clamp(value, min, max) {
-    return Math.max(min, Math.min(max, value));
-}
+const WindowCloneLayout = new Lang.Class({
+    Name: 'WindowCloneLayout',
+    Extends: Clutter.LayoutManager,
 
+    _init: function(boundingBox) {
+        this.parent();
 
-const ScaledPoint = new Lang.Class({
-    Name: 'ScaledPoint',
-
-    _init: function(x, y, scaleX, scaleY) {
-        [this.x, this.y, this.scaleX, this.scaleY] = arguments;
+        this._boundingBox = boundingBox;
     },
 
-    getPosition : function() {
-        return [this.x, this.y];
+    get boundingBox() {
+        return this._boundingBox;
     },
 
-    getScale : function() {
-        return [this.scaleX, this.scaleY];
+    set boundingBox(b) {
+        this._boundingBox = b;
+        this.layout_changed();
     },
 
-    setPosition : function(x, y) {
-        [this.x, this.y] = arguments;
+    _makeBoxForWindow: function(window) {
+        // We need to adjust the position of the actor because of the
+        // consequences of invisible borders -- in reality, the texture
+        // has an extra set of "padding" around it that we need to trim
+        // down.
+
+        // The outer rect (from which we compute the bounding box)
+        // paradoxically is the smaller rectangle, containing the positions
+        // of the visible frame. The input rect contains everything,
+        // including the invisible border padding.
+        let inputRect = window.get_input_rect();
+
+        let box = new Clutter.ActorBox();
+
+        box.set_origin(inputRect.x - this._boundingBox.x,
+                       inputRect.y - this._boundingBox.y);
+        box.set_size(inputRect.width, inputRect.height);
+
+        return box;
     },
 
-    setScale : function(scaleX, scaleY) {
-        [this.scaleX, this.scaleY] = arguments;
+    vfunc_get_preferred_height: function(container, forWidth) {
+        return [this._boundingBox.height, this._boundingBox.height];
     },
 
-    interpPosition : function(other, step) {
-        return [_interpolate(this.x, other.x, step),
-                _interpolate(this.y, other.y, step)];
+    vfunc_get_preferred_width: function(container, forHeight) {
+        return [this._boundingBox.width, this._boundingBox.width];
     },
 
-    interpScale : function(other, step) {
-        return [_interpolate(this.scaleX, other.scaleX, step),
-                _interpolate(this.scaleY, other.scaleY, step)];
-    }
+    vfunc_allocate: function(container, box, flags) {
+        let clone = container.get_children().forEach(function (child) {
+            let realWindow;
+            if (child == container._delegate._windowClone)
+                realWindow = container._delegate.realWindow;
+            else
+                realWindow = child.source;
+
+            child.allocate(this._makeBoxForWindow(realWindow.meta_window),
+                           flags);
+        }, this);
+    },
 });
 
-
 const WindowClone = new Lang.Class({
     Name: 'WindowClone',
 
@@ -90,10 +113,7 @@ const WindowClone = new Lang.Class({
         this.metaWindow._delegate = this;
         this._workspace = workspace;
 
-        let [borderX, borderY] = this._getInvisibleBorderPadding();
-        this._windowClone = new Clutter.Clone({ source: realWindow.get_texture(),
-                                                x: -borderX,
-                                                y: -borderY });
+        this._windowClone = new Clutter.Clone({ source: realWindow.get_texture() });
         // We expect this.actor to be used for all interaction rather than
         // this._windowClone; as the former is reactive and the latter
         // is not, this just works for most cases. However, for DND all
@@ -101,22 +121,17 @@ const WindowClone = new Lang.Class({
         // To avoid this, we hide it from pick.
         Shell.util_set_hidden_from_pick(this._windowClone, true);
 
-        this.origX = realWindow.x + borderX;
-        this.origY = realWindow.y + borderY;
-
-        let outerRect = realWindow.meta_window.get_outer_rect();
-
         // The MetaShapedTexture that we clone has a size that includes
         // the invisible border; this is inconvenient; rather than trying
-        // to compensate all over the place we insert a ClutterGroup into
+        // to compensate all over the place we insert a custom container into
         // the hierarchy that is sized to only the visible portion.
-        this.actor = new Clutter.Group({ reactive: true,
-                                         x: this.origX,
-                                         y: this.origY,
-                                         width: outerRect.width,
-                                         height: outerRect.height });
+        // As usual, we cannot use a ShellGenericContainer or StWidget here,
+        // because Workspace plays dirty tricks with reparenting to do DNDs
+        // and scroll-to-zoom.
+        this.actor = new Clutter.Actor({ reactive: true,
+                                         layout_manager: new WindowCloneLayout() });
 
-        this.actor.add_actor(this._windowClone);
+        this.actor.add_child(this._windowClone);
 
         this.actor._delegate = this;
 
@@ -124,10 +139,19 @@ const WindowClone = new Lang.Class({
         this._dragSlot = [0, 0, 0, 0];
         this._stackAbove = null;
 
-        this._sizeChangedId = this.realWindow.connect('size-changed',
+        this._windowClone._updateId = this.realWindow.connect('size-changed',
             Lang.bind(this, this._onRealWindowSizeChanged));
-        this._realWindowDestroyId = this.realWindow.connect('destroy',
-            Lang.bind(this, this._disconnectRealWindowSignals));
+        this._windowClone._destroyId = this.realWindow.connect('destroy', Lang.bind(this, function() {
+            // First destroy the clone and then destroy everything
+            // This will ensure that we never see it in the _disconnectSignals loop
+            this._windowClone.destroy();
+            this.destroy();
+        }));
+
+        this._updateAttachedDialogs();
+        this._computeBoundingBox();
+        this.actor.x = this._boundingBox.x;
+        this.actor.y = this._boundingBox.y;
 
         let clickAction = new Clutter.ClickAction();
         clickAction.connect('clicked', Lang.bind(this, this._onClicked));
@@ -135,12 +159,7 @@ const WindowClone = new Lang.Class({
 
         this.actor.add_action(clickAction);
 
-        this.actor.connect('scroll-event',
-                           Lang.bind(this, this._onScroll));
-
         this.actor.connect('destroy', Lang.bind(this, this._onDestroy));
-        this.actor.connect('leave-event',
-                           Lang.bind(this, this._onLeave));
 
         this._draggable = DND.makeDraggable(this.actor,
                                             { restoreOnSuccess: true,
@@ -152,8 +171,6 @@ const WindowClone = new Lang.Class({
         this._draggable.connect('drag-end', Lang.bind(this, this._onDragEnd));
         this.inDrag = false;
 
-        this._windowIsZooming = false;
-        this._zooming = false;
         this._selected = false;
     },
 
@@ -168,10 +185,101 @@ const WindowClone = new Lang.Class({
             return this._slot;
     },
 
+    deleteAll: function() {
+        // Delete all windows, starting from the bottom-most (most-modal) one
+
+        let windows = this.actor.get_children();
+        for (let i = windows.length - 1; i >= 1; i--) {
+            let realWindow = windows[i].source;
+            let metaWindow = realWindow.meta_window;
+
+            metaWindow.delete(global.get_current_time());
+        }
+
+        this.metaWindow.delete(global.get_current_time());
+    },
+
+    addAttachedDialog: function(win) {
+        this._doAddAttachedDialog(win, win.get_compositor_private());
+        this._computeBoundingBox();
+        this._updateDimmer();
+        this.emit('size-changed');
+    },
+
+    _doAddAttachedDialog: function(metaWin, realWin) {
+        let clone = new Clutter.Clone({ source: realWin });
+        clone._updateId = realWin.connect('size-changed', Lang.bind(this, function() {
+            this._computeBoundingBox();
+            this.emit('size-changed');
+        }));
+        clone._destroyId = realWin.connect('destroy', Lang.bind(this, function() {
+            clone.destroy();
+
+            this._computeBoundingBox();
+            this._updateDimmer();
+            this.emit('size-changed');
+        }));
+        this.actor.add_child(clone);
+    },
+
+    _updateAttachedDialogs: function() {
+        let iter = Lang.bind(this, function(win) {
+            let actor = win.get_compositor_private();
+
+            if (!actor)
+                return false;
+            if (!win.is_attached_dialog())
+                return false;
+
+            this._doAddAttachedDialog(win, actor);
+            win.foreach_transient(iter);
+            return true;
+        });
+        this.metaWindow.foreach_transient(iter);
+
+        this._dimmer = new WindowManager.WindowDimmer(this._windowClone);
+        this._updateDimmer();
+    },
+
+    _updateDimmer: function() {
+        if (this.actor.get_n_children() > 1) {
+            this._dimmer.setEnabled(true);
+            this._dimmer.dimFactor = 1.0;
+        } else {
+            this._dimmer.setEnabled(false);
+        }
+    },
+
+    get boundingBox() {
+        return this._boundingBox;
+    },
+
+    getOriginalPosition: function() {
+        return [this._boundingBox.x, this._boundingBox.y];
+    },
+
+    _computeBoundingBox: function() {
+        let rect = this.metaWindow.get_outer_rect();
+
+        this.actor.get_children().forEach(function (child) {
+            let realWindow;
+            if (child == this._windowClone)
+                realWindow = this.realWindow;
+            else
+                realWindow = child.source;
+
+            let metaWindow = realWindow.meta_window;
+            rect = rect.union(metaWindow.get_outer_rect());
+        }, this);
+
+        this._boundingBox = rect;
+        this.actor.layout_manager.boundingBox = rect;
+    },
+
     setStackAbove: function (actor) {
         this._stackAbove = actor;
-        if (this.inDrag || this._zooming)
-            // We'll fix up the stack after the drag/zooming
+        if (this.inDrag)
+            // We'll fix up the stack after the drag
             return;
         if (this._stackAbove == null)
             this.actor.lower_bottom();
@@ -183,63 +291,29 @@ const WindowClone = new Lang.Class({
         this.actor.destroy();
     },
 
-    zoomFromOverview: function() {
-        if (this._zooming) {
-            // If the user clicked on the zoomed window, or we are
-            // returning there anyways, then we can zoom right to the
-            // window, but if we are going to some other window, then
-            // we need to cancel the zoom before animating, or it
-            // will look funny.
+    _disconnectSignals: function() {
+        this.actor.get_children().forEach(Lang.bind(this, function (child) {
+            let realWindow;
+            if (child == this._windowClone)
+                realWindow = this.realWindow;
+            else
+                realWindow = child.source;
 
-            if (!this._selected &&
-                this.metaWindow != global.display.focus_window)
-                this._zoomEnd();
-        }
-    },
-
-    _disconnectRealWindowSignals: function() {
-        if (this._sizeChangedId > 0)
-            this.realWindow.disconnect(this._sizeChangedId);
-        this._sizeChangedId = 0;
-
-        if (this._realWindowDestroyId > 0)
-            this.realWindow.disconnect(this._realWindowDestroyId);
-        this._realWindowDestroyId = 0;
-    },
-
-    _getInvisibleBorderPadding: function() {
-        // We need to adjust the position of the actor because of the
-        // consequences of invisible borders -- in reality, the texture
-        // has an extra set of "padding" around it that we need to trim
-        // down.
-
-        // The outer rect paradoxically is the smaller rectangle,
-        // containing the positions of the visible frame. The input
-        // rect contains everything, including the invisible border
-        // padding.
-        let outerRect = this.metaWindow.get_outer_rect();
-        let inputRect = this.metaWindow.get_input_rect();
-        let [borderX, borderY] = [outerRect.x - inputRect.x,
-                                  outerRect.y - inputRect.y];
-
-        return [borderX, borderY];
+            realWindow.disconnect(child._updateId);
+            realWindow.disconnect(child._destroyId);
+        }));
     },
 
     _onRealWindowSizeChanged: function() {
-        let [borderX, borderY] = this._getInvisibleBorderPadding();
-        let outerRect = this.metaWindow.get_outer_rect();
-        this.actor.set_size(outerRect.width, outerRect.height);
-        this._windowClone.set_position(-borderX, -borderY);
+        this._computeBoundingBox();
         this.emit('size-changed');
     },
 
     _onDestroy: function() {
-        this._disconnectRealWindowSignals();
+        this._disconnectSignals();
 
         this.metaWindow._delegate = null;
         this.actor._delegate = null;
-        if (this._zoomLightbox)
-            this._zoomLightbox.destroy();
 
         if (this.inDrag) {
             this.emit('drag-end');
@@ -249,126 +323,6 @@ const WindowClone = new Lang.Class({
         this.disconnectAll();
     },
 
-    _onLeave: function (actor, event) {
-        if (this._zoomStep)
-            this._zoomEnd();
-    },
-
-    _onScroll : function (actor, event) {
-        let direction = event.get_scroll_direction();
-        let delta;
-
-        if (event.is_pointer_emulated())
-            return;
-
-        if (direction == Clutter.ScrollDirection.DOWN) {
-            delta = -SCROLL_SCALE_AMOUNT;
-        } else if (direction == Clutter.ScrollDirection.UP) {
-            delta = +SCROLL_SCALE_AMOUNT;
-        } else if (direction == Clutter.ScrollDirection.SMOOTH) {
-            let [dx, dy] = event.get_scroll_delta();
-            delta = -dy * 10;
-        }
-
-        if (delta > 0) {
-            if (this._zoomStep == undefined)
-                this._zoomStart();
-            if (this._zoomStep < 100) {
-                this._zoomStep += delta;
-                this._zoomStep = Math.min(100, this._zoomStep);
-                this._zoomUpdate();
-            }
-        } else if (delta < 0) {
-            if (this._zoomStep > 0) {
-                this._zoomStep += delta;
-                this._zoomStep = Math.max(0, this._zoomStep);
-                this._zoomUpdate();
-            }
-            if (this._zoomStep <= 0.0)
-                this._zoomEnd();
-        }
-    },
-
-    _zoomUpdate : function () {
-        [this.actor.x, this.actor.y] = this._zoomGlobalOrig.interpPosition(this._zoomTarget, this._zoomStep / 100);
-        [this.actor.scale_x, this.actor.scale_y] = this._zoomGlobalOrig.interpScale(this._zoomTarget, this._zoomStep / 100);
-
-        let [width, height] = this.actor.get_transformed_size();
-
-        let monitorIndex = this.metaWindow.get_monitor();
-        let monitor = Main.layoutManager.monitors[monitorIndex];
-        let availArea = new Meta.Rectangle({ x: monitor.x,
-                                             y: monitor.y,
-                                             width: monitor.width,
-                                             height: monitor.height });
-        if (monitorIndex == Main.layoutManager.primaryIndex) {
-            availArea.y += Main.panel.actor.height;
-            availArea.height -= Main.panel.actor.height;
-        }
-
-        this.actor.x = _clamp(this.actor.x, availArea.x, availArea.x + availArea.width - width);
-        this.actor.y = _clamp(this.actor.y, availArea.y, availArea.y + availArea.height - height);
-    },
-
-    _zoomStart : function () {
-        this._zooming = true;
-        this.emit('zoom-start');
-
-        if (!this._zoomLightbox)
-            this._zoomLightbox = new Lightbox.Lightbox(Main.uiGroup,
-                                                       { fadeInTime: LIGHTBOX_FADE_TIME,
-                                                         fadeOutTime: LIGHTBOX_FADE_TIME });
-        this._zoomLightbox.show();
-
-        this._zoomLocalOrig  = new ScaledPoint(this.actor.x, this.actor.y, this.actor.scale_x, this.actor.scale_y);
-        this._zoomGlobalOrig = new ScaledPoint();
-        let parent = this._origParent = this.actor.get_parent();
-        let [width, height] = this.actor.get_transformed_size();
-        this._zoomGlobalOrig.setPosition.apply(this._zoomGlobalOrig, this.actor.get_transformed_position());
-        this._zoomGlobalOrig.setScale(width / this.actor.width, height / this.actor.height);
-
-        this.actor.reparent(Main.uiGroup);
-        this._zoomLightbox.highlight(this.actor);
-
-        [this.actor.x, this.actor.y]             = this._zoomGlobalOrig.getPosition();
-        [this.actor.scale_x, this.actor.scale_y] = this._zoomGlobalOrig.getScale();
-
-        this.actor.raise_top();
-
-        this._zoomTarget = new ScaledPoint(0, 0, 1.0, 1.0);
-        this._zoomTarget.setPosition(this.actor.x - (this.actor.width - width) / 2, this.actor.y - (this.actor.height - height) / 2);
-        this._zoomStep = 0;
-
-        this._zoomUpdate();
-    },
-
-    _zoomEnd : function () {
-        this._zooming = false;
-        this.emit('zoom-end');
-
-        this.actor.reparent(this._origParent);
-        if (this._stackAbove == null)
-            this.actor.lower_bottom();
-        // If the workspace has been destroyed while we were reparented to
-        // the stage, _stackAbove will be unparented and we can't raise our
-        // actor above it - as we are bound to be destroyed anyway in that
-        // case, we can skip that step
-        else if (this._stackAbove.get_parent())
-            this.actor.raise(this._stackAbove);
-
-        [this.actor.x, this.actor.y]             = this._zoomLocalOrig.getPosition();
-        [this.actor.scale_x, this.actor.scale_y] = this._zoomLocalOrig.getScale();
-
-        this._zoomLightbox.hide();
-
-        this._zoomLocalPosition  = undefined;
-        this._zoomLocalScale     = undefined;
-        this._zoomGlobalPosition = undefined;
-        this._zoomGlobalScale    = undefined;
-        this._zoomTargetPosition = undefined;
-        this._zoomStep           = undefined;
-    },
-
     _onClicked: function(action, actor) {
         this._selected = true;
         this.emit('selected', global.get_current_time());
@@ -394,9 +348,6 @@ const WindowClone = new Lang.Class({
     },
 
     _onDragBegin : function (draggable, time) {
-        if (this._zooming)
-            this._zoomEnd();
-
         this._dragSlot = this._slot;
         [this.dragOrigX, this.dragOrigY] = this.actor.get_position();
         this.dragOrigScale = this.actor.scale_x;
@@ -478,8 +429,6 @@ const WindowOverlay = new Lang.Class({
                                   Lang.bind(this, this._onLeave));
 
         this._windowAddedId = 0;
-        windowClone.connect('zoom-start', Lang.bind(this, this.hide));
-        windowClone.connect('zoom-end', Lang.bind(this, this.show));
 
         button.hide();
 
@@ -534,14 +483,20 @@ const WindowOverlay = new Lang.Class({
     },
 
     chromeWidths: function () {
-        return [this.borderSize, this.borderSize];
+        return [this.borderSize,
+                Math.max(this.borderSize, this.closeButton.width - this.closeButton._overlap)];
     },
 
     relayout: function(animate) {
-        let [cloneX, cloneY, cloneWidth, cloneHeight] = this._windowClone.slot;
-
         let button = this.closeButton;
         let title = this.title;
+        let border = this.border;
+
+        Tweener.removeTweens(button);
+        Tweener.removeTweens(title);
+        Tweener.removeTweens(border);
+
+        let [cloneX, cloneY, cloneWidth, cloneHeight] = this._windowClone.slot;
 
         let layout = Meta.prefs_get_button_layout();
         let side = layout.left_buttons.indexOf(Meta.ButtonFunction.CLOSE) > -1 ? St.Side.LEFT : St.Side.RIGHT;
@@ -614,7 +569,7 @@ const WindowOverlay = new Lang.Class({
                                                       Lang.bind(this,
                                                                 this._onWindowAdded));
 
-        metaWindow.delete(global.get_current_time());
+        this._windowClone.deleteAll();
     },
 
     _onWindowAdded: function(workspace, win) {
@@ -738,10 +693,85 @@ const WindowOverlay = new Lang.Class({
 Signals.addSignalMethods(WindowOverlay.prototype);
 
 const WindowPositionFlags = {
+    NONE: 0,
     INITIAL: 1 << 0,
     ANIMATE: 1 << 1
 };
 
+// Window Thumbnail Layout Algorithm
+// =================================
+//
+// General overview
+// ----------------
+//
+// The window thumbnail layout algorithm calculates some optimal layout
+// by computing layouts with some number of rows, calculating how good
+// each layout is, and stopping iterating when it finds one that is worse
+// than the previous layout. A layout consists of which windows are in
+// which rows, row sizes and other general state tracking that would make
+// calculating window positions from this information fairly easy.
+//
+// We don't compute some global order of windows right now for optimal
+// travel when animating into the overview; windows are assumed to be
+// in some stable order.
+//
+// After a layout is computed that's considered the best layout, we
+// compute the layout scale to fit it in the area, and then compute
+// slots (sizes and positions) for each thumbnail.
+//
+// Layout generation
+// -----------------
+//
+// Layout generation is naive and simple: we simply add windows to a row
+// until we've added too many windows to a row, and then make a new row,
+// until we have our required N rows. The potential issue with this strategy
+// is that we may have too many windows at the bottom in some pathological
+// cases, which tends to make the thumbnails have the shape of a pile of
+// sand with a peak, with one window at the top.
+//
+// Scaling factors
+// ---------------
+//
+// Thumbnail position is mostly straightforward -- the main issue is
+// computing an optimal scale for each window that fits the constraints,
+// and doesn't make the thumbnail too small to see. There are two factors
+// involved in thumbnail scale to make sure that these two goals are met:
+// the window scale (calculated by _computeWindowScale) and the layout
+// scale (calculated by computeSizeAndScale).
+//
+// The calculation logic becomes slightly more complicated because row
+// and column spacing are not scaled, they're constant, so we can't
+// simply generate a bunch of window positions and then scale it. In
+// practice, it's not too bad -- we can simply try to fit the layout
+// in the input area minus whatever spacing we have, and then add
+// it back afterwards.
+//
+// The window scale is constant for the window's size regardless of the
+// input area or the layout scale or rows or anything else, and right
+// now just enlarges the window if it's too small. The fact that this
+// factor is stable makes it easy to calculate, so there's no sense
+// in not applying it in most calculations.
+//
+// The layout scale depends on the input area, the rows, etc, but is the
+// same for the entire layout, rather than being per-window. After
+// generating the rows of windows, we basically do some basic math to
+// fit the full, unscaled layout to the input area, as described above.
+//
+// With these two factors combined, the final scale of each thumbnail is
+// simply windowScale * layoutScale... almost.
+//
+// There's one additional constraint: the thumbnail scale must never be
+// larger than WINDOW_CLONE_MAXIMUM_SCALE, which means that the inequality:
+//
+//   windowScale * layoutScale <= WINDOW_CLONE_MAXIMUM_SCALE
+//
+// must always be true. This is for each individual window -- while we
+// could adjust layoutScale to make the largest thumbnail smaller than
+// WINDOW_CLONE_MAXIMUM_SCALE, it would shrink windows which are already
+// under the inequality. To solve this, we simply cheat: we simply keep
+// each window's "cell" area to be the same, but we shrink the thumbnail
+// and center it horizontally, and align it to the bottom vertically.
+
 const LayoutStrategy = new Lang.Class({
     Name: 'LayoutStrategy',
     Abstract: true,
@@ -764,19 +794,15 @@ const LayoutStrategy = new Lang.Class({
         //   meant to be scaled
         //
         // * neither height/fullHeight have any sort of spacing or padding
-        //
-        // * if cellWidth is present, all windows in the row will occupy
-        //   the space of cellWidth, centered.
         return { x: 0, y: 0,
                  width: 0, height: 0,
                  fullWidth: 0, fullHeight: 0,
-                 cellWidth: 0,
                  windows: [] };
     },
 
-    // Computes and returns a fancy scale for @window using the
-    // base scale, @scale.
-    _computeWindowScale: function(window, scale) {
+    // Computes and returns an individual scaling factor for @window,
+    // to be applied in addition to the overal layout scale.
+    _computeWindowScale: function(window) {
         // Since we align windows next to each other, the height of the
         // thumbnails is much more important to preserve than the width of
         // them, so two windows with equal height, but maybe differering
@@ -789,14 +815,13 @@ const LayoutStrategy = new Lang.Class({
         // good. We'll use a multiplier of 1.5 for this.
 
         // Map from [0, 1] to [1.5, 1]
-        let fancyScale = _interpolate(1.5, 1, ratio) * scale;
-        return fancyScale;
+        return _interpolate(1.5, 1, ratio);
     },
 
     // Compute the size of each row, by assigning to the properties
     // row.width, row.height, row.fullWidth, row.fullHeight, and
-    // (optionally) row.cellWidth, for each row in @layout.rows.
-    // This method is intended to be called by subclasses.
+    // (optionally) for each row in @layout.rows. This method is
+    // intended to be called by subclasses.
     _computeRowSizes: function(layout) {
         throw new Error('_computeRowSizes not implemented');
     },
@@ -847,10 +872,17 @@ const LayoutStrategy = new Lang.Class({
         layout.space = space;
     },
 
+    _getDistance: function (row, actor) {
+        let dist_x = actor.x - row.x;
+        let dist_y = actor.y - row.y;
+
+        return Math.sqrt(Math.pow(dist_x, 2) + Math.pow(dist_y, 2));
+    },
+
     computeWindowSlots: function(layout, area) {
         this._computeRowSizes(layout);
 
-        let { rows: rows, scale: scale, state: state } = layout;
+        let { rows: rows, scale: scale } = layout;
 
         let slots = [];
 
@@ -860,6 +892,9 @@ const LayoutStrategy = new Lang.Class({
             row.x = area.x + (area.width - row.width) / 2;
             row.y = area.y + y;
             y += row.height + this._rowSpacing;
+            row.windows.sort(Lang.bind(this, function(a, b) {
+                return this._getDistance(row, a.realWindow) - this._getDistance(row, b.realWindow);
+            }));
         }
 
         let height = y - this._rowSpacing;
@@ -868,24 +903,22 @@ const LayoutStrategy = new Lang.Class({
         for (let i = 0; i < rows.length; i++) {
             let row = rows[i];
             row.y += baseY;
-            let baseX = row.x;
+            let x = row.x;
             for (let j = 0; j < row.windows.length; j++) {
                 let window = row.windows[j];
 
-                let s = this._computeWindowScale(window, scale);
+                let s = scale * this._computeWindowScale(window);
+                let cellWidth = window.actor.width * s;
+                let cellHeight = window.actor.height * s;
+
                 s = Math.min(s, WINDOW_CLONE_MAXIMUM_SCALE);
-                let width = window.actor.width * s;
-                let height = window.actor.height * s;
-                let y = row.y + row.height - height;
+                let cloneWidth = window.actor.width * s;
 
-                let x = baseX;
-                if (row.cellWidth) {
-                    x += (row.cellWidth - width) / 2;
-                    width = row.cellWidth;
-                }
+                let cloneX = x + (cellWidth - cloneWidth) / 2;
+                let cloneY = row.y + row.height - cellHeight;
 
-                slots.push([x, y, s]);
-                baseX += width + this._columnSpacing;
+                slots.push([cloneX, cloneY, s, window]);
+                x += cellWidth + this._columnSpacing;
             }
         }
         return slots;
@@ -924,7 +957,9 @@ const UnalignedLayoutStrategy = new Lang.Class({
         let rows = [];
         let totalWidth = 0;
         for (let i = 0; i < windows.length; i++) {
-            totalWidth += windows[i].actor.width;
+            let window = windows[i];
+            let s = this._computeWindowScale(window);
+            totalWidth += window.actor.width * s;
         }
 
         let idealRowWidth = totalWidth / numRows;
@@ -936,7 +971,7 @@ const UnalignedLayoutStrategy = new Lang.Class({
 
             for (; windowIdx < windows.length; windowIdx++) {
                 let window = windows[windowIdx];
-                let s = this._computeWindowScale(window, 1);
+                let s = this._computeWindowScale(window);
                 let width = window.actor.width * s;
                 let height = window.actor.height * s;
                 row.fullHeight = Math.max(row.fullHeight, height);
@@ -967,57 +1002,6 @@ const UnalignedLayoutStrategy = new Lang.Class({
     }
 });
 
-const GridLayoutStrategy = new Lang.Class({
-    Name: 'GridLayoutStrategy',
-    Extends: LayoutStrategy,
-
-    _computeRowSizes: function(layout) {
-        let { rows: rows, scale: scale } = layout;
-
-        let gridWidth = layout.numColumns * layout.maxWindowWidth;
-        let hspacing = (layout.numColumns - 1) * this._columnSpacing;
-        for (let i = 0; i < rows.length; i++) {
-            let row = rows[i];
-            row.fullWidth = layout.gridWidth;
-            row.fullHeight = layout.maxWindowHeight;
-
-            row.width = row.fullWidth * scale + hspacing;
-            row.height = row.fullHeight * scale;
-            row.cellWidth = layout.maxWindowWidth * scale;
-        }
-    },
-
-    computeLayout: function(windows, layout) {
-        let { numRows: numRows, numColumns: numColumns } = layout;
-        let rows = [];
-        let windowIdx = 0;
-
-        let maxWindowWidth = 0;
-        let maxWindowHeight = 0;
-        for (let i = 0; i < numRows; i++) {
-            let row = this._newRow();
-            rows.push(row);
-            for (; windowIdx < windows.length; windowIdx++) {
-                if (row.windows.length >= numColumns)
-                    break;
-
-                let window = windows[windowIdx];
-                row.windows.push(window);
-
-                let s = this._computeWindowScale(window, 1);
-                maxWindowWidth = Math.max(maxWindowWidth, window.actor.width * s);
-                maxWindowHeight = Math.max(maxWindowHeight, window.actor.height * s);
-            }
-        }
-
-        layout.rows = rows;
-        layout.maxColumns = numColumns;
-        layout.gridWidth = numColumns * maxWindowWidth;
-        layout.gridHeight = numRows * maxWindowHeight;
-        layout.maxWindowWidth = maxWindowWidth;
-        layout.maxWindowHeight = maxWindowHeight;
-    }
-});
 
 /**
  * @metaWorkspace: a #Meta.Workspace, or null
@@ -1036,7 +1020,7 @@ const Workspace = new Lang.Class({
 
         this.monitorIndex = monitorIndex;
         this._monitor = Main.layoutManager.monitors[this.monitorIndex];
-        this._windowOverlaysGroup = new Clutter.Group();
+        this._windowOverlaysGroup = new Clutter.Actor();
         // Without this the drop area will be overlapped.
         this._windowOverlaysGroup.set_size(0, 0);
 
@@ -1098,7 +1082,7 @@ const Workspace = new Lang.Class({
             return false;
         }));
 
-        this.positionWindows(WindowPositionFlags.ANIMATE);
+        this.positionWindows(WindowPositionFlags.NONE);
     },
 
     _lookupIndex: function (metaWindow) {
@@ -1174,9 +1158,9 @@ const Workspace = new Lang.Class({
         let currentWorkspace = global.screen.get_active_workspace();
         let isOnCurrentWorkspace = this.metaWorkspace == null || this.metaWorkspace == currentWorkspace;
 
-        for (let i = 0; i < clones.length; i++) {
+        for (let i = 0; i < slots.length; i++) {
             let slot = slots[i];
-            let clone = clones[i];
+            let [x, y, scale, clone] = slot;
             let metaWindow = clone.metaWindow;
             let overlay = clone.overlay;
             clone.slotId = i;
@@ -1186,7 +1170,6 @@ const Workspace = new Lang.Class({
             if (clone.inDrag)
                 continue;
 
-            let [x, y, scale] = slot;
             clone.slot = [x, y, clone.actor.width * scale, clone.actor.height * scale];
 
             if (overlay && initialPositioning)
@@ -1205,9 +1188,8 @@ const Workspace = new Lang.Class({
                         clone.actor.y = y;
                     }
 
-                    // Make the window slightly transparent to indicate it's hidden
                     Tweener.addTween(clone.actor,
-                                     { opacity: 128,
+                                     { opacity: 255,
                                        time: Overview.ANIMATION_TIME,
                                        transition: 'easeInQuad'
                                      });
@@ -1270,9 +1252,6 @@ const Workspace = new Lang.Class({
     },
 
     _delayedWindowRepositioning: function() {
-        if (this._windowIsZooming)
-            return true;
-
         let [x, y, mask] = global.get_pointer();
 
         let pointerHasMoved = (this._cursorX != x && this._cursorY != y);
@@ -1378,9 +1357,29 @@ const Workspace = new Lang.Class({
         if (this._lookupIndex (metaWin) != -1)
             return;
 
-        if (!this._isMyWindow(win) || !this._isOverviewWindow(win))
+        if (!this._isMyWindow(win))
             return;
 
+        if (!this._isOverviewWindow(win)) {
+            if (metaWin.is_attached_dialog()) {
+                let parent = metaWin.get_transient_for();
+                while (parent.is_attached_dialog())
+                    parent = metaWin.get_transient_for();
+
+                let idx = this._lookupIndex (parent);
+                if (idx < 0) {
+                    // parent was not created yet, it will take care
+                    // of the dialog when created
+                    return;
+                }
+
+                let clone = this._windows[idx];
+                clone.addAttachedDialog(metaWin);
+            }
+
+            return;
+        }
+
         let [clone, overlay] = this._addWindowClone(win);
 
         if (win._overviewHint) {
@@ -1478,12 +1477,12 @@ const Workspace = new Lang.Class({
             if (overlay)
                 overlay.hide();
 
-            clone.zoomFromOverview();
-
             if (clone.metaWindow.showing_on_its_workspace()) {
+                let [origX, origY] = clone.getOriginalPosition();
+
                 Tweener.addTween(clone.actor,
-                                 { x: clone.origX,
-                                   y: clone.origY,
+                                 { x: origX,
+                                   y: origY,
                                    scale_x: 1.0,
                                    scale_y: 1.0,
                                    time: Overview.ANIMATION_TIME,
@@ -1526,13 +1525,6 @@ const Workspace = new Lang.Class({
 
         if (this._positionWindowsId > 0)
             Meta.later_remove(this._positionWindowsId);
-
-        // Usually, the windows will be destroyed automatically with
-        // their parent (this.actor), but we might have a zoomed window
-        // which has been reparented to the stage - _windows[0] holds
-        // the desktop window, which is never reparented
-        for (let w = 0; w < this._windows.length; w++)
-            this._windows[w].destroy();
         this._windows = [];
     },
 
@@ -1541,10 +1533,11 @@ const Workspace = new Lang.Class({
         this.leavingOverview = false;
     },
 
-    // Tests if @win belongs to this workspaces and monitor
-    _isMyWindow : function (win) {
-        return (this.metaWorkspace == null || Main.isWindowActorDisplayedOnWorkspace(win, this.metaWorkspace.index())) &&
-            (!win.get_meta_window() || win.get_meta_window().get_monitor() == this.monitorIndex);
+    // Tests if @actor belongs to this workspaces and monitor
+    _isMyWindow : function (actor) {
+        let win = actor.meta_window;
+        return (this.metaWorkspace == null || win.located_on_workspace(this.metaWorkspace)) &&
+            (win.get_monitor() == this.monitorIndex);
     },
 
     // Tests if @win should be shown in the Overview
@@ -1575,14 +1568,6 @@ const Workspace = new Lang.Class({
                           Main.overview.endWindowDrag();
                           overlay.show();
                       }));
-        clone.connect('zoom-start',
-                      Lang.bind(this, function() {
-                          this._windowIsZooming = true;
-                      }));
-        clone.connect('zoom-end',
-                      Lang.bind(this, function() {
-                          this._windowIsZooming = false;
-                      }));
         clone.connect('size-changed',
                       Lang.bind(this, function() {
                           this.positionWindows(0);
@@ -1592,6 +1577,11 @@ const Workspace = new Lang.Class({
 
         overlay.connect('show-close-button', Lang.bind(this, this._onShowOverlayClose));
 
+        if (this._windows.length == 0)
+            clone.setStackAbove(null);
+        else
+            clone.setStackAbove(this._windows[this._windows.length - 1].actor);
+
         this._windows.push(clone);
         this._windowOverlays.push(overlay);
 
@@ -1644,8 +1634,7 @@ const Workspace = new Lang.Class({
             if (numColumns == lastLayout.numColumns)
                 break;
 
-            let strategyClass = numRows > 2 ? GridLayoutStrategy : UnalignedLayoutStrategy;
-            let strategy = new strategyClass(this._monitor, rowSpacing, columnSpacing);
+            let strategy = new UnalignedLayoutStrategy(this._monitor, rowSpacing, columnSpacing);
 
             let layout = { area: area, strategy: strategy, numRows: numRows, numColumns: numColumns };
             strategy.computeLayout(windows, layout);

js/ui/workspaceSwitcherPopup.js

@@ -55,10 +55,9 @@ const WorkspaceSwitcherPopup = new Lang.Class({
 
     _getPreferredHeight : function (actor, forWidth, alloc) {
         let children = this._list.get_children();
-        let primary = Main.layoutManager.primaryMonitor;
+        let workArea = Main.layoutManager.getWorkAreaForMonitor(Main.layoutManager.primaryIndex);
 
-        let availHeight = primary.height;
-        availHeight -= Main.panel.actor.height;
+        let availHeight = workArea.height;
         availHeight -= this.actor.get_theme_node().get_vertical_padding();
         availHeight -= this._container.get_theme_node().get_vertical_padding();
         availHeight -= this._list.get_theme_node().get_vertical_padding();
@@ -67,7 +66,7 @@ const WorkspaceSwitcherPopup = new Lang.Class({
         for (let i = 0; i < children.length; i++) {
             let [childMinHeight, childNaturalHeight] = children[i].get_preferred_height(-1);
             let [childMinWidth, childNaturalWidth] = children[i].get_preferred_width(childNaturalHeight);
-            height += childNaturalHeight * primary.width / primary.height;
+            height += childNaturalHeight * workArea.width / workArea.height;
         }
 
         let spacing = this._itemSpacing * (global.screen.n_workspaces - 1);
@@ -81,8 +80,8 @@ const WorkspaceSwitcherPopup = new Lang.Class({
     },
 
     _getPreferredWidth : function (actor, forHeight, alloc) {
-        let primary = Main.layoutManager.primaryMonitor;
-        this._childWidth = Math.round(this._childHeight * primary.width / primary.height);
+        let workArea = Main.layoutManager.getWorkAreaForMonitor(Main.layoutManager.primaryIndex);
+        this._childWidth = Math.round(this._childHeight * workArea.width / workArea.height);
 
         alloc.min_size = this._childWidth;
         alloc.natural_size = this._childWidth;
@@ -122,12 +121,11 @@ const WorkspaceSwitcherPopup = new Lang.Class({
 
         }
 
-        let primary = Main.layoutManager.primaryMonitor;
+        let workArea = Main.layoutManager.getWorkAreaForMonitor(Main.layoutManager.primaryIndex);
         let [containerMinHeight, containerNatHeight] = this._container.get_preferred_height(global.screen_width);
         let [containerMinWidth, containerNatWidth] = this._container.get_preferred_width(containerNatHeight);
-        this._container.x = primary.x + Math.floor((primary.width - containerNatWidth) / 2);
-        this._container.y = primary.y + Main.panel.actor.height +
-                            Math.floor(((primary.height - Main.panel.actor.height) - containerNatHeight) / 2);
+        this._container.x = workArea.x + Math.floor((workArea.width - containerNatWidth) / 2);
+        this._container.y = workArea.y + Math.floor((workArea.height - containerNatHeight) / 2);
     },
 
     _show : function() {

js/ui/workspaceThumbnail.js

@@ -9,9 +9,11 @@ const Shell = imports.gi.Shell;
 const Signals = imports.signals;
 const St = imports.gi.St;
 
+const Background = imports.ui.background;
 const DND = imports.ui.dnd;
 const Main = imports.ui.main;
 const Tweener = imports.ui.tweener;
+const WindowManager = imports.ui.windowManager;
 const Workspace = imports.ui.workspace;
 const WorkspacesView = imports.ui.workspacesView;
 
@@ -30,20 +32,49 @@ const WORKSPACE_KEEP_ALIVE_TIME = 100;
 
 const OVERRIDE_SCHEMA = 'org.gnome.shell.overrides';
 
+/* A layout manager that requests size only for primary_actor, but then allocates
+   all using a fixed layout */
+const PrimaryActorLayout = new Lang.Class({
+    Name: 'PrimaryActorLayout',
+    Extends: Clutter.FixedLayout,
+
+    _init: function(primaryActor) {
+        this.parent();
+
+        this.primaryActor = primaryActor;
+    },
+
+    vfunc_get_preferred_width: function(forHeight) {
+        return this.primaryActor.get_preferred_width(forHeight);
+    },
+
+    vfunc_get_preferred_height: function(forWidth) {
+        return this.primaryActor.get_preferred_height(forWidth);
+    },
+});
+
 const WindowClone = new Lang.Class({
     Name: 'WindowClone',
 
     _init : function(realWindow) {
-        this.actor = new Clutter.Clone({ source: realWindow.get_texture(),
+        this.clone = new Clutter.Clone({ source: realWindow });
+
+        /* Can't use a Shell.GenericContainer because of DND and reparenting... */
+        this.actor = new Clutter.Actor({ layout_manager: new PrimaryActorLayout(this.clone),
                                          reactive: true });
         this.actor._delegate = this;
+        this.actor.add_child(this.clone);
         this.realWindow = realWindow;
         this.metaWindow = realWindow.meta_window;
 
-        this._positionChangedId = this.realWindow.connect('position-changed',
-                                                          Lang.bind(this, this._onPositionChanged));
-        this._realWindowDestroyedId = this.realWindow.connect('destroy',
-                                                              Lang.bind(this, this._disconnectRealWindowSignals));
+        this.clone._updateId = this.realWindow.connect('position-changed',
+                                                       Lang.bind(this, this._onPositionChanged));
+        this.clone._destroyId = this.realWindow.connect('destroy', Lang.bind(this, function() {
+            // First destroy the clone and then destroy everything
+            // This will ensure that we never see it in the _disconnectSignals loop
+            this.clone.destroy();
+            this.destroy();
+        }));
         this._onPositionChanged();
 
         this.actor.connect('button-release-event',
@@ -59,6 +90,24 @@ const WindowClone = new Lang.Class({
         this._draggable.connect('drag-cancelled', Lang.bind(this, this._onDragCancelled));
         this._draggable.connect('drag-end', Lang.bind(this, this._onDragEnd));
         this.inDrag = false;
+
+        let iter = Lang.bind(this, function(win) {
+            let actor = win.get_compositor_private();
+
+            if (!actor)
+                return false;
+            if (!win.is_attached_dialog())
+                return false;
+
+            this._doAddAttachedDialog(win, actor);
+            win.foreach_transient(iter);
+
+            return true;
+        });
+        this.metaWindow.foreach_transient(iter);
+
+        this._dimmer = new WindowManager.WindowDimmer(this.clone);
+        this._updateDimmer();
     },
 
     setStackAbove: function (actor) {
@@ -73,25 +122,57 @@ const WindowClone = new Lang.Class({
         this.actor.destroy();
     },
 
+    addAttachedDialog: function(win) {
+        this._doAddAttachedDialog(win, win.get_compositor_private());
+        this._updateDimmer();
+    },
+
+    _doAddAttachedDialog: function(metaDialog, realDialog) {
+        let clone = new Clutter.Clone({ source: realDialog });
+        this._updateDialogPosition(realDialog, clone);
+
+        clone._updateId = realDialog.connect('position-changed',
+                                             Lang.bind(this, this._updateDialogPosition, clone));
+        clone._destroyId = realDialog.connect('destroy', Lang.bind(this, function() {
+            clone.destroy();
+            this._updateDimmer();
+        }));
+        this.actor.add_child(clone);
+    },
+
+    _updateDimmer: function() {
+        if (this.actor.get_n_children() > 1) {
+            this._dimmer.setEnabled(true);
+            this._dimmer.dimFactor = 1.0;
+        } else {
+            this._dimmer.setEnabled(false);
+        }
+    },
+
+    _updateDialogPosition: function(realDialog, cloneDialog) {
+        let metaDialog = realDialog.meta_window;
+        let dialogRect = metaDialog.get_outer_rect();
+        let rect = this.metaWindow.get_outer_rect();
+
+        cloneDialog.set_position(dialogRect.x - rect.x, dialogRect.y - rect.y);
+    },
+
     _onPositionChanged: function() {
         let rect = this.metaWindow.get_outer_rect();
         this.actor.set_position(this.realWindow.x, this.realWindow.y);
     },
 
-    _disconnectRealWindowSignals: function() {
-        if (this._positionChangedId != 0) {
-            this.realWindow.disconnect(this._positionChangedId);
-            this._positionChangedId = 0;
-        }
+    _disconnectSignals: function() {
+        this.actor.get_children().forEach(function(child) {
+            let realWindow = child.source;
 
-        if (this._realWindowDestroyedId != 0) {
-            this.realWindow.disconnect(this._realWindowDestroyedId);
-            this._realWindowDestroyedId = 0;
-        }
+            realWindow.disconnect(child._updateId);
+            realWindow.disconnect(child._destroyId);
+        });
     },
 
     _onDestroy: function() {
-        this._disconnectRealWindowSignals();
+        this._disconnectSignals();
 
         this.actor._delegate = null;
 
@@ -165,18 +246,20 @@ const WorkspaceThumbnail = new Lang.Class({
                                      style_class: 'workspace-thumbnail' });
         this.actor._delegate = this;
 
-        this._contents = new Clutter.Group();
-        this.actor.add_actor(this._contents);
+        this._contents = new Clutter.Actor();
+        this.actor.add_child(this._contents);
 
         this.actor.connect('destroy', Lang.bind(this, this._onDestroy));
 
-        this._background = Meta.BackgroundActor.new_for_screen(global.screen);
-        this._contents.add_actor(this._background);
+        this._createBackground();
 
         let monitor = Main.layoutManager.primaryMonitor;
         this.setPorthole(monitor.x, monitor.y, monitor.width, monitor.height);
 
-        let windows = global.get_window_actors().filter(this._isWorkspaceWindow, this);
+        let windows = global.get_window_actors().filter(Lang.bind(this, function(actor) {
+            let win = actor.meta_window;
+            return win.located_on_workspace(metaWorkspace);
+        }));
 
         // Create clones for windows that should be visible in the Overview
         this._windows = [];
@@ -210,6 +293,12 @@ const WorkspaceThumbnail = new Lang.Class({
         this._collapseFraction = 0; // Not collapsed
     },
 
+    _createBackground: function() {
+        this._bgManager = new Background.BackgroundManager({ monitorIndex: Main.layoutManager.primaryIndex,
+                                                             container: this._contents,
+                                                             effects: Meta.BackgroundEffects.NONE });
+    },
+
     setPorthole: function(x, y, width, height) {
         this._portholeX = x;
         this._portholeY = y;
@@ -233,7 +322,7 @@ const WorkspaceThumbnail = new Lang.Class({
             let clone = this._windows[i];
             let metaWindow = clone.metaWindow;
             if (i == 0) {
-                clone.setStackAbove(this._background);
+                clone.setStackAbove(this._bgManager.background.actor);
             } else {
                 let previousClone = this._windows[i - 1];
                 clone.setStackAbove(previousClone.actor);
@@ -311,10 +400,26 @@ const WorkspaceThumbnail = new Lang.Class({
         if (this._lookupIndex (metaWin) != -1)
             return;
 
-        if (!this._isMyWindow(win) || !this._isOverviewWindow(win))
+        if (!this._isMyWindow(win))
             return;
 
-        let clone = this._addWindowClone(win);
+        if (this._isOverviewWindow(win)) {
+            this._addWindowClone(win);
+        } else if (metaWin.is_attached_dialog()) {
+            let parent = metaWin.get_transient_for();
+            while (parent.is_attached_dialog())
+                parent = metaWin.get_transient_for();
+
+            let idx = this._lookupIndex (parent);
+            if (idx < 0) {
+                // parent was not created yet, it will take care
+                // of the dialog when created
+                return;
+            }
+
+            let clone = this._windows[idx];
+            clone.addAttachedDialog(metaWin);
+        }
     },
 
     _windowAdded : function(metaWorkspace, metaWin) {
@@ -353,6 +458,8 @@ const WorkspaceThumbnail = new Lang.Class({
 
     destroy : function() {
         this.actor.destroy();
+        this._bgManager.destroy();
+        this._bgManager = null;
     },
 
     workspaceRemoved : function() {
@@ -377,15 +484,11 @@ const WorkspaceThumbnail = new Lang.Class({
         this.actor = null;
     },
 
-    // Tests if @win belongs to this workspace
-    _isWorkspaceWindow : function (win) {
-        return Main.isWindowActorDisplayedOnWorkspace(win, this.metaWorkspace.index());
-    },
-
-    // Tests if @win belongs to this workspace and monitor
-    _isMyWindow : function (win) {
-        return this._isWorkspaceWindow(win) &&
-            (!win.get_meta_window() || win.get_meta_window().get_monitor() == this.monitorIndex);
+    // Tests if @actor belongs to this workspace and monitor
+    _isMyWindow : function (actor) {
+        let win = actor.meta_window;
+        return win.located_on_workspace(this.metaWorkspace) &&
+            (win.get_monitor() == this.monitorIndex);
     },
 
     // Tests if @win should be shown in the Overview
@@ -418,7 +521,7 @@ const WorkspaceThumbnail = new Lang.Class({
         this._contents.add_actor(clone.actor);
 
         if (this._windows.length == 0)
-            clone.setStackAbove(this._background);
+            clone.setStackAbove(this._bgManager.background.actor);
         else
             clone.setStackAbove(this._windows[this._windows.length - 1].actor);
 
@@ -544,7 +647,6 @@ const ThumbnailsBox = new Lang.Class({
 
         this.actor.connect('button-press-event', function() { return true; });
         this.actor.connect('button-release-event', Lang.bind(this, this._onButtonRelease));
-        this.actor.connect('scroll-event', Lang.bind(this, this._onScrollEvent));
 
         Main.overview.connect('showing',
                               Lang.bind(this, this._createThumbnails));
@@ -583,7 +685,7 @@ const ThumbnailsBox = new Lang.Class({
             let thumbnail = this._thumbnails[i]
             let [w, h] = thumbnail.actor.get_transformed_size();
             if (y >= thumbnail.actor.y && y <= thumbnail.actor.y + h) {
-                thumbnail.activate(event.time);
+                thumbnail.activate(event.get_time());
                 break;
             }
         }
@@ -759,14 +861,7 @@ const ThumbnailsBox = new Lang.Class({
             this._stateCounts[ThumbnailState[key]] = 0;
 
         // The "porthole" is the portion of the screen that we show in the workspaces
-        let panelHeight = Main.panel.actor.height;
-        let monitor = Main.layoutManager.primaryMonitor;
-        this._porthole = {
-            x: monitor.x,
-            y: monitor.y + panelHeight,
-            width: monitor.width,
-            height: monitor.height - panelHeight
-        };
+        this._porthole = Main.layoutManager.getWorkAreaForMonitor(Main.layoutManager.primaryIndex);
 
         this.addThumbnails(0, global.screen.n_workspaces);
 
@@ -1000,8 +1095,6 @@ const ThumbnailsBox = new Lang.Class({
         // See comment about this._background in _init()
         let themeNode = this._background.get_theme_node();
 
-        forWidth = themeNode.adjust_for_width(forWidth);
-
         // Note that for getPreferredWidth/Height we cheat a bit and skip propagating
         // the size request to our children because we know how big they are and know
         // that the actors aren't depending on the virtual functions being called.
@@ -1217,16 +1310,5 @@ const ThumbnailsBox = new Lang.Class({
                            },
                            onCompleteScope: this
                          });
-    },
-
-    _onScrollEvent: function (actor, event) {
-        switch (event.get_scroll_direction()) {
-        case Clutter.ScrollDirection.UP:
-            Main.wm.actionMoveWorkspace(Meta.MotionDirection.UP);
-            break;
-        case Clutter.ScrollDirection.DOWN:
-            Main.wm.actionMoveWorkspace(Meta.MotionDirection.DOWN);
-            break;
-        }
     }
 });

js/ui/workspacesView.js

@@ -23,14 +23,13 @@ const MAX_WORKSPACES = 16;
 
 const OVERRIDE_SCHEMA = 'org.gnome.shell.overrides';
 
-const CONTROLS_POP_IN_TIME = 0.1;
-
 
 const WorkspacesView = new Lang.Class({
     Name: 'WorkspacesView',
 
     _init: function(workspaces) {
-        this.actor = new St.Widget({ style_class: 'workspaces-view' });
+        this.actor = new St.Widget({ style_class: 'workspaces-view',
+                                     reactive: true });
 
         // The actor itself isn't a drop target, so we don't want to pick on its area
         this.actor.set_size(0, 0);
@@ -48,10 +47,6 @@ const WorkspacesView = new Lang.Class({
         this._height = 0;
         this._x = 0;
         this._y = 0;
-        this._clipX = 0;
-        this._clipY = 0;
-        this._clipWidth = 0;
-        this._clipHeight = 0;
         this._spacing = 0;
         this._animating = false; // tweening
         this._scrolling = false; // swipe-scrolling
@@ -90,8 +85,8 @@ const WorkspacesView = new Lang.Class({
         this._overviewShownId =
             Main.overview.connect('shown',
                                  Lang.bind(this, function() {
-                this.actor.set_clip(this._clipX, this._clipY,
-                                    this._clipWidth, this._clipHeight);
+                this.actor.set_clip(this._x, this._y,
+                                    this._width, this._height);
         }));
 
         this.scrollAdjustment = new St.Adjustment({ value: activeWorkspaceIndex,
@@ -158,13 +153,6 @@ const WorkspacesView = new Lang.Class({
             this._workspaces[i].setGeometry(x, y, width, height);
     },
 
-    setClipRect: function(x, y, width, height) {
-        this._clipX = x;
-        this._clipY = y;
-        this._clipWidth = width;
-        this._clipHeight = height;
-    },
-
     _lookupWorkspaceForMetaWindow: function (metaWindow) {
         for (let i = 0; i < this._workspaces.length; i++) {
             if (this._workspaces[i].containsMetaWindow(metaWindow))
@@ -203,11 +191,6 @@ const WorkspacesView = new Lang.Class({
             this._extraWorkspaces[i].syncStacking(stackIndices);
     },
 
-    updateWindowPositions: function() {
-        for (let w = 0; w < this._workspaces.length; w++)
-            this._workspaces[w].positionWindows(Workspace.WindowPositionFlags.ANIMATE);
-    },
-
     _scrollToActive: function() {
         let active = global.screen.get_active_workspace_index();
 
@@ -437,23 +420,9 @@ const WorkspacesDisplay = new Lang.Class({
     Name: 'WorkspacesDisplay',
 
     _init: function() {
-        this.actor = new Shell.GenericContainer({ style_class: 'workspaces-display' });
-        this.actor.connect('get-preferred-width', Lang.bind(this, this._getPreferredWidth));
-        this.actor.connect('get-preferred-height', Lang.bind(this, this._getPreferredHeight));
-        this.actor.connect('allocate', Lang.bind(this, this._allocate));
+        this.actor = new St.Widget({ clip_to_allocation: true });
+        this.actor.connect('notify::allocation', Lang.bind(this, this._updateWorkspacesGeometry));
         this.actor.connect('parent-set', Lang.bind(this, this._parentSet));
-        this.actor.set_clip_to_allocation(true);
-
-        this._spacing = 0;
-        this.actor.connect('style-changed', Lang.bind(this,
-            function() {
-                let node = this.actor.get_theme_node();
-                let spacing = node.get_length('spacing');
-                if (spacing != this._spacing) {
-                    this._spacing = spacing;
-                    this._updateWorkspacesGeometry();
-                }
-            }));
 
         let clickAction = new Clutter.ClickAction()
         clickAction.connect('clicked', Lang.bind(this, function(action) {
@@ -474,6 +443,11 @@ const WorkspacesDisplay = new Lang.Class({
                 this._workspacesViews[i].startSwipeScroll();
             return true;
         }));
+        panAction.connect('gesture-cancel', Lang.bind(this, function() {
+            clickAction.release();
+            for (let i = 0; i < this._workspacesViews.length; i++)
+                this._workspacesViews[i].endSwipeScroll();
+        }));
         panAction.connect('gesture-end', Lang.bind(this, function() {
             clickAction.release();
             for (let i = 0; i < this._workspacesViews.length; i++)
@@ -482,23 +456,8 @@ const WorkspacesDisplay = new Lang.Class({
         Main.overview.addAction(panAction);
         this.actor.bind_property('mapped', panAction, 'enabled', GObject.BindingFlags.SYNC_CREATE);
 
-        let controls = new St.Bin({ style_class: 'workspace-controls',
-                                    request_mode: Clutter.RequestMode.WIDTH_FOR_HEIGHT,
-                                    y_align: St.Align.START,
-                                    y_fill: true });
-        this._controls = controls;
-        this.actor.add_actor(controls);
-
-        controls.reactive = true;
-        controls.track_hover = true;
-        controls.connect('notify::hover',
-                         Lang.bind(this, this._onControlsHoverChanged));
-
         this._primaryIndex = Main.layoutManager.primaryIndex;
 
-        this._thumbnailsBox = new WorkspaceThumbnail.ThumbnailsBox();
-        controls.add_actor(this._thumbnailsBox.actor);
-
         this._workspacesViews = [];
         this._workspaces = [];
         this._primaryScrollAdjustment = null;
@@ -509,43 +468,13 @@ const WorkspacesDisplay = new Lang.Class({
                                          this._workspacesOnlyOnPrimaryChanged));
         this._workspacesOnlyOnPrimaryChanged();
 
-        this._inDrag = false;
-        this._cancelledDrag = false;
-
-        this._controlsInitiallyHovered = false;
-        this._alwaysZoomOut = false;
-        this._zoomOut = false;
-        this._zoomFraction = 0;
-
-        this._updateAlwaysZoom();
-
-        // If we stop hiding the overview on layout changes, we will need to
-        // update the _workspacesViews here
-        Main.layoutManager.connect('monitors-changed', Lang.bind(this, this._updateAlwaysZoom));
-
-        Main.xdndHandler.connect('drag-begin', Lang.bind(this, function(){
-            this._alwaysZoomOut = true;
-        }));
-
-        Main.xdndHandler.connect('drag-end', Lang.bind(this, function(){
-            this._alwaysZoomOut = false;
-            this._updateAlwaysZoom();
-        }));
-
         global.screen.connect('notify::n-workspaces',
                               Lang.bind(this, this._workspacesChanged));
 
         this._switchWorkspaceNotifyId = 0;
 
-        this._itemDragBeginId = 0;
-        this._itemDragCancelledId = 0;
-        this._itemDragEndId = 0;
-        this._windowDragBeginId = 0;
-        this._windowDragCancelledId = 0;
-        this._windowDragEndId = 0;
         this._notifyOpacityId = 0;
-        this._swipeScrollBeginId = 0;
-        this._swipeScrollEndId = 0;
+        this._scrollEventId = 0;
     },
 
     _onPan: function(action) {
@@ -556,49 +485,13 @@ const WorkspacesDisplay = new Lang.Class({
     },
 
     show: function() {
-        if(!this._alwaysZoomOut) {
-            let [mouseX, mouseY] = global.get_pointer();
-            let [x, y] = this._controls.get_transformed_position();
-            let [width, height] = this._controls.get_transformed_size();
-            let visibleWidth = this._controls.get_theme_node().get_length('visible-width');
-            let rtl = (Clutter.get_default_text_direction () == Clutter.TextDirection.RTL);
-            if(rtl)
-                x = x + width - visibleWidth;
-            if(mouseX > x - 0.5 && mouseX < x + visibleWidth + 0.5 &&
-               mouseY > y - 0.5 && mouseY < y + height + 0.5)
-                this._controlsInitiallyHovered = true;
-        }
-
-        this._zoomOut = this._alwaysZoomOut;
-        this._zoomFraction = this._alwaysZoomOut ? 1 : 0;
-        this._updateZoom();
-
-        this._controls.show();
-
         this._updateWorkspacesViews();
 
         this._restackedNotifyId =
             Main.overview.connect('windows-restacked',
                                   Lang.bind(this, this._onRestacked));
-
-        if (this._itemDragBeginId == 0)
-            this._itemDragBeginId = Main.overview.connect('item-drag-begin',
-                                                          Lang.bind(this, this._dragBegin));
-        if (this._itemDragCancelledId == 0)
-            this._itemDragCancelledId = Main.overview.connect('item-drag-cancelled',
-                                                              Lang.bind(this, this._dragCancelled));
-        if (this._itemDragEndId == 0)
-            this._itemDragEndId = Main.overview.connect('item-drag-end',
-                                                        Lang.bind(this, this._dragEnd));
-        if (this._windowDragBeginId == 0)
-            this._windowDragBeginId = Main.overview.connect('window-drag-begin',
-                                                            Lang.bind(this, this._dragBegin));
-        if (this._windowDragCancelledId == 0)
-            this._windowDragCancelledId = Main.overview.connect('window-drag-cancelled',
-                                                            Lang.bind(this, this._dragCancelled));
-        if (this._windowDragEndId == 0)
-            this._windowDragEndId = Main.overview.connect('window-drag-end',
-                                                          Lang.bind(this, this._dragEnd));
+        if (this._scrollEventId == 0)
+            this._scrollEventId = Main.overview.connect('scroll-event', Lang.bind(this, this._onScrollEvent));
     },
 
     zoomFromOverview: function() {
@@ -608,38 +501,13 @@ const WorkspacesDisplay = new Lang.Class({
     },
 
     hide: function() {
-        this._controls.hide();
-
-        if (!this._alwaysZoomOut)
-            this.zoomFraction = 0;
-
         if (this._restackedNotifyId > 0){
             Main.overview.disconnect(this._restackedNotifyId);
             this._restackedNotifyId = 0;
         }
-        if (this._itemDragBeginId > 0) {
-            Main.overview.disconnect(this._itemDragBeginId);
-            this._itemDragBeginId = 0;
-        }
-        if (this._itemDragCancelledId > 0) {
-            Main.overview.disconnect(this._itemDragCancelledId);
-            this._itemDragCancelledId = 0;
-        }
-        if (this._itemDragEndId > 0) {
-            Main.overview.disconnect(this._itemDragEndId);
-            this._itemDragEndId = 0;
-        }
-        if (this._windowDragBeginId > 0) {
-            Main.overview.disconnect(this._windowDragBeginId);
-            this._windowDragBeginId = 0;
-        }
-        if (this._windowDragCancelledId > 0) {
-            Main.overview.disconnect(this._windowDragCancelledId);
-            this._windowDragCancelledId = 0;
-        }
-        if (this._windowDragEndId > 0) {
-            Main.overview.disconnect(this._windowDragEndId);
-            this._windowDragEndId = 0;
+        if (this._scrollEventId > 0) {
+            Main.overview.disconnect(this._scrollEventId);
+            this._scrollEventId = 0;
         }
 
         for (let i = 0; i < this._workspacesViews.length; i++)
@@ -686,6 +554,7 @@ const WorkspacesDisplay = new Lang.Class({
             this._workspaces.push(monitorWorkspaces);
 
             let view = new WorkspacesView(monitorWorkspaces);
+            view.actor.connect('scroll-event', Lang.bind(this, this._onScrollEvent));
             if (this._workspacesOnlyOnPrimary || i == this._primaryIndex) {
                 this._scrollAdjustment = view.scrollAdjustment;
                 this._scrollAdjustment.connect('notify::value',
@@ -728,76 +597,6 @@ const WorkspacesDisplay = new Lang.Class({
         return this._getPrimaryView().getActiveWorkspace().hasMaximizedWindows();
     },
 
-    // zoomFraction property allows us to tween the controls sliding in and out
-    set zoomFraction(fraction) {
-        this._zoomFraction = fraction;
-        this.actor.queue_relayout();
-    },
-
-    get zoomFraction() {
-        return this._zoomFraction;
-    },
-
-    _updateAlwaysZoom: function()  {
-        // Always show the pager if workspaces are actually used,
-        // e.g. there are windows on more than one
-        this._alwaysZoomOut = global.screen.n_workspaces > 2;
-
-        if (this._alwaysZoomOut)
-            return;
-
-        let monitors = Main.layoutManager.monitors;
-        let primary = Main.layoutManager.primaryMonitor;
-
-        /* Look for any monitor to the right of the primary, if there is
-         * one, we always keep zoom out, otherwise its hard to reach
-         * the thumbnail area without passing into the next monitor. */
-        for (let i = 0; i < monitors.length; i++) {
-            if (monitors[i].x >= primary.x + primary.width) {
-                this._alwaysZoomOut = true;
-                break;
-            }
-        }
-    },
-
-    _getPreferredWidth: function (actor, forHeight, alloc) {
-        // pass through the call in case the child needs it, but report 0x0
-        this._controls.get_preferred_width(forHeight);
-    },
-
-    _getPreferredHeight: function (actor, forWidth, alloc) {
-        // pass through the call in case the child needs it, but report 0x0
-        this._controls.get_preferred_height(forWidth);
-    },
-
-    _allocate: function (actor, box, flags) {
-        let childBox = new Clutter.ActorBox();
-
-        let totalWidth = box.x2 - box.x1;
-
-        // width of the controls
-        let [controlsMin, controlsNatural] = this._controls.get_preferred_width(box.y2 - box.y1);
-
-        // Amount of space on the screen we reserve for the visible control
-        let controlsVisible = this._controls.get_theme_node().get_length('visible-width');
-        let controlsReserved = controlsVisible * (1 - this._zoomFraction) + controlsNatural * this._zoomFraction;
-
-        let rtl = (Clutter.get_default_text_direction () == Clutter.TextDirection.RTL);
-        if (rtl) {
-            childBox.x2 = controlsReserved;
-            childBox.x1 = childBox.x2 - controlsNatural;
-        } else {
-            childBox.x1 = totalWidth - controlsReserved;
-            childBox.x2 = childBox.x1 + controlsNatural;
-        }
-
-        childBox.y1 = 0;
-        childBox.y2 = box.y2- box.y1;
-        this._controls.allocate(childBox, flags);
-
-        this._updateWorkspacesGeometry();
-    },
-
     _parentSet: function(actor, oldParent) {
         if (oldParent && this._notifyOpacityId)
             oldParent.disconnect(this._notifyOpacityId);
@@ -834,37 +633,17 @@ const WorkspacesDisplay = new Lang.Class({
         let width = fullWidth;
         let height = fullHeight;
 
-        let [controlsMin, controlsNatural] = this._controls.get_preferred_width(height);
-        let controlsVisible = this._controls.get_theme_node().get_length('visible-width');
-
         let [x, y] = this.actor.get_transformed_position();
 
         let rtl = (Clutter.get_default_text_direction () == Clutter.TextDirection.RTL);
 
-        let clipWidth = width - controlsVisible;
-        let clipHeight = fullHeight;
-        let clipX = rtl ? x + controlsVisible : x;
-        let clipY = y + (fullHeight - clipHeight) / 2;
-
-        let widthAdjust = this._zoomOut ? controlsNatural : controlsVisible;
-        widthAdjust += this._spacing;
-        width -= widthAdjust;
-        if (rtl)
-            x += widthAdjust;
-
         let monitors = Main.layoutManager.monitors;
         let m = 0;
         for (let i = 0; i < monitors.length; i++) {
             if (i == this._primaryIndex) {
-                this._workspacesViews[m].setClipRect(clipX, clipY,
-                                                     clipWidth, clipHeight);
                 this._workspacesViews[m].setGeometry(x, y, width, height);
                 m++;
             } else if (!this._workspacesOnlyOnPrimary) {
-                this._workspacesViews[m].setClipRect(monitors[i].x,
-                                                     monitors[i].y,
-                                                     monitors[i].width,
-                                                     monitors[i].height);
                 this._workspacesViews[m].setGeometry(monitors[i].x,
                                                      monitors[i].y,
                                                      monitors[i].width,
@@ -880,9 +659,6 @@ const WorkspacesDisplay = new Lang.Class({
     },
 
     _workspacesChanged: function() {
-        this._updateAlwaysZoom();
-        this._updateZoom();
-
         if (!this._workspacesViews.length)
             return;
 
@@ -936,66 +712,18 @@ const WorkspacesDisplay = new Lang.Class({
                                                       newNumWorkspaces);
     },
 
-    _updateZoom : function() {
-        if (Main.overview.animationInProgress)
-            return;
-
-        let shouldZoom = this._alwaysZoomOut || this._controls.hover;
-        if (shouldZoom != this._zoomOut) {
-            this._zoomOut = shouldZoom;
-            this._updateWorkspacesGeometry();
-
-            if (!this._workspacesViews.length)
-                return;
-
-            Tweener.addTween(this,
-                             { zoomFraction: this._zoomOut ? 1 : 0,
-                               time: WORKSPACE_SWITCH_TIME,
-                               transition: 'easeOutQuad' });
-
-            for (let i = 0; i < this._workspacesViews.length; i++)
-                this._workspacesViews[i].updateWindowPositions();
+    _onScrollEvent: function(actor, event) {
+        if (!this.actor.mapped)
+            return false;
+        switch (event.get_scroll_direction()) {
+        case Clutter.ScrollDirection.UP:
+            Main.wm.actionMoveWorkspace(Meta.MotionDirection.UP);
+            return true;
+        case Clutter.ScrollDirection.DOWN:
+            Main.wm.actionMoveWorkspace(Meta.MotionDirection.DOWN);
+            return true;
         }
-    },
-
-    _onControlsHoverChanged: function() {
-        if(!this._controls.hover)
-            this._controlsInitiallyHovered = false;
-        if(!this._controlsInitiallyHovered)
-            this._updateZoom();
-    },
-
-    _dragBegin: function() {
-        this._inDrag = true;
-        this._cancelledDrag = false;
-        this._dragMonitor = {
-            dragMotion: Lang.bind(this, this._onDragMotion)
-        };
-        DND.addDragMonitor(this._dragMonitor);
-    },
-
-    _dragCancelled: function() {
-        this._cancelledDrag = true;
-        DND.removeDragMonitor(this._dragMonitor);
-    },
-
-    _onDragMotion: function(dragEvent) {
-        let controlsHovered = this._controls.contains(dragEvent.targetActor);
-        this._controls.set_hover(controlsHovered);
-
-        return DND.DragMotionResult.CONTINUE;
-    },
-
-    _dragEnd: function() {
-        this._inDrag = false;
-
-        // We do this deferred because drag-end is emitted before dnd.js emits
-        // event/leave events that were suppressed during the drag. If we didn't
-        // defer this, we'd zoom out then immediately zoom in because of the
-        // enter event we received. That would normally be invisible but we
-        // might as well avoid it.
-        Meta.later_add(Meta.LaterType.BEFORE_REDRAW,
-                       Lang.bind(this, this._updateZoom));
+        return false;
     }
 });
 Signals.addSignalMethods(WorkspacesDisplay.prototype);

js/ui/xdndHandler.js

@@ -2,6 +2,7 @@
 
 const Clutter = imports.gi.Clutter;
 const Lang = imports.lang;
+const Main = imports.ui.main;
 const Shell = imports.gi.Shell;
 const Signals = imports.signals;
 const DND = imports.ui.dnd;
@@ -16,18 +17,11 @@ const XdndHandler = new Lang.Class({
 
         // Used as a drag actor in case we don't have a cursor window clone
         this._dummy = new Clutter.Rectangle({ width: 1, height: 1, opacity: 0 });
-        global.stage.add_actor(this._dummy);
+        Main.uiGroup.add_actor(this._dummy);
         Shell.util_set_hidden_from_pick(this._dummy, true);
         this._dummy.hide();
 
-        // Mutter delays the creation of the output window as long
-        // as possible to avoid flicker. In case a plugin wants to
-        // access it directly it has to connect to the stage's show
-        // signal. (see comment in compositor.c:meta_compositor_manage_screen)
-        global.stage.connect('show', function () {
-                                        global.init_xdnd();
-                                        return false;
-                                      });
+        global.init_xdnd();
 
         global.connect('xdnd-enter', Lang.bind(this, this._onEnter));
         global.connect('xdnd-position-changed', Lang.bind(this, this._onPositionChanged));
@@ -74,7 +68,7 @@ const XdndHandler = new Lang.Class({
                                                                    source: cursorWindow});
 
             this._cursorWindowClone = new Clutter.Clone({ source: cursorWindow });
-            global.overlay_group.add_actor(this._cursorWindowClone);
+            Main.uiGroup.add_actor(this._cursorWindowClone);
             Shell.util_set_hidden_from_pick(this._cursorWindowClone, true);
 
             // Make sure that the clone has the same position as the source
@@ -88,7 +82,7 @@ const XdndHandler = new Lang.Class({
     },
 
     _onPositionChanged: function(obj, x, y) {
-        let pickedActor = global.stage.get_actor_at_pos(Clutter.PickMode.ALL, x, y);
+        let pickedActor = global.stage.get_actor_at_pos(Clutter.PickMode.REACTIVE, x, y);
 
         // Make sure that the cursor window is on top
         if (this._cursorWindowClone)

po/POTFILES.in

@@ -1,3 +1,6 @@
+# List of source files containing translatable strings.
+# Please keep this file sorted alphabetically.
+[encoding: UTF-8]
 data/50-gnome-shell-screenshot.xml.in
 data/50-gnome-shell-system.xml.in
 data/gnome-shell.desktop.in.in
@@ -10,6 +13,7 @@ js/gdm/util.js
 js/misc/util.js
 js/ui/appDisplay.js
 js/ui/appFavorites.js
+js/ui/backgroundMenu.js
 js/ui/calendar.js
 js/ui/components/automountManager.js
 js/ui/components/autorunManager.js
@@ -29,6 +33,7 @@ js/ui/lookingGlass.js
 js/ui/main.js
 js/ui/messageTray.js
 js/ui/notificationDaemon.js
+js/ui/overviewControls.js
 js/ui/overview.js
 js/ui/panel.js
 js/ui/popupMenu.js

po/nl.po

@@ -15,8 +15,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: gnome-shell\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2013-02-01 16:59+0100\n"
-"PO-Revision-Date: 2013-02-01 17:00+0100\n"
+"POT-Creation-Date: 2013-02-06 21:53+0100\n"
+"PO-Revision-Date: 2013-02-06 21:53+0100\n"
 "Last-Translator: Wouter Bolsterlee <wbolster@gnome.org>\n"
 "Language-Team: Dutch <vertaling@vrijschrift.org>\n"
 "Language: nl\n"
@@ -407,7 +407,7 @@ msgid "Power"
 msgstr "Uitschakelen"
 
 #: ../js/gdm/powerMenu.js:93 ../js/ui/userMenu.js:679 ../js/ui/userMenu.js:683
-#: ../js/ui/userMenu.js:794
+#: ../js/ui/userMenu.js:799
 msgid "Suspend"
 msgstr "Slaapstand"
 
@@ -416,7 +416,7 @@ msgid "Restart"
 msgstr "Opnieuw opstarten"
 
 #: ../js/gdm/powerMenu.js:103 ../js/ui/userMenu.js:681
-#: ../js/ui/userMenu.js:683 ../js/ui/userMenu.js:793
+#: ../js/ui/userMenu.js:683 ../js/ui/userMenu.js:798
 msgid "Power Off"
 msgstr "Uitschakelen"
 
@@ -623,25 +623,25 @@ msgstr "Deze week"
 msgid "Next week"
 msgstr "Volgende week"
 
-#: ../js/ui/components/automountManager.js:92
+#: ../js/ui/components/automountManager.js:90
 msgid "External drive connected"
 msgstr "Verbinding met externe schijf gemaakt"
 
-#: ../js/ui/components/automountManager.js:103
+#: ../js/ui/components/automountManager.js:101
 msgid "External drive disconnected"
 msgstr "Verbinding met externe schijf verbroken"
 
 # Lelijk, maar KDE gebruikt het ook…
-#: ../js/ui/components/autorunManager.js:295
+#: ../js/ui/components/autorunManager.js:292
 msgid "Removable Devices"
 msgstr "Verwijderbare apparaten"
 
-#: ../js/ui/components/autorunManager.js:594
+#: ../js/ui/components/autorunManager.js:591
 #, c-format
 msgid "Open with %s"
 msgstr "Openen met %s"
 
-#: ../js/ui/components/autorunManager.js:620
+#: ../js/ui/components/autorunManager.js:617
 msgid "Eject"
 msgstr "Uitwerpen"
 
@@ -1014,7 +1014,7 @@ msgid "Open Clocks"
 msgstr "Klok openen"
 
 #: ../js/ui/dateMenu.js:105
-msgid "Date and Time Settings"
+msgid "Date & Time Settings"
 msgstr "Instellingen voor datum en tijd"
 
 #. Translators: This is the date format to use when the calendar popup is
@@ -1200,7 +1200,7 @@ msgstr "Geen berichten"
 msgid "Message Tray"
 msgstr "Berichtenoverzicht"
 
-#: ../js/ui/messageTray.js:2757
+#: ../js/ui/messageTray.js:2759
 msgid "System Information"
 msgstr "Systeeminformatie"
 
@@ -1242,7 +1242,7 @@ msgstr "Afsluiten"
 msgid "Activities"
 msgstr "Activiteiten"
 
-#: ../js/ui/panel.js:976
+#: ../js/ui/panel.js:983
 msgid "Top Bar"
 msgstr "Bovenbalk"
 
@@ -1265,28 +1265,32 @@ msgstr "Sluiten"
 
 #. Translators: This is a time format for a date in
 #. long format
-#: ../js/ui/screenShield.js:114
+#: ../js/ui/screenShield.js:115
 msgid "%A, %B %d"
 msgstr "%A %d %B"
 
-#: ../js/ui/screenShield.js:177
+#: ../js/ui/screenShield.js:178
 #, c-format
 msgid "%d new message"
 msgid_plural "%d new messages"
 msgstr[0] "%d nieuw bericht"
 msgstr[1] "%d nieuwe berichten"
 
-#: ../js/ui/screenShield.js:179
+#: ../js/ui/screenShield.js:180
 #, c-format
 msgid "%d new notification"
 msgid_plural "%d new notifications"
 msgstr[0] "%d nieuwe notificatie"
 msgstr[1] "%d nieuwe notificaties"
 
-#: ../js/ui/screenShield.js:463 ../js/ui/userMenu.js:785
+#: ../js/ui/screenShield.js:464 ../js/ui/userMenu.js:790
 msgid "Lock"
 msgstr "Vergrendelen"
 
+#: ../js/ui/screenShield.js:615
+msgid "GNOME needs to lock the screen"
+msgstr "Gnome moet het scherm vergrendelen"
+
 #: ../js/ui/searchDisplay.js:430
 msgid "Searching..."
 msgstr "Zoeken…"
@@ -1374,7 +1378,7 @@ msgstr "Grote tekst"
 #: ../js/ui/status/bluetooth.js:28 ../js/ui/status/bluetooth.js:32
 #: ../js/ui/status/bluetooth.js:289 ../js/ui/status/bluetooth.js:321
 #: ../js/ui/status/bluetooth.js:357 ../js/ui/status/bluetooth.js:388
-#: ../js/ui/status/network.js:814
+#: ../js/ui/status/network.js:826
 msgid "Bluetooth"
 msgstr "Bluetooth"
 
@@ -1387,7 +1391,7 @@ msgid "Send Files to Device..."
 msgstr "Bestanden naar apparaat sturen…"
 
 #: ../js/ui/status/bluetooth.js:60
-msgid "Set up a New Device..."
+msgid "Set Up a New Device..."
 msgstr "Nieuw apparaat instellen…"
 
 #: ../js/ui/status/bluetooth.js:84
@@ -1408,7 +1412,7 @@ msgid "disconnecting..."
 msgstr "verbinding verbreken…"
 
 #: ../js/ui/status/bluetooth.js:221 ../js/ui/status/network.js:466
-#: ../js/ui/status/network.js:1534
+#: ../js/ui/status/network.js:1546
 msgid "connecting..."
 msgstr "verbinden…"
 
@@ -1424,7 +1428,7 @@ msgstr "Toetsenbordvoorkeuren"
 msgid "Mouse Settings"
 msgstr "Muisvoorkeuren"
 
-#: ../js/ui/status/bluetooth.js:254 ../js/ui/status/volume.js:317
+#: ../js/ui/status/bluetooth.js:254 ../js/ui/status/volume.js:316
 msgid "Sound Settings"
 msgstr "Geluidsvoorkeuren"
 
@@ -1493,8 +1497,8 @@ msgid "Show Keyboard Layout"
 msgstr "Toetsenbordindeling tonen"
 
 #: ../js/ui/status/keyboard.js:373
-msgid "Region and Language Settings"
-msgstr "Instellingen voor taal en regio"
+msgid "Region & Language Settings"
+msgstr "Instellingen voor regio en taal"
 
 #: ../js/ui/status/lockScreenMenu.js:43
 msgid "Volume, network, battery"
@@ -1516,7 +1520,7 @@ msgid "unmanaged"
 msgstr "niet gemanaged"
 
 #. Translators: this is for network connections that require some kind of key or password
-#: ../js/ui/status/network.js:469 ../js/ui/status/network.js:1537
+#: ../js/ui/status/network.js:469 ../js/ui/status/network.js:1549
 msgid "authentication required"
 msgstr "authenticatie nodig"
 
@@ -1537,18 +1541,18 @@ msgstr "kabel niet verbonden"
 msgid "unavailable"
 msgstr "niet beschikbaar"
 
-#: ../js/ui/status/network.js:493 ../js/ui/status/network.js:1539
+#: ../js/ui/status/network.js:493 ../js/ui/status/network.js:1551
 msgid "connection failed"
 msgstr "verbinding mislukt"
 
-#: ../js/ui/status/network.js:552 ../js/ui/status/network.js:1423
-#: ../js/ui/status/network.js:1615
+#: ../js/ui/status/network.js:552 ../js/ui/status/network.js:1435
+#: ../js/ui/status/network.js:1627
 msgid "More..."
 msgstr "Meer…"
 
 #. TRANSLATORS: this is the indication that a connection for another logged in user is active,
 #. and we cannot access its settings (including the name)
-#: ../js/ui/status/network.js:588 ../js/ui/status/network.js:1353
+#: ../js/ui/status/network.js:588 ../js/ui/status/network.js:1365
 msgid "Connected (private)"
 msgstr "Verbonden (persoonlijke verbinding)"
 
@@ -1565,53 +1569,53 @@ msgstr "Automatisch ethernetverbinding"
 msgid "Mobile broadband"
 msgstr "Mobiel breedband"
 
-#: ../js/ui/status/network.js:716
+#: ../js/ui/status/network.js:728
 msgid "Auto broadband"
 msgstr "Automatische breedbandverbinding"
 
-#: ../js/ui/status/network.js:719
+#: ../js/ui/status/network.js:731
 msgid "Auto dial-up"
 msgstr "Automatisch inbellen"
 
 #. TRANSLATORS: this the automatic wireless connection name (including the network name)
-#: ../js/ui/status/network.js:849 ../js/ui/status/network.js:1370
+#: ../js/ui/status/network.js:861 ../js/ui/status/network.js:1382
 #, c-format
 msgid "Auto %s"
 msgstr "%s (automatisch)"
 
-#: ../js/ui/status/network.js:851
+#: ../js/ui/status/network.js:863
 msgid "Auto bluetooth"
 msgstr "Automatische Bluetooth"
 
-#: ../js/ui/status/network.js:1372
+#: ../js/ui/status/network.js:1384
 msgid "Auto wireless"
 msgstr "Automatisch draadloos netwerk"
 
-#: ../js/ui/status/network.js:1665
+#: ../js/ui/status/network.js:1677
 msgid "Enable networking"
 msgstr "Netwerk inschakelen"
 
-#: ../js/ui/status/network.js:1707
+#: ../js/ui/status/network.js:1719
 msgid "Wi-Fi"
 msgstr "Wi-Fi"
 
-#: ../js/ui/status/network.js:1726
+#: ../js/ui/status/network.js:1738
 msgid "Network Settings"
 msgstr "Netwerkinstellingen"
 
-#: ../js/ui/status/network.js:1785
+#: ../js/ui/status/network.js:1797
 msgid "Network Manager"
 msgstr "Netwerk-manager"
 
-#: ../js/ui/status/network.js:1875
+#: ../js/ui/status/network.js:1887
 msgid "Connection failed"
 msgstr "Verbinding mislukt"
 
-#: ../js/ui/status/network.js:1876
+#: ../js/ui/status/network.js:1888
 msgid "Activation of network connection failed"
 msgstr "Activeren van netwerkverbinding mislukt"
 
-#: ../js/ui/status/network.js:2254
+#: ../js/ui/status/network.js:2266
 msgid "Networking is disabled"
 msgstr "Netwerk is uitgeschakeld"
 
@@ -1668,11 +1672,11 @@ msgid "%d%%"
 msgstr "%d%%"
 
 #: ../js/ui/status/power.js:201
-msgid "AC adapter"
+msgid "AC Adapter"
 msgstr "Netstroom"
 
 #: ../js/ui/status/power.js:203
-msgid "Laptop battery"
+msgid "Laptop Battery"
 msgstr "Laptop-accu"
 
 #: ../js/ui/status/power.js:205
@@ -1692,11 +1696,11 @@ msgid "PDA"
 msgstr "PDA"
 
 #: ../js/ui/status/power.js:215
-msgid "Cell phone"
+msgid "Cell Phone"
 msgstr "Mobiele telefoon"
 
 #: ../js/ui/status/power.js:217
-msgid "Media player"
+msgid "Media Player"
 msgstr "Mediaspeler"
 
 #: ../js/ui/status/power.js:219
@@ -1717,11 +1721,11 @@ msgid "Volume changed"
 msgstr "Volume gewijzigd"
 
 #. Translators: This is the label for audio volume
-#: ../js/ui/status/volume.js:250 ../js/ui/status/volume.js:298
+#: ../js/ui/status/volume.js:249 ../js/ui/status/volume.js:297
 msgid "Volume"
 msgstr "Volume"
 
-#: ../js/ui/status/volume.js:259
+#: ../js/ui/status/volume.js:258
 msgid "Microphone"
 msgstr "Microfoon"
 
@@ -1733,55 +1737,55 @@ msgstr "Aanmelden als andere gebruiker"
 msgid "Unlock Window"
 msgstr "Venster voor ontgrendelen"
 
-#: ../js/ui/userMenu.js:178
+#: ../js/ui/userMenu.js:177
 msgid "Available"
 msgstr "Beschikbaar"
 
-#: ../js/ui/userMenu.js:181
+#: ../js/ui/userMenu.js:180
 msgid "Busy"
 msgstr "Bezig"
 
-#: ../js/ui/userMenu.js:184
+#: ../js/ui/userMenu.js:183
 msgid "Invisible"
 msgstr "Onzichtbaar"
 
-#: ../js/ui/userMenu.js:187
+#: ../js/ui/userMenu.js:186
 msgid "Away"
 msgstr "Afwezig"
 
-#: ../js/ui/userMenu.js:190
+#: ../js/ui/userMenu.js:189
 msgid "Idle"
 msgstr "Inactief"
 
-#: ../js/ui/userMenu.js:193
+#: ../js/ui/userMenu.js:192
 msgid "Offline"
 msgstr "Offline"
 
-#: ../js/ui/userMenu.js:759
+#: ../js/ui/userMenu.js:764
 msgid "Notifications"
 msgstr "Notificaties"
 
-#: ../js/ui/userMenu.js:767
+#: ../js/ui/userMenu.js:772
 msgid "Settings"
 msgstr "Voorkeuren"
 
-#: ../js/ui/userMenu.js:775
+#: ../js/ui/userMenu.js:780
 msgid "Switch User"
 msgstr "Gebruiker wisselen"
 
-#: ../js/ui/userMenu.js:780
+#: ../js/ui/userMenu.js:785
 msgid "Log Out"
 msgstr "Afmelden"
 
-#: ../js/ui/userMenu.js:800
+#: ../js/ui/userMenu.js:805
 msgid "Install Updates & Restart"
 msgstr "Updates installeren en opnieuw opstarten"
 
-#: ../js/ui/userMenu.js:818
+#: ../js/ui/userMenu.js:823
 msgid "Your chat status will be set to busy"
 msgstr "De chatstatus zal op ‘bezig’ gezet worden"
 
-#: ../js/ui/userMenu.js:819
+#: ../js/ui/userMenu.js:824
 msgid ""
 "Notifications are now disabled, including chat messages. Your online status "
 "has been adjusted to let others know that you might not see their messages."
@@ -1872,18 +1876,16 @@ msgstr "De wachtwoorden komen niet overeen."
 msgid "Password cannot be blank"
 msgstr "Het wachtwoord mag niet leeg blijven."
 
-#: ../src/shell-mobile-providers.c:85
-msgid "United Kingdom"
-msgstr "Verenigd Koninkrijk"
-
-#: ../src/shell-mobile-providers.c:619
-msgid "Default"
-msgstr "Standaard"
-
 #: ../src/shell-polkit-authentication-agent.c:343
 msgid "Authentication dialog was dismissed by the user"
 msgstr "Authenticatievenster is door de gebruiker afgesloten"
 
+#~ msgid "United Kingdom"
+#~ msgstr "Verenigd Koninkrijk"
+
+#~ msgid "Default"
+#~ msgstr "Standaard"
+
 #~ msgid "APPLICATIONS"
 #~ msgstr "TOEPASSINGEN"
 

po/uk.po

@@ -1372,7 +1372,7 @@ msgstr "Показувати розкладку клавіатури"
 
 #: ../js/ui/status/keyboard.js:233
 msgid "Region and Language Settings"
-msgstr "Параметри дати і часу"
+msgstr "Параметри  регіону і мови"
 
 #: ../js/ui/status/lockScreenMenu.js:18
 msgid "Volume, network, battery"

src/Makefile.am

@@ -145,7 +145,6 @@ libgnome_shell_la_SOURCES =		\
 	shell-app-system-private.h	\
 	shell-embedded-window-private.h	\
 	shell-global-private.h		\
-	shell-jsapi-compat-private.h	\
 	shell-window-tracker-private.h	\
 	shell-wm-private.h		\
 	gnome-shell-plugin.c		\

src/gnome-shell-plugin.c

@@ -28,10 +28,10 @@
 #include <stdlib.h>
 #include <string.h>
 
+#define CLUTTER_ENABLE_EXPERIMENTAL_API
+#define COGL_ENABLE_EXPERIMENTAL_API
 #include <clutter/clutter.h>
 #include <clutter/x11/clutter-x11.h>
-#include <GL/glx.h>
-#include <GL/glxext.h>
 #include <gjs/gjs.h>
 #include <meta/display.h>
 #include <meta/meta-plugin.h>
@@ -99,6 +99,7 @@ struct _GnomeShellPlugin
   int glx_error_base;
   int glx_event_base;
   guint have_swap_event : 1;
+  CoglContext *cogl_context;
 
   ShellGlobal *global;
 };
@@ -139,30 +140,59 @@ gnome_shell_plugin_init (GnomeShellPlugin *shell_plugin)
 {
 }
 
-static void
-gnome_shell_plugin_start (MetaPlugin *plugin)
+static gboolean
+gnome_shell_plugin_has_swap_event (GnomeShellPlugin *shell_plugin)
 {
-  GnomeShellPlugin *shell_plugin = GNOME_SHELL_PLUGIN (plugin);
+  MetaPlugin *plugin = META_PLUGIN (shell_plugin);
+  CoglDisplay *cogl_display =
+    cogl_context_get_display (shell_plugin->cogl_context);
+  CoglRenderer *renderer = cogl_display_get_renderer (cogl_display);
+  const char * (* query_extensions_string) (Display *dpy, int screen);
+  Bool (* query_extension) (Display *dpy, int *error, int *event);
   MetaScreen *screen;
   MetaDisplay *display;
   Display *xdisplay;
-  GError *error = NULL;
-  int status;
   const char *glx_extensions;
-  GjsContext *gjs_context;
+
+  /* We will only get swap events if Cogl is using GLX */
+  if (cogl_renderer_get_winsys_id (renderer) != COGL_WINSYS_ID_GLX)
+    return FALSE;
 
   screen = meta_plugin_get_screen (plugin);
   display = meta_screen_get_display (screen);
 
   xdisplay = meta_display_get_xdisplay (display);
 
-  glXQueryExtension (xdisplay,
-                     &shell_plugin->glx_error_base,
-                     &shell_plugin->glx_event_base);
+  query_extensions_string =
+    (void *) cogl_get_proc_address ("glXQueryExtensionsString");
+  query_extension =
+    (void *) cogl_get_proc_address ("glXQueryExtension");
 
-  glx_extensions = glXQueryExtensionsString (xdisplay,
-                                             meta_screen_get_screen_number (screen));
-  shell_plugin->have_swap_event = strstr (glx_extensions, "GLX_INTEL_swap_event") != NULL;
+  query_extension (xdisplay,
+                   &shell_plugin->glx_error_base,
+                   &shell_plugin->glx_event_base);
+
+  glx_extensions =
+    query_extensions_string (xdisplay,
+                             meta_screen_get_screen_number (screen));
+
+  return strstr (glx_extensions, "GLX_INTEL_swap_event") != NULL;
+}
+
+static void
+gnome_shell_plugin_start (MetaPlugin *plugin)
+{
+  GnomeShellPlugin *shell_plugin = GNOME_SHELL_PLUGIN (plugin);
+  GError *error = NULL;
+  int status;
+  GjsContext *gjs_context;
+  ClutterBackend *backend;
+
+  backend = clutter_get_default_backend ();
+  shell_plugin->cogl_context = clutter_backend_get_cogl_context (backend);
+
+  shell_plugin->have_swap_event =
+    gnome_shell_plugin_has_swap_event (shell_plugin);
 
   shell_perf_log_define_event (shell_perf_log_get_default (),
                                "glx.swapComplete",