adds ui styling and context to benchmark prototype

eaglstun · Nov 21, 2017 · a7314d6 · a7314d6
1 parent 7356546
commit a7314d6
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 10 deletions.
diff --git a/src/benchmark/benchmark.css b/src/benchmark/benchmark.css
@@ -1,7 +1,57 @@
+body {
+    font-family: monospace;
+}
+p {
+    max-width: 400px;
+}
 @media (min-width: 960px) {
     .profile-tables {
+        top: 0px;
         position: absolute;
-        top: 0;
-        left: 520px;
+        left: 450px;
     }
 }
+#scratch-stage {
+    border: 5px solid black;
+    display: block;
+    width: 400px;
+    height: 300px;
+}
+.loading label, .profile-count label{
+    width: 15em;
+    display: inline-block;
+}
+.profile-tables table {
+    margin: 30px 0 30px 0px;
+}
+.profile-tables th {
+    border-bottom: 1px solid #333;
+    text-align: center;
+}
+.profile-tables th:first-child {
+    width: 215px;
+}
+.profile-tables th, .profile-tables td {
+    min-width: 85px;
+    border-bottom: 1px solid #ccc;
+    border-spacing: 0;
+    border-collapse: collapse;
+    padding: 5px;
+}
+.profile-tables td:not(:first-child) {
+    text-align: center;
+}
+.profile-tables img{
+    margin: 0 auto;
+    display: block;
+    clear: both;
+    width: 20%;
+}
+
+.slow {
+    background-color: #ffa1a1;
+}
+.profiler-count-running {
+    height: 4em;
+    background-color: #dddddd;
+}
diff --git a/src/benchmark/benchmark.js b/src/benchmark/benchmark.js
@@ -5,10 +5,18 @@ const PROJECT_SERVER = 'https://cdn.projects.scratch.mit.edu/';
 
 const SLOW = .1;
 
+const projectInput = document.querySelector('input');
+
+document.querySelector('.run')
+    .addEventListener('click', () => {
+        window.location.hash = projectInput.value;
+        location.reload();
+    }, false);
+
 const loadProject = function () {
     let id = location.hash.substring(1);
     if (id.length < 1 || !isFinite(id)) {
-        id = '119615668';
+        id = projectInput.value;
     }
     Scratch.vm.downloadProjectId(id);
 };

diff --git a/src/benchmark/index.html b/src/benchmark/index.html
@@ -4,16 +4,28 @@
 <head>
     <meta charset="utf-8">
     <title>Scratch VM Benchmark</title>
-    <style>
-        canvas {
-          border: 5px solid black;
-        }
-    </style>
     <link rel="stylesheet" href="./benchmark.css" type="text/css" media="screen">
 </head>
 <body>
-    <h2>Scratch VM Benchmark</h2>
-    <canvas id="scratch-stage" style="width: 480px; height: 360px;"></canvas><br />
+  <h2>Scratch VM Benchmark</h2>
+  <p>
+    Welcome to the scratch-vm benchmark. This tool helps you profile a scratch
+    project. When you load the page, it:
+    <ol>
+      <li>loads the default project
+      <li>runs the project for 4 seconds to warm up
+      <li>profiles for 6 seconds
+      <li>stops and reports
+    </ol>
+  </p>
+  <input type="text" value="119615668">
+  <button class="run">run</button>
+  <p>
+    <i>Try a different project, like `130041250`</i>
+  </p>
+
+  <canvas id="scratch-stage"></canvas><br />
+
   <div class="loading">
     <label>Loading:</label>
     <span class="loading-complete">0</span> / <span class="loading-total">0</span>