Event log: an event's ID can be selected without toggling it (closes #348)

An event's row in the event log was a button element, whose text a browser
does not let be selected. The row is now an element with the button role:
focusable, toggled by Enter and Space, and saying whether it is expanded. A
click that ends a text selection leaves the event as it is, and a single
click toggles only after 500 ms, which the second click of a double- or
triple-click cancels, so the event does not move under the pointer while its
ID is selected. The browser test now also clicks the caret, selects the ID by
dragging and by a triple-click, and uses the keyboard.

Model: opus-5-5

static/js/app.js

@@ -77,12 +77,26 @@ document.addEventListener("alpine:init", function () {
     window.Alpine.data("collapsible", function () {
         return {
             open: false,
+            // The timer of the toggle a single click is waiting to make.
+            pendingToggle: null,
             init() {
                 this.open = this.$root.hasAttribute("data-open");
             },
             toggle() {
                 this.open = !this.open;
             },
+            // Toggles on a click, except one that selects text, such as
+            // selecting an event's ID to copy it. A single click toggles
+            // only after 500 ms, the usual double-click interval, and the
+            // second click of a double- or triple-click cancels that, so
+            // nothing moves under the pointer while it selects text.
+            toggleUnlessSelecting(event) {
+                if (event.detail > 1) {
+                    clearTimeout(this.pendingToggle);
+                } else if (window.getSelection().toString() === "") {
+                    this.pendingToggle = setTimeout(() => this.toggle(), 500);
+                }
+            },
             get closed() {
                 return !this.open;
             },