Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expand <details> for find-in-page and element fragments #6466

Merged
merged 18 commits into from
Aug 6, 2021
Merged

Expand <details> for find-in-page and element fragments #6466

Changes from 8 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
6150b78
Expand <details> for find-in-page and element fragments
josepharhar Feb 18, 2021
2ff7386
Rewrite find-in-page section and revert rendering section
josepharhar Mar 9, 2021
738da4b
Add ancestor details revealing algorithm
josepharhar Apr 7, 2021
21ee9bd
Adjust algorithms
josepharhar Apr 29, 2021
0e4b44a
Add <var>s and <span>s, use list for conditional
josepharhar May 6, 2021
60e8e57
Fixed </p> after </li>
josepharhar May 6, 2021
14f3eb5
Merge 3 months of commits from main
josepharhar May 7, 2021
f07c1fb
More formatting
josepharhar May 7, 2021
96b233d
Final nit
domenic May 7, 2021
b2dc599
Address comments
josepharhar May 11, 2021
a3dadcf
Add case for open attribute already set
josepharhar May 19, 2021
1717601
Added content-visibility:hidden
josepharhar Jun 9, 2021
b6bd17a
must -> expected to
josepharhar Jun 16, 2021
3cdc0be
Use style attribute
josepharhar Jun 16, 2021
07f4bd8
Add missing </span>
josepharhar Jun 16, 2021
5d1e8c7
Add <code> to style attribute
josepharhar Jun 17, 2021
295912a
Add flat tree
josepharhar Jul 28, 2021
4054db9
Editorial tweaks
domenic Aug 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57097,6 +57097,33 @@ interface <dfn>HTMLDetailsElement</dfn> : <span>HTMLElement</span> {

</div>

<p>The <dfn>ancestor details revealing algorithm</dfn> is to run the following steps on
<var>currentNode</var>:</p>

<ol>
<li>
<p>While <var>currentNode</var> has a parent node, perform the following steps:</p>

<ol>
<li><p>If <var>currentNode</var> is slotted into the second slot of a <code>details</code>
element:</p>
domenic marked this conversation as resolved.
Show resolved Hide resolved

<ol>
<li><p>Set <var>currentNode</var> to the <code>details</code> element which
<var>currentNode</var> is slotted into.</p></li>

<li><p><span data-x="concept-element-attributes-set-value">Set</span> the <code
data-x="attr-details-open">open</code> attribute on <var>currentNode</var> to the empty
string.</p></li>
</ol>
</li>

<li><p>Otherwise, set <var>currentNode</var> to the parent node of
<var>currentNode</var>.</p></li>.
</ol>
</li>
domenic marked this conversation as resolved.
Show resolved Hide resolved
</ol>

<div class="example">

<p>The following example shows the <code>details</code> element being used to hide technical
Expand Down Expand Up @@ -76140,6 +76167,25 @@ body { display:none }
can navigate through the <span data-x="fip-matches">matches</span> by advancing the <span
data-x="fip-active-match">active match</span> using the <span>find-in-page interface</span>.</p>

<p>When find-in-page begins searching for matches, all <code>details</code> elements in the page
which are not <code data-x="attr-details-open">open</code> should have their second slot be added
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: "which do not have their open attribute set"?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done, thanks!

to the rendering without modifying the <code data-x="attr-details-open">open</code> attribute.
After find-in-page finishes searching for matches, those <code>details</code> elements should have
their second slot be removed from the rendering again. This entire process must happen
synchronously (and so is not observable to users or to author code).</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's better to use "act as if" here as the exact implementation strategy does not matter, as long as you can search through them. That might also allow for removal of the final sentence.

Copy link
Member

@domenic domenic May 10, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 for as-if, but I think the final sentence is still pretty important for clarity.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added "act as if", and I also said that it is to make sure the slot can be searched by find-in-page. How does it look?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see "act as if" in the spec text?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added "act as if" in b2dc599 and removed it in 1717601 when I added content-visibility:hidden. We don't need to be vague by using the "act as if" phrase now that we are speccing it to explicitly be content-visibility:hidden.


<p>When find-in-page chooses a new <span data-x="fip-active-match">active match</span>, perform
the following steps:</p>

<ol>
<li><p>Let <var>node</var> be the first node in the <span data-x="fip-active-match">active
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: single-space indentation.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

match</span>.</p></li>

<li><p><span>Queue a global task</span> on the <span>user interaction task source</span> given
<var>node</var>'s <span>relevant global object</span> to run the <span>ancestor details
revealing algorithm</span> on <var>node</var>.</p></li>
</ol>

<p class="XXX"><a href="https://github.com/whatwg/html/issues/3539">Issue #3539</a> tracks
standardizing how <span>find-in-page</span> underlies the currently-unspecified <code
data-x="">window.find()</code> API.</p>
Expand Down Expand Up @@ -87068,6 +87114,8 @@ new PaymentRequest(&hellip;); // Allowed to use
<li><p>Set the <code>Document</code>'s <span>target element</span> to
<var>target</var>.</p></li>

<li><p>Run the <span>ancestor details revealing algorithm</span> on <var>target</var>.</p></li>

<li><p><span data-x="scroll an element into view">Scroll <var>target</var> into view</span>,
with <var>behavior</var> set to "auto", <var>block</var> set to "start", and <var>inline</var>
set to "nearest". <ref spec=CSSOMVIEW></p></li>
Expand Down