Rebase, fix conflicts, and remove the bridge because it doesn't support the CLIF view

Auto-format explorer index.js

Use CRC24 to pick colors for offsets in explore

Make better use of the DOM

In the ASM view, instead of creating one element per instruction,
create one per WASM chunk.  This significantly reduces the amount
of elements we have to take care of, including event listeners.

For both views, get rid of all the maps to look up DOM elements by
WASM offset and use CSS selectors to find them.  This made things
quite a bit smoother.  To highlight items, we now add a class to
elements with the same WASM offset, and remove it when we don't
want to highlight them anymore.

In addition to this, use a bit more tricks to get brighter colors
from the CRC24 algorithm we're now using to pick the colors.  (Since
the colors can now be very dark, we get the luminance by using the
NTSC color space, or YIQ, and use contrasting colors.)

Draw polygon bridging WAT and ASM views

Scale luma calculation to a power of two to avoid integer division

Outline hovered lines

Instead of using opacity, which slow down rendering, use a solid
outline, which looks nicer and is more efficient!

Adjust bridge width to account for different scrollbar widths

Use simpler math in rgbToLuma() to avoid multiplications too

Slight improvement to crc24 calculation

Draw multiple conections from WAT to ASM views

Sometimes the ASM block contains disjoint sets of instructions
that relate to one WASM instruction, so link all of them at the
same time.

Show WASM offset on hover in the ASM view

Fix grouping of ASM instructions

Some instructions with NULL wasm_offset were being group together
with the first instruction in the stream that had an offset.

Only set the title attribute to show WASM offset on hover

This saves quite a bit of memory!

Fix grouping of instructions in ASM mode

Add note about the origin of the CRC-24 calculation

Tweak color generation (let some brighter colors pass the filter)

Ensure we have enough elements to compute the bridge polygon

I don't know why this happens, but sometimes, a block of instructions
in the ASM side, that have a WASM offset in the generated JSON, won't
have an equivalent in the WAT side.  Guard against this.

Don't obscure the hovered line with the outline

Simplify bridge width calculation

Optimize hovering of blocks when one 1 WAT element matches with 1 ASM element

Address review comments

Make eslint happy

Since this code runs in a browser, we need to tell eslint that
it's going to run in a browser enviroment so things like `window`
and `document` are defined.

Signed-off-by: L. Pereira <l.pereira@fastly.com>

Author: lpereira

crates/explorer/eslint.config.js

@@ -1,12 +1,17 @@
-import js from "@eslint/js";
+import globals from "globals";
+import pluginJs from "@eslint/js";
 
 export default [
-  js.configs.recommended,
-
   {
+    files: ["**/*.js"],
+    languageOptions: {
+      sourceType: "module",
+      globals: globals.browser,
+    },
     rules: {
       "no-unused-vars": "error",
       "no-undef": "error",
     },
   },
+  pluginJs.configs.recommended,
 ];

crates/explorer/package-lock.json

@@ -22,6 +22,7 @@
   "devDependencies": {
     "@eslint/js": "^9.3.0",
     "eslint": "^9.3.0",
+    "globals": "^15.3.0",
     "prettier": "3.2.5"
   },
   "type": "module"

crates/explorer/package.json

@@ -14,6 +14,19 @@ body {
   height: 100%;
 }
 
+.highlight {
+  white-space: pre;
+  font-family: monospace;
+}
+.hovered {
+}
+.light-text {
+  color: #eeeeee;
+}
+.dark-text {
+  color: #101010;
+}
+
 #wat {
   flex: 1;
   height: 100%;