chromium UI 简要解析

概述

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

View 基类

通过简单了解 Viewui/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.hchrome/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.

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

相关推荐
先吃饱再说11 分钟前
React 组件通信:从 Props 单向传递到自定义事件
前端·react.js·前端框架
swipe16 分钟前
05|(前端转后全栈)不手写一堆 SQL,后端怎么操作数据库?MyBatis-Plus 入门
前端·后端·全栈
swipe20 分钟前
04|(前端转后全栈)前端状态为什么不够用?从页面数据到 MySQL 持久化
前端·后端·全栈
橘子星21 分钟前
别光看教程!手把手拆解 React Todo 项目,一文吃透 5 个核心概念
前端·javascript
大白要努力!27 分钟前
纯前端实现 PDF 加水印工具 —— 零后端、支持中文、实时预览
前端·pdf·html
石小石Orz29 分钟前
TRAE SOLO实战:实现一个桌面3D助手
前端·人工智能
蜡台35 分钟前
使用 uni-popup 实现数据选择器Data-Picker
前端·javascript·html·uniapp·uni-popup·data-picker
拆房老料36 分钟前
BaseMetas FileView 1.2.0 发布:Office/WPS 大文件预览与内存安全优化实测
前端·产品运营·开源软件
blns_yxl39 分钟前
Promise封装Fetch + 重试机制(HTML+JS)
前端·javascript·html
Elastic 中国社区官方博客44 分钟前
使用重新设计的 AutoOps 更快地进行 Elasticsearch 问题排查
大数据·运维·前端·人工智能·elasticsearch·搜索引擎·全文检索