From 1f38c43e4b083cdd8c7ed0a90b20a60162498e3b Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Mon, 29 Jun 2020 23:45:16 +0200
Subject: [PATCH] layout update

---
 .../app/tabs/debugger/debuggerUI/VmDebugger.js  | 17 ++++++++++++++---
 .../debuggerUI/vmDebugger/CodeListView.js       |  2 +-
 .../debuggerUI/vmDebugger/FunctionPanel.js      |  2 +-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/remix-ide/src/app/tabs/debugger/debuggerUI/VmDebugger.js b/apps/remix-ide/src/app/tabs/debugger/debuggerUI/VmDebugger.js
index 3206e7f0f5..bdb5870ad1 100644
--- a/apps/remix-ide/src/app/tabs/debugger/debuggerUI/VmDebugger.js
+++ b/apps/remix-ide/src/app/tabs/debugger/debuggerUI/VmDebugger.js
@@ -16,11 +16,15 @@ var FullStoragesChangesPanel = require('./vmDebugger/FullStoragesChanges')
 var DropdownPanel = require('./vmDebugger/DropdownPanel')
 
 var css = csjs`
+  .solidityPanel {
+    width: 100%;
+  }
   .asmCode {
     width: 100%;
   }
   .stepDetail {
     width: 100%;
+    line-height: 2O%;
   }
   .vmheadView {
     margin-top:10px;
@@ -127,17 +131,27 @@ 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" hidden>
+          ${this.functionPanel.render()}
+          ${this.solidityLocals.render()}
+          ${this.solidityState.render()}
+    </div>
+  `
   const headView = yo`
     <div id="vmheadView" class="${css.vmheadView} container">
       <div class="row" >
+        ${this.solidityPanel}
         <div class="${css.asmCode} column">${this.asmCode.render()}</div>
         <div class="${css.stepDetail} column">${this.stepDetail.render()}</div>
       </div>
@@ -158,10 +172,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()}
diff --git a/apps/remix-ide/src/app/tabs/debugger/debuggerUI/vmDebugger/CodeListView.js b/apps/remix-ide/src/app/tabs/debugger/debuggerUI/vmDebugger/CodeListView.js
index 26ccbc3871..8723d71560 100644
--- a/apps/remix-ide/src/app/tabs/debugger/debuggerUI/vmDebugger/CodeListView.js
+++ b/apps/remix-ide/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 () {
diff --git a/src/app/tabs/debugger/debuggerUI/vmDebugger/FunctionPanel.js b/src/app/tabs/debugger/debuggerUI/vmDebugger/FunctionPanel.js
index 16fc59db75..6c9a94118d 100644
--- a/src/app/tabs/debugger/debuggerUI/vmDebugger/FunctionPanel.js
+++ b/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) {