Polishing port mapping webview api

Part of #70851

src/vs/vscode.proposed.d.ts

@@ -1380,12 +1380,32 @@ declare module 'vscode' {
 	//#endregion
 
 	//#region Webview Port mapping— mjbvz
+	/**
+	 * Defines a port mapping used for localhost inside the webview.
+	 */
 	export interface WebviewPortMapping {
+		/**
+		 * Port to remap on localhost.
+		 */
 		readonly from: number;
+
+		/**
+		 * Destination port. The `from` port is resolved to this port.
+		 */
 		readonly to: number;
 	}
 
 	export interface WebviewOptions {
+		/**
+		 * Mappings of localhost ports used inside the webview.
+		 *
+		 * Port mapping allow webviews to transparently define how localhost ports are resolved. This can be used
+		 * to allow using a static localhost port inside the webview that is resolved to random port that a service is
+		 * running on.
+		 *
+		 * If a webview accesses localhost content, we recomend that you specify port mappings even if
+		 * the `from` and `to` ports are the same.
+		 */
 		readonly portMapping?: ReadonlyArray<WebviewPortMapping>;
 	}
 	//#endregion

src/vs/workbench/contrib/webview/electron-browser/webviewElement.ts

@@ -159,9 +159,11 @@ class WebviewPortMappingProvider extends Disposable {
 			if (localhostMatch) {
 				const port = +localhostMatch[1];
 				for (const mapping of mappings()) {
-					if (mapping.from === port) {
+					if (mapping.from === port && mapping.from !== mapping.to) {
 						return {
-							redirectURL: `${uri.scheme}://localhost:${mapping.to}`
+							redirectURL: details.url.replace(
+								new RegExp(`^${uri.scheme}://localhost:${mapping.from}/`),
+								`${uri.scheme}://localhost:${mapping.to}/`)
 						};
 					}
 				}
@@ -353,7 +355,7 @@ export class WebviewElement extends Disposable {
 
 		this._register(new WebviewPortMappingProvider(
 			session,
-			() => (this._contentOptions.portMappings || [{ from: 3000, to: 4000 }])
+			() => (this._contentOptions.portMappings || [])
 		));