Change:
hitting tab and shift tab to get to the "command center group" and then arrow keys once in that group. !

Discussion:
*--------------------------------------------------------------------------------------------*/ import { reset } from 'vs/base/browser/dom'; <del> import { ActionViewItem } from 'vs/base/browser/ui/actionbar/actionViewItems'; </del> import { IHoverDelegate } from 'vs/base/browser/ui/iconLabel/iconHoverDelegate'; import { renderIcon } from 'vs/base/browser/ui/iconLabel/iconLabels'; import { ToolBar } from 'vs/base/browser/ui/toolbar/toolbar'; <del> import { Action, IAction } from 'vs/base/common/actions'; </del> <ins> import { IAction } from 'vs/base/common/actions'; </ins> import { Codicon } from 'vs/base/common/codicons'; import { Emitter, Event } from 'vs/base/common/event'; import { DisposableStore } from 'vs/base/common/lifecycle'; import { assertType } from 'vs/base/common/types'; import { localize } from 'vs/nls'; import { createActionViewItem, createAndFillInContextMenuActions, MenuEntryActionViewItem } from 'vs/platform/actions/browser/menuEntryActionViewItem'; <del> import { IMenuService, MenuId, MenuItemAction } from 'vs/platform/actions/common/actions'; </del> <ins> import { Action2, IMenuService, MenuId, MenuItemAction, registerAction2 } from 'vs/platform/actions/common/actions'; </ins> import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { IContextMenuService } from 'vs/platform/contextview/browser/contextView'; <del> import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; </del> <ins> import { IInstantiationService, ServicesAccessor } from 'vs/platform/instantiation/common/instantiation'; </ins> import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput'; import * as colors from 'vs/platform/theme/common/colorRegistry';

override render(container: HTMLElement): void { super.render(container); <del> container.classList.add('quickopen'); </del> <ins> container.classList.add('quickopen', 'left'); </ins> assertType(this.label); this.label.classList.add('search');

this.workspaceTitle.classList.add('search-label'); this._updateFromWindowTitle(); reset(this.label, searchIcon, this.workspaceTitle); <del> this._renderAllQuickPickItem(container); </del> <ins> // this._renderAllQuickPickItem(container); </ins> this._store.add(windowTitle.onDidChange(this._updateFromWindowTitle, this)); }

: localize('title2', "Search {0} u2014 {1}", windowTitle.workspaceName, windowTitle.value); this._applyUpdateTooltip(title); } <ins> } return instantiationService.createInstance(InputLikeViewItem, action, { hoverDelegate }); </ins> <del> private _renderAllQuickPickItem(parent: HTMLElement): void { const container = document.createElement('span'); container.classList.add('all-options'); parent.appendChild(container); const action = new Action('all', localize('all', "Show Search Modes..."), Codicon.chevronDown.classNames, true, () => { quickInputService.quickAccess.show('?'); }); const dropdown = new ActionViewItem(undefined, action, { icon: true, label: false, hoverDelegate }); dropdown.render(container); this._store.add(dropdown); this._store.add(action); </del> <ins> } else if (action instanceof MenuItemAction && action.id === 'commandCenter.help') { class ExtraClass extends MenuEntryActionViewItem { override render(container: HTMLElement): void { super.render(container); container.classList.add('quickopen', 'right'); </ins> } } <del> return instantiationService.createInstance(InputLikeViewItem, action, { hoverDelegate }); } return createActionViewItem(instantiationService, action, { hoverDelegate }); </del> <ins> return instantiationService.createInstance(ExtraClass, action, { hoverDelegate }); } else { return createActionViewItem(instantiationService, action, { hoverDelegate }); } </ins> } }); const menu = this._disposables.add(menuService.createMenu(MenuId.CommandCenter, contextKeyService));

} } <ins> registerAction2(class extends Action2 { constructor() { super({ id: 'commandCenter.help', title: localize('all', "Show Search Modes..."), icon: Codicon.chevronDown, menu: { id: MenuId.CommandCenter, order: 100 } }); } run(accessor: ServicesAccessor): void { accessor.get(IQuickInputService).quickAccess.show('?'); } }); </ins> // --- theme colors // foreground (inactive and active)

color: var(--vscode-commandCenter-foreground); background-color: var(--vscode-commandCenter-background); border: 1px solid var(--vscode-commandCenter-border); <del> border-radius: 5px; height: 20px; line-height: 18px; width: 38vw; max-width: 600px; min-width: 32px; margin: 0 4px; </del> flex-direction: row; justify-content: center; overflow: hidden;

.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen:HOVER { color: var(--vscode-commandCenter-activeForeground); background-color: var(--vscode-commandCenter-activeBackground); <del> line-height: 18px; </del> } <del> .monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center:HOVER .quickopen .action-label { background-color: transparent !important; outline-color: transparent !important; </del> <ins> .monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen.left { /* border,margin tricks */ margin-left: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; border-right: none; /* width */ width: 38vw; max-width: 600px; min-width: 32px; } .monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen.right { /* border,margin tricks */ margin-right: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-left: none; /* width */ width: 16px; </ins> } <del> .monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen>.action-label.search { </del> <ins> .monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen>.action-label { height: 22px; line-height: 22px; padding: 0; background-color: transparent; </ins> display: inline-flex; text-align: center; font-size: 12px; <del> background-color: inherit; </del> justify-content: center; <del> width: calc(100% - 19px); </del> <ins> width: 100%; </ins> } <del> .monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen>.action-label.search>.search-icon { </del> <ins> .monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen.left>.action-label.search>.search-icon { </ins> font-size: 14px; opacity: .8; margin: auto 3px; } <del> .monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen>.action-label.search>.search-label { </del> <ins> .monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen.left>.action-label.search>.search-label { </ins> overflow: hidden; text-overflow: ellipsis; } <del> .monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen>.all-options>.action-label { text-align: center; font-size: 12px; width: 16px; border-left: 1px solid transparent; border-radius: 0; padding-right: 0; } .monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center:HOVER .action-item.quickopen>.all-options>.action-label { border-color: var(--vscode-commandCenter-border); } </del> /* Menubar */ .monaco-workbench .part.titlebar>.titlebar-container>.menubar { /* move menubar above drag region as negative z-index on drag region cause greyscale AA */