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')