New media controls in WebKitGtk+

So it looks like my patch for the rework of the WebKitGtk+ media controls was finally landed.

First I would like to thank Igalia for giving me some time to complete this task, which took some work and began at WebKitGtk+ hackfest some time ago with Žan Doberšek and Jon McCann.

Starting point was:

Starting point

As you can see the controls look like an old Gtk+ application without any theming. Jon suggested that we could began with mimicing Chromium controls as they look closer to any modern themed GNOME application and adapt them to use the GNOME symbolic icons and keep some other stuff like the volume bar, but of course making it look nicer.

What was done:

  • Adding the GNOME symbolic icon theme and a method to replace the normal stock icons, though we keep them as fallback.
  • Deep adaptation of Chromium CSS and C++ code to make it suit the GNOME requirements.
  • Some buttons fell off the design, like seeking backwards and forward.
  • Aligned the elements with the pixel ruler to make them as close to perfect as possible in all conditions (as some buttons are hidden in certain situations, like fullscreen, volume…).
  • Fixed a bug about the buffering ranges that was in trunk at that point, but was independent of the code I was cooking.
  • Removed as much of the C++ code as possible to deviate the drawing to CSS, which is more maintainable for design purposes. The only things that are still painted with C++ code are the slider tracks, which depend on parameters than cannot be specified in CSS, like the buffering ranges and the volume (which was not before, but I introduced for design coherence).
  • Removed the focus ring which was making the controls uglier.
  • Removed the dead code.
  • New baselines for the tests, including the pixel ones. Flagged also some tests that are (and will) not working in Chromium either.

I had a small issue with a Chromium guy landing a patch that forced me to change the display of some components from -webkit-box to -webkit-flex and of course, rebasing all related tests. This created a small delay in landing the patch, but it finally did as 143463.

And the result is the following:
New media controls

I don’t know about you guys, but I like it!


  1. It’s not that I hate the “front runner” (meaning fiorfex), it’s more like I got fed up with it’s UI back in the days when it wasn’t following GTK styles and switched over to epiphany. The updates in fiorfex since then haven’t convinced me to switch back (rather convinced me to not put my hands on it) and in the meantime new fast and standards compliant FLOSS engine has emerged (WebKit). Also, when you don’t use something, you have tendency to highlight the things it does bad rather than those in which it excels ;-)As long as codecs support in video and audio tags go, I was myself against the fiorfex decision to bundle ogg, theora and vorbis with it. While I understand the need to having some base set of codecs which would be granted to be supported by most browsers (although, about 70% people still uses IE, which does not seem to have any plans at supporting video/audio tags) limiting it solely to those is IMHO a bad step. I like the webkitgtk approach where the support is through gstreamer, which means you have those three above mentioned granted (as these are part of practically any gstreamer installation) plus you have additional support for others as long as you install them. It also uses system wide library instead of a bundled one, which is the right thing to do (TM) in *nix land.When choosing a browser, I choose based on it’s usability, speed, features and stability, not on what kind of promotion it’s engine authors try to do.

Leave a Reply

Your email address will not be published. Required fields are marked *

What is 10 + 5 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)