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

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

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

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

三、利用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>

...
    <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>
...