MrOtherGuy

joined 1 year ago
[–] [email protected] 4 points 6 days ago

You can hide them with userContent.css - most of the devtools window stuff is styled via userContent.css not userChrome.css.

But there's a catch.

Browser toolbox is essentially a separate instance of Firefox, running in separate profile so your "normal" user css files don't apply to it. Thus, you need to first enable the toolbox profile to load it's own user css files and create them just like you do normally (toggle toolkit.legacyUserProfileCustomizations.stylesheets, create files in chrome/ folder etc.). The toolbox profile is stored inside the regular profile - in a directory chrome_debugger_profile.

To get to about:config of the toolbox profile you need to first open a new main-window for it - one way that works is to click the meatball menu at the top-right of the toolbox window, and select "Documentation..." - that will launch a new window using using the toolbox profile and then you can just open about:config and proceed as usual. Or you can just modify prefs.js of the toolbox profile directly while the toolbox is not running.

Anyway, after you have set up the toolbox window to load user css files, then just slap this to its userContent.css and restart the toolbox:

header.chrome-debug-toolbar{
  display: none !important;
}
[–] [email protected] 1 points 6 days ago* (last edited 6 days ago)

Yeah, !important doesn't affect inheritance in any way. It only means that this particular rule is to be used if there are multiple rules that would set that particular property for the element in question (unless there's some other more specific rule with !important tag as well). MDN lists property inheritance in the formal definition section. You can totally make background-color inherited though - like *{ background-color: inherit } (and then set the property to something else on the root element from which you would want to inherit from) but it would then either not apply if website set it to anything else for an element or override any other set value if you used !important tag.

One other thing worth noting is that I would not recommend the rules mentioned for userChrome.css to be used as is - at least on Windows they completely break Firefox startup - it fails to display any window if you do that. Instead you should add a [sessionrestored] selector to wait a bit before those rules are applied to main-window:

#main-window[sessionrestored], #tabbrowser-tabpanels{ background: transparent !important; }
[–] [email protected] 1 points 6 days ago (2 children)

Right, background-color is not an inherited property (compared to for example color (color of text) which is). But even if it were, inheritance is not "enforced" so if website css sets a backround-color specifically for that element then the inherited value would be lost anyway.

But the way you now describe it doesn't seem possible. There is not syntax to apply style rule to "just the innermost element". I think the closest would be to have everything else have fully transparent background, but the html root element have only partial transparency:

*{
  background: transparent !important;
}
html:root{
  background: #00000080 !important;
}

However, you will still face a problem; many websites draw graphics or images as a background-image so if you use the background shorthand property then those graphics will be effectively removed. On the other hand, if you instead set just background-color then parts might get opaque again because a website could be drawing even opaque backgrounds as background-image instead of background-color.

[–] [email protected] 1 points 6 days ago (4 children)

I think the answer depends on which elements exactly you want to make transparent. The page is a layered structure. The html root element is behind them all. Then body element is on top of that, the rest of the elements on top of body, etc.

So if you intend to have transparency all the way down, then you need to make sure that all the elements in that stack are transparent. If any single item in a stack has an opaque background then the transparency effect stops at that.

As an example, if you set background:transparent to just body but not the document root element, then body will indeed be transparent, but it does not matter because the root will still be opaque. Likewise, if root is made transparent, but there is any opaque layer on top of that, then only the parts of the root element that are not covered by that opaque layer will show up as transparent. If you have a glass table and put a sheet of paper on top of it, then you don't see through the part covered by the paper even though the table itself is transparent.

[–] [email protected] 2 points 1 week ago (6 children)

Yeah, I just figured the safest option would be to only set the actual document root element transparent - in practice I think it's possibly more likely that the <body> element has background set by the page - although the page might as well set both. So yes, it depends on the website.

[–] [email protected] 2 points 1 week ago (8 children)

I don't think I understand exactly what parts you want to make transparent, but this does work:

  1. set browser.tabs.allow_transparent_browser to true
  2. in userChrome.css add #main-window, #tabbrowser-tabpanels{ background: transparent !important; }
  3. in userContent.css add html:root{ background-color: transparent !important; }

