diff --git a/assets/css/browser-solidity.css b/assets/css/browser-solidity.css index 3b09d72e68..fdb19acb93 100644 --- a/assets/css/browser-solidity.css +++ b/assets/css/browser-solidity.css @@ -149,10 +149,12 @@ body { #output { display: block; + padding: 1em; } #header { - font-size: 12px; + font-size: 13px; + height: 100%; } #header #solIcon { @@ -165,7 +167,7 @@ body { border-bottom: 3px solid #F4F6FF; overflow: hidden; height: 2em; - font-size: 1.25em; + font-size: 1em; padding-top: 0.5em; box-sizing: content-box; } @@ -176,15 +178,6 @@ body { padding: 0; } -#header #options li { - float: left; - padding: 0.3em 0.6em; - font-size: 1em; - cursor: pointer; - background-color: transparent; - margin-right: 0.5em; -} - #header #options li.active { background-color: #F4F6FF; } @@ -197,11 +190,12 @@ body { clear: both; overflow: auto; background-color: #F4F6FF; + height: 100%; } #header #optionViews > div { display: none; - padding: 1em 0.5em 0.5em; + padding: .5em .5em .5em; } #header #optionViews.txView #txView { @@ -214,6 +208,7 @@ body { #header #optionViews.publishView #publishView { display: block; + padding: 3em; } #header #optionViews.envView #envView { @@ -222,6 +217,7 @@ body { #header #optionViews.debugView #debugView { display: block; + padding: 3em; } #header #optionViews.verificationView #verificationView { @@ -230,6 +226,8 @@ body { #header #optionViews.staticanalysisView #staticanalysisView { display: block; + padding: 3em; + line-height: 1.5em; } #header #optionViews.txView input, @@ -243,17 +241,13 @@ body { #header #optionViews .pre { word-wrap: break-word; - background-color: #C6CFF7; + background-color: rgba(255, 255, 255, 0.5); font-family: monospace; border-radius: 3px; display: inline-block; padding: 0 0.6em; } -#header #optionViews .hide { - display: none; -} - #header .info { font-family: monospace; min-height: 6em; @@ -265,12 +259,11 @@ body { background-color: #C6CFF7; font-size: 12px; padding: 0.25em; - margin-bottom: .5em; + margin: 3em 1em .5em 0; color: black; border:0 none; border-radius: 3px; width: 8em; - margin-right: 1em; cursor: pointer; } @@ -291,12 +284,11 @@ body { background-color: #C6CFF7; font-size: 12px; padding: 0.25em; - margin-bottom: .5em; + margin: 2em 1em .5em 0; color: black; border:0 none; border-radius: 3px; width: 8em; - margin-right: 1em; cursor: pointer; } @@ -321,12 +313,28 @@ body { #header #executionContext { display: block; word-wrap: break-word; + padding: 1.5em; + font-weight: bold; +} + +#selectExEnv { + text-decoration: none; + background-color: #C6CFF7; + cursor: pointer; + font-size: 12px; + color: black; + border-radius: 3px; + border: 0 none; } #header #versionSelector { + text-decoration: none; + background-color: #C6CFF7; + cursor: pointer; + font-size: 12px; + color: black; + border-radius: 3px; border: 0 none; - font-family: monospace; - background-color: transparent; } .col1 { @@ -345,9 +353,6 @@ body { .contract.hide { padding-bottom: 0; -} - -.contract.hide { margin: 0; } @@ -364,6 +369,7 @@ body { opacity: 0.5; margin-right: 0.4em; font-size: 10px; + margin-top: 0.2em; } .contract.hide > .title:before { @@ -380,7 +386,18 @@ body { overflow: auto; display: block; clear: both; - margin: 0.5em; + margin: 1.5em; + font-weight: bold; +} + +.crow #txorigin { + text-decoration: none; + background-color: #C6CFF7; + cursor: pointer; + font-size: 12px; + color: black; + border-radius: 3px; + border: 0 none; } .contractDetails button { @@ -479,7 +496,7 @@ input[type="file"] { position:absolute; z-index:20; background-color:#F77E79; -} +} .highlightcode_fullLine { position:absolute; @@ -488,6 +505,6 @@ input[type="file"] { opacity: 0.5; } -.ace_gutter-cell.ace_breakpoint{ +.ace_gutter-cell.ace_breakpoint{ background-color: #F77E79; } diff --git a/assets/css/universal-dapp.css b/assets/css/universal-dapp.css index 0ad1931c49..4b67b7c51d 100644 --- a/assets/css/universal-dapp.css +++ b/assets/css/universal-dapp.css @@ -1,5 +1,5 @@ .udapp { - padding: 1em; + padding: .5em; border: 1px dotted #4D5686; position: relative; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); @@ -42,7 +42,6 @@ } .udapp .contract { - margin-bottom: 1em; clear: both; } @@ -53,19 +52,24 @@ .udapp .title { margin-bottom: 0.4em; - padding: 0.2em; - background-color: rgba(255, 255, 255, 0.5); - display: block; + padding: 1em; + background-color: #C6CFF7; font-weight: bold; - padding-right: 2em; + display: flex; + justify-content: space-between; word-wrap: break-word; position: relative; + border-radius: 3px; } +.udapp .definitionTitle { + background-color: #C6CFD9; +} + +.udapp .title:hover { + opacity: 0.8; +} .udapp .title .size { - position: absolute; - right: 2.2em; - top: 0.2em; font-weight: normal; } @@ -142,6 +146,7 @@ } .udapp .instance .title { + content: "\25BC"; cursor: pointer; } @@ -156,6 +161,7 @@ opacity: 0.5; margin-right: 0.4em; font-size: 10px; + margin-top: 0.2em; } .udapp .instance.hide > *:not(.title) { diff --git a/index.html b/index.html index 23df0f5c38..ffdd2dce67 100644 --- a/index.html +++ b/index.html @@ -57,93 +57,93 @@ -
diff --git a/package.json b/package.json index 7cf1339a8f..c190509d5c 100644 --- a/package.json +++ b/package.json @@ -30,10 +30,8 @@ "babel-plugin-transform-es2015-unicode-regex": "^6.11.0", "babel-plugin-transform-regenerator": "^6.16.1", "babel-polyfill": "^6.22.0", - "babel-plugin-yo-yoify": "^0.3.3", "babel-preset-es2015": "^6.24.0", - "babelify": "^7.3.0", "brace": "^0.8.0", "browserify": "^13.0.0", @@ -116,24 +114,36 @@ }, "browserify": { "transform": [ - ["babelify", { - "sourceMapsAbsolute": false, - "sourceMaps": true, - "plugins": [ - ["fast-async", { - "runtimePattern": null, - "compiler": { - "es7": true, - "noRuntime": true, - "promises": true, - "wrapAwait": true - } - }], - ["yo-yoify"] - ], - "presets": ["es2015"] - }], - ["uglifyify"] + [ + "babelify", + { + "sourceMapsAbsolute": false, + "sourceMaps": true, + "plugins": [ + [ + "fast-async", + { + "runtimePattern": null, + "compiler": { + "es7": true, + "noRuntime": true, + "promises": true, + "wrapAwait": true + } + } + ], + [ + "yo-yoify" + ] + ], + "presets": [ + "es2015" + ] + } + ], + [ + "uglifyify" + ] ] }, "scripts": { @@ -160,5 +170,8 @@ "test": "standard; npm run csslint; node test/index.js", "test-browser": "npm-run-all -lpr selenium downloadsolc make-mock-compiler serve browsertest", "watch": "watchify src/index.js -dv --delay 0 -p browserify-reload -o '| npm run sourcemap'" + }, + "dependencies": { + "csjs-inject": "^1.0.1" } } diff --git a/src/app.js b/src/app.js index 3789685d3c..4da7b9c1fa 100644 --- a/src/app.js +++ b/src/app.js @@ -858,7 +858,7 @@ var run = function () { }) compiler.event.register('loadingCompiler', this, function (url, usingWorker) { - setVersionText(usingWorker ? '(loading using worker)' : '(loading)') + setVersionText(usingWorker ? '(loading using worker)' : '( Loading... Please, wait a moment. )') }) compiler.event.register('compilerLoaded', this, function (version) { @@ -940,7 +940,7 @@ var run = function () { loadVersion($('#versionSelector').val()) }) - var header = new Option('Select new compiler version to load') + var header = new Option('Click to select new compiler version') header.disabled = true header.selected = true $('#versionSelector').append(header) diff --git a/src/app/execution-context.js b/src/app/execution-context.js index 84a7e81fcf..ce6f5b18cd 100644 --- a/src/app/execution-context.js +++ b/src/app/execution-context.js @@ -1,4 +1,4 @@ -/* global confirm */ +/* global confirm, prompt */ 'use strict' var $ = require('jquery') @@ -94,43 +94,25 @@ function ExecutionContext () { this.setContext = function (context) { executionContext = context executionContextChange(context) - setExecutionContextRadio() } - var $injectedToggle = $('#injected-mode') - var $vmToggle = $('#vm-mode') - var $web3Toggle = $('#web3-mode') var $web3endpoint = $('#web3Endpoint') if (web3.providers && web3.currentProvider instanceof web3.providers.IpcProvider) { $web3endpoint.val('ipc') } - setExecutionContextRadio() - - $injectedToggle.on('change', executionContextUIChange) - $vmToggle.on('change', executionContextUIChange) - $web3Toggle.on('change', executionContextUIChange) - $web3endpoint.on('change', function () { - setProviderFromEndpoint() - if (executionContext === 'web3') { - self.event.trigger('web3EndpointChanged') - } - }) - - function executionContextUIChange (ev) { - executionContextChange(ev.target.value) - } - function executionContextChange (context) { if (context === 'web3' && !confirm('Are you sure you want to connect to a local ethereum node?')) { - setExecutionContextRadio() + return false } else if (context === 'injected' && injectedProvider === undefined) { - setExecutionContextRadio() + return false } else { if (context === 'web3') { executionContext = context - setProviderFromEndpoint() + var endpoint = prompt('Please type Web3 Provider Endpoint', 'http://localhost:8545') + setProviderFromEndpoint(endpoint) + self.event.trigger('web3EndpointChanged') self.event.trigger('contextChanged', ['web3']) } else if (context === 'injected') { executionContext = context @@ -143,11 +125,11 @@ function ExecutionContext () { }) self.event.trigger('contextChanged', ['vm']) } + return true } } - function setProviderFromEndpoint () { - var endpoint = $web3endpoint.val() + function setProviderFromEndpoint (endpoint) { if (endpoint === 'ipc') { web3.setProvider(new web3.providers.IpcProvider()) } else { @@ -155,15 +137,16 @@ function ExecutionContext () { } } - function setExecutionContextRadio () { - if (executionContext === 'injected') { - $injectedToggle.get(0).checked = true - } else if (executionContext === 'vm') { - $vmToggle.get(0).checked = true - } else if (executionContext === 'web3') { - $web3Toggle.get(0).checked = true + /* --------------------------------------------------------------------------- + DROPDOWN + --------------------------------------------------------------------------- */ + + var selectExEnv = document.querySelector('#selectExEnv') + selectExEnv.addEventListener('change', function (event) { + if (!executionContextChange(selectExEnv.options[selectExEnv.selectedIndex].value)) { + selectExEnv.value = executionContext } - } + }) } module.exports = ExecutionContext diff --git a/src/app/renderer.js b/src/app/renderer.js index 24d948731b..777c5906db 100644 --- a/src/app/renderer.js +++ b/src/app/renderer.js @@ -16,6 +16,10 @@ function Renderer (appAPI, formalVerificationEvent, compilerEvent) { $('#output').empty() if (success) { self.contracts(data, source) + $('#header #menu .envView').css('color', '') + } else { + // envView is the `Contract` tab, as a refactor the entire envView should have his own module + $('#header #menu .envView').css('color', '#FF8B8B') } // NOTE: still need to display as there might be warnings diff --git a/src/app/staticanalysis/staticAnalysisView.js b/src/app/staticanalysis/staticAnalysisView.js index e016ac2ca8..ff163d40e7 100644 --- a/src/app/staticanalysis/staticAnalysisView.js +++ b/src/app/staticanalysis/staticAnalysisView.js @@ -3,6 +3,14 @@ var StaticAnalysisRunner = require('./staticAnalysisRunner.js') var yo = require('yo-yo') var $ = require('jquery') var utils = require('../utils') +var csjs = require('csjs-inject') + +var css = csjs` + .analysis { + margin-top: 2em; + font-height: 1.5em; + } +` function staticAnalysisView (appAPI, compilerEvent) { this.view = null @@ -25,7 +33,7 @@ function staticAnalysisView (appAPI, compilerEvent) { staticAnalysisView.prototype.render = function () { var self = this - var view = yo`
+ var view = yo`
Static Analysis
@@ -99,23 +107,23 @@ function renderModules (modules) { return Object.keys(groupedModules).map((categoryId, i) => { var category = groupedModules[categoryId] var entriesDom = category.map((item, i) => { - return yo`` + return yo` + + ` }) return yo`
+
+ ${category[0].categoryDisplayName} + ${entriesDom}
` }) @@ -129,4 +137,3 @@ function preProcessModules (arr) { return item }) } - diff --git a/src/universal-dapp.js b/src/universal-dapp.js index 5833d2d6a6..2b4eec6134 100644 --- a/src/universal-dapp.js +++ b/src/universal-dapp.js @@ -9,6 +9,21 @@ var EventManager = require('./lib/eventManager') var crypto = require('crypto') var async = require('async') var TxRunner = require('./app/txRunner') +var csjs = require('csjs-inject') + +var css = csjs` + .options { + float: left; + padding: 0.7em 0.3em; + font-size: 0.9em; + cursor: pointer; + background-color: transparent; + margin-right: 0.5em; + font-size: 1em; + } +` +;[...document.querySelectorAll('#header #options li')].forEach(addCss) +function addCss (el) { el.classList.add(css.options) } /* trigger debugRequested @@ -162,6 +177,7 @@ UniversalDApp.prototype.render = function () { } else { var $title = $('').text(self.contracts[c].name) if (self.contracts[c].bytecode) { + $title.addClass('definitionTitle') $title.append($('
').text((self.contracts[c].bytecode.length / 2) + ' bytes')) } $contractEl.append($title).append(self.getCreateInterface($contractEl, self.contracts[c]))