Merge from vscode ad407028575a77ea387eb7cc219b323dc017b686

src/vs/code/electron-sandbox/issue/issueReporterMain.ts

@@ -553,7 +553,7 @@ export class IssueReporter extends Disposable {
 
 	private clearSearchResults(): void {
 		const similarIssues = this.getElementById('similar-issues')!;
-		similarIssues.innerHTML = '';
+		similarIssues.innerText = '';
 		this.numberOfSearchResultsDisplayed = 0;
 	}
 
@@ -564,7 +564,7 @@ export class IssueReporter extends Disposable {
 
 		window.fetch(`https://api.github.com/search/issues?q=${query}`).then((response) => {
 			response.json().then(result => {
-				similarIssues.innerHTML = '';
+				similarIssues.innerText = '';
 				if (result && result.items) {
 					this.displaySearchResults(result.items);
 				} else {
@@ -713,7 +713,7 @@ export class IssueReporter extends Disposable {
 			}
 		}
 
-		sourceSelect.innerHTML = '';
+		sourceSelect.innerText = '';
 		if (issueType === IssueType.FeatureRequest) {
 			sourceSelect.append(...[
 				this.makeOption('', localize('selectSource', "Select source"), true),
@@ -812,11 +812,14 @@ export class IssueReporter extends Disposable {
 
 	private validateInput(inputId: string): boolean {
 		const inputElement = (<HTMLInputElement>this.getElementById(inputId));
+		const inputValidationMessage = this.getElementById(`${inputId}-empty-error`);
 		if (!inputElement.value) {
 			inputElement.classList.add('invalid-input');
+			inputValidationMessage?.classList.remove('hidden');
 			return false;
 		} else {
 			inputElement.classList.remove('invalid-input');
+			inputValidationMessage?.classList.add('hidden');
 			return true;
 		}
 	}
@@ -1079,7 +1082,7 @@ export class IssueReporter extends Disposable {
 	}
 
 	private updateExtensionTable(extensions: IssueReporterExtensionData[], numThemeExtensions: number): void {
-		const target = document.querySelector('.block-extensions .block-info');
+		const target = document.querySelector<HTMLElement>('.block-extensions .block-info');
 		if (target) {
 			if (this.configuration.disableExtensions) {
 				target.innerHTML = localize('disabledExtensions', "Extensions are disabled");
@@ -1090,7 +1093,7 @@ export class IssueReporter extends Disposable {
 			extensions = extensions || [];
 
 			if (!extensions.length) {
-				target.innerHTML = 'Extensions: none' + themeExclusionStr;
+				target.innerText = 'Extensions: none' + themeExclusionStr;
 				return;
 			}
 
@@ -1100,10 +1103,10 @@ export class IssueReporter extends Disposable {
 	}
 
 	private updateSearchedExtensionTable(extensions: IssueReporterExtensionData[]): void {
-		const target = document.querySelector('.block-searchedExtensions .block-info');
+		const target = document.querySelector<HTMLElement>('.block-searchedExtensions .block-info');
 		if (target) {
 			if (!extensions.length) {
-				target.innerHTML = 'Extensions: none';
+				target.innerText = 'Extensions: none';
 				return;
 			}
 

src/vs/code/electron-sandbox/issue/issueReporterPage.ts

@@ -23,6 +23,7 @@ export default (): string => `
 			<select id="issue-source" class="inline-form-control" required>
 				<!-- To be dynamically filled -->
 			</select>
+			<div id="issue-source-empty-error" class="validation-error hidden" role="alert">${escape(localize('issueSourceEmptyValidation', "An issue source is required."))}</div>
 			<div id="problem-source-help-text" class="instructions hidden">${escape(localize('disableExtensionsLabelText', "Try to reproduce the problem after {0}. If the problem only reproduces when extensions are active, it is likely an issue with an extension."))
 		.replace('{0}', `<span tabIndex=0 role="button" id="disableExtensions" class="workbenchCommand">${escape(localize('disableExtensions', "disabling all extensions and reloading the window"))}</span>`)}
 			</div>
@@ -43,6 +44,7 @@ export default (): string => `
 		<div class="input-group">
 			<label class="inline-label" for="issue-title">${escape(localize('issueTitleLabel', "Title"))} <span class="required-input">*</span></label>
 			<input id="issue-title" type="text" class="inline-form-control" placeholder="${escape(localize('issueTitleRequired', "Please enter a title."))}" required>
+			<div id="issue-title-empty-error" class="validation-error hidden" role="alert">${escape(localize('titleEmptyValidation', "A title is required."))}</div>
 			<div id="issue-title-length-validation-error" class="validation-error hidden" role="alert">${escape(localize('titleLengthValidation', "The title is too long."))}</div>
 			<small id="similar-issues">
 				<!-- To be dynamically filled -->
@@ -61,6 +63,7 @@ export default (): string => `
 		<div class="block-info-text">
 			<textarea name="description" id="description" placeholder="${escape(localize('details', "Please enter details."))}" required></textarea>
 		</div>
+		<div id="description-empty-error" class="validation-error hidden" role="alert">${escape(localize('descriptionEmptyValidation', "A description is required."))}</div>
 	</div>
 
 	<div class="system-info" id="block-container">

src/vs/code/electron-sandbox/issue/media/issueReporter.css

@@ -201,9 +201,10 @@ select, input, textarea {
 }
 
 
-.validation-error {
+#issue-reporter .validation-error {
 	font-size: 12px;
-	margin-top: 1em;
+	padding: 10px;
+	border-top: 0px !important;
 }
 
 
@@ -256,8 +257,7 @@ a {
 }
 
 .section .input-group .validation-error {
-	margin-left: calc(15% + 5px);
-	padding: 10px;
+	margin-left: 100px;
 }
 
 .section .inline-form-control, .section .inline-label {
@@ -268,7 +268,7 @@ a {
 	width: 95px;
 }
 
-.section .inline-form-control {
+.section .inline-form-control, .section .input-group .validation-error  {
 	width: calc(100% - 100px);
 }
 
@@ -294,9 +294,13 @@ a {
 		margin-left: calc(15% + 1em);
 	}
 
-	.section .inline-form-control  {
+	.section .inline-form-control, .section .input-group .validation-error  {
 		width: calc(85% - 5px);
 	}
+
+	.section .input-group .validation-error {
+		margin-left: calc(15% + 4px);
+	}
 }
 
 @media (max-width: 620px) {
@@ -308,7 +312,7 @@ a {
 		margin-left: 1em;
 	}
 
-	.section .inline-form-control {
+	.section .inline-form-control, .section .input-group .validation-error  {
 		width: 100%;
 	}
 

src/vs/code/electron-sandbox/processExplorer/processExplorerMain.ts

@@ -267,7 +267,7 @@ class ProcessExplorer {
 			return;
 		}
 
-		container.innerHTML = '';
+		container.innerText = '';
 		this.listeners.clear();
 
 		const tableHead = document.createElement('thead');