Add: Css color display

src/Elements/Elements.es6

@@ -208,10 +208,12 @@ export default class Elements extends Tool
 
         var computedStyle = cssStore.getComputedStyle();
         if (this._rmDefComputedStyle) computedStyle = rmDefComputedStyle(computedStyle);
+        processStyleRules(computedStyle);
         ret.computedStyle = computedStyle;
 
         var styles = cssStore.getMatchedCSSRules();
         styles.unshift(getInlineStyle(el.style));
+        styles.forEach(style => processStyleRules(style.style));
         ret.styles = styles;
 
         return ret;
@@ -252,7 +254,18 @@ export default class Elements extends Tool
     }
 }
 
-var isElExist = val => util.isEl(val) && val.parentNode;
+function processStyleRules(style)
+{
+    util.each(style, (val, key) =>
+    {
+        if (util.startWith(val, 'rgb'))
+        {
+            style[key] = `<span class="eruda-style-color" style="background-color: ${val}"></span>${val}`;
+        }
+    });
+}
+
+const isElExist = val => util.isEl(val) && val.parentNode;
 
 function formatElName(data)
 {

src/Elements/Elements.hbs

@@ -38,7 +38,7 @@
                 {{#each computedStyle}}
                     <tr>
                         <td class="eruda-key">{{@key}}</td>
-                        <td>{{this}}</td>
+                        <td>{{{.}}}</td>
                     </tr>
                 {{/each}}
                 </tbody>
@@ -55,7 +55,7 @@
                     <div>{{selectorText}} {</div>
                     {{#each style}}
                         <div class="eruda-rule">
-                            <span>{{@key}}</span>: {{this}};
+                            <span>{{@key}}</span>: {{{.}}};
                         </div>
                     {{/each}}
                     <div>}</div>

src/Elements/Elements.scss

@@ -58,6 +58,13 @@
                 -webkit-overflow-scrolling: touch;
             }
         }
+        .style-color {
+            width: 7px;
+            height: 7px;
+            margin-right: 2px;
+            border: 1px solid $gray-dark;
+            display: inline-block;
+        }
         .computed-style {
             background: #fff;
             font-size: 12px;