@ethlete/query-devtools 1.0.0-next.12 → 1.0.0-next.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # Changelog
2
2
 
3
+ ## 1.0.0-next.13
4
+
5
+ ### Patch Changes
6
+
7
+ - The pop-out window is styled without inline `style` attributes and keeps the nonce of every stylesheet it copies, so it works under a strict `style-src`.
8
+
3
9
  ## 1.0.0-next.12
4
10
 
5
11
  ### Patch Changes
@@ -3696,7 +3696,7 @@ const summarizeLocks = (options) => {
3696
3696
 
3697
3697
  // Generated from package.json by tools/scripts/generate-version.js - do not edit.
3698
3698
  /** The version of `@ethlete/query-devtools` this build was cut from. */
3699
- const QUERY_DEVTOOLS_VERSION = '1.0.0-next.12';
3699
+ const QUERY_DEVTOOLS_VERSION = '1.0.0-next.13';
3700
3700
 
3701
3701
  /**
3702
3702
  * How deep a value is walked before it is replaced by a marker, and how much of a long string or a long
@@ -4852,7 +4852,7 @@ const POPOUT_DOCUMENT = `<!doctype html>
4852
4852
  <meta charset="utf-8" />
4853
4853
  <title>Query devtools</title>
4854
4854
  </head>
4855
- <body style="margin: 0"></body>
4855
+ <body></body>
4856
4856
  </html>`;
4857
4857
  /**
4858
4858
  * Every stylesheet the panel injects after it is created rather than with itself. A pop-out copies the
@@ -7168,8 +7168,9 @@ class QueryDevtoolsComponent {
7168
7168
  const doc = popup.document;
7169
7169
  const renderer = this.renderer;
7170
7170
  renderer.setAttribute(doc.documentElement, 'class', this.document.documentElement.className);
7171
- renderer.setAttribute(doc.documentElement, 'style', this.document.documentElement.getAttribute('style') ?? '');
7171
+ renderer.setCssProperties(doc.documentElement, this.inlineStyleOf(this.document.documentElement));
7172
7172
  renderer.setAttribute(doc.body, 'class', this.document.body.className);
7173
+ renderer.setStyle(doc.body, { margin: '0' });
7173
7174
  // Inserted before the stylesheets it applies to: a blob document's own base URL is the blob, so a
7174
7175
  // copied `<link href="styles.css">` - and every relative `url()` inside a copied `<style>` - would
7175
7176
  // resolve against nothing and silently fail to load.
@@ -7214,6 +7215,12 @@ class QueryDevtoolsComponent {
7214
7215
  }
7215
7216
  return tokens;
7216
7217
  }
7218
+ inlineStyleOf(element) {
7219
+ const styles = {};
7220
+ for (const property of Array.from(element.style))
7221
+ styles[property] = element.style.getPropertyValue(property);
7222
+ return styles;
7223
+ }
7217
7224
  /** Whether a `<head>` child carries CSS the pop-out needs a copy of. */
7218
7225
  isStyleNode(node) {
7219
7226
  if (node.tagName === 'STYLE')
@@ -7232,6 +7239,9 @@ class QueryDevtoolsComponent {
7232
7239
  if (!(node instanceof Element) || !this.isStyleNode(node) || copies.has(node))
7233
7240
  return;
7234
7241
  const clone = doc.importNode(node, true);
7242
+ // A nonce'd element hides its `nonce` attribute once connected, so the clone gets it from the property.
7243
+ if (node instanceof HTMLElement && node.nonce)
7244
+ this.renderer.setAttribute(clone, 'nonce', node.nonce);
7235
7245
  copies.set(node, clone);
7236
7246
  this.renderer.appendChild(doc.head, clone);
7237
7247
  };