Fix broken in-page Chrome search

Created by: lguychard

Fixes #3160

I found while trying to build a minimal repro case for #3160 that what broke in-page Chrome search was displaying all tokenized <span> elements in a code line as inline-block. This was done to ensure that after-line decorations were displayed correctly (cf comment added in https://github.com/sourcegraph/sourcegraph/commit/7c74b041e5436e780b804c039f5d5949fae2ef17). It would cause the browser to stop considering the content of consecutive spans (eg. <span>Errors</span><span>.</span><span>New</span>) as part of the same string when running an in-page search.

This PR fixes it by wrapping each line's code spans in a <div>, and displaying the line-decoration-attachment-portal as a <div> as well. Both are set to display as inline-block, but individual tokenized spans keep their default display value, inline.

Created by: codecov[bot]

Codecov Report

Merging #4596 into master will decrease coverage by <.01%. The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #4596      +/-   ##
==========================================
- Coverage   47.39%   47.39%   -0.01%     
==========================================
  Files         722      722              
  Lines       43770    43772       +2     
  Branches     1752     1752              
==========================================
  Hits        20745    20745              
- Misses      21054    21055       +1     
- Partials     1971     1972       +1

Impacted Files	Coverage Δ
pkg/highlight/highlight.go	63.86% <100%> (+0.61%)
...d/frontend/internal/authz/bitbucketserver/store.go	74.82% <0%> (-1.4%)

Created by: felixfbecker

Do they have to be inline-block? I wonder if there is a simpler fix here. It seems pretty excessive to wrap every single token with another div, that basically doubles the amount of DOM nodes in our code viewer, which is the source for perf problems on large files.

Created by: lguychard

@felixfbecker just to be clear, this doesn't wrap every single token in a div, and it precisely avoids every single token being inline-block (which they used to be). All tokens contained in a line are wrapped in a single <div>, look at the diff on highlight_test.go for reference.

Created by: lguychard

Here are some before/after screenshots from my tests. Left side is status quo, right side has the fix:

• File with three lines

• File with two leading newlines

• File with two trailing newlines

• Line wrapping (note how the wrapping is actually more correct with this fix):

• Blame decorations, not wrapped

• Blame decorations, wrapped

• Blame + code coverage decorations

Created by: felixfbecker

@lguychard just to make sure I don't do duplicate work, did you try to play around with removing the display: inline-block?

Created by: lguychard

@felixfbecker yes, it interacts badly with after-line decorations.