Merge pull request #577 from ethereum/editorWindow

assets/css/universal-dapp.css

@@ -80,11 +80,9 @@
 }
 
 .udapp .output .result .debugTx {
-	position: absolute;
-	top: 0.4em;
-	right: 1.4em;
 	height: 1.5em;
 	width: 2.5em;
+	margin-top: 1em;
 }
 
 .udapp .output .result:last-child {
@@ -202,7 +200,7 @@
 }
 
 .udapp .contractProperty button.debug {
-	width: 21px;
+	width: 12em;
 }
 
 .udapp .contractProperty button:disabled {

src/app.js

@@ -196,7 +196,10 @@ var run = function () {
   var FilePanelAPI = {
     createName: createNonClashingName,
     switchToFile: switchToFile,
-    event: this.event
+    event: this.event,
+    editorFontSize: function (incr) {
+      editor.editorFontSize(incr)
+    }
   }
   var filePanel = new FilePanel(FilePanelAPI, files)
   // TODO this should happen inside file-panel.js

src/app/editor.js

@@ -19,7 +19,7 @@ var css = csjs`
   }
   .ace-editor         {
     top               : 4px;
-    font-size         : 2vmin;
+    font-size         : 1.1em;
     width             : 100%;
   }
 `
@@ -63,6 +63,10 @@ function Editor (editorElement) {
     editor.session.setBreakpoint(row, css)
   }
 
+  this.editorFontSize = function (incr) {
+    editor.setFontSize(editor.getFontSize() + incr)
+  }
+
   function createSession (content) {
     var s = new ace.EditSession(content, 'ace/mode/javascript')
     s.setUndoManager(new ace.UndoManager())

src/app/file-panel.js

@@ -70,6 +70,13 @@ var css = csjs`
     top               : 0;
     bottom            : 0;
   }
+  .changeeditorfontsize {
+    padding: 10px;
+  }
+  .changeeditorfontsize i {
+    display: block;
+    color: #111111;
+  }
 `
 
 var limit = 60
@@ -95,6 +102,10 @@ function filepanel (appAPI, files) {
                 </label>
               </span>
             ` : ''}
+            <span class=${css.changeeditorfontsize} >
+              <i class="increditorsize fa fa-plus" aria-hidden="true" title="increase editor font size"></i>
+              <i class="decreditorsize fa fa-minus" aria-hidden="true" title="decrease editor font size"></i>
+            </span>
             <span class=${css.toggleLHP} onclick=${toggle} title="Toggle left hand panel">
               <i class="fa fa-angle-double-left"></i>
             </span>
@@ -108,6 +119,8 @@ function filepanel (appAPI, files) {
 
   var events = new EventManager()
   var element = template()
+  element.querySelector('.increditorsize').addEventListener('click', () => { appAPI.editorFontSize(1) })
+  element.querySelector('.decreditorsize').addEventListener('click', () => { appAPI.editorFontSize(-1) })
   // TODO please do not add custom javascript objects, which have no
   // relation to the DOM to DOM nodes
   element.events = events

src/universal-dapp.js

@@ -281,36 +281,38 @@ UniversalDApp.prototype.getContractByName = function (contractName) {
 
 UniversalDApp.prototype.getCreateInterface = function ($container, contract) {
   var self = this
-  var $createInterface = $('<div class="create"/>')
+  var createInterface = yo`<div class="create"></div>`
   if (self.options.removable) {
-    var $close = $('<div class="udapp-close" />')
-    $close.click(function () { self.$el.remove() })
-    $createInterface.append($close)
+    var close = yo`<div class="udapp-close" onclick=${remove}></div>`
+    function remove () {
+      self.$el.remove()
+    }
+    createInterface.appendChild(close)
   }
 
   var $publishButton = $(`<button class="publishContract"/>`).text('Publish').click(function () { self.event.trigger('publishContract', [contract]) })
-  $createInterface.append($publishButton)
+  createInterface.appendChild($publishButton.get(0))
 
   var $atButton = $('<button class="atAddress"/>').text('At Address').click(function () { self.clickContractAt(self, $container.find('.createContract'), contract) })
-  $createInterface.append($atButton)
+  createInterface.appendChild($atButton.get(0))
 
   var $newButton = self.getInstanceInterface(contract)
   if (!$newButton) {
-    return $createInterface
+    return createInterface
   }
 
-  $createInterface.append($newButton)
+  createInterface.appendChild($newButton)
 
   // Only display creation interface for non-abstract contracts.
   // FIXME: maybe have a flag for this in the JSON?
   // FIXME: maybe fix getInstanceInterface() below for this case
   if (contract.bytecode.length === 0) {
-    var $createButton = $newButton.find('.constructor .call')
+    var $createButton = $newButton.querySelector('.constructor .call')
 
     // NOTE: we must show the button to have CSS properly lined up
-    $createButton.text('Create')
-    $createButton.attr('disabled', 'disabled')
-    $createButton.attr('title', 'This contract does not implement all functions and thus cannot be created.')
+    $createButton.innerText = 'Create'
+    $createButton.setAttribute('disabled', 'disabled')
+    $createButton.setAttribute('title', 'This contract does not implement all functions and thus cannot be created.')
   }
 
   if ((contract.metadata === undefined) || (contract.metadata.length === 0)) {
@@ -318,7 +320,7 @@ UniversalDApp.prototype.getCreateInterface = function ($container, contract) {
     $publishButton.attr('title', 'This contract does not implement all functions and thus cannot be published.')
   }
 
-  return $createInterface
+  return createInterface
 }
 
 UniversalDApp.prototype.getInstanceInterface = function (contract, address, $target) {
@@ -342,14 +344,14 @@ UniversalDApp.prototype.getInstanceInterface = function (contract, address, $tar
     return
   }
 
-  var $createInterface = $('<div class="createContract"/>')
+  var createInterface = yo`<div class="createContract"></div>`
 
   var appendFunctions = function (address, $el) {
     var $instance = $(`<div class="instance ${cssInstance.instance}"/>`)
     if (self.options.removable_instances) {
-      var $close = $('<div class="udapp-close" />')
-      $close.click(function () { $instance.remove() })
-      $instance.append($close)
+      var close = yo`<div class="udapp-close" onclick=${remove}></div>`
+      function remove () { $instance.remove() }
+      $instance.get(0).appendChild(close)
     }
     var context = self.executionContext.isVM() ? 'memory' : 'blockchain'
 
@@ -379,13 +381,12 @@ UniversalDApp.prototype.getInstanceInterface = function (contract, address, $tar
 
       var $event = $('<div class="event" />')
 
-      var $close = $('<div class="udapp-close" />')
-      $close.click(function () { $event.remove() })
+      var close = yo`<div class="udapp-close" onclick=${remove}></div>`
+      function remove () { $event.remove() }
 
       $event.append($('<span class="name"/>').text(response.event))
         .append($('<span class="args" />').text(JSON.stringify(response.args, null, 2)))
-        .append($close)
-
+      $event.get(0).appendChild(close)
       $events.append($event)
     }
 
@@ -461,12 +462,12 @@ UniversalDApp.prototype.getInstanceInterface = function (contract, address, $tar
       }))
     })
 
-    $el = $el || $createInterface
-    $el.append($instance.append($events))
+    $el = $el || createInterface
+    $el.appendChild($instance.append($events).get(0))
   }
 
   if (!address || !$target) {
-    $createInterface.append(self.getCallButton({
+    createInterface.appendChild(self.getCallButton({
       abi: funABI,
       encode: function (args) {
         var types = []
@@ -481,12 +482,12 @@ UniversalDApp.prototype.getInstanceInterface = function (contract, address, $tar
       contractName: contract.name,
       bytecode: contract.bytecode,
       appendFunctions: appendFunctions
-    }))
+    }).get(0))
   } else {
     appendFunctions(address, $target)
   }
 
-  return $createInterface
+  return createInterface
 }
 
 UniversalDApp.prototype.getConstructorInterface = function (abi) {
@@ -535,7 +536,7 @@ UniversalDApp.prototype.getCallButton = function (args) {
 
   var getDebugTransaction = function (result) {
     var $debugTx = $('<div class="debugTx">')
-    var $button = $('<button title="Launch Debugger" class="debug"><i class="fa fa-bug"></i></button>')
+    var $button = $('<button title="Launch Debugger" class="debug"><i class="fa fa-bug"></i>  Launch debugger </button>')
     $button.click(function () {
       self.event.trigger('debugRequested', [result])
     })
@@ -545,7 +546,7 @@ UniversalDApp.prototype.getCallButton = function (args) {
 
   var getDebugCall = function (result) {
     var $debugTx = $('<div class="debugCall">')
-    var $button = $('<button title="Launch Debugger" class="debug"><i class="fa fa-bug"></i></button>')
+    var $button = $('<button title="Launch Debugger" class="debug"><i class="fa fa-bug"></i>  Launch debugger </button>')
     $button.click(function () {
       self.event.trigger('debugRequested', [result])
     })
@@ -554,7 +555,7 @@ UniversalDApp.prototype.getCallButton = function (args) {
   }
 
   var getGasUsedOutput = function (result, vmResult) {
-    var $gasUsed = $('<div class="gasUsed">')
+    var $gasUsed = $('<div class="gasUsed"></div>')
     var caveat = lookupOnly ? '<em>(<span class="caveat" title="Cost only applies when called by a contract">caveat</span>)</em>' : ''
     var gas
     if (result.gasUsed) {
@@ -585,9 +586,9 @@ UniversalDApp.prototype.getCallButton = function (args) {
 
   var getOutput = function () {
     var $result = $('<div class="result" />')
-    var $close = $('<div class="udapp-close" />')
-    $close.click(function () { $result.remove() })
-    $result.append($close)
+    var close = yo`<div class="udapp-close" onclick=${remove}></div>`
+    function remove () { $result.remove() }
+    $result.get(0).appendChild(close)
     return $result
   }
   var clearOutput = function ($result) {