Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move syntax highlighting to web worker #11017

Merged
merged 2 commits into from
Apr 13, 2020
Merged

Move syntax highlighting to web worker #11017

merged 2 commits into from
Apr 13, 2020

Conversation

silverwind
Copy link
Member

@silverwind silverwind commented Apr 8, 2020

This should eliminate page freezes when loading big files/diff. highlightBlock is needed to preserve our existing HTML nodes when highlighting and for that, highlight.js needs access to the DOM API so I added a DOM implementation to make it work, which adds around 300kB to the output file size of the lazy-loaded highlight.js chunk.

@silverwind
Copy link
Member Author

It might be worth removing RequireHighlightJS from template context and let the decision be done in JS alone. I'm just not sure if it's going to break anything like here.

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Apr 8, 2020
@lunny lunny added the topic/ui Change the appearance of the Gitea UI label Apr 9, 2020
web_src/js/index.js Outdated Show resolved Hide resolved
@silverwind
Copy link
Member Author

silverwind commented Apr 9, 2020

Regarding removal of .RequireHighlightJS: I guess it cannot be done without breaking the example here which seems to piggy-back on the variable for detection of rendered Markdown.

@silverwind
Copy link
Member Author

silverwind commented Apr 9, 2020

Fixed a race condition that happened with multiple outstanding highlight requests by adding a index to the data submitted to the worker. This should work reliably as every call to highlight will instantiate their own worker (the chunk is still only downloaded once).

@silverwind silverwind changed the title Move code highlighting to web worker Move syntax highlighting to web worker Apr 10, 2020
@codecov-io
Copy link

Codecov Report

Merging #11017 into master will decrease coverage by 0.01%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master   #11017      +/-   ##
==========================================
- Coverage   43.43%   43.41%   -0.02%     
==========================================
  Files         597      597              
  Lines       84628    84628              
==========================================
- Hits        36754    36741      -13     
- Misses      43344    43352       +8     
- Partials     4530     4535       +5     
Impacted Files Coverage Δ
modules/indexer/stats/queue.go 62.50% <0.00%> (-18.75%) ⬇️
modules/indexer/stats/db.go 40.62% <0.00%> (-9.38%) ⬇️
modules/git/utils.go 65.67% <0.00%> (-4.48%) ⬇️
modules/git/command.go 86.95% <0.00%> (-2.61%) ⬇️
services/pull/check.go 51.21% <0.00%> (-1.83%) ⬇️
modules/git/repo.go 47.28% <0.00%> (-0.84%) ⬇️
services/pull/pull.go 34.70% <0.00%> (-0.30%) ⬇️
modules/queue/unique_queue_disk_channel.go 55.76% <0.00%> (+1.92%) ⬆️
models/unit.go 44.44% <0.00%> (+2.46%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4ec7a65...5e010a9. Read the comment docs.

@GiteaBot GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Apr 10, 2020
@lafriks lafriks added this to the 1.12.0 milestone Apr 10, 2020
@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Apr 10, 2020
This should eliminate page freezes when loading big files/diff.
`highlightBlock` is needed to preserve existing nodes when highlighting
and for that, highlight.js needs access to the DOM API so I added a DOM
implementation to make it work, which adds around 300kB to the output
file size of the lazy-loaded `highlight.js`.
@lafriks
Copy link
Member

lafriks commented Apr 13, 2020

Make lgtm work

@lafriks lafriks merged commit 27e3cdd into go-gitea:master Apr 13, 2020
@silverwind silverwind deleted the ww branch April 13, 2020 14:54
ydelafollye pushed a commit to ydelafollye/gitea that referenced this pull request Jul 31, 2020
This should eliminate page freezes when loading big files/diff.
`highlightBlock` is needed to preserve existing nodes when highlighting
and for that, highlight.js needs access to the DOM API so I added a DOM
implementation to make it work, which adds around 300kB to the output
file size of the lazy-loaded `highlight.js`.

Co-authored-by: Lauris BH <[email protected]>
@go-gitea go-gitea locked and limited conversation to collaborators Nov 24, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. topic/ui Change the appearance of the Gitea UI
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants