fix font selection

2026-05-31 00:10:04 +08:00 · 2026-04-27 18:49:45 +02:00
parent 2fee077d14
commit a45041ed75
4 changed files with 44 additions and 41 deletions
--- a/src/vs/workbench/contrib/issue/browser/issueReporterEditorPane.ts
+++ b/src/vs/workbench/contrib/issue/browser/issueReporterEditorPane.ts
@@ -34,7 +34,7 @@ import { IWorkbenchAssignmentService } from '../../../services/assignment/common
 import product from '../../../../platform/product/common/product.js';
 import { isLinuxSnap } from '../../../../base/common/platform.js';
 import { INativeHostService } from '../../../../platform/native/common/native.js';
-import { IContextMenuService } from '../../../../platform/contextview/browser/contextView.js';
+import { IContextMenuService, IContextViewService } from '../../../../platform/contextview/browser/contextView.js';
 import { IMarkdownRendererService } from '../../../../platform/markdown/browser/markdownRenderer.js';
 import { INotificationService, Severity } from '../../../../platform/notification/common/notification.js';
 import { IUserDataProfileService } from '../../../services/userDataProfile/common/userDataProfile.js';
@@ -69,6 +69,7 @@ export class IssueReporterEditorPane extends EditorPane {
 		@INativeHostService private readonly nativeHostService: INativeHostService,
 		@IUserDataProfileService private readonly userDataProfileService: IUserDataProfileService,
 		@IContextMenuService private readonly contextMenuService: IContextMenuService,
+		@IContextViewService private readonly contextViewService: IContextViewService,
 		@IMarkdownRendererService private readonly markdownRendererService: IMarkdownRendererService,
 		@ILanguageModelsService private readonly languageModelsService: ILanguageModelsService,
 		@INotificationService private readonly notificationService: INotificationService,
@@ -118,6 +119,7 @@ export class IssueReporterEditorPane extends EditorPane {
 			data,
 			this.recordingService.isSupported,
 			this.container,
+			this.contextViewService,
 			this.contextMenuService,
 			this.markdownRendererService,
 			hideToolbar,
--- a/src/vs/workbench/contrib/issue/browser/issueReporterOverlay.ts
+++ b/src/vs/workbench/contrib/issue/browser/issueReporterOverlay.ts
@@ -18,6 +18,7 @@ import { DisposableStore, toDisposable } from '../../../../base/common/lifecycle
 import { isMacintosh } from '../../../../base/common/platform.js';
 import { localize } from '../../../../nls.js';
 import { IMarkdownRendererService } from '../../../../platform/markdown/browser/markdownRenderer.js';
+import { IContextViewService } from '../../../../platform/contextview/browser/contextView.js';
 import { defaultButtonStyles, defaultCheckboxStyles, defaultInputBoxStyles } from '../../../../platform/theme/browser/defaultStyles.js';
 import { IssueReporterData, IssueType } from '../common/issue.js';
 import { IssueReporterModel } from './issueReporterModel.js';
@@ -118,6 +119,7 @@ export class IssueReporterOverlay {
 		private readonly data: IssueReporterData,
 		private readonly recordingSupported: boolean = false,
 		private readonly container: HTMLElement,
+		private readonly contextViewService: IContextViewService,
 		private readonly contextMenuProvider?: IContextMenuProvider,
 		private readonly markdownRendererService?: IMarkdownRendererService,
 		initialHideToolbar: boolean = true,
@@ -1324,7 +1326,7 @@ export class IssueReporterOverlay {
 		}

 		const screenshot = this.screenshots[index];
-		const editor = new ScreenshotAnnotationEditor(screenshot, this.wizardPanel);
+		const editor = new ScreenshotAnnotationEditor(screenshot, this.wizardPanel, this.contextViewService);
 		this.disposables.add(editor);

 		editor.onDidSave(annotatedDataUrl => {
--- a/src/vs/workbench/contrib/issue/browser/media/issueReporterOverlay.css
+++ b/src/vs/workbench/contrib/issue/browser/media/issueReporterOverlay.css
@@ -1010,7 +1010,7 @@
 .issue-reporter-annotation-overlay {
 	position: absolute;
 	inset: 0;
-	z-index: 10001;
+	z-index: 3;
 	background: var(--vscode-editor-background, #1e1e1e);
 	display: flex;
 	flex-direction: column;
@@ -1149,25 +1149,19 @@
 }

 /* ── Toolbar selects (font family / size) ── */
-.issue-reporter-annotation-overlay .annotation-toolbar .toolbar-select {
-	height: 26px;
-	font-size: 12px;
-	font-family: var(--vscode-font-family, inherit);
-	color: var(--vscode-dropdown-foreground, var(--vscode-foreground, #ccc));
-	background: var(--vscode-dropdown-background, #3c3c3c);
-	border: 1px solid var(--vscode-dropdown-border, #555);
-	border-radius: 4px;
-	padding: 0 6px;
-	outline: none;
-	cursor: pointer;
+.issue-reporter-annotation-overlay .annotation-toolbar .toolbar-select-container {
+	min-width: 120px;
+	margin: 0 2px;
 }

-.issue-reporter-annotation-overlay .annotation-toolbar .toolbar-select:hover {
-	background: var(--vscode-list-hoverBackground, var(--vscode-dropdown-background, #3c3c3c));
+.issue-reporter-annotation-overlay .annotation-toolbar .toolbar-select-container-small {
+	min-width: 72px;
+	margin: 0 2px;
 }

-.issue-reporter-annotation-overlay .annotation-toolbar .toolbar-select:focus {
-	border-color: var(--vscode-focusBorder, #007acc);
+.issue-reporter-annotation-overlay .annotation-toolbar .toolbar-select-container .monaco-select-box {
+	min-height: 26px;
+	padding: 2px 23px 2px 8px;
 }

 .issue-reporter-annotation-overlay .annotation-toolbar .crop-btn {
--- a/src/vs/workbench/contrib/issue/browser/screenshotAnnotation.ts
+++ b/src/vs/workbench/contrib/issue/browser/screenshotAnnotation.ts
@@ -6,12 +6,14 @@
 import { $, addDisposableListener, append, EventType, getWindow } from '../../../../base/browser/dom.js';
 import { mainWindow } from '../../../../base/browser/window.js';
 import { Button } from '../../../../base/browser/ui/button/button.js';
+import { IContextViewProvider } from '../../../../base/browser/ui/contextview/contextview.js';
 import { renderIcon } from '../../../../base/browser/ui/iconLabel/iconLabels.js';
+import { ISelectOptionItem, SelectBox } from '../../../../base/browser/ui/selectBox/selectBox.js';
 import { Codicon } from '../../../../base/common/codicons.js';
 import { Emitter, Event } from '../../../../base/common/event.js';
 import { DisposableStore } from '../../../../base/common/lifecycle.js';
 import { localize } from '../../../../nls.js';
-import { defaultButtonStyles } from '../../../../platform/theme/browser/defaultStyles.js';
+import { defaultButtonStyles, defaultSelectBoxStyles } from '../../../../platform/theme/browser/defaultStyles.js';
 import { IScreenshot } from './issueReporterOverlay.js';

 const enum AnnotationTool {
@@ -151,6 +153,7 @@ export class ScreenshotAnnotationEditor {
 	constructor(
 		private readonly screenshot: IScreenshot,
 		private readonly parentElement: HTMLElement,
+		private readonly contextViewProvider: IContextViewProvider,
 	) {
 		this.createUI();
 		this.loadImage();
@@ -241,17 +244,18 @@ export class ScreenshotAnnotationEditor {
 		}));

 		// 6. Font family selector
-		const fontFamilySelect = append(toolbar, $('select.toolbar-select')) as HTMLSelectElement;
-		fontFamilySelect.title = localize('fontFamily', "Font Family");
-		for (const ff of FONT_FAMILIES) {
-			const opt = $('option') as HTMLOptionElement;
-			opt.value = ff.value;
-			opt.textContent = ff.label;
-			fontFamilySelect.appendChild(opt);
-		}
-		fontFamilySelect.value = this.activeFontFamily;
-		this.disposables.add(addDisposableListener(fontFamilySelect, EventType.CHANGE, () => {
-			this.activeFontFamily = fontFamilySelect.value;
+		const fontFamilySelectContainer = append(toolbar, $('div.toolbar-select-container'));
+		const fontFamilyOptions: ISelectOptionItem[] = FONT_FAMILIES.map(ff => ({ text: ff.label }));
+		const fontFamilySelect = this.disposables.add(new SelectBox(
+			fontFamilyOptions,
+			Math.max(0, FONT_FAMILIES.findIndex(ff => ff.value === this.activeFontFamily)),
+			this.contextViewProvider,
+			defaultSelectBoxStyles,
+			{ ariaLabel: localize('fontFamily', "Font Family"), useCustomDrawn: true }
+		));
+		fontFamilySelect.render(fontFamilySelectContainer);
+		this.disposables.add(fontFamilySelect.onDidSelect(({ index }) => {
+			this.activeFontFamily = FONT_FAMILIES[index].value;
 			if (this.textEditState) {
 				this.textEditState.fontFamily = this.activeFontFamily;
 				this.redraw();
@@ -259,17 +263,18 @@ export class ScreenshotAnnotationEditor {
 		}));

 		// 7. Font size selector
-		const fontSizeSelect = append(toolbar, $('select.toolbar-select')) as HTMLSelectElement;
-		fontSizeSelect.title = localize('fontSize', "Font Size");
-		for (const size of FONT_SIZES) {
-			const opt = $('option') as HTMLOptionElement;
-			opt.value = String(size);
-			opt.textContent = `${size}px`;
-			fontSizeSelect.appendChild(opt);
-		}
-		fontSizeSelect.value = String(this.activeFontSize);
-		this.disposables.add(addDisposableListener(fontSizeSelect, EventType.CHANGE, () => {
-			this.activeFontSize = parseInt(fontSizeSelect.value);
+		const fontSizeSelectContainer = append(toolbar, $('div.toolbar-select-container.toolbar-select-container-small'));
+		const fontSizeOptions: ISelectOptionItem[] = FONT_SIZES.map(size => ({ text: `${size}px` }));
+		const fontSizeSelect = this.disposables.add(new SelectBox(
+			fontSizeOptions,
+			Math.max(0, FONT_SIZES.findIndex(size => size === this.activeFontSize)),
+			this.contextViewProvider,
+			defaultSelectBoxStyles,
+			{ ariaLabel: localize('fontSize', "Font Size"), useCustomDrawn: true }
+		));
+		fontSizeSelect.render(fontSizeSelectContainer);
+		this.disposables.add(fontSizeSelect.onDidSelect(({ index }) => {
+			this.activeFontSize = FONT_SIZES[index];
 			if (this.textEditState) {
 				this.textEditState.fontSize = this.activeFontSize;
 				this.redraw();