Add Table of Contents to preferences

- Implement tocbot library for generating table of contents
- Modify general.js to initialize and handle table of contents generation
- Update preferences-general.xhtml to include tocbot styles and scripts
- Add placeholder for table of contents in the preferences UI
- Implement smooth scrolling and highlighting for table of contents items
- Adjust styling for table of contents to match preferences design

waterfox/browser/components/preferences/content/general.js

@@ -78,14 +78,99 @@ const gMainPaneOverlay = {
       this.setEventListener("dynamicThemeGroup", "command", event => {
         this.updateDynamicThemePref(event.target.value);
       });
-      document.initialized = true;
+      if (document.readyState === "complete") {
+        this.tocGenerate();
+      } else {
+        document.addEventListener("readystatechange", () => {
+          if (document.readyState === "complete") {
+            this.tocGenerate();
+          }
+        });
+      }
+      document.initialized = true;  
     }
     this.setEventListener("enableObliviousDns", "click", function () {
       let value = document.getElementById("enableObliviousDns").checked ? 2 : 0;
       Services.prefs.setIntPref("network.trr.mode", value);
     });
   },
 
+  tocGenerate() {
+    const contentSelector = "#mainPrefPane";
+    const headingSelector = "#mainPrefPane > hbox:not([hidden]) > h1, #mainPrefPane > groupbox:not([hidden]) > h2, #mainPrefPane > groupbox:not([hidden]) label:not([hidden]) > h2";
+    const headerTarget = headingSelector.replaceAll(":not([hidden])", "");
+    const specialCharRegex = /[\!\@\#\$\%\^\&\*\(\):]/ig;
+    const createHeadingId = () => {
+      const content = document.querySelector(contentSelector);
+      const headings = content?.querySelectorAll(headerTarget);
+      const headingMap = {};
+
+      let count = 0;
+      /**
+        * @param {Element} heading
+        * @returns {string}
+      */
+      const getHeadingId = (heading) => {
+        const id = heading.id;
+        if (id) {
+          return id;
+        }
+
+        if (heading instanceof HTMLElement) {
+          const i18nId = heading.dataset.l10nId;
+          if (i18nId) {
+            return i18nId;
+          }
+        }
+
+        return heading.textContent?.trim().toLowerCase().split(" ").join("-").replace(specialCharRegex, "") ?? `${count++}`;
+      }
+      /**
+        * @param {string} headingText
+        * @param {number} count
+        * @returns {string}
+      */
+      const createId = (headingText, count) => `${headingText}${count > 0 ? `-${count}` : ""}`;
+      headings?.forEach((heading) => {
+        const id = getHeadingId(heading);
+        headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0;
+        heading.id = createId(id, headingMap[id]);
+      });
+    }
+
+    createHeadingId();
+    tocbot.init({
+      tocSelector: ".toc",
+      contentSelector,
+      headingSelector,
+      scrollContainer: ".main-content",
+      headingsOffset: 100, // 90 + margins
+      hasInnerContainers: false,
+
+      /**
+        * @param {MouseEvent} e
+      */
+      onClick(e) {
+        e.preventDefault();
+
+        /** @type {HTMLLinkElement} */
+        const link = e.target;
+        const targetSelector = link?.getAttribute("href");
+        if (targetSelector) {
+          const target = document.querySelector(targetSelector);
+          if (target) {
+            target.scrollIntoView({ behavior: "smooth", block: "start" });
+          }
+        }
+      }
+    });
+    const tocRefresh = () => {
+      createHeadingId();
+      tocbot.refresh();
+    }
+    window.addEventListener("hashchange", tocRefresh);
+  },
+
   showRelevantElements() {
     let idsGeneral = [
       "dynamicThemeGroup",

waterfox/browser/components/preferences/content/preferences-general.xhtml

@@ -3,12 +3,14 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<?xml-stylesheet href="chrome://browser/content/overlays/tocbot.css" type="text/css"?>
 
 <overlay id="preferences-overlay" xmlns:html="http://www.w3.org/1999/xhtml"
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
     <script>
         /* eslint-env mozilla/browser-window */
         /* globals gMainPaneOverlay */
+        Services.scriptloader.loadSubScript("chrome://browser/content/overlays/tocbot.js", this);
         Services.scriptloader.loadSubScript("chrome://browser/content/overlays/general.js", this);
         gMainPaneOverlay.init();
     </script>
@@ -120,6 +122,8 @@
             </radiogroup>
         </groupbox>
 #endif
+      <!-- TOC Placeholder -->
+      <html:nav class="toc" />
     </vbox>
 
     <!-- Browsing -->

waterfox/browser/components/preferences/content/tocbot.css

@@ -0,0 +1,57 @@
+.toc{overflow-y:auto}.toc>.toc-list{overflow:hidden;position:relative}.toc>.toc-list li{list-style:none}.toc-list{margin:0;padding-left:10px}a.toc-link{color:currentColor;height:100%}.is-collapsible{max-height:1000px;overflow:hidden;transition:all 300ms ease-in-out}.is-collapsed{max-height:0}.is-position-fixed{position:fixed !important;top:0}.is-active-link{font-weight:700}.toc-link::before{background-color:#eee;content:" ";display:inline-block;height:inherit;left:0;margin-top:-1px;position:absolute;width:2px}.is-active-link::before{background-color:#54bc4b}/*# sourceMappingURL=tocbot.css.map */
+
+/* Patched version */
+.toc {
+  --uc-toc-margin: 0.5em;
+  display: block;
+  position: fixed;
+  width: 300px;
+  height: calc(100vh - 90px); /* .main-content inline style scroll-padding-top: 90px; */
+  transform: translateX(calc(var(--main-pane-width, 664px) + max(60px, 8vw)));
+  scrollbar-width: none;
+}
+@media (max-width: 1280px) {
+  .toc {
+    display: none;
+  }
+}
+.toc-list > .toc-list-item:only-child:not(:has(.toc-list)) {
+  /* If only one exists, remove it. */
+  display: none;
+}
+
+.toc-list-item {
+  cursor: pointer;
+}
+.toc-list-item > .toc-list:not(.is-collapsed) {
+  margin-top: var(--uc-toc-margin);
+}
+.toc-list-item:not(:last-child) {
+  margin-bottom: var(--uc-toc-margin);
+}
+
+.toc-link {
+  font-size: 1.14em; /* as h2 */
+  text-decoration: none;
+}
+.toc-link::before {
+  background-color: #eeeeef;
+}
+.is-active-link::before{
+  background-color: var(--in-content-accent-color, AccentColor);
+}
+
+.toc-list-item:hover:not(:has(> .toc-list:hover)) > .toc-link {
+  font-weight: 700;
+}
+.toc-list-item:hover:not(:has(> .toc-list:hover)) > .toc-link:not(.is-active-link)::before {
+  background-color: #d1d1d6;
+}
+@media (prefers-color-scheme: dark) {
+  .toc-link:not(.is-active-link)::before {
+    background-color: #2c2b32;
+  }
+  .toc-list-item:hover:not(:has(> .toc-list:hover)) > .toc-link:not(.is-active-link)::before {
+    background-color: #57575d;
+  }
+}