Skip to content

Commit

Permalink
use editor font info for simple completion widget (#238702)
Browse files Browse the repository at this point in the history 
use editor font info
  • Loading branch information
@meganrogge
meganrogge authored Jan 24, 2025
1 parent 093de79 commit a1c6c50
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 46 deletions.
32 changes: 2 additions & 30 deletions src/vs/workbench/contrib/terminalContrib/suggest/browser/terminalSuggestAddon.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,14 @@ import { TerminalCapability, type ITerminalCapabilityStore } from '../../../../.
import type { IPromptInputModel, IPromptInputModelState } from '../../../../../platform/terminal/common/capabilities/commandDetection/promptInputModel.js';
import { getListStyles } from '../../../../../platform/theme/browser/defaultStyles.js';
import { activeContrastBorder } from '../../../../../platform/theme/common/colorRegistry.js';
import { ITerminalConfigurationService } from '../../../terminal/browser/terminal.js';
import type { IXtermCore } from '../../../terminal/browser/xterm-private.js';
import { TerminalStorageKeys } from '../../../terminal/common/terminalStorageKeys.js';
import { terminalSuggestConfigSection, TerminalSuggestSettingId, type ITerminalSuggestConfiguration } from '../common/terminalSuggestConfiguration.js';
import { SimpleCompletionItem } from '../../../../services/suggest/browser/simpleCompletionItem.js';
import { LineContext, SimpleCompletionModel } from '../../../../services/suggest/browser/simpleCompletionModel.js';
import { ISimpleSelectedSuggestion, SimpleSuggestWidget } from '../../../../services/suggest/browser/simpleSuggestWidget.js';
import type { ISimpleSuggestWidgetFontInfo } from '../../../../services/suggest/browser/simpleSuggestWidgetRenderer.js';
import { ITerminalCompletionService, TerminalCompletionItemKind } from './terminalCompletionService.js';
import { TerminalSettingId, TerminalShellType } from '../../../../../platform/terminal/common/terminal.js';
import { 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';
Expand Down Expand Up @@ -80,8 +78,6 @@ 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 @@ -100,7 +96,6 @@ export class SuggestAddon extends Disposable implements ITerminalAddon, ISuggest
@ITerminalCompletionService private readonly _terminalCompletionService: ITerminalCompletionService,
@IConfigurationService private readonly _configurationService: IConfigurationService,
@IInstantiationService private readonly _instantiationService: IInstantiationService,
@ITerminalConfigurationService private readonly _terminalConfigurationService: ITerminalConfigurationService,
@IExtensionService private readonly _extensionService: IExtensionService
) {
super();
Expand Down Expand Up @@ -395,36 +390,13 @@ export class SuggestAddon extends Disposable implements ITerminalAddon, ISuggest
});
}

private _getFontInfo(): ISimpleSuggestWidgetFontInfo {
const c = this._terminalConfigurationService.config;
const font = this._terminalConfigurationService.getFont(dom.getActiveWindow());
const fontInfo: ISimpleSuggestWidgetFontInfo = {
fontFamily: font.fontFamily,
fontSize: font.fontSize,
// In the editor's world, lineHeight is the pixels between the baselines of two lines of text
// In the terminal's world, lineHeight is the multiplier of the font size
// 1.5 is needed so that it's taller than a 16px icon
lineHeight: Math.ceil(c.lineHeight * font.fontSize * 1.5),
fontWeight: c.fontWeight.toString(),
letterSpacing: font.letterSpacing
};
return fontInfo;
}

