Skip to content

Commit

Permalink
use terminal font for terminal suggest (#239543)
Browse files Browse the repository at this point in the history
  • Loading branch information
@meganrogge
meganrogge authored Feb 5, 2025
1 parent 45bf289 commit fc9297d
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 52 deletions.
4 changes: 2 additions & 2 deletions src/vs/editor/common/config/fontInfo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ import { EditorZoom } from './editorZoom.js';
* Determined from empirical observations.
* @internal
*/
const GOLDEN_LINE_HEIGHT_RATIO = platform.isMacintosh ? 1.5 : 1.35;
export const GOLDEN_LINE_HEIGHT_RATIO = platform.isMacintosh ? 1.5 : 1.35;

/**
* @internal
*/
const MINIMUM_LINE_HEIGHT = 8;
export const MINIMUM_LINE_HEIGHT = 8;

/**
* @internal
Expand Down
51 changes: 48 additions & 3 deletions src/vs/workbench/contrib/terminalContrib/suggest/browser/terminalSuggestAddon.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,14 @@ import { SimpleCompletionItem } from '../../../../services/suggest/browser/simpl
import { LineContext, SimpleCompletionModel } from '../../../../services/suggest/browser/simpleCompletionModel.js';
import { ISimpleSelectedSuggestion, SimpleSuggestWidget } from '../../../../services/suggest/browser/simpleSuggestWidget.js';
import { ITerminalCompletionService, TerminalCompletionItemKind } from './terminalCompletionService.js';
import { TerminalShellType } from '../../../../../platform/terminal/common/terminal.js';
import { TerminalSettingId, TerminalShellType } from '../../../../../platform/terminal/common/terminal.js';
import { CancellationToken, CancellationTokenSource } from '../../../../../base/common/cancellation.js';
import { IExtensionService } from '../../../../services/extensions/common/extensions.js';
import { ThemeIcon } from '../../../../../base/common/themables.js';
import { MenuId } from '../../../../../platform/actions/common/actions.js';
import { ISimpleSuggestWidgetFontInfo } from '../../../../services/suggest/browser/simpleSuggestWidgetRenderer.js';
import { ITerminalConfigurationService } from '../../../terminal/browser/terminal.js';
import { GOLDEN_LINE_HEIGHT_RATIO, MINIMUM_LINE_HEIGHT } from '../../../../../editor/common/config/fontInfo.js';

export interface ISuggestController {
isPasting: boolean;
Expand Down Expand Up @@ -78,6 +81,8 @@ export class SuggestAddon extends Disposable implements ITerminalAddon, ISuggest
readonly onAcceptedCompletion = this._onAcceptedCompletion.event;
private readonly _onDidReceiveCompletions = this._register(new Emitter<void>());
readonly onDidReceiveCompletions = this._onDidReceiveCompletions.event;
private readonly _onDidFontConfigurationChange = this._register(new Emitter<void>());
readonly onDidFontConfigurationChange = this._onDidFontConfigurationChange.event;

private _kindToIconMap = new Map<number, ThemeIcon>([
[TerminalCompletionItemKind.File, Codicon.file],
Expand All @@ -97,7 +102,8 @@ export class SuggestAddon extends Disposable implements ITerminalAddon, ISuggest
@ITerminalCompletionService private readonly _terminalCompletionService: ITerminalCompletionService,
@IConfigurationService private readonly _configurationService: IConfigurationService,
@IInstantiationService private readonly _instantiationService: IInstantiationService,
@IExtensionService private readonly _extensionService: IExtensionService
@IExtensionService private readonly _extensionService: IExtensionService,
@ITerminalConfigurationService private readonly _terminalConfigurationService: ITerminalConfigurationService,
) {
super();

Expand Down Expand Up @@ -377,6 +383,38 @@ export class SuggestAddon extends Disposable implements ITerminalAddon, ISuggest
};
}

private _getFontInfo(): ISimpleSuggestWidgetFontInfo {
const font = this._terminalConfigurationService.getFont(dom.getActiveWindow());
let lineHeight: number = font.lineHeight;
const fontSize: number = font.fontSize;
const fontFamily: string = font.fontFamily;
const letterSpacing: number = font.letterSpacing;
const fontWeight: string = this._configurationService.getValue('editor.fontWeight');

if (lineHeight <= 1) {
lineHeight = GOLDEN_LINE_HEIGHT_RATIO * fontSize;
} else if (lineHeight < MINIMUM_LINE_HEIGHT) {
// Values too small to be line heights in pixels are in ems.
lineHeight = lineHeight * fontSize;
}

// Enforce integer, minimum constraints
lineHeight = Math.round(lineHeight);
if (lineHeight < MINIMUM_LINE_HEIGHT) {
lineHeight = MINIMUM_LINE_HEIGHT;
}

const fontInfo = {
fontSize,
lineHeight,
fontWeight: fontWeight.toString(),
letterSpacing,
fontFamily
};

return fontInfo;
}

private _showCompletions(model: SimpleCompletionModel, explicitlyInvoked?: boolean): void {
if (!this._terminal?.element) {
return;
Expand Down Expand Up @@ -412,6 +450,8 @@ export class SuggestAddon extends Disposable implements ITerminalAddon, ISuggest
statusBarMenuId: MenuId.MenubarTerminalSuggestStatusMenu,
showStatusBarSettingId: TerminalSuggestSettingId.ShowStatusBar
},
this._getFontInfo.bind(this),
this._onDidFontConfigurationChange.event.bind(this)
));
this._suggestWidget.list.style(getListStyles({
listInactiveFocusBackground: editorSuggestWidgetSelectedBackground,
Expand All @@ -420,7 +460,12 @@ export class SuggestAddon extends Disposable implements ITerminalAddon, ISuggest
this._register(this._suggestWidget.onDidSelect(async e => this.acceptSelectedSuggestion(e)));
this._register(this._suggestWidget.onDidHide(() => this._terminalSuggestWidgetVisibleContextKey.reset()));
this._register(this._suggestWidget.onDidShow(() => this._terminalSuggestWidgetVisibleContextKey.set(true)));

this._register(this._configurationService.onDidChangeConfiguration(e => {
if (e.affectsConfiguration(TerminalSettingId.FontFamily) || e.affectsConfiguration(TerminalSettingId.FontSize) || e.affectsConfiguration(TerminalSettingId.LineHeight) || e.affectsConfiguration(TerminalSettingId.FontFamily) || e.affectsConfiguration('editor.fontSize') || e.affectsConfiguration('editor.fontFamily')) {
this._onDidFontConfigurationChange.fire();
}
}
));
const element = this._terminal?.element?.querySelector('.xterm-helper-textarea');
if (element) {
this._register(dom.addDisposableListener(dom.getActiveDocument(), 'click', (event) => {
Expand Down
47 changes: 9 additions & 38 deletions src/vs/workbench/services/suggest/browser/simpleSuggestWidget.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,6 @@ export class SimpleSuggestWidget extends Disposable {
readonly onDidFocus: Event<ISimpleSelectedSuggestion> = this._onDidFocus.event;
private readonly _onDidBlurDetails = this._register(new Emitter<FocusEvent>());
readonly onDidBlurDetails = this._onDidBlurDetails.event;
private readonly _onDidFontConfigurationChange = this._register(new Emitter<void>());
readonly onDidFontConfigurationChange = this._onDidFontConfigurationChange.event;

get list(): List<SimpleCompletionItem> { return this._list; }

Expand All @@ -116,6 +114,8 @@ export class SimpleSuggestWidget extends Disposable {
private readonly _container: HTMLElement,
private readonly _persistedSize: IPersistedWidgetSizeDelegate,
private readonly _options: IWorkbenchSuggestWidgetOptions,
private readonly _getFontInfo: () => ISimpleSuggestWidgetFontInfo,
private readonly _onDidFontConfigurationChange: Event<void>,
@IInstantiationService instantiationService: IInstantiationService,
@IConfigurationService private readonly _configurationService: IConfigurationService,
@IStorageService private readonly _storageService: IStorageService,
Expand All @@ -126,7 +126,6 @@ export class SimpleSuggestWidget extends Disposable {
this.element = this._register(new ResizableHTMLElement());
this.element.domNode.classList.add('workbench-suggest-widget');
this._container.appendChild(this.element.domNode);

this._ctxSuggestWidgetHasFocusedSuggestion = SimpleSuggestContext.HasFocusedSuggestion.bindTo(_contextKeyService);

class ResizeState {
Expand Down Expand Up @@ -179,7 +178,7 @@ export class SimpleSuggestWidget extends Disposable {
const applyIconStyle = () => this.element.domNode.classList.toggle('no-icons', !_configurationService.getValue('editor.suggest.showIcons'));
applyIconStyle();

const renderer = new SimpleSuggestWidgetItemRenderer(this._getFontInfo.bind(this), this._configurationService);
const renderer = new SimpleSuggestWidgetItemRenderer(this._getFontInfo.bind(this), this._onDidFontConfigurationChange.bind(this));
this._register(renderer);
this._listElement = dom.append(this.element.domNode, $('.tree'));
this._list = this._register(new List('SuggestWidget', this._listElement, {
Expand Down Expand Up @@ -228,7 +227,7 @@ export class SimpleSuggestWidget extends Disposable {

this._messageElement = dom.append(this.element.domNode, dom.$('.message'));

const details: SimpleSuggestDetailsWidget = this._register(instantiationService.createInstance(SimpleSuggestDetailsWidget, this._getFontInfo.bind(this), this.onDidFontConfigurationChange));
const details: SimpleSuggestDetailsWidget = this._register(instantiationService.createInstance(SimpleSuggestDetailsWidget, this._getFontInfo.bind(this), this._onDidFontConfigurationChange.bind(this)));
this._register(details.onDidClose(() => this.toggleDetails()));
this._details = this._register(new SimpleSuggestDetailsOverlay(details, this._listElement));
this._register(dom.addDisposableListener(this._details.widget.domNode, 'blur', (e) => this._onDidBlurDetails.fire(e)));
Expand All @@ -242,18 +241,15 @@ export class SimpleSuggestWidget extends Disposable {
this._register(this._list.onTap(e => this._onListMouseDownOrTap(e)));
this._register(this._list.onDidChangeFocus(e => this._onListFocus(e)));
this._register(this._list.onDidChangeSelection(e => this._onListSelection(e)));
this._register(this._onDidFontConfigurationChange(() => {
if (this._completionModel) {
this._list.splice(0, this._completionModel.items.length, this._completionModel!.items);
}
}));
this._register(_configurationService.onDidChangeConfiguration(e => {
if (e.affectsConfiguration('editor.suggest.showIcons')) {
applyIconStyle();
}
if (this._completionModel && (
e.affectsConfiguration('editor.fontSize') ||
e.affectsConfiguration('editor.lineHeight') ||
e.affectsConfiguration('editor.fontWeight') ||
e.affectsConfiguration('editor.fontFamily'))) {
this._list.splice(0, this._completionModel.items.length, this._completionModel!.items);
this._onDidFontConfigurationChange.fire();
}
if (_options.statusBarMenuId && _options.showStatusBarSettingId && e.affectsConfiguration(_options.showStatusBarSettingId)) {
const showStatusBar: boolean = _configurationService.getValue(_options.showStatusBarSettingId);
if (showStatusBar && !this._status) {
Expand Down Expand Up @@ -772,31 +768,6 @@ export class SimpleSuggestWidget extends Disposable {
}
}

private _getFontInfo(): ISimpleSuggestWidgetFontInfo {
let lineHeight: number = this._configurationService.getValue('editor.lineHeight');
const fontSize: number = this._configurationService.getValue('editor.fontSize');
const fontFamily: string = this._configurationService.getValue('editor.fontFamily');
const fontWeight: string = this._configurationService.getValue('editor.fontWeight');
const letterSpacing: number = this._configurationService.getValue('editor.letterSpacing');

if (lineHeight <= 1) {
// Scale so icon shows by default
lineHeight = fontSize < 16 ? Math.ceil(fontSize * 1.5) : fontSize;
} else if (lineHeight <= 8) {
lineHeight = fontSize * lineHeight;
}

const fontInfo = {
fontSize,
lineHeight,
fontWeight: fontWeight.toString(),
letterSpacing,
fontFamily
};

return fontInfo;
}

private _getLayoutInfo() {
const fontInfo = this._getFontInfo();
const itemHeight = clamp(fontInfo.lineHeight, 8, 1000);
Expand Down
11 changes: 2 additions & 9 deletions src/vs/workbench/services/suggest/browser/simpleSuggestWidgetRenderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { Emitter, Event } from '../../../../base/common/event.js';
import { createMatches } from '../../../../base/common/filters.js';
import { DisposableStore } from '../../../../base/common/lifecycle.js';
import { ThemeIcon } from '../../../../base/common/themables.js';
import { IConfigurationService } from '../../../../platform/configuration/common/configuration.js';

export function getAriaId(index: number): string {
return `simple-suggest-aria-id-${index}`;
Expand Down Expand Up @@ -60,7 +59,7 @@ export class SimpleSuggestWidgetItemRenderer implements IListRenderer<SimpleComp

readonly templateId = 'suggestion';

constructor(private readonly _getFontInfo: () => ISimpleSuggestWidgetFontInfo, @IConfigurationService private readonly _configurationService: IConfigurationService) {
constructor(private readonly _getFontInfo: () => ISimpleSuggestWidgetFontInfo, private readonly _onDidFontConfigurationChange: Event<void>) {
}

dispose(): void {
Expand Down Expand Up @@ -114,13 +113,7 @@ export class SimpleSuggestWidgetItemRenderer implements IListRenderer<SimpleComp
};

configureFont();

this._disposables.add(this._configurationService.onDidChangeConfiguration(e => {
if (e.affectsConfiguration('editor.fontSize') || e.affectsConfiguration('editor.fontFamily') || e.affectsConfiguration('editor.lineHeight') || e.affectsConfiguration('editor.fontWeight')) {
configureFont();
}
}));

this._disposables.add(this._onDidFontConfigurationChange(() => configureFont()));
return { root, left, right, icon, colorspan, iconLabel, iconContainer, parametersLabel, qualifierLabel, detailsLabel, disposables };
}

Expand Down

0 comments on commit fc9297d

Please sign in to comment.