We are building a web app for web developers. For pros. For power users. For you. And it has tabs.
Instinctively, I want to close them with CTRL + W. Not just want - I did several times. Yeah, I was annoyed!
Well, it’s easy, right?
document.addEventListener('keydown', function(e) {
if ((e.ctrlKey || e.metaKey) && e.key === 'w') {
e.preventDefault();
CloseComponentTab();
}
});
Were you as naive as me?
You can not take away control from the browser acting on these basic UI shortcuts and other events.
So - why? And should you be able to?
Can I prevent web browser closing tab on CTRL/CMD + W?
No, you can not. Try the code above and you’ll see 😉
The argument against taking control over UI shortcuts
The low hanging fruit is safety of users.
The internet is an open space (who else does not believe it?), therefore there is a huge amount of bad actors.
Do you know that in the past, you could not close a browser tab while there was an alert hanging there? And do you know why it changed? Because there were websites putting on alerts in loop just to keep you looking at the ads or other offers. Or they thought they are just funny - and it was the first 3 alerts the first time ever, then it was just abusive.
And we can talk about other practices:
- making invisible Facebook buttons under mouse cursor;
- making automated clicks to subscribe buttons;
- pushing unrelated, “real” content through iframes;
I guarantee you that before you find a legitimate use, all these are going to be preventing users close the tab window easily for months.
One more - consistency of UI
Imagine your own frustration - you are used to work with browser in a certain way, the keyboard way, ctrl+W, ctrl+T etc. Suddenly - nothing happens.
WTF is this? What broke? It works on other tabs fine. Ooooooh it’s this shit!
I feel like this is enough to say 😉
Why do we want to control CTRL/CMD + W?
Web apps & web games - those are the primary applicants for controlling the basic UI shortcuts.
Your web app can have its own tabs.
Your web game wants to likely have a combination of CTRL (often for crouch) and W (usually moving forward or up).
For Grace Engine, it would do sooooo much - the ease of control, more consistent control with other tools utilizing tabs. CTRL+W to close a Data structure tab, CTRL + TAB for moving among the tabs, sounds perfect!
Dare we dream about such future?
I think so. There is a lot to figure out to keep the web safe and I am sure it’s not too high priority, but it’s not an unsolvable problem.
We may end up with some confirmation dialog, which would be a cool solution. Your web app asks for a permission to control basic UI web browser shortcuts and after user confirms - let’s you e.preventDefault();
Other option could be to allow capturing these shortcuts in installed PWAs. Oooh, man, PWAs, I still don’t know how to feel about those…
I was focusing on CTRL/CMD + W - it’s one that comes to mind most often, but it’s about all like CTRL/CMD + T, CTRL/CMD + N, CTRL/CMD + TAB and others.
In conclusion
In certain situations, I’d love to see it. But in most others - I am veeeery glad we don’t have this option. I am sure web browser makers will get to this one day and figure out a beautiful solution accommodating web apps and games without allowing spammers causing problems. When the day comes, who knows. But until then, I am sure we can live without it - we do and Grace Engine prospers.
If a young developer reads this - yes, it’s a desktop thing, they are still highly relevant 😊
Good luck with your web apps!