From 91b5c54c2c03139a124c33c969f5c86a21166d8f Mon Sep 17 00:00:00 2001 From: Andrew Cousineau Date: Tue, 4 Jun 2024 23:00:42 -0400 Subject: [PATCH 1/3] Add Clear button, add Domain header, housekeeping --- popup/css/popup-stylesheet.css | 55 +++++-------------- popup/js/popup.js | 96 ++++++++++++++-------------------- popup/style_editor.html | 28 +++++----- 3 files changed, 67 insertions(+), 112 deletions(-) diff --git a/popup/css/popup-stylesheet.css b/popup/css/popup-stylesheet.css index fd28617..c8099d6 100644 --- a/popup/css/popup-stylesheet.css +++ b/popup/css/popup-stylesheet.css @@ -2,12 +2,12 @@ display: block; } -.flex { - flex : 1; +.gap { + gap: 16px; } -.viewport { - +.flex { + flex : 1; } .flex-container { @@ -22,46 +22,25 @@ flex-direction: row; } -.popup-button { - background-color: aliceblue; - border: none; - border-radius: 4px; - margin-left: 25px; - margin-right: 25px; - - font-size: 1.5em; - text-align: center; -} - -.downward-box-shadow { - -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75); - box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75); -} - -.active-reset-button { - background-color: #FFC24B; -} body { background-color: #eaeaea; } +button { + padding: 8px; +} #popup-viewport { width: 370px; - height: 400px; + height: auto; + overflow: hidden; } #hostname-container { - display: none; - - width: 370px; - height: 25px; - - margin-bottom: 5px; + margin-bottom: 8px; font-size: 1em; @@ -69,6 +48,7 @@ body { border: 1px solid black; border-radius: 4px; + padding: 4px; } #textbox-container { @@ -80,21 +60,12 @@ body { width: 370px; height: 310px; - margin-bottom: 10px; + margin-bottom: 8px; background-color: #230000; color: #ebffe0; } #controls-container { - padding: 10px; -} - -#reset-button { - border: 1px solid #FFC24B; - background-color none: + padding: 16px 8px; } - -#apply-button { - background-color: #8EFF68; -} \ No newline at end of file diff --git a/popup/js/popup.js b/popup/js/popup.js index 9852810..3947944 100644 --- a/popup/js/popup.js +++ b/popup/js/popup.js @@ -33,14 +33,13 @@ if (__debugMode) { //////////////////////////////////////// -function setRules(activeTab, hostname, cssText, callback) { +function setRules(activeTab, hostname, cssText) { hostname = hostname.toString(); - let cssObject = cssTextToRules(cssText); if (__debugMode) { console.log(`cssObject in setRules:`); - console.log(cssObject); + console.log(cssObject); } let tempStorageObject; @@ -124,11 +123,9 @@ function printDate() { /// TEXTBOX INTERACTION /// -let setText = (newText) => { +let setText = (newText = "") => { if (__debugMode) { - console.log(`---setText---`); - console.log(newText); - console.log(`--------`); + console.log(`---setText: ${newText} ---`); } textBox.value = newText; @@ -138,7 +135,7 @@ let getText = () => { return textBox.value; } -setText("Oops. You should not be seeing this. Try reopening the window."); +setText("Initializing..."); ////////////////////////// @@ -320,14 +317,10 @@ let insertCss = (cssString) => { console.log(`insertCss(`); console.log(cssString); } - // browser.tabs.insertCSS({code: cssString}).then(() => { - // insertedCss = cssString; - // }); browser.tabs.sendMessage(activeTab.id, { command: "insertCss", cssString: cssString - // ok NOW i get why variable name keys might need to be explicit }); insertedCs = cssString; } @@ -347,31 +340,6 @@ let removeCss = (cssString) => { ////// ASYNC FUNCTION SERIES BEGIN /////// let listenForClicks = () => { - if (__debugMode) { - console.log(`listenForClicks BEGIN`); - console.log(ruleObject); - } - - cssText = ruleContentToCssString(ruleObject['content']); - - if (__debugMode) { - console.log(`listenForClicks > cssText`); - console.log(cssText); - } - - if (cssText == "") { - if (__debugMode) { - console.log(`custom rules for ${hostname} not found`); - console.log(ruleObject); - setText(`${hostname}: There are no custom rules for this page.`); - // setText(JSON.stringify(ruleObject)); - } else { - setText(`${hostname}: There are no custom rules for this page.`); - } - } else { - setText(cssText); - } - document.addEventListener("click", (e) => { if (__debugMode) { console.log(e); @@ -380,17 +348,25 @@ let listenForClicks = () => { let targetId = e.target.id; - if (targetId == "apply-button") { - applyRules(); - } else if (targetId == "reset-button") { - // TODO: timer-based color fade reset button for "undo functionality" - setText(cssText); + switch (e.target.id) { + case "apply-button": + applyRules(); + break; + case "reset-button": + // TODO: timer-based color fade reset button for "undo functionality" + setText(cssText); + break; + case "clear-button": + setText(); + break; + default: + break; } }) }; function applyRules() { -browser.tabs.query({currentWindow: true, active: true}).then((tabs) => { + browser.tabs.query({currentWindow: true, active: true}).then((tabs) => { activeTab = tabs[0]; // Safe to assume there will only be one result if (__debugMode) { @@ -413,11 +389,7 @@ browser.tabs.query({currentWindow: true, active: true}).then((tabs) => { let newText = getText(); insertCss(newText); - setRules(activeTab, hostname, newText, (res) => { - if (__debugMode) { - console.log(`applyRules > setRules > saveRulesAsync callback ended:`); - } - }); + setRules(activeTab, hostname, newText); }); } @@ -445,6 +417,8 @@ function getTabUrl() { console.log(`hostname: ${hostname}`); } + hostnameContainer.innerHTML = hostname + let getHostnamePromise = browser.storage.sync.get(hostname); getHostnamePromise.then((res) => { @@ -457,17 +431,25 @@ function getTabUrl() { hostnameFound = 1; } - if(!res[hostname]) { - if (__debugMode) { - console.log(`${hostname} not found in browser.storage.local rules`); - } - } else { + let rules = res[hostname]; + + if(!rules) { if (__debugMode) { - console.log(`${hostname} WAS found in browser.storage.local rules`); - console.log(hostname); - console.log(JSON.parse(res[hostname])); + console.log(`couldn't find stored domain data`); } - ruleObject = JSON.parse(res[hostname]); + } else { + console.log(`${hostname} WAS found in browser.storage.local rules`); + console.log(hostname); + console.log(JSON.parse(res[hostname])); + ruleObject = JSON.parse(rules); + } + + cssText = ruleContentToCssString(ruleObject['content']); + + if (cssText == "") { + setText(""); + } else { + setText(cssText); } listenForClicks(); diff --git a/popup/style_editor.html b/popup/style_editor.html index bc76ff7..5f86456 100644 --- a/popup/style_editor.html +++ b/popup/style_editor.html @@ -3,24 +3,26 @@ Custom Style Manager - + -

- - - + + + + From 92413d501f6805dab1f356a9146349a2b623d939 Mon Sep 17 00:00:00 2001 From: Andrew Cousineau Date: Wed, 5 Jun 2024 00:16:07 -0400 Subject: [PATCH 2/3] Fix: Use textContent over innerHTML --- popup/js/popup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/popup/js/popup.js b/popup/js/popup.js index 3947944..db29642 100644 --- a/popup/js/popup.js +++ b/popup/js/popup.js @@ -417,7 +417,7 @@ function getTabUrl() { console.log(`hostname: ${hostname}`); } - hostnameContainer.innerHTML = hostname + hostnameContainer.textContent = hostname; let getHostnamePromise = browser.storage.sync.get(hostname); From 6ea6aaf03e4d4771c86c68f664641053aae0da9a Mon Sep 17 00:00:00 2001 From: Andrew Cousineau Date: Wed, 5 Jun 2024 14:05:13 -0400 Subject: [PATCH 3/3] Update popup-stylesheet.css Reordering for a cleaner diff. --- popup/css/popup-stylesheet.css | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/popup/css/popup-stylesheet.css b/popup/css/popup-stylesheet.css index c8099d6..80ada22 100644 --- a/popup/css/popup-stylesheet.css +++ b/popup/css/popup-stylesheet.css @@ -2,10 +2,6 @@ display: block; } -.gap { - gap: 16px; -} - .flex { flex : 1; } @@ -22,7 +18,9 @@ flex-direction: row; } - +.gap { + gap: 16px; +} body {