Skip to content

Commit ed55e1d

Browse files
mfreed7chromium-wpt-export-bot
mfreed7
authored and
chromium-wpt-export-bot
committed
Get started cleaning up interesttarget implementation [1/N]
This is the first in a series of patches to clean up and update the `interesttarget` implementation to match recent OpenUI discussions. This CL: - Gets rid of `interestaction`. See the large comment posted here: openui/open-ui#1064 (comment) - Adds a connection to `InterestLost` when elements are de-focused. - Adds support (tentatively) for dialogs being shown modally. - Remove keyboard/focus support for `interesttarget`. This will get re-added later in its new form, via a hotkey rather than focus. Bug: 326681249 Change-Id: I26f07a00c4fb1d2b1da92b64d91f330c02a11468 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6166890 Auto-Submit: Mason Freed <[email protected]> Reviewed-by: David Baron <[email protected]> Commit-Queue: Mason Freed <[email protected]> Cr-Commit-Position: refs/heads/main@{#1408202}
1 parent f98387d commit ed55e1d

8 files changed

+82
-430
lines changed

‎html/semantics/the-button-element/interest-target/interestelement-interface.tentative.html

-78
Original file line numberDiff line numberDiff line change
@@ -84,82 +84,4 @@
8484
"interestTargetElement attribute value must be an instance of Element",
8585
);
8686
}, "interestTargetElement throws error on assignment of non Element");
87-
88-
test(function () {
89-
assert_false(buttonInvoker.hasAttribute("interestaction"));
90-
assert_equals(buttonInvoker.interestAction, "");
91-
assert_false(aInvoker.hasAttribute("interestaction"));
92-
assert_equals(aInvoker.interestAction, "");
93-
assert_false(inputInvoker.hasAttribute("interestaction"));
94-
assert_equals(inputInvoker.interestAction, "");
95-
}, "interestAction reflects '' when attribute not present");
96-
97-
test(function () {
98-
buttonInvoker.setAttribute("interestaction", "");
99-
assert_equals(buttonInvoker.getAttribute("interestaction"), "");
100-
assert_equals(buttonInvoker.interestAction, "");
101-
aInvoker.setAttribute("interestaction", "");
102-
assert_equals(aInvoker.getAttribute("interestaction"), "");
103-
assert_equals(aInvoker.interestAction, "");
104-
inputInvoker.setAttribute("interestaction", "");
105-
assert_equals(inputInvoker.getAttribute("interestaction"), "");
106-
assert_equals(inputInvoker.interestAction, "");
107-
}, "interestAction reflects '' when attribute empty, setAttribute version");
108-
109-
test(function () {
110-
buttonInvoker.interestAction = "";
111-
assert_equals(buttonInvoker.getAttribute("interestaction"), "");
112-
assert_equals(buttonInvoker.interestAction, "");
113-
aInvoker.interestAction = "";
114-
assert_equals(aInvoker.getAttribute("interestaction"), "");
115-
assert_equals(aInvoker.interestAction, "");
116-
inputInvoker.interestAction = "";
117-
assert_equals(inputInvoker.getAttribute("interestaction"), "");
118-
assert_equals(inputInvoker.interestAction, "");
119-
}, "interestAction reflects '' when attribute empty, IDL setter version");
120-
121-
test(function () {
122-
buttonInvoker.interestAction = "fooBarBaz";
123-
assert_equals(buttonInvoker.getAttribute("interestaction"), "fooBarBaz");
124-
assert_equals(buttonInvoker.interestAction, "fooBarBaz");
125-
aInvoker.interestAction = "fooBarBaz";
126-
assert_equals(aInvoker.getAttribute("interestaction"), "fooBarBaz");
127-
assert_equals(aInvoker.interestAction, "fooBarBaz");
128-
inputInvoker.interestAction = "fooBarBaz";
129-
assert_equals(inputInvoker.getAttribute("interestaction"), "fooBarBaz");
130-
assert_equals(inputInvoker.interestAction, "fooBarBaz");
131-
}, "interestAction reflects same casing");
132-
133-
test(function () {
134-
buttonInvoker.interestAction = [];
135-
assert_equals(buttonInvoker.getAttribute("interestaction"), "");
136-
assert_equals(buttonInvoker.interestAction, "");
137-
aInvoker.interestAction = [];
138-
assert_equals(aInvoker.getAttribute("interestaction"), "");
139-
assert_equals(aInvoker.interestAction, "");
140-
inputInvoker.interestAction = [];
141-
assert_equals(inputInvoker.getAttribute("interestaction"), "");
142-
assert_equals(inputInvoker.interestAction, "");
143-
}, "interestAction reflects '' when attribute set to []");
144-
145-
test(function () {
146-
buttonInvoker.interestAction = [1, 2, 3];
147-
assert_equals(buttonInvoker.getAttribute("interestaction"), "1,2,3");
148-
assert_equals(buttonInvoker.interestAction, "1,2,3");
149-
aInvoker.interestAction = [1, 2, 3];
150-
assert_equals(aInvoker.getAttribute("interestaction"), "1,2,3");
151-
assert_equals(aInvoker.interestAction, "1,2,3");
152-
inputInvoker.interestAction = [1, 2, 3];
153-
assert_equals(inputInvoker.getAttribute("interestaction"), "1,2,3");
154-
assert_equals(inputInvoker.interestAction, "1,2,3");
155-
}, "interestAction reflects tostring value");
156-
157-
test(function () {
158-
buttonInvoker.interestAction = {};
159-
assert_equals(buttonInvoker.interestAction, "[object Object]");
160-
aInvoker.interestAction = {};
161-
assert_equals(aInvoker.interestAction, "[object Object]");
162-
inputInvoker.interestAction = {};
163-
assert_equals(inputInvoker.interestAction, "[object Object]");
164-
}, "interestAction reflects tostring value 2");
16587
</script>

