Fix: i18n and escapeHtml, url

_locales/en/messages.json

@@ -68,6 +68,10 @@
     "message": "Apply all updates",
     "description": "Label for the button to apply all detected updates"
   },
+  "author": {
+    "message": "Author",
+    "description": "Label for the style author"
+  },
   "backupButtons": {
     "message": "Backup",
     "description": "Heading for backup"
@@ -277,6 +281,14 @@
     "message": "Export",
     "description": "Label for the button to export a style ('edit' page) or all styles ('manage' page)"
   },
+  "externalHomepage": {
+    "message": "Homepage",
+    "description": "Label for the external link to style's homepage"
+  },
+  "externalSupport": {
+    "message": "Support",
+    "description": "Label for the external link to style's support site"
+  },
   "filteredStyles": {
     "message": "$numShown$ shown of $numTotal$ total",
     "description": "TL note - make this message short",
@@ -365,10 +377,26 @@
     "message": "Discard contents of current style and overwrite it with the imported style",
     "description": "Label for the button to import and overwrite current style"
   },
+  "installButton": {
+    "message": "Install",
+    "description": "Label for install button"
+  },
+  "installButtonUpdate": {
+    "message": "Update",
+    "description": "Label for update button"
+  },
+  "installButtonReinstall": {
+    "message": "Reinstall",
+    "description": "Label for reinstall button"
+  },
   "installUpdate": {
     "message": "Install update",
     "description": "Label for the button to install an update for a single style"
   },
+  "license": {
+    "message": "License",
+    "description": "Label for the license"
+  },
   "linterConfigPopupTitle": {
     "message": "Set $linter$ rules configuration",
     "description": "Stylelint or CSSLint popup header",
@@ -415,6 +443,10 @@
     "message": "See a full list of rules",
     "description": "Stylelint or CSSLint rules label added immediately before a link"
   },
+  "liveReloadLabel": {
+    "message": "Live reload",
+    "description": "The label of live-reload feature"
+  },
   "manageFilters": {
     "message": "Filters",
     "description": "Label for filters container"
@@ -503,6 +535,10 @@
     "message": "More Options",
     "description": "Subheading for options section on manage page."
   },
+  "parseUsercssError": {
+    "message": "Stylus failed to parse usercss:",
+    "description": "The error message to show when stylus failed to parse usercss"
+  },
   "popupManageTooltip": {
     "message": "Shift-click or right-click opens manager with styles applicable for current site",
     "description": "Tooltip for the 'Manage' button in the popup."
@@ -831,6 +867,10 @@
     "message": "Updates installed:",
     "description": "Text that displays when an update is installed on options page. Followed by the number of currently installed updates."
   },
+  "versionInvalidOlder": {
+    "message": "The version is older then installed style.",
+    "description": "Displayed when the version of style is older then installed one"
+  },
   "writeStyleFor": {
     "message": "Write style for: ",
     "description": "Label for toolbar pop-up that precedes the links to write a new style"

content/install-user-css.js

@@ -1,4 +1,4 @@
-/* global semverCompare */
+/* global semverCompare escapeHtml */
 
 'use strict';
 
@@ -47,7 +47,7 @@ function getAppliesTo(style) {
   }
   const result = [..._gen()];
   if (!result.length) {
-    result.push('All URLs');
+    result.push(chrome.i18n.getMessage('appliesToEverything'));
   }
   return result;
 }
