diff --git a/browser/devtools/styleinspector/rule-view.js b/browser/devtools/styleinspector/rule-view.js index 0ec34aa0dc1..c3f9a12190e 100644 --- a/browser/devtools/styleinspector/rule-view.js +++ b/browser/devtools/styleinspector/rule-view.js @@ -715,7 +715,11 @@ Rule.prototype = { previewPropertyValue: function(aProperty, aValue, aPriority) { let modifications = this.style.startModifyingProperties(); modifications.setProperty(aProperty.name, aValue, aPriority); - modifications.apply(); + modifications.apply().then(() => { + // Ensure dispatching a ruleview-changed event + // also for previews + this.elementStyle._changed(); + }); }, /** diff --git a/browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_01.js b/browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_01.js index 215c1e9c867..cb5780284b4 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_01.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_01.js @@ -40,7 +40,7 @@ function* testCancelNew(view) { let elementRuleEditor = getRuleViewRuleEditor(view, 0); info("Focusing a new property name in the rule-view"); - let editor = yield focusEditableField(elementRuleEditor.closeBrace); + let editor = yield focusEditableField(view, elementRuleEditor.closeBrace); is(inplaceEditor(elementRuleEditor.newPropSpan), editor, "The new property editor got focused"); info("Bluring the editor input"); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_02.js b/browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_02.js index 6346284c7c4..103c071690a 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_02.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_02.js @@ -33,22 +33,19 @@ add_task(function*() { let elementRuleEditor = getRuleViewRuleEditor(view, 1); info("Focusing a new property name in the rule-view"); - let editor = yield focusEditableField(elementRuleEditor.closeBrace); + let editor = yield focusEditableField(view, elementRuleEditor.closeBrace); is(inplaceEditor(elementRuleEditor.newPropSpan), editor, "The new property editor got focused."); - let input = editor.input; info("Entering a value in the property name editor"); - let onModifications = elementRuleEditor.rule._applyingModifications; - input.value = "color"; - yield onModifications; + editor.input.value = "color"; info("Pressing return to commit and focus the new value field"); let onValueFocus = once(elementRuleEditor.element, "focus", true); - onModifications = elementRuleEditor.rule._applyingModifications; + let onRuleViewChanged = view.once("ruleview-changed"); EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView); yield onValueFocus; - yield onModifications; + yield onRuleViewChanged; // Getting the new value editor after focus editor = inplaceEditor(view.doc.activeElement); @@ -62,17 +59,17 @@ add_task(function*() { editor.input.value = "red"; info("Escaping out of the field"); - onModifications = elementRuleEditor.rule._applyingModifications; + onRuleViewChanged = view.once("ruleview-changed"); EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView); - yield onModifications; + yield onRuleViewChanged; info("Checking that the previous field is focused"); let focusedElement = inplaceEditor(elementRuleEditor.rule.textProps[0].editor.valueSpan).input; is(focusedElement, focusedElement.ownerDocument.activeElement, "Correct element has focus"); - onModifications = elementRuleEditor.rule._applyingModifications; + onRuleViewChanged = view.once("ruleview-changed"); EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView); - yield onModifications; + yield onRuleViewChanged; is(elementRuleEditor.rule.textProps.length, 1, "Removed the new text property."); is(elementRuleEditor.propertyList.children.length, 1, "Removed the property editor."); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_03.js b/browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_03.js index 59ed8b93ca7..3f38fcadb8f 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_03.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_03.js @@ -27,7 +27,7 @@ function* testCancelNew(inspector, ruleView) { // declaration, but leave it empty. let elementRuleEditor = getRuleViewRuleEditor(ruleView, 0); - let editor = yield focusEditableField(elementRuleEditor.closeBrace); + let editor = yield focusEditableField(ruleView, elementRuleEditor.closeBrace); is(inplaceEditor(elementRuleEditor.newPropSpan), editor, "Property editor is focused"); @@ -46,7 +46,7 @@ function* testCancelNewOnEscape(inspector, ruleView) { // declaration, add some text, then press escape. let elementRuleEditor = getRuleViewRuleEditor(ruleView, 0); - let editor = yield focusEditableField(elementRuleEditor.closeBrace); + let editor = yield focusEditableField(ruleView, elementRuleEditor.closeBrace); is(inplaceEditor(elementRuleEditor.newPropSpan), editor, "Next focused editor should be the new property editor."); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_add-property-svg.js b/browser/devtools/styleinspector/test/browser_ruleview_add-property-svg.js index 35e93b3a881..8dcffe767e6 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_add-property-svg.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_add-property-svg.js @@ -27,7 +27,7 @@ function* testCreateNew(ruleView) { let elementRuleEditor = getRuleViewRuleEditor(ruleView, 0); info("Focusing a new property name in the rule-view"); - let editor = yield focusEditableField(elementRuleEditor.closeBrace); + let editor = yield focusEditableField(ruleView, elementRuleEditor.closeBrace); is(inplaceEditor(elementRuleEditor.newPropSpan), editor, "Next focused editor should be the new property editor."); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_add-property_01.js b/browser/devtools/styleinspector/test/browser_ruleview_add-property_01.js index a7f2a6d9a6b..6c40bd4f242 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_add-property_01.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_add-property_01.js @@ -42,7 +42,7 @@ function* testCreateNew(view) { let elementRuleEditor = getRuleViewRuleEditor(view, 0); info("Focusing a new property name in the rule-view"); - let editor = yield focusEditableField(elementRuleEditor.closeBrace); + let editor = yield focusEditableField(view, elementRuleEditor.closeBrace); is(inplaceEditor(elementRuleEditor.newPropSpan), editor, "The new property editor got focused"); let input = editor.input; diff --git a/browser/devtools/styleinspector/test/browser_ruleview_add-property_02.js b/browser/devtools/styleinspector/test/browser_ruleview_add-property_02.js index 4eca66e3adb..7b49cb2ff4f 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_add-property_02.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_add-property_02.js @@ -29,7 +29,7 @@ add_task(function*() { function* testCreateNew(inspector, ruleView) { // Create a new property. let elementRuleEditor = getRuleViewRuleEditor(ruleView, 0); - let editor = yield focusEditableField(elementRuleEditor.closeBrace); + let editor = yield focusEditableField(ruleView, elementRuleEditor.closeBrace); is(inplaceEditor(elementRuleEditor.newPropSpan), editor, "Next focused editor should be the new property editor."); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_add-rule_01.js b/browser/devtools/styleinspector/test/browser_ruleview_add-rule_01.js index 83ba5744579..ccfe82cd470 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_add-rule_01.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_add-rule_01.js @@ -79,8 +79,7 @@ function* addNewRule(inspector, view, method) { view.addRuleButton.click(); } info("Waiting for rule view to change"); - let onRuleViewChanged = once(view, "ruleview-changed"); - yield onRuleViewChanged; + yield view.once("ruleview-changed"); } function* testNewRule(view, expected, index) { @@ -96,7 +95,10 @@ function* testNewRule(view, expected, index) { "Selector text value is as expected: " + expected); info("Adding new properties to new rule: " + expected) + let onRuleViewChanged = view.once("ruleview-changed"); idRuleEditor.addProperty("font-weight", "bold", ""); + yield onRuleViewChanged; + let textProps = idRuleEditor.rule.textProps; let lastRule = textProps[textProps.length - 1]; is(lastRule.name, "font-weight", "Last rule name is font-weight"); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_add-rule_03.js b/browser/devtools/styleinspector/test/browser_ruleview_add-rule_03.js index a875b1639b3..7c8055e98ca 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_add-rule_03.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_add-rule_03.js @@ -71,7 +71,7 @@ function* testEditSelector(view, name) { let idRuleEditor = getRuleViewRuleEditor(view, 1); info("Focusing an existing selector name in the rule-view"); - let editor = yield focusEditableField(idRuleEditor.selectorText); + let editor = yield focusEditableField(view, idRuleEditor.selectorText); is(inplaceEditor(idRuleEditor.selectorText), editor, "The selector editor got focused"); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_01.js b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_01.js index 0d30f024663..07df4d89830 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_01.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_01.js @@ -39,7 +39,7 @@ function* testImageTooltipAfterColorChange(swatch, url, ruleView) { let onShown = picker.tooltip.once("shown"); swatch.click(); yield onShown; - yield simulateColorPickerChange(picker, [0, 0, 0, 1], { + yield simulateColorPickerChange(ruleView, picker, [0, 0, 0, 1], { element: content.document.body, name: "backgroundImage", value: 'url("chrome://global/skin/icons/warning-64.png"), linear-gradient(rgb(0, 0, 0), rgb(255, 0, 102) 400px)' diff --git a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_02.js b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_02.js index 62b51e52e07..9a017edcef4 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_02.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_02.js @@ -36,7 +36,7 @@ function* testColorChangeIsntRevertedWhenOtherTooltipIsShown(ruleView) { swatch.click(); yield onShown; - yield simulateColorPickerChange(picker, [0, 0, 0, 1], { + yield simulateColorPickerChange(ruleView, picker, [0, 0, 0, 1], { element: content.document.body, name: "backgroundColor", value: "rgb(0, 0, 0)" diff --git a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-commit-on-ENTER.js b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-commit-on-ENTER.js index f866714e354..cfa5233e560 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-commit-on-ENTER.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-commit-on-ENTER.js @@ -32,7 +32,7 @@ function* testPressingEnterCommitsChanges(swatch, ruleView) { swatch.click(); yield onShown; - yield simulateColorPickerChange(cPicker, [0, 255, 0, .5], { + yield simulateColorPickerChange(ruleView, cPicker, [0, 255, 0, .5], { element: content.document.body, name: "borderLeftColor", value: "rgba(0, 255, 0, 0.5)" diff --git a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-edit-gradient.js b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-edit-gradient.js index 7046369a63c..ee5bbba7f70 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-edit-gradient.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-edit-gradient.js @@ -62,13 +62,18 @@ function* testPickingNewColor(view) { swatchEl.click(); yield onShown; - yield simulateColorPickerChange(cPicker, [1, 1, 1, 1]); + let change = { + element: content.document.body, + name: "backgroundImage", + value: "linear-gradient(to left, rgb(1, 1, 1) 25%, rgb(51, 51, 51) 95%, rgb(0, 0, 0) 100%)" + }; + yield simulateColorPickerChange(view, cPicker, [1, 1, 1, 1], change); is(swatchEl.style.backgroundColor, "rgb(1, 1, 1)", "The color swatch's background was updated"); is(colorEl.textContent, "#010101", "The color text was updated"); is(content.getComputedStyle(content.document.body).backgroundImage, - "linear-gradient(to left, rgb(255, 0, 102) 25%, rgb(51, 51, 51) 95%, rgb(0, 0, 0) 100%)", + "linear-gradient(to left, rgb(1, 1, 1) 25%, rgb(51, 51, 51) 95%, rgb(0, 0, 0) 100%)", "The gradient has been updated correctly"); cPicker.hide(); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-multiple-changes.js b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-multiple-changes.js index 24bef27ed97..d52c03a73e7 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-multiple-changes.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-multiple-changes.js @@ -54,7 +54,7 @@ function* testSimpleMultipleColorChanges(inspector, ruleView) { {rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)"} ]; for (let {rgba, computed} of colors) { - yield simulateColorPickerChange(picker, rgba, { + yield simulateColorPickerChange(ruleView, picker, rgba, { element: content.document.querySelector("p"), name: "color", value: computed @@ -82,7 +82,7 @@ function* testComplexMultipleColorChanges(inspector, ruleView) { {rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)"} ]; for (let {rgba, computed} of colors) { - yield simulateColorPickerChange(picker, rgba, { + yield simulateColorPickerChange(ruleView, picker, rgba, { element: content.document.body, name: "backgroundColor", value: computed @@ -115,7 +115,7 @@ function* testOverriddenMultipleColorChanges(inspector, ruleView) { {rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)"} ]; for (let {rgba, computed} of colors) { - yield simulateColorPickerChange(picker, rgba, { + yield simulateColorPickerChange(ruleView, picker, rgba, { element: content.document.body, name: "color", value: computed diff --git a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-release-outside-frame.js b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-release-outside-frame.js index 995ef4330b3..b86428280f2 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-release-outside-frame.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-release-outside-frame.js @@ -22,9 +22,11 @@ add_task(function*() { let change = spectrum.once("changed"); info("Pressing mouse down over color picker."); + let onRuleViewChanged = view.once("ruleview-changed"); EventUtils.synthesizeMouseAtCenter(spectrum.dragger, { type: "mousedown", }, spectrum.dragger.ownerDocument.defaultView); + yield onRuleViewChanged; let value = yield change; info(`Color changed to ${value} on mousedown.`); @@ -41,6 +43,7 @@ add_task(function*() { // i.e. the buttons that were pressed down between events. info("Moving mouse over color picker without any buttons pressed."); + EventUtils.synthesizeMouse(spectrum.dragger, 10, 10, { button: -1, // -1 = no buttons are pressed down type: "mousemove", diff --git a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-revert-on-ESC.js b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-revert-on-ESC.js index f2b4e6c2a0c..3a16a4aed8b 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-revert-on-ESC.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-revert-on-ESC.js @@ -32,7 +32,7 @@ function* testPressingEscapeRevertsChanges(swatch, ruleView) { swatch.click(); yield onShown; - yield simulateColorPickerChange(cPicker, [0, 0, 0, 1], { + yield simulateColorPickerChange(ruleView, cPicker, [0, 0, 0, 1], { element: content.document.body, name: "backgroundColor", value: "rgb(0, 0, 0)" diff --git a/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_01.js b/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_01.js index fbca6f20a61..2d149087c22 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_01.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_01.js @@ -66,7 +66,7 @@ add_task(function*() { info("Focusing the css property editable field"); let propertyName = view.doc.querySelectorAll(".ruleview-propertyname")[0]; - let editor = yield focusEditableField(propertyName); + let editor = yield focusEditableField(view, propertyName); info("Starting to test for css property completion"); for (let i = 0; i < testData.length; i ++) { diff --git a/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_02.js b/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_02.js index 439d51c693a..62c5c592b40 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_02.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_02.js @@ -48,7 +48,7 @@ add_task(function*() { info("Focusing the css property editable value"); let value = view.doc.querySelectorAll(".ruleview-propertyvalue")[0]; - let editor = yield focusEditableField(value); + let editor = yield focusEditableField(view, value); info("Starting to test for css property completion"); for (let i = 0; i < testData.length; i ++) { diff --git a/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_01.js b/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_01.js index 13b7becb94c..b425075a3d2 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_01.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_01.js @@ -49,7 +49,7 @@ add_task(function*() { info("Focusing the css property editable field"); let brace = view.doc.querySelector(".ruleview-ruleclose"); - let editor = yield focusEditableField(brace); + let editor = yield focusEditableField(view, brace); info("Starting to test for css property completion"); for (let i = 0; i < testData.length; i ++) { diff --git a/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_02.js b/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_02.js index 0cb9b08bc85..a6040747e14 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_02.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_02.js @@ -51,7 +51,7 @@ add_task(function*() { info("Focusing a new css property editable property"); let brace = view.doc.querySelectorAll(".ruleview-ruleclose")[1]; - let editor = yield focusEditableField(brace); + let editor = yield focusEditableField(view, brace); info("Starting to test for css property completion"); for (let i = 0; i < testData.length; i ++) { diff --git a/browser/devtools/styleinspector/test/browser_ruleview_edit-property-commit.js b/browser/devtools/styleinspector/test/browser_ruleview_edit-property-commit.js index 9044412dfea..033e138e5b5 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_edit-property-commit.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-property-commit.js @@ -60,10 +60,12 @@ function* runTestData(view, {value, commitKey, modifiers, expected}) { let propEditor = idRuleEditor.rule.textProps[0].editor; info("Focusing the inplace editor field"); - let editor = yield focusEditableField(propEditor.valueSpan); + + let editor = yield focusEditableField(view, propEditor.valueSpan); is(inplaceEditor(propEditor.valueSpan), editor, "Focused editor should be the value span."); info("Entering test data " + value); + let onRuleViewChanged = view.once("ruleview-changed"); EventUtils.sendString(value, view.doc.defaultView); info("Waiting for focus on the field"); @@ -72,11 +74,13 @@ function* runTestData(view, {value, commitKey, modifiers, expected}) { info("Entering the commit key " + commitKey + " " + modifiers); EventUtils.synthesizeKey(commitKey, modifiers); yield onBlur; + // No matter if we escape or commit the change, the preview throttle is going + // to update the property value + yield onRuleViewChanged; if (commitKey === "VK_ESCAPE") { is(propEditor.valueSpan.textContent, expected, "Value is as expected: " + expected); } else { - yield once(view, "ruleview-changed"); is(propEditor.valueSpan.textContent, expected, "Value is as expected: " + expected); } } diff --git a/browser/devtools/styleinspector/test/browser_ruleview_edit-property-computed.js b/browser/devtools/styleinspector/test/browser_ruleview_edit-property-computed.js index 93d7857bd7c..6dcd41102fe 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_edit-property-computed.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-property-computed.js @@ -29,7 +29,7 @@ function* editAndCheck(view) { let newPaddingValue = "20px"; info("Focusing the inplace editor field"); - let editor = yield focusEditableField(propEditor.valueSpan); + let editor = yield focusEditableField(view, propEditor.valueSpan); is(inplaceEditor(propEditor.valueSpan), editor, "Focused editor should be the value span."); let onPropertyChange = waitForComputedStyleProperty("#testid", null, "padding-top", newPaddingValue); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_edit-property-increments.js b/browser/devtools/styleinspector/test/browser_ruleview_edit-property-increments.js index 78dc7a165f1..c39ae4c226f 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_edit-property-increments.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-property-increments.js @@ -148,7 +148,7 @@ function* testOddCases(view) { }; function* runIncrementTest(propertyEditor, view, tests) { - let editor = yield focusEditableField(propertyEditor.valueSpan); + let editor = yield focusEditableField(view, propertyEditor.valueSpan); for(let test in tests) { yield testIncrement(editor, tests[test], view, propertyEditor); @@ -167,7 +167,7 @@ function* testIncrement(editor, options, view, {ruleEditor}) { is(input.value, options.start, "Value initialized at " + options.start); - let onModifications = ruleEditor.rule._applyingModifications; + let onRuleViewChanged = view.once("ruleview-changed"); let onKeyUp = once(input, "keyup"); let key; key = options.down ? "VK_DOWN" : "VK_UP"; @@ -175,7 +175,10 @@ function* testIncrement(editor, options, view, {ruleEditor}) { EventUtils.synthesizeKey(key, {altKey: options.alt, shiftKey: options.shift}, view.doc.defaultView); yield onKeyUp; - yield onModifications; + // Only expect a change if the value actually changed! + if (options.start !== options.end) { + yield onRuleViewChanged; + } - is(editor.input.value, options.end, "Value changed to " + options.end); + is(input.value, options.end, "Value changed to " + options.end); } diff --git a/browser/devtools/styleinspector/test/browser_ruleview_edit-property_01.js b/browser/devtools/styleinspector/test/browser_ruleview_edit-property_01.js index 6b95f07bbad..5517e212d4f 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_edit-property_01.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-property_01.js @@ -52,7 +52,7 @@ function* testEditProperty(ruleEditor, name, value, isValid) { let propEditor = ruleEditor.rule.textProps[0].editor; info("Focusing an existing property name in the rule-view"); - let editor = yield focusEditableField(propEditor.nameSpan, 32, 1); + let editor = yield focusEditableField(ruleEditor.ruleView, propEditor.nameSpan, 32, 1); is(inplaceEditor(propEditor.nameSpan), editor, "The property name editor got focused"); let input = editor.input; @@ -90,4 +90,4 @@ function* testEditProperty(ruleEditor, name, value, isValid) { } else { isnot(propValue, value, name + " shouldn't have been set."); } -} \ No newline at end of file +} diff --git a/browser/devtools/styleinspector/test/browser_ruleview_edit-property_02.js b/browser/devtools/styleinspector/test/browser_ruleview_edit-property_02.js index a2c79f1ba27..a4bccf2e4ae 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_edit-property_02.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-property_02.js @@ -34,7 +34,7 @@ function* testEditProperty(inspector, ruleView) { let idRuleEditor = getRuleViewRuleEditor(ruleView, 1); let propEditor = idRuleEditor.rule.textProps[0].editor; - let editor = yield focusEditableField(propEditor.nameSpan); + let editor = yield focusEditableField(ruleView, propEditor.nameSpan); let input = editor.input; is(inplaceEditor(propEditor.nameSpan), editor, "Next focused editor should be the name editor."); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_edit-property_03.js b/browser/devtools/styleinspector/test/browser_ruleview_edit-property_03.js index 37a18df80fc..7b2e568b34e 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_edit-property_03.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-property_03.js @@ -35,26 +35,25 @@ add_task(function*() { let doc = ruleEditor.doc; let propEditor = ruleEditor.rule.textProps[1].editor; - let editor = yield focusEditableField(propEditor.valueSpan); + let editor = yield focusEditableField(view, propEditor.valueSpan); info("Deleting all the text out of a value field"); - yield sendCharsAndWaitForFocus(ruleEditor.element, ["VK_DELETE", "VK_RETURN"]); - yield ruleEditor.rule._applyingModifications; + yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_DELETE", "VK_RETURN"]); info("Pressing enter a couple times to cycle through editors"); - yield sendCharsAndWaitForFocus(ruleEditor.element, ["VK_RETURN"]); - yield sendCharsAndWaitForFocus(ruleEditor.element, ["VK_RETURN"]); - - yield ruleEditor.rule._applyingModifications; + yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_RETURN"]); + yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_RETURN"]); isnot (ruleEditor.rule.textProps[1].editor.nameSpan.style.display, "none", "The name span is visible"); is (ruleEditor.rule.textProps.length, 2, "Correct number of props"); }); -function* sendCharsAndWaitForFocus(element, chars) { +function* sendCharsAndWaitForFocus(view, element, chars) { let onFocus = once(element, "focus", true); for (let ch of chars) { + let onRuleViewChanged = view.once("ruleview-changed"); EventUtils.sendChar(ch, element.ownerDocument.defaultView); + yield onRuleViewChanged; } yield onFocus; } diff --git a/browser/devtools/styleinspector/test/browser_ruleview_edit-selector-commit.js b/browser/devtools/styleinspector/test/browser_ruleview_edit-selector-commit.js index 0e2b39c1fbf..e5f3429366c 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_edit-selector-commit.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-selector-commit.js @@ -77,7 +77,7 @@ function* runTestData(inspector, view, data) { let idRuleEditor = getRuleViewRuleEditor(view, 1); info("Focusing an existing selector name in the rule-view"); - let editor = yield focusEditableField(idRuleEditor.selectorText); + let editor = yield focusEditableField(view, idRuleEditor.selectorText); is(inplaceEditor(idRuleEditor.selectorText), editor, "The selector editor got focused"); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_01.js b/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_01.js index 32806e909f5..89e49b5ffd7 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_01.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_01.js @@ -35,7 +35,7 @@ function* testEditSelector(view, name) { let idRuleEditor = getRuleViewRuleEditor(view, 1); info("Focusing an existing selector name in the rule-view"); - let editor = yield focusEditableField(idRuleEditor.selectorText); + let editor = yield focusEditableField(view, idRuleEditor.selectorText); is(inplaceEditor(idRuleEditor.selectorText), editor, "The selector editor got focused"); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_02.js b/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_02.js index e04ba41fc77..ba9e1e3ff11 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_02.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_02.js @@ -58,7 +58,7 @@ function* testEditSelector(view, name) { getRuleViewRuleEditor(view, 1, 0); info("Focusing an existing selector name in the rule-view"); - let editor = yield focusEditableField(idRuleEditor.selectorText); + let editor = yield focusEditableField(view, idRuleEditor.selectorText); is(inplaceEditor(idRuleEditor.selectorText), editor, "The selector editor got focused"); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_03.js b/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_03.js index 14e88786aab..b824295e03a 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_03.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_03.js @@ -29,7 +29,7 @@ function* testEditSelector(view, name) { let ruleEditor = getRuleViewRuleEditor(view, 1); info("Focusing an existing selector name in the rule-view"); - let editor = yield focusEditableField(ruleEditor.selectorText); + let editor = yield focusEditableField(view, ruleEditor.selectorText); is(inplaceEditor(ruleEditor.selectorText), editor, "The selector editor got focused"); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_04.js b/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_04.js index 84c9f9774fe..e8317a5bb77 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_04.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_04.js @@ -48,7 +48,7 @@ function* testEditSelector(view, name) { let ruleEditor = getRuleViewRuleEditor(view, 1); info("Focusing an existing selector name in the rule-view"); - let editor = yield focusEditableField(ruleEditor.selectorText); + let editor = yield focusEditableField(view, ruleEditor.selectorText); is(inplaceEditor(ruleEditor.selectorText), editor, "The selector editor got focused"); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_05.js b/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_05.js index b93fddf9e15..8ced054d894 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_05.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_05.js @@ -38,7 +38,7 @@ function* testEditSelector(view, name) { let ruleEditor = getRuleViewRuleEditor(view, 1); info("Focusing an existing selector name in the rule-view"); - let editor = yield focusEditableField(ruleEditor.selectorText); + let editor = yield focusEditableField(view, ruleEditor.selectorText); is(inplaceEditor(ruleEditor.selectorText), editor, "The selector editor got focused"); @@ -70,7 +70,7 @@ function* testAddProperty(view) { let ruleEditor = getRuleViewRuleEditor(view, 1); info("Focusing a new property name in the rule-view"); - let editor = yield focusEditableField(ruleEditor.closeBrace); + let editor = yield focusEditableField(view, ruleEditor.closeBrace); is(inplaceEditor(ruleEditor.newPropSpan), editor, "The new property editor got focused"); @@ -81,10 +81,10 @@ function* testAddProperty(view) { info("Pressing return to commit and focus the new value field"); let onValueFocus = once(ruleEditor.element, "focus", true); - let onModifications = ruleEditor.rule._applyingModifications; + let onRuleViewChanged = view.once("ruleview-changed"); EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView); yield onValueFocus; - yield onModifications; + yield onRuleViewChanged; // Getting the new value editor after focus editor = inplaceEditor(view.doc.activeElement); @@ -98,10 +98,10 @@ function* testAddProperty(view) { info("Entering a value and bluring the field to expect a rule change"); editor.input.value = "center"; let onBlur = once(editor.input, "blur"); - onModifications = ruleEditor.rule._applyingModifications; + onRuleViewChanged = view.once("ruleview-changed"); editor.input.blur(); yield onBlur; - yield onModifications; + yield onRuleViewChanged; is(textProp.value, "center", "Text prop should have been changed."); is(textProp.overridden, false, "Property should not be overridden"); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_eyedropper.js b/browser/devtools/styleinspector/test/browser_ruleview_eyedropper.js index 71d90ac4ead..495c75d0de7 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_eyedropper.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_eyedropper.js @@ -72,7 +72,7 @@ add_task(function*() { ok(dropper, "dropper opened"); - yield testSelect(swatch, dropper); + yield testSelect(view, swatch, dropper); checkTelemetry(); }); @@ -92,27 +92,23 @@ function testESC(swatch, dropper) { return deferred.promise; } -function testSelect(swatch, dropper) { - let deferred = promise.defer(); - - dropper.once("destroy", () => { - let color = swatch.style.backgroundColor; - is(color, EXPECTED_COLOR, "swatch changed colors"); - - // the change to the content is done async after rule view change - executeSoon(() => { - let element = content.document.querySelector("div"); - is(content.window.getComputedStyle(element).backgroundColor, - EXPECTED_COLOR, - "div's color set to body color after dropper"); - - deferred.resolve(); - }); - }); +function* testSelect(view, swatch, dropper) { + let onDestroyed = dropper.once("destroy"); + // the change to the content is done async after rule view change + let onRuleViewChanged = view.once("ruleview-changed"); inspectPage(dropper); - return deferred.promise; + yield onDestroyed; + yield onRuleViewChanged; + + let color = swatch.style.backgroundColor; + is(color, EXPECTED_COLOR, "swatch changed colors"); + + let element = content.document.querySelector("div"); + is(content.window.getComputedStyle(element).backgroundColor, + EXPECTED_COLOR, + "div's color set to body color after dropper"); } function clearTelemetry() { diff --git a/browser/devtools/styleinspector/test/browser_ruleview_filtereditor-appears-on-swatch-click.js b/browser/devtools/styleinspector/test/browser_ruleview_filtereditor-appears-on-swatch-click.js index a5d93ce7e36..140848ffa7e 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_filtereditor-appears-on-swatch-click.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_filtereditor-appears-on-swatch-click.js @@ -18,8 +18,12 @@ add_task(function*() { let filterTooltip = view.tooltips.filterEditor; let onShow = filterTooltip.tooltip.once("shown"); + let onRuleViewChanged = view.once("ruleview-changed"); swatch.click(); yield onShow; + // Clicking on swatch runs a preview of the current value + // and updates the rule-view + yield onRuleViewChanged; ok(true, "The shown event was emitted after clicking on swatch"); ok(!inplaceEditor(swatch.parentNode), diff --git a/browser/devtools/styleinspector/test/browser_ruleview_keybindings.js b/browser/devtools/styleinspector/test/browser_ruleview_keybindings.js index 9ffb85b3c7c..a4444bf175c 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_keybindings.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_keybindings.js @@ -28,8 +28,12 @@ add_task(function*() { info("Typing ENTER to focus the next field: property value"); onFocus = once(brace.parentNode, "focus", true); + // The rule view changes twice, once for the first field to loose focus + // and a second time for the second field to gain focus + let onRuleViewChanged = view.once("ruleview-changed").then(() => view.once("ruleview-changed")); EventUtils.sendKey("return"); yield onFocus; + yield onRuleViewChanged; ok(true, "The value field was focused"); info("Entering a property value"); @@ -38,8 +42,10 @@ add_task(function*() { info("Typing ENTER again should focus a new property name"); onFocus = once(brace.parentNode, "focus", true); + onRuleViewChanged = view.once("ruleview-changed"); EventUtils.sendKey("return"); yield onFocus; + yield onRuleViewChanged; ok(true, "The new property name field was focused"); getCurrentInplaceEditor(view).input.blur(); }); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_livepreview.js b/browser/devtools/styleinspector/test/browser_ruleview_livepreview.js index e726cbb1999..90a34383dcb 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_livepreview.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_livepreview.js @@ -43,7 +43,7 @@ function* testLivePreviewData(data, ruleView, selector) { let propEditor = idRuleEditor.rule.textProps[0].editor; info("Focusing the property value inplace-editor"); - let editor = yield focusEditableField(propEditor.valueSpan); + let editor = yield focusEditableField(ruleView, propEditor.valueSpan); is(inplaceEditor(propEditor.valueSpan), editor, "The focused editor is the value"); info("Enter a value in the editor") diff --git a/browser/devtools/styleinspector/test/browser_ruleview_multiple-properties-unfinished_01.js b/browser/devtools/styleinspector/test/browser_ruleview_multiple-properties-unfinished_01.js index 8ba2134a14c..aa8441f7804 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_multiple-properties-unfinished_01.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_multiple-properties-unfinished_01.js @@ -22,17 +22,35 @@ add_task(function*() { yield testCreateNewMultiUnfinished(inspector, ruleEditor, view); }); +function waitRuleViewChanged(view, n) { + let deferred = promise.defer(); + let count = 0; + let listener = function () { + if (++count == n) { + view.off("ruleview-changed", listener); + deferred.resolve(); + } + } + view.on("ruleview-changed", listener); + return deferred.promise; +} function* testCreateNewMultiUnfinished(inspector, ruleEditor, view) { let onMutation = inspector.once("markupmutation"); + // There is 6 rule-view updates, one for the rule view creation, + // one for each new property and one last for throttle update. + let onRuleViewChanged = waitRuleViewChanged(view, 6); yield createNewRuleViewProperty(ruleEditor, "color:blue;background : orange ; text-align:center; border-color: "); yield onMutation; + yield onRuleViewChanged; is(ruleEditor.rule.textProps.length, 4, "Should have created new text properties."); is(ruleEditor.propertyList.children.length, 4, "Should have created property editors."); EventUtils.sendString("red", view.doc.defaultView); + onRuleViewChanged = view.once("ruleview-changed"); EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView); + yield onRuleViewChanged; is(ruleEditor.rule.textProps.length, 4, "Should have the same number of text properties."); is(ruleEditor.propertyList.children.length, 5, "Should have added the changed value editor."); diff --git a/browser/devtools/styleinspector/test/browser_ruleview_user-property-reset.js b/browser/devtools/styleinspector/test/browser_ruleview_user-property-reset.js index cbc8ca8624b..81ab1171785 100644 --- a/browser/devtools/styleinspector/test/browser_ruleview_user-property-reset.js +++ b/browser/devtools/styleinspector/test/browser_ruleview_user-property-reset.js @@ -43,7 +43,7 @@ function* modifyRuleViewWidth(value, ruleView, inspector) { let valueSpan = getStyleRule(ruleView).querySelector(".ruleview-propertyvalue"); info("Focusing the property value to set it to edit mode"); - let editor = yield focusEditableField(valueSpan.parentNode); + let editor = yield focusEditableField(ruleView, valueSpan.parentNode); ok(editor.input, "The inplace-editor field is ready"); info("Setting the new value"); diff --git a/browser/devtools/styleinspector/test/browser_styleinspector_context-menu-copy-color_02.js b/browser/devtools/styleinspector/test/browser_styleinspector_context-menu-copy-color_02.js index e814a98213c..3de665ac2ee 100644 --- a/browser/devtools/styleinspector/test/browser_styleinspector_context-menu-copy-color_02.js +++ b/browser/devtools/styleinspector/test/browser_styleinspector_context-menu-copy-color_02.js @@ -53,7 +53,7 @@ function* testManualEdit(inspector, view) { let {valueSpan} = getRuleViewProperty(view, "div", "color"); let newColor = "#C9184E" - let editor = yield focusEditableField(valueSpan); + let editor = yield focusEditableField(view, valueSpan); info("Typing new value"); let input = editor.input; @@ -86,7 +86,7 @@ function* testColorPickerEdit(inspector, view) { let rgbaColor = [83, 183, 89, 1]; let rgbaColorText = "rgba(83, 183, 89, 1)"; - yield simulateColorPickerChange(picker, rgbaColor); + yield simulateColorPickerChange(view, picker, rgbaColor); is(swatch.parentNode.dataset.color, rgbaColorText, "data-color was updated"); view.doc.popupNode = swatch; diff --git a/browser/devtools/styleinspector/test/browser_styleinspector_tooltip-background-image.js b/browser/devtools/styleinspector/test/browser_styleinspector_tooltip-background-image.js index 7a46bea58c2..1fa7a72af3d 100644 --- a/browser/devtools/styleinspector/test/browser_styleinspector_tooltip-background-image.js +++ b/browser/devtools/styleinspector/test/browser_styleinspector_tooltip-background-image.js @@ -101,7 +101,7 @@ function* testTooltipAppearsEvenInEditMode(view) { function turnToEditMode(ruleView) { let brace = ruleView.doc.querySelector(".ruleview-ruleclose"); - return focusEditableField(brace); + return focusEditableField(ruleView, brace); } function* testComputedView(view) { diff --git a/browser/devtools/styleinspector/test/browser_styleinspector_tooltip-size.js b/browser/devtools/styleinspector/test/browser_styleinspector_tooltip-size.js index 5b97e94347c..ecdc1b969aa 100644 --- a/browser/devtools/styleinspector/test/browser_styleinspector_tooltip-size.js +++ b/browser/devtools/styleinspector/test/browser_styleinspector_tooltip-size.js @@ -81,6 +81,8 @@ function* testPickerDimension(ruleView) { ok(panelRect.height >= h, "The panel is high enough to show the picker"); let onHidden = cPicker.tooltip.once("hidden"); + let onRuleViewChanged = ruleView.once("ruleview-changed"); cPicker.hide(); yield onHidden; + yield onRuleViewChanged; } diff --git a/browser/devtools/styleinspector/test/head.js b/browser/devtools/styleinspector/test/head.js index 05a9e1ba8bc..e815940a42e 100644 --- a/browser/devtools/styleinspector/test/head.js +++ b/browser/devtools/styleinspector/test/head.js @@ -413,16 +413,31 @@ function* waitForComputedStyleProperty(selector, pseudo, name, expected) { * focus * @return a promise that resolves to the inplace-editor element when ready */ -let focusEditableField = Task.async(function*(editable, xOffset=1, yOffset=1, options={}) { - let onFocus = once(editable.parentNode, "focus", true); +let focusEditableField = Task.async(function*(ruleView, editable, xOffset=1, yOffset=1, options={}) { + // Focusing the name or value input is going to fire a preview and update the rule view + let expectRuleViewUpdate = + editable.classList.contains("ruleview-propertyname") || + editable.classList.contains("ruleview-propertyvalue"); + let onRuleViewChanged; + if (expectRuleViewUpdate) { + onRuleViewChanged = ruleView.once("ruleview-changed"); + } + let onFocus = once(editable.parentNode, "focus", true); info("Clicking on editable field to turn to edit mode"); EventUtils.synthesizeMouse(editable, xOffset, yOffset, options, editable.ownerDocument.defaultView); let event = yield onFocus; info("Editable field gained focus, returning the input field now"); - return inplaceEditor(editable.ownerDocument.activeElement); + let onEdit = inplaceEditor(editable.ownerDocument.activeElement); + + if (expectRuleViewUpdate) { + info("Waiting for rule view update"); + yield onRuleViewChanged; + } + + return onEdit; }); /** @@ -709,6 +724,7 @@ function getRuleViewSelectorHighlighterIcon(view, selectorText) { /** * Simulate a color change in a given color picker tooltip, and optionally wait * for a given element in the page to have its style changed as a result + * @param {RuleView} ruleView The related rule view instance * @param {SwatchColorPickerTooltip} colorPicker * @param {Array} newRgba The new color to be set [r, g, b, a] * @param {Object} expectedChange Optional object that needs the following props: @@ -718,7 +734,8 @@ function getRuleViewSelectorHighlighterIcon(view, selectorText) { * - {String} value The expected style value * The style will be checked like so: getComputedStyle(element)[name] === value */ -let simulateColorPickerChange = Task.async(function*(colorPicker, newRgba, expectedChange) { +let simulateColorPickerChange = Task.async(function*(ruleView, colorPicker, newRgba, expectedChange) { + let onRuleViewChanged = ruleView.once("ruleview-changed"); info("Getting the spectrum colorpicker object"); let spectrum = yield colorPicker.spectrum; info("Setting the new color"); @@ -726,6 +743,8 @@ let simulateColorPickerChange = Task.async(function*(colorPicker, newRgba, expec info("Applying the change"); spectrum.updateUI(); spectrum.onChange(); + info("Waiting for rule-view to update"); + yield onRuleViewChanged; if (expectedChange) { info("Waiting for the style to be applied on the page"); @@ -781,7 +800,7 @@ function getRuleViewRuleEditor(view, childrenIndex, nodeIndex) { let focusNewRuleViewProperty = Task.async(function*(ruleEditor) { info("Clicking on a close ruleEditor brace to start editing a new property"); ruleEditor.closeBrace.scrollIntoView(); - let editor = yield focusEditableField(ruleEditor.closeBrace); + let editor = yield focusEditableField(ruleEditor.ruleView, ruleEditor.closeBrace); is(inplaceEditor(ruleEditor.newPropSpan), editor, "Focused editor is the new property editor."); is(ruleEditor.rule.textProps.length, 0, "Starting with one new text property.");