--- 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
@@ -8,37 +8,38 @@
// correctly when editing existing properties in the rule view.
// format :
// [
// what key to press,
// modifers,
// expected input box value after keypress,
// selectedIndex of the popup,
-// total items in the popup
+// total items in the popup,
+// expect ruleview-changed
// ]
var testData = [
- ["b", {}, "beige", 0, 8],
- ["l", {}, "black", 0, 4],
- ["VK_DOWN", {}, "blanchedalmond", 1, 4],
- ["VK_DOWN", {}, "blue", 2, 4],
- ["VK_RIGHT", {}, "blue", -1, 0],
- [" ", {}, "blue !important", 0, 10],
- ["!", {}, "blue !important", 0, 0],
- ["VK_BACK_SPACE", {}, "blue !", -1, 0],
- ["VK_BACK_SPACE", {}, "blue ", -1, 0],
- ["VK_BACK_SPACE", {}, "blue", -1, 0],
- ["VK_TAB", {shiftKey: true}, "color", -1, 0],
- ["VK_BACK_SPACE", {}, "", -1, 0],
- ["d", {}, "direction", 0, 3],
- ["i", {}, "direction", 0, 2],
- ["s", {}, "display", -1, 0],
- ["VK_TAB", {}, "blue", -1, 0],
- ["n", {}, "none", -1, 0],
- ["VK_RETURN", {}, null, -1, 0]
+ ["b", {}, "beige", 0, 8, true],
+ ["l", {}, "black", 0, 4, true],
+ ["VK_DOWN", {}, "blanchedalmond", 1, 4, true],
+ ["VK_DOWN", {}, "blue", 2, 4, true],
+ ["VK_RIGHT", {}, "blue", -1, 0, false],
+ [" ", {}, "blue !important", 0, 10, true],
+ ["!", {}, "blue !important", 0, 0, true],
+ ["VK_BACK_SPACE", {}, "blue !", -1, 0, true],
+ ["VK_BACK_SPACE", {}, "blue ", -1, 0, true],
+ ["VK_BACK_SPACE", {}, "blue", -1, 0, true],
+ ["VK_TAB", {shiftKey: true}, "color", -1, 0, true],
+ ["VK_BACK_SPACE", {}, "", -1, 0, false],
+ ["d", {}, "direction", 0, 3, false],
+ ["i", {}, "direction", 0, 2, false],
+ ["s", {}, "display", -1, 0, false],
+ ["VK_TAB", {}, "blue", -1, 0, true],
+ ["n", {}, "none", -1, 0, true],
+ ["VK_RETURN", {}, null, -1, 0, true]
];
const TEST_URI = "<h1 style='color: red'>Header</h1>";
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {toolbox, inspector, view, testActor} = yield openRuleView();
@@ -49,53 +50,53 @@ add_task(function*() {
yield reloadPage(inspector, testActor);
yield runAutocompletionTest(toolbox, inspector, view);
});
function* runAutocompletionTest(toolbox, inspector, view) {
info("Selecting the test node");
yield selectNode("h1", inspector);
+ let rule = getRuleViewRuleEditor(view, 0).rule;
+ let prop = rule.textProps[0];
+
info("Focusing the css property editable value");
- let value = view.styleDocument.querySelectorAll(".ruleview-propertyvalue")[0];
- let editor = yield focusEditableField(view, value);
+ let editor = yield focusEditableField(view, prop.editor.valueSpan);
info("Starting to test for css property completion");
for (let i = 0; i < testData.length; i++) {
// Re-define the editor at each iteration, because the focus may have moved
// from property to value and back
editor = inplaceEditor(view.styleDocument.activeElement);
yield testCompletion(testData[i], editor, view);
}
}
-function* testCompletion([key, modifiers, completion, index, total], editor,
- view) {
+function* testCompletion([key, modifiers, completion, index, total, willChange],
+ editor, view) {
info("Pressing key " + key);
info("Expecting " + completion + ", " + index + ", " + total);
- let onKeyPress;
-
- if (/tab/ig.test(key)) {
- info("Waiting for the new property or value editor to get focused");
- let brace = view.styleDocument.querySelector(".ruleview-ruleclose");
- onKeyPress = once(brace.parentNode, "focus", true);
- } else if (/(right|return|back_space)/ig.test(key)) {
- info("Adding event listener for right|return|back_space keys");
- onKeyPress = once(editor.input, "keypress");
+ let onDone;
+ if (willChange) {
+ // If the key triggers a ruleview-changed, wait for that event, it will
+ // always be the last to be triggered and tells us when the preview has
+ // been done.
+ onDone = view.once("ruleview-changed");
} else {
- info("Waiting for after-suggest event on the editor");
- onKeyPress = editor.once("after-suggest");
+ // Otherwise, expect an after-suggest event (except if the popup gets
+ // closed).
+ onDone = key !== "VK_RIGHT" && key !== "VK_BACK_SPACE"
+ ? editor.once("after-suggest")
+ : null;
}
info("Synthesizing key " + key + ", modifiers: " + Object.keys(modifiers));
EventUtils.synthesizeKey(key, modifiers, view.styleWindow);
-
- yield onKeyPress;
- yield waitForTick();
+ yield onDone;
// The key might have been a TAB or shift-TAB, in which case the editor will
// be a new one
editor = inplaceEditor(view.styleDocument.activeElement);
info("Checking the state");
if (completion != null) {
is(editor.input.value, completion, "Correct value is autocompleted");
--- a/devtools/client/inspector/rules/test/browser_rules_completion-new-property_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_02.js
@@ -8,40 +8,40 @@
// correctly when editing new properties in the rule view.
// format :
// [
// what key to press,
// modifers,
// expected input box value after keypress,
// selectedIndex of the popup,
-// total items in the popup
+// total items in the popup,
+// expect ruleview-changed
// ]
var testData = [
- ["a", {accelKey: true, ctrlKey: true}, "", -1, 0],
- ["d", {}, "direction", 0, 3],
- ["VK_DOWN", {}, "display", 1, 3],
- ["VK_TAB", {}, "", -1, 10],
- ["VK_DOWN", {}, "-moz-box", 0, 10],
- ["n", {}, "none", -1, 0],
- ["VK_TAB", {shiftKey: true}, "display", -1, 0],
- ["VK_BACK_SPACE", {}, "", -1, 0],
- ["c", {}, "caption-side", 0, 10],
- ["o", {}, "color", 0, 7],
- ["VK_TAB", {}, "none", -1, 0],
- ["r", {}, "rebeccapurple", 0, 6],
- ["VK_DOWN", {}, "red", 1, 6],
- ["VK_DOWN", {}, "rgb", 2, 6],
- ["VK_DOWN", {}, "rgba", 3, 6],
- ["VK_DOWN", {}, "rosybrown", 4, 6],
- ["VK_DOWN", {}, "royalblue", 5, 6],
- ["VK_RIGHT", {}, "royalblue", -1, 0],
- [" ", {}, "royalblue !important", 0, 10],
- ["!", {}, "royalblue !important", 0, 0],
- ["VK_ESCAPE", {}, null, -1, 0]
+ ["d", {}, "direction", 0, 3, false],
+ ["VK_DOWN", {}, "display", 1, 3, false],
+ ["VK_TAB", {}, "", -1, 10, true],
+ ["VK_DOWN", {}, "-moz-box", 0, 10, true],
+ ["n", {}, "none", -1, 0, true],
+ ["VK_TAB", {shiftKey: true}, "display", -1, 0, true],
+ ["VK_BACK_SPACE", {}, "", -1, 0, false],
+ ["c", {}, "caption-side", 0, 10, false],
+ ["o", {}, "color", 0, 7, false],
+ ["VK_TAB", {}, "none", -1, 0, true],
+ ["r", {}, "rebeccapurple", 0, 6, true],
+ ["VK_DOWN", {}, "red", 1, 6, true],
+ ["VK_DOWN", {}, "rgb", 2, 6, true],
+ ["VK_DOWN", {}, "rgba", 3, 6, true],
+ ["VK_DOWN", {}, "rosybrown", 4, 6, true],
+ ["VK_DOWN", {}, "royalblue", 5, 6, true],
+ ["VK_RIGHT", {}, "royalblue", -1, 0, false],
+ [" ", {}, "royalblue !important", 0, 10, true],
+ ["!", {}, "royalblue !important", 0, 0, true],
+ ["VK_ESCAPE", {}, null, -1, 0, true]
];
const TEST_URI = `
<style type="text/css">
h1 {
border: 1px solid red;
}
</style>
@@ -72,41 +72,38 @@ function* runAutocompletionTest(toolbox,
for (let i = 0; i < testData.length; i++) {
// Re-define the editor at each iteration, because the focus may have moved
// from property to value and back
editor = inplaceEditor(view.styleDocument.activeElement);
yield testCompletion(testData[i], editor, view);
}
}
-function* testCompletion([key, modifiers, completion, index, total], editor,
- view) {
+function* testCompletion([key, modifiers, completion, index, total, willChange],
+ editor, view) {
info("Pressing key " + key);
info("Expecting " + completion + ", " + index + ", " + total);
- let onKeyPress;
-
- if (/tab/ig.test(key)) {
- info("Waiting for the new property or value editor to get focused");
- let brace = view.styleDocument.querySelectorAll(".ruleview-ruleclose")[1];
- onKeyPress = once(brace.parentNode, "focus", true);
- } else if (/(right|back_space|escape|return)/ig.test(key) ||
- (modifiers.accelKey || modifiers.ctrlKey)) {
- info("Adding event listener for right|escape|back_space|return keys");
- onKeyPress = once(editor.input, "keypress");
+ let onDone;
+ if (willChange) {
+ // If the key triggers a ruleview-changed, wait for that event, it will
+ // always be the last to be triggered and tells us when the preview has
+ // been done.
+ onDone = view.once("ruleview-changed");
} else {
- info("Waiting for after-suggest event on the editor");
- onKeyPress = editor.once("after-suggest");
+ // Otherwise, expect an after-suggest event (except if the popup gets
+ // closed).
+ onDone = key !== "VK_RIGHT" && key !== "VK_BACK_SPACE"
+ ? editor.once("after-suggest")
+ : null;
}
info("Synthesizing key " + key + ", modifiers: " + Object.keys(modifiers));
EventUtils.synthesizeKey(key, modifiers, view.styleWindow);
-
- yield onKeyPress;
- yield waitForTick();
+ yield onDone;
info("Checking the state");
if (completion != null) {
// The key might have been a TAB or shift-TAB, in which case the editor will
// be a new one
editor = inplaceEditor(view.styleDocument.activeElement);
is(editor.input.value, completion, "Correct value is autocompleted");
}
--- a/devtools/client/inspector/rules/test/browser_rules_edit-property-commit.js
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-commit.js
@@ -67,25 +67,23 @@ function* runTestData(view, {value, comm
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.styleWindow);
-
- info("Waiting for focus on the field");
- let onBlur = once(editor.input, "blur");
+ yield onRuleViewChanged;
info("Entering the commit key " + commitKey + " " + modifiers);
+ onRuleViewChanged = view.once("ruleview-changed");
+ let onBlur = once(editor.input, "blur");
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 {
is(propEditor.valueSpan.textContent, expected,
"Value is as expected: " + expected);
--- a/devtools/client/inspector/rules/test/browser_rules_multiple_properties_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_multiple_properties_02.js
@@ -8,34 +8,35 @@
// unfinished properties/values in inplace-editors
const TEST_URI = "<div>Test Element</div>";
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("div", inspector);
- yield testMultiValues(inspector, view);
-});
-function* testMultiValues(inspector, view) {
let ruleEditor = getRuleViewRuleEditor(view, 0);
+ let onDone = view.once("ruleview-changed");
yield createNewRuleViewProperty(ruleEditor, "width:");
+ yield onDone;
is(ruleEditor.rule.textProps.length, 1,
"Should have created a new text property.");
is(ruleEditor.propertyList.children.length, 1,
"Should have created a property editor.");
// Value is focused, lets add multiple rules here and make sure they get added
+ onDone = view.once("ruleview-changed");
let onMutation = inspector.once("markupmutation");
- let valueEditor = ruleEditor.propertyList.children[0].querySelector("input");
- valueEditor.value = "height: 10px;color:blue";
+ let input = view.styleDocument.activeElement;
+ input.value = "height: 10px;color:blue";
EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
yield onMutation;
+ yield onDone;
is(ruleEditor.rule.textProps.length, 2,
"Should have added the changed value.");
is(ruleEditor.propertyList.children.length, 3,
"Should have added the changed value editor.");
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
is(ruleEditor.propertyList.children.length, 2,
@@ -45,9 +46,9 @@ function* testMultiValues(inspector, vie
"Should have correct property name");
is(ruleEditor.rule.textProps[0].value, "height: 10px",
"Should have correct property value");
is(ruleEditor.rule.textProps[1].name, "color",
"Should have correct property name");
is(ruleEditor.rule.textProps[1].value, "blue",
"Should have correct property value");
-}
+});