User Story
As a reader, I would like to have a persistent state for my sidebar, so that I don't have to change the state every time I navigate to a new article.
Background
In T246427 we discussed making the sidebar persist for logged out users. The only feasible solutions were 1) inline JavaScript with localStorage (see implementation notes in this task) 2) revisiting Wikimedia cache infrastructure and 3) rebuilding Vector as a single page app.
Generally, we advise against any sort of inline JS in Wikimedia products, as JS is executed on all browsers (even incompatible unsupported browsers), JS errors there can break site functionality and due to our caching infrastructure are difficult to rectify.
We instead decided to make this logged in only as part of T255727.
Inline JS solution (for prosperity)
The following patch demonstrates the localStorage and inline JS approach:
https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/606436/19/includes/VectorTemplate.php
Technical approach
Prerequisite: T257075: Simplify the checkboxHack API
- The setting is stored client-side in the browser's LocalStorage service.
- The setting is loaded right before the sidebar is rendered, thus avoiding an initial flicker if the sidebar would be shown and then immediately hidden.
- The sidebar is rendered and the setting loaded after the content is loaded, therefore the initial render of the above-the-fold content (first page) is not delayed by initializing the sidebar. That delay is barely measurable anyway.
- The state saving JavaScript is loaded asynchronously, typically after the sidebar is rendered. The sidebar can be toggled before that logic loads, but saving the state will be delayed until loading is done. This has no noticeable effect on the user experience unless the user very quickly (faster than the full load time) toggles the sidebar and reloads the page. This could be noticeable only on very slow connections and does not represent a beneficial use-case, therefore an accepted trade-off.