Skip to content
This repository was archived by the owner on Sep 30, 2024. It is now read-only.

Svelte: make search header primary#62991

Merged
camdencheek merged 5 commits into
mainfrom
cc/swap-repo-header
Jun 4, 2024
Merged

Svelte: make search header primary#62991
camdencheek merged 5 commits into
mainfrom
cc/swap-repo-header

Conversation

@camdencheek

@camdencheek camdencheek commented May 30, 2024

Copy link
Copy Markdown
Member

This implements the change to move the search bar back into the header, and the repo header down a level. Comments inline.

screenshot-2024-05-30_20-27-06@2x

Completes SRCH-456

Test plan

Updated relevant playwright tests.
Video overview

@cla-bot cla-bot Bot added the cla-signed label May 30, 2024
@camdencheek camdencheek force-pushed the cc/swap-repo-header branch 2 times, most recently from 8c63f17 to 2c75cc3 Compare May 30, 2024 23:47
Comment thread client/web-sveltekit/src/routes/[...repo=reporev]/+layout.svelte Outdated

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

This is to avoid conflicting with the z-index of the search input.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I think in a follow up PR we should add a "hover container" to the end of the document, give that element z-index: 1 and portal all hover-like elements (tooltips, popovers, etc) into that container.
We are already portalling them to the end of the document but because the search input needs a higher z-index it will still be rendered on top of them.

Comment on lines 72 to 81

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Moved the bottom border to the Tabs component so the TabsHeader component can be used separately.

Comment thread client/web-sveltekit/src/lib/dom.ts Outdated

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I added this function because I couldn't get the existing ones to do what I wanted. overflow isn't enough because I need more than a "small" and "large" state, and computeFit doesn't work in this case because the list of elements is not statically known. I think this is strictly more general than both of those with the tradeoff that changes need to be committed to the DOM with tick before we can re-measure, which I think means there is a possibility of flashing. I was unable to observe any flashing though, so maybe there is another layer of batching happening somewhere.

Anyways, this is probably the piece that could use the closest review

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This seems fine to me, especially since it avoids the limitations of computeFit, though I don't understand

computeFit doesn't work in this case because the list of elements is not statically known.

It seems you are essentially doing the same as before. Why is the list of elements (the menu entries) not statically known?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

"statically known" was a lazy reason. In reality, it was mostly an issue with TabsHeader having its own wrapper, so we would need to add functionality to TabsHeader to apply the action. I got this mostly working, but it would not work more generally, such as if we have two different elements that can shrink (like in the file header where both the file name and the actions will be shrinkable). So it's a bit forward-looking as well as not wanting to expand the TabsHeader interface.

@camdencheek camdencheek marked this pull request as ready for review May 31, 2024 02:26
@camdencheek camdencheek requested a review from a team May 31, 2024 02:26
Comment thread client/web-sveltekit/src/lib/dom.ts Outdated
Comment thread client/web-sveltekit/src/lib/search/CodeHostIcon.svelte Outdated
Comment thread client/web-sveltekit/src/routes/[...repo=reporev]/+layout.svelte Outdated
Comment thread client/web-sveltekit/src/lib/dom.ts Outdated

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This seems fine to me, especially since it avoids the limitations of computeFit, though I don't understand

computeFit doesn't work in this case because the list of elements is not statically known.

It seems you are essentially doing the same as before. Why is the list of elements (the menu entries) not statically known?

Comment thread client/web-sveltekit/src/routes/[...repo=reporev]/+layout.svelte Outdated

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I think in a follow up PR we should add a "hover container" to the end of the document, give that element z-index: 1 and portal all hover-like elements (tooltips, popovers, etc) into that container.
We are already portalling them to the end of the document but because the search input needs a higher z-index it will still be rendered on top of them.

Comment thread client/web-sveltekit/src/routes/[...repo=reporev]/+layout.svelte Outdated
Comment thread client/web-sveltekit/src/lib/dom.ts Outdated
Comment thread client/web-sveltekit/src/routes/[...repo=reporev]/+layout.svelte Outdated
@camdencheek camdencheek force-pushed the cc/swap-repo-header branch from 1fea231 to b933175 Compare May 31, 2024 16:07
@camdencheek camdencheek requested a review from fkling May 31, 2024 16:10
@camdencheek camdencheek force-pushed the cc/swap-repo-header branch 4 times, most recently from 5e9d2ca to 2606166 Compare June 3, 2024 21:51
@camdencheek

Copy link
Copy Markdown
Member Author

Fixed this up to incorporate @vovakulikov's recent changes, and this should be ready for review again

@camdencheek camdencheek requested a review from a team June 3, 2024 21:53
@camdencheek camdencheek force-pushed the cc/swap-repo-header branch from 2606166 to 3e33b09 Compare June 3, 2024 21:54
Comment thread client/web-sveltekit/src/lib/TabsHeader.svelte Outdated
Comment thread client/web-sveltekit/src/lib/dom.ts Outdated
@camdencheek camdencheek force-pushed the cc/swap-repo-header branch from 3e33b09 to 76e5e63 Compare June 4, 2024 13:52
@camdencheek camdencheek force-pushed the cc/swap-repo-header branch from fff755c to e5187bd Compare June 4, 2024 14:05
@camdencheek camdencheek enabled auto-merge (squash) June 4, 2024 14:16
@camdencheek camdencheek merged commit c6ff22a into main Jun 4, 2024
@camdencheek camdencheek deleted the cc/swap-repo-header branch June 4, 2024 14:23
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants