refactor: use luna console

build/webpack.base.js

@@ -17,7 +17,7 @@ const postcssLoader = {
     plugins: [
       prefixer({
         prefix: '_',
-        ignore: [/luna-object-viewer/, /luna-notification/],
+        ignore: [/luna-console/, /luna-object-viewer/, /luna-notification/],
       }),
       autoprefixer,
       clean(),

package.json

@@ -64,8 +64,9 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^4.0.2",
     "licia": "^1.30.0",
+    "luna-console": "^0.2.1",
     "luna-notification": "^0.1.3",
-    "luna-object-viewer": "^0.1.2",
+    "luna-object-viewer": "^0.2.0",
     "node-sass": "^4.13.1",
     "postcss-clean": "^1.1.0",
     "postcss-loader": "^3.0.0",

src/Console/Console.js

@@ -1,4 +1,3 @@
-import Logger from './Logger'
 import Tool from '../DevTools/Tool'
 import {
   noop,
@@ -15,6 +14,7 @@ import {
 import evalCss from '../lib/evalCss'
 import emitter from '../lib/emitter'
 import Settings from '../Settings/Settings'
+import LunaConsole from 'luna-console'
 
 uncaught.start()
 
@@ -149,7 +149,7 @@ export default class Console extends Tool {
   }
   _initLogger() {
     const $filter = this._$control.find('.eruda-filter')
-    const logger = (this._logger = new Logger(this._$logs))
+    const logger = (this._logger = new LunaConsole(this._$logs.get(0)))
 
     logger.on('filter', (filter) =>
       $filter.each(function () {
@@ -185,7 +185,7 @@ export default class Console extends Tool {
     const config = this.config
 
     $control
-      .on('click', '.eruda-clear-console', () => logger.silentClear())
+      .on('click', '.eruda-clear-console', () => logger.clear(true))
       .on('click', '.eruda-filter', function () {
         $searchKeyword.text('')
         logger.filter($(this).data('filter'))
@@ -266,18 +266,18 @@ export default class Console extends Tool {
       maxLogNum: 'infinite',
     }))
 
-    let maxLogNum = cfg.get('maxLogNum')
-    maxLogNum = maxLogNum === 'infinite' ? maxLogNum : +maxLogNum
+    /* let maxLogNum = cfg.get('maxLogNum')
+    maxLogNum = maxLogNum === 'infinite' ? maxLogNum : +maxLogNum */
 
     this._enableJsExecution(cfg.get('jsExecution'))
-    if (cfg.get('asyncRender')) logger.renderAsync(true)
+    // if (cfg.get('asyncRender')) logger.renderAsync(true)
     if (cfg.get('catchGlobalErr')) this.catchGlobalErr()
     if (cfg.get('overrideConsole')) this.overrideConsole()
-    logger.displayHeader(cfg.get('displayExtraInfo'))
+    /* logger.displayHeader(cfg.get('displayExtraInfo'))
     logger.displayUnenumerable(cfg.get('displayUnenumerable'))
     logger.displayGetterVal(cfg.get('displayGetterVal'))
     logger.lazyEvaluation(cfg.get('lazyEvaluation'))
-    logger.maxNum(maxLogNum)
+    logger.maxNum(maxLogNum) */
 
     cfg.on('change', (key, val) => {
       switch (key) {

src/eruda.js

@@ -165,7 +165,8 @@ export default {
       if (shadowRoot) {
         // font-face doesn't work inside shadow dom.
         evalCss.container = document.head
-        evalCss(require('./style/icon.css'))
+        evalCss(require('./style/icon.css') +
+        require('luna-console/luna-console.css') + require('luna-object-viewer/luna-object-viewer.css'))
 
         el = document.createElement('div')
         shadowRoot.appendChild(el)
@@ -203,6 +204,7 @@ export default {
 
     evalCss(
       require('luna-object-viewer/luna-object-viewer.css') +
+      require('luna-console/luna-console.css') +
       require('luna-notification/luna-notification.css') + 
       require('./style/style.scss') +
         require('./style/reset.scss') +

src/style/luna.scss

@@ -1,5 +1,71 @@
 @import './variable';
 
+.luna-console {
+  background: var(--background);
+}
+
+.luna-console-log-item {
+  border-bottom-color: var(--border);
+  color: var(--foreground);
+  .luna-console-icon-container {
+    .luna-console-icon {
+      color: var(--foreground);
+    }
+    .luna-console-icon-error {
+      color: #ef3842;
+    }
+    .luna-console-icon-warn {
+      color: #e8a400;
+    }
+  }
+  &.luna-console-warn {
+    color: var(--console-warn-foreground);
+    background: var(--console-warn-background);
+    border-color: var(--console-warn-border);
+  }
+  &.luna-console-error {
+    background: var(--console-error-background);
+    color: var(--console-error-foreground);
+    border-color: var(--console-error-border);
+  }
+  &.luna-console-table {
+    table {
+      color: var(--foreground);
+      th {
+        background: var(--darker-background);
+      }
+      th,
+      td {
+        border-color: var(--border);
+      }
+      tr:nth-child(even) {
+        background: var(--contrast);
+      }
+    }
+  }
+}
+
+.luna-console-abstract {
+  .luna-console-key {
+    color: var(--var-color);
+  }
+  .luna-console-number {
+    color: var(--number-color);
+  }
+  .luna-console-null {
+    color: var(--operator-color);
+  }
+  .luna-console-string {
+    color: var(--string-color);
+  }
+  .luna-console-boolean {
+    color: var(--keyword-color);
+  }
+  .luna-console-special {
+    color: var(--operator-color);
+  }
+}
+
 .luna-object-viewer {
   color: var(--primary);
   font-size: 12px !important;