Support lazy evaluation

doc/TOOL_API.md

@@ -15,6 +15,7 @@ Display console logs. Implementation detail follows the [console api spec](https
 |displayExtraInfo   |boolean|Display extra information      |
 |displayUnenumerable|boolean|Display unenumerable properties|
 |displayGetterVal   |boolean|Access getter value            |
+|lazyEvaluation     |boolean|Stringify object when clicked  |
 |viewLogInSources   |boolean|View log in sources panel      |
 |displayIfErr       |boolean|Auto display if error occurs   |
 |useWorker          |boolean|Use web worker                 |

src/Console/Console.js

@@ -210,6 +210,7 @@ export default class Console extends Tool {
       displayExtraInfo: false,
       displayUnenumerable: true,
       displayGetterVal: false,
+      lazyEvaluation: true,
       viewLogInSources: false,
       displayIfErr: false,
       useWorker: true,
@@ -227,6 +228,7 @@ export default class Console extends Tool {
     logger.displayHeader(cfg.get('displayExtraInfo'))
     logger.displayUnenumerable(cfg.get('displayUnenumerable'))
     logger.displayGetterVal(cfg.get('displayGetterVal'))
+    logger.lazyEvaluation(cfg.get('lazyEvaluation'))
     if (sources) logger.viewLogInSources(cfg.get('viewLogInSources'))
     logger.maxNum(maxLogNum)
 
@@ -244,6 +246,8 @@ export default class Console extends Tool {
           return logger.displayUnenumerable(val)
         case 'displayGetterVal':
           return logger.displayGetterVal(val)
+        case 'lazyEvaluation':
+          return logger.lazyEvaluation(val)
         case 'viewLogInSources':
           return logger.viewLogInSources(val)
         case 'useWorker':
@@ -262,6 +266,7 @@ export default class Console extends Tool {
       .switch(cfg, 'displayExtraInfo', 'Display Extra Information')
       .switch(cfg, 'displayUnenumerable', 'Display Unenumerable Properties')
       .switch(cfg, 'displayGetterVal', 'Access Getter Value')
+      .switch(cfg, 'lazyEvaluation', 'Lazy Evaluation')
 
     if (isWorkerSupported) settings.switch(cfg, 'useWorker', 'Use Web Worker')
     if (sources)

src/Console/Log.hbs

@@ -1,4 +1,4 @@
-<li>
+<li class="eruda-log-container">
     {{#if displayHeader}}
         <div class="eruda-header">
             <span data-mark="time">{{time}}</span> <span>{{from}}</span>

src/Console/Log.js

@@ -23,7 +23,9 @@ import {
   isArr,
   unique,
   contain,
-  isEmpty
+  isEmpty,
+  clone,
+  noop
 } from '../lib/util'
 
 export default class Log {
@@ -82,25 +84,36 @@ export default class Log {
 
     return false
   }
+  extractObj(cb = noop) {
+    let { args, type } = this
+
+    let setSrc = result => {
+      this.src = result
+      cb()
+    }
+    if (type === 'table') {
+      extractObj(args[0], {}, setSrc)
+    } else {
+      extractObj(
+        args.length === 1 && isObj(args[0]) ? args[0] : args,
+        {},
+        setSrc
+      )
+    }
+  }
   _formatMsg() {
     let { type, id, displayHeader, time, from, args } = this
 
-    if (this._needSrc()) {
-      let setSrc = result => (this.src = result)
-      if (type === 'table') {
-        extractObj(args[0], {}, setSrc)
-      } else {
-        extractObj(
-          args.length === 1 && isObj(args[0]) ? args[0] : args,
-          {},
-          setSrc
-        )
-      }
+    // Don't change original args for lazy evaluation.
+    args = clone(args)
+
+    if (this._needSrc() && !Log.lazyEvaluation) {
+      this.extractObj()
     }
 
-    let msg = '',
-      icon,
-      err
+    let msg = ''
+    let icon
+    let err
 
     switch (type) {
       case 'log':
@@ -148,7 +161,9 @@ export default class Log {
     this.value = msg
     msg = render({ msg, type, icon, id, displayHeader, time, from })
 
-    delete this.args
+    if (!this._needSrc() || !Log.lazyEvaluation) {
+      delete this.args
+    }
     this.formattedMsg = msg
   }
   static click(type, log, $el) {
@@ -172,6 +187,11 @@ export default class Log {
           } else {
             $json.addClass('eruda-hidden')
           }
+        } else if (log.args) {
+          log.extractObj(function() {
+            Log.click(type, log, $el)
+            delete log.args
+          })
         }
         break
       case 'error':
@@ -187,6 +207,7 @@ export default class Log {
 Log.showGetterVal = false
 Log.showUnenumerable = true
 Log.showSrcInSources = false
+Log.lazyEvaluation = true
 
 let getAbstract = wrap(origGetAbstract, function(fn, obj) {
   return fn(obj, {
@@ -241,12 +262,12 @@ function formatTable(args) {
   return ret
 }
 
-let regJsUrl = /https?:\/\/([0-9.\-A-Za-z]+)(?::(\d+))?\/[A-Z.a-z0-9/]*\.js/g,
-  regErudaJs = /eruda(\.min)?\.js/
+let regJsUrl = /https?:\/\/([0-9.\-A-Za-z]+)(?::(\d+))?\/[A-Z.a-z0-9/]*\.js/g
+let regErudaJs = /eruda(\.min)?\.js/
 
 function formatErr(err) {
-  let lines = err.stack ? err.stack.split('\n') : [],
-    msg = `${err.message || lines[0]}<br/>`
+  let lines = err.stack ? err.stack.split('\n') : []
+  let msg = `${err.message || lines[0]}<br/>`
 
   lines = lines.filter(val => !regErudaJs.test(val)).map(val => escape(val))
 

src/Console/Logger.js

@@ -52,6 +52,9 @@ export default class Logger extends Emitter {
   displayGetterVal(flag) {
     Log.showGetterVal = flag
   }
+  lazyEvaluation(flag) {
+    Log.lazyEvaluation = flag
+  }
   viewLogInSources(flag) {
     Log.showSrcInSources = flag
   }
@@ -191,9 +194,9 @@ export default class Logger extends Emitter {
     return this
   }
   insert(type, args) {
-    let logs = this._logs,
-      $el = this._$el,
-      el = $el.get(0)
+    let logs = this._logs
+    let $el = this._$el
+    let el = $el.get(0)
 
     let isAtBottom = el.scrollTop === el.scrollHeight - el.offsetHeight
 
@@ -214,7 +217,7 @@ export default class Logger extends Emitter {
       lastLog.addCount()
       if (log.time) lastLog.updateTime(log.time)
       $el
-        .find('li')
+        .find('.eruda-log-container')
         .last()
         .remove()
       log = lastLog
@@ -225,14 +228,15 @@ export default class Logger extends Emitter {
 
     if (this._maxNum !== 'infinite' && logs.length > this._maxNum) {
       $el
-        .find('li')
+        .find('.eruda-log-container')
         .first()
         .remove()
       logs.shift()
     }
 
-    if (this._filterLog(log) && this._container.active)
+    if (this._filterLog(log) && this._container.active) {
       $el.append(log.formattedMsg)
+    }
 
     this.emit('insert', log)
 
@@ -250,8 +254,8 @@ export default class Logger extends Emitter {
 
     if (filter === 'all') return logs
 
-    let isFilterRegExp = isRegExp(filter),
-      isFilterFn = isFn(filter)
+    let isFilterRegExp = isRegExp(filter)
+    let isFilterFn = isFn(filter)
 
     return logs.filter(log => {
       if (log.ignoreFilter) return true
@@ -295,11 +299,11 @@ export default class Logger extends Emitter {
     let self = this
 
     this._$el.on('click', '.eruda-log-item', function() {
-      let $el = $(this),
-        id = $el.data('id'),
-        type = $el.data('type'),
-        logs = self._logs,
-        log
+      let $el = $(this)
+      let id = $el.data('id')
+      let type = $el.data('type')
+      let logs = self._logs
+      let log
 
       for (let i = 0, len = logs.length; i < len; i++) {
         log = logs[i]