Fix line number width

- set `line-number` width based on total number of lines
- set target in `webpack` config as `electron`

Author: meain

.gitignore

@@ -4,4 +4,5 @@ npm-debug.log*
 *.lock
 package-lock.json
 .DS_Store
-.vs-code
+.vs-code
+tags

dist/bundle.js

@@ -21459,6 +21459,11 @@ var CodeView = function (_Component) {
         }, 750);
       } catch (e) {}
     }
+  }, {
+    key: 'spaceFixedLineNumber',
+    value: function spaceFixedLineNumber(curLine, totLines) {
+      return '\xA0'.repeat(totLines.toString().length - curLine.toString().length) + curLine.toString();
+    }
   }, {
     key: 'componentDidMount',
     value: function componentDidMount() {
@@ -21520,7 +21525,7 @@ var CodeView = function (_Component) {
           _react2.default.createElement(
             'p',
             { key: i, className: 'line-number' },
-            i + 1
+            this.spaceFixedLineNumber(i + 1, lines.length)
           ),
           _react2.default.createElement(
             _reactSyntaxHighlighter2.default,

src/components/CodeView.js

@@ -18,13 +18,17 @@ class CodeView extends Component {
 
   scrollToSelected() {
     try {
-      jq("body").animate({ 
-        scrollTop: jq(".selected").offset().top - 500 
+      jq("body").animate({
+        scrollTop: jq(".selected").offset().top - 500
       }, 750);
     } catch (e) {
     }
   }
 
+  spaceFixedLineNumber(curLine, totLines) {
+    return "\u00a0".repeat(totLines.toString().length - curLine.toString().length) + curLine.toString()
+  }
+
   componentDidMount() {
     this.scrollToSelected();
   }
@@ -81,7 +85,7 @@ class CodeView extends Component {
           }}
         >
           <p key={i} className="line-number">
-            {i + 1}
+            {this.spaceFixedLineNumber(i + 1, lines.length)}
           </p>
           <SyntaxHighlighter language="python" style={tomorrowNight}>
             {line}
@@ -104,4 +108,4 @@ class CodeView extends Component {
   }
 }
 
-export default CodeView
+export default CodeView

tracer.py

@@ -9,10 +9,13 @@
 import time
 
 last_call = None
+
+
 def debounce(wait):
     def decorator(fn):
         def debounced(*args, **kwargs):
             global last_call
+
             def call_it():
                 global last_call
                 args, kwargs = last_call
@@ -25,14 +28,17 @@ def call_it():
         return debounced
     return decorator
 
+
 def log(msg):
     print('[LIVEPYTHON_TRACER] %s' % msg)
     sys.stdout.flush()
 
+
 @debounce(0.01)
 def log_frame(frame, should_update_source):
     log(json.dumps(generate_call_event(frame, should_update_source)))
 
+
 starting_filename = os.path.abspath(sys.argv[1])
 starting_dir = os.path.dirname(starting_filename)
 
@@ -44,13 +50,15 @@ def log_frame(frame, should_update_source):
 current_locals = {}
 failed = False
 
+
 def get_module_name(full_path):
     global starting_filename
     return os.path.relpath(
         os.path.abspath(full_path),
         os.path.dirname(os.path.abspath(starting_filename))
     )
 
+
 def generate_call_event(frame, should_update_source):
     obj = {
         'type': 'call',
@@ -59,7 +67,8 @@ def generate_call_event(frame, should_update_source):
         'source': ''.join(linecache.getlines(frame.f_code.co_filename))
     }
     return obj
-    
+
+
 def generate_exception_event(e):
     return {
         'type': 'exception',
@@ -70,13 +79,14 @@ def generate_exception_event(e):
         'time': time.time()
     }
 
+
 def local_trace(frame, why, arg):
     global current_line
     global current_filename
 
     if failed:
         return
-    
+
     if why == 'exception':
         exc_type = arg[0].__name__
         exc_msg = arg[1]
@@ -101,9 +111,11 @@ def local_trace(frame, why, arg):
     log_frame(frame, should_update_source)
     return local_trace
 
+
 def global_trace(frame, why, arg):
     return local_trace
 
+
 with open(starting_filename) as fp:
     code = compile(fp.read(), starting_filename, 'exec')
 

webpack.config.js

@@ -2,6 +2,7 @@ const path = require('path')
 
 module.exports = {
     entry: './src/index.js',
+    target: 'electron',
     module: {
         loaders: [
             { test: /\.js$/, loader: 'babel-loader', exclude: /(node_modules|main)/ }
@@ -10,5 +11,5 @@ module.exports = {
     output: {
         filename: 'bundle.js',
         path: path.resolve(__dirname, 'dist')
-    }
-}
+    },
+}