Merge from vscode 31e03b8ffbb218a87e3941f2b63a249f061fe0e4 (#4986)

src/vs/code/electron-browser/processExplorer/processExplorerMain.ts

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 
 import 'vs/css!./media/processExplorer';
-import { listProcesses } from 'vs/base/node/ps';
 import { webFrame, ipcRenderer, clipboard } from 'electron';
 import { repeat } from 'vs/base/common/strings';
 import { totalmem } from 'os';
@@ -16,31 +15,46 @@ import * as platform from 'vs/base/common/platform';
 import { IContextMenuItem } from 'vs/base/parts/contextmenu/common/contextmenu';
 import { popup } from 'vs/base/parts/contextmenu/electron-browser/contextmenu';
 import { ProcessItem } from 'vs/base/common/processes';
+import { addDisposableListener } from 'vs/base/browser/dom';
+import { IDisposable } from 'vs/base/common/lifecycle';
+import { isRemoteDiagnosticError, IRemoteDiagnosticError } from 'vs/platform/diagnostics/common/diagnosticsService';
+
 
-let processList: any[];
 let mapPidToWindowTitle = new Map<number, string>();
 
 const DEBUG_FLAGS_PATTERN = /\s--(inspect|debug)(-brk|port)?=(\d+)?/;
 const DEBUG_PORT_PATTERN = /\s--(inspect|debug)-port=(\d+)/;
+const listeners: IDisposable[] = [];
+const collapsedStateCache: Map<string, boolean> = new Map<string, boolean>();
+let lastRequestTime: number;
 
-function getProcessList(rootProcess: ProcessItem) {
-	const processes: any[] = [];
+interface FormattedProcessItem {
+	cpu: string;
+	memory: string;
+	pid: string;
+	name: string;
+	formattedName: string;
+	cmd: string;
+}
+
+function getProcessList(rootProcess: ProcessItem, isLocal: boolean): FormattedProcessItem[] {
+	const processes: FormattedProcessItem[] = [];
 
 	if (rootProcess) {
-		getProcessItem(processes, rootProcess, 0);
+		getProcessItem(processes, rootProcess, 0, isLocal);
 	}
 
 	return processes;
 }
 
-function getProcessItem(processes: any[], item: ProcessItem, indent: number): void {
+function getProcessItem(processes: FormattedProcessItem[], item: ProcessItem, indent: number, isLocal: boolean): void {
 	const isRoot = (indent === 0);
 
 	const MB = 1024 * 1024;
 
 	let name = item.name;
 	if (isRoot) {
-		name = `${product.applicationName} main`;
+		name = isLocal ? `${product.applicationName} main` : 'remote agent';
 	}
 
 	if (name === 'window') {
@@ -52,9 +66,9 @@ function getProcessItem(processes: any[], item: ProcessItem, indent: number): vo
 	const formattedName = isRoot ? name : `${repeat('    ', indent)} ${name}`;
 	const memory = process.platform === 'win32' ? item.mem : (totalmem() * (item.mem / 100));
 	processes.push({
-		cpu: Number(item.load.toFixed(0)),
-		memory: Number((memory / MB).toFixed(0)),
-		pid: Number((item.pid).toFixed(0)),
+		cpu: item.load.toFixed(0),
+		memory: (memory / MB).toFixed(0),
+		pid: item.pid.toFixed(0),
 		name,
 		formattedName,
 		cmd: item.cmd
@@ -62,7 +76,7 @@ function getProcessItem(processes: any[], item: ProcessItem, indent: number): vo
 
 	// Recurse into children if any
 	if (Array.isArray(item.children)) {
-		item.children.forEach(child => getProcessItem(processes, child, indent + 1));
+		item.children.forEach(child => getProcessItem(processes, child, indent + 1, isLocal));
 	}
 }
 
@@ -71,7 +85,7 @@ function isDebuggable(cmd: string): boolean {
 	return (matches && matches.length >= 2) || cmd.indexOf('node ') >= 0 || cmd.indexOf('node.exe') >= 0;
 }
 
-function attachTo(item: ProcessItem) {
+function attachTo(item: FormattedProcessItem) {
 	const config: any = {
 		type: 'node',
 		request: 'attach',
@@ -113,35 +127,82 @@ function getProcessIdWithHighestProperty(processList: any[], propertyName: strin
 	return maxProcessId;
 }
 
-function updateProcessInfo(processList: any[]): void {
+function updateSectionCollapsedState(shouldExpand: boolean, body: HTMLElement, twistie: HTMLImageElement, sectionName: string) {
+	if (shouldExpand) {
+		body.classList.remove('hidden');
+		collapsedStateCache.set(sectionName, false);
+		twistie.src = './media/expanded.svg';
+	} else {
+		body.classList.add('hidden');
+		collapsedStateCache.set(sectionName, true);
+		twistie.src = './media/collapsed.svg';
+	}
+}
+
+function renderProcessFetchError(sectionName: string, errorMessage: string) {
+	const container = document.getElementById('process-list');
+	if (!container) {
+		return;
+	}
+
+	const body = document.createElement('tbody');
+
+	renderProcessGroupHeader(sectionName, body, container);
+
+	const errorRow = document.createElement('tr');
+	const data = document.createElement('td');
+	data.textContent = errorMessage;
+	data.className = 'error';
+	data.colSpan = 4;
+	errorRow.appendChild(data);
+
+	body.appendChild(errorRow);
+	container.appendChild(body);
+}
+
+function renderProcessGroupHeader(sectionName: string, body: HTMLElement, container: HTMLElement) {
+	const headerRow = document.createElement('tr');
+	const data = document.createElement('td');
+	data.textContent = sectionName;
+	data.colSpan = 4;
+	headerRow.appendChild(data);
+
+	const twistie = document.createElement('img');
+	updateSectionCollapsedState(!collapsedStateCache.get(sectionName), body, twistie, sectionName);
+	data.prepend(twistie);
+
+	listeners.push(addDisposableListener(data, 'click', (e) => {
+		const isHidden = body.classList.contains('hidden');
+		updateSectionCollapsedState(isHidden, body, twistie, sectionName);
+	}));
+
+	container.appendChild(headerRow);
+}
+
+function renderTableSection(sectionName: string, processList: FormattedProcessItem[], renderManySections: boolean, sectionIsLocal: boolean): void {
 	const container = document.getElementById('process-list');
 	if (!container) {
 		return;
 	}
 
-	container.innerHTML = '';
 	const highestCPUProcess = getProcessIdWithHighestProperty(processList, 'cpu');
 	const highestMemoryProcess = getProcessIdWithHighestProperty(processList, 'memory');
 
-	const tableHead = document.createElement('thead');
-	tableHead.innerHTML = `<tr>
-		<th scope="col" class="cpu">${localize('cpu', "CPU %")}</th>
-		<th scope="col" class="memory">${localize('memory', "Memory (MB)")}</th>
-		<th scope="col" class="pid">${localize('pid', "pid")}</th>
-		<th scope="col" class="nameLabel">${localize('name', "Name")}</th>
-	</tr>`;
+	const body = document.createElement('tbody');
 
-	const tableBody = document.createElement('tbody');
+	if (renderManySections) {
+		renderProcessGroupHeader(sectionName, body, container);
+	}
 
 	processList.forEach(p => {
 		const row = document.createElement('tr');
-		row.id = p.pid;
+		row.id = p.pid.toString();
 
 		const cpu = document.createElement('td');
 		p.pid === highestCPUProcess
 			? cpu.classList.add('centered', 'highest')
 			: cpu.classList.add('centered');
-		cpu.textContent = p.cpu;
+		cpu.textContent = p.cpu.toString();
 
 		const memory = document.createElement('td');
 		p.pid === highestMemoryProcess
@@ -160,10 +221,45 @@ function updateProcessInfo(processList: any[]): void {
 		name.textContent = p.formattedName;
 
 		row.append(cpu, memory, pid, name);
-		tableBody.appendChild(row);
+
+		listeners.push(addDisposableListener(row, 'contextmenu', (e) => {
+			showContextMenu(e, p, sectionIsLocal);
+		}));
+
+		body.appendChild(row);
 	});
 
-	container.append(tableHead, tableBody);
+	container.appendChild(body);
+}
+
+function updateProcessInfo(processLists: [{ name: string, rootProcess: ProcessItem | IRemoteDiagnosticError }]): void {
+	const container = document.getElementById('process-list');
+	if (!container) {
+		return;
+	}
+
+	container.innerHTML = '';
+	listeners.forEach(l => l.dispose());
+
+	const tableHead = document.createElement('thead');
+	tableHead.innerHTML = `<tr>
+		<th scope="col" class="cpu">${localize('cpu', "CPU %")}</th>
+		<th scope="col" class="memory">${localize('memory', "Memory (MB)")}</th>
+		<th scope="col" class="pid">${localize('pid', "pid")}</th>
+		<th scope="col" class="nameLabel">${localize('name', "Name")}</th>
+	</tr>`;
+
+	container.append(tableHead);
+
+	const hasMultipleMachines = Object.keys(processLists).length > 1;
+	processLists.forEach((remote, i) => {
+		const isLocal = i === 0;
+		if (isRemoteDiagnosticError(remote.rootProcess)) {
+			renderProcessFetchError(remote.name, remote.rootProcess.errorMessage);
+		} else {
+			renderTableSection(remote.name, getProcessList(remote.rootProcess, isLocal), hasMultipleMachines, isLocal);
+		}
+	});
 }
 
 function applyStyles(styles: ProcessExplorerStyles): void {
@@ -171,11 +267,11 @@ function applyStyles(styles: ProcessExplorerStyles): void {
 	const content: string[] = [];
 
 	if (styles.hoverBackground) {
-		content.push(`tbody > tr:hover  { background-color: ${styles.hoverBackground}; }`);
+		content.push(`tbody > tr:hover, table > tr:hover  { background-color: ${styles.hoverBackground}; }`);
 	}
 
 	if (styles.hoverForeground) {
-		content.push(`tbody > tr:hover{ color: ${styles.hoverForeground}; }`);
+		content.push(`tbody > tr:hover, table > tr:hover { color: ${styles.hoverForeground}; }`);
 	}
 
 	if (styles.highlightForeground) {
@@ -200,13 +296,13 @@ function applyZoom(zoomLevel: number): void {
 	browser.setZoomLevel(webFrame.getZoomLevel(), /*isTrusted*/false);
 }
 
-function showContextMenu(e: MouseEvent) {
+function showContextMenu(e: MouseEvent, item: FormattedProcessItem, isLocal: boolean) {
 	e.preventDefault();
 
 	const items: IContextMenuItem[] = [];
+	const pid = Number(item.pid);
 
-	const pid = parseInt((e.currentTarget as HTMLElement).id);
-	if (pid && typeof pid === 'number') {
+	if (isLocal) {
 		items.push({
 			label: localize('killProcess', "Kill Process"),
 			click() {
@@ -224,48 +320,37 @@ function showContextMenu(e: MouseEvent) {
 		items.push({
 			type: 'separator'
 		});
+	}
 
-		items.push({
-			label: localize('copy', "Copy"),
-			click() {
-				const row = document.getElementById(pid.toString());
-				if (row) {
-					clipboard.writeText(row.innerText);
-				}
+	items.push({
+		label: localize('copy', "Copy"),
+		click() {
+			const row = document.getElementById(pid.toString());
+			if (row) {
+				clipboard.writeText(row.innerText);
 			}
-		});
-
-		items.push({
-			label: localize('copyAll', "Copy All"),
-			click() {
-				const processList = document.getElementById('process-list');
-				if (processList) {
-					clipboard.writeText(processList.innerText);
-				}
-			}
-		});
-
-		const item = processList.filter(process => process.pid === pid)[0];
-		if (item && isDebuggable(item.cmd)) {
-			items.push({
-				type: 'separator'
-			});
-
-			items.push({
-				label: localize('debug', "Debug"),
-				click() {
-					attachTo(item);
-				}
-			});
 		}
-	} else {
+	});
+
+	items.push({
+		label: localize('copyAll', "Copy All"),
+		click() {
+			const processList = document.getElementById('process-list');
+			if (processList) {
+				clipboard.writeText(processList.innerText);
+			}
+		}
+	});
+
+	if (item && isLocal && isDebuggable(item.cmd)) {
 		items.push({
-			label: localize('copyAll', "Copy All"),
+			type: 'separator'
+		});
+
+		items.push({
+			label: localize('debug', "Debug"),
 			click() {
-				const processList = document.getElementById('process-list');
-				if (processList) {
-					clipboard.writeText(processList.innerText);
-				}
+				attachTo(item);
 			}
 		});
 	}
@@ -273,6 +358,22 @@ function showContextMenu(e: MouseEvent) {
 	popup(items);
 }
 
+function requestProcessList(totalWaitTime: number): void {
+	setTimeout(() => {
+		const nextRequestTime = Date.now();
+		const waited = totalWaitTime + nextRequestTime - lastRequestTime;
+		lastRequestTime = nextRequestTime;
+
+		// Wait at least a second between requests.
+		if (waited > 1000) {
+			ipcRenderer.send('windowsInfoRequest');
+			ipcRenderer.send('vscode:listProcesses');
+		} else {
+			requestProcessList(waited);
+		}
+	}, 200);
+}
+
 export function startup(data: ProcessExplorerData): void {
 	applyStyles(data.styles);
 	applyZoom(data.zoomLevel);
@@ -283,23 +384,14 @@ export function startup(data: ProcessExplorerData): void {
 		windows.forEach(window => mapPidToWindowTitle.set(window.pid, window.title));
 	});
 
-	setInterval(() => {
-		ipcRenderer.send('windowsInfoRequest');
-
-		listProcesses(data.pid).then(processes => {
-			processList = getProcessList(processes);
-			updateProcessInfo(processList);
-
-			const tableRows = document.getElementsByTagName('tr');
-			for (let i = 0; i < tableRows.length; i++) {
-				const tableRow = tableRows[i];
-				tableRow.addEventListener('contextmenu', (e) => {
-					showContextMenu(e);
-				});
-			}
-		});
-	}, 1200);
+	ipcRenderer.on('vscode:listProcessesResponse', (_event: Event, processRoots: [{ name: string, rootProcess: ProcessItem | IRemoteDiagnosticError }]) => {
+		updateProcessInfo(processRoots);
+		requestProcessList(0);
+	});
 
+	lastRequestTime = Date.now();
+	ipcRenderer.send('windowsInfoRequest');
+	ipcRenderer.send('vscode:listProcesses');
 
 	document.onkeydown = (e: KeyboardEvent) => {
 		const cmdOrCtrlKey = platform.isMacintosh ? e.metaKey : e.ctrlKey;