{"id":341,"date":"2013-02-20T19:06:32","date_gmt":"2013-02-20T18:06:32","guid":{"rendered":"http:\/\/blogs.igalia.com\/xrcalvar\/?p=341"},"modified":"2013-04-19T10:53:57","modified_gmt":"2013-04-19T08:53:57","slug":"new-media-controls-in-webkitgtk","status":"publish","type":"post","link":"https:\/\/blogs.igalia.com\/xrcalvar\/2013\/02\/20\/new-media-controls-in-webkitgtk\/","title":{"rendered":"New media controls in WebKitGtk+"},"content":{"rendered":"<p>So it looks like my <a href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=83869\">patch<\/a> for the rework of the <a href=\"http:\/\/webkitgtk.org\/\">WebKitGtk+<\/a> media controls was finally landed.<\/p>\n<p>First I would like to thank <a href=\"http:\/\/www.igalia.com\">Igalia<\/a> for giving me some time to complete this task, which took some work and began at <a href=\"https:\/\/live.gnome.org\/Hackfests\/WebKitGTK2012\">WebKitGtk+ hackfest<\/a> some time ago with <a href=\"http:\/\/falcosigh.wordpress.com\/\">\u017dan Dober\u0161ek<\/a> and <a href=\"http:\/\/blogs.gnome.org\/mccann\/\">Jon McCann<\/a>.<\/p>\n<p>Starting point was:<\/p>\n<p align=\"center\"><a href=\"http:\/\/blogs.igalia.com\/xrcalvar\/files\/2013\/02\/before.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blogs.igalia.com\/xrcalvar\/files\/2013\/02\/before-300x169.png\" alt=\"Starting point\" width=\"300\" height=\"169\" class=\"aligncenter size-medium wp-image-343\" srcset=\"https:\/\/blogs.igalia.com\/xrcalvar\/files\/2013\/02\/before-300x169.png 300w, https:\/\/blogs.igalia.com\/xrcalvar\/files\/2013\/02\/before.png 520w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>As you can see the controls look like an old <a href=\"http:\/\/www.gtk.org\/\">Gtk+<\/a> application without any theming. Jon suggested that we could began with mimicing <a href=\"http:\/\/www.chromium.org\/Home\">Chromium<\/a> controls as they look closer to any modern themed <a href=\"http:\/\/www.gnome.org\/\">GNOME<\/a> 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.<\/p>\n<p>What was done:<\/p>\n<ul>\n<li>Adding the GNOME symbolic icon theme and a method to replace the normal stock icons, though we keep them as fallback.<\/li>\n<li>Deep adaptation of Chromium CSS and C++ code to make it suit the GNOME requirements.<\/li>\n<li>Some buttons fell off the design, like seeking backwards and forward.<\/li>\n<li>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&#8230;).<\/li>\n<li>Fixed a <a href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=105319\">bug<\/a> about the buffering ranges that was in trunk at that point, but was independent of the code I was cooking.<\/li>\n<li>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).<\/li>\n<li>Removed the focus ring which was making the controls uglier.<\/li>\n<li>Removed the dead code.<\/li>\n<li>New baselines for the tests, including the pixel ones. Flagged also some tests that are (and will) not working in Chromium either.<\/li>\n<\/ul>\n<p>I had a small issue with a Chromium guy landing a patch that forced me to change the <code>display<\/code> of some components from <code>-webkit-box<\/code> to <code>-webkit-flex<\/code> and of course, rebasing all related tests. This created a small delay in landing the patch, but it finally did as <a href=\"http:\/\/trac.webkit.org\/changeset\/143463\">143463<\/a>.<\/p>\n<p>And the result is the following:<br \/>\n<a href=\"http:\/\/blogs.igalia.com\/xrcalvar\/files\/2013\/02\/after.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blogs.igalia.com\/xrcalvar\/files\/2013\/02\/after.png\" alt=\"New media controls \" width=\"520\" height=\"296\" class=\"aligncenter size-full wp-image-342\" srcset=\"https:\/\/blogs.igalia.com\/xrcalvar\/files\/2013\/02\/after.png 520w, https:\/\/blogs.igalia.com\/xrcalvar\/files\/2013\/02\/after-300x170.png 300w\" sizes=\"auto, (max-width: 520px) 100vw, 520px\" \/><\/a><\/p>\n<p>I don\u2019t know about you guys, but I like it!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <a href=\"https:\/\/blogs.igalia.com\/xrcalvar\/2013\/02\/20\/new-media-controls-in-webkitgtk\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":35,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,7,8,9,43,44,11],"tags":[17,24,41,42],"class_list":["post-341","post","type-post","status-publish","format-standard","hentry","category-gnome","category-igaliacom","category-planet-gnome","category-planet-gpul","category-planet-igalia","category-planet-webkit","category-planet-webkitgtk","category-planeta-gnome-hispano","tag-igalia","tag-multimedia","tag-webkit","tag-webkitgtk"],"_links":{"self":[{"href":"https:\/\/blogs.igalia.com\/xrcalvar\/wp-json\/wp\/v2\/posts\/341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.igalia.com\/xrcalvar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.igalia.com\/xrcalvar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.igalia.com\/xrcalvar\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.igalia.com\/xrcalvar\/wp-json\/wp\/v2\/comments?post=341"}],"version-history":[{"count":26,"href":"https:\/\/blogs.igalia.com\/xrcalvar\/wp-json\/wp\/v2\/posts\/341\/revisions"}],"predecessor-version":[{"id":649,"href":"https:\/\/blogs.igalia.com\/xrcalvar\/wp-json\/wp\/v2\/posts\/341\/revisions\/649"}],"wp:attachment":[{"href":"https:\/\/blogs.igalia.com\/xrcalvar\/wp-json\/wp\/v2\/media?parent=341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.igalia.com\/xrcalvar\/wp-json\/wp\/v2\/categories?post=341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.igalia.com\/xrcalvar\/wp-json\/wp\/v2\/tags?post=341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}