Better URL shortening in browser tab labels (#306765)

* Better URL shortening in browser tab labels

* file:// tests

Author: kycutler

src/vs/base/common/labels.ts

@@ -209,13 +209,15 @@ export function untildify(path: string, userHome: string): string {
  */
 const ellipsis = '\u2026';
 const unc = '\\\\';
+const urlSchemaRegexp = /^[^:/\\?#]+?:\/\//;
 const home = '~';
-export function shorten(paths: string[], pathSeparator: string = sep): string[] {
+export function shorten(paths: string[], defaultPathSeparator: string = sep): string[] {
 	const shortenedPaths: string[] = new Array(paths.length);
 
 	// for every path
 	let match = false;
 	for (let pathIndex = 0; pathIndex < paths.length; pathIndex++) {
+		let pathSeparator = defaultPathSeparator;
 		const originalPath = paths[pathIndex];
 
 		if (originalPath === '') {
@@ -233,7 +235,11 @@ export function shorten(paths: string[], pathSeparator: string = sep): string[]
 		// trim for now and concatenate unc path (e.g. \\network) or root path (/etc, ~/etc) later
 		let prefix = '';
 		let trimmedPath = originalPath;
-		if (trimmedPath.indexOf(unc) === 0) {
+		if (urlSchemaRegexp.test(trimmedPath)) {
+			prefix = trimmedPath.substr(0, trimmedPath.indexOf('//') + 2);
+			trimmedPath = trimmedPath.substr(trimmedPath.indexOf('//') + 2);
+			pathSeparator = '/';
+		} else if (trimmedPath.indexOf(unc) === 0) {
 			prefix = trimmedPath.substr(0, trimmedPath.indexOf(unc) + unc.length);
 			trimmedPath = trimmedPath.substr(trimmedPath.indexOf(unc) + unc.length);
 		} else if (trimmedPath.indexOf(pathSeparator) === 0) {
@@ -296,7 +302,12 @@ export function shorten(paths: string[], pathSeparator: string = sep): string[]
 
 					// add ellipsis at the end if needed
 					if (start + subpathLength < segments.length) {
-						result = result + pathSeparator + ellipsis;
+						// If the last segment is empty, preserve the trailing slash.
+						if (start + subpathLength === segments.length - 1 && segments[segments.length - 1] === '') {
+							result = result + pathSeparator;
+						} else {
+							result = result + pathSeparator + ellipsis;
+						}
 					}
 
 					shortenedPaths[pathIndex] = result;

src/vs/base/test/common/labels.test.ts

@@ -61,6 +61,12 @@ suite('Labels', () => {
 		assert.deepStrictEqual(labels.shorten(['a', 'a\\b', 'b']), ['a', 'a\\b', 'b']);
 		assert.deepStrictEqual(labels.shorten(['', 'a', 'b', 'b\\c', 'a\\c']), ['.\\', 'a', 'b', 'b\\c', 'a\\c']);
 		assert.deepStrictEqual(labels.shorten(['src\\vs\\workbench\\parts\\execution\\electron-browser', 'src\\vs\\workbench\\parts\\execution\\electron-browser\\something', 'src\\vs\\workbench\\parts\\terminal\\electron-browser']), ['…\\execution\\electron-browser', '…\\something', '…\\terminal\\…']);
+
+		// url paths
+		assert.deepStrictEqual(labels.shorten(['https://a.com/b', 'C:\\foo\\d']), ['https://a.com/b', 'C:\\…\\d']);
+		assert.deepStrictEqual(labels.shorten(['https://a.com/x', 'C:\\foo\\x']), ['https://a.com/…', 'C:\\foo\\…']);
+		assert.deepStrictEqual(labels.shorten(['https://a.com/y/z', 'C:\\foo\\bar\\z']), ['https://a.com/y/…', 'C:\\…\\bar\\…']);
+		assert.deepStrictEqual(labels.shorten(['file://C:/foo/bar/z', 'C:\\foo\\bar\\z']), ['file://C:/…/bar/z', 'C:\\…\\bar\\z']);
 	});
 
 	(isWindows ? test.skip : test)('shorten - not windows', () => {
@@ -106,6 +112,19 @@ suite('Labels', () => {
 		assert.deepStrictEqual(labels.shorten(['a', 'a/b', 'a/b/c', 'd/b/c', 'd/b']), ['a', 'a/b', 'a/b/c', 'd/b/c', 'd/b']);
 		assert.deepStrictEqual(labels.shorten(['a', 'a/b', 'b']), ['a', 'a/b', 'b']);
 		assert.deepStrictEqual(labels.shorten(['', 'a', 'b', 'b/c', 'a/c']), ['./', 'a', 'b', 'b/c', 'a/c']);
+
+		// url paths
+		assert.deepStrictEqual(labels.shorten(['https://a.com/b']), ['https://a.com/b']);
+		assert.deepStrictEqual(labels.shorten(['https://a.com/', 'https://b.com/']), ['https://a.com/', 'https://b.com/']);
+		assert.deepStrictEqual(labels.shorten(['https://a.com/b', 'https://a.com/c']), ['https://a.com/b', 'https://a.com/c']);
+		assert.deepStrictEqual(labels.shorten(['https://a.com/x/y', 'https://b.com/x/y']), ['https://a.com/…', 'https://b.com/…']);
+		assert.deepStrictEqual(labels.shorten(['https://a.com/b', 'https://a.com/b/c']), ['https://a.com/b', 'https://a.com/…/c']);
+		assert.deepStrictEqual(labels.shorten(['https://a.com/b', 'http://a.com/b']), ['https://a.com/b', 'http://a.com/b']);
+		assert.deepStrictEqual(labels.shorten(['https://a.com/x/y/z', 'https://a.com/x/w/z']), ['https://a.com/…/y/…', 'https://a.com/…/w/…']);
+		assert.deepStrictEqual(labels.shorten(['https://a.com/b', '/c/d']), ['https://a.com/b', '/c/d']);
+		assert.deepStrictEqual(labels.shorten(['https://a.com/x', '/c/x']), ['https://a.com/…', '/c/x']);
+		assert.deepStrictEqual(labels.shorten(['https://a.com/x/y', '/c/x/y']), ['https://a.com/…', '/c/x/…']);
+		assert.deepStrictEqual(labels.shorten(['file:///foo/bar/z', '/foo/bar/z']), ['file:///foo/bar/z', '/foo/bar/z']);
 	});
 
 	test('template', () => {

src/vs/workbench/contrib/browserView/common/browserEditorInput.ts

@@ -10,7 +10,7 @@ import { URI } from '../../../../base/common/uri.js';
 import { generateUuid } from '../../../../base/common/uuid.js';
 import { BrowserViewUri } from '../../../../platform/browserView/common/browserViewUri.js';
 import { IBrowserEditorViewState } from './browserView.js';
-import { EditorInputCapabilities, IEditorSerializer, IUntypedEditorInput } from '../../../common/editor.js';
+import { EditorInputCapabilities, IEditorSerializer, IUntypedEditorInput, Verbosity } from '../../../common/editor.js';
 import { EditorInput } from '../../../common/editor/editorInput.js';
 import { IThemeService } from '../../../../platform/theme/common/themeService.js';
 import { TAB_ACTIVE_FOREGROUND } from '../../../common/theme.js';
@@ -21,6 +21,7 @@ import { hasKey } from '../../../../base/common/types.js';
 import { ILifecycleService, ShutdownReason } from '../../../services/lifecycle/common/lifecycle.js';
 import { ITelemetryService } from '../../../../platform/telemetry/common/telemetry.js';
 import { logBrowserOpen } from '../../../../platform/browserView/common/browserViewTelemetry.js';
+import { LRUCachedFunction } from '../../../../base/common/cache.js';
 
 const LOADING_SPINNER_SVG = (color: string | undefined) => `
 	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
@@ -184,32 +185,55 @@ export class BrowserEditorInput extends EditorInput {
 	}
 
 	override getName(): string {
-		return truncate(this.getTitle(), MAX_TITLE_LENGTH);
+		const hasTitle = this._model ? !!this._model.title : !!this._initialData.title;
+		const name = hasTitle ? this.title! : this.getDescription(Verbosity.SHORT) || BrowserEditorInput.DEFAULT_LABEL;
+		return truncate(name, MAX_TITLE_LENGTH);
 	}
 
-	override getTitle(): string {
-		// Use model data if available, otherwise fall back to initial data
-		if (this._model && this._model.url) {
-			if (this._model.title) {
-				return this._model.title;
-			}
-			// Model exists, use its URL for authority
-			const authority = URI.parse(this._model.url).authority;
-			return authority || BrowserEditorInput.DEFAULT_LABEL;
-		}
-		// Model not created yet, use initial data
-		if (this._initialData.title) {
-			return this._initialData.title;
-		}
-		const url = this._initialData.url ?? '';
-		const authority = URI.parse(url).authority;
-		return authority || BrowserEditorInput.DEFAULT_LABEL;
+	override getTitle(verbosity = Verbosity.MEDIUM): string {
+		const hasTitle = this._model ? !!this._model.title : !!this._initialData.title;
+		const description = this.getDescription(verbosity);
+		const title = hasTitle ? `${this.title} (${description})` : description;
+		return title || BrowserEditorInput.DEFAULT_LABEL;
 	}
 
-	override getDescription(): string | undefined {
-		return this.url;
+	override getDescription(verbosity = Verbosity.MEDIUM): string | undefined {
+		return this.url && this.getURLTitles.get(this.url)[verbosity];
 	}
 
+	private readonly getURLTitles = new LRUCachedFunction((url: string) => {
+		let _parsed: URI | undefined = undefined;
+		let _short: string | undefined = undefined;
+		let _medium: string | undefined = undefined;
+		let _long: string | undefined = undefined;
+		function getParsed() {
+			if (!_parsed) {
+				_parsed = URI.parse(url);
+			}
+			return _parsed;
+		}
+		return {
+			get [Verbosity.SHORT]() {
+				if (!_short) {
+					_short = getParsed().authority;
+				}
+				return _short;
+			},
+			get [Verbosity.MEDIUM]() {
+				if (!_medium) {
+					_medium = getParsed().with({ query: '', fragment: '' }).toString();
+				}
+				return _medium;
+			},
+			get [Verbosity.LONG]() {
+				if (!_long) {
+					_long = getParsed().with({ fragment: '' }).toString();
+				}
+				return _long;
+			}
+		};
+	});
+
 	override canReopen(): boolean {
 		return true;
 	}