First phase of the popup page

Poucous · Poucous · commit c60eaebe01e2 · 2022-06-15T20:39:36.000+02:00
diff --git a/Firefox/background.js b/Firefox/background.js
@@ -11,4 +11,4 @@ if(localStorage.getItem("state") === "disable") {
 
 browser.runtime.onMessage.addListener(handleMessage); // Listen message from main.js
 
-browser.browserAction.onClicked.addListener(changeMode); //  If the user click on the icon of the toolBar
+browser.runtime.onMessage.addListener(changeModeMessage); // Listen message from smartReader_popup.js
diff --git a/Firefox/background/changeMode.js b/Firefox/background/changeMode.js
@@ -5,7 +5,7 @@ function changeMode() {
     By storing the state on the localStorage
 
     */
-
+ 
     if(localStorage.getItem("state") ===  "enable") {
 
         localStorage.setItem("state", "disable");
diff --git a/Firefox/background/handleMessage.js b/Firefox/background/handleMessage.js
@@ -1,6 +1,6 @@
 function handleMessage(message, sender, sendResponse) {
 
-    /* Serve to communicate with the content script: main.js
+    /* Serve to communicate with the content script: main.js and the popup page : smartReader_popup.js
 
     If we receive a message contening "mode: state", we're
     replying the state
@@ -21,8 +21,11 @@ function handleMessage(message, sender, sendResponse) {
 
         sendResponse({mode: message});
     }
-    else {
 
-        sendResponse({mode: "disable"});
+    if(message.changeMode === "yep") {
+
+        changeMode();
+
+        sendResponse({state: "done"});
     }
 }
diff --git a/Firefox/manifest.json b/Firefox/manifest.json
@@ -55,7 +55,7 @@
       "16": "/icons/button/smartReader-white-16.png",
       "32": "/icons/button/smartReader-white-32.png"
     },
-    "default_title": "Change mode",
+    "default_title": "Smart Reader settings",
     "theme_icons": [{
       "light": "/icons/button/smartReader-white-16.png",
       "dark": "/icons/button/smartReader-black-16.png",
@@ -64,6 +64,7 @@
       "light": "/icons/button/smartReader-white-32.png",
       "dark": "/icons/button/smartReader-black-32.png",
       "size": 32
-    }]
+    }],
+    "default_popup": "/popup/smartReader_popup.html"
   }  
 }
diff --git a/Firefox/popup/img/button_off.png b/Firefox/popup/img/button_off.png
diff --git a/Firefox/popup/img/button_on.png b/Firefox/popup/img/button_on.png
diff --git a/Firefox/popup/smartReader_popup.css b/Firefox/popup/smartReader_popup.css
@@ -0,0 +1,28 @@
+html, body {
+    width: 200px;
+}
+
+body {
+    overflow: hidden;
+    background-color: rgb(43, 42, 51);
+}
+
+#popup_content {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+#changeMode_button {
+    display: flex;
+    justify-content: center;
+}
+
+#state_button {
+    border: none;
+    background: none;
+    cursor: pointer;
+}
+#state_img {
+    width: 80px;
+}
diff --git a/Firefox/popup/smartReader_popup.html b/Firefox/popup/smartReader_popup.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="smartReader_popup.css"/>
+    </head>
+
+    <body>
+        <div id="popup-content">
+            <div id="changeMode_button">
+                <button id="state_button" type="button"><img id="state_img"/></button>
+            </div>
+
+        </div>
+
+        <script src="smartReader_popup.js"></script>
+    </body>
+</html>
diff --git a/Firefox/popup/smartReader_popup.js b/Firefox/popup/smartReader_popup.js
@@ -0,0 +1,31 @@
+var button = document.getElementById("state_img");
+
+function resetButton() {
+
+    browser.runtime.sendMessage({mode: "state"}, function(message) {
+
+        if(message.mode === "enable") {
+    
+            button.src="img/button_on.png";
+    
+        } else {
+    
+            button.src="img/button_off.png";
+        }
+    });
+}
+
+function changeMode() {
+
+    browser.runtime.sendMessage({changeMode: "yep"}, function(message) {
+
+        if(message.state === "done") {
+
+            resetButton();
+        }
+    });
+}
+
+button.addEventListener("click", changeMode);
+
+resetButton();

Original file line number	Diff line number	Diff line change
`@@ -11,4 +11,4 @@ if(localStorage.getItem("state") === "disable") {`
`11`	`11`
`12`	`12`	`browser.runtime.onMessage.addListener(handleMessage); // Listen message from main.js`
`13`	`13`
`14`		`-browser.browserAction.onClicked.addListener(changeMode); // If the user click on the icon of the toolBar`
	`14`	`+browser.runtime.onMessage.addListener(changeModeMessage); // Listen message from smartReader_popup.js`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`function handleMessage(message, sender, sendResponse) {`
`2`	`2`
`3`		`- /* Serve to communicate with the content script: main.js`
	`3`	`+ /* Serve to communicate with the content script: main.js and the popup page : smartReader_popup.js`
`4`	`4`
`5`	`5`	`If we receive a message contening "mode: state", we're`
`6`	`6`	`replying the state`
`@@ -21,8 +21,11 @@ function handleMessage(message, sender, sendResponse) {`
`21`	`21`
`22`	`22`	`sendResponse({mode: message});`
`23`	`23`	`}`
`24`		`- else {`
`25`	`24`
`26`		`- sendResponse({mode: "disable"});`
	`25`	`+ if(message.changeMode === "yep") {`
	`26`	`+`
	`27`	`+ changeMode();`
	`28`	`+`
	`29`	`+ sendResponse({state: "done"});`
`27`	`30`	`}`
`28`	`31`	`}`