Somehow working refactoring

index.html

@@ -52,25 +52,6 @@
 			<div id="dragbar"></div>
 		</div>
 
-		<div id="righthand-panel">
-			<div id="header">
-				<div id="menu">
-					<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
-					<ul id="options">
-						<li class="envView" title="Environment">Contract</li>
-						<li class="settingsView" title="Settings">Settings</li>
-						<li class="publishView" title="Publish" >Files</li>
-						<li class="debugView" title="Debugger">Debugger</li>
-						<li class="staticanalysisView" title="Static Analysis">Analysis</li>
-						<li id="helpButton"><a href="https://remix.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li>
-					</ul>
-				</div>
-				<div id="optionViews" class="settingsView">
-					<!-- contract-tab.js, settings-tab.js, debugger-tab.js, analysis-tab.js, files-tab.js -->
-				</div>
-			</div>
-		</div>
-
 		<script src="build/app.js"></script>
 
 	</body>

src/app.js

@@ -25,15 +25,9 @@ var EventManager = require('ethereum-remix').lib.EventManager
 var StaticAnalysis = require('./app/staticanalysis/staticAnalysisView')
 var OffsetToLineColumnConverter = require('./lib/offsetToLineColumnConverter')
 var FilePanel = require('./app/file-panel')
-var tabbedMenu = require('./app/tabbed-menu')
+var RighthandPanel = require('./app/righthand-panel')
 var examples = require('./app/example-contracts')
 
-var contractTab = require('./app/contract-tab.js')
-var SettingsTab = require('./app/settings-tab.js')
-var analysisTab = require('./app/analysis-tab.js')
-var debuggerTab = require('./app/debugger-tab.js')
-var filesTab = require('./app/files-tab.js')
-
 // The event listener needs to be registered as early as possible, because the
 // parent will send the message upon the "load" event.
 var filesToLoad = null
@@ -50,26 +44,7 @@ var run = function () {
   var fileStorage = new Storage('sol:')
   var files = new Files(fileStorage)
   var config = new Config(fileStorage)
-  var compiler = new Compiler(handleImportCall)
-  var offsetToLineColumnConverter = new OffsetToLineColumnConverter(compiler.event)
-  /* ----------------------------------------------
-          TABS - Righthand pannel
-  ------------------------------------------------ */
-  var contractView = contractTab()
-  document.querySelector('#optionViews').appendChild(contractView)
-
-  var settingsView = new SettingsTab('#optionViews', {}, {compiler: compiler.event}, {})
-
-  var analysisView = analysisTab()
-  document.querySelector('#optionViews').appendChild(analysisView)
 
-  var debuggerView = debuggerTab()
-  document.querySelector('#optionViews').appendChild(debuggerView)
-
-  var filesView = filesTab()
-  document.querySelector('#optionViews').appendChild(filesView)
-
-  var executionContext = new ExecutionContext()
   // return all the files, except the temporary/readonly ones
   function packageFiles () {
     var ret = {}
@@ -174,9 +149,6 @@ var run = function () {
   window.syncStorage = chromeCloudSync
   chromeCloudSync()
 
-  // ----------------- editor ----------------------
-  var editor = new Editor(document.getElementById('input'))
-
   // ---------------- FilePanel --------------------
   // TODO: All FilePanel related CSS should move into file-panel.js
   // app.js provides file-panel.js with a css selector or a DOM element
@@ -281,6 +253,9 @@ var run = function () {
     }).appendTo('body')
   })
 
+  // ----------------- editor ----------------------
+  var editor = new Editor(document.getElementById('input'))
+
   // --------------------Files tabs-----------------------------
   var $filesEl = $('#files')
   var FILE_SCROLL_DELTA = 300
@@ -444,68 +419,80 @@ var run = function () {
     })
   })
 
-  // ----------------- resizeable ui ---------------
+  var compiler = new Compiler(handleImportCall)
-
+  var offsetToLineColumnConverter = new OffsetToLineColumnConverter(compiler.event)
-  var EDITOR_WINDOW_SIZE = 'editorWindowSize'
 
