Issue Reporter: Copy data to clipboard when url exceeds max length, #44733

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

@@ -6,7 +6,7 @@
 'use strict';
 
 import 'vs/css!./media/issueReporter';
-import { shell, ipcRenderer, webFrame, remote } from 'electron';
+import { shell, ipcRenderer, webFrame, remote, clipboard } from 'electron';
 import { localize } from 'vs/nls';
 import { $ } from 'vs/base/browser/dom';
 import * as collections from 'vs/base/common/collections';
@@ -345,6 +345,14 @@ export class IssueReporter extends Disposable {
 		this.addEventListener('issue-title', 'input', (e) => {
 			const description = this.issueReporterModel.getData().issueDescription;
 			const title = (<HTMLInputElement>event.target).value;
+
+			const lengthValidationMessage = document.getElementById('issue-title-length-validation-error');
+			if (title && this.getIssueUrlWithTitle(title).length > MAX_URL_LENGTH) {
+				show(lengthValidationMessage);
+			} else {
+				hide(lengthValidationMessage);
+			}
+
 			if (title || description) {
 				this.searchDuplicates(title, description);
 			} else {
@@ -638,25 +646,24 @@ export class IssueReporter extends Disposable {
 		*/
 		this.telemetryService.publicLog('issueReporterSubmit', { issueType: this.issueReporterModel.getData().issueType, numSimilarIssuesDisplayed: this.numberOfSearchResultsDisplayed });
 
-		const issueTitle = encodeURIComponent((<HTMLInputElement>document.getElementById('issue-title')).value);
-		const queryStringPrefix = product.reportIssueUrl.indexOf('?') === -1 ? '?' : '&';
-		const baseUrl = `${product.reportIssueUrl}${queryStringPrefix}title=${issueTitle}&body=`;
+		const baseUrl = this.getIssueUrlWithTitle((<HTMLInputElement>document.getElementById('issue-title')).value);
 		const issueBody = this.issueReporterModel.serialize();
-		const url = baseUrl + encodeURIComponent(issueBody);
+		let url = baseUrl + `&body=${encodeURIComponent(issueBody)}`;
 
-		const lengthValidationElement = document.getElementById('url-length-validation-error');
 		if (url.length > MAX_URL_LENGTH) {
-			lengthValidationElement.textContent = localize('urlLengthError', "The data exceeds the length limit of {0} characters. The data is length {1}.", MAX_URL_LENGTH, url.length);
-			show(lengthValidationElement);
-			return false;
-		} else {
-			hide(lengthValidationElement);
+			clipboard.writeText(issueBody);
+			url = baseUrl + `&body=${encodeURIComponent(localize('pasteData', "We have written the needed data into your clipboard because it was too large to send. Please paste."))}`;
 		}
 
 		shell.openExternal(url);
 		return true;
 	}
 
+	private getIssueUrlWithTitle(issueTitle: string) {
+		const queryStringPrefix = product.reportIssueUrl.indexOf('?') === -1 ? '?' : '&';
+		return `${product.reportIssueUrl}${queryStringPrefix}title=${encodeURIComponent(issueTitle)}`;
+	}
+
 	private updateSystemInfo = (state) => {
 		const target = document.querySelector('.block-system .block-info');
 		let tableHtml = '';

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

@@ -22,6 +22,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-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 -->
 			</small>
@@ -149,8 +150,5 @@ export default (): string => `
 		</div>
 	</div>
 
-	<div id="url-length-validation-error" class="validation-error hidden" role="alert">
-		<-- To be dynamically filled -->
-	</div>
 	<button id="github-submit-btn" disabled>${escape(localize('loadingData', "Loading data..."))}</button>
 </div>`;

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

@@ -42,11 +42,6 @@ td {
 	margin-bottom: 1.5em;
 }
 
-#similar-issues {
-	margin-left: 12%;
-	display: block;
-}
-
 /**
  * Forms
  */
@@ -293,6 +288,9 @@ button {
 	color: #fff;
 }
 
+.section .input-group .validation-error {
+	margin-left: 13%;
+}
 
 .section .inline-form-control, .section .inline-label {
 	display: inline-block;
@@ -310,6 +308,11 @@ button {
 	cursor: pointer;
 }
 
+#similar-issues {
+	margin-left: 12%;
+	display: block;
+}
+
 @media (max-width: 950px) {
 	.section .inline-label {
 		width: 12%;
@@ -329,7 +332,7 @@ button {
 		width: 100%;
 	}
 
-	#similar-issues {
+	#similar-issues, .section .input-group .validation-error {
 		margin-left: 0;
 	}
 }