feat(query-devtools): Add picture-in-picture mode

[ardeora]

Add picture-in-picture view to the query devtools.

This allows the devtools to be detached from the main page and open inside a popup. The components are mounted through a portal onto the new window and all interactions work as expected

Here is a screen recording of the feature in play:

Untitled.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
query	⬜️ Ignored (Inspect)	Visit Preview		Feb 19, 2024 7:03am

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit de29488. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx affected --targets=test:format,test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build --parallel=3

---

Sent with 💌 from NxCloud.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit de29488:

Sandbox	Source
@tanstack/query-example-angular-basic	Configuration
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[codecov-commenter]

Codecov Report

Merging #6931 (de29488) into main (26d8980) will decrease coverage by 0.74%.
The diff coverage is 0.00%.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6931      +/-   ##
==========================================
- Coverage   42.11%   41.37%   -0.74%     
==========================================
  Files         180      180              
  Lines        7060     7186     +126     
  Branches     1422     1449      +27     
==========================================
  Hits         2973     2973              
- Misses       3725     3831     +106     
- Partials      362      382      +20     

Components	Coverage Δ
@tanstack/angular-query-devtools-experimental	∅ <ø> (∅)
@tanstack/angular-query-experimental	83.85% <ø> (ø)
@tanstack/eslint-plugin-query	85.11% <ø> (ø)
@tanstack/query-async-storage-persister	48.43% <ø> (ø)
@tanstack/query-broadcast-client-experimental	∅ <ø> (∅)
@tanstack/query-codemods	0.00% <ø> (ø)
@tanstack/query-core	93.63% <ø> (ø)
@tanstack/query-devtools	4.11% <0.00%> (-0.36%)	⬇️
@tanstack/query-persist-client-core	57.73% <ø> (ø)
@tanstack/query-sync-storage-persister	82.50% <ø> (ø)
@tanstack/react-query	93.07% <ø> (ø)
@tanstack/react-query-devtools	0.00% <ø> (ø)
@tanstack/react-query-next-experimental	∅ <ø> (∅)
@tanstack/react-query-persist-client	100.00% <ø> (ø)
@tanstack/solid-query	84.84% <ø> (ø)
@tanstack/solid-query-devtools	∅ <ø> (∅)
@tanstack/solid-query-persist-client	100.00% <ø> (ø)
@tanstack/svelte-query	62.68% <ø> (ø)
@tanstack/svelte-query-devtools	∅ <ø> (∅)
@tanstack/svelte-query-persist-client	100.00% <ø> (ø)
@tanstack/vue-query	70.81% <ø> (ø)
@tanstack/vue-query-devtools	∅ <ø> (∅)

[TkDodo]

amazing

[fh-nabeel-ahmad]

LGTM

[lorand-horvath]

@ardeora This is really cool! I'd just wish for the detached devtools window to not revert back to default mode as soon as I reload the page. Is that possible?

[ardeora]

@ardeora This is really cool! I'd just wish for the detached devtools window to not revert back to default mode as soon as I reload the page. Is that possible?

Hello! This is a great suggestion. I tried implementing something similar but ran into issues. I would love to hear your thoughts or suggestions if you have any feedback on how we can approach this

• We can prevent the existing popup from closing on page refresh. But how can a popup attach itself back to the reloaded window?
• I tried re-opening the popup automatically on page refresh but most browsers require a user-triggered event to open a popup to prevent spam webpages from opening 100s of spam popups

[lorand-horvath]

The state of the popup (id, size, position, etc.) could be remembered in local storage. Then the main window could read and somehow re-bind/re-attach/grab the existing popup via the stored id and re-size, re-position it. I'm not sure how can a window get a handle on an existing popup... I'll have to check.

[lorand-horvath]

https://developer.mozilla.org/en-US/docs/Web/API/Window/open#target

[ardeora]

Okay amazing! I think I have figured it out. Will open a PR soon. Also thank you so much for helping out!