--- 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
@@ -576,43 +576,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 nbOfProps = 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, nbOfProps + 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