Panels

apps/remix-ide-e2e/nightwatch.ts

@@ -68,7 +68,13 @@ module.exports = {
       desiredCapabilities: {
         browserName: 'firefox',
         javascriptEnabled: true,
-        acceptSslCerts: true
+        acceptSslCerts: true,
+        'moz:firefoxOptions': {
+          args: [
+            '-width=2560',
+            '-height=1440'
+          ]
+        }
       }
     },
 
@@ -78,7 +84,11 @@ module.exports = {
         javascriptEnabled: true,
         acceptSslCerts: true,
         'moz:firefoxOptions': {
-          args: ['-headless']
+          args: [
+            '-headless',
+            '-width=2560',
+            '-height=1440'
+          ]
         }
       }
     }

apps/remix-ide-e2e/src/helpers/init.ts

@@ -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, () => {

apps/remix-ide/src/app.js

@@ -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'
@@ -11,16 +10,22 @@ 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 { ModalPluginTester } from './app/plugins/test'
 
 import { WalkthroughService } from './walkthroughService'
 
-import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports, EditorContextListener } from '@remix-project/core-plugin'
+import {
+  OffsetToLineColumnConverter,
+  CompilerMetadata,
+  CompilerArtefacts,
+  FetchAndCompile,
+  CompilerImports,
+  EditorContextListener
+} from '@remix-project/core-plugin'
 
 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')
@@ -51,6 +56,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 () {
@@ -68,13 +74,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)
   }
@@ -84,6 +104,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)
@@ -93,8 +114,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
@@ -113,7 +141,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)
@@ -130,7 +160,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()
@@ -141,19 +174,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
         }
       }
@@ -163,8 +199,10 @@ class AppComponent {
     self.modal = new ModalPlugin()
 
     const configPlugin = new ConfigPlugin()
+    self.layout = new Layout()
 
     self.engine.register([
+      self.layout,
       self.modal,
       configPlugin,
       blockchain,
@@ -187,22 +225,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,
@@ -220,7 +263,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,
@@ -229,7 +275,6 @@ class AppComponent {
       filePanel,
       Registry.getInstance().get('compilersartefacts').api,
       networkModule,
-      self.mainview,
       Registry.getInstance().get('fileproviders/browser').api
     )
     const analysis = new AnalysisTab()
@@ -243,9 +288,7 @@ class AppComponent {
       contentImport
     )
 
-    const testplugin = new ModalPluginTester()
     self.engine.register([
-      testplugin,
       compileTab,
       run,
       debug,
@@ -256,6 +299,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 () {
@@ -270,63 +320,78 @@ 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'])
     await self.appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs'])
     await self.appManager.activatePlugin(['sidePanel']) // activating  host plugin separately
     await self.appManager.activatePlugin(['home'])
     await self.appManager.activatePlugin(['settings', 'config'])
-    await self.appManager.activatePlugin(['hiddenPanel', 'pluginManager', 'contextualListener', 'terminal', 'blockchain', 'fetchAndCompile', 'contentImport'])
+    await self.appManager.activatePlugin([
+      'hiddenPanel',
+      'pluginManager',
+      'contextualListener',
+      'terminal',
+      'blockchain',
+      'fetchAndCompile',
+      'contentImport'
+    ])
     await self.appManager.activatePlugin(['settings'])
     await self.appManager.activatePlugin(['walkthrough'])
-    await self.appManager.activatePlugin(['testerplugin'])
 
-    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)
   }
 }