From 405ea9d35167fc79f8f39f2de7456d76a5276f38 Mon Sep 17 00:00:00 2001 From: chriseth Date: Wed, 19 Apr 2017 20:05:34 +0200 Subject: [PATCH 01/11] File explorer cleanup. --- src/app.js | 62 ++++++++++++++++++---------------------- src/app/file-explorer.js | 14 +++++---- src/app/file-panel.js | 20 +++++++++---- 3 files changed, 50 insertions(+), 46 deletions(-) diff --git a/src/app.js b/src/app.js index c8c1931f98..16f0836553 100644 --- a/src/app.js +++ b/src/app.js @@ -63,19 +63,12 @@ window.addEventListener('message', function (ev) { } }, false) -/* - trigger tabChanged -*/ var run = function () { var self = this this.event = new EventManager() var fileStorage = new Storage('sol:') var files = new Files(fileStorage) var config = new Config(fileStorage) - var uiStorage = new Storage('sol-ui:') - var ui = new Files(uiStorage) - - ui.set('currentFile', '') // return all the files, except the temporary/readonly ones function packageFiles () { @@ -184,56 +177,57 @@ var run = function () { 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 + // and file-panel.js adds its elements (including css), see "Editor" above var css = csjs` .filepanel { display : flex; width : 200px; } ` - var filepanel = document.querySelector('#filepanel') - filepanel.className = css.filepanel + var filepanelContainer = document.querySelector('#filepanel') + filepanelContainer.className = css.filepanel var FilePanelAPI = { createName: createNonClashingName, switchToFile: switchToFile, event: this.event } - var el = new FilePanel(FilePanelAPI, files) - filepanel.appendChild(el) - var api = el.api + var filePanel = new FilePanel(FilePanelAPI, files) + // TODO this should happen inside file-panel.js + filepanelContainer.appendChild(filePanel) - api.register('ui', function changeLayout (data) { + filePanel.events.register('ui-hidden', function changeLayout (isHidden) { var value - if (data.type === 'minimize') { + if (isHidden) { value = -parseInt(window['filepanel'].style.width) value = (isNaN(value) ? -window['filepanel'].getBoundingClientRect().width : value) window['filepanel'].style.position = 'absolute' window['filepanel'].style.left = (value - 5) + 'px' window['filepanel'].style.width = -value + 'px' window['tabs-bar'].style.left = '45px' - } else if (data.type === 'maximize') { + } else { value = -parseInt(window['filepanel'].style.left) + 'px' window['filepanel'].style.position = 'static' window['filepanel'].style.width = value window['filepanel'].style.left = '' window['tabs-bar'].style.left = value - } else { - window['filepanel'].style.width = data.width + 'px' - window['tabs-bar'].style.left = data.width + 'px' } }) - api.register('focus', function (path) { - [...window.files.querySelectorAll('.file .name')].forEach(function (span) { - if (span.innerText === path) switchToFile(path) - }) + filePanel.events.register('ui-resize', function changeLayout (width) { + window['filepanel'].style.width = width + 'px' + window['tabs-bar'].style.left = width + 'px' }) files.event.register('fileRenamed', function (oldName, newName) { + // TODO please never use 'window' when it is possible to use a variable + // that references the DOM node [...window.files.querySelectorAll('.file .name')].forEach(function (span) { if (span.innerText === oldName) span.innerText = newName }) }) files.event.register('fileRemoved', function (path) { - if (path === ui.get('currentFile')) { - ui.set('currentFile', '') + if (path === config.get('currentFile')) { + config.set('currentFile', '') switchToNextFile() } editor.discard(path) @@ -338,7 +332,7 @@ var run = function () { if (!files.rename(originalName, newName)) { alert('Error while renaming file') } else { - ui.set('currentFile', '') + config.set('currentFile', '') switchToFile(newName) editor.discard(originalName) } @@ -368,7 +362,7 @@ var run = function () { function switchToFile (file) { editorSyncFile() - ui.set('currentFile', file) + config.set('currentFile', file) if (files.isReadOnly(file)) { editor.openReadOnly(file, files.get(file)) @@ -399,10 +393,10 @@ var run = function () { $filesEl.append($('
  • ' + name + '
    • ')) } - var currentFileOpen = !!ui.get('currentFile') + var currentFileOpen = !!config.get('currentFile') if (currentFileOpen) { - var active = $('#files .file').filter(function () { return $(this).find('.name').text() === ui.get('currentFile') }) + var active = $('#files .file').filter(function () { return $(this).find('.name').text() === config.get('currentFile') }) active.addClass('active') } $('#input').toggle(currentFileOpen) @@ -640,7 +634,7 @@ var run = function () { this.fullLineMarker = null if (lineColumnPos) { var source = compiler.lastCompilationResult.data.sourceList[location.file] // auto switch to that tab - if (ui.get('currentFile') !== source) { + if (config.get('currentFile') !== source) { switchToFile(source) } this.statementMarker = editor.addMarker(lineColumnPos, 'highlightcode') @@ -764,12 +758,12 @@ var run = function () { var rendererAPI = { error: (file, error) => { - if (file === ui.get('currentFile')) { + if (file === config.get('currentFile')) { editor.addAnnotation(error) } }, errorClick: (errFile, errLine, errCol) => { - if (errFile !== ui.get('currentFile') && files.exists(errFile)) { + if (errFile !== config.get('currentFile') && files.exists(errFile)) { switchToFile(errFile) } editor.gotoLine(errLine, errCol) @@ -821,7 +815,7 @@ var run = function () { if (transactionDebugger.isActive) return editorSyncFile() - var currentFile = ui.get('currentFile') + var currentFile = config.get('currentFile') if (currentFile) { var target = currentFile var sources = {} @@ -831,7 +825,7 @@ var run = function () { } function editorSyncFile () { - var currentFile = ui.get('currentFile') + var currentFile = config.get('currentFile') if (currentFile) { var input = editor.get(currentFile) files.set(currentFile, input) @@ -843,7 +837,7 @@ var run = function () { var saveTimeout = null function editorOnChange () { - var currentFile = ui.get('currentFile') + var currentFile = config.get('currentFile') if (!currentFile) { return } diff --git a/src/app/file-explorer.js b/src/app/file-explorer.js index 1d0c88a8c5..5d23e7b659 100755 --- a/src/app/file-explorer.js +++ b/src/app/file-explorer.js @@ -37,7 +37,7 @@ module.exports = fileExplorer function fileExplorer (appAPI, files) { var fileEvents = files.event - var tv = new Treeview({ + var treeView = new Treeview({ extractData: function (value, tree, key) { var newValue = {} // var isReadOnly = false @@ -86,10 +86,11 @@ function fileExplorer (appAPI, files) { var focusElement = null var textUnderEdit = null - var element = tv.render(files.listAsTree()) + var element = treeView.render(files.listAsTree()) element.className = css.fileexplorer - var api = new EventManager() + var events = new EventManager() + var api = {} api.addFile = function addFile (file) { var name = file.name if (!files.exists(name) || confirm('The file ' + name + ' already exists! Would you like to overwrite it?')) { @@ -97,7 +98,7 @@ function fileExplorer (appAPI, files) { fileReader.onload = function (event) { var success = files.set(name, event.target.result) if (!success) alert('Failed to create file ' + name) - else api.trigger('focus', [name]) + else events.trigger('focus', [name]) } fileReader.readAsText(file) } @@ -113,7 +114,7 @@ function fileExplorer (appAPI, files) { var label = getLabelFrom(li) var filepath = label.dataset.path var isFile = label.className.indexOf('file') === 0 - if (isFile) api.trigger('focus', [filepath]) + if (isFile) events.trigger('focus', [filepath]) } function hover (event) { @@ -247,12 +248,13 @@ function fileExplorer (appAPI, files) { } function fileAdded (filepath) { - var el = tv.render(files.listAsTree()) + var el = treeView.render(files.listAsTree()) el.className = css.fileexplorer element.parentElement.replaceChild(el, element) element = el } + element.events = events element.api = api return element } diff --git a/src/app/file-panel.js b/src/app/file-panel.js index 1e7f9da311..27ace314ab 100644 --- a/src/app/file-panel.js +++ b/src/app/file-panel.js @@ -106,11 +106,13 @@ function filepanel (appAPI, files) { ` } - var api = new EventManager() + var events = new EventManager() var element = template() - element.api = api - fileExplorer.api.register('focus', function (path) { - api.trigger('focus', [path]) + // TODO please do not add custom javascript objects, which have no + // relation to the DOM to DOM nodes + element.events = events + fileExplorer.events.register('focus', function (path) { + appAPI.switchToFile(path) }) return element @@ -120,10 +122,15 @@ function filepanel (appAPI, files) { this.classList.toggle(css.isVisible) this.children[0].classList.toggle('fa-angle-double-right') this.children[0].classList.toggle('fa-angle-double-left') - api.trigger('ui', [{ type: isHidden ? 'minimize' : 'maximize' }]) + events.trigger('ui-hidden', [isHidden]) } function uploadFile (event) { + // TODO This should not go to the file explorer. + // The file explorer is merely a view on the current state of + // the files module. Please ask the user here if they want to overwrite + // a file and then just use `files.add`. The file explorer will + // pick that up via the 'fileAdded' event from the files module. ;[...this.files].forEach(fileExplorer.api.addFile) } @@ -159,7 +166,8 @@ function filepanel (appAPI, files) { document.removeEventListener('keydown', cancelGhostbar) var width = (event.pageX < limit) ? limit : event.pageX element.style.width = width + 'px' - api.trigger('ui', [{ type: 'resize', width: width }]) + // Please change this to something like 'ui-resize' + events.trigger('ui-resize', [width]) } function createNewFile () { From 56850ce7f5ac2bac5446ed1222058b7964770f27 Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 8 May 2017 11:42:07 +0200 Subject: [PATCH 02/11] don't sync if nothing is loaded in the editor --- src/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app.js b/src/app.js index 16f0836553..3a627f7c6b 100644 --- a/src/app.js +++ b/src/app.js @@ -826,7 +826,7 @@ var run = function () { function editorSyncFile () { var currentFile = config.get('currentFile') - if (currentFile) { + if (currentFile && editor.current()) { var input = editor.get(currentFile) files.set(currentFile, input) } From 159ce2d91428293bbbb795189fe83cec0059e7a0 Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 8 May 2017 11:47:08 +0200 Subject: [PATCH 03/11] add sol extension --- src/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app.js b/src/app.js index 3a627f7c6b..b6205e45d2 100644 --- a/src/app.js +++ b/src/app.js @@ -84,7 +84,7 @@ var run = function () { while (files.exists(path + counter)) { counter = (counter | 0) + 1 } - return path + counter + return path + counter + '.sol' } // Add files received from remote instance (i.e. another browser-solidity) From 5c75a5f6da46e57f2f4d74b7415fa390c9efe7f9 Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 8 May 2017 11:47:42 +0200 Subject: [PATCH 04/11] load previously loaded file at init --- src/app.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/app.js b/src/app.js index b6205e45d2..662ba0aac3 100644 --- a/src/app.js +++ b/src/app.js @@ -379,7 +379,12 @@ var run = function () { } } - switchToNextFile() + var previouslyOpenedFile = config.get('currentFile') + if (previouslyOpenedFile && files.get(previouslyOpenedFile)) { + switchToFile(previouslyOpenedFile) + } else { + switchToNextFile() + } // Synchronise tab list with file names known to the editor function refreshTabs () { From 2570903c7225a311f5bbd0ce88748ff945f39320 Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 8 May 2017 12:04:37 +0200 Subject: [PATCH 05/11] remove old TODO --- src/app/file-panel.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/file-panel.js b/src/app/file-panel.js index 27ace314ab..b84672aa2d 100644 --- a/src/app/file-panel.js +++ b/src/app/file-panel.js @@ -126,8 +126,7 @@ function filepanel (appAPI, files) { } function uploadFile (event) { - // TODO This should not go to the file explorer. - // The file explorer is merely a view on the current state of + // TODO The file explorer is merely a view on the current state of // the files module. Please ask the user here if they want to overwrite // a file and then just use `files.add`. The file explorer will // pick that up via the 'fileAdded' event from the files module. From 970f0484b4189051407db76551a6957c4357156e Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 8 May 2017 12:05:06 +0200 Subject: [PATCH 06/11] remove old TODO --- src/app/file-panel.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/file-panel.js b/src/app/file-panel.js index b84672aa2d..08cc20ff25 100644 --- a/src/app/file-panel.js +++ b/src/app/file-panel.js @@ -165,7 +165,6 @@ function filepanel (appAPI, files) { document.removeEventListener('keydown', cancelGhostbar) var width = (event.pageX < limit) ? limit : event.pageX element.style.width = width + 'px' - // Please change this to something like 'ui-resize' events.trigger('ui-resize', [width]) } From 6b21a6a66ba69561f5cbdcd23753072379a2598a Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 8 May 2017 12:50:46 +0200 Subject: [PATCH 07/11] fix test --- test-browser/tests/ballot.js | 2 +- test-browser/tests/compiling.js | 2 +- test-browser/tests/simpleContract.js | 2 +- test-browser/tests/staticanalysis.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/test-browser/tests/ballot.js b/test-browser/tests/ballot.js index e8a10ab540..85dd63b10f 100644 --- a/test-browser/tests/ballot.js +++ b/test-browser/tests/ballot.js @@ -6,7 +6,7 @@ var sauce = require('./sauce') var sources = { 'sources': { - 'Untitled': examples.ballot.content + 'Untitled.sol': examples.ballot.content } } diff --git a/test-browser/tests/compiling.js b/test-browser/tests/compiling.js index 9e713142c6..3ea95e8f78 100644 --- a/test-browser/tests/compiling.js +++ b/test-browser/tests/compiling.js @@ -5,7 +5,7 @@ var sauce = require('./sauce') var sources = { 'sources': { - 'Untitled': `pragma solidity ^0.4.0; + 'Untitled.sol': `pragma solidity ^0.4.0; contract TestContract { function f() returns (uint) { return 8; } }` } } diff --git a/test-browser/tests/simpleContract.js b/test-browser/tests/simpleContract.js index 06ed5c14e6..ac38571525 100644 --- a/test-browser/tests/simpleContract.js +++ b/test-browser/tests/simpleContract.js @@ -5,7 +5,7 @@ var sauce = require('./sauce') var sources = { 'sources': { - 'Untitled': 'contract test1 {} contract test2 {}' + 'Untitled.sol': 'contract test1 {} contract test2 {}' } } diff --git a/test-browser/tests/staticanalysis.js b/test-browser/tests/staticanalysis.js index ec1606b4b8..3273ef9ac1 100644 --- a/test-browser/tests/staticanalysis.js +++ b/test-browser/tests/staticanalysis.js @@ -6,7 +6,7 @@ var dom = require('../helpers/dom') var sources = { 'sources': { - 'Untitled': ` + 'Untitled.sol': ` contract test1 { address test = tx.origin; } contract test2 {} contract TooMuchGas { From 6ee4d2e7efd08204ab6360248c2350552e21b4e1 Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 8 May 2017 14:34:20 +0200 Subject: [PATCH 08/11] fix tests --- test-browser/tests/ballot.js | 2 +- test-browser/tests/compiling.js | 2 +- test-browser/tests/simpleContract.js | 2 +- test-browser/tests/staticanalysis.js | 6 +++--- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/test-browser/tests/ballot.js b/test-browser/tests/ballot.js index 85dd63b10f..60eb24d62c 100644 --- a/test-browser/tests/ballot.js +++ b/test-browser/tests/ballot.js @@ -27,7 +27,7 @@ function runTests (browser, testData) { browser .waitForElementVisible('.newFile', 10000) .click('.envView') - contractHelper.testContracts(browser, sources.sources.Untitled, ['Untitled:Ballot'], function () { + contractHelper.testContracts(browser, sources.sources['Untitled.sol'], ['Untitled.sol:Ballot'], function () { browser.end() }) } diff --git a/test-browser/tests/compiling.js b/test-browser/tests/compiling.js index 3ea95e8f78..3487f147f3 100644 --- a/test-browser/tests/compiling.js +++ b/test-browser/tests/compiling.js @@ -27,7 +27,7 @@ function runTests (browser) { browser .waitForElementVisible('.newFile', 10000) .click('.envView') - contractHelper.testContracts(browser, sources.sources.Untitled, ['Untitled:TestContract'], function () { + contractHelper.testContracts(browser, sources.sources['Untitled.sol'], ['Untitled.sol:TestContract'], function () { browser.click('.create .constructor .call') .waitForElementPresent('.instance .call[title="f"]') .click('.instance .call[title="f"]') diff --git a/test-browser/tests/simpleContract.js b/test-browser/tests/simpleContract.js index ac38571525..ec66b2390c 100644 --- a/test-browser/tests/simpleContract.js +++ b/test-browser/tests/simpleContract.js @@ -26,7 +26,7 @@ function runTests (browser) { browser .waitForElementVisible('.newFile', 10000) .click('.envView') - contractHelper.testContracts(browser, sources.sources.Untitled, ['Untitled:test1', 'Untitled:test2'], function () { + contractHelper.testContracts(browser, sources.sources['Untitled.sol'], ['Untitled.sol:test1', 'Untitled.sol:test2'], function () { browser.end() }) } diff --git a/test-browser/tests/staticanalysis.js b/test-browser/tests/staticanalysis.js index 3273ef9ac1..cc5741c593 100644 --- a/test-browser/tests/staticanalysis.js +++ b/test-browser/tests/staticanalysis.js @@ -33,13 +33,13 @@ function runTests (browser) { browser .waitForElementVisible('.newFile', 10000) .click('.envView') - contractHelper.testContracts(browser, sources.sources.Untitled, ['Untitled:TooMuchGas', 'Untitled:test1', 'Untitled:test2'], function () { + contractHelper.testContracts(browser, sources.sources['Untitled.sol'], ['Untitled.sol:TooMuchGas', 'Untitled.sol:test1', 'Untitled.sol:test2'], function () { browser .click('.staticanalysisView') .click('#staticanalysisView button') .waitForElementPresent('#staticanalysisresult .warning', 2000, true, function () { - dom.listSelectorContains(['Untitled:2:33: use of tx.origin', - 'Fallback function of contract Untitled:TooMuchGas requires too much gas'], + dom.listSelectorContains(['Untitled.sol:2:33: use of tx.origin', + 'Fallback function of contract Untitled.sol:TooMuchGas requires too much gas'], '#staticanalysisresult .warning span', browser, function () { browser.end() From cc6ed4604c5be2e06db661661bf4205f5e9c3c79 Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 10 May 2017 16:55:33 +0200 Subject: [PATCH 09/11] fix remove icon --- src/app/file-explorer.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/app/file-explorer.js b/src/app/file-explorer.js index 5d23e7b659..7c99903f97 100755 --- a/src/app/file-explorer.js +++ b/src/app/file-explorer.js @@ -20,12 +20,9 @@ var css = csjs` background-color : white; } .remove { - align-self : center; - padding-left : 10px; + float : right; } .activeMode { - display : flex; - justify-content : space-between; margin-right : 10px; padding-right : 19px; } @@ -70,9 +67,9 @@ function fileExplorer (appAPI, files) { }) var deleteButton = yo` - +
    - +
    ` appAPI.event.register('currentFileChanged', (newFile) => { From 9321f33567485a535a15b200e2610fc687c45804 Mon Sep 17 00:00:00 2001 From: yann300 Date: Tue, 16 May 2017 17:52:55 +0200 Subject: [PATCH 10/11] rename css filepanel -> filepanel-container --- src/app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app.js b/src/app.js index 662ba0aac3..508d5f76e7 100644 --- a/src/app.js +++ b/src/app.js @@ -181,13 +181,13 @@ var run = function () { // app.js provides file-panel.js with a css selector or a DOM element // and file-panel.js adds its elements (including css), see "Editor" above var css = csjs` - .filepanel { + .filepanel-container { display : flex; width : 200px; } ` var filepanelContainer = document.querySelector('#filepanel') - filepanelContainer.className = css.filepanel + filepanelContainer.className = css['filepanel-container'] var FilePanelAPI = { createName: createNonClashingName, switchToFile: switchToFile, From a6d0524c01ba1134071e51e6ba73cb34eda61231 Mon Sep 17 00:00:00 2001 From: yann300 Date: Tue, 16 May 2017 18:29:40 +0200 Subject: [PATCH 11/11] div instead of span --- src/app/file-explorer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/file-explorer.js b/src/app/file-explorer.js index 7c99903f97..7284fa3623 100755 --- a/src/app/file-explorer.js +++ b/src/app/file-explorer.js @@ -67,9 +67,9 @@ function fileExplorer (appAPI, files) { }) var deleteButton = yo` -
    + -
    +     ` appAPI.event.register('currentFileChanged', (newFile) => {