Add theme width option

background/storage.js

@@ -45,7 +45,7 @@ md.storage.defaults = (compilers) => {
     header: true,
     match,
     themes: {
-      wide: false,
+      width: 'auto',
     },
     content: {
       emoji: false,
@@ -127,4 +127,10 @@ md.storage.migrations = (state) => {
   if (state.content.syntax === undefined) {
     state.content.syntax = true
   }
+  if (state.themes.wide !== undefined) {
+    if (state.themes.wide) {
+      state.themes.width = 'full'
+    }
+    delete state.themes.wide
+  }
 }

content/index.css

@@ -79,7 +79,7 @@ pre#_markdown {
   .markdown-theme { width: 1400px !important; }
 }
 
-.wide-theme {
+._width-full {
   box-sizing: border-box;
   width: 100% !important;
   max-width: 100% !important;
@@ -88,6 +88,21 @@ pre#_markdown {
   padding: 20px !important;
   margin: 0 !important;
 }
+._width-wide {
+  width: 1400px !important;
+}
+._width-large {
+  width: 1200px !important;
+}
+._width-medium {
+  width: 992px !important;
+}
+._width-small {
+  width: 768px !important;
+}
+._width-tiny {
+  width: 576px !important;
+}
 
 /*---------------------------------------------------------------------------*/
 /*toc*/

content/index.js

@@ -105,7 +105,7 @@ function mount () {
         if (state.html) {
           dom.push(m('#_html', {oncreate: oncreate.html,
             class: (/github(-dark)?/.test(state.theme) ? 'markdown-body' : 'markdown-theme') +
-            (state.themes.wide ? ' wide-theme' : '')
+            (state.themes.width !== 'auto' ? ` _width-${state.themes.width}` : '')
           },
             m.trust(state.html)
           ))

popup/index.js

@@ -39,14 +39,21 @@ var state = {
     'water-dark',
     'writ',
   ],
+  _width: [
+    'auto',
+    'full',
+    'wide',
+    'large',
+    'medium',
+    'small',
+    'tiny',
+  ],
   raw: false,
   tab: '',
   tabs: ['theme', 'compiler', 'content'],
   compilers: [],
   description: {
-    themes: {
-      wide: '100% width',
-    },
+    themes: {},
     compiler: {},
     content: {
       autoreload: 'Auto reload on file change',
@@ -96,7 +103,7 @@ var events = {
   },
 
   themes: (e) => {
-    state.themes[e.target.name] = !state.themes[e.target.name]
+    state.themes.width = state._width[e.target.selectedIndex]
     chrome.runtime.sendMessage({
       message: 'popup.themes',
       themes: state.themes,
@@ -109,6 +116,13 @@ var events = {
       message: 'popup.theme',
       theme: state.theme
     })
+    if (/^github/.test(state.theme) && !['auto', 'full'].includes(state.themes.width)) {
+      state.themes.width = 'auto'
+      chrome.runtime.sendMessage({
+        message: 'popup.themes',
+        themes: state.themes,
+      })
+    }
   },
 
   raw: () => {
@@ -216,21 +230,16 @@ m.mount(document.querySelector('body'), {
               m('option', {selected: state.theme === theme}, theme)
             )
           ),
-          m('.scroll', Object.keys(state.themes).map((key) =>
-            m('label.mdc-switch m-switch', {
-              onupdate: onupdate('themes', key),
-              title: state.description.themes[key]
-              },
-              m('input.mdc-switch__native-control', {
-                type: 'checkbox',
-                name: key,
-                checked: state.themes[key],
-                onchange: events.themes
-              }),
-              m('.mdc-switch__background', m('.mdc-switch__knob')),
-              m('span.mdc-switch-label', key)
-            ))
-          )
+          m('select.mdc-elevation--z2 m-select', {
+            onchange: events.themes
+            },
+            state._width.map((width) =>
+              m('option', {
+                selected: state.themes.width === width,
+                disabled: /^github/.test(state.theme) && !['auto', 'full'].includes(width) ? 'disabled' : null
+              }, width)
+            )
+          ),
         ),
         // compiler
         m('.m-panel', {