[IMP] tools: rework benchmarks application

closes #130

tools/benchmarks/vue/app.js

@@ -1,4 +1,9 @@
-import { buildData, startMeasure, stopMeasure } from "../shared/utils.js";
+import {
+  buildData,
+  startMeasure,
+  stopMeasure,
+  formatNumber
+} from "../shared/utils.js";
 
 //------------------------------------------------------------------------------
 // Counter Widget
@@ -45,29 +50,36 @@ Vue.component("my-message", {
 const App = {
   name: "App",
   data() {
-    return { messages: [] };
+    return { messages: [], multipleFlag: false, clearAfterFlag: false };
+  },
+  mounted() {
+    this.log(`Benchmarking Vue v${Vue.version}`);
   },
   methods: {
     addMessages(n) {
-      startMeasure("add " + n);
-      const newMessages = buildData(n);
-      this.messages.push.apply(this.messages, newMessages);
-      stopMeasure();
+      this.benchmark("add " + n, () => {
+        const newMessages = buildData(n);
+        this.messages.push.apply(this.messages, newMessages);
+      });
     },
 
     clear() {
-      startMeasure("clear");
-      this.messages = [];
-      stopMeasure();
+      this._benchmark("clear", () => {
+        this.messages = [];
+      });
+    },
+
+    clearLog() {
+      this.$refs.log.innerHTML = "";
     },
 
     updateSomeMessages() {
-      startMeasure("update every 10th");
-      const messages = this.messages;
-      for (let i = 0; i < this.messages.length; i += 10) {
-        messages[i].author += "!!!";
-      }
-      stopMeasure();
+      this.benchmark("update every 10th", () => {
+        const messages = this.messages;
+        for (let i = 0; i < this.messages.length; i += 10) {
+          messages[i].author += "!!!";
+        }
+      });
     },
 
     removeMessage(id) {
@@ -75,18 +87,98 @@ const App = {
       const index = this.messages.findIndex(m => m.id === id);
       this.messages.splice(index, 1);
       stopMeasure();
+    },
+    log(str, isBold) {
+      const div = document.createElement("div");
+      if (isBold) {
+        div.classList.add("bold");
+      }
+      div.textContent = `> ${str}`;
+      this.$refs.log.appendChild(div);
+      this.$refs.log.scrollTop = this.$refs.log.scrollHeight;
+    },
+    benchmark(message, fn, callback) {
+      if (this.multipleFlag) {
+        const N = 20;
+        let n = N;
+        let total = 0;
+        let cb = info => {
+          let finalize = () => {
+            n--;
+            total += info.delta;
+            if (n === 0) {
+              const avg = total / N;
+              this.log(`Average: ${formatNumber(avg)}ms`, true);
+              if (callback) {
+                callback();
+              }
+            } else {
+              this._benchmark(message, fn, cb);
+            }
+          };
+
+          if (this.clearAfterFlag) {
+            this._benchmark(
+              "clear",
+              () => {
+                this.messages = [];
+              },
+              finalize,
+              false
+            );
+          } else {
+            finalize();
+          }
+        };
+        this._benchmark(message, fn, cb);
+      } else {
+        this._benchmark(message, fn, callback);
+      }
+    },
+
+    _benchmark(message, fn, cb, log = true) {
+      setTimeout(() => {
+        startMeasure(message);
+        fn();
+        stopMeasure(info => {
+          if (log) {
+            this.log(info.msg);
+          }
+          if (cb) {
+            cb(info);
+          }
+        });
+      }, 10);
     }
   },
   template: `
     <div class="main">
         <div class="left-thing">
-            <div>Number of msg: {{messages.length}}</div>
-            <button @click="addMessages(100)">Add 100 messages</button>
-            <button @click="addMessages(1000)">Add 1000 messages</button>
-            <button @click="addMessages(10000)">Add 10000 messages</button>
-            <button @click="addMessages(50000)">Add 50000 messages</button>
-            <button @click="updateSomeMessages">Update every 10th message</button>
-            <button @click="clear">Clear</button>
+            <div class="title">Actions</div>
+            <div class="panel">
+                <button @click="addMessages(100)">Add 100 messages</button>
+                <button @click="addMessages(1000)">Add 1k messages</button>
+                <button @click="addMessages(10000)">Add 10k messages</button>
+                <button @click="addMessages(30000)">Add 30k messages</button>
+                <button @click="updateSomeMessages">Update every 10th message</button>
+                <button @click="clear">Clear</button>
+            </div>
+            <div class="flags">
+                <div>
+                    <input type="checkbox" id="multipleflag" v-model="multipleFlag"/>
+                    <label for="multipleflag">Do it 20x</label>
+                </div>
+                <div>
+                    <input type="checkbox" id="clearFlag" v-model="clearAfterFlag"/>
+                    <label for="clearFlag">Clear after</label>
+                </div>
+            </div>
+            <div class="info">Number of messages: {{messages.length}}</div>
+            <hr/>
+            <div class="title">Log <span class="clear-log" @click="clearLog">(clear)</span></div>
+            <div class="log">
+                <div class="log-content" ref="log"/>
+            </div>
         </div>
         <div class="right-thing">
             <div class="content">