commit 4efc2953eaac8b992c32818c905501fa56543215 parent 57a10b3ef1f07fe112c88e4e555c7298a5d9357b Author: Nicolas Chevobbe <nchevobbe@mozilla.com> Date: Fri, 5 Dec 2025 16:12:19 +0000 Bug 2003990 - [devtools] Check if selector is editable in checkRuleViewContent. r=devtools-reviewers,jdescottes - Differential Revision: https://phabricator.services.mozilla.com/D275073 Diffstat:
20 files changed, 238 insertions(+), 37 deletions(-)
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property-large-stylesheet.js b/devtools/client/inspector/rules/test/browser_rules_add-property-large-stylesheet.js @@ -26,6 +26,7 @@ add_task(async function () { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property_02.js b/devtools/client/inspector/rules/test/browser_rules_add-property_02.js @@ -122,10 +122,7 @@ add_task(async function () { ); await checkRuleViewContent(view, [ - { - selector: "element", - declarations: [], - }, + { selector: "element", selectorEditable: false, declarations: [] }, { selector: "#testid", declarations: [ diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-shadow-dom.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-shadow-dom.js @@ -63,6 +63,7 @@ add_task(async function () { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { @@ -97,6 +98,7 @@ add_task(async function () { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { diff --git a/devtools/client/inspector/rules/test/browser_rules_at_scope.js b/devtools/client/inspector/rules/test/browser_rules_at_scope.js @@ -53,7 +53,12 @@ add_task(async function () { const { inspector, view } = await openRuleView(); await selectNode("main", inspector); await checkRuleViewContent(view, [ - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { selector: `:scope, ~~[data-test="scoped-inline-style"]~~`, ancestorRulesData: ["@scope {"], @@ -63,7 +68,12 @@ add_task(async function () { await selectNode("main #a", inspector); await checkRuleViewContent(view, [ - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { selector: `div, ~~[data-test="scoped-inline-style"]~~`, ancestorRulesData: ["@scope {"], @@ -73,7 +83,12 @@ add_task(async function () { await selectNode("main #a #a-child", inspector); await checkRuleViewContent(view, [ - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { selector: `:scope, ~~[data-test="nested-scoped-inline-style"]~~`, ancestorRulesData: ["@scope {", " @scope (:scope section) {"], @@ -87,7 +102,12 @@ add_task(async function () { await selectNode("aside #b", inspector); await checkRuleViewContent(view, [ - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { selector: `div, ~~[data-test="start-and-end-inherit"]~~`, ancestorRulesData: ["@scope (aside) to (.limit) {"], @@ -107,7 +127,12 @@ add_task(async function () { await selectNode("aside #b > span", inspector); await checkRuleViewContent(view, [ - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { selector: `& span`, ancestorRulesData: [ @@ -129,7 +154,12 @@ add_task(async function () { await selectNode("aside #c", inspector); await checkRuleViewContent(view, [ - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { selector: `div, ~~[data-test="start-no-end"]~~`, ancestorRulesData: ["@scope (aside) {"], @@ -148,7 +178,12 @@ add_task(async function () { await selectNode("aside #c > span", inspector); await checkRuleViewContent(view, [ - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { header: "Inherited from div#b", }, diff --git a/devtools/client/inspector/rules/test/browser_rules_at_starting-style.js b/devtools/client/inspector/rules/test/browser_rules_at_starting-style.js @@ -116,7 +116,12 @@ add_task(async function () { await selectNode("body", inspector); await checkRuleViewContent(view, [ - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { selector: `body, ~~[data-test="in-starting-style"]~~`, ancestorRulesData: ["@starting-style {"], @@ -132,7 +137,12 @@ add_task(async function () { await selectNode("h1", inspector); await checkRuleViewContent(view, [ - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { selector: `h1, ~~[data-test="in-starting-style"]~~`, ancestorRulesData: ["@starting-style {"], @@ -159,7 +169,12 @@ add_task(async function () { await selectNode("main", inspector); await checkRuleViewContent(view, [ - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { selector: ``, ancestorRulesData: [ diff --git a/devtools/client/inspector/rules/test/browser_rules_attributes-style.js b/devtools/client/inspector/rules/test/browser_rules_attributes-style.js @@ -28,10 +28,12 @@ add_task(async function () { checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [{ name: "outline", value: "1px solid" }], }, { selector: "element attributes style", + selectorEditable: false, declarations: [{ name: "aspect-ratio", value: "auto 100 / 150" }], }, ]); @@ -41,10 +43,12 @@ add_task(async function () { checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { selector: "element attributes style", + selectorEditable: false, declarations: [{ name: "text-align", value: "-moz-center" }], }, ]); @@ -54,6 +58,7 @@ add_task(async function () { checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { @@ -61,6 +66,7 @@ add_task(async function () { }, { selector: "element attributes style", + selectorEditable: false, inherited: true, declarations: [{ name: "text-align", value: "-moz-center" }], }, @@ -72,6 +78,7 @@ add_task(async function () { checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { @@ -83,6 +90,7 @@ add_task(async function () { }, { selector: "element attributes style", + selectorEditable: false, inherited: true, declarations: [ { name: "text-align", value: "-moz-center", overridden: true }, @@ -96,10 +104,12 @@ add_task(async function () { checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { selector: "element attributes style", + selectorEditable: false, declarations: [{ name: "text-align", value: "-moz-left" }], }, { @@ -107,6 +117,7 @@ add_task(async function () { }, { selector: "element attributes style", + selectorEditable: false, inherited: true, declarations: [ { name: "text-align", value: "-moz-center", overridden: true }, @@ -120,10 +131,12 @@ add_task(async function () { checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [{ name: "text-align", value: "center" }], }, { selector: "element attributes style", + selectorEditable: false, declarations: [ { name: "text-align", value: "-moz-left", overridden: true }, ], @@ -134,10 +147,12 @@ add_task(async function () { checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { selector: "element attributes style", + selectorEditable: false, declarations: [{ name: "color", value: "-moz-inherit-from-body-quirk" }], }, ]); diff --git a/devtools/client/inspector/rules/test/browser_rules_content_02.js b/devtools/client/inspector/rules/test/browser_rules_content_02.js @@ -29,6 +29,7 @@ add_task(async function () { checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [ { name: "color", @@ -41,6 +42,7 @@ add_task(async function () { }, { selector: "element", + selectorEditable: false, inherited: true, declarations: [ { @@ -55,6 +57,7 @@ add_task(async function () { }, { selector: "element", + selectorEditable: false, inherited: true, declarations: [ { @@ -69,6 +72,7 @@ add_task(async function () { }, { selector: "element", + selectorEditable: false, inherited: true, declarations: [ { diff --git a/devtools/client/inspector/rules/test/browser_rules_custom-states.js b/devtools/client/inspector/rules/test/browser_rules_custom-states.js @@ -52,7 +52,12 @@ add_task(async function () { await selectNode("fx-test#no-state", inspector); await checkRuleViewContent(view, [ - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { selector: `fx-test`, declarations: [{ name: "color", value: "lime" }], @@ -61,7 +66,12 @@ add_task(async function () { await selectNode("fx-test#single-state", inspector); await checkRuleViewContent(view, [ - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { selector: `fx-test:state(custom-state)`, declarations: [{ name: "color", value: "gold" }], @@ -74,7 +84,12 @@ add_task(async function () { await selectNode("fx-test#multiple-state", inspector); await checkRuleViewContent(view, [ - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { selector: `fx-test:state(another-custom-state)`, declarations: [{ name: "color", value: "tomato" }], diff --git a/devtools/client/inspector/rules/test/browser_rules_inherited-custom-properties.js b/devtools/client/inspector/rules/test/browser_rules_inherited-custom-properties.js @@ -52,7 +52,12 @@ add_task(async function () { // The `main, [test="no-inherit"]` only has 1 definition that should be hidden, // which means that the whole rule should be hidden await checkRuleViewContent(view, [ - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { selector: `h1`, declarations: [ diff --git a/devtools/client/inspector/rules/test/browser_rules_inherited-element-backed-pseudo-elements.js b/devtools/client/inspector/rules/test/browser_rules_inherited-element-backed-pseudo-elements.js @@ -92,7 +92,12 @@ add_task(async function () { ); await selectNode("summary", inspector); await checkRuleViewContent(view, [ - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { selector: `& summary`, ancestorRulesData: ["details {"], @@ -130,7 +135,12 @@ add_task(async function () { { header: "This Element", }, - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { selector: `p`, declarations: [{ name: "outline-color", value: "var(--x)" }], @@ -215,7 +225,12 @@ add_task(async function () { { header: "This Element", }, - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { selector: `details#in-summary`, declarations: [{ name: "color", value: "cyan" }], @@ -242,7 +257,12 @@ add_task(async function () { await selectNode("details#in-summary summary", inspector); await checkRuleViewContent(view, [ - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { selector: `& summary`, ancestorRulesData: ["details#in-summary {"], @@ -288,7 +308,12 @@ add_task(async function () { { header: "This Element", }, - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + ancestorRulesData: null, + selectorEditable: false, + declarations: [], + }, { selector: `p`, declarations: [{ name: "outline-color", value: "var(--x)" }], @@ -367,7 +392,7 @@ add_task(async function () { // actually interactive. The other ones are placed inside the ::details-content await selectNode("summary#non-functional-summary", inspector); await checkRuleViewContent(view, [ - { selector: `element`, declarations: [] }, + { selector: `element`, selectorEditable: false, declarations: [] }, { selector: `& summary`, ancestorRulesData: [`details {`], @@ -435,7 +460,12 @@ add_task(async function () { { header: "This Element", }, - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + selectorEditable: false, + ancestorRulesData: null, + declarations: [], + }, { selector: `details`, declarations: [ @@ -470,7 +500,12 @@ add_task(async function () { { header: "This Element", }, - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + selectorEditable: false, + ancestorRulesData: null, + declarations: [], + }, { selector: `p`, declarations: [{ name: "outline-color", value: "var(--x)" }], @@ -526,7 +561,12 @@ add_task(async function () { ); await selectNode("#vip article", inspector); await checkRuleViewContent(view, [ - { selector: `element`, ancestorRulesData: null, declarations: [] }, + { + selector: `element`, + selectorEditable: false, + ancestorRulesData: null, + declarations: [], + }, { header: "Inherited from details#vip::details-content", }, diff --git a/devtools/client/inspector/rules/test/browser_rules_nested_rules.js b/devtools/client/inspector/rules/test/browser_rules_nested_rules.js @@ -57,7 +57,12 @@ add_task(async function () { await selectNode("body", inspector); checkRuleViewContent(view, [ - { selector: "element", ancestorRulesData: null, declarations: [] }, + { + selector: "element", + selectorEditable: false, + ancestorRulesData: null, + declarations: [], + }, { selector: "", ancestorRulesData: [`body {`], @@ -84,7 +89,12 @@ add_task(async function () { await selectNode("h1", inspector); checkRuleViewContent(view, [ - { selector: "element", ancestorRulesData: null, declarations: [] }, + { + selector: "element", + selectorEditable: false, + ancestorRulesData: null, + declarations: [], + }, { selector: `& h1`, // prettier-ignore @@ -98,7 +108,12 @@ add_task(async function () { await selectNode("h1 > .foo", inspector); checkRuleViewContent(view, [ - { selector: "element", ancestorRulesData: null, declarations: [] }, + { + selector: "element", + selectorEditable: false, + ancestorRulesData: null, + declarations: [], + }, { selector: `& .foo`, // prettier-ignore @@ -113,7 +128,12 @@ add_task(async function () { await selectNode("h1 > #bar", inspector); checkRuleViewContent(view, [ - { selector: "element", ancestorRulesData: null, declarations: [] }, + { + selector: "element", + selectorEditable: false, + ancestorRulesData: null, + declarations: [], + }, { selector: `& #bar`, // prettier-ignore @@ -128,7 +148,12 @@ add_task(async function () { await selectNode("nav", inspector); checkRuleViewContent(view, [ - { selector: "element", ancestorRulesData: null, declarations: [] }, + { + selector: "element", + selectorEditable: false, + ancestorRulesData: null, + declarations: [], + }, { selector: `& + nav`, ancestorRulesData: [ @@ -143,7 +168,12 @@ add_task(async function () { await selectNode("nav a", inspector); checkRuleViewContent(view, [ - { selector: "element", ancestorRulesData: null, declarations: [] }, + { + selector: "element", + selectorEditable: false, + ancestorRulesData: null, + declarations: [], + }, { selector: `& [href]`, ancestorRulesData: [ diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_02.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_02.js @@ -242,6 +242,7 @@ add_task(async function () { { selector: `element`, declarations: [], + selectorEditable: false, }, { selector: `*`, diff --git a/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_01.js b/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_01.js @@ -30,6 +30,7 @@ add_task(async function () { checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [ { name: "margin-top", value: "1px" }, { name: "padding-top", value: "5px" }, @@ -59,6 +60,7 @@ add_task(async function () { checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [ { name: "margin-top", value: "1px" }, { name: "padding-top", value: "5px" }, @@ -79,6 +81,7 @@ add_task(async function () { checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [ { name: "margin-top", value: "1px" }, { name: "padding-top", value: "5px" }, diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_01.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_01.js @@ -67,6 +67,7 @@ async function checkRules(view) { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { @@ -99,6 +100,7 @@ async function clearSearchAndCheckRules(view) { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { diff --git a/devtools/client/inspector/rules/test/browser_rules_variables-jump-to-definition.js b/devtools/client/inspector/rules/test/browser_rules_variables-jump-to-definition.js @@ -318,7 +318,7 @@ add_task(async function checkClearSearch() { // check that the rule view is filtered as expected await checkRuleViewContent(view, [ - { selector: "element", declarations: [] }, + { selector: "element", selectorEditable: false, declarations: [] }, { selector: "h1", declarations: [ @@ -345,7 +345,7 @@ add_task(async function checkClearSearch() { // check that the rule view is no longer filtered await checkRuleViewContent(view, [ - { selector: "element", declarations: [] }, + { selector: "element", selectorEditable: false, declarations: [] }, { selector: "h1#title", declarations: fillerDeclarations }, { selector: "h1", @@ -391,6 +391,7 @@ add_task(async function checkJumpToUnusedVariable() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { @@ -423,6 +424,7 @@ add_task(async function checkJumpToUnusedVariable() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_unused.js b/devtools/client/inspector/rules/test/browser_rules_variables_unused.js @@ -95,6 +95,7 @@ add_task(async function testHiddenUnusedVariables() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { @@ -168,6 +169,7 @@ add_task(async function testHiddenUnusedVariables() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { @@ -217,6 +219,7 @@ add_task(async function testHiddenUnusedVariables() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_unused_add_property.js b/devtools/client/inspector/rules/test/browser_rules_variables_unused_add_property.js @@ -40,6 +40,7 @@ add_task(async function testUnusedVariablesAndAddingDeclarations() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { @@ -65,6 +66,7 @@ add_task(async function testUnusedVariablesAndAddingDeclarations() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { @@ -87,6 +89,7 @@ add_task(async function testUnusedVariablesAndAddingDeclarations() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { @@ -117,6 +120,7 @@ add_task(async function testUnusedVariablesAndAddingDeclarations() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { @@ -156,6 +160,7 @@ add_task(async function testUnusedVariablesAndAddingDeclarations() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { @@ -205,6 +210,7 @@ add_task(async function testUnusedVariablesAndAddingDeclarations() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { @@ -270,6 +276,7 @@ add_task(async function testUnusedVariablesAndAddingDeclarations() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { @@ -340,6 +347,7 @@ add_task(async function testUnusedVariablesAndAddingDeclarations() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [{ name: "--unused-4", value: "new-4", dirty: true }], }, { @@ -416,6 +424,7 @@ add_task(async function testUnusedVariablesAndAddingDeclarations() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [{ name: "--unused-4", value: "new-4", dirty: true }], }, { @@ -489,6 +498,7 @@ add_task(async function testUnusedVariablesAndAddingDeclarations() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [{ name: "--unused-4", value: "new-4", dirty: true }], }, { @@ -580,6 +590,7 @@ add_task(async function testUnusedVariablesAndAddingDeclarations() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [{ name: "--unused-4", value: "new-4", dirty: true }], }, { diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_unused_filtering.js b/devtools/client/inspector/rules/test/browser_rules_variables_unused_filtering.js @@ -41,6 +41,7 @@ add_task(async function testUnusedVariablesAndFiltering() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { @@ -60,6 +61,7 @@ add_task(async function testUnusedVariablesAndFiltering() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { @@ -96,6 +98,7 @@ add_task(async function testUnusedVariablesAndFiltering() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { @@ -127,6 +130,7 @@ add_task(async function testUnusedVariablesAndFiltering() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { @@ -214,6 +218,7 @@ add_task(async function testUnusedVariablesAndFiltering() { await checkRuleViewContent(view, [ { selector: "element", + selectorEditable: false, declarations: [], }, { diff --git a/devtools/client/inspector/rules/test/head.js b/devtools/client/inspector/rules/test/head.js @@ -1371,6 +1371,8 @@ function getSmallIncrementKey() { * @param {object[]} expectedElements * @param {string} expectedElements[].selector - The expected selector of the rule. Wrap * unmatched selector with `~~` characters (e.g. "div, ~~unmatched~~") + * @param {boolean} expectedElements[].selectorEditable - Whether or not the selector can + * be edited. Defaults to true. * @param {string[]|null} expectedElements[].ancestorRulesData - An array of the parent * selectors of the rule, with their indentations and the opening brace. * e.g. for the following rule `html { body { span {} } }`, for the `span` rule, @@ -1428,8 +1430,12 @@ function checkRuleViewContent(view, expectedElements) { const selector = [ ...elementInView.querySelectorAll( - // Get the selector parts (.ruleview-selector), as well as the `element` "fake" selector - ".ruleview-selectors-container .ruleview-selector, .ruleview-selectors-container.alternative-selector" + // Get the selector parts (.ruleview-selector) + ".ruleview-selectors-container .ruleview-selector," + + // as well as the `element` "fake" selector + ".ruleview-selectors-container.alternative-selector," + + // and read-only selectors + `.ruleview-selectors-container.uneditable-selector` ), ] .map(selectorEl => { @@ -1445,6 +1451,13 @@ function checkRuleViewContent(view, expectedElements) { expectedElement.selector, `Expected selector for element #${i}` ); + is( + elementInView.querySelector( + `.ruleview-selectors-container:not(.uneditable-selector)` + ) !== null, + expectedElement.selectorEditable ?? true, + `Selector for element #${i} (${selector}) ${(expectedElement.selectorEditable ?? true) ? "is" : "isn't"} editable` + ); const ancestorData = elementInView.querySelector( `.ruleview-rule-ancestor-data` diff --git a/devtools/client/inspector/rules/views/rule-editor.js b/devtools/client/inspector/rules/views/rule-editor.js @@ -381,6 +381,8 @@ RuleEditor.prototype = { // devtools.inspector.rule-view.focusNextOnEnter set to true stopOnReturn: this.ruleView.inplaceEditorFocusNextOnEnter !== true, }); + } else { + this.selectorText.classList.add("uneditable-selector"); } if (this.rule.domRule.type !== CSSRule.KEYFRAME_RULE) {