@@ -50,9 +50,9 @@ import { IExtensionService } from 'vs/workbench/services/extensions/common/exten
5050import { getDefaultValue } from 'vs/platform/configuration/common/configurationRegistry' ;
5151import { isUndefined } from 'vs/base/common/types' ;
5252import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService' ;
53- import { URI } from 'vs/base/common/uri' ;
5453import { IWebviewService , Webview } from 'vs/workbench/contrib/webview/common/webview' ;
5554import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent' ;
55+ import { generateUuid } from 'vs/base/common/uuid' ;
5656
5757function 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>
0 commit comments