Skip to content

Commit 52dcb72

Browse files
committed
Inline the markdown css for release notes
Don't depend as much on vscode-resource
1 parent d8d1e87 commit 52dcb72

3 files changed

Lines changed: 179 additions & 188 deletions

File tree

src/vs/workbench/contrib/extensions/browser/extensionEditor.ts

Lines changed: 178 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,9 @@ import { IExtensionService } from 'vs/workbench/services/extensions/common/exten
5050
import { getDefaultValue } from 'vs/platform/configuration/common/configurationRegistry';
5151
import { isUndefined } from 'vs/base/common/types';
5252
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
53-
import { URI } from 'vs/base/common/uri';
5453
import { IWebviewService, Webview } from 'vs/workbench/contrib/webview/common/webview';
5554
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
55+
import { generateUuid } from 'vs/base/common/uuid';
5656

5757
function removeEmbeddedSVGs(documentContent: string): string {
5858
const newDocument = new DOMParser().parseFromString(documentContent, 'text/html');
@@ -180,7 +180,7 @@ export class ExtensionEditor extends BaseEditor {
180180
@IStorageService storageService: IStorageService,
181181
@IExtensionService private readonly extensionService: IExtensionService,
182182
@IWorkbenchThemeService private readonly workbenchThemeService: IWorkbenchThemeService,
183-
@IWebviewService private readonly webviewService: IWebviewService
183+
@IWebviewService private readonly webviewService: IWebviewService,
184184
) {
185185
super(ExtensionEditor.ID, telemetryService, themeService, storageService);
186186
this.extensionReadme = null;
@@ -543,9 +543,6 @@ export class ExtensionEditor extends BaseEditor {
543543
},
544544
{
545545
svgWhiteList: this.extensionsWorkbenchService.allowedBadgeProviders,
546-
localResourceRoots: [
547-
URI.parse(require.toUrl('./media'))
548-
]
549546
});
550547
webviewElement.mountTo(this.content);
551548
this.contentDisposables.add(webviewElement.onDidFocus(() => this.fireOnDidFocus()));
@@ -572,14 +569,186 @@ export class ExtensionEditor extends BaseEditor {
572569
});
573570
}
574571

