567504 - I see a magnify glass for a cursor when I mouseover Jetpack widgets (single ui element)

Status: RESOLVED FIXED

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

Description

[Erik Vold]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3
Build Identifier: 0.4 RC 1

When I mouse over a Jetpack widget, I have a magnifying glass for a cursor, then when I click the element the onClick is fired and the content of the element is zoomed in on, then if I press the element again, onClick is fired and it zooms in closer, then finally the cursor doesn't change on mouseover but the content is all gone or not visible at least.

Reproducible: Always

Steps to Reproduce:
See details
Actual Results:  
content of widget element is not viewable after a point, and the cursor is a magnifying glass at points

Expected Results:  
the content shouldn't zoom in when the widget element is clicked, and the cursor should be a finger pointing at the content perhaps?

Comment 1

[David Illsley]

I'm seeing this too. I guess it's Firefox's default image handling. As a workaround you can specify an img element and it seems to work as expected.

    widgets.add(widgets.Widget({
        label: "Widget with changing image on mouseover",
        content: "<img src=http://www.yahoo.com/favicon.ico>",
        onMouseover: function(e) {
            e.target.src = "http://www.bing.com/favicon.ico";
        },
        onMouseout: function(e) {
            e.target.src = "http://www.yahoo.com/favicon.ico";
        },
        onClick: function(e) {
            console.log("click");
        }
    }));

Comment 2

[Erik Vold]

"As a
workaround you can specify an img element and it seems to work as expected."

This worked, thanks.

I guess I can change the cursor myself as well.. but the way I'm thinking of is to add mouseOver and mouseOut event handlers. Maybe the cursor could be changed by default when 'image' is used instead of 'content'?

Comment 3

[Dietrich Ayala (:dietrich)]

how about if the widget is defined with the image property, we wrap the content in the <img> tag internally?

Comment 4

[Dietrich Ayala (:dietrich)]

Attachment: v1

- for widgets that use the image property, build the content. this gives us control, instead of the default formatting of a raw image, which adds the zoom functionality.

this fix depends on the patch in bug 567505 in order to have images properly fill the whole widget box.

Comment 5

[Myk Melez [:myk] [@mykmelez]]

Comment on attachment 447021 [details] [diff] [review]
v1

Nit: it would be good to also update the two examples in the docs that load images to use |image| instead of |content|.

Comment 6

[Myk Melez [:myk] [@mykmelez]]

a=myk as well for 0.4.

Comment 7

[Dietrich Ayala (:dietrich)]

http://hg.mozilla.org/labs/jetpack-sdk/rev/dadd887d33ce

Comment 8

[Myk Melez [:myk] [@mykmelez]]

The Add-on SDK is no longer a Mozilla Labs experiment and has become a big enough project to warrant its own Bugzilla product, so the "Add-on SDK" product has been created for it, and I am moving its bugs to that product.

To filter bugmail related to this change, filter on the word "looptid".