Create a TOC on the about:preference page

BrowserWorks · Aug 15, 2024 · 96516f0 · 96516f0
1 parent 2748a82
commit 96516f0
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 1 deletion.
diff --git a/waterfox/browser/components/preferences/content/general.js b/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",

diff --git a/waterfox/browser/components/preferences/content/preferences-general.xhtml b/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 -->

diff --git a/waterfox/browser/components/preferences/jar.mn b/waterfox/browser/components/preferences/jar.mn
@@ -5,6 +5,8 @@ browser.jar:
      content/browser/overlays/general.js                           (content/general.js)
      content/browser/overlays/privacy.js                           (content/privacy.js)
      content/browser/overlays/theme.js                             (content/theme.js)
+     content/browser/overlays/tocbot.js                            (content/tocbot.js)
+     content/browser/overlays/tocbot.css                           (content/tocbot.css)
      content/browser/overlays/images                               (images/**)
 
 %   resource waterfox %waterfox/ contentaccessible=yes