use button for details and debug

src/app/execution/txLogger.js

@@ -50,11 +50,6 @@ var css = csjs`
   }
   .debug, .details {
     color: ${styles.terminal.link_Debug};
-    text-decoration: underline;
-    font-weight: bold;
-    min-height: 18px;
-    max-height: 18px;
-    width: 55px;
     min-width: 55px;
     margin-left: 5px;
     cursor: pointer;
@@ -157,8 +152,8 @@ function renderKnownTransaction (self, data) {
       <div class="${css.log}">
         ${context(self, {from, to, data})}
         <div class=${css.buttons}>
-        <div class=${css.details} onclick=${txDetails}>Details</div>
-        <div class=${css.debug} onclick=${debug}>Debug</div>
+        <button class=${css.details} onclick=${txDetails}>Details</button>
+        <button class=${css.debug} onclick=${debug}>Debug</button>
         </div>
       </div>
     </span>
@@ -208,8 +203,8 @@ function renderCall (self, data) {
       <div class="${css.log}">
         <span class=${css.txLog}><span class=${css.tx}>[call]</span> from:${from}, to:${to}, data:${input}, return: </span>
         <div class=${css.buttons}>
-          <div class=${css.debug} onclick=${debug}>Debug</div>
-          <div class=${css.details} onclick=${txDetails}>Details</div>
+          <button class=${css.details} onclick=${txDetails}>Details</button>
+          <button class=${css.debug} onclick=${debug}>Debug</button>
         </div>
       </div>
       <div> ${JSON.stringify(typeConversion.stringify(data.resolvedData.decodedReturnValue), null, '\t')}</div>
@@ -253,8 +248,8 @@ function renderUnknownTransaction (self, data) {
       <div class="${css.log}">
         ${context(self, {from, to, data})}
         <div class=${css.buttons}>
-          <div class=${css.details} onclick=${txDetails}>Details</div>
-          <div class=${css.debug} onclick=${debug}>Debug</div>
+          <button class=${css.details} onclick=${txDetails}>Details</button>
+          <button class=${css.debug} onclick=${debug}>Debug</button>
         </div>
       </div>
     </span>

test-browser/helpers/contracts.js

@@ -76,7 +76,7 @@ function testFunction (fnFullName, txHash, log, expectedInput, expectedReturn, e
     .pause(500)
     .waitForElementPresent('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"]')
     .assert.containsText('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"] span', log)
-    .click('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"] div[class^="details"]')
+    .click('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"] button[class^="details"]')
     .perform(function (client, done) {
       if (expectedReturn) {
         client.assert.containsText('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"] table[class^="txTable"] #decodedoutput', expectedReturn)

test-browser/tests/ballot.js

@@ -34,7 +34,7 @@ function runTests (browser, testData) {
       .testFunction('delegate - transact (not payable)', '0xd3cd54e2f76f3993078ecf9e1b54a148def4520afc141a182293b3610bddf10f',
         '[vm] from:0xca3...a733c, to:Ballot.delegate(address) 0x692...77b3a, value:0 wei, data:0x5c1...4d2db, 0 logs, hash:0xd3c...df10f',
         {types: 'address to', values: '"0x4b0897b0513fdc7c541b6d9d7e929c4e5364d2db"'}, null, null)
-      .click('span#tx0xd3cd54e2f76f3993078ecf9e1b54a148def4520afc141a182293b3610bddf10f div[class^="debug"]')
+      .click('span#tx0xd3cd54e2f76f3993078ecf9e1b54a148def4520afc141a182293b3610bddf10f button[class^="debug"]')
       .pause(1000)
       .click('#jumppreviousbreakpoint')
       .click('#stepdetail .title')