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.

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

相关推荐
u01110267530 分钟前
图片处理接口如何统一错误信息 前端提示与后端错误码设计
前端·状态模式
福兮说44 分钟前
浏览器里把 iPhone 的 HEIC 转成 JPG:Chrome 解不开、转完大了七成、拍摄时间全丢,六个坑实测
前端·javascript·图像处理·chrome·ios·iphone·heic
libokaifa1 小时前
把语音模型塞进手机:sherpa-onnx 在 Android 上的 ASR / TTS
前端
deli0071 小时前
DLA 枝晶生长实测:5000 个粒子集体停摆之后,分形维数收敛到 1.70
前端
IT_陈寒2 小时前
Redis卡顿的锅,这次真不是大key的错
前端·人工智能·后端
可乐鸡翅yeah_2 小时前
video.js 集成 hls.js 开发 M3U8 播放器,新手高频踩坑
开发语言·前端·javascript·后端·ecmascript·m3u8·音视频在线播放
程序猿追2 小时前
HarmonyOS 6 上做个极简浏览器:Web 组件 + 前进后退 + 加载进度
前端·华为·harmonyos
沐沐师2 小时前
Mybatis 框架教程
前端
三天不学习2 小时前
Tailwind CSS 快速入门(2026 版):从 v4 零配置上手,到「该不该用、怎么用好」的选型实战
前端·css·tailwind
明月_清风2 小时前
面对陌生的 GitHub 项目无从下手?这 4 个网站帮你快速读懂源码
前端·后端·github