Fix: Style color indicator

src/Console/Log.scss

@@ -80,13 +80,16 @@
             }
             &.error {
                 background: #fff0f0;
-                color: #ff0000;
+                color: #f00;
                 border-top: 1px solid #ffd7d7;
                 border-bottom: 1px solid #ffd7d7;
                 .stack {
                     color: #000;
                     padding-left: 1.2em;
                 }
+                .times {
+                    background: #f00;
+                }
             }
             &.warn {
                 background: #fffbe6;

src/Elements/Elements.es6

@@ -254,14 +254,13 @@ export default class Elements extends Tool
     }
 }
 
+var regColor = /rgba?\((.*?)\)/g;
+
 function processStyleRules(style)
 {
     util.each(style, (val, key) =>
     {
-        if (util.startWith(val, 'rgb'))
+        style[key] = val.replace(regColor, '<span class="eruda-style-color" style="background-color: $&"></span>$&');
-        {
-            style[key] = `<span class="eruda-style-color" style="background-color: ${val}"></span>${val}`;
-        }
     });
 }
 
@@ -369,7 +368,6 @@ var NO_STYLE_TAG = ['script', 'style', 'meta', 'title', 'link', 'head'];
 
 var needNoStyle = tagName => NO_STYLE_TAG.indexOf(tagName.toLowerCase()) > -1;
 
-
 function addEvent(el, type, listener, useCapture = false)
 {
     if (!util.isFn(listener) || !util.isBool(useCapture)) return;

src/Elements/Elements.scss

@@ -96,6 +96,7 @@
                     margin-bottom: 10px;
                     .rule {
                         padding-left: 2em;
+                        word-break: break-all;
                         span {
                             color: $red-dark;
                         }

test/index.html

@@ -29,45 +29,43 @@
         <div>
             <img src="http://7xn2zy.com1.z0.glb.clouddn.com/blog_elf.jpg">
         </div>
-        <button>Test</button>
-        <script>
-            document.body.addEventListener('click', function ()
-            {
-                console.log('test');
-            }, false);
-            var test = document.getElementById('test-element');
-            test.addEventListener('click', function ()
-            {
-                console.log('test2');
-            }, false);
-            test.addEventListener('click', function ()
-            {
-                console.log('This is something really really cool!!!!! Laaaaaaaaaa!!!!!!!!!!!!!!!');
-            }, true);
-            test.addEventListener('touchstart', function ()
-            {
-                console.log('test3');
-            }, false);
-            function req(url)
-            {
-                var xhr = new XMLHttpRequest();
-
-                xhr.open('GET', url);
-                xhr.send();
-            }
-            /*setTimeout(function ()
-            {
-                req('http://localhost:3000/test/style.css');
-            }, 1000);
-            setTimeout(function ()
-            {
-                req('http://localhost:3000/test/data.json');
-            }, 2000);
-            setTimeout(function ()
-            {
-                req('http://localhost:3000/test/empty.json');
-            }, 3000);*/
-        </script>
     </div>
+    <button>Test</button>
+    <button onclick="xxx();">Trigger Error</button>
+    <div style="height: 500px;"></div>
+    <script>
+        var test = document.getElementById('test-element');
+        test.addEventListener('click', function ()
+        {
+            console.log('test2');
+        }, false);
+        test.addEventListener('click', function ()
+        {
+            console.log('This is something really really cool!!!!! Laaaaaaaaaa!!!!!!!!!!!!!!!');
+        }, true);
+        test.addEventListener('touchstart', function ()
+        {
+            console.log('test3');
+        }, false);
+        function req(url)
+        {
+            var xhr = new XMLHttpRequest();
+
+            xhr.open('GET', url);
+            xhr.send();
+        }
+        setTimeout(function ()
+        {
+            req('http://localhost:3000/test/style.css');
+        }, 1000);
+        setTimeout(function ()
+        {
+            req('http://localhost:3000/test/data.json');
+        }, 2000);
+        setTimeout(function ()
+        {
+            req('http://localhost:3000/test/empty.json');
+        }, 3000);
+    </script>
 </body>
 </html>

test/style.css

@@ -5,6 +5,7 @@ html {
 #test-element {
     margin: 15px auto;
     padding: 10px;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .05), 0 1px 4px 0 rgba(0, 0, 0, .08), 0 3px 1px -2px rgba(0, 0, 0, .2);
 }
 .border {
     border: 15px solid #fff;