Chromium-UI项目调研学习（一）-UI术语及DevTools工具

本文链接：https://blog.csdn.net/qq_37705175/article/details/136913971

一、UI 术语：

Ash：Chrome操作系统的窗口系统环境，负责非浏览器的用户界面，如登录屏幕、系统托盘和各种内置控制面版。与Chrome一样，Ash的用户界面也是使用Views工具包建立的。
Arua：一个跨平台的窗口管理器抽象，主要目标是提供一个跨平台的、高效的窗口管理系统，用于 macOS以外的桌面平台。 Aura 处理的任务包括显示屏幕上的窗口和响应本地输入事件。
AX ： " 可及性 " 的缩写。许多带有 "AX 前缀的不同类别参与了对视图的可及性信息的暴露。
Cocoa： macOS 上的应用环境。最初， Chrome for Mac 的用户界面完全是用 Cocoa编写的；现在大多数原生用户界面都使用视图，但 Cocoa 中仍有部分作品。
Combox ：从一个选项列表中显示一个选定的选择，即组合框控件（选择下拉框）。
Compositor ：一个负责为widget制作最终可显示图形的系统，给定一个视图层次结构。合成器管理一个层树，使其能够缓存、转换和混合各种图形层，从而最大限度地减少重新涂抹，加速滚动，并与底层显示刷新率同步动画。
HWND：特定窗口。一个系统原生窗口的不透明解决句柄，用于向各种 Windows 本地 API 传递。
Ink drop：实现对视图的悬停和点击效果的类的集合。使用动态创建的层来绘制半透明的覆盖物，这些覆盖物可能包含在视图的边界内或延伸到视图之外。
Focus Ring ：当物体有焦点时，物体周围的彩色轮廓是可见的，当焦点消失时，物体是隐藏的。它通常是由FocusRing 对象绘制的，这是一个视图子类，可以处理沿着路径绘制彩色边界。在创建焦点环时，重要的是给它们着色，使它们与环内的颜色和环外的颜色形成对比。
Ink drop：实现对视图的悬停和点击效果的类的集合。使用动态创建的层来绘制半透明的覆盖物，这些覆盖物可能包含在视图的边界内或延伸到视图之外。
LaCrOS ： "Linux 和 Chrome 操作系统 " 的缩写。
Layer ：被 Compositor 用于管理纹理涂抹的对象树的一个节点。
Layout：一个视图设置其所有子节点的边界的操作。在一个View上调用InvalidateLayout()会递归地将该View和所有祖先标记为dirty；然后在某个时刻，Widget::LayoutRootViewIfNecessary()会在
RootView 上调用 Layout() ，它将在其内容上调用 Layout() ，以此类推在树上，进而通过覆盖虚拟 Layout()方法来实现视图的自定义布局。
NativeWidget ：支持跨平台 Widget 对象的特定平台对象； Widget 通过调用 NativeWidget 上的方法来实现其API 。
NS* ： "NeXTSTEP " 的缩写。该类型是 macOS中一个长期存在的基本类型。
Omnibox ：浏览器窗口工具栏中的组合搜索和地址栏。
Progressive Web App (PWA)：一个可以提供各种类似本地应用程序功能的网站，如可安装性、与系统硬件的集成和 / 或持久性。
SkColor ：一个 32bpp （每个通道 8 比特）的非预乘 ARGB 颜色值，存储为 uint32_t，是视图中与绘画和绘画 API 交互时最常见的颜色类型。
Skia ： Chrome 使用的二维图形库，提供硬件加速的绘图原语。
Skia Gold：一个用于比较像素测试结果图像与验证基线的网络应用程序。浏览器测试或交互式测试中的测试可以选择像素测试，然后产生由 Skia Gold 实例管理的结果图像。
Throbber ：一个动画对象，用于向用户表示明确或不确定的进展。视图中的具体控制是一个 16 个 DIP的旋转圈。
Views (library) ：一个用于创建 " 本地 "用户界面的跨平台用户界面工具包（相对于由网络技术建立的用户界面）。视图对 Chrome 浏览器和 Ash 中的 Chrome 操作系统本地用户界面都很重要。视图是在Chrome 的早期创建的，以抽象出对平台特定功能的调用，并使其有可能为多个操作系统建立Chrome 用户界面；与其他跨平台工具包如 wxWidgets 或 GTK 不同，它旨在实现平台原生的感觉（特别是在Windows上）和最小的API，旨在完成Chrome的需要。
View (class) ：用于表示 UI的对象树中的一个节点。一个视图有矩形的边界，一个（可能是空的）子视图集，以及一个大的 API集，以允许交互和扩展。它的主要目标是抽象出用户的互动，并将数据呈现给浏览器进行显示。
Widget ：代表视图工具包中的 " 窗口 "的跨平台抽象。它是视图库和操作系统平台之间的网关。每个小工具正好包含一个 RootView 对象，该对象持有一个代表该窗口中用户界面的视图层次。 Widget是由一个特定平台的 NativeWidget 轮流实现的。

