Theming the bubble

[GoogleCodeExporter]

What steps will reproduce the problem?
1.Trying to change the style of the bubble.
2.I try to find the images and I found it in base 64.
3.I want to use my own images, so I change it.

What is the expected output? What do you see instead?
I expect to see a bubble with my local images. Insted, I see the normal bubble 
without the new images.

What version of the product are you using? On what operating system?
iPhone 3G with iOS 4.1.

Please provide any additional information below.

I don't know how to change the urls of the images. It's not more easy if you 
can add you own? I think it's a great idea. And don't need to depend for 2nd 
servers is good too. Nobody knows when these can be deleted or moved.

Thanks!

Original issue reported on code.google.com by hin...@gmail.com on 27 Oct 2010 at 2:15

[GoogleCodeExporter]

The style of the bubble is mostly defined using CSS, not images. You can change 
the style by modifying the code in the build_() function. The only two places 
we use images are the arrow at the top of the bubble (IMAGE_ARROW_DATA_URL_) 
and the close button in the corner of the bubble (IMAGE_CLOSE_DATA_URL_).

As for the part where you said "don't need to depend for 2nd servers", can you 
clarify what you mean? The library is completely self-contained inside 
bookmark_bubble.js. Once you've downloaded this file and made it available from 
your own web server, you have no dependencies on any servers other than your 
own.

Original comment by ntho...@google.com on 27 Oct 2010 at 12:18

[GoogleCodeExporter]

OK, I supposed the bubble is mostly defined using CSS, but i can't found the 
css properties. It's good to know there are in the build_() function. Thanks a 
lot!

"The library is completely self-contained inside bookmark_bubble.js." Are you 
sure?

I mean, in the bookmark_bubble.js I have this:

"google.bookmarkbubble.Bubble.prototype.IMAGE_ARROW_DATA_URL_ = 
'data:image/png;base64,iVBORw0KGgoAAAANS......zmdJinKZJaDV3TVMjM5Q9yiqYpUwiMwa/1
apDXTNESjsAAAAASUVORK5CYII=';"

I deleted a bit of code, the original is very long.

I think the URL of this image isn't accessing to my server. I didn't upload any 
arrow.png and the bubble is displaying correctly.

That's what I mean with "don't need to depend for 2nd servers". I think would 
be better if I can point this urls to my server images.

Can you clarify me this?

Thanks!

And nice work for the bubble! It's a really great job!

Original comment by hin...@gmail.com on 27 Oct 2010 at 12:47

[GoogleCodeExporter]

IMAGE_ARROW_DATA_URL_ and IMAGE_CLOSE_DATA_URL_ contain base64-encoded image 
data. That is, these are the actual images themselves, not just links to image 
files stored on another server somewhere. When the user's browser executes the 
bookmark bubble script, it doesn't need to access any other server to get these 
images, because it already has all the data from bookmark_bubble.js.

Here's Wikipedia's page on how data URLs work: 
http://en.wikipedia.org/wiki/Data_URI_scheme

If you wanted to replace these images with different ones, you could either:
(a) convert your images to base64 and then replace those two constants in 
bookmark_bubble.js with your own data, or
(b) upload the images to your web server and change those constants to be 
ordinary links to those images, e.g.
var IMAGE_ARROW_DATA_URL_ = 'http://www.example.com/my_new_arrow_image.png';

I'm going to close this bug for now. If you have any further questions about 
how the bookmark bubble works, feel free to reply here or to our discussion 
group at http://groups.google.com/group/mobile-bookmark-bubble.

Original comment by ntho...@google.com on 27 Oct 2010 at 12:57

• Changed state: WontFix

[GoogleCodeExporter]

Wow! It's amazing!

Sorry for my poor knowledge, I think you're using base64 to ofuscate the real 
urls of the image files. I never thought that this the source image codified!

Thanks for the info and for the instructions!

I'll begin to use this script in my projects. I'll let you know if I can 
improve something.

Original comment by hin...@gmail.com on 27 Oct 2010 at 1:45