chromium UI 简要解析

概述

chromium 源码十分庞大，本文只是简要介绍。 chrome 浏览器对使用者来说最直观的也是最先接触到的就是其 UI，而且会发现 chrome 客户端在各个平台上表现（UI 和操作）基本上完全一致。结合其源码来看，chrome 自己实现了一套 UI 组件，可以充分解决外观不一致、功能受限、性能瓶颈、维护成本等问题。

View 基类

通过简单了解 View（ui/views/view.h）类，会发现基本所有的基础组件（Button、Menu、Table等 ui/views/controls目录下）都继承自 View 类，该类有一个核心的虚函数 OnPaint函数，子类通过实现 OnPaint 函数来实现自己的绘制。

cpp 复制代码

virtual void OnPaint(gfx::Canvas* canvas);     // 绘制方法

在进一步了解 gfx::Canvas会发现，gfx::Canvas是 Chromium 中的 2D 图形绘制抽象层，它是一个高级的绘图 API 包装器，主要基于 Google 的 Skia 图形库构建。

浏览器 UI（browser UI）

上面所介绍的是 chrome 中整体跨平台 UI 组件的基本类型，而真正实现我们看到的浏览器 UI 在 chrome/browser/ui/ 目录中，该目录中有两个与 UI 视觉展示特别相关的模块：

Views实现 (chrome/browser/ui/views/) - 基于Views框架的具体UI实现，如下图中红色部分，主要的菜单入口以及其菜单的二级目录。整体界面的主要入口在 browser_view.h（chrome/browser/ui/views/frame）。
WebUI (chrome/browser/ui/webui/) - 基于Web技术的UI组件，类似在地址栏中输入如下的部分，跳转到 chrome 自带的页面，它使用HTML、CSS、JavaScript 等 Web 技术来构建 Chrome 浏览器的各种内置页面和设置界面。

Compositor

在 ui/compositor 目录下。在未深入了解源码之前，一直没有想到在 UI 层居然也有一个 Compositor，对于我当前的认知来说，这个合成器是专门给浏览器窗口、工具栏、菜单、按钮、UI动画等工作的。从 cc/README.md可以看出，render 中的 Blink 和 ui 都是使用 cc。

plain 复制代码

This directory contains a compositor, used in both the renderer and the browser. In the renderer, Blink is the client. In the browser, both ui and Android browser compositor are the clients.

从描述来看，大概层次关系如下。