bench: make collecting data into csv easier

Author: fitzgen

bench/bench-dom-bindings.js

@@ -57,11 +57,21 @@ whichMap.addEventListener("input", e => {
 multiplyBy.addEventListener("input", e => {
   e.preventDefault();
   updateTestSourceMap();
-})
+});
+
+var implAndBrowser = "<unknown>";
+
+const implAndBrowserInput = document.getElementById("impl-and-browser");
+const updateImplAndBrowser = () => {
+  implAndBrowser = implAndBrowserInput.value;
+};
+implAndBrowserInput.addEventListener("input", updateImplAndBrowser);
+updateImplAndBrowser();
+
 
 // Run a benchmark when the given button is clicked and display results in the
 // given element.
-function benchOnClick(button, results, bencher) {
+function benchOnClick(button, results, benchName, bencher) {
   button.addEventListener("click", async function (e) {
     e.preventDefault();
 
@@ -74,6 +84,11 @@ function benchOnClick(button, results, bencher) {
 
     buttons.forEach(b => b.removeAttribute("disabled"));
 
+    const csv = stats
+          .xs
+          .map(x => `${testSourceMap.mappings.length},"${benchName}",${x}`)
+          .join("\n");
+
     results.innerHTML = `
       <table>
         <thead>
@@ -93,7 +108,7 @@ function benchOnClick(button, results, bencher) {
           </tr>
         </tbody>
       </table>
-      <pre style="overflow:hidden">${stats.xs}</pre>
+      <pre style="overflow:scroll;max-height:100px; max-width:500px;outline:1px solid black">${csv}</pre>
     `;
   }, false);
 }
@@ -109,5 +124,5 @@ for (let bench of Object.keys(benchmarks)) {
   const results = document.createElement("div");
   document.body.appendChild(results);
 
-  benchOnClick(button, results, benchmarks[bench]);
+  benchOnClick(button, results, bench, benchmarks[bench]);
 }

bench/bench.html

@@ -58,6 +58,12 @@ <h1>Benchmark <code>mozilla/source-map</code></h1>
                 <input id="multiply-size-by" type="number", value="1", min="1", max="10", step="1"/>
             </label>
         </p>
+        <p>
+            <label>
+                Implementation and Browser:
+                <input id="impl-and-browser" value="<unknown>" />
+            </label>
+        </p>
     </form>
 
     <script src="self-source-map.js"></script>

bench/bench.js

@@ -81,7 +81,7 @@ var benchmarks = {
     );
   },
 
-  "set first breakpoint (parse + query-by-original-location)": () => {
+  "set.first.breakpoint": () => {
     let testMapping;
     return benchmark(
       async function () {
@@ -100,7 +100,7 @@ var benchmarks = {
     );
   },
 
-  "first pause at exception (parse + query-by-generated-location)": () => {
+  "first.pause.at.exception": () => {
     let testMapping;
     return benchmark(
       async function () {
@@ -119,7 +119,7 @@ var benchmarks = {
     );
   },
 
-  "subsequent setting breakpoints (already parsed; query-by-original-location)": () => {
+  "subsequent.setting.breakpoints": () => {
     let testMapping;
     let smc;
     return benchmark(
@@ -139,7 +139,7 @@ var benchmarks = {
     )
   },
 
-  "subsequent pauses at exception (already parsed; query-by-generated-location)": () => {
+  "subsequent.pausing.at.exceptions": () => {
     let testMapping;
     let smc;
     return benchmark(
@@ -159,7 +159,7 @@ var benchmarks = {
     );
   },
 
-  "parse + iterating over all mappings": () => {
+  "parse.and.iterate": () => {
     return benchmark(
       noop,
       async function () {
@@ -181,7 +181,7 @@ var benchmarks = {
     );
   },
 
-  "already parsed; iterating over all mappings": () => {
+  "iterate.already.parsed": () => {
     let smc;
     return benchmark(
       async function () {