• 
      

    Rewrite the diff complexity icon to output SVGs.

    Review Request #13741 — Created April 17, 2024 and submitted — Latest diff uploaded

    Information

    Review Board
    release-7.x

    Reviewers

    The diff complexity icon, shown in the diff viewer's file index and in
    the Review Request Updated boxes, has historically used jquery-flot to
    do the rendering. This rendered to a canvas, had a white stroke area,
    and did not scale well. It was also not accessible, and not easy to
    style. It was a non-starter for dark mode.

    This change rewrites this entirely to output SVGs. We do this by hand,
    as bringing in a library like D3 at this stage would take some care as
    to not impact Power Pack.

    The code generates the segments, normalizes percentages to enforce
    minimums, and then generates SVG path data for each of the segment arcs.
    It calculates an outer radius and an inner radius, as we did with flot,
    and give us a graph that correctly shows an overview of the changes made
    to the file.

    It also comes with a new tooltip and accessibility information
    describing the number of changes to a file, and what types of changes
    were made. All the relevant numbers are included.

    Styling is done with CSS, giving us full control over light and dark
    mode styling.

    Tested a wide range of boundary conditions for the icon in Storybook,
    and compared to the original implementation in each (using a flag I
    had in development for triggering the original rendering logic).

    Compared against the old rendering for a number of test diffs. Aside
    from very minor differences (new color palette, very slight rendering
    changes), the appearance was the same.

    Tested in light and dark modes.

    Checked the accessibility tree.


    Commits

    Files