Merge pull request #970 from ethereum/theme_switch

Theme switch

src/app.js

@@ -13,7 +13,7 @@ var OffsetToLineColumnConverter = require('./lib/offsetToLineColumnConverter')
 var QueryParams = require('./lib/query-params')
 var GistHandler = require('./lib/gist-handler')
 var helper = require('./lib/helper')
-var Storage = require('./storage')
+var Storage = remixLib.Storage
 var Browserfiles = require('./app/files/browser-files')
 var chromeCloudStorageSync = require('./app/files/chromeCloudStorageSync')
 var SharedFolder = require('./app/files/shared-folder')
@@ -38,8 +38,8 @@ var ContextualListener = require('./app/editor/contextualListener')
 var ContextView = require('./app/editor/contextView')
 var BasicReadOnlyExplorer = require('./app/files/basicReadOnlyExplorer')
 
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
 
 var css = csjs`
   html { box-sizing: border-box; }

src/app/editor/contextView.js

@@ -2,8 +2,8 @@
 var yo = require('yo-yo')
 var csjs = require('csjs-inject')
 var remixLib = require('remix-lib')
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
 var SourceMappingDecoder = remixLib.SourceMappingDecoder
 
 var css = csjs`

src/app/editor/editor.js

@@ -12,8 +12,8 @@ require('brace/ext/language_tools')
 require('brace/ext/searchbox')
 var langTools = ace.acequire('ace/ext/language_tools')
 require('./mode-solidity.js')
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
 
 function setTheme (cb) {
   if (styles.appProperties.aceTheme) {

src/app/execution/txLogger.js

@@ -5,8 +5,8 @@ var copyToClipboard = require('../ui/copy-to-clipboard')
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
 var remixLib = require('remix-lib')
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
 
 var EventManager = remixLib.EventManager
 var helper = require('../../lib/helper')

src/app/files/file-explorer.js

@@ -9,8 +9,8 @@ var EventManager = remixLib.EventManager
 
 var helper = require('../../lib/helper')
 
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
 
 var css = csjs`
   .fileexplorer       {

src/app/panels/editor-panel.js

@@ -2,8 +2,8 @@ var csjs = require('csjs-inject')
 var yo = require('yo-yo')
 var remixLib = require('remix-lib')
 var EventManager = remixLib.EventManager
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
 
 var Terminal = require('./terminal')
 

src/app/panels/file-panel.js

@@ -12,8 +12,8 @@ var QueryParams = require('../../lib/query-params')
 var queryParams = new QueryParams()
 var helper = require('../../lib/helper')
 
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
 
 module.exports = filepanel
 

src/app/panels/righthand-panel.js

@@ -13,8 +13,8 @@ var PluginManager = require('../../pluginManager')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
 
 var css = csjs`
   #righthand-panel {

src/app/panels/terminal.js

@@ -10,10 +10,12 @@ var Web3 = require('web3')
 
 var executionContext = require('../../execution-context')
 var Dropdown = require('../ui/dropdown')
+
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
 
 var css = csjs`
   .panel              {

src/app/staticanalysis/staticAnalysisView.js

@@ -6,8 +6,8 @@ var remixLib = require('remix-lib')
 var utils = remixLib.util
 var csjs = require('csjs-inject')
 
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
 
 var EventManager = remixLib.EventManager
 

src/app/tabs/analysis-tab.js

@@ -1,10 +1,10 @@
 var yo = require('yo-yo')
+var remixLib = require('remix-lib')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var remixLib = require('remix-lib')
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
 
 var css = csjs`
   .analysisTabView {

src/app/tabs/compile-tab.js

@@ -9,12 +9,12 @@ var modalDialog = require('../ui/modaldialog')
 var modalDialogCustom = require('../ui/modal-dialog-custom')
 var TreeView = require('remix-debugger').ui.TreeView
 var copyToClipboard = require('../ui/copy-to-clipboard')
+var remixLib = require('remix-lib')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var remixLib = require('remix-lib')
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
 
 var css = csjs`
   .compileTabView {

src/app/tabs/debugger-tab.js

@@ -1,10 +1,8 @@
 var yo = require('yo-yo')
-
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var remixLib = require('remix-lib')
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
 
 var css = csjs`
   .debuggerTabView {

src/app/tabs/run-tab.js

@@ -13,9 +13,8 @@ var EventManager = require('remix-lib').EventManager
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var remixLib = require('remix-lib')
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
 
 var css = csjs`
   .runTabView {

src/app/tabs/settings-tab.js

@@ -2,12 +2,13 @@
 var $ = require('jquery')
 var yo = require('yo-yo')
 var QueryParams = require('../../lib/query-params')
+var remixLib = require('remix-lib')
+var Storage = remixLib.Storage
+var styleGuide = remixLib.ui.themeChooser
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var remixLib = require('remix-lib')
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styles = styleGuide.chooser()
 var helper = require('../../lib/helper')
 var modal = require('../ui/modal-dialog-custom')
 
@@ -28,6 +29,9 @@ var css = csjs`
     padding: .5em;
     font-weight: bold;
   }
+  .crow label {
+    cursor:pointer;
+  }
   .crowNoFlex {
     overflow: auto;
     clear: both;
@@ -37,15 +41,30 @@ var css = csjs`
   .select {
     ${styles.rightPanel.settingsTab.dropdown_SelectCompiler}
   }
+  .heading {
+    margin-bottom: 0;
+  }
+  .explaination {
+    margin-top: 3px;
+    margin-bottom: 3px;
+  }
   input {
-    margin-right: 3px;
+    margin-right: 5px;
+    cursor: pointer;
+  }
+  input[type=radio] {
+    margin-top: 2px;
   }
   .pluginTextArea {
     font-family: unset;
+    margin-top: 5px;
   }
   .pluginLoad {
     vertical-align: top;
   }
+  i.warnIt {
+    color: ${styles.appProperties.warningText_Color};
+  }
 }
 `
 module.exports = SettingsTab
@@ -79,13 +98,25 @@ function SettingsTab (container, appAPI, appEvents, opts) {
         <span class="${css.checkboxText}">Enable Optimization</span>
       </div>
       <hr>
+      <h4 class="${css.heading}">Themes ( Selecting a theme will trigger a page reload )</h4>
+      <div class="${css.crow}">
+        <input class="${css.col1}" name="theme" id="themeLight" type="radio">
+        <label for="themeLight">Light Theme</label>
+      </div>
+      <div class="${css.crow}">
+        <input class="${css.col1}" name="theme" id="themeDark" type="radio">
+        <label for="themeDark">Dark Theme</label>
+      </div>
+      <hr>
       <div class="${css.crowNoFlex}">
-        <div>Plugin (<i title="Do not use this feature yet" class="fa fa-exclamation-triangle" aria-hidden="true"></i><span> Do not use this alpha feature if you are not sure what you are doing!</span>)</div>
-         <div>
+        <div>Plugin ( <i title="Do not use this feature yet" class="${css.warnIt} fa fa-exclamation-triangle" aria-hidden="true"></i><span> Do not use this alpha feature if you are not sure what you are doing!</span> )
+        </div>
+        <div>
           <textarea rows="4" cols="70" id="plugininput" type="text" class="${css.pluginTextArea}" ></textarea>
+          <br />
           <input onclick=${loadPlugin} type="button" value="Load" class="${css.pluginLoad}">
-         </div>
         </div>
+      </div>
     </div>
   `
 
@@ -124,6 +155,29 @@ function SettingsTab (container, appAPI, appEvents, opts) {
     appAPI.setOptimize(optimize, true)
   })
 
+  var themeStorage = new Storage('style:')
+  var currTheme = themeStorage.get('theme')
+  var themeDark = el.querySelector('#themeDark')
+  var themeLight = el.querySelector('#themeLight')
+
+  if (currTheme === 'dark') {
+    themeDark.setAttribute('checked', 'checked')
+  } else {
+    themeLight.setAttribute('checked', 'checked')
+  }
+
+  themeDark.addEventListener('change', function () {
+    console.log('change dark theme')
+    styleGuide.switchTheme('dark')
+    window.location.reload()
+  })
+
+  themeLight.addEventListener('change', function () {
+    console.log('change to light theme')
+    styleGuide.switchTheme('light')
+    window.location.reload()
+  })
+
   // ----------------- version selector-------------
 
   // clear and disable the version selector

src/app/tabs/support-tab.js

@@ -2,9 +2,8 @@ var yo = require('yo-yo')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var remixLib = require('remix-lib')
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
 
 var css = csjs`
   .supportTabView {
@@ -78,7 +77,6 @@ function supportTab (container, appAPI, events, opts) {
       </div>
       <div class="${css.chat}">
         <div class="${css.chatTitle}" onclick=${openLink} title='Click to open chat in Gitter'>
-          <img class="${css.icon}" title="Solidity" src="assets/img/remix_logo_512x512.svg">
           <div class="${css.chatTitleText}">ethereum/remix community chat</div>
         </div>
         <iframe class="${css.chatIframe}" src='https://gitter.im/ethereum/remix/~embed'>

src/app/tabs/tabbed-menu.js

@@ -2,9 +2,8 @@ var yo = require('yo-yo')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var remixLib = require('remix-lib')
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
 
 var helper = require('../../lib/helper')
 

src/app/ui/copy-to-clipboard.js

@@ -4,9 +4,8 @@ const copy = require('clipboard-copy')
 var addTooltip = require('./tooltip')
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var remixLib = require('remix-lib')
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
 
 var css = csjs`
   .copyIcon {

src/app/ui/dropdown.js

@@ -3,8 +3,8 @@ var remixLib = require('remix-lib')
 var EventManager = remixLib.EventManager
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
 
 var css = csjs`
   .dropdown           {

src/app/ui/modaldialog.js

@@ -1,8 +1,7 @@
 var yo = require('yo-yo')
 var csjs = require('csjs-inject')
-var remixLib = require('remix-lib')
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
 
 var css = csjs`
   .modal {

src/app/ui/renderer.js

@@ -5,9 +5,8 @@ var yo = require('yo-yo')
 
 // -------------- styling ----------------------
 // var csjs = require('csjs-inject')
-var remixLib = require('remix-lib')
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
 
 var css = yo`<style>
 .sol.success,

src/app/ui/tooltip.js

@@ -1,9 +1,8 @@
 var yo = require('yo-yo')
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var remixLib = require('remix-lib')
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
 
 var css = csjs`
   .tooltip {

src/storage.js

@@ -1,61 +0,0 @@
-'use strict'
-
-function Storage (prefix) {
-  this.exists = function (name) {
-    return this.get(name) !== null
-  }
-
-  this.get = function (name) {
-    return window.localStorage.getItem(prefix + name)
-  }
-
-  this.set = function (name, content) {
-    try {
-      window.localStorage.setItem(prefix + name, content)
-    } catch (exception) {
-      return false
-    }
-    return true
-  }
-
-  this.remove = function (name) {
-    window.localStorage.removeItem(prefix + name)
-    return true
-  }
-
-  this.rename = function (originalName, newName) {
-    var content = this.get(originalName)
-    if (!this.set(newName, content)) {
-      return false
-    }
-    this.remove(originalName)
-    return true
-  }
-
-  function safeKeys () {
-    // NOTE: this is a workaround for some browsers
-    return Object.keys(window.localStorage).filter(function (item) { return item !== null && item !== undefined })
-  }
-
-  this.keys = function () {
-    return safeKeys()
-      // filter any names not including the prefix
-      .filter(function (item) { return item.indexOf(prefix, 0) === 0 })
-      // remove prefix from filename and add the 'browser' path
-      .map(function (item) { return item.substr(prefix.length) })
-  }
-
-  // on startup, upgrade the old storage layout
-  safeKeys().forEach(function (name) {
-    if (name.indexOf('sol-cache-file-', 0) === 0) {
-      var content = window.localStorage.getItem(name)
-      window.localStorage.setItem(name.replace(/^sol-cache-file-/, 'sol:'), content)
-      window.localStorage.removeItem(name)
-    }
-  })
-
-  // remove obsolete key
-  window.localStorage.removeItem('editor-size-cache')
-}
-
-module.exports = Storage

src/universal-dapp.js

@@ -18,9 +18,8 @@ var copyToClipboard = require('./app/ui/copy-to-clipboard')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
 
 var css = csjs`
   .instanceTitleContainer {