Fix FontMeasurementsImpl to work in a web environment (#2260)

bjaspan · Barry Jaspan · pre-commit-ci-lite[bot] · web-flow · commit 9e9d87491859 · 2024-03-11T15:21:59.000Z
FontMeasurementsImpl currently uses an inline script to compute font size ratios which is not compatible with a web environment due to Content Security Policy (CSP) rules. This PR switches to a separate script file and adds a CSP rule for it according to the instructions in https://code.visualstudio.com/api/extension-guides/webview#content-security-policy. To test, change the `Editor: Font Family` setting (you can just append `, x` to the end or make any other change). Success is seeing a tab flash and disappear; failure is the tab showing "Loading Cursorless..." remaining open. --------- Co-authored-by: Barry Jaspan <bjaspan@google.com> Co-authored-by: pre-commit-ci-lite[bot] <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
diff --git a/packages/cursorless-vscode/resources/font_measurements.js b/packages/cursorless-vscode/resources/font_measurements.js
@@ -0,0 +1,12 @@
+const letter = document.querySelector("#letter");
+const container = document.querySelector("#container");
+const baselineHeight =
+  letter.offsetTop +
+  letter.offsetHeight -
+  container.offsetHeight -
+  container.offsetTop;
+const vscode = acquireVsCodeApi();
+vscode.postMessage({
+  widthRatio: letter.offsetWidth / 1000,
+  heightRatio: (letter.offsetHeight - baselineHeight) / 1000,
+});
diff --git a/packages/cursorless-vscode/src/ide/vscode/hats/FontMeasurementsImpl.ts b/packages/cursorless-vscode/src/ide/vscode/hats/FontMeasurementsImpl.ts
@@ -34,7 +34,7 @@ export class FontMeasurementsImpl implements FontMeasurements {
     }>("fontRatios");
 
     if (fontRatiosCache == null || fontRatiosCache.fontFamily !== fontFamily) {
-      const fontRatios = await getFontRatios();
+      const fontRatios = await getFontRatios(this.extensionContext);
       this.extensionContext.globalState.update("fontRatios", {
         ...fontRatios,
         fontFamily,
@@ -57,7 +57,7 @@ export class FontMeasurementsImpl implements FontMeasurements {
  *
  * @returns The width and height ratios of the font
  */
-function getFontRatios() {
+function getFontRatios(extensionContext: vscode.ExtensionContext) {
   const panel = vscode.window.createWebviewPanel(
     "cursorless.loading",
     "Cursorless",
@@ -70,7 +70,14 @@ function getFontRatios() {
     },
   );
 
-  panel.webview.html = getWebviewContent();
+  const font_measurement_js = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(
+      extensionContext.extensionUri,
+      "resources",
+      "font_measurements.js",
+    ),
+  );
+  panel.webview.html = getWebviewContent(panel.webview, font_measurement_js);
 
   interface FontRatios {
     /**
@@ -103,25 +110,23 @@ function getFontFamily() {
   return config.get<string>("fontFamily")!;
 }
 
-function getWebviewContent() {
+function getWebviewContent(
+  webview: vscode.Webview,
+  font_measurement_js: vscode.Uri,
+) {
   // baseline adjustment based on https://stackoverflow.com/a/27295528
   return `<!DOCTYPE html>
   <html lang="en">
+  <head>
+  <meta http-equiv="Content-Security-Policy" content="script-src ${webview.cspSource};" />
+  </head>
+
   <body>
       <h1>Loading Cursorless...</h1>
       <div id="container">
       <span id="letter" style="line-height: 0; visibility:hidden; font-size: 1000px; font-family: var(--vscode-editor-font-family);  font-weight: var(--vscode-editor-font-weight);">A</span>
       </div>
-      <script>
-        const letter    = document.querySelector('#letter');
-        const container  = document.querySelector('#container');
-        const baselineHeight = letter.offsetTop + letter.offsetHeight - container.offsetHeight - container.offsetTop;
-        const vscode    = acquireVsCodeApi();
-        vscode.postMessage({
-          widthRatio: letter.offsetWidth / 1000,
-          heightRatio: (letter.offsetHeight - baselineHeight) / 1000
-        });
-      </script>
+      <script src="${font_measurement_js}"></script>
   </body>
   </html>`;
 }
diff --git a/packages/cursorless-vscode/src/scripts/populateDist/assets.ts b/packages/cursorless-vscode/src/scripts/populateDist/assets.ts
@@ -26,6 +26,10 @@ export const assets: Asset[] = [
   { source: "../../images/hats", destination: "images/hats" },
   { source: "./images/logo.png", destination: "images/logo.png" },
   { source: "../../images/logo.svg", destination: "images/logo.svg" },
+  {
+    source: "resources/font_measurements.js",
+    destination: "resources/font_measurements.js",
+  },
   { source: "../../schemas", destination: "schemas" },
   {
     source: "../../third-party-licenses.csv",
