Dev: Use es6 template string

src/Console/Log.es6

@@ -188,7 +188,7 @@ export default class Log extends util.Emitter
         if (!startTime) return;
 
         var duration = util.now() - startTime;
-        this.html('<div class="eruda-blue">' + name + ':' + duration + 'ms</div>');
+        this.html(`<div class="eruda-blue">${name}: ${duration}ms</div>`);
         delete  this._timer[name];
 
         return this;
@@ -271,9 +271,9 @@ export default class Log extends util.Emitter
     {
         util.loadJs(libraries[name], (result) =>
         {
-            if (result) return this.log(name + ' is loaded');
+            if (result) return this.log(`${name} is loaded`);
 
-            this.warn('Failed to load ' + name);
+            this.warn(`Failed to load ${name}`);
         });
     }
     render()
@@ -332,11 +332,11 @@ function errToStr(err, msg)
     var lines = err.stack.split('\n');
 
     if (util.isUndef(msg)) msg = lines[0] + '<br/>';
-    var stack = '<div class="eruda-stack">' + lines.slice(1).join('<br/>') + '</div>';
+    var stack = `<div class="eruda-stack">${lines.slice(1).join('<br/>')}</div>`;
 
     stack = stack.replace(regJsUrl, function (match)
     {
-        return '<a href="' + match + '" target="_blank">' + match + '</a>';
+        return `<a href="${match}" target="_blank">${match}</a>`;
     });
 
     return msg + stack;
@@ -355,7 +355,7 @@ function transMsg(msg, noEscape)
         msg = JSON.stringify(msg);
     } else if (util.isObj(msg))
     {
-        msg = 'Object ' + JSON.stringify(msg);
+        msg = `Object ${JSON.stringify(msg)}`;
     }
 
     msg = util.toStr(msg);

src/DevTools/DevTools.es6

@@ -54,8 +54,8 @@ export default class DevTools extends util.Emitter
 
         var name = tool.name;
 
-        this._$tools.append('<div class="eruda-' + name + ' eruda-tool"></div>');
-        tool.init(this._$tools.find('.eruda-' + name), this);
+        this._$tools.append(`<div class="eruda-${name} eruda-tool"></div>`);
+        tool.init(this._$tools.find(`.eruda-${name}`), this);
         tool.active = false;
         this._tools[name] = tool;
 

src/DevTools/NavBar.es6

@@ -15,13 +15,13 @@ export default class NavBar extends util.Emitter
     add(name)
     {
         this._len++;
-        this._$el.append('<li class="' + name + '">' + name + '</li>')
+        this._$el.append(`<li class="${name}">${name}</li>`)
                  .css({width: this._len * 69});
     }
     remove(name)
     {
         this._len--;
-        this._$el.find('li.' + name).remove();
+        this._$el.find(`li.${name}`).remove();
         this._$el.css({width: this._len * 69});
     }
     destroy()

src/Elements/Elements.es6

@@ -185,15 +185,15 @@ function formatElName(data)
             attributes
         } = data;
 
-    var ret = '<span class="eruda-blue">' + data.tagName.toLowerCase() + '</span>';
+    var ret = `<span class="eruda-blue">${data.tagName.toLowerCase()}</span>`;
 
-    if (id !== '') ret += '#' + id;
+    if (id !== '') ret += `#${id}`;
 
     util.each(className.split(/\s+/g), (val) =>
     {
         if (util.trim(val) === '') return;
 
-        ret += '.' + val;
+        ret += `.${val}`;
     });
 
     util.each(attributes, (attr) =>
@@ -202,7 +202,7 @@ function formatElName(data)
 
         if (name === 'id' || name === 'class' || name === 'style') return;
 
-        ret += ' ' + name + '="' + attr.value + '"';
+        ret += ` ' ${name}="${attr.value}"`;
     });
 
     return ret;

src/Snippets/defSnippets.es6

@@ -4,11 +4,11 @@ var borderCss = '',
     selector = 'html',
     colors = ['f5f5f5', 'dabb3a', 'abc1c7', '472936', 'c84941', '296dd1', '67adb4', '1ea061'];
 
-util.each(colors, function (color)
+util.each(colors, function (color, idx)
 {
-    selector += '>*';
+    selector += (idx === 0) ? '>*:not([class^="eruda-"])' : '>*';
 
-    borderCss += selector + '{border: 2px solid #' + color + ' !important}';
+    borderCss += selector + `{border: 2px solid #${color} !important}`;
 });
 
 export default [

src/Sources/JsonViewer.es6

@@ -56,32 +56,33 @@ function createEl(key, val)
 
     if (val === null)
     {
-        return '<li>' +
-                   '<span class="eruda-key">"' + encode(key) + '": </span>' +
-                   '<span class="eruda-null">"' + encode(val) + '"</span>' +
-               '</li>';
+        return `<li>
+                   <span class="eruda-key">"${encode(key)}":</span>
+                   <span class="eruda-null">"${encode(val)}"</span>
+               </li>`;
     }
     if (util.isObj(val))
     {
-        var obj = '<li>' + '<span class="eruda-expanded"></span>' +
-                  '<span class="eruda-key">"' + encode(key) + '": </span>' +
-                  '<span class="eruda-open">' + open + '</span>' +
-                  '<ul class="eruda-' + type + '">';
+        var obj = `<li>
+                       <span class="eruda-expanded"></span>
+                       <span class="eruda-key">"${encode(key)}"</span>
+                       <span class="eruda-open">${open}</span>
+                       <ul class="eruda-${type}">`;
         obj += jsonToHtml(val);
-        return obj + '</ul><span class="eruda-close">' + close + '</span></li>';
+        return obj + `</ul><span class="eruda-close">${close}</span></li>`;
     }
     if (util.isNum(val) || util.isBool(val))
     {
-        return '<li>' +
-                   '<span class="eruda-key">"' + encode(key) + '": </span>' +
-                   '<span class="eruda-'+ typeof val + '">' + encode(val) + '</span>' +
-               '</li>';
+        return `<li>
+                   <span class="eruda-key">"${encode(key)}": </span>
+                   <span class="eruda-${typeof val}">${encode(val)}</span>
+                </li>`;
     }
 
-    return '<li>' +
-               '<span class="eruda-key">"' + encode(key) + '": </span>' +
-               '<span class="eruda-'+ typeof val + '">"' + encode(val) + '"</span>' +
-           '</li>';
+    return `<li>
+                <span class="eruda-key">"${encode(key)}": </span>
+                <span class="eruda-${typeof val}">"${encode(val)}"</span>
+            </li>`;
 }
 
 function encode(str)