‎html/semantics/the-button-element/interest-target/interestevent-dispatch-shadow.tentative.html

+28-56
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<meta charset="utf-8" />
33
<meta name="author" title="Keith Cirkel" href="mailto:[email protected]" />
44
<meta name="author" title="Luke Warlow" href="mailto:[email protected]" />
5-
<link rel="help" href="https://open-ui.org/components/interest-invokers.explainer/" />
5+
<link
6+
rel="help"
7+
href="https://open-ui.org/components/interest-invokers.explainer/"
8+
/>
69
<script src="/resources/testharness.js"></script>
710
<script src="/resources/testharnessreport.js"></script>
811
<script src="/resources/testdriver.js"></script>
@@ -20,63 +23,35 @@
2023
const slot = shadow.appendChild(document.createElement("slot"));
2124
let childEvent = null;
2225
let childEventTarget = null;
23-
let childEventInvoker = null;
26+
let childEventSource = null;
2427
let hostEvent = null;
2528
let hostEventTarget = null;
26-
let hostEventInvoker = null;
27-
slot.addEventListener(
28-
"interest",
29-
(e) => {
29+
let hostEventSource = null;
30+
slot.addEventListener("interest", (e) => {
3031
childEvent = e;
3132
childEventTarget = e.target;
32-
childEventInvoker = e.invoker;
33-
},
34-
{ once: true },
35-
);
36-
host.addEventListener(
37-
"interest",
38-
(e) => {
33+
childEventSource = e.source;
34+
}, { once: true });
35+
host.addEventListener("interest", (e) => {
3936
hostEvent = e;
4037
hostEventTarget = e.target;
41-
hostEventInvoker = e.invoker;
42-
},
43-
{ once: true },
44-
);
38+
hostEventSource = e.source;
39+
}, { once: true });
4540
const event = new InterestEvent("interest", {
4641
bubbles: true,
47-
invoker: slot,
42+
source: slot,
4843
composed: true,
4944
});
5045
slot.dispatchEvent(event);
5146
assert_true(childEvent instanceof InterestEvent, "slot saw interest event");
52-
assert_equals(
53-
childEventTarget,
54-
slot,
55-
"target is child inside shadow boundary",
56-
);
57-
assert_equals(
58-
childEventInvoker,
59-
slot,
60-
"invoker is child inside shadow boundary",
61-
);
62-
assert_equals(
63-
hostEvent,
64-
childEvent,
65-
"event dispatch propagates across shadow boundary",
66-
);
67-
assert_equals(
68-
hostEventTarget,
69-
host,
70-
"target is retargeted to shadowroot host",
71-
);
72-
assert_equals(
73-
hostEventInvoker,
74-
host,
75-
"invoker is retargeted to shadowroot host",
76-
);
77-
}, "InterestEvent propagates across shadow boundaries retargeting invoker");
47+
assert_equals(childEventTarget, slot, "target is child inside shadow boundary");
48+
assert_equals(childEventSource, slot, "source is child inside shadow boundary");
49+
assert_equals(hostEvent, childEvent, "event dispatch propagates across shadow boundary");
50+
assert_equals(hostEventTarget, host, "target is retargeted to shadowroot host");
51+
assert_equals(hostEventSource, host, "source is retargeted to shadowroot host");
52+
}, "InterestEvent propagates across shadow boundaries retargeting invoker source");
7853

