From 381ee88e9498c3b1b13e3de68d6fee12a60d392b Mon Sep 17 00:00:00 2001
From: eight <eight04@gmail.com>
Date: Tue, 12 Sep 2017 01:48:10 +0800
Subject: [PATCH] Fix: i18n error message

---
 _locales/en/messages.json | 31 +++++++++++++++++++++++++++++++
 js/usercss.js             | 13 ++++++++-----
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 38202629..eb92a02c 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -673,6 +673,37 @@
       }
     }
   },
+  "styleMetaErrorCheckbox": {
+    "message": "Invalid @var checkbox: value must be 0 or 1",
+    "description": "Error displayed when the value of @var checkbox is invalid"
+  },
+  "styleMetaErrorColor": {
+    "message": "$COLOR$ is not a valid color",
+    "description": "Error displayed when the value of @var color is invalid",
+    "placeholders": {
+      "color": {
+        "content": "$1"
+      }
+    }
+  },
+  "styleMetaErrorSelectMissingKey": {
+    "message": "Invalid @var select: missing key '$KEY$'",
+    "description": "Error displayed when the value of @var select is not a valid key",
+    "placeholders": {
+      "key": {
+        "content": "$1"
+      }
+    }
+  },
+  "styleMetaErrorSelect": {
+    "message": "Invalid @var select: $ERROR$",
+    "description": "Error displayed when the value of @var select is invalid",
+    "placeholders": {
+      "error": {
+        "content": "$1"
+      }
+    }
+  },
   "styleMissingMeta": {
     "message": "Missing medata @$KEY$",
     "description": "Error displayed when a mandatory metadata is missing",
diff --git a/js/usercss.js b/js/usercss.js
index 894a7219..ae5d864c 100644
--- a/js/usercss.js
+++ b/js/usercss.js
@@ -59,7 +59,7 @@ var usercss = (function () {
     function parse(color) {
       el.style.color = color;
       if (el.style.color === '') {
-        throw new Error(`"${color}" is not a valid color`);
+        throw new Error(chrome.i18n.getMessage('styleMetaErrorColor', color));
       }
       color = getComputedStyle(el).color;
       el.style.color = '';
@@ -158,7 +158,11 @@ var usercss = (function () {
     // select type has an additional field
     if (result.type === 'select') {
       const match = matchString(source);
-      result.select = JSON.parse(match.follow);
+      try {
+        result.select = JSON.parse(match.follow);
+      } catch (err) {
+        throw new Error(chrome.i18n.getMessage('styleMetaErrorSelect', err.message));
+      }
       source = match.value;
     }
 
@@ -266,11 +270,10 @@ var usercss = (function () {
   }
 
   function validVar(va, value = 'default') {
-    // FIXME: i18n
     if (va.type === 'select' && !va.select[va[value]]) {
-      throw new Error(`Invalid @var select: missing key '${va[value]}'`);
+      throw new Error(chrome.i18n.getMessage('styleMetaErrorSelectMissingKey', va[value]));
     } else if (va.type === 'checkbox' && !/^[01]$/.test(va[value])) {
-      throw new Error('Invalid @var checkbox: value must be 0 or 1');
+      throw new Error(chrome.i18n.getMessage('styleMetaErrorCheckbox'));
     } else if (va.type === 'color') {
       va[value] = colorParser.format(colorParser.parse(va[value]));
     }