Ensure that Javascript doesn't change the DOM after page render without user interaction

[alaroia-cfa]

Honeycrisp components, such as reveals, accordions, and file upload buttons, are modified by Javascript after a page is rendered. This causes layout jank, in which the page is rendered and then after a brief moment changes it's visible contents, modifying the layout. It also causes flakiness in javascript-enabled feature specs that access these pages.

Current setup

Javascript, on page load, adds classes to DOM elements, causing existing CSS to hide those elements.

Proposed setup

A minimal amount of javascript is executed before the page finishes loading, which adds a special "js-enabled" class to the body or html element (because they will exist before the page finishes loading), and the CSS to hide elements will be scoped within ".js-enabled".

Sample HTML & JS: https://jsbin.com/nequnegaci/1/edit?html,output

[alaroia-cfa]

When I have an accordion open, then I navigate away from the page, and I click back in the browser, I expect the accordion to remain open. However, with Honeycrisp, it is auto-closed.

Here's an animated GIF of the behavior right now.

I believe that if this issue (#282) is resolved, I will get my expected behavior. I believe (untested) that the current behavior of closing the accordion is due to Honeycrisp hooking the browser's navigation (loading) when I click back and modifying the DOM. If Honeycrisp only modified the DOM on user interaction, then the back-forward cache would ensure the expanded accordion would stay expanded.