Bug 1798848 - [devtools] Fix add new rule for pages with style-src CSP when using stylesheet resource r=nchevobbe

Differential Revision: https://phabricator.services.mozilla.com/D161932
2022-11-14 09:40:08 +00:00 · 2022-11-14 09:40:08 +00:00 · 547bde34a3
--- a/devtools/client/inspector/rules/test/browser_part1.ini
+++ b/devtools/client/inspector/rules/test/browser_part1.ini
@ -33,6 +33,7 @@ skip-if =
 [browser_rules_add-rule-and-property.js]
 [browser_rules_add-rule-and-remove-style-node.js]
 [browser_rules_add-rule-button-state.js]
+[browser_rules_add-rule-csp.js]
 [browser_rules_add-rule-edit-selector.js]
 [browser_rules_add-rule-iframes.js]
 [browser_rules_add-rule-namespace-elements.js]
--- a/devtools/client/inspector/rules/test/browser_rules_add-rule-csp.js
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-csp.js
@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URI = `
+<!doctype html>
+<html>
+  <head>
+    <meta http-equiv="Content-Security-Policy" content="style-src 'none'">
+  </head>
+  <body>
+    <div id="testid"></div>
+  </body>
+</html>
+`;
+
+// Tests adding a new rule works on a page with CSP style-src none.
+add_task(async function() {
+  await addTab(`data:text/html;charset=utf-8,${encodeURIComponent(TEST_URI)}`);
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test node");
+  await selectNode("#testid", inspector);
+
+  info("Adding a new rule for this node and blurring the new selector field");
+  await addNewRuleAndDismissEditor(inspector, view, "#testid", 1);
+
+  info("Adding a new property for this rule");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  const onRuleViewChanged = view.once("ruleview-changed");
+  ruleEditor.addProperty("color", "red", "", true);
+  await onRuleViewChanged;
+
+  const textProps = ruleEditor.rule.textProps;
+  const prop = textProps[textProps.length - 1];
+  is(prop.name, "color", "The last property name is color");
+  is(prop.value, "red", "The last property value is red");
+});
--- a/devtools/server/actors/utils/stylesheets-manager.js
+++ b/devtools/server/actors/utils/stylesheets-manager.js
@ -160,6 +160,7 @@ class StyleSheetsManager extends EventEmitter {
      "style"
    );
    style.setAttribute("type", "text/css");
+    style.setDevtoolsAsTriggeringPrincipal();

    if (text) {
      style.appendChild(document.createTextNode(text));