[FireMonkey] Gmail's Google Keep side panel does not show my UserCSS's text-shadow

Fanolian commented 2 years ago

I have a UserCSS that applies text-shadow to (nearly) all text in all pages:

/*
==UserCSS==
@name             TEST Text Shadow across whole Firefox
@match            <all_urls>
@version          1.0
==/UserCSS==
*/

* {
  text-shadow: 1px 1px 0px red;
}

For FireMonkey the text shadow does not show on the Google Keep panel in Gmail. In contrast, Stylus can apply it to the panel.

Steps to reproduce

Have a Google account.
Add the above UserCSS to FireMonkey 2.37.
Log in to Gmail. Turn on the Google Keep panel on the right. (Other panels exhibit the same issue)
Observe the text in the panel.

Actual result

The text does not have a red text shadow:

I also tried to add another blue text-shadow CSS *{text-shadow: -1px -1px 0px blue !important;} using the Scratchpad (and press Run) but in vain:

With Stylus it looks like this (even without !important):

Additional notes

The text shadow shows correctly if I open Google Keep in its own tab (https://keep.google.com/).
I see the issue in other side panels in Gmail, and also the side panels in Google Calendar.
I am still new to FireMonkey. Gmail is the first place I see such an issue.

I see that the Keep panel loads after others have been loaded. In FireMonkey's help it says:

... CSS rules will apply to newly created elements in dynamically updated pages (e.g. on scroll) ...

So I guess the text in Keep panel should have text shadows too? I understand that Stylus uses a different mechanism to inject CSS. Is this issue a limitation on how FireMonkey works? Or is it merely an issue with my UserCSS code?

System info

Brand new profiles in Firefox 94.0.1 and currently Nightly (2021-11-15; 20211115215316) FireMonkey 2.37

Thank you for your extension.

erosman commented 2 years ago

The standard behaviour of CSS is that its rules can override each other. There is also an order of importance.

To check what is going on...

Go to https://www.google.com/ (for example)
Open Developer Tools (F12)
Go to Inspector tab
Find a relevant element
On the right panel you should be able to see that the CSS has been applied
It should also show if it has been overridden
If it is missing, then the CSS has not been injected

Note: If side-panels in Gmail's are in iframe, then that could be a reason and you should try adding @allFrames true

dev-tools2

Fanolian commented 2 years ago

Note: If side-panels in Gmail's are in iframe, then that could be a reason and you should try adding @allFrames true

Thank you. It works.

For future reference:

defaults FireMonkey conforms to the Firefox (& Chrome) content_scripts API defaults.

From FireMonkey's Help > Metadata Block > defaults

it is easier to reproduce it at the CSS Demo box (not the result part) at https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

erosman / support