move semantic.dropdown.custom.js to webpack

[silverwind]

This moves the file to webpack. Given that the language selector is present on all pages, it doesn't really make sense to lazy-load it.

Also disabled a annoying linter rule which insisted that imports can not contain a file extension.

Fixes: #8971

[silverwind]

Both web_src/vendor/gitgraph.js and web_src/vendor/semantic.dropdown are actually customized versions, not vendored copies. I wonder whether it would be wiser to move them outside this vendor folder and add a comment to each about the customizations instead.

[codecov-io]

Codecov Report

Merging #9064 into master will increase coverage by <.01%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #9064      +/-   ##
==========================================
+ Coverage   41.11%   41.12%   +<.01%     
==========================================
  Files         547      547              
  Lines       71614    71614              
==========================================
+ Hits        29447    29452       +5     
+ Misses      38442    38435       -7     
- Partials     3725     3727       +2

Impacted Files	Coverage Δ
modules/migrations/migrate.go	23.78% <0%> (-1.63%)	⬇️
modules/migrations/gitea.go	8.82% <0%> (-0.64%)	⬇️
models/repo.go	45.18% <0%> (-0.05%)	⬇️
models/gpg_key.go	55.59% <0%> (+0.55%)	⬆️
models/error.go	33.86% <0%> (+1.18%)	⬆️
modules/task/migrate.go	28.94% <0%> (+3.94%)	⬆️

---

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 f0aaffe...566931f. Read the comment docs.

[lunny]

/public/js/index.js will be increased from 58KB to 107KB after this PR. Is this necessary?

[lunny]

Don't merge before we finished the discuss about the size increase.

[silverwind]

My understanding is that that file adds some a11y attributes to dropdown buttons (but not <select> style inputs). Notably, this includes the language selector in the footer.

I think the code in the file duplicates with code bundled in /vendor/plugins/semantic/semantic.min.js, so we probably load almost the same code twice which is very bad.

I do wonder if we can maybe do away with this duplication and just manually add the a11y attribute ourselfs after render, eliminating the duplication. Maybe @Jookia can comment. It was added on #8638.

[Jookia]

No, it requires changes to Semantic UI's code which is why it's duplicated.

[silverwind]

You don't think we can just tack on a few aria-* attributes and get most of the features?

Another alternative may be to do a custom build of semantic JS with those changes built in.

[Jookia]

No. It (and future accessibility improvements) need to modify Semantic UI's code.
The simplest solution would be to just unminify Semantic UI's code and merge the accessibility changes in and minify that using webpack. This would also allow clear diffing with upstream.

[silverwind]

Hmm that sounds like a plan. Could load semantic's JS from npm and apply our changes via https://github.com/ds300/patch-package.

[silverwind]

Actually, semantic-ui package is broken on Node.js 12 and higher, it's not an option to add it as a dependency. Maybe if we switch to https://github.com/fomantic/Fomantic-UI.

[silverwind]

@lunny regarding the size concern: we already load the unminified version at over 100kB right before index.js (which I think is a blocking load), so strictly speaking, this is a improvement in bundle size. We should decide later what we do with semantic-ui, it will not be easy.

[Jookia]

You can just copy in the unminified semantic.js from upstream's release without going through node

[silverwind]

This one? https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.js

Do you by change have a .patch against it?

[Jookia]

Yes, that one- but at the revision v2.1.8 (or whatever Semantic-UI we're using)
And no, but all you have to do is splice in the semantic.dropdown.js code as the semantic.js contains it verbatim

[silverwind]

Ok, I will attempt that later, it should not hinder this PR.

[silverwind]

Rebased and reorganized files as mentioned in #9064 (comment). No functional changes, only comment additions.

[zeripath]

@silverwind I think it's possible to rebase on to fomantic-ui but there are a few subtle changes that have been made that would require someone with more skill than me to fix.

If we were to base on fomantic we could even go as far as building on their less with themes etc and this drop the !important from our less...

[silverwind]

@lunny care to unblock this? See my response #9064 (comment).

My point is that this change is a overall net reduction of JS size by around 50kB because we currently load semantic.dropdown.custom.js in a (to my understanding) blocking manner before index.js.

[silverwind]

@zeripath @Jookia ideally we could upstream the a11y changes into fomantic-ui and eventually switch to that.

[silverwind]

(If someone could grant me job restart permissions on drone, that'd be great)

[silverwind]

Ready to merge.