diff --git a/docker/docker-entrypoint b/docker/docker-entrypoint index dfe4960..5a9263d 100755 --- a/docker/docker-entrypoint +++ b/docker/docker-entrypoint @@ -7,6 +7,8 @@ notice() { echo -e "\033[36m $1 \033[0m " } +rm -rf /tmp/vscode-ripgrep-cache-1.13.2/ripgrep-v13.0.0-4-x86_64-unknown-linux-musl.tar.gz + if [ "$(id -u)" -eq '0' ];then USER_ID=${LOCAL_USER_ID:-1000} GROUP_ID=${LOCAL_GROUP_ID:-1000} diff --git a/docs/修正主题监听.MD b/docs/修正主题监听.MD new file mode 100644 index 0000000..2afd2ff --- /dev/null +++ b/docs/修正主题监听.MD @@ -0,0 +1,160 @@ +## 设置位置 + +菜单栏 -> 设置 -> 外观设置 -> 主题 + +## 定位点 + +1. F12打开调试器 +2. 进入Elements标签 +3. 变更设置,发现`body`标签的`class`属性发生变化 +4. 变化:深色添加`dark`类,浅色则移除 +5. 完整class: `class="with-vscode-font-patch --with-theming dark"` + +可以将这三个`class`作为定位点入手处理 + +## 定位具体代码 + +使用`--with-theming` + +在解压后的`core.wxvpkg`中搜索 `grep -lr '\-\-with\-theming' .` +得到两个位置: +1. (exports.ThemingEnabledClass = "--with-theming"); +2. t.body.classList.add("--with-theming"), + +第二个大概率是目标了; +正好第二个后面紧接着`this.themeChange()`,好了,看命名可以确定是这个了 +```javascript +this.setup().finally(() => { + var e, t; + document.body.classList.add("with-vscode-font-patch"), + null === (e = this.ourDocumentRef) || + void 0 === e || + e.body.classList.add("with-vscode-font-patch"), + null === (t = this.ourDocumentRef) || + void 0 === t || + t.body.classList.add("--with-theming"), + this.themeChange(); +}); +``` + +## 分析实现 + +`themeChange` 函数: +```javascript +themeChange(e) { + var t, n, i, s, o; + "dark" === + (null !== + (n = + null === (t = (e = e || this.props).settings.appearance) || + void 0 === t + ? void 0 + : t.theme) && void 0 !== n + ? n + : "dark") + ? null === (i = this.ourDocumentRef) || + void 0 === i || + i.body.classList.add("dark") + : null === (s = this.ourDocumentRef) || + void 0 === s || + s.body.classList.remove("dark"), + null === (o = this.ourDocumentRef) || + void 0 === o || + o.body.classList.add("with-vscode-font-patch"); +} +``` +命名处理: +```javascript +themeChange(config) { + var appearance, theme, docRef1, docRef2, docRef3; + console.warn('themeChange', config); + "dark" === + (null !== + (theme = + null === (appearance = (config = config || this.props).settings.appearance) || + void 0 === appearance + ? void 0 + : appearance.theme) && void 0 !== theme + ? theme + : "dark") + ? null === (docRef1 = this.ourDocumentRef) || + void 0 === docRef1 || + docRef1.body.classList.add("dark") + : null === (docRef2 = this.ourDocumentRef) || + void 0 === docRef2 || + docRef2.body.classList.remove("dark"), + null === (docRef3 = this.ourDocumentRef) || + void 0 === docRef3 || + docRef3.body.classList.add("with-vscode-font-patch"); +} +``` +审查代码,得出大致逻辑: +1. 有传入配置使用配置;没有传入,则使用当前配置 +2. 获取主题配置 +3. 有主题配置则直接使用,否则默认`dark` +4. 主题配置是`dark`添加`dark`类,否则移除 + +很明显,`theme`的值只有`dark`和`非dark`的区别(根据`console.warn`的结果看,另一个值是`white`,当然这不重要); +此处没有跟随系统的判断,应该在别处。 +另外,根据`console.warn`可以知道跟随系统也会触发`themeChange`。 + +好的,我们卡住了,需要另辟蹊径。 + +## 另辟蹊径 + +简述: 通过字符串定位触发位置 + +1. 搜索`应用(除调试器外)的主题设置`,即`grep -lr '应用(除调试器外)的主题设置' .` +2. 获取对应标志`SETTING_THEME_DESC` +3. 搜索`SETTING_THEME_DESC`,即`grep -lr 'SETTING_THEME_DESC' .` +4. 三个结果,两个翻译,确定了 + +关键代码: +```javascript +t.createElement( + "div", + { className: "uiv2-padding" }, + t.createElement( + "label", + { + className: "uiv2-radio", + onClick: this.handleAutoDetectThemeClick, + }, + t.createElement("i", { + className: r + ? "uiv2-radio-icon-o" + : "uiv2-radio-icon", + }), + t.createElement( + "span", + { className: "uiv2-radio-text" }, + o.config.FOLLOW_SYSTEM + ) + ) +) +``` + +可以看到处理“跟随系统”的函数是`handleAutoDetectThemeClick` +函数内执行`this.props.updateIDESetting("appearance", "autoDetectTheme", !0);` + +通过搜索`autoDetectTheme`,找到一个跟主题控制相关的实现 +```javascript +constructor() { + (this.onDidOSThemeChange = () => { + const o = s.OSThemeController.shared.getCurrentTheme(); + if (o === s.OSTheme.Unknown) return; + const n = o === s.OSTheme.Dark ? "dark" : "white"; + this._enabledThemeAutoDetect && + e.dispatch(t.updateIDESetting("appearance", "theme", n)), + this._enabledDevtoolsThemeAutoDetect && + e.dispatch( + t.updateIDESetting("appearance", "devtoolsTheme", n) + ); + }), + (this._enabledThemeAutoDetect = !1), + (this._enabledDevtoolsThemeAutoDetect = !1), + this.registerListeners(); +} +``` + +好了,去看看`OSThemeController`就知道怎么回事了 \ No newline at end of file diff --git a/readme.md b/readme.md index 9ce24d1..16fdf6a 100644 --- a/readme.md +++ b/readme.md @@ -150,4 +150,5 @@ git clone https://github.com/msojocs/wechat-devtools-linux.git 1. *喆 2. @shaoxp 3. . - 4. IvesSSa \ No newline at end of file + 4. IvesSSa + 5. icepie \ No newline at end of file diff --git a/test/core-test b/test/core-test index f10ab1b..3f39ebb 100755 --- a/test/core-test +++ b/test/core-test @@ -7,7 +7,7 @@ if [ "$a" == '1' ];then node tools/wxvpkg_unpack.js "$root_dir/package.nw/core.wxvpkg" "$root_dir/package.nw/core.wxvpkg.ext" else node tools/wxvpkg_pack.js package.nw/core.wxvpkg.ext package.nw/core.wxvpkg - rm -rf ~/.config/wechat_devtools/WeappCache - rm -rf ~/.config/wechat_devtools/WeappVendor + rm -rf ~/.config/wechat-devtools/WeappCache + rm -rf ~/.config/wechat-devtools/WeappVendor bin/wechat-devtools fi \ No newline at end of file diff --git a/tools/wxvpkg_unpack.js b/tools/wxvpkg_unpack.js index 112645c..9016c73 100755 --- a/tools/wxvpkg_unpack.js +++ b/tools/wxvpkg_unpack.js @@ -1,4 +1,11 @@ // Extract core.wxvpkg of current folder to dest folder +/** + * 使用: + * 两个参数 + * uppack.js from to + * from: pkg文件 + * to: 目标文件夹 + */ const path = require('path') const fs = require('fs')