Add tags to patches (#69)

A Tag is an arbitrary label for a patch in the Commitfest UI. Other than
helping users identify patches of interest, it has no other semantic
meaning to the CF application. This addresses #11 and #67.

Tags are created using the administrator interface. They consist of a
unique name and a background color. The color should be sent from
compliant browsers in `#rrggbb` format, which is stored without backend
validation; to avoid later CSS injection, any non-conforming values are
replaced with black during rendering.

It also includes some javascript to help admins pick colors that aren't
completely eye-gouging, by putting up an (ignorable) warning if we don't
meet baseline [WCAG
recommendations](https://www.w3.org/WAI/WCAG22/Techniques/general/G18.html)
on text contrast.

## Notes

- To avoid putting a separate name+color copy of every tag into each row
of the `patchlist` query, I instead grab the tag IDs and look them up in
a map at render time. I think this requires `@transaction.atomic` to tie
the map and patches together, which I've added across the entire view
for simplicity.
- Backend validation for the color didn't make a whole lot of sense to
me, since only admins can create tags and we escape at time-of-use
anyway.

## Screenshots
Admin interface:

![image](https://github.com/user-attachments/assets/8061a2d1-1d5b-456b-99bb-4af5d6dc79fc)
User interface:

![image](https://github.com/user-attachments/assets/9c95b307-c6e2-48c8-bd65-881c08429a96)

---------

Co-authored-by: Jelte Fennema-Nio <[email protected]>

Author: jchampio

biome.json

@@ -10,6 +10,7 @@
         "ignore": [],
         "include": [
             "media/commitfest/js/commitfest.js",
+            "media/commitfest/js/change_tag.js",
             "media/commitfest/css/commitfest.css",
             "biome.json"
         ]

media/commitfest/js/change_tag.js

@@ -0,0 +1,45 @@
+// An input validator for the color picker. Points out low-contrast tag color
+// choices.
+const inputs = document.getElementsByClassName("color-picker");
+for (let i = 0; i < inputs.length; i++) {
+    inputs[i].addEventListener("change", (event) => {
+        // Don't do anything if the color code doesn't pass default validity.
+        const element = event.target;
+        element.setCustomValidity("");
+        if (!element.validity.valid) {
+            return;
+        }
+
+        // Break the #rrggbb color code into RGB components.
+        color = Number.parseInt(element.value.substr(1), 16);
+        red = ((color & 0xff0000) >> 16) / 255;
+        green = ((color & 0x00ff00) >> 8) / 255;
+        blue = (color & 0x0000ff) / 255;
+
+        // Compare the contrast ratio against white. All the magic math comes from
+        // Web Content Accessibility Guidelines (WCAG) 2.2, Technique G18:
+        //
+        //     https://www.w3.org/WAI/WCAG22/Techniques/general/G18.html
+        //
+        function l(val) {
+            if (val <= 0.04045) {
+                return val / 12.92;
+            }
+            return ((val + 0.055) / 1.055) ** 2.4;
+        }
+
+        lum = 0.2126 * l(red) + 0.7152 * l(green) + 0.0722 * l(blue);
+        contrast = (1 + 0.05) / (lum + 0.05);
+
+        // Complain if we're below WCAG 2.2 recommendations.
+        if (contrast < 4.5) {
+            element.setCustomValidity(
+                `Consider choosing a darker color. (Tag text is small and white.)\n\nContrast ratio: ${Math.trunc(contrast * 10) / 10} (< 4.5)`,
+            );
+
+            // The admin form uses novalidate, so manually display the browser's
+            // validity popup. (The user can still ignore it if desired.)
+            element.reportValidity();
+        }
+    });
+}

pgcommitfest/commitfest/admin.py

@@ -1,15 +1,18 @@
 from django.contrib import admin
+from django.forms import widgets
 
 from .models import (
     CfbotBranch,
     CfbotTask,
+    ColorField,
     CommitFest,
     Committer,
     MailThread,
     MailThreadAttachment,
     Patch,
     PatchHistory,
     PatchOnCommitFest,
+    Tag,
     TargetVersion,
     Topic,
 )
@@ -38,8 +41,26 @@ class MailThreadAttachmentAdmin(admin.ModelAdmin):
     )
 
 
+class ColorInput(widgets.Input):
+    """
+    A color picker widget.
+    """
+
+    input_type = "color"
+    template_name = "color_input.html"
+
+
+class TagAdmin(admin.ModelAdmin):
+    # Customize the Tag form with a color picker and soft validation.
+    change_form_template = "change_tag_form.html"
+    formfield_overrides = {
+        ColorField: {"widget": ColorInput},
+    }
+
+
 admin.site.register(Committer, CommitterAdmin)
 admin.site.register(CommitFest)
+admin.site.register(Tag, TagAdmin)
 admin.site.register(Topic)
 admin.site.register(Patch, PatchAdmin)
 admin.site.register(PatchHistory)