Create support tab and add chat

assets/css/browser-solidity.css

@@ -130,8 +130,12 @@
     display: block;
 }
 
-#righthand-panel #optionViews.txView input,
-#righthand-panel #optionViews.txView select {
+#header #optionViews.supportView #supportView {
+    display: block;
+}
+
+#header #optionViews.txView input,
+#header #optionViews.txView select {
     max-width: 13em;
     padding: 0.3em;
     box-sizing: border-box;

src/app/panels/righthand-panel.js

@@ -7,6 +7,7 @@ var settingsTab = require('../tabs/settings-tab')
 var analysisTab = require('../tabs/analysis-tab')
 var debuggerTab = require('../tabs/debugger-tab')
 var filesTab = require('../tabs/files-tab')
+var supportTab = require('../tabs/support-tab')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
@@ -31,7 +32,7 @@ var css = csjs`
     bottom             : 0;
     cursor             : col-resize;
     z-index            : 999;
-    border-left        : 2px solid hsla(215, 81%, 79%, .3);    
+    border-left        : 2px solid hsla(215, 81%, 79%, .3);
   }
   .ghostbar           {
     width             : 3px;
@@ -44,7 +45,7 @@ var css = csjs`
     bottom            : 0;
   }
   .panel              {
-    height            : 100%;  
+    height            : 100%;
   }
   .header             {
     height            : 100%;
@@ -70,7 +71,7 @@ function RighthandPanel (appAPI, events, opts) {
       <li class="publishView" title="Publish" >Files</li>
       <li class="debugView" title="Debugger">Debugger</li>
       <li class="staticanalysisView" title="Static Analysis">Analysis</li>
-      <li id="helpButton"><a href="https://remix.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li>
+      <li class="supportView" title="Help and support">Support</li>
     </ul>
   `
   self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
@@ -92,6 +93,7 @@ function RighthandPanel (appAPI, events, opts) {
   analysisTab(optionViews, appAPI, events, opts)
   debuggerTab(optionViews, appAPI, events, opts)
   filesTab(optionViews, appAPI, events, opts)
+  supportTab(optionViews, appAPI, events, opts)
 
   self.render = function () { return self._view.element }
 

src/app/support-tab.js

+var yo = require('yo-yo')
+
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var styleGuide = require('./style-guide')
+var styles = styleGuide()
+
+var css = csjs`
+  .supportTabView {
+    height: 100vh;
+    padding: 2%;
+    margin-top: 1em;
+    padding-bottom: 3em;
+  }
+  .chatIframe {
+    width: 102%;
+    height: 120%;
+    border: 0;
+    overflow: hidden;
+  }
+`
+// transform:
+// translate(-8%, -12%) scale(0.8);
+
+module.exports = supportTab
+
+function supportTab (container, appAPI, events, opts) {
+  var el = yo`
+    <div class="${css.supportTabView} "id="supportView">
+      <iframe class="${css.chatIframe}" src='https://gitter.im/ethereum/remix/~embed'>
+    </div>
+  `
+  container.appendChild(el)
+}