This regression was caused by the combination of the unsafe generalization of a CSS selector and the lack of HTML -> CSS version binding:
- #p-personal selector (applied only to the PersonalMenu) generalized to .vectorMenu-default (patch 594601)
- .vectorMenu-default renamed to .vector-menu, thus further generalizing the selector, mixing the meanings of ALL menus and ONE kind of menu (personal or default or horizontal -- no consensus yet, how it should be named) (patch 595001)
- The confusing naming leads to the addition of .vector-menu to ALL menus in HTML, thus applying the PersonalMenu's CSS rules to every menu (patch 589395)
- Absolute positioning of .vector-menu is removed in this patch (patch 589395).
- The lack of HTML version -> CSS version binding in ResourceLoader causes the CSS from the previous week (train) to be served from cache with the new HTML on quickly regenerated pages - such as the Main Page - for up to 30 minutes (AFAICT), applying the absolute positioning of .vector-menu from the previous deployment to all menus, thus collapsing those onto the logo.
What can be learned:
- HTML -> CSS,JS version binding is very important
- to avoid the traps of inconsistent DOM, styling and code causing such incidents
- to spare the complexity of creating CSS, JS and HTML that works with the previous deployed HTML and CSS,JS, respectively.
- to spare the extra work of cross-testing old HTML with new CSS and vice versa (not done) and the management burden of removing selectors 2 weeks later
- I reckon this is currently a limitation of ResourceLoader, that would be solved by building assets pre-deploy or by forcing RL to build the required assets before the HTML is served.
- Consistency in refactoring avoids confusion. Extending the definition of a CSS selector (the set of elements matched) changes the meaning, leading to confusion, to such bugs. Newly added classes should be clearly defined and distinguished from existing classes, to avoid this.