575-
private renderBody(body: string): string {
576-
const styleSheetPath = require.toUrl('./media/markdown.css').replace('file://', 'vscode-resource://');
572+
private async renderBody(body: string): Promise<string> {
573+
const nonce = generateUuid();
577574
return `<!DOCTYPE html>
578575
<html>
579576
<head>
580577
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
581-
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src https: data:; media-src https:; script-src 'none'; style-src vscode-resource:; child-src 'none'; frame-src 'none';">
582-
<link rel="stylesheet" type="text/css" href="${styleSheetPath}">
578+
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src https: data:; media-src https:; script-src 'none'; style-src 'nonce-${nonce}';">
579+
<style nonce="${nonce}">
580+
body {
581+
padding: 10px 20px;
582+
line-height: 22px;
583+
}
584+
585+
img {
586+
max-width: 100%;
587+
max-height: 100%;
588+
}
589+
590+
a {
591+
text-decoration: none;
592+
}
593+
594+
a:hover {
595+
text-decoration: underline;
596+
}
597+
598+
a:focus,
599+
input:focus,
600+
select:focus,
601+
textarea:focus {
602+
outline: 1px solid -webkit-focus-ring-color;
603+
outline-offset: -1px;
604+
}
605+
606+
hr {
607+
border: 0;
608+
height: 2px;
609+
border-bottom: 2px solid;
610+
}
611+
612+
h1 {
613+
padding-bottom: 0.3em;
614+
line-height: 1.2;
615+
border-bottom-width: 1px;
616+
border-bottom-style: solid;
617+
}
618+
619+
h1, h2, h3 {
620+
font-weight: normal;
621+
}
622+
623+
table {
624+
border-collapse: collapse;
625+
}
626+
627+
table > thead > tr > th {
628+
text-align: left;
629+
border-bottom: 1px solid;
630+
}
631+
632+
table > thead > tr > th,
633+
table > thead > tr > td,
634+
table > tbody > tr > th,
635+
table > tbody > tr > td {
636+
padding: 5px 10px;
637+
}
638+
639+
table > tbody > tr + tr > td {
640+
border-top: 1px solid;
641+
}
642+
643+
blockquote {
644+
margin: 0 7px 0 5px;
645+
padding: 0 16px 0 10px;
646+
border-left-width: 5px;
647+
border-left-style: solid;
648+
}
649+
650+
code {
651+
font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
652+
font-size: 14px;
653+
line-height: 19px;
654+
}
655+
656+
.mac code {
657+
font-size: 12px;
658+
line-height: 18px;
659+
}
660+
661+
code > div {
662+
padding: 16px;
663+
border-radius: 3px;
664+
overflow: auto;
665+
}
666+
667+
#scroll-to-top {
668+
position: fixed;
669+
width: 40px;
670+
height: 40px;
671+
right: 25px;
672+
bottom: 25px;
673+
background-color:#444444;
674+
border-radius: 50%;
675+
cursor: pointer;
676+
box-shadow: 1px 1px 1px rgba(0,0,0,.25);
677+
outline: none;
678+
display: flex;
679+
justify-content: center;
680+
align-items: center;
681+
}
682+
683+
#scroll-to-top:hover {
684+
background-color:#007acc;
685+
box-shadow: 2px 2px 2px rgba(0,0,0,.25);
686+
}
687+
688+
body.vscode-light #scroll-to-top {
689+
background-color: #949494;
690+
}
691+
692+
body.vscode-high-contrast #scroll-to-top:hover {
693+
background-color: #007acc;
694+
}
695+
696+
body.vscode-high-contrast #scroll-to-top {
697+
background-color: black;
698+
border: 2px solid #6fc3df;
699+
box-shadow: none;
700+
}
701+
body.vscode-high-contrast #scroll-to-top:hover {
702+
background-color: #007acc;
703+
}
704+
705+
#scroll-to-top span.icon::before {
706+
content: "";
707+
display: block;
708+
/* Chevron up icon */
709+
background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KCS5zdDF7ZmlsbDpub25lO30KPC9zdHlsZT4KPHRpdGxlPnVwY2hldnJvbjwvdGl0bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik04LDUuMWwtNy4zLDcuM0wwLDExLjZsOC04bDgsOGwtMC43LDAuN0w4LDUuMXoiLz4KPHJlY3QgY2xhc3M9InN0MSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ii8+Cjwvc3ZnPgo=');
710+
width: 16px;
711+
height: 16px;
712+
}
713+
714+
/** Theming */
715+
.vscode-light code > div {
716+
background-color: rgba(220, 220, 220, 0.4);
717+
}
718+
719+
.vscode-dark code > div {
720+
background-color: rgba(10, 10, 10, 0.4);
721+
}
722+
723+
.vscode-high-contrast code > div {
724+
background-color: rgb(0, 0, 0);
725+
}
726+
727+
.vscode-high-contrast h1 {
728+
border-color: rgb(0, 0, 0);
729+
}
730+
731+
.vscode-light table > thead > tr > th {
732+
border-color: rgba(0, 0, 0, 0.69);
733+
}
734+
735+
.vscode-dark table > thead > tr > th {
736+
border-color: rgba(255, 255, 255, 0.69);
737+
}
738+
739+
.vscode-light h1,
740+
.vscode-light hr,
741+
.vscode-light table > tbody > tr + tr > td {
742+
border-color: rgba(0, 0, 0, 0.18);
743+
}
744+
745+
.vscode-dark h1,
746+
.vscode-dark hr,
747+
.vscode-dark table > tbody > tr + tr > td {
748+
border-color: rgba(255, 255, 255, 0.18);
749+
}
750+
751+
</style>
583752
</head>
584753
<body>
585754
<a id="scroll-to-top" role="button" aria-label="scroll to top" href="#"><span class="icon"></span></a>

src/vs/workbench/contrib/extensions/browser/media/markdown.css

Lines changed: 0 additions & 175 deletions
This file was deleted.

0 commit comments

Comments
 (0)