Merge branch 'testing'

.github/workflows/tests.yaml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     container:
       # make sure to match this version to what's in package.json
-      image: mcr.microsoft.com/playwright:v1.40.1-jammy
+      image: mcr.microsoft.com/playwright:v1.41.2-jammy
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
@@ -20,7 +20,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 21
-          cache: 'pnpm'
+          cache: "pnpm"
       - name: Install project dependencies
         run: pnpm install
       - name: Install test dependencies

Dockerfile.e2etest

@@ -1,5 +1,5 @@
 # Pull the base image
-FROM mcr.microsoft.com/playwright:v1.40.1-jammy
+FROM mcr.microsoft.com/playwright:v1.41.2-jammy
 
 ARG SCOOKIE
 ARG CI

package.json

@@ -48,7 +48,7 @@
   "devDependencies": {
     "@biomejs/biome": "^1.5.3",
     "@crxjs/vite-plugin": "2.0.0-beta.23",
-    "@playwright/test": "1.40.1",
+    "@playwright/test": "1.41.2",
     "@preact/preset-vite": "^2.8.1",
     "@types/chrome": "^0.0.246",
     "@types/dompurify": "^3.0.5",

src/builtin/collapse.ts

@@ -49,6 +49,8 @@ export const Collapse = {
     if (post && is_root) {
       const rootContainer = root.closest("div.root") as HTMLElement;
       const close = post.querySelector("a.closepost");
+      // show proof we exist for testing purposes
+      close?.classList?.add("enhanced");
       const show = post.querySelector("a.showpost");
       document.addEventListener("click", Collapse.collapseHandler);
       // check if thread should be collapsed

src/builtin/mod_banners.ts

@@ -17,6 +17,8 @@ export const ModBanners = {
   processPost(args: PostEventArgs) {
     const { post } = args || {};
     if (ModBanners.isEnabled && post) {
+      // show proof we exist for testing purposes
+      post?.classList.add("enhanced_banners");
       const _isOfftopic = post.querySelector("li > div.fullpost.fpmod_offtopic:not(.getPost)") as HTMLElement;
       const _isStupid = post.querySelector("li > div.fullpost.fpmod_stupid:not(.getPost)") as HTMLElement;
       const _isPolitical = post.querySelector("li > div.fullpost.fpmod_political:not(.getPost)") as HTMLElement;

src/builtin/userpopup/index.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from "react-dom/client";
 import { elemMatches, parseToElement } from "../../core/common/dom";
-import { userPopupEvent } from "../../core/events";
+import { processPostEvent, userPopupEvent } from "../../core/events";
 import { getUsername } from "../../core/notifications";
 import "../../styles/userpopup.css";
 import { UserPopupApp } from "./UserPopupApp";
@@ -15,9 +15,16 @@ export const UserPopup = {
 
     document.addEventListener("click", UserPopup.clickHandler);
     userPopupEvent.addHandler(UserPopup.userPopupEventHandler);
+    processPostEvent.addHandler(UserPopup.setup);
     UserPopup.cacheInjectables();
   },
 
+  setup({ post }: PostEventArgs) {
+    // show some proof we exist for testing purposes
+    const userLink = post.querySelector("span.user");
+    if (userLink) userLink.classList.add("enhanced");
+  },
+
   cacheInjectables() {
     const appContainer = parseToElement(`<div class="userDropdown" />`);
     UserPopup.cachedEl = appContainer as HTMLElement;

src/core/common/dom.ts

@@ -114,6 +114,12 @@ export const generatePreview = (postText: string) => {
   return convertUrlToLink(_postText);
 };
 
+export const disableScrollRestore = async () => {
+  // disable scroll restoration - if allowed
+  const aggressiveScrolling = await getEnabledBuiltin("scroll_behavior");
+  if (aggressiveScrolling) history.scrollRestoration = "manual";
+};
+
 export function scrollToElement(elem: HTMLElement, opts?: { offset?: number; smooth?: boolean; toFit?: boolean }) {
   getEnabledBuiltin("scroll_behavior").then((isEnabled) => {
     // provide an escape hatch for the user

src/core/observer_handlers.ts

@@ -1,7 +1,14 @@
 import { ScrollToUncappedPostFix } from "../patches/scrollToPostFix";
 import { SingleThreadFix } from "../patches/singleThreadFix";
 import { arrHas } from "./common/common";
-import { disableTwitch, elemMatches, locatePostRefs, parseToElement, scrollToElement } from "./common/dom";
+import {
+  disableScrollRestore,
+  disableTwitch,
+  elemMatches,
+  locatePostRefs,
+  parseToElement,
+  scrollToElement,
+} from "./common/dom";
 import {
   fullPostsCompletedEvent,
   processEmptyTagsLoadedEvent,
@@ -15,7 +22,7 @@ import {
 } from "./events";
 import { TabMessenger, setUsername } from "./notifications";
 import { ChromeShack } from "./observer";
-import { getEnabled, getEnabledSuboption, mergeTransientSettings } from "./settings";
+import { getEnabled, getEnabledBuiltin, getEnabledSuboption, mergeTransientSettings } from "./settings";
 
 const checkReplyCeiling = (rootEl: HTMLElement) => {
   // Both FF & Chrome get bogged down by nuLOL tags loading into extremely large threads
@@ -114,6 +121,9 @@ export const handleRootAdded = async (mutation: RefreshMutation) => {
     rootid,
   } as PostEventArgs;
 
+  // disable scroll restoration on refresh/reply to avoid jankiness
+  await disableScrollRestore();
+
   if (reply && root) return processReplyEvent.raise(raisedArgs, mutation);
 
   if (post && root)

src/patches/singleThreadFix.ts

@@ -1,19 +1,23 @@
-import { scrollToElement } from "../core/common/dom";
+import { disableScrollRestore, scrollToElement } from "../core/common/dom";
 import { fullPostsCompletedEvent, processTagDataLoadedEvent } from "../core/events";
 import { getEnabledBuiltin } from "../core/settings";
 
 /*
  *  Fix visible fullpost position when opening a post in single-thread mode
  */
 export const SingleThreadFix = {
-  fix() {
+  async fix() {
     // only do fix when NOT on main Chatty
     if (document.querySelector("div#newcommentbutton")) return;
+
+    // disable scroll position restoration on single-threads
+    await disableScrollRestore();
+
     const urlRgx = window.location.href.match(/id=(\d+)(?:#item_(\d+))?/);
     if (!urlRgx) return;
 
-    const rootid = parseInt(urlRgx?.[1], 10);
-    const postid = parseInt(urlRgx?.[2], 10);
+    const rootid = parseInt(urlRgx?.[1], 10) || null;
+    const postid = parseInt(urlRgx?.[2], 10) || null;
     const post = document.getElementById(`item_${postid || rootid}`);
     if (post) {
       console.log("scrolling to single-thread:", post);
@@ -22,7 +26,7 @@ export const SingleThreadFix = {
   },
   apply() {
     // try to ensure the fix applies once the post is loaded
-    setTimeout(() => SingleThreadFix.fix(), 250);
+    setTimeout(async () => await SingleThreadFix.fix(), 250);
   },
 
   async install() {

test.sh

@@ -38,39 +38,54 @@ run() {
 
 help() {
   echo
-  echo "Usage: $0 [--build | -b] [--run | -r] [--shell | -s] [--test] [--help | -h]"
+  echo "Usage: $0 [-b] [-r | -s] [-h]"
   echo
-  echo "  --build, -b      rebuild the image"
-  echo "  --run, -r        run the tests"
-  echo "  --shell, -s      open a shell inside the image"
-  echo "  --test           rerun the tests"
-  echo "  --help, -h       this message"
+  echo "  -b      rebuild the image"
+  echo "  -r      run the test suite"
+  echo "  -s      open a shell inside the image"
+  echo "  -t      rebuild the image and rerun the tests"
+  echo "  -h      this message"
   echo
   exit 1
 }
 
-CMD=${@:-""}
-case "$CMD" in
-  "--help" | "-h")
+VALID_ARGS=$(getopt -o bhrst -- "$@")
+eval set -- "$VALID_ARGS"
+
+while [[ $# -gt 0 ]]; do
+  case "$1" in
+  -h)
+    shift
     help
     ;;
-  "--build" | "-b")
+  -b)
     build
+    shift
     ;;
-  "--run" | "-r")
+  -r)
     run pnpm test
+    shift
+    break
     ;;
-  "--shell" | "-s")
+  -s)
     run /bin/bash
+    shift
+    break
     ;;
-  "--test" | "")
-    build
-    run pnpm test
+  --)
+    help
     ;;
   *)
-    echo "Error: Invalid argument"
-    help
+    shift
+    if [[ -z "$1" ]]; then
+      build
+      run pnpm test
+      break
+    else
+      help
+    fi
     ;;
-esac
+  esac
+done
 
 exit 0