Merge pull request #1963 from ethereum/issue#1962-hidden_panel

Create an hidden panel component

src/app.js

@@ -51,6 +51,7 @@ import { ThemeModule } from './app/tabs/theme-module'
 import { NetworkModule } from './app/tabs/network-module'
 import { SwapPanel } from './app/components/swap-panel'
 import { MainPanel } from './app/components/main-panel'
+import { HiddenPanel } from './app/components/hidden-panel'
 import { VerticalIcons } from './app/components/vertical-icons'
 
 var css = csjs`
@@ -344,6 +345,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
 
   const swapPanel = new SwapPanel(appStore)
   const mainPanel = new MainPanel(appStore)
+  const hiddenPanel = new HiddenPanel(appStore)
 
   // ----------------- main view ----------------------
   self._components.mainview = new MainView(appStore, appManager, mainPanel)
@@ -376,6 +378,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   self._view.mainpanel.appendChild(self._components.mainview.render())
   self._view.iconpanel.appendChild(verticalIcons.render())
   self._view.swappanel.appendChild(swapPanel.render())
+  document.body.appendChild(hiddenPanel.render()) // Hidden Panel is display none, it can be directly on body
 
   let filePanel = new FilePanel()
   registry.put({api: filePanel, name: 'filepanel'})

src/app/components/hidden-panel.js

@@ -0,0 +1,23 @@
+import { AbstractPanel } from './panel'
+const csjs = require('csjs-inject')
+const yo = require('yo-yo')
+
+const css = csjs`
+  .pluginsContainer {
+    display: none;
+  }
+`
+
+export class HiddenPanel extends AbstractPanel {
+
+  constructor (appStore) {
+    super('hiddenPanel', appStore)
+  }
+
+  render () {
+    return yo`
+      <div class=${css.pluginsContainer}>
+        ${this.view}
+      </div>`
+  }
+}

src/app/components/local-plugin.js

@@ -164,7 +164,7 @@ module.exports = class LocalPlugin {
         <label for="loc2"><input type="radio" name="location" onclick="${e => this.updateLoc(e)}" value="mainPanel" id="loc2" >Main Panel</label>
       </div>
       <div class="radio">
-        <label for="loc3"><input type="radio" name="location" onclick="${e => this.updateLoc(e)}" value="none" id="loc3" >None</label>
+        <label for="loc3"><input type="radio" name="location" onclick="${e => this.updateLoc(e)}" value="hiddenPanel" id="loc3" >None</label>
       </div>
     </form>`
   }

src/app/components/swap-panel.js

@@ -31,8 +31,7 @@ const css = csjs`
 `
 
 const options = {
-  default: true,
-  displayHeader: true
+  default: true
 }
 
 export class SwapPanel extends AbstractPanel {