WebUI - HackMD

# WebUI [WebUI](https://chromium.googlesource.com/chromium/src/+/HEAD/docs/webui_explainer.md) is a term used to describe parts of Chrome's UI implemented with web technologies like HTML, CSS... chrome:// links (e.. chrome://settings, chrome://history) is powered by WebUI. We also have [WebUI bubble view](https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/ui/views/bubble/webui_bubble_dialog_view.h;l=25;drc=dab2d7d8039c805038cd357dd46e7b298728f381). As these views are implemented in Chrome, they can manage Chrome itself. Unlike usual web pages, settings page requires many different privacy and security services, so it can utilize WebUI power. Today, let's understand the overview of WebUI from omnibox and tab search example. ## Interaction with renderer WebUI interacts with renderer via mojo. For example, [OmniboxPopupUI](https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/ui/webui/omnibox_popup/omnibox_popup_ui.h;l=27;drc=45079176ea38506889f7d745b3ff64a1ebd5286e) is one of the WebUI view. It inherits [MojoWebUIController](https://source.chromium.org/chromium/chromium/src/+/main:ui/webui/mojo_web_ui_controller.h;l=26;drc=00194f3c72faa8dbd9e8e6fff05f82ce86019468) who is a general interface for the system which uses Mojo. Going back to omnibox, [omnibox.mojom](https://source.chromium.org/chromium/chromium/src/+/main:components/omnibox/browser/omnibox.mojom) is a mojo API used between renderer and browser to create WebUI omnibox. [PageHandler](https://source.chromium.org/chromium/chromium/src/+/main:components/omnibox/browser/omnibox.mojom;l=119;drc=00194f3c72faa8dbd9e8e6fff05f82ce86019468) is an interface to request Browser from WebUI page and [Page](https://source.chromium.org/chromium/chromium/src/+/main:components/omnibox/browser/omnibox.mojom;l=174;drc=00194f3c72faa8dbd9e8e6fff05f82ce86019468) requests WebUI from the browser. On Chrome Browser side, PageHandler interface is [Bind](https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/ui/webui/omnibox_popup/omnibox_popup_ui.cc;l=51;drc=00194f3c72faa8dbd9e8e6fff05f82ce86019468) to OmniboxPopupUi and this is called from [web_ui_controller_interface_binder](https://source.chromium.org/chromium/chromium/src/+/main:content/public/browser/web_ui_controller_interface_binder.h;l=49;drc=00194f3c72faa8dbd9e8e6fff05f82ce86019468). ## TabSearch UI Let's see the case in TabSearchBubbleView. TabSearchBubble is the one you can see when clicking the top left of the Chrome window. It shows a list of the opened tabs and recently opend tabs. TabSearch is a bubble, so it uses [MojoBubbleWevUIController](https://source.chromium.org/chromium/chromium/src/+/main:ui/webui/mojo_bubble_web_ui_controller.cc;l=11;drc=00194f3c72faa8dbd9e8e6fff05f82ce86019468) instead of [MojoWebUIController](https://source.chromium.org/chromium/chromium/src/+/main:ui/webui/mojo_web_ui_controller.h;l=26;drc=00194f3c72faa8dbd9e8e6fff05f82ce86019468). Bubble controller has a class [Embedder](https://source.chromium.org/chromium/chromium/src/+/main:ui/webui/mojo_bubble_web_ui_controller.h;l=26-32;drc=3e1a26c44c024d97dc9a4c09bbc6a2365398ca2c) and it can show and close ui from the API `ShowUI`, `CloseUI`, `ShowContextMenu` and `HideContextMenu`. For tab search, it uses [Embedder::ShowUI](https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/ui/webui/tab_search/tab_search_page_handler.cc;l=636;drc=00194f3c72faa8dbd9e8e6fff05f82ce86019468) from [tab_search.mojom ShowUI](https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/ui/webui/tab_search/tab_search.mojom;l=268;drc=00194f3c72faa8dbd9e8e6fff05f82ce86019468). ## Very very busy day~