chromium: ui控件的实现

原创 已于 2025-05-13 15:43:11 修改 · 927 阅读 · 27 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ui #chromium

于 2025-05-13 15:42:39 首次发布

在chromium浏览器中，有两种显示部分。一个是显示网页的部分我们叫它embeded内容，用webui实现。其他部分就是非webui，比如菜单栏，url输入框，前进后退按钮。

一、WebUI

WebUI 是指：

一套专门用于构建基于 HTML/CSS/JS 的内部网页界面系统，运行在 renderer process 中，但与浏览器核心交互。

示例：

  • chrome://settings/ 设置页面

  • chrome://bookmarks/ 书签管理器

  • chrome://flags/ 实验功能开关界面

这些页面虽然运行在浏览器内部，但其实是用 HTML/CSS/JS 构建的，就像普通网页一样，但具有与浏览器进程通信的特权。使用 WebUIController、Mojo 等机制桥接 C++ ↔ JS。

典型路径：

src/chrome/browser/ui/webui/       // 控制器类（C++）
src/chrome/browser/resources/      // HTML/JS/CSS 资源

二、Chromium 的非 WebUI 界面：Views 系统

Chromium 浏览器自身的 UI（浏览器框架壳）是用一个名叫 Views 的 C++ UI 框架开发的：

它包括：

  • 地址栏（Omnibox）

  • 返回 / 前进 / 刷新 / Home 按钮

  • 工具栏、标签栏（TabStrip）

  • 浏览器主菜单（... 下拉菜单）

实现位置：

src/ui/views/                         # Views 基础控件
src/chrome/browser/ui/views/         # 浏览器的主界面 UI 实现
src/chrome/browser/ui/views/toolbar/ # 工具栏相关控件
src/chrome/browser/ui/views/location_bar/ # 地址栏控件

  • 可以参考代码：

# 地址栏控件：
chrome/browser/ui/views/location_bar/location_bar_view.cc

# 工具栏控件：
chrome/browser/ui/views/toolbar/toolbar_view.cc

# 主窗口：
chrome/browser/ui/views/frame/browser_view.cc

🔹1. 为什么 Views 能做到跨平台？

Chromium 使用了一整套自研的 平台抽象 UI 框架，包括：

层次作用框架 / 组件
UI 控件层通用 UI 控件（按钮、输入框、列表等）ui/views
绘图层负责绘制矢量图、文字、位图等Skia（跨平台绘图引擎）
平台适配层提供原生窗口、输入事件、光标等ui/platform_window/ + base/message_loop/

✅ 控件定义是“平台无关”的（统一用 C++ 实现）：

比如 Label, Button, Textfield，在 ui/views/controls/ 目录下是统一的 C++ 类，不依赖平台 GUI 框架。

✅ 但绘图和窗口管理是“平台相关”的：

  • macOS → 使用 CoreAnimation/NSWindow + Skia

  • Windows → 使用 HWND + Skia + Direct2D/GDI

  • Linux → 使用 X11/Wayland + Skia

Skia 是 Google 自研的跨平台 2D 绘图库，Android、Chrome 都用它。

🔹2. 合成线程影响所有 UI，是为什么？

Chromium 的 整个图形系统（包括 WebContents、Views）都依赖 Compositor 合成输出！

Chromium 图形渲染总流程：

所以不论是 Web 页面还是原生 UI 控件，它们都会生成 Skia draw ops，交给合成线程合成。如果你关闭了合成线程，整个画面“卡在了中间过程”，什么都无法显示，包括地址栏、菜单栏等。

✅ Views 虽然不使用 HTML，但它仍然要“画出来”，靠的是 Skia → Compositor → GPU。

🔹3. 菜单栏、按钮控件在不同平台如何实现？

控件逻辑是平台通用的：

  • 所有按钮、菜单栏逻辑都在 ui/views 里用 C++ 定义

  • 例如 BackButton、ToolbarButton、AppMenuButton

但平台适配部分会使用不同“Widget Host”

