Update devtools to enable strict mode via query param

Author: camdecoster

devtools/test_dashboard/index-strict.html

@@ -21,6 +21,9 @@
   </div>
   <div id="snapshot"></div>
 
+  <!-- Update UI elements if strict mode is enabled -->
+  <script src="./strict.js"></script>
+  
   <script src="../../node_modules/@plotly/mathjax-v2/MathJax.js?config=TeX-AMS-MML_SVG"></script>
   <script charset="utf-8" id="source" src="../../build/plotly.js"></script>
   <script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>

devtools/test_dashboard/index.html

@@ -62,22 +62,45 @@ console.log('watching esbuild...');
 await ctx.watch();
 
 function devServer() {
-    var server = http.createServer(ecstatic({
+    const staticFilesHandler = ecstatic({
         root: constants.pathToRoot,
         cache: 0,
         gzip: true,
         cors: true
-    }));
+    });
+
+    const server = http.createServer((req, res) => {
+        if(strict) {
+            res.setHeader(
+                'Content-Security-Policy',
+                // Comment/uncomment for testing CSP. Changes require a server restart.
+                [
+                    // "default-src 'self'",
+                    "script-src 'self'",
+                    "style-src 'self' 'unsafe-inline'",
+                    // "img-src 'self' data: blob:",
+                    // "font-src 'self' data:",
+                    // "connect-src 'self'",
+                    // "object-src 'none'",
+                    // "base-uri 'self';",
+                    "worker-src blob:",
+                ].join("; ")
+            )
+        }
+
+        staticFilesHandler(req, res)
+    })
 
     // Start the server up!
     server.listen(PORT);
 
+    let indexName = 'index';
+    if(mathjax3) indexName += '-mathjax3'
+    else if(mathjax3chtml) indexName += '-mathjax3chtml'
+    indexName += '.html'
+
     // open up browser window
-    open('http://localhost:' + PORT + '/devtools/test_dashboard/index' + (
-        strict ? '-strict' :
-        mathjax3 ? '-mathjax3' :
-        mathjax3chtml ? '-mathjax3chtml' : ''
-    ) + '.html');
+    open(`http://localhost:${PORT}/devtools/test_dashboard/${indexName}${strict ? '?strict=true' : ''}`);
 }
 
 function getMockFiles() {

devtools/test_dashboard/server.mjs

@@ -0,0 +1,7 @@
+if ((new URLSearchParams(location.search)).get("strict")) {
+  const strictDiv = document.createElement("div");
+  strictDiv.id = "strict-div";
+  strictDiv.textContent = "STRICT MODE";
+  document.querySelector("#reload-time").insertAdjacentElement('afterend', strictDiv);
+  document.querySelector("title").innerText = "Plotly.js 'strict' Devtools";
+}

devtools/test_dashboard/strict.js

@@ -33,6 +33,11 @@ header span{
   font-size: 10px;
   line-height: 40px;
 }
+#strict-div{
+  color: #F00;
+  font-weight: 600;
+  display: inline-block;
+}
 #mocks-list{
   position: fixed;
   right: 0px;