Bug 1246677 - 8 - Use addProperty and remove code duplication; r=gl
authorPatrick Brosset <pbrosset@mozilla.com>
Thu, 18 Feb 2016 11:00:38 +0100
changeset 322063 ce103dd1d95b3f3d4ed9fb121453a86e61122312
parent 322062 fbbcf2ff6a1310d35bd1c74214778add0f57312b
child 322064 fab1d65e405ada5fc969a22fb8ef9bd7e405170b
push id5913
push userjlund@mozilla.com
push dateMon, 25 Apr 2016 16:57:49 +0000
treeherdermozilla-beta@dcaf0a6fa115 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1246677
milestone47.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1246677 - 8 - Use addProperty and remove code duplication; r=gl MozReview-Commit-ID: KQXgdZxdiw9
devtools/client/inspector/rules/test/browser_rules_add-property-cancel_01.js
devtools/client/inspector/rules/test/browser_rules_add-property-cancel_02.js
devtools/client/inspector/rules/test/browser_rules_add-property-cancel_03.js
devtools/client/inspector/rules/test/browser_rules_add-property-svg.js
devtools/client/inspector/rules/test/browser_rules_add-property_01.js
devtools/client/inspector/rules/test/browser_rules_add-property_02.js
devtools/client/inspector/rules/test/browser_rules_edit-selector_05.js
devtools/client/inspector/rules/test/browser_rules_guessIndentation.js
devtools/client/inspector/rules/test/browser_rules_lineNumbers.js
devtools/client/inspector/rules/test/browser_rules_search-filter_09.js
devtools/client/inspector/rules/test/head.js
--- a/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_01.js
@@ -22,17 +22,17 @@ add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
   yield testCancelNew(view);
 });
 
 function* testCancelNew(view) {
   let elementRuleEditor = getRuleViewRuleEditor(view, 0);
-  let editor = yield focusEditableField(view, elementRuleEditor.closeBrace);
+  let editor = yield focusNewRuleViewProperty(elementRuleEditor);
   is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
     "The new property editor got focused");
 
   info("Escape the new property editor");
   let onBlur = once(editor.input, "blur");
   EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
   yield onBlur;
 
--- a/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_02.js
@@ -16,66 +16,19 @@ const TEST_URI = `
 `;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
 
   info("Test creating a new property and escaping");
-
-  let elementRuleEditor = getRuleViewRuleEditor(view, 1);
-
-  info("Focusing a new property name in the rule-view");
-  let editor = yield focusEditableField(view, elementRuleEditor.closeBrace);
-
-  is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
-    "The new property editor got focused.");
-
-  info("Entering a value in the property name editor");
-  editor.input.value = "color";
-
-  info("Pressing return to commit and focus the new value field");
-  let onValueFocus = once(elementRuleEditor.element, "focus", true);
-  let onRuleViewChanged = view.once("ruleview-changed");
-  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
-  yield onValueFocus;
-  yield onRuleViewChanged;
-
-  // Getting the new value editor after focus
-  editor = inplaceEditor(view.styleDocument.activeElement);
-  let textProp = elementRuleEditor.rule.textProps[1];
-
-  is(elementRuleEditor.rule.textProps.length, 2,
-    "Created a new text property.");
-  is(elementRuleEditor.propertyList.children.length, 2,
-    "Created a property editor.");
-  is(editor, inplaceEditor(textProp.editor.valueSpan),
-    "Editing the value span now.");
-
-  info("Entering a property value");
-  editor.input.value = "red";
-
-  // Setting the input value above schedules a preview to be shown in 10ms
-  // which triggers a ruleview-changed event. If the event arrives at just the
-  // right moment after pressing escape but before the new property is removed
-  // from the rule view (it's done after a tick), the test continues too soon
-  // and the assertions below fail as the new property is still there (bug
-  // 1209295).
-  //
-  // Thus, wait for the ruleview-changed event triggered by the preview before
-  // continuing to discard the new property.
-  info("Waiting for preview to be applied.");
-  yield view.once("ruleview-changed");
-
-  info("Escaping out of the field");
-  onRuleViewChanged = view.once("ruleview-changed");
-  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
-  yield onRuleViewChanged;
+  yield addProperty(view, 1, "color", "red", "VK_ESCAPE", false);
 
   is(view.styleDocument.documentElement, view.styleDocument.activeElement,
     "Correct element has focus");
 
