Add an option to enable a 'menu timer'

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;

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;*/

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;

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;

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 = {

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);
+  }
+}

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",

src/options.html

@@ -18,6 +18,11 @@
 
   <body>
 
+    <div id="timer_container">
+      <div>Menu Timer</div>
+      <div></div>
+    </div>
+
     <div id='settings-menu' class='hidden'>
       <div id='settings-enable'>Enable</div>
       <div id='settings-disable'>Disable</div>
@@ -104,11 +109,6 @@
 
     </div>
 
-
-    <!-- <div id='manage_history_container'> -->
-      <!-- <a id='manage_history' href='https://myactivity.google.com/product/youtube' title="Too many cat video suggestions? Try removing cat videos from your watch history." target="_blank">Manage History</a> -->
-    <!-- </div> -->
-
     <hr id='footer_hr'>
 
     <div id='footer'>