1005206 - Theme bg color picker does not show results in real time

Status: VERIFIED FIXED

(addons.mozilla.org Graveyard :: Public Pages, defect, P1)

Description

[Amy Tsay [:amyt]]

When creating a new theme at https://addons.mozilla.org/developers/theme/submit, you used to be able to see the results under Preview in real time. Now, you only see it when you close the color picker.

Theme designers need this feature back because it helps them see how the background color will look against the theme image easily, without having to close and re-open the color picker each time they try on a color.

Comment 1

[Yohan Boniface [:ybon]]

So, what's going on here is that Firefox 29 has landed the native color picker (http://www.mozilla.org/en-US/firefox/29.0/releasenotes/), and our code gives precedence to native color picker over js one.
The issue is that, according to my tests and investigations, on Firefox, there is no event fired by the native color picker on colour change, only on validate (i.e. when clicking on "OK").
According to the specs (http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#color-state-%28type=color%29), both "change" and "input" must be implemented. My understanding is that "input" *should* be fired on color (while "change" should be fired on validate). But the actual behaviour is that both "change" and "input" are only fired when pressing the "OK" button. (Note that on Chromium, "change" is fired on color change, but there is no "OK" nor "Cancel" button.)
Just to make it clear: the javascript color picker we use do fire the "change" event on color change, which allowed preview update on real time.

So, basically, I see two options at this point:
- wait until Firefox implements a correct "input" event (if my understanding is good)
- never user native color picker

Thoughts?

Comment 2

[Yohan Boniface [:ybon]]

As for clouserw suggestion, I've submitted an issue to see what's possible to do, the Firefox side https://bugzilla.mozilla.org/show_bug.cgi?id=1009243

Comment 3

[Arnaud Bienner]

(In reply to Yohan Boniface [:ybon] from comment #1)
> The issue is that, according to my tests and investigations, on Firefox,
> there is no event fired by the native color picker on colour change, only on
> validate (i.e. when clicking on "OK").

On OS X and Linux, IIRC, an "update" event is fired (seems it should be a "input" event instead, according to your comment). But on Windows, because of a technical limitation (more on bug 1009243 comment 2) we don't fire such event.
Maybe a temporary solution would be for the addons website to also handle update events? At least this will fix the problem on OS X and Linux. Not sure yet what we can do for Windows...

Comment 4

[Yohan Boniface [:ybon]]

Forcing javascript color picker has been merged: https://github.com/mozilla/olympia/commit/1167d361d6d0c8d06e3a28d6c736434522b3272e
I'm closing here, and I will open a new bug for tracking the need to switch back to native one when ready.

Comment 5

[Yohan Boniface [:ybon]]

New bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1013606

Comment 6

[Iulian Timis]

Verified as fixed in https://addons-dev.allizom.org/en-US/developers/theme/submit on FF29 (Win 7).
Postfix screencast http://screencast.com/t/hfbzNahO
Closing bug.

Comment 7

[Amy Tsay [:amyt]]

The color is previewing now, but the textbox where you can enter a hex code has disappeared. This is actually causing a bigger problem for designers than the inability to preview colors.

Comment 8

[Yohan Boniface [:ybon]]

Created a new bug: bug 1032084

Comment 9

[Iulian Timis]

Verified as fixed in https://addons-dev.allizom.org/en-US/developers/theme/submit on FF30 (Win 7).
Postfix screencast http://screencast.com/t/ZV3k3jsbg9u
Closing bug.