Merge pull request #644 from ethereum/theme_switch

Multiple themes for access by browser sol theme-chooser.js

remix-debugger/src/ui/ButtonNavigator.js

@@ -4,8 +4,8 @@ var EventManager = remixLib.EventManager
 var yo = require('yo-yo')
 
 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`
   .buttons {

remix-debugger/src/ui/CodeListView.js

@@ -6,8 +6,8 @@ var ui = remixLib.helpers.ui
 var DropdownPanel = require('./DropdownPanel')
 var EventManager = remixLib.EventManager
 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`
   .instructions {

remix-debugger/src/ui/DropdownPanel.js

@@ -7,8 +7,8 @@ var TreeView = require('./TreeView')
 var EventManager = remixLib.EventManager
 
 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`
   .title {

remix-debugger/src/ui/TxBrowser.js

@@ -8,8 +8,8 @@ var init = remixLib.init
 var DropdownPanel = require('./DropdownPanel')
 var style = require('./styles/basicStyles')
 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`
   .container {

remix-lib/index.js

@@ -13,6 +13,9 @@ var Web3VMProvider = require('./src/web3Provider/web3VmProvider')
 var AstWalker = require('./src/astWalker')
 var global = require('./src/global')
 var styleGuide = require('./src/ui/style-guide')
+var styleGuideDark = require('./src/ui/styleGuideDark')
+var themeChooser = require('./src/ui/theme-chooser')
+var Storage = require('./src/storage')
 
 if (typeof (module) !== 'undefined' && typeof (module.exports) !== 'undefined') {
   module.exports = modules()
@@ -37,12 +40,15 @@ function modules () {
     },
     SourceMappingDecoder: SourceMappingDecoder,
     SourceLocationTracker: SourceLocationTracker,
+    Storage: Storage,
     init: init,
     util: util,
     AstWalker: AstWalker,
     global: global,
     ui: {
-      styleGuide: styleGuide
+      styleGuide: styleGuide,
+      styleGuideDark: styleGuideDark,
+      themeChooser: themeChooser
     }
   }
 }

remix-lib/src/storage.js

@@ -0,0 +1,61 @@
+'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

remix-lib/src/ui/styleGuideDark.js

@@ -1,8 +1,6 @@
-// var csjs = require('csjs-inject')
+module.exports = styleGuideDark
 
-module.exports = styleGuide
-
-function styleGuide () {
+function styleGuideDark () {
   /* --------------------------------------------------------------------------
 
                               CSS PROPERTIES

remix-lib/src/ui/theme-chooser.js

@@ -0,0 +1,31 @@
+// var remixLib = require('remix-lib')
+var styleGuideLight = require('./style-guide')
+var styleGuideDark = require('./styleGuideDark')
+var Storage = require('../storage')
+module.exports = {
+
+  chooser: function () {
+    var themeStorage = new Storage('style:')
+    if (themeStorage.exists('theme')) {
+      if (themeStorage.get('theme') === 'dark') {
+        return styleGuideDark()
+      } else {
+        return styleGuideLight()
+      }
+    } else {
+      return styleGuideLight()
+    }
+  },
+
+  switchTheme: function (theme) {
+    var themeStorage = new Storage('style:')
+    themeStorage.set('theme', theme)
+    if (theme === 'dark') {
+      return styleGuideDark()
+    } else if (theme === 'light') {
+      return styleGuideLight()
+    } else {
+      return styleGuideLight()
+    }
+  }
+}