feat(console): multiple instance

src/Console/Console.hbs

@@ -1,4 +1,5 @@
-<div {{{class 'control'}}}>
+<div {{{class 'console-container'}}}>
+  <div {{{class 'control'}}}>
     <span {{{class 'icon-clear clear-console'}}}></span>
     <span {{{class 'filter active'}}} data-filter="all">All</span>
     <span {{{class 'filter'}}} data-filter="error">Error</span>
@@ -7,17 +8,18 @@
     <span {{{class 'filter'}}} data-filter="log">Log</span>
     <span {{{class 'filter'}}} data-filter="debug">Debug</span>
     <span {{{class 'icon-search search'}}}></span>
-</div>
-<div {{{class 'logs-container'}}}>
+  </div>
+  <div {{{class 'logs-container'}}}>
     <div {{{class 'top-space'}}}></div>
     <ul {{{class 'fake-logs'}}}></ul>
     <ul {{{class 'logs'}}}></ul>
     <div {{{class 'bottom-space'}}}></div>
-</div>
-<div {{{class 'js-input'}}}>
+  </div>
+  <div {{{class 'js-input'}}}>
     <div {{{class 'buttons'}}}>
-        <div {{{class 'button cancel'}}}>Cancel</div>
-        <div {{{class 'button execute'}}}>Execute</div>
+      <div {{{class 'button cancel'}}}>Cancel</div>
+      <div {{{class 'button execute'}}}>Execute</div>
     </div>
     <textarea placeholder="Type JavaScript here"></textarea>
+  </div>
 </div>

src/Console/Console.js

@@ -7,7 +7,8 @@ import {
   Emitter,
   uncaught,
   escapeRegExp,
-  trim
+  trim,
+  upperFirst
 } from '../lib/util'
 import emitter from '../lib/emitter'
 import Settings from '../Settings/Settings'
@@ -16,12 +17,12 @@ import stringify from './stringify'
 uncaught.start()
 
 export default class Console extends Tool {
-  constructor() {
+  constructor({ name = 'console' } = {}) {
     super()
 
     Emitter.mixin(this)
 
-    this.name = 'console'
+    this.name = name
     this._scale = 1
 
     this._registerListener()
@@ -94,7 +95,9 @@ export default class Console extends Tool {
 
     this._container.off('show', this._handleShow)
 
-    evalCss.remove(this._style)
+    if (this._style) {
+      evalCss.remove(this._style)
+    }
     this.ignoreGlobalErr()
     this.restoreConsole()
     this._unregisterListener()
@@ -242,13 +245,13 @@ export default class Console extends Tool {
       .remove(cfg, 'displayIfErr')
       .remove(cfg, 'useWorker')
       .remove(cfg, 'maxLogNum')
-      .remove('Console')
+      .remove(upperFirst(this.name))
   }
   _initCfg() {
     const container = this._container
     const logger = this._logger
 
-    const cfg = (this.config = Settings.createCfg('console', {
+    const cfg = (this.config = Settings.createCfg(this.name, {
       asyncRender: true,
       catchGlobalErr: true,
       jsExecution: true,
@@ -308,7 +311,7 @@ export default class Console extends Tool {
     if (!settings) return
 
     settings
-      .text('Console')
+      .text(upperFirst(this.name))
       .switch(cfg, 'asyncRender', 'Asynchronous Rendering')
       .switch(cfg, 'jsExecution', 'Enable JavaScript Execution')
       .switch(cfg, 'catchGlobalErr', 'Catch Global Errors')

src/Console/Console.scss

@@ -3,7 +3,11 @@
 
 .dev-tools {
   .tools {
-    .console {
+    .console-container {
+      width: 100%;
+      height: 100%;
+      padding-top: 40px;
+      padding-bottom: 40px;
       &.js-input-hidden {
         padding-bottom: 0;
       }
@@ -51,8 +55,6 @@
           }
         }
       }
-      padding-top: 40px;
-      padding-bottom: 40px;
       .js-input {
         position: absolute;
         z-index: 100;

src/Console/Log.hbs

@@ -1,26 +1,26 @@
 {{#if displayHeader}}
-    <div {{{class 'header'}}}>
-        {{#repeat group.indentLevel}}
-            <div {{{class 'nesting-level'}}}></div>
-        {{/repeat}}
-        <div {{{class 'time-container'}}}>
-            <span>{{time}}</span> <span>{{from}}</span>
-        </div>
+  <div {{{class 'header'}}}>
+    {{#repeat group.indentLevel}}
+      <div {{{class 'nesting-level'}}}></div>
+    {{/repeat}}
+    <div {{{class 'time-container'}}}>
+      <span>{{time}}</span> <span>{{from}}</span>
     </div>
+  </div>
 {{/if}}
 <div {{{class (concat type ' log-item')}}}>
-    {{#repeat group.indentLevel}}
-        <div {{{class 'nesting-level'}}}></div>
-    {{/repeat}}
-    {{#if icon}}
-        <div {{{class 'icon-container'}}}>
-            <span {{{class (concat 'icon icon-' icon)}}}></span>
-        </div>
-    {{/if}}
-    <div {{{class 'count-container hidden'}}}>
-        <div {{{class 'count'}}}></div>
-    </div>    
-    <div {{{class 'log-content-wrapper'}}}>
-        <div {{{class 'log-content'}}}>{{{msg}}}</div>
+  {{#repeat group.indentLevel}}
+    <div {{{class 'nesting-level'}}}></div>
+  {{/repeat}}
+  {{#if icon}}
+    <div {{{class 'icon-container'}}}>
+      <span {{{class (concat 'icon icon-' icon)}}}></span>
     </div>
+  {{/if}}
+  <div {{{class 'count-container hidden'}}}>
+    <div {{{class 'count'}}}></div>
+  </div>    
+  <div {{{class 'log-content-wrapper'}}}>
+    <div {{{class 'log-content'}}}>{{{msg}}}</div>
+  </div>
 </div>

src/Console/Logger.js

@@ -117,7 +117,9 @@ export default class Logger extends Emitter {
     Log.showSrcInSources = flag
   }
   destroy() {
-    evalCss.remove(this._style)
+    if (this._style) {
+      evalCss.remove(this._style)
+    }
   }
   filter(val) {
     this._filter = val

src/Console/Logger.scss

@@ -3,7 +3,7 @@
 
 .dev-tools {
   .tools {
-    .console {
+    .console-container {
       background: #fff;
       .logs-container {
         @include overflow-auto(y);