New workspace switcher popup

Replace the current workspace switcher popup (which is still the old metacity popup), with a clutter based one, which fits better into the overall shell design.

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

js/ui/windowManager.js

@@ -7,6 +7,7 @@ const Meta = imports.gi.Meta;
 const Shell = imports.gi.Shell;
 
 const AltTab = imports.ui.altTab;
+const WorkspaceSwitcherPopup = imports.ui.workspaceSwitcherPopup;
 const Main = imports.ui.main;
 const Tweener = imports.ui.tweener;
 
@@ -42,6 +43,17 @@ WindowManager.prototype = {
 
         shellwm.takeover_keybinding('switch_windows');
         shellwm.connect('keybinding::switch_windows', Lang.bind(this, this._startAppSwitcher));
+
+        this._workspaceSwitcherPopup = null;
+        shellwm.takeover_keybinding('switch_to_workspace_left');
+        shellwm.takeover_keybinding('switch_to_workspace_right');
+        shellwm.takeover_keybinding('switch_to_workspace_up');
+        shellwm.takeover_keybinding('switch_to_workspace_down');
+        shellwm.connect('keybinding::switch_to_workspace_left', Lang.bind(this, this._showWorkspaceSwitcher));
+        shellwm.connect('keybinding::switch_to_workspace_right', Lang.bind(this, this._showWorkspaceSwitcher));
+        shellwm.connect('keybinding::switch_to_workspace_up', Lang.bind(this, this._showWorkspaceSwitcher));
+        shellwm.connect('keybinding::switch_to_workspace_down', Lang.bind(this, this._showWorkspaceSwitcher));
+
     },
 
     _shouldAnimate : function(actor) {
@@ -277,9 +289,45 @@ WindowManager.prototype = {
     },
 
     _startAppSwitcher : function(shellwm, binding, window, backwards) {
+        /* prevent a corner case where both popups show up at once */
+        if (this._workspaceSwitcherPopup != null)
+            this._workspaceSwitcherPopup.actor.hide();
+
         let tabPopup = new AltTab.AltTabPopup();
 
         if (!tabPopup.show(backwards))
             tabPopup.destroy();
+    },
+
+    _showWorkspaceSwitcher : function(shellwm, binding, window, backwards) {
+        /* We don't support this kind of layout */
+        if (binding == "switch_to_workspace_up" || binding == "switch_to_workspace_down")
+            return;
+
+        if (global.screen.n_workspaces == 1)
+            return;
+
+        if (this._workspaceSwitcherPopup == null)
+            this._workspaceSwitcherPopup = new WorkspaceSwitcherPopup.WorkspaceSwitcherPopup();
+
+        let activeWorkspaceIndex = global.screen.get_active_workspace_index();
+
+        if (binding == "switch_to_workspace_left") {
+            if (activeWorkspaceIndex > 0) {
+                global.screen.get_workspace_by_index(activeWorkspaceIndex - 1).activate(global.get_current_time());
+                this._workspaceSwitcherPopup.display(WorkspaceSwitcherPopup.LEFT, activeWorkspaceIndex - 1);
+            }
+            else
+                this._workspaceSwitcherPopup.display(WorkspaceSwitcherPopup.LEFT, activeWorkspaceIndex);
+        }
+
+        if (binding == "switch_to_workspace_right") {
+            if (activeWorkspaceIndex <  global.screen.n_workspaces - 1) {
+                global.screen.get_workspace_by_index(activeWorkspaceIndex + 1).activate(global.get_current_time());
+                this._workspaceSwitcherPopup.display(WorkspaceSwitcherPopup.RIGHT, activeWorkspaceIndex + 1);
+            }
+            else
+                this._workspaceSwitcherPopup.display(WorkspaceSwitcherPopup.RIGHT, activeWorkspaceIndex);
+        }
     }
 };

js/ui/workspaceSwitcherPopup.js

@@ -0,0 +1,100 @@
+/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
+
+const Clutter = imports.gi.Clutter;
+const Lang = imports.lang;
+const Mainloop = imports.mainloop;
+const Shell = imports.gi.Shell;
+const St = imports.gi.St;
+
+const Tweener = imports.ui.tweener;
+
+const ANIMATION_TIME = 0.075;
+const DISPLAY_TIMEOUT = 600;
+
+const LEFT = -1;
+const RIGHT = 1;
+
+function WorkspaceSwitcherPopup() {
+    this._init();
+}
+
+WorkspaceSwitcherPopup.prototype = {
+    _init : function() {
+        this.actor = new Clutter.Group({ reactive: true,
+                                         x: 0,
+                                         y: 0,
+                                         width: global.screen_width,
+                                         height: global.screen_height });
+        global.stage.add_actor(this.actor);
+
+        this._container = new St.BoxLayout({ style_class: "workspace-switcher-container" });
+        this._list = new St.BoxLayout({ style_class: "workspace-switcher" });
+
+        this._redraw();
+
+        this._container.add(this._list);
+        this.actor.add_actor(this._container);
+
+        this._position();
+
+        this.actor.show();
+        this._timeoutId = Mainloop.timeout_add(DISPLAY_TIMEOUT, Lang.bind(this, this._onTimeout));
+    },
+
+    _redraw : function(direction, activeWorkspaceIndex) {
+        this._list.destroy_children();
+
+        for (let i = 0; i < global.screen.n_workspaces; i++) {
+            let indicator = null;
+
+           if (i == activeWorkspaceIndex && direction == LEFT)
+               indicator = new St.Bin({ style_class: 'ws-switcher-active-left' });
+           else if(i == activeWorkspaceIndex && direction == RIGHT)
+               indicator = new St.Bin({ style_class: 'ws-switcher-active-right' });
+           else
+               indicator = new St.Bin({ style_class: 'ws-switcher-box' });
+
+           this._list.add(indicator);
+
+           if (i < global.screen.n_workspaces - 1) {
+               let spacer = new St.Bin({ style_class: 'ws-switcher-spacer' });
+               this._list.add(spacer);
+           }
+
+        }
+    },
+
+    _position: function() {
+        let focus = global.get_focus_monitor();
+        this._container.x = focus.x + Math.floor((focus.width - this._container.width) / 2);
+        this._container.y = focus.y + Math.floor((focus.height - this._container.height) / 2);
+    },
+
+    _show : function() {
+        Tweener.addTween(this._container, { opacity: 255,
+                                            time: ANIMATION_TIME,
+                                            transition: "easeOutQuad"
+                                           });
+        this._position();
+        this.actor.show();
+    },
+
+    display : function(direction, activeWorkspaceIndex) {
+        this._redraw(direction, activeWorkspaceIndex);
+        if (this._timeoutId != 0)
+            Mainloop.source_remove(this._timeoutId);
+        this._timeoutId = Mainloop.timeout_add(DISPLAY_TIMEOUT, Lang.bind(this, this._onTimeout));
+        this._show();
+    },
+
+    _onTimeout : function() {
+        Mainloop.source_remove(this._timeoutId);
+        this._timeoutId = 0;
+        Tweener.addTween(this._container, { opacity: 0.0,
+                                            time: ANIMATION_TIME,
+                                            transition: "easeOutQuad",
+                                            onComplete: function() { this.actor.hide() },
+                                            onCompleteScope: this
+                                           });
+    }
+};