page type module compatibility

html/popup.html

@@ -1252,7 +1252,7 @@
             </div>
             <button class="big-button back-btn" data-i18n="back">Back</button>
         </div>
-        <p class="option-container">You can also email <b style="font-weight:600">sandlerguy5@gmail.com</b> for any issues or feedback. Thank you!</p>
+        <p class="option-container">Please join the discord server or create a Github issue for any issues, feedback, or suggestions. Thank you!</p>
         <div class="option-container">
             <h3 class="header-small">Privacy</h3>
             <div class="option" id="hide_personal_details">

js/content.js

@@ -4,7 +4,7 @@ let current_page = window.location.pathname;
 // Canvas' "New Canvas" UI navigates client-side via history.pushState/
 // replaceState without a full page reload. current_page is captured once at
 // document_start, so without this hook it goes stale and page-specific features
-// (Back to Assignment button, sequence-footer removal, profile logout button)
+// (Back to Assignment button, sequence-footer hiding, profile logout button)
 // never activate when the user clicks into a page instead of loading it directly.
 function setupNavigationListener() {
     const update = () => {
@@ -127,7 +127,6 @@ let submissionButtonScheduled = false;
 let assignmentButtonScheduled = false;
 let profileLogoutButtonObserver = null;
 let newCanvasButtonObserver = null;
-let sequenceFooterObserver = null;
 
 // Current user id, needed to build "Go to Grades" links on assignment pages.
 // The page's ENV global isn't visible to content scripts (isolated world), so
@@ -328,27 +327,27 @@ function isAssignmentPage() {
     return /^\/courses\/\d+\/assignments(?:\/\d+)?(?:\/|$)/.test(current_page);
 }
 
-function removeSequenceFooter() {
+// CSS-based hiding is the only mechanism: the style element persists across
-    if (options.hide_sequence_footer !== true) return false;
+// Canvas re-renders and full reloads, and toggling the option off just removes
-    if (!isAssignmentPage()) return false;
+// the style — the footer comes back instantly with no refresh. (An earlier
-    const sequenceFooter = document.getElementById("sequence_footer");
+// version also stripped the footer from the DOM on assignment pages, but that
-    if (!sequenceFooter) return false;
+// made the toggle one-way until a reload, and display:none collapses the
-    sequenceFooter.remove();
+// footer gaplessly anyway — verified the content panel height shrinks by
-    return true;
+// exactly the footer height.)
-}
-
-// CSS-based hiding is the primary mechanism: the style element persists across
-// Canvas re-renders and full reloads, so the footer can never flash back after
-// the JS observer has removed it (or timed out) once.
 function applyHideSequenceFooter() {
     let style = document.getElementById("canvasrefined-hide-sequence-footer");
     if (options.hide_sequence_footer === true) {
         if (!style) {
             style = document.createElement("style");
             style.id = "canvasrefined-hide-sequence-footer";
-            style.textContent = "#sequence_footer{display:none!important}";
             (document.head || document.documentElement).appendChild(style);
         }
+        // #sequence_footer is the wrapper Canvas uses on assignment, discussion
+        // and quiz show pages; page show (/courses/:id/pages/:slug) renders the
+        // same Previous/Next bar without that wrapper, as a bare
+        // .module-sequence-footer inside #module_navigation_target — so both
+        // selectors are needed.
+        style.textContent = "#sequence_footer,.module-sequence-footer{display:none!important}";
     } else if (style) {
         style.remove();
     }
@@ -356,34 +355,6 @@ function applyHideSequenceFooter() {
 
 function watchSequenceFooter() {
     applyHideSequenceFooter();
-    if (options.hide_sequence_footer !== true) {
-        if (sequenceFooterObserver) {
-            sequenceFooterObserver.disconnect();
-            sequenceFooterObserver = null;
-        }
-        return;
-    }
-    if (!isAssignmentPage()) return;
-    if (removeSequenceFooter()) return;
-    if (sequenceFooterObserver) return;
-
-    // The observer strips the footer from the DOM (no leftover gap), and
-    // disconnects once removed — after that (or after the 10s timeout below)
-    // the CSS rule above is what keeps it hidden across Canvas re-renders.
-    sequenceFooterObserver = new MutationObserver(() => {
-        if (removeSequenceFooter() && sequenceFooterObserver) {
-            sequenceFooterObserver.disconnect();
-            sequenceFooterObserver = null;
-        }
-    });
-
-    sequenceFooterObserver.observe(document.documentElement, { childList: true, subtree: true });
-    setTimeout(() => {
-        if (sequenceFooterObserver) {
-            sequenceFooterObserver.disconnect();
-            sequenceFooterObserver = null;
-        }
-    }, 10000);
 }
 
 // One persistent, rAF-throttled observer that keeps both assignment-page
@@ -1547,6 +1518,25 @@ async function applyCustomBackground() {
             padding: 0 !important;
             border: none !important;
         }
+        /* Page show (/courses/:id/pages/:slug): Canvas paints h1.page-title and
+           the Previous/Next module-sequence footer as opaque slabs, so with a
+           custom background they sit as solid blocks on the glass content
+           panel (dark mode also paints both var(--bcbackground-0) via
+           darkmodecss.js). Flatten the title to match assignment/quiz titles
+           (plain text on the glass panel) and give the sequence footer the
+           same glass treatment as the other content surfaces. Selectors match
+           darkmodecss.js exactly and this style element is appended after it,
+           so these rules win the !important cascade tie. */
+        .pages.show .page-title,
+        .page-title {
+            background: none !important;
+        }
+        .module-sequence-footer .module-sequence-footer-content {
+            background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${bgTransparent}%) !important;
+            backdrop-filter: blur(${bgBlur}px) !important;
+            -webkit-backdrop-filter: blur(${bgBlur}px) !important;
+            border-radius: 5px !important;
+        }
         .item-group-condensed,
         .item-group-container {
             background: transparent !important;