On Wed, Jul 1, 2020 at 8:28 AM Thiemo Kreuz thiemo.kreuz@wikimedia.de wrote:
- 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