+  let elementRuleEditor = getRuleViewRuleEditor(view, 1);
   is(elementRuleEditor.rule.textProps.length, 1,
     "Removed the new text property.");
   is(elementRuleEditor.propertyList.children.length, 1,
     "Removed the property editor.");
 });
--- a/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_03.js
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_03.js
@@ -4,50 +4,42 @@
 
 "use strict";
 
 // Tests adding a new property and escapes the property name editor with a
 // value.
 
 const TEST_URI = `
   <style type='text/css'>
-    #testid {
+    div {
       background-color: blue;
     }
-    .testclass {
-      background-color: green;
-    }
   </style>
-  <div id='testid' class='testclass'>Styled Node</div>
+  <div>Test node</div>
 `;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
-  yield selectNode("#testid", inspector);
-  yield testCancelNewOnEscape(inspector, view);
-});
+  yield selectNode("div", inspector);
 
-function* testCancelNewOnEscape(inspector, view) {
-  // Start at the beginning: start to add a rule to the element's style
-  // declaration, add some text, then press escape.
+  // Add a property to the element's style declaration, add some text,
+  // then press escape.
 
-  let elementRuleEditor = getRuleViewRuleEditor(view, 0);
-  let editor = yield focusEditableField(view, elementRuleEditor.closeBrace);
+  let elementRuleEditor = getRuleViewRuleEditor(view, 1);
+  let editor = yield focusNewRuleViewProperty(elementRuleEditor);
 
   is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
     "Next focused editor should be the new property editor.");
 
   EventUtils.sendString("background", view.styleWindow);
 
   let onBlur = once(editor.input, "blur");
   EventUtils.synthesizeKey("VK_ESCAPE", {});
   yield onBlur;
 
   ok(!elementRuleEditor.rule._applyingModifications,
     "Shouldn't have an outstanding modification request after a cancel.");
-  is(elementRuleEditor.rule.textProps.length, 0,
+  is(elementRuleEditor.rule.textProps.length, 1,
     "Should have canceled creating a new text property.");
-  ok(!elementRuleEditor.propertyList.hasChildNodes(),
-    "Should not have any properties.");
   is(view.styleDocument.documentElement, view.styleDocument.activeElement,
     "Correct element has focus");
-}
+});
--- a/devtools/client/inspector/rules/test/browser_rules_add-property-svg.js
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-svg.js
@@ -8,54 +8,15 @@
 
 var TEST_URL = "chrome://global/skin/icons/warning.svg";
 var TEST_SELECTOR = "path";
 
 add_task(function*() {
   yield addTab(TEST_URL);
   let {inspector, view} = yield openRuleView();
   yield selectNode(TEST_SELECTOR, inspector);
-  yield testCreateNew(view);
-});
 