例如：

平台顶层窗口实现控件绘图方式
WindowsHWND + WindowImplSkia 渲染到 Direct2D 或 GDI
macOSNSWindow + NSViewSkia 渲染成 CALayer，挂到 NSView 上
LinuxX11Window / WaylandWindowSkia 绘图输出到 X11/Wayland surface

Chromium 使用 views::Widget 类统一封装窗口和控件树，但其底层用平台特定代码来适配系统窗口管理器。

📁 几个关键源码位置

功能路径说明
Views 控件入口ui/views/所有 UI 控件定义
主窗口chrome/browser/ui/views/frame/browser_view.cc浏览器主 UI 框架
平台窗口接口ui/platform_window/跨平台窗口抽象
渲染层桥接ui/compositor/Compositor 层的组织逻辑
Skia 调用cc/paint/、ui/gfx/SkCanvas、SkImage 的封装

🧠 延伸理解：Skia + Compositor 是 Chromium UI 的大一统方案

Chromium 不像传统原生应用用 Qt/WinAPI/AppKit，它把所有东西（HTML + UI 控件）都统一到 Skia 渲染 → Compositor 合成 这一条链上。

这样做的好处：

  • 所有 UI 都支持动画、透明度、阴影

  • 跨平台一致性强

  • 后期统一 GPU 加速、硬件合成优化

代价：

  • 对图形系统耦合度高，合成线程关闭会导致 UI 全挂

  • 初学者难以理解 “明明不是网页，为何也渲染不出来”

✅ 总结

问题答案
Views 是如何跨平台的？用统一 C++ 控件 + Skia 绘图 + 平台窗口适配器实现
合成线程关闭为什么整个 UI 都挂了？Chromium 的原生控件也依赖 Skia + Compositor 绘图
菜单栏控件是怎么显示的？控件逻辑统一，绘图输出在 Skia，由平台窗口包裹（如 NSWindow/HWND）显示

三、BackButton实现讲解

BackButton 是 Chromium 浏览器顶部工具栏（toolbar）左上角那个“返回”箭头按钮，它是 Chromium UI 框架 Views 中的一个控件，由 C++ 代码实现和绘制，不依赖 HTML/CSS/JS。

🧩 一、BackButton 的类层次与路径

🔹 类结构：



BackButton : public ToolbarButton
            → LabelButton
              → Button
                → View

🔍 核心路径：



chrome/browser/ui/views/toolbar/back_button.cc
chrome/browser/ui/views/toolbar/back_button.h

这是它的类定义和实现文件。BackButton 继承自 ToolbarButton，后者又是 Chromium 中一个可点击、可绘图的按钮控件。

🖌️ 二、绘制过程大致流程

BackButton 的绘制是通过 C++ 调用 Skia API（SkCanvas）进行的，整个过程大致如下：

1. 在主窗口中创建 BackButton 实例

在 BrowserView 初始化过程中：



back_button_ = toolbar_->AddChildView(std::make_unique<BackButton>());

2. BackButton 会使用 Vector Icon 绘制箭头图标

在 back_button.cc 中：



SetImageModel(ButtonState::STATE_NORMAL,
              ui::ImageModel::FromVectorIcon(kBackArrowIcon));

  • kBackArrowIcon 是一个内置的矢量图标，定义在 chrome/app/vector_icons/ 中的 .icon 文件（其实是 SVG 简化格式）。

  • 它会被编译为 C++ 中的 path 描述，最终通过 Skia 绘制。

const gfx::VectorIcon kBackArrowIcon = {
    kBackArrowPath,  // SkPath 描述路径
    base::size(kBackArrowPath),
    gfx::VectorIconId::BACK_ARROW,
};

Chromium 有自己的矢量图标处理工具链，支持多种状态（正常 / hover / 按下等）切换不同颜色或透明度。

🎨 三、绘图函数调用栈（Skia）

最终，BackButton 的绘图操作会通过：



