There is no way to exit widget inspector by keyboard in vscode #2775

Activity

1. kenzieschmoll commented on Mar 8, 2021

   

   kenzieschmoll

   on Mar 8, 2021

   Member

   More actions

   CC @DanTup @jacob314
2. DanTup commented on Mar 8, 2021

   

   DanTup

   on Mar 8, 2021

   Last edited by DanTup

   Contributor

   More actions

   This sounds a bit like microsoft/vscode#104329, though that's recently been fixed and I can still repro this in VS Code Insiders. I've added a comment there to see if there's anything specific webviews are supposed to do to pass the keypresses back up to VS Code.

   Edit: I tested it with a non-Flutter page, and see the same behaviour, so I don't think it's anything specific to Flutter.
3. jacob314 commented on Mar 8, 2021

   

   jacob314

   on Mar 8, 2021

   Contributor

   More actions

   Not sure the priority of this. If this matters we could have DevTools dispatch an event over the VM Service that you can listen to in VSCode to determine when to close DevTools or we could dispatch all key pressed from DevTools over the VMService as that could make it easier for you to keep the keyboard shortcuts consistent with VSCode. Fyi @helin24 to see if keyboard shortcuts for closing tool windows work for DevTools embedded in IntelliJ.
4. jacob314

   added

   enhancement

   on Mar 8, 2021
5. jacob314

   added this to the On Deck milestone on Mar 8, 2021
6. jeiea commented on Mar 9, 2021

   

   jeiea

   on Mar 9, 2021

   Last edited by jeiea

   Author

   More actions

   I can't sure whether it's really same issue. I can move editor, open command pallette, close editor by keyboard in release note page. microsoft/vscode#104329 seems to be reproduced in windows, but I don't know that is same to macos.
7. DanTup commented on Mar 9, 2021

   

   DanTup

   on Mar 9, 2021

   Contributor

   More actions

   @jacob314 I made this work with some comments from the linked issues. Usually VS Code handles keypresses for webviews and passes them up to VS Code. When using an iframe, this doesn't work, so the keypress needs to be passed up from the iframe to the parent frame. Due to CORS restrictions, this has to be done via postMessage.

   So if I put this into the DevTools index.html:

   document.addEventListener('keydown', (e) => {
       const data = {
           altKey: e.altKey,
           code: e.code,
           ctrlKey: e.ctrlKey,
           isComposing: e.isComposing,
           key: e.key,
           location: e.location,
           metaKey: e.metaKey,
           repeat: e.repeat,
           shiftKey: e.shiftKey
       }
       window.parent.postMessage({ command: 'keydown', data: data }, '*');
   });

   And then this into the HTML chunk Dart-Code renders with the iframe:

   window.addEventListener('message', (event) => {
   	const message = event.data;
   	switch (message.command) {
   		// snip
   		case "keydown":
   			window.dispatchEvent(new KeyboardEvent('keydown', message.data));
   			break;
   	}
   });

   This appears to resolve the issue. Is it reasonable to commit that into DevTools? (note DevTools can only be hosted inside iframes if the server was started with --allow-embed).
8. jacob314 commented on Mar 9, 2021

   

   jacob314

   on Mar 9, 2021

   Contributor

   More actions

   I have some security concerns with that. To make it safer can you restrict what is dispatched so not all keyboard events are dispatched and can you only make it apply if a valid vm service url was passed in to the iframe? Otherwise someone could possibly use this to snoop on how a user interacted with devtools by adding the iframe to a malicious webpage.
9. DanTup

   added 2 commits that reference this issue on Apr 7, 2021

   Support passing keypresses up to IDEs to enable shortcut keys when em…

   ...

   This issue will close once commit 918bd73 is merged into the 'master' branch.

   918bd73

   Handle keypresses from embedded DevTools iframes

   ...

   This issue will close once commit a1eb24a is merged into the 'master' branch.

   a1eb24a
10. DanTup

    closed this as completedin #2872on Apr 20, 2021
11. DanTup

    added a commit that references this issue on Apr 20, 2021

    Support passing keypresses up to IDEs to enable shortcut keys when em…

    ...

    This issue will close once commit 81357f8 is merged into the 'master' branch.

    81357f8
12. DanTup

    modified the milestones: On Deck, M28 on Apr 20, 2021
13. DanTup commented on Apr 20, 2021

    

    DanTup

    on Apr 20, 2021

    Contributor

    More actions

    This fix required a change in both the VS Code extension and DevTools, so will show up only after both have been released.