Fixed some visual issues with the chunk highlighter and diff margins.

Review Request #4502 — Created Aug. 28, 2013 and submitted — Latest diff uploaded

Information

Review Board
master

Reviewers

Fixed some visual issues with the chunk highlighter and diff margins.

Upon loading the diff viewer, the chunk highlighter would appear as a
little square in the bottom-left of the page, taking up space. This was
caused by an initial highlight call on the diff_index, which it wasn't
really able to highlight, so it fell back to being in a default
position. We no longer try to highlight nothing.

When it was highlighting, it wouldn't track the element it was supposed
to highlight if elements above it changed size. This was particularly
noticeable with image diffs. The highlighter would stay in its prior
position.

This was due to the highlighter living in the #diffs element, but now it
lives in the .diff-container. To make this work, I had to separate out
the rules and responsibilities of diff-container into diff-container and
diff-box elements.

While here, I fixed the margins between diffs so they're consistent
throughout the page.
Tested an initial diff load, and saw that it wasn't appearing as a small
black box in the bottom-left. This had the side-effect of triggering the
diff code to do the right thing and position the highlighter over the first
diff, as it should have before.

Tested resizing elements above the highlighter, and saw it track its target
element correctly.

Verified in Chrome and Firefox that the style still looks correct everywhere.