ToolbarButton::OnPaint()
 → LabelButton::OnPaint()
   → Button::PaintButtonContents()
     → PaintIcon()
       → ImageSkia::Draw()
         → SkCanvas::drawPath() / drawBitmap()

💡 关键点：

  • 实际绘图发生在 Chromium 的绘图层 ui/gfx/ 下，使用 SkCanvas。

  • 所有控件绘图操作会组成 draw op 列表（DisplayItemList），交给 Compositor 合成。

🧪 四、如何定制或观察 BackButton 绘图？

你可以：

  1. 在 back_button.cc 里设置自定义图标：

    

    SetImageModel(STATE_NORMAL,
  ui::ImageModel::FromImage(gfx::CreateVectorIcon(kMyCustomIcon, 16, SK_ColorRED)));

  2. 在 OnPaint() 添加 Skia 调试输出：

    

    void BackButton::OnPaint(gfx::Canvas* canvas) {
  LOG(ERROR) << "Painting BackButton!";
  ToolbarButton::OnPaint(canvas);
}

  3. 调试绘图流程：

    • 启用 --enable-skia-deferred-display-list

    • 使用 Chromium 的 skia_debugger 工具查看画面构建过程

💬 五、附加细节：响应事件、动画等

  • 鼠标悬浮/点击效果使用 InkDrop 动画系统（Material Design 风格）

  • 可访问性（Accessibility）支持通过 View::GetAccessibleNodeData() 提供名称与用途

  • 按钮点击事件最终会调用：

    

    chrome::ExecuteCommand(browser_, IDC_BACK);

    用于执行历史后退导航

✅ 总结

项目实现方式
BackButton 类型C++ 类 BackButton，继承自 ToolbarButton
图标绘制使用矢量图标 kBackArrowIcon，通过 Skia 绘制
渲染系统Skia + Views + Compositor
不依赖HTML、CSS、JS、WebView（完全原生）
代码路径chrome/browser/ui/views/toolbar/back_button.cc

四、自定义控件实现

在 Chromium 的 Views 框架中实现一个自定义控件：“前进 + 后退”组合按钮（ForwardBackButton），功能如下：

🧩 功能设计：

  • 左侧是“←”返回按钮，右侧是“→”前进按钮

  • 两个图标合在一个控件中

  • 鼠标点击左右区域分别触发对应命令：IDC_BACK 和 IDC_FORWARD

  • 布局与绘制完全使用 Views + Skia

📁 目录建议：

你可以将这个控件放在：

chrome/browser/ui/views/toolbar/forward_back_button.{h,cc}

✅ 1. forward_back_button.h



#pragma once

#include "ui/views/view.h"
#include "ui/views/controls/button/button.h"

class Browser;

class ForwardBackButton : public views::View, public views::ButtonListener {
 public:
  explicit ForwardBackButton(Browser* browser);

  // views::View:
  void OnPaint(gfx::Canvas* canvas) override;
  gfx::Size CalculatePreferredSize() const override;
  void Layout() override;

  // views::ButtonListener:
  void ButtonPressed(views::Button* sender, const ui::Event& event) override;

 private:
  raw_ptr<Browser> browser_;
  raw_ptr<views::Button> back_button_;
  raw_ptr<views::Button> forward_button_;
};

✅ 2. forward_back_button.cc



#include "chrome/browser/ui/views/toolbar/forward_back_button.h"

#include "chrome/app/vector_icons/vector_icons.h"
#include "chrome/browser/ui/browser_commands.h"
#include "ui/base/l10n/l10n_util.h"
#include "ui/gfx/vector_icon_utils.h"
#include "ui/views/controls/button/image_button.h"
#include "ui/views/layout/box_layout.h"

