Add toggle button to enable / disable elements on page in popup

package-lock.json

@@ -2375,6 +2375,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
@@ -8546,6 +8551,14 @@
         "react-svg-core": "^2.1.0"
       }
     },
+    "react-toggle": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.0.2.tgz",
+      "integrity": "sha512-EPTWnN7gQHgEAUEmjheanZXNzY5TPnQeyyHfEs3YshaiWZf5WNjfYDrglO5F1Hl/dNveX18i4l0grTEsYH2Ccw==",
+      "requires": {
+        "classnames": "^2.2.5"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",

package.json

@@ -9,7 +9,8 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.4.0",
     "react-router": "^4.3.1",
-    "react-router-dom": "^4.3.1"
+    "react-router-dom": "^4.3.1",
+    "react-toggle": "^4.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-beta.49",

src/_locales/en/messages.json

@@ -9,6 +9,12 @@
   "donateWithPaypalLabel": {
     "message": "Donate with PayPal"
   },
+  "enableOnThisPage": {
+    "message": "Enable on this page"
+  },
+  "disableOnThisPage": {
+    "message": "Disable on this page"
+  },
   "initialTextArea": {
     "message": "Enter text"
   },

src/popup/components/Header.js

@@ -4,6 +4,8 @@ import openUrl from "src/common/openUrl";
 import { paypalLink } from "src/common/personalUrls";
 import HeartIcon from "../icons/heart.svg";
 import SettingsIcon from "../icons/settings.svg";
+import Toggle from "react-toggle";
+import "react-toggle/style.css";
 import "../styles/header.scss";
 
 const openPayPal = () => {
@@ -14,10 +16,24 @@ const openSettings = () => {
   openUrl(url);
 };
 
-export default () => (
+const getToggleButtonTitle = isEnabled => {
+  return isEnabled
+    ? browser.i18n.getMessage("disableOnThisPage")
+    : browser.i18n.getMessage("enableOnThisPage");
+};
+
+export default props => (
   <div id="header">
     <div className="title">Simple Translate</div>
     <div className="rightButtons">
+      <div className="toggleButton" title={getToggleButtonTitle(props.isEnabledOnPage)}>
+        <Toggle
+          checked={props.isEnabledOnPage}
+          onChange={props.toggleEnabledOnPage}
+          icons={false}
+          disabled={!props.isConnected}
+        />
+      </div>
       <button
         className="heartButton"
         onClick={openPayPal}

src/popup/components/PopupPage.js

@@ -14,9 +14,15 @@ const getTabInfo = async () => {
     const tab = (await browser.tabs.query({ currentWindow: true, active: true }))[0];
     const tabUrl = await browser.tabs.sendMessage(tab.id, { message: "getTabUrl" });
     const selectedText = await browser.tabs.sendMessage(tab.id, { message: "getSelectedText" });
-    return { url: tabUrl, selectedText: selectedText };
+    const isEnabledOnPage = await browser.tabs.sendMessage(tab.id, { message: "getEnabled" });
+    return {
+      isConnected: true,
+      url: tabUrl,
+      selectedText: selectedText,
+      isEnabledOnPage: isEnabledOnPage
+    };
   } catch (e) {
-    return { url: "", selectedText: "" };
+    return { isConnected: false, url: "", selectedText: "", isEnabledOnPage: false };
   }
 };
 
@@ -29,7 +35,9 @@ export default class PopupPage extends Component {
       resultText: "",
       candidateText: "",
       statusText: "OK",
-      tabUrl: ""
+      tabUrl: "",
+      isConnected: true,
+      isEnabledOnPage: true
     };
     this.isSwitchedSecondLang = false;
     this.init();
@@ -47,8 +55,10 @@ export default class PopupPage extends Component {
 
     const tabInfo = await getTabInfo();
     this.setState({
+      isConnected: tabInfo.isConnected,
       inputText: tabInfo.selectedText,
-      tabUrl: tabInfo.url
+      tabUrl: tabInfo.url,
+      isEnabledOnPage: tabInfo.isEnabledOnPage
     });
     if (tabInfo.selectedText !== "") this.translateText(tabInfo.selectedText, targetLang);
   };
@@ -105,10 +115,24 @@ export default class PopupPage extends Component {
     }
   };
 
+  toggleEnabledOnPage = async e => {
+    const isEnabled = e.target.checked;
+    this.setState({ isEnabledOnPage: isEnabled });
+    try {
+      const tab = (await browser.tabs.query({ currentWindow: true, active: true }))[0];
+      if (isEnabled) await browser.tabs.sendMessage(tab.id, { message: "enableExtension" });
+      else await browser.tabs.sendMessage(tab.id, { message: "disableExtension" });
+    } catch (e) {}
+  };
+
   render() {
     return (
       <div>
-        <Header />
+        <Header
+          toggleEnabledOnPage={this.toggleEnabledOnPage}
+          isEnabledOnPage={this.state.isEnabledOnPage}
+          isConnected={this.state.isConnected}
+        />
         <InputArea inputText={this.state.inputText} handleInputText={this.handleInputText} />
         <hr />
         <ResultArea

src/popup/styles/Header.scss

@@ -24,6 +24,38 @@
     justify-content: flex-end;
     height: 18px;
 
+    .toggleButton {
+      height: 18px;
+      .react-toggle {
+        $offset-width: 15px;
+        .react-toggle-track {
+          height: 18px;
+          width: 50px - $offset-width;
+          background-color: var(--sub-text);
+        }
+        .react-toggle-thumb {
+          height: 16px;
+          width: 16px;
+          -webkit-box-shadow: none;
+          -moz-box-shadow: none;
+          box-shadow: none;
+        }
+
+        &.react-toggle--checked {
+          .react-toggle-track {
+            background-color: var(--highlight);
+          }
+          .react-toggle-thumb {
+            left: 33px - $offset-width;
+            border-color: var(--highlight);
+          }
+        }
+        &.react-toggle--disabled {
+          cursor: unset;
+        }
+      }
+    }
+
     button {
       display: block;
       background-color: transparent;
@@ -36,7 +68,7 @@
     .heartButton {
       display: flex;
       align-items: center;
-      margin-right: 10px;
+      margin: 0px 10px;
       &:hover svg {
         fill: var(--confirm);
       }

webpack.config.dev.js

@@ -48,7 +48,7 @@ const generalConfig = {
         }
       },
       {
-        test: /\.scss$/,
+        test: /\.(scss|css)$/,
         exclude: [path.resolve(__dirname, "src", "content")],
         use: [
           {
@@ -63,7 +63,7 @@ const generalConfig = {
         ]
       },
       {
-        test: /\.scss$/,
+        test: /\.(scss|css)$/,
         include: [path.resolve(__dirname, "src", "content")],
         use: [
           MiniCssExtractPlugin.loader,

webpack.config.dist.js

@@ -54,7 +54,7 @@ const generalConfig = {
         }
       },
       {
-        test: /\.scss$/,
+        test: /\.(scss|css)$/,
         exclude: [path.resolve(__dirname, "src", "content")],
         use: [
           {
@@ -69,7 +69,7 @@ const generalConfig = {
         ]
       },
       {
-        test: /\.scss$/,
+        test: /\.(scss|css)$/,
         include: [path.resolve(__dirname, "src", "content")],
         use: [
           MiniCssExtractPlugin.loader,