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

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

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.

reviewbot
  1. Tool: Pyflakes
    Ignored Files:
        reviewboard/static/rb/css/reviews.less
        reviewboard/static/rb/js/ui/views/textEditorView.js
        reviewboard/templates/reviews/review_request_box.html
        reviewboard/static/rb/css/common.less
        reviewboard/static/rb/js/views/reviewRequestEditorView.js
    
    
    
    Tool: PEP8 Style Checker
    Ignored Files:
        reviewboard/static/rb/css/reviews.less
        reviewboard/static/rb/js/ui/views/textEditorView.js
        reviewboard/templates/reviews/review_request_box.html
        reviewboard/static/rb/css/common.less
        reviewboard/static/rb/js/views/reviewRequestEditorView.js
    
    
  2. 
      
david
  1. Ship It!

  2. 
      
chipx86
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to markdown-redesign (307c48f)
Loading...