From 1db569cdf71518e1d06f42b679486362113409d2 Mon Sep 17 00:00:00 2001
From: surunzi <surunzi@foxmail.com>
Date: Sat, 3 Sep 2016 20:01:43 +0800
Subject: [PATCH] Dev: Improve log display

---
 src/lib/JsonViewer.es6 | 22 ++++++++++++++++------
 src/lib/json.scss      |  3 +++
 src/lib/stringify.es6  |  2 +-
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/lib/JsonViewer.es6 b/src/lib/JsonViewer.es6
index 39fbd8e..f9305e2 100644
--- a/src/lib/JsonViewer.es6
+++ b/src/lib/JsonViewer.es6
@@ -73,7 +73,7 @@ function createEl(key, val, firstLevel)
     if (val === null)
     {
         return `<li>
-                   <span class="eruda-key">${encode(key)}:</span>
+                   ${wrapKey(key)}
                    <span class="eruda-null">null</span>
                </li>`;
     }
@@ -81,7 +81,7 @@ function createEl(key, val, firstLevel)
     {
         var obj = `<li>
                        <span class="eruda-expanded ${firstLevel ? '' : 'eruda-collapsed'}"></span>
-                       <span class="eruda-key">${encode(key)}</span>
+                       ${firstLevel ? '' : wrapKey(key)}
                        <span class="eruda-open">${open} ${(val['erudaObjAbstract'] || '')}</span>
                        <ul class="eruda-${type}" ${firstLevel ? '' : 'style="display:none"'}>`;
         obj += jsonToHtml(val);
@@ -90,29 +90,39 @@ function createEl(key, val, firstLevel)
     if (util.isNum(val) || util.isBool(val))
     {
         return `<li>
-                   <span class="eruda-key">${encode(key)}: </span>
+                   ${wrapKey(key)}
                    <span class="eruda-${typeof val}">${encode(val)}</span>
                 </li>`;
     }
     if (util.isStr(val) && util.startWith(val, 'function'))
     {
         return `<li>
-                   <span class="eruda-key">${encode(key)}: </span>
+                   ${wrapKey(key)}
                    <span class="eruda-function">${val.length > 250 ? encode(val) : highlight(val, 'js')}</span>
                 </li>`;
     }
     if (val === '(...)' || val === '[circular]' || val === 'undefined' || val === 'Symbol')
     {
         return `<li>
-                   <span class="eruda-key">${encode(key)}: </span>
+                   ${wrapKey(key)}
                    <span class="eruda-special">${val}</span>
                 </li>`;
     }
 
     return `<li>
-                <span class="eruda-key">${encode(key)}: </span>
+                ${wrapKey(key)}
                 <span class="eruda-${typeof val}">"${encode(val)}"</span>
             </li>`;
 }
 
+function wrapKey(key)
+{
+    var keyClass = 'eruda-key';
+    if (util.contain(LIGHTER_KEY, key)) keyClass = 'eruda-key-lighter';
+
+    return `<span class="${keyClass}">${encode(key)}</span>: `;
+}
+
+const LIGHTER_KEY = ['__proto__', 'constructor', 'toString', 'valueOf'];
+
 var encode = str => util.escape(util.toStr(str));
\ No newline at end of file
diff --git a/src/lib/json.scss b/src/lib/json.scss
index aa482a5..1472324 100644
--- a/src/lib/json.scss
+++ b/src/lib/json.scss
@@ -46,6 +46,9 @@
     .key {
         color: #a71d5d;
     }
+    .key-lighter {
+        color: #d391b5;
+    }
     .expanded:before {
         content: "";
         width: 0;
diff --git a/src/lib/stringify.es6 b/src/lib/stringify.es6
index d4126cd..f6ec8bb 100644
--- a/src/lib/stringify.es6
+++ b/src/lib/stringify.es6
@@ -215,7 +215,7 @@ export default function stringify(obj, {
         // https://docs.webplatform.org/wiki/dom/HTMLAllCollection
         // Might cause a performance issue when stringify a dom element.
         json = wrapStr('[object HTMLAllCollection]');
-    } else if (type === '[object HTMLDocument]' && level > 0)
+    } else if (type === '[object HTMLDocument]' && level > 1)
     {
         // Same as reason above.
         json = wrapStr('[object HTMLDocument]');