abandon automatic translation in CSS

* it fails with some languages in some versions of FF
* it's not as flexible as HTML templates
* we were only using it for a few messages

js/dom.js

@@ -164,18 +164,6 @@ function $element(opt) {
 }
 
 
-function retranslateCSS(selectorToMessageMap) {
-  // TODO: remove when this bug is fixed in FF
-  // Note: selectors must be spec-normalized e.g. ::before, not :before
-  for (const rule of document.styleSheets[0].cssRules) {
-    const msg = selectorToMessageMap[rule.selectorText];
-    if (msg) {
-      rule.style.content = '"' + msg.replace(/__MSG_(\w+)__/g, (_, id) => t(id)) + '"';
-    }
-  }
-}
-
-
 function dieOnDysfunction() {
   function die() {
     location.href = '/msgbox/dysfunctional.html';

manage/manage.css

@@ -167,7 +167,6 @@ summary {
 }
 
 .disabled h2::after {
-  content: "__MSG_genericDisabledLabel__";
   font-weight: normal;
   font-size: 11px;
   text-transform: lowercase;
@@ -514,10 +513,6 @@ input[id^="manage.newUI"] {
   opacity: .35;
 }
 
-#update-all-no-updates[data-skipped-edited="true"]:after {
-  content: " __MSG_updateAllCheckSucceededSomeEdited__";
-}
-
 #check-all-updates-force {
   margin-top: 1ex;
 }

manage/manage.js

@@ -34,16 +34,7 @@ Promise.all([
   showStyles(styles);
 });
 
-if (FIREFOX) {
+dieOnNullBackground();
-  // TODO: remove when these bugs are fixed in FF
-  dieOnNullBackground();
-  retranslateCSS({
-    '.disabled h2::after':
-      '__MSG_genericDisabledLabel__',
-    '#update-all-no-updates[data-skipped-edited="true"]::after':
-      ' __MSG_updateAllCheckSucceededSomeEdited__',
-  });
-}
 
 chrome.runtime.onMessage.addListener(onRuntimeMessage);
 
@@ -96,6 +87,16 @@ function initGlobalEvents() {
     .forEach(el => (el.oninput = (el.onchange = switchUI)));
 
   switchUI({styleOnly: true});
+
+  // translate CSS manually
+  document.head.appendChild($element({tag: 'style', textContent: `
+    .disabled h2::after {
+      content: "${t('genericDisabledLabel')}";
+    }
+    #update-all-no-updates[data-skipped-edited="true"]:after {
+      content: " ${t('updateAllCheckSucceededSomeEdited')}";
+    }
+  `}));
 }
 
 
@@ -541,8 +542,9 @@ function usePrefsDuringPageLoad() {
 }
 
 
+// TODO: remove when these bugs are fixed in FF
 function dieOnNullBackground() {
-  if (BG) {
+  if (!FIREFOX || BG) {
     return;
   }
   chrome.runtime.sendMessage({method: 'healthCheck'}, health => {

popup.html

@@ -55,6 +55,20 @@
     </div>
   </template>
 
+  <template data-id="unavailableInfo">
+    <div class="blocked-info">
+      <label i18n-text="stylusUnavailableForURL"></label>
+      <p i18n-text="stylusUnavailableForURLdetails"></p>
+    </div>
+  </template>
+
+  <template data-id="unreachableInfo">
+    <div class="blocked-info">
+      <label i18n-text="unreachableContentScript"></label>
+      <p i18n-text="unreachableFileHint"></p>
+    </div>
+  </template>
+
   <script src="js/dom.js"></script>
   <script src="js/messaging.js"></script>
   <script src="js/localization.js"></script>

popup/popup.css

@@ -404,36 +404,21 @@ body.blocked .actions > .left-gutter {
   opacity: .25;
 }
 
-.blocked:before,
+.unreachable .blocked-info {
-.unreachable:before {
+  border-bottom: 1px solid black;
-  padding: 5px 0.75em;
+}
+
+.blocked-info label {
+  padding: 5px 0;
   display: block;
   font-weight: bold;
 }
 
-.blocked #installed:before,
+.blocked-info p {
-.unreachable #installed:before {
+  padding: 1px 0 9px;
-  padding: 1px 0.75em 9px;
   display: block;
   font-size: 90%;
-  margin-bottom: 5px;
+  margin: 0;
-}
-
-.blocked:before {
-  content: "__MSG_stylusUnavailableForURL__";
-}
-
-.blocked #installed:before {
-  content: "__MSG_stylusUnavailableForURLdetails__";
-}
-
-.unreachable:before {
-  content: "__MSG_unreachableContentScript__";
-}
-
-.unreachable #installed:before {
-  content: "__MSG_unreachableFileHint__";
-  border-bottom: 1px solid black;
 }
 
 @keyframes lights-off {

popup/popup.js

@@ -24,20 +24,6 @@ getActiveTab().then(tab =>
   });
 });
 
-if (FIREFOX) {
-  // TODO: remove when this bug is fixed in FF
-  retranslateCSS({
-    '.blocked::before':
-      '__MSG_stylusUnavailableForURL__',
-    '.blocked #installed::before':
-      '__MSG_stylusUnavailableForURLdetails__',
-    '.unreachable::before':
-      '__MSG_unreachableContentScript__',
-    '.unreachable #installed::before':
-      '__MSG_unreachableFileHint__',
-  });
-}
-
 chrome.runtime.onMessage.addListener(onRuntimeMessage);
 
 function onRuntimeMessage(msg) {
@@ -117,6 +103,7 @@ function initPopup(url) {
 
   if (!url) {
     document.body.classList.add('blocked');
+    document.body.insertBefore(template.unavailableInfo, document.body.firstChild);
     return;
   }
 
@@ -137,6 +124,7 @@ function initPopup(url) {
         setTimeout(ping, 100, tab, --retryCountdown);
       } else {
         document.body.classList.add('unreachable');
+        document.body.insertBefore(template.unreachableInfo, document.body.firstChild);
       }
     });
   });
@@ -411,6 +399,7 @@ function handleUpdate(style) {
   // Add an entry when a new style for the current url is installed
   if (tabURL && BG.getApplicableSections({style, matchUrl: tabURL, stopOnFirst: true}).length) {
     document.body.classList.remove('blocked');
+    $$('.blocked-info').forEach(el => el.remove());
     createStyleElement({style});
   }
 }