grssam / UIEnhancer

Source code for UI Enhancer addon
https://addons.mozilla.org/en-US/firefox/addon/ui-enhancer/
51 stars 22 forks source link

Use a single shared image for the styles #18

Closed grssam closed 12 years ago

grssam commented 12 years ago

Use -moz-image-region to change the displayed background. This will improve speed and memory consumption

grssam commented 12 years ago

@drugoy -moz-image-region does not work for css background images. I am using the images as background. Do you have anything in mind which will be css dependent only and can be done ? I do not want to make the images as xul image or image tag

grssam commented 12 years ago

Don;t worry I got it. -moz-image-rect

grssam commented 12 years ago

-moz-image-rect is also not working, I am applying the style like this: background-image: -moz-image-rect( url(url), 0px, 16px, 32px, 32px);

and the error console is showing warning that background-image could not be parsed, dropped. Any idea?

Drugoy commented 12 years ago

Why don't you want to do it his way:

some_button {

list-style-image: url("chrome://path/to/mixed/image.png");
-moz-image-region: rect(0px, 18px, 18px, 0px); }

and so on.

But if you insist on setting image as background (which is a bit strange, but OK), then something like that:

some_button {

background-image: -moz-image-rect(url("chrome://path/to/mixed/image.png"), 0px, 16px, 32px, 32px);
width:32px;
height:32px;
position:absolute; }

And you may use base64 code instead of chrome://path/to/mixed/image.png in both cases.

! Do not forget the quotes around path to image !

grssam commented 12 years ago

I have tried every possible thing. Its not that I want to keep it as background-image. Also, the width and the height are not fixed, so can't assign them in css. It should have worked, but for some strange reason, it is not working. Even the error console is showing a parsing error.

Drugoy commented 12 years ago

Here is a live example: https://developer.mozilla.org/samples/cssref/moz-image-rect/

grssam commented 12 years ago

As I said, I have tried every posible way and every reference, so as this one. I know the way, it should have worked with background-image or list style image also, but isn't.

grssam commented 12 years ago

changing the background-image:url('some url'); in any of the class to background-image: -moz-image-rect(url('some url'), 0px,0px,16px,32px);

This result should be similar, but it will not work

grssam commented 12 years ago

I will be traveling for 2-3 days so will not be able to look into this for a while. I am uploading version 4.2 without this fix. I am sure I will find something out within few days.

Drugoy commented 12 years ago

Sure, okay. I'm a bit busy too and confused with not working code ATM.

Drugoy commented 12 years ago

Could you upload the image somewhere?

grssam commented 12 years ago

Sure here : http://imgur.com/oKVZU