Show refresh button only on origins that need refreshing

content/options.js

@@ -31,7 +31,9 @@ var defaults = {
     'Turkish': ['Windows-1254'],
     'Vietnamese': ['Windows-1258'],
     'Western': ['ISO-8859-15', 'Windows-1252', 'Macintosh'],
-  }
+  },
+  // chrome
+  permissions: [],
 }
 
 var state = Object.assign({}, defaults)
@@ -45,7 +47,10 @@ chrome.extension.isAllowedFileSchemeAccess((isAllowedAccess) => {
 
 chrome.runtime.sendMessage({message: 'options'}, (res) => {
   state = Object.assign({}, defaults, {file: state.file}, res)
-  m.redraw()
+  chrome.permissions.getAll(({origins}) => {
+    state.permissions = origins.map((origin) => origin.replace(/(.*)\/\*$/, '$1'))
+    m.redraw()
+  })
 })
 
 var events = {
@@ -101,7 +106,14 @@ var events = {
     },
 
     refresh: (origin) => () => {
-      chrome.permissions.request({origins: [`${origin}/*`]})
+      chrome.permissions.request({origins: [`${origin}/*`]}, (granted) => {
+        if (granted) {
+          chrome.permissions.getAll(({origins}) => {
+            state.permissions = origins.map((origin) => origin.replace(/(.*)\/\*$/, '$1'))
+            m.redraw()
+          })
+        }
+      })
     },
 
     match: (origin) => (e) => {
@@ -292,6 +304,7 @@ m.mount(document.querySelector('main'), {
                 },
                 m('.m-origin', origin),
                 m('.m-options',
+                  !state.permissions.includes(origin) ? m('span', m('strong', 'refresh')) : null,
                   state.origins[origin].match !== state.match ? m('span', 'match') : null,
                   state.origins[origin].csp ? m('span', 'csp') : null,
                   state.origins[origin].encoding ? m('span', 'encoding') : null,
@@ -369,6 +382,7 @@ m.mount(document.querySelector('main'), {
                 (origin !== 'file://' || null) &&
                 m('.m-footer',
                   m('span',
+                    (!state.permissions.includes(origin) || null) &&
                     m('button.mdc-button mdc-button--raised m-button', {
                       oncreate: oncreate.ripple,
                       onclick: events.origin.refresh(origin)

css/options.css

@@ -333,6 +333,6 @@ footer .icon-hidden {
   bottom: 20px;
   right: 20px;
 }
-.m-list .m-footer .m-button:first-child {
-  margin: 0 20px 0 0;
+.m-list .m-footer .m-button:last-child {
+  margin: 0 0 0 20px;
 }