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

Jump to bottom

Support Drag & Drop in the embedded browser preview #2030

Closed
stevewlrls opened this issue Feb 19, 2024 · 4 comments
Closed

Support Drag & Drop in the embedded browser preview #2030

stevewlrls opened this issue Feb 19, 2024 · 4 comments
Labels
enhancement New feature or request tracked

Comments

@stevewlrls
Copy link

stevewlrls commented Feb 19, 2024 •
edited by github-actions bot
Loading

Environment (please complete the following information):

  • OS (e.g., Windows 10): macOS Sonoma 14.3.1 (M3 iMac)
  • Extension version (e.g., 1.2.3): 2.1.4

Describe the bug:

Whilst HTML drag & drop within an Edge Devtools tab works, there is no visual feedback: no drag image and no drop effect cursor change.

Running the exact same file URL in a normal Edge window provides the expected feedback.

Repro steps:

Create the following, minimal demo file as index.html in a new VS Code project. Use Edge Devtools to open in a browser tab. Attempt to drag the first div onto the second.

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Drag & drop demo</title>
  </head>
  <body>
    <div id="source">Drag me</div>
    <div id="target">Onto here</div>
    <script>
      const source = document.getElementById('source')
      const target = document.getElementById('target')
      source.draggable = true
      source.ondragstart = (ev) => {
        ev.dataTransfer.setData('x-application-demo', source.innerText)
      }
      target.ondragover = (ev) => ev.preventDefault()
      target.ondrop = (ev) => {
        target.innerText = ev.dataTransfer.getData('x-application-demo')
      }
    </script>
    <style>
      #target {
        padding: 6px;
        border: 2px solid black;
        border-radius: 4px;
      }
    </style>
  </body>
</html>

Expected behavior:

You should see the text of the source div as a 'ghost' drag image while dragging it. When the cursor is over the target div, it should change to show a 'copy' action feedback.

Additional context:

I have also tried with an image element as the source: same absence of visual feedback.
I have tried adding a drag image explicitly (setDragImage) but that also fails to give any visual feedback.
Opening the exact same URL in a normal Edge window/tab gives normal (expected) feedback.

AB#49074458
@captainbrosset
Copy link
Collaborator

Thank you for providing those details. I'll mark this as tracked on our backlog. However, I want to explain that when you use the embedded browser preview inside VSCode, what you're seeing is a stream of images that are generated by a headless browser. You're not interacting with the real browser viewport, only with a preview of it that supports some interactions only.
This explains why drag/drop interactions might not work the way they work in a real browser viewport.

We'll still track this on our backlog. But I'm unclear as to whether we'll improve the embedded browser preview to support this use case over time.

For these types of use cases, I suggest connecting DevTools in VSCode to an external browser instead, as documented here: https://learn.microsoft.com/en-us/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/external-browser-window

@captainbrosset captainbrosset added the enhancement New feature or request label Feb 20, 2024
@captainbrosset captainbrosset changed the title Drag & Drop visual feedback not visible Support Drag & Drop in the embedded browser preview Feb 20, 2024
@stevewlrls
Copy link
Author

stevewlrls commented Feb 20, 2024 via email

@stevewlrls
Copy link
Author

stevewlrls commented Feb 20, 2024 via email

@captainbrosset
Copy link
Collaborator

Thank you for your feedback. I'll open a new issue on the documentation repo to capture the fact that these restrictions should be clearly mentioned in the docs.

@captainbrosset captainbrosset mentioned this issue Feb 21, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request tracked
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@captainbrosset @stevewlrls