Firefox Customs

2 readers

1 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Firefox

Rules

Posts must have flair!
Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 1 year ago

MODERATORS

[email protected]

Change the highlight color when inspecting an element and change the popup when right clicking a style sheet in the toolbox? (fedia.io)

submitted 5 months ago by [email protected] to c/[email protected]

4 comments fedilink hide all child comments

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!

you are viewing a single comment's thread
view the rest of the comments

[–] [email protected] 1 points 5 months ago (1 children)

I think I looked into this some time in the past and it turned out that to do this, you need to use autoconfig scripting to inject a stylesheet as an agent style. Then, you can use style like this:

@namespace url('http://www.w3.org/2000/svg');

#box-model-elements{
  --highlighter-box-content-color: hsl(297, 71%, 53%);
}

I'm limiting that style to only apply to svg elements by namespace, because otherwise the style will apply to all websites as well. But nonetheless, this would also set this custom property to all svg elements in any svg that has has that particular id. Not a huge deal, the point is simply that you need to do something to limit the scope the you want to apply changes to.

[–] [email protected] 1 points 5 months ago (1 children)

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.

[–] [email protected] 2 points 5 months ago (1 children)

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.

[–] [email protected] 1 points 5 months ago

Perfect!

Thanks a lot!!