• 
      

    Update the review request box for modern, CSS-driven layout.

    Review Request #13293 — Created Sept. 29, 2023 and submitted

    Information

    Review Board
    release-6.x

    Reviewers

    The review request box historically was built with floats and
    JavaScript-based layout. While this generally worked, we had an issue
    with the Testing Done box in 6.0 where its height could get capped to
    the lower bounds of the Details pane.

    A JavaScript workaround wasn't the solution. Moving to modern CSS-based
    layout methods was the way forward.

    The box is now built using our standard CSS Component style, and uses
    CSS Grid and Flexbox to manage the layout. This is faster, future-proof,
    and allows us to eliminate a lot of JavaScript.

    The old CSS was a bit of a mess, without a clear structure. We now have
    a specific container for the field panes, and a container for each pane.
    These are set up as grid areas, ensuring we can lay them out exactly as
    we want.

    There are no differences in layout, with the exception that the details
    pane now has a bit more breathing room, which is easier to spare on
    modern displays, and more necessary with the recent fixes to the display
    of inline editors.

    The review request boxes have also been updated to have ARIA labels.
    These are fairly generic right now, but should help with navigation
    nonetheless.

    Tested the review request page, diff viewer, review UIs for images,
    text files, and PDFs, making sure there were no regressions. These were
    checked on desktop and mobile.

    Summary ID
    Update the review request box for modern, CSS-driven layout.
    The review request box historically was built with floats and JavaScript-based layout. While this generally worked, we had an issue with the Testing Done box in 6.0 where its height could get capped to the lower bounds of the Details pane. A JavaScript workaround wasn't the solution. Moving to modern CSS-based layout methods was the way forward. The box is now built using our standard CSS Component style, and uses CSS Grid and Flexbox to manage the layout. This is faster, future-proof, and allows us to eliminate a lot of JavaScript. The old CSS was a bit of a mess, without a clear structure. We now have a specific container for the field panes, and a container for each pane. These are set up as grid areas, ensuring we can lay them out exactly as we want. There are no differences in layout, with the exception that the details pane now has a bit more breathing room, which is easier to spare on modern displays, and more necessary with the recent fixes to the display of inline editors. The review request boxes have also been updated to have ARIA labels. These are fairly generic right now, but should help with navigation nonetheless.
    95cfbcf607ab14a468c6eb799f843a08e94dfd8a

    Description From Last Updated

    Missing the rest of the description here.

    maubinmaubin

    I think "request" should be capitalized.

    daviddavid

    Same here.

    daviddavid
    maubin
    1. 
        
    2. Show all issues

      Missing the rest of the description here.

    3. 
        
    chipx86
    david
    1. 
        
    2. Show all issues

      I think "request" should be capitalized.

    3. Show all issues

      Same here.

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