The above would make window background, and the are behind web-content transparent as well as background of html documents - otherwise the background of browser area wouldn't show up anyway. Toolbars that have their own specified colors would still be colored - which might be opaque or not depending what theme you have selected.

[–] [email protected] 1 points 1 week ago

With prefs or CSS no, but there's been quite lot of other changes related to that, and I think there's a non-zero chance that some other change could get introduced that could be used to fix custom styling for urlbar.

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

You are almost certainly experiencing changed behavior from this bug

[–] [email protected] 3 points 2 weeks ago

Would be pretty idiotic to not close it, otherwise opening a bookmark would always require a second click to close the popup.

Anyways, you can go to about:config and set browser.bookmarks.openInTabClosesMenu to false - afterwards you can hold Ctrl (or just click the middle mouse button) while clicking a bookmark from such popup and the popup should stay open.

[–] [email protected] 12 points 1 month ago

Doesn't really sound like a company that I would want to do any business with then.

[–] [email protected] 1 points 1 month ago (1 children)

But if you’re using the built-in auto-updater (like people tend to do on Windows and macOS), then it happens automatically in the background, unless you tell the auto-updater to not update automatically.

Definitely does not work that way on my Windows 10 installation. When update is available, Firefox will have a "Restart to install updates" in menu button notification - but the files are not replaced on disk until you actually close (or restart) Firefox and thus Firefox continues to work normally.

What can happen though is that if you run another instance (ie. another profile) of Firefox while the first one has "staged" the update then that another instance can trigger the files to actually be replaced on disk but you would very deliberately do that.

[–] [email protected] 8 points 1 month ago (4 children)

Firefox shouldn't force you to restart and update like that unless something else, such as your package manager, has already replaced the executable files on your disk. In such a scenario Firefox doesn't have any option except to inform you to restart it (well I guess it could choose to crash). But the mechanism that forced the update is the package manager.

 

Hi! Just FYI folks, the plan going forward would be to build this community on Fedia instead: Right here https://fedia.io/m/FirefoxCSS

Thanks to federation, you can also participate in the community through lemmy if you want - though some features such as microblog or sidebar info won't be accessible via lemmy - for now at least. The link to access the community via lemmy world would be https://lemmy.world/c/[email protected]

See ya there!

3
submitted 1 year ago* (last edited 1 year ago) by [email protected] to c/[email protected]
 

Perhaps not fitting exactly for this community because it's about a website, but hey c'mon its customizing :) Apply via userContent.css or Stylus or something.

Only tested with "darkly-red" style that you can select from your user settings.

 

Let's have this post here also...

As a part of the front-end technical modernization the old xul box model is being replaced with modern flexbox all around the UI. Relevant bug 1820534

Previously, just about everything used display: -moz-box but in Firefox 113 the default display model was changed to modern display: flex instead.

What this means first-hand is that all legacy box model -related properties will not do anything anymore so things like -moz-box-ordinal-group, -moz-box-orient, -moz-box-direction, -moz-box-align, -moz-box-pack or -moz-box-flex won't have any effect.

The suggested way to deal with this is to just update your styles to use equivalent flexbox properties. Additionally, the old display: -moz-box is treated as invalid property value

Some examples of conversions:

  • display: -moz-box -> display: flex
  • -moz-box-ordinal-group: 0 -> order: -1
  • -moz-box-orient: vertical -> flex-direction: column
  • -moz-box-direction: reverse -> flex-direction: row-reverse
  • -moz-box-align: center -> align-content: center or align-items: center depending on what you are doing.
  • -moz-box-pack: start -> justify-content: flex-start or justify-items: flex-start
  • -moz-box-flex: 10 -> flex-grow: 10

Notes about order vs. -moz-box-ordinal-group: order supports negative values, whereas ordinal-group does not. Default value of order is 0 but default of ordinal-group is 1 so you might need to change what value to apply for it to have any effect.

Also, see this firefox-dev post for more information.

view more: next ›