private _ensureSuggestWidget(terminal: Terminal): SimpleSuggestWidget {
if (!this._suggestWidget) {

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();
}
}
));
this._suggestWidget = this._register(this._instantiationService.createInstance(
SimpleSuggestWidget,
this._container!,
this._instantiationService.createInstance(PersistedWidgetSize),
this._getFontInfo.bind(this),
this.onDidFontConfigurationChange,
{
statusBarMenuId: MenuId.MenubarTerminalSuggestStatusMenu,
showStatusBarSettingId: TerminalSuggestSettingId.ShowStatusBar
Expand Down
8 changes: 2 additions & 6 deletions ...ench/contrib/terminalContrib/suggest/test/browser/terminalSuggestAddon.integrationTest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,11 +95,6 @@ suite('Terminal Contrib Suggest Recordings', () => {

setup(async () => {
const terminalConfig = {
fontFamily: 'monospace',
fontSize: 12,
fontWeight: 'normal',
letterSpacing: 0,
lineHeight: 1,
integrated: {
suggest: {
enabled: true,
Expand All @@ -121,7 +116,8 @@ suite('Terminal Contrib Suggest Recordings', () => {
const instantiationService = workbenchInstantiationService({
configurationService: () => new TestConfigurationService({
files: { autoSave: false },
terminal: terminalConfig
terminal: terminalConfig,
editor: { fontSize: 14, fontFamily: 'Arial', lineHeight: 12, fontWeight: 'bold' }
})
}, store);
const terminalConfigurationService = instantiationService.get(ITerminalConfigurationService) as TestTerminalConfigurationService;
Expand Down
44 changes: 36 additions & 8 deletions src/vs/workbench/services/suggest/browser/simpleSuggestWidget.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import { IConfigurationService } from '../../../../platform/configuration/common
import { IStorageService, StorageScope, StorageTarget } from '../../../../platform/storage/common/storage.js';
import { canExpandCompletionItem, SimpleSuggestDetailsOverlay, SimpleSuggestDetailsWidget } from './simpleSuggestWidgetDetails.js';
import { IContextKey, IContextKeyService, RawContextKey } from '../../../../platform/contextkey/common/contextkey.js';
import { TerminalSettingId } from '../../../../platform/terminal/common/terminal.js';

const $ = dom.$;

Expand Down Expand Up @@ -106,6 +105,8 @@ 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 @@ -114,8 +115,6 @@ export class SimpleSuggestWidget extends Disposable {
constructor(
private readonly _container: HTMLElement,
private readonly _persistedSize: IPersistedWidgetSizeDelegate,
private readonly _getFontInfo: () => ISimpleSuggestWidgetFontInfo,
private readonly _onDidFontConfigurationChange: Event<void>,
private readonly _options: IWorkbenchSuggestWidgetOptions,
@IInstantiationService instantiationService: IInstantiationService,
@IConfigurationService private readonly _configurationService: IConfigurationService,
Expand Down Expand Up @@ -180,7 +179,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(_getFontInfo, this._configurationService);
const renderer = new SimpleSuggestWidgetItemRenderer(this._getFontInfo.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 @@ -229,7 +228,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, this._onDidFontConfigurationChange));
const details: SimpleSuggestDetailsWidget = this._register(instantiationService.createInstance(SimpleSuggestDetailsWidget, this._getFontInfo.bind(this), this.onDidFontConfigurationChange));
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 @@ -247,9 +246,13 @@ export class SimpleSuggestWidget extends Disposable {
if (e.affectsConfiguration('editor.suggest.showIcons')) {
applyIconStyle();
}
if (this._completionModel && e.affectsConfiguration(TerminalSettingId.FontSize) || e.affectsConfiguration(TerminalSettingId.LineHeight) || e.affectsConfiguration(TerminalSettingId.FontFamily)) {
this._layout(undefined);
this._list.splice(0, this._list.length, this._completionModel!.items);
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);
Expand Down Expand Up @@ -767,6 +770,31 @@ 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 && fontSize < 16) {
// Scale so icon shows by default
lineHeight = Math.ceil(fontSize * 1.5);
} 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
3 changes: 1 addition & 2 deletions src/vs/workbench/services/suggest/browser/simpleSuggestWidgetRenderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ 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';
import { TerminalSettingId } from '../../../../platform/terminal/common/terminal.js';

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

this._disposables.add(this._configurationService.onDidChangeConfiguration(e => {
if (e.affectsConfiguration(TerminalSettingId.FontSize) || e.affectsConfiguration(TerminalSettingId.FontFamily) || e.affectsConfiguration(TerminalSettingId.FontWeight) || e.affectsConfiguration(TerminalSettingId.LineHeight)) {
if (e.affectsConfiguration('editor.fontSize') || e.affectsConfiguration('editor.fontFamily') || e.affectsConfiguration('editor.lineHeight') || e.affectsConfiguration('editor.fontWeight')) {
configureFont();
}
}));
Expand Down

0 comments on commit a1c6c50

Please sign in to comment.