ForwardBackButton::ForwardBackButton(Browser* browser) : browser_(browser) {
  auto back = std::make_unique<views::ImageButton>(this);
  back->SetImageModel(views::Button::STATE_NORMAL,
                      ui::ImageModel::FromVectorIcon(kBackArrowIcon));
  back->SetAccessibleName(u"Back");
  back_button_ = AddChildView(std::move(back));

  auto forward = std::make_unique<views::ImageButton>(this);
  forward->SetImageModel(views::Button::STATE_NORMAL,
                         ui::ImageModel::FromVectorIcon(kForwardArrowIcon));
  forward->SetAccessibleName(u"Forward");
  forward_button_ = AddChildView(std::move(forward));

  SetLayoutManager(std::make_unique<views::BoxLayout>(
      views::BoxLayout::Orientation::kHorizontal, gfx::Insets(), 2));
}

void ForwardBackButton::OnPaint(gfx::Canvas* canvas) {
  View::OnPaint(canvas);  // 默认背景绘制
}

gfx::Size ForwardBackButton::CalculatePreferredSize() const {
  gfx::Size back_size = back_button_->GetPreferredSize();
  gfx::Size forward_size = forward_button_->GetPreferredSize();
  return gfx::Size(back_size.width() + forward_size.width() + 4,
                   std::max(back_size.height(), forward_size.height()));
}

void ForwardBackButton::Layout() {
  back_button_->SetBounds(0, 0,
      back_button_->GetPreferredSize().width(), height());
  forward_button_->SetBounds(
      back_button_->bounds().right() + 4, 0,
      forward_button_->GetPreferredSize().width(), height());
}

void ForwardBackButton::ButtonPressed(views::Button* sender,
                                      const ui::Event& event) {
  if (sender == back_button_) {
    chrome::ExecuteCommand(browser_, IDC_BACK);
  } else if (sender == forward_button_) {
    chrome::ExecuteCommand(browser_, IDC_FORWARD);
  }
}

🚀 3. 如何使用它？

打开 browser_view.cc 或 toolbar_view.cc 中你希望插入的位置，比如：

#include "chrome/browser/ui/views/toolbar/forward_back_button.h"

...

forward_back_button_ = AddChildView(std::make_unique<ForwardBackButton>(browser_));

🎨 4. 可拓展性建议

  • 添加 hover 动画（InkDrop）

  • 支持禁用状态（不能前进/后退时灰掉）

  • 支持长按弹出历史记录菜单（如 Chrome 原始行为）

  • 支持 Mac 风格圆角按钮风格

✅ 总结

内容说明
框架使用 Views 实现组合控件
图标使用 VectorIcon
事件响应使用 ButtonListener
可移植性不依赖平台代码，跨平台支持
插入方式在 Toolbar 中添加子 View

