Skip to content
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

Miscellaneous Explore tool improvements #8649

Open
wants to merge 22 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
a7a5bfe
Auto-format explorer index.js
lpereira May 16, 2024
7bdb73f
Use CRC24 to pick colors for offsets in explore
lpereira May 17, 2024
503f054
Make better use of the DOM
lpereira May 17, 2024
83029d2
Draw polygon bridging WAT and ASM views
lpereira May 17, 2024
ed88016
Scale luma calculation to a power of two to avoid integer division
lpereira May 17, 2024
e831cc4
Outline hovered lines
lpereira May 17, 2024
8d6be49
Adjust bridge width to account for different scrollbar widths
lpereira May 17, 2024
2780e84
Use simpler math in rgbToLuma() to avoid multiplications too
lpereira May 17, 2024
be93ce6
Slight improvement to crc24 calculation
lpereira May 17, 2024
c78fbc9
Draw multiple conections from WAT to ASM views
lpereira May 17, 2024
6a81603
Show WASM offset on hover in the ASM view
lpereira May 17, 2024
b938653
Fix grouping of ASM instructions
lpereira May 17, 2024
3a212ec
Only set the title attribute to show WASM offset on hover
lpereira May 18, 2024
401acda
Fix grouping of instructions in ASM mode
lpereira May 18, 2024
0edd617
Add note about the origin of the CRC-24 calculation
lpereira May 18, 2024
759a745
Tweak color generation (let some brighter colors pass the filter)
lpereira May 18, 2024
2e4c3d9
Ensure we have enough elements to compute the bridge polygon
lpereira May 18, 2024
ea6cd9d
Don't obscure the hovered line with the outline
lpereira May 18, 2024
3782a9b
Simplify bridge width calculation
lpereira May 20, 2024
1de200e
Optimize hovering of blocks when one 1 WAT element matches with 1 ASM…
lpereira May 20, 2024
d0f6635
Address review comments
lpereira May 30, 2024
0c9ee7c
Make eslint happy
lpereira May 30, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions crates/explorer/eslint.config.js
Original file line number Diff line number Diff line change
@@ -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,
];
19 changes: 16 additions & 3 deletions crates/explorer/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions crates/explorer/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"devDependencies": {
"@eslint/js": "^9.3.0",
"eslint": "^9.3.0",
"globals": "^15.3.0",
"prettier": "3.2.5"
},
"type": "module"
Expand Down
25 changes: 25 additions & 0 deletions crates/explorer/src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,31 @@ body {
height: 100%;
}

.highlight {
white-space: pre;
font-family: monospace;
}
.hovered {
}
Comment on lines +21 to +22
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can remove this?

.light-text {
color: #eeeeee;
}
.dark-text {
color: #101010;
}

#bridge {
position: absolute;
z-index: 100;
top: 0px;
bottom: 0px;
height: 100%;
width: 16px;
background-color: red;
clip-path: polygon(0px 0px, 0px 10px, 20px 100px, 100px 100px);
display: none;
}

#wat {
width: 50%;
height: 100%;
Expand Down
Loading