Merge pull request #2922 from ethereum/add_function_calls_panel

Debugger: layout update

src/app/compiler/compiler-sourceVerifier-fetchAndCompile.js

@@ -72,7 +72,7 @@ export default class FetchAndCompile extends Plugin {
     name === 'main' ? 'mainnet' : name // source-verifier api expect "mainnet" and not "main"
     let data
     try {
-      data = await this.call('sourcify', 'fetchByNetwork', contractAddress, name.toLowerCase())
+      data = await this.call('source-verification', 'fetchByNetwork', contractAddress, name.toLowerCase())
     } catch (e) {
       setTimeout(_ => this.emit('notFound', contractAddress), 0) // plugin framework returns a time out error although it actually didn't find the source...
       this.unresolvedAddresses.push(contractAddress)

src/app/tabs/debugger-tab.js

@@ -64,7 +64,7 @@ class DebuggerTab extends ViewPlugin {
       }
     )
 
-    this.call('manager', 'activatePlugin', 'sourcify')
+    this.call('manager', 'activatePlugin', 'source-verification')
     // this.call('manager', 'activatePlugin', 'udapp')
 
     return this.el

src/app/tabs/debugger/debuggerUI/VmDebugger.js

@@ -16,11 +16,8 @@ var FullStoragesChangesPanel = require('./vmDebugger/FullStoragesChanges')
 var DropdownPanel = require('./vmDebugger/DropdownPanel')
 
 var css = csjs`
-  .asmCode {
-    width: 100%;
-  }
   .stepDetail {
-    width: 100%;
+    line-height: 20%;
   }
   .vmheadView {
     margin-top:10px;
@@ -127,19 +124,29 @@ function VmDebugger (vmDebuggerLogic) {
 
   this.vmDebuggerLogic.event.register('newCallTree', () => {
     if (!self.view) return
+    self.functionPanel.basicPanel.show()
     self.solidityLocals.basicPanel.show()
     self.solidityState.basicPanel.show()
+    self.solidityPanel.hidden = false
   })
 
   this.vmDebuggerLogic.start()
 }
 
 VmDebugger.prototype.renderHead = function () {
+  this.solidityPanel = yo`
+    <div class="${css.solidityPanel} column w-100" hidden>
+      ${this.functionPanel.render()}
+      ${this.solidityLocals.render()}
+      ${this.solidityState.render()}
+    </div>
+  `
   const headView = yo`
     <div id="vmheadView" class="${css.vmheadView} container">
       <div class="row" >
-        <div class="${css.asmCode} column">${this.asmCode.render()}</div>
-        <div class="${css.stepDetail} column">${this.stepDetail.render()}</div>
+        ${this.solidityPanel}
+        <div class="column w-100">${this.asmCode.render()}</div>
+        <div class="${css.stepDetail} column w-100">${this.stepDetail.render()}</div>
       </div>
     </div>
   `
@@ -158,10 +165,7 @@ VmDebugger.prototype.render = function () {
   const view = yo`
     <div id="vmdebugger" class="pl-2">
       <div>
-        ${this.solidityLocals.render()}
-        ${this.solidityState.render()}
         ${this.stackPanel.render()}
-        ${this.functionPanel.render()}
         ${this.memoryPanel.render()}
         ${this.storagePanel.render()}
         ${this.callstackPanel.render()}

src/app/tabs/debugger/debuggerUI/vmDebugger/CodeListView.js

@@ -8,7 +8,7 @@ var csjs = require('csjs-inject')
 var css = csjs`
   .instructions {
     overflow-y: scroll;
-    max-height: 150px;
+    max-height: 100px;
   }
 `
 function CodeListView () {

src/app/tabs/debugger/debuggerUI/vmDebugger/FunctionPanel.js

@@ -3,7 +3,7 @@ var DropdownPanel = require('./DropdownPanel')
 var yo = require('yo-yo')
 
 function FunctionPanel () {
-  this.basicPanel = new DropdownPanel('Function', {json: true, displayContentOnly: false})
+  this.basicPanel = new DropdownPanel('Function Stack', {json: true, displayContentOnly: false})
 }
 
 FunctionPanel.prototype.update = function (calldata) {

src/app/ui/landing-page/landing-page.js

@@ -163,8 +163,8 @@ export class LandingPage extends ViewPlugin {
     }
     const startSourceVerify = () => {
       this.appManager.ensureActivated('solidity')
-      this.appManager.ensureActivated('sourcify')
-      this.verticalIcons.select('sourcify')
+      this.appManager.ensureActivated('source-verification')
+      this.verticalIcons.select('source-verification')
     }
     const startPluginManager = () => {
       this.appManager.ensureActivated('pluginManager')