show state variable

apps/remix-ide/src/app/tabs/debugger-tab.js

@@ -10,7 +10,7 @@ const css = require('./styles/debugger-tab-styles')
 const profile = {
   name: 'debugger',
   displayName: 'Debugger',
-  methods: ['debug', 'getTrace', 'decodeVariable'],
+  methods: ['debug', 'getTrace', 'decodeLocalVariable', 'decodeStateVariable'],
   events: [],
   icon: 'assets/img/debuggerLogo.webp',
   description: 'Debug transactions',
@@ -66,8 +66,13 @@ export class DebuggerTab extends DebuggerApiMixin(ViewPlugin) {
     }
   }
 
-  async decodeVariable (variableId) {
+  async decodeLocalVariable (variableId) {
     if (!this.debuggerBackend) return null
     return await this.debuggerBackend.debugger.decodeLocalVariableByIdAtCurrentStep(this.debuggerBackend.step_manager.currentStepIndex, variableId)
   }
+
+  async decodeStateVariable (variableId) {
+    if (!this.debuggerBackend) return null
+    return await this.debuggerBackend.debugger.decodeStateVariableByIdAtCurrentStep(this.debuggerBackend.step_manager.currentStepIndex, variableId)
+  }
 }

libs/remix-debug/src/Ethdebugger.ts

@@ -7,6 +7,7 @@ import { CodeManager } from './code/codeManager'
 import { contractCreationToken } from './trace/traceHelper'
 import { EventManager } from './eventManager'
 import { SolidityProxy, stateDecoder, localDecoder, InternalCallTree } from './solidity-decoder'
+import { extractStateVariables } from './solidity-decoder/stateDecoder'
 
 /**
   * Ethdebugger is a wrapper around a few classes that helps debugging a transaction
@@ -111,6 +112,16 @@ export class Ethdebugger {
     return await variable.type.decodeFromStack(variable.stackDepth, stack, memory, storageViewer, calldata, null, variable)
   }
 
+  async decodeStateVariableByIdAtCurrentStep (step: number, id: number) {
+    const stateVars = await this.solidityProxy.extractStateVariablesAt(step)
+    const variable = stateVars.filter((el) => el.variable.id === id)
+    if (variable && variable.length) {
+      const state = await this.decodeStateAt(step, variable)
+      return state[variable[0].name]
+    }
+    return { value: '' }
+  }
+
   async decodeLocalsAt (step, sourceLocation, callback) {
     try {
       const stack = this.traceManager.getStackAt(step)
@@ -137,11 +148,13 @@ export class Ethdebugger {
     return this.solidityProxy.extractStateVariablesAt(step)
   }
 
-  async decodeStateAt (step, stateVars, callback) {
+  async decodeStateAt (step, stateVars, callback?) {
     try {
+      callback = callback || (() => {})
       const address = this.traceManager.getCurrentCalledAddressAt(step)
       const storageViewer = new StorageViewer({ stepIndex: step, tx: this.tx, address: address }, this.storageResolver, this.traceManager)
       const result = await stateDecoder.decodeState(stateVars, storageViewer)
+      callback(result)
       return result
     } catch (error) {
       callback(error)

libs/remix-debug/src/solidity-decoder/decodeInfo.ts

@@ -354,7 +354,8 @@ function computeOffsets (types, stateDefinitions, contractName, location) {
       storagelocation: {
         offset: !hasStorageSlots ? 0 : storagelocation.offset,
         slot: !hasStorageSlots ? 0 : storagelocation.slot
-      }
+      },
+      variable
     })
     if (hasStorageSlots) {
       if (type.storageSlots === 1 && storagelocation.offset + type.storageBytes <= 32) {

libs/remix-ui/editor/src/lib/providers/hoverProvider.ts

@@ -147,7 +147,16 @@ export class RemixHoverProvider implements languages.HoverProvider {
             // getScope(nodeAtPosition)
 
             try {
-                const decodedVar = await this.props.plugin.call('debugger', 'decodeVariable', nodeAtPosition.id)
+                const decodedVar = await this.props.plugin.call('debugger', 'decodeLocalVariable', nodeAtPosition.id)
+                if (decodedVar !== null) {
+                    contents.push({
+                        value: JSON.stringify(decodedVar.value, null, '\t')
+                    })
+                }
+            } catch (e) {}
+
+            try {
+                const decodedVar = await this.props.plugin.call('debugger', 'decodeStateVariable', nodeAtPosition.id)
                 if (decodedVar !== null) {
                     contents.push({
                         value: JSON.stringify(decodedVar.value, null, '\t')