Repository: microsoft/vscode-edge-devtools
Pull request #176 (2020-07-17 00:48:30)

Updating some missing webview resources
Issue:
Resources were not loaded, which broke the extension

Fix:
Updating some resources with the latest practices for webview.

Related discussion here:
https://github.com/microsoft/vscode/issues/101562


Patch:
diff --git a/package-lock.json b/package-lock.json
index 6c92c1f..d3d75c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7513,9 +7513,9 @@
             }
         },
         "vscode-chrome-debug-core": {
-            "version": "6.7.51",
-            "resolved": "https://registry.npmjs.org/vscode-chrome-debug-core/-/vscode-chrome-debug-core-6.7.51.tgz",
-            "integrity": "sha512-7mJs+1POJ307jIX2XhNq9765atTqXEIUXRRVynGr5QGrDrBwS82Yrq4eYlwoAXqDqnLXAOY12lDPurvjF/gD9A==",
+            "version": "6.8.9",
+            "resolved": "https://registry.npmjs.org/vscode-chrome-debug-core/-/vscode-chrome-debug-core-6.8.9.tgz",
+            "integrity": "sha512-aI7bEP0AGJkmH8/y8wLap9r1eDXB44QJO4QtT5w07Ae4Mj21ez1RTqd85VFJisPMZL1oLVZCl7DBPjWNxweQpQ==",
             "requires": {
                 "@types/source-map": "^0.1.27",
                 "color": "^3.0.0",
@@ -7523,8 +7523,8 @@
                 "glob": "^7.1.3",
                 "noice-json-rpc": "^1.2.0",
                 "source-map": "^0.6.1",
-                "vscode-debugadapter": "^1.34.0",
-                "vscode-debugprotocol": "^1.34.0",
+                "vscode-debugadapter": "^1.37.1",
+                "vscode-debugprotocol": "^1.37.0",
                 "vscode-nls": "^4.0.0",
                 "vscode-uri": "^2.0.2",
                 "ws": "^6.0.0"
@@ -7541,25 +7541,18 @@
             }
         },
         "vscode-debugadapter": {
-            "version": "1.40.0",
-            "resolved": "https://registry.npmjs.org/vscode-debugadapter/-/vscode-debugadapter-1.40.0.tgz",
-            "integrity": "sha512-cudm9ROtFRxiBgcM+B8cQXA1DfsRKaOfEYDMh9upxbYxN3v0c40SHCPmNivIYp7LDzcG60UGaIYD1vsUfC1Qcg==",
+            "version": "1.41.0",
+            "resolved": "https://registry.npmjs.org/vscode-debugadapter/-/vscode-debugadapter-1.41.0.tgz",
+            "integrity": "sha512-b+J8wmsa3NCxJ+L9DAMpRfPM+8bmp4gFBoFp9lhkpwqn3UMs3sYvdcwugQr/T4lDaCCEr807HKMppRsD1EHhPQ==",
             "requires": {
                 "mkdirp": "^0.5.1",
-                "vscode-debugprotocol": "1.40.0"
-            },
-            "dependencies": {
-                "vscode-debugprotocol": {
-                    "version": "1.40.0",
-                    "resolved": "https://registry.npmjs.org/vscode-debugprotocol/-/vscode-debugprotocol-1.40.0.tgz",
-                    "integrity": "sha512-Fwze+9qbLDPuQUhtITJSu/Vk6zIuakNM1iR2ZiZRgRaMEgBpMs2JSKaT0chrhJHCOy6/UbpsUbUBIseF6msV+g=="
-                }
+                "vscode-debugprotocol": "1.41.0"
             }
         },
         "vscode-debugprotocol": {
-            "version": "1.35.0",
-            "resolved": "https://registry.npmjs.org/vscode-debugprotocol/-/vscode-debugprotocol-1.35.0.tgz",
-            "integrity": "sha512-+OMm11R1bGYbpIJ5eQIkwoDGFF4GvBz3Ztl6/VM+/RNNb2Gjk2c0Ku+oMmfhlTmTlPCpgHBsH4JqVCbUYhu5bA=="
+            "version": "1.41.0",
+            "resolved": "https://registry.npmjs.org/vscode-debugprotocol/-/vscode-debugprotocol-1.41.0.tgz",
+            "integrity": "sha512-Sxp7kDDuhpEZiDaIfhM0jLF3RtMqvc6CpoESANE77t351uezsd/oDoqALLcOnmmsDzTgQ3W0sCvM4gErnjDFpA=="
         },
         "vscode-extension-telemetry": {
             "version": "0.1.4",
@@ -7570,9 +7563,9 @@
             }
         },
         "vscode-nls": {
-            "version": "4.1.1",
-            "resolved": "https://registry.npmjs.org/vscode-nls/-/vscode-nls-4.1.1.tgz",
-            "integrity": "sha512-4R+2UoUUU/LdnMnFjePxfLqNhBS8lrAFyX7pjb2ud/lqDkrUavFUTcG7wR0HBZFakae0Q6KLBFjMS6W93F403A=="
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/vscode-nls/-/vscode-nls-4.1.2.tgz",
+            "integrity": "sha512-7bOHxPsfyuCqmP+hZXscLhiHwe7CSuFE4hyhbs22xPIhQ4jv99FcR4eBzfYYVLP356HNFpdvz63FFb/xw6T4Iw=="
         },
         "vscode-test": {
             "version": "1.0.2",
@@ -7585,9 +7578,9 @@
             }
         },
         "vscode-uri": {
-            "version": "2.0.3",
-            "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-2.0.3.tgz",
-            "integrity": "sha512-4D3DI3F4uRy09WNtDGD93H9q034OHImxiIcSq664Hq1Y1AScehlP3qqZyTkX/RWxeu0MRMHGkrxYqm2qlDF/aw=="
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-2.1.2.tgz",
+            "integrity": "sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A=="
         },
         "w3c-hr-time": {
             "version": "1.0.2",
@@ -7855,12 +7848,9 @@
             }
         },
         "ws": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/ws/-/ws-7.1.0.tgz",
