Merge pull request #9 from Charlie-XIAO/main

fix "click on white area resets the color" problem, edit documentation, change a little bit of css

Author: ROMEEZHOU

CODE_OF_CONDUCT.md

@@ -1,4 +1,4 @@
-# CODE_OF_CONDUCT
+# Code of Conduct
 
 ## Our Pledge
 In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.

CONTRIBUTING.md

@@ -1,29 +1,29 @@
 # CONTRIBUTING
 
-We sincerely welcome contributions, both in codes and in other forms. This file describes general guidline for contributing.
+We sincerely welcome contributions, both in codes and in other forms. This file describes general guideline for contributing.
 
 ## Types of Contribution
 
-There isn't a strict standard on contribution types, here are some directions to consider
+There isn't a strict standard on contribution types, here are some directions to consider:
 
-- **Fix a bug** If you find a bug yourself or find some bug listed under Issues solvable, you are welcome to fix it
-- **Add new functions according to requirements** If you notice users' requirements for some interesting functions and you want to contribute, feel free to communicate with us and we are happy to update our web-extension to include more features
-- **translation and documentation** You are welcomed to create new branches to translate existed version for other languages. You are also welcomed to help accomplishing documentation for this web-extension
+- **Fix a bug**: If you find a bug yourself or find some bug listed under Issues solvable, you are welcome to fix it.
+- **Add new functions according to requirements**: If you notice users' requirements for some interesting functions and you want to contribute, feel free to communicate with us and we are happy to update our web-extension to include more features.
+- **Translation and documentation**: You are welcomed to create new branches to translate existed version for other languages. You are also welcomed to help accomplishing documentation for this web-extension.
 
 ## Guideline for adding new functions
 
-If you aim at helping us adding new functions, you should make sure that the new functions are consistent with the goal and values of this addon and our community. When adding a new function, you should create a new branch. Please do not change the main branch. We also welcome you to discuss with the leadership and you can find the discord channel [here](https://discord.gg/aKUQRYZrFB)
+If you aim at helping us adding new functions, you should make sure that the new functions are consistent with the goal and values of this addon and our community. When adding a new function, you should create a new branch. Please do not change the main branch. We also welcome you to discuss with the leadership and you can find the discord channel [here](https://discord.gg/aKUQRYZrFB).
 
 ## Code style
 
-If you are aditing an existing file or adding new code files, code style should be consistent with the rest of the code in the file and other existing files. Please comment when necessary. At the same time, if there are references, please include them as comment at the beginning of the code file. For more general standard, follow the guideline [here](https://wiki.mozilla.org/WebExtensions/Hacking#Code_Style)
+If you are aditing an existing file or adding new code files, code style should be consistent with the rest of the code in the file and other existing files. Please comment when necessary. At the same time, if there are references, please include them as comment at the beginning of the code file. For more general standard, follow the guideline [here](https://wiki.mozilla.org/WebExtensions/Hacking#Code_Style).
 
 ## Documentation style
 
 If you would like to contribute to our documentation. You should check the grammar first. You should write in a clear way and avoid complicated long sentences. Using graphs and examples as complimentary explanation is recommended. At the same time, if there are references, please state them clearly. 
 
 ## Licensing
 
-Please note that the examples are all made available under the [Mozilla Public License 2](https://github.com/ossd-s23/TitleBarColoring/blob/main/LICENSE).0, so any contributions must be compatible with that license. Ask the leadership if you have any questions.
+Please note that the examples are all made available under the [Mozilla Public License 2.0](LICENSE), so any contributions must be compatible with that license. Ask the leadership if you have any questions.
 
-Template for this CONTRIBUTING document is adapted from [mdn web-extensions](https://github.com/mdn/webextensions-examples/blob/main/CONTRIBUTING.md)
+Template for this document is adapted from [MDN Web Extensions](CONTRIBUTING.md).

README.md

@@ -16,7 +16,7 @@ The screenshot below shows two different title bar colors for different windows.
 
 ## Getting Started
 1. Fork this repo to your Github account and run it locally on your machine by cloning it. For a quick review on Github commands, check out this [link](https://education.github.com/git-cheat-sheet-education.pdf). 
-2. Search "about:debugging" in Firefox browser. Click 'This Firefox' on the left side and then click the 'Load Temporary Add-on' button and select the manifest.json file for this project. The extension will appear on the page and should be ready to use! 
+2. Search "`about:debugging`" in Firefox browser. Click 'This Firefox' on the left side and then click the 'Load Temporary Add-on' button and select the `manifest.json` file for this project. The extension will appear on the page and should be ready to use! 
 
 ## Licensing  
 - TabColor is a Free and Open Source (FOSS) project under the [Mozilla Public License 2.0](https://github.com/ossd-s23/TitleBarColoring/blob/main/LICENSE). 

popup.css

@@ -20,6 +20,7 @@ body {
   font-size: 12px;
   cursor: pointer;
   margin-bottom: 5%;
+  height: 20px;
 }
 
 .button1 {

popup.js

@@ -1,23 +1,3 @@
-function Choose_color(color) {
-    switch (color) {
-        case "Red":
-            return "Red";
-        case "Orange":
-            return "Orange";
-        case "Yellow":
-            return "Yellow";
-        case "Green":
-            return "Green";
-        case "Blue":
-            return "Blue";
-        case "Purple":
-            return "Purple";
-        case "Pink":
-            return "Pink";
-    }
-}
-
-
 function handleResponse(message) {
     console.log(`Message from the background script: ${message.response}`);
 }
@@ -27,12 +7,13 @@ function handleError(error) {
 }
 
 function notifyBackgroundPage(e) {
-    let chosen_color = Choose_color(e.target.textContent);
+    if (e.target.nodeName !== "BUTTON") return;
+    let chosen_color = e.target.textContent;
     const sending = browser.runtime.sendMessage({
         greeting: chosen_color,
     });
 
     sending.then(handleResponse, handleError);
 }
 
-window.addEventListener("click", notifyBackgroundPage);
+window.addEventListener("click", notifyBackgroundPage);