Merge branch 'swap_it' of https://github.com/ethereum/remix-ide into swap_it

src/app/compiler/compiler-imports.js

@@ -4,14 +4,16 @@ var swarmgw = require('swarmgw')()
 var request = require('request')
 
 module.exports = class CompilerImports {
-  constructor () {
+  constructor (githubAccessToken) {
+    this.githubAccessToken = githubAccessToken || (() => {})
     this.previouslyHandled = {} // cache import so we don't make the request at each compilation.
   }
 
   handleGithubCall (root, path, cb) {
+    var accessToken = this.githubAccessToken() ? '?access_token=' + this.githubAccessToken() : ''
     return request.get(
       {
-        url: 'https://api.github.com/repos/' + root + '/contents/' + path,
+        url: 'https://api.github.com/repos/' + root + '/contents/' + path + accessToken,
         json: true
       },
       (err, r, data) => {

src/app/files/file-explorer.js

@@ -132,6 +132,7 @@ function fileExplorer (localRegistry, files) {
   })
 
   self.treeView.event.register('nodeRightClick', function (key, data, label, event) {
+    if (key === self.files.type) return
     MENU_HANDLE && MENU_HANDLE.hide(null, true)
     MENU_HANDLE = contextMenu(event, {
       'Rename': () => {
@@ -147,6 +148,7 @@ function fileExplorer (localRegistry, files) {
   })
 
   self.treeView.event.register('leafRightClick', function (key, data, label, event) {
+    if (key === self.files.type) return
     MENU_HANDLE && MENU_HANDLE.hide(null, true)
     MENU_HANDLE = contextMenu(event, {
       'Rename': () => {

src/app/panels/left-icon-panel.js

@@ -151,10 +151,11 @@ const css = csjs`
   }
   .dragbar             {
     position           : absolute;
-    width              : 0.5em;
+    width              : ${styles.rightPanel.dragbarWidth};
     top                : 3em;
     bottom             : 0;
     cursor             : col-resize;
+    background-color   : ${styles.rightPanel.dragbarBackgroundColor};
     z-index            : 999;
     border-left        : 2px solid ${styles.rightPanel.bar_Dragging};
   }

src/app/panels/styles/terminal-styles.js

@@ -78,7 +78,7 @@ var css = csjs`
     line-height       : 2ch;
     padding           : 1ch;
     margin-top        : 2ch;
-    border-top        : 0.07ch solid ${styles.colors.veryLightGrey};
+    border-top        : ${styles.terminal.blockBorderTop};
     color             : ${styles.appProperties.mainText_Color};
   }
   .cli                {

src/app/tabs/compile-tab.js

@@ -46,9 +46,8 @@ module.exports = class CompileTab {
     self._components = {}
     self._components.registry = localRegistry || globalRegistry
     self._components.queryParams = new QueryParams()
-    self._components.compilerImport = new CompilerImport()
+    self._components.compilerImport = new CompilerImport(() => { return self._deps.config.get('settings/gist-access-token') })
     self._components.compiler = new Compiler((url, cb) => self.importFileCb(url, cb))
-
     // dependencies
     self._deps = {
       editor: self._components.registry.get('editor').api,
@@ -511,8 +510,8 @@ module.exports = class CompileTab {
       },
       (error, content, cleanUrl, type, url) => {
         if (!error) {
-          if (self._deps.filesProviders[type]) {
-            self._deps.filesProviders[type].addReadOnly(cleanUrl, content, url)
+          if (self._deps.fileProviders[type]) {
+            self._deps.fileProviders[type].addReadOnly(cleanUrl, content, url)
           }
           cb(null, content)
         } else {

src/app/tabs/settings-tab.js

@@ -26,7 +26,7 @@ module.exports = class SettingsTab {
       el: null,
       optionVM: null, personal: null, warnPersonalMode: null, generateContractMetadata: null,
       pluginInput: null, versionSelector: null, version: null,
-      theme: { dark: null, light: null },
+      theme: { dark: null, light: null, clean: null },
       plugins: {},
       config: {
         general: null, themes: null,
@@ -74,6 +74,7 @@ module.exports = class SettingsTab {
 
     self._view.theme.light = yo`<input onchange=${onswitch2lightTheme} class="${css.col1}" name="theme" id="themeLight" type="radio">`
     self._view.theme.dark = yo`<input onchange=${onswitch2darkTheme} class="${css.col1}" name="theme" id="themeDark" type="radio">`
+    self._view.theme.clean = yo`<input onchange=${onswitch2cleanTheme} class="${css.col1}" name="theme" id="themeClean" type="radio">`
     self._view.theme[self.data.currentTheme].setAttribute('checked', 'checked')
 
     self._view.config.general = yo`
@@ -100,7 +101,7 @@ module.exports = class SettingsTab {
     self._view.gistToken = yo`
       <div class="${css.info}">
         <div class=${css.title}>Gist Access Token</div>
-        <div class="${css.crowNoFlex}">Manage the access token used to publish to Gist.</div>
+        <div class="${css.crowNoFlex}">Manage the access token used to publish to Gist and retrieve Github contents.</div>
         <div class="${css.crowNoFlex}">Go to github token page (link below) to create a new token and save it in Remix. Make sure this token has only 'create gist' permission.</div>
         <div class="${css.crowNoFlex}"><a target="_blank" href="https://github.com/settings/tokens">https://github.com/settings/tokens</a></div>
         <div class="${css.crowNoFlex}">${self._view.gistToken}</div>
@@ -120,6 +121,10 @@ module.exports = class SettingsTab {
           ${self._view.theme.dark}
           <label for="themeDark">Dark Theme</label>
         </div>
+        <div class="${css.crow}">
+          ${self._view.theme.clean}
+          <label for="themeClean">Clean Theme</label>
+        </div>
       </div>`
     self._view.config.plugins = yo`<div></div>`
     self._view.config.plugin = yo`
@@ -203,6 +208,10 @@ module.exports = class SettingsTab {
       styleGuide.switchTheme('light')
       window.location.reload()
     }
+    function onswitch2cleanTheme (event) {
+      styleGuide.switchTheme('clean')
+      window.location.reload()
+    }
     function onchangePersonal (event) {
       self._deps.config.set('settings/personal-mode', !self._deps.config.get('settings/personal-mode'))
     }

src/app/tabs/styles/run-tab-styles.js

@@ -130,15 +130,15 @@ var css = csjs`
     ${styles.rightPanel.runTab.button_transaction}
   }
   .atAddress {
-    ${styles.rightPanel.runTab.button_atAddress}
+    margin: 0;
     min-width: 100px;
     width: 100px;
     font-size: 10px;
-    margin: 0;
     word-break: inherit;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-right: 0;
+    ${styles.rightPanel.runTab.button_atAddress}
   }
   .atAddressSect {
     margin-top: 6px;

src/app/ui/styles-guide/style-guide.js

@@ -411,6 +411,7 @@ function styleGuide () {
 
       bar_Ghost: appProperties.ghostBar,
       bar_Dragging: appProperties.draggingBar,
+      dragbarBorderRight: '2px solid hsla(215, 81%, 79%, .3)',
 
       icon_Color_Menu: appProperties.icon_Color,
       icon_HoverColor_Menu: appProperties.icon_HoverColor,
@@ -460,6 +461,8 @@ function styleGuide () {
       text_Regular_TransactionLog: appProperties.supportText_Color,
       text_Button: appProperties.oppositeText_Color,
 
+      blockBorderTop: '0.07ch solid ' + cssProperties.colors.veryLightGrey,
+
       icon_Color_Log_Succeed: appProperties.success_BorderColor,
       icon_Color_Log_Failed: appProperties.errorText_Color,
       icon_BackgroundColor_Log_Call: appProperties.infoText_Color,
@@ -514,6 +517,8 @@ function styleGuide () {
 
       bar_Ghost: appProperties.ghostBar,
       bar_Dragging: appProperties.draggingBar,
+      dragbarWidth: '0.5rem',
+      dragbarBackgroundColor: '',
 
       icon_Color_TogglePanel: appProperties.icon_Color,
       icon_HoverColor_TogglePanel: appProperties.icon_HoverColor,

src/app/ui/styles-guide/styleGuideDark.js

@@ -418,6 +418,7 @@ function styleGuideDark () {
 
       bar_Ghost: appProperties.ghostBar,
       bar_Dragging: appProperties.draggingBar,
+      dragbarBorderRight: '2px solid hsla(215, 81%, 79%, .3)',
 
       icon_Color_Menu: appProperties.icon_Color,
       icon_HoverColor_Menu: appProperties.icon_HoverColor,
@@ -467,6 +468,8 @@ function styleGuideDark () {
       text_Regular_TransactionLog: appProperties.supportText_Color,
       text_Button: appProperties.oppositeText_Color,
 
+      blockBorderTop: '0.07ch solid ' + cssProperties.colors.veryLightGrey,
+
       icon_Color_TogglePanel: appProperties.icon_Color,
       icon_HoverColor_TogglePanel: appProperties.icon_HoverColor,
       icon_Color_Menu: appProperties.icon_Color,
@@ -516,6 +519,8 @@ function styleGuideDark () {
 
       bar_Ghost: appProperties.ghostBar,
       bar_Dragging: appProperties.draggingBar,
+      dragbarWidth: '0.5rem',
+      dragbarBackgroundColor: '',
 
       icon_Color_TogglePanel: appProperties.icon_Color,
       icon_HoverColor_TogglePanel: appProperties.icon_HoverColor,

src/app/ui/styles-guide/theme-chooser.js

@@ -1,5 +1,6 @@
 var styleGuideLight = require('./style-guide')
 var styleGuideDark = require('./styleGuideDark')
+var styleGuideClean = require('./styleGuideClean')
 var Storage = require('remix-lib').Storage
 module.exports = {
 
@@ -8,6 +9,8 @@ module.exports = {
     if (themeStorage.exists('theme')) {
       if (themeStorage.get('theme') === 'dark') {
         return styleGuideDark()
+      } else if (themeStorage.get('theme') === 'clean') {
+        return styleGuideClean()
       } else {
         return styleGuideLight()
       }
@@ -23,6 +26,8 @@ module.exports = {
       return styleGuideDark()
     } else if (theme === 'light') {
       return styleGuideLight()
+    } else if (theme === 'clean') {
+      return styleGuideClean()
     } else {
       return styleGuideLight()
     }

src/lib/panels-resize.js

@@ -12,7 +12,7 @@ const css = csjs`
     bottom            : 0;
     cursor            : col-resize;
     z-index           : 999;
-    border-right      : 2px solid hsla(215, 81%, 79%, .3);
+    border-right      : ${styles.leftPanel.dragbarBorderRight};
   }
   .ghostbar           {
     width             : 3px;