Polish up the schedule feature

src/background/events.js

@@ -1,4 +1,4 @@
-browser.runtime.openOptionsPage();
+// browser.runtime.openOptionsPage();
 
 const uninstallUrl = "http://lawrencehook.com/rys/👋";
 browser.runtime.setUninstallURL(uninstallUrl);

src/content-script/main.js

@@ -18,15 +18,20 @@ const subsRegex =        new RegExp(/\/feed\/subscriptions$/, 'i');
 
 // Dynamic settings variables
 const cache = {};
-let url;
-let counter = 0, theaterClicked = false, hyper = false;
-let onResultsPage = resultsPageRegex.test(location.href);
-let frameRequested = false;
+let url = location.href;
+let theaterClicked = false, hyper = false;
+let onResultsPage = resultsPageRegex.test(url);
+let onHomepage = homepageRegex.test(url);
+let onShorts = shortsRegex.test(url);
+let onSubs = subsRegex.test(url);
+
 let dynamicIters = 0;
-// let lastRun = Date.now();
+let frameRequested = false;
 let isRunning = false;
+// let lastRun = Date.now();
+// let counter = 0;
 let lastScheduleCheck;
-const scheduleInterval = 30_000; // 30 seconds
+const scheduleInterval = 2_000; // 2 seconds
 
 
 // Respond to changes in settings
@@ -66,15 +71,7 @@ browser.storage.local.get(settings => {
 });
 
 
-document.addEventListener("DOMContentLoaded", event => {
-  url = undefined;
-  counter = 0;
-  theaterClicked = false;
-  hyper = false;
-  onResultsPage = resultsPageRegex.test(location.href);
-
-  handleNewPage();
-});
+document.addEventListener("DOMContentLoaded", e => handleNewPage());
 
 
 // Dynamic settings (i.e. js instead of css)
