debugger

src/app.js

@@ -47,6 +47,7 @@ var NotPersistedExplorer = require('./app/files/NotPersistedExplorer')
 var toolTip = require('./app/ui/tooltip')
 var CommandInterpreter = require('./lib/cmdInterpreter')
 var TransactionReceiptResolver = require('./transactionReceiptResolver')
+var SourceHighlighter = require('./app/editor/sourceHighlighter')
 
 var styleGuide = require('./app/ui/styles-guide/theme-chooser')
 var styles = styleGuide.chooser()
@@ -387,7 +388,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   registry.put({api: compiler, name: 'compiler'})
 
   var offsetToLineColumnConverter = new OffsetToLineColumnConverter(compiler.event)
-  registry.put({api: offsetToLineColumnConverter, name: 'offsetToLineColumnConverter'})
+  registry.put({api: offsetToLineColumnConverter, name: 'offsettolinecolumnconverter'})
   // ----------------- UniversalDApp -----------------
   var transactionContextAPI = {
     getAddress: (cb) => {
@@ -596,45 +597,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   document.querySelector('#editorWrap').addEventListener('change', onResize)
 
   // ----------------- Debugger -----------------
-  var debugAPI = {
-    statementMarker: null,
-    fullLineMarker: null,
-    source: null,
-    currentSourceLocation: (lineColumnPos, location) => {
-      if (this.statementMarker) editor.removeMarker(this.statementMarker, this.source)
-      if (this.fullLineMarker) editor.removeMarker(this.fullLineMarker, this.source)
-      this.statementMarker = null
-      this.fullLineMarker = null
-      this.source = null
-      if (lineColumnPos) {
-        this.source = compiler.getSourceName(location.file)
-        if (config.get('currentFile') !== this.source) {
-          fileManager.switchFile(this.source)
-        }
-        this.statementMarker = editor.addMarker(lineColumnPos, this.source, css.highlightcode)
-        editor.scrollToLine(lineColumnPos.start.line, true, true, function () {})
-        if (lineColumnPos.start.line === lineColumnPos.end.line) {
-          this.fullLineMarker = editor.addMarker({
-            start: {
-              line: lineColumnPos.start.line,
-              column: 0
-            },
-            end: {
-              line: lineColumnPos.start.line + 1,
-              column: 0
-            }
-          }, this.source, css.highlightcode_fullLine)
-        }
-      }
-    },
-    lastCompilationResult: () => {
-      return compiler.lastCompilationResult
-    },
-    offsetToLineColumn: (location, file) => {
-      return offsetToLineColumnConverter.offsetToLineColumn(location, file, compiler.lastCompilationResult)
-    }
-  }
-  self._view.transactionDebugger = new Debugger('#debugger', debugAPI, editor.event)
+  var sourceHighlighter = new SourceHighlighter()
+  self._view.transactionDebugger = new Debugger('#debugger', sourceHighlighter)
   self._view.transactionDebugger.addProvider('vm', executionContext.vm())
   self._view.transactionDebugger.addProvider('injected', executionContext.internalWeb3())
   self._view.transactionDebugger.addProvider('web3', executionContext.internalWeb3())

src/app/debugger/debugger.js

@@ -4,16 +4,27 @@ var Ethdebugger = require('./remix-debugger/src/ui/Ethdebugger')
 var remixLib = require('remix-lib')
 var remixCore = require('remix-core')
 var executionContext = require('../../execution-context')
+var globlalRegistry = require('../../global/registry')
 
 /**
  * Manage remix and source highlighting
  */
-function Debugger (id, appAPI, editorEvent) {
+function Debugger (id, sourceHighlighter, localRegistry) {
   this.el = document.querySelector(id)
+  this._components = {
+    sourceHighlighter: sourceHighlighter
+  }
+  this._components.registry = localRegistry || globlalRegistry
+  // dependencies
+  this._deps = {
+    offsetToLineColumnConverter: this._components.registry.get('offsettolinecolumnconverter').api,
+    editor: this._components.registry.get('editor').api,
+    compiler: this._components.registry.get('compiler').api
+  }
   this.debugger = new Ethdebugger(
     {
       compilationResult: () => {
-        var compilationResult = self.appAPI.lastCompilationResult()
+        var compilationResult = this._deps.compiler.lastCompilationResult
         if (compilationResult) {
           return compilationResult.data
         }
@@ -22,11 +33,10 @@ function Debugger (id, appAPI, editorEvent) {
     })
   this.sourceMappingDecoder = new remixLib.SourceMappingDecoder()
   this.el.appendChild(this.debugger.render())
-  this.appAPI = appAPI
   this.isActive = false
 
   this.breakPointManager = new remixCore.code.BreakpointManager(this.debugger, (sourceLocation) => {
-    return appAPI.offsetToLineColumn(sourceLocation, sourceLocation.file, this.editor, this.appAPI.lastCompilationResult().data)
+    return self._deps.offsetToLineColumnConverter.offsetToLineColumn(sourceLocation, sourceLocation.file, this._deps.compiler.lastCompilationResult.data)
   })
 
   this.debugger.setBreakpointManager(this.breakPointManager)
@@ -34,11 +44,11 @@ function Debugger (id, appAPI, editorEvent) {
   })
 
   var self = this
-  editorEvent.register('breakpointCleared', (fileName, row) => {
+  self._deps.editor.event.register('breakpointCleared', (fileName, row) => {
     this.breakPointManager.remove({fileName: fileName, row: row})
   })
 
-  editorEvent.register('breakpointAdded', (fileName, row) => {
+  self._deps.editor.event.register('breakpointAdded', (fileName, row) => {
     this.breakPointManager.add({fileName: fileName, row: row})
   })
 
@@ -51,24 +61,24 @@ function Debugger (id, appAPI, editorEvent) {
   })
 
   this.debugger.event.register('traceUnloaded', this, function () {
-    self.appAPI.currentSourceLocation(null)
+    self._components.sourceHighlighter.currentSourceLocation(null)
     self.isActive = false
   })
 
   // unload if a file has changed (but not if tabs were switched)
-  editorEvent.register('contentChanged', function () {
+  self._deps.editor.event.register('contentChanged', function () {
     self.debugger.unLoad()
   })
 
   // register selected code item, highlight the corresponding source location
   this.debugger.codeManager.event.register('changed', this, function (code, address, index) {
-    if (self.appAPI.lastCompilationResult()) {
-      this.debugger.callTree.sourceLocationTracker.getSourceLocationFromInstructionIndex(address, index, self.appAPI.lastCompilationResult().data.contracts, function (error, rawLocation) {
+    if (self._deps.compiler.lastCompilationResult) {
+      self.debugger.callTree.sourceLocationTracker.getSourceLocationFromInstructionIndex(address, index, self._deps.compiler.lastCompilationResult.data.contracts, function (error, rawLocation) {
         if (!error) {
-          var lineColumnPos = self.appAPI.offsetToLineColumn(rawLocation, rawLocation.file)
-          self.appAPI.currentSourceLocation(lineColumnPos, rawLocation)
+          var lineColumnPos = self._deps.offsetToLineColumnConverter.offsetToLineColumn(rawLocation, rawLocation.file, self._deps.compiler.lastCompilationResult)
+          self._components.sourceHighlighter.currentSourceLocation(lineColumnPos, rawLocation)
         } else {
-          self.appAPI.currentSourceLocation(null)
+          self._components.sourceHighlighter.currentSourceLocation(null)
         }
       })
     }

src/app/editor/contextView.js

@@ -22,7 +22,7 @@ class ContextView {
       contextualListener: self._components.registry.get('contextualListener').api,
       editor: self._components.registry.get('editor').api,
       compiler: self._components.registry.get('compiler').api,
-      offsetToLineColumnConverter: self._components.registry.get('offsetToLineColumnConverter').api,
+      offsetToLineColumnConverter: self._components.registry.get('offsettolinecolumnconverter').api,
       config: self._components.registry.get('config').api,
       fileManager: self._components.registry.get('filemanager').api
     }

src/app/editor/contextualListener.js

@@ -18,7 +18,7 @@ class ContextualListener {
       compiler: self._components.registry.get('compiler').api,
       editor: self._components.registry.get('editor').api,
       config: self._components.registry.get('config').api,
-      offsetToLineColumnConverter: self._components.registry.get('offsetToLineColumnConverter').api
+      offsetToLineColumnConverter: self._components.registry.get('offsettolinecolumnconverter').api
     }
     this._index = {
       Declarations: {},

src/app/editor/sourceHighlighter.js

@@ -0,0 +1,67 @@
+'use strict'
+var csjs = require('csjs-inject')
+var globlalRegistry = require('../../global/registry')
+var styleGuide = require('../ui/styles-guide/theme-chooser')
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .highlightcode {
+    position:absolute;
+    z-index:20;
+    background-color: ${styles.editor.backgroundColor_DebuggerMode};
+  }
+  .highlightcode_fullLine {
+    position:absolute;
+    z-index:20;
+    background-color: ${styles.editor.backgroundColor_DebuggerMode};
+    opacity: 0.5;
+  }
+`
+
+class SourceHighlighter {
+  constructor (localRegistry) {
+    const self = this
+    self._components = {}
+    self._components.registry = localRegistry || globlalRegistry
+    // dependencies
+    self._deps = {
+      editor: self._components.registry.get('editor').api,
+      config: self._components.registry.get('config').api,
+      fileManager: self._components.registry.get('filemanager').api,
+      compiler: self._components.registry.get('compiler').api
+    }
+    this.statementMarker = null
+    this.fullLineMarker = null
+    this.source = null
+  }
+
+  currentSourceLocation (lineColumnPos, location) {
+    if (this.statementMarker) this._deps.editor.removeMarker(this.statementMarker, this.source)
+    if (this.fullLineMarker) this._deps.editor.removeMarker(this.fullLineMarker, this.source)
+    this.statementMarker = null
+    this.fullLineMarker = null
+    this.source = null
+    if (lineColumnPos) {
+      this.source = this._deps.compiler.getSourceName(location.file)
+      if (this._deps.config.get('currentFile') !== this.source) {
+        this._deps.fileManager.switchFile(this.source)
+      }
+      this.statementMarker = this._deps.editor.addMarker(lineColumnPos, this.source, css.highlightcode)
+      this._deps.editor.scrollToLine(lineColumnPos.start.line, true, true, function () {})
+      if (lineColumnPos.start.line === lineColumnPos.end.line) {
+        this.fullLineMarker = this._deps.editor.addMarker({
+          start: {
+            line: lineColumnPos.start.line,
+            column: 0
+          },
+          end: {
+            line: lineColumnPos.start.line + 1,
+            column: 0
+          }
+        }, this.source, css.highlightcode_fullLine)
+      }
+    }
+  }
+}
+
+module.exports = SourceHighlighter

src/app/staticanalysis/staticAnalysisView.js

@@ -26,7 +26,7 @@ function staticAnalysisView (localRegistry) {
   self._deps = {
     compiler: self._components.registry.get('compiler').api,
     renderer: self._components.registry.get('renderer').api,
-    offsetToLineColumnConverter: self._components.registry.get('offsetToLineColumnConverter').api
+    offsetToLineColumnConverter: self._components.registry.get('offsettolinecolumnconverter').api
   }
 
   self._deps.compiler.event.register('compilationFinished', function (success, data, source) {