From fd5754357e3612cfc5a69a2002acd1981cb36526 Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Thu, 23 Nov 2017 01:02:27 +0100
Subject: [PATCH 01/11] Highlight keyword payable, view, pure

---
 src/app/editor/mode-solidity.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/editor/mode-solidity.js b/src/app/editor/mode-solidity.js
index b1f47e5a8e..71f9fe04b6 100644
--- a/src/app/editor/mode-solidity.js
+++ b/src/app/editor/mode-solidity.js
@@ -68,7 +68,7 @@ var JavaScriptHighlightRules = function(options) {
             "contract|library|constant|event|modifier|" +
             "struct|mapping|enum|break|continue|delete|else|for|function|" +
             "if|new|return|returns|var|while|using|" +
-            "private|public|external|internal|storage|memory",
+            "private|public|external|internal|storage|memory|payable|view|pure|",
         "storage.type":
             "constant|var|function",
         "constant.language.boolean": "true|false"

From ccd3f4a6f9081a9a7251566eb1574ba364058a01 Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Thu, 23 Nov 2017 05:13:55 +0100
Subject: [PATCH 02/11] Add search

---
 src/app.js               |  1 +
 src/app/editor/editor.js | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/app.js b/src/app.js
index 3eb4c96352..6868dfd080 100644
--- a/src/app.js
+++ b/src/app.js
@@ -297,6 +297,7 @@ function run () {
   txlistener.startListening()
   // ----------------- editor ----------------------------
   this._components.editor = new Editor({}) // @TODO: put into editorpanel
+  window.EDITOR = this._components.editor
   var editor = self._components.editor // shortcut for the editor
 
   // ---------------- ContextualListener -----------------------
diff --git a/src/app/editor/editor.js b/src/app/editor/editor.js
index 29f12b5c2d..cf206c6c11 100644
--- a/src/app/editor/editor.js
+++ b/src/app/editor/editor.js
@@ -6,6 +6,7 @@ var csjs = require('csjs-inject')
 var ace = require('brace')
 var Range = ace.acequire('ace/range').Range
 require('brace/ext/language_tools')
+require('brace/ext/searchbox')
 var langTools = ace.acequire('ace/ext/language_tools')
 require('./mode-solidity.js')
 var styleGuide = remixLib.ui.styleGuide
@@ -225,6 +226,10 @@ function Editor (opts = {}) {
     editor.gotoLine(line + 1, col - 1, true)
   }
 
+  this.find = function (string) {
+    editor.find(string)
+  }
+
   // Do setup on initialisation here
   editor.on('changeSession', function () {
     event.trigger('sessionSwitched', [])
@@ -236,7 +241,15 @@ function Editor (opts = {}) {
 
   // Unmap ctrl-t & ctrl-f
   editor.commands.bindKeys({ 'ctrl-t': null })
-  editor.commands.bindKeys({ 'ctrl-f': null })
+  // editor.commands.bindKeys({ 'ctrl-f': null })
+
+  editor.commands.addCommand({
+    name: "myCommand",
+    bindKey: { win: "Ctrl-L", mac: "Command-L" },
+    exec: function() {
+        editor.insert("Key binded!");
+    }
+  });
 
   editor.resize(true)
 }

From 51a0129363cb5e59b5c3222087a5a2771a48f44d Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Thu, 23 Nov 2017 17:42:13 +0100
Subject: [PATCH 03/11] Remove test/debugging statements from PR

---
 src/app.js               | 1 -
 src/app/editor/editor.js | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/app.js b/src/app.js
index 6868dfd080..3eb4c96352 100644
--- a/src/app.js
+++ b/src/app.js
@@ -297,7 +297,6 @@ function run () {
   txlistener.startListening()
   // ----------------- editor ----------------------------
   this._components.editor = new Editor({}) // @TODO: put into editorpanel
-  window.EDITOR = this._components.editor
   var editor = self._components.editor // shortcut for the editor
 
   // ---------------- ContextualListener -----------------------
diff --git a/src/app/editor/editor.js b/src/app/editor/editor.js
index cf206c6c11..b5a1d667b1 100644
--- a/src/app/editor/editor.js
+++ b/src/app/editor/editor.js
@@ -241,7 +241,6 @@ function Editor (opts = {}) {
 
   // Unmap ctrl-t & ctrl-f
   editor.commands.bindKeys({ 'ctrl-t': null })
-  // editor.commands.bindKeys({ 'ctrl-f': null })
 
   editor.commands.addCommand({
     name: "myCommand",

From 815c07ec74e6f550dac6d97a115ecd15ba4221bd Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Mon, 27 Nov 2017 03:00:23 +0100
Subject: [PATCH 04/11] Add next/previous in editor IDE

---
 src/app.js                    |  3 ++-
 src/app/editor/contextView.js | 38 +++++++++++++++++++++++++++++------
 src/app/editor/editor.js      | 12 +----------
 3 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/app.js b/src/app.js
index 3eb4c96352..784711fda0 100644
--- a/src/app.js
+++ b/src/app.js
@@ -349,6 +349,7 @@ function run () {
   // ---------------- ContextView -----------------------
   this._components.contextView = new ContextView({
     contextualListener: this._components.contextualListener,
+    editor: editor,
     jumpTo: (position) => {
       if (compiler.lastCompilationResult && compiler.lastCompilationResult.data) {
         var lineColumn = offsetToLineColumnConverter.offsetToLineColumn(position, position.file, compiler.lastCompilationResult)
@@ -357,7 +358,7 @@ function run () {
           fileManager.switchFile(filename)
         }
         if (lineColumn.start && lineColumn.start.line && lineColumn.start.column) {
-          editor.gotoLine(lineColumn.start.line, lineColumn.start.column + 1)
+          editor.gotoLine(lineColumn.start.line, lineColumn.end.column + 1)
         }
       }
     }
diff --git a/src/app/editor/contextView.js b/src/app/editor/contextView.js
index 8fb93e4e26..252a2340cf 100644
--- a/src/app/editor/contextView.js
+++ b/src/app/editor/contextView.js
@@ -30,13 +30,14 @@ var css = csjs`
   .name                   {
     font-weight       : bold;
     margin-right      : 15px;
+    cursor            : pointer;
   }
-  .jumpto                 {
+  .jump                   {
     cursor            : pointer;
-    margin-right      : 5px;
+    margin            : 0 5px;
     color             : ${styles.editor.icon_Color_Editor};
   }
-  jumpto:hover            {
+  .jump:hover              {
     color             : ${styles.editor.icon_HoverColor_Editor};
   }
   .referencesnb           {
@@ -129,11 +130,36 @@ class ContextView {
       }
     }
 
+    function next () {
+      var currentName = node.attributes.name
+      if (currentName === this.refName) {
+        this.ref = this.ref === undefined ? 0 : this.ref
+      } else { this.ref = 0 }
+      var nodes = self._api.contextualListener._activeHighlights
+      self._api.jumpTo(nodes[this.ref].position)
+      this.ref = (this.ref + 1) % nodes.length
+      this.refName = currentName
+    }
+
+    function previous () {
+      var currentName = node.attributes.name
+      if (currentName === this.refName) {
+        this.ref = this.ref === undefined ? 0 : this.ref
+      } else { this.ref = 0 }  // should be this.ref = ref of the selected node (loop through all nodes to find this one)
+      var nodes = self._api.contextualListener._activeHighlights
+      this.ref = this.ref === undefined ? 0 : this.ref
+      self._api.jumpTo(nodes[nodes.length - 1 - this.ref].position)
+      this.ref = (this.ref + 1) % nodes.length
+      this.refName = currentName
+    }
+
     return yo`<div class=${css.line}>
-      <div title=${type} class=${css.type} >${type}</div>
-      <div title=${node.attributes.name} class=${css.name} >${node.attributes.name}</div>
-      <i title='Go to Definition' class="fa fa-share ${css.jumpto}" aria-hidden="true" onclick=${jumpTo}></i>
+      <i class="fa fa-share ${css.jump}" aria-hidden="true" onclick=${jumpTo}></i>
+      <div title=${type} class=${css.type}>${type}</div>
+      <div title=${node.attributes.name} class=${css.name}>${node.attributes.name}</div>
       <span class=${css.referencesnb}>${references}</span>
+      <i class="fa fa-chevron-up ${css.jump}" aria-hidden="true" onclick=${previous}></i>
+      <i class="fa fa-chevron-down ${css.jump}" aria-hidden="true" onclick=${next}></i>
     </div>`
   }
 }
diff --git a/src/app/editor/editor.js b/src/app/editor/editor.js
index b5a1d667b1..794f4578ef 100644
--- a/src/app/editor/editor.js
+++ b/src/app/editor/editor.js
@@ -226,9 +226,7 @@ function Editor (opts = {}) {
     editor.gotoLine(line + 1, col - 1, true)
   }
 
-  this.find = function (string) {
-    editor.find(string)
-  }
+  this.find = (string) => editor.find(string)
 
   // Do setup on initialisation here
   editor.on('changeSession', function () {
@@ -242,14 +240,6 @@ function Editor (opts = {}) {
   // Unmap ctrl-t & ctrl-f
   editor.commands.bindKeys({ 'ctrl-t': null })
 
-  editor.commands.addCommand({
-    name: "myCommand",
-    bindKey: { win: "Ctrl-L", mac: "Command-L" },
-    exec: function() {
-        editor.insert("Key binded!");
-    }
-  });
-
   editor.resize(true)
 }
 

From e785308384304e555e8345586ed58f85b0ebc76b Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Mon, 27 Nov 2017 17:51:33 +0100
Subject: [PATCH 05/11] Add getter (getActiveHighlights) and remove unused api
 reference

---
 src/app.js                           | 1 -
 src/app/editor/contextView.js        | 5 +++--
 src/app/editor/contextualListener.js | 4 ++++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app.js b/src/app.js
index 784711fda0..fe84d2f259 100644
--- a/src/app.js
+++ b/src/app.js
@@ -349,7 +349,6 @@ function run () {
   // ---------------- ContextView -----------------------
   this._components.contextView = new ContextView({
     contextualListener: this._components.contextualListener,
-    editor: editor,
     jumpTo: (position) => {
       if (compiler.lastCompilationResult && compiler.lastCompilationResult.data) {
         var lineColumn = offsetToLineColumnConverter.offsetToLineColumn(position, position.file, compiler.lastCompilationResult)
diff --git a/src/app/editor/contextView.js b/src/app/editor/contextView.js
index 252a2340cf..0f3ff374c7 100644
--- a/src/app/editor/contextView.js
+++ b/src/app/editor/contextView.js
@@ -115,6 +115,7 @@ class ContextView {
   }
 
   _render (node) {
+    console.log('rendering')
     if (!node) return yo`<div></div>`
     var self = this
     var references = this._api.contextualListener.referencesOf(node)
@@ -135,7 +136,7 @@ class ContextView {
       if (currentName === this.refName) {
         this.ref = this.ref === undefined ? 0 : this.ref
       } else { this.ref = 0 }
-      var nodes = self._api.contextualListener._activeHighlights
+      var nodes = self._api.contextualListener.getActiveHighlights()
       self._api.jumpTo(nodes[this.ref].position)
       this.ref = (this.ref + 1) % nodes.length
       this.refName = currentName
@@ -146,7 +147,7 @@ class ContextView {
       if (currentName === this.refName) {
         this.ref = this.ref === undefined ? 0 : this.ref
       } else { this.ref = 0 }  // should be this.ref = ref of the selected node (loop through all nodes to find this one)
-      var nodes = self._api.contextualListener._activeHighlights
+      var nodes = self._api.contextualListener.getActiveHighlights()
       this.ref = this.ref === undefined ? 0 : this.ref
       self._api.jumpTo(nodes[nodes.length - 1 - this.ref].position)
       this.ref = (this.ref + 1) % nodes.length
diff --git a/src/app/editor/contextualListener.js b/src/app/editor/contextualListener.js
index 9897827ecf..33dada2539 100644
--- a/src/app/editor/contextualListener.js
+++ b/src/app/editor/contextualListener.js
@@ -37,6 +37,10 @@ class ContextualListener {
     }, 1000)
   }
 
+  getActiveHighlights () {
+    return [...this._activeHighlights]
+  }
+
   declarationOf (node) {
     if (node.attributes && node.attributes.referencedDeclaration) {
       return this._index['FlatReferences'][node.attributes.referencedDeclaration]

From f49a69363413464bbf0f24b82971219be20e8b1f Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Tue, 28 Nov 2017 06:26:00 +0100
Subject: [PATCH 06/11] Work in progress - debugging getActiveHighlights in
 connection with next/previous

---
 src/app/editor/contextView.js        | 49 +++++++++++++++++++---------
 src/app/editor/contextualListener.js |  3 ++
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/app/editor/contextView.js b/src/app/editor/contextView.js
index 0f3ff374c7..b24c4b32ca 100644
--- a/src/app/editor/contextView.js
+++ b/src/app/editor/contextView.js
@@ -115,7 +115,6 @@ class ContextView {
   }
 
   _render (node) {
-    console.log('rendering')
     if (!node) return yo`<div></div>`
     var self = this
     var references = this._api.contextualListener.referencesOf(node)
@@ -132,26 +131,44 @@ class ContextView {
     }
 
     function next () {
-      var currentName = node.attributes.name
-      if (currentName === this.refName) {
-        this.ref = this.ref === undefined ? 0 : this.ref
-      } else { this.ref = 0 }
       var nodes = self._api.contextualListener.getActiveHighlights()
-      self._api.jumpTo(nodes[this.ref].position)
-      this.ref = (this.ref + 1) % nodes.length
-      this.refName = currentName
+      var currentName = node.attributes.name
+      var position = self.sourceMappingDecoder.decode(node.src)
+
+      if (currentName !== self.refName) self.ref = 0
+      var k = self.ref
+
+      /// LOGS ///
+      nodes.forEach(node => console.log(node.position.start))
+      console.log('----')
+      console.log(k)
+      console.log('----')
+
+      var pos = nodes[k].position
+      self._api.jumpTo(pos)
+
+      self.ref = (self.ref + 1) % nodes.length
+      self.refName = currentName
     }
 
     function previous () {
-      var currentName = node.attributes.name
-      if (currentName === this.refName) {
-        this.ref = this.ref === undefined ? 0 : this.ref
-      } else { this.ref = 0 }  // should be this.ref = ref of the selected node (loop through all nodes to find this one)
       var nodes = self._api.contextualListener.getActiveHighlights()
-      this.ref = this.ref === undefined ? 0 : this.ref
-      self._api.jumpTo(nodes[nodes.length - 1 - this.ref].position)
-      this.ref = (this.ref + 1) % nodes.length
-      this.refName = currentName
+      var currentName = node.attributes.name
+      if (currentName !== self.refName) self.ref = nodes.length - 1
+
+      var k = nodes.length - 1 - self.ref
+
+      /// LOGS ///
+      nodes.forEach(node => console.log(node.position.start))
+      console.log('----')
+      console.log(k)
+      console.log('----')
+
+      var pos = nodes[k].position
+      self._api.jumpTo(pos)
+
+      self.ref = (self.ref + 1) % nodes.length
+      self.refName = currentName
     }
 
     return yo`<div class=${css.line}>
diff --git a/src/app/editor/contextualListener.js b/src/app/editor/contextualListener.js
index 33dada2539..4739e9bcca 100644
--- a/src/app/editor/contextualListener.js
+++ b/src/app/editor/contextualListener.js
@@ -39,6 +39,9 @@ class ContextualListener {
 
   getActiveHighlights () {
     return [...this._activeHighlights]
+    // return [...this._activeHighlights].sort((a,b) => {
+    //   return a.position.start - b.position.start
+    // })
   }
 
   declarationOf (node) {

From ff1299102a6d859cab880729261d26f5bac3948f Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Sun, 3 Dec 2017 23:13:08 +0700
Subject: [PATCH 07/11] Update _highlightExpressions and contextView.js

---
 src/app/editor/contextView.js        | 18 ++----------------
 src/app/editor/contextualListener.js |  1 +
 2 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/src/app/editor/contextView.js b/src/app/editor/contextView.js
index b24c4b32ca..1cfcc6c379 100644
--- a/src/app/editor/contextView.js
+++ b/src/app/editor/contextView.js
@@ -29,8 +29,6 @@ var css = csjs`
   }
   .name                   {
     font-weight       : bold;
-    margin-right      : 15px;
-    cursor            : pointer;
   }
   .jump                   {
     cursor            : pointer;
@@ -42,6 +40,7 @@ var css = csjs`
   }
   .referencesnb           {
     float             : right;
+    margin-left       : 15px;
   }
 `
 
@@ -133,17 +132,10 @@ class ContextView {
     function next () {
       var nodes = self._api.contextualListener.getActiveHighlights()
       var currentName = node.attributes.name
-      var position = self.sourceMappingDecoder.decode(node.src)
 
       if (currentName !== self.refName) self.ref = 0
       var k = self.ref
 
-      /// LOGS ///
-      nodes.forEach(node => console.log(node.position.start))
-      console.log('----')
-      console.log(k)
-      console.log('----')
-
       var pos = nodes[k].position
       self._api.jumpTo(pos)
 
@@ -158,12 +150,6 @@ class ContextView {
 
       var k = nodes.length - 1 - self.ref
 
-      /// LOGS ///
-      nodes.forEach(node => console.log(node.position.start))
-      console.log('----')
-      console.log(k)
-      console.log('----')
-
       var pos = nodes[k].position
       self._api.jumpTo(pos)
 
@@ -172,9 +158,9 @@ class ContextView {
     }
 
     return yo`<div class=${css.line}>
-      <i class="fa fa-share ${css.jump}" aria-hidden="true" onclick=${jumpTo}></i>
       <div title=${type} class=${css.type}>${type}</div>
       <div title=${node.attributes.name} class=${css.name}>${node.attributes.name}</div>
+      <i class="fa fa-share ${css.jump}" aria-hidden="true" onclick=${jumpTo}></i>
       <span class=${css.referencesnb}>${references}</span>
       <i class="fa fa-chevron-up ${css.jump}" aria-hidden="true" onclick=${previous}></i>
       <i class="fa fa-chevron-down ${css.jump}" aria-hidden="true" onclick=${next}></i>
diff --git a/src/app/editor/contextualListener.js b/src/app/editor/contextualListener.js
index 4739e9bcca..aa3292414b 100644
--- a/src/app/editor/contextualListener.js
+++ b/src/app/editor/contextualListener.js
@@ -120,6 +120,7 @@ class ContextualListener {
       this._highlight(current, compilationResult)
     } else {
       highlights(node.id)
+      this._highlight(node, compilationResult)
     }
   }
 

From c11a53be6c9e9c50f0f4aa144a3353c0c28802db Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Tue, 5 Dec 2017 21:40:11 +0700
Subject: [PATCH 08/11] Make previous and next work

---
 src/app.js                    |  2 +-
 src/app/editor/contextView.js | 48 ++++++++++++++++++++---------------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/app.js b/src/app.js
index fe84d2f259..bfa93d61f8 100644
--- a/src/app.js
+++ b/src/app.js
@@ -319,7 +319,7 @@ function run () {
         var css = 'highlightreference'
         if (node.children && node.children.length) {
           // If node has children, highlight the entire line. if not, just highlight the current source position of the node.
-          css = 'highlightreferenceline'
+          css = 'highlightreference'
           lineColumn = {
             start: {
               line: lineColumn.start.line,
diff --git a/src/app/editor/contextView.js b/src/app/editor/contextView.js
index 1cfcc6c379..11dbc0519d 100644
--- a/src/app/editor/contextView.js
+++ b/src/app/editor/contextView.js
@@ -129,41 +129,49 @@ class ContextView {
       }
     }
 
-    function next () {
+    // JUMP BETWEEN REFERENCES
+    function jump (e) {
       var nodes = self._api.contextualListener.getActiveHighlights()
-      var currentName = node.attributes.name
+      var searchTerm = node.attributes.name
+      var currentAction = e.target.dataset.action
 
-      if (currentName !== self.refName) self.ref = 0
-      var k = self.ref
+      if (currentAction === 'next') {
+        next(searchTerm, nodes, currentAction)
+      } else if (currentAction === 'previous') {
+        previous(searchTerm, nodes, currentAction)
+      }
 
-      var pos = nodes[k].position
-      self._api.jumpTo(pos)
+      self.refName = searchTerm
+      self.action = currentAction
+    }
 
+    function next (searchTerm, nodes, currentAction) {
+      if (searchTerm !== self.refName) self.ref = 0
+      if (currentAction !== self.action) self.ref = (nodes.length - 1) - self.ref // adapting self.ref to switching between previous() and next()
       self.ref = (self.ref + 1) % nodes.length
-      self.refName = currentName
+      self._api.jumpTo(getPos(nodes, self.ref))
     }
 
-    function previous () {
-      var nodes = self._api.contextualListener.getActiveHighlights()
-      var currentName = node.attributes.name
-      if (currentName !== self.refName) self.ref = nodes.length - 1
-
-      var k = nodes.length - 1 - self.ref
-
-      var pos = nodes[k].position
-      self._api.jumpTo(pos)
-
+    function previous (searchTerm, nodes, currentAction) {
+      if (searchTerm !== self.refName) self.ref = nodes.length - 1
+      if (currentAction !== self.action) self.ref = (nodes.length - 1) - self.ref // adapting self.ref to switching between previous() and next()
       self.ref = (self.ref + 1) % nodes.length
-      self.refName = currentName
+      self._api.jumpTo(getPos(nodes, nodes.length - 1 - self.ref))
+    }
+
+    function getPos (nodes, k) {
+      var i = (k + (nodes.length - 1)) % nodes.length // to get to nodes[0] position, jumpTo function needs nodes[node.length-1], for nodes[1], jumpTo(nodes[0].position) etc.
+      return nodes[i].position
     }
 
+
     return yo`<div class=${css.line}>
       <div title=${type} class=${css.type}>${type}</div>
       <div title=${node.attributes.name} class=${css.name}>${node.attributes.name}</div>
       <i class="fa fa-share ${css.jump}" aria-hidden="true" onclick=${jumpTo}></i>
       <span class=${css.referencesnb}>${references}</span>
-      <i class="fa fa-chevron-up ${css.jump}" aria-hidden="true" onclick=${previous}></i>
-      <i class="fa fa-chevron-down ${css.jump}" aria-hidden="true" onclick=${next}></i>
+      <i data-action='previous' class="fa fa-chevron-up ${css.jump}" aria-hidden="true" onclick=${jump}></i>
+      <i data-action='next' class="fa fa-chevron-down ${css.jump}" aria-hidden="true" onclick=${jump}></i>
     </div>`
   }
 }

From 14e7900857d6816323f53b02e23fe46f92adab70 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 6 Dec 2017 12:02:34 +0100
Subject: [PATCH 09/11] move contextChanged after the actual change

---
 src/app/editor/contextualListener.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/editor/contextualListener.js b/src/app/editor/contextualListener.js
index aa3292414b..6f5363eb09 100644
--- a/src/app/editor/contextualListener.js
+++ b/src/app/editor/contextualListener.js
@@ -67,10 +67,10 @@ class ContextualListener {
     this.currentFile = file
     if (compilationResult && compilationResult.data && compilationResult.data.sources[file]) {
       var nodes = this.sourceMappingDecoder.nodesAtPosition(null, cursorPosition, compilationResult.data.sources[file])
-      this.event.trigger('contextChanged', [nodes])
       if (nodes && nodes.length && nodes[nodes.length - 1]) {
         this._highlightExpressions(nodes[nodes.length - 1], compilationResult)
       }
+      this.event.trigger('contextChanged', [nodes])
     }
   }
 

From 3998209c6ec9a51a7416e48fce8e869738626b26 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 6 Dec 2017 12:02:54 +0100
Subject: [PATCH 10/11] add nodeId to the hightlight

---
 src/app/editor/contextualListener.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/editor/contextualListener.js b/src/app/editor/contextualListener.js
index 6f5363eb09..914d16bcb8 100644
--- a/src/app/editor/contextualListener.js
+++ b/src/app/editor/contextualListener.js
@@ -99,7 +99,7 @@ class ContextualListener {
     var position = this.sourceMappingDecoder.decode(node.src)
     var eventId = this._api.highlight(position, node)
     if (eventId) {
-      this._activeHighlights.push({ eventId, position, fileTarget: this._api.getSourceName(position.file) })
+      this._activeHighlights.push({ eventId, position, fileTarget: this._api.getSourceName(position.file), nodeId: node.id })
     }
   }
 

From 7eb2fd4814c9439b8aa70dea1de4809b7cdfd6e5 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 6 Dec 2017 12:09:08 +0100
Subject: [PATCH 11/11] simplify Jump next/previous

---
 src/app/editor/contextView.js | 65 ++++++++++++++---------------------
 1 file changed, 26 insertions(+), 39 deletions(-)

diff --git a/src/app/editor/contextView.js b/src/app/editor/contextView.js
index 11dbc0519d..9622a5bc13 100644
--- a/src/app/editor/contextView.js
+++ b/src/app/editor/contextView.js
@@ -59,6 +59,7 @@ class ContextView {
     this._nodes
     this._current
     this.sourceMappingDecoder = new SourceMappingDecoder()
+    this.previousElement = null
     event.contextualListener.register('contextChanged', nodes => {
       this._nodes = nodes
       this.update()
@@ -98,7 +99,7 @@ class ContextView {
   }
 
   _renderTarget () {
-    this._current = null
+    var previous = this._current
     if (this._nodes && this._nodes.length) {
       var last = this._nodes[this._nodes.length - 1]
       if (isDefinition(last)) {
@@ -107,64 +108,50 @@ class ContextView {
         var target = this._api.contextualListener.declarationOf(last)
         if (target) {
           this._current = target
+        } else {
+          this._current = last
         }
       }
     }
-    return this._render(this._current)
+    if (!this._current || !previous || previous.id !== this._current.id) {
+      this.previousElement = this._render(this._current, last)
+    }
+    return this.previousElement
   }
 
-  _render (node) {
+  _render (node, nodeAtCursorPosition) {
     if (!node) return yo`<div></div>`
     var self = this
     var references = this._api.contextualListener.referencesOf(node)
     var type = node.attributes.type ? node.attributes.type : node.name
     references = `${references ? references.length : '0'} reference(s)`
 
-    function jumpTo () {
-      if (node && node.src) {
-        var position = self.sourceMappingDecoder.decode(node.src)
-        if (position) {
-          self._api.jumpTo(position)
-        }
+    var ref = 0
+    var nodes = self._api.contextualListener.getActiveHighlights()
+    for (var k in nodes) {
+      if (nodeAtCursorPosition.id === nodes[k].nodeId) {
+        ref = k
+        break
       }
     }
 
     // JUMP BETWEEN REFERENCES
     function jump (e) {
-      var nodes = self._api.contextualListener.getActiveHighlights()
-      var searchTerm = node.attributes.name
-      var currentAction = e.target.dataset.action
-
-      if (currentAction === 'next') {
-        next(searchTerm, nodes, currentAction)
-      } else if (currentAction === 'previous') {
-        previous(searchTerm, nodes, currentAction)
-      }
-
-      self.refName = searchTerm
-      self.action = currentAction
-    }
-
-    function next (searchTerm, nodes, currentAction) {
-      if (searchTerm !== self.refName) self.ref = 0
-      if (currentAction !== self.action) self.ref = (nodes.length - 1) - self.ref // adapting self.ref to switching between previous() and next()
-      self.ref = (self.ref + 1) % nodes.length
-      self._api.jumpTo(getPos(nodes, self.ref))
-    }
-
-    function previous (searchTerm, nodes, currentAction) {
-      if (searchTerm !== self.refName) self.ref = nodes.length - 1
-      if (currentAction !== self.action) self.ref = (nodes.length - 1) - self.ref // adapting self.ref to switching between previous() and next()
-      self.ref = (self.ref + 1) % nodes.length
-      self._api.jumpTo(getPos(nodes, nodes.length - 1 - self.ref))
+      e.target.dataset.action === 'next' ? ref++ : ref--
+      if (ref < 0) ref = nodes.length - 1
+      if (ref >= nodes.length) ref = 0
+      self._api.jumpTo(nodes[ref].position)
     }
 
-    function getPos (nodes, k) {
-      var i = (k + (nodes.length - 1)) % nodes.length // to get to nodes[0] position, jumpTo function needs nodes[node.length-1], for nodes[1], jumpTo(nodes[0].position) etc.
-      return nodes[i].position
+    function jumpTo () {
+      if (node && node.src) {
+        var position = self.sourceMappingDecoder.decode(node.src)
+        if (position) {
+          self._api.jumpTo(position)
+        }
+      }
     }
 
-
     return yo`<div class=${css.line}>
       <div title=${type} class=${css.type}>${type}</div>
       <div title=${node.attributes.name} class=${css.name}>${node.attributes.name}</div>