866452 - page-mod contentStyle absolute url no longer works

Status: RESOLVED WORKSFORME

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

Description

[deltaburnt]

I need to use the contentStyle option of page-mod to reference an absolute url as shown in the documentation:

contentStyle: "h1 { background: url(" + data.url("my-pic.jpg") + ")}"

I was using this to use the glyphicons included with bootstrap, but after a recent Nightly update (maybe 2 weeks ago), this no longer works. Everything except the use of background-image appears to work. I'm on version 1.14 of the SDK.

Comment 1

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

Matteo, can you take a look at this?

Comment 2

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

This code is working for me (Add-on SDK 1.14, Firefox Nightly 23.0a1 (2013-05-02)):

    const { data } = require("sdk/self");

    require("sdk/page-mod").PageMod({
      include: "*",
      contentStyle: "body { background-image: url(" + data.url("addon.png") + ")!important }"
    });


Browsing for instance to <https://addons.mozilla.org/en-US/developers/docs/sdk/latest/> will shows the `addon.png` repeated as background image.

I would suggest to you to use !important, and see if it fixes your issue: something could be changed in the web page you're trying to style, and without "important" your rule couldn't be applied anymore.
Let me know if this fixed your scenario!

Notice that with the bug 759190 now fixed, in the next version of SDK you no longer need to set the URL in this such way, you can use a stylesheet file in your data folder with relative path to your images; and with the fix of bug 755606 / bug 830121 you do not need to specify `!important`.

However, this changes are mostly backward compatible, it means that if you specify your image like that and with !important they will be displayed as expected in both 1.14 and later.

Comment 3

[deltaburnt]

Even though I've yet to solve my problem, I'm now fairly certain this isn't a problem with Firefox. I can set the body background image, but I can't get background images to show on specific elements.

If you're still interested, here's an excerpt of what I'm actually attempting:
http://pastebin.com/cSxkH7ZU

I've tried !important, but that doesn't appear to work. Is there a place I can go to get builds of the latest SDK?

Comment 4

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

(In reply to deltaburnt from comment #3)
> I've tried !important, but that doesn't appear to work. Is there a place I
> can go to get builds of the latest SDK?

https://github.com/mozilla/addon-sdk/archive/master.zip should be the most recent SDK code at any given point in time.

Comment 5

[deltaburnt]

Using the latest version of the SDK my code now works and it's a lot cleaner.