Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

use terminal font for terminal suggest #239543

Merged
merged 6 commits into from
Feb 5, 2025
+61 −52
Merged

use terminal font for terminal suggest #239543

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
214622a
fix #239095
meganrogge Feb 3, 2025
cb88246
Update src/vs/workbench/services/suggest/browser/simpleSuggestWidget.ts
meganrogge Feb 3, 2025
ec92f61
clean up
meganrogge Feb 3, 2025
efe1aa6
fix error
meganrogge Feb 3, 2025
d53355a
Merge branch 'main' into merogge/font-config-2
meganrogge Feb 5, 2025
9ada392
use editor's font strategy
meganrogge Feb 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 41 additions & 3 deletions src/vs/workbench/contrib/terminalContrib/suggest/browser/terminalSuggestAddon.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,13 @@ 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';

export interface ISuggestController {
isPasting: boolean;
Expand Down Expand Up @@ -78,6 +80,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 +101,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 @@ -369,6 +374,32 @@ 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) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

taken from here

vscode/src/vs/editor/common/config/fontInfo.ts

Lines 63 to 74 in 9ada392

if (lineHeight === 0) {
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;
}

// Scale so icon shows by default
lineHeight = fontSize < 16 ? Math.ceil(fontSize * 1.5) : fontSize;
} else if (lineHeight <= 8) {
lineHeight = fontSize * lineHeight;
}
meganrogge marked this conversation as resolved.
Show resolved Hide resolved

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 @@ -404,6 +435,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 @@ -412,7 +445,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
Open in desktop
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._configurationService);
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));
meganrogge marked this conversation as resolved.
Show resolved Hide resolved
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
17 changes: 10 additions & 7 deletions src/vs/workbench/services/suggest/browser/simpleSuggestWidgetRenderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,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> | undefined, @IConfigurationService private readonly _configurationService: IConfigurationService) {
}

dispose(): void {
Expand Down Expand Up @@ -114,12 +114,15 @@ 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();
}
}));
if (this._onDidFontConfigurationChange) {
this._disposables.add(this._onDidFontConfigurationChange(() => configureFont()));
} else {
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();
}
}));
}

return { root, left, right, icon, colorspan, iconLabel, iconContainer, parametersLabel, qualifierLabel, detailsLabel, disposables };
}
Expand Down
Loading