Some more styling tweaks and bit of code cleanup

.vscode/launch.json

@@ -49,7 +49,7 @@
 			"request": "attach",
 			"name": "Attach to CLI Process",
 			"protocol": "inspector",
-			"port": 1236,
+			"port": 5874,
 			"outFiles": [
 				"${workspaceFolder}/out/**/*.js"
 			]
@@ -59,7 +59,7 @@
 			"request": "attach",
 			"name": "Attach to Main Process",
 			"protocol": "inspector",
-			"port": 1237,
+			"port": 5875,
 			"outFiles": [
 				"${workspaceFolder}/out/**/*.js"
 			]

src/vs/code/electron-main/diagnostics.ts

@@ -12,7 +12,7 @@ import product from 'vs/platform/node/product';
 import pkg from 'vs/platform/node/package';
 import * as os from 'os';
 import { virtualMachineHint } from 'vs/base/node/id';
-import { repeat } from 'vs/base/common/strings';
+import { repeat, pad } from 'vs/base/common/strings';
 import { isWindows } from 'vs/base/common/platform';
 import { app } from 'electron';
 import { basename } from 'path';
@@ -93,11 +93,11 @@ export function printDiagnostics(info: IMainProcessInfo): Promise<any> {
 
 		// Environment Info
 		console.log('');
-		console.log(getSystemInfo(info));
+		console.log(formatEnvironment(info));
 
 		// Process List
 		console.log('');
-		console.log(getProcessList(info, rootProcess));
+		console.log(formatProcessList(info, rootProcess));
 
 		// Workspace Stats
 		if (info.windows.some(window => window.folders && window.folders.length > 0)) {
@@ -154,7 +154,6 @@ function formatWorkspaceStats(workspaceStats: WorkspaceStats): string {
 		line += item;
 	};
 
-
 	// File Types
 	let line = '|      File types:';
 	const maxShown = 10;
@@ -263,3 +262,65 @@ function getProcessItem(mapPidToWindowTitle: Map<number, string>, processes: Pro
 		item.children.forEach(child => getProcessItem(mapPidToWindowTitle, processes, child, indent + 1));
 	}
 }
+
+function formatEnvironment(info: IMainProcessInfo): string {
+	const MB = 1024 * 1024;
+	const GB = 1024 * MB;
+
+	const output: string[] = [];
+	output.push(`Version:          ${pkg.name} ${pkg.version} (${product.commit || 'Commit unknown'}, ${product.date || 'Date unknown'})`);
+	output.push(`OS Version:       ${os.type()} ${os.arch()} ${os.release()}`);
+	const cpus = os.cpus();
+	if (cpus && cpus.length > 0) {
+		output.push(`CPUs:             ${cpus[0].model} (${cpus.length} x ${cpus[0].speed})`);
+	}
+	output.push(`Memory (System):  ${(os.totalmem() / GB).toFixed(2)}GB (${(os.freemem() / GB).toFixed(2)}GB free)`);
+	if (!isWindows) {
+		output.push(`Load (avg):       ${os.loadavg().map(l => Math.round(l)).join(', ')}`); // only provided on Linux/macOS
+	}
+	output.push(`VM:               ${Math.round((virtualMachineHint.value() * 100))}%`);
+	output.push(`Screen Reader:    ${app.isAccessibilitySupportEnabled() ? 'yes' : 'no'}`);
+	output.push(`Process Argv:     ${info.mainArguments.join(' ')}`);
+
+	return output.join('\n');
+}
+
+function formatProcessList(info: IMainProcessInfo, rootProcess: ProcessItem): string {
+	const mapPidToWindowTitle = new Map<number, string>();
+	info.windows.forEach(window => mapPidToWindowTitle.set(window.pid, window.title));
+
+	const output: string[] = [];
+
+	output.push('CPU %\tMem MB\t   PID\tProcess');
+
+	if (rootProcess) {
+		formatProcessItem(mapPidToWindowTitle, output, rootProcess, 0);
+	}
+
+	return output.join('\n');
+}
+
+function formatProcessItem(mapPidToWindowTitle: Map<number, string>, output: string[], item: ProcessItem, indent: number): void {
+	const isRoot = (indent === 0);
+
+	const MB = 1024 * 1024;
+
+	// Format name with indent
+	let name: string;
+	if (isRoot) {
+		name = `${product.applicationName} main`;
+	} else {
+		name = `${repeat('  ', indent)} ${item.name}`;
+
+		if (item.name === 'window') {
+			name = `${name} (${mapPidToWindowTitle.get(item.pid)})`;
+		}
+	}
+	const memory = process.platform === 'win32' ? item.mem : (os.totalmem() * (item.mem / 100));
+	output.push(`${pad(Number(item.load.toFixed(0)), 5, ' ')}\t${pad(Number((memory / MB).toFixed(0)), 6, ' ')}\t${pad(Number((item.pid).toFixed(0)), 6, ' ')}\t${name}`);
+
+	// Recurse into children if any
+	if (Array.isArray(item.children)) {
+		item.children.forEach(child => formatProcessItem(mapPidToWindowTitle, output, child, indent + 1));
+	}
+}

src/vs/code/electron-main/main.ts

@@ -45,8 +45,6 @@ import { mnemonicButtonLabel } from 'vs/base/common/labels';
 import { createSpdLogService } from 'vs/platform/log/node/spdlogService';
 import { printDiagnostics } from 'vs/code/electron-main/diagnostics';
 import { BufferLogService } from 'vs/platform/log/common/bufferLog';
-import { IIssueService } from 'vs/platform/issue/common/issue';
-import { IssueService } from 'vs/platform/issue/electron-main/issueService';
 
 function createServices(args: ParsedArgs, bufferLogService: BufferLogService): IInstantiationService {
 	const services = new ServiceCollection();
@@ -69,7 +67,6 @@ function createServices(args: ParsedArgs, bufferLogService: BufferLogService): I
 	services.set(IConfigurationService, new SyncDescriptor(ConfigurationService));
 	services.set(IRequestService, new SyncDescriptor(RequestService));
 	services.set(IURLService, new SyncDescriptor(URLService, args['open-url'] ? args._urls : []));
-	services.set(IIssueService, new SyncDescriptor(IssueService));
 	services.set(IBackupMainService, new SyncDescriptor(BackupMainService));
 
 	return new InstantiationService(services, true);
@@ -106,7 +103,6 @@ class ExpectedError extends Error {
 
 function setupIPC(accessor: ServicesAccessor): TPromise<Server> {
 	const logService = accessor.get(ILogService);
-	// const issueService = accessor.get(IIssueService);
 	const environmentService = accessor.get(IEnvironmentService);
 	const requestService = accessor.get(IRequestService);
 

src/vs/code/node/cli.ts

@@ -315,9 +315,7 @@ export async function main(argv: string[]): TPromise<any> {
 			options['stdio'] = 'ignore';
 		}
 
-		const childArgs = argv.slice(2);
-		childArgs.push('--inspect-brk=1237');
-		const child = spawn(process.execPath, childArgs, options);
+		const child = spawn(process.execPath, argv.slice(2), options);
 
 		if (args.wait && waitMarkerFilePath) {
 			return new TPromise<void>(c => {

src/vs/code/node/cliProcessMain.ts

@@ -76,8 +76,6 @@ class Main {
 			const arg = argv['uninstall-extension'];
 			const ids: string[] = typeof arg === 'string' ? [arg] : arg;
 			return this.uninstallExtension(ids);
-		} else if (argv['issue']) {
-			console.log('here');
 		}
 		return undefined;
 	}
@@ -195,7 +193,6 @@ class Main {
 const eventPrefix = 'monacoworkbench';
 
 export function main(argv: ParsedArgs): TPromise<void> {
-
 	const services = new ServiceCollection();
 
 	const environmentService = new EnvironmentService(argv, process.execPath);

src/vs/issue/electron-browser/bootstrap.css

@@ -44,6 +44,7 @@ input, textarea {
 	background-color: #fff;
 	background-image: none;
 	background-clip: padding-box;
+	border-radius: .25rem;
 	border: 1px solid #ced4da;
 }
 textarea {
@@ -71,6 +72,7 @@ button {
 	user-select: none;
 	padding: .5rem 1rem;
 	font-size: 1rem;
+	border-radius: .25rem;
 	background: none;
 	transition: all .2s ease-in-out;
 }
@@ -86,5 +88,6 @@ select {
 	background-color: #fff;
 	background-image: none;
 	background-clip: padding-box;
+	border-radius: 0.25rem;
 	border: none;
 }

src/vs/issue/electron-browser/index.html

@@ -12,14 +12,14 @@
 			<div class="input-group">
 				<label for="issue-type">This is a</label>
 				<select id="issue-type" class="form-control">
-					<option value="0">Bug report</option>
-					<option value="1">Performance issue</option>
-					<option value="2">Feature request</option>
+					<option value="0">Bug Report</option>
+					<option value="1">Performance Issue</option>
+					<option value="2">Feature Request</option>
 				</select>
 			</div>
 
 			<div class="input-group">
-				<label for="issue-title">Issue Title <span class="required-input">*</span></label>
+				<label for="issue-title">Title <span class="required-input">*</span></label>
 				<div id="issue-title-validation-error" class="validation-error hidden">Please enter a title.</div>
 				<input id="issue-title" type="text" required>
 				<small id="similar-issues">
@@ -29,12 +29,12 @@
 
 			<div class="input-group">
 				<div class="two-col">
-					<label for="vscode-version">Filing against VS Code version <span class="required-input">*</span></label>
-					<input id="vscode-version" type="text" readonly/>
+					<label for="vscode-version">VS Code version <span class="required-input">*</span></label>
+					<input id="vscode-version" type="text" disabled/>
 				</div>
 				<div class="two-col">
 					<label for="os">OS Version <span class="required-input">*</span></label>
-					<input id="os" type="text" readonly/>
+					<input id="os" type="text" disabled/>
 				</div>
 			</div>
 
@@ -43,7 +43,7 @@
 					<details>
 						<summary>My System Info
 							<input type="checkbox" id="includeSystemInfo" checked>
-								<label class="caption" for="includeSystemInfo">Send data</label>
+								<label class="caption" for="includeSystemInfo">Send this data</label>
 							</input>
 						</summary>
 						<div class="block-info">
@@ -53,9 +53,9 @@
 				</div>
 				<div class="block block-process">
 					<details>
-						<summary>Processes
+						<summary>Currently Running Processes
 							<input type="checkbox" id="includeProcessInfo" checked>
-								<label class="caption" for="includeProcessInfo">Send data</label>
+								<label class="caption" for="includeProcessInfo">Send this data</label>
 							</input>
 						</summary>
 						<div class="block-info">
@@ -67,7 +67,7 @@
 					<details>
 						<summary>My Workspace Stats
 							<input type="checkbox" id="includeWorkspaceInfo" checked>
-								<label class="caption" for="includeWorkspaceInfo">Send data</label>
+								<label class="caption" for="includeWorkspaceInfo">Send this data</label>
 							</input>
 						</summary>
 						<pre class="block-info">
@@ -86,8 +86,8 @@
 					</small>
 					<div class="block-info-text">
 						<small>
-								GitHub-flavored Markdown is supported.
-								After submitting, you will still be able to edit your issue.
+								We support GitHub-flavored Markdown.
+								After submitting, you will still be able to edit your issue on GitHub.
 							</small>
 						<div id="description-validation-error" class="validation-error hidden">Please enter a description.</div>
 						<textarea name="description" id="description" cols="100" rows="15" required></textarea>

src/vs/issue/electron-browser/issueReporter.ts

@@ -3,25 +3,26 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { shell, ipcRenderer } from 'electron';
+import { shell, ipcRenderer, webFrame } from 'electron';
 import { $ } from 'vs/base/browser/dom';
-import { IWindowConfiguration, IWindowsService } from 'vs/platform/windows/common/windows';
-import { Client as ElectronIPCClient } from 'vs/base/parts/ipc/electron-browser/ipc.electron-browser';
-import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection';
+import * as browser from 'vs/base/browser/browser';
 import product from 'vs/platform/node/product';
 import pkg from 'vs/platform/node/package';
+import { Disposable } from 'vs/base/common/lifecycle';
+import { Client as ElectronIPCClient } from 'vs/base/parts/ipc/electron-browser/ipc.electron-browser';
+import { getDelayedChannel } from 'vs/base/parts/ipc/common/ipc';
+import { connect as connectNet } from 'vs/base/parts/ipc/node/ipc.net';
+import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection';
+import { IWindowConfiguration, IWindowsService } from 'vs/platform/windows/common/windows';
 import { NullTelemetryService } from 'vs/platform/telemetry/common/telemetryUtils';
 import { IEnvironmentService } from 'vs/platform/environment/common/environment';
 import { ITelemetryServiceConfig, TelemetryService } from 'vs/platform/telemetry/common/telemetryService';
 import { ITelemetryAppenderChannel, TelemetryAppenderClient } from 'vs/platform/telemetry/common/telemetryIpc';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { InstantiationService } from 'vs/platform/instantiation/common/instantiationService';
-import { getDelayedChannel } from 'vs/base/parts/ipc/common/ipc';
-import { connect as connectNet } from 'vs/base/parts/ipc/node/ipc.net';
 import { resolveCommonProperties } from 'vs/platform/telemetry/node/commonProperties';
 import { WindowsChannelClient } from 'vs/platform/windows/common/windowsIpc';
 import { EnvironmentService } from 'vs/platform/environment/node/environmentService';
-import { Disposable } from 'vs/base/common/lifecycle';
 import { IssueReporterModel, IssueReporterData } from 'vs/issue/electron-browser/issueReporterModel';
 import { IssueReporterStyles } from 'vs/platform/issue/common/issue';
 
@@ -46,6 +47,7 @@ export class IssueReporter extends Disposable {
 		});
 
 		ipcRenderer.on('issueStyleResponse', (event, styles: IssueReporterStyles) => {
+			this.applyZoom(styles.zoomLevel);
 			this.applyStyles(styles);
 		});
 
@@ -70,6 +72,15 @@ export class IssueReporter extends Disposable {
 		this.renderBlocks();
 	}
 
+	private applyZoom(zoomLevel: number) {
+		webFrame.setZoomLevel(zoomLevel);
+		browser.setZoomFactor(webFrame.getZoomFactor());
+		// See https://github.com/Microsoft/vscode/issues/26151
+		// Cannot be trusted because the webFrame might take some time
+		// until it really applies the new zoom level
+		browser.setZoomLevel(webFrame.getZoomLevel(), /*isTrusted*/false);
+	}
+
 	private applyStyles(styles: IssueReporterStyles) {
 		const styleTag = document.createElement('style');
 		const content: string[] = [];
@@ -93,7 +104,7 @@ export class IssueReporter extends Disposable {
 		}
 
 		if (styles.inputActiveBorder) {
-			content.push(`input:focus, textarea:focus, select:focus, summary:focus  { border: 1px solid ${styles.inputActiveBorder}; outline-style: none; }`);
+			content.push(`input[type='text']:focus, textarea:focus, select:focus, summary:focus  { border: 1px solid ${styles.inputActiveBorder}; outline-style: none; }`);
 		}
 
 		if (styles.textLinkColor) {
@@ -123,7 +134,6 @@ export class IssueReporter extends Disposable {
 		document.body.style.color = styles.color;
 	}
 
-	// TODO: Properly dispose of services
 	private initServices(configuration: IWindowConfiguration): void {
 		const serviceCollection = new ServiceCollection();
 		const mainProcessClient = new ElectronIPCClient(String(`window${configuration.windowId}`));
@@ -150,8 +160,6 @@ export class IssueReporter extends Disposable {
 		} else {
 			this.telemetryService = NullTelemetryService;
 		}
-
-		console.log(this.telemetryService);
 	}
 
 	private setEventHandlers(): void {
@@ -161,14 +169,17 @@ export class IssueReporter extends Disposable {
 		});
 
 		document.getElementById('includeSystemInfo').addEventListener('click', (event: Event) => {
+			event.stopPropagation();
 			this.issueReporterModel.update({ includeSystemInfo: !this.issueReporterModel.getData().includeSystemInfo });
 		});
 
 		document.getElementById('includeProcessInfo').addEventListener('click', (event: Event) => {
+			event.stopPropagation();
 			this.issueReporterModel.update({ includeProcessInfo: !this.issueReporterModel.getData().includeSystemInfo });
 		});
 
 		document.getElementById('includeWorkspaceInfo').addEventListener('click', (event: Event) => {
+			event.stopPropagation();
 			this.issueReporterModel.update({ includeWorkspaceInfo: !this.issueReporterModel.getData().includeWorkspaceInfo });
 		});
 
@@ -244,7 +255,7 @@ export class IssueReporter extends Disposable {
 
 			descriptionTitle.innerHTML = 'Steps to reproduce <span class="required-input">*</span>';
 			show(descriptionSubtitle);
-			descriptionSubtitle.innerHTML = 'When did this performance issue happen? For examples, does it occur on startup or after a specific series of actions? Any details you can provide help our investigation.';
+			descriptionSubtitle.innerHTML = 'When did this performance issue happen? For example, does it occur on startup or after a specific series of actions? Any details you can provide help our investigation.';
 		}
 		// 3 - Feature Request
 		else {
@@ -296,13 +307,19 @@ export class IssueReporter extends Disposable {
 			return;
 		}
 
-		document.getElementById('github-submit-btn').classList.add('active');
+		if (this.telemetryService) {
+			/* __GDPR__
+				"issueReporterSubmit" : {
+					"issueType" : { "classification": "SystemMetaData", "purpose": "FeatureInsight" }
+				}
+			*/
+
+			this.telemetryService.publicLog('issueReporterSubmit', { issueType: this.issueReporterModel.getData().issueType });
+		}
+
 		const issueTitle = (<HTMLInputElement>document.getElementById('issue-title')).value;
 		const baseUrl = `https://github.com/microsoft/vscode/issues/new?title=${issueTitle}&body=`;
-
 		const issueBody = this.issueReporterModel.serialize();
-
-		document.getElementById('github-submit-btn').classList.remove('active');
 		shell.openExternal(baseUrl + encodeURIComponent(issueBody));
 	}
 

src/vs/issue/electron-browser/style.css

@@ -101,6 +101,10 @@ input[type="checkbox"] {
 	display: inline-block;
 }
 
+input:disabled {
+	opacity: 0.6;
+}
+
 /* Default styles, overwritten if a theme is provided */
 input, select, textarea {
 	background-color: #3c3c3c;

src/vs/platform/issue/common/issue.ts

@@ -23,6 +23,7 @@ export interface IssueReporterStyles {
 	buttonBackground: string;
 	buttonForeground: string;
 	buttonHoverBackground: string;
+	zoomLevel: number;
 }
 
 export interface IIssueService {

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

@@ -39,7 +39,8 @@ export class IssueService implements IIssueService {
 		this._issueWindow = new BrowserWindow({
 			width: 800,
 			height: 900,
-			title: 'Issue Reporter'
+			title: 'Issue Reporter',
+			alwaysOnTop: true
 		});
 
 		this._issueWindow.loadURL(this.getIssueReporterPath());

src/vs/workbench/electron-browser/actions.ts

@@ -889,7 +889,8 @@ export class OpenIssueReporterAction extends Action {
 			inputErrorBorder: theme.getColor(inputValidationErrorBorder) && theme.getColor(inputValidationErrorBorder).toString(),
 			buttonBackground: theme.getColor(buttonBackground) && theme.getColor(buttonBackground).toString(),
 			buttonForeground: theme.getColor(buttonForeground) && theme.getColor(buttonForeground).toString(),
-			buttonHoverBackground: theme.getColor(buttonHoverBackground) && theme.getColor(buttonHoverBackground).toString()
+			buttonHoverBackground: theme.getColor(buttonHoverBackground) && theme.getColor(buttonHoverBackground).toString(),
+			zoomLevel: webFrame.getZoomLevel()
 		};
 		return this.issueService.openReporter(style).then(() => {
 			return TPromise.as(true);