Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-09 03:15:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1246677 - 8 - Use addProperty and remove code duplication; r=gl

Browse Source 
MozReview-Commit-ID: KQXgdZxdiw9

--HG--
extra : rebase_source : 941f4e7c4059c9bd14f6e09f752c317cd2423fff
This commit is contained in:
Patrick Brosset 2016-02-18 11:00:38 +01:00
parent a31b063cce
commit e1d3785108
11 changed files with 69 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
devtools/client/inspector/rules/test/browser_rules_add-property-cancel_01.js
View File

@ -27,7 +27,7 @@ add_task(function*() {
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");

51
devtools/client/inspector/rules/test/browser_rules_add-property-cancel_02.js
View File

@ -21,59 +21,12 @@ add_task(function*() {
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,

26
devtools/client/inspector/rules/test/browser_rules_add-property-cancel_03.js
View File

@ -9,29 +9,23 @@
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.");
@ -44,10 +38,8 @@ function* testCancelNewOnEscape(inspector, view) {
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");
}
});

45
devtools/client/inspector/rules/test/browser_rules_add-property-svg.js
View File

@ -13,49 +13,10 @@ 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");
});

48
devtools/client/inspector/rules/test/browser_rules_add-property_01.js
View File

@ -4,9 +4,7 @@
"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'>
@ -24,51 +22,11 @@ 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");
}
});

39
devtools/client/inspector/rules/test/browser_rules_add-property_02.js
View File

@ -4,8 +4,7 @@
"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">
@ -23,37 +22,31 @@ const TEST_URI = `
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.");
@ -63,12 +56,14 @@ function* testCreateNew(inspector, ruleView) {
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.");
}
});

37
devtools/client/inspector/rules/test/browser_rules_edit-selector_05.js
View File

@ -71,42 +71,7 @@ function* checkModifiedElement(view, name) {
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");

34
devtools/client/inspector/rules/test/browser_rules_guessIndentation.js
View File

@ -34,40 +34,14 @@ 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;
// 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("Add a new property in the rule-view");
yield addProperty(view, 2, "color", "chartreuse");
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");
}
});

25
devtools/client/inspector/rules/test/browser_rules_lineNumbers.js
View File

@ -13,37 +13,14 @@ 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);

2
devtools/client/inspector/rules/test/browser_rules_search-filter_09.js
View File

@ -30,7 +30,7 @@ add_task(function*() {
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.");

31
devtools/client/inspector/rules/test/head.js
View File

@ -580,13 +580,24 @@ function getRuleViewRuleEditor(view, childrenIndex, nodeIndex) {
* 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;
@ -599,14 +610,26 @@ var addProperty = Task.async(function*(view, ruleIndex, name, value) {
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;
});