795877 - page_mod contentStyleFile: linear-gradient not applied

Status: RESOLVED FIXED

(Add-on SDK Graveyard :: General, defect, P2)

Description

[Thomas Oberndörfer]

Attachment: moz-linear-gradient example addon

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:15.0) Gecko/20100101 Firefox/15.0.1
Build ID: 2012090600

Steps to reproduce:

SDK 1.10

When a stylesheet is injected into a page with page_mode the following style is not applied to the page:

-moz-linear-gradient


Actual results:

Attached is an example: a new tab opens with an addon page. Page_mod injects the style sheet bootstrap.css. We see styles applied to the buttons, so obviously the stylesheet is injected. Page inspector shows that the first button has the style:

background-image: -moz-linear-gradient(center top , rgb(0, 136, 204), rgb(0, 68, 204));

But this is not what we see in the browser.


Expected results:

Open data/correct.html in the example. This is the same page but with normal stylesheet definition. The buttons are here displayed correctly.

Comment 1

[Thomas Oberndörfer]

Attachment: moz-linear-gradient example addon v2

Comment 2

[Thomas Oberndörfer]

Attachment: missing linear-gradient

Comment 3

[Thomas Oberndörfer]

Attachment: correct linear-gradient

Comment 4

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Matteo, can you take a look at this?

Comment 5

[Matteo Ferretti [:zer0] [:matteo]]

It seems that the Stylesheet Service is not able to styles buttons, at least on OS X (not all css property, for instance `display` is properly applied). A simple code to run in Scratchpad:

    let { classes: Cc, interfaces: Ci } = Components;

    let sss = Cc["@mozilla.org/content/style-sheet-service;1"]
            .getService(Ci.nsIStyleSheetService);


    let ios = Cc["@mozilla.org/network/io-service;1"]
                  .getService(Ci.nsIIOService);
                  

    let css = "data:text/css," + 
        encodeURIComponent("body { border: 10px solid red};button {2px solid red}");

    sss.loadAndRegisterSheet(ios.newURI(css, null, null), 1); // USER_SHEET

So is definitely not related to gradient specifically.
It seems weird to me, I will try to check on platform side and contact gabor to see what is happening.

If it's related to the type of sheet, I believe that the bug 676054 will give to us the capability to fix it.

Comment 6

[Matteo Ferretti [:zer0] [:matteo]]

The previous example needs a page with buttons. You can use the following URL:

data:text/html, <button>Hello</button>

However I suggest to run the add-on provided by the user and then execute the code above in scratchpad, also because then you will apply the stylesheet in the temporary profile generated by cfx therefore you don't need to unload it.

Comment 7

[Matteo Ferretti [:zer0] [:matteo]]

Thanks to Gabor to found the typo in the css, of course is:

    button {border: 2px solid red}

And not

    button {2px solid red}

That was a typo when I wrote the code in bugzilla, the original code I tested (and re-tested to be sure) was correct, so the wrong behavior is the one described.

Comment 8

[Matteo Ferretti [:zer0] [:matteo]]

Update. Remove the ; in the CSS rule, otherwise it seems not working at certain condition. So the full code is:


    let { classes: Cc, interfaces: Ci } = Components;

    let sss = Cc["@mozilla.org/content/style-sheet-service;1"]
            .getService(Ci.nsIStyleSheetService);


    let ios = Cc["@mozilla.org/network/io-service;1"]
                  .getService(Ci.nsIIOService);
                  

    let css = "data:text/css," + 
        encodeURIComponent("body { border: 10px solid red} button {border: 2px solid red}");

    sss.loadAndRegisterSheet(ios.newURI(css, null, null), 1); // USER_SHEET

Comment 9

[Matteo Ferretti [:zer0] [:matteo]]

In according to Gabor, as expected with the AUTHOR_SHEET it works. So we can fix this issue in Add-on SDK as soon as the bug 676054 is landed. However, it could be maybe worthy to mention this behavior of USER_SHEET to someone, opening a platform bug? Not sure.

Comment 10

[Thomas Oberndörfer]

I checked the gradient_v2.zip example on Firefox 22 and problem still persists. Any updates on this? Does it make sense to open a platform bug?

Comment 11

[Matteo Ferretti [:zer0] [:matteo]]

The refactoring of `contentStyle` is landed in Firefox 23, so in Firefox 22 you still have that issue. Try on Firefox Beta and let us know if the issue still persist.

Comment 12

[Thomas Oberndörfer]

I tested in Firefox 23 beta and the gradient is now displayed correctly. That's great. Thanks.

Comment 13

[Tomislav Jovanovic :zombie]

it looks this got fixed and verified..