Devtools don't reload CSS files

[jrieken]

• run scripts/code.sh
• change a CSS file
• reload window
• CSS change isn't reflected

https://user-images.githubusercontent.com/1794099/166214372-e37c5ae1-f673-4f72-ac14-8cc1593efa83.mov

[deepak1556]

Reloading uses the same process causing the css files to be cached. Disabling cache in network tab or reloading via devtools (Cmd + R) which uses a different code path will bypass this cache. I wonder if adding a Last-Modified header from Electron's custom protocol handler could be a viable solution when running OSS.

[deepak1556]

Aggressive caching for subresources is intended in the runtime https://bugs.chromium.org/p/chromium/issues/detail?id=654378#c4 and the only way to force revalidation is via Cache-Control: max-age=0 or Last-Modified headers. Do we want to add this workaround for OSS css resources ?

[jrieken]

I'd say so but we can also discuss in the team. Today's workaround is to disable caching which has the same effect but is a trick that you need to know

[bpasero]

I somehow hit this more often lately, can we do something OSS to address this @deepak1556 ?

[deepak1556]

@bpasero does the headers specified here https://github.com/microsoft/vscode/issues/148541#issuecomment-1863187772 help ? you can pass them via https://github.com/microsoft/vscode/blob/ec8a0199a155a768456529fb123c8e5c81e7216c/src/vs/platform/protocol/electron-main/protocolMainService.ts#L94

[Tyriar]

@deepak1556 FYI I actually see my JS files usually not reloading since the ESM change, I wasted enough time with this problem that I almost always just restart the app instead of reload the window 😦. I see this on Mac and Windows which is weird as I'm the only one AFAIK.

[Tyriar]

I tried with this diff and it still loads stale JS. @deepak1556 sent you a video showing my problem

diff --git a/src/vs/base/common/network.ts b/src/vs/base/common/network.ts
index f220611a722..934836c741a 100644
--- a/src/vs/base/common/network.ts
+++ b/src/vs/base/common/network.ts
@@ -366,7 +366,7 @@ export namespace COI {
                ['3', { 'Cross-Origin-Opener-Policy': 'same-origin', 'Cross-Origin-Embedder-Policy': 'require-corp' }],
        ]);

-       export const CoopAndCoep = Object.freeze(coiHeaders.get('3'));
+       export const CoopAndCoep = coiHeaders.get('3');

        const coiSearchParamName = 'vscode-coi';

diff --git a/src/vs/platform/protocol/electron-main/protocolMainService.ts b/src/vs/platform/protocol/electron-main/protocolMainService.ts
index 86e0a616af8..08510ce3eec 100644
--- a/src/vs/platform/protocol/electron-main/protocolMainService.ts
+++ b/src/vs/platform/protocol/electron-main/protocolMainService.ts
@@ -103,6 +103,11 @@ export class ProtocolMainService extends Disposable implements IProtocolMainServ
                                headers = COI.getHeadersFromQuery(request.url);
                        }
                }
+               if (!headers) {
+                       headers = {};
+               }
+               headers['Cache-Control'] = 'max-age=0';
+               headers['Last-Modified'] = 'Thu, 21 Nov 2021 12:48:00 GMT';

                // first check by validRoots
                if (this.validRoots.findSubstr(path)) {

[bpasero]

I personally have only seen this issue with CSS and not JS, but something that I notice is that only recently I had "Disable Cache" in devtools unchecked, when for many years before it was always checked. So my regression only came recently because this this fact in devtools.

[deepak1556]

Initial debugging shows @Tyriar issue is not affected by the http cache, I will continue to investigate that. The issue for css files should now be addressed via https://github.com/microsoft/vscode/pull/234357