79-
test(function (t) {
54+
promise_test(async (t) => {
8055
const host = document.createElement("div");
8156
document.body.append(host);
8257
t.add_cleanup(() => host.remove());
@@ -86,19 +61,16 @@
8661
button.interestTargetElement = interestee;
8762
let event = null;
8863
let eventTarget = null;
89-
let eventInvoker = null;
90-
interestee.addEventListener(
91-
"interest",
92-
(e) => {
64+
let eventSource = null;
65+
interestee.addEventListener("interest", (e) => {
9366
event = e;
9467
eventTarget = e.target;
95-
eventInvoker = e.invoker;
96-
},
97-
{ once: true },
98-
);
99-
button.focus();
68+
eventSource = e.source;
69+
},{ once: true });
70+
await hoverOver(button);
71+
assert_true(!!event,"InterestEvent gets fired");
10072
assert_true(event instanceof InterestEvent);
10173
assert_equals(eventTarget, interestee, "target is interestee");
102-
assert_equals(eventInvoker, host, "interestee is host");
74+
assert_equals(eventSource, host, "interestee is host");
10375
}, "cross shadow InterestEvent retargets interestee to host element");
10476
</script>

‎html/semantics/the-button-element/interest-target/interestevent-interface.tentative.html

+30-102
Original file line numberDiff line numberDiff line change
@@ -16,152 +16,80 @@
1616
<script>
1717
test(function () {
1818
const event = new InterestEvent("test");
19-
assert_equals(event.action, "");
20-
assert_readonly(event, "action", "readonly attribute value");
21-
}, "action is a readonly defaulting to ''");
19+
assert_equals(event.source, null);
20+
assert_readonly(event, "source", "readonly attribute value");
21+
}, "source is readonly defaulting to null");
2222

2323
test(function () {
24-
const event = new InterestEvent("test");
25-
assert_equals(event.invoker, null);
26-
assert_readonly(event, "invoker", "readonly attribute value");
27-
}, "invoker is readonly defaulting to null");
28-
29-
test(function () {
30-
const event = new InterestEvent("test", { action: "sAmPle" });
31-
assert_equals(event.action, "sAmPle");
32-
}, "action reflects initialized attribute");
33-
34-
test(function () {
35-
const event = new InterestEvent("test", { action: undefined });
36-
assert_equals(event.action, "");
37-
}, "action set to undefined");
38-
39-
test(function () {
40-
const event = new InterestEvent("test", { action: null });
41-
assert_equals(event.action, "null");
42-
}, "action set to null");
43-
44-
test(function () {
45-
const event = new InterestEvent("test", { action: false });
46-
assert_equals(event.action, "false");
47-
}, "action set to false");
48-
49-
test(function () {
50-
const event = new InterestEvent("test", { action: "" });
51-
assert_equals(event.action, "");
52-
}, "action explicitly set to empty string");
53-
54-
test(function () {
55-
const event = new InterestEvent("test", { action: true });
56-
assert_equals(event.action, "true");
57-
}, "action set to true");
58-
59-
test(function () {
60-
const event = new InterestEvent("test", { action: 0.5 });
61-
assert_equals(event.action, "0.5");
62-
}, "action set to a number");
63-
64-
test(function () {
65-
const event = new InterestEvent("test", { action: [] });
66-
assert_equals(event.action, "");
67-
}, "action set to []");
68-
69-
test(function () {
70-
const event = new InterestEvent("test", { action: [1, 2, 3] });
71-
assert_equals(event.action, "1,2,3");
72-
}, "action set to [1, 2, 3]");
73-
74-
test(function () {
75-
const event = new InterestEvent("test", { action: { sample: 0.5 } });
76-
assert_equals(event.action, "[object Object]");
77-
}, "action set to an object");
78-
79-
test(function () {
80-
const event = new InterestEvent("test", {
81-
action: {
82-
toString() {
83-
return "sample";
84-
},
85-
},
86-
});
87-
assert_equals(event.action, "sample");
88-
}, "action set to an object with a toString function");
89-
90-
test(function () {
91-
const eventInit = { action: "sample", invoker: document.body };
24+
const eventInit = { source: document.body };
9225
const event = new InterestEvent("test", eventInit);
93-
assert_equals(event.action, "sample");
94-
assert_equals(event.invoker, document.body);
95-
}, "InterestEventInit properties set value");
26+
assert_equals(event.source, document.body);
27+
}, "InterestEventInit properties set value (manual event)");
9628

