Show error on popup

simple-translate/_locales/en/messages.json

@@ -180,6 +180,16 @@
     "message": "https://addons.mozilla.org/en-US/firefox/addon/simple-translate/?src=optionpage"
   },
 
+  "networkError": {
+    "message": "Error: Check network connection status."
+  },
+  "unavailableError": {
+    "message": "Error: Service usage limit reached. Please wait a while and try again."
+  },
+  "unknownError": {
+    "message": "Error: Unknown error"
+  },
+
   "translatePageMenu": {
     "message": "Translate this page"
   },

simple-translate/popup/popup.js

@@ -67,7 +67,7 @@ async function changeLang() {
 
   if (sourceWord !== "") {
     const resultData = await T.translate(sourceWord, undefined, langList.value);
-    showResult(resultData.resultText, resultData.candidateText);
+    showResult(resultData.resultText, resultData.candidateText, resultData.statusText);
   }
 }
 
@@ -166,15 +166,34 @@ async function runTranslation() {
 
   const resultData = await T.translate(sourceWord, "auto", langList.value);
   changeSecondLang(defaultTargetLang, resultData.sourceLanguage, resultData.percentage);
-  showResult(resultData.resultText, resultData.candidateText);
+  showResult(resultData.resultText, resultData.candidateText, resultData.statusText);
 }
 
-function showResult(resultText, candidateText) {
+function showResult(resultText, candidateText, statusText = "OK") {
   const resultArea = target.getElementsByClassName("result")[0];
   const candidateArea = target.getElementsByClassName("candidate")[0];
 
   resultArea.innerText = resultText;
   if (S.get().ifShowCandidate) candidateArea.innerText = candidateText;
+
+  if (statusText != "OK") showError(statusText);
+}
+
+function showError(statusText) {
+  let errorMessage = "";
+  switch (statusText) {
+    case "":
+      errorMessage = browser.i18n.getMessage("networkError");
+      break;
+    case "Service Unavailable":
+      errorMessage = browser.i18n.getMessage("unavailableError");
+      break;
+    default:
+      errorMessage = `${browser.i18n.getMessage("unknownError")} [${statusText}]`;
+      break;
+  }
+  const candidateArea = target.getElementsByClassName("candidate")[0];
+  candidateArea.innerText = errorMessage;
 }
 
 let changeLangFlag = false;

simple-translate/translate.js

@@ -39,6 +39,9 @@ class Translate {
       xhr.onload = () => {
         resolve(xhr);
       };
+      xhr.onerror = () => {
+        resolve(xhr);
+      };
     });
   }
 
@@ -47,9 +50,13 @@ class Translate {
       resultText: "",
       candidateText: "",
       sourceLanguage: "",
-      percentage: 0
+      percentage: 0,
+      statusText: ""
     };
 
+    resultData.statusText = results[0].statusText;
+    if (resultData.statusText !== "OK") return resultData;
+
     //翻訳元言語を取得
     resultData.sourceLanguage = results[0].response[2];
     resultData.percentage = results[0].response[6];