Some small fixes to overview page, fix remaining build errors

extensions/git-extended/media/index.css

@@ -9,7 +9,7 @@
 	margin: 20px 0;
 }
 
-h3 {
+h2 {
 	margin: 0;
 }
 

extensions/git-extended/preview-src/index.ts

@@ -49,11 +49,11 @@ function setTitleHTML(pr: any) {
 			<div class="prIcon"><svg width="64" height="64" class="octicon octicon-git-compare" viewBox="0 0 14 16" version="1.1" aria-hidden="true"><path fill="#FFFFFF" fill-rule="evenodd" d="M5 12H4c-.27-.02-.48-.11-.69-.31-.21-.2-.3-.42-.31-.69V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V11c.03.78.34 1.47.94 2.06.6.59 1.28.91 2.06.94h1v2l3-3-3-3v2zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm11 9.48V5c-.03-.78-.34-1.47-.94-2.06-.6-.59-1.28-.91-2.06-.94H9V0L6 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 12 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg></div>
 			<div class="details">
 				<div class="overview-title">
-					<h2>${pr.title} (<a href=${pr.html_url}>#${pr.number}</a>) </h2> <button id="checkout"><svg class="octicon octicon-desktop-download" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 6h3V0h2v6h3l-4 4-4-4zm11-4h-4v1h4v8H1V3h4V2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1z"></path></svg>Checkout Pull Request</button>
+					<h2>${pr.title} (<a href=${pr.url}>#${pr.number}</a>) </h2> <button id="checkout" aria-live="polite"><svg class="octicon octicon-desktop-download" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 6h3V0h2v6h3l-4 4-4-4zm11-4h-4v1h4v8H1V3h4V2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1z"></path></svg>Checkout Pull Request</button>
 				</div>
 				<div>
 					<div class="status">${getStatus(pr)}</div>
-					<img class="avatar" src="${pr.author.avatar_url}">
+					<img class="avatar" src="${pr.author.avatarUrl}" alt="">
 					<strong class="author"><a href="${pr.author.html_url}">${pr.author.login}</a></strong>
 				</div>
 				<div class="comment-body">

extensions/git-extended/preview-src/pullRequestOverviewRenderer.ts

@@ -143,7 +143,7 @@ export type TimelineEvent = CommitEvent | ReviewEvent | SubscribeEvent | Comment
 export function renderComment(comment: CommentEvent): string {
 	return `<div class="comment-container">
 
-	<div class="review-comment" tabindex="0" role="treeitem">
+	<div class="review-comment" role="treeitem">
 		<div class="review-comment-contents">
 			<div class="review-comment-header">
 				<div class="avatar-container">
@@ -163,7 +163,7 @@ export function renderComment(comment: CommentEvent): string {
 export function renderCommit(timelineEvent: CommitEvent): string {
 	return `<div class="comment-container">
 
-	<div class="review-comment" tabindex="0" role="treeitem">
+	<div class="review-comment" role="treeitem">
 		<div class="review-comment-contents">
 			<div class="commit">
 				<strong>${timelineEvent.author.name} commit: <a href="${timelineEvent.html_url}">${timelineEvent.message} (${timelineEvent.sha})</a></strong>
@@ -176,7 +176,7 @@ export function renderCommit(timelineEvent: CommitEvent): string {
 export function renderReview(timelineEvent: ReviewEvent): string {
 	return `<div class="comment-container">
 
-	<div class="review-comment" tabindex="0" role="treeitem">
+	<div class="review-comment" role="treeitem">
 		<div class="review-comment-contents">
 			<div class="review">
 				<strong>${timelineEvent.user.login} left a <a href="${timelineEvent.html_url}">review </a></strong><span></span>

extensions/git-extended/src/common/pullRequestOverview.ts

@@ -66,7 +66,7 @@ export class PullRequestOverviewPanel {
 
 	public async update(pullRequestModel: PullRequestModel) {
 		this._pullRequest = pullRequestModel;
-		this._panel.webview.html = this.getHtmlForWebview();
+		this._panel.webview.html = this.getHtmlForWebview(pullRequestModel.prNumber.toString());
 		const isCurrentlyCheckedOut = pullRequestModel.equals(ReviewManager.instance.currentPullRequest);
 		const timelineEvents = await pullRequestModel.getTimelineEvents();
 		this._panel.webview.postMessage({
@@ -74,6 +74,7 @@ export class PullRequestOverviewPanel {
 			pullrequest: {
 				number: pullRequestModel.prNumber,
 				title: pullRequestModel.title,
+				url: pullRequestModel.html_url,
 				body: pullRequestModel.prItem.body,
 				author: pullRequestModel.author,
 				state: pullRequestModel.state,
@@ -140,7 +141,7 @@ export class PullRequestOverviewPanel {
 		}
 	}
 
-	private getHtmlForWebview() {
+	private getHtmlForWebview(number: string) {
 		const scriptPathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'media', 'index.js'));
 		const scriptUri = scriptPathOnDisk.with({ scheme: 'vscode-resource' });
 		const stylePathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'media', 'index.css'));
@@ -157,12 +158,12 @@ export class PullRequestOverviewPanel {
 				${baseStyles}
 
 				<meta name="viewport" content="width=device-width, initial-scale=1.0">
-				<title>Cat Coding</title>
+				<title>Pull Request #${number}</title>
 			</head>
 			<body>
 				<script nonce="${nonce}" src="${scriptUri}"></script>
 				<div id="title" class="title"></div>
-				<div id="pullrequest" class="discussion"></div>
+				<div id="pullrequest" class="discussion" aria-live="polite"></div>
 				<div class="comment-form">
 					<textarea id="commentTextArea"></textarea>
 					<div class="form-actions">

src/vs/workbench/parts/comments/electron-browser/simpleCommentEditor.ts

@@ -32,7 +32,7 @@ export class SimpleCommentEditor extends CodeEditorWidget {
 		@IThemeService themeService: IThemeService,
 		@INotificationService notificationService: INotificationService,
 	) {
-		super(domElement, options, true, instantiationService, codeEditorService, commandService, contextKeyService, themeService, notificationService);
+		super(domElement, options, { isSimpleWidget: true }, instantiationService, codeEditorService, commandService, contextKeyService, themeService, notificationService);
 	}
 
 	protected _getContributions(): IEditorContributionCtor[] {

src/vs/workbench/parts/webview/electron-browser/webviewWidget.ts

-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
-import { KeyMod } from 'vs/base/common/keyCodes';
-import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
-import { EditorCommand, ServicesAccessor, registerEditorContribution, registerEditorCommand } from 'vs/editor/browser/editorExtensions';
-import { IPosition } from 'vs/editor/common/core/position';
-import { IEditorContribution } from 'vs/editor/common/editorCommon';
-import { EditorContextKeys } from 'vs/editor/common/editorContextKeys';
-import { ZoneWidget } from 'vs/editor/contrib/zoneWidget/zoneWidget';
-import { KeyCode } from 'vs/editor/editor.main';
-import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
-import { IEnvironmentService } from 'vs/platform/environment/common/environment';
-import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { CONTEXT_WEBVIEW_WIDGET_VISIBLE } from 'vs/workbench/parts/webview/common/webview';
-import { WebviewElement } from 'vs/workbench/parts/webview/electron-browser/webviewElement';
-import { IPartService, Parts } from 'vs/workbench/services/part/common/partService';
-import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
-
-export const EDITOR_CONTRIBUTION_ID = 'editor.contrib.webview';
-
-export class WebviewWidget extends ZoneWidget {
-
-	private _webview: WebviewElement;
-	private _scrollable: DomScrollableElement;
-
-	constructor(
-		editor: ICodeEditor,
-		private readonly _delegate: (view: WebviewElement) => void,
-		@ITelemetryService telemetryService: ITelemetryService,
-		@IThemeService private readonly _themeService: IThemeService,
-		@IPartService private readonly _partService: IPartService,
-		@IContextViewService private readonly _contextViewService: IContextViewService,
-		@IEnvironmentService private readonly _environmentService: IEnvironmentService
-	) {
-		super(editor, {});
-
-		// this._applyTheme(_themeService.getTheme());
-		// this._callOnDispose.push(_themeService.onThemeChange(this._applyTheme.bind(this)));
-
-		this.create();
-	}
-
-	protected _fillContainer(container: HTMLElement): void {
-		this._webview = new WebviewElement(
-			this._partService.getContainer(Parts.EDITOR_PART),
-			this._themeService,
-			this._environmentService,
-			this._contextViewService,
-			undefined,
-			undefined,
-			{
-				enableWrappedPostMessage: true,
-				useSameOriginForRoot: false
-			});
-		this._webview.mountTo(container);
-
-		this._scrollable = new DomScrollableElement(this._webview.getDomNode(), {});
-		this._scrollable.getDomNode().style.width = '100%';
-		this._scrollable.getDomNode().style.height = '100%';
-		container.appendChild(this._scrollable.getDomNode());
-		this._delegate(this._webview);
-	}
-}
-
-export interface IWebviewWidgetContribution extends IEditorContribution {
-	showWebviewWidget(position: IPosition, delegate: (view: WebviewElement) => void): void;
-	closeWebviewWidget(): void;
-}
-
-
-export class WebviewWidgetContribution implements IWebviewWidgetContribution {
-	private _webviewWidget: WebviewWidget;
-	private _webviewWidgetVisible: IContextKey<boolean>;
-
-	constructor(
-		private editor: ICodeEditor,
-		@IContextKeyService contextKeyService: IContextKeyService,
-		@IInstantiationService private readonly instantiationService: IInstantiationService,
-	) {
-		this._webviewWidgetVisible = CONTEXT_WEBVIEW_WIDGET_VISIBLE.bindTo(contextKeyService);
-	}
-
-	showWebviewWidget(position: IPosition, delegate: (view: WebviewElement) => void): void {
-		if (this._webviewWidget) {
-			this._webviewWidget.dispose();
-		}
-
-		this._webviewWidget = this.instantiationService.createInstance(WebviewWidget, this.editor, delegate);
-		this._webviewWidget.show(position, 20);
-		this._webviewWidgetVisible.set(true);
-	}
-
-	public closeWebviewWidget(): void {
-		if (this._webviewWidget) {
-			this._webviewWidget.dispose();
-			this._webviewWidget = null;
-			this._webviewWidgetVisible.reset();
-			this.editor.focus();
-		}
-	}
-
-	getId(): string {
-		return EDITOR_CONTRIBUTION_ID;
-	}
-
-	dispose(): void {
-		this.closeWebviewWidget();
-	}
-}
-
-registerEditorContribution(WebviewWidgetContribution);
-
-
-class CloseWebviewWidgetCommand extends EditorCommand {
-
-	constructor() {
-		super({
-			id: 'closeWebviewWidget',
-			precondition: CONTEXT_WEBVIEW_WIDGET_VISIBLE,
-			kbOpts: {
-				kbExpr: EditorContextKeys.textInputFocus,
-				primary: KeyCode.Escape,
-				secondary: [KeyMod.Shift | KeyCode.Escape]
-			}
-		});
-	}
-
-	public runEditorCommand(accessor: ServicesAccessor, editor: ICodeEditor, args: any): void {
-		const webviewContribution = editor.getContribution<IWebviewWidgetContribution>(EDITOR_CONTRIBUTION_ID);
-		if (webviewContribution) {
-			// if focus is in outer editor we need to use the debug contribution to close
-			return webviewContribution.closeWebviewWidget();
-		}
-	}
-}
-
-registerEditorCommand(new CloseWebviewWidgetCommand());