Perf/optimize rendering - 优化渲染模式 (#573)

* perf: 添加images长度校验，精简无用的code

* perf: mix-blend-mode 默认值改为 unset

* perf: css variable 从 :root 迁移到 body

Author: shalldie

package-lock.json

@@ -2,7 +2,7 @@
   "name": "background",
   "displayName": "background",
   "description": "Bring background images to your vscode",
-  "version": "2.0.7",
+  "version": "2.0.8-alpha.5",
   "scripts": {
     "vscode:prepublish": "npm run compile",
     "vscode:uninstall": "node ./out/uninstall",

package.json

@@ -88,7 +88,7 @@ export class Background implements Disposable {
         let content = await fs.promises.readFile(path.join(docDir, docName), ENCODING);
         // 替换图片内联为base64
         content = content.replace(/\.\.\/images[^\")]+/g, (relativePath: string) => {
-            const imgPath = path.join(vscodePath.extensionRoot, 'images', relativePath);
+            const imgPath = path.join(vscodePath.extRoot, 'images', relativePath);
 
             return (
                 `data:image/${path.extname(imgPath).slice(1) || 'png'};base64,` +

src/background/Background.ts

@@ -1,4 +1,3 @@
-import path from 'path';
 import { pathToFileURL } from 'url';
 
 import fg from 'fast-glob';
@@ -47,6 +46,9 @@ export function css(template: TemplateStringsArray, ...args: any[]) {
 export class AbsPatchGenerator<T extends { images: string[] }> {
     protected config: T;
 
+    /** 必须有图片 */
+    protected imageRequired = true;
+
     constructor(config: T) {
         const images = config?.images.filter(n => n.length) || [];
         this.config = {
@@ -168,20 +170,36 @@ container.appendChild(div);
     }
 
     public create() {
+        if (this.imageRequired && !this.config.images.length) {
+            return '';
+        }
+
         const style = this.compileCSS(this.getStyle());
         const script = this.getScript().trim();
 
         return [
             this.getPreload(),
-            `
-                var style = document.createElement("style");
+            (() => {
+                if (!style.length) {
+                    return '';
+                }
+                return `
+                const style = document.createElement("style");
                 style.textContent = ${JSON.stringify(style)};
-                document.head.appendChild(style);
-            `,
+                document.head.appendChild(style);`;
+            })(),
             script
         ]
             .filter(n => !!n.length)
             .map(n => _.withIIFE(n))
             .join(';');
     }
 }
+
+export class WithoutImagesPatchGenerator extends AbsPatchGenerator<any> {
+    constructor() {
+        super({ images: [] });
+    }
+
+    protected readonly imageRequired = false;
+}

src/background/PatchGenerator/PatchGenerator.base.ts

@@ -1,4 +1,4 @@
-import { AbsPatchGenerator, css } from './PatchGenerator.base';
+import { css, WithoutImagesPatchGenerator } from './PatchGenerator.base';
 
 // https://github.com/Microsoft/vscode/blob/main/src/vs/workbench/services/integrity/electron-sandbox/integrityService.ts#L147
 // https://github.com/microsoft/vscode-loc/blob/main/i18n/vscode-language-pack-zh-hans/translations/main.i18n.json#L14343
@@ -38,10 +38,7 @@ const Translations = [
     '安裝似乎已損毀。請重新安裝。'
 ];
 
-export class ChecksumsPatchGenerator extends AbsPatchGenerator<any> {
-    constructor() {
-        super({ images: [] });
-    }
+export class ChecksumsPatchGenerator extends WithoutImagesPatchGenerator {
     /**
      * fix checksums with css. LOL
      *

src/background/PatchGenerator/PatchGenerator.checksums.ts

@@ -73,7 +73,7 @@ function getNextImg() {
 }
 
 function setNextImg() {
-    document.documentElement.style.setProperty(cssvariable, 'url(' + getNextImg() + ')');
+    document.body.style.setProperty(cssvariable, 'url(' + getNextImg() + ')');
 }
 
 if (interval > 0) {

src/background/PatchGenerator/PatchGenerator.fullscreen.ts

@@ -1,10 +1,6 @@
-import { AbsPatchGenerator, css } from './PatchGenerator.base';
-
-export class ThemePatchGenerator extends AbsPatchGenerator<any> {
-    constructor() {
-        super({ images: [] });
-    }
+import { css, WithoutImagesPatchGenerator } from './PatchGenerator.base';
 
+export class ThemePatchGenerator extends WithoutImagesPatchGenerator {
     /**
      * 混合模式使用 css variable
      *
@@ -16,13 +12,13 @@ export class ThemePatchGenerator extends AbsPatchGenerator<any> {
     protected getStyle(): string {
         return css`
             // 浅色主题（默认）
-            :root {
+            body {
                 // 不使用混合模式
-                ${ThemePatchGenerator.cssMixBlendMode}: normal;
+                ${ThemePatchGenerator.cssMixBlendMode}: unset;
             }
 
-            // 深色主题 (覆盖)
-            :root:has(body > .monaco-workbench.vs-dark) {
+            // 深色主题 (覆盖)，避免使用 :root
+            body:has(> .monaco-workbench.vs-dark) {
                 // 使用混合模式
                 ${ThemePatchGenerator.cssMixBlendMode}: screen;
             }

src/background/PatchGenerator/PatchGenerator.theme.ts

@@ -35,6 +35,7 @@ export class PatchGenerator {
             new PanelPatchGenerator(options.panel).create(), // panel
             new FullscreenPatchGenerator(options.fullscreen).create() // fullscreen
         ]
+            .filter(n => !!n.length)
             .map(n => _.withIIFE(n))
             .join(';');
 

src/background/PatchGenerator/index.ts

@@ -43,7 +43,10 @@ export const vscodePath = {
      * 基础目录
      */
     base,
-    extensionRoot: path.join(__dirname, '../../'),
+    /**
+     * 扩展根目录
+     */
+    extRoot: path.join(__dirname, '../../'),
     /**
      * css文件路径
      */