Skip to content

Add Clear button, add Domain header, housekeeping #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AndruC wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add Clear button, add Domain header, housekeeping #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
91b5c54
Add Clear button, add Domain header, housekeeping
AndruC Jun 5, 2024
92413d5
Fix: Use textContent over innerHTML
AndruC Jun 5, 2024
6ea6aaf
Update popup-stylesheet.css
AndruC Jun 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 11 additions & 42 deletions popup/css/popup-stylesheet.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@
flex : 1;
}

.viewport {

}

.flex-container {
display: flex;
}
Expand All @@ -22,53 +18,35 @@
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;
.gap {
gap: 16px;
}


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;

color: black;

border: 1px solid black;
border-radius: 4px;
padding: 4px;
}

#textbox-container {
Expand All @@ -80,21 +58,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;
}
96 changes: 39 additions & 57 deletions popup/js/popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -138,7 +135,7 @@ let getText = () => {
return textBox.value;
}

setText("Oops. You should not be seeing this. Try reopening the window.");
setText("Initializing...");

//////////////////////////

Expand Down Expand Up @@ -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;
}
Expand All @@ -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']);
Copy link
Author

@AndruC AndruC Jun 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved to :447


if (__debugMode) {
console.log(`listenForClicks > cssText`);
console.log(cssText);
}

if (cssText == "") {
Copy link
Author

@AndruC AndruC Jun 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved to :449

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);
Expand All @@ -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) {
Expand All @@ -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);
});
}

Expand Down Expand Up @@ -445,6 +417,8 @@ function getTabUrl() {
console.log(`hostname: ${hostname}`);
}

hostnameContainer.textContent = hostname;

let getHostnamePromise = browser.storage.sync.get(hostname);

getHostnamePromise.then((res) => {
Expand All @@ -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();
Expand Down
28 changes: 15 additions & 13 deletions popup/style_editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,26 @@
<head>
<meta charset="UTF-8">
<title>Custom Style Manager</title>
<link rel="stylesheet" href="css/popup-stylesheet.css" type="text/css">
<link rel="stylesheet" href="css/popup-stylesheet.css" type="text/css">
</head>

<body>

<p id = "hostname-container" class = "flex block-container"> </p>
Copy link
Author

@AndruC AndruC Jun 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved into #textbox-container. The rest is white-space.

<div id = "popup-viewport" class = "viewport flex-container flex-vertical-container">
<div id = "textbox-container" class = "flex block-container">
<textarea id = "popup-textarea" class = "block-container" spellcheck = "false"></textarea>
</div>
<div id = "controls-container" class = "flex flex-container flex-horizontal-container">
<button id = "reset-button" class = "popup-button flex"> Reset </button>
<button id = "apply-button" class = "downward-box-shadow popup-button flex"> Apply </button>
</div>
</div>

<script src = "../rules.json"></script>
<script src = "js/popup.js"></script>
<div id = "popup-viewport" class = "viewport flex-container flex-vertical-container">
<p id = "hostname-container" class = "flex block-container"> </p>
<div id = "textbox-container" class = "flex block-container">
<textarea id = "popup-textarea" class = "block-container" spellcheck = "false"></textarea>
</div>
<div id = "controls-container" class = "gap flex flex-container flex-horizontal-container">
<button id = "clear-button" class = "popup-button flex"> Clear </button>
<button id = "reset-button" class = "popup-button flex"> Undo </button>
<button id = "apply-button" class = "downward-box-shadow popup-button flex"> Apply </button>
</div>
</div>

<script src = "../rules.json"></script>
<script src = "js/popup.js"></script>

</body>
</html>