💎 Add Active process handle info in status bar

src/common/ReplOutput.js

@@ -221,7 +221,7 @@ class None {
     return None.instance;
   }
   getValue() { return void 0; }
-  highlight(output) {
+  highlight(output = '') {
     let [first, ...rest] = (output.stack || output.toString()).split(EOL);
     return {
       formattedOutput:

src/components/ReplStatusBar.js

@@ -2,6 +2,7 @@ import React from 'react';
 import shell from 'shell';
 import ReplPreferencesActions from '../actions/ReplPreferencesActions';
 import ReplStatusBarStore from '../stores/ReplStatusBarStore';
+import ReplCommon from '../common/ReplCommon';
 import _ from 'lodash';
 
 export default class ReplStatusBar extends React.Component {
@@ -11,6 +12,7 @@ export default class ReplStatusBar extends React.Component {
     this.onDownload = this.onDownload.bind(this);
     this.onTriggerPreferences = this.onTriggerPreferences.bind(this);
     this.onStoreChange = this.onStoreChange.bind(this);
+    this.getActiveHandle = this.getActiveHandle.bind(this);
   }
 
   componentDidMount() {
@@ -44,10 +46,28 @@ export default class ReplStatusBar extends React.Component {
     ReplPreferencesActions.togglePreferences();
   }
 
+  getActiveHandle() {
+    let twoDigit = x => `${(x < 10 ? '0' : '')}${x}`;
+    let handles = process._getActiveHandles();
+    let now = new Date();
+    let [hh, mm, ss] = [now.getHours(), now.getMinutes(), now.getSeconds()];
+    let ts = `${twoDigit(hh)}:${twoDigit(mm)}:${twoDigit(ss)}`;
+    let msg = _.chain(handles)
+      .map(h => ReplCommon.type(h))
+      .sort()
+      .reduce((acc, h) => (acc[h] = acc[h] ? acc[h] + 1 : 1, acc), {})
+      .map((v, k) => `${k}(${v})`)
+      .tap(o => o.join(', '))
+      .value();
+    return [handles.length,
+      `Active handles(at ${ts}): ${msg}`]
+  }
+
   render() {
     let {commands, errors} = this.extractStatusInfo();
     let runHelp = this.state.runCommand ? '⇧ + ↲' : '↲';
     let imgURL = `./logos/${this.state.lang}.png`;
+    let [handleCount, handleMsg] = this.getActiveHandle();
     return (
       <div className='repl-status-bar'>
         <span className='repl-status-bar-preference' title='Preferences'>
@@ -61,6 +81,10 @@ export default class ReplStatusBar extends React.Component {
           <i className="fa fa-circle"></i>
           <span className='repl-status-bar-count'>{errors}</span>
         </span>
+        <span className='repl-status-bar-handles' title={handleMsg}>
+          <i className="fa fa-circle"></i>
+          <span className='repl-status-bar-count'>{handleCount}</span>
+        </span>
         <span className='repl-status-bar-lang' title='REPL language'>
           <img className='repl-status-bar-img' src={imgURL}/>
         </span>

stylesheets/dark-theme.scss

@@ -26,6 +26,7 @@ $dark-app-entry-status-minus-color: rgb(252, 181, 50);
 $dark-app-status-bar-background-color: #3E3D3D;
 $dark-app-status-bar-command-color: rgb(73, 197, 73);
 $dark-app-status-bar-error-color: rgb(208, 95, 75);
+$dark-app-status-bar-handle-color: rgb(253, 190, 65);
 $dark-app-status-bar-message-color: rgb(173, 170, 170);
 $dark-app-status-bar-mode-color: #CCCC4C;
 $dark-app-status-bar-console-color: deepskyblue;

stylesheets/light-theme.scss

@@ -26,6 +26,7 @@ $lt-app-entry-status-minus-color: rgb(252, 181, 50);
 $lt-app-status-bar-background-color: darken(whitesmoke, 10%);
 $lt-app-status-bar-command-color: rgb(73, 197, 73);
 $lt-app-status-bar-error-color: rgb(208, 95, 75);
+$lt-app-status-bar-handle-color: rgb(253, 190, 65);
 $lt-app-status-bar-message-color: #676464;
 $lt-app-status-bar-mode-color: #C3C378;
 $lt-app-status-bar-console-color: #0378F9;

stylesheets/repl-status-bar.scss

@@ -66,6 +66,11 @@
       padding: 0 5px;
     }
 
+    .repl-status-bar-handles {
+      color: if($theme == $dark-theme, $dark-app-status-bar-handle-color, $lt-app-status-bar-handle-color);
+      padding: 0 5px;
+    }
+
     .repl-status-bar-count,
     .repl-status-bar-message {
       pointer-events: none;