From 2842fa89f60c95dabf942e12096f5cd638545acf Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Thu, 28 May 2020 17:22:34 +0200
Subject: [PATCH 1/5] refactored debuggerUI. using SourceHighlight

---
 src/app/tabs/debugger-tab.js        |  2 +-
 src/app/tabs/debugger/debuggerUI.js | 75 +++++++++++++++--------------
 2 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/src/app/tabs/debugger-tab.js b/src/app/tabs/debugger-tab.js
index 84959edad2..c3fe77dbcd 100644
--- a/src/app/tabs/debugger-tab.js
+++ b/src/app/tabs/debugger-tab.js
@@ -56,8 +56,8 @@ class DebuggerTab extends ViewPlugin {
     })
 
     this.debuggerUI = new DebuggerUI(
+      this,
       this.el.querySelector('#debugger'),
-      this.blockchain,
       (address, receipt) => {
         const target = (address && remixLib.helpers.trace.isContractCreation(address)) ? receipt.contractAddress : address
         return this.call('fetchAndCompile', 'resolve', target || receipt.contractAddress || receipt.to, '.debug', this.blockchain.web3())
diff --git a/src/app/tabs/debugger/debuggerUI.js b/src/app/tabs/debugger/debuggerUI.js
index 8359762412..72541d60c6 100644
--- a/src/app/tabs/debugger/debuggerUI.js
+++ b/src/app/tabs/debugger/debuggerUI.js
@@ -30,9 +30,8 @@ var css = csjs`
 
 class DebuggerUI {
 
-  constructor (container, blockchain, fetchContractAndCompile) {
-    this.registry = globalRegistry
-    this.blockchain = blockchain
+  constructor (debuggerModule, component, fetchContractAndCompile) {
+    this.debuggerModule = debuggerModule
     this.fetchContractAndCompile = fetchContractAndCompile
     this.event = new EventManager()
 
@@ -48,62 +47,62 @@ class DebuggerUI {
 
     this.view
 
-    container.appendChild(this.render())
+    component.appendChild(this.render())
 
     this.setEditor()
   }
 
   setEditor () {
-    const self = this
-    this.editor = this.registry.get('editor').api
+    this.editor = globalRegistry.get('editor').api
 
-    self.editor.event.register('breakpointCleared', (fileName, row) => {
-      if (self.debugger) self.debugger.breakPointManager.remove({fileName: fileName, row: row})
+    this.editor.event.register('breakpointCleared', (fileName, row) => {
+      if (this.debugger) this.debugger.breakPointManager.remove({fileName: fileName, row: row})
     })
 
-    self.editor.event.register('breakpointAdded', (fileName, row) => {
-      if (self.debugger) self.debugger.breakPointManager.add({fileName: fileName, row: row})
+    this.editor.event.register('breakpointAdded', (fileName, row) => {
+      if (this.debugger) this.debugger.breakPointManager.add({fileName: fileName, row: row})
     })
 
-    self.editor.event.register('contentChanged', function () {
-      if (self.debugger) self.debugger.unload()
+    this.editor.event.register('contentChanged', () => {
+      if (this.debugger) this.debugger.unload()
     })
   }
 
   listenToEvents () {
-    const self = this
-    if (!self.debugger) return
+    if (!this.debugger) return
 
-    this.debugger.event.register('debuggerStatus', function (isActive) {
-      self.sourceHighlighter.currentSourceLocation(null)
-      self.isActive = isActive
+    this.debugger.event.register('debuggerStatus', async (isActive) => {
+      await this.debuggerModule.call('editor', 'discardHighlight')
+      this.isActive = isActive
     })
 
-    this.debugger.event.register('newSourceLocation', async function (lineColumnPos, rawLocation) {
-      const contracts = await self.fetchContractAndCompile(
-        self.currentReceipt.contractAddress || self.currentReceipt.to,
-        self.currentReceipt)
+    this.debugger.event.register('newSourceLocation', async (lineColumnPos, rawLocation) => {
+      const contracts = await this.fetchContractAndCompile(
+        this.currentReceipt.contractAddress || this.currentReceipt.to,
+        this.currentReceipt)
       if (contracts) {
         const path = contracts.getSourceName(rawLocation.file)
-        if (path) self.sourceHighlighter.currentSourceLocationFromfileName(lineColumnPos, path)
+        if (path) {
+          await this.debuggerModule.call('editor', 'discardHighlight')
+          await this.debuggerModule.call('editor', 'highlight', lineColumnPos, path)
+        }
       }
     })
 
-    this.debugger.event.register('debuggerUnloaded', self.unLoad.bind(this))
+    this.debugger.event.register('debuggerUnloaded', () => unLoad)
   }
 
   startTxBrowser () {
-    const self = this
     let txBrowser = new TxBrowser()
     this.txBrowser = txBrowser
 
-    txBrowser.event.register('requestDebug', function (blockNumber, txNumber, tx) {
-      if (self.debugger) self.debugger.unload()
-      self.startDebugging(blockNumber, txNumber, tx)
+    txBrowser.event.register('requestDebug', (blockNumber, txNumber, tx) => {
+      if (this.debugger) this.debugger.unload()
+      this.startDebugging(blockNumber, txNumber, tx)
     })
 
-    txBrowser.event.register('unloadRequested', this, function (blockNumber, txIndex, tx) {
-      if (self.debugger) self.debugger.unload()
+    txBrowser.event.register('unloadRequested', this, (blockNumber, txIndex, tx) => {
+      if (this.debugger) this.debugger.unload()
     })
   }
 
@@ -113,13 +112,13 @@ class DebuggerUI {
 
   getDebugWeb3 () {
     return new Promise((resolve, reject) => {
-      this.blockchain.detectNetwork((error, network) => {
+      this.debuggerModule.blockchain.detectNetwork((error, network) => {
         let web3
         if (error || !network) {
-          web3 = init.web3DebugNode(this.blockchain.web3())
+          web3 = init.web3DebugNode(this.debuggerModule.blockchain.web3())
         } else {
           const webDebugNode = init.web3DebugNode(network.name)
-          web3 = !webDebugNode ? this.blockchain.web3() : webDebugNode
+          web3 = !webDebugNode ? this.debuggerModule.blockchain.web3() : webDebugNode
         }
         init.extendWeb3(web3)
         resolve(web3)
@@ -134,7 +133,7 @@ class DebuggerUI {
     this.currentReceipt = await web3.eth.getTransactionReceipt(txNumber)
     this.debugger = new Debugger({
       web3,
-      offsetToLineColumnConverter: this.registry.get('offsettolinecolumnconverter').api,
+      offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api,
       compilationResult: async (address) => {
         try {
           return await this.fetchContractAndCompile(address, this.currentReceipt)
@@ -164,7 +163,7 @@ class DebuggerUI {
       this.currentReceipt = await web3.eth.getTransactionReceipt(hash)
       const debug = new Debugger({
         web3,
-        offsetToLineColumnConverter: this.registry.get('offsettolinecolumnconverter').api,
+        offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api,
         compilationResult: async (address) => {
           try {
             return await this.fetchContractAndCompile(address, this.currentReceipt)
@@ -190,15 +189,17 @@ class DebuggerUI {
     this.debuggerHeadPanelsView = yo`<div class="${css.innerShift}"></div>`
     this.stepManagerView = yo`<div class="${css.innerShift}"></div>`
 
-    var view = yo`<div>
+    var view = yo`
+      <div>
         <div class="${css.innerShift}">
           ${this.txBrowser.render()}
           ${this.debuggerHeadPanelsView}
           ${this.stepManagerView}
         </div>
-        <div class="${css.statusMessage}" >${this.statusMessage}</div>
+        <div class="${css.statusMessage}">${this.statusMessage}</div>
         ${this.debuggerPanelsView}
-     </div>`
+      </div>
+    `
     if (!this.view) {
       this.view = view
     }

From 6bab1db61ccf4db16e55d529a084d60e1192a03f Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Thu, 28 May 2020 18:11:10 +0200
Subject: [PATCH 2/5] fixed unLoad

---
 src/app/tabs/debugger/debuggerUI.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/tabs/debugger/debuggerUI.js b/src/app/tabs/debugger/debuggerUI.js
index 72541d60c6..dd9c50bd0d 100644
--- a/src/app/tabs/debugger/debuggerUI.js
+++ b/src/app/tabs/debugger/debuggerUI.js
@@ -89,7 +89,7 @@ class DebuggerUI {
       }
     })
 
-    this.debugger.event.register('debuggerUnloaded', () => unLoad)
+    this.debugger.event.register('debuggerUnloaded', () => this.unLoad())
   }
 
   startTxBrowser () {

From 20e8d2ca7b62e640515f5a3a3f06d5f52704a978 Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Thu, 28 May 2020 19:40:24 +0200
Subject: [PATCH 3/5] remove highlights on unload

---
 src/app/tabs/debugger-tab.js        | 8 +++++++-
 src/app/tabs/debugger/debuggerUI.js | 3 ++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/app/tabs/debugger-tab.js b/src/app/tabs/debugger-tab.js
index c3fe77dbcd..71f1299fe8 100644
--- a/src/app/tabs/debugger-tab.js
+++ b/src/app/tabs/debugger-tab.js
@@ -61,7 +61,8 @@ class DebuggerTab extends ViewPlugin {
       (address, receipt) => {
         const target = (address && remixLib.helpers.trace.isContractCreation(address)) ? receipt.contractAddress : address
         return this.call('fetchAndCompile', 'resolve', target || receipt.contractAddress || receipt.to, '.debug', this.blockchain.web3())
-      })
+      }
+    )
 
     this.call('manager', 'activatePlugin', 'source-verification')
     // this.call('manager', 'activatePlugin', 'udapp')
@@ -69,6 +70,11 @@ class DebuggerTab extends ViewPlugin {
     return this.el
   }
 
+  deactivate () {
+    this.debuggerUI.unLoad()
+    super.deactivate()
+  }
+
   debug (hash) {
     if (this.debuggerUI) this.debuggerUI.debug(hash)
   }
diff --git a/src/app/tabs/debugger/debuggerUI.js b/src/app/tabs/debugger/debuggerUI.js
index dd9c50bd0d..2bbf18aaff 100644
--- a/src/app/tabs/debugger/debuggerUI.js
+++ b/src/app/tabs/debugger/debuggerUI.js
@@ -206,7 +206,8 @@ class DebuggerUI {
     return view
   }
 
-  unLoad () {
+  async unLoad () {
+    await this.debuggerModule.call('editor', 'discardHighlight')
     yo.update(this.debuggerHeadPanelsView, yo`<div></div>`)
     yo.update(this.debuggerPanelsView, yo`<div></div>`)
     yo.update(this.stepManagerView, yo`<div></div>`)

From 0efa1a65a950d034b9aa8fb236be966e35af1c6d Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Fri, 29 May 2020 14:46:41 +0200
Subject: [PATCH 4/5] remove only highlight

---
 src/app/tabs/debugger-tab.js        | 2 +-
 src/app/tabs/debugger/debuggerUI.js | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app/tabs/debugger-tab.js b/src/app/tabs/debugger-tab.js
index 71f1299fe8..a2ed6f1088 100644
--- a/src/app/tabs/debugger-tab.js
+++ b/src/app/tabs/debugger-tab.js
@@ -71,7 +71,7 @@ class DebuggerTab extends ViewPlugin {
   }
 
   deactivate () {
-    this.debuggerUI.unLoad()
+    this.debuggerUI.deletHighlights()
     super.deactivate()
   }
 
diff --git a/src/app/tabs/debugger/debuggerUI.js b/src/app/tabs/debugger/debuggerUI.js
index 2bbf18aaff..9d8d5702bc 100644
--- a/src/app/tabs/debugger/debuggerUI.js
+++ b/src/app/tabs/debugger/debuggerUI.js
@@ -207,7 +207,6 @@ class DebuggerUI {
   }
 
   async unLoad () {
-    await this.debuggerModule.call('editor', 'discardHighlight')
     yo.update(this.debuggerHeadPanelsView, yo`<div></div>`)
     yo.update(this.debuggerPanelsView, yo`<div></div>`)
     yo.update(this.stepManagerView, yo`<div></div>`)
@@ -220,6 +219,10 @@ class DebuggerUI {
     this.event.trigger('traceUnloaded')
   }
 
+  async deletHighlights () {
+    await this.debuggerModule.call('editor', 'discardHighlight')
+  }
+
   renderDebugger () {
     yo.update(this.debuggerHeadPanelsView, this.vmDebugger.renderHead())
     yo.update(this.debuggerPanelsView, this.vmDebugger.render())

From 9e59987f766d7b35eae4d3df7beff92c1b7d3b85 Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Sun, 31 May 2020 14:03:31 +0200
Subject: [PATCH 5/5] typo

---
 src/app/tabs/debugger-tab.js        | 2 +-
 src/app/tabs/debugger/debuggerUI.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/tabs/debugger-tab.js b/src/app/tabs/debugger-tab.js
index a2ed6f1088..42db476705 100644
--- a/src/app/tabs/debugger-tab.js
+++ b/src/app/tabs/debugger-tab.js
@@ -71,7 +71,7 @@ class DebuggerTab extends ViewPlugin {
   }
 
   deactivate () {
-    this.debuggerUI.deletHighlights()
+    this.debuggerUI.deleteHighlights()
     super.deactivate()
   }
 
diff --git a/src/app/tabs/debugger/debuggerUI.js b/src/app/tabs/debugger/debuggerUI.js
index 9d8d5702bc..f45723a9a2 100644
--- a/src/app/tabs/debugger/debuggerUI.js
+++ b/src/app/tabs/debugger/debuggerUI.js
@@ -219,7 +219,7 @@ class DebuggerUI {
     this.event.trigger('traceUnloaded')
   }
 
-  async deletHighlights () {
+  async deleteHighlights () {
     await this.debuggerModule.call('editor', 'discardHighlight')
   }