Add a sidebar to navigate the various sections. Pre-selected based on current URL

src/css/options/body.css

@@ -46,29 +46,69 @@
   gap: 15vh;
 }
 
-#primary_options {
+#main_container {
+  display: flex;
+  flex-direction: row;
+}
+
+#sidebar {
   height: var(--body-height);
+  width: 150px;
+  /*margin-top: 11px;*/
+  /*margin-bottom: 10px;*/
+  padding: 10px 3px;
+  overflow: scroll;
+  overflow-x: hidden;
+
+  box-sizing: border-box;
+  user-select: none;
+
+  border-radius: 3px;
+  box-shadow: 0px 0px 1px 0.5px var(--box-shadow-color);
+
+  display: flex;
+  flex-direction: column;
+  gap: 0px;
+}
+#sidebar .sidebar_section {
+  padding: 7px;
+  border-radius: 3px;
+  box-sizing: border-box;
+
+  /*font-size: 16px;*/
+  /*font-weight: bold;*/
+}
+#sidebar .sidebar_section:hover {
+}
+#sidebar .sidebar_section[selected] {
+  background-color: var(--label-color);
+  color: var(--body-background-color);
+}
+
+#primary_options {
+  height: var(--body-height);
+  width: 100%;
   overflow: scroll;
   overflow-x: hidden;
 
-  -webkit-transition: box-shadow 0.1s;
-  -moz-transition: box-shadow 0.1s;
-  -o-transition: box-shadow 0.1s;
-  transition: box-shadow 0.1s;
   padding: 1px;
-  padding-top: 6px;
+  /*padding-top: 6px;*/
+
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
 }
 
 #primary_options .section_container {
-  margin-bottom: 10px;
+  /*margin-bottom: 10px;*/
 }
 
 #primary_options .section_container:not(:last-child) {
-  margin-bottom: 20px;
+  /*margin-bottom: 20px;*/
 }
 
-.section_container {
-  margin: 5px;
+#primary_options .section_container {
+  margin: 0px 5px;
   padding: 10px;
   box-sizing: border-box;
 
@@ -77,7 +117,7 @@
   box-shadow: 0px 0px 3px 0.5px var(--box-shadow-color);
 }
 
-.section_label {
+#primary_options .section_label {
   margin-bottom: 5px;
 
   font-size: 18px;

src/css/options/footer.css

@@ -12,11 +12,11 @@ html[dark_mode='true'] #donate_button .footer-path  {
   text-align: center;
 
   height: 1px;
-  width: 90%;
+  width: 99%;
   margin: auto;
   border-width: 0;
 
-  background-color: gray;
+  background-color: var(--box-shadow-color);
 }
 
 #footer {

src/css/options/general.css

@@ -5,6 +5,8 @@
   --footer-height: 25px;
 
   --border-radius: 3px;
+
+  --blue-color: #0006FB;
 }
 
 html:not([loaded]), html:not([loaded]) body {
@@ -34,7 +36,7 @@ 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_container,
-html[global_enable="false"] #primary_options,
+html[global_enable="false"] #main_container,
 html[global_enable="false"] #search_bar {
   display: none;
 }
