Bug 48198 - [Qt] Button's background style from default Qt Mobile Theme is overriding facebook's button style
Summary: [Qt] Button's background style from default Qt Mobile Theme is overriding fa...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebKit Qt (show other bugs)
Version: 528+ (Nightly build)
Hardware: Other Linux
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2010-10-23 17:55 PDT by Ragner Magalhaes
Modified: 2010-11-12 12:32 PST (History)
9 users (show)

See Also:


Attachments
Bug screenshot (17.93 KB, image/png)
2010-10-23 17:58 PDT, Ragner Magalhaes
no flags Details
Facebook button computed style on desktop (166.39 KB, image/png)
2010-10-27 12:09 PDT, Ragner Magalhaes
no flags Details
Facebook button computed style on N900 (154.50 KB, image/png)
2010-10-27 12:12 PDT, Ragner Magalhaes
no flags Details
patch (3.04 KB, patch)
2010-11-11 13:43 PST, Luiz Agostini
no flags Details | Formatted Diff | Diff
Screenshot (42.66 KB, image/png)
2010-11-11 13:44 PST, Luiz Agostini
no flags Details
Luiz's patch on N900 (67.66 KB, image/png)
2010-11-12 06:50 PST, Ragner Magalhaes
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Ragner Magalhaes 2010-10-23 17:55:10 PDT
Facebook uses "background-color" property to define button's background color
and "color" property to define foreground color.

Qt Mobile Theme uses "background-image" property to define the button's
background color because "background-color" property doesn't support gradient,
and "color" property to define the foreground color.

So what is happening ...

"background-image" property from Qt Mobile Theme  is overriding "background-color" property from Facebook.

So we can see on the facebook page the gradient defined by
"background-image" property on themeQtMobile.css file.

As the facebook is using the "color" property like Qt Mobile Theme, it is overriding
the foreground color defined by Qt Mobile Theme on themeQtMobile.css file.



(QtMobileTheme's "background-image: gradient") + (facebook's "background-color:blue")  => gradient background

(QtMobileTheme's "color: gray") + (facebook's "color: white") => white foreground

As a result we can see facebook button with gradient background and white foreground.



= So how we could solve this:

We could use "!important" property on button's styles defined into
themeQtMobile.css file
but Qt mobile style will override the web page's styles.

But I don't think this is a good workaround.

=

