.gitlab/issue_templates/Bug Report.md

@@ -0,0 +1,32 @@
+## Bug Report
+<!--
+  Thank you for taking the time to report a bug! Don't forget to fill in an
+  appropriate title above and the information in the table below.
+-->
+### Info
+<!--
+  If you click the "Report A Bug" link in the Tildes ReExtended options page,
+  the table below will automatically be filled with your details. That might be
+  easier than filling it out manually.
+-->
+
+| Type | Value |
+|------|-------|
+| Operating System |  |
+| Browser |  |
+| Device |  |
+
+### The Problem
+<!--
+  Please explain in sufficient detail what the problem is. When suitable,
+  including an image or video showing the problem will also help immensely.
+-->
+
+
+### A Solution
+<!--
+  If you know of any possible solutions, feel free to include them. If the
+  solution is just something like "it should work" then you can safely omit
+  this section.
+-->
+

Makefile.toml

@@ -55,7 +55,7 @@ clear = true
 command = "pnpm"
 # Set --target explicitly, since web-ext for some reason doesn't use the target
 # set in the configuration file. https://github.com/mozilla/web-ext/issues/1862
-env = { TARGET = { source = "${BROWSER}", default_value = "${BROWSER}", mapping = { "firefox" = "firefox-desktop" } } }
+env = { TARGET = { source = "${BROWSER}", default_value = "${BROWSER}", mapping = { "firefox" = "firefox-dekstop" } } }
 args = ["web-ext", "run", "--target=${TARGET}", "--config=build/web-ext-${BROWSER}.json"]
 
 # Alias for `WATCH=true makers build`.

source/content-scripts/features/user-labels.tsx

@@ -4,6 +4,7 @@ import {type UserLabelsData, saveUserLabels} from "../../storage/common.js";
 import {
   createElementFromString,
   isColorBright,
+  isValidHexColor,
   log,
   querySelectorAll,
   themeColors,
@@ -25,6 +26,15 @@ type State = {
   username: string;
 };
 
+const colorPattern: string = [
+  "^(?:#(?:", // (?:) are non-capturing groups.
+  "[a-f\\d]{8}|", // The order of 8 -> 6 -> 4 -> 3 character hex colors matters.
+  "[a-f\\d]{6}|",
+  "[a-f\\d]{4}|",
+  "[a-f\\d]{3})",
+  "|transparent)$", // "Transparent" is also allowed in the input.
+].join("");
+
 export class UserLabelsFeature extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -199,7 +209,14 @@ export class UserLabelsFeature extends Component<Props, State> {
   };
 
   colorChange = (event: Event) => {
-    const color = (event.target as HTMLInputElement).value.toLowerCase();
+    let color: string = (event.target as HTMLInputElement).value.toLowerCase();
+    if (!color.startsWith("#") && !color.startsWith("t") && color.length > 0) {
+      color = `#${color}`;
+    }
+
+    if (color !== "transparent" && !isValidHexColor(color)) {
+      log('User Labels: Color must be a valid hex color or "transparent".');
+    }
 
     // If the color was changed through the preset values, also change the
     // selected color state.
@@ -362,6 +379,7 @@ export class UserLabelsFeature extends Component<Props, State> {
               placeholder="Color"
               value={color}
               onInput={debounce(this.colorChange, 250)}
+              pattern={colorPattern}
               required
             />
 

source/utilities/elements.ts

@@ -1,6 +1,6 @@
 /**
  * Creates an HTML Element from a given string. Only use this when using
- * Preact isn't practical.
+ * `htm/preact` isn't practical.
  */
 export function createElementFromString<T extends Element>(input: string): T {
   const template = document.createElement("template");

source/utilities/globals.ts

@@ -1,6 +1,3 @@
-/**
- * Initialize the `TildesReExtended` global.
- */
 export function initializeGlobals() {
   if (window.TildesReExtended === undefined) {
     window.TildesReExtended = {

source/utilities/groups.ts

@@ -2,7 +2,8 @@ import {log} from "./logging.js";
 import {querySelectorAll} from "./query-selectors.js";
 
 /**
- * Try to extract the groups when in the group listing page at `/groups`.
+ * Tries to extract and save the groups. Returns the current saved groups when
+ * the user is not in `/groups` and the new ones when they are in `/groups`.
  */
 export function extractGroups(): string[] | undefined {
   if (window.location.pathname !== "/groups") {

source/utilities/logging.ts

@@ -1,5 +1,5 @@
 /**
- * Log something to the console under the debug level.
+ * Logs something to the console under the debug level.
  * @param thing The thing to log.
  * @param force If true, ignores whether or not debug logging is enabled.
  */

source/utilities/query-selectors.ts

@@ -1,17 +1,15 @@
 // These utility functions mainly exist so it's easier to work with TypeScript's
 // typing and so we don't have to write `document.query...` all the time.
 
-/**
+// The first function should only ever be used when we know for certain that
- * Get the first element found that matches the selector. Only use this when you
+// the target element is going to exist.
- * know for certain that the target element exists.
+
- */
+/** Returns the first element found that matches the selector. */
 export function querySelector<T extends Element>(selector: string): T {
   return document.querySelector(selector)!;
 }
 
-/**
+/** Returns all elements found from all the selectors. */
- * Get all elements found from all the given selectors.
- */
 export function querySelectorAll<T extends Element>(
   ...selectors: string[]
 ): T[] {

source/utilities/report-a-bug.ts

@@ -9,11 +9,12 @@ export function createReportTemplate(
   location: "gitlab" | "tildes",
   trxVersion: string,
 ): string {
-  let introText = "Thank you for taking the time to report a bug!";
+  let introText =
-  introText += "\n  Please make sure the information below is correct.";
+    "Thank you for taking the time to report a bug! Don't forget to fill in an\n  appropriate title above, and make sure the information below is correct.";
 
-  if (location === "gitlab") {
+  if (location === "tildes") {
-    introText += "\n  Don't forget to set a title for the issue!";
+    introText =
+      "Thank you for taking the time to report a bug! Please make sure the\n  information below is correct.";
   }
 
   const layout = platform.layout ?? "<unknown>";
@@ -42,11 +43,16 @@ export function createReportTemplate(
     reportTemplate += `| Device | ${manufacturer} ${product} |\n`;
   }
 
-  reportTemplate += `\n
+  reportTemplate += `\n<h3>The Problem</h3>
 <!--
   Please explain in sufficient detail what the problem is. When possible,
-  including an image or video showing the problem also helps immensely, but it's
+  including an image or video showing the problem also helps immensely.
-  not required.
+-->\n\n\n
+<h3>A Solution</h3>
+<!--
+  If you know of any possible solutions, feel free to include them. If the
+  solution is just something like "it should work" then you can safely omit
+  this section.
 -->\n\n\n`;
 
   return reportTemplate;