Clearlooks-cairo and the first milestone

During the absence of new posts, a lot of work has gone into Clearlooks-cairo. To give people an idea of the progress being made, I’ve set three milestones.

  • 1. Finish the basic version, without custimization options.
  • 2. Add the customization options.
  • 3. Polishing it, and then polishing it some more.

Right now, I’ve almost reached the first milestone. What’s missing is the focus rings. It will be easy to add that, though.

If you would like to try the new Clearlooks, you’ll have to get it from GNOME CVS, module “gtk-engines”. Please keep in mind that it’s still a bit on the slow side, especially with cairo-1.0.0. The CVS version of cairo has seen a few great speed improvements, though.

Here’s the latest WIP screenshot (click for full):
Clearlooks-cairo Work In Progress
Don’t worry about the scrollbars, the old style is still there if you don’t like the new one.

49 Responses to “Clearlooks-cairo and the first milestone”

  1. albert Says:

    Wow! This is awesome stuff!

    Congratulations to all the people involved in making this possible.

    Cheers

  2. tirpse Says:

    Gaim IM chat window is realy slow with it.

  3. rob Says:

    I have made the experience (e.g. with aqua-style themes) that highlighted scrollbars distract a lot. Compare the relative unobstrusiveness of a focus ring (which is obviously at a more important spot) to the big blocky highlighted scrollbar. I would at most recommend highlighting them on mouse-over. Specifically it seems wrong that a scrollbar is highlighted when there is nothing to scroll, a lot of theme get this wrong IMHO.
    Just a few nitpicks, your stuff looks really cool!

  4. Giorgio Says:

    Which fonts are you using? and dpi?

  5. Benni Says:

    yes, the scrollbar are very distracting. I also don’t like the light blue and prefer a darker one, hopefully there will be a choice between the blue from wip 12 and 15

  6. Michael Says:

    I actually came here to say exactly what rob said. So make this a +1.
    Other than that: great work!

  7. Vedran Says:

    Those fonts are default Fedora Core fonts, IIRC.
    But it looks great! I like the look of new scrollbar too. Keep up the good work.

  8. rel Says:

    make that a +2 for the blueish scrollbars.
    also, tried to compile glitz CVS and cairo CVS, only cairo fails to compile with glitz enabled. Does this engine use glitz?

    anyway, great work!

  9. rapha Says:

    Remenic?

    Is that the Remenic from #lfs, back in the old days? Dude, how did you get into doing GNOME stuff? :-)

    Bests,
    Raphael (also back from the old LFS days)

  10. Jones Says:

    Can you post up the command to retrieve the clearslooks from CVS tree? I don’t know how to use cvs command at all.

  11. MrRoboto Says:

    Jones use this into a terminal

    cvs -z3 -q -d:pserver:anonymous@anoncvs.gnome.org:/cvs/gnome co gtk-engines

  12. Phil Says:

    I have to say one of my biggest complaints with Clearlooks is how low-contrast the scrollbars are. It may not seem like a big deal, but when you’ve got a fullscreen browser window showing mostly gray and white and you’ve been hacking all day, finding where the scroll bar is positioned can be really hard on the eyes. So this is a very welcome change for me.

    I don’t think the scroll bars are distracting at high-contrast; I think they help to define the border of the window more clearly. Highlighting them on mouseover is a good idea, but it is rendered less than useful by the fact that everyone scrolls with scroll wheels now, so there is never any reason to mouseover the scroll bars. Perhaps a good compromise would be if it pulsed after every movement of the scroll wheel as well as mouseovers.

    Anyway, kudos for making the change.

  13. assente Says:

    The theme is very cool, I like the most the loading bar.. it isn’t KDE or OSX it is just cool!!
    I hope it will be also:
    - fast
    - with tabs more shaded

  14. Elroy Says:

    Rel, wasn’t the idea of Cairo you use it independent of the backend. So you have the same api for drawing to every possible thing. GLitz is just the cairo OpenGL backend, so presumably since this uses cairo it should use Glitz through cairo if that’s your backend. It shouldn’t use GLitz directly.

    Or am I just talkin’ out of my ass?

  15. Foxtrot Says:

    I think that this version looks slightly inconsistent. There is blue, there is beige, there is all kinds of stuff, and there seems to be a conflict between “old” clearlooks and clearlooks-cairo.

    If you’re going to use the flashy blue (which I think is looking good, btw), I’d recommend making more consistent use of it throughout the widgets as the theme develops further.

    Making the theme a bit more flashy makes it seem more like you can interact with it, and I welcome this change. Great work!

  16. Mystilleef Says:

    Hello,

    Brilliant job! Keep it up. One thing I’d love to see is more consistency with the focus rings. In current versions of Clearlooks, only entry widgets have focus rings. Why don’t textview widgets have focus rings, ala OS X? Otherwise, sweet!

  17. James Says:

    I’m with Phil. I am a scrollbar guy myself, so I really like the new colored scroll bar. It really make it easy to locate. I can see how it could be distracting to someone who uses a mouse wheel, but for me its great!

  18. Benni Says:

    As long as I’m able to disable the colored scrollbar I’m fine ^^

  19. Pete Says:

    The scrollbars are great, it all looks great. I’m glad to see such a well-designed theme with a clear focus behind it. Don’t forget that themes are extremely subject to bike-shedding - no one is going to be 100% happy with someone else’s aesthetic choices, and since it’s a topic that requires no technical expertise to comment upon folks like Richard are constantly deluged with comments like “it’s great except you must change this one small thing.” Paying too much heed to the bike-shedders invariably results in an even worse theme. Like many types of “art,” themes tend to work best when they represent primarily the strong vision of a single designer and don’t devolve into a slapdash hodge-podge of competing sensibilities. Designers are sometimes going to make choices that not everyone is happy with, because it’s physically impossible to please everyone and a huge waste of time to try. Great work, Richard - I appreciate your vision, and I think I’m not alone.

  20. Joel Says:

    Regarding the focus rings, how about going for something a bit more useful. A dotted ring inside buttons (like Windows) is hard to see and doesn’t really explain the idea of “widget focus” very well at all for novice users. I know on Windows the focus rings are mostly impossible to see for people with laptops or people viewing the screen at a distance.

    Perhaps even a gnome user preference could be implemented for localizing how to display “focus”, so you could choose between dotted lines, changing the widgets color, having a bigger drop-shadow, etc, because some work better for people with high-res displays, low contrast displays, viewing a long distance from display and so on.

    Bascially i think the idea of using dotted lines to represent focus is misguided and should be seriously re-thought from scatch.

  21. Benni Says:

    hovering over checkboxes und buttons looks a bit weird, but you probably already know this :)

  22. Russ Says:

    BTW, if you enable transparent panels, things don’t work quite right.

  23. George Says:

    I agree with Pete. It’s great to see the evolution of the theme through the blog, but people should stop ‘bike-shedding’. If you don’t like something, the source is there for you to edit :)

  24. Nikola Says:

    I’ve compiled it last night and all I can say is WOW! :-)
    I’ll compile Cairo from CVS, since it’s very, very slow now, but I’m sure it will become faster. Anyway, this looks awesome, great work!
    I don’t mind scrollbars, that’s what themes are for, main thing is to make this engine faster.

  25. Benni Says:

    don’t know how fast it is with cairo 1.0.0 but with cairo-cvs I don’t notice any speed difference to “clearlooks-old”.

    Is there a possibility for the close button to extend to the very border of the window. Would make closing it a lot more easier.

  26. Nikola Says:

    I’ve compiled cairo from CVS and speed difference is huge. It’s almost as fast as “regular” Clearlooks. I say “almost” ’cause I notice very tiny lag opening menus.

  27. Benni Says:

    after two days using it I have to admit that I really like the new scrollbar :)

  28. bvc Says:

    Looks good!
    For nvidia users…
    Option “RenderAccel” “true”
    speeds up cairo but locks hard to a manual reset my ubuntu breezy with clearlooks-cairo. Bummer….and yes I have the latest cairo etc…

    @Pete and George…
    wha? :headbang: clearlooks-devel has always strongly encourged feedback and that feedback strongly influenced clearlooks. That welcome of constructive criticism causing community spirit gave birth to a great gtk-engine. Thx clearlooks-devel!

  29. WereCat Says:

    Cairo doesn’t by default use glitz, even if it is compiled with it. The app (in this case clearlooks engine) must specifically ask cairo to initialize with glitz backend. I just hope clearlooks will do that, it should provide atleast some speed-up! And *any* speed-up on my laptop is very much welcomed, so without glitz I won’t be using clearlooks. I just don’t want the performance to drop even more. Any plans to make me and perhaps some others happy?

    And as a sidenote: clearlooks looks okayish, nothing out of ordinary. I just wish the scrollbars looked better, it looks odd when there’s a hard line between the lighter and the darker blue. Couldn’t it just be gradient filled?

  30. Nikola Says:

    I’ve compiled cairo with glitz backend. Should it speed things up, or it is case of placebo effect that I think it is a little bit faster?

  31. WereCat Says:

    Nikola: as I stated, glitz won’t be used unless the app specifically asks for it. And as far as I can see, clearlooks doesn’t do that. So I’d say it’s a placebo effect. I hope GTK+ will soon start using cairo/glitz combination for all drawing.

  32. Lokheed Says:

    To give a some advice from a Human Factors standpoint, you are overdoing the theme and hope you leave options to disable most of these changes. The candy-coated progress bar really needs a more definitive close line. The darkish blue you have chosen leaves the bar ‘blended’ into the background. The coloured scroll bars are a design flaw, a UI flaw that most have given reasons for why its a poor choice; even highlighting on mouseover is a poor UI design choice unless its focus is a very mild one.

    Like notices, signs, and warnings posted everywhere in our lives, the outcome is that we rarely read what is posted. How many times have you done something only to be pointed to a sign that warned against it or pointing towards it, in type 330 font right in front of you? How could I have missed that you might have said to yourself. You missed it because the data is no longer significant or important. If signs were reserved for truly the most important of information, then we would never have this problem, but with advertising everywhere, signs that do not hold much significance, and the plethora of other written form, is it any wonder why we dont encode much of what is written around us?

    I use this example in regards to highlighting and in regards to adding more colour and candy-like features (scrollbars for example) because in essence, this is to what level you working towards. And this is why its a negative UI design to overuse highlights…

    Other than going a little overboard on some parts, its a wonderful theme and your continued work into making it Cairo complient is much appreciated.

    Regards

  33. socceroos Says:

    Uuh, its the same as every other theme. Boring and cliché.

    When will Linux do something innovative and NEW with its off-the-pace desktop!

  34. Nikola Says:

    >Uuh, its the same as every other theme. Boring and cliché.

    It’s not the theme what is important here, it’s gtk engine. Later you can make whatever theme you like. And default theme should be boring and cliche, what’s WOW for you will probably be YUCK for me.

  35. Richard Stellingwerff Says:

    socceroos, I’m not Linux. I’m a mere mortal human being. Clearlooks was designed to be a simple looking theme. Look, if you’re so innovative, I’d like to see some good ideas from you. I’m always open for suggestions.

    And by the way, you’re judging *work in progress* screenshots. These aren’t final shots. But thank you for your wonderfully substantiated comments.

  36. Gabriele Says:

    Richard your work is simply great!

  37. Øivind Says:

    Bah, sorry for asking, but is the work done on sourceforge cvs or gnome cvs?

  38. Richard Stellingwerff Says:

    Øivind, the work is being done in GNOME CVS.

    Check it out with:
    cvs -z3 -q -d:pserver:anonymous@anoncvs.gnome.org:/cvs/gnome co gtk-engines

  39. bvc Says:

    Like always, if people do not like the choice of blue or colors, you can change them. You can also disable the scrollbar from being colored two diff ways.
    http://kwh.kernow-gb.com/~bvc/theme/screenshots/CL_Cairo-gperfect.jpg
    http://kwh.kernow-gb.com/~bvc/theme/gtk/clearlooks/cairo/Clearlooks-Cairo-gperfect.tar.gz

  40. Amaury Chamayou Says:

    I really like where this is going and I only have two suggestions :
    Could you do some slightly larger arrows for the combo box with the numbers that you can increase or decrease (sorry, I don’t know the exact technical name) and could you draw some bigger ticks for the tickboxes ?
    Other than that I really love Clearlooks, thanks a lot for it.

  41. SunChero Says:

    i ve seen your theme , and i know about lockheed version ..all i want to say here is just thanks ..you started this project .. than keep it going in your own , you already prooved your design capability ,try to bypass yourself .. you re the greatest
    for lockheed i will say , you have do code .. make your own work
    i would like to see what can richard do on making this theme more attractif and eye candy
    even if i desagree with the new colored scrollbar .. i would love to see his final version
    10x for your work

  42. ghaefb Says:

    @WereCat

    You said “glitz won’t be used unless the app specifically asks for it.”
    I’d like to know how to make an application to “ask” for glitz backend ?

    I’m developing with Mono.Cairo, and I’d like to try and see if glitz speeds things up.

    Is there any documentation on this subject ?
    Thanks

  43. Jon Says:

    It would be good if there were more ways to customise clearlooks this time, often clearlooks themes always look the sae except the colour scheme - how about letting thee designs change things like borders this time. Make is more like writing a css file?

  44. Bero Says:

    Check this:
    http://www.gnome-look.org/content/show.php?content=31128&vote=good&tan=5270204&PHPSESSID=23ac6bda0d2a8827b0bb47debdbbb941

  45. Stephen Says:

    Okay, so I’m going to be mildly annoying and add to the number of people who don’t like the coloured scroll bars etc. The slider handles have some potential, but there might be a bit too much detail.. maybe without the rectangle? The tab shading also seems to me to be muddying the look of the theme - less clear with the extra gradients. Also, the coloured check boxes and radio buttons are lower contrast. So I guess on the whole, the theme seems to be moving away from clear usability and towards flashiness :-(

    Anyhow, that is my personal taste. BUT!!!

    Can you eliminate the border on maximised scroll bars? For example, open a long text file in gedit and ‘fling’ your mouse over to the right hand side. When you click to try and grab the scroll bar, you miss, because there is a 1px or so border to the scroll bar, making it much slower to grab the scroll bar, because you have to make a minute adjustment instead of a broad mouse move. Compare this with firefox, and its slightly borked gtk rendering, which in this case results in a scroll bar that is jammed all the way to the right. Fitts Law stuff, basically.

  46. Leon Woestenberg Says:

    The small up/down arrows in “OptionMenu” and “ComboBox” have different vertical spacing inbetween them. What is the cause of this?

  47. Carl Says:

    Hi, Clearlooks is wonderfull!

    In the 0.6.2, there was gradient on menu highlight, now, it’s plain color… Will you implement the beautifull gradient of previous version?

    Thanks for the great work.

    P.S. I use AfterStep, wich have the capacity of colorizing gtk apps according to its color scheme. Combined with clearlooks, results are impressive!
    http://agora.ulaval.ca/~cabol36/capture_screen.1134067430.png

  48. bvc Says:

    Is there a projected release date?

  49. Andre Says:

    I’m glad that we have you on the gnome side instead of loosing you to Microsoft.
    You have a good feeling of what is eye candy AND useful.