Merge pull request #1467 from ethereum/debuggerSmallUIFixes

Small reorg of debugger panel

src/app/debugger/remix-debugger/src/ui/CodeListView.js

@@ -11,9 +11,8 @@ var styles = styleGuide.chooser()
 var css = csjs`
   .instructions {
     ${styles.rightPanel.debuggerTab.box_Debugger}
-    width: 75%;
     overflow-y: scroll;
-    max-height: 250px;
+    max-height: 100px;
   }
 `
 function CodeListView (_parent, _codeManager) {
@@ -24,7 +23,7 @@ function CodeListView (_parent, _codeManager) {
   this.address
   this.codeView
   this.itemSelected
-  this.basicPanel = new DropdownPanel('Instructions', {json: false})
+  this.basicPanel = new DropdownPanel('Instructions', {json: false, displayContentOnly: true})
   this.basicPanel.event.register('hide', () => {
     this.event.trigger('hide', [])
   })

src/app/debugger/remix-debugger/src/ui/DropdownPanel.js

@@ -61,6 +61,7 @@ function DropdownPanel (_name, _opts) {
   this.name = _name
   this.header = ''
   this.json = _opts.json
+  this.displayContentOnly = _opts.displayContentOnly
   if (this.json) {
     this.treeView = new TreeView(_opts)
   }
@@ -97,8 +98,10 @@ DropdownPanel.prototype.update = function (_data, _header) {
     this.view.querySelector('.dropdownpanel .dropdowncontent').style.display = 'block'
     this.view.querySelector('.dropdownpanel .dropdowncontent').style.color = styles.appProperties.mainText_Color
     this.view.querySelector('.dropdownpanel .dropdownrawcontent').innerText = JSON.stringify(_data, null, '\t')
-    this.view.querySelector('.title div.btn').style.display = 'block'
+    if (!this.displayContentOnly) {
-    this.view.querySelector('.title span').innerText = _header || ' '
+      this.view.querySelector('.title div.btn').style.display = 'block'
+      this.view.querySelector('.title span').innerText = _header || ' '
+    }
     this.message('')
     if (this.json) {
       this.treeView.update(_data)
@@ -120,6 +123,18 @@ DropdownPanel.prototype.render = function (overridestyle) {
   }
   overridestyle === undefined ? {} : overridestyle
   var self = this
+  var title = !self.displayContentOnly ? yo`<div class="${css.title} title">
+      <div class="${css.icon} fa fa-caret-right" onclick=${function () { self.toggle() }} ></div>
+      <div class="${css.name}" onclick=${function () { self.toggle() }} >${this.name}</div><span class="${css.nameDetail}" onclick=${function () { self.toggle() }} ></span>
+      <div onclick=${function () { self.copyClipboard() }} title='raw' class="${css.eyeButton} btn fa fa-clipboard"></div>
+    </div>` : yo`<div></div>`
+
+  var contentNode = yo`<div class='dropdownpanel' style='display:none'>
+      <i class="${css.refresh} fa fa-refresh" aria-hidden="true"></i>
+      <div class='dropdowncontent'>${content}</div>
+      <div class='dropdownrawcontent' style='display:none'></div>
+      <div class='message' style='display:none'></div>
+    </div>`
   var view = yo`
     <div>
     <style>
@@ -133,21 +148,13 @@ DropdownPanel.prototype.render = function (overridestyle) {
         to {transform:rotate(359deg);}
       }
     </style>
-    <div class="${css.title} title">
+    ${title}
-      <div class="${css.icon} fa fa-caret-right" onclick=${function () { self.toggle() }} ></div>
+    ${contentNode}
-      <div class="${css.name}" onclick=${function () { self.toggle() }} >${this.name}</div><span class="${css.nameDetail}" onclick=${function () { self.toggle() }} ></span>
-      <div onclick=${function () { self.copyClipboard() }} title='raw' class="${css.eyeButton} btn fa fa-clipboard"></div>
-    </div>
-    <div class='dropdownpanel' style='display:none'>
-      <i class="${css.refresh} fa fa-refresh" aria-hidden="true"></i>
-      <div class='dropdowncontent'>${content}</div>
-      <div class='dropdownrawcontent' style='display:none'></div>
-      <div class='message' style='display:none'></div>
-    </div>
     </div>`
   if (!this.view) {
     this.view = view
   }
+  if (self.displayContentOnly) contentNode.style.display = 'block'
   return view
 }
 
@@ -171,7 +178,7 @@ DropdownPanel.prototype.toggle = function () {
 }
 
 DropdownPanel.prototype.hide = function () {
-  if (this.view) {
+  if (this.view && !this.displayContentOnly) {
     var caret = this.view.querySelector('.title').firstElementChild
     var el = this.view.querySelector('.dropdownpanel')
     el.style.display = 'none'
@@ -181,7 +188,7 @@ DropdownPanel.prototype.hide = function () {
 }
 
 DropdownPanel.prototype.show = function () {
-  if (this.view) {
+  if (this.view && !this.displayContentOnly) {
     var caret = this.view.querySelector('.title').firstElementChild
     var el = this.view.querySelector('.dropdownpanel')
     el.style.display = ''

src/app/debugger/remix-debugger/src/ui/Ethdebugger.js

@@ -133,6 +133,7 @@ Ethdebugger.prototype.render = function () {
   var view = yo`<div>
         <div class="${css.innerShift}">
           ${this.txBrowser.render()}
+          ${this.vmDebugger.renderHead()}
           ${this.stepManager.render()}
         </div>
         <div class="${css.statusMessage}" >${this.statusMessage}</div>

src/app/debugger/remix-debugger/src/ui/SolidityLocals.js

@@ -49,6 +49,7 @@ class SolidityLocals {
 }
 
 function decode (self, sourceLocation) {
+  self.basicPanel.setMessage('')
   self.traceManager.waterfall([
     self.traceManager.getStackAt,
     self.traceManager.getMemoryAt,
@@ -68,6 +69,9 @@ function decode (self, sourceLocation) {
             if (!locals.error) {
               self.basicPanel.update(locals)
             }
+            if (!Object.keys(locals).length) {
+              self.basicPanel.setMessage('no locals')
+            }
           })
         } catch (e) {
           self.basicPanel.setMessage(e.message)

src/app/debugger/remix-debugger/src/ui/StackPanel.js

@@ -5,7 +5,7 @@ var yo = require('yo-yo')
 function StackPanel (_parent, _traceManager) {
   this.parent = _parent
   this.traceManager = _traceManager
-  this.basicPanel = new DropdownPanel('Stack', {json: true})
+  this.basicPanel = new DropdownPanel('Stack', {json: true, displayContentOnly: false})
   this.init()
 }
 

src/app/debugger/remix-debugger/src/ui/StepDetail.js

@@ -6,7 +6,7 @@ function StepDetail (_parent, _traceManager) {
   this.parent = _parent
   this.traceManager = _traceManager
 
-  this.basicPanel = new DropdownPanel('Step detail', {json: true})
+  this.basicPanel = new DropdownPanel('Step detail', {json: true, displayContentOnly: true})
 
   this.detail = initDetail()
   this.view

src/app/debugger/remix-debugger/src/ui/StepManager.js

@@ -33,13 +33,6 @@ function StepManager (_parent, _traceManager) {
   })
 
   this.parent.callTree.event.register('callTreeReady', () => {
-    this.solidityMode = true
-    this.parent.vmDebugger.asmCode.event.register('hide', () => {
-      this.solidityMode = this.parent.callTree.reducedTrace.length !== 0
-    })
-    this.parent.vmDebugger.asmCode.event.register('show', () => {
-      this.solidityMode = false
-    })
     if (this.parent.callTree.functionCallStack.length) {
       this.jumpTo(this.parent.callTree.functionCallStack[0])
     }

src/app/debugger/remix-debugger/src/ui/TxBrowser.js

@@ -4,7 +4,6 @@ var EventManager = remixLib.EventManager
 var traceHelper = remixLib.helpers.trace
 var yo = require('yo-yo')
 var init = remixLib.init
-var DropdownPanel = require('./DropdownPanel')
 var csjs = require('csjs-inject')
 var styleGuide = require('../../../../ui/styles-guide/theme-chooser')
 var styles = styleGuide.chooser()
@@ -39,9 +38,6 @@ var css = csjs`
   .txbutton:hover {
     color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
   }
-  .txinfo {
-    margin-top: 5px;
-  }
   .vmargin {
     margin-top: 10px;
     margin-bottom: 10px;
@@ -54,8 +50,6 @@ function TxBrowser (_parent) {
   this.txNumber
   this.view
   this.displayConnectionSetting = true
-  this.basicPanel = new DropdownPanel('Transaction', {json: true})
-  this.basicPanel.data = {}
   var self = this
   _parent.event.register('providerChanged', this, function (provider) {
     self.displayConnectionSetting = provider === 'INTERNAL'
@@ -74,8 +68,6 @@ function TxBrowser (_parent) {
 
 TxBrowser.prototype.setDefaultValues = function () {
   this.connectInfo = ''
-  this.basicPanel.update({})
-  this.basicPanel.hide()
   if (this.view) {
     yo.update(this.view, this.render())
   }
@@ -124,7 +116,6 @@ TxBrowser.prototype.update = function (error, tx) {
       this.view.querySelector('#error').innerHTML = 'Cannot find transaction with reference. Block number: ' + this.blockNumber + '. Transaction index/hash: ' + this.txNumber
     }
   }
-  this.basicPanel.update(info)
 }
 
 TxBrowser.prototype.updateWeb3Url = function (newhost) {
@@ -198,9 +189,6 @@ TxBrowser.prototype.render = function () {
           </div>
         </div>
         <span id='error'></span>
-        <div style=${css.txinfo} id='txinfo'>
-          ${this.basicPanel.render()}
-        </div>
       </div>`
   if (!this.view) {
     this.view = view

src/app/debugger/remix-debugger/src/ui/VmDebugger.js

@@ -1,4 +1,5 @@
 'use strict'
+var csjs = require('csjs-inject')
 var CodeListView = require('./CodeListView')
 var CalldataPanel = require('./CalldataPanel')
 var MemoryPanel = require('./MemoryPanel')
@@ -14,6 +15,16 @@ var remixCore = require('remix-core')
 var StorageResolver = remixCore.storage.StorageResolver
 var yo = require('yo-yo')
 
+var css = csjs`
+  .asmCode {
+    float: left;
+    width: 250px;
+  }
+  .stepDetail {
+    float: right;
+  }
+`
+
 function VmDebugger (_parent, _traceManager, _codeManager, _solidityProxy, _callTree) {
   this.asmCode = new CodeListView(_parent, _codeManager)
   this.stackPanel = new StackPanel(_parent, _traceManager)
@@ -50,33 +61,50 @@ function VmDebugger (_parent, _traceManager, _codeManager, _solidityProxy, _call
     self.solidityState.storageResolver = storageResolver
     self.solidityLocals.storageResolver = storageResolver
     self.fullStoragesChangesPanel.storageResolver = storageResolver
+    self.headView.style.display = 'block'
     self.view.style.display = 'block'
   })
   _parent.event.register('traceUnloaded', this, function () {
+    self.headView.style.display = 'none'
     self.view.style.display = 'none'
   })
   _parent.callTree.event.register('callTreeReady', () => {
+    self.asmCode.basicPanel.show()
     if (_parent.callTree.reducedTrace.length) {
       self.solidityLocals.basicPanel.show()
       self.solidityState.basicPanel.show()
-    } else {
-      self.asmCode.basicPanel.show()
     }
+    self.stackPanel.basicPanel.show()
+    self.storagePanel.basicPanel.show()
+    self.memoryPanel.basicPanel.show()
+    self.calldataPanel.basicPanel.show()
+    self.callstackPanel.basicPanel.show()
   })
 }
 
+VmDebugger.prototype.renderHead = function () {
+  var headView = yo`<div id='vmheadView' style='display:none'>
+        <div>
+          <div class=${css.asmCode}>${this.asmCode.render()}</div>
+          <div class=${css.stepDetail}>${this.stepDetail.render()}</div>
+        </div>
+      </div>`
+  if (!this.headView) {
+    this.headView = headView
+  }
+  return headView
+}
+
 VmDebugger.prototype.render = function () {
   var view = yo`<div id='vmdebugger' style='display:none'>
         <div>
-            ${this.asmCode.render()}
             ${this.solidityLocals.render()}
             ${this.solidityState.render()}
-            ${this.stepDetail.render()}
             ${this.stackPanel.render()}
-            ${this.storagePanel.render()}
             ${this.memoryPanel.render()}
-            ${this.calldataPanel.render()}
+            ${this.storagePanel.render()}
             ${this.callstackPanel.render()}
+            ${this.calldataPanel.render()}
             ${this.returnValuesPanel.render()}
             ${this.fullStoragesChangesPanel.render()}
           </div>

test-browser-debugger/test/vmdebugger.js

@@ -18,8 +18,6 @@ module.exports = {
   'vmdebugger': function (browser) {
     loadTraceNotFound(browser)
     .click('#unload')
-    loadTrace(browser)
-    .click('#unload')
     panels(browser)
     .click('#unload')
     slider(browser)
@@ -38,36 +36,17 @@ function loadTraceNotFound (browser) {
     .clearValue('#txinput')
     .setValue('#txinput', '0x20ef65b8b186ca942zcccd634f37074dde49b541c27994fc7596740ef44cfd51')
     .click('#load')
-    .click('#txinfo .title')
     .execute(function () {
-      return document.querySelector('#txinfo .dropdownpanel .dropdownrawcontent').innerHTML
+      return document.querySelector('div[class^="container"] #error').innerHTML
     }, [], function (result) {
       console.log(result.value)
-      if (result.value.indexOf('not found') === -1) {
+      if (result.value.indexOf('0x20ef65b8b186ca942zcccd634f37074dde49b541c27994fc7596740ef44cfd51') === -1) {
-        browser.assert.fail(' txinput panel does not contain <not found> ', 'info about error', '')
+        browser.assert.fail(' error with transaction hash should have been displayed', 'info about error', '')
       }
     })
   return browser
 }
 
-function loadTrace (browser) {
-  browser
-    .clearValue('#txinput')
-    .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51')
-    .click('#load')
-    .click('#txinfo .title')
-    .execute(function () {
-      return document.querySelector('#txinfo .dropdownpanel .dropdownrawcontent').innerHTML
-    }, [], function (result) {
-      if (result.value.indexOf('0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51') === -1) {
-        browser.assert.fail(' txinput panel does not contain 0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51 ', 'info about error', '')
-      }
-    })
-    .click('#unload')
-    .waitForElementNotVisible('#vmdebugger', 1000)
-  return browser
-}
-
 function panels (browser) {
   browser
     .clearValue('#txinput')

test-browser/tests/ballot.js

@@ -45,8 +45,6 @@ function runTests (browser, testData) {
       .click('span#tx0x0571a2439ea58bd349dd130afb8aff62a33af14c06de0dbc3928519bdf13ce2e div[class^="debug"]')
       .pause(1000)
       .click('#jumppreviousbreakpoint')
-      .click('#stepdetail .title .fa')
-      .click('#asmcodes .title .fa')
       .pause(500)
       .perform(function (client, done) {
         console.log('goToVMtraceStep')