From c6e9dc7a5c7c94e08ef0d88c6f4121d579851f4c Mon Sep 17 00:00:00 2001
From: Maiz <me@maizify.com>
Date: Tue, 18 Oct 2016 14:14:37 +0800
Subject: [PATCH] merge from #77 pull request

---
 src/core/core.js       |  14 +++---
 src/log/log.js         | 106 +++++++++++++++++++++++++++++------------
 src/network/network.js |   6 +--
 3 files changed, 86 insertions(+), 40 deletions(-)

diff --git a/src/core/core.js b/src/core/core.js
index bf948f52..73767113 100644
--- a/src/core/core.js
+++ b/src/core/core.js
@@ -76,7 +76,7 @@ class VConsole {
     if (! $.one(id)) {
       let e = document.createElement('div');
       e.innerHTML = this.html;
-      document.documentElement.appendChild(e.children[0]);
+      document.documentElement.insertAdjacentElement('beforeend', e.children[0]);
     }
     this.$dom = $.one(id);
 
@@ -118,7 +118,7 @@ class VConsole {
         touchHasMoved = false,
         targetElem = null;
 
-    this.$dom.addEventListener('touchstart', function(e) { // todo: if double click 
+    this.$dom.addEventListener('touchstart', function(e) { // todo: if double click
       if (lastTouchStartTime === undefined) {
         let touch = e.targetTouches[0];
         touchstartX = touch.pageX;
@@ -336,7 +336,7 @@ class VConsole {
       that.tabList.push(plugin.id);
       // render tabbar
       let $tabbar = $.render(tplTabbar, {id: plugin.id, name: plugin.name});
-      $.one('.vc-tabbar', that.$dom).appendChild($tabbar);
+      $.one('.vc-tabbar', that.$dom).insertAdjacentElement('beforeend', $tabbar);
       // render tabbox
       let $tabbox = $.render(tplTabbox, {id: plugin.id});
       if (!!tabboxHTML) {
@@ -345,10 +345,10 @@ class VConsole {
         } else if (tool.isFunction(tabboxHTML.appendTo)) {
           tabboxHTML.appendTo($tabbox);
         } else if (tool.isElement(tabboxHTML)) {
-          $tabbox.appendChild(tabboxHTML);
+          $tabbox.insertAdjacentElement('beforeend', tabboxHTML);
         }
       }
-      $.one('.vc-content', that.$dom).appendChild($tabbox);
+      $.one('.vc-content', that.$dom).insertAdjacentElement('beforeend', $tabbox);
     });
     // render top bar
     plugin.trigger('addTopBar', function(btnList) {
@@ -379,7 +379,7 @@ class VConsole {
             }
           });
         }
-        $topbar.appendChild($item);
+        $topbar.insertAdjacentElement('beforeend', $item);
       }
     });
     // render tool bar
@@ -514,7 +514,7 @@ class VConsole {
    */
   show() {
     let that = this;
-    // before show console panel, 
+    // before show console panel,
     // trigger a transitionstart event to make panel's property 'display' change from 'none' to 'block'
     let $panel = $.one('.vc-panel', this.$dom);
     $panel.style.display = 'block';
diff --git a/src/log/log.js b/src/log/log.js
index 9f8c937e..8ffcc1bf 100644
--- a/src/log/log.js
+++ b/src/log/log.js
@@ -15,7 +15,7 @@ class VConsoleLogTab extends VConsolePlugin {
 
   constructor(...args) {
     super(...args);
-    
+
     this.tplTabbox = ''; // MUST be overwrite in child class
     this.allowUnformattedLog = true; // `[xxx]` format log
 
@@ -30,7 +30,7 @@ class VConsoleLogTab extends VConsolePlugin {
   }
 
   /**
-   * when vConsole is ready, 
+   * when vConsole is ready,
    * this event will be triggered (after 'add' event)
    * @public
    */
@@ -50,10 +50,12 @@ class VConsoleLogTab extends VConsolePlugin {
     let that = this;
     let types = ['All', 'Log', 'Info', 'Warn', 'Error'];
     let btnList = [];
-    for (let i=0; i<types.length; i++) {
+    for (let i = 0; i < types.length; i++) {
       btnList.push({
         name: types[i],
-        data: {type: types[i].toLowerCase()},
+        data: {
+          type: types[i].toLowerCase()
+        },
         className: '',
         onClick: function() {
           if (!$.hasClass(this, 'vc-actived')) {
@@ -99,7 +101,7 @@ class VConsoleLogTab extends VConsolePlugin {
       $.addClass(this, 'vc-actived');
 
       let logType = this.dataset.type,
-          $log = $.one('.vc-log', that.$tabbox);
+        $log = $.one('.vc-log', that.$tabbox);
       $.removeClass($log, 'vc-log-partly-log');
       $.removeClass($log, 'vc-log-partly-info');
       $.removeClass($log, 'vc-log-partly-warn');
@@ -195,11 +197,36 @@ class VConsoleLogTab extends VConsolePlugin {
       this.console.debug = window.console.debug;
       this.console.error = window.console.error;
     }
-    window.console.log = function() { that.printLog({logType:'log', logs:arguments}); };
-    window.console.info = function() { that.printLog({logType:'info', logs:arguments}); };
-    window.console.warn = function() { that.printLog({logType:'warn', logs:arguments}); };
-    window.console.debug = function() { that.printLog({logType:'debug', logs:arguments}); };
-    window.console.error = function() { that.printLog({logType:'error', logs:arguments}); };
+    window.console.log = function() {
+      that.printLog({
+        logType: 'log',
+        logs: arguments
+      });
+    };
+    window.console.info = function() {
+      that.printLog({
+        logType: 'info',
+        logs: arguments
+      });
+    };
+    window.console.warn = function() {
+      that.printLog({
+        logType: 'warn',
+        logs: arguments
+      });
+    };
+    window.console.debug = function() {
+      that.printLog({
+        logType: 'debug',
+        logs: arguments
+      });
+    };
+    window.console.error = function() {
+      that.printLog({
+        logType: 'error',
+        logs: arguments
+      });
+    };
   }
 
   clearLog() {
@@ -298,35 +325,39 @@ class VConsoleLogTab extends VConsolePlugin {
     let $content = $.one('.vc-item-content', $line);
     // generate content from item.logs
     for (let i=0; i<logs.length; i++) {
-      let $log = document.createElement('SPAN');
+      let log;
       try {
         if (logs[i] === '') {
           // ignore empty string
           continue;
         } else if (tool.isFunction(logs[i])) {
           // convert function to string
-          $log.innerHTML = ' ' + logs[i].toString();
+          log = '<span> ' + logs[i].toString() + '</span>';
         } else if (tool.isObject(logs[i]) || tool.isArray(logs[i])) {
           // object or array
-          $log = this.getFoldedLine(logs[i]);
+          log = this.getFoldedLine(logs[i]);
         } else {
           // default
-          $log.innerHTML = ' ' + tool.htmlEncode(logs[i]).replace(/\n/g, '<br/>');
+          log = '<span> ' + tool.htmlEncode(logs[i]).replace(/\n/g, '<br/>') + '</span>';
         }
       } catch (e) {
-        $log.innerHTML = ' [' + (typeof logs[i]) + ']';
+        log = '<span> [' + (typeof logs[i]) + ']</span>';
       }
-      if ($log) {
-        $content.appendChild($log);
+      if (log) {
+        if (typeof log === 'string')
+          $content.insertAdjacentHTML('beforeend', log);
+        else
+          $content.insertAdjacentElement('beforeend', log);
       }
     }
+
     // generate content from item.content
     if (tool.isObject(item.content)) {
-      $content.appendChild(item.content);
+      $content.insertAdjacentElement('beforeend', item.content);
     }
 
     // render to panel
-    $.one('.vc-log', this.$tabbox).appendChild($line);
+    $.one('.vc-log', this.$tabbox).insertAdjacentElement('beforeend', $line);
 
     // scroll to bottom if it is in the bottom before
     if (this.isInBottom) {
@@ -354,7 +385,10 @@ class VConsoleLogTab extends VConsolePlugin {
       }
       outer += ' ' + preview;
     }
-    let $line = $.render(tplFold, {outer: outer, lineType: 'obj'});
+    let $line = $.render(tplFold, {
+      outer: outer,
+      lineType: 'obj'
+    });
     $.bind($.one('.vc-fold-outer', $line), 'click', function(e) {
       e.preventDefault();
       e.stopPropagation();
@@ -371,11 +405,11 @@ class VConsoleLogTab extends VConsolePlugin {
       if ($content.children.length == 0 && !!obj) {
         // render object's keys
         let keys = tool.getObjAllKeys(obj);
-        for (let i=0; i<keys.length; i++) {
+        for (let i = 0; i < keys.length; i++) {
           let val = obj[keys[i]],
-              valueType = 'undefined',
-              keyType = '',
-              $line;
+            valueType = 'undefined',
+            keyType = '',
+            $line;
           // handle value
           if (tool.isString(val)) {
             valueType = 'string';
@@ -401,26 +435,38 @@ class VConsoleLogTab extends VConsolePlugin {
           if (tool.isArray(val)) {
             let name = tool.getObjName(val) + '[' + val.length + ']';
             $sub = that.getFoldedLine(val, $.render(tplFoldCode, {
-              key: keys[i], keyType: keyType, value: name, valueType: 'array'
+              key: keys[i],
+              keyType: keyType,
+              value: name,
+              valueType: 'array'
             }, true));
           } else if (tool.isObject(val)) {
             let name = tool.getObjName(val);
             $sub = that.getFoldedLine(val, $.render(tplFoldCode, {
-              key: tool.htmlEncode(keys[i]), keyType: keyType, value: name, valueType: 'object'
+              key: tool.htmlEncode(keys[i]),
+              keyType: keyType,
+              value: name,
+              valueType: 'object'
             }, true));
           } else {
             if (obj.hasOwnProperty && !obj.hasOwnProperty(keys[i])) {
               keyType = 'private';
             }
-            let renderData = {lineType: 'kv', key: tool.htmlEncode(keys[i]), keyType: keyType, value: tool.htmlEncode(val), valueType: valueType};
+            let renderData = {
+              lineType: 'kv',
+              key: tool.htmlEncode(keys[i]),
+              keyType: keyType,
+              value: tool.htmlEncode(val),
+              valueType: valueType
+            };
             $sub = $.render(tplFold, renderData);
           }
-          $content.appendChild($sub);
+          $content.insertAdjacentElement('beforeend', $sub);
         }
         // render object's prototype
         if (tool.isObject(obj)) {
           let proto = obj.__proto__,
-              $proto;
+            $proto;
           if (tool.isObject(proto)) {
             $proto = that.getFoldedLine(proto, $.render(tplFoldCode, {
               key: '__proto__',
@@ -437,7 +483,7 @@ class VConsoleLogTab extends VConsolePlugin {
               valueType: 'null'
             });
           }
-          $content.appendChild($proto);
+          $content.insertAdjacentElement('beforeend', $proto);
         }
       }
       return false;
diff --git a/src/network/network.js b/src/network/network.js
index 320bc345..e80a2cb5 100644
--- a/src/network/network.js
+++ b/src/network/network.js
@@ -62,7 +62,7 @@ class VConsoleNetworkTab extends VConsolePlugin {
       }
       e.preventDefault();
     });
-    
+
     let $content = $.one('.vc-content');
     $.bind($content, 'scroll', function(e) {
       if (!that.isShow) {
@@ -162,7 +162,7 @@ class VConsoleNetworkTab extends VConsolePlugin {
     if (!this.isReady) {
       return;
     }
-    
+
     // update dom
     let domData = {
       url: item.url,
@@ -185,7 +185,7 @@ class VConsoleNetworkTab extends VConsolePlugin {
     if ($old) {
       $old.parentNode.replaceChild($new, $old);
     } else {
-      $.one('.vc-log', this.$tabbox).appendChild($new);
+      $.one('.vc-log', this.$tabbox).insertAdjacentElement('beforeend', $new);
     }
     this.domList[id] = $new;