remove _pace method, add interval interface instead

css/stylesheet.css

@@ -15,13 +15,16 @@ a {
 }
 
 * {
+    color: inherit;
+}
+
+*:not(input) {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
     user-select: none;
-    color: inherit;
 }
 
 button {
@@ -85,6 +88,14 @@ nav h3 {
     height: 100%;
 }
 
+button input {
+    outline: none;
+    background: none;
+    border: none;
+    width: 20px;
+    text-align: right;
+}
+
 .sidemenu {
     top: 30px;
     bottom: 0;
@@ -252,6 +263,11 @@ pre {
     background: rgba(120, 0, 0, .8);
 }
 
+.toast.info {
+    border-color: rgb(0, 150, 0);
+    background: rgba(0, 120, 0, .8);
+}
+
 .github-fork-ribbon {
     position: fixed;
 }

index.html

@@ -25,6 +25,7 @@
         <button id="btn_prev"><i class="fa fa-chevron-left" aria-hidden="true"></i> Prev</button>
         <button id="btn_pause"><i class="fa fa-pause" aria-hidden="true"></i> Pause</button>
         <button id="btn_next">Next <i class="fa fa-chevron-right" aria-hidden="true"></i></button>
+        <button id="btn_interval">Interval: <input type="text" value="0.5"> sec</button>
     </div>
 </nav>
 <section class="sidemenu active">

js/module/tracer.js

@@ -4,7 +4,6 @@ var stepLimit = 1e6;
 var Tracer = function (module) {
     this.module = module || Tracer;
     this.traces = [];
-    this.traceOptions = null;
     this.traceIndex = -1;
     this.stepCnt = 0;
     this.capsule = tm.allocate(this);
@@ -49,18 +48,11 @@ Tracer.prototype = {
     _print: function (msg, delay) {
         this.pushStep({type: 'print', msg: msg}, delay);
     },
-    _pace: function (interval) {
-        this.pushStep({type: 'pace', interval: interval}, false);
-    },
     _clear: function () {
         this.pushStep({type: 'clear'}, true);
     },
-    visualize: function (options) {
-        options = options || {};
-        options.interval = options.interval || 500;
-
+    visualize: function () {
         $('#btn_trace').click();
-        this.traceOptions = options;
         this.traceIndex = -1;
         this.resumeStep();
     },
@@ -92,9 +84,6 @@ Tracer.prototype = {
                 case 'print':
                     tracer.printTrace(step.msg);
                     break;
-                case 'pace':
-                    tracer.traceOptions.interval = step.interval;
-                    break;
                 case 'clear':
                     tracer.clear();
                     tracer.printTrace('clear traces');
@@ -105,12 +94,12 @@ Tracer.prototype = {
         });
         if (!options.virtual) {
             this.refresh();
-            this.scrollToEnd(Math.min(50, this.traceOptions.interval));
+            this.scrollToEnd(Math.min(50, tm.interval));
         }
         if (tm.pause) return;
         timer = setTimeout(function () {
             tracer.step(i + 1, options);
-        }, sleepDuration || this.traceOptions.interval);
+        }, sleepDuration || tm.interval);
     },
     refresh: function () {
     },

js/module/tracer_manager.js

 var TracerManager = function () {
     this.pause = false;
     this.capsules = [];
+    this.interval = 500;
 };
 
 TracerManager.prototype = {
@@ -28,7 +29,6 @@ TracerManager.prototype = {
                 return false;
             }
         });
-        console.log('allocated ' + selectedCapsule);
         if (selectedCapsule == null) {
             selectedCapsule = this.add(newTracer);
         }
@@ -78,5 +78,8 @@ TracerManager.prototype = {
     },
     isPause: function () {
         return this.pause;
+    },
+    setInterval: function (interval) {
+        $('#btn_interval input').val(interval);
     }
 };
\ No newline at end of file

js/script.js

@@ -10,6 +10,11 @@ $(document).on('click', 'a', function (e) {
 
 var tm = new TracerManager();
 
+$('#btn_interval input').on('change', function () {
+    tm.interval = Number.parseFloat($(this).val() * 1000);
+    showInfoToast('Tracing interval has been set to ' + tm.interval / 1000 + ' second(s).');
+});
+
 var $module_container = $('.module_container');
 var initEditor = function (id) {
     var editor = ace.edit(id);
@@ -193,6 +198,16 @@ var showErrorToast = function (err) {
     }, 3000);
 };
 
+var showInfoToast = function (info) {
+    var $toast = $('<div class="toast info">').append(info);
+    $('.toast_container').append($toast);
+    setTimeout(function () {
+        $toast.fadeOut(function () {
+            $toast.remove();
+        });
+    }, 3000);
+};
+
 $('#btn_run').click(function () {
     try {
         tm.deallocateAll();