The right thing would be if the background-color supported gradient
so we could use it to define the gradient for Qt mobile style. But this is not possible yet.
Comment 1 Ragner Magalhaes 2010-10-23 17:58:08 PDT
Created attachment 71661 [details]
Bug screenshot
Comment 2 Kenneth Rohde Christiansen 2010-10-24 05:17:57 PDT
If the page button is styled (like has a background) we shouldn't try to use our style at all, I guess. Our style is a fallback style. Maybe it is a bug in RenderThemeQt or similar.
Comment 3 Ragner Magalhaes 2010-10-25 08:20:32 PDT
(In reply to comment #2)
> If the page button is styled (like has a background) we shouldn't try to use our style at all, I guess. Our style is a fallback style. Maybe it is a bug in RenderThemeQt or similar.

This bug is happening just on my N900.
QtTestBrowser is working well on my desktop.

I am compiling the WebKit for N900 using Qt version 4.6.2 from NokiaQtSDKv1.0.1
and for my desktop I am using Qt version 4.7.0 from Git.
Comment 4 Kenneth Rohde Christiansen 2010-10-25 08:53:26 PDT
Are you using the mobile theme on your desktop? Or that could be the reason
Comment 5 Ragner Magalhaes 2010-10-25 09:12:40 PDT
(In reply to comment #4)
> Are you using the mobile theme on your desktop? Or that could be the reason

Yes, I am using the mobile theme on my desktop and facebook button works well.
Comment 6 Kenneth Rohde Christiansen 2010-10-25 12:18:41 PDT
Now that is really strange... seems that you need to debug more and find out what makes the difference!
Comment 7 Ragner Magalhaes 2010-10-27 12:09:59 PDT
Created attachment 72066 [details]
Facebook button computed style on desktop
Comment 8 Ragner Magalhaes 2010-10-27 12:12:05 PDT
Created attachment 72067 [details]
Facebook button computed style on N900
Comment 9 Ragner Magalhaes 2010-10-27 12:26:53 PDT
I think I was right on my first comment.

Now I know why facebook's button works on desktop and not on N900.
Facebook uses different styles for desktop and mobile. I should know about this :P.

themeQtMobile.css  is really a fallback style, but for each property.
So, how we are using background-image and facebook uses background-color
the browser is computing our background-image and facebook's backgroun-color.
This is what is happening on N900.

Look at https://bug-48198-attachments.webkit.org/attachment.cgi?id=72067
you can see our "background: -webkit-gradient" being computed.

but on desktop, facebook defines background-image property as "none",
than its button works with background-color property perfectly.

Look at https://bug-48198-attachments.webkit.org/attachment.cgi?id=72066
you can see that our "background: -webkit-gradient" is not computed.
Comment 10 Ragner Magalhaes 2010-11-01 07:27:48 PDT

(In reply to comment #9)
> I think I was right on my first comment.
> 
> Now I know why facebook's button works on desktop and not on N900.
> Facebook uses different styles for desktop and mobile. I should know about this :P.
> 
> themeQtMobile.css  is really a fallback style, but for each property.
> So, how we are using background-image and facebook uses background-color
> the browser is computing our background-image and facebook's backgroun-color.
> This is what is happening on N900.
> 
> Look at https://bug-48198-attachments.webkit.org/attachment.cgi?id=72067
> you can see our "background: -webkit-gradient" being computed.
> 
> but on desktop, facebook defines background-image property as "none",
> than its button works with background-color property perfectly.
> 
> Look at https://bug-48198-attachments.webkit.org/attachment.cgi?id=72066
> you can see that our "background: -webkit-gradient" is not computed.

No more comment about this bug!?
I would like to fix it, but I don't know how to do yet
Comment 11 Yi Shen 2010-11-11 07:48:08 PST
Hi, Ragner, I saw a similar issue on S60, can you try following code on N900?

<HTML>
<BODY>

<button style="background-color:#2277bb;" type="submit">Search</button>

</BODY></HTML>

I am using qtwebkit 2.1, and on S60, I got a white button; on Linux, I got a button which has weired color (not #2277bb). In addition, the issue can't be reproduced by using webkit trunk's build on Linux.
Comment 12 Ragner Magalhaes 2010-11-11 10:24:29 PST
(In reply to comment #11)
> Hi, Ragner, I saw a similar issue on S60, can you try following code on N900?
> 
> <HTML>
> <BODY>
> 
> <button style="background-color:#2277bb;" type="submit">Search</button>
> 
> </BODY></HTML>
> 
> I am using qtwebkit 2.1, and on S60, I got a white button; on Linux, I got a button which has weired color (not #2277bb). In addition, the issue can't be reproduced by using webkit trunk's build on Linux.

Hi yi shen,
on my N900 I am getting a gradient(gray->white) button. I think it is working like on your S60.

I think it is the same issue.

Try this code:

<button style="background:#CCB666 url(http://www.blogblog.com/1kt/simple/gradients_light.png);" type="submit">Search</button>


if it works for you,
you are getting the same bug that me ... :)
Comment 13 Luiz Agostini 2010-11-11 13:43:16 PST
Created attachment 73649 [details]
patch

I did not make any tests in N900 nor with Facebook. Ragner, could you make those tests?

Kling, do you think it is ok? Any performance issue?
Comment 14 Luiz Agostini 2010-11-11 13:44:58 PST
Created attachment 73651 [details]
Screenshot
Comment 15 Luiz Agostini 2010-11-11 13:49:31 PST
(In reply to comment #11)
> Hi, Ragner, I saw a similar issue on S60, can you try following code on N900?
> 
> <HTML>
> <BODY>
> 
> <button style="background-color:#2277bb;" type="submit">Search</button>
> 
> </BODY></HTML>
> 
> I am using qtwebkit 2.1, and on S60, I got a white button; on Linux, I got a button which has weired color (not #2277bb). In addition, the issue can't be reproduced by using webkit trunk's build on Linux.

You can see this button in the last screenshot, it is the last button in the screenshot. Is it what was expected?
Comment 16 Andreas Kling 2010-11-11 17:03:58 PST
(In reply to comment #13)
> Kling, do you think it is ok? Any performance issue?

Looks harmless to me :)
Comment 17 Yi Shen 2010-11-11 17:34:34 PST
(In reply to comment #15)
> (In reply to comment #11)
> > Hi, Ragner, I saw a similar issue on S60, can you try following code on N900?
> > 
> > <HTML>
> > <BODY>
> > 
> > <button style="background-color:#2277bb;" type="submit">Search</button>
> > 
> > </BODY></HTML>
> > 
> > I am using qtwebkit 2.1, and on S60, I got a white button; on Linux, I got a button which has weired color (not #2277bb). In addition, the issue can't be reproduced by using webkit trunk's build on Linux.
> 
> You can see this button in the last screenshot, it is the last button in the screenshot. Is it what was expected?

The button on the screenshot looks good for me. So, in your changes, if a button defined background-color, then the "background: -webkit-gradient" will not be computed? Sorry, I can't test your patch now, but I will do it tomorrow morning.
Comment 18 Ragner Magalhaes 2010-11-12 06:50:11 PST
Created attachment 73734 [details]
Luiz's patch on N900
Comment 19 Ragner Magalhaes 2010-11-12 06:54:42 PST
(In reply to comment #18)
> Created an attachment (id=73734) [details]
> Luiz's patch on N900

It is working well on N900

Thanks Luiz,
good patch :)
Comment 20 Luiz Agostini 2010-11-12 09:12:24 PST
(In reply to comment #19)
> (In reply to comment #18)
> > Created an attachment (id=73734) [details] [details]
> > Luiz's patch on N900
> 
> It is working well on N900
> 
> Thanks Luiz,
> good patch :)

Good! Then if no one sees any problem I will commit it.
Comment 21 WebKit Commit Bot 2010-11-12 09:31:00 PST
Comment on attachment 73649 [details]
patch

Clearing flags on attachment: 73649

Committed r71920: <http://trac.webkit.org/changeset/71920>
Comment 22 WebKit Commit Bot 2010-11-12 09:31:07 PST
All reviewed patches have been landed.  Closing bug.
Comment 23 Ademar Reis 2010-11-12 12:32:16 PST
Revision r71920 cherry-picked into qtwebkit-2.1 with commit 1453361 <http://gitorious.org/webkit/qtwebkit/commit/1453361>