• 
      

    Rework much of the Review Board UI, and move to jQuery

    Review Request #659 — Created Dec. 3, 2008 and submitted — Latest diff uploaded

    Information

    Review Board SVN (deprecated)
    trunk
    122, 248, 271, 297, 391, 392, 401, 411, 452, 497, 498, 523, 525, 555, 588, 589, 600, 615, 624, 632, 648, 656, 667, 696, 737, 779

    Reviewers

    This introduces many significant UI changes to Review Board. The initial
    goal was to migrate our UI from YUI/YUI-Ext to jQuery. Along the way, I
    took the opportunity to fix a number of usability issues discovered over
    the past year or two.
    
    The comment/review dialog has been split up and simplified. The old
    dialog was confusing to many users for a number of reasons. They tried
    using it to reply to existing comments, they would sometimes lose
    comments because they assumed publishing a review would preserve them,
    and the dialog was just bulky and would scroll on click if it didn't fit
    on the page (due to a YUI-Ext bug).
    
    Now we have a simple comment dialog for both the diff viewer and
    screenshot dialogs. The green portion representing the new draft comment
    provides a single text area for the comment, and Save and Cancel
    buttons. To the left is a list of existing comments for that region (if
    any). Each item contains "View" and "Reply" buttons. Clicking these will
    jump to the reviews page, and in the case of "Reply," a new comment will
    be added below the comment being replied to.
    
    The review portion of the dialog is now its own entity. When clicking on
    "Review" on the review request details box, or when clicking "Edit
    Review" on the new draft banner (which is docked to the top of a review request
    page when there's a pending review), a modal box will pop up containing
    the review.
    
    This new box is a vast improvement over the old review dialog. Like
    actual reviews, the screenshot and diff fragments are displayed inline,
    progressively loaded, and the comments tied to those can be editted
    straight from that page. Users can make changes and decide to save them,
    publish, discard, or cancel what they've changed.
    
    It's harder to lose comments now. When there's a pending comment on a
    page and the user attempts to move away from the page, a confirmation
    dialog will appear. This currently happens on the diff viewer and
    screenshot dialogs only. The functionality will be added in a later
    change to reviews and the review form.
    
    There's more feedback now when making changes. When saving or deleting a
    comment, little bubbles briefly float up near the comment flag or
    region and let the user know what just happened.
    
    Hovering over a comment flag or a comment region now shows a little
    tooltip with the comments. It's brief. No author information is shown,
    just the text. Clicking the area provides that additional information.
    
    We provide slightly better error feedback now. The error banners at the
    top of the page now contain any debug information, such as a backtrace,
    when something goes wrong. In DEBUG=True installs, this information is
    very valuable. Certainly makes debugging Review Board itself much
    easier.
    
    Review request actions ("Set Submitted", "Add Screenshot", etc.) have
    been moved to the top of the review request box where they're more
    easily seen. "Set Submitted," "Discard" and "Delete" are no longer
    top-level actions. They now exist in a "Close" drop-down menu. This
    saves space and groups them together under one concept -- you're in some
    way closing a review request out.
    
    On top of all this, 25 bugs have been fixed.
    Tested on Firefox 3, and test most of this on IE6/7 and Opera. Some things have changed since my last non-Firefox testing, and I'll be doing more of that before this goes in to make sure it all works. Will be slowly building up some unit tests for this, but it won't be ready right away.