{"action":"created","issue":{"url":"https://api.github.com/repos/servo/servo/issues/7659","labels_url":"https://api.github.com/repos/servo/servo/issues/7659/labels{/name}","comments_url":"https://api.github.com/repos/servo/servo/issues/7659/comments","events_url":"https://api.github.com/repos/servo/servo/issues/7659/events","html_url":"https://github.com/servo/servo/issues/7659","id":107020841,"number":7659,"title":"Make it possible to draw the titlebar and clip the window in HTML","user":{"login":"paulrouget","id":373579,"avatar_url":"https://avatars.githubusercontent.com/u/373579?v=3","gravatar_id":"","url":"https://api.github.com/users/paulrouget","html_url":"https://github.com/paulrouget","followers_url":"https://api.github.com/users/paulrouget/followers","following_url":"https://api.github.com/users/paulrouget/following{/other_user}","gists_url":"https://api.github.com/users/paulrouget/gists{/gist_id}","starred_url":"https://api.github.com/users/paulrouget/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/paulrouget/subscriptions","organizations_url":"https://api.github.com/users/paulrouget/orgs","repos_url":"https://api.github.com/users/paulrouget/repos","events_url":"https://api.github.com/users/paulrouget/events{/privacy}","received_events_url":"https://api.github.com/users/paulrouget/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/servo/servo/labels/A-gfx/compositing","name":"A-gfx/compositing","color":"d7e102"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-09-17T16:18:18Z","updated_at":"2015-09-21T11:06:13Z","closed_at":null,"body":"For browser.html, we want to draw the titlebar ourselves.\r\n\r\nOn osx, we need to be able to draw a window with rounded corners. the browser.html HTML page would use `html {border-radius:6px}`. To support that, we need to:\r\n\r\n- add an option to start servo with no titlebar\r\n- create the glutin window with `with_decorations(false).with_transparency(true)`;\r\n- in rust-layers, `render_scene` should use a transparent clear color;\r\n- glutin needs to expose a `invalidate_window_shape` method, or something like that, that would call the cocoa method `window.invalidateShadow()` to invalidate the shadow once the border radius has been painted.\r\n\r\nWith all of this, it appears to work:\r\n\r\n<img width=\"324\" alt=\"screen shot 2015-09-17 at 18 04 38\" src=\"https://cloud.githubusercontent.com/assets/373579/9938660/b366b882-5d66-11e5-9b90-e2b9d16f6db5.png\">\r\n\r\nThere are some more issues (the border radius doesn't clip its content, see https://github.com/servo/servo/issues/7575, and for some reasons vertical coordinates are messed up), but these can be fixed later.\r\n\r\nCan someone tell me if this approach makes sense? (/cc @tomaka @glennw)\r\n\r\nLetting HTML define the shape of the window is nice, but it's not a hard requirement. Maybe instead of using `border-radius`, we can clip the window in the compositor directly, or expose a function in Glutin to clip the window, or maybe always add rounded corner to decoration-less windows.\r\n\r\nPS: we will need more things to make the titlebar fully functional:\r\n- setting the dragging region with CSS: https://github.com/servo/servo/issues/7408\r\n- support closing, maximizing and minimizing the window from JS (window controls will be built in HTML/CSS). This will be possible with https://github.com/servo/servo/issues/7379"},"comment":{"url":"https://api.github.com/repos/servo/servo/issues/comments/141943307","html_url":"https://github.com/servo/servo/issues/7659#issuecomment-141943307","issue_url":"https://api.github.com/repos/servo/servo/issues/7659","id":141943307,"user":{"login":"paulrouget","id":373579,"avatar_url":"https://avatars.githubusercontent.com/u/373579?v=3","gravatar_id":"","url":"https://api.github.com/users/paulrouget","html_url":"https://github.com/paulrouget","followers_url":"https://api.github.com/users/paulrouget/followers","following_url":"https://api.github.com/users/paulrouget/following{/other_user}","gists_url":"https://api.github.com/users/paulrouget/gists{/gist_id}","starred_url":"https://api.github.com/users/paulrouget/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/paulrouget/subscriptions","organizations_url":"https://api.github.com/users/paulrouget/orgs","repos_url":"https://api.github.com/users/paulrouget/repos","events_url":"https://api.github.com/users/paulrouget/events{/privacy}","received_events_url":"https://api.github.com/users/paulrouget/received_events","type":"User","site_admin":false},"created_at":"2015-09-21T11:06:13Z","updated_at":"2015-09-21T11:06:13Z","body":"Started working on this.\r\n\r\nFound a better way to properly draw decoration-less cocoa windows: https://github.com/tomaka/glutin/pull/606"}}