add config gear icon and make empty hint text consistent (#216633)

src/vs/platform/actions/common/actions.ts

@@ -171,6 +171,7 @@ export class MenuId {
 	static readonly InteractiveCellDelete = new MenuId('InteractiveCellDelete');
 	static readonly InteractiveCellExecute = new MenuId('InteractiveCellExecute');
 	static readonly InteractiveInputExecute = new MenuId('InteractiveInputExecute');
+	static readonly InteractiveInputConfig = new MenuId('InteractiveInputConfig');
 	static readonly ReplInputExecute = new MenuId('ReplInputExecute');
 	static readonly IssueReporter = new MenuId('IssueReporter');
 	static readonly NotebookToolbar = new MenuId('NotebookToolbar');

src/vs/workbench/contrib/interactive/browser/interactive.contribution.ts

@@ -23,6 +23,7 @@ import { Context as SuggestContext } from 'vs/editor/contrib/suggest/browser/sug
 import { localize, localize2 } from 'vs/nls';
 import { ILocalizedString } from 'vs/platform/action/common/action';
 import { Action2, MenuId, registerAction2 } from 'vs/platform/actions/common/actions';
+import { ICommandService } from 'vs/platform/commands/common/commands';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { IConfigurationRegistry, Extensions as ConfigurationExtensions } from 'vs/platform/configuration/common/configurationRegistry';
 import { ContextKeyExpr } from 'vs/platform/contextkey/common/contextkey';
@@ -431,6 +432,25 @@ registerAction2(class extends Action2 {
 	}
 });
 
+registerAction2(class extends Action2 {
+	constructor() {
+		super({
+			id: 'interactive.configure',
+			title: localize2('interactive.configExecute', 'Configure input box behavior'),
+			category: interactiveWindowCategory,
+			f1: false,
+			icon: icons.configIcon,
+			menu: {
+				id: MenuId.InteractiveInputConfig
+			}
+		});
+	}
+
+	override run(accessor: ServicesAccessor, ...args: any[]): void {
+		accessor.get(ICommandService).executeCommand('workbench.action.openSettings', '@tag:replExecute');
+	}
+});
+
 registerAction2(class extends Action2 {
 	constructor() {
 		super({

src/vs/workbench/contrib/interactive/browser/interactiveEditor.ts

@@ -88,6 +88,7 @@ export class InteractiveEditor extends EditorPane implements IEditorPaneWithScro
 	private _inputCellContainer!: HTMLElement;
 	private _inputFocusIndicator!: HTMLElement;
 	private _inputRunButtonContainer!: HTMLElement;
+	private _inputConfigContainer!: HTMLElement;
 	private _inputEditorContainer!: HTMLElement;
 	private _codeEditorWidget!: CodeEditorWidget;
 	private _notebookWidgetService: INotebookEditorService;
@@ -198,9 +199,36 @@ export class InteractiveEditor extends EditorPane implements IEditorPaneWithScro
 		this._inputRunButtonContainer = DOM.append(this._inputCellContainer, DOM.$('.run-button-container'));
 		this._setupRunButtonToolbar(this._inputRunButtonContainer);
 		this._inputEditorContainer = DOM.append(this._inputCellContainer, DOM.$('.input-editor-container'));
+		this._setupConfigButtonToolbar();
 		this._createLayoutStyles();
 	}
 
+	private _setupConfigButtonToolbar() {
+		this._inputConfigContainer = DOM.append(this._inputEditorContainer, DOM.$('.input-toolbar-container'));
+		this._inputConfigContainer.style.position = 'absolute';
+		this._inputConfigContainer.style.right = '0';
+		this._inputConfigContainer.style.marginTop = '6px';
+		this._inputConfigContainer.style.marginRight = '12px';
+		this._inputConfigContainer.style.zIndex = '1';
+		this._inputConfigContainer.style.display = 'none';
+
+		const menu = this._register(this._menuService.createMenu(MenuId.InteractiveInputConfig, this._contextKeyService));
+		const toolbar = this._register(new ToolBar(this._inputConfigContainer, this._contextMenuService, {
+			getKeyBinding: action => this._keybindingService.lookupKeybinding(action.id),
+			actionViewItemProvider: (action, options) => {
+				return createActionViewItem(this._instantiationService, action, options);
+			},
+			renderDropdownAsChildElement: true
+		}));
+
+		const primary: IAction[] = [];
+		const secondary: IAction[] = [];
+		const result = { primary, secondary };
+
+		createAndFillInActionBarActions(menu, { shouldForwardArgs: true }, result);
+		toolbar.setActions([...primary, ...secondary]);
+	}
+
 	private _setupRunButtonToolbar(runButtonContainer: HTMLElement) {
 		const menu = this._register(this._menuService.createMenu(MenuId.InteractiveInputExecute, this._contextKeyService));
 		this._runbuttonToolbar = this._register(new ToolBar(runButtonContainer, this._contextMenuService, {
@@ -655,9 +683,11 @@ export class InteractiveEditor extends EditorPane implements IEditorPaneWithScro
 
 		if (!this._hintElement && !shouldHide) {
 			this._hintElement = this._instantiationService.createInstance(ReplInputHintContentWidget, this._codeEditorWidget);
+			this._inputConfigContainer.style.display = 'block';
 		} else if (this._hintElement && shouldHide) {
 			this._hintElement.dispose();
 			this._hintElement = undefined;
+			this._inputConfigContainer.style.display = 'none';
 		}
 	}
 

src/vs/workbench/contrib/interactive/browser/replInputHintContentWidget.ts

@@ -14,9 +14,6 @@ import { ConfigurationChangedEvent, EditorOption } from 'vs/editor/common/config
 import { localize } from 'vs/nls';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
-import { editorForeground } from 'vs/platform/theme/common/colorRegistry';
-import { resolveColorValue } from 'vs/platform/theme/common/colorUtils';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { AccessibilityVerbositySettingId } from 'vs/workbench/contrib/accessibility/browser/accessibilityConfiguration';
 import { InteractiveWindowSetting } from 'vs/workbench/contrib/interactive/browser/interactiveCommon';
 
@@ -32,7 +29,6 @@ export class ReplInputHintContentWidget extends Disposable implements IContentWi
 		private readonly editor: ICodeEditor,
 		@IConfigurationService private readonly configurationService: IConfigurationService,
 		@IKeybindingService private readonly keybindingService: IKeybindingService,
-		@IThemeService private readonly themeService: IThemeService,
 	) {
 		super();
 
@@ -68,7 +64,7 @@ export class ReplInputHintContentWidget extends Disposable implements IContentWi
 
 	getDomNode(): HTMLElement {
 		if (!this.domNode) {
-			this.domNode = dom.$('.repl-input-hint');
+			this.domNode = dom.$('.empty-editor-hint');
 			this.domNode.style.width = 'max-content';
 			this.domNode.style.paddingLeft = '4px';
 
@@ -91,12 +87,10 @@ export class ReplInputHintContentWidget extends Disposable implements IContentWi
 		while (this.domNode.firstChild) {
 			this.domNode.removeChild(this.domNode.firstChild);
 		}
-		const transparentForeground = resolveColorValue(editorForeground, this.themeService.getColorTheme())?.transparent(0.4);
 
 		const hintElement = dom.$('div.empty-hint-text');
 		hintElement.style.cursor = 'text';
 		hintElement.style.whiteSpace = 'nowrap';
-		hintElement.style.color = transparentForeground?.toString() || '';
 
 		const keybinding = this.getKeybinding();
 		const keybindingHintLabel = keybinding?.getLabel();

src/vs/workbench/contrib/notebook/browser/notebookIcons.ts

@@ -9,6 +9,7 @@ import { registerIcon } from 'vs/platform/theme/common/iconRegistry';
 
 export const selectKernelIcon = registerIcon('notebook-kernel-select', Codicon.serverEnvironment, localize('selectKernelIcon', 'Configure icon to select a kernel in notebook editors.'));
 export const executeIcon = registerIcon('notebook-execute', Codicon.play, localize('executeIcon', 'Icon to execute in notebook editors.'));
+export const configIcon = registerIcon('notebook-config', Codicon.gear, localize('configIcon', 'Icon to configure in notebook editors.'));
 export const executeAboveIcon = registerIcon('notebook-execute-above', Codicon.runAbove, localize('executeAboveIcon', 'Icon to execute above cells in notebook editors.'));
 export const executeBelowIcon = registerIcon('notebook-execute-below', Codicon.runBelow, localize('executeBelowIcon', 'Icon to execute below cells in notebook editors.'));
 export const stopIcon = registerIcon('notebook-stop', Codicon.primitiveSquare, localize('stopIcon', 'Icon to stop an execution in notebook editors.'));