Hello! I was wondering how can I change the colors that appear when you inspect an element. They look like this: And also was wondering how can I change the popup that appears when you right click the style sheets in the style editor in the toolbox. It looks like this: https://imgur.com/a/S47spyg

Thanks!

  • Zetmah@fedia.ioOP
    1·
    3 months ago

    I see, this is for the highlighting, right?

    And for the popup it would be the same? The other popups in my toolbox do look like they are intended to, its just that one that doesn’t work.

    • MrOtherGuy@lemmy.worldM
      2·
      3 months ago

      Yeah, sorry I missed the question about the popup. Yes, you can change it, but it’s via userContent.css not userChrome. Could look like this:

      @-moz-document url("chrome://devtools/content/styleeditor/index.xhtml"){
  .menupopup-arrowscrollbox{
    background: #f00 !important;
  }
}

      Note that this only changes the popup that appears in style editor because the other parts of the toolbox are separate documents. Also, it only works for “normal” devtools but not for browser toolbox - to affect that you need to first set up userChrome.css for the toolbox profile, it’s literally a separate firefox profile stored inside its target profile in a chrome_debugger_profile directory.