Remove file access widget + minor refactoring

content/options.js

@@ -193,81 +193,82 @@ m.mount(document.querySelector('main'), {
   view: () =>
     m('#options',
 
-      // file access is disabled
-      (!state.file || null) &&
-      m('.bs-callout m-file',
-        m('h4.mdc-typography--headline', 'Access to file:// URLs is Disabled'),
-        m('img.mdc-elevation--z2', {src: '/images/file-urls.png'}),
-        m('button.mdc-button mdc-button--raised m-button', {
-          oncreate: oncreate.ripple,
-          onclick: events.file
-          },
-          'Enable Access to file:// URLs'
-        )
-      ),
-
       // allowed origins
       m('.bs-callout m-origins',
-        m('h4.mdc-typography--headline', 'Allowed Origins'),
 
         // add origin
-        m('select.mdc-elevation--z2 m-select', {
-          onchange: events.origin.protocol
-          },
-          state.protocols.map((protocol) =>
-          m('option', {
-            value: protocol,
-            selected: protocol === state.protocol
+        m('.m-add-origin',
+          m('h4.mdc-typography--headline', 'Allowed Origins'),
+          m('select.mdc-elevation--z2 m-select', {
+            onchange: events.origin.protocol
+            },
+            state.protocols.map((protocol) =>
+            m('option', {
+              value: protocol,
+              selected: protocol === state.protocol
+              },
+              protocol + '://'
+            )
+          )),
+          m('.mdc-text-field m-textfield', {
+            oncreate: oncreate.textfield,
+            },
+            m('input.mdc-text-field__input', {
+              type: 'text',
+              value: state.origin,
+              onchange: events.origin.name,
+              placeholder: 'raw.githubusercontent.com'
+            }),
+            m('.mdc-line-ripple')
+          ),
+          m('button.mdc-button mdc-button--raised m-button', {
+            oncreate: oncreate.ripple,
+            onclick: events.origin.add
             },
-            protocol + '://'
+            'Add'
+          ),
+          m('button.mdc-button mdc-button--raised m-button', {
+            oncreate: oncreate.ripple,
+            onclick: events.origin.all
+            },
+            'Allow All'
           )
-        )),
-        m('.mdc-text-field m-textfield', {
-          oncreate: oncreate.textfield,
-          },
-          m('input.mdc-text-field__input', {
-            type: 'text',
-            value: state.origin,
-            onchange: events.origin.name,
-            placeholder: 'raw.githubusercontent.com'
-          }),
-          m('.mdc-line-ripple')
-        ),
-        m('button.mdc-button mdc-button--raised m-button', {
-          oncreate: oncreate.ripple,
-          onclick: events.origin.add
-          },
-          'Add'
-        ),
-        m('button.mdc-button mdc-button--raised m-button', {
-          oncreate: oncreate.ripple,
-          onclick: events.origin.all
-          },
-          'Allow All'
         ),
 
-        // header detection - ff: disabled
-        (!/Firefox/.test(navigator.userAgent) || null) &&
-        m('label.mdc-switch m-switch', {
-          onupdate: onupdate.header,
-          title: 'Toggle header detection'
-          },
-          m('input.mdc-switch__native-control', {
-            type: 'checkbox',
-            checked: state.header,
-            onchange: events.header
-          }),
-          m('.mdc-switch__background', m('.mdc-switch__knob')),
-          m('span.mdc-switch-label',
-            'Detect ',
-            m('code', 'text/markdown'),
-            ' and ',
-            m('code', 'text/x-markdown'),
-            ' content type'
+        // global options
+        m('.m-global',
+          // header detection - ff: disabled
+          (!/Firefox/.test(navigator.userAgent) || null) &&
+          m('label.mdc-switch m-switch', {
+            onupdate: onupdate.header,
+            title: 'Toggle header detection'
+            },
+            m('input.mdc-switch__native-control', {
+              type: 'checkbox',
+              checked: state.header,
+              onchange: events.header
+            }),
+            m('.mdc-switch__background', m('.mdc-switch__knob')),
+            m('span.mdc-switch-label',
+              'Detect ',
+              m('code', 'text/markdown'),
+              ' and ',
+              m('code', 'text/x-markdown'),
+              ' content type'
+            )
+          ),
+
+          // file access is disabled
+          (!state.file || null) &&
+          m('button.mdc-button mdc-button--raised m-button', {
+            oncreate: oncreate.ripple,
+            onclick: events.file
+            },
+            'Allow Access to file:// URLs'
           )
         ),
 
-        // origins
+        // allowed origins
         m('ul.m-list',
           Object.keys(state.origins).sort().map((origin) =>
             (

css/options.css

@@ -161,12 +161,56 @@ footer .icon-hidden {
 }
 
 
+/*add-origin*/
+.m-add-origin {}
+.m-add-origin:after { content: ''; display: block; clear: both; }
+.m-add-origin h4 {
+  line-height: 36px;
+  float: left;
+  padding: 0 100px 0 0;
+  margin: 0 !important;
+}
+.m-add-origin .m-select {
+  width: 110px;
+  position: relative;
+  top: -1px;
+}
+.m-add-origin .m-textfield {
+  width: 400px;
+  height: auto !important;
+  padding: 0 !important;
+  margin: 0 10px !important;
+}
+.m-add-origin .m-textfield input {
+  padding-top: 10px;
+}
+.m-add-origin button:nth-of-type(1) {
+  position: relative;
+  top: -3px;
+}
+.m-add-origin button:nth-of-type(2) {
+  float: right;
+}
+
+
+/*global*/
+.m-global {
+  margin: 20px 0 0 0;
+}
+.m-global:after { content: ''; display: block; clear: both; }
+.m-global .m-switch {
+  float: left;
+}
+.m-global button {
+  float: right;
+}
+
+
 /*list*/
 .m-list {
   list-style: none;
-  clear: both;
   padding: 0;
-  margin: 0;
+  margin: 20px 0 0 0;
 }
 
 .m-list li {
@@ -293,39 +337,3 @@ footer .icon-hidden {
 .m-list .m-footer .m-button:first-child {
   margin: 0 20px 0 0;
 }
-
-
-/*file access*/
-.m-file h4 {
-  margin: 0 0 16px 0;
-}
-.m-file img {
-  display: block;
-  margin-bottom: 20px;
-}
-
-
-/*allowed origins*/
-.m-origins h4 {
-  line-height: 36px;
-  float: left;
-  padding: 0 100px 0 0;
-  margin: 0 !important;
-}
-.m-origins > .m-textfield:first-of-type {
-  width: 400px;
-  height: auto !important;
-  margin: 0 10px !important;
-}
-.m-origins > .m-textfield:first-of-type input {
-  padding-top: 10px;
-}
-.m-origins button:nth-of-type(2) { float: right; }
-.m-origins .m-select { width: 110px; }
-.m-origins .m-switch {
-  margin: 20px 0 0 0;
-}
-.m-origins .m-list {
-  clear: both;
-  margin: 20px 0 0 0;
-}