Bundle Codicons using Webpack

This will include the Codicons inside the webview bundle, reducing the
number of files that need to be loaded and the resource roots that need
to be included.

Author: koesie10

extensions/ql-vscode/gulpfile.ts/webpack.config.ts

@@ -55,6 +55,19 @@ export const config: webpack.Configuration = {
             loader: 'css-loader'
           }
         ]
+      },
+      {
+        test: /\.(woff(2)?|ttf|eot|svg)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'fonts/',
+              esModule: false
+            }
+          },
+        ],
       }
     ]
   },

extensions/ql-vscode/package-lock.json

@@ -1282,6 +1282,7 @@
     "del": "^6.0.0",
     "eslint": "~6.8.0",
     "eslint-plugin-react": "~7.19.0",
+    "file-loader": "^6.2.0",
     "glob": "^7.1.4",
     "gulp": "^4.0.2",
     "gulp-replace": "^1.1.3",

extensions/ql-vscode/package.json

@@ -121,14 +121,11 @@ export function getHtmlForWebview(
   webview: Webview,
   view: 'results' | 'compare' | 'remote-queries',
   {
-    allowInlineStyles,
-    includeCodicons
+    allowInlineStyles
   }: {
     allowInlineStyles?: boolean;
-    includeCodicons?: boolean;
   } = {
-      allowInlineStyles: false,
-      includeCodicons: false
+      allowInlineStyles: false
     }
 ): string {
   const scriptUriOnDisk = Uri.file(
@@ -139,16 +136,6 @@ export function getHtmlForWebview(
     Uri.file(ctx.asAbsolutePath('out/webview.css'))
   ];
 
-  if (includeCodicons) {
-    // Allows use of the VS Code "codicons" icon set.
-    // See https://github.com/microsoft/vscode-codicons
-    const codiconsPathOnDisk = Uri.file(
-      ctx.asAbsolutePath('node_modules/@vscode/codicons/dist/codicon.css')
-    );
-
-    stylesheetUrisOnDisk.push(codiconsPathOnDisk);
-  }
-
   // Convert the on-disk URIs into webview URIs.
   const scriptWebviewUri = webview.asWebviewUri(scriptUriOnDisk);
   const stylesheetWebviewUris = stylesheetUrisOnDisk.map(stylesheetUriOnDisk =>

extensions/ql-vscode/src/interface-utils.ts

@@ -116,8 +116,7 @@ export class RemoteQueriesInterfaceManager {
           retainContextWhenHidden: true,
           localResourceRoots: [
             Uri.file(this.analysesResultsManager.storagePath),
-            Uri.file(path.join(this.ctx.extensionPath, 'out')),
-            Uri.file(path.join(this.ctx.extensionPath, 'node_modules/@vscode/codicons/dist')),
+            Uri.file(path.join(this.ctx.extensionPath, 'out'))
           ],
         }
       ));
@@ -136,7 +135,6 @@ export class RemoteQueriesInterfaceManager {
         panel.webview,
         'remote-queries',
         {
-          includeCodicons: true,
           allowInlineStyles: true,
         }
       );

extensions/ql-vscode/src/remote-queries/remote-queries-interface.ts

@@ -3,6 +3,9 @@ import { vscode } from './vscode-api';
 
 import { WebviewDefinition } from './webview-interface';
 
+// Allow all views to use Codicons
+import '@vscode/codicons/dist/codicon.css';
+
 const render = () => {
   const element = document.getElementById('root');