Bug 1596093 - Update tests for Rules view to use getTextProperty(). r=rcaliman

Differential Revision: https://phabricator.services.mozilla.com/D63019

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/changes/test/browser_changes_declaration_disable.js

@@ -20,8 +20,7 @@ add_task(async function() {
   const { document: doc, store } = selectChangesView(inspector);
 
   await selectNode("div", inspector);
-  const rule = getRuleViewRuleEditor(ruleView, 1).rule;
-  const prop = rule.textProps[0];
+  const prop = getTextProperty(ruleView, 1, { color: "red" });
 
   let onTrackChange = waitUntilAction(store, "TRACK_CHANGE");
   info("Disable the first declaration");

devtools/client/inspector/changes/test/browser_changes_declaration_duplicate.js

@@ -54,8 +54,7 @@ async function testChangeDuplicateDeclarations(ruleView, store, doc) {
   info(
     "Test that changing one of the duplicate declarations won't change the other"
   );
-  const rule = getRuleViewRuleEditor(ruleView, 1).rule;
-  const prop = rule.textProps[0];
+  const prop = getTextProperty(ruleView, 1, { color: "red" });
 
   info("Change the value of the first of the duplicate declarations");
   const onTrackChange = waitUntilAction(store, "TRACK_CHANGE");
@@ -75,8 +74,8 @@ async function testChangeDuplicateDeclarations(ruleView, store, doc) {
 async function testRemoveDuplicateDeclarations(ruleView, store, doc) {
   info(`Test that removing the first of the duplicate declarations
         will not remove the second.`);
-  const rule = getRuleViewRuleEditor(ruleView, 1).rule;
-  const prop = rule.textProps[0];
+
+  const prop = getTextProperty(ruleView, 1, { color: "black" });
 
   info("Remove first declaration");
   const onTrackChange = waitUntilAction(store, "TRACK_CHANGE");

devtools/client/inspector/changes/test/browser_changes_declaration_edit_value.js

@@ -54,8 +54,7 @@ add_task(async function() {
   const { document: doc, store } = selectChangesView(inspector);
 
   await selectNode("div", inspector);
-  const rule = getRuleViewRuleEditor(ruleView, 1).rule;
-  const prop = rule.textProps[0];
+  const prop = getTextProperty(ruleView, 1, { color: "red" });
 
   let onTrackChange;
   let removeDecl;

devtools/client/inspector/changes/test/browser_changes_declaration_identical_rules.js

@@ -26,10 +26,9 @@ add_task(async function() {
   const { document: doc, store } = selectChangesView(inspector);
 
   await selectNode("div", inspector);
-  const rule1 = getRuleViewRuleEditor(ruleView, 1).rule;
-  const rule2 = getRuleViewRuleEditor(ruleView, 2).rule;
-  const prop1 = rule1.textProps[0];
-  const prop2 = rule2.textProps[0];
+  const prop1 = getTextProperty(ruleView, 1, { "font-size": "1em" });
+  const prop2 = getTextProperty(ruleView, 2, { color: "red" });
+
   let onTrackChange;
 
   onTrackChange = waitUntilAction(store, "TRACK_CHANGE");

devtools/client/inspector/changes/test/browser_changes_declaration_remove.js

@@ -20,8 +20,7 @@ add_task(async function() {
   const { document: doc, store } = selectChangesView(inspector);
 
   await selectNode("div", inspector);
-  const rule = getRuleViewRuleEditor(ruleView, 1).rule;
-  const prop = rule.textProps[0];
+  const prop = getTextProperty(ruleView, 1, { color: "red" });
 
   const onTrackChange = waitUntilAction(store, "TRACK_CHANGE");
   info("Remove the first declaration");

devtools/client/inspector/changes/test/browser_changes_declaration_remove_ahead.js

@@ -22,9 +22,8 @@ add_task(async function() {
   const { document: doc, store } = selectChangesView(inspector);
 
   await selectNode("div", inspector);
-  const rule = getRuleViewRuleEditor(ruleView, 1).rule;
-  const prop1 = rule.textProps[0];
-  const prop2 = rule.textProps[1];
+  const prop1 = getTextProperty(ruleView, 1, { color: "red" });
+  const prop2 = getTextProperty(ruleView, 1, { display: "block" });
 
   let onTrackChange = waitUntilAction(store, "TRACK_CHANGE");
   info("Change the second declaration");

devtools/client/inspector/changes/test/browser_changes_declaration_remove_disabled.js

@@ -23,14 +23,15 @@ add_task(async function() {
   const { document: doc, store } = selectChangesView(inspector);
 
   await selectNode("div", inspector);
-  const rule = getRuleViewRuleEditor(ruleView, 1).rule;
+  const prop1 = getTextProperty(ruleView, 1, { color: "red" });
+  const prop2 = getTextProperty(ruleView, 1, { background: "black" });
 
   info("Using the second declaration");
-  await testRemoveValue(ruleView, store, doc, rule.textProps[1]);
+  await testRemoveValue(ruleView, store, doc, prop2);
   info("Using the first declaration");
-  await testToggle(ruleView, store, doc, rule.textProps[0]);
+  await testToggle(ruleView, store, doc, prop1);
   info("Using the first declaration");
-  await testRemoveName(ruleView, store, doc, rule.textProps[0]);
+  await testRemoveName(ruleView, store, doc, prop1);
 });
 
 async function testRemoveValue(ruleView, store, doc, prop) {

devtools/client/inspector/changes/test/browser_changes_declaration_rename.js

@@ -20,8 +20,7 @@ add_task(async function() {
   const { document: doc, store } = selectChangesView(inspector);
 
   await selectNode("div", inspector);
-  const rule = getRuleViewRuleEditor(ruleView, 1).rule;
-  const prop = rule.textProps[0];
+  const prop = getTextProperty(ruleView, 1, { color: "red" });
 
   let onTrackChange;
 

devtools/client/inspector/rules/test/browser_rules_completion-existing-property_02.js

@@ -56,8 +56,7 @@ async function runAutocompletionTest(toolbox, inspector, view) {
   info("Selecting the test node");
   await selectNode("h1", inspector);
 
-  const rule = getRuleViewRuleEditor(view, 0).rule;
-  const prop = rule.textProps[0];
+  const prop = getTextProperty(view, 0, { color: "red" });
 
   info("Focusing the css property editable value");
   let editor = await focusEditableField(view, prop.editor.valueSpan);

devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js

@@ -33,8 +33,7 @@ add_task(async function() {
   await selectNode("h1", inspector);
 
   info("Focusing the property editable field");
-  const rule = getRuleViewRuleEditor(view, 1).rule;
-  const prop = rule.textProps[0];
+  const prop = getTextProperty(view, 1, { background: LONG_CSS_VALUE });
 
   // Calculate offsets to click in the middle of the first box quad.
   const rect = prop.editor.valueSpan.getBoundingClientRect();

devtools/client/inspector/rules/test/browser_rules_completion-on-empty.js

@@ -14,8 +14,7 @@ add_task(async function() {
   info("Selecting the test node");
   await selectNode("h1", inspector);
 
-  const rule = getRuleViewRuleEditor(view, 0).rule;
-  const prop = rule.textProps[0];
+  const prop = getTextProperty(view, 0, { color: "lime" });
 
   info("Test with css property value field");
   await testCompletion(view, prop.editor.valueSpan, true);

devtools/client/inspector/rules/test/browser_rules_completion-shortcut.js

@@ -32,8 +32,7 @@ add_task(async function() {
     info("Selecting the test node");
     await selectNode("h1", inspector);
 
-    const rule = getRuleViewRuleEditor(view, 0).rule;
-    const prop = rule.textProps[0];
+    const prop = getTextProperty(view, 0, { colo: "lim" });
 
     info("Test with css property name field");
     const nameEditor = await focusEditableField(view, prop.editor.nameSpan);

devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js

@@ -24,8 +24,8 @@ add_task(async function() {
 });
 
 function testComputedList(inspector, view) {
-  const rule = getRuleViewRuleEditor(view, 1).rule;
-  const propEditor = rule.textProps[0].editor;
+  const prop = getTextProperty(view, 1, { margin: "0px 1px 2px 3px" });
+  const propEditor = prop.editor;
   const expander = propEditor.expander;
 
   ok(!expander.hasAttribute("open"), "margin computed list is closed");

devtools/client/inspector/rules/test/browser_rules_edit-property-cancel.js

@@ -21,7 +21,8 @@ add_task(async function() {
   await selectNode("#testid", inspector);
 
   const ruleEditor = getRuleViewRuleEditor(view, 1);
-  const propEditor = ruleEditor.rule.textProps[0].editor;
+  const prop = getTextProperty(view, 1, { "background-color": "#00F" });
+  const propEditor = prop.editor;
 
   await focusEditableField(view, propEditor.nameSpan);
   await sendKeysAndWaitForFocus(view, ruleEditor.element, ["DELETE", "ESCAPE"]);

devtools/client/inspector/rules/test/browser_rules_edit-property-click.js

@@ -24,7 +24,7 @@ add_task(async function() {
 
 async function testEditPropertyAndCancel(inspector, view) {
   const ruleEditor = getRuleViewRuleEditor(view, 1);
-  const propEditor = ruleEditor.rule.textProps[0].editor;
+  const propEditor = getTextProperty(view, 1, { margin: "0" }).editor;
 
   info("Test editor is created when clicking on property name");
   await focusEditableField(view, propEditor.nameSpan);

devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js

@@ -23,8 +23,7 @@ add_task(async function() {
 });
 
 async function editAndCheck(view) {
-  const idRuleEditor = getRuleViewRuleEditor(view, 1);
-  const prop = idRuleEditor.rule.textProps[0];
+  const prop = getTextProperty(view, 1, { padding: "10px" });
   const propEditor = prop.editor;
   const newPaddingValue = "20px";
 

devtools/client/inspector/rules/test/browser_rules_edit-property-increments.js

@@ -52,8 +52,8 @@ add_task(async function() {
 async function testMarginIncrements(view) {
   info("Testing keyboard increments on the margin property");
 
-  const idRuleEditor = getRuleViewRuleEditor(view, 1);
-  const marginPropEditor = idRuleEditor.rule.textProps[0].editor;
+  const marginPropEditor = getTextProperty(view, 1, { "margin-top": "0px" })
+    .editor;
 
   await runIncrementTest(marginPropEditor, view, {
     1: {
@@ -95,8 +95,8 @@ async function testMarginIncrements(view) {
 async function testVariousUnitIncrements(view) {
   info("Testing keyboard increments on values with various units");
 
-  const idRuleEditor = getRuleViewRuleEditor(view, 1);
-  const paddingPropEditor = idRuleEditor.rule.textProps[1].editor;
+  const paddingPropEditor = getTextProperty(view, 1, { "padding-top": "0px" })
+    .editor;
 
   await runIncrementTest(paddingPropEditor, view, {
     1: { start: "0px", end: "1px", selectAll: true },
@@ -116,8 +116,8 @@ async function testVariousUnitIncrements(view) {
 async function testHexIncrements(view) {
   info("Testing keyboard increments with hex colors");
 
-  const idRuleEditor = getRuleViewRuleEditor(view, 1);
-  const hexColorPropEditor = idRuleEditor.rule.textProps[2].editor;
+  const hexColorPropEditor = getTextProperty(view, 1, { color: "#000000" })
+    .editor;
 
   await runIncrementTest(hexColorPropEditor, view, {
     1: { start: "#CCCCCC", end: "#CDCDCD", selectAll: true },
@@ -138,8 +138,8 @@ async function testHexIncrements(view) {
 async function testAlphaHexIncrements(view) {
   info("Testing keyboard increments with alpha hex colors");
 
-  const idRuleEditor = getRuleViewRuleEditor(view, 1);
-  const hexColorPropEditor = idRuleEditor.rule.textProps[2].editor;
+  const hexColorPropEditor = getTextProperty(view, 1, { color: "#000000" })
+    .editor;
 
   await runIncrementTest(hexColorPropEditor, view, {
     1: { start: "#CCCCCCAA", end: "#CDCDCDAB", selectAll: true },
@@ -160,8 +160,9 @@ async function testAlphaHexIncrements(view) {
 async function testRgbIncrements(view) {
   info("Testing keyboard increments with rgb colors");
 
-  const idRuleEditor = getRuleViewRuleEditor(view, 1);
-  const rgbColorPropEditor = idRuleEditor.rule.textProps[3].editor;
+  const rgbColorPropEditor = getTextProperty(view, 1, {
+    "background-color": "#000000",
+  }).editor;
 
   await runIncrementTest(rgbColorPropEditor, view, {
     1: { start: "rgb(0,0,0)", end: "rgb(0,1,0)", selection: [6, 7] },
@@ -197,8 +198,8 @@ async function testRgbIncrements(view) {
 async function testShorthandIncrements(view) {
   info("Testing keyboard increments within shorthand values");
 
-  const idRuleEditor = getRuleViewRuleEditor(view, 1);
-  const paddingPropEditor = idRuleEditor.rule.textProps[1].editor;
+  const paddingPropEditor = getTextProperty(view, 1, { "padding-top": "0px" })
+    .editor;
 
   await runIncrementTest(paddingPropEditor, view, {
     1: { start: "0px 0px 0px 0px", end: "0px 1px 0px 0px", selection: [4, 7] },
@@ -254,8 +255,8 @@ async function testShorthandIncrements(view) {
 async function testOddCases(view) {
   info("Testing some more odd cases");
 
-  const idRuleEditor = getRuleViewRuleEditor(view, 1);
-  const marginPropEditor = idRuleEditor.rule.textProps[0].editor;
+  const marginPropEditor = getTextProperty(view, 1, { "margin-top": "0px" })
+    .editor;
 
   await runIncrementTest(marginPropEditor, view, {
     1: { start: "98.7%", end: "99.7%", selection: [3, 3] },
@@ -316,8 +317,8 @@ async function testOddCases(view) {
 async function testZeroValueIncrements(view) {
   info("Testing a valid unit is added when incrementing from 0");
 
-  const idRuleEditor = getRuleViewRuleEditor(view, 1);
-  const backgroundPropEditor = idRuleEditor.rule.textProps[4].editor;
+  const backgroundPropEditor = getTextProperty(view, 1, { background: "none" })
+    .editor;
   await runIncrementTest(backgroundPropEditor, view, {
     1: {
       start: "url(test-0.png) no-repeat 0 0",
@@ -356,7 +357,9 @@ async function testZeroValueIncrements(view) {
     },
   });
 
-  const transitionPropEditor = idRuleEditor.rule.textProps[5].editor;
+  const transitionPropEditor = getTextProperty(view, 1, {
+    transition: "initial",
+  }).editor;
   await runIncrementTest(transitionPropEditor, view, {
     1: { start: "all 0 ease-out", end: "all 1s ease-out", selection: [5, 5] },
     2: {
@@ -366,7 +369,7 @@ async function testZeroValueIncrements(view) {
     },
   });
 
-  const zIndexPropEditor = idRuleEditor.rule.textProps[6].editor;
+  const zIndexPropEditor = getTextProperty(view, 1, { "z-index": "0" }).editor;
   await runIncrementTest(zIndexPropEditor, view, {
     1: { start: "0", end: "1", selection: [1, 1] },
   });
@@ -375,8 +378,7 @@ async function testZeroValueIncrements(view) {
 async function testOpacityIncrements(view) {
   info("Testing keyboard increments on the opacity property");
 
-  const idRuleEditor = getRuleViewRuleEditor(view, 1);
-  const opacityPropEditor = idRuleEditor.rule.textProps[7].editor;
+  const opacityPropEditor = getTextProperty(view, 1, { opacity: "1" }).editor;
 
   await runIncrementTest(opacityPropEditor, view, {
     1: {

devtools/client/inspector/rules/test/browser_rules_edit-property_02.js

@@ -30,7 +30,7 @@ add_task(async function() {
 
 async function testEditProperty(inspector, ruleView) {
   const idRule = getRuleViewRuleEditor(ruleView, 1).rule;
-  const prop = idRule.textProps[0];
+  const prop = getTextProperty(ruleView, 1, { "background-color": "blue" });
 
   let editor = await focusEditableField(ruleView, prop.editor.nameSpan);
   let input = editor.input;
@@ -111,8 +111,10 @@ async function testEditProperty(inspector, ruleView) {
 }
 
 async function testDisableProperty(inspector, ruleView) {
-  const idRule = getRuleViewRuleEditor(ruleView, 1).rule;
-  const prop = idRule.textProps[0];
+  const prop = getTextProperty(ruleView, 1, {
+    "border-color": "red",
+    color: "red",
+  });
 
   info("Disabling a property");
   await togglePropStatus(ruleView, prop);

devtools/client/inspector/rules/test/browser_rules_edit-property_03.js

@@ -27,7 +27,8 @@ add_task(async function() {
   await selectNode("#testid", inspector);
 
   const ruleEditor = getRuleViewRuleEditor(view, 1);
-  const propEditor = ruleEditor.rule.textProps[1].editor;
+  const propEditor = getTextProperty(view, 1, { "background-color": "blue" })
+    .editor;
 
   await focusEditableField(view, propEditor.valueSpan);
 
@@ -42,10 +43,6 @@ add_task(async function() {
   await sendKeysAndWaitForFocus(view, ruleEditor.element, ["RETURN"]);
   await onRuleViewChanged;
 
-  isnot(
-    ruleEditor.rule.textProps[1].editor.nameSpan.style.display,
-    "none",
-    "The name span is visible"
-  );
+  isnot(propEditor.nameSpan.style.display, "none", "The name span is visible");
   is(ruleEditor.rule.textProps.length, 2, "Correct number of props");
 });

devtools/client/inspector/rules/test/browser_rules_edit-property_04.js

@@ -20,8 +20,7 @@ add_task(async function() {
   const { inspector, view } = await openRuleView();
   await selectNode("#testid", inspector);
 
-  const rule = getRuleViewRuleEditor(view, 1).rule;
-  const prop = rule.textProps[0];
+  const prop = getTextProperty(view, 1, { "background-color": "blue" });
 
   info("Disabling a property");
   await togglePropStatus(view, prop);
@@ -33,13 +32,13 @@ add_task(async function() {
   });
   is(newValue, "", "background-color should have been unset.");
 
-  await testEditDisableProperty(view, rule, prop, "name", "VK_ESCAPE");
-  await testEditDisableProperty(view, rule, prop, "value", "VK_ESCAPE");
-  await testEditDisableProperty(view, rule, prop, "value", "VK_TAB");
-  await testEditDisableProperty(view, rule, prop, "value", "VK_RETURN");
+  await testEditDisableProperty(view, prop, "name", "VK_ESCAPE");
+  await testEditDisableProperty(view, prop, "value", "VK_ESCAPE");
+  await testEditDisableProperty(view, prop, "value", "VK_TAB");
+  await testEditDisableProperty(view, prop, "value", "VK_RETURN");
 });
 
-async function testEditDisableProperty(view, rule, prop, fieldType, commitKey) {
+async function testEditDisableProperty(view, prop, fieldType, commitKey) {
   const field =
     fieldType === "name" ? prop.editor.nameSpan : prop.editor.valueSpan;
 

devtools/client/inspector/rules/test/browser_rules_edit-property_05.js

@@ -20,8 +20,7 @@ add_task(async function() {
   const { inspector, view } = await openRuleView();
   await selectNode("#testid", inspector);
 
-  const rule = getRuleViewRuleEditor(view, 1).rule;
-  const prop = rule.textProps[0];
+  const prop = getTextProperty(view, 1, { "background-color": "blue" });
 
   info("Disabling background-color property");
   await togglePropStatus(view, prop);

devtools/client/inspector/rules/test/browser_rules_edit-property_06.js

@@ -22,8 +22,7 @@ add_task(async function() {
   const { inspector, view } = await openRuleView();
   await selectNode("body", inspector);
 
-  const rule = getRuleViewRuleEditor(view, 1).rule;
-  const prop = rule.textProps[0];
+  const prop = getTextProperty(view, 1, { "background-color": "red" });
 
   is(
     await getComputedStyleProperty("body", null, "background-color"),

devtools/client/inspector/rules/test/browser_rules_edit-property_09.js

@@ -22,9 +22,10 @@ add_task(async function() {
   await testClickOnEmptyAreaToCloseEditor(inspector, view);
 });
 
-function synthesizeMouseOnEmptyArea(ruleEditor, view) {
+function synthesizeMouseOnEmptyArea(view) {
   // any text property editor will do
-  const propEditor = ruleEditor.rule.textProps[0].editor;
+  const prop = getTextProperty(view, 1, { "background-color": "blue" });
+  const propEditor = prop.editor;
   const valueContainer = propEditor.valueContainer;
   const valueRect = valueContainer.getBoundingClientRect();
   // click right next to the ";" at the end of valueContainer
@@ -41,7 +42,8 @@ async function testClickOnEmptyAreaToCloseEditor(inspector, view) {
   // Start at the beginning: start to add a rule to the element's style
   // declaration, add some text, then press escape.
   const ruleEditor = getRuleViewRuleEditor(view, 1);
-  const propEditor = ruleEditor.rule.textProps[0].editor;
+  const prop = getTextProperty(view, 1, { "background-color": "blue" });
+  const propEditor = prop.editor;
 
   info("Create a property value editor");
   let editor = await focusEditableField(view, propEditor.valueSpan);
@@ -53,14 +55,14 @@ async function testClickOnEmptyAreaToCloseEditor(inspector, view) {
   );
   const onRuleViewChanged = view.once("ruleview-changed");
   let onBlur = once(editor.input, "blur");
-  synthesizeMouseOnEmptyArea(ruleEditor, view);
+  synthesizeMouseOnEmptyArea(view);
   await onBlur;
   await onRuleViewChanged;
   ok(!view.isEditing, "No inplace editor should be displayed in the ruleview");
 
   info("Create new newProperty editor by clicking again on the empty area");
   const onFocus = once(ruleEditor.element, "focus", true);
-  synthesizeMouseOnEmptyArea(ruleEditor, view);
+  synthesizeMouseOnEmptyArea(view);
   await onFocus;
   editor = inplaceEditor(ruleEditor.element.ownerDocument.activeElement);
   is(
@@ -71,7 +73,7 @@ async function testClickOnEmptyAreaToCloseEditor(inspector, view) {
 
   info("Close the newProperty editor by clicking again on the empty area");
   onBlur = once(editor.input, "blur");
-  synthesizeMouseOnEmptyArea(ruleEditor, view);
+  synthesizeMouseOnEmptyArea(view);
   await onBlur;
 
   ok(!view.isEditing, "No inplace editor should be displayed in the ruleview");

devtools/client/inspector/rules/test/browser_rules_edit-property_10.js

@@ -19,8 +19,8 @@ add_task(async function() {
   const { inspector, view: ruleView } = await openRuleView();
 
   await selectNode("div", inspector);
-  const rule = getRuleViewRuleEditor(ruleView, 1).rule;
-  const prop = rule.textProps[0];
+  const prop = getTextProperty(ruleView, 1, { color: "red" });
+
   let onRuleViewChanged;
 
   info(`Rename the CSS property name to "Color"`);

devtools/client/inspector/rules/test/browser_rules_edit-selector_09.js

@@ -76,8 +76,7 @@ async function testAddImportantProperty(view) {
   is(textProp.priority, "important", 'Text prop has an "important" priority.');
   ok(!textProp.overridden, "Property should not be overridden");
 
-  const ruleEditor = getRuleViewRuleEditor(view, 1);
-  const prop = ruleEditor.rule.textProps[0];
+  const prop = getTextProperty(view, 1, { color: "black" });
   ok(
     !prop.overridden,
     "Existing property on matched rule should not be overridden"

devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_01.js

@@ -21,9 +21,8 @@ add_task(async function() {
   const { inspector, view } = await openRuleView();
 
   await selectNode("#testid", inspector);
-
-  const ruleEditor = getRuleViewRuleEditor(view, 1);
-  const propEditor = ruleEditor.rule.textProps[0].editor;
+  const prop = getTextProperty(view, 1, { color: "red" });
+  const propEditor = prop.editor;
 
   await testColorValueSpanClickWithoutNameChange(propEditor, view);
   await testColorValueSpanClickAfterNameChange(propEditor, view);

devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_02.js

@@ -29,8 +29,12 @@ add_task(async function() {
   info("Test shift + click on color swatch while editing property name");
 
   await selectNode("#testid", inspector);
-  const ruleEditor = getRuleViewRuleEditor(view, 1);
-  const propEditor = ruleEditor.rule.textProps[1].editor;
+  const prop = getTextProperty(view, 1, {
+    background:
+      "linear-gradient( 90deg, rgb(183,222,237), rgb(33,180,226), rgb(31,170,217), rgba(200,170,140,0.5))",
+  });
+  const propEditor = prop.editor;
+
   const swatchSpan = propEditor.valueSpan.querySelectorAll(
     ".ruleview-colorswatch"
   )[2];

devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_03.js

@@ -28,8 +28,12 @@ add_task(async function() {
   info("Test click on color swatch while editing property name");
 
   await selectNode("#testid", inspector);
-  const ruleEditor = getRuleViewRuleEditor(view, 1);
-  const propEditor = ruleEditor.rule.textProps[1].editor;
+  const prop = getTextProperty(view, 1, {
+    background:
+      "linear-gradient( 90deg, rgb(183,222,237), rgb(33,180,226), rgb(31,170,217), rgba(200,170,140,0.5))",
+  });
+  const propEditor = prop.editor;
+
   const swatchSpan = propEditor.valueSpan.querySelectorAll(
     ".ruleview-colorswatch"
   )[3];