Bug 1143742 - part1: multiline inplace editor: cleanup existing tests;r=gl
In preparation for using a multiline editor for property values, tests
need to be updated :
- some tests used the "input" selector, which will no longer work with a
textarea
- some tests are relying on EventUtils.sendChar to send keys such as
"VK_RETURN". Doing so also applies the shift key modifier, which has
a specific behavior with multiline editors
MozReview-Commit-ID: HkFxH3Go49E
--- a/devtools/client/inspector/rules/test/browser_rules_edit-property-cancel.js
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-cancel.js
@@ -20,35 +20,27 @@ add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
let ruleEditor = getRuleViewRuleEditor(view, 1);
let propEditor = ruleEditor.rule.textProps[0].editor;
yield focusEditableField(view, propEditor.nameSpan);
- yield sendCharsAndWaitForFocus(view, ruleEditor.element,
- ["VK_DELETE", "VK_ESCAPE"]);
+ yield sendKeysAndWaitForFocus(view, ruleEditor.element,
+ ["DELETE", "ESCAPE"]);
is(propEditor.nameSpan.textContent, "background-color",
"'background-color' property name is correctly set.");
is((yield getComputedStyleProperty("#testid", null, "background-color")),
"rgb(0, 0, 255)", "#00F background color is set.");
yield focusEditableField(view, propEditor.valueSpan);
let onValueDeleted = view.once("ruleview-changed");
- yield sendCharsAndWaitForFocus(view, ruleEditor.element,
- ["VK_DELETE", "VK_ESCAPE"]);
+ yield sendKeysAndWaitForFocus(view, ruleEditor.element,
+ ["DELETE", "ESCAPE"]);
yield onValueDeleted;
is(propEditor.valueSpan.textContent, "#00F",
"'#00F' property value is correctly set.");
is((yield getComputedStyleProperty("#testid", null, "background-color")),
"rgb(0, 0, 255)", "#00F background color is set.");
});
-
-function* sendCharsAndWaitForFocus(view, element, chars) {
- let onFocus = once(element, "focus", true);
- for (let ch of chars) {
- EventUtils.sendChar(ch, view.styleWindow);
- }
- yield onFocus;
-}
--- a/devtools/client/inspector/rules/test/browser_rules_edit-property-click.js
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-click.js
@@ -25,45 +25,37 @@ add_task(function*() {
function* testEditPropertyAndCancel(inspector, view) {
let ruleEditor = getRuleViewRuleEditor(view, 1);
let propEditor = ruleEditor.rule.textProps[0].editor;
info("Test editor is created when clicking on property name");
yield focusEditableField(view, propEditor.nameSpan);
ok(propEditor.nameSpan.inplaceEditor, "Editor created for property name");
- yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_ESCAPE"]);
+ yield sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]);
info("Test editor is created when clicking on ':' next to property name");
let nameRect = propEditor.nameSpan.getBoundingClientRect();
yield focusEditableField(view, propEditor.nameSpan, nameRect.width + 1);
ok(propEditor.nameSpan.inplaceEditor, "Editor created for property name");
- yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_ESCAPE"]);
+ yield sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]);
info("Test editor is created when clicking on property value");
yield focusEditableField(view, propEditor.valueSpan);
ok(propEditor.valueSpan.inplaceEditor, "Editor created for property value");
// When cancelling a value edition, the text-property-editor will trigger
// a modification to make sure the property is back to its original value
// => need to wait on "ruleview-changed" to avoid unhandled promises
let onRuleviewChanged = view.once("ruleview-changed");
- yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_ESCAPE"]);
+ yield sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]);
yield onRuleviewChanged;
info("Test editor is created when clicking on ';' next to property value");
let valueRect = propEditor.valueSpan.getBoundingClientRect();
yield focusEditableField(view, propEditor.valueSpan, valueRect.width + 1);
ok(propEditor.valueSpan.inplaceEditor, "Editor created for property value");
// When cancelling a value edition, the text-property-editor will trigger
// a modification to make sure the property is back to its original value
// => need to wait on "ruleview-changed" to avoid unhandled promises
onRuleviewChanged = view.once("ruleview-changed");
- yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_ESCAPE"]);
+ yield sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]);
yield onRuleviewChanged;
}
-
-function* sendCharsAndWaitForFocus(view, element, chars) {
- let onFocus = once(element, "focus", true);
- for (let ch of chars) {
- EventUtils.sendChar(ch, view.styleWindow);
- }
- yield onFocus;
-}
--- a/devtools/client/inspector/rules/test/browser_rules_edit-property_03.js
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_03.js
@@ -29,30 +29,22 @@ add_task(function*() {
let ruleEditor = getRuleViewRuleEditor(view, 1);
let propEditor = ruleEditor.rule.textProps[1].editor;
yield focusEditableField(view, propEditor.valueSpan);
info("Deleting all the text out of a value field");
let onRuleViewChanged = view.once("ruleview-changed");
- yield sendCharsAndWaitForFocus(view, ruleEditor.element,
- ["VK_DELETE", "VK_RETURN"]);
+ yield sendKeysAndWaitForFocus(view, ruleEditor.element,
+ ["DELETE", "RETURN"]);
yield onRuleViewChanged;
info("Pressing enter a couple times to cycle through editors");
- yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_RETURN"]);
+ yield sendKeysAndWaitForFocus(view, ruleEditor.element, ["RETURN"]);
onRuleViewChanged = view.once("ruleview-changed");
- yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_RETURN"]);
+ yield sendKeysAndWaitForFocus(view, ruleEditor.element, ["RETURN"]);
yield onRuleViewChanged;
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(view, element, chars) {
- let onFocus = once(element, "focus", true);
- for (let ch of chars) {
- EventUtils.sendChar(ch, element.ownerDocument.defaultView);
- }
- yield onFocus;
-}
--- a/devtools/client/inspector/rules/test/browser_rules_multiple-properties-unfinished_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_multiple-properties-unfinished_02.js
@@ -27,17 +27,18 @@ add_task(function*() {
is(ruleEditor.rule.textProps.length, 2,
"Should have created a new text property.");
is(ruleEditor.propertyList.children.length, 2,
"Should have created a property editor.");
// Value is focused, lets add multiple rules here and make sure they get added
onMutation = inspector.once("markupmutation");
onRuleViewChanged = view.once("ruleview-changed");
- let valueEditor = ruleEditor.propertyList.children[1].querySelector("input");
+ let valueEditor = ruleEditor.propertyList.children[1].
+ querySelector(".styleinspector-propertyeditor");
valueEditor.value = "10px;background:orangered;color: black;";
EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
yield onMutation;
yield onRuleViewChanged;
is(ruleEditor.rule.textProps.length, 4,
"Should have added the changed value.");
is(ruleEditor.propertyList.children.length, 5,
--- a/devtools/client/inspector/rules/test/head.js
+++ b/devtools/client/inspector/rules/test/head.js
@@ -872,8 +872,29 @@ function* reloadPage(inspector, testActo
*/
function* addNewRule(inspector, view) {
info("Adding the new rule using the button");
view.addRuleButton.click();
info("Waiting for rule view to change");
yield view.once("ruleview-changed");
}
+
+/**
+ * Simulate a sequence of non-character keys (return, escape, tab) and wait for
+ * a given element to receive the focus.
+ *
+ * @param {CssRuleView} view
+ * The instance of the rule-view panel
+ * @param {DOMNode} element
+ * The element that should be focused
+ * @param {Array} keys
+ * Array of non-character keys, the part that comes after "DOM_VK_" eg.
+ * "RETURN", "ESCAPE"
+ * @return a promise that resolves after the element received the focus
+ */
+function* sendKeysAndWaitForFocus(view, element, keys) {
+ let onFocus = once(element, "focus", true);
+ for (let key of keys) {
+ EventUtils.sendKey(key, view.styleWindow);
+ }
+ yield onFocus;
+}