Skip to content

Commit

Permalink
Merge pull request #1857 from ethereum/panels
Browse files Browse the repository at this point in the history 
Panels
  • Loading branch information
@ioedeveloper
ioedeveloper authored Jan 6, 2022
2 parents 5591375 + 8afff38 commit a799ae2
Show file tree
Hide file tree
Showing 48 changed files with 1,004 additions and 879 deletions.
14 changes: 12 additions & 2 deletions apps/remix-ide-e2e/nightwatch.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,13 @@ module.exports = {
desiredCapabilities: {
browserName: 'firefox',
javascriptEnabled: true,
acceptSslCerts: true
acceptSslCerts: true,
'moz:firefoxOptions': {
args: [
'-width=2560',
'-height=1440'
]
}
}
},

Expand All @@ -78,7 +84,11 @@ module.exports = {
javascriptEnabled: true,
acceptSslCerts: true,
'moz:firefoxOptions': {
args: ['-headless']
args: [
'-headless',
'-width=2560',
'-height=1440'
]
}
}
}
Expand Down
1 change: 1 addition & 0 deletions apps/remix-ide-e2e/src/helpers/init.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export default function (browser: NightwatchBrowser, callback: VoidFunction, url
.switchBrowserTab(0)
.waitForElementVisible('[id="remixTourSkipbtn"]')
.click('[id="remixTourSkipbtn"]')
.maximizeWindow()
.fullscreenWindow(() => {
if (preloadPlugins) {
initModules(browser, () => {
Expand Down
170 changes: 112 additions & 58 deletions apps/remix-ide/src/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import { RunTab, makeUdapp } from './app/udapp'
import { RemixEngine } from './remixEngine'
import { RemixAppManager } from './remixAppManager'
import { MainView } from './app/panels/main-view'
import { ThemeModule } from './app/tabs/theme-module'
import { NetworkModule } from './app/tabs/network-module'
import { Web3ProviderModule } from './app/tabs/web3-provider'
Expand All @@ -11,7 +10,6 @@ import { HiddenPanel } from './app/components/hidden-panel'
import { VerticalIcons } from './app/components/vertical-icons'
import { LandingPage } from './app/ui/landing-page/landing-page'
import { MainPanel } from './app/components/main-panel'
import { FramingService } from './framingService'

import { WalkthroughService } from './walkthroughService'

Expand All @@ -20,6 +18,7 @@ import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, Fetch
import migrateFileSystem from './migrateFileSystem'
import Registry from './app/state/registry'
import { ConfigPlugin } from './app/plugins/config'
import { Layout } from './app/panels/layout'
import { ModalPlugin } from './app/plugins/modal'

const isElectron = require('is-electron')
Expand Down Expand Up @@ -50,6 +49,7 @@ const TestTab = require('./app/tabs/test-tab')
const FilePanel = require('./app/panels/file-panel')
const Editor = require('./app/editor/editor')
const Terminal = require('./app/panels/terminal')
const { TabProxy } = require('./app/panels/tab-proxy.js')

class AppComponent {
constructor () {
Expand All @@ -67,13 +67,27 @@ class AppComponent {
// load file system
self._components.filesProviders = {}
self._components.filesProviders.browser = new FileProvider('browser')
Registry.getInstance().put({ api: self._components.filesProviders.browser, name: 'fileproviders/browser' })
self._components.filesProviders.localhost = new RemixDProvider(self.appManager)
Registry.getInstance().put({ api: self._components.filesProviders.localhost, name: 'fileproviders/localhost' })
Registry.getInstance().put({
api: self._components.filesProviders.browser,
name: 'fileproviders/browser'
})
self._components.filesProviders.localhost = new RemixDProvider(
self.appManager
)
Registry.getInstance().put({
api: self._components.filesProviders.localhost,
name: 'fileproviders/localhost'
})
self._components.filesProviders.workspace = new WorkspaceFileProvider()
Registry.getInstance().put({ api: self._components.filesProviders.workspace, name: 'fileproviders/workspace' })
Registry.getInstance().put({
api: self._components.filesProviders.workspace,
name: 'fileproviders/workspace'
})

Registry.getInstance().put({ api: self._components.filesProviders, name: 'fileproviders' })
Registry.getInstance().put({
api: self._components.filesProviders,
name: 'fileproviders'
})

migrateFileSystem(self._components.filesProviders.browser)
}
Expand All @@ -83,6 +97,7 @@ class AppComponent {
// APP_MANAGER
const appManager = self.appManager
const pluginLoader = self.appManager.pluginLoader
self.panels = {}
self.workspace = pluginLoader.get()
self.engine = new RemixEngine()
self.engine.register(appManager)
Expand All @@ -92,8 +107,15 @@ class AppComponent {
'remix-beta.ethereum.org': 25,
'remix.ethereum.org': 23
}
self.showMatamo = (matomoDomains[window.location.hostname] && !Registry.getInstance().get('config').api.exists('settings/matomo-analytics'))
self.walkthroughService = new WalkthroughService(appManager, self.showMatamo)
self.showMatamo =
matomoDomains[window.location.hostname] &&
!Registry.getInstance()
.get('config')
.api.exists('settings/matomo-analytics')
self.walkthroughService = new WalkthroughService(
appManager,
self.showMatamo
)

const hosts = ['127.0.0.1:8080', '192.168.0.101:8080', 'localhost:8080']
// workaround for Electron support
Expand All @@ -114,7 +136,9 @@ class AppComponent {
// ----------------- editor service ----------------------------
const editor = new Editor() // wrapper around ace editor
Registry.getInstance().put({ api: editor, name: 'editor' })
editor.event.register('requiringToSaveCurrentfile', () => fileManager.saveCurrentFile())
editor.event.register('requiringToSaveCurrentfile', () =>
fileManager.saveCurrentFile()
)

// ----------------- fileManager service ----------------------------
const fileManager = new FileManager(editor, appManager)
Expand All @@ -131,7 +155,10 @@ class AppComponent {
const compilerMetadataGenerator = new CompilerMetadata()
// ----------------- compilation result service (can keep track of compilation results) ----------------------------
const compilersArtefacts = new CompilerArtefacts() // store all the compilation results (key represent a compiler name)
Registry.getInstance().put({ api: compilersArtefacts, name: 'compilersartefacts' })
Registry.getInstance().put({
api: compilersArtefacts,
name: 'compilersartefacts'
})

// service which fetch contract artifacts from sourve-verify, put artifacts in remix and compile it
const fetchAndCompile = new FetchAndCompile()
Expand All @@ -142,19 +169,22 @@ class AppComponent {
const hardhatProvider = new HardhatProvider(blockchain)
// ----------------- convert offset to line/column service -----------
const offsetToLineColumnConverter = new OffsetToLineColumnConverter()
Registry.getInstance().put({ api: offsetToLineColumnConverter, name: 'offsettolinecolumnconverter' })
Registry.getInstance().put({
api: offsetToLineColumnConverter,
name: 'offsettolinecolumnconverter'
})

// -------------------Terminal----------------------------------------
makeUdapp(blockchain, compilersArtefacts, (domEl) => terminal.logHtml(domEl))
makeUdapp(blockchain, compilersArtefacts, domEl => terminal.logHtml(domEl))
const terminal = new Terminal(
{ appManager, blockchain },
{
getPosition: (event) => {
getPosition: event => {
const limitUp = 36
const limitDown = 20
const height = window.innerHeight
let newpos = (event.pageY < limitUp) ? limitUp : event.pageY
newpos = (newpos < height - limitDown) ? newpos : height - limitDown
let newpos = event.pageY < limitUp ? limitUp : event.pageY
newpos = newpos < height - limitDown ? newpos : height - limitDown
return height - newpos
}
}
Expand All @@ -164,8 +194,10 @@ class AppComponent {
self.modal = new ModalPlugin()

const configPlugin = new ConfigPlugin()
self.layout = new Layout()

self.engine.register([
self.layout,
self.modal,
self.gistHandler,
configPlugin,
Expand All @@ -189,22 +221,27 @@ class AppComponent {

// LAYOUT & SYSTEM VIEWS
const appPanel = new MainPanel()
self.mainview = new MainView(contextualListener, editor, appPanel, fileManager, appManager, terminal)
Registry.getInstance().put({ api: self.mainview, name: 'mainview' })

self.engine.register([
appPanel,
self.mainview.tabProxy
])
const tabProxy = new TabProxy(fileManager, editor)
self.engine.register([appPanel, tabProxy])

// those views depend on app_manager
self.menuicons = new VerticalIcons(appManager)
self.sidePanel = new SidePanel(appManager, self.menuicons)
self.hiddenPanel = new HiddenPanel()

const pluginManagerComponent = new PluginManagerComponent(appManager, self.engine)
const pluginManagerComponent = new PluginManagerComponent(
appManager,
self.engine
)
const filePanel = new FilePanel(appManager)
const landingPage = new LandingPage(appManager, self.menuicons, fileManager, filePanel, contentImport)
const landingPage = new LandingPage(
appManager,
self.menuicons,
fileManager,
filePanel,
contentImport
)
self.settings = new SettingsTab(
Registry.getInstance().get('config').api,
editor,
Expand All @@ -222,7 +259,10 @@ class AppComponent {
])

// CONTENT VIEWS & DEFAULT PLUGINS
const compileTab = new CompileTab(Registry.getInstance().get('config').api, Registry.getInstance().get('filemanager').api)
const compileTab = new CompileTab(
Registry.getInstance().get('config').api,
Registry.getInstance().get('filemanager').api
)
const run = new RunTab(
blockchain,
Registry.getInstance().get('config').api,
Expand All @@ -231,7 +271,6 @@ class AppComponent {
filePanel,
Registry.getInstance().get('compilersartefacts').api,
networkModule,
self.mainview,
Registry.getInstance().get('fileproviders/browser').api
)
const analysis = new AnalysisTab()
Expand All @@ -256,6 +295,13 @@ class AppComponent {
filePanel.hardhatHandle,
filePanel.slitherHandle
])

self.layout.panels = {
tabs: { plugin: tabProxy, active: true },
editor: { plugin: editor, active: true },
main: { plugin: appPanel, active: false },
terminal: { plugin: terminal, active: true, minimized: false }
}
}

async activate () {
Expand All @@ -270,9 +316,9 @@ class AppComponent {
try {
self.engine.register(await self.appManager.registeredPlugins())
} catch (e) {
console.log('couldn\'t register iframe plugins', e.message)
console.log("couldn't register iframe plugins", e.message)
}

await self.appManager.activatePlugin(['layout'])
await self.appManager.activatePlugin(['modal'])
await self.appManager.activatePlugin(['editor'])
await self.appManager.activatePlugin(['theme', 'fileManager', 'compilerMetadata', 'compilerArtefacts', 'network', 'web3Provider', 'offsetToLineColumnConverter'])
Expand All @@ -284,48 +330,56 @@ class AppComponent {
await self.appManager.activatePlugin(['settings'])
await self.appManager.activatePlugin(['walkthrough'])

self.appManager.on('filePanel', 'workspaceInitializationCompleted', async () => {
await self.appManager.registerContextMenuItems()
})
self.appManager.on(
'filePanel',
'workspaceInitializationCompleted',
async () => {
await self.appManager.registerContextMenuItems()
}
)

await self.appManager.activatePlugin(['filePanel'])
// Set workspace after initial activation
self.appManager.on('editor', 'editorMounted', () => {
if (Array.isArray(self.workspace)) {
self.appManager.activatePlugin(self.workspace).then(async () => {
try {
if (params.deactivate) {
await self.appManager.deactivatePlugin(params.deactivate.split(','))
self.appManager
.activatePlugin(self.workspace)
.then(async () => {
try {
if (params.deactivate) {
await self.appManager.deactivatePlugin(
params.deactivate.split(',')
)
}
} catch (e) {
console.log(e)
}
if (params.code) {
// if code is given in url we focus on solidity plugin
self.menuicons.select('solidity')
} else {
// If plugins are loaded from the URL params, we focus on the last one.
if (
self.appManager.pluginLoader.current === 'queryParams' &&
self.workspace.length > 0
) { self.menuicons.select(self.workspace[self.workspace.length - 1]) }
}
} catch (e) {
console.log(e)
}
if (params.code) {
// if code is given in url we focus on solidity plugin
self.menuicons.select('solidity')
} else {
// If plugins are loaded from the URL params, we focus on the last one.
if (self.appManager.pluginLoader.current === 'queryParams' && self.workspace.length > 0) self.menuicons.select(self.workspace[self.workspace.length - 1])
}

if (params.call) {
const callDetails = params.call.split('//')
if (callDetails.length > 1) {
toolTip(`initiating ${callDetails[0]} ...`)
// @todo(remove the timeout when activatePlugin is on 0.3.0)
self.appManager.call(...callDetails).catch(console.error)

if (params.call) {
const callDetails = params.call.split('//')
if (callDetails.length > 1) {
toolTip(`initiating ${callDetails[0]} ...`)
// @todo(remove the timeout when activatePlugin is on 0.3.0)
self.appManager.call(...callDetails).catch(console.error)
}
}
}
}).catch(console.error)
})
.catch(console.error)
}
})
// activate solidity plugin
self.appManager.activatePlugin(['solidity', 'udapp'])
// Load and start the service who manager layout and frame
const framingService = new FramingService(self.sidePanel, self.menuicons, self.mainview, null)

if (params.embed) framingService.embed()
framingService.start(params)
}
}

Expand Down
31 changes: 0 additions & 31 deletions apps/remix-ide/src/app/components/hidden-panel.js
View file

This file was deleted.

Loading

0 comments on commit a799ae2

Please sign in to comment.