Basically, whenever I edit firefox-profile-path/chrome/userChrome.css, I want firefox to automatically apply the file again. The only posts I found on this are old and not straightforward. I'm wondering what currently works.

all 6 comments

sorted by: hot top controversial new old
[–] 1 point 11 months ago (5 children)

The simple solution would be to do your edits using browser toolbox - that should get reloaded "live" while you edit it.

But if you truly want Firefox to reload the file while some external editor is modifying it then that's going to require some serious hackery. Like, writing you own custom functionality using autoconfig that would poll the filesystem for changes for userChrome.css and the reload it if file modification date changes. I donmt see why it wouldn't work, but it's pretty stupid if you ask me. More sensible would be to have a button which reloads the file when clicked - this would of course need to be created using autoconfig as well.

  • source
  • hideshow 5 child comments
  • [–] [S] 1 point 11 months ago (4 children)

    This is a script for automatically refreshing the file: https://gist.github.com/jscher2000/ad268422c3187dbcbc0d15216a3a8060

    Could I just plop it in as a <filename>.sys.mjs file with fx-autoconfig? https://github.com/MrOtherGuy/fx-autoconfig

  • source
  • parent
  • hideshow 4 child comments
  • [–] 1 point 11 months ago (3 children)

    Well you can, but it would only run (and thus reload) once very early on startup, which is probably not what you want.

    If you use fx-autoconfig, it also has a helper function for loading userChrome.css (or other stylesheets) that you can call like this: UC_API.Scripts.reloadStyleSheet()

    Still, the complex part is in figuring out when exactly you want to do the reloading. For example, you coud set it up so that it get reloaded when hitting some hotkey (Ctrl + F8 in this example):

    import { Scripts, Hotkeys } from "chrome://userchromejs/content/uc_api.sys.mjs";
    Hotkeys.define({
      id: "reload-userchrome",
      modifiers: "ctrl",
      key: "F8",
      command: () => {
        console.log("reloading...");
        Scripts.reloadStyleSheet()
        
      }
    }).autoAttach()
    

    Adding that as <filename>.sys.mjs should work (unless something else on your system is stealing the Ctrl+F8 shortcut). Note, even though the styles should get reloaded, the window might not re-render immediately - which may require you to move your mouse or do some other stuff before you see the changes.

  • source
  • parent
  • hideshow 3 child comments
  • [–] [S] 1 point 11 months ago* (2 children)
  • [–] 2 points 11 months ago (1 child)

    Sure, you can apply reloading like that if you want. But I would be careful when using that as .uc.mjs because if you don't tag that script with @onlyonce - and you have like 10 windows, then Firefox will reload userChrome.css once a second for each window so potentially 10 times a second. That could be quite a lot of cpu usage for constantly invalidating and computing the browser UI styles.

    Also, I don't think that function can handle the case where you use @import statements in your css.

  • source
  • parent
  • hideshow 1 child comment