Improve performance and visuals when resizing the diff viewer window.

Review Request #623 — Created May 5, 2017 and updated

guest2338
Review Board
429a11e...
demo
Resizing the diff viewer was not very smooth, and some UI elements would
stutter. The active chunk highlighter would sort of jump around a little
bit or lag behind when the chunks changed position or height. There was
also a horizontal scrollbar that would flicker on and off when resizing
the window smaller. Along with this, it was just a bit too slow to
resize.

Many of these problems were ordering issues in event processing and
style issues. We also just had some less-than-optimal logic in resize
handlers.

Resize handling is now driven primarily by the diff viewer page,
allowing some coordination to take place. Upon receiving a resize event
(or a layout is otherwise scheduled), the new _.throttleLayout() is
called. This makes use of requestAnimationFrame() to schedule the
function used to compute the new layout. If there are subsequent calls
to this before the new layout has been computed (which can happen during
resizes with very heavy pages), they'll be ignored, keeping us from
swamping the browser.

The layout handler tells each diff to update its layout, and then tells
the chunk highlighter to update. This ensures that any layout changes
from the diffs can be immediately reflected in the highlighter, and
prevents all this from constantly happening while resizing the page
(which caused resizes to be slow and events to accumulate).

The chunk highlighter's been optimized quite a bit. Some jQuery calls,
which are more expensive than needed for this work, have been replaced
with element attribute lookups, and the logic for what CSS to apply and
when has been reworked. The width is no longer set on resize. Instead,
we simply dock to the left and right of the container, allowing the
browser to handle that and preventing the horizontal scrollbars from
appearing.

Resize handlers are also more aware of vertical vs. horizontal window
sizes, preventing any work from occurring if the resize wouldn't result
in any changes.

Now that the orders are guaranteed, we can also remove the defer() for
the chunk highlighter, which allows the highlighter to smoothly appear
bound to the chunk as its position or height changes.

The result is much smoother resizing, improved logic, and simplified
code that's easier to reason about.

Testing Done:
Tested on Chrome, Firefox, and Safari. Resizing was noticeably improved
on all browsers, particularly on Firefox and Safari.

Profiled resizing diffs and switching chunks before and after.

Unit tests pass.

Reviewed at https://reviews.reviewboard.org/r/8888/


Description From Last Updated

nope

guest4177guest4177

Test

guest2338guest2338

this is an issue

guest1661guest1661

asfasfdas

guest8814guest8814

test

guest3371guest3371

good

guest1754guest1754

sdfsdfs

guest4007guest4007

what is defer doing here....

guest4661guest4661

Interesting. Don't know whats going on

guest527guest527

xxxx

guest1096guest1096

qqqqq

guest1096guest1096

Use concat

guest8527guest8527
guest2338
guest2338
  1. ok

  2. 
      
guest1096
guest1754
guest4007
guest3522
  1. Ship It!
  2. 
      
guest4177
guest4661
  1. 
      
    1. Hello this is a test...

  2. what is defer doing here....

  3. 
      
guest8527
guest8527
guest1716
  1. Ship It!
  2. 
      
guest1661
guest4394
guest4394
  1. very good

  2. 
      
guest7539
  1. Ship It!
  2. 
      
guest3371
guest7221
  1. Ship It!
  2. 
      
guest4455
  1. Ship It!
  2. 
      
guest8814
guest8814
  1. Ship It!
  2. 
      
guest1897
  1. 
      
  2. You IDIOT! resetState and updatePosition are still required here, and will pretty much blow up the production server.

    1. ... blow up the production server if you leave them out.

  3. 
      
guest527
  1. 
      
  2. Interesting. Don't know whats going on

  3. 
      
guest7055
  1. Ship It!
  2. 
      
guest7055
  1. Ship It!
  2. 
      
Loading...