Trigger load more event

apps/remix-ide/src/app/tabs/debugger/debuggerUI/VmDebugger.js

@@ -82,10 +82,11 @@ function VmDebugger (vmDebuggerLogic) {
   this.vmDebuggerLogic.event.register('solidityStateMessage', this.solidityState.setMessage.bind(this.solidityState))
   this.vmDebuggerLogic.event.register('solidityStateUpdating', this.solidityState.setUpdating.bind(this.solidityState))
 
-  this.solidityLocals = new SolidityLocals()
+  this.solidityLocals = new SolidityLocals(vmDebuggerLogic)
   this.vmDebuggerLogic.event.register('solidityLocals', this.solidityLocals.update.bind(this.solidityLocals))
   this.vmDebuggerLogic.event.register('solidityLocalsMessage', this.solidityLocals.setMessage.bind(this.solidityLocals))
   this.vmDebuggerLogic.event.register('solidityLocalsUpdating', this.solidityLocals.setUpdating.bind(this.solidityLocals))
+  this.vmDebuggerLogic.event.register('solidityLocalsLoadMoreCompleted', this.solidityLocals.loadMore.bind(this.solidityLocals))
 
   this.returnValuesPanel = new DropdownPanel('Return Value', {json: true})
   this.returnValuesPanel.data = {}

apps/remix-ide/src/app/tabs/debugger/debuggerUI/vmDebugger/SolidityLocals.js

@@ -6,18 +6,30 @@ var yo = require('yo-yo')
 
 class SolidityLocals {
 
-  constructor (_parent, _traceManager, _internalTreeCall) {
+  constructor (vmDebuggerLogic) {
     this.event = new EventManager()
     this.basicPanel = new DropdownPanel('Solidity Locals', {
       json: true,
       formatSelf: solidityTypeFormatter.formatSelf,
-      extractData: solidityTypeFormatter.extractData
+      extractData: solidityTypeFormatter.extractData,
+      loadMore: (cursor) => {
+        console.log('cursor: ', cursor)
+        vmDebuggerLogic.event.trigger('solidityLocalsLoadMore', [cursor])
+      }
     })
     this.view
+    this._data = null
   }
 
   update (data) {
-    this.basicPanel.update(data)
+    this._data = data
+    this.basicPanel.update(this._data)
+  }
+
+  loadMore (data) {
+    const mergedLocals = this.mergeLocals(data, this._data)
+
+    this.basicPanel.update(mergedLocals)
   }
 
   setMessage (message) {
@@ -28,6 +40,12 @@ class SolidityLocals {
     this.basicPanel.setUpdating()
   }
 
+  mergeLocals (locals1, locals2) {
+    console.log('locals1: ', locals1)
+    console.log('locals2: ', locals2)
+    return {}
+  }
+
   render () {
     this.view = yo`<div id='soliditylocals' data-id="solidityLocals">${this.basicPanel.render()}</div>`
     return this.view

apps/remix-ide/src/app/tabs/debugger/debuggerUI/vmDebugger/utils/SolidityTypeFormatter.js

@@ -34,6 +34,8 @@ function extractData (item, parent, key) {
     })
     ret.isArray = true
     ret.self = parent.isArray ? '' : item.type
+    ret.cursor = item.cursor
+    ret.hasNext = item.hasNext
   } else if (item.type.indexOf('struct') === 0) {
     ret.children = Object.keys((item.value || {})).map(function (key) {
       return {key: key, value: item.value[key]}
@@ -51,6 +53,7 @@ function extractData (item, parent, key) {
     ret.self = item.value
     ret.type = item.type
   }
+  if(ret.hasNext) console.log('return value: ', ret)
   return ret
 }
 

apps/remix-ide/src/app/ui/TreeView.js

@@ -34,6 +34,9 @@ var css = csjs`
   .label_value {
     min-width: 10%;
   }
+  .cursor_pointer {
+    cursor: pointer;
+  }
 `
 
 var EventManager = require('../../lib/events')
@@ -49,6 +52,7 @@ class TreeView {
     this.event = new EventManager()
     this.extractData = opts.extractData || this.extractDataDefault
     this.formatSelf = opts.formatSelf || this.formatSelfDefault
+    this.loadMore = opts.loadMore
     this.view = null
     this.expandPath = []
   }
@@ -111,6 +115,9 @@ class TreeView {
         self.event.trigger('nodeRightClick', [keyPath, data, label, event])
       }
       li.appendChild(list)
+      if (data.hasNext) {
+        list.appendChild(yo`<li><span class="w-100 text-primary ${css.cursor_pointer}" onclick="${() => self.loadMore(data.cursor)}">Load more</span></li>`)
+      }
     } else {
       caret.style.visibility = 'hidden'
       label.oncontextmenu = function (event) {

libs/remix-debug/src/debugger/VmDebugger.js

@@ -228,6 +228,7 @@ class VmDebuggerLogic {
 
   listenToSolidityLocalsEvents () {
     this.event.register('sourceLocationChanged', this.debuggerSolidityLocals.init.bind(this.debuggerSolidityLocals))
+    this.event.register('solidityLocalsLoadMore', this.debuggerSolidityLocals.decodeMore.bind(this.debuggerSolidityLocals))
     this.debuggerSolidityLocals.event.register('solidityLocals', (state) => {
       this.event.trigger('solidityLocals', [state])
     })

libs/remix-debug/src/debugger/solidityLocals.js

@@ -15,6 +15,7 @@ class DebuggerSolidityLocals {
   }
 
   init (sourceLocation) {
+    this._sourceLocation = sourceLocation
     var decodeTimeout = null
     if (!this.storageResolver) {
       return this.event.trigger('solidityLocalsMessage', ['storage not ready'])
@@ -28,7 +29,7 @@ class DebuggerSolidityLocals {
     }, 500)
   }
 
-  decode (sourceLocation) {
+  decode (sourceLocation, cursor) {
     const self = this
     this.event.trigger('solidityLocalsMessage', [''])
     this.traceManager.waterfall([
@@ -65,12 +66,18 @@ class DebuggerSolidityLocals {
         var memory = result[1].value
         try {
           var storageViewer = new StorageViewer({ stepIndex: this.stepManager.currentStepIndex, tx: this.tx, address: result[2].value }, this.storageResolver, this.traceManager)
-          localDecoder.solidityLocals(this.stepManager.currentStepIndex, this.internalTreeCall, stack, memory, storageViewer, sourceLocation).then((locals) => {
-            if (!locals.error) {
-              this.event.trigger('solidityLocals', [locals])
-            }
-            if (!Object.keys(locals).length) {
-              this.event.trigger('solidityLocalsMessage', ['no locals'])
+          localDecoder.solidityLocals(this.stepManager.currentStepIndex, this.internalTreeCall, stack, memory, storageViewer, sourceLocation, cursor).then((locals) => {
+            if (!cursor) {
+              if (!locals.error) {
+                this.event.trigger('solidityLocals', [locals])
+              }
+              if (!Object.keys(locals).length) {
+                this.event.trigger('solidityLocalsMessage', ['no locals'])
+              }
+            } else {
+              if (!locals.error) {
+                this.event.trigger('solidityLocalsLoadMoreCompleted', [locals])
+              }
             }
           })
         } catch (e) {
@@ -79,6 +86,17 @@ class DebuggerSolidityLocals {
       })
   }
 
+  decodeMore () {
+    console.log('called and works!')
+    let decodeTimeout = null
+    if (!this.storageResolver) return this.event.trigger('solidityLocalsMessage', ['storage not ready'])
+    if (decodeTimeout) window.clearTimeout(decodeTimeout)
+    this.event.trigger('solidityLocalsUpdating')
+    decodeTimeout = setTimeout(() => {
+      this.decode(this._sourceLocation)
+    }, 500)
+  }
+
 }
 
 module.exports = DebuggerSolidityLocals

libs/remix-debug/src/solidity-decoder/localDecoder.js

 'use strict'
 
-async function solidityLocals (vmtraceIndex, internalTreeCall, stack, memory, storageResolver, currentSourceLocation) {
+async function solidityLocals (vmtraceIndex, internalTreeCall, stack, memory, storageResolver, currentSourceLocation, cursor) {
   const scope = internalTreeCall.findScope(vmtraceIndex)
   if (!scope) {
     const error = { 'message': 'Can\'t display locals. reason: compilation result might not have been provided' }
@@ -18,7 +18,7 @@ async function solidityLocals (vmtraceIndex, internalTreeCall, stack, memory, st
         anonymousIncr++
       }
       try {
-        locals[name] = await variable.type.decodeFromStack(variable.stackDepth, stack, memory, storageResolver)
+        locals[name] = await variable.type.decodeFromStack(variable.stackDepth, stack, memory, storageResolver, cursor)
       } catch (e) {
         console.log(e)
         locals[name] = '<decoding failed - ' + e.message + '>'

libs/remix-debug/src/solidity-decoder/types/ArrayType.js

@@ -89,7 +89,7 @@ class ArrayType extends RefType {
     let limit = length
     if (!skip) skip = 0
     if (skip) offset = offset + (32 * skip)
-    if ((length - skip) > 500) limit = 500
+    if ((length - skip) > 100) limit = 100
     for (var k = 0; k < limit; k++) {
       var contentOffset = offset
       ret.push(this.underlyingType.decodeFromMemory(contentOffset, memory))

libs/remix-debug/src/solidity-decoder/types/RefType.js

@@ -19,7 +19,7 @@ class RefType {
     * @param {Object} - storageResolver
     * @return {Object} decoded value
     */
-  async decodeFromStack (stackDepth, stack, memory, storageResolver) {
+  async decodeFromStack (stackDepth, stack, memory, storageResolver, cursor) {
     if (stack.length - 1 < stackDepth) {
       return {error: '<decoding failed - stack underflow ' + stackDepth + '>', type: this.typeName}
     }
@@ -34,7 +34,7 @@ class RefType {
       }
     } else if (this.isInMemory()) {
       offset = parseInt(offset, 16)
-      return this.decodeFromMemoryInternal(offset, memory)
+      return this.decodeFromMemoryInternal(offset, memory, cursor)
     } else {
       return {error: '<decoding failed - no decoder for ' + this.location + '>', type: this.typeName}
     }