make output a bit nicer

Author: devsnek

index.html

@@ -49,7 +49,7 @@ <h1>engine262</h1>
 
       <section id="output-section">
         <h2>Output:</h2>
-        <textarea id="output" cols="80" autocomplete="off" disabled></textarea>
+        <div id="output"></div>
       </section>
     </main>
 

src/runner.mjs

@@ -52,14 +52,27 @@ function respawn(first = false) {
       });
     } else if (data.type === 'console') {
       if (data.value.method === 'clear') {
-        output.value = '';
+        const range = document.createRange();
+        range.selectNodeContents(output);
+        range.deleteContents();
       } else {
+        const line = document.createElement('span');
         data.value.values.forEach((v) => {
-          output.value += v;
-          output.value += ' ';
+          line.textContent += v;
+          line.textContent += ' ';
         });
-        output.value += '\n';
+        const container = document.createElement('div');
+        container.className = `log-${data.value.method}`;
+        container.appendChild(line);
+        output.appendChild(container);
       }
+    } else if (data.type === 'unhandledRejection') {
+      const line = document.createElement('span');
+      line.textContent = `Unhandled Rejection:\n${data.value}`;
+      const container = document.createElement('div');
+      container.className = 'log-error';
+      container.appendChild(line);
+      output.appendChild(container);
     }
   });
 }

src/worker.js

@@ -1,6 +1,7 @@
 'use strict';
 
 /* eslint-env worker */
+/* eslint-disable no-restricted-globals */
 
 importScripts('https://unpkg.com/acorn@7.0.0/dist/acorn.js');
 importScripts('https://unpkg.com/nearley@2.16.0/lib/nearley.js');
@@ -29,6 +30,15 @@ addEventListener('message', ({ data }) => {
     try {
       initializeAgent({
         features: [...state.get('features')],
+        promiseRejectionTracker(promise, operation) {
+          if (operation === 'reject') {
+            postMessage({
+              type: 'unhandledRejection',
+              // eslint-disable-next-line no-use-before-define
+              value: inspect(promise.PromiseResult, realm),
+            });
+          }
+        },
       });
     } catch (e) {
       // o.o

style.css

@@ -47,16 +47,41 @@ textarea:disabled {
   border: 1px solid black;
   color: black;
 }
+
 #input-section, #output-section {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   flex-shrink: 1;
 }
+
 #output {
   flex-grow: 1;
   min-height: 200px;
+  background-color: white;
+  border: 1px solid black;
+  font-family: monospace;
+  white-space: pre-wrap;
+}
+#output > div {
+  padding-left: 0.3em;
+}
+
+[class*="log"] {
+  border-bottom: 1px solid black;
+}
+
+.log-warn {
+  background-color: yellow;
+}
+
+.log-debug {}
+
+.log-error {
+  background-color: #FF000070;
 }
+
+
 #features {
   margin: 0;
   padding: 0;