{"id":931,"date":"2024-08-08T11:35:19","date_gmt":"2024-08-08T02:35:19","guid":{"rendered":"https:\/\/blogs.igalia.com\/gyuyoung\/?p=931"},"modified":"2024-08-09T10:52:19","modified_gmt":"2024-08-09T01:52:19","slug":"chrome-ios-browser-on-blink","status":"publish","type":"post","link":"https:\/\/blogs.igalia.com\/gyuyoung\/2024\/08\/08\/chrome-ios-browser-on-blink\/","title":{"rendered":"Chrome iOS Browser on Blink"},"content":{"rendered":"\nAt the beginning of this year, Apple allowed third-party browser engines, such as Gecko and Blink, to be used on iOS and iPadOS. The Chromium community has been developing Chrome iOS based on Blink as an experimental project. This post provides an overview of the project and examines its progress during the first half of 2024.\n\n\n\n\n<h2 class=\"wp-block-heading\">Structure of Chrome iOS (w\/blink)<\/h2>\n\n\n\n\nFirst, let&#8217;s look at the overall structure of Chrome iOS. This simple diagram illustrates the structure of Chrome iOS.\n\n\n\n<img decoding=\"async\" style=\"width: 650px\" src=\"https:\/\/lh7-rt.googleusercontent.com\/slidesz\/AGV_vUeHzyLvXD8z4nxB3LFPiR0vZApfZd36Kc4Bb6vgo9B-ytHTBHG-Ci88R2MPM5IJ5jOeQ1aNtLJK3hNcmuhUByeZ668Pm6vkD8KEaiQFcOWuh2HR753b_YDdYh2sAoPL6dp6riKorqpuQJoX9tLlAC06HWn_cXk1=s2048?key=9OljZgOtkIV9bT6F0e_vYw\"><br><br>\n\n\n\nThe UI components are placed in the <em>\/\/ios\/chrome <\/em>directory, which functions similarly to the \/\/chrome layer in other implementations. The <em>\/\/ios\/web<\/em>&nbsp;layer also&nbsp;provides APIs for its initialization, content navigation, presenting UI callbacks, saving or restoring navigation sessions and browser data, and more. The <em>\/\/ios\/web\/public<\/em> defines the public APIs, while various other directories within \/\/ios\/web implement them. The implementation of these public APIs invokes WebKit APIs to provide the necessary functionalities.<br><br>For Chrome iOS based on Blink, the developers decided to reuse the existing iOS Chrome UI implementation last year. Thus, one of the main developments of Chrome iOS based on Blink happened in the <em><strong>\/\/ios\/web\/content<\/strong> <\/em>directory which is the rectangle filled by a green color, created to implement the public APIs using Blink. As you can see in the below diagram, they added the <strong>content<\/strong> directory to <em>\/\/ios\/web<\/em> directory and implemented the public APIs using Blink&#8217;s content APIs. Notably, they&#8217;ve introduced a ContentWebState as a prototype implementation of WebState to replace the class in <em>\/\/ios\/web\/content\/web_state<\/em>. However, as shown in the diagram, the directory currently only includes in five components: <em>web_state<\/em>, <em>navigation<\/em>, <em>UI<\/em>, <em>init<\/em>, and <em>js_messaging<\/em>. Therefore, more components need to be implemented for Chrome iOS on Blink.\n\n\n\n\n<h2 class=\"wp-block-heading\">Igalia Contributions<\/h2>\n\n\n\n\nIgalia has been contributing to this project since the project was made public by the community. We\u2019ve worked mainly on UI related components e.g. file and color chooser, context menu, select list popup and integration with Chrome IOS UI. The pictures below are the screen captures of the chooser implementations that we contributed.<br><br><img decoding=\"async\" width=\"140px;\" height=\"304px;\" src=\"https:\/\/lh7-rt.googleusercontent.com\/slidesz\/AGV_vUeEIgEL_6TH5pDTGQPsY0KoMUrd7oRZM1E7Ust1UhWgGfhYLv_YJDKR8dpAzdIFji1BOXVI9ng25ZhaMtE8Pze3xfnyMIR8Fmoir-KBnzY-51Uvixuvy_v7NHyoxvQYTSEsAq7zhPsj19_tJXz9b4I0pI4XeNll=s2048?key=9OljZgOtkIV9bT6F0e_vYw\">      <img decoding=\"async\" width=\"140px;\" height=\"304px;\" src=\"https:\/\/lh7-rt.googleusercontent.com\/slidesz\/AGV_vUec2JEByGcIGIgIGBAP8lMOI1YtC_bs93b97G_jF88xLCjEYFnbmXl6gvgvqgh3hi3BB06rx2yHViIw8brWIRXVAB-QHtwNatdqtzi9YP0EPgnUDrSJhqiAZxPCarSLXI5oUYlAsantwrDSo-M0BZtA5_Y_Jl7y=s2048?key=9OljZgOtkIV9bT6F0e_vYw\">       <img decoding=\"async\" width=\"145px;\" height=\"304px;\" src=\"https:\/\/lh7-rt.googleusercontent.com\/slidesz\/AGV_vUcVqGVl_wb7WBmXC9TP28JwiELOLBrcO2YVvWS9qpAWZgpPdOHlRbMEWonECK5jNKt-_YqZvf9ptSjaJV1b7cdTKhV2Eytx4CaBLUG-6tFfsc7Uo0wXRs9SYNHaSy16TF4B-IYxJYNH8Sdv5hfqSTlgCAaHrsfH=s2048?key=9OljZgOtkIV9bT6F0e_vYw\"><br>\n\n\n\n<br>We also helped with the features of multimedia such as the video screen capture, hardware encoding\/decoding, and audio recording. <br><br>We&#8217;ve worked on a few testing frameworks (e.g. unit tests, browser and web tests). Also, we&#8217;ve filtered out unsupported tests and failed tests. Specifically, we&#8217;ve implemented the infrastructure to run the web tests on the simulator. For your information, the test coverage of the web test on iOS Blink was about 72.2% and the pass ratio among the working tests was 91.83% at the beginning of this year. Then we&#8217;ve been maintaining <a href=\"https:\/\/ci.chromium.org\/ui\/p\/chromium\/builders\/ci\/ios-blink-dbg-fyi\">the bot for Chrome iOS on Blink<\/a> to keep the build and testing because keeping build and running tests are crucial for Blink to bring up to Chrome iOS.<br><br>Besides we supported the <a href=\"https:\/\/chromium.googlesource.com\/chromium\/src\/+\/main\/docs\/ios\/build_instructions.md#remote-debugging-with-devtools-on-blink-for-ios\">remote debugging with DevTools on Blink for iOS<\/a>. Now developers are able to remotely use DevTools in a host machine (e.g. Mac) and inspect&nbsp;Chrome or Content Shell&nbsp;for development.<br><br>Moreover, we&#8217;ve worked on graphics stuff related to compositing and rendering. For instance, we supported the metal on ANGLE as well as fixed bugs in the graphics layers.<br><br>You can find the detailed contributions patch list <a href=\"https:\/\/chromium-review.googlesource.com\/q\/status:merged+author:@igalia.com+iOS,100\">here<\/a>.\n\n\n\n\n<h2 class=\"wp-block-heading\">The major changes for H1 2024 <\/h2>\n\n\n\n\nNow, let\u2019s review the major changes during the first half of this year. Firstly, the minimum iOS SDK version was bumped up to 17.4 which supports the <a href=\"https:\/\/developer.apple.com\/documentation\/browserenginekit\">BrowserEngineKit<\/a> library. And the [browser\/unit] tests began to run on <a href=\"https:\/\/ci.chromium.org\/ui\/p\/chromium\/builders\/ci\/ios-blink-dbg-fyi\">the ios-blink bot<\/a> with the 17.4 SDK.<br><br>By reusing the existing iOS Chrome UI, ContentWebState was introduced as a prototype implementation of WebState. During H1 2024, new methods were added further or previously empty methods were implemented. For example, <em>GetVirtualKeyboardHeight<\/em>, <em>OnVisibilityChanged<\/em>, <em>DidFinishLoad<\/em>, <em>DidFailLoad<\/em> methods were implemented.<br><br>BrowserEngineKit APIs that were announced by Apple to support third-party browser engines on iOS and iPadOS have been applied to JIT, GPU, network, and content process creation.<br><br>As mentioned above, Igalia implemented a color chooser, a file chooser, and a context menu during the period.<br><br>Lastly, the package size was reduced by removing duplicated resources.\n\n\n\n\n<h2 class=\"wp-block-heading\">Remaining Tasks<\/h2>\n\n\n\n\nWe&#8217;ve briefly looked at the current status of the project so far, but many functionalities still need to be supported. For example, regarding UI features, functionalities such as printing preview, download, text selection, request desktop site, zoom text, translate, find in page, and touch events are not yet implemented or are not functioning correctly<br>Moreover, there are numerous failing or skipped tests in unit tests, browser tests, and web tests. Ensuring that these tests are enabled and passing the test should also be a key focus moving forward.\n\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n\nThe Blink-based port of Chrome iOS is a large and laborious project. Igalia has made significant contributions to this project and while it is still in an early stage, more features, infrastructure and tools need to be ported to Blink. Anyhow, we believe that we are on the right track for eventually replacing WebKit by Blink on Chromium related products for iOS.\n","protected":false},"excerpt":{"rendered":"<p>At the beginning of this year, Apple allowed third-party browser engines, such as Gecko and Blink, to be used on iOS and iPadOS. The Chromium community has been developing Chrome iOS based on Blink as an experimental project. This post provides an overview of the project and examines its progress during the first half of [&hellip;]<\/p>\n","protected":false},"author":52,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[19,4,18],"class_list":["post-931","post","type-post","status-publish","format-standard","hentry","category-igalia-chromium","tag-blink","tag-chromium","tag-ios"],"_links":{"self":[{"href":"https:\/\/blogs.igalia.com\/gyuyoung\/wp-json\/wp\/v2\/posts\/931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.igalia.com\/gyuyoung\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.igalia.com\/gyuyoung\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.igalia.com\/gyuyoung\/wp-json\/wp\/v2\/users\/52"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.igalia.com\/gyuyoung\/wp-json\/wp\/v2\/comments?post=931"}],"version-history":[{"count":79,"href":"https:\/\/blogs.igalia.com\/gyuyoung\/wp-json\/wp\/v2\/posts\/931\/revisions"}],"predecessor-version":[{"id":1013,"href":"https:\/\/blogs.igalia.com\/gyuyoung\/wp-json\/wp\/v2\/posts\/931\/revisions\/1013"}],"wp:attachment":[{"href":"https:\/\/blogs.igalia.com\/gyuyoung\/wp-json\/wp\/v2\/media?parent=931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.igalia.com\/gyuyoung\/wp-json\/wp\/v2\/categories?post=931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.igalia.com\/gyuyoung\/wp-json\/wp\/v2\/tags?post=931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}