diff --git a/devtools/client/inspector/changes/test/browser_changes_declaration_disable.js b/devtools/client/inspector/changes/test/browser_changes_declaration_disable.js index ef57ee664f5f..9e7f49a47de1 100644 --- a/devtools/client/inspector/changes/test/browser_changes_declaration_disable.js +++ b/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"); diff --git a/devtools/client/inspector/changes/test/browser_changes_declaration_duplicate.js b/devtools/client/inspector/changes/test/browser_changes_declaration_duplicate.js index aca9ebc0c30d..a7b8454ee0c4 100644 --- a/devtools/client/inspector/changes/test/browser_changes_declaration_duplicate.js +++ b/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"); diff --git a/devtools/client/inspector/changes/test/browser_changes_declaration_edit_value.js b/devtools/client/inspector/changes/test/browser_changes_declaration_edit_value.js index 2e1b43523a86..078b109da1cc 100644 --- a/devtools/client/inspector/changes/test/browser_changes_declaration_edit_value.js +++ b/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; diff --git a/devtools/client/inspector/changes/test/browser_changes_declaration_identical_rules.js b/devtools/client/inspector/changes/test/browser_changes_declaration_identical_rules.js index 101d79140be1..096add7084c5 100644 --- a/devtools/client/inspector/changes/test/browser_changes_declaration_identical_rules.js +++ b/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"); diff --git a/devtools/client/inspector/changes/test/browser_changes_declaration_remove.js b/devtools/client/inspector/changes/test/browser_changes_declaration_remove.js index 5461331bdafb..26c7b912ab2e 100644 --- a/devtools/client/inspector/changes/test/browser_changes_declaration_remove.js +++ b/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"); diff --git a/devtools/client/inspector/changes/test/browser_changes_declaration_remove_ahead.js b/devtools/client/inspector/changes/test/browser_changes_declaration_remove_ahead.js index c1c2ffc16e6f..139a74df6f13 100644 --- a/devtools/client/inspector/changes/test/browser_changes_declaration_remove_ahead.js +++ b/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"); diff --git a/devtools/client/inspector/changes/test/browser_changes_declaration_remove_disabled.js b/devtools/client/inspector/changes/test/browser_changes_declaration_remove_disabled.js index fc5eb038cb05..0f0c0274e8f4 100644 --- a/devtools/client/inspector/changes/test/browser_changes_declaration_remove_disabled.js +++ b/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) { diff --git a/devtools/client/inspector/changes/test/browser_changes_declaration_rename.js b/devtools/client/inspector/changes/test/browser_changes_declaration_rename.js index 745f3831c1c1..59037270c8b2 100644 --- a/devtools/client/inspector/changes/test/browser_changes_declaration_rename.js +++ b/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; diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_02.js b/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_02.js index c60af7795839..02cb97bc3528 100644 --- a/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_02.js +++ b/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); diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js index 76b6bed40bdc..d1c81cda34e6 100644 --- a/devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js +++ b/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(); diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-on-empty.js b/devtools/client/inspector/rules/test/browser_rules_completion-on-empty.js index 7b7aeef94a15..af987f2ec0cc 100644 --- a/devtools/client/inspector/rules/test/browser_rules_completion-on-empty.js +++ b/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); diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-shortcut.js b/devtools/client/inspector/rules/test/browser_rules_completion-shortcut.js index 1c2db03c4fba..6909329f5339 100644 --- a/devtools/client/inspector/rules/test/browser_rules_completion-shortcut.js +++ b/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); diff --git a/devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js b/devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js index 44ebb826b832..250364909dff 100644 --- a/devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js +++ b/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"); diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-cancel.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-cancel.js index c5cfd9d770a9..25fff7ffc69e 100644 --- a/devtools/client/inspector/rules/test/browser_rules_edit-property-cancel.js +++ b/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"]); diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-click.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-click.js index 39ad4d90121a..f273f98a180f 100644 --- a/devtools/client/inspector/rules/test/browser_rules_edit-property-click.js +++ b/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); diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js index f1e1818f449b..19c0ebc28540 100644 --- a/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js +++ b/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"; diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-increments.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-increments.js index 739169792905..03539abe43a4 100644 --- a/devtools/client/inspector/rules/test/browser_rules_edit-property-increments.js +++ b/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: { diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_02.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_02.js index 020a62b7e0f3..5faa1e2e3dd6 100644 --- a/devtools/client/inspector/rules/test/browser_rules_edit-property_02.js +++ b/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); diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_03.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_03.js index fe8d142538b4..21ad01352e38 100644 --- a/devtools/client/inspector/rules/test/browser_rules_edit-property_03.js +++ b/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"); }); diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_04.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_04.js index 4637056f5dce..abee73c3c4e4 100644 --- a/devtools/client/inspector/rules/test/browser_rules_edit-property_04.js +++ b/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; diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_05.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_05.js index 6e22451a8ce9..51a2c1ed1458 100644 --- a/devtools/client/inspector/rules/test/browser_rules_edit-property_05.js +++ b/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); diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_06.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_06.js index aa5f76508863..ecb1ca6e9f36 100644 --- a/devtools/client/inspector/rules/test/browser_rules_edit-property_06.js +++ b/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"), diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_09.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_09.js index c28f206db77b..0e7bf30560e4 100644 --- a/devtools/client/inspector/rules/test/browser_rules_edit-property_09.js +++ b/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"); diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_10.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_10.js index 233f722db491..9a016f8023fa 100644 --- a/devtools/client/inspector/rules/test/browser_rules_edit-property_10.js +++ b/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"`); diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_09.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_09.js index 9e4a7cb1b5eb..025e166b2169 100644 --- a/devtools/client/inspector/rules/test/browser_rules_edit-selector_09.js +++ b/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" diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_01.js b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_01.js index 928caaae3d88..04990e53c162 100644 --- a/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_01.js +++ b/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); diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_02.js b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_02.js index 708c1659b344..d388219fdd0f 100644 --- a/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_02.js +++ b/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]; diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_03.js b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_03.js index 0851ec22a017..440d063daa96 100644 --- a/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_03.js +++ b/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];