Report unreachable content script in popup

Chrome can't executeScript on file:// URLs even though we have <all_urls> in manifest.json so on such pages we'll display a warning in the popup. This should only happen when Stylus is [re]enabled/reloaded.

_locales/en/messages.json

@@ -510,6 +510,14 @@
     "message": "Undo (global)",
     "description": "CSS-beautify global Undo button label"
   },
+  "unreachableContentScript": {
+    "message": "Could not communicate with the page. Try reloading the tab.",
+    "description": "Note in the toolbar popup usually on file:// URLs after [re]loading Stylus"
+  },
+  "unreachableFileHint": {
+    "message": "To allow Stylus access file:// URLs enable the checkbox on chrome://extensions page.",
+    "description": "Note in the toolbar popup for file:// URLs"
+  },
   "updateCheckFailBadResponseCode": {
     "message": "Update failed - server responded with code $code$.",
     "description": "Text that displays when an update check failed because the response code indicates an error",

popup.css

@@ -433,6 +433,26 @@ body.blocked #unavailable {
   text-align: right;
 }
 
+.unreachable .entry {
+  opacity: .25;
+}
+
+.unreachable:before {
+  content: "__MSG_unreachableContentScript__";
+  padding: 5px 0.75em;
+  display: block;
+  font-weight: bold;
+}
+
+.unreachable #installed:before {
+  content: "__MSG_unreachableFileHint__";
+  padding: 1px 0.75em 9px;
+  display: block;
+  font-size: 90%;
+  border-bottom: 1px solid black;
+  margin-bottom: 5px;
+}
+
 @keyframes lights-off {
   from {
     background-color: transparent;

popup.js

@@ -92,6 +92,14 @@ function initPopup(url) {
     return;
   }
 
+  getActiveTab().then(tab => {
+    chrome.tabs.sendMessage(tab.id, {method: 'ping'}, {frameId: 0}, pong => {
+      if (pong === undefined) {
+        document.body.classList.add('unreachable');
+      }
+    });
+  });
+
   // Write new style links
   const writeStyle = $('#write-style');
   const matchTargets = document.createElement('span');