Add timestamps to comments proposal (microsoft#139849)

Author: alexr00

.eslintrc.json

@@ -568,7 +568,9 @@
 					"vscode-oniguruma",
 					"iconv-lite-umd",
 					"tas-client-umd",
-					"jschardet"
+					"jschardet",
+					"dayjs",
+					"dayjs/plugin/*"
 				]
 			},
 			{
@@ -600,6 +602,8 @@
 					"vscode-oniguruma",
 					"iconv-lite-umd",
 					"jschardet",
+					"dayjs",
+					"dayjs/plugin/*",
 					"@vscode/vscode-languagedetection",
 					"@microsoft/applicationinsights-web"
 				]
@@ -633,7 +637,9 @@
 					"vscode-textmate",
 					"vscode-oniguruma",
 					"iconv-lite-umd",
-					"jschardet"
+					"jschardet",
+					"dayjs",
+					"dayjs/plugin/*"
 				]
 			},
 			{
@@ -753,7 +759,9 @@
 					"vscode-textmate",
 					"vscode-oniguruma",
 					"iconv-lite-umd",
-					"jschardet"
+					"jschardet",
+					"dayjs",
+					"dayjs/plugin/*"
 				]
 			},
 			{
@@ -788,7 +796,9 @@
 					"vscode-textmate",
 					"vscode-oniguruma",
 					"iconv-lite-umd",
-					"jschardet"
+					"jschardet",
+					"dayjs",
+					"dayjs/plugin/*"
 				]
 			},
 			{

package.json

@@ -66,6 +66,7 @@
     "@vscode/sudo-prompt": "9.3.1",
     "@vscode/vscode-languagedetection": "1.0.21",
     "applicationinsights": "1.4.2",
+    "dayjs": "^1.10.7",
     "graceful-fs": "4.2.8",
     "http-proxy-agent": "^2.1.0",
     "https-proxy-agent": "^2.2.3",

remote/package.json

@@ -9,6 +9,7 @@
     "@vscode/vscode-languagedetection": "1.0.21",
     "applicationinsights": "1.4.2",
     "cookie": "^0.4.0",
+	"dayjs": "^1.10.7",
     "graceful-fs": "4.2.8",
     "http-proxy-agent": "^2.1.0",
     "https-proxy-agent": "^2.2.3",

remote/yarn.lock

@@ -204,6 +204,11 @@ data-uri-to-buffer@3:
   resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636"
   integrity sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==
 
+dayjs@^1.10.7:
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
+  integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
+
 [email protected], debug@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"

src/bootstrap-window.js

@@ -142,7 +142,11 @@
 			'iconv-lite-umd': `${baseNodeModulesPath}/iconv-lite-umd/lib/iconv-lite-umd.js`,
 			'jschardet': `${baseNodeModulesPath}/jschardet/dist/jschardet.min.js`,
 			'@vscode/vscode-languagedetection': `${baseNodeModulesPath}/@vscode/vscode-languagedetection/dist/lib/index.js`,
-			'tas-client-umd': `${baseNodeModulesPath}/tas-client-umd/lib/tas-client-umd.js`
+			'tas-client-umd': `${baseNodeModulesPath}/tas-client-umd/lib/tas-client-umd.js`,
+			'dayjs': `${baseNodeModulesPath}/dayjs/dayjs.min.js`,
+			'dayjs/plugin/relativeTime': `${baseNodeModulesPath}/dayjs/plugin/relativeTime.js`,
+			'dayjs/plugin/updateLocale': `${baseNodeModulesPath}/dayjs/plugin/updateLocale.js`,
+			'dayjs/plugin/localizedFormat': `${baseNodeModulesPath}/dayjs/plugin/localizedFormat.js`
 		};
 
 		// Allow to load built-in and other node.js modules via AMD

src/vs/base/common/marshalling.ts

