wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 1166774 - Wait for rule-view modifications before proceeding to next tests. r=pbrosset,bgrins

Browse Source
This commit is contained in:
Alexandre Poirot 2015-07-10 00:22:53 -07:00
parent 86d02ad66a
commit 3692aea8e2
42 changed files with 154 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
browser/devtools/styleinspector/rule-view.js
View File

@ -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();
});
},
/**

2
browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_01.js
View File

@ -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");

19
browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_02.js
View File

@ -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.");

4
browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_03.js
View File

@ -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.");

2
browser/devtools/styleinspector/test/browser_ruleview_add-property-svg.js
View File

@ -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.");

2
browser/devtools/styleinspector/test/browser_ruleview_add-property_01.js
View File

@ -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;

2
browser/devtools/styleinspector/test/browser_ruleview_add-property_02.js
View File

@ -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.");

6
browser/devtools/styleinspector/test/browser_ruleview_add-rule_01.js
View File

@ -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");

2
browser/devtools/styleinspector/test/browser_ruleview_add-rule_03.js
View File

@ -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");

2
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_01.js
View File

@ -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)'

2
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_02.js
View File

@ -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)"

2
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-commit-on-ENTER.js
View File

@ -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)"

9
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-edit-gradient.js
View File

@ -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();

6
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-multiple-changes.js
View File

@ -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

3
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-release-outside-frame.js
View File

@ -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",

2
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-revert-on-ESC.js
View File

@ -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)"

2
browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_01.js
View File

@ -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 ++) {

2
browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_02.js
View File

@ -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 ++) {

2
browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_01.js
View File

@ -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 ++) {

2
browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_02.js
View File

@ -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 ++) {

8
browser/devtools/styleinspector/test/browser_ruleview_edit-property-commit.js
View File

@ -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);
}
}

2
browser/devtools/styleinspector/test/browser_ruleview_edit-property-computed.js
View File

@ -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);

11
browser/devtools/styleinspector/test/browser_ruleview_edit-property-increments.js
View File

@ -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);
}

2
browser/devtools/styleinspector/test/browser_ruleview_edit-property_01.js
View File

@ -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;

2
browser/devtools/styleinspector/test/browser_ruleview_edit-property_02.js
View File

@ -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.");

15
browser/devtools/styleinspector/test/browser_ruleview_edit-property_03.js
View File

@ -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;
}

2
browser/devtools/styleinspector/test/browser_ruleview_edit-selector-commit.js
View File

@ -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");

2
browser/devtools/styleinspector/test/browser_ruleview_edit-selector_01.js
View File

@ -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");

2
browser/devtools/styleinspector/test/browser_ruleview_edit-selector_02.js
View File

@ -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");

2
browser/devtools/styleinspector/test/browser_ruleview_edit-selector_03.js
View File

@ -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");

2
browser/devtools/styleinspector/test/browser_ruleview_edit-selector_04.js
View File

@ -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");

12
browser/devtools/styleinspector/test/browser_ruleview_edit-selector_05.js
View File

@ -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");

24
browser/devtools/styleinspector/test/browser_ruleview_eyedropper.js
View File

@ -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();
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);
yield onDestroyed;
yield onRuleViewChanged;
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();
});
});
inspectPage(dropper);
return deferred.promise;
}
function clearTelemetry() {

4
browser/devtools/styleinspector/test/browser_ruleview_filtereditor-appears-on-swatch-click.js
View File

@ -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),

6
browser/devtools/styleinspector/test/browser_ruleview_keybindings.js
View File

@ -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();
});

2
browser/devtools/styleinspector/test/browser_ruleview_livepreview.js
View File

@ -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")

18
browser/devtools/styleinspector/test/browser_ruleview_multiple-properties-unfinished_01.js
View File

@ -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.");

2
browser/devtools/styleinspector/test/browser_ruleview_user-property-reset.js
View File

@ -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");

4
browser/devtools/styleinspector/test/browser_styleinspector_context-menu-copy-color_02.js
View File

@ -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;

2
browser/devtools/styleinspector/test/browser_styleinspector_tooltip-background-image.js
View File

@ -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) {

2
browser/devtools/styleinspector/test/browser_styleinspector_tooltip-size.js
View File

@ -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;
}

29
browser/devtools/styleinspector/test/head.js
View File

@ -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.");