Merge pull request #712 from ethereum/fixUxInterface

[Debugger] Fix ui

remix-debugger/package.json

@@ -24,6 +24,7 @@
     "babelify": "^7.3.0",
     "browserify": "^13.0.1",
     "browserify-livereload": "^1.0.10",
+    "clipboard-copy": "^1.2.0",
     "csjs-inject": "^1.0.1",
     "ethereum-common": "0.0.18",
     "ethereumjs-block": "^1.2.2",

remix-debugger/src/ui/DropdownPanel.js

@@ -1,5 +1,6 @@
 'use strict'
 var yo = require('yo-yo')
+const copy = require('clipboard-copy')
 var remixLib = require('remix-lib')
 var TreeView = require('./TreeView')
 var EventManager = remixLib.EventManager
@@ -11,7 +12,7 @@ var styles = styleGuide.chooser()
 var css = csjs`
   .title {
     margin-top: 10px;
-    ${styles.rightPanel.debuggerTab.dropdown_Debugger}
+    ${styles.rightPanel.debuggerTab.dropdown_Debugger};
     display: flex;
     align-items: center;
   }
@@ -23,15 +24,13 @@ var css = csjs`
     margin-right: 5%;
   }
   .eyeButton {
-    ${styles.rightPanel.debuggerTab.button_Debugger}
     margin: 3px;
-    float: right;
   }
   .eyeButton:hover {
     color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
   }
   .dropdownpanel {
-    ${styles.rightPanel.debuggerTab.dropdown_Debugger}
+    ${styles.rightPanel.debuggerTab.dropdown_Debugger};
     width: 100%;
   }
   .dropdownrawcontent {
@@ -94,7 +93,7 @@ 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('.dropdownpanel button.btn').style.display = 'block'
+    this.view.querySelector('.title div.btn').style.display = 'block'
     this.view.querySelector('.title span').innerText = _header || ' '
     this.message('')
     if (this.json) {
@@ -130,13 +129,12 @@ DropdownPanel.prototype.render = function (overridestyle) {
         to {transform:rotate(359deg);}
       }
     </style>
-    <div class="${css.title} title" onclick=${function () { self.toggle() }}>
+    <div class="${css.title} title">
-      <div class="${css.icon} fa fa-caret-right"></div>
+      <div class="${css.icon} fa fa-caret-right" onclick=${function () { self.toggle() }} ></div>
-      <div class="${css.name}">${this.name}</div><span></span>
+      <div class="${css.name}" onclick=${function () { self.toggle() }} >${this.name}</div><span 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'>
-      <button onclick=${function () { self.toggleRaw() }} title='raw' class="${css.eyeButton} btn fa fa-eye" type="button">
-      </button>
       <i class="${css.refresh} fa fa-refresh" aria-hidden="true"></i>
       <div class='dropdowncontent'>${content}</div>
       <div class='dropdownrawcontent' style='display:none'></div>
@@ -149,11 +147,9 @@ DropdownPanel.prototype.render = function (overridestyle) {
   return view
 }
 
-DropdownPanel.prototype.toggleRaw = function () {
+DropdownPanel.prototype.copyClipboard = function () {
-  var raw = this.view.querySelector('.dropdownpanel .dropdownrawcontent')
+  var content = this.view.querySelector('.dropdownpanel .dropdownrawcontent')
-  var formatted = this.view.querySelector('.dropdownpanel .dropdowncontent')
+  if (content) copy(content.innerText ? content.innerText : content.textContent)
-  raw.style.display = raw.style.display === 'none' ? 'block' : 'none'
-  formatted.style.display = formatted.style.display === 'none' ? 'block' : 'none'
 }
 
 DropdownPanel.prototype.toggle = function () {

remix-debugger/src/ui/SolidityTypeFormatter.js

@@ -48,7 +48,7 @@ function extractData (item, parent, key) {
     ret.isMapping = true
     ret.self = item.type
   } else {
-    ret.children = []
+    ret.children = null
     ret.self = item.value
     ret.type = item.type
   }

remix-debugger/src/ui/TreeView.js

@@ -175,7 +175,7 @@ class TreeView {
       ret.isLeaf = false
     } else {
       ret.self = item
-      ret.children = []
+      ret.children = null
       ret.isNode = false
       ret.isLeaf = true
     }

remix-debugger/test-browser/test/vmdebugger.js

@@ -39,8 +39,14 @@ function loadTraceNotFound (browser) {
     .setValue('#txinput', '0x20ef65b8b186ca942zcccd634f37074dde49b541c27994fc7596740ef44cfd51')
     .click('#load')
     .click('#txinfo .title')
-    .click('#txinfo .dropdownpanel .btn')
+    .execute(function () {
-    .expect.element('#txinfo .dropdownpanel .dropdownrawcontent').text.to.contain('<not found>')
+      return document.querySelector('#txinfo .dropdownpanel .dropdownrawcontent').innerHTML
+    }, [], function (result) {
+      console.log(result.value)
+      if (result.value.indexOf('not found') === -1) {
+        browser.assert.fail(' txinput panel does not contain <not found> ', 'info about error', '')
+      }
+    })
   return browser
 }
 
@@ -50,9 +56,15 @@ function loadTrace (browser) {
     .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51')
     .click('#load')
     .click('#txinfo .title')
-    .click('#txinfo .dropdownpanel .btn')
+    .execute(function () {
-    .expect.element('#txinfo .dropdownpanel .dropdownrawcontent').text.to.contain('0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51')
+      return document.querySelector('#txinfo .dropdownpanel .dropdownrawcontent').innerHTML
-  browser.click('#unload')
+    }, [], function (result) {
+      console.log(result.value)
+      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
 }

remix-lib/src/ui/style-guide.js

@@ -337,7 +337,7 @@ function styleGuide () {
         cursor                  : pointer;
         border-radius           : 3px;
         height                  : 25px;
-        width                   : 250px;
+        width                   : 100%;
         text-align              : center;
         overflow                : hidden;
         word-break              : normal;
@@ -680,7 +680,7 @@ function styleGuide () {
         button_Debugger_icon_HoverColor: appProperties.icon_HoverColor,
 
         dropdown_Debugger: appProperties.uiElements.dropdown({
-          BackgroundColor: appProperties.dropdown_BackgroundColor,
+          BackgroundColor: cssProperties.colors.veryLightGrey,
           BorderColor: appProperties.dropdown_BorderColor,
           Color: appProperties.dropdown_TextColor
         }),

remix-solidity/src/decoder/internalCallTree.js

@@ -271,12 +271,15 @@ function extractFunctionDefinitions (ast, astWalker) {
 function addParams (parameterList, tree, scopeId, states, contractName, sourceLocation, stackLength, stackPosition, dir) {
   for (var inputParam in parameterList.children) {
     var param = parameterList.children[inputParam]
+    var stackDepth = stackLength + (dir * stackPosition)
+    if (stackDepth >= 0) {
       tree.scopes[scopeId].locals[param.attributes.name] = {
         name: param.attributes.name,
         type: decodeInfo.parseType(param.attributes.type, states, contractName),
-      stackDepth: stackLength + (dir * stackPosition),
+        stackDepth: stackDepth,
         sourceLocation: sourceLocation
       }
+    }
     stackPosition += dir
   }
 }