The playground is widely used, both by newcomers to Rust and experienced developers, and in conversations and issues on the repo we can see it does things well, and some things we can still improve. In particular, there is a will and a need to add more features, better support existing and new contexts, etc. However, this can’t easily be done in the current UI, where space is not readily available.
We needed to tweak the header above the editor:
- to be more usable on narrow screens: for example, when having 2 playgrounds side by side for comparisons, or on mobile devices (at least for viewing code, more so than for typing code on a phone per se). The existing header is already too wide for those use cases.
- if we could “hide” the less common actions, it would make the UI more usable for newcomers, at a potential cost for more experienced users.
- to allow us to add features in the future: there are open issues and PRs blocked on this, adding them today would worsen the situation. For example, supporting backtraces, -C -Z or env flags, and soon enough: dealing with the 2018 edition.
- this space gain also has a cost in discoverability, however those kinds of problems happen only at the beginning, and can be mitigated with documentation, videos, inline help, etc. (i.e., it’s only a temporary state of affairs, fixed by training and habit forming).
So what we’ve worked on is try and move towards having dropdown menus/windows/popovers to conserve space. This would be a first cut, and we’d then improve on it to better support the broad range of uses (especially for experienced users as we’ll see later).
First, even though they are useful and used, emitting assembly, IRs and WASM are less common use cases, and just having them present has both a cost in space and time (it takes longer to find what you’re looking for when there are more options). So we propose having a dropdown with the different “build actions” one can do. At the same time, supporting today’s WASM use cases slightly better: automatically switching to Nightly instead of being disabled on other channels.
Then, a bit of reordering to keep related things closer to each other and we have the “Mode” and “Channel” selectors. This would be the most controversial change, it’s less common that they are changed for newcomers (than experienced users) but it’s still common. We have made multiple attempts at this and ended up with what we feel is a reasonable compromise. Having a dropdown helps with having more descriptive text for the options (hopefully helping newcomers, especially for our Channels, uncommon in other languages).
The rest of currently existing actions are now located on the right side of the screen, with the Tools and Config actions dropdowns.
To conclude, here are some examples of things we’ve thought about for the future and later revisions:
- being able to switch the default action in the “Build/Run/Test” button for one of the build/ASM/MIR/LLVM IR/WASM actions
- having shortcuts to each tool: some users use the playground a lot to format code before posting it elsewhere (GitHub comments, Stack Overflow, etc).
- add “advanced compilation options” to match power users’ needs, for example on-demand backtraces (/me waves at @withoutboats and “arbitrary” flags (even though with the space we could have more descriptive options for some flags, for example ones related to the 2018 edition).
- there’s space to add more tools, like the 2018 edition rustfix.
- some possible “adaptive behaviour”, e.g. showing more of the UI when there is space available, and collapsing it back when there is little.
We are at the point where we could make a PR right now, and to help with gathering feedback we’ve put a build of the UI here. This is just the UI part of the playground: there is no rustc backend, no servers or tools, links or sharing — the usual features won’t work. However the UI is live and allows taking it for a spin.
(We’d also like to thank, in no particular order, for their help and early feedback: grissess, june, danopia, eddyb, nox, eijebong, guiea_7, sleffy, osspial)