Skip to content

Explore tool improvements, rebased and tweaked #10892

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 2, 2025

Conversation

fitzgen
Copy link
Member

@fitzgen fitzgen commented Jun 2, 2025

This is a rebase, conflict resolution, and refactoring of bytecodealliance/rfcs#43

I removed the "bridge" because it doesn't support the third CLIF pane and I didn't want to spend time adding that support myself.

The main benefit is the ability to support larger program disassemblies before crashing/OOMing the browser.

…rt the CLIF view

Co-Authored-By: Nick Fitzgerald <fitzgen@gmail.com>

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>
@fitzgen fitzgen requested a review from a team as a code owner June 2, 2025 16:16
@fitzgen fitzgen requested review from dicej and removed request for a team June 2, 2025 16:16
@fitzgen fitzgen added this pull request to the merge queue Jun 2, 2025
Merged via the queue into bytecodealliance:main with commit 7cb6be2 Jun 2, 2025
41 checks passed
@fitzgen fitzgen deleted the explore-enhancements branch June 2, 2025 17:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants