ef7df3fdf5f3c9cd085923d5f652fbcfa4e8149a9df43ff0cf4bc457ef84b57a06dd751bf7d965c62f23fc0321587d5577f42969150d2f99250f5760b48a6e 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  1. /*---------------------------------------------------------------------------------------------
  2. * Copyright (c) Microsoft Corporation. All rights reserved.
  3. * Licensed under the MIT License. See License.txt in the project root for license information.
  4. *--------------------------------------------------------------------------------------------*/
  5. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  6. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  7. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  8. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  9. return c > 3 && r && Object.defineProperty(target, key, r), r;
  10. };
  11. var __param = (this && this.__param) || function (paramIndex, decorator) {
  12. return function (target, key) { decorator(target, key, paramIndex); }
  13. };
  14. var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
  15. function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
  16. return new (P || (P = Promise))(function (resolve, reject) {
  17. function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
  18. function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
  19. function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
  20. step((generator = generator.apply(thisArg, _arguments || [])).next());
  21. });
  22. };
  23. import { $, addDisposableListener, append, asCSSUrl, EventType, ModifierKeyEmitter, prepend } from '../../../base/browser/dom.js';
  24. import { StandardKeyboardEvent } from '../../../base/browser/keyboardEvent.js';
  25. import { ActionViewItem, BaseActionViewItem } from '../../../base/browser/ui/actionbar/actionViewItems.js';
  26. import { DropdownMenuActionViewItem } from '../../../base/browser/ui/dropdown/dropdownActionViewItem.js';
  27. import { ActionRunner, Separator, SubmenuAction } from '../../../base/common/actions.js';
  28. import { UILabelProvider } from '../../../base/common/keybindingLabels.js';
  29. import { combinedDisposable, DisposableStore, MutableDisposable, toDisposable } from '../../../base/common/lifecycle.js';
  30. import { isLinux, isWindows, OS } from '../../../base/common/platform.js';
  31. import './menuEntryActionViewItem.css';
  32. import { localize } from '../../../nls.js';
  33. import { IMenuService, MenuItemAction, SubmenuItemAction } from '../common/actions.js';
  34. import { IContextKeyService } from '../../contextkey/common/contextkey.js';
  35. import { IContextMenuService } from '../../contextview/browser/contextView.js';
  36. import { IInstantiationService } from '../../instantiation/common/instantiation.js';
  37. import { IKeybindingService } from '../../keybinding/common/keybinding.js';
  38. import { INotificationService } from '../../notification/common/notification.js';
  39. import { IStorageService } from '../../storage/common/storage.js';
  40. import { IThemeService, ThemeIcon } from '../../theme/common/themeService.js';
  41. import { isDark } from '../../theme/common/theme.js';
  42. import { assertType } from '../../../base/common/types.js';
  43. export function createAndFillInActionBarActions(menu, options, target, primaryGroup, primaryMaxCount, shouldInlineSubmenu, useSeparatorsInPrimaryActions) {
  44. const groups = menu.getActions(options);
  45. const isPrimaryAction = typeof primaryGroup === 'string' ? (actionGroup) => actionGroup === primaryGroup : primaryGroup;
  46. // Action bars handle alternative actions on their own so the alternative actions should be ignored
  47. fillInActions(groups, target, false, isPrimaryAction, primaryMaxCount, shouldInlineSubmenu, useSeparatorsInPrimaryActions);
  48. return asDisposable(groups);
  49. }
  50. function asDisposable(groups) {
  51. const disposables = new DisposableStore();
  52. for (const [, actions] of groups) {
  53. for (const action of actions) {
  54. disposables.add(action);
  55. }
  56. }
  57. return disposables;
  58. }
  59. function fillInActions(groups, target, useAlternativeActions, isPrimaryAction = actionGroup => actionGroup === 'navigation', primaryMaxCount = Number.MAX_SAFE_INTEGER, shouldInlineSubmenu = () => false, useSeparatorsInPrimaryActions = false) {
  60. let primaryBucket;
  61. let secondaryBucket;
  62. if (Array.isArray(target)) {
  63. primaryBucket = target;
  64. secondaryBucket = target;
  65. }
  66. else {
  67. primaryBucket = target.primary;
  68. secondaryBucket = target.secondary;
  69. }
  70. const submenuInfo = new Set();
  71. for (const [group, actions] of groups) {
  72. let target;
  73. if (isPrimaryAction(group)) {
  74. target = primaryBucket;
  75. if (target.length > 0 && useSeparatorsInPrimaryActions) {
  76. target.push(new Separator());
  77. }
  78. }
  79. else {
  80. target = secondaryBucket;
  81. if (target.length > 0) {
  82. target.push(new Separator());
  83. }
  84. }
  85. for (let action of actions) {
  86. if (useAlternativeActions) {
  87. action = action instanceof MenuItemAction && action.alt ? action.alt : action;
  88. }
  89. const newLen = target.push(action);
  90. // keep submenu info for later inlining
  91. if (action instanceof SubmenuAction) {
  92. submenuInfo.add({ group, action, index: newLen - 1 });
  93. }
  94. }
  95. }
  96. // ask the outside if submenu should be inlined or not. only ask when
  97. // there would be enough space
  98. for (const { group, action, index } of submenuInfo) {
  99. const target = isPrimaryAction(group) ? primaryBucket : secondaryBucket;
  100. // inlining submenus with length 0 or 1 is easy,
  101. // larger submenus need to be checked with the overall limit
  102. const submenuActions = action.actions;
  103. if ((submenuActions.length <= 1 || target.length + submenuActions.length - 2 <= primaryMaxCount) && shouldInlineSubmenu(action, group, target.length)) {
  104. target.splice(index, 1, ...submenuActions);
  105. }
  106. }
  107. // overflow items from the primary group into the secondary bucket
  108. if (primaryBucket !== secondaryBucket && primaryBucket.length > primaryMaxCount) {
  109. const overflow = primaryBucket.splice(primaryMaxCount, primaryBucket.length - primaryMaxCount);
  110. secondaryBucket.unshift(...overflow, new Separator());
  111. }
  112. }
  113. let MenuEntryActionViewItem = class MenuEntryActionViewItem extends ActionViewItem {
  114. constructor(action, options, _keybindingService, _notificationService, _contextKeyService, _themeService, _contextMenuService) {
  115. super(undefined, action, { icon: !!(action.class || action.item.icon), label: !action.class && !action.item.icon, draggable: options === null || options === void 0 ? void 0 : options.draggable, keybinding: options === null || options === void 0 ? void 0 : options.keybinding, hoverDelegate: options === null || options === void 0 ? void 0 : options.hoverDelegate });
  116. this._keybindingService = _keybindingService;
  117. this._notificationService = _notificationService;
  118. this._contextKeyService = _contextKeyService;
  119. this._themeService = _themeService;
  120. this._contextMenuService = _contextMenuService;
  121. this._wantsAltCommand = false;
  122. this._itemClassDispose = this._register(new MutableDisposable());
  123. this._altKey = ModifierKeyEmitter.getInstance();
  124. }
  125. get _menuItemAction() {
  126. return this._action;
  127. }
  128. get _commandAction() {
  129. return this._wantsAltCommand && this._menuItemAction.alt || this._menuItemAction;
  130. }
  131. onClick(event) {
  132. return __awaiter(this, void 0, void 0, function* () {
  133. event.preventDefault();
  134. event.stopPropagation();
  135. try {
  136. yield this.actionRunner.run(this._commandAction, this._context);
  137. }
  138. catch (err) {
  139. this._notificationService.error(err);
  140. }
  141. });
  142. }
  143. render(container) {
  144. super.render(container);
  145. container.classList.add('menu-entry');
  146. this._updateItemClass(this._menuItemAction.item);
  147. let mouseOver = false;
  148. let alternativeKeyDown = this._altKey.keyStatus.altKey || ((isWindows || isLinux) && this._altKey.keyStatus.shiftKey);
  149. const updateAltState = () => {
  150. var _a;
  151. const wantsAltCommand = mouseOver && alternativeKeyDown && !!((_a = this._commandAction.alt) === null || _a === void 0 ? void 0 : _a.enabled);
  152. if (wantsAltCommand !== this._wantsAltCommand) {
  153. this._wantsAltCommand = wantsAltCommand;
  154. this.updateLabel();
  155. this.updateTooltip();
  156. this.updateClass();
  157. }
  158. };
  159. if (this._menuItemAction.alt) {
  160. this._register(this._altKey.event(value => {
  161. alternativeKeyDown = value.altKey || ((isWindows || isLinux) && value.shiftKey);
  162. updateAltState();
  163. }));
  164. }
  165. this._register(addDisposableListener(container, 'mouseleave', _ => {
  166. mouseOver = false;
  167. updateAltState();
  168. }));
  169. this._register(addDisposableListener(container, 'mouseenter', _ => {
  170. mouseOver = true;
  171. updateAltState();
  172. }));
  173. }
  174. updateLabel() {
  175. if (this.options.label && this.label) {
  176. this.label.textContent = this._commandAction.label;
  177. }
  178. }
  179. getTooltip() {
  180. var _a;
  181. const keybinding = this._keybindingService.lookupKeybinding(this._commandAction.id, this._contextKeyService);
  182. const keybindingLabel = keybinding && keybinding.getLabel();
  183. const tooltip = this._commandAction.tooltip || this._commandAction.label;
  184. let title = keybindingLabel
  185. ? localize('titleAndKb', "{0} ({1})", tooltip, keybindingLabel)
  186. : tooltip;
  187. if (!this._wantsAltCommand && ((_a = this._menuItemAction.alt) === null || _a === void 0 ? void 0 : _a.enabled)) {
  188. const altTooltip = this._menuItemAction.alt.tooltip || this._menuItemAction.alt.label;
  189. const altKeybinding = this._keybindingService.lookupKeybinding(this._menuItemAction.alt.id, this._contextKeyService);
  190. const altKeybindingLabel = altKeybinding && altKeybinding.getLabel();
  191. const altTitleSection = altKeybindingLabel
  192. ? localize('titleAndKb', "{0} ({1})", altTooltip, altKeybindingLabel)
  193. : altTooltip;
  194. title = localize('titleAndKbAndAlt', "{0}\n[{1}] {2}", title, UILabelProvider.modifierLabels[OS].altKey, altTitleSection);
  195. }
  196. return title;
  197. }
  198. updateClass() {
  199. if (this.options.icon) {
  200. if (this._commandAction !== this._menuItemAction) {
  201. if (this._menuItemAction.alt) {
  202. this._updateItemClass(this._menuItemAction.alt.item);
  203. }
  204. }
  205. else {
  206. this._updateItemClass(this._menuItemAction.item);
  207. }
  208. }
  209. }
  210. _updateItemClass(item) {
  211. var _a;
  212. this._itemClassDispose.value = undefined;
  213. const { element, label } = this;
  214. if (!element || !label) {
  215. return;
  216. }
  217. const icon = this._commandAction.checked && ((_a = item.toggled) === null || _a === void 0 ? void 0 : _a.icon) ? item.toggled.icon : item.icon;
  218. if (!icon) {
  219. return;
  220. }
  221. if (ThemeIcon.isThemeIcon(icon)) {
  222. // theme icons
  223. const iconClasses = ThemeIcon.asClassNameArray(icon);
  224. label.classList.add(...iconClasses);
  225. this._itemClassDispose.value = toDisposable(() => {
  226. label.classList.remove(...iconClasses);
  227. });
  228. }
  229. else {
  230. // icon path/url
  231. label.style.backgroundImage = (isDark(this._themeService.getColorTheme().type)
  232. ? asCSSUrl(icon.dark)
  233. : asCSSUrl(icon.light));
  234. label.classList.add('icon');
  235. this._itemClassDispose.value = combinedDisposable(toDisposable(() => {
  236. label.style.backgroundImage = '';
  237. label.classList.remove('icon');
  238. }), this._themeService.onDidColorThemeChange(() => {
  239. // refresh when the theme changes in case we go between dark <-> light
  240. this.updateClass();
  241. }));
  242. }
  243. }
  244. };
  245. MenuEntryActionViewItem = __decorate([
  246. __param(2, IKeybindingService),
  247. __param(3, INotificationService),
  248. __param(4, IContextKeyService),
  249. __param(5, IThemeService),
  250. __param(6, IContextMenuService)
  251. ], MenuEntryActionViewItem);
  252. export { MenuEntryActionViewItem };
  253. let SubmenuEntryActionViewItem = class SubmenuEntryActionViewItem extends DropdownMenuActionViewItem {
  254. constructor(action, options, _contextMenuService, _themeService) {
  255. var _a, _b;
  256. const dropdownOptions = Object.assign({}, options !== null && options !== void 0 ? options : Object.create(null), {
  257. menuAsChild: (_a = options === null || options === void 0 ? void 0 : options.menuAsChild) !== null && _a !== void 0 ? _a : false,
  258. classNames: (_b = options === null || options === void 0 ? void 0 : options.classNames) !== null && _b !== void 0 ? _b : (ThemeIcon.isThemeIcon(action.item.icon) ? ThemeIcon.asClassName(action.item.icon) : undefined),
  259. });
  260. super(action, { getActions: () => action.actions }, _contextMenuService, dropdownOptions);
  261. this._contextMenuService = _contextMenuService;
  262. this._themeService = _themeService;
  263. }
  264. render(container) {
  265. super.render(container);
  266. assertType(this.element);
  267. container.classList.add('menu-entry');
  268. const action = this._action;
  269. const { icon } = action.item;
  270. if (icon && !ThemeIcon.isThemeIcon(icon)) {
  271. this.element.classList.add('icon');
  272. const setBackgroundImage = () => {
  273. if (this.element) {
  274. this.element.style.backgroundImage = (isDark(this._themeService.getColorTheme().type)
  275. ? asCSSUrl(icon.dark)
  276. : asCSSUrl(icon.light));
  277. }
  278. };
  279. setBackgroundImage();
  280. this._register(this._themeService.onDidColorThemeChange(() => {
  281. // refresh when the theme changes in case we go between dark <-> light
  282. setBackgroundImage();
  283. }));
  284. }
  285. }
  286. };
  287. SubmenuEntryActionViewItem = __decorate([
  288. __param(2, IContextMenuService),
  289. __param(3, IThemeService)
  290. ], SubmenuEntryActionViewItem);
  291. export { SubmenuEntryActionViewItem };
  292. let DropdownWithDefaultActionViewItem = class DropdownWithDefaultActionViewItem extends BaseActionViewItem {
  293. constructor(submenuAction, options, _keybindingService, _notificationService, _contextMenuService, _menuService, _instaService, _storageService) {
  294. var _a, _b, _c;
  295. super(null, submenuAction);
  296. this._keybindingService = _keybindingService;
  297. this._notificationService = _notificationService;
  298. this._contextMenuService = _contextMenuService;
  299. this._menuService = _menuService;
  300. this._instaService = _instaService;
  301. this._storageService = _storageService;
  302. this._container = null;
  303. this._options = options;
  304. this._storageKey = `${submenuAction.item.submenu.id}_lastActionId`;
  305. // determine default action
  306. let defaultAction;
  307. const defaultActionId = _storageService.get(this._storageKey, 1 /* StorageScope.WORKSPACE */);
  308. if (defaultActionId) {
  309. defaultAction = submenuAction.actions.find(a => defaultActionId === a.id);
  310. }
  311. if (!defaultAction) {
  312. defaultAction = submenuAction.actions[0];
  313. }
  314. this._defaultAction = this._instaService.createInstance(MenuEntryActionViewItem, defaultAction, { keybinding: this._getDefaultActionKeybindingLabel(defaultAction) });
  315. const dropdownOptions = Object.assign({}, options !== null && options !== void 0 ? options : Object.create(null), {
  316. menuAsChild: (_a = options === null || options === void 0 ? void 0 : options.menuAsChild) !== null && _a !== void 0 ? _a : true,
  317. classNames: (_b = options === null || options === void 0 ? void 0 : options.classNames) !== null && _b !== void 0 ? _b : ['codicon', 'codicon-chevron-down'],
  318. actionRunner: (_c = options === null || options === void 0 ? void 0 : options.actionRunner) !== null && _c !== void 0 ? _c : new ActionRunner()
  319. });
  320. this._dropdown = new DropdownMenuActionViewItem(submenuAction, submenuAction.actions, this._contextMenuService, dropdownOptions);
  321. this._dropdown.actionRunner.onDidRun((e) => {
  322. if (e.action instanceof MenuItemAction) {
  323. this.update(e.action);
  324. }
  325. });
  326. }
  327. update(lastAction) {
  328. this._storageService.store(this._storageKey, lastAction.id, 1 /* StorageScope.WORKSPACE */, 0 /* StorageTarget.USER */);
  329. this._defaultAction.dispose();
  330. this._defaultAction = this._instaService.createInstance(MenuEntryActionViewItem, lastAction, { keybinding: this._getDefaultActionKeybindingLabel(lastAction) });
  331. this._defaultAction.actionRunner = new class extends ActionRunner {
  332. runAction(action, context) {
  333. return __awaiter(this, void 0, void 0, function* () {
  334. yield action.run(undefined);
  335. });
  336. }
  337. }();
  338. if (this._container) {
  339. this._defaultAction.render(prepend(this._container, $('.action-container')));
  340. }
  341. }
  342. _getDefaultActionKeybindingLabel(defaultAction) {
  343. var _a;
  344. let defaultActionKeybinding;
  345. if ((_a = this._options) === null || _a === void 0 ? void 0 : _a.renderKeybindingWithDefaultActionLabel) {
  346. const kb = this._keybindingService.lookupKeybinding(defaultAction.id);
  347. if (kb) {
  348. defaultActionKeybinding = `(${kb.getLabel()})`;
  349. }
  350. }
  351. return defaultActionKeybinding;
  352. }
  353. setActionContext(newContext) {
  354. super.setActionContext(newContext);
  355. this._defaultAction.setActionContext(newContext);
  356. this._dropdown.setActionContext(newContext);
  357. }
  358. render(container) {
  359. this._container = container;
  360. super.render(this._container);
  361. this._container.classList.add('monaco-dropdown-with-default');
  362. const primaryContainer = $('.action-container');
  363. this._defaultAction.render(append(this._container, primaryContainer));
  364. this._register(addDisposableListener(primaryContainer, EventType.KEY_DOWN, (e) => {
  365. const event = new StandardKeyboardEvent(e);
  366. if (event.equals(17 /* KeyCode.RightArrow */)) {
  367. this._defaultAction.element.tabIndex = -1;
  368. this._dropdown.focus();
  369. event.stopPropagation();
  370. }
  371. }));
  372. const dropdownContainer = $('.dropdown-action-container');
  373. this._dropdown.render(append(this._container, dropdownContainer));
  374. this._register(addDisposableListener(dropdownContainer, EventType.KEY_DOWN, (e) => {
  375. var _a;
  376. const event = new StandardKeyboardEvent(e);
  377. if (event.equals(15 /* KeyCode.LeftArrow */)) {
  378. this._defaultAction.element.tabIndex = 0;
  379. this._dropdown.setFocusable(false);
  380. (_a = this._defaultAction.element) === null || _a === void 0 ? void 0 : _a.focus();
  381. event.stopPropagation();
  382. }
  383. }));
  384. }
  385. focus(fromRight) {
  386. if (fromRight) {
  387. this._dropdown.focus();
  388. }
  389. else {
  390. this._defaultAction.element.tabIndex = 0;
  391. this._defaultAction.element.focus();
  392. }
  393. }
  394. blur() {
  395. this._defaultAction.element.tabIndex = -1;
  396. this._dropdown.blur();
  397. this._container.blur();
  398. }
  399. setFocusable(focusable) {
  400. if (focusable) {
  401. this._defaultAction.element.tabIndex = 0;
  402. }
  403. else {
  404. this._defaultAction.element.tabIndex = -1;
  405. this._dropdown.setFocusable(false);
  406. }
  407. }
  408. dispose() {
  409. this._defaultAction.dispose();
  410. this._dropdown.dispose();
  411. super.dispose();
  412. }
  413. };
  414. DropdownWithDefaultActionViewItem = __decorate([
  415. __param(2, IKeybindingService),
  416. __param(3, INotificationService),
  417. __param(4, IContextMenuService),
  418. __param(5, IMenuService),
  419. __param(6, IInstantiationService),
  420. __param(7, IStorageService)
  421. ], DropdownWithDefaultActionViewItem);
  422. export { DropdownWithDefaultActionViewItem };
  423. /**
  424. * Creates action view items for menu actions or submenu actions.
  425. */
  426. export function createActionViewItem(instaService, action, options) {
  427. if (action instanceof MenuItemAction) {
  428. return instaService.createInstance(MenuEntryActionViewItem, action, options);
  429. }
  430. else if (action instanceof SubmenuItemAction) {
  431. if (action.item.rememberDefaultAction) {
  432. return instaService.createInstance(DropdownWithDefaultActionViewItem, action, options);
  433. }
  434. else {
  435. return instaService.createInstance(SubmenuEntryActionViewItem, action, options);
  436. }
  437. }
  438. else {
  439. return undefined;
  440. }
  441. }