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.