Fix the Show Extra Whitespace button for diffs and rewrite button building.
Review Request #12711 — Created Nov. 3, 2022 and submitted — Latest diff uploaded
The "Show extra whitespace" button in the diff viewer was defaulting to
the wrong state. This should be bound by a cookie, but that was being
ignored, causing it to claim that showing extra whitespace was off by
default. In fact, clicking this would toggle the cookie's value, easily
causing mismatches.This could have been an easy hacky fix, but in reality, our buttons here
are pretty bad. Most buttons had two versions in the template: An active
state button, and an inactive state button. We'd use CSS to show or hide
the appropriate button, but this meant that under the hood there were
still two buttons being exchanged.This change cleans all this up, helping future-proof this and improving
both usability and accessibility. The template no longer hard-codes any
buttons. Instead, these are built via JavaScript, based on state passed
down to the page's model.Each conceptual button has only a single actual button on the page (as
a<button>
and not an<a>
tag). The properties of that button are
modified when clicked. When registering, the active/inactive text and
a description (for tooltips and screen readers) are added. The callback
is added at the same time. This keeps each button manageable. It also
theoretically enables extensions to add custom buttons (though this
won't be formally documented).While this change is being made for Review Board 4, a backport to 3 will
be in the works for a customer affected by this issue.
Tested the functionality of all buttons, ensuring they reflected cookie
state.Verified the buttons still look the same (in terms of presentation) as
they did before.Unit tests passed.