From 8165e8274cb12c5f9cdca7e54e0da62822797416 Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Tue, 5 Dec 2023 13:15:13 -0800 Subject: [PATCH] DOM: Observable EventTarget integration 1/N MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 supported 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: - https://github.com/WICG/observable/issues/66 - https://github.com/WICG/observable/pull/67 - https://github.com/WICG/observable/issues/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 https://github.com/WICG/observable/issues/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: ben@benlesh.com R=masonf@chromium.org Bug: 1485981 Change-Id: Iafeddb0894b8eed2be1d95c181fc44d7650c0d47 --- .../observable-constructor.window.js | 27 +++++++++ .../tentative/observable-event-target.any.js | 57 +++++++++++++++++++ .../trusted-types-event-handlers.html | 4 +- 3 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 dom/observable/tentative/observable-event-target.any.js diff --git a/dom/observable/tentative/observable-constructor.window.js b/dom/observable/tentative/observable-constructor.window.js index 34776f8fc56b5b2..d2b597c819054f2 100644 --- a/dom/observable/tentative/observable-constructor.window.js +++ b/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"); diff --git a/dom/observable/tentative/observable-event-target.any.js b/dom/observable/tentative/observable-event-target.any.js new file mode 100644 index 000000000000000..1979afc7d588c6a --- /dev/null +++ b/dom/observable/tentative/observable-event-target.any.js @@ -0,0 +1,57 @@ +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"); diff --git a/trusted-types/trusted-types-event-handlers.html b/trusted-types/trusted-types-event-handlers.html index 57f8d3d90c41629..9dd7133cbb0b5b7 100644 --- a/trusted-types/trusted-types-event-handlers.html +++ b/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,