web reporter refactor and issueFormService

build/gulpfile.vscode.js

@@ -73,6 +73,8 @@ const vscodeResources = [
 	'out-build/vs/workbench/contrib/terminal/browser/media/*.sh',
 	'out-build/vs/workbench/contrib/terminal/browser/media/*.zsh',
 	'out-build/vs/workbench/contrib/webview/browser/pre/*.js',
+	'!out-build/vs/workbench/contrib/issue/browser/*.html',
+	'!out-build/vs/workbench/contrib/issue/**/*-dev.html',
 	'out-build/vs/**/markdown.css',
 	'out-build/vs/workbench/contrib/tasks/**/*.json',
 	'!**/test/**'
@@ -122,7 +124,8 @@ 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' },
+				// TODO: @justchen https://github.com/microsoft/vscode/issues/213332 make sure to remove when we use window.open on desktop.
+				{ src: [...windowBootstrapFiles, 'out-build/vs/workbench/contrib/issue/electron-sandbox/issueReporter.js'], out: 'vs/workbench/contrib/issue/electron-sandbox/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/contrib/issue/electron-sandbox/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/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/contrib/issue/electron-sandbox/issueReporter${this.environmentMainService.isBuilt ? '' : '-dev'}.html`).toString(true)
 				);
 
 				this.issueReporterWindow.on('close', () => {

src/vs/workbench/contrib/extensions/common/reportExtensionIssueAction.ts

@@ -6,7 +6,7 @@
 import * as nls from 'vs/nls';
 import { Action } from 'vs/base/common/actions';
 import { IExtensionDescription } from 'vs/platform/extensions/common/extensions';
-import { IWorkbenchIssueService } from 'vs/workbench/services/issue/common/issue';
+import { IWorkbenchIssueService } from 'vs/workbench/contrib/issue/common/issue';
 
 export class ReportExtensionIssueAction extends Action {
 

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

@@ -10,10 +10,14 @@ import { LifecyclePhase } from 'vs/workbench/services/lifecycle/common/lifecycle
 import { IProductService } from 'vs/platform/product/common/productService';
 import { Registry } from 'vs/platform/registry/common/platform';
 import { Extensions, IWorkbenchContributionsRegistry } from 'vs/workbench/common/contributions';
-import { WebIssueService } from 'vs/workbench/services/issue/browser/issueService';
-import { IWorkbenchIssueService } from 'vs/workbench/services/issue/common/issue';
+import { BrowserIssueService } from 'vs/workbench/contrib/issue/browser/issueService';
+import { IWorkbenchIssueService } from 'vs/workbench/contrib/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';
+import { IIssueMainService } from 'vs/platform/issue/common/issue';
+import { IssueFormService } from 'vs/workbench/contrib/issue/browser/issueFormService';
+import 'vs/workbench/contrib/issue/browser/issueTroubleshoot';
 
 
 class WebIssueContribution extends BaseIssueContribution {
@@ -24,8 +28,20 @@ class WebIssueContribution extends BaseIssueContribution {
 
 Registry.as<IWorkbenchContributionsRegistry>(Extensions.Workbench).registerWorkbenchContribution(WebIssueContribution, LifecyclePhase.Restored);
 
-registerSingleton(IWorkbenchIssueService, WebIssueService, InstantiationType.Delayed);
+registerSingleton(IWorkbenchIssueService, BrowserIssueService, InstantiationType.Delayed);
+registerSingleton(IIssueMainService, IssueFormService, InstantiationType.Delayed);
 
 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/code/browser/issue/issue.ts → src/vs/workbench/contrib/issue/browser/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/contrib/issue/browser/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/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/contrib/issue/browser/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/contrib/issue/browser/issueReporterService';
+import { AuxiliaryWindowMode, IAuxiliaryWindowService } from 'vs/workbench/services/auxiliaryWindow/browser/auxiliaryWindowService';
+
+export class IssueFormService 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();
+	}
+}

src/vs/code/browser/issue/issueReporterModel.ts → src/vs/workbench/contrib/issue/browser/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/contrib/issue/browser/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>