Move syntax highlighting to web worker (#11017)

This should eliminate page freezes when loading big files/diff.
`highlightBlock` is needed to preserve existing nodes when highlighting
and for that, highlight.js needs access to the DOM API so I added a DOM
implementation to make it work, which adds around 300kB to the output
file size of the lazy-loaded `highlight.js`.

Co-authored-by: Lauris BH <lauris@nix.lv>

2 files changed, 27 insertions, 8 deletions

diff --git a/web_src/js/features/highlight.js b/web_src/js/features/highlight.js
index dcd8a8d21e..d3f6ba71b8 100644
--- a/web_src/js/features/highlight.js
+++ b/web_src/js/features/highlight.js
@@ -1,12 +1,19 @@
-export default async function initHighlight() {
-  if (!window.config || !window.config.HighlightJS) return;
+export default async function highlight(elementOrNodeList) {
+  if (!window.config || !window.config.HighlightJS || !elementOrNodeList) return;
+  const nodes = 'length' in elementOrNodeList ? elementOrNodeList : [elementOrNodeList];
+  if (!nodes.length) return;
 
-  const hljs = await import(/* webpackChunkName: "highlight" */'highlight.js');
+  const {default: Worker} = await import(/* webpackChunkName: "highlight" */'./highlight.worker.js');
+  const worker = new Worker();
 
-  const nodes = [].slice.call(document.querySelectorAll('pre code') || []);
-  for (let i = 0; i < nodes.length; i++) {
-    hljs.highlightBlock(nodes[i]);
-  }
+  worker.addEventListener('message', ({data}) => {
+    const {index, html} = data;
+    nodes[index].outerHTML = html;
+  });
 
-  return hljs;
+  for (let index = 0; index < nodes.length; index++) {
+    const node = nodes[index];
+    if (!node) continue;
+    worker.postMessage({index, html: node.outerHTML});
+  }
 }
diff --git a/web_src/js/features/highlight.worker.js b/web_src/js/features/highlight.worker.js
new file mode 100644
index 0000000000..7d6cc4e438
--- /dev/null
+++ b/web_src/js/features/highlight.worker.js
@@ -0,0 +1,12 @@
+import {highlightBlock} from 'highlight.js';
+import {createWindow} from 'domino';
+
+self.onmessage = function ({data}) {
+  const window = createWindow();
+  self.document = window.document;
+
+  const {index, html} = data;
+  document.body.innerHTML = html;
+  highlightBlock(document.body.firstChild);
+  self.postMessage({index, html: document.body.innerHTML});
+};