Merge branch 'master' into feat/platform-observers

.github/workflows/publish-beta.yml

@@ -49,12 +49,12 @@ jobs:
         popd
 
     - name: Upload release build artifact - Chrome
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       with:
         name: release-build-chrome
         path: release-build-chrome.zip
     - name: Upload release build artifact - Firefox
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       with:
         name: release-build-firefox
         path: release-build-firefox.zip
@@ -63,7 +63,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: build-release
     steps:
-    - uses: actions/download-artifact@v3
+    - uses: actions/download-artifact@v4
       with:
         name: release-build-chrome
     - uses: wdzeng/chrome-extension@v1
@@ -78,7 +78,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: build-release
     steps:
-    - uses: actions/download-artifact@v3
+    - uses: actions/download-artifact@v4
       with:
         name: release-build-firefox
     - uses: wdzeng/firefox-addon@v1

.github/workflows/publish-stable.yml

@@ -33,12 +33,12 @@ jobs:
         popd
 
     - name: Upload release build artifact - Chrome
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       with:
         name: release-build-chrome
         path: release-build-chrome.zip
     - name: Upload release build artifact - Firefox
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       with:
         name: release-build-firefox
         path: release-build-firefox.zip
@@ -47,7 +47,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: build-release
     steps:
-    - uses: actions/download-artifact@v3
+    - uses: actions/download-artifact@v4
       with:
         name: release-build-chrome
     - uses: wdzeng/chrome-extension@v1
@@ -62,7 +62,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: build-release
     steps:
-    - uses: actions/download-artifact@v3
+    - uses: actions/download-artifact@v4
       with:
         name: release-build-firefox
     - uses: wdzeng/firefox-addon@v1

extension/chrome_manifest.json

@@ -4,7 +4,7 @@
     "author": "toolbox team",
     "short_name": "toolbox",
     "description": "A set of tools to be used by moderators on reddit in order to make their jobs easier.",