@@ -84,6 +81,7 @@ function runDynamicSettings() {
   // lastRun = Date.now();
   isRunning = true;
   dynamicIters += 1;
+  const on = cache['global_enable'] === true;
 
   // Scheduling, timedChanges
   timeBlock: try {
@@ -104,31 +102,24 @@ function runDynamicSettings() {
     if (scheduleEnabled && (!lastScheduleCheck || scheduleCheckTimeElapsed)) {
       lastScheduleCheck = Date.now();
       const scheduleIsActive = checkSchedule(cache['scheduleTimes'], cache['scheduleDays']);
-      if (scheduleIsActive) {
-        if (!cache['global_enable']) {
-          updateSetting('global_enable', true);
-        }
-      } else {
-        if (cache['global_enable']) {
-          updateSetting('global_enable', false);
-        }
+      const scheduleChange = (scheduleIsActive && !on) || (!scheduleIsActive && on);
+      if (scheduleChange) {
+        updateSetting('global_enable', !on);
       }
     }
   } catch (error) {
     console.log(error);
   }
 
-  if ('global_enable' in cache && cache['global_enable'] !== true) {
+  if (!on) {
+    frameRequested = false;
+    isRunning = false;
     requestRunDynamicSettings();
     return;
   }
 
   // Check if the URL has changed (YouTube is a Single-Page Application)
   if (url !== location.href) {
-    url = location.href;
-    theaterClicked = false;
-    hyper = false;
-    onResultsPage = resultsPageRegex.test(location.href);
     handleNewPage();
   }
 
@@ -166,7 +157,7 @@ function runDynamicSettings() {
     });
 
     // Subscriptions page options
-    if (subsRegex.test(url)) {
+    if (onSubs) {
       const badgeSelector = 'ytd-badge-supported-renderer';
       const upcomingBadgeSelector = 'ytd-thumbnail-overlay-time-status-renderer[overlay-style="UPCOMING"]';
       const shortsBadgeSelector = 'ytd-thumbnail-overlay-time-status-renderer[overlay-style="SHORTS"]';
@@ -367,6 +358,8 @@ function requestRunDynamicSettings() {
 
 
 function injectScripts() {
+  const on = cache['global_enable'] === true;
+  if (!on) return;
 
   // Disable playlist autoplay
   if (cache['disable_playlist_autoplay']) {
@@ -394,14 +387,16 @@ setInterval(f, 100);
 
 
 function handleNewPage() {
-  if (cache['global_enable'] !== true) return;
+  const on = cache['global_enable'] === true;
 
   dynamicIters = 0;
-
-  const currentUrl = location.href;
-  const onHomepage = homepageRegex.test(currentUrl);
-  const onResultsPage = resultsPageRegex.test(currentUrl);
-  const onShorts = shortsRegex.test(currentUrl);
+  url = location.href;
+  theaterClicked = false;
+  hyper = false;
+  onResultsPage = resultsPageRegex.test(url);
+  onHomepage = homepageRegex.test(url);
+  onShorts = shortsRegex.test(url);
+  onSubs = subsRegex.test(url)
 
   // Mark whether or not we're on the search results page
   HTML.setAttribute('on_results_page', onResultsPage);
@@ -410,15 +405,15 @@ function handleNewPage() {
   HTML.setAttribute('on_homepage', onHomepage);
 
   // Homepage redirects
-  if (onHomepage && !cache['redirect_off']) {
+  if (on && onHomepage && !cache['redirect_off']) {
     if (cache['redirect_to_subs'])    location.replace(REDIRECT_URLS['redirect_to_subs']);
     if (cache['redirect_to_wl'])      location.replace(REDIRECT_URLS['redirect_to_wl']);
     if (cache['redirect_to_library']) location.replace(REDIRECT_URLS['redirect_to_library']);
   }
 
   // Redirect the shorts player
-  if (onShorts && cache['normalize_shorts']) {
-    const newUrl = currentUrl.replace('shorts', 'watch');
+  if (on && onShorts && cache['normalize_shorts']) {
+    const newUrl = url.replace('shorts', 'watch');
     location.replace(newUrl);
   }
 

src/options/body.css

@@ -16,7 +16,7 @@ html[foo="bar"] {
   height: var(--body-height);
   padding: 1px;
 
-  font-size: 18px;
+  font-size: 1rem;
 
   display: flex;
   justify-content: center;
@@ -154,7 +154,7 @@ html[foo="bar"] {
 #schedule_container {
   height: fit-content;
   width: min(90vw, 800px);
-  margin-top: calc(3 * var(--header-height));
+  margin-top: calc(1.2 * var(--header-height));
   margin-right: auto;
   margin-left: auto;
   padding: 20px;
@@ -168,14 +168,32 @@ html[foo="bar"] {
   border: 1px solid var(--box-shadow-color);
   border-radius: 2px;
 
+  display: flex;
+  gap: 60px;
+  flex-direction: column;
+  align-items: center;
+}
+
+#schedule_modal_header {
   display: flex;
   gap: 15px;
   flex-direction: column;
   align-items: center;
 }
 
+#schedule_modal_header div:first-child {
+  font-size: 1.1rem;
+  font-weight: bold;
+}
+
+/* Gray out options when disabled */
+html[schedule="false"] #schedule_container > *:not(#schedule_modal_header) {
+  opacity: 0.2;
+  pointer-events: none;
+  user-select: none;
+}
+
 #enable-schedule {
-  margin-bottom: 20px;
   cursor: default;
   user-select: none;
 
@@ -187,6 +205,7 @@ html[foo="bar"] {
 }
 #enable-schedule p {
   margin: 0;
+  font-size: 0.9rem;
 }
 
 #times-container, #days-container {
@@ -195,29 +214,31 @@ html[foo="bar"] {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  align-items: flex-start;
+  gap: 20px;
+  align-items: flex-end;
 }
 
-.options-container {
+.label-container {
   display: flex;
   flex-direction: column;
   gap: 5px;
+  align-items: flex-start;
+}
+
+.label-container > div:first-child {
+  font-weight: bold;
 }
 
 .predefined-options {
   display: flex;
   gap: 10px;
   user-select: none;
-}
-
-.custom-option {
-  display: flex;
-  gap: 10px;
-  justify-content: right;
+  font-size: 0.8rem;
 }
 
 #schedule-times {
   width: 100%;
+  max-width: 215px;
   padding: 2px 5px;
   font-size: 0.8rem;
   box-sizing: border-box;
@@ -237,7 +258,7 @@ html[foo="bar"] {
   box-sizing: border-box;
 }
 #schedule-days > div {
-  width: 35px;
+  width: 30px;
   padding: 1px 2px;
   border-radius: 2px;
   box-sizing: border-box;
@@ -250,7 +271,7 @@ html[foo="bar"] {
   border: 2px solid var(--blue-color);
 }
 
-.predefined-options a, .custom-option a {
+.predefined-options a {
   cursor: pointer;
 }
 
@@ -262,7 +283,7 @@ html[foo="bar"] {
   bottom: calc(var(--footer-height) + 3px);
   width: 100vw;
   z-index: 100;
-  font-size: 18px;
+  font-size: 1rem;
 
   background-color: rgba(255, 255, 255, 0.97);
 
@@ -279,7 +300,7 @@ html[foo="bar"] {
 }
 
 #sidebar {
-  height: var(--body-height);
+  height: calc(6px + var(--body-height));
   width: 150px;
   padding: 10px 3px;
   overflow: hidden;
@@ -287,8 +308,9 @@ html[foo="bar"] {
   box-sizing: border-box;
   user-select: none;
 
-  border-radius: 3px;
-  box-shadow: 0px 0px 1px 0.5px var(--box-shadow-color);
+  border-radius: 1px;
+  border-right: 1.5px solid var(--box-shadow-color);
+/*  box-shadow: 0px 0px 1px 0.5px var(--box-shadow-color);*/
 
   display: flex;
   flex-direction: column;
@@ -296,7 +318,7 @@ html[foo="bar"] {
 }
 #sidebar .sidebar_section {
   padding: 7px;
-  border-radius: 3px;
+  border-radius: var(--border-radius);
   box-sizing: border-box;
 
   font-size: 16px;
@@ -320,22 +342,3 @@ html[foo="bar"] {
   flex-direction: column;
   gap: 3px;
 }
-
-#primary_options .section_container {
-  margin: 0px 5px;
-  padding: 10px;
-  box-sizing: border-box;
-
-  background-color: var(--body-background-color);
-  border-radius: 1px;
-  box-shadow: 0px 0px 0.5px 0.5px var(--box-shadow-color);
-}
-
-#primary_options .section_label {
-  margin-bottom: 5px;
-  margin-left: 10px;
-
-  font-size: 18px;
-  text-align: left;
-  color: var(--label-color);
-}

src/options/donors/donors.css

@@ -4,8 +4,8 @@
 }
 
 html[dark_mode='false'], html:not([dark_mode]) {
-	--body-color: #303030;
-	--body-background-color: #EEEEEE;
+	--body-color: #161616;
+	--body-background-color: #FAFAFA;
 	--label-color: #101010;
 	--box-shadow-color: rgba(0, 0, 0, 0.30);
 }
@@ -116,7 +116,7 @@ footer {
 }
 footer p {
 	margin: 0;
-	font-size: 18px;
+	font-size: 1rem;
 	text-align: center;
 }
 
@@ -157,7 +157,7 @@ footer p {
 
 #donate_button {
 	padding: 3px 10px;
-	font-size: 18px;
+	font-size: 1rem;
 
 	text-decoration: none;
 	background-color: white;

src/options/feedback/feedback.css

@@ -3,8 +3,8 @@
 }
 
 html[dark_mode='false'], html:not([dark_mode]) {
-	--body-color: #303030;
-	--body-background-color: #EEEEEE;
+	--body-color: #161616;
+	--body-background-color: #FAFAFA;
 	--label-color: #101010;
 	--box-shadow-color: rgba(0, 0, 0, 0.30);
 }

src/options/footer.css

@@ -8,23 +8,12 @@ html[dark_mode='true'] #donate_button .footer-path  {
   fill: var(--body-background-color);
 }
 
-#footer_hr {
-  text-align: center;
-
-  height: 1px;
-  width: 99%;
-  margin: 1px 0;
-  border-width: 0;
-
-  background-color: var(--box-shadow-color);
-}
-
 #footer {
   position: relative;
   text-align: center;
   height: var(--footer-height);
-  margin-top: 4px;
 
+  border-top: 1.5px solid var(--box-shadow-color);
   /*border: 1px groove gray;*/
 
   display: flex;

src/options/general.css

@@ -4,7 +4,7 @@
   --body-height: 400px;
   --footer-height: 25px;
 
-  --border-radius: 3px;
+  --border-radius: 1px;
 
   --red-color:  hsl(358 100% 49%);
   --blue-color: hsl(238 100% 49%);
@@ -19,7 +19,7 @@ html:not([loaded]), html:not([loaded]) body {
 
 body {
   margin: auto;
-  font-size: 18px !important;
+  font-size: 1rem !important;
 }
 
 html[dark_mode='true'] {
@@ -63,9 +63,7 @@ a {
 body {
   width: 600px;
   height: fit-content;
-
-  /* top, right, bottom, left */
-  padding: 2px 4px 3px 4px;
+  padding: 1px;
 }
 
 body, body * {
@@ -75,6 +73,9 @@ body, body * {
 .hidden {
   visibility: hidden;
 }
+.removed {
+  display: none !important;
+}
 
 input {
   background-color: var(--body-background-color);

src/options/header.css

@@ -3,14 +3,6 @@
 html[dark_mode='false'] { --svg-color: #464646 }
 html[dark_mode='true']  { --svg-color: #E9E9E9 }
 
-/* Visual cues for schedule */
-/*html[schedule='true'] #global_enable,*/
-html[schedule='true'] #settings-enable,
-html[schedule='true'] #settings-disable,
-html[foo="bar"]{
-  display: none;
-}
-
 #header-settings circle,
 #header-toggle path,
 .dark_mode circle, .dark_mode path
@@ -26,6 +18,8 @@ html[dark_mode='false'] #header-light { display: none }
   height: var(--header-height);
   padding: var(--header-padding);
 
+  border-bottom: 1.5px solid var(--box-shadow-color);
+
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -34,17 +28,10 @@ html[dark_mode='false'] #header-light { display: none }
   --icon-dim: 30px;
 }
 
-#header_hr {
-  text-align: center;
-
-  height: 1px;
-  width: 99%;
-  margin: 1px 0;
-  border-width: 0;
-
-  background-color: var(--box-shadow-color);
+#header-logo-link {
+  display: flex;
+  align-items: center;
 }
-
 #header-logo {
   height: var(--icon-dim);
   max-height: var(--icon-dim);
@@ -52,7 +39,7 @@ html[dark_mode='false'] #header-light { display: none }
 }
 #header-text {
   margin-right: auto;
-  font-size: 20px;
+  font-size: 1.3rem;
   color: var(--label-color);
 }
 
@@ -60,11 +47,22 @@ html[dark_mode='false'] #header-light { display: none }
   margin-right: auto;
 }
 #search_bar input {
-  padding: 3px 6px 3px 6px;
-  font-size: 18px;
+  padding: 3px 10px;
+  font-size: 1rem;
+
+  background-color: var(--body-background-color);
+
+  border: 1px solid var(--box-shadow-color);
+  border-radius: var(--border-radius);
+  box-shadow: 0px 0px 0px 0px var(--box-shadow-color);
+
 }
 
-#header-toggle {
+#power-icon {
+  display: flex;
+  justify-content: center;
+}
+#power-icon svg {
   cursor: pointer;
 
   --power-icon-dim: calc(var(--icon-dim) - 6px);
@@ -108,8 +106,11 @@ html[dark_mode='false'] #header-light { display: none }
 #power-options a, #power-options span {
   text-decoration: none;
 }
-html[schedule="true"] #power-options div:not([minutes]),
-html[schedule="true"] #power-options hr,
+html[schedule="false"] #power-options #resume-schedule,
+html[nextTimedChange="false"] #power-options #resume-schedule,
+html[schedule="true"]:not([nextTimedChange="false"]) #power-options *:not(#resume-schedule),
+html[schedule="true"] #power-options #global_enable,
+html[schedule="false"] #power-options #open-schedule,
 html[global_enable="true"] #power-options span.on,
 html[global_enable="false"] #power-options span.off,
 html[foo=bar]
@@ -172,8 +173,6 @@ html[foo=bar]
 #settings-menu a {
   text-decoration: none;
 }
-html[global_enable="true"] #settings-enable,
-html[global_enable="false"] #settings-disable,
 html[log_enabled="true"] #log-enable,
 html[log_enabled="false"] #log-disable,
 html[foo=bar]

src/options/main.html

@@ -44,52 +44,49 @@
     <div id="schedule_container_background" hidden>
       <div id="schedule_container">
 
-        <div>Schedule — Set the times for RYS to be active</div>
-
-        <div id='enable-schedule'>
-          <svg class='option_toggle' viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-            <path class='option-toggle-outer-path' fill="gray"  d="M 11, 3 H 5 C 2.239, 3, 0, 5.239, 0, 8 s 2.239, 5, 5, 5 h 6 c 2.761, 0, 5 -2.239, 5 -5 S 13.761, 3, 11, 3 z"/>
-            <circle class='option-toggle-circle' fill="white" cx="5" cy="8" r="3"/>
-          </svg>
-          <p>Enable Schedule</p>
+        <div id='schedule_modal_header'>
+          <div>Schedule</div>
+          <div id='enable-schedule'>
+            <svg class='option_toggle' viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+              <path class='option-toggle-outer-path' fill="gray"  d="M 11, 3 H 5 C 2.239, 3, 0, 5.239, 0, 8 s 2.239, 5, 5, 5 h 6 c 2.761, 0, 5 -2.239, 5 -5 S 13.761, 3, 11, 3 z"/>
+              <circle class='option-toggle-circle' fill="white" cx="5" cy="8" r="3"/>
+            </svg>
+            <p>Set times for RYS to be active</p>
+          </div>
         </div>
 
 
         <!-- schedule times -->
         <div id='times-container'>
-          <div>Hours of the day</div>
-          <div class='options-container'>
+          <div class='label-container'>
+            <div>Hours of the day</div>
             <div class="predefined-options">
               <a times="8:30a-4:30p">8:30a-4:30p</a>
               <a times="9:00a-5:00p">9:00a-5:00p</a>
               <a times="9:30a-5:30p">9:30a-5:30p</a>
             </div>
-            <div class="custom-option">
-              <input id="schedule-times" type='text' placeholder="9:00a-5:00p">
-            </div>
           </div>
+          <input id="schedule-times" type='text' placeholder="ex. 9:00a-12:00p, 1:00p-5:00p">
         </div>
 
         <!-- schedule days -->
         <div id='days-container'>
-          <div>Days of the week</div>
-          <div class='options-container'>
+          <div class='label-container'>
+            <div>Days of the week</div>
             <div class="predefined-options">
               <a days="su,mo,tu,we,th,fr,sa">Everyday</a>
               <a days="mo,tu,we,th,fr">Weekdays</a>
               <a days="sa,su">Weekends</a>
             </div>
-            <div class="custom-option">
-              <div id="schedule-days">
-                <div day="su">Su</div>
-                <div day="mo">Mo</div>
-                <div day="tu">Tu</div>
-                <div day="we">We</div>
-                <div day="th">Th</div>
-                <div day="fr">Fr</div>
-                <div day="sa">Sa</div>
-              </div>
-            </div>
+          </div>
+          <div id="schedule-days">
+            <div day="su">S</div>
+            <div day="mo">M</div>
+            <div day="tu">T</div>
+            <div day="we">W</div>
+            <div day="th">T</div>
+            <div day="fr">F</div>
+            <div day="sa">S</div>
           </div>
         </div>
 
@@ -102,8 +99,6 @@
     </div>
 
     <div id='settings-menu' class='hidden'>
-      <div id='settings-enable'>Enable</div>
-      <div id='settings-disable'>Disable</div>
       <div id='settings-schedule'>Schedule</div>
       <hr>
       <div id='import-settings'>Import settings</div>
@@ -123,6 +118,8 @@
 
     <div id="power-options" hidden>
       <div id='global_enable'>Turn <span class="on">on</span><span class='off'>off</span></div>
+      <div id='open-schedule'>Edit Schedule</div>
+      <div id='resume-schedule'>Resume Schedule</div>
       <hr>
       <div minutes="10">Turn <span class="on">on</span><span class='off'>off</span> for 10 minutes</div>
       <div minutes="30">Turn <span class="on">on</span><span class='off'>off</span> for 30 minutes</div>
@@ -133,7 +130,7 @@
 
     <div id='header'>
 
-      <a href='https://lawrencehook.com/rys' target='_blank'>
+      <a id="header-logo-link" href='https://lawrencehook.com/rys' target='_blank'>
         <img id='header-logo' src="/images/rys.svg">
       </a>
 
@@ -178,8 +175,6 @@
 
     </div>
 
-    <hr id='header_hr'>
-
     <div id="disabled_message_container">
       <div id="disabled_message">
         <p>RYS is disabled</p>
@@ -191,7 +186,7 @@
         <p>RYS is disabled.</p>
         <p>Will be re-enabled on <span></span>.</p>
       </div>
-      <div id="disabled_message_open_schedule">Change schedule</div>
+      <div id="disabled_message_open_schedule">Edit schedule</div>
     </div>
 
     <div id="main_container">
@@ -205,7 +200,7 @@
       <div id="primary_options" tabindex="-1">
 
         <div id='template_section' class='section_container removed'>
-          <div class='section_label'><a></a></div>
+          <div class='section_label'><a target="_blank"></a></div>
         </div>
 
         <div id='template_option' class='option removed' tabindex="0">
@@ -220,8 +215,6 @@
       </div>
     </div>
 
-    <hr id='footer_hr'>
-
     <div id='footer'>
 
       <a id='reload_button' title='Reload the current page'>Reload</a>

src/options/main.js

@@ -247,9 +247,11 @@ function updateSetting(id, value, { write=true, manual=false }={}) {
 function onSearchInput(e) {
   const { target } = e;
   const { value } = target;
-  const sections = Array.from(document.querySelectorAll('.section_container:not(#template_section)'));
+  const sidebarSections = qsa('.sidebar_section');
+  const sections = qsa('.section_container:not(#template_section)');
 
   // Reset
+  sidebarSections.forEach(s => s.removeAttribute('selected'));
   sections.forEach(section => {
     section.classList.remove('removed');
     const options = Array.from(section.querySelectorAll('div.option'));
@@ -289,10 +291,10 @@ function onSearchInput(e) {
 
 function sidebarSectionListener(e) {
   const sidebarSection = e.target;
-  const sidebarSections = Array.from(document.querySelectorAll('.sidebar_section'));
+  const sidebarSections = qsa('.sidebar_section');
   const selected = sidebarSection.toggleAttribute('selected');
   const tag = sidebarSection.getAttribute('tag');
-  const sections = Array.from(document.querySelectorAll('.section_container:not(#template_section)'));
+  const sections = qsa('.section_container:not(#template_section)');
 
   recordEvent('Section selected', { tag, selected });
 

src/options/options.css

@@ -1,7 +1,35 @@
-.removed {
-	display: none !important;
+
+#primary_options .section_container {
+  margin: 0px 2px;
+  padding: 5px;
+  box-sizing: border-box;
+
+  background-color: var(--body-background-color);
+  border-radius: 1px;
+/*  box-shadow: 0px 0px 0.5px 0.5px var(--box-shadow-color);*/
+
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
 }
 
+#primary_options .section_label {
+  margin-bottom: 3px;
+  margin-left: 35px;
+  width: fit-content;
+
+  font-size: 1rem;
+  text-align: left;
+  color: var(--label-color);
+
+  border-bottom: 1px solid var(--box-shadow-color);
+}
+
+#primary_options .section_label a {
+  text-decoration: none;
+}
+
+
 div.option {
 	cursor: default;
   display: flex;
@@ -27,7 +55,7 @@ div.option {
 	position: relative;
 	top: 2px;
 	margin-left: 8px;
-  font-size: 18px;
+  font-size: 0.95rem;
 }
 
 .noselect {

src/options/settings-menu.js

@@ -11,13 +11,9 @@ hydrateDropdown(SETTINGS_BUTTON, SETTINGS_MENU,
 
 
 // Global toggle
-const SETTINGS_ENABLE = document.getElementById('settings-enable');
-const SETTINGS_DISABLE = document.getElementById('settings-disable');
 const POWER_ICON = qs('#power-icon');
 const POWER_OPTIONS_MENU = qs('#power-options');
 const POWER_OPTIONS = qsa('#power-options > div');
-SETTINGS_ENABLE.addEventListener('click', e => updateSetting('global_enable', true));
-SETTINGS_DISABLE.addEventListener('click', e => updateSetting('global_enable', false));
 hydrateDropdown(POWER_ICON, POWER_OPTIONS_MENU);
 POWER_OPTIONS.forEach(o => {
   const minutes = o.getAttribute('minutes');
@@ -37,6 +33,8 @@ POWER_OPTIONS.forEach(o => {
  **************/
 const scheduleModalContainer = document.getElementById('schedule_container_background');
 const SCHEDULING_OPTION = document.getElementById('settings-schedule');
+const OPEN_SCHEDULE_OPTION = qs('#open-schedule');
+const RESUME_SCHEDULE_OPTION = qs('#resume-schedule');
 const scheduleToggleContainer = document.getElementById('enable-schedule');
 const scheduleToggle = scheduleToggleContainer.querySelector('svg');
 const SCHEDULE_TIMES = document.getElementById('schedule-times');
@@ -68,7 +66,6 @@ scheduleModalContainer.addEventListener('click', e => {
   closeScheduleModal();
 });
 
-// openScheduleModal();
 function openScheduleModal() {
   scheduleModalContainer.removeAttribute('hidden');
 
@@ -84,6 +81,14 @@ function openScheduleModal() {
 SCHEDULING_OPTION.addEventListener('click', e => {
   openScheduleModal();
 });
+OPEN_SCHEDULE_OPTION.addEventListener('click', e => {
+  openScheduleModal();
+});
+RESUME_SCHEDULE_OPTION.addEventListener('click', e => {
+  const scheduleIsActive = checkSchedule(cache['scheduleTimes'], cache['scheduleDays']);
+  updateSetting('global_enable', scheduleIsActive);
+  updateSetting('nextTimedChange', false);
+});
 
 // Schedule on/off
 scheduleToggleContainer.addEventListener('click', e => {
@@ -116,7 +121,7 @@ SCHEDULE_DAYS_OPTIONS.forEach(o => {
       newDays = currentDays.filter(d => d.toLowerCase().trim() !== day);
     }
 
-    updateSetting('scheduleDays', newDays.join(','))
+    updateSetting('scheduleDays', newDays.filter(d => d !== '').join(','))
   });
 });
 

src/shared/main.js

@@ -21,15 +21,20 @@ const SECTIONS = [
         id: "remove_video_thumbnails",
         defaultValue: false,
       },
+      {
+        name: "Hide the notification bell",
+        id: "remove_notif_bell",
+        defaultValue: false,
+      },
       {
         name: "Enable search engine mode",
         id: "search_engine_mode",
         defaultValue: false,
       },
       {
-        name: "Hide the notification bell",
-        id: "remove_notif_bell",
-        defaultValue: false,
+        name: "Enable menu timer - 10 seconds",
+        id: "menu_timer",
+        defaultValue: false
       },
     ]
   },
@@ -404,17 +409,6 @@ const SECTIONS = [
       },
     ]
   },
-  {
-    name: "Extension Settings",
-    tags: "Settings",
-    options: [
-      {
-        name: "Enable menu timer - 10 seconds",
-        id: "menu_timer",
-        defaultValue: false
-      },
-    ]
-  },
 ];
 
 const TIMED_SETTINGS = {

src/shared/utils.js

@@ -84,6 +84,7 @@ function nextScheduleChange(times, days) {
 
 
 function formatDateMessage(date) {
+	if (!date) return 'unknown date';
 	return date.toLocaleDateString('en-us', {
 		weekday:"long",
 		month:"long",
@@ -96,6 +97,7 @@ function formatDateMessage(date) {
 
 
 function formatDateMessageShort(date) {
+	if (!date) return 'unknown date';
 	return date.toLocaleDateString('en-us', {
 		hour: "numeric",
 		minute: "numeric",