-function* testCreateNew(ruleView) {
   info("Test creating a new property");
-
-  let elementRuleEditor = getRuleViewRuleEditor(ruleView, 0);
-
-  info("Focusing a new property name in the rule-view");
-  let editor = yield focusEditableField(ruleView, elementRuleEditor.closeBrace);
-
-  is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
-    "Next focused editor should be the new property editor.");
-
-  let input = editor.input;
-
-  info("Entering the property name");
-  input.value = "fill";
-
-  info("Pressing RETURN and waiting for the value field focus");
-  let onFocus = once(elementRuleEditor.element, "focus", true);
-  EventUtils.sendKey("return", ruleView.styleWindow);
-  yield onFocus;
-  yield elementRuleEditor.rule._applyingModifications;
-
-  editor = inplaceEditor(ruleView.styleDocument.activeElement);
-
-  is(elementRuleEditor.rule.textProps.length, 1,
-    "Should have created a new text property.");
-  is(elementRuleEditor.propertyList.children.length, 1,
-    "Should have created a property editor.");
-  let textProp = elementRuleEditor.rule.textProps[0];
-  is(editor, inplaceEditor(textProp.editor.valueSpan),
-    "Should be editing the value span now.");
-
-  editor.input.value = "red";
-  let onBlur = once(editor.input, "blur");
-  EventUtils.sendKey("return", ruleView.styleWindow);
-  yield onBlur;
-  yield elementRuleEditor.rule._applyingModifications;
-
-  is(textProp.value, "red", "Text prop should have been changed.");
+  yield addProperty(view, 0, "fill", "red");
 
   is((yield getComputedStyleProperty(TEST_SELECTOR, null, "fill")),
-    "rgb(255, 0, 0)", "The fill was changed to red");
-}
+     "rgb(255, 0, 0)", "The fill was changed to red");
+});
--- a/devtools/client/inspector/rules/test/browser_rules_add-property_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property_01.js
@@ -1,17 +1,15 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
-// Testing various inplace-editor behaviors in the rule-view
-// FIXME: To be split in several test files, and some of the inplace-editor
-// focus/blur/commit/revert stuff should be factored out in head.js
+// Test adding an invalid property.
 
 const TEST_URI = `
   <style type='text/css'>
     #testid {
       background-color: blue;
     }
     .testclass {
       background-color: green;
@@ -19,56 +17,16 @@ const TEST_URI = `
   </style>
   <div id='testid' class='testclass'>Styled Node</div>
 `;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
-  yield testCreateNew(view);
-});
 
-function* testCreateNew(view) {
   info("Test creating a new property");
-
-  let elementRuleEditor = getRuleViewRuleEditor(view, 0);
-
-  info("Focusing a new property name in the rule-view");
-  let editor = yield focusEditableField(view, elementRuleEditor.closeBrace);
-
-  is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
-    "The new property editor got focused");
-  let input = editor.input;
-
-  info("Entering background-color in the property name editor");
-  input.value = "background-color";
-
-  info("Pressing return to commit and focus the new value field");
-  let onModifications = view.once("ruleview-changed");
-  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
-  yield onModifications;
-
-  // Getting the new value editor after focus
-  editor = inplaceEditor(view.styleDocument.activeElement);
-  let textProp = elementRuleEditor.rule.textProps[0];
-
-  is(elementRuleEditor.rule.textProps.length, 1,
-    "Created a new text property.");
-  is(elementRuleEditor.propertyList.children.length, 1,
-    "Created a property editor.");
-  is(editor, inplaceEditor(textProp.editor.valueSpan),
-    "Editing the value span now.");
-
-  ok(!textProp.editor.element.classList.contains("ruleview-overridden"),
-    "property should not be overridden.");
-
-  info("Entering a value and bluring the field to expect a rule change");
-  editor.input.value = "#XYZ";
-
-  onModifications = view.once("ruleview-changed");
-  editor.input.blur();
-  yield onModifications;
+  let textProp = yield addProperty(view, 0, "background-color", "#XYZ");
 
   is(textProp.value, "#XYZ", "Text prop should have been changed.");
   is(textProp.overridden, true, "Property should be overridden");
   is(textProp.editor.isValid(), false, "#XYZ should not be a valid entry");
-}
+});
--- a/devtools/client/inspector/rules/test/browser_rules_add-property_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property_02.js
@@ -1,16 +1,15 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
-// Tests all sorts of additions and updates of properties in the rule-view.
-// FIXME: TO BE SPLIT IN *MANY* SMALLER TESTS
+//
 
 const TEST_URI = `
   <style type="text/css">
     #testid {
       background-color: blue;
     }
     .testclass, .unmatched {
       background-color: green;
@@ -18,57 +17,53 @@ const TEST_URI = `
   </style>
   <div id='testid' class='testclass'>Styled Node</div>
   <div id='testid2'>Styled Node</div>
 `;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
-  yield testCreateNew(inspector, view);
-});
 