chromium UI库简介
LisztLee的专栏
12-01 4970
概述      之前研究了一段时间chromium源码，根据自己的兴趣了解了一下其中部分功能的实现。通过在在网上查看博文、chromium官方文档以及加上自己的一些理解，整理出了一点资料。本文中主要是介绍chromium UI中的一些内容。接下来我会一一介绍 chromium 中窗口的创建过程、布局方式。 基础铺垫      1、Widget      Widg
chrome源码剖析—UI架构&&消息机制
最新发布
John_ToStr的博客
01-25 1177
chrome源码剖析—UI架构&&消息机制
【Chromium】View 与 Widget；Chromium UI Platform；View 类与 Widget 类
多丰富下自己呀
04-16 2589
【Chromium】View 与 Widget；Chromium UI Platform；View 类与 Widget 类
理解WebKit和Chromium: Chromium界面（UI）
weixin_34004576的博客
01-27 426
转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju/article/details/7216117 Chromium的界面相当简洁，这是她的设计理念。大体上可以把界面分成两个主要部分：网页内容和外边的修饰控件（例如，tab管理，工具栏，设置按钮等）。 整个chromium浏览器是个顶层窗口。每个tab都对应一个顶层窗口的子窗口，每个网页内容都会绘制在一个...
Chromium的UI绘制初探
weixin_30402343的博客
08-28 807
转载请注明出处：http://www.cnblogs.com/fangkm/p/3943896.html 常见的UI库的绘制逻辑 任何一个成熟的界面框架都有一个相当复杂的结构，消息循环的处理、控件的布局与绘制、焦点的管理以及资源的存取等等，Chromium里的界面框架也不例外，尤其采用的MVC设计方式更是增添了代码结构的复杂度。这里并不打算讨论Chromium的界面框架，本文感兴趣的只是Chr...
Chromium内核浏览器编译记（二）UI定制
YangLe
07-18 4321
在上一篇文章中，我们学习了如何编译Chromium内核浏览器，在开发中，经常需要对浏览器进行一些UI和功能的定制，今天就一起来看下，如何修改浏览器的UI功能。定制需求是这样的修改包名、版本号、应用图标、应用名称不显示应用第一次启动时的设置引导页应用全屏显示，移除首页的所有菜单栏增加点击两次退出应用的功能默认不加载新标签页。...............
Chrome学习笔记（二）：UI组件，皮肤引擎
wanfengnianhua的专栏
04-25 2656
原创文章，转载请注明：转载自Soul Apogee 本文链接地址：Chrome学习笔记（二）：UI组件，皮肤引擎 —— 基础设施篇 Chrome的UI是很奇妙的，因为看起来能很好的跨平台，而且可以很好的兼容各个平台的特性，比如在Mac下最小化和关闭按钮在左侧，还兼容全屏的特性，在Linux上，也能加载GTK的外框，外加现在Chrome在推的Aura，更是直接接管了桌面合成器。。。这一切
Chromium 源码学习-----UI界面
FBI_BAIGOU的博客
05-29 3179
简单总结就是：Widget对应着一个原生的窗口，而View对应着窗口里面的一个控件，如容器，Button，Tab等等。这样在Widget和View之上，Chrome搭建起了自己跨平台的皮肤引擎。这点是和Qt是非常相似的。在chromium源码中，负责管理工具栏(红框区域)的类就是负责管理应用菜单按钮的(绿色区域)的类就是负责管理应用菜单按钮的子项(蓝色区域)的类就是后续如果要修改对应的模块，在对应管理该模块的类下进行修改即可。
Chrome源码剖析 【四】
weixin_34389926的博客
10-24 268
【四】Chrome的UI绘制 1. Chrome的窗口控件 Chrome提供了自己的一个UI控件库，相关文档可以参见这里。用Chrome自己的话来说，我觉得市面上的七荤八素的图形控件库都不好用，于是自己倒腾倒腾实现了一套。。。 广告虽如此说，不过，Chrome的图形控件结构，我还未发现有啥非常非常特别的地方。Chrome的窗口、按钮、菜单之类的控件，都直接或间接派生自View，这个是控件...
chromium设置UI的实现
风之彼岸
12-03 8513
在打开chromium的设置时，chromium会导向一个chrome://settings/的页面，这种UI的实现方式跟其它的UI实现方式有一些区别的，它本质上是一个html页面，能通过javascript与浏览器中的C++代码通信，这种实现称为WebUI，类似的页面可以参考chrome://about/中列出来的页面。类似设置页面这种UI，本身并没有特别复杂的功能，只负责一些数据显示和存储工作
chrome的UI库
12-17
chrome浏览器分拆出来的UI源码，便于学习chromeUI（directUI）思想，方便做出各种自定义界面效果。
Chromium-UI项目调研学习（一）-UI术语及DevTools工具
qq_37705175的博客
03-22 1843
Ink drop：实现对视图的悬停和点击效果的类的集合。在创建焦点环时，重要的是给它们着色，使它们与环内的颜色和环外的颜色形成对比。Arua：一个跨平台的窗口管理器抽象，主要目标是提供一个跨平台的、高效的窗口管理系统，用于 macOS以外的桌面平台。：当物体有焦点时，物体周围的彩色轮廓是可见的，当焦点消失时，物体是隐藏的。不同，它旨在实现平台原生的感觉（特别是在Windows上）和最小的API，旨在完成Chrome的需要。一个视图有矩形的边界，一个（可能是空的）子视图集，以及一个大的。
Chromium 中的 WebUI
云水木石
01-11 1015
这段时间在基于 Chromium 做浏览器的定制工作，少不了需要修改 Chromium 的 UI。Chromium 中的 UI 主要有两大部分组成，一部分是原生 UI，也就是使用 C++ 等语言，利用操作系统原生 UI 框架开发的界面，另一部分则是采用 Web 技术开发的界面，称之为 WebUI。WebUI 开发起来比较麻烦，因为涉及到与 C++ 代码的交互，让前端开发人员开发，需要安装 Chro...
【亲测免费】 Chrome扩展UI套件指南
gitblog_00151的博客
09-01 994
Chrome扩展UI套件指南 项目介绍 Chrome扩展UI套件 是一个专为设计Chrome扩展选项或设置页面而生的小型UI框架。本项目精准模拟了Chrome浏览器原生设置界面的样式，提供了一套CSS工具集，帮助开发者迅速搭建出风格统一、用户体验一致的扩展程序界面。该项目遵循BSD-4-Clause许可证，并在GitHub上开源。 项目快速启动 要快速启用此UI套件，您需先将其下载到本地或通过G...
Chromium渲染框架总结
ckanhw的博客
03-01 1277
渲染优化 chromium为了优化渲染效率做了很多优化，这些不仅可以用在web渲染，也可以用于一些native图像界面的渲染；这些优化包括： 分成paint和compositing paint分为recording和光栅化 跨线程渲染，避免和网络请求影响帧率，同时paint和光栅化可以并行，充分利用了CPU多核特性 Tiling 跨进程渲染，提高稳定...
Chromium内核浏览器编译记（三）116版本内核UI定制
YangLe
08-09 1755
最近因为业务需求，需要编译最新版本的Chromium内核，目前最新的版本是，编译的过程中发现有一些代码逻辑修改的地方都变了，所以在此记录下，分享给大家。定制需求是这样的：修改包名、版本号、应用图标、应用名称不显示应用第一次启动时的设置引导页应用全屏显示，移除首页的所有菜单栏增加点击两次退出应用的功能默认不加载新标签页。
Chrome学习笔记（三）：UI组件，皮肤引擎
wanfengnianhua的专栏
04-25 1452
原创文章，转载请注明：转载自Soul Apogee 本文链接地址：Chrome学习笔记（三）：UI组件，皮肤引擎 —— 控件库 这篇文章是接着上篇文章继续聊的，Chrome的代码实在太多，每一个东西单拿出来都可以说很很多，单就一个breakpad都说了两篇。恩，不过也许是我太啰嗦了。 1. UI控件库（Control）简介 我们知道Chrome做这一套皮肤引擎是为了替换掉Windows
Chromium学习-01-WebUI的机制和源码学习
jia1000的专栏
12-08 227
Chromium中的WebUI是一种允许开发者使用Web技术（比如HTML、CSS和JavaScript）用于创建用户界面的技术。主要是被用于创建设置页面、扩展管理器、历史记录等内嵌式网页界面。2）Web页面所在的Render进程和Browser进程之间的数据交互过程。下面，我会逐渐的带着这些问题，去学习WebUI的机制。1）Web页面的创建过程。
chromium中webui开发说明（内置页面）
啊渊的专栏
09-13 1001
WebUI被授予超级权限，以便他们可以管理Chrome本身。例如，如果无法访问许多不同的隐私和安全敏感服务，则很难实现设置UI。默认情况下，不会授予对这些服务的访问权限。有时我们需要使用C++处理一些问题，将见过返回给js，因此我们在js中添加监听，当C++处理完成后自动调用监听函数。“WebUI”是一个术语，用于地描述部分Chrome UI使用的web技术。不是所有web基础UIs 都是chrome://URLS。只有特殊的URL通过子安全进程被授予WebUI“绑定”。文档将介绍webUI是如何工作的。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值