Fix linting issues and move some things around.

Add option to randomize username colors

https://gitlab.com/tildes-community/tildes-reextended/-/merge_requests/1

source/content-scripts/features/username-colors.ts

@@ -1,18 +1,29 @@
-import {log, querySelectorAll} from "../../utilities/exports.js";
 import {type UsernameColorsData} from "../../storage/exports.js";
+import {
+  log,
+  querySelectorAll,
+  getColorFromStringHash,
+  isColorBright,
+} from "../../utilities/exports.js";
 
-export function runUsernameColorsFeature(
+export async function runUsernameColorsFeature(
   data: UsernameColorsData,
   anonymizeUsernamesEnabled: boolean,
+  randomizeUsernameColorsEnabled: boolean,
 ) {
-  const count = usernameColors(data, anonymizeUsernamesEnabled);
+  const count = await usernameColors(
+    data,
+    anonymizeUsernamesEnabled,
+    randomizeUsernameColorsEnabled,
+  );
   log(`Username Colors: Applied ${count} colors.`);
 }
 
-function usernameColors(
+async function usernameColors(
   data: UsernameColorsData,
   anonymizeUsernamesEnabled: boolean,
-): number {
+  randomizeUsernameColorsEnabled: boolean,
+): Promise<number> {
   const usernameColors = new Map<string, string>();
   for (const {
     value: {color, username: usernames},
@@ -41,11 +52,20 @@ function usernameColors(
 
     element.classList.add("trx-username-colors");
     const color = usernameColors.get(target);
-    if (color === undefined) {
+    if (color !== undefined) {
+      element.style.color = color;
+    } else if (randomizeUsernameColorsEnabled) {
+      element.classList.add("trx-random-username-color");
+      const randomColor = await getColorFromStringHash(target);
+      const fontColor = isColorBright(randomColor) ? "#000" : "#FFF";
+      element.style.setProperty("--background-color", randomColor);
+      // Specifically use "--link-color" here so Tildes's link color doesn't
+      // override ours.
+      element.style.setProperty("--link-color", fontColor);
+    } else {
       continue;
     }
 
-    element.style.color = color;
     count += 1;
   }
 

source/content-scripts/setup.tsx

@@ -95,7 +95,14 @@ async function initialize() {
   if (enabledFeatures.value.has(Feature.UsernameColors)) {
     observerFeatures.push(async () => {
       const data = await fromStorage(Feature.UsernameColors);
-      runUsernameColorsFeature(data, anonymizeUsernamesEnabled);
+      const randomizeUsernameColors = await fromStorage(
+        Data.RandomizeUsernameColors,
+      );
+      await runUsernameColorsFeature(
+        data,
+        anonymizeUsernamesEnabled,
+        randomizeUsernameColors.value,
+      );
     });
   }
 

source/options/components/username-colors.tsx

@@ -1,9 +1,11 @@
+import {type Value} from "@holllo/webextension-storage";
 import {Component} from "preact";
 import {log} from "../../utilities/exports.js";
 import {
   type UsernameColorsData,
   type UsernameColor,
   Feature,
+  Data,
   createValueUsernamecolor,
   fromStorage,
 } from "../../storage/exports.js";
@@ -13,6 +15,7 @@ type State = {
   previewChecked: "off" | "foreground" | "background";
   usernameColors: UsernameColorsData;
   usernameColorsToRemove: UsernameColorsData;
+  randomizeChecked: Value<boolean>;
 };
 
 export class UsernameColorsSetting extends Component<SettingProps, State> {
@@ -23,11 +26,15 @@ export class UsernameColorsSetting extends Component<SettingProps, State> {
       previewChecked: "off",
       usernameColors: undefined!,
       usernameColorsToRemove: [],
+      randomizeChecked: undefined!,
     };
   }
 
   async componentDidMount() {
-    this.setState({usernameColors: await fromStorage(Feature.UsernameColors)});
+    this.setState({
+      randomizeChecked: await fromStorage(Data.RandomizeUsernameColors),
+      usernameColors: await fromStorage(Feature.UsernameColors),
+    });
   }
 
   addNewColor = async () => {
@@ -100,6 +107,13 @@ export class UsernameColorsSetting extends Component<SettingProps, State> {
     this.setState({previewChecked});
   };
 
+  toggleRandomized = async () => {
+    const randomizeChecked = this.state.randomizeChecked;
+    randomizeChecked.value = !randomizeChecked.value;
+    await randomizeChecked.save();
+    this.setState({randomizeChecked});
+  };
+
   onInput = (event: Event, id: number, key: "color" | "username") => {
     const colorIndex = this.state.usernameColors.findIndex(
       ({value}) => value.id === id,
@@ -115,7 +129,7 @@ export class UsernameColorsSetting extends Component<SettingProps, State> {
   };
 
   render() {
-    const {previewChecked, usernameColors} = this.state;
+    const {previewChecked, usernameColors, randomizeChecked} = this.state;
     if (usernameColors === undefined) {
       return;
     }
@@ -170,6 +184,10 @@ export class UsernameColorsSetting extends Component<SettingProps, State> {
           <br />
           You can enter multiple usernames separated by a comma if you want them
           to use the same color.
+          <br />
+          If randomize is selected then all usernames will be given a random
+          background color. This will not override colors you have manually
+          assigned.
         </p>
 
         <div class="username-colors-controls">
@@ -184,6 +202,19 @@ export class UsernameColorsSetting extends Component<SettingProps, State> {
           <button class="button" onClick={this.saveChanges}>
             Save Changes
           </button>
+
+          <ul class="checkbox-list">
+            <li>
+              <label>
+                <input
+                  type="checkbox"
+                  checked={randomizeChecked.value}
+                  onClick={this.toggleRandomized}
+                />
+                Randomize Username Colors
+              </label>
+            </li>
+          </ul>
         </div>
 
         {editors}

source/scss/content-scripts.scss

@@ -5,6 +5,7 @@
 @import "scripts/jump-to-new-comment";
 @import "scripts/markdown-toolbar";
 @import "scripts/user-labels";
+@import "scripts/username-colors";
 
 // Miscellaneous
 @import "shared";

source/scss/scripts/_username-colors.scss

@@ -0,0 +1,6 @@
+.trx-random-username-color {
+  background-color: var(--background-color);
+  border-radius: 3px;
+  color: var(--link-color);
+  padding: 2px 3px;
+}

source/storage/enums.ts

@@ -22,5 +22,6 @@ export enum Data {
   EnabledFeatures = "enabled-features",
   KnownGroups = "known-groups",
   LatestActiveFeatureTab = "latest-active-feature-tab",
+  RandomizeUsernameColors = "randomize-username-colors",
   Version = "data-version",
 }

source/storage/exports.ts

@@ -58,6 +58,13 @@ export const storageValues = {
     value: "2.0.0",
     storage: browser.storage.sync,
   }),
+  [Data.RandomizeUsernameColors]: createValue({
+    deserialize: (input) => JSON.parse(input) as boolean,
+    serialize: (input) => JSON.stringify(input),
+    key: Data.RandomizeUsernameColors,
+    value: false,
+    storage: browser.storage.sync,
+  }),
   [Feature.HideTopics]: collectHideTopicsData(),
   [Feature.HideVotes]: createValue({
     deserialize: (input) => JSON.parse(input) as HideVotesData,

source/utilities/color.ts

@@ -1,3 +1,12 @@
+import {hashSha256} from "./text.js";
+
+/** Return a hex color based on a hash of the input string. */
+export async function getColorFromStringHash(input: string): Promise<string> {
+  const hash = Number.parseInt(await hashSha256(input), 16);
+  const color = Math.abs(hash % 0xff_ff_ff).toString(16);
+  return `#${color}`.padEnd(7, "0");
+}
+
 /** Returns whether a hex color is "bright". */
 export function isColorBright(color: string): boolean {
   if (color.startsWith("#")) {

source/utilities/text.ts

@@ -16,3 +16,12 @@ export function pluralize(
 
   return plural ?? singular + "s";
 }
+
+/** Return the SHA-256 hash for a given string. */
+export async function hashSha256(input: string): Promise<string> {
+  const uint8Input = new window.TextEncoder().encode(input);
+  const digest = await window.crypto.subtle.digest("SHA-256", uint8Input);
+  return Array.from(new window.Uint8Array(digest))
+    .map((byte) => byte.toString(16).padStart(2, "0"))
+    .join("");
+}