diff --git a/src/css/options/body.css b/src/css/options/body.css
index 87acba0..1c9d5c4 100644
--- a/src/css/options/body.css
+++ b/src/css/options/body.css
@@ -1,8 +1,3 @@
-
-:root {
- --body-height: 400px;
-}
-
#disabled_message {
text-align: center;
height: var(--body-height);
@@ -14,6 +9,24 @@
font-size: 18px;
}
+#timer_container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: calc(var(--footer-height) + 3px);
+ width: 100vw;
+ z-index: 100;
+ font-size: 18px;
+
+ background-color: rgba(255, 255, 255, 0.97);
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 15vh;
+}
+
#primary_options {
height: var(--body-height);
overflow: scroll;
diff --git a/src/css/options/footer.css b/src/css/options/footer.css
index cbd1895..87a20c4 100644
--- a/src/css/options/footer.css
+++ b/src/css/options/footer.css
@@ -8,19 +8,6 @@ html[dark_mode='true'] #donate_button .footer-path {
fill: var(--body-background-color);
}
-/* Manage history */
-#manage_history_container {
- text-align: center;
- height: 20px;
- padding-top: 5px;
- margin-top: 4px;
- margin-bottom: 4px;
-}
-#manage_history {
- font-size: 18px;
- text-decoration: none;
-}
-
#footer_hr {
text-align: center;
@@ -35,7 +22,7 @@ html[dark_mode='true'] #donate_button .footer-path {
#footer {
position: relative;
text-align: center;
- height: 25px;
+ height: var(--footer-height);
margin-top: 4px;
/*border: 1px groove gray;*/
diff --git a/src/css/options/general.css b/src/css/options/general.css
index 14a97b9..0329e08 100644
--- a/src/css/options/general.css
+++ b/src/css/options/general.css
@@ -1,3 +1,12 @@
+:root {
+ --header-height: 30px;
+ --header-padding: 5px;
+ --body-height: 400px;
+ --footer-height: 25px;
+
+ --border-radius: 3px;
+}
+
html:not([loaded]), html:not([loaded]) body {
height: 0 !important;
overflow: hidden;
@@ -21,7 +30,10 @@ html[dark_mode='false'], html:not([dark_mode]) {
--box-shadow-color: rgba(0, 0, 0, 0.30);
}
-html[global_enable="true"] #disabled_message { display: none; }
+html[global_enable="false"] #timer_container,
+html[global_enable="true"][menu_timer="false"] #timer_container,
+html[global_enable="true"][menu_timer="true"]:not([menu_timer_counting_down]) #timer_container,
+html[global_enable="true"] #disabled_message,
html[global_enable="false"] #primary_options,
html[global_enable="false"] #search_bar {
display: none;
diff --git a/src/css/options/header.css b/src/css/options/header.css
index 546c790..fdb2e6f 100644
--- a/src/css/options/header.css
+++ b/src/css/options/header.css
@@ -1,10 +1,3 @@
-:root {
- --header-height: 30px;
- --header-padding: 5px;
-
- --border-radius: 3px;
-}
-
/* Visual cues when the extension is enabled vs. disabled */
#header-toggle-circle {
-webkit-transition: cx 0.1s;
diff --git a/src/js/background/main.js b/src/js/background/main.js
index 4f59536..c7a438c 100644
--- a/src/js/background/main.js
+++ b/src/js/background/main.js
@@ -261,7 +261,17 @@ const SECTIONS = [
display: false
},
]
- }
+ },
+ {
+ name: "Extension Settings",
+ options: [
+ {
+ name: "Enable menu timer - 10 seconds",
+ id: "menu_timer",
+ defaultValue: false
+ },
+ ]
+ },
];
const OTHER_SETTINGS = {
diff --git a/src/js/options/main.js b/src/js/options/main.js
index a1aedd9..3e0db3b 100644
--- a/src/js/options/main.js
+++ b/src/js/options/main.js
@@ -3,13 +3,16 @@ if (typeof browser === 'undefined') {
browser = typeof chrome !== 'undefined' ? chrome : null;
}
-// Some global constants.
+// Globals
const HTML = document.documentElement;
const OPTIONS_LIST = document.getElementById('primary_options');
const TEMPLATE_FIELDSET = document.getElementById('template_fieldset');
const TEMPLATE_SECTION = document.getElementById('template_section');
const TEMPLATE_OPTION = document.getElementById('template_option');
+const TIMER_CONTAINER = document.getElementById('timer_container');
+let openedTime = Date.now()
+
document.addEventListener("DOMContentLoaded", () => {
browser.runtime.sendMessage({ getFieldsets: true });
document.addEventListener("keydown", handleEnter, false);
@@ -65,6 +68,7 @@ function populateOptions(SECTIONS, headerSettings, SETTING_VALUES) {
const svg = optionNode.querySelector('svg');
const value = id in SETTING_VALUES ? SETTING_VALUES[id] : defaultValue;
+ HTML.setAttribute(id, value);
svg.toggleAttribute('active', value);
optionNode.addEventListener('click', e => {
@@ -103,6 +107,11 @@ function populateOptions(SECTIONS, headerSettings, SETTING_VALUES) {
const searchBar = document.getElementById('search_bar');
searchBar.addEventListener('input', onSearchInput);
+
+ if (SETTING_VALUES['menu_timer']) {
+ HTML.setAttribute('menu_timer_counting_down', '')
+ timerLoop();
+ }
}
@@ -174,3 +183,16 @@ function handleEnter(e) {
const keycode = e.keyCode || e.which;
keycode === 13 && document.activeElement.click();
}
+
+
+function timerLoop() {
+ const timeLeft = 9 - Math.floor((Date.now() - openedTime) / 1000);
+ const timeLeftElt = TIMER_CONTAINER.querySelector('div:nth-child(2)');
+ timeLeftElt.innerText = `${timeLeft} second${timeLeft === 1 ? '' : 's'} remaining.`;
+
+ if (timeLeft < 0) {
+ HTML.removeAttribute('menu_timer_counting_down');
+ } else {
+ setTimeout(timerLoop, 50);
+ }
+}
\ No newline at end of file
diff --git a/src/manifest.json b/src/manifest.json
index 1a67223..c972c44 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -3,7 +3,7 @@
"description": "Spend less time on YouTube. Customize YouTube's user interface to be less engaging.",
"homepage_url": "https://github.com/lawrencehook/remove-youtube-suggestions",
"manifest_version": 2,
- "version": "4.3.6",
+ "version": "4.3.7",
"icons": {
"16": "images/16.png",
diff --git a/src/options.html b/src/options.html
index cdce720..d53735a 100644
--- a/src/options.html
+++ b/src/options.html
@@ -18,6 +18,11 @@
+
+
-
-
-
-
-