二、UI 两大类型：

Content Area (UI in a Tab)
- 内容区域的UI，使用HTML实现，此HTML可以是WebUI，也可以是与Chrome相关的HTML和JS。
Non-Content Area (UI in Popups or in Chrome’s Chrome)-Native UI
- 内容区域之外的 UI 应使用 Windows/Linux/ChromeOS 的 Views （在 C++ 中）实现。
- 由Browser 进程管理，如浏览器上部分的各种UI（缩小、放大、关闭、回退等）
  
  Native UI 通过 UI DevTools 查看和调试，对比前端开发的 Web HTML 是使用 Devtools 来查看和调试。即 Native UI 是 chromium 、或使用 chromium 内核的 Web APP 方绘制的，通过 UI Devtools 查看和调试。而 Web content 是前端绘制的，通过 Devtools 查看和调试。浏览器下部分的 Content 部分才是 Renderer 进程管理。

inspect Native UI ：

chrome://flags/ : 中enable ui-debug-tools，才可以使用inspect Native UI。
- Debugging tools for UI ：打开 Native UI 。用于 inspect Native UI。

重启浏览器后可以在 chrome://inspect 看到 chrome://inspect/#native-ui，随后直接 inspect Native UI 即可。

UI DevTools 可以检查 Native UI，并可以实时更改并显示。
- 在 inspect mode 下，悬停Native UI处就可以显示对应的元素节点。
- 点击就会固定节点，对应的节点的点击就会显示其属性。

Source panel
- 每个属性的右上角可以打开对应源文件，右键可以打开整个类头文件，左键可以在Sources 面板打开来自本地文件的源码。
UI Element Tree Search：Ctrl+F 可以打开搜索栏搜索element树或者元素的样式属性。

Content UI ：

打开DevTools工具（浏览器内按F12）。
在 URL 内输入特定的 chromium 定制网页如 chrome://settings/ ，选择 select 工具（右上角红

圈）选择 webui 里的 icon 图标，在 Sytle 里面可以看到文件的名字。

找寻本地工程下的 chrome_logo_dark.svg 文件进行替换后重新编译即可。

三、利用DevTools完成Chromium中WebContent页面版本号：

打开指定页面，以 chrome://settings/ 为例，按下F12打开DevTools后进入Source目录，可以看到这个页面下的相关web文件。

打开指定页面，还是以 chrome://settings/ 为例，按下F12打开DevTools后进入Source目录，可以看到这个页面下的相关web文件。
修改本地工程下该html文件。

...
<settings-section page-title="竹园餐厅" section="about">
    <div class="cr-row two-line first">
        <img id="product-logo" on-click="onProductLogoClick_"
            srcset="chrome://theme/current-channel-logo@1x 1x,
                    chrome://theme/current-channel-logo@2x 2x"
            alt="竹园餐厅"
            role="presentation">
        <div class="product-title">竹园餐厅</div>
    </div>
<div class="cr-row two-line">
...
    <div class="secondary">1.1.1.1（开发者内部版本）</div>
    </div>
...
    <cr-link-row class="hr" id="help" on-click="onHelpClick_"
        label="竹园餐厅"
        external></cr-link-row>
...
    <settings-section>
        <div class="info-sections">
            <div class="info-section">
            <div class="secondary">竹园餐厅</div>
            <div class="secondary">版权待定</div>
        </div>
        <div class="info-section">
            <div class="secondary">竹园餐厅1.1.1.1</div>

菜单修改，对左侧菜单栏中的内容进行修改，在DevTools中的 Source 中的 settings_menu.html.js 中可以看到左侧菜单栏的内容。

修改本地工程下该html文件。

进入该文件，修改代码中和chromium相关的内容，如下所示。

...
    <a role="menuitem"
        id="people" href="/people" hidden="[[!pageVisibility.people]]"
        class="cr-nav-menu-item">
    <iron-icon icon="cr:person"></iron-icon>
    您与竹园餐厅
    <paper-ripple></paper-ripple>
    </a>
...
    <a role="menuitem" id="about-menu" href="/help"
        class="cr-nav-menu-item">
    <span id="aboutIcon" class="cr-icon" role="presentation"></span>
    关于竹园餐厅
    <paper-ripple></paper-ripple>
    </a>
...