web reporter refactor and issueFormService

build/gulpfile.vscode.js

@@ -122,7 +122,7 @@ const optimizeVSCodeTask = task.define('optimize-vscode', task.series(
 			},
 			manual: [
 				{ src: [...windowBootstrapFiles, 'out-build/vs/code/electron-sandbox/workbench/workbench.js'], out: 'vs/code/electron-sandbox/workbench/workbench.js' },
-				{ src: [...windowBootstrapFiles, 'out-build/vs/code/electron-sandbox/issue/issueReporter.js'], out: 'vs/code/electron-sandbox/issue/issueReporter.js' },
+				{ src: [...windowBootstrapFiles, 'out-build/vs/workbench/electron-sandbox/issues/issueReporter.js'], out: 'vs/workbench/electron-sandbox/issues/issueReporter.js' },
 				{ src: [...windowBootstrapFiles, 'out-build/vs/code/electron-sandbox/processExplorer/processExplorer.js'], out: 'vs/code/electron-sandbox/processExplorer/processExplorer.js' }
 			]
 		}

src/buildfile.js

@@ -57,7 +57,8 @@ exports.workbenchDesktop = [
 	createModuleDescription('vs/workbench/contrib/debug/node/telemetryApp'),
 	createModuleDescription('vs/platform/files/node/watcher/watcherMain'),
 	createModuleDescription('vs/platform/terminal/node/ptyHostMain'),
-	createModuleDescription('vs/workbench/api/node/extensionHostProcess')
+	createModuleDescription('vs/workbench/api/node/extensionHostProcess'),
+	createModuleDescription('vs/workbench/electron-sandbox/issues/issueReporterMain'),
 ];
 
 exports.workbenchWeb = [
@@ -76,7 +77,6 @@ exports.code = [
 	createModuleDescription('vs/code/electron-main/main'),
 	createModuleDescription('vs/code/node/cli'),
 	createModuleDescription('vs/code/node/cliProcessMain', ['vs/code/node/cli']),
-	createModuleDescription('vs/code/electron-sandbox/issue/issueReporterMain'),
 	createModuleDescription('vs/code/node/sharedProcess/sharedProcessMain'),
 	createModuleDescription('vs/code/electron-sandbox/processExplorer/processExplorerMain')
 ];

src/vs/code/test/electron-sandbox/issue/testReporterModel.test.ts

@@ -5,7 +5,7 @@
 
 import * as assert from 'assert';
 import { ensureNoDisposablesAreLeakedInTestSuite } from 'vs/base/test/common/utils';
-import { IssueReporterModel } from 'vs/code/browser/issue/issueReporterModel';
+import { IssueReporterModel } from 'vs/workbench/browser/issues/issueReporterModel';
 import { IssueType } from 'vs/platform/issue/common/issue';
 import { normalizeGitHubUrl } from 'vs/platform/issue/common/issueReporterUtil';
 

src/vs/platform/issue/electron-main/issueMainService.ts

@@ -173,7 +173,7 @@ export class IssueMainService implements IIssueMainService {
 				});
 
 				this.issueReporterWindow.loadURL(
-					FileAccess.asBrowserUri(`vs/code/electron-sandbox/issue/issueReporter${this.environmentMainService.isBuilt ? '' : '-dev'}.html`).toString(true)
+					FileAccess.asBrowserUri(`vs/workbench/electron-sandbox/issues/issueReporter${this.environmentMainService.isBuilt ? '' : '-dev'}.html`).toString(true)
 				);
 
 				this.issueReporterWindow.on('close', () => {

src/vs/code/browser/issue/issue.ts → src/vs/workbench/browser/issues/issue.ts

@@ -14,11 +14,12 @@ import { CancellationError } from 'vs/base/common/errors';
 import { isLinuxSnap } from 'vs/base/common/platform';
 import { escape } from 'vs/base/common/strings';
 import { URI } from 'vs/base/common/uri';
-import { IssueReporterModel, IssueReporterData as IssueReporterModelData } from 'vs/code/browser/issue/issueReporterModel';
 import { localize } from 'vs/nls';
 import { IIssueMainService, IssueReporterData, IssueReporterExtensionData, IssueReporterStyles, IssueType } from 'vs/platform/issue/common/issue';
 import { normalizeGitHubUrl } from 'vs/platform/issue/common/issueReporterUtil';
 import { getIconsStyleSheet } from 'vs/platform/theme/browser/iconsStyleSheet';
+import { IssueReporterModel, IssueReporterData as IssueReporterModelData } from 'vs/workbench/browser/issues/issueReporterModel';
+import { mainWindow } from 'vs/base/browser/window';
 
 const MAX_URL_LENGTH = 7500;
 
@@ -156,7 +157,7 @@ export class BaseIssueReporterService extends Disposable {
 		const content: string[] = [];
 
 		if (styles.inputBackground) {
-			content.push(`input[type="text"], textarea, select, .issues-container > .issue > .issue-state, .block-info { background-color: ${styles.inputBackground}; }`);
+			content.push(`input[type="text"], textarea, select, .issues-container > .issue > .issue-state, .block-info { background-color: ${styles.inputBackground} !important; }`);
 		}
 
 		if (styles.inputBorder) {
@@ -166,7 +167,7 @@ export class BaseIssueReporterService extends Disposable {
 		}
 
 		if (styles.inputForeground) {
-			content.push(`input[type="text"], textarea, select, .issues-container > .issue > .issue-state, .block-info { color: ${styles.inputForeground}; }`);
+			content.push(`input[type="text"], textarea, select, .issues-container > .issue > .issue-state, .block-info { color: ${styles.inputForeground} !important; }`);
 		}
 
 		if (styles.inputErrorBorder) {
@@ -825,7 +826,8 @@ export class BaseIssueReporterService extends Disposable {
 			}),
 			headers: new Headers({
 				'Content-Type': 'application/json',
-				'Authorization': `Bearer ${this.data.githubAccessToken}`
+				'Authorization': `Bearer ${this.data.githubAccessToken}`,
+				'User-Agent': 'request'
 			})
 		};
 
@@ -835,8 +837,7 @@ export class BaseIssueReporterService extends Disposable {
 			return false;
 		}
 		const result = await response.json();
-		this.window.open(result.html_url, '_blank');
-
+		mainWindow.open(result.html_url, '_blank');
 		this.close();
 		return true;
 	}

src/vs/code/browser/issue/issueReporterModel.ts → src/vs/workbench/browser/issues/issueReporterModel.ts

@@ -13,6 +13,7 @@ export interface IssueReporterData {
 
 	versionInfo?: any;
 	systemInfo?: SystemInfo;
+	systemInfoWeb?: string;
 	processInfo?: string;
 	workspaceInfo?: string;
 
@@ -138,6 +139,10 @@ ${this.getInfos()}
 			if (this._data.includeSystemInfo && this._data.systemInfo) {
 				info += this.generateSystemInfoMd();
 			}
+
+			if (this._data.includeSystemInfo && this._data.systemInfoWeb) {
+				info += 'System Info: ' + this._data.systemInfoWeb;
+			}
 		}
 
 		if (this._data.issueType === IssueType.PerformanceIssue) {

src/vs/code/browser/issue/issueReporterPage.ts → src/vs/workbench/browser/issues/issueReporterPage.ts

@@ -24,7 +24,7 @@ const reviewGuidanceLabel = localize( // intentionally not escaped because of it
 );
 
 export default (): string => `
-<div id="issue-reporter">
+<div class="issue-reporter" id="issue-reporter">
 	<div id="english" class="input-group hidden">${escape(localize('completeInEnglish', "Please complete the form in English."))}</div>
 
 	<div id="review-guidance-help-text" class="input-group">${reviewGuidanceLabel}</div>

src/vs/code/browser/issue/issueReporterService.ts → src/vs/workbench/browser/issues/issueReporterService.ts

@@ -3,12 +3,14 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 import { $, reset, windowOpenNoOpener } from 'vs/base/browser/dom';
+import { Codicon } from 'vs/base/common/codicons';
 import { groupBy } from 'vs/base/common/collections';
 import { isMacintosh } from 'vs/base/common/platform';
 import { IProductConfiguration } from 'vs/base/common/product';
-import { BaseIssueReporterService } from 'vs/code/browser/issue/issue';
+import { ThemeIcon } from 'vs/base/common/themables';
 import { localize } from 'vs/nls';
 import { IIssueMainService, IssueReporterData, IssueReporterExtensionData } from 'vs/platform/issue/common/issue';
+import { BaseIssueReporterService } from 'vs/workbench/browser/issues/issue';
 
 // GitHub has let us know that we could up our limit here to 8k. We chose 7500 to play it safe.
 // ref https://github.com/microsoft/vscode/issues/159191
@@ -27,6 +29,17 @@ export class IssueWebReporter extends BaseIssueReporterService {
 		@IIssueMainService issueMainService: IIssueMainService
 	) {
 		super(disableExtensions, data, os, product, window, true, issueMainService);
+
+		const target = this.window.document.querySelector<HTMLElement>('.block-system .block-info');
+
+		const webInfo = this.window.navigator.userAgent;
+		if (webInfo) {
+			target?.appendChild(this.window.document.createTextNode(webInfo));
+			this.receivedSystemInfo = true;
+			this.issueReporterModel.update({ systemInfoWeb: webInfo });
+
+		}
+
 		this.setEventHandlers();
 		this.handleExtensionData(data.enabledExtensions);
 	}
@@ -174,7 +187,31 @@ export class IssueWebReporter extends BaseIssueReporterService {
 					this.issueReporterModel.update({ selectedExtension: matches[0] });
 					const selectedExtension = this.issueReporterModel.getData().selectedExtension;
 					if (selectedExtension) {
-						await this.sendReporterMenu(selectedExtension);
+						const iconElement = document.createElement('span');
+						iconElement.classList.add(...ThemeIcon.asClassNameArray(Codicon.loading), 'codicon-modifier-spin');
+						this.setLoading(iconElement);
+						const openReporterData = await this.sendReporterMenu(selectedExtension);
+						if (openReporterData) {
+							if (this.selectedExtension === selectedExtensionId) {
+								this.removeLoading(iconElement, true);
+								this.data = openReporterData;
+							} else if (this.selectedExtension !== selectedExtensionId) {
+							}
+						}
+						else {
+							if (!this.loadingExtensionData) {
+								iconElement.classList.remove(...ThemeIcon.asClassNameArray(Codicon.loading), 'codicon-modifier-spin');
+							}
+							this.removeLoading(iconElement);
+							this.clearExtensionData();
+							selectedExtension.data = undefined;
+							selectedExtension.uri = undefined;
+						}
+						if (this.selectedExtension === selectedExtensionId) {
+							// repopulates the fields with the new data given the selected extension.
+							this.updateExtensionStatus(matches[0]);
+							this.openReporter = false;
+						}
 					} else {
 						this.issueReporterModel.update({ selectedExtension: undefined });
 						this.clearSearchResults();

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

@@ -14,6 +14,7 @@ import { WebIssueService } from 'vs/workbench/services/issue/browser/issueServic
 import { IWorkbenchIssueService } from 'vs/workbench/services/issue/common/issue';
 import { BaseIssueContribution } from 'vs/workbench/contrib/issue/common/issue.contribution';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
+import { IConfigurationRegistry, Extensions as ConfigurationExtensions } from 'vs/platform/configuration/common/configurationRegistry';
 
 
 class WebIssueContribution extends BaseIssueContribution {
@@ -29,3 +30,14 @@ registerSingleton(IWorkbenchIssueService, WebIssueService, InstantiationType.Del
 CommandsRegistry.registerCommand('_issues.getSystemStatus', (accessor) => {
 	return nls.localize('statusUnsupported', "The --status argument is not yet supported in browsers.");
 });
+
+Registry.as<IConfigurationRegistry>(ConfigurationExtensions.Configuration)
+	.registerConfiguration({
+		properties: {
+			'issueReporter.experimental.webReporter': {
+				type: 'boolean',
+				default: true,
+				description: 'Enable experimental issue reporter for web.',
+			},
+		}
+	});

src/vs/workbench/contrib/issue/browser/issueFormService.ts

@@ -0,0 +1,180 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { safeInnerHtml } from 'vs/base/browser/dom';
+import { mainWindow } from 'vs/base/browser/window';
+import { DisposableStore } from 'vs/base/common/lifecycle';
+import { URI } from 'vs/base/common/uri';
+import BaseHtml from 'vs/workbench/browser/issues/issueReporterPage';
+import 'vs/css!./media/issueReporter';
+import { IMenuService, MenuId } from 'vs/platform/actions/common/actions';
+import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
+import { PerformanceInfo, SystemInfo } from 'vs/platform/diagnostics/common/diagnostics';
+import { ExtensionIdentifier, ExtensionIdentifierSet } from 'vs/platform/extensions/common/extensions';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { IIssueMainService, IssueReporterData, ProcessExplorerData } from 'vs/platform/issue/common/issue';
+import product from 'vs/platform/product/common/product';
+import { IssueWebReporter } from 'vs/workbench/browser/issues/issueReporterService';
+import { AuxiliaryWindowMode, IAuxiliaryWindowService } from 'vs/workbench/services/auxiliaryWindow/browser/auxiliaryWindowService';
+
+export class IssueMainService implements IIssueMainService {
+
+	readonly _serviceBrand: undefined;
+
+	private issueReporterWindow: Window | null = null;
+	private extensionIdentifierSet: ExtensionIdentifierSet = new ExtensionIdentifierSet();
+
+	constructor(
+		@IInstantiationService private readonly instantiationService: IInstantiationService,
+		@IAuxiliaryWindowService private readonly auxiliaryWindowService: IAuxiliaryWindowService,
+		@IMenuService private readonly menuService: IMenuService,
+		@IContextKeyService private readonly contextKeyService: IContextKeyService,
+	) {
+
+		// listen for messages from the main window
+		mainWindow.addEventListener('message', async (event) => {
+			if (event.data && event.data.sendChannel === 'vscode:triggerReporterMenu') {
+				// creates menu from contributed
+				const menu = this.menuService.createMenu(MenuId.IssueReporter, this.contextKeyService);
+
+				// render menu and dispose
+				const actions = menu.getActions({ renderShortTitle: true }).flatMap(entry => entry[1]);
+				for (const action of actions) {
+					try {
+						if (action.item && 'source' in action.item && action.item.source?.id === event.data.extensionId) {
+							this.extensionIdentifierSet.add(event.data.extensionId);
+							await action.run();
+						}
+					} catch (error) {
+						console.error(error);
+					}
+				}
+
+				if (!this.extensionIdentifierSet.has(event.data.extensionId)) {
+					// send undefined to indicate no action was taken
+					const replyChannel = `vscode:triggerReporterMenuResponse`;
+					mainWindow.postMessage({ replyChannel }, '*');
+				}
+
+				menu.dispose();
+			}
+		});
+
+	}
+
+	async openReporter(data: IssueReporterData): Promise<void> {
+		if (data.extensionId && this.extensionIdentifierSet.has(data.extensionId)) {
+			const replyChannel = `vscode:triggerReporterMenuResponse`;
+			mainWindow.postMessage({ data, replyChannel }, '*');
+			this.extensionIdentifierSet.delete(new ExtensionIdentifier(data.extensionId));
+		}
+
+		if (this.issueReporterWindow) {
+			this.issueReporterWindow.focus();
+			return;
+		}
+
+		const disposables = new DisposableStore();
+
+		// Auxiliary Window
+		const auxiliaryWindow = disposables.add(await this.auxiliaryWindowService.open({ mode: AuxiliaryWindowMode.Normal }));
+
+		this.issueReporterWindow = auxiliaryWindow.window;
+
+
+
+		if (auxiliaryWindow) {
+			await auxiliaryWindow.whenStylesHaveLoaded;
+			auxiliaryWindow.window.document.title = 'Issue Reporter';
+			auxiliaryWindow.window.document.body.classList.add('issue-reporter-body');
+
+			// custom issue reporter wrapper
+			const div = document.createElement('div');
+			div.classList.add('monaco-workbench');
+
+			// removes preset monaco-workbench
+			auxiliaryWindow.container.remove();
+			auxiliaryWindow.window.document.body.appendChild(div);
+			safeInnerHtml(div, BaseHtml());
+
+			// create issue reporter and instantiate
+			const issueReporter = this.instantiationService.createInstance(IssueWebReporter, false, data, { type: '', arch: '', release: '' }, product, auxiliaryWindow.window);
+			issueReporter.render();
+		} else {
+			console.error('Failed to open auxiliary window');
+		}
+
+		// handle closing issue reporter
+		this.issueReporterWindow?.addEventListener('beforeunload', () => {
+			auxiliaryWindow.window.close();
+			this.issueReporterWindow = null;
+		});
+	}
+
+	async openProcessExplorer(data: ProcessExplorerData): Promise<void> {
+		throw new Error('Method not implemented.');
+	}
+
+	stopTracing(): Promise<void> {
+		throw new Error('Method not implemented.');
+	}
+	getSystemStatus(): Promise<string> {
+		throw new Error('Method not implemented.');
+	}
+	$getSystemInfo(): Promise<SystemInfo> {
+		throw new Error('Method not implemented.');
+	}
+	$getPerformanceInfo(): Promise<PerformanceInfo> {
+		throw new Error('Method not implemented.');
+	}
+	$reloadWithExtensionsDisabled(): Promise<void> {
+		throw new Error('Method not implemented.');
+	}
+	$showConfirmCloseDialog(): Promise<void> {
+		throw new Error('Method not implemented.');
+	}
+	$showClipboardDialog(): Promise<boolean> {
+		throw new Error('Method not implemented.');
+	}
+	$getIssueReporterUri(extensionId: string): Promise<URI> {
+		throw new Error('Method not implemented.');
+	}
+	$getIssueReporterData(extensionId: string): Promise<string> {
+		throw new Error('Method not implemented.');
+	}
+	$getIssueReporterTemplate(extensionId: string): Promise<string> {
+		throw new Error('Method not implemented.');
+	}
+	$getReporterStatus(extensionId: string, extensionName: string): Promise<boolean[]> {
+		throw new Error('Method not implemented.');
+	}
+
+	async $sendReporterMenu(extensionId: string, extensionName: string): Promise<IssueReporterData | undefined> {
+		const sendChannel = `vscode:triggerReporterMenu`;
+		mainWindow.postMessage({ sendChannel, extensionId, extensionName }, '*');
+
+		const result = await new Promise((resolve, reject) => {
+			const timeout = setTimeout(() => {
+				mainWindow.removeEventListener('message', listener);
+				reject(new Error('Timeout exceeded'));
+			}, 5000); // Set the timeout value in milliseconds (e.g., 5000 for 5 seconds)
+
+			const listener = (event: MessageEvent) => {
+				const replyChannel = `vscode:triggerReporterMenuResponse`;
+				if (event.data && event.data.replyChannel === replyChannel) {
+					clearTimeout(timeout);
+					mainWindow.removeEventListener('message', listener);
+					resolve(event.data.data);
+				}
+			};
+			mainWindow.addEventListener('message', listener);
+		});
+
+		return result as IssueReporterData | undefined;
+	}
+
+	async $closeReporter(): Promise<void> {
+		this.issueReporterWindow?.close();
+	}
+}