9729
test(function () {
9830
const eventInit = {
99-
action: "open",
100-
invoker: document.getElementById("div"),
31+
source: document.getElementById("div"),
10132
};
10233
const event = new InterestEvent("beforetoggle", eventInit);
103-
assert_equals(event.action, "open");
104-
assert_equals(event.invoker, document.getElementById("div"));
105-
}, "InterestEventInit properties set value 2");
34+
assert_equals(event.source, document.getElementById("div"));
35+
}, "InterestEventInit properties set value (beforetoggle event)");
10636

10737
test(function () {
10838
const eventInit = {
109-
action: "closed",
110-
invoker: document.getElementById("button"),
39+
source: document.getElementById("button"),
11140
};
11241
const event = new InterestEvent("toggle", eventInit);
113-
assert_equals(event.action, "closed");
114-
assert_equals(event.invoker, document.getElementById("button"));
115-
}, "InterestEventInit properties set value 3");
42+
assert_equals(event.source, document.getElementById("button"));
43+
}, "InterestEventInit properties set value (toggle event)");
11644

11745
test(function () {
118-
const event = new InterestEvent("test", { invoker: undefined });
119-
assert_equals(event.invoker, null);
120-
}, "invoker set to undefined");
46+
const event = new InterestEvent("test", { source: undefined });
47+
assert_equals(event.source, null);
48+
}, "source set to undefined");
12149

12250
test(function () {
123-
const event = new InterestEvent("test", { invoker: null });
124-
assert_equals(event.invoker, null);
125-
}, "invoker set to null");
51+
const event = new InterestEvent("test", { source: null });
52+
assert_equals(event.source, null);
53+
}, "source set to null");
12654

12755
test(function () {
12856
assert_throws_js(
12957
TypeError,
13058
function () {
131-
new InterestEvent("test", { invoker: false });
59+
new InterestEvent("test", { source: false });
13260
},
133-
"invoker is not an object",
61+
"source is not an object",
13462
);
135-
}, "invoker set to false");
63+
}, "source set to false");
13664

13765
test(function () {
13866
assert_throws_js(
13967
TypeError,
14068
function () {
141-
const event = new InterestEvent("test", { invoker: true });
69+
const event = new InterestEvent("test", { source: true });
14270
},
143-
"invoker is not an object",
71+
"source is not an object",
14472
);
145-
}, "invoker set to true");
73+
}, "source set to true");
14674

14775
test(function () {
14876
assert_throws_js(
14977
TypeError,
15078
function () {
151-
const event = new InterestEvent("test", { invoker: {} });
79+
const event = new InterestEvent("test", { source: {} });
15280
},
153-
"invoker is not an object",
81+
"source is not an object",
15482
);
155-
}, "invoker set to {}");
83+
}, "source set to {}");
15684

15785
test(function () {
15886
assert_throws_js(
15987
TypeError,
16088
function () {
161-
const eventInit = { action: "closed", invoker: new XMLHttpRequest() };
89+
const eventInit = { source: new XMLHttpRequest() };
16290
const event = new InterestEvent("toggle", eventInit);
16391
},
164-
"invoker is not an Element",
92+
"source is not an Element",
16593
);
166-
}, "invoker set to non-Element EventTarget");
94+
}, "source set to non-Element EventTarget");
16795
</script>

0 commit comments

Comments
 (0)