-  var dragging = false
+  // ----------------- Renderer -----------------
-  $('#dragbar').mousedown(function (e) {
+  var transactionContextAPI = {
-    e.preventDefault()
+    getAddress: (cb) => {
-    dragging = true
+      cb(null, $('#txorigin').val())
-    var main = $('#righthand-panel')
+    },
-    var ghostbar = $('<div id="ghostbar">', {
+    getValue: (cb) => {
-      css: {
+      try {
-        top: main.offset().top,
+        var comp = $('#value').val().split(' ')
-        left: main.offset().left
+        cb(null, executionContext.web3().toWei(comp[0], comp.slice(1).join(' ')))
+      } catch (e) {
+        cb(e)
       }
-    }).prependTo('body')
+    },
-
+    getGasLimit: (cb) => {
-    $(document).mousemove(function (e) {
+      cb(null, $('#gasLimit').val())
-      ghostbar.css('left', e.pageX + 2)
+    }
-    })
-  })
-
-  var $body = $('body')
-
-  function setEditorSize (delta) {
-    $('#righthand-panel').css('width', delta)
-    $('#editor').css('right', delta)
-    onResize()
-  }
-
-  function getEditorSize () {
-    return $('#righthand-panel').width()
   }
 
-  $(document).mouseup(function (e) {
+  var rendererAPI = {
-    if (dragging) {
+    error: (file, error) => {
-      var delta = $body.width() - e.pageX + 2
+      if (file === config.get('currentFile')) {
-      $('#ghostbar').remove()
+        editor.addAnnotation(error)
-      $(document).unbind('mousemove')
+      }
-      dragging = false
+    },
-      delta = (delta < 50) ? 50 : delta
+    errorClick: (errFile, errLine, errCol) => {
-      setEditorSize(delta)
+      if (errFile !== config.get('currentFile') && files.exists(errFile)) {
-      config.set(EDITOR_WINDOW_SIZE, delta)
+        switchToFile(errFile)
-      reAdjust()
+      }
+      editor.gotoLine(errLine, errCol)
+    },
+    currentCompiledSourceCode: () => {
+      if (compiler.lastCompilationResult.source) {
+        return compiler.lastCompilationResult.source.sources[compiler.lastCompilationResult.source.target]
+      }
+      return ''
+    },
+    resetDapp: (udappContracts, renderOutputModifier) => {
+      udapp.reset(udappContracts, transactionContextAPI, renderOutputModifier)
+    },
+    renderDapp: () => {
+      return udapp.render()
+    },
+    getAccounts: (callback) => {
+      udapp.getAccounts(callback)
+    },
+    getBalance: (address, callback) => {
+      udapp.getBalance(address, (error, balance) => {
+        if (error) {
+          callback(error)
+        } else {
+          callback(null, executionContext.web3().fromWei(balance, 'ether'))
+        }
+      })
     }
-  })
-
-  if (config.exists(EDITOR_WINDOW_SIZE)) {
-    setEditorSize(config.get(EDITOR_WINDOW_SIZE))
-  } else {
-    config.set(EDITOR_WINDOW_SIZE, getEditorSize())
   }
+  var renderer = new Renderer(rendererAPI, compiler.event)
 
-  // ----------------- toggle right hand panel -----------------
+  // ---------------- Righthand-panel --------------------
-
+  var rhpAPI = {
-  var hidingRHP = false
+    config: config,
-  $('.toggleRHP').click(function () {
+    onResize: onResize,
-    hidingRHP = !hidingRHP
+    reAdjust: reAdjust,
-    setEditorSize(hidingRHP ? 0 : config.get(EDITOR_WINDOW_SIZE))
+    renderer: renderer
-    $('.toggleRHP i').toggleClass('fa-angle-double-right', !hidingRHP)
+  }
-    $('.toggleRHP i').toggleClass('fa-angle-double-left', hidingRHP)
+  var rhpEvents = {
-  })
+    compiler: compiler.event,
-
+    app: self.event
+  }
+  var righthandPanel = new RighthandPanel(document.body, rhpAPI, rhpEvents, {})
+// ------------------------------------------------------------
+  var executionContext = new ExecutionContext()
   // ----------------- editor resize ---------------
 
   function onResize () {
@@ -725,63 +712,6 @@ var run = function () {
     })
   })
 
-  // ----------------- Renderer -----------------
-  var transactionContextAPI = {
-    getAddress: (cb) => {
-      cb(null, $('#txorigin').val())
-    },
-    getValue: (cb) => {
-      try {
-        var comp = $('#value').val().split(' ')
-        cb(null, executionContext.web3().toWei(comp[0], comp.slice(1).join(' ')))
-      } catch (e) {
-        cb(e)
-      }
-    },
-    getGasLimit: (cb) => {
-      cb(null, $('#gasLimit').val())
-    }
-  }
-
-  var rendererAPI = {
-    error: (file, error) => {
-      if (file === config.get('currentFile')) {
-        editor.addAnnotation(error)
-      }
-    },
-    errorClick: (errFile, errLine, errCol) => {
-      if (errFile !== config.get('currentFile') && files.exists(errFile)) {
-        switchToFile(errFile)
-      }
-      editor.gotoLine(errLine, errCol)
-    },
-    currentCompiledSourceCode: () => {
-      if (compiler.lastCompilationResult.source) {
-        return compiler.lastCompilationResult.source.sources[compiler.lastCompilationResult.source.target]
-      }
-      return ''
-    },
-    resetDapp: (udappContracts, renderOutputModifier) => {
-      udapp.reset(udappContracts, transactionContextAPI, renderOutputModifier)
-    },
-    renderDapp: () => {
-      return udapp.render()
-    },
-    getAccounts: (callback) => {
-      udapp.getAccounts(callback)
-    },
-    getBalance: (address, callback) => {
-      udapp.getBalance(address, (error, balance) => {
-        if (error) {
-          callback(error)
-        } else {
-          callback(null, executionContext.web3().fromWei(balance, 'ether'))
-        }
-      })
-    }
-  }
-  var renderer = new Renderer(rendererAPI, compiler.event)
-
   // ----------------- StaticAnalysis -----------------
   var staticAnalysisAPI = {
     renderWarning: (label, warningContainer, type) => {
@@ -996,16 +926,6 @@ var run = function () {
     loadVersion('builtin')
   })
 
-  var tabbedMenuAPI = {
-    warnCompilerLoading: function (msg) {
-      renderer.clear()
-      if (msg) {
-        renderer.error(msg, $('#output'), {type: 'warning'})
-      }
-    }
-  }
-  // load tabbed menu component
-  tabbedMenu(tabbedMenuAPI, compiler.event, self.event)
 }
 
 module.exports = {

src/app/analysis-tab.js

@@ -21,9 +21,10 @@ var css = csjs`
 
 module.exports = analysisTab
 
-function analysisTab () {
+function analysisTab (container, API, events, opts) {
-  return yo`
+  var el = yo`
     <div class="${css.analysisTabView} "id="staticanalysisView">
     </div>
   `
+  container.appendChild(el)
 }

src/app/contract-tab.js

@@ -54,7 +54,7 @@ var css = csjs`
 
 module.exports = contractTab
 
-function contractTab () {
+function contractTab (container, appAPI, appEvents, opts) {
   function copyAddress () {
     copy(document.querySelector('#envView #txorigin').value)
   }
@@ -105,5 +105,5 @@ function contractTab () {
       <div id="output" class="${css.contract}"></div>
     </div>
   `
-  return el
+  container.appendChild(el)
 }

src/app/debugger-tab.js

@@ -11,6 +11,7 @@ var css = csjs`
 
 module.exports = debuggerTab
 
-function debuggerTab () {
+function debuggerTab (container, API, events, opts) {
-  return yo` <div class="${css.debuggerTabView} "id="debugView"><div id="debugger"></div></div>`
+  var el = yo` <div class="${css.debuggerTabView} "id="debugView"><div id="debugger"></div></div>`
+  container.appendChild(el)
 }

src/app/files-tab.js

@@ -20,8 +20,8 @@ var css = csjs`
 
 module.exports = filesTab
 
-function filesTab () {
+function filesTab (container, API, events, opts) {
-  return yo`
+  var el = yo`
     <div class="${css.filesTabView}" id="publishView">
       <div class="${css.crow}">
         <button id="gist" title="Publish all files as public gist on github.com">
@@ -42,4 +42,5 @@ function filesTab () {
       </div>
     </div>
   `
+  container.appendChild(el)
 }

src/app/righthand-panel.js

@@ -0,0 +1,120 @@
+var csjs = require('csjs-inject')
+var yo = require('yo-yo')
+var $ = require('jquery')
+
+var tabbedMenu = require('./tabbed-menu')
+var contractTab = require('./contract-tab')
+var settingsTab = require('./settings-tab')
+var analysisTab = require('./analysis-tab')
+var debuggerTab = require('./debugger-tab')
+var filesTab = require('./files-tab')
+
+// ------------------------------------------------------------------
+
+module.exports = RighthandPanel
+
+function RighthandPanel (container, API, events, opts) {
+
+  var optionViews = yo`<div id="optionViews" class="settingsView"></div>`
+  var element = yo`
+    <div id="righthand-panel">
+      <div id="header">
+        <div id="menu">
+          <img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
+          <ul id="options">
+            <li class="envView" title="Environment">Contract</li>
+            <li class="settingsView" title="Settings">Settings</li>
+            <li class="publishView" title="Publish" >Files</li>
+            <li class="debugView" title="Debugger">Debugger</li>
+            <li class="staticanalysisView" title="Static Analysis">Analysis</li>
+            <li id="helpButton"><a href="https://remix.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li>
+          </ul>
+        </div>
+        ${optionViews}
+      </div>
+    </div>
+  `
+  contractTab(optionViews, API, events, opts)
+  settingsTab(optionViews, API, events, opts)
+  analysisTab(optionViews, API, events, opts)
+  debuggerTab(optionViews, API, events, opts)
+  filesTab(optionViews, API, events, opts)
+  container.appendChild(element)
+
+  // ----------------- toggle right hand panel -----------------
+
+  var hidingRHP = false
+  $('.toggleRHP').click(function () {
+    hidingRHP = !hidingRHP
+    setEditorSize(hidingRHP ? 0 : API.config.get(EDITOR_WINDOW_SIZE))
+    $('.toggleRHP i').toggleClass('fa-angle-double-right', !hidingRHP)
+    $('.toggleRHP i').toggleClass('fa-angle-double-left', hidingRHP)
+  })
+
+  // ----------------- tabbed menu -----------------
+  var tabbedMenuAPI = {
+    warnCompilerLoading: function (msg) {
+      API.renderer.clear()
+      if (msg) {
+        API.renderer.error(msg, $('#output'), {type: 'warning'})
+      }
+    }
+  }
+  // load tabbed menu component
+  var tabContainer = undefined // @TODO
+  var tabEvents = {compiler: events.compiler, app: events.app}
+  tabbedMenu(tabContainer, tabbedMenuAPI, tabEvents, {})
+
+  // ----------------- resizeable ui ---------------
+
+  var EDITOR_WINDOW_SIZE = 'editorWindowSize'
+
+  var dragging = false
+  $('#dragbar').mousedown(function (e) {
+    e.preventDefault()
+    dragging = true
+    var main = $('#righthand-panel')
+    var ghostbar = $('<div id="ghostbar">', {
+      css: {
+        top: main.offset().top,
+        left: main.offset().left
+      }
+    }).prependTo('body')
+
+    $(document).mousemove(function (e) {
+      ghostbar.css('left', e.pageX + 2)
+    })
+  })
+
+  var $body = $('body')
+
+  function setEditorSize (delta) {
+    $('#righthand-panel').css('width', delta)
+    $('#editor').css('right', delta)
+    API.onResize()
+  }
+
+  function getEditorSize () {
+    return $('#righthand-panel').width()
+  }
+
+  $(document).mouseup(function (e) {
+    if (dragging) {
+      var delta = $body.width() - e.pageX + 2
+      $('#ghostbar').remove()
+      $(document).unbind('mousemove')
+      dragging = false
+      delta = (delta < 50) ? 50 : delta
+      setEditorSize(delta)
+      API.config.set(EDITOR_WINDOW_SIZE, delta)
+      API.reAdjust()
+    }
+  })
+
+  if (API.config.exists(EDITOR_WINDOW_SIZE)) {
+    setEditorSize(API.config.get(EDITOR_WINDOW_SIZE))
+  } else {
+    API.config.set(EDITOR_WINDOW_SIZE, getEditorSize())
+  }
+
+}

src/app/tabbed-menu.js

@@ -3,13 +3,13 @@ var loadingSpinner = require('./loading-spinner')
 
 module.exports = tabbedMenu
 
-function tabbedMenu (rendererAPI, compilerEvent, appEvent) {
+function tabbedMenu (container, API, events, opts) {
   $('#options li').click(function (ev) {
     var $el = $(this)
     selectTab($el)
   })
 
-  appEvent.register('debuggingRequested', () => {
+  events.app.register('debuggingRequested', () => {
     selectTab($('ul#options li.debugView'))
   })
 
@@ -17,17 +17,17 @@ function tabbedMenu (rendererAPI, compilerEvent, appEvent) {
   selectTab($('#options .envView'))
 
   // add event listeners for loading spinner
-  compilerEvent.register('loadingCompiler', function start () {
+  events.compiler.register('loadingCompiler', function start () {
     var settingsTab = document.querySelector('.settingsView')
     if (settingsTab.children.length) return
 
     var spinner = loadingSpinner()
     settingsTab.appendChild(spinner)
 
-    rendererAPI.warnCompilerLoading('Solidity compiler is currently loading. Please wait a moment...')
+    API.warnCompilerLoading('Solidity compiler is currently loading. Please wait a moment...')
-    compilerEvent.register('compilerLoaded', finish)
+    events.compiler.register('compilerLoaded', finish)
     function finish () {
-      compilerEvent.unregister('compilerLoaded', finish)
+      events.compiler.unregister('compilerLoaded', finish)
       settingsTab.removeChild(spinner)
     }
   })
@@ -42,6 +42,6 @@ function tabbedMenu (rendererAPI, compilerEvent, appEvent) {
       $('#optionViews').attr('class', '').addClass(cls)
       el.addClass('active')
     }
-    appEvent.trigger('tabChanged', [cls])
+    events.app.trigger('tabChanged', [cls])
   }
 }