-            "integrity": "sha512-Swie2C4fs7CkwlHu1glMePLYJJsWjzhl1vm3ZaLplD0h7OMkZyZ6kLTB/OagiU923bZrPFXuDTeEqaEN4NWG4g==",
-            "requires": {
-                "async-limiter": "^1.0.0"
-            }
+            "version": "7.3.0",
+            "resolved": "https://registry.npmjs.org/ws/-/ws-7.3.0.tgz",
+            "integrity": "sha512-iFtXzngZVXPGgpTlP1rBqsUK82p9tKqsWRPg5L56egiljujJT3vGAYnHANvFxBieXrTFavhzhxW52jnaWV+w2w=="
         },
         "xml-name-validator": {
             "version": "3.0.0",
diff --git a/package.json b/package.json
index df846b2..be12cc1 100644
--- a/package.json
+++ b/package.json
@@ -474,9 +474,9 @@
     },
     "dependencies": {
         "unzipper": "0.10.11",
-        "vscode-chrome-debug-core": "6.7.51",
+        "vscode-chrome-debug-core": "6.8.9",
         "vscode-extension-telemetry": "0.1.4",
-        "ws": "7.1.0",
+        "ws": "7.3.0",
         "xmlhttprequest": "1.8.0"
     },
     "devDependencies": {
diff --git a/src/devtoolsPanel.ts b/src/devtoolsPanel.ts
index 43749b1..4006bc1 100644
--- a/src/devtoolsPanel.ts
+++ b/src/devtoolsPanel.ts
@@ -270,7 +270,8 @@ export class DevToolsPanel {
                     content="default-src 'none';
                     frame-src ${this.panel.webview.cspSource};
                     script-src ${this.panel.webview.cspSource};
-                    style-src ${this.panel.webview.cspSource};">
+                    style-src ${this.panel.webview.cspSource};
+                    ">
                 <link href="${stylesUri}" rel="stylesheet"/>
                 <script src="${scriptUri}"></script>
             </head>
diff --git a/src/host/host.ts b/src/host/host.ts
index c02a5bc..1bf6483 100644
--- a/src/host/host.ts
+++ b/src/host/host.ts
@@ -57,6 +57,6 @@ export function initialize(dtWindow: IDevToolsWindow) {
         const resourceLoader = ToolsResourceLoader.overrideResourceLoading(dtWindow.Root.Runtime);
         dtWindow.InspectorFrontendHost.setResourceLoader(resourceLoader);
 
-        dtWindow.importScriptPathPrefix = dtWindow.importScriptPathPrefix.replace("null", "vscode-resource:");
+        dtWindow.importScriptPathPrefix = dtWindow.importScriptPathPrefix.replace("null", "vscode-webview-resource:");
     });
 }
