show inline gas cost

apps/debugger/src/app/debugger-api.ts

@@ -1,7 +1,13 @@
 import Web3 from 'web3'
 import remixDebug, { TransactionDebugger as Debugger } from '@remix-project/remix-debug'
+<<<<<<< HEAD
 import { CompilerAbstract } from '@remix-project/remix-solidity'
 
+=======
+import { CompilationOutput, Sources } from '@remix-ui/debugger-ui'
+import { lineText } from '@remix-ui/editor'
+import type { CompilationResult } from '@remix-project/remix-solidity-ts'
+>>>>>>> show inline gas cost
 
 export const DebuggerApiMixin = (Base) => class extends Base {
 
@@ -39,11 +45,25 @@ export const DebuggerApiMixin = (Base) => class extends Base {
 
   async discardHighlight () {
     await this.call('editor', 'discardHighlight')
+    await this.call('editor', 'discardLineTexts' as any)
   }
 
-  async highlight (lineColumnPos, path, rawLocation) {
+  async highlight (lineColumnPos, path, rawLocation, stepDetail) {
     await this.call('editor', 'highlight', lineColumnPos, path, '', { focus: true })
-    this.call('')
+    const label = `${stepDetail.op} - ${stepDetail.gasCost} gas - ${stepDetail.gas} gas left`
+    const linetext: lineText = {
+        content: label,
+        position: lineColumnPos,
+        hide: false,
+        className: 'text-muted small',
+        afterContentClassName: 'text-muted small fas fa-gas-pump pl-4',
+        from: 'debugger',
+        hoverMessage: [{
+            value: label,
+        },
+        ],
+    }
+    await this.call('editor', 'addLineText' as any, linetext, path)
   }
 
   async getFile (path) {

libs/remix-debug/src/debugger/debugger.ts

@@ -76,8 +76,10 @@ export class Debugger {
         return
       }
 
-      this.debugger.callTree.getValidSourceLocationFromVMTraceIndexFromCache(address, index, compilationResultForAddress.data.contracts).then(async (rawLocation) => {
+      this.debugger.callTree.getValidSourceLocationFromVMTraceIndexFromCache(address, index, compilationResultForAddress.data.contracts).then(async (rawLocationAndOpcode) => {
         if (compilationResultForAddress && compilationResultForAddress.data) {
+          const rawLocation = rawLocationAndOpcode.sourceLocation
+          const stepDetail = rawLocationAndOpcode.stepDetail
           const generatedSources = this.debugger.callTree.sourceLocationTracker.getGeneratedSourcesFromAddress(address)
           const astSources = Object.assign({}, compilationResultForAddress.data.sources)
           const sources = Object.assign({}, compilationResultForAddress.source.sources)
@@ -88,7 +90,7 @@ export class Debugger {
             }
           }
           const lineColumnPos = await this.offsetToLineColumnConverter.offsetToLineColumn(rawLocation, rawLocation.file, sources, astSources)
-          this.event.trigger('newSourceLocation', [lineColumnPos, rawLocation, generatedSources, address])
+          this.event.trigger('newSourceLocation', [lineColumnPos, rawLocation, generatedSources, address, stepDetail])
           this.vmDebuggerLogic.event.trigger('sourceLocationChanged', [rawLocation])
         } else {
           this.event.trigger('newSourceLocation', [null])

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

@@ -222,7 +222,7 @@ async function buildTree (tree, step, scopeId, isExternalCall, isCreation) {
       return { outStep: step, error: 'InternalCallTree - No source Location. ' + step }
     }
     const stepDetail: StepDetail = tree.traceManager.trace[step]
-    tree.locationAndOpcodePerVMTraceIndex[step] = { ...sourceLocation, ...stepDetail }
+    tree.locationAndOpcodePerVMTraceIndex[step] = { sourceLocation, stepDetail }
     console.log('locationAndOpcodePerVMTraceIndex', stepDetail)
     const isCallInstrn = isCallInstruction(stepDetail)
     const isCreateInstrn = isCreateInstruction(stepDetail)

libs/remix-debug/src/source/sourceLocationTracker.ts

@@ -96,17 +96,23 @@ export class SourceLocationTracker {
 
   async getValidSourceLocationFromVMTraceIndexFromCache (address: string, vmtraceStepIndex: number, contracts: any, cache: Map<number, any>) {
     const amountOfSources = this.getTotalAmountOfSources(address, contracts)
-    let map: Record<string, number> = { file: -1 }
+    let map: any = { file: -1 }
     /*
       (map.file === -1) this indicates that it isn't associated with a known source code
       (map.file > amountOfSources - 1) this indicates the current file index exceed the total number of files.
                                               this happens when generated sources should not be considered.
     */
+    const originStep = cache[vmtraceStepIndex]
+    const nextStep = cache[vmtraceStepIndex + 1]
+    if (nextStep && originStep) {
+      originStep.stepDetail.gasCost = originStep.stepDetail.gas - nextStep.stepDetail.gas
+    }
     while (vmtraceStepIndex >= 0 && (map.file === -1 || map.file > amountOfSources - 1)) {
-      map = cache[vmtraceStepIndex]
+      map = cache[vmtraceStepIndex].sourceLocation
       vmtraceStepIndex = vmtraceStepIndex - 1
+      originStep.sourceLocation = map
     }
-    return map
+    return originStep
   }
 
   clearCache () {

libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx

@@ -121,7 +121,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       })
     })
 
-    debuggerInstance.event.register('newSourceLocation', async (lineColumnPos, rawLocation, generatedSources, address) => {
+    debuggerInstance.event.register('newSourceLocation', async (lineColumnPos, rawLocation, generatedSources, address, stepDetail) => {
       if (!lineColumnPos) {
         await debuggerModule.discardHighlight()
         setState(prevState => {
@@ -158,7 +158,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
             return { ...prevState, sourceLocationStatus: '' }
           })
           await debuggerModule.discardHighlight()
-          await debuggerModule.highlight(lineColumnPos, path, rawLocation)
+          await debuggerModule.highlight(lineColumnPos, path, rawLocation, stepDetail)
         }
       }
     })

libs/remix-ui/debugger-ui/src/lib/idebugger-api.ts

@@ -44,7 +44,7 @@ export interface IDebuggerApi {
     onEditorContentChanged: (listener: onEditorContentChanged) => void
     onEnvChanged: (listener: onEnvChangedListener) => void
     discardHighlight: () => Promise<void>
-    highlight: (lineColumnPos: LineColumnLocation, path: string, rawLocation: any) => Promise<void>
+    highlight: (lineColumnPos: LineColumnLocation, path: string, rawLocation: any, stepDetail: any) => Promise<void>
     fetchContractAndCompile: (address: string, currentReceipt: TransactionReceipt) => Promise<CompilerAbstract>
     getFile: (path: string) => Promise<string>
     setFile: (path: string, content: string) => Promise<void>