SideBySide2: Chunk and comment padding cleanup
This is a large rewrite of the way padding is created to occupy
vertical space on the other side CM when a comment is inserted
or a region of lines are inserted, deleted, or unevenly replaced.
Since monospace fonts are used with no line wrapping, the height of
any given line is predictable. A diff chunk can be padded on the
opposite side simply by creating a <div style="height: Nem"/> element,
where N is the number of additional lines on the non-padded side.
To ensure underscores are visible an extra 1px padding-bottom is added
to every line. This used to be expressed as a fractional 0.11em, but
the fraction gets confused with any browser zoom level other than
100%. The padding on the opposite side includes an additional Npx of
padding-bottom to ensure it consumes the correct vertical height.
Scrolling works better with fixed height line padding. CM3 is able to
compute the height of each line widget before display, and the heights
do not change. The fixed height fixes a number of alignment glitches
that appeared during scrolling.
All comment widgets (PublishedBox and DraftBox) on a line of code are
now grouped together into a single uber-widget for CM3. Using a
single group widget simplifies the padding compution for the other
side. It also allows the border and drop shadow to be applied to the
entire group instead of per-comment, reducing the vertical space
required for 2 comments (e.g. reviewer note, author reply).
The group widget can also now be responsible for group operations like
ordering a DraftBox immediately after the PublishedBox it is replying
to, and opening/closing boxes within the group.
CommentManager now tracks all published and draft comments using the
Gerrit server format, which is 1-based. The group widgets are held in
a pair of TreeMaps indexed by 1-based line number. This cleans up the
code and prepares it support searching for the next/previous comment
from the current cursor position.
Updating padding while growing the text area in a DraftBox has been
improved by running a timer in the background after the height has
been identified as changed. The timer reduces the time a user can
observe the sides unaligned if the mouse is dragged outside of the
bounds of the DraftBox and continues to grow the text area.
Horizontal scrolling of comments wider than the CM3 instance is now
done within the CommentBox instead of the line widget wrapper supplied
by CM3. This allows the text to always stay on the yellow comment
background, and keeps visible the author image, name, and date during
horizontal scrolling. It also simplifies the height computation by
always including the scrollbar height as part of getOffsetHeight()
without having to dig up the DOM to identify a parent element.
File level comments are now displayed in a group above line 1.
Placing them here allows the comment widgets to be smoothly scrolled
as part of the CM3, instead of suddenly disappearing when headers are
hidden as the viewport moves further down the file. A consequence of
this placement is line 1 must be unhidden if it was skipped as common
on both sides. Placing file comments within the CM3 view simplifies a
lot of code, removing several special case conditions for editors
placed outside of a CM3. It also allows file comments to appear in
the side overview gutter, at the top of the page.
CommentInput was removed as it is redundant with CommentInfo. This
could be its own change, but was folded into this commit as many of
the regions that use CommentInput/CommentInfo were written anyway by
the file comment changes.
Change-Id: I8df8815a997adea8321085bbf9a69888176188cf
27 files changed
