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
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.