Show google translate link on error

src/content/components/TranslateContainer.js

@@ -39,6 +39,7 @@ export default class TranslateContainer extends Component {
       buttonPosition: { x: 0, y: 0 },
       shouldShowPanel: false,
       panelPosition: { x: 0, y: 0 },
+      currentLang: getSettings("targetLang"),
       resultText: "",
       candidateText: "",
       statusText: "OK"
@@ -85,20 +86,20 @@ export default class TranslateContainer extends Component {
     const panelPosition = useClickedPosition ? clickedPosition : this.selectedPosition;
 
     let result = await translateText(this.selectedText);
-    if (getSettings("ifChangeSecondLangOnPage")) {
-      const targetLang = getSettings("targetLang");
-      const secondLang = getSettings("secondTargetLang");
-      const shouldSwitchSecondLang =
-        result.sourceLanguage === targetLang && result.percentage > 0 && targetLang !== secondLang;
-      if (shouldSwitchSecondLang) result = await translateText(this.selectedText, secondLang);
-    }
+    const targetLang = getSettings("targetLang");
+    const secondLang = getSettings("secondTargetLang");
+    const shouldSwitchSecondLang =
+      getSettings("ifChangeSecondLangOnPage") &&
+      result.sourceLanguage === targetLang && result.percentage > 0 && targetLang !== secondLang;
+    if (shouldSwitchSecondLang) result = await translateText(this.selectedText, secondLang);
 
     this.setState({
       shouldShowPanel: true,
       panelPosition: panelPosition,
       resultText: result.resultText,
       candidateText: getSettings("ifShowCandidate") ? result.candidateText : "",
-      statusText: result.statusText
+      statusText: result.statusText,
+      currentLang: shouldSwitchSecondLang ? secondLang : targetLang
     });
   };
 
@@ -117,6 +118,8 @@ export default class TranslateContainer extends Component {
         <TranslatePanel
           shouldShow={this.state.shouldShowPanel}
           position={this.state.panelPosition}
+          selectedText={this.selectedText}
+          currentLang={this.state.currentLang}
           resultText={this.state.resultText}
           candidateText={this.state.candidateText}
           statusText={this.state.statusText}

src/content/components/TranslatePanel.js

@@ -1,3 +1,4 @@
+import browser from "webextension-polyfill";
 import React, { Component } from "react";
 import ReactDOM from "react-dom";
 import { getSettings } from "src/settings/settings";
@@ -162,7 +163,7 @@ export default class TranslatePanel extends Component {
   };
 
   render = () => {
-    const { shouldShow, resultText, candidateText, statusText } = this.props;
+    const { shouldShow, selectedText, currentLang, resultText, candidateText, statusText } = this.props;
     const isError = statusText !== "OK";
     const { width, height } = this.state.shouldResize
       ? { width: parseInt(getSettings("width")), height: parseInt(getSettings("height")) }
@@ -204,6 +205,13 @@ export default class TranslatePanel extends Component {
             {isError && (
               <p className="simple-translate-error" style={candidateStyles}>
                 {getErrorMessage(statusText)}
+                <br />
+                <a
+                  href={`https://translate.google.com/?sl=auto&tl=${currentLang}&text=${encodeURIComponent(selectedText)}`}
+                  target="_blank"
+                >
+                  {browser.i18n.getMessage("openInGoogleLabel")}
+                </a>
               </p>
             )}
           </div>

src/content/styles/TranslatePanel.scss

@@ -39,7 +39,8 @@
 
       .simple-translate-result-contents {
         padding: 0px 18px 15px;
-        p {
+        p,
+        a {
           all: initial;
           display: block;
           margin: 0;
@@ -50,21 +51,26 @@
           line-height: 150%;
           visibility: inherit;
           opacity: inherit;
+        }
 
-          &::-moz-selection {
-            background: var(--simple-translate-line);
-          }
+        a {
+          color: var(--simple-translate-highlight);
+          cursor: pointer;
+        }
 
-          &.simple-translate-result {
-            color: var(--simple-translate-main-text);
-          }
-          &.simple-translate-candidate,
-          &.simple-translate-error {
-            color: var(--simple-translate-sub-text);
-            margin-top: 1em;
-            &:empty {
-              margin-top: 0;
-            }
+        &::-moz-selection {
+          background: var(--simple-translate-line);
+        }
+
+        &.simple-translate-result {
+          color: var(--simple-translate-main-text);
+        }
+        &.simple-translate-candidate,
+        &.simple-translate-error {
+          color: var(--simple-translate-sub-text);
+          margin-top: 1em;
+          &:empty {
+            margin-top: 0;
           }
         }
       }