-    "version": "7.0.0.6",
+    "version": "7.0.0.7",
     "version_name": "7.0.0: \"Oh God Erin What Are You Doing\"",
     "incognito": "split",
     "permissions": [
@@ -71,7 +71,6 @@
                 "data/styles/macros.css",
                 "data/styles/queue_overlay.css",
                 "data/styles/modmatrix.css",
-                "data/styles/modnotes.css",
                 "data/styles/codemirror/codemirror.css",
                 "data/styles/codemirror/dialog.css",
                 "data/styles/codemirror/fullscreen.css",
@@ -87,6 +86,7 @@
     "web_accessible_resources": [
         {
             "resources": [
+                "/data/bundled.css",
                 "/data/styles/font/MaterialIcons-Regular.woff2",
                 "/data/styles/font/MaterialIcons-Regular.woff",
                 "/data/styles/font/MaterialIcons-Regular.ttf",

extension/data/background/handlers/cache.js

@@ -97,7 +97,7 @@ async function getSessionUserID (sender) {
     if (redditSessionCookie) {
         // The session value contains comma seperated values. The first one is the the userid in base10.
         // As reddit uses base36 everywhere else we convert the ID to that so things are easier to debug.
-        const redditUserIdBase10 = decodeURIComponent(redditSessionCookie.value).split(',')[0];
+        const redditUserIdBase10 = decodeURIComponent(redditSessionCookie.value).match(/\d+/)[0];
         redditUserIdBase36 = parseInt(redditUserIdBase10).toString(36);
     } else {
         redditUserIdBase36 = 'noSessionFallback';

extension/data/background/handlers/notifications.js

@@ -5,49 +5,40 @@ import browser from 'webextension-polyfill';
 import {messageHandlers} from '../messageHandling';
 import {makeRequest} from './webrequest';
 
-const NOTIFICATION_STORAGE_KEY = 'tb-notifications-storage';
+/**
+ * Gets the storage key where metadata for the given notification is stored.
+ * @param {string} notificationID
+ * @returns {string}
+ */
+const notificationMetaDataKey = notificationID => `notifmeta-${notificationID}`;
 
 /**
  * Sets the notification ID and meta data object for a given notification.
  * @param notificationID string notificationID
  * @param notificationObject object containing the meta data
  */
-async function setNotificationMetaData (notificationID, notificationObject) {
-    const result = await browser.storage.local.get({[NOTIFICATION_STORAGE_KEY]: {}});
-    result[NOTIFICATION_STORAGE_KEY][notificationID] = notificationObject;
-    await browser.storage.local.set({
-        [NOTIFICATION_STORAGE_KEY]: result[NOTIFICATION_STORAGE_KEY],
+function setNotificationMetaData (notificationID, notificationObject) {
+    return browser.storage.session.set({
+        [notificationMetaDataKey(notificationID)]: notificationObject,
     });
-    return;
 }
 
 /**
  * Returns the notification meta data object for a given notification id.
  * @param notificationID notificationID
- * @returns {promise<object>}
+ * @returns {Promise<object>}
  */
-async function getNotificationMetaData (notificationID) {
-    const result = await browser.storage.local.get({[NOTIFICATION_STORAGE_KEY]: {}});
-    if (Object.prototype.hasOwnProperty.call(result[NOTIFICATION_STORAGE_KEY], notificationID)) {
-        return result[NOTIFICATION_STORAGE_KEY][notificationID];
-    }
-    return null;
+function getNotificationMetaData (notificationID) {
+    return browser.storage.session.get({[notificationMetaDataKey(notificationID)]: null});
 }
 
 /**
  * Deletes the notification meta data object for a given notification id.
  * @param notificationID subreddit
  * @returns {promise<object>}
  */
-async function deleteNotificationMetaData (notificationID) {
-    const result = await browser.storage.local.get({[NOTIFICATION_STORAGE_KEY]: {}});
-    if (Object.prototype.hasOwnProperty.call(result[NOTIFICATION_STORAGE_KEY], notificationID)) {
-        delete result[NOTIFICATION_STORAGE_KEY][notificationID];
-        await browser.storage.local.set({
-            [NOTIFICATION_STORAGE_KEY]: result[NOTIFICATION_STORAGE_KEY],
-        });
-    }
-    return;
+function deleteNotificationMetaData (notificationID) {
+    return browser.storage.session.remove(notificationMetaDataKey(notificationID));
 }
 
 // TODO: I know we've had this conversation before but I'm 99% sure this isn't

extension/data/base.css

@@ -0,0 +1,22 @@
+/*
+ * Base stylesheet that applies in all shadow roots. Used to reset our
+ * environment to a known state for component styles to build on, and to set up
+ * things like fonts and CSS variables that are consistent everywhere.
+ */
+
+:host {
+	/* reset inherited styles from the page for a clean slate */
+	all: initial;
+	/*
+	 * Don't give host elements their own boxes in the box model - just use the
+	 * box of whatever we're rendering inside. This avoids subtle layout issues
+	 * when the rendered content's top-level element is `inline` or
+	 * `inline-block` or something else exotic like `table-*`.
+     * see https://developer.mozilla.org/en-US/docs/Web/CSS/display#contents
+	 */
+	display: contents;
+
+	/* set our preferred fonts and stuff */
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+    font-size: 12px;
+}

extension/data/components/PageNotificationContainer.module.css

@@ -0,0 +1,18 @@
+.wrapper {
+    position: fixed;
+    bottom: 42px;
+    right: 10px;
+    width: 300px;
+}
+/* Leave space for the context menu handle when it's on the right side */
+.wrapper.hasRightContextMenu {
+    right: 30px;
+}
+
+.notification {
+    margin-top: 5px;
+}
+
+.notification p {
+    margin: 0;
+}

extension/data/components/PageNotificationContainer.tsx

@@ -1,5 +1,8 @@
 import {useEffect, useState} from 'react';
 import browser from 'webextension-polyfill';
+import {useSetting} from '../hooks';
+import {classes} from '../util/ui_interop';
+import css from './PageNotificationContainer.module.css';
 import {Window} from './Window';
 
 /** An in-page notification object received from the background page */
@@ -18,17 +21,34 @@ export function PageNotificationContainer () {
     // Notifications active on the page
     const [notifications, setNotifications] = useState([] as Notification[]);
 
+    // We need to know the location of the context menu to know how to style the
+    // notification area
+    const contextMenuLocation = useSetting('GenSettings', 'contextMenuLocation', 'left');
+
     // Register listener for messages from the background page
     useEffect(() => {
-        const messageListener = (message: any) => {
-            if (message.action === 'tb-show-page-notification') {
+        const messageListener = (message: unknown) => {
+            // TODO: we need proper types for these messages
+            if ((message as any).action === 'tb-show-page-notification') {
                 // Add to beginning of list so it shows up on top
                 // TODO: wouldn't it be better to do this via `flex-direction`?
-                setNotifications([message.details, ...notifications]);
-            } else if (message.action === 'tb-clear-page-notification') {
+                // NOTE: This setter can be called multiple times between
+                //       renders, which results in incoming notifications
+                //       overwriting each other; we have to use the "update
+                //       function" form of the `useState` setter for safety.
+                //       https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state
+                setNotifications(currentNotifications => [(message as any).details, ...currentNotifications]);
+            } else if ((message as any).action === 'tb-clear-page-notification') {
                 // Remove the notification from the list
-                setNotifications(notifications.filter(notif => notif.id !== message.id));
+                setNotifications(currentNotifications =>
+                    currentNotifications.filter(notif => notif.id !== (message as any).id)
+                );
             }
+
+            // `@types/webextension-polyfill` wants us to explicitly return
+            // `undefined` from synchronous listeners to indicate that we're not
+            // doing any async stuff relying on the `sendResponse` param
+            return undefined;
         };
 
         browser.runtime.onMessage.addListener(messageListener);
@@ -66,13 +86,22 @@ export function PageNotificationContainer () {
             .map(line => <p>{line}</p>);
     }
 
+    if (!contextMenuLocation) {
+        return <></>;
+    }
+
     return (
-        <div id='tb-notifications-wrapper'>
+        <div
+            className={classes(
+                css.wrapper,
+                contextMenuLocation === 'right' && css.hasRightContextMenu,
+            )}
+        >
             {notifications.map(notification => (
                 <Window
                     key={notification.id}
                     title={notification.title}
-                    className='tb-notification'
+                    className={css.notification}
                     closable
                     onClose={() => handleClose(notification.id)}
                     onClick={() => handleClick(notification.id)}

extension/data/components/Pager.module.css

@@ -0,0 +1,11 @@
+.controls {
+    text-align: center;
+    margin-bottom: 5px;
+}
+.content + .controls {
+    margin-bottom: 0;
+    margin-top: 5px;
+}
+.control.active {
+    background-color: #B6C9DD;
+}