Port UI (#85603)

Part of microsoft/vscode-remote-release#1777

src/vs/platform/actions/common/actions.ts

@@ -97,6 +97,9 @@ export const enum MenuId {
 	StatusBarWindowIndicatorMenu,
 	TouchBarContext,
 	TitleBarContext,
+	TunnelContext,
+	TunnelInline,
+	TunnelTitle,
 	ViewItemContext,
 	ViewTitle,
 	CommentThreadTitle,

src/vs/platform/remote/common/tunnel.ts

@@ -5,22 +5,26 @@
 
 import { createDecorator } from 'vs/platform/instantiation/common/instantiation';
 import { URI } from 'vs/base/common/uri';
+import { Event } from 'vs/base/common/event';
 
 export const ITunnelService = createDecorator<ITunnelService>('tunnelService');
 
 export interface RemoteTunnel {
 	readonly tunnelRemotePort: number;
 	readonly tunnelLocalPort: number;
-
+	readonly localAddress?: URI;
 	dispose(): void;
 }
 
 export interface ITunnelService {
 	_serviceBrand: undefined;
 
 	readonly tunnels: Promise<readonly RemoteTunnel[]>;
+	readonly onTunnelOpened: Event<RemoteTunnel>;
+	readonly onTunnelClosed: Event<number>;
 
-	openTunnel(remotePort: number): Promise<RemoteTunnel> | undefined;
+	openTunnel(remotePort: number, localPort?: number): Promise<RemoteTunnel> | undefined;
+	closeTunnel(remotePort: number): Promise<void>;
 }
 
 export function extractLocalHostUriMetaDataForPortMapping(uri: URI): { address: string, port: number } | undefined {

src/vs/platform/remote/common/tunnelService.ts

@@ -4,13 +4,19 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { ITunnelService, RemoteTunnel } from 'vs/platform/remote/common/tunnel';
+import { Event, Emitter } from 'vs/base/common/event';
 
 export class NoOpTunnelService implements ITunnelService {
 	_serviceBrand: undefined;
 
 	public readonly tunnels: Promise<readonly RemoteTunnel[]> = Promise.resolve([]);
-
+	private _onTunnelOpened: Emitter<RemoteTunnel> = new Emitter();
+	public onTunnelOpened: Event<RemoteTunnel> = this._onTunnelOpened.event;
+	private _onTunnelClosed: Emitter<number> = new Emitter();
+	public onTunnelClosed: Event<number> = this._onTunnelClosed.event;
 	openTunnel(_remotePort: number): Promise<RemoteTunnel> | undefined {
 		return undefined;
 	}
+	async closeTunnel(_remotePort: number): Promise<void> {
+	}
 }

src/vs/workbench/contrib/remote/browser/media/tunnelView.css

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.customview-tree .tunnel-view-label {
+	flex: 1;
+}
+
+.customview-tree .tunnel-view-label .action-label.codicon {
+	margin-top: 4px;
+}

src/vs/workbench/contrib/remote/browser/remote.ts

@@ -44,6 +44,9 @@ import { isStringArray } from 'vs/base/common/types';
 import { IRemoteExplorerService, HelpInformation } from 'vs/workbench/services/remote/common/remoteExplorerService';
 import { IWorkbenchEnvironmentService } from 'vs/workbench/services/environment/common/environmentService';
 import { startsWith } from 'vs/base/common/strings';
+import { TunnelPanelDescriptor, TunnelViewModel } from 'vs/workbench/contrib/remote/browser/tunnelView';
+import { IAddedViewDescriptorRef } from 'vs/workbench/browser/parts/views/views';
+import { ViewletPane } from 'vs/workbench/browser/parts/views/paneViewlet';
 
 class HelpModel {
 	items: IHelpItem[] | undefined;
@@ -263,6 +266,7 @@ class HelpAction extends Action {
 
 export class RemoteViewlet extends FilterViewContainerViewlet {
 	private actions: IAction[] | undefined;
+	private tunnelPanelDescriptor: TunnelPanelDescriptor | undefined;
 
 	constructor(
 		@IWorkbenchLayoutService layoutService: IWorkbenchLayoutService,
@@ -274,7 +278,8 @@ export class RemoteViewlet extends FilterViewContainerViewlet {
 		@IThemeService themeService: IThemeService,
 		@IContextMenuService contextMenuService: IContextMenuService,
 		@IExtensionService extensionService: IExtensionService,
-		@IRemoteExplorerService remoteExplorerService: IRemoteExplorerService
+		@IRemoteExplorerService private readonly remoteExplorerService: IRemoteExplorerService,
+		@IWorkbenchEnvironmentService private readonly environmentService: IWorkbenchEnvironmentService,
 	) {
 		super(VIEWLET_ID, remoteExplorerService.onDidChangeTargetType, configurationService, layoutService, telemetryService, storageService, instantiationService, themeService, contextMenuService, extensionService, contextService);
 	}
@@ -308,6 +313,17 @@ export class RemoteViewlet extends FilterViewContainerViewlet {
 		const title = nls.localize('remote.explorer', "Remote Explorer");
 		return title;
 	}
+
+	onDidAddViews(added: IAddedViewDescriptorRef[]): ViewletPane[] {
+		// Call to super MUST be first, since registering the additional view will cause this to be called again.
+		const panels: ViewletPane[] = super.onDidAddViews(added);
+		if (this.environmentService.configuration.remoteAuthority && !this.tunnelPanelDescriptor && this.configurationService.getValue<boolean>('remote.forwardedPortsView.visible')) {
+			this.tunnelPanelDescriptor = new TunnelPanelDescriptor(new TunnelViewModel(this.remoteExplorerService), this.environmentService);
+			const viewsRegistry = Registry.as<IViewsRegistry>(Extensions.ViewsRegistry);
+			viewsRegistry.registerViews([this.tunnelPanelDescriptor!], VIEW_CONTAINER);
+		}
+		return panels;
+	}
 }
 
 Registry.as<ViewletRegistry>(ViewletExtensions.Viewlets).registerViewlet(ViewletDescriptor.create(