Readers/Web/Dev notes/Zebra update

Challenges
We set out to update the visual appearance of Vector 2022. Changes were entirely cosmetic and meant to mainly address complaints about white-space.

Question: How do we build this new visual appearance while maintaining the old one?

Feature flagging is necessary, but not sufficient.

Strategy

 * 1) Create a new resourceLoader module called skins.vector.zebra.styles
 * 2) Copy over files that would be affected by the zebra update into the new module
 * 3) Scope the affected files in both the skins.vector.styles and skins.vector.zebra.styles module to the feature flag.

i.e. in skins.vector.styles/skin.less

@media screen { .vector-feature-zebra-design-disabled { @import './layouts/screen.less'; }        @import './components/PageTools.less'; }

i.e. in skins.vector.zebra.styles/skin.less

@media screen { .vector-feature-zebra-design-enabled { @import './layouts/screen.less'; }    }  In SkinVector2022.php, create a function called   which conditionally loads the zebra module if the feature flag is enabled. NOTE: When the feature flag is enabled, both the default style module AND the zebra module are loaded. The default style module contains files that are scoped AND NOT scoped to the feature flag. The zebra module contains ONLY files that are scoped to the feature flag.  At this point, we have created two semi-divergent codepaths. Files in zebra will diverge from file in the default module, but files that are unaffected by zebra will remain in the default style module and be loaded along-side Zebra.  

Style cannot be scoped with the feature-flagged class cleanly
We often rely on classes on the HTML element throughout our styles. These classes target different features or UI states, e.g. pinned/unpinned/full/narrow-width etc. By wrapping the imports in a feature flag class, i.e.  or   all of the existing HTML selector in those files need to be modified.