On Wed, Jul 1, 2020 at 8:28 AM Thiemo Kreuz <thiemo.kreuz(a)wikimedia.de> wrote:
2. I would love to apply some minor user CSS to the Gerrit UI, just as
I did with the old version:
https://meta.wikimedia.org/wiki/User:Thiemo_Kreuz_(WMDE)/userContent.css.
Unfortunately the new UI heavily uses "shadow DOM", which means no
matter what CSS rules I introduce, the Gerrit UI just ignores it.
There must be a way. Please help.
I wasted my time so you don't have to! I too wanted to apply some
visual changes to the Gerrit 3.x UI. I ended up with what I know is a
horribly inefficient, but working!, GreaseMonkey script which scans
the DOM and injects CSS into each shadow DOM object it finds. You can
find my code for this at
<https://github.com/bd808/userscripts/blob/gh-pages/wmfgerrit.user.js>.
Basically the code I put together walks the initial DOM checking every
element to see if it has a shadow DOM component, if it does then the
script will 1) inject my style sheet into that DOM, 2) check every
element in that DOM for more shadow DOM nodes to "fix", and finally 3)
setup a MutationObserver to be alerted for any new DOM insertions and
check them for shadow DOM presence. I'm sure there are more elegant
implementations (my javascript fu is not the best), but this one is
working for now and does not seem to cause any significant load issues
in my browser.
Bryan
--
Bryan Davis Technical Engagement Wikimedia Foundation
Principal Software Engineer Boise, ID USA
[[m:User:BDavis_(WMF)]] irc: bd808