gnome-shell/js/ui/popupMenu.js
Florian Müllner 6bcb4f310f popupMenu: Hide ornament by default
We have always defaults to an empty ornament, so that menu items
are always aligned, even when radio items are used.

However radio items are fairly rare, so most of the time we end
up with an extra margin with no purpose. The design team now
prefers radio items to only align with each other, so that regular
items get the expected margin.

Change the defaults accordingly.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2843>
2023-08-01 17:32:53 +00:00

1397 lines
40 KiB
JavaScript

// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
/* exported PopupMenuItem, PopupSeparatorMenuItem, Switch, PopupSwitchMenuItem,
PopupImageMenuItem, PopupMenu, PopupDummyMenu, PopupSubMenu,
PopupMenuSection, PopupSubMenuMenuItem, PopupMenuManager */
const Atk = imports.gi.Atk;
const Clutter = imports.gi.Clutter;
const Gio = imports.gi.Gio;
const GObject = imports.gi.GObject;
const Graphene = imports.gi.Graphene;
const Shell = imports.gi.Shell;
const St = imports.gi.St;
const Signals = imports.misc.signals;
const BoxPointer = imports.ui.boxpointer;
const Main = imports.ui.main;
const Params = imports.misc.params;
var Ornament = {
NONE: 0,
DOT: 1,
CHECK: 2,
HIDDEN: 3,
};
function isPopupMenuItemVisible(child) {
if (child._delegate instanceof PopupMenuSection) {
if (child._delegate.isEmpty())
return false;
}
return child.visible;
}
/**
* arrowIcon
* @param {St.Side} side - Side to which the arrow points.
* @returns {St.Icon} a new arrow icon
*/
function arrowIcon(side) {
let iconName;
switch (side) {
case St.Side.TOP:
iconName = 'pan-up-symbolic';
break;
case St.Side.RIGHT:
iconName = 'pan-end-symbolic';
break;
case St.Side.BOTTOM:
iconName = 'pan-down-symbolic';
break;
case St.Side.LEFT:
iconName = 'pan-start-symbolic';
break;
}
const arrow = new St.Icon({
style_class: 'popup-menu-arrow',
icon_name: iconName,
accessible_role: Atk.Role.ARROW,
y_expand: true,
y_align: Clutter.ActorAlign.CENTER,
});
return arrow;
}
var PopupBaseMenuItem = GObject.registerClass({
Properties: {
'active': GObject.ParamSpec.boolean('active', 'active', 'active',
GObject.ParamFlags.READWRITE,
false),
'sensitive': GObject.ParamSpec.boolean('sensitive', 'sensitive', 'sensitive',
GObject.ParamFlags.READWRITE,
true),
},
Signals: {
'activate': { param_types: [Clutter.Event.$gtype] },
},
}, class PopupBaseMenuItem extends St.BoxLayout {
_init(params) {
params = Params.parse(params, {
reactive: true,
activate: true,
hover: true,
style_class: null,
can_focus: true,
});
super._init({
style_class: 'popup-menu-item',
reactive: params.reactive,
track_hover: params.reactive,
can_focus: params.can_focus,
accessible_role: Atk.Role.MENU_ITEM,
});
this._delegate = this;
this._ornamentIcon = new St.Icon({style_class: 'popup-menu-ornament'});
this.add(this._ornamentIcon);
this.setOrnament(Ornament.HIDDEN);
this._parent = null;
this._active = false;
this._activatable = params.reactive && params.activate;
this._sensitive = true;
this._clickAction = new Clutter.ClickAction({
enabled: this._activatable,
});
this._clickAction.connect('clicked',
() => this.activate(Clutter.get_current_event()));
this._clickAction.connect('notify::pressed', () => {
if (this._clickAction.pressed)
this.add_style_pseudo_class('active');
else
this.remove_style_pseudo_class('active');
});
this.add_action(this._clickAction);
if (!this._activatable)
this.add_style_class_name('popup-inactive-menu-item');
if (params.style_class)
this.add_style_class_name(params.style_class);
if (params.reactive && params.hover)
this.bind_property('hover', this, 'active', GObject.BindingFlags.SYNC_CREATE);
}
get actor() {
/* This is kept for compatibility with current implementation, and we
don't want to warn here yet since PopupMenu depends on this */
return this;
}
_getTopMenu() {
if (this._parent)
return this._parent._getTopMenu();
else
return this;
}
_setParent(parent) {
this._parent = parent;
}
vfunc_key_press_event(keyEvent) {
if (global.focus_manager.navigate_from_event(Clutter.get_current_event()))
return Clutter.EVENT_STOP;
if (!this._activatable)
return super.vfunc_key_press_event(keyEvent);
let state = keyEvent.modifier_state;
// if user has a modifier down (except capslock and numlock)
// then don't handle the key press here
state &= ~Clutter.ModifierType.LOCK_MASK;
state &= ~Clutter.ModifierType.MOD2_MASK;
state &= Clutter.ModifierType.MODIFIER_MASK;
if (state)
return Clutter.EVENT_PROPAGATE;
let symbol = keyEvent.keyval;
if (symbol == Clutter.KEY_space || symbol == Clutter.KEY_Return) {
this.activate(Clutter.get_current_event());
return Clutter.EVENT_STOP;
}
return Clutter.EVENT_PROPAGATE;
}
vfunc_key_focus_in() {
super.vfunc_key_focus_in();
this.active = true;
}
vfunc_key_focus_out() {
super.vfunc_key_focus_out();
this.active = false;
}
activate(event) {
this.emit('activate', event);
}
get active() {
return this._active;
}
set active(active) {
let activeChanged = active != this.active;
if (activeChanged) {
this._active = active;
if (active) {
this.add_style_class_name('selected');
if (this.can_focus)
this.grab_key_focus();
} else {
this.remove_style_class_name('selected');
// Remove the CSS active state if the user press the button and
// while holding moves to another menu item, so we don't paint all items.
// The correct behaviour would be to set the new item with the CSS
// active state as well, but button-press-event is not triggered,
// so we should track it in our own, which would involve some work
// in the container
this.remove_style_pseudo_class('active');
}
this.notify('active');
}
}
syncSensitive() {
let sensitive = this.sensitive;
this.reactive = sensitive;
this.can_focus = sensitive;
this.notify('sensitive');
return sensitive;
}
getSensitive() {
const parentSensitive = this._parent?.sensitive ?? true;
return this._activatable && this._sensitive && parentSensitive;
}
setSensitive(sensitive) {
if (this._sensitive == sensitive)
return;
this._sensitive = sensitive;
this.syncSensitive();
}
get sensitive() {
return this.getSensitive();
}
set sensitive(sensitive) {
this.setSensitive(sensitive);
}
setOrnament(ornament) {
if (ornament === this._ornament)
return;
this._ornament = ornament;
if (ornament == Ornament.DOT) {
this._ornamentIcon.icon_name = 'ornament-dot-symbolic';
this.add_accessible_state(Atk.StateType.CHECKED);
} else if (ornament == Ornament.CHECK) {
this._ornamentIcon.icon_name = 'ornament-check-symbolic';
this.add_accessible_state(Atk.StateType.CHECKED);
} else if (ornament == Ornament.NONE || ornament == Ornament.HIDDEN) {
this._ornamentIcon.icon_name = '';
this.remove_accessible_state(Atk.StateType.CHECKED);
}
this._ornamentIcon.visible = ornament !== Ornament.HIDDEN;
this._updateOrnamentStyle();
}
_updateOrnamentStyle() {
if (this._ornament !== Ornament.HIDDEN)
this.add_style_class_name('popup-ornamented-menu-item');
else
this.remove_style_class_name('popup-ornamented-menu-item');
}
});
var PopupMenuItem = GObject.registerClass(
class PopupMenuItem extends PopupBaseMenuItem {
_init(text, params) {
super._init(params);
this.label = new St.Label({
text,
y_expand: true,
y_align: Clutter.ActorAlign.CENTER,
});
this.add_child(this.label);
this.label_actor = this.label;
}
});
var PopupSeparatorMenuItem = GObject.registerClass(
class PopupSeparatorMenuItem extends PopupBaseMenuItem {
_init(text) {
super._init({
style_class: 'popup-separator-menu-item',
reactive: false,
can_focus: false,
});
this.label = new St.Label({ text: text || '' });
this.add(this.label);
this.label_actor = this.label;
this.label.connect('notify::text',
this._syncVisibility.bind(this));
this._syncVisibility();
this._separator = new St.Widget({
style_class: 'popup-separator-menu-item-separator',
x_expand: true,
y_expand: true,
y_align: Clutter.ActorAlign.CENTER,
});
this.add_child(this._separator);
}
_syncVisibility() {
this.label.visible = this.label.text != '';
}
});
var Switch = GObject.registerClass({
Properties: {
'state': GObject.ParamSpec.boolean(
'state', 'state', 'state',
GObject.ParamFlags.READWRITE,
false),
},
}, class Switch extends St.Bin {
_init(state) {
this._state = false;
super._init({
style_class: 'toggle-switch',
accessible_role: Atk.Role.CHECK_BOX,
state,
});
}
get state() {
return this._state;
}
set state(state) {
if (this._state === state)
return;
if (state)
this.add_style_pseudo_class('checked');
else
this.remove_style_pseudo_class('checked');
this._state = state;
this.notify('state');
}
toggle() {
this.state = !this.state;
}
});
var PopupSwitchMenuItem = GObject.registerClass({
Signals: { 'toggled': { param_types: [GObject.TYPE_BOOLEAN] } },
}, class PopupSwitchMenuItem extends PopupBaseMenuItem {
_init(text, active, params) {
super._init(params);
this.label = new St.Label({
text,
y_expand: true,
y_align: Clutter.ActorAlign.CENTER,
});
this._switch = new Switch(active);
this.accessible_role = Atk.Role.CHECK_MENU_ITEM;
this.checkAccessibleState();
this.label_actor = this.label;
this.add_child(this.label);
this._statusBin = new St.Bin({
x_align: Clutter.ActorAlign.END,
x_expand: true,
});
this.add_child(this._statusBin);
this._statusLabel = new St.Label({
text: '',
style_class: 'popup-status-menu-item',
y_expand: true,
y_align: Clutter.ActorAlign.CENTER,
});
this._statusBin.child = this._switch;
}
setStatus(text) {
if (text != null) {
this._statusLabel.text = text;
this._statusBin.child = this._statusLabel;
this.reactive = false;
this.accessible_role = Atk.Role.MENU_ITEM;
} else {
this._statusBin.child = this._switch;
this.reactive = true;
this.accessible_role = Atk.Role.CHECK_MENU_ITEM;
}
this.checkAccessibleState();
}
activate(event) {
if (this._switch.mapped)
this.toggle();
// we allow pressing space to toggle the switch
// without closing the menu
if (event.type() == Clutter.EventType.KEY_PRESS &&
event.get_key_symbol() == Clutter.KEY_space)
return;
super.activate(event);
}
toggle() {
this._switch.toggle();
this.emit('toggled', this._switch.state);
this.checkAccessibleState();
}
get state() {
return this._switch.state;
}
setToggleState(state) {
this._switch.state = state;
this.checkAccessibleState();
}
checkAccessibleState() {
switch (this.accessible_role) {
case Atk.Role.CHECK_MENU_ITEM:
if (this._switch.state)
this.add_accessible_state(Atk.StateType.CHECKED);
else
this.remove_accessible_state(Atk.StateType.CHECKED);
break;
default:
this.remove_accessible_state(Atk.StateType.CHECKED);
}
}
});
var PopupImageMenuItem = GObject.registerClass(
class PopupImageMenuItem extends PopupBaseMenuItem {
_init(text, icon, params) {
super._init(params);
this._icon = new St.Icon({
style_class: 'popup-menu-icon',
x_align: Clutter.ActorAlign.END,
});
this.add_child(this._icon);
this.label = new St.Label({
text,
y_expand: true,
y_align: Clutter.ActorAlign.CENTER,
});
this.add_child(this.label);
this.label_actor = this.label;
this.set_child_above_sibling(this._ornamentIcon, this.label);
this.setIcon(icon);
}
setIcon(icon) {
// The 'icon' parameter can be either a Gio.Icon or a string.
if (icon instanceof GObject.Object && GObject.type_is_a(icon, Gio.Icon))
this._icon.gicon = icon;
else
this._icon.icon_name = icon;
}
_updateOrnamentStyle() {
// we move the ornament after the label, so we don't need
// additional padding regardless of ornament visibility
}
});
var PopupMenuBase = class extends Signals.EventEmitter {
constructor(sourceActor, styleClass) {
super();
if (this.constructor === PopupMenuBase)
throw new TypeError(`Cannot instantiate abstract class ${this.constructor.name}`);
this.sourceActor = sourceActor;
this.focusActor = sourceActor;
this._parent = null;
this.box = new St.BoxLayout({
vertical: true,
x_expand: true,
y_expand: true,
});
if (styleClass !== undefined)
this.box.style_class = styleClass;
this.length = 0;
this.isOpen = false;
this._activeMenuItem = null;
this._settingsActions = { };
this._sensitive = true;
Main.sessionMode.connectObject('updated', () => this._sessionUpdated(), this);
}
_getTopMenu() {
if (this._parent)
return this._parent._getTopMenu();
else
return this;
}
_setParent(parent) {
this._parent = parent;
}
getSensitive() {
const parentSensitive = this._parent?.sensitive ?? true;
return this._sensitive && parentSensitive;
}
setSensitive(sensitive) {
this._sensitive = sensitive;
this.emit('notify::sensitive');
}
get sensitive() {
return this.getSensitive();
}
set sensitive(sensitive) {
this.setSensitive(sensitive);
}
_sessionUpdated() {
this._setSettingsVisibility(Main.sessionMode.allowSettings);
this.close();
}
addAction(title, callback, icon) {
let menuItem;
if (icon != undefined)
menuItem = new PopupImageMenuItem(title, icon);
else
menuItem = new PopupMenuItem(title);
this.addMenuItem(menuItem);
menuItem.connect('activate', (o, event) => {
callback(event);
});
return menuItem;
}
addSettingsAction(title, desktopFile) {
let menuItem = this.addAction(title, () => {
let app = Shell.AppSystem.get_default().lookup_app(desktopFile);
if (!app) {
log(`Settings panel for desktop file ${desktopFile} could not be loaded!`);
return;
}
Main.overview.hide();
Main.panel.closeQuickSettings();
app.activate();
});
menuItem.visible = Main.sessionMode.allowSettings;
this._settingsActions[desktopFile] = menuItem;
return menuItem;
}
_setSettingsVisibility(visible) {
for (let id in this._settingsActions) {
let item = this._settingsActions[id];
item.visible = visible;
}
}
isEmpty() {
let hasVisibleChildren = this.box.get_children().some(child => {
if (child._delegate instanceof PopupSeparatorMenuItem)
return false;
return isPopupMenuItemVisible(child);
});
return !hasVisibleChildren;
}
itemActivated(animate) {
if (animate == undefined)
animate = BoxPointer.PopupAnimation.FULL;
this._getTopMenu().close(animate);
}
_subMenuActiveChanged(submenu, submenuItem) {
if (this._activeMenuItem && this._activeMenuItem != submenuItem)
this._activeMenuItem.active = false;
this._activeMenuItem = submenuItem;
this.emit('active-changed', submenuItem);
}
_connectItemSignals(menuItem) {
menuItem.connectObject(
'notify::active', () => {
const { active } = menuItem;
if (active && this._activeMenuItem !== menuItem) {
if (this._activeMenuItem)
this._activeMenuItem.active = false;
this._activeMenuItem = menuItem;
this.emit('active-changed', menuItem);
} else if (!active && this._activeMenuItem === menuItem) {
this._activeMenuItem = null;
this.emit('active-changed', null);
}
},
'notify::sensitive', () => {
const { sensitive } = menuItem;
if (!sensitive && this._activeMenuItem === menuItem) {
if (!this.actor.navigate_focus(menuItem.actor,
St.DirectionType.TAB_FORWARD, true))
this.actor.grab_key_focus();
} else if (sensitive && this._activeMenuItem === null) {
if (global.stage.get_key_focus() === this.actor)
menuItem.actor.grab_key_focus();
}
},
'activate', () => {
this.emit('activate', menuItem);
this.itemActivated(BoxPointer.PopupAnimation.FULL);
}, GObject.ConnectFlags.AFTER,
'destroy', () => {
if (menuItem === this._activeMenuItem)
this._activeMenuItem = null;
}, this);
this.connectObject('notify::sensitive',
() => menuItem.syncSensitive(), menuItem);
}
_updateSeparatorVisibility(menuItem) {
if (menuItem.label.text)
return;
let children = this.box.get_children();
let index = children.indexOf(menuItem.actor);
if (index < 0)
return;
let childBeforeIndex = index - 1;
while (childBeforeIndex >= 0 && !isPopupMenuItemVisible(children[childBeforeIndex]))
childBeforeIndex--;
if (childBeforeIndex < 0 ||
children[childBeforeIndex]._delegate instanceof PopupSeparatorMenuItem) {
menuItem.actor.hide();
return;
}
let childAfterIndex = index + 1;
while (childAfterIndex < children.length && !isPopupMenuItemVisible(children[childAfterIndex]))
childAfterIndex++;
if (childAfterIndex >= children.length ||
children[childAfterIndex]._delegate instanceof PopupSeparatorMenuItem) {
menuItem.actor.hide();
return;
}
menuItem.show();
}
moveMenuItem(menuItem, position) {
let items = this._getMenuItems();
let i = 0;
while (i < items.length && position > 0) {
if (items[i] != menuItem)
position--;
i++;
}
if (i < items.length) {
if (items[i] != menuItem)
this.box.set_child_below_sibling(menuItem.actor, items[i].actor);
} else {
this.box.set_child_above_sibling(menuItem.actor, null);
}
}
addMenuItem(menuItem, position) {
let beforeItem = null;
if (position == undefined) {
this.box.add(menuItem.actor);
} else {
let items = this._getMenuItems();
if (position < items.length) {
beforeItem = items[position].actor;
this.box.insert_child_below(menuItem.actor, beforeItem);
} else {
this.box.add(menuItem.actor);
}
}
if (menuItem instanceof PopupMenuSection) {
menuItem.connectObject(
'active-changed', this._subMenuActiveChanged.bind(this),
'destroy', () => this.length--, this);
this.connectObject(
'open-state-changed', (self, open) => {
if (open)
menuItem.open();
else
menuItem.close();
},
'menu-closed', () => menuItem.emit('menu-closed'),
'notify::sensitive', () => menuItem.emit('notify::sensitive'),
menuItem);
} else if (menuItem instanceof PopupSubMenuMenuItem) {
if (beforeItem == null)
this.box.add(menuItem.menu.actor);
else
this.box.insert_child_below(menuItem.menu.actor, beforeItem);
this._connectItemSignals(menuItem);
menuItem.menu.connectObject('active-changed',
this._subMenuActiveChanged.bind(this), this);
this.connectObject('menu-closed', () => {
menuItem.menu.close(BoxPointer.PopupAnimation.NONE);
}, menuItem);
} else if (menuItem instanceof PopupSeparatorMenuItem) {
this._connectItemSignals(menuItem);
// updateSeparatorVisibility needs to get called any time the
// separator's adjacent siblings change visibility or position.
// open-state-changed isn't exactly that, but doing it in more
// precise ways would require a lot more bookkeeping.
this.connectObject('open-state-changed', () => {
this._updateSeparatorVisibility(menuItem);
}, menuItem);
} else if (menuItem instanceof PopupBaseMenuItem) {
this._connectItemSignals(menuItem);
} else {
throw TypeError("Invalid argument to PopupMenuBase.addMenuItem()");
}
menuItem._setParent(this);
this.length++;
}
_getMenuItems() {
return this.box.get_children().map(a => a._delegate).filter(item => {
return item instanceof PopupBaseMenuItem || item instanceof PopupMenuSection;
});
}
get firstMenuItem() {
let items = this._getMenuItems();
if (items.length)
return items[0];
else
return null;
}
get numMenuItems() {
return this._getMenuItems().length;
}
removeAll() {
let children = this._getMenuItems();
for (let i = 0; i < children.length; i++) {
let item = children[i];
item.destroy();
}
}
toggle() {
if (this.isOpen)
this.close(BoxPointer.PopupAnimation.FULL);
else
this.open(BoxPointer.PopupAnimation.FULL);
}
destroy() {
this.close();
this.removeAll();
this.actor.destroy();
this.emit('destroy');
Main.sessionMode.disconnectObject(this);
}
};
var PopupMenu = class extends PopupMenuBase {
constructor(sourceActor, arrowAlignment, arrowSide) {
super(sourceActor, 'popup-menu-content');
this._arrowAlignment = arrowAlignment;
this._arrowSide = arrowSide;
this._boxPointer = new BoxPointer.BoxPointer(arrowSide);
this.actor = this._boxPointer;
this.actor._delegate = this;
this.actor.style_class = 'popup-menu-boxpointer';
this._boxPointer.bin.set_child(this.box);
this.actor.add_style_class_name('popup-menu');
global.focus_manager.add_group(this.actor);
this.actor.reactive = true;
if (this.sourceActor) {
this.sourceActor.connectObject(
'key-press-event', this._onKeyPress.bind(this),
'notify::mapped', () => {
if (!this.sourceActor.mapped)
this.close();
}, this);
}
this._systemModalOpenedId = 0;
this._openedSubMenu = null;
}
_setOpenedSubMenu(submenu) {
if (this._openedSubMenu)
this._openedSubMenu.close(true);
this._openedSubMenu = submenu;
}
_onKeyPress(actor, event) {
// Disable toggling the menu by keyboard
// when it cannot be toggled by pointer
if (!actor.reactive)
return Clutter.EVENT_PROPAGATE;
let navKey;
switch (this._boxPointer.arrowSide) {
case St.Side.TOP:
navKey = Clutter.KEY_Down;
break;
case St.Side.BOTTOM:
navKey = Clutter.KEY_Up;
break;
case St.Side.LEFT:
navKey = Clutter.KEY_Right;
break;
case St.Side.RIGHT:
navKey = Clutter.KEY_Left;
break;
}
let state = event.get_state();
// if user has a modifier down (except capslock and numlock)
// then don't handle the key press here
state &= ~Clutter.ModifierType.LOCK_MASK;
state &= ~Clutter.ModifierType.MOD2_MASK;
state &= Clutter.ModifierType.MODIFIER_MASK;
if (state)
return Clutter.EVENT_PROPAGATE;
let symbol = event.get_key_symbol();
if (symbol == Clutter.KEY_space || symbol == Clutter.KEY_Return) {
this.toggle();
return Clutter.EVENT_STOP;
} else if (symbol == navKey) {
if (!this.isOpen)
this.toggle();
this.actor.navigate_focus(null, St.DirectionType.TAB_FORWARD, false);
return Clutter.EVENT_STOP;
} else {
return Clutter.EVENT_PROPAGATE;
}
}
setArrowOrigin(origin) {
this._boxPointer.setArrowOrigin(origin);
}
setSourceAlignment(alignment) {
this._boxPointer.setSourceAlignment(alignment);
}
open(animate) {
if (this.isOpen)
return;
if (this.isEmpty())
return;
if (!this._systemModalOpenedId) {
this._systemModalOpenedId =
Main.layoutManager.connect('system-modal-opened', () => this.close());
}
this.isOpen = true;
this._boxPointer.setPosition(this.sourceActor, this._arrowAlignment);
this._boxPointer.open(animate);
this.actor.get_parent().set_child_above_sibling(this.actor, null);
this.emit('open-state-changed', true);
}
close(animate) {
if (this._activeMenuItem)
this._activeMenuItem.active = false;
if (this._boxPointer.visible) {
this._boxPointer.close(animate, () => {
this.emit('menu-closed');
});
}
if (!this.isOpen)
return;
this.isOpen = false;
this.emit('open-state-changed', false);
}
destroy() {
this.sourceActor?.disconnectObject(this);
if (this._systemModalOpenedId)
Main.layoutManager.disconnect(this._systemModalOpenedId);
this._systemModalOpenedId = 0;
super.destroy();
}
};
var PopupDummyMenu = class extends Signals.EventEmitter {
constructor(sourceActor) {
super();
this.sourceActor = sourceActor;
this.actor = sourceActor;
this.actor._delegate = this;
}
getSensitive() {
return true;
}
get sensitive() {
return this.getSensitive();
}
open() {
if (this.isOpen)
return;
this.isOpen = true;
this.emit('open-state-changed', true);
}
close() {
if (!this.isOpen)
return;
this.isOpen = false;
this.emit('open-state-changed', false);
}
toggle() {}
destroy() {
this.emit('destroy');
}
};
var PopupSubMenu = class extends PopupMenuBase {
constructor(sourceActor, sourceArrow) {
super(sourceActor);
this._arrow = sourceArrow;
// Since a function of a submenu might be to provide a "More.." expander
// with long content, we make it scrollable - the scrollbar will only take
// effect if a CSS max-height is set on the top menu.
this.actor = new St.ScrollView({
style_class: 'popup-sub-menu',
hscrollbar_policy: St.PolicyType.NEVER,
vscrollbar_policy: St.PolicyType.NEVER,
});
this.actor.add_actor(this.box);
this.actor._delegate = this;
this.actor.clip_to_allocation = true;
this.actor.connect('key-press-event', this._onKeyPressEvent.bind(this));
this.actor.hide();
}
_needsScrollbar() {
let topMenu = this._getTopMenu();
let [, topNaturalHeight] = topMenu.actor.get_preferred_height(-1);
let topThemeNode = topMenu.actor.get_theme_node();
let topMaxHeight = topThemeNode.get_max_height();
return topMaxHeight >= 0 && topNaturalHeight >= topMaxHeight;
}
getSensitive() {
return this._sensitive && this.sourceActor.sensitive;
}
get sensitive() {
return this.getSensitive();
}
open(animate) {
if (this.isOpen)
return;
if (this.isEmpty())
return;
this.isOpen = true;
this.emit('open-state-changed', true);
this.actor.show();
let needsScrollbar = this._needsScrollbar();
// St.ScrollView always requests space horizontally for a possible vertical
// scrollbar if in AUTOMATIC mode. Doing better would require implementation
// of width-for-height in St.BoxLayout and St.ScrollView. This looks bad
// when we *don't* need it, so turn off the scrollbar when that's true.
// Dynamic changes in whether we need it aren't handled properly.
this.actor.vscrollbar_policy =
needsScrollbar ? St.PolicyType.AUTOMATIC : St.PolicyType.NEVER;
if (needsScrollbar)
this.actor.add_style_pseudo_class('scrolled');
else
this.actor.remove_style_pseudo_class('scrolled');
// It looks funny if we animate with a scrollbar (at what point is
// the scrollbar added?) so just skip that case
if (animate && needsScrollbar)
animate = false;
let targetAngle = this.actor.text_direction == Clutter.TextDirection.RTL ? -90 : 90;
if (animate) {
let [, naturalHeight] = this.actor.get_preferred_height(-1);
this.actor.height = 0;
this.actor.ease({
height: naturalHeight,
duration: 250,
mode: Clutter.AnimationMode.EASE_OUT_EXPO,
onComplete: () => this.actor.set_height(-1),
});
this._arrow.ease({
rotation_angle_z: targetAngle,
duration: 250,
mode: Clutter.AnimationMode.EASE_OUT_EXPO,
});
} else {
this._arrow.rotation_angle_z = targetAngle;
}
}
close(animate) {
if (!this.isOpen)
return;
this.isOpen = false;
this.emit('open-state-changed', false);
if (this._activeMenuItem)
this._activeMenuItem.active = false;
if (animate && this._needsScrollbar())
animate = false;
if (animate) {
this.actor.ease({
height: 0,
duration: 250,
mode: Clutter.AnimationMode.EASE_OUT_EXPO,
onComplete: () => {
this.actor.hide();
this.actor.set_height(-1);
},
});
this._arrow.ease({
rotation_angle_z: 0,
duration: 250,
mode: Clutter.AnimationMode.EASE_OUT_EXPO,
});
} else {
this._arrow.rotation_angle_z = 0;
this.actor.hide();
}
}
_onKeyPressEvent(actor, event) {
// Move focus back to parent menu if the user types Left.
if (this.isOpen && event.get_key_symbol() == Clutter.KEY_Left) {
this.close(BoxPointer.PopupAnimation.FULL);
this.sourceActor._delegate.active = true;
return Clutter.EVENT_STOP;
}
return Clutter.EVENT_PROPAGATE;
}
};
/**
* PopupMenuSection:
*
* A section of a PopupMenu which is handled like a submenu
* (you can add and remove items, you can destroy it, you
* can add it to another menu), but is completely transparent
* to the user
*/
var PopupMenuSection = class extends PopupMenuBase {
constructor() {
super();
this.actor = this.box;
this.actor._delegate = this;
this.isOpen = true;
this.actor.add_style_class_name('popup-menu-section');
}
// deliberately ignore any attempt to open() or close(), but emit the
// corresponding signal so children can still pick it up
open() {
this.emit('open-state-changed', true);
}
close() {
this.emit('open-state-changed', false);
}
};
var PopupSubMenuMenuItem = GObject.registerClass(
class PopupSubMenuMenuItem extends PopupBaseMenuItem {
_init(text, wantIcon) {
super._init();
this.add_style_class_name('popup-submenu-menu-item');
if (wantIcon) {
this.icon = new St.Icon({ style_class: 'popup-menu-icon' });
this.add_child(this.icon);
}
this.label = new St.Label({
text,
y_expand: true,
y_align: Clutter.ActorAlign.CENTER,
});
this.add_child(this.label);
this.label_actor = this.label;
let expander = new St.Bin({
style_class: 'popup-menu-item-expander',
x_expand: true,
});
this.add_child(expander);
this._triangle = arrowIcon(St.Side.RIGHT);
this._triangle.pivot_point = new Graphene.Point({ x: 0.5, y: 0.6 });
this._triangleBin = new St.Widget({
y_expand: true,
y_align: Clutter.ActorAlign.CENTER,
});
this._triangleBin.add_child(this._triangle);
this.add_child(this._triangleBin);
this.add_accessible_state(Atk.StateType.EXPANDABLE);
this.menu = new PopupSubMenu(this, this._triangle);
this.menu.connect('open-state-changed', this._subMenuOpenStateChanged.bind(this));
this.connect('destroy', () => this.menu.destroy());
}
_setParent(parent) {
super._setParent(parent);
this.menu._setParent(parent);
}
syncSensitive() {
let sensitive = super.syncSensitive();
this._triangle.visible = sensitive;
if (!sensitive)
this.menu.close(false);
}
_subMenuOpenStateChanged(menu, open) {
if (open) {
this.add_style_pseudo_class('open');
this._getTopMenu()._setOpenedSubMenu(this.menu);
this.add_accessible_state(Atk.StateType.EXPANDED);
this.add_style_pseudo_class('checked');
} else {
this.remove_style_pseudo_class('open');
this._getTopMenu()._setOpenedSubMenu(null);
this.remove_accessible_state(Atk.StateType.EXPANDED);
this.remove_style_pseudo_class('checked');
}
}
setSubmenuShown(open) {
if (open)
this.menu.open(BoxPointer.PopupAnimation.FULL);
else
this.menu.close(BoxPointer.PopupAnimation.FULL);
}
_setOpenState(open) {
this.setSubmenuShown(open);
}
_getOpenState() {
return this.menu.isOpen;
}
vfunc_key_press_event(keyPressEvent) {
let symbol = keyPressEvent.keyval;
if (symbol == Clutter.KEY_Right) {
this._setOpenState(true);
this.menu.actor.navigate_focus(null, St.DirectionType.DOWN, false);
return Clutter.EVENT_STOP;
} else if (symbol == Clutter.KEY_Left && this._getOpenState()) {
this._setOpenState(false);
return Clutter.EVENT_STOP;
}
return super.vfunc_key_press_event(keyPressEvent);
}
activate(_event) {
this._setOpenState(!this._getOpenState());
}
});
/* Basic implementation of a menu manager.
* Call addMenu to add menus
*/
var PopupMenuManager = class {
constructor(owner, grabParams) {
this._grabParams = Params.parse(grabParams,
{ actionMode: Shell.ActionMode.POPUP });
global.stage.connect('notify::key-focus', () => {
if (!this.activeMenu)
return;
let actor = global.stage.get_key_focus();
let newMenu = this._findMenuForSource(actor);
if (newMenu)
this._changeMenu(newMenu);
});
this._menus = [];
}
addMenu(menu, position) {
if (this._menus.includes(menu))
return;
menu.connectObject(
'open-state-changed', this._onMenuOpenState.bind(this),
'destroy', () => this.removeMenu(menu), this);
menu.actor.connectObject('captured-event',
this._onCapturedEvent.bind(this), this);
if (position == undefined)
this._menus.push(menu);
else
this._menus.splice(position, 0, menu);
}
removeMenu(menu) {
if (menu === this.activeMenu) {
Main.popModal(this._grab);
this._grab = null;
}
const position = this._menus.indexOf(menu);
if (position == -1) // not a menu we manage
return;
menu.disconnectObject(this);
menu.actor.disconnectObject(this);
this._menus.splice(position, 1);
}
ignoreRelease() {
}
_onMenuOpenState(menu, open) {
if (open && this.activeMenu === menu)
return;
if (open) {
const oldMenu = this.activeMenu;
const oldGrab = this._grab;
this._grab = Main.pushModal(menu.actor, this._grabParams);
this.activeMenu = menu;
oldMenu?.close(BoxPointer.PopupAnimation.FADE);
if (oldGrab)
Main.popModal(oldGrab);
} else if (this.activeMenu === menu) {
this.activeMenu = null;
Main.popModal(this._grab);
this._grab = null;
}
}
_changeMenu(newMenu) {
newMenu.open(this.activeMenu
? BoxPointer.PopupAnimation.FADE
: BoxPointer.PopupAnimation.FULL);
}
_onCapturedEvent(actor, event) {
let menu = actor._delegate;
const targetActor = global.stage.get_event_actor(event);
if (event.type() === Clutter.EventType.KEY_PRESS) {
let symbol = event.get_key_symbol();
if (symbol === Clutter.KEY_Down &&
global.stage.get_key_focus() === menu.actor) {
actor.navigate_focus(null, St.DirectionType.TAB_FORWARD, false);
return Clutter.EVENT_STOP;
} else if (symbol === Clutter.KEY_Escape && menu.isOpen) {
menu.close(BoxPointer.PopupAnimation.FULL);
return Clutter.EVENT_STOP;
}
} else if (event.type() === Clutter.EventType.ENTER &&
(event.get_flags() & Clutter.EventFlags.FLAG_GRAB_NOTIFY) === 0) {
let hoveredMenu = this._findMenuForSource(targetActor);
if (hoveredMenu && hoveredMenu !== menu)
this._changeMenu(hoveredMenu);
} else if ((event.type() === Clutter.EventType.BUTTON_PRESS ||
event.type() === Clutter.EventType.TOUCH_BEGIN) &&
!actor.contains(targetActor)) {
menu.close(BoxPointer.PopupAnimation.FULL);
}
return Clutter.EVENT_PROPAGATE;
}
_findMenuForSource(source) {
while (source) {
let actor = source;
const menu = this._menus.find(m => m.sourceActor === actor);
if (menu)
return menu;
source = source.get_parent();
}
return null;
}
_closeMenu(isUser, menu) {
// If this isn't a user action, we called close()
// on the BoxPointer ourselves, so we shouldn't
// reanimate.
if (isUser)
menu.close(BoxPointer.PopupAnimation.FULL);
}
};