Improve function trace example.

http://code.google.com/p/esprima/issues/detail?id=220
caolan · May 6, 2012 · 527806d · 527806d
1 parent 987aca1
commit 527806d
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 37 deletions.
diff --git a/demo/functiontrace.html b/demo/functiontrace.html
@@ -14,7 +14,7 @@
 <link rel="stylesheet" type="text/css" href="../assets/style.css"/>
 <style>
 .CodeMirror-scroll {
-    height: 300px;
+    height: 320px;
 }
 </style>
 </head>
@@ -58,7 +58,11 @@ <h1>Function Trace <small>reveals what is being called</small></h1>
 </textarea></p>
 <p id="codemirror" align="right"><small>The above code editor is based on <a href="http://codemirror.net" target="_blank">CodeMirror</a>.</small></p>
 
-<p><input type="button" value="Run" id="run"></p>
+<p><input type="button" value="Insert tracing" id="instrument">
+<span style="margin-left: 50px;">&nbsp;</span>
+<input type="button" value="Run" id="run"></p>
+
+<p>Instrumentation for each function will be added with the <i>Insert tracing</i> button. Pressing the <i>Run</i> button will execute the code (using JavaScript <code>eval</code>) with the instrumentation, and then call counts for each function will be displayed (sorted by the number of calls). <b>Warning</b>: do not run untrusted code!</p>
 
 <div id="result"><p>No result yet.</p></div>
 
@@ -71,7 +75,7 @@ <h1>Function Trace <small>reveals what is being called</small></h1>
 </div>
 <script>
 /*jslint sloppy:true browser:true */
-/*global traceRun:true, CodeMirror:true */
+/*global traceInstrument: true, traceRun:true, CodeMirror:true */
 window.onload = function () {
     var el;
 
@@ -82,6 +86,7 @@ <h1>Function Trace <small>reveals what is being called</small></h1>
         el.textContent = window.esprima.version;
     }
 
+    document.getElementById('instrument').onclick = traceInstrument;
     document.getElementById('run').onclick = traceRun;
 };
 

diff --git a/demo/functiontrace.js b/demo/functiontrace.js
@@ -24,9 +24,7 @@
 
 /*jslint browser:true evil:true */
 
-var timerId;
-
-function traceRun() {
+(function (global) {
     'use strict';
 
     var lookup;
@@ -52,7 +50,7 @@ function traceRun() {
         return (ch === '\n' || ch === '\r' || ch === '\u2028' || ch === '\u2029');
     }
 
-    function insertTracer() {
+    global.traceInstrument = function () {
         var tracer, code, i, functionList, signature, pos;
 
         if (typeof window.editor === 'undefined') {
@@ -61,14 +59,30 @@ function traceRun() {
             code = window.editor.getValue();
         }
 
-        tracer = window.esmorph.Tracer.FunctionEntrance('window.TRACE.enterFunction');
+        // TODO: remove all existing instrumentation
+
+        tracer = window.esmorph.Tracer.FunctionEntrance(function (fn) {
+            signature = 'window.TRACE({ ';
+            signature += 'name: "' + fn.name + '", ';
+            signature += 'lineNumber: ' + fn.loc.start.line + ', ';
+            signature += 'range: [' + fn.range[0] + ',' + fn.range[1] + ']';
+            signature += ' })';
+            return signature;
+        });
+
         code = window.esmorph.modify(code, tracer);
 
+        if (typeof window.editor === 'undefined') {
+            document.getElementById('code').value = code;
+        } else {
+            window.editor.setValue(code);
+        }
+
         // Enclose in IIFE.
         code = '(function() {\n' + code + '\n}())';
 
         return code;
-    }
+    };
 
     function showResult() {
         var i, str, histogram, entry;
@@ -88,36 +102,43 @@ function traceRun() {
         id('result').innerHTML = str;
     }
 
-    window.TRACE = {
-        hits: {},
-        enterFunction: function (info) {
-            var key = info.name + ' at line ' + info.lineNumber;
-            if (this.hits.hasOwnProperty(key)) {
-                this.hits[key] = this.hits[key] + 1;
-            } else {
-                this.hits[key] = 1;
-            }
-        },
-        getHistogram: function () {
-            var entry,
-                sorted = [];
-            for (entry in this.hits) {
-                if (this.hits.hasOwnProperty(entry)) {
-                    sorted.push({ name: entry, count: this.hits[entry]});
+    function createTraceCollector() {
+        global.TRACE = {
+            hits: {},
+            enterFunction: function (info) {
+                var key = info.name + ' at line ' + info.lineNumber;
+                if (this.hits.hasOwnProperty(key)) {
+                    this.hits[key] = this.hits[key] + 1;
+                } else {
+                    this.hits[key] = 1;
                 }
+            },
+            getHistogram: function () {
+                var entry,
+                    sorted = [];
+                for (entry in this.hits) {
+                    if (this.hits.hasOwnProperty(entry)) {
+                        sorted.push({ name: entry, count: this.hits[entry]});
+                    }
+                }
+                sorted.sort(function (a, b) {
+                    return b.count - a.count;
+                });
+                return sorted;
             }
-            sorted.sort(function (a, b) {
-                return b.count - a.count;
-            });
-            return sorted;
+        };
+    }
+
+    global.traceRun = function () {
+        var code;
+        try {
+            code = global.traceInstrument();
+            createTraceCollector();
+            eval(code);
+            showResult();
+        } catch (e) {
+            id('result').innerText = e.toString();
         }
     };
-
-    try {
-        eval(insertTracer());
-        showResult();
-    } catch (e) {
-        id('result').innerText = e.toString();
-    }
-}
+}(window));
 /* vim: set sw=4 ts=4 et tw=80 : */