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.

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

Web: Safari and Mobile Safari support #85254

rebornix opened this issue Nov 21, 2019 · 1 comment

Web: Safari and Mobile Safari support #85254

rebornix opened this issue Nov 21, 2019 · 1 comment


Copy link

@rebornix rebornix commented Nov 21, 2019

This is a meta issue for our mobile support (issue list) and this can be used to track the limitations and gaps we see today on mobile / touch screens.

To enable users to use the Web UI in Safari on iOS for some basic work, we need to fix the following blocking issues

  • Render workbench in visual viewport (to avoid being covered by on screen keyboard, or assistive editor)
  • Gesture (Tap, Scroll, Context Menu) handling
    • Editor
      • view lines
      • Color Picker
      • Context Menu
    • Settings Editor
    • Interactive Playground
  • Pointer Events. On touch screens, we need to listen to Pointer Events (for mouse, pen, and finger) instead of mouse events.
    • dom.EventType.CLICK listeners
    • dom.EventType.DBLCLICK listeners
    • dom.EventType.Mouse_* listeners

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
    • 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
  • Mouse is currently treated as Touch right now due to Safari bug #84856
@rebornix rebornix self-assigned this Nov 21, 2019
@rebornix rebornix added web ios labels Nov 21, 2019
@rebornix rebornix modified the milestones: Backlog, November 2019 Nov 21, 2019
@kieferrm kieferrm changed the title Web: mobile support Web: Safari and Mobile Safari support Nov 22, 2019
@kieferrm kieferrm mentioned this issue Nov 25, 2019
50 of 68 tasks complete
@rebornix rebornix mentioned this issue Dec 3, 2019
1 of 1 task complete

This comment has been minimized.

Copy link
Member Author

@rebornix rebornix commented Dec 3, 2019

Move this item to backlog as there are blockers that we want to track.

@rebornix rebornix modified the milestones: November 2019, Backlog Dec 3, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
1 participant
You can’t perform that action at this time.