Fails to toggle

[Fred-Vatin]

Firefox	OS	Extension
102.0	Win 10	1.2

This is how my userchrome starts. It works as intended.

@import url("./CSS/userChrome-tab-tweaks.css") screen;

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

@-moz-document url(chrome://browser/content/browser.xul),
	url(chrome://browser/content/browser.xhtml),
	url(chrome://browser/content/places/bookmarksSidebar.xhtml),
	url(chrome://browser/content/webext-panels.xhtml),
	url(chrome://browser/content/places/places.xhtml)
{
	/* Hide tab bar */
	:root[titlepreface="᠎"] #titlebar {
		visibility: collapse;
	}
/* And so on… */
}

For testing purpose, I added the :root[titlepreface="᠎"] on the first rule only. I copied this magic CSS selector from the addon. VScode shows me the invisible UTF-8 characters. So that’s not the problem.

The CSS file is encoded as UTF-8 (no bom).

I applied changes in addon, saved my userChromme.css and restart FF. But when I click the UC button, it notifies it applies the rule but nothing happens. Is it supposed to comment my userChrome ? because it doesn’t.

Did I do something wrong ?

[pbaykalov]

when you write following in a CSS selector:
selector1 selector2
it means that anything selector2 selects should be a descendant of at least something selector1 selects.

In your case I'm not sure about what the @-selectors are for. I have much simplier userChrome.css which only contains the rules on the top level and it works as intended.

Is it supposed to comment my userChrome ?

I do not understand your question. The extension only modifies the attribute of a window so that you can make your CSS depend on it.

[Fred-Vatin]

when you write following in a CSS selector: selector1 selector2 it means that anything selector2 selects should be a descendant of at least something selector1 selects.

In your case I'm not sure about what the @-selectors are for. I have much simplier userChrome.css which only contains the rules on the top level and it works as intended.

Is it supposed to comment my userChrome ?

I do not understand your question. The extension only modifies the attribute of a window so that you can make your CSS depend on it.

The @-selectors are good practice in userChrome.css to avoid side effects. You only select what you change. The thing is clicking the toggle button doesn’t change anything in the userChrome.css.

[pbaykalov]

You can try using browser console to see what's wrong.

The thing is clicking the toggle button doesn’t change anything in the userChrome.css.

Should it?

[Joolee]

The extension doesn't change your userchrome.css itself so that shouldn't be the problem. In the past, an extension was able to modify the XUL structure itself so you could do very fancy and malicious things to the window. Since Mozilla opted to adopt the WebExtension standard, that wasn't possible any more. The only thing I can modify with the extension is a sort of 'prefix' for the window title. That was designed to be able to develop extensions that let you label your Firefox Windows. Luckily, this change happens on the top-level of the XUL structure so you can use fancy CSS rules to apply only to windows having a certain title prefix.

To get to the point; does your CSS code actually remove the tab-bar when you remove only the [titlepreface="᠎"] part? I suspect not. Otherwise, I can't really think of any other problems you might be running in to.

[Fred-Vatin]

To get to the point; does your CSS code actually remove the tab-bar when you remove only the [titlepreface="᠎"] part?

Of course it works. Pretty easy to test by yourself through ctrl+shift+alt+i > style editor > edit userChrome.css and add

#titlebar {
    visibility: collapse !important;
}

Then ctrl+S to save the css and return to the firefox UI.

I wrote my bug report so anyone can reproduce it.

[pbaykalov]

I wrote my bug report so anyone can reproduce it.

Please answer my question.

[Fred-Vatin]

I wrote my bug report so anyone can reproduce it.

Please answer my question.

I wrote my answer : “Of course it works. Pretty easy to test by yourself through ctrl+shift+alt+i > style editor > edit userChrome.css and add.”

I don’t know how I can be clearer.

[pbaykalov]

The thing is clicking the toggle button doesn’t change anything in the userChrome.css.

Should it?

[Fred-Vatin]

The thing is clicking the toggle button doesn’t change anything in the userChrome.css.

Should it?

Please can you stop spamming this issue asking the same questions again and again?

[pbaykalov]

To get to the point; does your CSS code actually remove the tab-bar when you remove only the [titlepreface="᠎"] part?

Of course it works. Pretty easy to test by yourself through ctrl+shift+alt+i > style editor > edit userChrome.css and add

#titlebar {
    visibility: collapse !important;
}

Then ctrl+S to save the css and return to the firefox UI.

I wrote my bug report so anyone can reproduce it.

Tried to reproduce. Style toggling works as intended -- the bar hides and appears.

[pbaykalov]

[pbaykalov]

But toggling does not work when rule is inside the @-block.

[Joolee]

I'm not near a computer to test or modify anything this month so thank you for testing it for me! If there really is a problem when using @moz-document selectors, it's probably good to mention that in the addon description or on the settings page.

[pbaykalov]

Additionally:
https://developer.mozilla.org/en-US/docs/Web/CSS/@document - deprecated

Browser console starts spewing out error if I use this userchrome.

[Joolee]

That looks like a Firefox bug to me. Might be worth checking if there is already a bug report or open one. Though I doubt someone will fix it as userchrome is being deprecated as far as I know.