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 =
+      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,6 +51,12 @@
           line-height: 150%;
           visibility: inherit;
           opacity: inherit;
+        }
+
+        a {
+          color: var(--simple-translate-highlight);
+          cursor: pointer;
+        }
 
         &::-moz-selection {
           background: var(--simple-translate-line);
@@ -69,5 +76,4 @@
       }
     }
   }
-  }
 }