@@ -31,6 +31,7 @@ export const enum MarshalledId {
 	TimelineActionContext,
 	NotebookCellActionContext,
 	TestItemContext,
+	Date,
 }
 
 export interface MarshalledObject {
@@ -68,6 +69,7 @@ export function revive<T = any>(obj: any, depth = 0): Revived<T> {
 		switch ((<MarshalledObject>obj).$mid) {
 			case MarshalledId.Uri: return <any>URI.revive(obj);
 			case MarshalledId.Regexp: return <any>new RegExp(obj.source, obj.flags);
+			case MarshalledId.Date: return <any>new Date(obj.source);
 		}
 
 		if (

src/vs/editor/common/languages.ts

@@ -1716,6 +1716,7 @@ export interface Comment {
 	readonly commentReactions?: CommentReaction[];
 	readonly label?: string;
 	readonly mode?: CommentMode;
+	readonly detail?: Date | string;
 }
 
 /**

src/vs/workbench/api/browser/mainThreadComments.ts

@@ -15,15 +15,15 @@ import { Registry } from 'vs/platform/registry/common/platform';
 import { extHostNamedCustomer } from 'vs/workbench/api/common/extHostCustomers';
 import { ICommentInfo, ICommentService } from 'vs/workbench/contrib/comments/browser/commentService';
 import { CommentsPanel } from 'vs/workbench/contrib/comments/browser/commentsView';
-import { CommentProviderFeatures, ExtHostCommentsShape, ExtHostContext, IExtHostContext, MainContext, MainThreadCommentsShape, CommentThreadChanges } from '../common/extHost.protocol';
+import { CommentProviderFeatures, ExtHostCommentsShape, ExtHostContext, IExtHostContext, MainContext, MainThreadCommentsShape, CommentThreadChanges, CommentChanges } from '../common/extHost.protocol';
 import { COMMENTS_VIEW_ID, COMMENTS_VIEW_TITLE } from 'vs/workbench/contrib/comments/browser/commentsTreeViewer';
 import { ViewContainer, IViewContainersRegistry, Extensions as ViewExtensions, ViewContainerLocation, IViewsRegistry, IViewsService, IViewDescriptorService } from 'vs/workbench/common/views';
 import { SyncDescriptor } from 'vs/platform/instantiation/common/descriptors';
 import { ViewPaneContainer } from 'vs/workbench/browser/parts/views/viewPaneContainer';
 import { Codicon } from 'vs/base/common/codicons';
 import { registerIcon } from 'vs/platform/theme/common/iconRegistry';
 import { localize } from 'vs/nls';
-import { MarshalledId } from 'vs/base/common/marshalling';
+import { MarshalledId, revive } from 'vs/base/common/marshalling';
 
 
 export class MainThreadCommentThread implements modes.CommentThread {
@@ -139,11 +139,27 @@ export class MainThreadCommentThread implements modes.CommentThread {
 		if (modified('range')) { this._range = changes.range!; }
 		if (modified('label')) { this._label = changes.label; }
 		if (modified('contextValue')) { this._contextValue = changes.contextValue === null ? undefined : changes.contextValue; }
-		if (modified('comments')) { this._comments = changes.comments; }
+		if (modified('comments')) { this._comments = this.commentsFromCommentChanges(changes.comments); }
 		if (modified('collapseState')) { this._collapsibleState = changes.collapseState; }
 		if (modified('canReply')) { this.canReply = changes.canReply!; }
 	}
 
+	private commentsFromCommentChanges(comments?: CommentChanges[]): modes.Comment[] | undefined {
+		return comments?.map(comment => {
+			return {
+				body: comment.body,
+				uniqueIdInThread: comment.uniqueIdInThread,
+				userName: comment.userName,
+				commentReactions: comment.commentReactions,
+				contextValue: comment.contextValue,
+				detail: comment.detail ? <Date | string>revive<Date | string>(comment.detail) : undefined,
+				label: comment.label,
+				mode: comment.mode,
+				userIconPath: comment.userIconPath
+			};
+		});
+	}
+
 	dispose() {
 		this._isDisposed = true;
 		this._onDidChangeCollasibleState.dispose();

src/vs/workbench/api/common/extHost.protocol.ts

@@ -10,7 +10,7 @@ import { SerializedError } from 'vs/base/common/errors';
 import { IRelativePattern } from 'vs/base/common/glob';
 import { IMarkdownString } from 'vs/base/common/htmlContent';
 import { IDisposable } from 'vs/base/common/lifecycle';
-import { revive } from 'vs/base/common/marshalling';
+import { MarshalledId, revive } from 'vs/base/common/marshalling';
 import * as performance from 'vs/base/common/performance';
 import Severity from 'vs/base/common/severity';
 import { Dto } from 'vs/base/common/types';
@@ -160,11 +160,25 @@ export interface CommentProviderFeatures {
 	options?: modes.CommentOptions;
 }
 
+export interface CommentChanges {
+	readonly uniqueIdInThread: number;
+	readonly body: IMarkdownString;
+	readonly userName: string;
+	readonly userIconPath?: string;
+	readonly contextValue?: string;
+	readonly commentReactions?: modes.CommentReaction[];
+	readonly label?: string;
+	readonly mode?: modes.CommentMode;
+	readonly detail?: {
+		$mid: MarshalledId.Date
+	} | string;
+}
+
 export type CommentThreadChanges = Partial<{
 	range: IRange,
 	label: string,
 	contextValue: string | null,
-	comments: modes.Comment[],
+	comments: CommentChanges[],
 	collapseState: modes.CommentThreadCollapsibleState;
 	canReply: boolean;
 }>;

src/vs/workbench/api/common/extHostComments.ts

@@ -16,8 +16,9 @@ import { ExtensionIdentifier, IExtensionDescription } from 'vs/platform/extensio
 import { ExtHostDocuments } from 'vs/workbench/api/common/extHostDocuments';
 import * as extHostTypeConverter from 'vs/workbench/api/common/extHostTypeConverters';
 import * as types from 'vs/workbench/api/common/extHostTypes';
+import { checkProposedApiEnabled } from 'vs/workbench/services/extensions/common/extensions';
 import type * as vscode from 'vscode';
-import { ExtHostCommentsShape, IMainContext, MainContext, CommentThreadChanges } from './extHost.protocol';
+import { ExtHostCommentsShape, IMainContext, MainContext, CommentThreadChanges, CommentChanges } from './extHost.protocol';
 import { ExtHostCommands } from './extHostCommands';
 
 type ProviderHandle = number;
@@ -346,7 +347,7 @@ export function createExtHostComments(mainContext: IMainContext, commands: ExtHo
 			private _uri: vscode.Uri,
 			private _range: vscode.Range,
 			private _comments: vscode.Comment[],
-			extensionId: ExtensionIdentifier
+			public readonly extensionDescription: IExtensionDescription
 		) {
 			this._acceptInputDisposables.value = new DisposableStore();
 
@@ -360,7 +361,7 @@ export function createExtHostComments(mainContext: IMainContext, commands: ExtHo
 				this._id,
 				this._uri,
 				extHostTypeConverter.Range.from(this._range),
-				extensionId
+				extensionDescription.identifier
 			);
 
 			this._localDisposables = [];
@@ -433,7 +434,7 @@ export function createExtHostComments(mainContext: IMainContext, commands: ExtHo
 			}
 			if (modified('comments')) {
 				formattedModifications.comments =
-					this._comments.map(cmt => convertToModeComment(this, cmt, this._commentsMap));
+					this._comments.map(cmt => convertToDTOComment(this, cmt, this._commentsMap));
 			}
 			if (modified('collapsibleState')) {
 				formattedModifications.collapseState = convertToCollapsibleState(this._collapseState);
@@ -561,18 +562,18 @@ export function createExtHostComments(mainContext: IMainContext, commands: ExtHo
 		createCommentThread(resource: vscode.Uri, range: vscode.Range, comments: vscode.Comment[]): ExtHostCommentThread;
 		createCommentThread(arg0: vscode.Uri | string, arg1: vscode.Uri | vscode.Range, arg2: vscode.Range | vscode.Comment[], arg3?: vscode.Comment[]): vscode.CommentThread {
 			if (typeof arg0 === 'string') {
-				const commentThread = new ExtHostCommentThread(this.id, this.handle, arg0, arg1 as vscode.Uri, arg2 as vscode.Range, arg3 as vscode.Comment[], this._extension.identifier);
+				const commentThread = new ExtHostCommentThread(this.id, this.handle, arg0, arg1 as vscode.Uri, arg2 as vscode.Range, arg3 as vscode.Comment[], this._extension);
 				this._threads.set(commentThread.handle, commentThread);
 				return commentThread;
 			} else {
-				const commentThread = new ExtHostCommentThread(this.id, this.handle, undefined, arg0 as vscode.Uri, arg1 as vscode.Range, arg2 as vscode.Comment[], this._extension.identifier);
+				const commentThread = new ExtHostCommentThread(this.id, this.handle, undefined, arg0 as vscode.Uri, arg1 as vscode.Range, arg2 as vscode.Comment[], this._extension);
 				this._threads.set(commentThread.handle, commentThread);
 				return commentThread;
 			}
 		}
 
 		$createCommentThreadTemplate(uriComponents: UriComponents, range: IRange): ExtHostCommentThread {
-			const commentThread = new ExtHostCommentThread(this.id, this.handle, undefined, URI.revive(uriComponents), extHostTypeConverter.Range.to(range), [], this._extension.identifier);
+			const commentThread = new ExtHostCommentThread(this.id, this.handle, undefined, URI.revive(uriComponents), extHostTypeConverter.Range.to(range), [], this._extension);
 			commentThread.collapsibleState = modes.CommentThreadCollapsibleState.Expanded;
 			this._threads.set(commentThread.handle, commentThread);
 			return commentThread;
@@ -608,7 +609,7 @@ export function createExtHostComments(mainContext: IMainContext, commands: ExtHo
 		}
 	}
 
-	function convertToModeComment(thread: ExtHostCommentThread, vscodeComment: vscode.Comment, commentsMap: Map<vscode.Comment, number>): modes.Comment {
+	function convertToDTOComment(thread: ExtHostCommentThread, vscodeComment: vscode.Comment, commentsMap: Map<vscode.Comment, number>): CommentChanges {
 		let commentUniqueId = commentsMap.get(vscodeComment)!;
 		if (!commentUniqueId) {
 			commentUniqueId = ++thread.commentHandle;
@@ -617,6 +618,20 @@ export function createExtHostComments(mainContext: IMainContext, commands: ExtHo
 
 		const iconPath = vscodeComment.author && vscodeComment.author.iconPath ? vscodeComment.author.iconPath.toString() : undefined;
 
+		if (vscodeComment.detail) {
+			checkProposedApiEnabled(thread.extensionDescription, 'commentTimestamp');
+		}
+
+		let detail: { $mid: MarshalledId.Date, source: any } | string | undefined;
+		if (vscodeComment.detail && (typeof vscodeComment.detail !== 'string')) {
+			detail = {
+				source: vscodeComment.detail,
+				$mid: MarshalledId.Date
+			};
+		} else {
+			detail = vscodeComment.detail;
+		}
+
 		return {
 			mode: vscodeComment.mode,
 			contextValue: vscodeComment.contextValue,
@@ -625,7 +640,8 @@ export function createExtHostComments(mainContext: IMainContext, commands: ExtHo
 			userName: vscodeComment.author.name,
 			userIconPath: iconPath,
 			label: vscodeComment.label,
-			commentReactions: vscodeComment.reactions ? vscodeComment.reactions.map(reaction => convertToReaction(reaction)) : undefined
+			commentReactions: vscodeComment.reactions ? vscodeComment.reactions.map(reaction => convertToReaction(reaction)) : undefined,
+			detail: detail
 		};
 	}
 
@@ -661,3 +677,4 @@ export function createExtHostComments(mainContext: IMainContext, commands: ExtHo
 
 	return new ExtHostCommentsImpl();
 }
+

src/vs/workbench/contrib/comments/browser/commentNode.ts

@@ -36,6 +36,8 @@ import { ActionViewItem } from 'vs/base/browser/ui/actionbar/actionViewItems';
 import { DropdownMenuActionViewItem } from 'vs/base/browser/ui/dropdown/dropdownActionViewItem';
 import { Codicon } from 'vs/base/common/codicons';
 import { MarshalledId } from 'vs/base/common/marshalling';
+import { TimestampWidget } from 'vs/workbench/contrib/comments/browser/timestamp';
+import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 
 export class CommentNode extends Disposable {
 	private _domNode: HTMLElement;
@@ -53,6 +55,8 @@ export class CommentNode extends Disposable {
 	private _commentEditorDisposables: IDisposable[] = [];
 	private _commentEditorModel: ITextModel | null = null;
 	private _isPendingLabel!: HTMLElement;
+	private _detail: HTMLElement | undefined;
+	private _timestamp: TimestampWidget | undefined;
 	private _contextKeyService: IContextKeyService;
 	private _commentContextValue: IContextKey<string>;
 
@@ -83,7 +87,8 @@ export class CommentNode extends Disposable {
 		@ILanguageService private languageService: ILanguageService,
 		@INotificationService private notificationService: INotificationService,
 		@IContextMenuService private contextMenuService: IContextMenuService,
-		@IContextKeyService contextKeyService: IContextKeyService
+		@IContextKeyService contextKeyService: IContextKeyService,
+		@IConfigurationService private configurationService: IConfigurationService
 	) {
 		super();
 
@@ -121,11 +126,38 @@ export class CommentNode extends Disposable {
 		return this._onDidClick.event;
 	}
 
+	private createDetail(container: HTMLElement) {
+		this._detail = dom.append(container, dom.$('span.detail'));
+		this.updateDetail(this.comment.detail);
+	}
+
+	private updateDetail(detail?: Date | string) {
+		if (!this._detail) {
+			return;
+		}
+
+		if (!detail) {
+			this._timestamp?.dispose();
+			this._detail.innerText = '';
+		} else if (typeof detail === 'string') {
+			this._timestamp?.dispose();
+			this._detail.innerText = detail;
+		} else {
+			this._detail.innerText = '';
+			if (!this._timestamp) {
+				this._timestamp = new TimestampWidget(this.configurationService, this._detail, detail);
+				this._register(this._timestamp);
+			} else {
+				this._timestamp.setTimestamp(detail);
+			}
+		}
+	}
+
 	private createHeader(commentDetailsContainer: HTMLElement): void {
 		const header = dom.append(commentDetailsContainer, dom.$(`div.comment-title.${MOUSE_CURSOR_TEXT_CSS_CLASS_NAME}`));
 		const author = dom.append(header, dom.$('strong.author'));
 		author.innerText = this.comment.userName;
-
+		this.createDetail(header);
 		this._isPendingLabel = dom.append(header, dom.$('span.isPending'));
 
 		if (this.comment.label) {
@@ -516,6 +548,10 @@ export class CommentNode extends Disposable {
 		} else {
 			this._commentContextValue.reset();
 		}
+
+		if (this.comment.detail) {
+			this.updateDetail(this.comment.detail);
+		}
 	}
 
 	focus() {

src/vs/workbench/contrib/comments/browser/comments.contribution.ts

@@ -25,6 +25,12 @@ Registry.as<IConfigurationRegistry>(ConfigurationExtensions.Configuration).regis
 			default: 'openOnSessionStartWithComments',
 			description: nls.localize('openComments', "Controls when the comments panel should open."),
 			restricted: false
+		},
+		'comments.useRelativeTime': {
+			type: 'boolean',
+			default: true,
+			description: nls.localize('useRelativeTime', "Determines if relative time will be used in comment timestamps (ex. '1 day ago').")
+
 		}
 	}
 });