DOM: Rename EventTarget#on() to EventTarget#when()

See the discussion in WICG/observable#39,
which led to this decision, and
WICG/observable#161 for the corresponding spec
rename.

R=jarhar

Bug: 40282760
Change-Id: I9cd744460a3545c74fb34a0418c6ffddc5e6d4e1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5730072
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Commit-Queue: Dominic Farolino <dom@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1340875}

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

@@ -111,7 +111,7 @@ promise_test(async t => {
     //   1. A traditional event listener
     //   2. An observable
     event_target.addEventListener('customevent', e => parentResults.push(e));
-    const source = event_target.on('customevent');
+    const source = event_target.when('customevent');
     source.subscribe(e => parentResults.push(e));
 
     // Detach the iframe and fire an event at the event target. The parent will

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

@@ -1,12 +1,12 @@
 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");
+  assert_implements(target.when, "The EventTarget interface has an `when` method");
+  assert_equals(typeof target.when, "function",
+      "EventTarget should have the when method");
 
-  const testEvents = target.on("test");
+  const testEvents = target.when("test");
   assert_true(testEvents instanceof Observable,
-      "EventTarget.on returns an Observable");
+      "EventTarget.when() returns an Observable");
 
   const results = [];
   testEvents.subscribe({
@@ -24,11 +24,11 @@ test(() => {
 
   target.dispatchEvent(event);
   assert_array_equals(results, [event, event]);
-}, "EventTarget.on() returns an Observable");
+}, "EventTarget.when() returns an Observable");
 
 test(() => {
   const target = new EventTarget();
-  const testEvents = target.on("test");
+  const testEvents = target.when("test");
   const ac = new AbortController();
   const results = [];
   testEvents.subscribe({
@@ -58,7 +58,7 @@ test(() => {
 
 test(() => {
   const target = new EventTarget();
-  const testEvents = target.on("test");
+  const testEvents = target.when("test");
   const results = [];
   testEvents.subscribe(e => results.push(e));
   testEvents.subscribe(e => results.push(e));

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

@@ -9,8 +9,8 @@ test(() => {
       document.querySelector('body').appendChild(document.createElement('div'));
 
   const body = document.querySelector('body');
-  const captureObservable = body.on('click', {capture: true});
-  const bubbleObservable = body.on('click', {capture: false});
+  const captureObservable = body.when('click', {capture: true});
+  const bubbleObservable = body.when('click', {capture: false});
 
   const results = [];
   captureObservable.subscribe(e => results.push(e.eventPhase));
@@ -24,7 +24,7 @@ test(() => {
 test(() => {
   const target = new EventTarget();
 
-  const observable = target.on('event', {passive: true});
+  const observable = target.when('event', {passive: true});
   observable.subscribe(event => {
     assert_false(event.defaultPrevented);
     // Should do nothing, since `observable` is "passive".

dom/observable/tentative/observable-from.any.js

@@ -23,7 +23,7 @@ test(() => {
 
 test(() => {
   const target = new EventTarget();
-  const observable = target.on('custom');
+  const observable = target.when('custom');
   const from_observable = Observable.from(observable);
   assert_equals(observable, from_observable);
 }, "from(): Given an observable, it returns that exact observable");

dom/observable/tentative/observable-inspect.any.js

@@ -391,7 +391,7 @@ test(() => {
 
   const controller = new AbortController();
 
-  self.on('error').take(1).subscribe(e =>
+  self.when('error').take(1).subscribe(e =>
       results.push(e.message + ', from report exception'));
 
   result.subscribe({