CSS image filters

[Eric H. Jung]

Hi,

This isn't really extension-specific, but it's for use within an extension so I'm asking it here. Is there any way to dynamically change the color of statusbar icon (gif or png) without including individual graphic files for all possible color permutations?

Thanks for any help,
Eric

[Philip Chee]

On Sat, 17 May 2008 13:46:12 -0700 (PDT), Eric H. Jung wrote:

> This isn't really extension-specific, but it's for use within an
> extension so I'm asking it here. Is there any way to dynamically
> change the color of statusbar icon (gif or png) without including
> individual graphic files for all possible color permutations?

You could have a PNG with a transparent background and then change the
background colour of the containing element via JS.

The other solution I've seen an extension use, is to fetch the icon from
the authors website with the colour encoded in the URLs query
parameters. The website PHP would then dynamically generate an icon with
the requisite colour and return that.

Hmm. I suppose you could use canvas to generate your icon/image, convert
it to a data url and then attach it to your statusbar icon.

Phil

--
Philip Chee <phi...@aleytys.pc.my>, <phili...@gmail.com>
http://flashblock.mozdev.org/ http://xsidebar.mozdev.org
Guard us from the she-wolf and the wolf, and guard us from the thief,
oh Night, and so be good for us to pass.
[ ]Too Many Programmers In This Area. Please, ZIP Yourself...
* TagZilla 0.066.6

[Eric H. Jung]

----- Original Message ----
> From: Philip Chee <phili...@gmail.com>
> To: dev-ext...@lists.mozilla.org
> Sent: Sunday, May 18, 2008 11:26:16 AM
> Subject: Re: CSS image filters
>
> On Sat, 17 May 2008 13:46:12 -0700 (PDT), Eric H. Jung wrote:
>
> > This isn't really extension-specific, but it's for use within an
> > extension so I'm asking it here. Is there any way to dynamically
> > change the color of statusbar icon (gif or png) without including
> > individual graphic files for all possible color permutations?
>
> You could have a PNG with a transparent background and then change the
> background colour of the containing element via JS.
>
> The other solution I've seen an extension use, is to fetch the icon from
> the authors website with the colour encoded in the URLs query
> parameters. The website PHP would then dynamically generate an icon with
> the requisite colour and return that.
>
> Hmm. I suppose you could use canvas to generate your icon/image, convert
> it to a data url and then attach it to your statusbar icon.

Thanks for the ideas. I'm not fond of the first one because it's only the background color I can change. I'm really looking to change the hue/tint of the entire image. I'll consider the second idea. The third is appealing, but I have two follow-up questions:

1. Where could I place the <canvas/> so it wouldn't be visible to the user? (Please don't say the hidden window)
2. How could I convert the canvas to a data url?

Thanks,
Eric

[Mook]

Eric H. Jung wrote:
>> From: Philip Chee <phili...@gmail.com>
<snip>

>> Hmm. I suppose you could use canvas to generate your icon/image, convert
>> it to a data url and then attach it to your statusbar icon.
>
> Thanks for the ideas. I'm not fond of the first one because it's only the background color I can change. I'm really looking to change the hue/tint of the entire image. I'll consider the second idea. The third is appealing, but I have two follow-up questions:
>
> 1. Where could I place the <canvas/> so it wouldn't be visible to the user? (Please don't say the hidden window)
> 2. How could I convert the canvas to a data url?
>
> Thanks,
> Eric

Randomly playing in DOM Inspector gets me:
<statusbarpanel>
<stack>
<box>
<label />
<image image" width="16" height="16"
src="chrome://greasemonkey/content/icon_small.png"/>
</box>
<box mousethrough="always"
style="background-color: #ff0000; opacity: 0.3;"/>
</stack>
</statusbarpanel>
Note that this covers the whole rectangular area, not just the bits of
the icon that is not transparent.

As for canvas - feel free to place it right inside the statusbarpanel,
with width= and height= attributes set, but style="display:none;". The
canvas size is independent of the element size. Get the url via
document.getElementById("canvas-id").toDataURL() (returning a string).

HTH

--
Mook

[Eric H. Jung]

----- Original Message ----
> From: Mook <mook.moz+nntp.n...@gmail.com>

> Randomly playing in DOM Inspector gets me:

> Note that this covers the whole rectangular area, not just the bits of
> the icon that is not transparent.
>
> As for canvas - feel free to place it right inside the statusbarpanel,
> with width= and height= attributes set, but style="display:none;". The
> canvas size is independent of the element size. Get the url via
> document.getElementById("canvas-id").toDataURL() (returning a string).

I love my MOOK! Everyone should have his own mook! Remind me to get my MOOK a nice Christmas present.