• 
      
    Fish Trophy

    chipx86 got a fish trophy!

    Fish Trophy

    Improve performance and visuals when resizing the diff viewer window.

    Review Request #8888 — Created April 7, 2017 and submitted — Latest diff uploaded

    Information

    Review Board
    release-2.5.x
    e27eb38...

    Reviewers

    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.

    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.