Add tabs to the options popup

content/popup.js

@@ -88,25 +88,43 @@ m.mount(document.querySelector('body'), {
         {oncreate, onclick: events.setDefaults},
         'Defaults'),
 
-      m('h4', 'Theme'),
-      m('select.mdl-shadow--2dp', {onchange: events.changeTheme}, state.themes.map((theme) =>
-        m('option', {selected: state.theme === theme}, theme)
-      )),
-
-      m('h4', 'Compiler Options'),
-      m('.mdl-grid', Object.keys(state.options).map((key) =>
-        m('.mdl-cell',
-          m('label.mdl-switch mdl-js-switch mdl-js-ripple-effect',
-            {oncreate, onupdate: onupdate(key), title: description[key]}, [
-            m('input[type="checkbox"].mdl-switch__input', {
-              name: key,
-              checked: state.options[key],
-              onchange: events.changeOptions
-            }),
-            m('span.mdl-switch__label', key)
-          ])
+      m('.mdl-tabs mdl-js-tabs mdl-js-ripple-effect', {oncreate},
+        m('.mdl-tabs__tab-bar',
+          m('a.mdl-tabs__tab', {href: '#tab-theme', class: 'is-active'}, 'Theme')
+        ),
+        m('.mdl-tabs__panel #tab-theme', {class: 'is-active'},
+          m('select.mdl-shadow--2dp', {onchange: events.changeTheme}, state.themes.map((theme) =>
+            m('option', {selected: state.theme === theme}, theme)
+          ))
         )
-      )),
+      ),
+
+      m('.mdl-tabs mdl-js-tabs mdl-js-ripple-effect', {oncreate},
+        m('.mdl-tabs__tab-bar',
+          m('a.mdl-tabs__tab', {href: '#tab-compiler', class: 'is-active'}, 'Compiler'),
+          m('a.mdl-tabs__tab', {href: '#tab-content'}, 'Content')
+        ),
+        m('.mdl-tabs__panel #tab-compiler', {class: 'is-active'},
+          m('.mdl-grid', Object.keys(state.options).map((key) =>
+            m('.mdl-cell',
+              m('label.mdl-switch mdl-js-switch mdl-js-ripple-effect',
+                {oncreate, onupdate: onupdate(key), title: description[key]}, [
+                m('input[type="checkbox"].mdl-switch__input', {
+                  name: key,
+                  checked: state.options[key],
+                  onchange: events.changeOptions
+                }),
+                m('span.mdl-switch__label', key)
+              ])
+            )
+          ))
+        ),
+        m('.mdl-tabs__panel #tab-content',
+          m('.mdl-grid',
+            m('.mdl-cell', 'Content')
+          )
+        )
+      ),
 
       m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
         {oncreate, onclick: events.advancedOptions},

css/popup.css

@@ -2,10 +2,7 @@
 #popup { width: 350px; padding: 20px; -webkit-user-select: none; }
 #popup:after { content: ''; display: block; clear: both; }
 
-h4 { cursor: default; }
-h4:nth-of-type(1) { margin-bottom: 5px; }
-h4:nth-of-type(2) { margin-bottom: -5px; }
-
+/*theme*/
 select {
   font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
   font-size: 14px; line-height: 17px;
@@ -16,5 +13,27 @@ select {
   width: 350px; padding: 9px 12px;
 }
 
+/*defaults*/
 button:nth-child(2) { float: right; }
+/*advanced options*/
 button:nth-child(2n+3) { float: right; }
+
+/*tabs*/
+.mdl-tabs__tab-bar {
+  justify-content: flex-start;
+  border: 0;
+  height: 36px;
+  margin: 10px 0;
+}
+.mdl-tabs:nth-of-type(2) .mdl-tabs__tab-bar {
+  margin-bottom: 2px;
+}
+.mdl-tabs__tab {
+  line-height: 36px;
+  border-bottom: 1px solid #e0e0e0;
+  height: 36px;
+  padding: 0 16px;
+}
+.mdl-tabs:nth-of-type(2) .mdl-tabs__panel {
+  min-height: 296px;
+}