Add return to top button to extension detail webviews

Fixes #20823

Add return to top button to extension detail webviews
Fixes #20823
8e91f6e1 · Matt Bierner · 20f2d6fe · 8e91f6e1 · 8e91f6e1
2 changed file
--- a/src/vs/workbench/parts/extensions/browser/extensionEditor.ts
+++ b/src/vs/workbench/parts/extensions/browser/extensionEditor.ts
@@ -67,10 +67,13 @@ function renderBody(body: string): string {
 		<html>
 			<head>
 				<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
-				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src https:; media-src https:; script-src 'none'; style-src file:; child-src 'none'; frame-src 'none';">
+				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src https: data:; media-src https:; script-src 'none'; style-src file:; child-src 'none'; frame-src 'none';">
 				<link rel="stylesheet" type="text/css" href="${require.toUrl('./media/markdown.css')}">
 			</head>
-			<body>${body}</body>
+			<body>
+				<a id="scroll-to-top" role="button" aria-label="scroll to top" href="#"><span class="icon"></span></a>
+				${body}
+			</body>
 		</html>`;
 }


--- a/src/vs/workbench/parts/extensions/browser/media/markdown.css
+++ b/src/vs/workbench/parts/extensions/browser/media/markdown.css
@@ -91,6 +91,54 @@ code > div {
 	overflow: auto;
 }

+#scroll-to-top {
+	position: fixed;
+	width: 40px;
+	height: 40px;
+	right: 25px;
+	bottom: 25px;
+	background-color:#444444;
+	border-radius: 50%;
+	cursor: pointer;
+	box-shadow: 1px 1px 1px rgba(0,0,0,.25);
+	outline: none;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+#scroll-to-top:hover {
+	background-color:#007acc;
+	box-shadow: 2px 2px 2px rgba(0,0,0,.25);
+}
+
+body.vscode-light #scroll-to-top {
+	background-color: #949494;
+}
+
+body.vscode-high-contrast #scroll-to-top:hover {
+	background-color: #007acc;
+}
+
+body.vscode-high-contrast #scroll-to-top {
+	background-color: black;
+	border: 2px solid #6fc3df;
+	box-shadow: none;
+}
+body.vscode-high-contrast #scroll-to-top:hover {
+	background-color: #007acc;
+}
+
+
+#scroll-to-top span.icon::before {
+	content: "";
+	display: block;
+	/* Chevron up icon */
+	background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KCS5zdDF7ZmlsbDpub25lO30KPC9zdHlsZT4KPHRpdGxlPnVwY2hldnJvbjwvdGl0bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik04LDUuMWwtNy4zLDcuM0wwLDExLjZsOC04bDgsOGwtMC43LDAuN0w4LDUuMXoiLz4KPHJlY3QgY2xhc3M9InN0MSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ii8+Cjwvc3ZnPgo=');
+	width: 16px;
+	height: 16px;
+}
+
 /** Theming */

 .vscode-light {