Issue reporter sys info/extensions drop down UX issues, #42564

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

@@ -245,6 +245,24 @@ export class IssueReporter extends Disposable {
 			});
 		});
 
+		const labelElements = document.getElementsByClassName('caption');
+		for (let i = 0; i < labelElements.length; i++) {
+			const label = labelElements.item(i);
+			label.addEventListener('click', (e) => {
+				e.stopPropagation();
+
+				// Stop propgagation not working as expected in this case https://bugs.chromium.org/p/chromium/issues/detail?id=809801
+				// preventDefault does prevent outer details tag from toggling, so use that and manually toggle the checkbox
+				e.preventDefault();
+				const containingDiv = (<HTMLLabelElement>e.target).parentElement;
+				const checkbox = <HTMLInputElement>containingDiv.firstElementChild;
+				if (checkbox) {
+					checkbox.checked = !checkbox.checked;
+					this.issueReporterModel.update({ [checkbox.id]: !this.issueReporterModel.getData()[checkbox.id] });
+				}
+			});
+		}
+
 		document.getElementById('reproducesWithoutExtensions').addEventListener('click', (e) => {
 			this.issueReporterModel.update({ reprosWithoutExtensions: true });
 		});

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

@@ -36,9 +36,8 @@ export default (): string => `
 				<details>
 					<summary>${escape(localize('systemInfo', "My System Info"))}
 						<div class="include-data">
-							<input class="sendData" type="checkbox" id="includeSystemInfo" checked>
-								<label class="caption" for="includeSystemInfo">${escape(localize('sendData', "Send my data"))}</label>
-							</input>
+							<input class="sendData" type="checkbox" id="includeSystemInfo" checked/>
+							<label class="caption" for="includeSystemInfo">${escape(localize('sendData', "Send my data"))}</label>
 						</div>
 					</summary>
 					<div class="block-info">
@@ -50,9 +49,8 @@ export default (): string => `
 				<details>
 					<summary>${escape(localize('processes', "Currently Running Processes"))}
 						<div class="include-data">
-							<input class="sendData"  type="checkbox" id="includeProcessInfo" checked>
-								<label class="caption" for="includeProcessInfo">${escape(localize('sendData', "Send my data"))}</label>
-							</input>
+							<input class="sendData"  type="checkbox" id="includeProcessInfo" checked/>
+							<label class="caption" for="includeProcessInfo">${escape(localize('sendData', "Send my data"))}</label>
 						</div>
 					</summary>
 					<div class="block-info">
@@ -64,9 +62,8 @@ export default (): string => `
 				<details>
 					<summary>${escape(localize('workspaceStats', "My Workspace Stats"))}
 						<div class="include-data">
-							<input class="sendData"  type="checkbox" id="includeWorkspaceInfo" checked>
-								<label class="caption" for="includeWorkspaceInfo">${escape(localize('sendData', "Send my data"))}</label>
-							</input>
+							<input class="sendData"  type="checkbox" id="includeWorkspaceInfo" checked/>
+							<label class="caption" for="includeWorkspaceInfo">${escape(localize('sendData', "Send my data"))}</label>
 						</div>
 					</summary>
 					<pre class="block-info">
@@ -80,9 +77,8 @@ export default (): string => `
 				<details>
 					<summary>${escape(localize('extensions', "My Extensions"))}
 						<div class="include-data">
-							<input class="sendData"  type="checkbox" id="includeExtensions" checked>
-								<label class="caption" for="includeExtensions">${escape(localize('sendData', "Send my data"))}</label>
-							</input>
+							<input class="sendData"  type="checkbox" id="includeExtensions" checked/>
+							<label class="caption" for="includeExtensions">${escape(localize('sendData', "Send my data"))}</label>
 						</div>
 					</summary>
 					<div class="block-info">

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

@@ -225,6 +225,7 @@ summary {
 	width: 80px;
 	top: 2px;
 	left: 30px;
+	cursor: pointer;
 }
 
 .sendData {
@@ -236,6 +237,7 @@ input[type="checkbox"] {
 	display: inline-block;
 	margin-top: 0;
 	vertical-align: middle;
+	cursor: pointer;
 }
 
 input:disabled {