• 
      

    Fix several visual and layout-related issues with hybrid text fields.

    Review Request #6547 — Created Nov. 1, 2014 and submitted — Latest diff uploaded

    Information

    Review Board
    release-2.0.x
    e789639...

    Reviewers

    The review request page had some layout issues when it came to the new
    hybrid text fields using TextEditorView. The textarea and CodeMirror
    widgets didn't have consistent heights (especially on Firefox), and
    shifted slightly when switching between modes. Even worse, a textarea's
    height was too short, with logic conflicts between the review request
    page's layout code and the autoSizeTextArea, causing all sorts of
    problems with typing.

    This code has been largely reworked to get cross-browser consistency.

    First, the styles have been updated in order to fix some layout
    jumpiness and inconsistencies. TextEditorView now owns the margins,
    instead of the actual editable fields, which helps a lot with
    calculations.

    All editable fields in the 'main' fieldset in the review request page
    are now wrapped in a div that can be used as the base for calculations.

    TextEditorView's plain text mode's setSize() implementation now
    understands null value and 'auto', which the layout code required.
    Resize events are also emitted when switching modes, allowing the code
    to be layed out again.

    One major cause of problems on Firefox is that position().top would
    return floating point values (like 150.0000000123) which, despite the
    fact that they were barely larger than their integer equivalents,
    wrecked havoc on the layout on Firefox, causing major height
    inconsistencies. We now round these up to the nearest integer.

    To prevent some infinite loops and other issues during layout, we now
    ignore any layout attempts when in the middle of redoing a layout, which
    was very important when dealing with the plain text editor.

    These all help to create a consistent and smooth feel across major
    browsers, regardless of the text mode.

    The following tests were performed on both Chrome and Firefox.

    Tested initial Markdown and plain text fields, and switching between modes.
    Layout looked correct in all cases in all fields.

    I checked the Description field, and I checked with the last field
    on a review request (which has its own logic, intending to have it take up
    any available height). This was tested with pages where there was nothing
    below that field (like a mostly blank review request), and ones where there
    were things below it (file attachments).

    Tested that the layout worked when opening the last field both when the text
    was taking up available height (in which case the buttons would appear below
    current content, stretching the review request box), or when there was
    available height remaining (in which case the box stayed the same height and
    the editable area made room for the buttons). This worked on both Markdown
    and plain text modes.

    Tested that typing in Markdown or plain text fields didn't cause any visual
    shifts in the height or position of the boxes.

    Tested the change description box in both modes and switching modes.

    Tested the comment dialog and saw that things looked correct regardless of
    mode, and when switching modes.