or Alexis Menard in the real world.

Why GMail looks bad with Oxygen?


I’m working on WebKit and more exactly on QtWebKit. While running rekonq to test the status of QtWebKit (eating my own dog food). GMail looked really really bad. All the check-boxes are ugly and clipped. Here is a screenshot :

I did investigate and tried to understand why it is like that. The conclusion is : It’s not a WebKit bug neither an Oxygen one, It’s a GMail bug. The column which contains the check-boxes with the drag handle has an hard-coded size of 24px. Here is the declaration of the CSS class applied to that column :

td.oZ-x3 {
text-align: left;
padding: 0 0 0 1px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 1px;
width: 24px;

Of course this is wrong because Oxygen check-boxes are 21px wide so of course it doesn’t let that much space for the drag handle and the margins. That explain why it’s ugly. Now you can say WebKit should be smart enough but we follow the spec I would say, firefox too and guess what with the Oxygen style support in Firefox it’s ugly the same way too :

So as a good user, I’ve reported the bug to the GMail Team and hope they can come up with a fix that would make many KDE people very happy.


Author: darktears

Software Engineer at Intel Corporation.

19 thoughts on “Why GMail looks bad with Oxygen?

  1. How do you report bugs to GMail? I’m a developer of a Qt IMAP client (http://trojita.flaska.net/) and when I tried to report a certain issue in their IMAP implementation using a friend who works at Google, I didn’t get any response from their GMail team. Do you have a better contact?

  2. wouldn’t it be nice, to make the checkboxes skinnable via css? like normal buttons.

    many times, the oxygen-style-checkboxes visually don’t fit into my webprojects.

  3. I thought i was a bug in rekonq. Finally you found the bug,Good work buddy.

  4. Better solution: don’t use Gmail.

    • Gmail is a good email provider but it is better to use them through a client like Kmail. Kmail’s interface is excellent, makes encryption easy and everyone should have their mail in their own repository eventually. Gmail is a good email provider because pop and imap work well, so that you can use Kmail and other clients, imap for mobile devices, pop for your archives. If you are forced to use a web interface, you can. The only thing nicer than Gmail is running your own mail server, but that is something repressive ISPs do not allow.

  5. I’m pretty sure this is a bug in Oxygen, because of its hard-coded and BIG checkboxes.

    You think it’s not an Oxygen’s bug? Take into account that Oxygen is the only way to reproduce it.

    • It’s not Oxygen’s fault. The platform the browser is running on can have 100*100px checkbox so it should be respected. Oxygen is not the only way to reproduce it :), I wrote a little style with the same issue. Also I’m practically sure I can reproduce it in different ways on some other ways.

      • Oxygen checkboxes are VERY big, and they can’t be resized. That’s a fact. And it’s easy to spot the difference between an Oxygen checkbox and another one on web pages rendering, because they are bigger and so they break the layout.

      • The point is that checkboxes are allowed to be bigger. Limiting the size for a UI control to 24 pixels is simply very, very broken, because it won’t work well for non-standard displays. Imagine a grid of checkboxes on a 300dpi screen, and then try to hit the right one with your finger. That’s why they need to be freely resizable.

  6. But as a user I don’t care if the bug is here or there, It should work with QtWebKit or rekonq. It works with Firefox and Chrome. If there is nothing you can do directly to fix the bug, then there should be a workaround for such bugs in QtWebKit.

    • Sorry but this is nonsense. Same people also blame KOffice/Calligra for displaying a MS-Word document different than expected, they blame Amarok for not synchronizing with their latest iPod…, because they don’t care who is responsible for which problem and how to solve it really and not just hiding the symptoms.

      There are some companies that tell you that they do anything for you and that you don’t need to take any care. Feel free to be a happy slave but don’t complain about loosing freedom.

  7. I’ve seen this plenty of times, it’s really ugly. In this blog, for instance, the checkboxes below the comment box look perfectly nice.
    Thanks for taking the time to file a bug and all. 🙂 Let’s hope they listen, although I won’t hold my breath.

  8. thanks for looking into this. i have been bugged by those checkboxes for a while — and always surprised that nearly everything else seems to work flawlessly in rekonq/gmail.

    well, i doubt the gmail team will jump on the request but it would be nice.

  9. I have another (small) issue with QtWebKit: Oxygen’s widget animations don’t work. This is not really a big problem, but it works perfektly in khtml so I wanted to mention it.

  10. The problem is a not a gmail bug..

    It is a check box bug – or more correctly: a design flaw.

    why are oxygen check boxes so large? There is NO reason to have a check box be so huge, they make all web forms look stupid.

    Fix oxygen, not the checkbox standard.

    • Well you obviously don’t know what you are talking about because there is no recommended size neither a checkbox standard :). The standard says that the agent (aka the browser) should do the layout according the size of the checkbox the agent is running on and webkit/firefox/IE respects it unless there is an hardcoded size.

      The fact that the checkboxes are bigger with Oxygen is a design decision that you can have with the oxygen team. Now should we apply this decision to the web content is yes for sure a discussion we can bring to the oxygen team.

      But still you argument is very wrong.

      • I would agree with stephen. There IS something wrong with the oxygen checkboxes. Whether or not there is some “standard” relating to checkboxes is irrelevant. Oxygen checkboxes break layouts. I’ve seen this 100s of times on various other pages. They look horribly out of place, they’re way too overstated, and they’re TOO BIG.

        When I’m developing web layouts, it’s a huge pain to do it in firefox or rekonk because of those “big honkin checkboxes.” They’re just too big, and weird looking.

        If I have problems with them, Google has problems with them, and 1000s of other pages have problems with them, the problem is with the checkbox, not the page. Of course it might not “technically” be the checkboxes fault, but we are talking “real world” here, where things are imperfect.

        Other KDE controls look out of place as well, but at least they can be styled, whereas the checkbox cannot (easily anyway). Oxygen is in serious need of a redesign (but that’s another rant)

        Anyway, just my 0.02.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s