make specific API for each component

src/app.js

@@ -515,29 +515,38 @@ var run = function () {
     }
   }
 
-  var editorAPI = {
-    currentOpenedFile: () => {
-      return editor.getCacheFile()
+  var editorAPIDebug = {
+    statementMarker: null,
+    fullLineMarker: null,
+    sourceLocation: (lineColumnPos, location) => {
+      if (this.statementMarker) editor.removeMarker(this.statementMarker)
+      if (this.fullLineMarker) editor.removeMarker(this.fullLineMarker)
+      this.statementMarker = null
+      this.fullLineMarker = null
+      if (lineColumnPos) {
+        var name = editor.getCacheFile() // current opened tab
+        var source = compiler.lastCompilationResult.data.sourceList[location.file] // auto switch to that tab
+        if (name !== source) {
+          switchToFile(source)
+        }
+        this.statementMarker = editor.addMarker(lineColumnPos, 'highlightcode')
+        if (lineColumnPos.start.line === lineColumnPos.end.line) {
+          this.fullLineMarker = editor.addMarker({
+            start: {
+              line: lineColumnPos.start.line,
+              column: 0
             },
-    addMarker: (range, css) => {
-      return editor.addMarker(range, css)
-    },
-    removeMarker: (markerId) => {
-      return editor.removeMarker(markerId)
-    },
-    addAnnotation: (info) => {
-      return editor.addAnnotation(info)
-    },
-    hasFile: (file) => {
-      return editor.hasFile(file)
-    },
-    gotoLine: (line, col) => {
-      return editor.gotoLine(line, col)
-    },
-    switchToFile: switchToFile
+            end: {
+              line: lineColumnPos.start.line + 1,
+              column: 0
+            }
+          }, 'highlightcode_fullLine')
+        }
+      }
+    }
   }
 
-  var transactionDebugger = new Debugger('#debugger', executionContext.event, editor.event, editorAPI, compilerAPI, contentToolAPI)
+  var transactionDebugger = new Debugger('#debugger', executionContext.event, editor.event, editorAPIDebug, compilerAPI, contentToolAPI)
   transactionDebugger.addProvider('vm', executionContext.vm())
   transactionDebugger.addProvider('injected', executionContext.web3())
   transactionDebugger.addProvider('web3', executionContext.web3())
@@ -564,7 +573,26 @@ var run = function () {
     startdebugging(txResult.transactionHash)
   })
 
-  var renderer = new Renderer(editorAPI, udappAPI, ethToolAPI, formalVerification.event, compiler.event) // eslint-disable-line  
+  var editorAPIRenderer = {
+    error: (file, error) => {
+      if (file === editor.getCacheFile()) {
+        editor.addAnnotation(error)
+      }
+    },
+    errorClick: (errFile, errLine, errCol) => {
+      if (errFile !== editor.getCacheFile() && editor.hasFile(errFile)) {
+        switchToFile(errFile)
+      }
+      editor.gotoLine(errLine, errCol)
+    },
+    currentCompiledSourceCode: () => {
+      if (compiler.lastCompilationResult.source) {
+        return compiler.lastCompilationResult.source.sources[compiler.lastCompilationResult.source.target]
+      }
+      return ''
+    }
+  }
+  var renderer = new Renderer(editorAPIRenderer, udappAPI, ethToolAPI, formalVerification.event, compiler.event) // eslint-disable-line  
   var rendererAPI = {
     renderItem: (label, warningContainer, type) => {
       return renderer.error(label, warningContainer, type)

src/app/debugger.js

 'use strict'
 
 var remix = require('ethereum-remix')
-var ace = require('brace')
-var Range = ace.acequire('ace/range').Range
 
 /**
  * Manage remix and source highlighting
@@ -22,7 +20,7 @@ function Debugger (id, executionContextEvent, editorEvent, editorAPI, compilerAP
   })
 
   this.debugger.event.register('traceUnloaded', this, function () {
-    self.removeMarkers()
+    self.editorAPI.sourceLocation(null)
   })
 
   // unload if a file has changed (but not if tabs were switched)
@@ -36,9 +34,9 @@ function Debugger (id, executionContextEvent, editorEvent, editorAPI, compilerAP
       this.debugger.callTree.sourceLocationTracker.getSourceLocationFromInstructionIndex(address, index, self.compilerAPI.lastCompilationResult().data.contracts, function (error, rawLocation) {
         if (!error) {
           var lineColumnPos = self.contentToolAPI.offsetToLineColumn(rawLocation, rawLocation.file)
-          self.highlight(lineColumnPos, rawLocation)
+          self.editorAPI.sourceLocation(lineColumnPos, rawLocation)
         } else {
-          self.unhighlight()
+          self.editorAPI.sourceLocation(null)
         }
       })
     }
@@ -61,40 +59,6 @@ Debugger.prototype.debug = function (txHash) {
 }
 
 /**
- * highlight the given @arg lineColumnPos
- *
- * @param {Object} lineColumnPos - position of the source code to hightlight {start: {line, column}, end: {line, column}}
- * @param {Object} rawLocation - raw position of the source code to hightlight {start, length, file, jump}
- */
-Debugger.prototype.highlight = function (lineColumnPos, rawLocation) {
-  var name = this.editorAPI.currentOpenedFile() // current opened tab
-  var source = this.compilerAPI.lastCompilationResult().data.sourceList[rawLocation.file] // auto switch to that tab
-  this.removeCurrentMarker()
-  if (name !== source) {
-    this.editorAPI.switchToFile(source) // command the app to swicth to the next file
-  }
-  var range = new Range(lineColumnPos.start.line, lineColumnPos.start.column, lineColumnPos.end.line, lineColumnPos.end.column)
-  this.markers['highlightcode'] = this.editor.addMarker(range, 'highlightcode')
-  if (lineColumnPos.start.line === lineColumnPos.end.line) {
-    var fullrange = new Range(lineColumnPos.start.line, 0, lineColumnPos.start.line + 1, 0)
-    this.markers['highlightcode_fullLine'] = this.editor.addMarker(fullrange, 'highlightcode_fullLine')
-  }
-}
-
-/**
- * unhighlight the given @arg lineColumnPos
- *
- * @param {Object} lineColumnPos - position of the source code to hightlight {start: {line, column}, end: {line, column}}
- * @param {Object} rawLocation - raw position of the source code to hightlight {start, length, file, jump}
- */
-Debugger.prototype.unhighlight = function (lineColumnPos, rawLocation, cssCode) {
-  this.removeMarker('highlightcode')
-  this.removeMarker('highlightcode_fullLine')
-  this.currentRange = new Range(lineColumnPos.start.line, lineColumnPos.start.column, lineColumnPos.end.line, lineColumnPos.end.column)
-  this.currentMarker = this.editorAPI.addMarker(this.currentRange, 'highlightcode')
-}
-
-/**
  * add a new web3 provider to remix
  *
  * @param {String} type - type/name of the provider to add
@@ -120,23 +84,4 @@ Debugger.prototype.web3 = function (type) {
   return this.debugger.web3()
 }
 
-/**
- * unhighlight highlighted statements
- */
-Debugger.prototype.removeMarkers = function () {
-  for (var k in this.markers) {
-    this.removeMarker(k)
-  }
-}
-
-/**
- * unhighlight the current highlighted statement
- */
-Debugger.prototype.removeMarker = function (key) {
-  if (this.markers[key]) {
-    this.editor.removeMarker(this.markers[key])
-    this.markers[key] = null
-  }
-}
-
 module.exports = Debugger

src/app/editor.js

@@ -5,6 +5,7 @@ var EventManager = require('../lib/eventManager')
 var examples = require('./example-contracts')
 
 var ace = require('brace')
+var Range = ace.acequire('ace/range').Range
 require('../mode-solidity.js')
 
 function Editor (doNotLoadStorage, storage) {
@@ -17,8 +18,9 @@ function Editor (doNotLoadStorage, storage) {
   var sessions = {}
   var sourceAnnotations = []
 
-  this.addMarker = function (range, cssClass) {
-    return editor.session.addMarker(range, cssClass)
+  this.addMarker = function (lineColumnPos, cssClass) {
+    var currentRange = new Range(lineColumnPos.start.line, lineColumnPos.start.column, lineColumnPos.end.line, lineColumnPos.end.column)
+    return editor.session.addMarker(currentRange, cssClass)
   }
 
   this.removeMarker = function (markerId) {

src/app/renderer.js

@@ -54,8 +54,8 @@ Renderer.prototype.error = function (message, container, options) {
     var errFile = err[1]
     var errLine = parseInt(err[2], 10) - 1
     var errCol = err[4] ? parseInt(err[4], 10) : 0
-    if (!opt.noAnnotations && (errFile === '' || errFile === self.editorAPI.currentOpenedFile())) {
-      self.editorAPI.addAnnotation({
+    if (!opt.noAnnotations) {
+      self.editorAPI.error(errFile, {
         row: errLine,
         column: errCol,
         text: message,
@@ -63,11 +63,7 @@ Renderer.prototype.error = function (message, container, options) {
       })
     }
     $error.click(function (ev) {
-      if (errFile !== '' && errFile !== self.editorAPI.currentOpenedFile() && self.editorAPI.hasFile(errFile)) {
-        // Switch to file
-        self.editorAPI.switchToFile(errFile)
-      }
-      self.editorAPI.gotoLine(errLine, errCol)
+      self.editorAPI.errorClick(errFile, errLine, errCol)
     })
   }
   $error.find('.close').click(function (ev) {
@@ -261,6 +257,7 @@ Renderer.prototype.contracts = function (data, source) {
     return $('<div class="contractDetails"/>').append(button).append(details)
   }
 
+  var self = this
   var renderOutputModifier = function (contractName, $contractOutput) {
     var contract = data.contracts[contractName]
     if (contract.bytecode) {
@@ -279,15 +276,11 @@ Renderer.prototype.contracts = function (data, source) {
       }
     }
 
-    var ctrSource = getSource(contractName, source, data)
-    return $contractOutput.append(getDetails(contract, ctrSource, contractName))
+    var ctrSource = self.editorAPI.currentCompiledSourceCode()
+    if (ctrSource) {
+      $contractOutput.append(getDetails(contract, ctrSource, contractName))
     }
-
-  var self = this
-
-  var getSource = function (contractName, source, data) {
-    var currentFile = self.editorAPI.currentOpenedFile()
-    return source.sources[currentFile]
+    return $contractOutput
   }
 
   var getAddress = function (cb) {