diff --git a/src/host/messaging.ts b/src/host/messaging.ts
index f7c8096..38a2c64 100644
--- a/src/host/messaging.ts
+++ b/src/host/messaging.ts
@@ -18,7 +18,7 @@ export function initializeMessaging() {
         // See: https://blog.mattbierner.com/vscode-webview-web-learnings/
         let sendToDevTools = false;
         try {
-            sendToDevTools = (messageEvent.source as Window).location.protocol === "data:";
+            sendToDevTools = (messageEvent.source as Window).location.protocol === "vscode-webview:";
         } catch { /* NO-OP */ }
 
         if (!sendToDevTools) {
diff --git a/src/host/polyfills/inspectorContentPolicy.ts b/src/host/polyfills/inspectorContentPolicy.ts
index b087990..23e0991 100644
--- a/src/host/polyfills/inspectorContentPolicy.ts
+++ b/src/host/polyfills/inspectorContentPolicy.ts
@@ -5,7 +5,7 @@ export function applyContentSecurityPolicyPatch(content: string) {
     const scriptPattern = /script-src\s*'self'/g;
     let result;
     if (content.match(scriptPattern)) {
-        result = content.replace(scriptPattern, `script-src vscode-resource: 'self'`);
+        result = content.replace(scriptPattern, `script-src vscode-webview-resource: 'self'`);
     } else {
         return null;
     }


Test patch:
diff --git a/src/host/host.test.ts b/src/host/host.test.ts
index e0ff20d..881ce64 100644
--- a/src/host/host.test.ts
+++ b/src/host/host.test.ts
@@ -86,7 +86,7 @@ describe("host", () => {
             callback.call(thisObj);
 
             expect(mockOverride).toHaveBeenCalled();
-            expect(mockGlobal.importScriptPathPrefix).toBe("vscode-resource:/somepath");
+            expect(mockGlobal.importScriptPathPrefix).toBe("vscode-webview-resource:/somepath");
         });
     });
 
diff --git a/src/host/messaging.test.ts b/src/host/messaging.test.ts
index e4e95a7..926a8c6 100644
--- a/src/host/messaging.test.ts
+++ b/src/host/messaging.test.ts
@@ -65,12 +65,14 @@ describe("messaging", () => {
 
         const expectedToolsWindowMessage = "to tools window";
         messageCallback.call(messageThis,
-            { source: { location: { protocol: "data:" } }, data: expectedToolsWindowMessage } as MessageEvent);
+            { data: expectedToolsWindowMessage,
+              source: { location: { protocol: "vscode-webview:" } },
+             } as MessageEvent);
         expect(mockToolsWindow.contentWindow.postMessage).toBeCalledWith(expectedToolsWindowMessage, "*");
 
         const expectedVSCodeMessage = "to vscode";
         messageCallback.call(messageThis,
-            { source: { location: { protocol: "null" } }, data: expectedVSCodeMessage } as MessageEvent);
+            { data: expectedVSCodeMessage, source: { location: { protocol: "null" } } } as MessageEvent);
         expect(mockVSCode.postMessage).toBeCalledWith(expectedVSCodeMessage);
     });
 });
diff --git a/src/host/polyfills/inspectorContentPolicy.test.ts b/src/host/polyfills/inspectorContentPolicy.test.ts
index 9418dc3..b3683eb 100644
--- a/src/host/polyfills/inspectorContentPolicy.test.ts
+++ b/src/host/polyfills/inspectorContentPolicy.test.ts
@@ -14,7 +14,7 @@ describe("inspectorContentPolicy", () => {
         const result = apply.applyContentSecurityPolicyPatch(fileContents);
         expect(result).toEqual(
             expect.stringContaining(
-                `script-src vscode-resource: 'self'`));
+                `script-src vscode-webview-resource: 'self'`));
         expect(result).toEqual(
             expect.stringContaining(
                 `<script src="../../host/host.bundle.js"></script>`));