brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

layout: Add sessionGroup / systemGroup to better-define layers

Browse Source 
In order to build a better transition animation from the lock screen, we
need to split the world into layers, as per this reference:

https://raw.github.com/gnome-design-team/gnome-mockups/master/system-lock-login-boot/system-layers2.png

Everything that pertains to the user's session is in the "session group",
which includes the window group, overview, message tray (for now),
keyboard, OSDs, menus, etc.

For implementation sake, we did not match this mockup exactly. The new layers
look like this, from top to bottom:

 * Stage
   * Magnifier (clones the uiGroup)
   * uiGroup
     * overlayGroup
       * menuGroup
     * panelGroup
     * screenShieldGroup
     * sessionGroup
       * top_window_group
       * other boxes (trayBox, keyboardBox, etc.)
       * other groups (osdGroup, switcherPopupGroup, etc.)
       * overviewGroup
       * window_group
     * systemGroup

The "session startup" animation now only zooms in the sessionGroup.

The panel is now outside the session, as it needs to sit above the screen
shield. This also means that it's not zoomed in as part of startup. I think
this is OK.

This also means that the lightboxes that the screen shield uses to fade out
the screen have to go in a new group, above the panel. This is known as the
overlayGroup, which has no relation to the old mutter group of the same name.

We also change the screen shield to put the lockDialogGroup in the system
group, and put the lockScreenGroup in the screenShieldGroup, which means
that the layer stacking is correct. Note that we don't hide the session
group in the lock screen yet, which is something I want to do.

Since not a lot of items need to be in the uiGroup anymore, we've removed
the Main.uiGroup fallback; others should use sessionGroup instead, when
appropriate.
This commit is contained in:
Jasper St. Pierre 2014-01-13 15:56:21 -05:00
parent 71670bad3b
commit cbb88ffdbb
10 changed files with 95 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
js/ui/dnd.js
View File