@@ -56,26 +56,31 @@ function initInstallPage({style, dup}, sourceLoader) {
   return pendingResource.then(() => {
     const versionTest = dup && semverCompare(style.version, dup.version);
     document.body.innerHTML = '';
-    // FIXME: i18n
     document.body.appendChild(tHTML(`
       <div class="container">
         <div class="header">
-          <h1>${style.name} <small class="meta-version">v${style.version}</small></h1>
-          <p>${style.description}</p>
-          <h3>Author</h3>
-          ${style.author}
-          <h3>License</h3>
-          ${style.license}
-          <h3>Applies to</h3>
+          <h1>
+            ${escapeHtml(style.name)}
+            <small class="meta-version">v${escapeHtml(style.version)}</small>
+          </h1>
+          <p>${escapeHtml(style.description)}</p>
+          <h3 i18n-text="author"></h3>
+          ${escapeHtml(style.author)}
+          <h3 i18n-text="license"></h3>
+          ${escapeHtml(style.license)}
+          <h3 i18n-text="appliesLabel"></h3>
           <ul>
-            ${getAppliesTo(style).map(s => `<li>${s}</li>`)}
+            ${getAppliesTo(style).map(s => `<li>${escapeHtml(s)}</li>`)}
           </ul>
           <div class="actions">
-            <button class="install">${!dup ? 'Install' : versionTest > 0 ? 'Update' : 'Reinstall'}</button>
+            <button class="install">${t(
+              !dup ? 'installButton' : versionTest > 0 ?
+                'installButtonUpdate' : 'installButtonReinstall'
+            )}</button>
           </div>
           <div class="external">
-            <a href="${style.url}" target="_blank">Homepage</a>
-            <a href="${style.supportURL}" target="_blank">Support</a>
+            <a href="${decodeURI(style.url)}" target="_blank" i18n-text="externalHomepage" rel="noopener"></a>
+            <a href="${decodeURI(style.supportURL)}" target="_blank" i18n-text="externalSupport" rel="noopener"></a>
           </div>
         </div>
         <div class="main">
@@ -84,11 +89,8 @@ function initInstallPage({style, dup}, sourceLoader) {
       </div>
     `));
     if (versionTest < 0) {
-      // FIXME: i18n
       $('.actions').before(tHTML(`
-        <div class="warning">
-          The version is older then installed style.
-        </div>
+        <div class="warning" i18n-text="versionInvalidOlder"></div>
       `));
     }
     $('.code').textContent = style.source;
@@ -120,11 +122,9 @@ function initLiveReload(sourceLoader) {
       $$('.main .warning').forEach(e => e.remove());
     }).catch(err => {
       const oldWarning = $('.main .warning');
-      // FIXME: i18n
       const warning = tHTML(`
-        <div class="warning">
-          Stylus failed to parse usercss:
-          <pre>${err}</pre>
+        <div class="warning" i18n-text="parseUsercssError">
+          <pre>${escapeHtml(err)}</pre>
         </div>
       `);
       if (oldWarning) {
@@ -140,11 +140,10 @@ function initLiveReload(sourceLoader) {
       watcher.start();
     }
   });
-  // FIXME: i18n
   $('.actions').append(tHTML(`
     <label class="live-reload">
       <input type="checkbox" class="live-reload-checkbox">
-      <span>Live reload</span>
+      <span i18n-text="liveReloadLabel"></span>
     </label>
   `));
   $('.live-reload-checkbox').onchange = e => {
@@ -162,11 +161,9 @@ function initLiveReload(sourceLoader) {
 function initErrorPage(err, source) {
   return pendingResource.then(() => {
     document.body.innerHTML = '';
-    // FIXME: i18n
     document.body.appendChild(tHTML(`
-      <div class="warning">
-        Stylus failed to parse usercss:
-        <pre>${err}</pre>
+      <div class="warning" i18n-text="parseUsercssError">
+        <pre>${escapeHtml(err)}</pre>
       </div>
       <div class="code"></div>
     `));

edit/lint.js

@@ -1,6 +1,7 @@
 /* global CodeMirror messageBox */
 /* global editors makeSectionVisible showCodeMirrorPopup showHelp */
 /* global onDOMscripted injectCSS require CSSLint stylelint */
+/* global escapeHtml */
 'use strict';
 
 loadLinterAssets();
@@ -267,15 +268,6 @@ function updateLintReport(cm, delay) {
       }
     }
   }
-  function escapeHtml(html, {limit} = {}) {
-    const chars = {'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;', '/': '&#x2F;'};
-    let ellipsis = '';
-    if (limit && html.length > limit) {
-      html = html.substr(0, limit);
-      ellipsis = '...';
-    }
-    return html.replace(/[&<>"'/]/g, char => chars[char]) + ellipsis;
-  }
 }
 
 function renderLintReport(someBlockChanged) {

js/dom.js

@@ -286,3 +286,14 @@ function dieOnDysfunction() {
     }
   });
 }
+
+
+function escapeHtml(html, {limit} = {}) {
+  const chars = {'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;', '/': '&#x2F;'};
+  let ellipsis = '';
+  if (limit && html.length > limit) {
+    html = html.substr(0, limit);
+    ellipsis = '...';
+  }
+  return html.replace(/[&<>"'/]/g, char => chars[char]) + ellipsis;
+}