Berd's Playground

_(:з」∠)_

@FENGberd3 months ago

05/4
12:38
踩坑 迷の代码

Chromium-EyeProtect: 珍爱眼睛,远离Google Design

0x00 前言废话

印象中Chrome一直是很不错的一款浏览器,但随着Google的变化它的功能和UI也不再那么单纯. 从v69开始,Google将默认的Chrome UI改成了Material Refresh, 随后在v71的某个stable release中彻底删掉了用户回滚传统UI的选项.

对大部分用户而言, UI的变更可能根本不是值得在意的事情, 甚至可能有的用户没有注意到UI的变化. 但我是很难接受这个(个人感觉)效率极低而且很丑的UI的, 因此就有了自己修改一个Chromium的想法.

如果您想就UI是否好看和我讲道理或者把我批判一番, 建议立刻关闭此页面.

FENGberd

不要问我图为什么都是糊的, 你得问 Snipaste…截图质量已经设为100了而且上传都没有压缩 :/

0x01 获取代码

获取代码并编译的内容已迁移至 下载源码 & 编译Chromium , 本文只介绍对Chromium进行的修改

0x02 开始修改

此处的修改说明是针对 74.0.3729.108(Stable) EyeProtect-v1.0.1 进行的

注意: 本项目中几乎所有绘制/样式相关的代码都来自v69的Chromium, 这些代码的版权都属于它们的原作者

0001. 添加Flags

为了让用户能方便的开启/关闭Eye-Protect功能, 同时也是为了保证EP出现问题时可以Fallback到原版UI而不需要去安装其他浏览器, 我们在 chrome://flags 里添加一个Flag来控制Eye-Protect功能.

首先我们来到 flag-metadata.json 并添加自己的Flag定义以便编译器能识别这个Flag

然后在 flag_descriptions.hflag_descriptions.cc 中均添加Flag对应的字符串定义. 当然你也可以直接硬编码…不过还是稍微规范一点吧

接下来切换到 ui_base_switches.hui_base_switches.cc 中导出一个switch, 后面对Flag是否启用的检测均基于这个switch进行

然后就可以将我们的Flag定义到 about_flags.cc 中了

最后在 MaterialDesignController 中添加一个函数以便我们在其他地方方便的检测Eye-Protect是否启用. 当然你也可以添加到其他地方, 但个人认为添加到这个Controller里是最高效的.

由于这个Flag和很多UI组件有关, 写热刷新的话会比较麻烦. 因此读取Flag状态只是在初始化 MaterialDesignController 的时候进行了一次. 所以我们同时也在
chrome_restart_request.cc 中添加以便让Chromium提示用户重启

0002-1. “修复” 标签栏

这应该是花费时间最多的一块了. 首先是我对Chromium的源代码完全不熟悉, 尤其是UI绘制逻辑. 基本就是边学边改的状态…

由于最初拿到Chromium源码还没有74的Stable版本, 因此最开始的修改是基于 75.0.3741.2 进行的. 75中标签样式被独立出一个 tab_style_views.cc 存放, 而74中 GM2TabStyle 依然是放在 tab_style.cc 中的. 不过这并不是太大的问题, 因为TabStyle 已经被对象化了

所以我们只需要创建好独立的 tab_style_ep.cc , 然后在 tab_style.cc 中插入相关代码返回自己的 EPTabStyle 即可

当然, 添加一个文件后要在 BUILD.gn 中告诉编译器这多了个文件, 因此还需要进行下面的修改

此外, tab_style.cc 中还有一些关于数值的计算需要进行修改, 此处就不再列出.

同时, 在 layout_constants.cc 中也有一些对应的数值计算需要修改, 我们采取在首部插入一段代码这种方式以便方便的Merge到新版本

然后在 tab_strip.cc 中还有一些修改:

强制绘制Stroke

忽略对Z-Value判定并直接绘制

然后在 Toolbar(含有地址栏那一条) 顶端画一条线, 当然Active Tab下面不需要画

0002-2. “修复” 新标签按钮

新标签按钮的绘制代码较为复杂, 全部混在一起了. 因此我们先将原来的绘制代码放回粘贴到文件顶部. 当然, 此处也对一些函数进行了合并和优化. 看到右边那一大条绿了么(x

然后在构造函数中关掉InkDrop, 因为旧版中高亮和按下的逻辑都在Paint中自行绘制. 随后在 PaintButtonContents 中添加代码绘制自己的样式

为了确保 HitTest(碰撞箱?不知道怎么解释这玩意) 正常工作, 我们还需要在 GetBorderPath 中返回正确的Path

然后在 tab_strip.cc 中还有一些微小的修改, 此处不赘述

0003. “修复”地址栏

这块高考完再写

0004. “修复” 书签栏

其实这块没改啥…就是稍微改了一下圆角

然后改了一下高度

0005. 重新调整配色

这块并没有太多东西可以介绍, 主要是在 theme_properites.ccGetDefaultColor 函数中加一些修改并返回不那么瞎眼 (#FFFFFF/#000000….) 的颜色.

当然更规范的解决方案应该在 GetIncognitoColor 中加隐身模式的判断, 不过这里也不管那么多了…

此外我也在 omnibox_theme.cc 中调整了一下地址栏指示安全状态的颜色. 个人感觉HTTPS就要绿一点才好看(x

0x03 相关链接

食用方法: 访问 chrome://flags 找到 #eye-protection 设置为 Enabled 即可

建议同时也设置一些其他的Flags, 具体请参考 推荐的Flags设置

Chromium-EyeProtect: 珍爱眼睛,远离Google Design