-function* testCreateNew(inspector, ruleView) {
-  // Create a new property.
-  let elementRuleEditor = getRuleViewRuleEditor(ruleView, 0);
-  let editor = yield focusEditableField(ruleView, elementRuleEditor.closeBrace);
+  info("Focus the new property name field");
+  let elementRuleEditor = getRuleViewRuleEditor(view, 0);
+  let editor = yield focusNewRuleViewProperty(elementRuleEditor);
+  let input = editor.input;
 
   is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
     "Next focused editor should be the new property editor.");
-
-  let input = editor.input;
-
   ok(input.selectionStart === 0 && input.selectionEnd === input.value.length,
     "Editor contents are selected.");
 
   // Try clicking on the editor's input again, shouldn't cause trouble
   // (see bug 761665).
-  EventUtils.synthesizeMouse(input, 1, 1, {}, ruleView.styleWindow);
+  EventUtils.synthesizeMouse(input, 1, 1, {}, view.styleWindow);
   input.select();
 
   info("Entering the property name");
-  input.value = "background-color";
+  editor.input.value = "background-color";
 
   info("Pressing RETURN and waiting for the value field focus");
-  let onFocus = once(elementRuleEditor.element, "focus", true);
-  EventUtils.sendKey("return", ruleView.styleWindow);
-  yield onFocus;
-  yield elementRuleEditor.rule._applyingModifications;
+  let onNameAdded = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  yield onNameAdded;
 
-  editor = inplaceEditor(ruleView.styleDocument.activeElement);
+  editor = inplaceEditor(view.styleDocument.activeElement);
 
   is(elementRuleEditor.rule.textProps.length, 1,
     "Should have created a new text property.");
   is(elementRuleEditor.propertyList.children.length, 1,
     "Should have created a property editor.");
   let textProp = elementRuleEditor.rule.textProps[0];
   is(editor, inplaceEditor(textProp.editor.valueSpan),
     "Should be editing the value span now.");
 
+  info("Entering the property value");
+  // We're editing inline style, so expect a style attribute mutation.
   let onMutated = inspector.once("markupmutation");
+  let onValueAdded = view.once("ruleview-changed");
   editor.input.value = "purple";
-  let onBlur = once(editor.input, "blur");
-  EventUtils.sendKey("return", ruleView.styleWindow);
-  yield onBlur;
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  yield onValueAdded;
   yield onMutated;
 
   is(textProp.value, "purple", "Text prop should have been changed.");
