[Bug]: "ReferenceError: newHTML is not defined" on new version of VSCode

vikasbhatia commented 1 year ago

Is there an existing issue for this?

[X] I have searched the existing issues

Current Behavior

Hi,

I just updated my VSCode to the latest version (as of this writing, 1.78.0 Universal) and vibrancy stopped working. Here's the error I'm seeing:

Expected Behavior

Normally Vibrancy needs to be re-enabled after a VSCode update, but it works fine.

Steps To Reproduce

Update to latest version of VSCode.
Enable Vibrancy using the command palette.

Environment

- OS:macOS

- VSCode: Version: 1.78.0 (Universal)

Commit: 252e5463d60e63238250799aef7375787f68b4ee
Date: 2023-05-03T20:11:00.813Z
Electron: 22.4.8
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Darwin x64 22.3.0
Sandboxed: No

- Extension: 1.1.15

Anything else?

No response

illixion commented 1 year ago

Interesting, this error would suggest that the workbench.html file is different from what is expected, though I'm unable to reproduce this on my machine. The most recent version of VSCode is currently 1.78.2, would you mind updating and checking if that fixes it?

If that doesn't help, can you run this command and post the output here?

cat /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html

vikasbhatia commented 1 year ago

Sure thing. I updated to 1.78.2 and got the same error - I'm pasting the output from that command below. Two quick notes (in case they matter)!

My app's name is VSCode, so the command I ran was cat /Applications/VSCode.app/Contents... instead of cat /Applications/Visual Studio Code.app/Contents...
You'll see some custom CSS in the output below, "Sublime-Like VSCode File Git Badges". I wrote that; it's the only thing I load in using the Custom CSS and JS Loader plugin. That hasn't changed between the time Vibrancy was working until now.

Vikas@Brisingr ~ % cat /Applications/VSCode.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html
<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

    </head>

    <body aria-label="">
    </body>

    <!-- Startup (do not modify order of script tags!) -->
    <script src="workbench.js"></script>
<!-- !! VSCODE-CUSTOM-CSS-SESSION-ID 0b69fb5b-1ea1-4e42-97d3-3d4bdf0eed8f !! -->
<!-- !! VSCODE-CUSTOM-CSS-START !! -->
<script>/* eslint-env browser */
(function () {
    function patch() {
        const e1 = document.querySelector(".right-items");
        const e2 = document.querySelector(".right-items .__CUSTOM_CSS_JS_INDICATOR_CLS");
        if (e1 && !e2) {
            let e = document.createElement("div");
            e.id = "be5invis.vscode-custom-css";
            e.title = "Custom CSS and JS";
            e.className = "statusbar-item right __CUSTOM_CSS_JS_INDICATOR_CLS";
            {
                const a = document.createElement("a");
                a.tabIndex = -1;
                {
                    const span = document.createElement("span");
                    span.className = "codicon codicon-paintcan";
                    a.appendChild(span);
                }
                e.appendChild(a);
            }
            e1.appendChild(e);
        }
    }
    setInterval(patch, 5000);
})();
</script><style>/*
 * Sublime-Like VSCode File Git Badges
 * Author: u/SidewinderN7
 * Date: 22 April 2022
 * Decription: Changes the "U" (untracked), "M" (modified), and "D" (deleted) indicators in VSCode's sidebar to make them like Sublime Text's dots
 */

/* NOTES
The items we want to modify in the sidebar have two classes:
1) file-icon
2) monaco-decoration-iconBadge--<random string> (example:  monaco-decoration-iconBadge--ec98p9)
To target all items that start with monaco-decoration-iconBadge--, ref: https://stackoverflow.com/questions/5110249/wildcard-in-css-for-classes
Folders have the .folder-icon class, we don't want to override styles for that, so we just use file-icon
Combining selectors ref: https://stackoverflow.com/questions/19498703/combining-class-selector-with-attribute-selector

Note: the dot character is special and not the same as "•".
To get it, toggle developer tools (Help > Toggle Developer Tools) and inspect the dot next to a folder that "contains emphasized items"
It showed up as a question mark on my machine running macOS 11.6 Big Sur. It likely will elsewhere too.
As long as you copy it directly it will show up properly as the dot in VSCode
*/

.file-icon[class*="monaco-decoration-iconBadge"]::after {
    content: "";
    font-family: codicon;
    font-size: 14px;
    margin-right: 14px;
    opacity: 1;
}

/* Untracked files */
[title~=Untracked] {
    color: #8bce00;
}

[title~=Untracked]::after {
    color: #8bce00;
}

/* Modified files */
[title~=Modified] {
    color: #74bbd3;
}

[title~=Modified]::after {
    color: #29caff;
}

/* Deleted files */
/* Deleted files have their own strikethrough styling for the filename, don't need to override that */
[title~=Deleted]::after {
    color: #f83535;
}
</style><!-- !! VSCODE-CUSTOM-CSS-END !! -->
</html>

illixion commented 1 year ago

Yeah, that confirms my suspicions. Your workbench file is missing the CSP meta header that is required to allow custom JavaScript to be loaded, without which Vibrancy will not function. Relevant code if you're curious.

You can easily fix this issue by removing Custom CSS and JS Loader and using Vibrancy's custom import feature to achieve the same task. Make sure to reinstall VSCode afterwards to restore the workbench file to its original state.

vikasbhatia commented 1 year ago

Thank you so much! Just did all of that and Vibrancy is working again. I had no idea about Vibrancy's custom import feature. One less plugin for me, and I can confirm my custom CSS is still working :)

This is what my workbench file looks like now:

Vikas@Brisingr ~ % cat /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html

<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta
            http-equiv="Content-Security-Policy"
            content="
                default-src
                    'none'
                ;
                img-src
                    'self'
                    data:
                    blob:
                    vscode-remote-resource:
                    https:
                ;
                media-src
                    'self'
                ;
                frame-src
                    'self'
                    vscode-webview:
                ;
                script-src
                    'self'
                    'unsafe-eval'
                    blob:
                ;
                style-src
                    'self'
                    'unsafe-inline'
                ;
                connect-src
                    'self'
                    https:
                    ws:
                ;
                font-src
                    'self'
                    vscode-remote-resource:
                ;
                require-trusted-types-for
                    'script'
                ;
                trusted-types VscodeVibrancy
                    amdLoader
                    cellRendererEditorText
                    defaultWorkerFactory
                    diffEditorWidget
                    diffReview
                    domLineBreaksComputer
                    dompurify
                    editorGhostText
                    editorViewLayer
                    notebookRenderer
                    stickyScrollViewLayer
                    tokenizeToString
                ;
        "/>
    </head>

    <body aria-label="">
    </body>

    <!-- Startup (do not modify order of script tags!) -->
    <script src="workbench.js"></script>
</html>

If that looks correct now you can close this issue.

illixion commented 1 year ago

Glad to hear that it works now, thanks for letting me know!

illixion / vscode-vibrancy-continued