Merge pull request Tencent#50 from Maizify/dev

support expend an object or an array layer by layer, support expend o…  … …bject's unenumerable properties

example/demo1.html

@@ -45,7 +45,8 @@ <h1 class="page_title">Demo 1</h1>
 $('.js_btn_log_obj').on('tap', function(e) {
   var obj = {
     'foo': 'bar',
-    'num': 3,
+    'obj': {'bool': true},
+    'arr': [9, 8, 7],
     'tips': 'JS对象可以折叠展示'
   };
   console.log(obj);

src/core/core.less

@@ -48,7 +48,7 @@
 
   .vc-panel {
     position: fixed;
-    min-height: 80%;
+    min-height: 85%;
     left: 0;
     right: 0;
     bottom: 0;
@@ -209,16 +209,13 @@
       .vc-fold-outer {
         display: block;
         font-style: italic;
+        padding-left: 10px;
+        position: relative;
       }
       .vc-fold-outer:active {
         background-color: #E6E6E6;
       }
 
-      .vc-fold-outer {
-        padding-left: 10px;
-        position: relative;
-      }
-
       .vc-fold-outer:before {
         content: "";
         position: absolute;
@@ -229,30 +226,35 @@
         border: transparent solid 4px;
         border-left-color: #000;
       }
-
-      .vc-fold-inner {
-        display: none;
-        white-space: pre-wrap;
-      }
-    }
-
-    .vc-item .vc-fold.vc-toggle {
-
-      .vc-fold-outer:before {
+      .vc-fold-outer.vc-toggle:before {
         top: 6px;
         left: 0;
         border-top-color: #000;
         border-left-color: transparent;
       }
 
       .vc-fold-inner {
+        display: none;
+        margin-left: 10px;
+      }
+      .vc-fold-inner.vc-toggle {
         display: block;
       }
+
+      .vc-fold-inner .vc-code-key {
+        margin-left: 10px;
+      }
+      .vc-fold-outer .vc-code-key {
+        margin-left: 0;
+      }
     }
 
     .vc-code-key {
       color: #905;
     }
+    .vc-code-private-key {
+      color: #D391B5;
+    }
     .vc-code-function {
       color: #905;
       font-style: italic;

src/lib/tool.js

@@ -182,6 +182,39 @@ export function JSONStringify(obj) {
   return json;
 }
 
+/**
+ * get an object's all keys ignore whether they are not enumerable
+ */
+export function getObjAllKeys(obj) {
+  if (!isObject(obj) && !isArray(obj)) {
+    return [];
+  }
+  let dontEnums = [
+    'toString',
+    'toLocaleString',
+    'valueOf',
+    'hasOwnProperty',
+    'isPrototypeOf',
+    'propertyIsEnumerable',
+    'constructor'
+  ];
+  let keys = [];
+  for (let key in obj) {
+    if (dontEnums.indexOf(key) < 0) {
+      keys.push(key);
+    }
+  }
+  keys = keys.sort();
+  return keys;
+}
+
+/**
+ * get an object's prototype name
+ */
+export function getObjName(obj) {
+  return Object.prototype.toString.call(obj).replace('[object ', '').replace(']', '');
+}
+
 /**
  * localStorage methods
  */

src/log/default.js

@@ -64,27 +64,35 @@ class VConsoleDefaultTab extends VConsoleLogTab {
    */
   evalCommand(cmd) {
     // print command to console
-    let date = tool.getDate(+new Date());
-    this.renderLog({
+    this.printLog({
       logType: 'log',
-      meta: date.hour + ':' + date.minute + ':' + date.second,
-      content: $.render(tplItemCode, {content: cmd, type: 'input'}, true),
+      content: $.render(tplItemCode, {content: cmd, type: 'input'}),
+      noMeta: true,
       style: ''
     });
     // eval
     let result = eval(cmd);
     // print result to console
-    let content = '';
+    let $content;
     if (tool.isArray(result) || tool.isObject(result)) {
-      content = this.getFoldedLine(result);
+      $content = this.getFoldedLine(result);
     } else {
-      content = $.render(tplItemCode, {content: result, type: 'output'}, true);
+      if (tool.isNull(result)) {
+        result = 'null';
+      } else if (tool.isUndefined(result)) {
+        result = 'undefined';
+      } else if (tool.isFunction(result)) {
+        result = 'function()'
+      } else if (tool.isString(result)) {
+        result = '"' + result + '"';
+      }
+      $content = $.render(tplItemCode, {content: result, type: 'output'});
     }
-    this.renderLog({
+    this.printLog({
       logType: 'log',
-      meta: '',
-      content: content,
-      style: 'vc-item-nometa'
+      content: $content,
+      noMeta: true,
+      style: ''
     });
   }
 

src/log/item.html

@@ -1,4 +1,4 @@
-<div class="vc-item vc-item-{{logType}} {{style}}">
-	<span class="vc-item-meta">{{meta}}</span>
-	<div class="vc-item-content">{{content}}</div>
+<div class="vc-item vc-item-{{logType}} {{if (!noMeta)}}vc-item-nometa{{/if}} {{style}}">
+	<span class="vc-item-meta">{{if (!noMeta)}}{{meta}}{{/if}}</span>
+	<div class="vc-item-content"></div>
 </div>

src/log/item_fold.html

@@ -1,4 +1,10 @@
 <div class="vc-fold">
-	<i class="vc-fold-outer">{{outer}}</i>
-	<pre class="vc-fold-inner vc-max-height">{{inner}}</pre>
+  {{if (lineType == 'obj')}}
+    <i class="vc-fold-outer">{{outer}}</i>
+    <div class="vc-fold-inner"></div>
+  {{else if (lineType == 'value')}}
+    <i class="vc-code-{{valueType}}">{{value}}</i>
+  {{else if (lineType == 'kv')}}
+    <i class="vc-code-key{{if (keyType)}} vc-code-{{keyType}}-key{{/if}}">{{key}}</i>: <i class="vc-code-{{valueType}}">{{value}}</i>
+  {{/if}}
 </div>

src/log/item_fold_code.html

@@ -1 +1,3 @@
-<i class="vc-code-{{type}}">{{code}}</i>
+<span>
+  <i class="vc-code-key{{if (keyType)}} vc-code-{{keyType}}-key{{/if}}">{{key}}</i>: <i class="vc-code-{{valueType}}">{{value}}</i>
+</span>