added zoom btns

src/app.js

@@ -61,14 +61,14 @@ var css = csjs`
   pre {
     overflow-x: auto;
   }
-  .browsersolidity     {
+  .remixIDE            {
     width              : 100vw;
     height             : 100vh;
     overflow           : hidden;
     flex-direction     : row;
     display            : flex;
   }
-  .mainpanel         {
+  .mainpanel           {
     display            : flex;
     flex-direction     : column;
     overflow           : hidden;
@@ -86,16 +86,16 @@ var css = csjs`
     flex-direction     : row-reverse;
     width              : 320px;
   }
-  .highlightcode {
-    position:absolute;
-    z-index:20;
-    background-color: var(--info);
+  .highlightcode       {
+    position           : absolute;
+    z-index            : 20;
+    background-color   : var(--info);
   }
   .highlightcode_fullLine {
-    position:absolute;
-    z-index:20;
-    background-color: var(--info);
-    opacity: 0.5;
+    position           : absolute;
+    z-index            : 20;
+    background-color   : var(--info);
+    opacity            : 0.5;
   }
 `
 
@@ -162,7 +162,7 @@ class App {
     self._components.resizeFeature = new PanelsResize(self._view.sidepanel)
 
     self._view.el = yo`
-      <div class=${css.browsersolidity}>
+      <div class=${css.remixIDE}>
         ${self._view.iconpanel}
         ${self._view.sidepanel}
         ${self._components.resizeFeature.render()}

src/app/components/vertical-icons.js

@@ -171,6 +171,7 @@ export class VerticalIcons extends Plugin {
    * @param {string} name Name of profile of the module to activate
    */
   addActive (name) {
+    if (name === 'home') return
     const themeType = globalRegistry.get('themeModule').api.currentTheme().quality
     const invert = themeType === 'dark' ? 1 : 0
     const brightness = themeType === 'dark' ? '150' : '0' // should be >100 for icons with color

src/app/panels/main-view.js

@@ -11,19 +11,12 @@ var ContextView = require('../editor/contextView')
 var csjs = require('csjs-inject')
 
 var css = csjs`
-  .mainview         {
-    display            : flex;
-    flex-direction     : column;
-    height             : 100%;
-  }
-  .content            {
-    position          : relative;
+  .mainview            {
     display           : flex;
     flex-direction    : column;
     height            : 100%;
     width             : 100%;
   }
-  
 `
 
 export class MainView {
@@ -181,13 +174,13 @@ export class MainView {
   }
   render () {
     var self = this
-    if (self._view.el) return self._view.el
+    if (self._view.mainview) return self._view.mainview
     self._view.editor = self.editor.render()
     self._view.editor.style.display = 'none'
     self._view.mainPanel = self.mainPanel.render()
     self._view.terminal = self._components.terminal.render()
-    self._view.content = yo`
-      <div class=${css.content}>
+    self._view.mainview = yo`
+      <div class=${css.mainview}>
         ${self.tabProxy.renderTabsbar()}
         ${self._view.editor}
         ${self._view.mainPanel}
@@ -195,11 +188,6 @@ export class MainView {
         ${self._view.terminal}
       </div>
     `
-    self._view.el = yo`
-      <div class=${css.mainview}>
-        ${self._view.content}
-      </div>
-    `
     // INIT
     self._adjustLayout('top', self.data._layout.top.offset)
 
@@ -207,7 +195,7 @@ export class MainView {
       if (e.altKey && e.keyCode === 84) self.tabProxy.switchNextTab() // alt + t
     })
 
-    return self._view.el
+    return self._view.mainview
   }
   registerCommand (name, command, opts) {
     var self = this

src/app/panels/tab-proxy.js

@@ -117,10 +117,6 @@ export class TabProxy {
     }
   }
 
-  showTab (name) {
-    this._view.filetabs.activateTab(name)
-  }
-
   addTab (name, title, switchTo, close, icon) {
     if (this._handlers[name]) return
 
@@ -147,6 +143,14 @@ export class TabProxy {
     this.handlers[type] = fn
   }
 
+  onZoomOut () {
+    this.editor.editorFontSize(-1)
+  }
+
+  onZoomIn () {
+    this.editor.editorFontSize(1)
+  }
+
   renderTabsbar () {
     this._view.filetabs = yo`<remix-tabs></remix-tabs>`
     this._view.filetabs.addEventListener('tabClosed', (event) => {
@@ -160,14 +164,18 @@ export class TabProxy {
 
     this._view.filetabs.canAdd = false
 
-    this._view.tabs = yo`
-      <div style="width: 100%; height: 100%;">
-        ${this._view.filetabs}
+    const zoomBtns = yo`
+      <div class="d-flex flex-row justify-content-center align-items-center">
+        <span class="btn btn-sm fas fa-search-minus text-dark" onclick=${() => this.onZoomOut()}></span>
+        <span class="btn btn-sm fas fa-search-plus text-dark" onclick=${() => this.onZoomIn()}></span>
       </div>
     `
-    let tabsbar = yo`
-      <div class="d-flex align-items-center" style="max-height: 35px; height: 100%">
-        ${this._view.tabs}
+
+    // @todo(#2492) remove style after the mainPanel layout fix.
+    this._view.tabs = yo`
+      <div  style="display: -webkit-box; min-height: 35px">
+        ${zoomBtns}
+        ${this._view.filetabs}
       </div>
     `
 
@@ -191,6 +199,6 @@ export class TabProxy {
       return false
     })
 
-    return tabsbar
+    return this._view.tabs
   }
 }