@ -46,7 +46,7 @@ let dragMonitors = [];
function _getEventHandlerActor() {
if (!eventHandlerActor) {
eventHandlerActor = new Clutter.Actor({ width: 0, height: 0 });
Main.uiGroup.add_actor(eventHandlerActor);
Main.layoutManager.sessionGroup.add_actor(eventHandlerActor);
// We connect to 'event' rather than 'captured-event' because the capturing phase doesn't happen
// when you've grabbed the pointer.
eventHandlerActor.connect('event',
@ -236,7 +236,7 @@ const _Draggable = new Lang.Class({
if (this.actor._delegate && this.actor._delegate.getDragActor) {
this._dragActor = this.actor._delegate.getDragActor();
Main.uiGroup.add_child(this._dragActor);
Main.layoutManager.sessionGroup.add_child(this._dragActor);
this._dragActor.raise_top();
Shell.util_set_hidden_from_pick(this._dragActor, true);
@ -276,7 +276,7 @@ const _Draggable = new Lang.Class({
this._dragOrigScale = this._dragActor.scale_x;
// Set the actor's scale such that it will keep the same
// transformed size when it's reparented to the uiGroup
// transformed size when it's reparented to the sessionGroup
let [scaledWidth, scaledHeight] = this.actor.get_transformed_size();
this._dragActor.set_scale(scaledWidth / this.actor.width,
scaledHeight / this.actor.height);
@ -286,7 +286,7 @@ const _Draggable = new Lang.Class({
this._dragOffsetY = actorStageY - this._dragStartY;
this._dragOrigParent.remove_actor(this._dragActor);
Main.uiGroup.add_child(this._dragActor);
Main.layoutManager.sessionGroup.add_child(this._dragActor);
this._dragActor.raise_top();
Shell.util_set_hidden_from_pick(this._dragActor, true);
}
@ -448,7 +448,7 @@ const _Draggable = new Lang.Class({
event.get_time())) {
// If it accepted the drop without taking the actor,
// handle it ourselves.
if (this._dragActor.get_parent() == Main.uiGroup) {
if (this._dragActor.get_parent() == Main.layoutManager.sessionGroup) {
if (this._restoreOnSuccess) {
this._restoreDragActor(event.get_time());
return true;
@ -557,7 +557,7 @@ const _Draggable = new Lang.Class({
_onAnimationComplete : function (dragActor, eventTime) {
if (this._dragOrigParent) {
Main.uiGroup.remove_child(this._dragActor);
Main.layoutManager.sessionGroup.remove_child(this._dragActor);
this._dragOrigParent.add_actor(this._dragActor);
dragActor.set_scale(this._dragOrigScale, this._dragOrigScale);
dragActor.set_position(this._dragOrigX, this._dragOrigY);

101
js/ui/layout.js
View File

@ -184,29 +184,27 @@ const LayoutManager = new Lang.Class({
let height = global.stage.height;
[alloc.min_size, alloc.natural_size] = [height, height];
});
global.stage.add_child(this.uiGroup);
this.systemGroup = new St.Widget({ name: 'systemGroup',
layout_manager: new Clutter.BinLayout() });
this.uiGroup.add_actor(this.systemGroup);
this.sessionGroup = new St.Widget({ name: 'sessionGroup' });
this.uiGroup.add_child(this.sessionGroup);
global.stage.remove_actor(global.window_group);
this.uiGroup.add_actor(global.window_group);
global.stage.add_child(this.uiGroup);
this.sessionGroup.add_actor(global.window_group);
this.overviewGroup = new St.Widget({ name: 'overviewGroup',
visible: false });
this.addChrome(this.overviewGroup);
this.screenShieldGroup = new St.Widget({ name: 'screenShieldGroup',
visible: false,
clip_to_allocation: true,
layout_manager: new Clutter.BinLayout(),
});
this.addChrome(this.screenShieldGroup);
this.panelBox = new St.BoxLayout({ name: 'panelBox',
vertical: true });
this.addChrome(this.panelBox, { affectsStruts: true,
trackFullscreen: true });
this.panelBox.connect('allocation-changed',
Lang.bind(this, this._panelBoxChanged));
this.uiGroup.add_child(this.screenShieldGroup);
this.trayBox = new St.Widget({ name: 'trayBox',
layout_manager: new Clutter.BinLayout() });
@ -219,25 +217,39 @@ const LayoutManager = new Lang.Class({
this.addChrome(this.keyboardBox);
this._keyboardHeightNotifyId = 0;
this.menuGroup = new St.Widget();
this.uiGroup.add_actor(this.menuGroup);
this.osdGroup = new St.Widget();
this.uiGroup.add_actor(this.osdGroup);
this.sessionGroup.add_child(this.osdGroup);
this.switcherPopupGroup = new St.Widget();
this.uiGroup.add_actor(this.switcherPopupGroup);
this.sessionGroup.add_child(this.switcherPopupGroup);
this.dialogGroup = new St.Widget();
this.uiGroup.add_actor(this.dialogGroup);
this.sessionGroup.add_child(this.dialogGroup);
// A dummy actor that tracks the mouse or text cursor, based on the
// position set in setDummyCursorPosition.
this.dummyCursor = new St.Widget({ width: 0, height: 0 });
this.uiGroup.add_actor(this.dummyCursor);
this.uiGroup.add_child(this.dummyCursor);
global.stage.remove_actor(global.top_window_group);
this.uiGroup.add_actor(global.top_window_group);
// The panel group isn't in the session, as it needs to go above the screen
// shield, and it isn't animated in the login animation.
this.panelGroup = new St.Widget({ name: 'panelGroup' });
this.uiGroup.add_child(this.panelGroup);
this._trackActor(this.panelGroup, { affectsStruts: true,
trackFullscreen: true });
this.panelGroup.connect('allocation-changed',
Lang.bind(this, this._panelGroupChanged));
this.overlayGroup = new St.Widget({ name: 'overlayGroup' });
this.uiGroup.add_child(this.overlayGroup);
this.menuGroup = new St.Widget();
this.overlayGroup.add_child(this.menuGroup);
this._topSessionGroup = new St.Widget();
this.overlayGroup.add_child(this._topSessionGroup);
global.stage.remove_child(global.top_window_group);
this._topSessionGroup.add_child(global.top_window_group);
this._backgroundGroup = new Meta.BackgroundGroup();
global.window_group.add_child(this._backgroundGroup);
@ -318,7 +330,7 @@ const LayoutManager = new Lang.Class({
});
this.hotCorners = [];
let size = this.panelBox.height;
let size = this.panelGroup.height;
// build new hot corners
for (let i = 0; i < this.monitors.length; i++) {
@ -418,11 +430,11 @@ const LayoutManager = new Lang.Class({
},
_updateBoxes: function() {
this.screenShieldGroup.set_position(0, 0);
this.screenShieldGroup.set_size(global.screen_width, global.screen_height);
this.systemGroup.set_position(0, 0);
this.systemGroup.set_size(global.screen_width, global.screen_height);
this.panelBox.set_position(this.primaryMonitor.x, this.primaryMonitor.y);
this.panelBox.set_size(this.primaryMonitor.width, -1);
this.panelGroup.set_position(this.primaryMonitor.x, this.primaryMonitor.y);
this.panelGroup.set_size(this.primaryMonitor.width, -1);
if (this.keyboardIndex < 0)
this.keyboardIndex = this.primaryIndex;
@ -432,10 +444,10 @@ const LayoutManager = new Lang.Class({
this.trayBox.set_size(this.bottomMonitor.width, -1);
},
_panelBoxChanged: function() {
_panelGroupChanged: function() {
this._updatePanelBarrier();
let size = this.panelBox.height;
let size = this.panelGroup.height;
this.hotCorners.forEach(function(corner) {
if (corner)
corner.setBarrierSize(size);
@ -448,12 +460,12 @@ const LayoutManager = new Lang.Class({
this._rightPanelBarrier = null;
}
if (this.panelBox.height) {
if (this.panelGroup.height) {
let primary = this.primaryMonitor;
this._rightPanelBarrier = new Meta.Barrier({ display: global.display,
x1: primary.x + primary.width, y1: primary.y,
x2: primary.x + primary.width, y2: primary.y + this.panelBox.height,
x2: primary.x + primary.width, y2: primary.y + this.panelGroup.height,
directions: Meta.BarrierDirection.NEGATIVE_X });
}
},
@ -563,8 +575,7 @@ const LayoutManager = new Lang.Class({
this._systemBackground = new Background.SystemBackground();
this._systemBackground.actor.hide();
global.stage.insert_child_below(this._systemBackground.actor, null);
this.systemGroup.add_child(this._systemBackground.actor, null);
let constraint = new Clutter.BindConstraint({ source: global.stage,
coordinate: Clutter.BindCoordinate.ALL });
this._systemBackground.actor.add_constraint(constraint);
@ -607,7 +618,7 @@ const LayoutManager = new Lang.Class({
this.addChrome(this._coverPane);
if (Main.sessionMode.isGreeter) {
this.panelBox.translation_y = -this.panelBox.height;
this.panelGroup.translation_y = -this.panelGroup.height;
} else {
this._updateBackgrounds();
@ -622,10 +633,10 @@ const LayoutManager = new Lang.Class({
let x = monitor.x + monitor.width / 2.0;
let y = monitor.y + monitor.height / 2.0;
this.uiGroup.set_pivot_point(x / global.screen_width,
this.sessionGroup.set_pivot_point(x / global.screen_width,
y / global.screen_height);
this.uiGroup.scale_x = this.uiGroup.scale_y = 0.75;
this.uiGroup.opacity = 0;
this.sessionGroup.scale_x = this.sessionGroup.scale_y = 0.75;
this.sessionGroup.opacity = 0;
global.window_group.set_clip(monitor.x, monitor.y, monitor.width, monitor.height);
}
@ -651,7 +662,7 @@ const LayoutManager = new Lang.Class({
},
_startupAnimationGreeter: function() {
Tweener.addTween(this.panelBox,
Tweener.addTween(this.panelGroup,
{ translation_y: 0,
time: STARTUP_ANIMATION_TIME,
transition: 'easeOutQuad',
@ -660,7 +671,7 @@ const LayoutManager = new Lang.Class({
},
_startupAnimationSession: function() {
Tweener.addTween(this.uiGroup,
Tweener.addTween(this.sessionGroup,
{ scale_x: 1,
scale_y: 1,
opacity: 255,
@ -770,9 +781,9 @@ const LayoutManager = new Lang.Class({
// monitor (it will be hidden whenever a fullscreen window is visible,
// and shown otherwise)
addChrome: function(actor, params) {
this.uiGroup.add_actor(actor);
if (this.uiGroup.contains(global.top_window_group))
this.uiGroup.set_child_below_sibling(actor, global.top_window_group);
this.sessionGroup.add_actor(actor);
if (this.sessionGroup.contains(global.top_window_group))
this.sessionGroup.set_child_below_sibling(actor, global.top_window_group);
this._trackActor(actor, params);
},
@ -823,7 +834,7 @@ const LayoutManager = new Lang.Class({
//
// Removes @actor from the chrome
removeChrome: function(actor) {
this.uiGroup.remove_actor(actor);
this.sessionGroup.remove_actor(actor);
this._untrackActor(actor);
},
@ -1092,9 +1103,9 @@ const HotCorner = new Lang.Class({
this._ripple2 = new St.BoxLayout({ style_class: 'ripple-box', opacity: 0, visible: false });
this._ripple3 = new St.BoxLayout({ style_class: 'ripple-box', opacity: 0, visible: false });
layoutManager.uiGroup.add_actor(this._ripple1);
layoutManager.uiGroup.add_actor(this._ripple2);
layoutManager.uiGroup.add_actor(this._ripple3);
layoutManager.sessionGroup.add_actor(this._ripple1);
layoutManager.sessionGroup.add_actor(this._ripple2);
layoutManager.sessionGroup.add_actor(this._ripple3);
},
setBarrierSize: function(size) {

12
js/ui/lookingGlass.js
View File

@ -503,7 +503,7 @@ const Inspector = new Lang.Class({
let container = new Shell.GenericContainer({ width: 0,
height: 0 });
container.connect('allocate', Lang.bind(this, this._allocate));
Main.uiGroup.add_actor(container);
Main.layoutManager.sessionGroup.add_actor(container);
let eventHandler = new St.BoxLayout({ name: 'LookingGlassDialog',
vertical: false,
@ -801,16 +801,14 @@ const LookingGlass = new Lang.Class({
this._updateFont();
// We want it to appear to slide out from underneath the panel
Main.uiGroup.add_actor(this.actor);
Main.uiGroup.set_child_below_sibling(this.actor,
Main.layoutManager.panelBox);
Main.layoutManager.panelBox.connect('allocation-changed',
Main.layoutManager.sessionGroup.add_actor(this.actor);
Main.layoutManager.panelGroup.connect('allocation-changed',
Lang.bind(this, this._queueResize));
Main.layoutManager.keyboardBox.connect('allocation-changed',
Lang.bind(this, this._queueResize));
this._objInspector = new ObjInspector(this);
Main.uiGroup.add_actor(this._objInspector.actor);
Main.layoutManager.sessionGroup.add_actor(this._objInspector.actor);
this._objInspector.actor.hide();
let toolbar = new St.BoxLayout({ name: 'Toolbar' });
@ -1037,7 +1035,7 @@ const LookingGlass = new Lang.Class({
let availableHeight = primary.height - Main.layoutManager.keyboardBox.height;
let myHeight = Math.min(primary.height * 0.7, availableHeight * 0.9);
this.actor.x = primary.x + (primary.width - myWidth) / 2;
this._hiddenY = primary.y + Main.layoutManager.panelBox.height - myHeight - 4; // -4 to hide the top corners
this._hiddenY = primary.y + Main.layoutManager.panelGroup.height - myHeight - 4; // -4 to hide the top corners
this._targetY = this._hiddenY + myHeight;
this.actor.y = this._hiddenY;
this.actor.width = myWidth;

2
js/ui/magnifier.js
View File

@ -1184,7 +1184,7 @@ const ZoomRegion = new Lang.Class({
// Clone the group that contains all of UI on the screen. This is the
// chrome, the windows, etc.
this._uiGroupClone = new Clutter.Clone({ source: Main.uiGroup });
this._uiGroupClone = new Clutter.Clone({ source: Main.layoutManager.uiGroup });
mainGroup.add_actor(this._uiGroupClone);
// Add either the given mouseSourceActor to the ZoomRegion, or a clone of

6
js/ui/main.js
View File

@ -64,7 +64,6 @@ let screencastService = null;
let modalCount = 0;
let keybindingMode = Shell.KeyBindingMode.NONE;
let modalActorFocusStack = [];
let uiGroup = null;
let magnifier = null;
let xdndHandler = null;
let keyboard = null;
@ -150,11 +149,6 @@ function _initializeUI() {
// 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;
screencastService = new Screencast.ScreencastService();
xdndHandler = new XdndHandler.XdndHandler();
ctrlAltTabManager = new CtrlAltTab.CtrlAltTabManager();

2
js/ui/messageTray.js
View File

@ -2512,7 +2512,7 @@ const MessageTray = new Lang.Class({
let cloneSource = Main.overview.visible ? Main.layoutManager.overviewGroup : global.window_group;
this._desktopClone = new Clutter.Clone({ source: cloneSource,
clip: new Clutter.Geometry(this._bottomMonitorGeometry) });
Main.uiGroup.insert_child_above(this._desktopClone, cloneSource);
Main.layoutManager.sessionGroup.insert_child_above(this._desktopClone, cloneSource);
this._desktopClone.x = 0;
this._desktopClone.y = 0;
this._desktopClone.show();

2
js/ui/panel.js
View File

@ -901,7 +901,7 @@ const Panel = new Lang.Class({
this.actor.remove_style_pseudo_class('overview');
}));
Main.layoutManager.panelBox.add(this.actor);
Main.layoutManager.panelGroup.add_child(this.actor);
Main.ctrlAltTabManager.addGroup(this.actor, _("Top Bar"), 'emblem-system-symbolic',
{ sortGroup: CtrlAltTab.SortGroup.TOP });

2
js/ui/panelMenu.js
View File

@ -130,7 +130,7 @@ const Button = new Lang.Class({
this.menu.connect('open-state-changed', Lang.bind(this, this._onOpenStateChanged));
this.menu.actor.connect('key-press-event', Lang.bind(this, this._onMenuKeyPress));
Main.layoutManager.menuGroup.add_actor(this.menu.actor);
Main.layoutManager.menuGroup.add_child(this.menu.actor);
this.menu.actor.hide();
}
},

32
js/ui/screenShield.js
View File

@ -456,8 +456,6 @@ const ScreenShield = new Lang.Class({
Name: 'ScreenShield',
_init: function() {
this.actor = Main.layoutManager.screenShieldGroup;
this._lockScreenState = MessageTray.State.HIDDEN;
this._lockScreenGroup = new St.Widget({ x_expand: true,
y_expand: true,
@ -466,6 +464,7 @@ const ScreenShield = new Lang.Class({
name: 'lockScreenGroup',
visible: false,
});
this._lockScreenGroup.connect('key-press-event',
Lang.bind(this, this._onLockScreenKeyPress));
this._lockScreenGroup.connect('scroll-event',
@ -516,10 +515,9 @@ const ScreenShield = new Lang.Class({
reactive: true,
pivot_point: new Clutter.Point({ x: 0.5, y: 0.5 }),
name: 'lockDialogGroup' });
Main.layoutManager.systemGroup.add_child(this._lockDialogGroup);
this.actor.add_actor(this._lockDialogGroup);
this.actor.add_actor(this._lockScreenGroup);
Main.layoutManager.screenShieldGroup.add_child(this._lockScreenGroup);
this._presence = new GnomeSession.Presence(Lang.bind(this, function(proxy, error) {
if (error) {
logError(error, 'Error while reading gnome-session presence');
@ -577,19 +575,27 @@ const ScreenShield = new Lang.Class({
// The "long" lightbox is used for the longer (20 seconds) fade from session
// to idle status, the "short" is used for quickly fading to black when locking
// manually
this._longLightbox = new Lightbox.Lightbox(Main.uiGroup,
this._longLightbox = new Lightbox.Lightbox(Main.layoutManager.overlayGroup,
{ inhibitEvents: true,
fadeFactor: 1 });
this._longLightbox.connect('shown', Lang.bind(this, this._onLongLightboxShown));
this._shortLightbox = new Lightbox.Lightbox(Main.uiGroup,
this._shortLightbox = new Lightbox.Lightbox(Main.layoutManager.overlayGroup,
{ inhibitEvents: true,
fadeFactor: 1 });
this._shortLightbox.connect('shown', Lang.bind(this, this._onShortLightboxShown));
Main.layoutManager.connect('monitors-changed', Lang.bind(this, this._monitorsChanged));
this._monitorsChanged();
this.idleMonitor = Meta.IdleMonitor.get_core();
this._cursorTracker = Meta.CursorTracker.get_for_screen(global.screen);
},
_monitorsChanged: function() {
this._longLightbox.actor.set_size(global.screen_width, global.screen_height);
this._shortLightbox.actor.set_size(global.screen_width, global.screen_height);
},
_createBackground: function(monitorIndex) {
let monitor = Main.layoutManager.monitors[monitorIndex];
let widget = new St.Widget({ style_class: 'screen-shield-background',
@ -647,13 +653,13 @@ const ScreenShield = new Lang.Class({
if (this._isModal)
return true;
this._isModal = Main.pushModal(this.actor, { keybindingMode: Shell.KeyBindingMode.LOCK_SCREEN });
this._isModal = Main.pushModal(this._lockDialogGroup, { 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,
this._isModal = Main.pushModal(this._lockDialogGroup, { options: Meta.ModalOptions.POINTER_ALREADY_GRABBED,
keybindingMode: Shell.KeyBindingMode.LOCK_SCREEN });
return this._isModal;
},
@ -912,7 +918,7 @@ const ScreenShield = new Lang.Class({
return false;
}));
this.actor.show();
this._lockDialogGroup.show();
this._isGreeter = Main.sessionMode.isGreeter;
this._isLocked = true;
if (this._ensureUnlockDialog(true, true))
@ -1224,7 +1230,7 @@ const ScreenShield = new Lang.Class({
this._dialog.popModal();
if (this._isModal) {
Main.popModal(this.actor);
Main.popModal(this._lockDialogGroup);
this._isModal = false;
}
@ -1246,7 +1252,7 @@ const ScreenShield = new Lang.Class({
this._longLightbox.hide();
this._shortLightbox.hide();
this.actor.hide();
this._lockScreenGroup.hide();
if (this._becameActiveId != 0) {
this.idleMonitor.remove_watch(this._becameActiveId);
@ -1270,7 +1276,7 @@ const ScreenShield = new Lang.Class({
if (this._activationTime == 0)
this._activationTime = GLib.get_monotonic_time();
this.actor.show();
this._lockScreenGroup.show();
if (Main.sessionMode.currentMode != 'unlock-dialog' &&
Main.sessionMode.currentMode != 'lock-screen') {

4
js/ui/xdndHandler.js
View File

@ -18,7 +18,7 @@ const XdndHandler = new Lang.Class({
// Used as a drag actor in case we don't have a cursor window clone
this._dummy = new Clutter.Actor({ width: 1, height: 1, opacity: 0 });
Main.uiGroup.add_actor(this._dummy);
Main.layoutManager.sessionGroup.add_actor(this._dummy);
this._dummy.hide();
if (!Meta.is_wayland_compositor())
@ -69,7 +69,7 @@ const XdndHandler = new Lang.Class({
source: cursorWindow});
this._cursorWindowClone = new Clutter.Clone({ source: cursorWindow });
Main.uiGroup.add_actor(this._cursorWindowClone);
Main.layoutManager.sessionGroup.add_actor(this._cursorWindowClone);
// Make sure that the clone has the same position as the source
this._cursorWindowClone.add_constraint(constraint_position);