Fix the Show Extra Whitespace button for diffs and rewrite button building.

Review Request #12711 — Created Nov. 2, 2022 and submitted

Information

Review Board
release-4.0.x

Reviewers

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.

Summary ID
Fix the Show Extra Whitespace button for diffs and rewrite button building.
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. 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.
b338332b0931c29d44b622159bc722cd3f6a5cdc
Description From Last Updated

Leftover debug code

daviddavid

Leftover debug code.

daviddavid

Do we want to suppress the default handler/bubbling?

daviddavid

We have a few places that do this same thing. Can you do a follow-up change to migrate those to …

daviddavid
david
  1. 
      
  2. Show all issues

    Leftover debug code

  3. Show all issues

    Leftover debug code.

    1. This is correct. Options must be provided.

  4. Show all issues

    Do we want to suppress the default handler/bubbling?

  5. reviewboard/static/rb/js/utils/urlUtils.es6.js (Diff revision 1)
     
     
     
     
    Show all issues

    We have a few places that do this same thing. Can you do a follow-up change to migrate those to use this?

  6. 
      
chipx86
david
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-4.0.x (4ea95e6)