DOM: Observable EventTarget integration 1/N

This CL implements "limited" and "leaky" EventTarget integration with
the Observable API. See below for what "limited" and "leaky" mean.
Concretely, this involves introducing the `on()` method to the
EventTarget interface, so that all EventTargets can return Observables
that listen for events. This is the part that really makes Observables a
"better addEventListener()".

This is the first instance of a natively-constructed Observable, as
opposed to a JS-constructed Observable. This means the subscription
callback passed to the Observable constructor is not just a JS callback
function with user-defined code, but instead is a C++ delegate class,
called `SubscribeDelegate` which has its first concrete implementation
provided by EventTarget (in event_target.cc). The concrete
implementation of this interface that this CL introduces, adds an event
listener to the given EventTarget, upon subscription. The events are
forwarded to the Subscriber's `next()` method. This is what unlocks
more ergonomic event handling with the composable Observable primitive
and all of its (coming) operators.

1. The EventTarget integration is considered "limited" because we do not
support any of the `AddEventListenerOptions` yet, as of this CL. A
subsequent CL will add support for a more restricted version of the
`AddEventListenerOptions`, called `ObservableEventListenerOptions`,
which does not include a `once` option, or an `AbortSignal`, since
Observable operators and subscription is responsible for managing those
aspects. Concretely, an `ObservableEventListenerOptions` will
resolve to an `AddEventListenerOptionsResolved` accordingly. See:
 - WICG/observable#66
 - WICG/observable#67
 - WICG/observable#65

2. The EventTarget integration is considered "leaky" as of this CL,
because there is currently no way to remove an event listener added by
an EventTarget-vended Observable. This will come in a subsequent CL,
which will pass the test that is currently failing in this CL. See
WICG/observable#75 for discussion about
tying the subscription termination to removing an event listener.
From a technical perspective, this is pretty easy — it involves adding
an abort algorithm to `Subscriber#signal` (which has already been wired
up properly by now!) that removes the given per-Subscription
`ObservableEventListener` NativeEventListener from the associated
EventTarget. That implementation has already been sketched out in
https://crrev.com/c/4262153 and the design doc. It will included in a
follow-up CL, to reduce the complexity of this one.

For WPTs:
Co-authored-by: [email protected]

[email protected]

Bug: 1485981
Change-Id: Iafeddb0894b8eed2be1d95c181fc44d7650c0d47
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5073394
Reviewed-by: Mason Freed <[email protected]>
Commit-Queue: Dominic Farolino <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1237501}

Author: domfarolino

dom/observable/tentative/observable-constructor.window.js

@@ -98,3 +98,30 @@ promise_test(async t => {
 
   assert_array_equals(results, ["detached"], "Subscribe callback is never invoked");
 }, "Cannot subscribe to an Observable in a detached document");
+
+promise_test(async t => {
+  // Make this available off the global so the child can reach it.
+  window.results = [];
+  const contentWin = await loadIframeAndReturnContentWindow();
+
+  contentWin.eval(`
+    const parentResults = parent.results;
+    const event_target = new EventTarget();
+    // Set up two event listeners, both of which will mutate |parentResults|:
+    //   1. A traditional event listener
+    //   2. An observable
+    event_target.addEventListener('customevent', e => parentResults.push(e));
+    const source = event_target.on('customevent');
+    source.subscribe(e => parentResults.push(e));
+
+    // Detach the iframe and fire an event at the event target. The parent will
+    // confirm that the observable's next handler did not get invoked, because
+    // the window is detached.
+    const event = new Event('customevent');
+    window.frameElement.remove();
+    parentResults.push('detached');
+    event_target.dispatchEvent(event);
+  `);
+
+  assert_array_equals(results, ["detached"], "Subscribe callback is never invoked");
+}, "Observable from EventTarget does not get notified for events in detached documents");

dom/observable/tentative/observable-event-target.any.js

@@ -0,0 +1,71 @@
+test(() => {
+  const target = new EventTarget();
+  assert_implements(target.on, "The EventTarget interface has an `on` method");
+  assert_equals(typeof target.on, "function",
+      "EventTarget should have the on method");
+
+  const testEvents = target.on("test");
+  assert_true(testEvents instanceof Observable,
+      "EventTarget.on returns an Observable");
+
+  const results = [];
+  testEvents.subscribe({
+    next: value => results.push(value),
+    error: () => results.push("error"),
+    complete: () => results.push("complete"),
+  });
+
+  assert_array_equals(results, [],
+      "Observable does not emit events until event is fired");
+
+  const event = new Event("test");
+  target.dispatchEvent(event);
+  assert_array_equals(results, [event]);
+
+  target.dispatchEvent(event);
+  assert_array_equals(results, [event, event]);
+}, "EventTarget.on() returns an Observable");
+
+test(() => {
+  const target = new EventTarget();
+  const testEvents = target.on("test");
+  const ac = new AbortController();
+  const results = [];
+  testEvents.subscribe({
+    next: (value) => results.push(value),
+    error: () => results.push('error'),
+    complete: () => results.complete('complete'),
+  }, { signal: ac.signal });
+
+  assert_array_equals(results, [],
+      "Observable does not emit events until event is fired");
+
+  const event1 = new Event("test");
+  const event2 = new Event("test");
+  const event3 = new Event("test");
+  target.dispatchEvent(event1);
+  target.dispatchEvent(event2);
+
+  assert_array_equals(results, [event1, event2]);
+
+  ac.abort();
+  target.dispatchEvent(event3);
+
+  assert_array_equals(results, [event1, event2],
+      "Aborting the subscription removes the event listener and stops the " +
+      "emission of events");
+}, "Aborting the subscription should stop the emission of events");
+
+test(() => {
+  const target = new EventTarget();
+  const testEvents = target.on("test");
+  const results = [];
+  testEvents.subscribe(e => results.push(e));
+  testEvents.subscribe(e => results.push(e));
+
+  const event1 = new Event("test");
+  const event2 = new Event("test");
+  target.dispatchEvent(event1);
+  target.dispatchEvent(event2);
+  assert_array_equals(results, [event1, event1, event2, event2]);
+}, "EventTarget Observables can multicast subscriptions for event handling");

trusted-types/trusted-types-event-handlers.html

@@ -37,7 +37,9 @@
 // element about which attributes it knows.
 const div = document.createElement("div");
 for(name in div.__proto__) {
-  const should_be_event_handler = name.startsWith("on");
+  // This captures all "on{foo}" handlers, but not "on" itself, which is an IDL
+  // attribute that returns an Observable.
+  const should_be_event_handler = name.startsWith("on") && name !== "on";
   if (should_be_event_handler) {
     test(t => {
       assert_throws_js(TypeError,