Remove the hex color requirement.

.gitlab/issue_templates/Bug Report.md

@@ -1,32 +0,0 @@
-## 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-dekstop" } } }
+env = { TARGET = { source = "${BROWSER}", default_value = "${BROWSER}", mapping = { "firefox" = "firefox-desktop" } } }
 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,7 +4,6 @@ import {type UserLabelsData, saveUserLabels} from "../../storage/common.js";
 import {
   createElementFromString,
   isColorBright,
-  isValidHexColor,
   log,
   querySelectorAll,
   themeColors,
@@ -26,15 +25,6 @@ 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);
@@ -209,14 +199,7 @@ export class UserLabelsFeature extends Component<Props, State> {
   };
 
   colorChange = (event: Event) => {
-    let color: string = (event.target as HTMLInputElement).value.toLowerCase();
+    const color = (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.
@@ -379,7 +362,6 @@ 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
- * `htm/preact` isn't practical.
+ * Preact isn't practical.
  */
 export function createElementFromString<T extends Element>(input: string): T {
   const template = document.createElement("template");

source/utilities/globals.ts

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

source/utilities/groups.ts

@@ -2,8 +2,7 @@ import {log} from "./logging.js";
 import {querySelectorAll} from "./query-selectors.js";
 
 /**
- * Tries to extract and save the groups. Returns the current saved groups when
+ * Try to extract the groups when in the group listing page at `/groups`.
- * 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 @@
 /**
- * Logs something to the console under the debug level.
+ * Log 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,15 +1,17 @@
 // 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
+/**
-// the target element is going to exist.
+ * Get the first element found that matches the selector. Only use this when you
-
+ * 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,12 +9,11 @@ export function createReportTemplate(
   location: "gitlab" | "tildes",
   trxVersion: string,
 ): string {
-  let introText =
+  let introText = "Thank you for taking the time to report a bug!";
-    "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.";
+  introText += "\n  Please make sure the information below is correct.";
 
-  if (location === "tildes") {
+  if (location === "gitlab") {
-    introText =
+    introText += "\n  Don't forget to set a title for the issue!";
-      "Thank you for taking the time to report a bug! Please make sure the\n  information below is correct.";
   }
 
   const layout = platform.layout ?? "<unknown>";
@@ -43,16 +42,11 @@ export function createReportTemplate(
     reportTemplate += `| Device | ${manufacturer} ${product} |\n`;
   }
 
-  reportTemplate += `\n<h3>The Problem</h3>
+  reportTemplate += `\n
 <!--
   Please explain in sufficient detail what the problem is. When possible,
-  including an image or video showing the problem also helps immensely.
+  including an image or video showing the problem also helps immensely, but it's
--->\n\n\n
+  not required.
-<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;