Based on the task SPIKE Investigate feasibility of incorporating Zebra refactors into default Vector styles, we developed a plan for merging the Zebra module into the default Vector CSS. By merging these two modules, we'll increase code-quality and minimize the differences between the Zebra design and the default design. Minimizing these differences might make for a better AB test in the future, because the code differences between the test/control versions will be much smaller than during the first AB test.
Goals
- Increase maintainability and code-quality of Vector 2022
- Make it easier to re-run the Zebra AB test in the future by minimizing the differences between the Zebra module and the default styles.
Plan
- 1.) https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/958516 Update Zebra to use the anon pref classes for the TOC ()
- 2.) T323141. This fixes a Zebra bug where the TOC can overlap with the footer. The solution described in that ticket still works, and its something we should do either way, as it also addresses an existing accessibility issue by improving the source order. The solution however does involve cached HTML changes
- 3.) T340571 Zebra: No-js pinned TOC on small viewports doesnt work patch ready
- 4.) T347638 Update Zebra to match the preZebra styles. This shouldn't be too difficult, but the size of the changes will also depend on which (if any) changes from Zebra can be kept. POC Patch
- 5.) T347711 We can now turn on the zebra flag in some wikis to test
- 6.) T347712 Lastly, we will need to eventually remove the CSS fork and make the new Zebra styles the default. This is essentially what we were planning to do originally anyway. This step is changes many files and should be reviewed carefully. It requires selectors on the HTML element to be updated, i.e. removing & from &.vector-feature-toc-pinned-enabled. We also should carefully review the mixins and variables after the merge.