@@ -52,7 +54,7 @@ a {
 }
 
 body {
-  width: 450px;
+  width: 600px;
   height: fit-content;
 
   /* top, right, bottom, left */

src/css/options/options.css

@@ -31,11 +31,5 @@ div.option {
 }
 
 .noselect {
-  -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Old versions of Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome, Edge, Opera and Firefox */
+  user-select: none;
 }

src/js/background/events.js

@@ -35,9 +35,6 @@ browser.storage.onChanged.addListener((changes, area) => {
       if (changes[item].newValue === true)  icons = activeIcons;
 
       browser.browserAction.setIcon(icons);
-      browser.tabs.query({ url: '*://*.youtube.com/*' }, tabs => {
-        tabs.forEach(tab => browser.pageAction.setIcon({ tabId: tab.id, ...icons }));
-      });
     }
 
   }

src/js/background/main.js

@@ -1,6 +1,7 @@
 const SECTIONS = [
   {
     name: "Basic",
+    sidebarName: "Basic",
     options: [
       {
         name: "Hide homepage suggestions",
@@ -21,6 +22,7 @@ const SECTIONS = [
   },
   {
     name: "Homepage",
+    sidebarName: "Homepage",
     options: [
       {
         name: "Hide the header",
@@ -53,6 +55,7 @@ const SECTIONS = [
   },
   {
     name: "Left Navigation Bar",
+    sidebarName: "Left Navbar",
     options: [
       {
         name: "Hide the entire left nav bar",
@@ -88,6 +91,7 @@ const SECTIONS = [
   },
   {
     name: "Left Navigation Bar Sections",
+    sidebarName: "Left Navbar",
     options: [
       {
         name: "Hide the quick links section",
@@ -113,6 +117,7 @@ const SECTIONS = [
   },
   {
     name: "Video Player (dynamic)",
+    sidebarName: "Video Player",
     options: [
       {
         name: "Skip and close ads",
@@ -138,6 +143,7 @@ const SECTIONS = [
   },
   {
     name: "Video Player (static)",
+    sidebarName: "Video Player",
     options: [
       {
         name: "Center contents (removes the sidebar)",
@@ -183,6 +189,7 @@ const SECTIONS = [
   },
   {
     name: "Search Results",
+    sidebarName: "Search",
     options: [
       {
         name: "Hide search bar suggestions",
@@ -208,6 +215,7 @@ const SECTIONS = [
   },
 {
     name: "Subscriptions Page",
+    sidebarName: "Subscriptions",
     options: [
       {
         name: "Hide shorts in subscriptions",
@@ -228,6 +236,7 @@ const SECTIONS = [
   },
   {
     name: "Redirect the Homepage",
+    sidebarName: "Redirects",
     options: [
       {
         name: "Redirect home to Subscriptions",
@@ -284,6 +293,7 @@ const SECTIONS = [
   },
   {
     name: "Extension Settings",
+    sidebarName: "Settings",
     options: [
       {
         name: "Enable menu timer - 10 seconds",

src/js/options/main.js

@@ -5,13 +5,21 @@ if (typeof browser === 'undefined') {
 
 // Globals
 const HTML = document.documentElement;
+const SIDEBAR = document.getElementById('sidebar');
+const TEMPLATE_SIDEBAR_SECTION = document.getElementById('template_sidebar_section');
 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()
+let openedTime = Date.now();
+let currentUrl;
+
+const resultsPageRegex = new RegExp('.*://.*youtube\\.com/results.*', 'i');
+const videoPageRegex =   new RegExp('.*://(www|m)\\.youtube\\.com/watch\\?v=.*', 'i');
+const homepageRegex =    new RegExp('.*://(www|m)\\.youtube\\.com/$',  'i');
+const shortsRegex =      new RegExp('.*://.*youtube\.com/shorts.*',  'i');
+const subsRegex =        new RegExp(/\/feed\/subscriptions$/, 'i');
 
 document.addEventListener("DOMContentLoaded", () => {
   browser.runtime.sendMessage({ getFieldsets: true });
@@ -26,8 +34,11 @@ browser.runtime.onMessage.addListener((data, sender) => {
 
     // Initial page load.
     if (SECTIONS) {
-      populateOptions(SECTIONS, headerSettings, settings);
-      HTML.setAttribute('loaded', true);
+      browser.tabs.query({ currentWindow: true, active:true }, ([{ url }]) => {
+        currentUrl = url;
+        populateOptions(SECTIONS, headerSettings, settings);
+        HTML.setAttribute('loaded', true);
+      })
     }
 
     return true;
@@ -40,17 +51,22 @@ browser.runtime.onMessage.addListener((data, sender) => {
 
 function populateOptions(SECTIONS, headerSettings, SETTING_VALUES) {
 
-  // Clear the options list
+  // Clear the options list, and the sidebar
   OPTIONS_LIST.innerHTML = '';
+  SIDEBAR.innerHTML = '';
+  sidebarNames = [];
 
   // Add option nodes to the HTML.
   SECTIONS.forEach(section => {
-    const { name, options } = section;
+    const { name, sidebarName, options } = section;
+
+    sidebarNames.push(sidebarName);
 
     // Create a new section
     const sectionNode = TEMPLATE_SECTION.cloneNode(true);
     sectionNode.id = name;
     sectionNode.classList.remove('removed');
+    sectionNode.setAttribute('sidebarName', sidebarName);
     const label = sectionNode.querySelector('.section_label');
     label.innerText = name;
 
@@ -90,9 +106,35 @@ function populateOptions(SECTIONS, headerSettings, SETTING_VALUES) {
     OPTIONS_LIST.append(sectionNode);
   });
 
+  // Add sections to the sidebar
+  const uniqueSidebarNames = Array.from(new Set(sidebarNames));
+  uniqueSidebarNames.forEach(sidebarName => {
+    const sidebarSection = TEMPLATE_SIDEBAR_SECTION.cloneNode(true);
+    sidebarSection.removeAttribute('hidden');
+    sidebarSection.removeAttribute('id');
+    sidebarSection.setAttribute('sidebarName', sidebarName);
+    sidebarSection.innerText = sidebarName;
+    sidebarSection.addEventListener('click', sidebarSectionListener);
+    SIDEBAR.append(sidebarSection);
+  });
+
+  // Pre-select sidebar option based on current window.
+  if (resultsPageRegex.test(currentUrl)) {
+    console.log('matched resultsPageRegex');
+    document.querySelector('.sidebar_section[sidebarname="Search"]').click();
+  }
+  if (videoPageRegex.test(currentUrl)) {
+    console.log('matched videoPageRegex');
+    document.querySelector('.sidebar_section[sidebarname="Video Player"]').click();
+  }
+  if (subsRegex.test(currentUrl)) {
+    console.log('matched subsRegex');
+    document.querySelector('.sidebar_section[sidebarname="Subscriptions"]').click();
+  }
+
   if (headerSettings) {
     Object.entries(headerSettings).forEach(([ id, value ]) => {
-      updateSetting(id, value);
+      HTML.setAttribute(id, value);
 
       const svg = document.querySelector(`div#${id} svg`);
       svg?.toggleAttribute('active', value);
@@ -182,6 +224,35 @@ function onSearchInput(e) {
 }
 
 
+function sidebarSectionListener(e) {
+  const sidebarSection = e.target;
+  const sidebarSections = Array.from(document.querySelectorAll('.sidebar_section'));
+  const selected = sidebarSection.toggleAttribute('selected');
+  const sidebarName = sidebarSection.getAttribute('sidebarName');
+  const sections = Array.from(document.querySelectorAll('.section_container:not(#template_section)'));
+
+  // Reset
+  sections.forEach(section => {
+    section.classList.remove('removed');
+    const options = Array.from(section.querySelectorAll('div.option'));
+    options.forEach(option => option.classList.remove('removed'));
+  });
+  sidebarSections.forEach(sidebarSection => {
+    sidebarSection.removeAttribute('selected');
+  })
+
+  sidebarSection.toggleAttribute('selected', selected);
+  if (!selected) return;
+
+  sections.forEach(section => {
+    const sectionSidebarName = section.getAttribute('sidebarName');
+    if (sidebarName !== sectionSidebarName) {
+      section.classList.add('removed');
+    }
+  });
+}
+
+
 function handleEnter(e) {
   const keycode = e.keyCode || e.which;
   keycode === 13 && document.activeElement.click();

src/options.html

@@ -93,21 +93,30 @@
       <div id="turn_back_on">Enable</div>
     </div>
 
-    <div id="primary_options" tabindex="-1">
+    <div id="main_container">
 
-      <div id='template_section' class='section_container removed'>
-        <div class='section_label'></div>
+      <div id="sidebar">
+        <div hidden id="template_sidebar_section" class="sidebar_section"></div>
+        <div class="sidebar_section">Basic</div>
+        <div class="sidebar_section">Homepage</div>
       </div>
 
-      <div id='template_option' class='option removed' tabindex="0">
-        <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>
-        <div class='option_label noselect'></div>
-        <div class='option_label_short noselect removed'></div>
-      </div>
+      <div id="primary_options" tabindex="-1">
 
+        <div id='template_section' class='section_container removed'>
+          <div class='section_label'></div>
+        </div>
+
+        <div id='template_option' class='option removed' tabindex="0">
+          <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>
+          <div class='option_label noselect'></div>
+          <div class='option_label_short noselect removed'></div>
+        </div>
+
+      </div>
     </div>
 
     <hr id='footer_hr'>