update settings-tab styling && remove compiler option/action (that has been moved to the compile tab)

src/app/settings-tab.js

@@ -12,6 +12,7 @@ var css = csjs`
   }
   .info extends ${styles.infoTextBox} {
     margin-bottom: 2em;
+    word-break: break-word;
   }
   .crow {
     margin-top: 1em;
@@ -21,23 +22,6 @@ var css = csjs`
     float: left;
     max-width: 90%;
   }
-  .button extends ${styles.button} {
-    background-color: #C6CFF7;
-    width: 100%;
-    align-self: center;
-    text-align: -webkit-center;
-  }
-  .col1 extends ${styles.titleL} {
-    float: left;
-    align-self: center;
-  }
-  .checkboxText {
-    margin-left: 3px;
-  }
-  .compilationWarning extends ${styles.warningTextBox} {
-    margin-top: 1em;
-    margin-left: 0.5em;
-  }
 }
 `
 module.exports = SettingsTab
@@ -46,21 +30,6 @@ function SettingsTab (container, appAPI, appEvents, opts) {
   if (typeof container === 'string') container = document.querySelector(container)
   if (!container) throw new Error('no container given')
 
-  var warnCompilationSlow = yo`<div id="warnCompilationSlow"></div>`
-  warnCompilationSlow.className = css.compilationWarning
-  appEvents.compiler.register('compilationDuration', function tabHighlighting (speed) {
-    var settingsView = document.querySelector('#header #menu .settingsView')
-    if (speed > 1000) {
-      warnCompilationSlow.innerHTML = `Last compilation took ${speed}ms. We suggest to turn off autocompilation.`
-      warnCompilationSlow.style.visibility = 'visible'
-      settingsView.style.color = '#FF8B8B'
-    } else {
-      warnCompilationSlow.innerHTML = ''
-      warnCompilationSlow.style.visibility = 'hidden'
-      settingsView.style.color = ''
-    }
-  })
-
   var el = yo`
     <div class="${css.settingsTabView} "id="settingsView">
       <div class="${css.info}">
@@ -78,15 +47,6 @@ function SettingsTab (container, appAPI, appEvents, opts) {
         <div><input class="${css.col1}" id="optimize" type="checkbox"></div>
         <span class="${css.checkboxText}">Enable Optimization</span>
       </div>
-      <div class="${css.crow}">
-        <div><input class="${css.col1}" id="autoCompile" type="checkbox" checked></div>
-        <span class="${css.checkboxText}">Auto Compile</span>
-      </div>
-      </div>
-      <div class="${css.crow}">
-        <div class="${css.button} "id="compile" title="Compile source code">Compile</div>
-      </div>
-      ${warnCompilationSlow}
     </div>
   `
   container.appendChild(el)