Fixes csp issues with the GitLens icon font

.fantasticonrc.js

@@ -7,6 +7,7 @@ const config = {
 	codepoints: require('./images/icons/template/mapping.json'),
 	inputDir: './images/icons',
 	outputDir: './dist',
+	fontsUrl: '#{root}/dist',
 	// @ts-ignore
 	fontTypes: ['woff2'],
 	normalize: true,

images/icons/template/styles.hbs

@@ -1,8 +1,15 @@
-@font-face {
-	font-family: '{{ name }}';
-	font-display: block;
-	src: {{{ fontSrc }}};
-}
+/*
+
+Must be placed at the end of body in the HTML file of any webview that needs it (because of CSP)
+
+<style nonce="#{cspNonce}">
+	@font-face {
+		font-family: '{{ name }}';
+		font-display: block;
+		src: {{{ fontSrc }}};
+	}
+</style>
+*/
 
 .glicon {
 	font: normal normal normal 16px/1 {{ name }};

src/webviews/apps/commitDetails/commitDetails.html

@@ -66,8 +66,8 @@
 						href="#"
 						data-action="commit-actions"
 						data-action-type="graph"
-						aria-label="Show Commit on Commit Graph"
-						title="Show Commit on Commit Graph"
+						aria-label="Show in Commit Graph"
+						title="Show in Commit Graph"
 						><code-icon icon="graph"></code-icon
 					></a>
 					<a
@@ -133,7 +133,15 @@
 		<style nonce="#{cspNonce}">
 			@font-face {
 				font-family: 'codicon';
-				src: url('#{webroot}/codicon.ttf?404cbc4fe3a64b9a93064eef76704c79') format('truetype');
+				font-display: block;
+				src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
+			}
+		</style>
+		<style nonce="#{cspNonce}">
+			@font-face {
+				font-family: 'glicons';
+				font-display: block;
+				src: url("#{root}/dist/glicons.woff2?2e51fe40df2abdf6a27fbae6c29587b1") format("woff2");
 			}
 		</style>
 	</body>

src/webviews/apps/home/home.html

@@ -19,7 +19,8 @@
 		<style nonce="#{cspNonce}">
 			@font-face {
 				font-family: 'codicon';
-				src: url('#{webroot}/codicon.ttf?404cbc4fe3a64b9a93064eef76704c79') format('truetype');
+				font-display: block;
+				src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
 			}
 		</style>
 	</body>

src/webviews/apps/plus/graph/graph.html

@@ -12,7 +12,15 @@
 		<style nonce="#{cspNonce}">
 			@font-face {
 				font-family: 'codicon';
-				src: url('#{webroot}/codicon.ttf?404cbc4fe3a64b9a93064eef76704c79') format('truetype');
+				font-display: block;
+				src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
+			}
+		</style>
+		<style nonce="#{cspNonce}">
+			@font-face {
+				font-family: 'glicons';
+				font-display: block;
+				src: url('#{root}/dist/glicons.woff2?2e51fe40df2abdf6a27fbae6c29587b1') format('woff2');
 			}
 		</style>
 	</body>

src/webviews/apps/plus/timeline/timeline.html

@@ -51,7 +51,8 @@
 		<style nonce="#{cspNonce}">
 			@font-face {
 				font-family: 'codicon';
-				src: url('#{root}/dist/webviews/codicon.ttf?669d352dfabff8f6eaa466c8ae820e43') format('truetype');
+				font-display: block;
+				src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
 			}
 		</style>
 	</body>

src/webviews/apps/rebase/rebase.html

@@ -58,7 +58,8 @@
 		<style nonce="#{cspNonce}">
 			@font-face {
 				font-family: 'codicon';
-				src: url('#{webroot}/codicon.ttf?404cbc4fe3a64b9a93064eef76704c79') format('truetype');
+				font-display: block;
+				src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
 			}
 		</style>
 	</body>

src/webviews/apps/settings/settings.html

@@ -327,7 +327,8 @@
 		<style nonce="#{cspNonce}">
 			@font-face {
 				font-family: 'codicon';
-				src: url('#{webroot}/codicon.ttf?404cbc4fe3a64b9a93064eef76704c79') format('truetype');
+				font-display: block;
+				src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
 			}
 		</style>
 	</body>

src/webviews/apps/shared/glicons.scss

@@ -1,8 +1,15 @@
-@font-face {
-	font-family: 'glicons';
-	font-display: block;
-	src: url("./glicons.woff2?2e51fe40df2abdf6a27fbae6c29587b1") format("woff2");
-}
+/*
+
+Must be placed at the end of body in the HTML file of any webview that needs it (because of CSP)
+
+<style nonce="#{cspNonce}">
+	@font-face {
+		font-family: 'glicons';
+		font-display: block;
+		src: url("#{root}/dist/glicons.woff2?2e51fe40df2abdf6a27fbae6c29587b1") format("woff2");
+	}
+</style>
+*/
 
 .glicon {
 	font: normal normal normal 16px/1 glicons;

src/webviews/apps/welcome/welcome.html

@@ -526,7 +526,8 @@
 		<style nonce="#{cspNonce}">
 			@font-face {
 				font-family: 'codicon';
-				src: url('#{webroot}/codicon.ttf?404cbc4fe3a64b9a93064eef76704c79') format('truetype');
+				font-display: block;
+				src: url('#{webroot}/codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa') format('truetype');
 			}
 		</style>
 	</body>

webpack.config.js

@@ -315,10 +315,6 @@ function getWebviewsConfig(mode, env) {
 					),
 					to: path.posix.join(__dirname.replace(/\\/g, '/'), 'dist', 'webviews'),
 				},
-				{
-					from: path.posix.join(__dirname.replace(/\\/g, '/'), 'dist', 'glicons.woff2'),
-					to: path.posix.join(__dirname.replace(/\\/g, '/'), 'dist', 'webviews'),
-				},
 			],
 		}),
 	];