Almost completed text decoration

Pythack · Pythack · commit 2b95f6940428 · 2023-10-23T21:07:49.000+02:00
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -20,6 +20,15 @@
   "popupTextShadowActivation": {
     "message": "Activate text shadow"
   },
+  "popupTextDecorationActivation": {
+    "message": "Activate text decoration"
+  },
+  "popupTextDecorationTypeFieldName": {
+    "message": "Decoration type"
+  },
+  "popupDecorationColorFieldName": {
+    "message": "Decoration color"
+  },
   "popupNewCustomUrl": {
     "message": "New custom url"
   },
diff --git a/background.js b/background.js
@@ -31,12 +31,12 @@ async function restoreOptions(tab) {
     storage.customOptions.forEach((element) => {
       if (matchRuleShort(url, element.url)) { // Compare custom setting's hostname with the tab's
         injected = true;
-        css = '::selection { background: ' + element.background + ' !important; color: ' + element.color + ((element.shadowActivated) ? ' !important; text-shadow: ' + element.shadowColor + ' 0px 0px ' + element.shadowBlur + 'px !important' : '') + '}';
+        css = '::selection { background: ' + element.background + ' !important; color: ' + element.color + ' !important;' + ((element.shadowActivated) ? 'text-shadow: ' + element.shadowColor + ' 0px 0px ' + element.shadowBlur + 'px !important;' : '') + ((element.decorationActivated) ? 'text-decoration: ' + element.decorationType + ' ' + element.decorationColor + ' !important;' : '') + '}';
       }
     });
   }
   if (!injected && storage.witness) { // If url didn't match any custom settings and the user already defined some settings (avoid injecting undefined values into CSS)
-    css = '::selection { background: ' + storage.background_color + ' !important; color: ' + storage.color + ((storage.shadowActivated) ? ' !important; text-shadow: ' + storage.shadowColor + ' 0px 0px ' + storage.shadowBlur + 'px !important' : '') + '}';
+    css = '::selection { background: ' + storage.background_color + ' !important; color: ' + storage.color + ' !important;' + ((storage.shadowActivated) ? 'text-shadow: ' + storage.shadowColor + ' 0px 0px ' + storage.shadowBlur + 'px !important;' : '') + ((storage.decorationActivated) ? 'text-decoration: ' + storage.decorationType + ' ' + storage.decorationColor + ' !important;' : '') + '}';
   }
   browser.scripting.insertCSS({
     target: {
@@ -113,17 +113,32 @@ chrome.runtime.onInstalled.addListener(async details => {
         shadowActivated: false,
         shadowColor: "#007EF3FF",
         shadowBlur: "0",
+        decorationActivated: false,
+        decorationType: "none",
+        decorationColor: "#007EF3FF",
         witness: true
       });
       break;
     case "update":
       var storage = await browser.storage.local.get(); // Get settings
+      if (!storage.hasOwnProperty('decorationActivated')) {
+        browser.storage.local.set({ // Set basic settings
+          decorationActivated: false,
+          decorationType: "none",
+          decorationColor: "#007EF3FF"
+        });
+      }
       if (storage.customOptions) { // If custom settings are defined
         var customs = storage.customOptions;
         customs.forEach((element) => {
           try {
             let cururl = new URL(element.url);
             element.url = cururl.host;
+            if (!element.hasOwnProperty('decorationActivated')) {
+              element.decorationActivated = false;
+              element.decorationType = "none";
+              element.decorationColor = "#007EF3FF";
+            }
           } catch (error) {
             
           }
diff --git a/manifest.json b/manifest.json
@@ -3,7 +3,7 @@
   "name": "__MSG_appName__",
   "author": "Pythack",
   "default_locale": "en",
-  "version": "1.8.3",
+  "version": "2.0.0",
   "description": "__MSG_appDesc__",
   "background": {
     "service_worker": "./background.js"
diff --git a/popup.css b/popup.css
@@ -66,15 +66,15 @@ input {
   width: 70%;
 }
 
-#activate_textShadow {
+input[type="checkbox"] {
   background: rgba(12, 12, 13, 0.1);
   border: 1px rgba(12, 12, 13, 0.3);
   height: 16px;
   margin: 4px;
   width: 16px;
 }
 
-#activate_textShadow:checked {
+input[type="checkbox"]:checked {
   background: #0060df;
 }
 
@@ -86,6 +86,14 @@ input {
   width: 100%;
 }
 
+#textDecorationOptions {
+  display: none;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+}
+
 #url_div {
   display: none;
 }
@@ -236,7 +244,7 @@ input[type="url"]:placeholder-shown:focus {
   box-shadow: 0 0 15px rgb(200, 200, 200);
 }
 
-#formdivtxtsh {
+#formdivtxtdec {
   margin-bottom: 3cm;
 }
 
diff --git a/popup.html b/popup.html
@@ -22,7 +22,7 @@ <h1 id="title">__MSG_appName__</h1>
         <label>__MSG_popupColorFieldName__: </label><br>
         <input id="color" value="#007EF3FF" data-jscolor="{}"><br>
         <label>__MSG_popupBackgroundColorFieldName__: </label><br>
-        <input id="background_color" value="#007EF380" data-jscolor="{}">
+        <input id="background_color" value="#007EF333" data-jscolor="{}">
       </div>
       <br><br>
       <div id="formdivtxtsh" class="formdivel">
@@ -34,6 +34,21 @@ <h1 id="title">__MSG_appName__</h1>
           <label>__MSG_popupTextShadowBlurFieldName__: </label><input type="number" placeholder="15" min="0" id="shadow-blur">
         </div>
       </div>
+      <br><br>
+      <div id="formdivtxtdec" class="formdivel">
+        <input id="activate_textDecoration" name="activate_textDecoration" type="checkbox"><label for="activate_textDecoration">__MSG_popupTextDecorationActivation__</label><br>
+        <div id="textDecorationOptions">
+          <label>__MSG_popupTextDecorationTypeFieldName__: </label><br>
+            <select class="" id="decoration_select" name="">
+              <option value="underline">Underline</option>
+              <option value="line-through">Strike through</option>
+              <option value="blink">Blink</option>
+            </select>
+            <br>
+            <label>__MSG_popupDecorationColorFieldName__: </label><br>
+            <input id="decoration-color" value="#007EF333" data-jscolor="{}">
+        </div>
+      </div>
       <div id="formdivprv" class="formdivel">
         <label>__MSG_popupPreview__: </label><br/><p id="preview">Lorem ipsum</p>
         <button type="submit" id="save_btn">__MSG_popupSave__</button>
diff --git a/popup.js b/popup.js
@@ -41,13 +41,16 @@ function onError(error) {
 }
 
 class Custom_option {
-	constructor(url, background, color, shadowActivated, shadowColor, shadowBlur) {
+	constructor(url, background, color, shadowActivated, shadowColor, shadowBlur, decorationActivated, decorationType, decorationColor) {
 		this.url = url;
 		this.color = color;
 		this.background = background;
 		this.shadowActivated = shadowActivated;
 		this.shadowColor = shadowColor;
 		this.shadowBlur = shadowBlur;
+		this.decorationActivated = decorationActivated;
+		this.decorationType = decorationType;
+		this.decorationColor = decorationColor;
 	}
 };
 
@@ -56,7 +59,7 @@ function addCustom() {
 	getting.then(result => {
 		var custom_url = document.querySelector("#add_url").value; // Get new custom url
 		document.querySelector("#add_url").value = "";
-		var customSettings = new Custom_option(custom_url, document.querySelector("#background_color").value || "#007EF3", document.querySelector("#color").value || "white", document.querySelector("input#activate_textShadow").checked || false, document.querySelector("#shadow-color").value || "none", document.querySelector("#shadow-blur").value || "0"); // Create new element with currently displayed settings
+		var customSettings = new Custom_option(custom_url, document.querySelector("#background_color").value || "#007EF3", document.querySelector("#color").value || "white", document.querySelector("input#activate_textShadow").checked || false, document.querySelector("#shadow-color").value || "none", document.querySelector("#shadow-blur").value || "0", document.querySelector("input#activate_textDecoration").checked || false, document.querySelector("#decoration_select").value || "none", document.querySelector("#decoration-color").value || "#007EF3FF"); // Create new element with currently displayed settings
 		var customs = result.customOptions || []; // Get current saved settings; if there are none, initialize an empty list
 		customs.push(customSettings); // Add new custom settings to the list
 		browser.storage.local.set({ // Store the new list in the storage
@@ -95,18 +98,30 @@ function removeCustom() {
 		document.querySelector("#shadow-color").jscolor.fromString(result.shadowColor || "#ffffff");
 		document.querySelector("#shadow-blur").value = result.shadowBlur || "0px";
 		document.querySelector("input#activate_textShadow").checked = result.shadowActivated;
+		document.querySelector("input#activate_textDecoration").checked = result.decorationActivated;
+		document.querySelector("#decoration_select").value = result.decorationType;
+		document.querySelector("#decoration-color").jscolor.fromString(result.decorationColor || "#007EF3FF");
 		if(result.shadowActivated) {
 			document.querySelector('div#textShadowOptions').style.display = "flex";
 		} else {
 			document.querySelector('div#textShadowOptions').style.display = "none";
 		}
+		
+		if(result.decorationActivated) {
+			document.querySelector('div#textDecorationOptions').style.display = "flex";
+		} else {
+			document.querySelector('div#textDecorationOptions').style.display = "none";
+		};
 		chrome.tabs.query({active: true, currentWindow: true}, async tabs => {
 			var activeTab = tabs[0];
 			var activeTabURL = new URL(activeTab.url);
 			let urlField = document.querySelector("#add_url");
 			urlField.value = activeTabURL.host;
 		 });
 		updatePreview(); // Update preview
+		browser.runtime.sendMessage({ // Send message to background script asking to update the action icon
+			request: "inject-css-all"
+		});
 		browser.runtime.sendMessage({ // Send message to background script asking to update the action icon
 			request: "update-action-icon"
 		});
@@ -123,6 +138,9 @@ function saveOptions(e) { // Function called when user clicks on "Save" button
 			shadowActivated: document.querySelector("input#activate_textShadow").checked || false,
 			shadowColor: document.querySelector("#shadow-color").value || "none",
 			shadowBlur: document.querySelector("#shadow-blur").value || "0",
+			decorationActivated: document.querySelector("input#activate_textDecoration").checked || false,
+			decorationType: document.querySelector("#decoration_select").value || "none",
+			decorationColor: document.querySelector("#decoration-color").value || "none",
 			witness: true
 		});
 		preferencesSave.then(saveSuccess, saveError); // Display notifications
@@ -137,6 +155,9 @@ function saveOptions(e) { // Function called when user clicks on "Save" button
 				shadowActivated: document.querySelector("input#activate_textShadow").checked || false,
 				shadowColor: document.querySelector("#shadow-color").value || "none",
 				shadowBlur: document.querySelector("#shadow-blur").value || "0",
+				decorationActivated: document.querySelector("input#activate_textDecoration").checked || false,
+				decorationType: document.querySelector("#decoration_select").value || "none",
+				decorationColor: document.querySelector("#decoration-color").value || "none",
 				url: document.querySelector("#change_url").value
 			};
 			var preferencesSave = browser.storage.local.set({ // Update custom settings
@@ -161,6 +182,11 @@ function updatePreview() { // Function called when input values are changed
 	} else {
 		document.querySelector("#preview").style.textShadow = "";
 	}
+	if (document.querySelector("input#activate_textDecoration").checked) {
+		document.querySelector("#preview").style.textDecoration = document.querySelector("#decoration_select").value + " " + document.querySelector("#decoration-color").value;
+	} else {
+		document.querySelector("#preview").style.textDecoration = "";
+	}
 };
 
 function restoreOptions() {
@@ -210,6 +236,14 @@ function updateShadowColorDisplay() {
     }
 };
 
+function updateDecorationDisplay() {
+    if (document.querySelector("input#activate_textDecoration").checked) {
+        document.querySelector('div#textDecorationOptions').style.display = "flex"
+    } else {
+        document.querySelector('div#textDecorationOptions').style.display = "none"
+    }
+};
+
 function changeCustomDisplay(event) { // Function called when select changes
 		var selectIndex = document.querySelector("#custom_select").selectedIndex;
 	if(selectIndex != 0) { // If selected option is not default settings
@@ -226,11 +260,19 @@ function changeCustomDisplay(event) { // Function called when select changes
 			document.querySelector("#shadow-color").jscolor.fromString(customs[selectIndex - 1].shadowColor || "#ffffff");
 			document.querySelector("#shadow-blur").value = customs[selectIndex - 1].shadowBlur || "0px";
 			document.querySelector("input#activate_textShadow").checked = customs[selectIndex - 1].shadowActivated;
+			document.querySelector("input#activate_textDecoration").checked = customs[selectIndex - 1].decorationActivated;
+			document.querySelector("#decoration_select").value = customs[selectIndex - 1].decorationType;
+			document.querySelector("#decoration-color").jscolor.fromString(customs[selectIndex - 1].decorationColor || "#007EF3FF");
 			if(customs[selectIndex - 1].shadowActivated) {
 				document.querySelector('div#textShadowOptions').style.display = "flex";
 			} else {
 				document.querySelector('div#textShadowOptions').style.display = "none";
 			};
+			if(customs[selectIndex - 1].decorationActivated) {
+				document.querySelector('div#textDecorationOptions').style.display = "flex";
+			} else {
+				document.querySelector('div#textDecorationOptions').style.display = "none";
+			};
 			updatePreview(); // Update preview
 		}, onError);
 	} else {
@@ -244,11 +286,19 @@ function changeCustomDisplay(event) { // Function called when select changes
 			document.querySelector("#shadow-color").jscolor.fromString(result.shadowColor || "#ffffff");
 			document.querySelector("#shadow-blur").value = result.shadowBlur || "0px";
 			document.querySelector("input#activate_textShadow").checked = result.shadowActivated;
+			document.querySelector("input#activate_textDecoration").checked = result.decorationActivated;
+			document.querySelector("#decoration_select").value = result.decorationType;
+			document.querySelector("#decoration-color").jscolor.fromString(result.decorationColor || "#007EF3FF");
 			if(result.shadowActivated) {
 				document.querySelector('div#textShadowOptions').style.display = "flex";
 			} else {
 				document.querySelector('div#textShadowOptions').style.display = "none";
 			}
+			if(result.decorationActivated) {
+				document.querySelector('div#textDecorationOptions').style.display = "flex";
+			} else {
+				document.querySelector('div#textDecorationOptions').style.display = "none";
+			};
 			updatePreview(); // Update preview
 		}, onError);
 	};
@@ -301,3 +351,4 @@ document.querySelector("#remove_custom").addEventListener("click", removeCustom)
 document.querySelector("input#activate_textShadow").addEventListener("change", updatePreview);
 document.querySelector("select#custom_select").addEventListener("change", changeCustomDisplay);
 document.querySelector("input#activate_textShadow").addEventListener("change", updateShadowColorDisplay);
+document.querySelector("input#activate_textDecoration").addEventListener("change", updateDecorationDisplay);

Original file line number	Diff line number	Diff line change
`@@ -66,15 +66,15 @@ input {`
`66`	`66`	`width: 70%;`
`67`	`67`	`}`
`68`	`68`
`69`		`-#activate_textShadow {`
	`69`	`+input[type="checkbox"] {`
`70`	`70`	`background: rgba(12, 12, 13, 0.1);`
`71`	`71`	`border: 1px rgba(12, 12, 13, 0.3);`
`72`	`72`	`height: 16px;`
`73`	`73`	`margin: 4px;`
`74`	`74`	`width: 16px;`
`75`	`75`	`}`
`76`	`76`
`77`		`-#activate_textShadow:checked {`
	`77`	`+input[type="checkbox"]:checked {`
`78`	`78`	`background: #0060df;`
`79`	`79`	`}`
`80`	`80`
`@@ -86,6 +86,14 @@ input {`
`86`	`86`	`width: 100%;`
`87`	`87`	`}`
`88`	`88`
	`89`	`+#textDecorationOptions {`
	`90`	`+ display: none;`
	`91`	`+ justify-content: center;`
	`92`	`+ align-items: center;`
	`93`	`+ flex-direction: column;`
	`94`	`+ width: 100%;`
	`95`	`+}`
	`96`	`+`
`89`	`97`	`#url_div {`
`90`	`98`	`display: none;`
`91`	`99`	`}`
`@@ -236,7 +244,7 @@ input[type="url"]:placeholder-shown:focus {`
`236`	`244`	`box-shadow: 0 0 15px rgb(200, 200, 200);`
`237`	`245`	`}`
`238`	`246`
`239`		`-#formdivtxtsh {`
	`247`	`+#formdivtxtdec {`
`240`	`248`	`margin-bottom: 3cm;`
`241`	`249`	`}`
`242`	`250`