Repository: vscode
Issue: Web: Mobile Safari support
Labels: feature-request,web,ios-ipados,github-codespaces,ghcs-in-progress

This is a meta issue for our Safari (on iOS/iPadOS) support ([issue list](https://github.com/microsoft/vscode/issues?utf8=✓&q=is%3Aopen+is%3Aissue+label%3Asafari+label%3Aios+)) and this can be used to track the limitations and gaps we see today on mobile / touch screens.

**_updated Oct 2020._**

To enable users to use the Web UI in Safari on iOS for some basic work, we need to fix the following blocking issues

**Blockers**

* [ ] :hand: Missing `wheel` event https://github.com/microsoft/vscode/issues/106232 (upstream https://bugs.webkit.org/show_bug.cgi?id=210071 )
* [ ] Blockers on Safari desktop https://github.com/microsoft/vscode/issues/108637
* [ ] :runner: Workbench size inconsistent with visual viewport https://github.com/microsoft/vscode/issues/108267
* [ ] :runner: Port forwarding blocked https://github.com/MicrosoftDocs/vscodespaces/issues/728
  * No authentication flow as it can't open a new window
  * can not debug extensions
* [ ] UI affordance fallback for `cursor: ` styles https://github.com/microsoft/vscode/issues/108832
* [ ] Drag & Drop views/panels with mouse events https://dvcs.w3.org/hg/d4e/raw-file/tip/mouse-event-test.html

**Bugs**
* [ ] Touch/pointers not working (Settings Editor dropdown, view header, etc) https://github.com/microsoft/vscode/issues?q=is%3Aopen+label%3Atouch%2Fpointer+label%3Aios
* [ ] MISC https://github.com/microsoft/vscode/issues?q=is%3Aopen+label%3Aios+label%3Abug+-label%3Atouch%2Fpointer

---

With above items finished, users can use the Web UI for basic tasks if they us an external keyboard and mouse. However if you are not using an external keyboard with Escape and Function keys, or a mouse/pointer device, you can easily find the Web UI **difficult** to use and you can't be as productive as on the desktop. Major **blockers** are:

* Escape. Escape key is the major key for hiding UI elements in the workbench. For native elements, iOS may know how to map `Ctrl+[` to behave the same as Escape, however for our keybinding service, we always check keyboard event, which doesn't understand `Ctrl+[` at all.
  * [ ] To mimic the *native* smart keyboard experience, we can build a Keymap extension, which remaps `Ctrl+[` to commands which used to be triggered by `Escape`.
* Function keys. Without Fn keys, quite a lot of our core features are not highly accessible: Command Palette (F1), Rename (F2), Next Match (F3), Next Reference (F4), Debug (F5, F9, F10, F11), Next Problem (F8), Go to Definition/Impl (F12), etc.
* Hover is missing. Definition/Implementation hovers in editor, View title bar actions, List View quick actions, etc rely on Hover events triggered from mouse move. They are hidden by default and only visible and actionable when hover happens (or sometimes even worse, hover with keyboard shortcuts). On a touch screen, these features are not accessible.
* Debug
  * `window.open` only works if it's triggered from user click and synchronous. For debugging VS Code extension in the Web, it's silently broken as the window will not be opened without any error message.
* Most UI elements are small. This is exacerbated by even the smallest mouse cursor being a rather large circle.
  * Button/Checkbox/ActionbarItem are 10-20 px wide. It requires users to be very precise while acting on them.
  * Default list view height is small and not customizable.
  * Editor gutter consists of glyph area (we put breakpoints on it), line number and margin (we put folding icon on it) and users can easily mis-click/touch anyone of them.
  * Sashes are thin and no indicator for clicking or dragging