Skip to content

Commit 8178c1b

Browse files
Jack-WorksJack-Works
committed
feat: new inspector
1 parent eaca7f2 commit 8178c1b

19 files changed

+4973
-3
lines changed

‎.eslintignore

+2
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
!.eslintrc.js
2+
src/types.d.ts
3+
lib/*

‎.eslintrc.js

+7
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,13 @@ module.exports = {
3434
'import/extensions': 'off',
3535
'import/prefer-default-export': 'off',
3636
'import/no-mutable-exports': 'off',
37+
'import/named': 'off',
38+
'import/no-unresolved': 'off',
39+
'no-unused-expressions': 'off',
40+
'no-console': 'off',
41+
'no-restricted-globals': 'off',
42+
'class-methods-use-this': 'off',
43+
'no-use-before-define': 'off',
3744
'global-require': 'off',
3845
},
3946
};

‎.gitignore

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
node_modules
22
.env
33

4-
.vercel
4+
.vercel
5+
lib/chrome-devtools-frontend
6+
lib/engine262

‎index.html

+5-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,11 @@
2323
<a id="github" href="https://github.com/engine262/engine262" aria-label="Fork me on GitHub"></a>
2424

2525
<h1>engine262</h1>
26-
<p>A JavaScript engine written in JavaScript for development and exploration.</p>
26+
<p style="display: inline-block; width: fit-content;">
27+
A JavaScript engine written in JavaScript for development and exploration.
28+
<br />
29+
<marquee>Try <a href="./next.html">Chrome Devtools</a> style engine262 playground! [Apr 1 2025 News]</marquee>
30+
</p>
2731

2832
<main>
2933
<section id="input-section">

‎lib/engine262.d.mts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './engine262/lib/engine262.mjs';

‎lib/engine262.mjs

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// @ts-ignore
2+
export * from '/engine262/engine262.mjs';

‎lib/inspector.d.mts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './engine262/lib/inspector.mjs';

‎lib/inspector.mjs

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// @ts-ignore
2+
export * from '/engine262/inspector.mjs';

‎next-style.css

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
@media (prefers-color-scheme: dark) {
2+
body {
3+
background-color: rgb(41 42 45);
4+
}
5+
}
6+
:root {
7+
--engine262-icon: url('https://avatars.githubusercontent.com/u/51185628?s=200&v=4');
8+
--ref-palette-primary0: var(--ref-palette-yellow0) !important;
9+
--ref-palette-primary10: var(--ref-palette-yellow10) !important;
10+
--ref-palette-primary20: var(--ref-palette-yellow20) !important;
11+
--ref-palette-primary30: var(--ref-palette-yellow30) !important;
12+
--ref-palette-primary40: var(--ref-palette-yellow40) !important;
13+
--ref-palette-primary50: var(--ref-palette-yellow50) !important;
14+
--ref-palette-primary60: var(--ref-palette-yellow60) !important;
15+
--ref-palette-primary70: var(--ref-palette-yellow70) !important;
16+
--ref-palette-primary80: var(--ref-palette-yellow80) !important;
17+
--ref-palette-primary90: var(--ref-palette-yellow90) !important;
18+
--ref-palette-primary100: var(--ref-palette-yellow100) !important;
19+
}
20+
#engine262-readme {
21+
padding: 0em 2em;
22+
}
23+
#engine262-readme article *:last-child {
24+
padding-bottom: 1em;
25+
}
26+
27+
.page-title {
28+
display: flex;
29+
align-items: center;
30+
font-size: var(--sys-size-9);
31+
color: var(--sys-color-on-surface);
32+
margin: var(--sys-size-10) var(--sys-size-5) var(--sys-size-5);
33+
}
34+
.page-title::before {
35+
content: '';
36+
width: var(--sys-size-9);
37+
height: var(--sys-size-9);
38+
margin-right: var(--sys-size-6);
39+
background-image: var(--engine262-icon);
40+
background-size: 100% 100%;
41+
}
42+
.page-title a {
43+
text-decoration: none;
44+
color: var(--ref-palette-primary70);
45+
}
46+
47+
.page-content {
48+
margin: var(--sys-size-7);
49+
}
50+
51+
.root-view {
52+
background-color: var(--app-color-toolbar-background) !important;
53+
}
54+
55+
#fork {
56+
position: fixed;
57+
right: 0;
58+
z-index: 1;
59+
}
60+
#star-me {
61+
position: fixed;
62+
line-height: 18px;
63+
text-align: center;
64+
transform: rotate(45deg);
65+
padding: 8px 0;
66+
right: -60px;
67+
top: 44px;
68+
box-sizing: border-box;
69+
width: 230px;
70+
background: rgb(19, 22, 32);
71+
color: white;
72+
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
73+
letter-spacing: 1px;
74+
border: 1px solid rgba(255, 255, 255, 0.4);
75+
}

‎next.html

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<meta charset="utf-8" />
4+
<title>engine262 playground</title>
5+
<!--
6+
Checkout the latest rev at https://chromium.googlesource.com/devtools/devtools-frontend/+log
7+
Current commit 74c3cc088489c98b643d79c3eb480e8acedf377e is committed on Mon Mar 10 14:18:10 2025
8+
The most recent commit may not been built yet, so you may need to use a commit few days ago.
9+
-->
10+
<script type="importmap">
11+
{
12+
"imports": {
13+
"chrome-devtools-frontend/": "https://chrome-devtools-frontend.appspot.com/serve_rev/@74c3cc088489c98b643d79c3eb480e8acedf377e/"
14+
}
15+
}
16+
</script>
17+
<link rel="modulepreload" href="./src/late-panels.mjs" as="script" />
18+
<link rel="modulepreload" href="./src/262_worker.mjs" as="script" />
19+
<meta
20+
http-equiv="Content-Security-Policy"
21+
content="object-src 'none'; script-src 'self' 'sha256-YCezwjqZIYZtHaYW1WJzVCeRrxO0ie1Wg6rRb3iSlno=' https://chrome-devtools-frontend.appspot.com https://cdn.jsdelivr.net/ https://engine262.js.org/"
22+
/>
23+
<meta name="referrer" content="no-referrer" />
24+
<link href="./next-style.css" rel="stylesheet" />
25+
<link
26+
href="https://chrome-devtools-frontend.appspot.com/serve_rev/@74c3cc088489c98b643d79c3eb480e8acedf377e/application_tokens.css"
27+
rel="stylesheet"
28+
/>
29+
<link
30+
href="https://chrome-devtools-frontend.appspot.com/serve_rev/@74c3cc088489c98b643d79c3eb480e8acedf377e/design_system_tokens.css"
31+
rel="stylesheet"
32+
/>
33+
<template id="engine262-readme-template">
34+
<main id="engine262-readme">
35+
<div class="page-title" role="heading" aria-level="1">
36+
<a href="https://github.com/engine262/engine262/" target="_blank">engine262</a>
37+
<span></span>
38+
</div>
39+
<a href="https://github.com/engine262/engine262" target="_blank">
40+
<span id="star-me">Star me on GitHub</span>
41+
</a>
42+
<article></article>
43+
</main>
44+
</template>
45+
46+
<body class="undocked" id="-blink-dev-tools">
47+
<dialog id="loading">Loading...</dialog>
48+
<div id="fork" class='card-wrap'>
49+
</div>
50+
<script>
51+
const loading = document.querySelector('#loading');
52+
try {
53+
loading.showModal()
54+
} catch (e) {}
55+
window.addEventListener('loaded', () => {
56+
try {
57+
loading.close()
58+
} catch (e) {}
59+
})
60+
window.addEventListener('error', () => {
61+
try {
62+
loading.close()
63+
} catch (e) {}
64+
})
65+
</script>
66+
<script type="module" src="./src/next.mjs"></script>
67+
</body>
68+
</html>

0 commit comments

Comments
 (0)