-}
+});
--- a/devtools/client/inspector/rules/test/browser_rules_edit-selector_05.js
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_05.js
@@ -66,48 +66,13 @@ function* testEditSelector(view, name) {
 
 function* checkModifiedElement(view, name) {
   is(view._elementStyle.rules.length, 3, "Should have 3 rules.");
   ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
 }
 
 function* testAddProperty(view) {
   info("Test creating a new property");
-
-  let ruleEditor = getRuleViewRuleEditor(view, 1);
-
-  info("Focusing a new property name in the rule-view");
-  let editor = yield focusEditableField(view, ruleEditor.closeBrace);
-
-  is(inplaceEditor(ruleEditor.newPropSpan), editor,
-    "The new property editor got focused");
-  let input = editor.input;
-
-  info("Entering text-align in the property name editor");
-  input.value = "text-align";
-
-  info("Pressing return to commit and focus the new value field");
-  let onValueFocus = once(ruleEditor.element, "focus", true);
-  let onRuleViewChanged = view.once("ruleview-changed");
-  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
-  yield onValueFocus;
-  yield onRuleViewChanged;
-
-  // Getting the new value editor after focus
-  editor = inplaceEditor(view.styleDocument.activeElement);
-  let textProp = ruleEditor.rule.textProps[0];
-
-  is(ruleEditor.rule.textProps.length, 1, "Created a new text property.");
-  is(ruleEditor.propertyList.children.length, 1, "Created a property editor.");
-  is(editor, inplaceEditor(textProp.editor.valueSpan),
-    "Editing the value span now.");
-
-  info("Entering a value and bluring the field to expect a rule change");
-  editor.input.value = "center";
-  let onBlur = once(editor.input, "blur");
-  onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
-  editor.input.blur();
-  yield onBlur;
-  yield onRuleViewChanged;
+  let textProp = yield addProperty(view, 1, "text-align", "center");
 
   is(textProp.value, "center", "Text prop should have been changed.");
   is(textProp.overridden, false, "Property should not be overridden");
 }
--- a/devtools/client/inspector/rules/test/browser_rules_guessIndentation.js
+++ b/devtools/client/inspector/rules/test/browser_rules_guessIndentation.js
@@ -29,45 +29,19 @@ div {
        color: chartreuse;
 }
 `;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {toolbox, inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
-  yield testIndentation(toolbox, inspector, view);
-});
-
-function* testIndentation(toolbox, inspector, view) {
-  let ruleEditor = getRuleViewRuleEditor(view, 2);
-
-  info("Focusing a new property name in the rule-view");
-  let editor = yield focusEditableField(view, ruleEditor.closeBrace);
-
-  let input = editor.input;
-
-  info("Entering color in the property name editor");
-  input.value = "color";
 
-  info("Pressing return to commit and focus the new value field");
-  let onValueFocus = once(ruleEditor.element, "focus", true);
-  let onModifications = ruleEditor.rule._applyingModifications;
-  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
-  yield onValueFocus;
-  yield onModifications;
+  info("Add a new property in the rule-view");
+  yield addProperty(view, 2, "color", "chartreuse");
 
-  // Getting the new value editor after focus
-  editor = inplaceEditor(view.styleDocument.activeElement);
-  info("Entering a value and bluring the field to expect a rule change");
-  editor.input.value = "chartreuse";
-  let onBlur = once(editor.input, "blur");
-  onModifications = ruleEditor.rule._applyingModifications;
-  editor.input.blur();
-  yield onBlur;
-  yield onModifications;
-
+  info("Switch to the style-editor");
   let { UI } = yield toolbox.selectTool("styleeditor");
 
   let styleEditor = yield UI.editors[0].getSourceEditor();
   let text = styleEditor.sourceEditor.getText();
   is(text, expectedText, "style inspector changes are synced");
-}
+});
--- a/devtools/client/inspector/rules/test/browser_rules_lineNumbers.js
+++ b/devtools/client/inspector/rules/test/browser_rules_lineNumbers.js
@@ -8,45 +8,22 @@
 // rules in the rule view.
 
 const TESTCASE_URI = URL_ROOT + "doc_ruleLineNumbers.html";
 
 add_task(function*() {
   yield addTab(TESTCASE_URI);
   let { inspector, view } = yield openRuleView();
   yield selectNode("#testid", inspector);
-  let elementRuleEditor = getRuleViewRuleEditor(view, 1);
 
   let bodyRuleEditor = getRuleViewRuleEditor(view, 3);
   let value = getRuleViewLinkTextByIndex(view, 2);
   // Note that this is relative to the <style>.
   is(value.slice(-2), ":6", "initial rule line number is 6");
 
-  info("Focusing a new property name in the rule-view");
-  let editor = yield focusEditableField(view, elementRuleEditor.closeBrace);
-
-  is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
-    "The new property editor got focused");
-  let input = editor.input;
-
-  info("Entering font-size in the property name editor");
-  input.value = "font-size";
-
-  info("Pressing return to commit and focus the new value field");
   let onLocationChanged = once(bodyRuleEditor.rule.domRule, "location-changed");
-  let onValueFocus = once(elementRuleEditor.element, "focus", true);
-  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
-  yield onValueFocus;
-  yield elementRuleEditor.rule._applyingModifications;
-
-  // Getting the new value editor after focus
-  editor = inplaceEditor(view.styleDocument.activeElement);
-  info("Entering a value and bluring the field to expect a rule change");
-  editor.input.value = "23px";
-  editor.input.blur();
-  yield elementRuleEditor.rule._applyingModifications;
-
+  yield addProperty(view, 1, "font-size", "23px");
   yield onLocationChanged;
 
   let newBodyTitle = getRuleViewLinkTextByIndex(view, 2);
   // Note that this is relative to the <style>.
   is(newBodyTitle.slice(-2), ":7", "updated rule line number is 7");
 });
--- a/devtools/client/inspector/rules/test/browser_rules_search-filter_09.js
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_09.js
@@ -25,17 +25,17 @@ add_task(function*() {
   yield selectNode("#testid", inspector);
 
   info("Enter the test value in the search filter");
   yield setSearchFilter(view, SEARCH);
 
   info("Start entering a new property in the rule");
   let ruleEditor = getRuleViewRuleEditor(view, 1);
   let rule = ruleEditor.rule;
-  let editor = yield focusEditableField(view, ruleEditor.closeBrace);
+  let editor = yield focusNewRuleViewProperty(ruleEditor);
 
   info("Check that the correct rules are visible");
   is(view.element.children.length, 2, "Should have 2 rules.");
   is(rule.selectorText, "#testid", "Second rule is #testid.");
   ok(rule.textProps[0].editor.container.classList
     .contains("ruleview-highlight"),
     "width text property is correctly highlighted.");
   ok(!rule.textProps[1].editor.container.classList
--- a/devtools/client/inspector/rules/test/head.js
+++ b/devtools/client/inspector/rules/test/head.js
@@ -575,43 +575,66 @@ function getRuleViewRuleEditor(view, chi
  * @param {Number} ruleIndex
  *        The index of the rule to use. Note that if ruleIndex is 0, you might
  *        want to also listen to markupmutation events in your test since
  *        that's going to change the style attribute of the selected node.
  * @param {String} name
  *        The name for the new property
  * @param {String} value
  *        The value for the new property
+ * @param {String} commitValueWith
+ *        Which key should be used to commit the new value. VK_RETURN is used by
+ *        default, but tests might want to use another key to test cancelling
+ *        for exmple.
+ * @param {Boolean} blurNewProperty
+ *        After the new value has been added, a new property would have been
+ *        focused. This parameter is true by default, and that causes the new
+ *        property to be blurred. Set to false if you don't want this.
  * @return {TextProperty} The instance of the TextProperty that was added
  */
-var addProperty = Task.async(function*(view, ruleIndex, name, value) {
+var addProperty = Task.async(function*(view, ruleIndex, name, value,
+                                       commitValueWith = "VK_RETURN",
+                                       blurNewProperty = true) {
   info("Adding new property " + name + ":" + value + " to rule " + ruleIndex);
 
   let ruleEditor = getRuleViewRuleEditor(view, ruleIndex);
   let editor = yield focusNewRuleViewProperty(ruleEditor);
+  let numOfProps = ruleEditor.rule.textProps.length;
 
   info("Adding name " + name);
   editor.input.value = name;
   let onNameAdded = view.once("ruleview-changed");
   EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
   yield onNameAdded;
 
   // Focus has moved to the value inplace-editor automatically.
   editor = inplaceEditor(view.styleDocument.activeElement);
   let textProps = ruleEditor.rule.textProps;
   let textProp = textProps[textProps.length - 1];
 
+  is(ruleEditor.rule.textProps.length, numOfProps + 1,
+     "A new test property was added");
+  is(editor, inplaceEditor(textProp.editor.valueSpan),
+     "The inplace editor appeared for the value");
+
   info("Adding value " + value);
+  // Setting the input value schedules a preview to be shown in 10ms which
+  // triggers a ruleview-changed event (see bug 1209295).
+  let onPreview = view.once("ruleview-changed");
   editor.input.value = value;
+  yield onPreview;
+
   let onValueAdded = view.once("ruleview-changed");
-  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  EventUtils.synthesizeKey(commitValueWith, {}, view.styleWindow);
   yield onValueAdded;
 
-  // Blur the new property field that was focused by default.
-  view.styleDocument.activeElement.blur();
+  if (blurNewProperty) {
+    view.styleDocument.activeElement.blur();
+  }
+
   return textProp;
 });
 
 /**
  * Simulate changing the value of a property in a rule in the rule-view.
  *
  * @param {CssRuleView} view
  *        The instance of the rule-view panel