Epsilon notes console

# Console test

<style>
._cwr {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  transition: transform ease 150ms;
}

._cwr.opened {
  transform: translateY(0);
  transition: transform ease 150ms;
}

._console {
  font-family: monospace;
  line-height: 1.4;
  font-size: 0.85rem;
  max-height: 25em;
  overflow-y: auto;
  opacity: 0.75;
  z-index: 10;
  padding: 1px 0;
  background: #246;
  color: #f0f0f0;
}
._cwr .toggler {
  position: absolute;
  top: 0;
  right: 0;
  background: #444;
  transform: translateY(-100%);
}
._console>pre {
  padding: 0 4px;
  margin: 1px 0;
  border: none;
  border-radius:0;
  min-height:1.4em;
}
._console i.fa {margin-right:0.5em;}
._console>pre>* {display: inline}
.log {background: #466;}
.info {background: #464;}
.warn {background: #884;}
.error {background: #844;}
.exception {color:#fff; background: #822}

._console::-webkit-scrollbar { width: 6px; }
._console::-webkit-scrollbar-track {
background: #882;
border: 2px solid transparent;
background-clip: content-box;
}
._console::-webkit-scrollbar-thumb {
background: #888;
border: 1px solid;
}
</style>
<script>
((document) => {
  const logWr = document.createElement('div');
  const log = document.createElement('div');
  const tgl = document.createElement('div');
  ['toggler','fa','fa-2x','fa-terminal'].forEach(c =>
    tgl.classList.add(c)
  );
  log.classList.add('_console');
  logWr.classList.add('_cwr');
  logWr.classList.add('opened');
  logWr.appendChild(tgl);
  logWr.appendChild(log);

  tgl.addEventListener('click', e =>
    logWr.classList.toggle('opened')
  );

  const _log = (c, msg, icon) => {
    let m = document.createElement('pre');
    m.classList.add(c);

    if(icon) {
      const i = document.createElement('i');
      icon.split(' ').forEach(c => i.classList.add(c));
      m.appendChild(i);
    }

    let t = document.createTextNode(msg);

    m.appendChild(t);

    log.appendChild(m);
  };

  const _ots = o =>
    typeof o === 'string' ? o : JSON.stringify(o,null,2);

  const _times = {};
  const _cnt = {};

  Object.getOwnPropertyNames(console)
  .forEach(_v => {
    console[_v] = ((method, _v, _log, _ots) => {
      return function(...a) {
        method.apply(console, arguments);
        const tn = performance.now();
        let i = '';
        switch (_v) {
          case 'log':
          case 'warn':
          case 'info':
          case 'error':
          case 'debug':
            _log(_v, a.map(_ots).join(' '), i);
            break;
          case 'time':
            _times[a[0]] = tn;
            break;
          case 'timeEnd':
            const t = (tn - _times[a[0]]).toFixed(2);
            console.log(`${a[0]}: ${t}ms`);
            break;
          case 'clear':
            log.innerHTML = '';
            console.log('console was cleared');
            break;
          case 'count':
            const n = a[0];
            if(_cnt[n] === undefined) _cnt[n] = 0;
            console.log(`${n}: ${++_cnt[n]}`);
            break;
          case 'assert':
            if(!a[0]) console.error('assertion failed', a);
            break;
          default:
            console.warn(`console.${_v} not implemented yet.`);
        }

      };
    })(console[_v], _v, _log, _ots);
  });

  window.addEventListener('error', e => {
    _log('exception', `${e.message}. ${e.filename}:${e.lineno}:${e.colno}`);
  });

  document.body.appendChild(logWr);
})(document);

console.info('Welcome to console');

console.info();

console.log('Log test');
console.warn('Warn test');
console.error('Error test');
console.time('Time test');

for(let i=0;i<5;i++)
  console.count('Count test');

console.assert(false, 'some assertion');

console.timeEnd('Time test');

console.info('Webkit console methods: ', Object.getOwnPropertyNames(console));


</script>