From b5446432fa0175566a0568d3af5b41484077fb1a Mon Sep 17 00:00:00 2001 From: Patrick Brosset Date: Mon, 15 Feb 2016 10:11:17 +0100 Subject: [PATCH] Bug 1246677 - 3 - Remove all usages of getNode in ruleview tests; r=tromey MozReview-Commit-ID: 6EIQ1lhE3C9 --HG-- extra : rebase_source : c8eacfce524dbdc847dd93d75eda7da35997ca25 --- .../test/browser_rules_edit-property-order.js | 101 +++++++------ .../test/browser_rules_keyframes-rule_01.js | 10 +- .../test/browser_rules_keyframes-rule_02.js | 8 +- .../test/browser_rules_pseudo-element_01.js | 11 +- ...er_rules_refresh-on-attribute-change_01.js | 7 +- ...er_rules_refresh-on-attribute-change_02.js | 62 ++++---- .../browser_rules_refresh-on-style-change.js | 8 +- devtools/client/inspector/rules/test/head.js | 138 +++++++++++++++--- 8 files changed, 220 insertions(+), 125 deletions(-) diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-order.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-order.js index 0c088c9d2135..a6d43513c904 100644 --- a/devtools/client/inspector/rules/test/browser_rules_edit-property-order.js +++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-order.js @@ -6,77 +6,84 @@ // Checking properties orders and overrides in the rule-view. -const TEST_URI = "
Styled Node
"; +const TEST_URI = "
Styled Node
"; add_task(function*() { yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); let {inspector, view} = yield openRuleView(); yield selectNode("#testid", inspector); - let element = getNode("#testid"); let elementStyle = view._elementStyle; - let elementRule = elementStyle.rules[0]; + let elementRule = elementStyle.rules[1]; info("Checking rules insertion order and checking the applied style"); - let firstProp = elementRule.createProperty("background-color", "green", ""); - let secondProp = elementRule.createProperty("background-color", "blue", ""); - is(elementRule.textProps[0], firstProp, "Rules should be in addition order."); + let firstProp = yield addProperty(view, 1, "background-color", "green"); + let secondProp = yield addProperty(view, 1, "background-color", "blue"); + + is(elementRule.textProps[0], firstProp, + "Rules should be in addition order."); is(elementRule.textProps[1], secondProp, - "Rules should be in addition order."); - yield elementRule._applyingModifications; - is(element.style.getPropertyValue("background-color"), "blue", - "Second property should have been used."); + "Rules should be in addition order."); + + // rgb(0, 0, 255) = blue + is((yield getValue("#testid", "background-color")), "rgb(0, 0, 255)", + "Second property should have been used."); info("Removing the second property and checking the applied style again"); - secondProp.remove(); - yield elementRule._applyingModifications; - is(element.style.getPropertyValue("background-color"), "green", - "After deleting second property, first should be used."); + yield removeProperty(view, secondProp); + // rgb(0, 128, 0) = green + is((yield getValue("#testid", "background-color")), "rgb(0, 128, 0)", + "After deleting second property, first should be used."); info("Creating a new second property and checking that the insertion order " + - "is still the same"); - secondProp = elementRule.createProperty("background-color", "blue", ""); - yield elementRule._applyingModifications; - is(element.style.getPropertyValue("background-color"), "blue", - "New property should be used."); + "is still the same"); + + secondProp = yield addProperty(view, 1, "background-color", "blue"); + + is((yield getValue("#testid", "background-color")), "rgb(0, 0, 255)", + "New property should be used."); is(elementRule.textProps[0], firstProp, - "Rules shouldn't have switched places."); + "Rules shouldn't have switched places."); is(elementRule.textProps[1], secondProp, - "Rules shouldn't have switched places."); + "Rules shouldn't have switched places."); info("Disabling the second property and checking the applied style"); - secondProp.setEnabled(false); - yield elementRule._applyingModifications; - is(element.style.getPropertyValue("background-color"), "green", - "After disabling second property, first value should be used"); + yield togglePropStatus(view, secondProp); + + is((yield getValue("#testid", "background-color")), "rgb(0, 128, 0)", + "After disabling second property, first value should be used"); info("Disabling the first property too and checking the applied style"); - firstProp.setEnabled(false); - yield elementRule._applyingModifications; - is(element.style.getPropertyValue("background-color"), "", - "After disabling both properties, value should be empty."); + yield togglePropStatus(view, firstProp); + + is((yield getValue("#testid", "background-color")), "transparent", + "After disabling both properties, value should be empty."); info("Re-enabling the second propertyt and checking the applied style"); - secondProp.setEnabled(true); - yield elementRule._applyingModifications; - is(element.style.getPropertyValue("background-color"), "blue", - "Value should be set correctly after re-enabling"); + yield togglePropStatus(view, secondProp); + + is((yield getValue("#testid", "background-color")), "rgb(0, 0, 255)", + "Value should be set correctly after re-enabling"); info("Re-enabling the first property and checking the insertion order " + - "is still respected"); - firstProp.setEnabled(true); - yield elementRule._applyingModifications; - is(element.style.getPropertyValue("background-color"), "blue", - "Re-enabling an earlier property shouldn't make it override " + - "a later property."); - is(elementRule.textProps[0], firstProp, - "Rules shouldn't have switched places."); - is(elementRule.textProps[1], secondProp, - "Rules shouldn't have switched places."); + "is still respected"); + yield togglePropStatus(view, firstProp); + is((yield getValue("#testid", "background-color")), "rgb(0, 0, 255)", + "Re-enabling an earlier property shouldn't make it override " + + "a later property."); + is(elementRule.textProps[0], firstProp, + "Rules shouldn't have switched places."); + is(elementRule.textProps[1], secondProp, + "Rules shouldn't have switched places."); info("Modifying the first property and checking the applied style"); - firstProp.setValue("purple", ""); - yield elementRule._applyingModifications; - is(element.style.getPropertyValue("background-color"), "blue", - "Modifying an earlier property shouldn't override a later property."); + yield setProperty(view, firstProp, "purple"); + + is((yield getValue("#testid", "background-color")), "rgb(0, 0, 255)", + "Modifying an earlier property shouldn't override a later property."); }); + +function* getValue(selector, propName) { + let value = yield getComputedStyleProperty(selector, null, propName); + return value; +} diff --git a/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_01.js b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_01.js index d2affef50f74..308a8ee58139 100644 --- a/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_01.js +++ b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_01.js @@ -65,15 +65,9 @@ function* testMoxy(inspector, view) { }); } -function* testNode(selector, inspector, view) { - let element = getNode(selector); +function* assertKeyframeRules(selector, inspector, view, expected) { yield selectNode(selector, inspector); let elementStyle = view._elementStyle; - return {element, elementStyle}; -} - -function* assertKeyframeRules(selector, inspector, view, expected) { - let {element, elementStyle} = yield testNode(selector, inspector, view); let rules = { elementRules: elementStyle.rules.filter(rule => !rule.keyframes), @@ -93,8 +87,6 @@ function* assertKeyframeRules(selector, inspector, view, expected) { keyframeRule.domRule.keyText + " selector heading is correct"); i++; } - - return {rules, element, elementStyle}; } function assertGutters(view, expected) { diff --git a/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_02.js b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_02.js index 8491695fd604..f8a9d701bb65 100644 --- a/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_02.js +++ b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_02.js @@ -19,7 +19,7 @@ add_task(function*() { function* testPacman(inspector, view) { info("Test content in the keyframes rule of #pacman"); - let {rules} = yield getKeyframeRules("#pacman", inspector, view); + let rules = yield getKeyframeRules("#pacman", inspector, view); info("Test text properties for Keyframes #pacman"); @@ -53,7 +53,7 @@ function* testPacman(inspector, view) { function* testBoxy(inspector, view) { info("Test content in the keyframes rule of #boxy"); - let {rules} = yield getKeyframeRules("#boxy", inspector, view); + let rules = yield getKeyframeRules("#boxy", inspector, view); info("Test text properties for Keyframes #boxy"); @@ -78,8 +78,6 @@ function convertTextPropsToString(textProps) { } function* getKeyframeRules(selector, inspector, view) { - let element = getNode(selector); - yield selectNode(selector, inspector); let elementStyle = view._elementStyle; @@ -88,5 +86,5 @@ function* getKeyframeRules(selector, inspector, view) { keyframeRules: elementStyle.rules.filter(rule => rule.keyframes) }; - return {rules, element, elementStyle}; + return rules; } diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js index 1b93c3470c59..aeede47bad7d 100644 --- a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js +++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js @@ -27,7 +27,7 @@ add_task(function*() { function* testTopLeft(inspector, view) { let selector = "#topleft"; - let {rules} = yield assertPseudoElementRulesNumbers(selector, + let rules = yield assertPseudoElementRulesNumbers(selector, inspector, view, { elementRulesNb: 4, firstLineRulesNb: 2, @@ -155,7 +155,7 @@ function* testBottomLeft(inspector, view) { } function* testParagraph(inspector, view) { - let {rules} = yield assertPseudoElementRulesNumbers("#bottomleft p", inspector, view, { + let rules = yield assertPseudoElementRulesNumbers("#bottomleft p", inspector, view, { elementRulesNb: 3, firstLineRulesNb: 1, firstLetterRulesNb: 1, @@ -192,14 +192,13 @@ function convertTextPropsToString(textProps) { } function* testNode(selector, inspector, view) { - let element = getNode(selector); yield selectNode(selector, inspector); let elementStyle = view._elementStyle; - return {element: element, elementStyle: elementStyle}; + return elementStyle; } function* assertPseudoElementRulesNumbers(selector, inspector, view, ruleNbs) { - let {element, elementStyle} = yield testNode(selector, inspector, view); + let elementStyle = yield testNode(selector, inspector, view); let rules = { elementRules: elementStyle.rules.filter(rule => !rule.pseudoElement), @@ -220,7 +219,7 @@ function* assertPseudoElementRulesNumbers(selector, inspector, view, ruleNbs) { is(rules.selectionRules.length, ruleNbs.selectionRulesNb, selector + " has the correct number of :selection rules"); - return {rules, element, elementStyle}; + return rules; } function getGutters(view) { diff --git a/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_01.js b/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_01.js index 0331cfa20478..cb472fd1d039 100644 --- a/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_01.js +++ b/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_01.js @@ -22,8 +22,7 @@ const TEST_URI = ` add_task(function*() { yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); - let {inspector, view} = yield openRuleView(); - let testElement = getNode("#testid"); + let {inspector, view, testActor} = yield openRuleView(); yield selectNode("#testid", inspector); info("Checking that the rule-view has the element, #testid and " + @@ -33,7 +32,7 @@ add_task(function*() { info("Changing the node's ID attribute and waiting for the " + "rule-view refresh"); let ruleViewRefreshed = inspector.once("rule-view-refreshed"); - testElement.setAttribute("id", "differentid"); + yield testActor.setAttribute("#testid", "id", "differentid"); yield ruleViewRefreshed; info("Checking that the rule-view doesn't have the #testid selector anymore"); @@ -41,7 +40,7 @@ add_task(function*() { info("Reverting the ID attribute change"); ruleViewRefreshed = inspector.once("rule-view-refreshed"); - testElement.setAttribute("id", "testid"); + yield testActor.setAttribute("#differentid", "id", "testid"); yield ruleViewRefreshed; info("Checking that the rule-view has all the selectors again"); diff --git a/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_02.js b/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_02.js index be8bc1213438..fd599ab06433 100644 --- a/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_02.js +++ b/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_02.js @@ -15,18 +15,17 @@ const TEST_URI = ` add_task(function*() { yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); - let {inspector, view} = yield openRuleView(); - let testElement = getNode("#testid"); + let {inspector, view, testActor} = yield openRuleView(); yield selectNode("#testid", inspector); yield testPropertyChanges(inspector, view); - yield testPropertyChange0(inspector, view, testElement); - yield testPropertyChange1(inspector, view, testElement); - yield testPropertyChange2(inspector, view, testElement); - yield testPropertyChange3(inspector, view, testElement); - yield testPropertyChange4(inspector, view, testElement); - yield testPropertyChange5(inspector, view, testElement); - yield testPropertyChange6(inspector, view, testElement); + yield testPropertyChange0(inspector, view, "#testid", testActor); + yield testPropertyChange1(inspector, view, "#testid", testActor); + yield testPropertyChange2(inspector, view, "#testid", testActor); + yield testPropertyChange3(inspector, view, "#testid", testActor); + yield testPropertyChange4(inspector, view, "#testid", testActor); + yield testPropertyChange5(inspector, view, "#testid", testActor); + yield testPropertyChange6(inspector, view, "#testid", testActor); }); function* testPropertyChanges(inspector, ruleView) { @@ -41,9 +40,9 @@ function* testPropertyChanges(inspector, ruleView) { "Original margin property active"); } -function* testPropertyChange0(inspector, ruleView, testElement) { - yield changeElementStyle(testElement, "margin-top: 1px; padding-top: 5px", - inspector); +function* testPropertyChange0(inspector, ruleView, selector, testActor) { + yield changeElementStyle(selector, "margin-top: 1px; padding-top: 5px", + inspector, testActor); let rule = ruleView._elementStyle.rules[0]; is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, @@ -54,10 +53,10 @@ function* testPropertyChange0(inspector, ruleView, testElement) { "Second margin property disabled"); } -function* testPropertyChange1(inspector, ruleView, testElement) { +function* testPropertyChange1(inspector, ruleView, selector, testActor) { info("Now set it back to 5px, the 5px value should be re-enabled."); - yield changeElementStyle(testElement, "margin-top: 5px; padding-top: 5px;", - inspector); + yield changeElementStyle(selector, "margin-top: 5px; padding-top: 5px;", + inspector, testActor); let rule = ruleView._elementStyle.rules[0]; is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, @@ -68,11 +67,11 @@ function* testPropertyChange1(inspector, ruleView, testElement) { "Second margin property disabled"); } -function* testPropertyChange2(inspector, ruleView, testElement) { +function* testPropertyChange2(inspector, ruleView, selector, testActor) { info("Set the margin property to a value that doesn't exist in the editor."); info("Should reuse the currently-enabled element (the second one.)"); - yield changeElementStyle(testElement, "margin-top: 15px; padding-top: 5px;", - inspector); + yield changeElementStyle(selector, "margin-top: 15px; padding-top: 5px;", + inspector, testActor); let rule = ruleView._elementStyle.rules[0]; is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, @@ -83,10 +82,10 @@ function* testPropertyChange2(inspector, ruleView, testElement) { "Second margin property disabled"); } -function* testPropertyChange3(inspector, ruleView, testElement) { +function* testPropertyChange3(inspector, ruleView, selector, testActor) { info("Remove the padding-top attribute. Should disable the padding " + "property but not remove it."); - yield changeElementStyle(testElement, "margin-top: 5px;", inspector); + yield changeElementStyle(selector, "margin-top: 5px;", inspector, testActor); let rule = ruleView._elementStyle.rules[0]; is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, @@ -95,11 +94,11 @@ function* testPropertyChange3(inspector, ruleView, testElement) { "Padding property disabled"); } -function* testPropertyChange4(inspector, ruleView, testElement) { +function* testPropertyChange4(inspector, ruleView, selector, testActor) { info("Put the padding-top attribute back in, should re-enable the " + "padding property."); - yield changeElementStyle(testElement, "margin-top: 5px; padding-top: 25px", - inspector); + yield changeElementStyle(selector, "margin-top: 5px; padding-top: 25px", + inspector, testActor); let rule = ruleView._elementStyle.rules[0]; is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, @@ -108,10 +107,11 @@ function* testPropertyChange4(inspector, ruleView, testElement) { "Padding property enabled"); } -function* testPropertyChange5(inspector, ruleView, testElement) { +function* testPropertyChange5(inspector, ruleView, selector, testActor) { info("Add an entirely new property"); - yield changeElementStyle(testElement, - "margin-top: 5px; padding-top: 25px; padding-left: 20px;", inspector); + yield changeElementStyle(selector, + "margin-top: 5px; padding-top: 25px; padding-left: 20px;", + inspector, testActor); let rule = ruleView._elementStyle.rules[0]; is(rule.editor.element.querySelectorAll(".ruleview-property").length, 4, @@ -120,11 +120,11 @@ function* testPropertyChange5(inspector, ruleView, testElement) { "Padding property enabled"); } -function* testPropertyChange6(inspector, ruleView, testElement) { +function* testPropertyChange6(inspector, ruleView, selector, testActor) { info("Add an entirely new property again"); - yield changeElementStyle(testElement, "background: red " + + yield changeElementStyle(selector, "background: red " + "url(\"chrome://branding/content/about-logo.png\") repeat scroll 0% 0%", - inspector); + inspector, testActor); let rule = ruleView._elementStyle.rules[0]; is(rule.editor.element.querySelectorAll(".ruleview-property").length, 5, @@ -134,9 +134,9 @@ function* testPropertyChange6(inspector, ruleView, testElement) { "shortcut property correctly set"); } -function* changeElementStyle(testElement, style, inspector) { +function* changeElementStyle(selector, style, inspector, testActor) { let onRefreshed = inspector.once("rule-view-refreshed"); - testElement.setAttribute("style", style); + yield testActor.setAttribute(selector, "style", style); yield onRefreshed; } diff --git a/devtools/client/inspector/rules/test/browser_rules_refresh-on-style-change.js b/devtools/client/inspector/rules/test/browser_rules_refresh-on-style-change.js index b4ad2664be9b..a30d7f66b869 100644 --- a/devtools/client/inspector/rules/test/browser_rules_refresh-on-style-change.js +++ b/devtools/client/inspector/rules/test/browser_rules_refresh-on-style-change.js @@ -13,7 +13,7 @@ add_task(function*() { Services.prefs.setCharPref("devtools.defaultColorUnit", "name"); yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); - let {inspector, view} = yield openRuleView(); + let {inspector, view, testActor} = yield openRuleView(); yield selectNode("#testdiv", inspector); let fontSize = getRuleViewPropertyValue(view, "element", "font-size"); @@ -21,9 +21,9 @@ add_task(function*() { info("Changing the node's style and waiting for the update"); let onUpdated = inspector.once("rule-view-refreshed"); - let div = getNode("#testdiv"); - div.style.cssText = "font-size: 3em; color: lightgoldenrodyellow; " + - "text-align: right; text-transform: uppercase"; + yield testActor.setAttribute("#testdiv", "style", + "font-size: 3em; color: lightgoldenrodyellow; " + + "text-align: right; text-transform: uppercase"); yield onUpdated; let textAlign = getRuleViewPropertyValue(view, "element", "text-align"); diff --git a/devtools/client/inspector/rules/test/head.js b/devtools/client/inspector/rules/test/head.js index bd8bb3ab30fd..eae01233ca09 100644 --- a/devtools/client/inspector/rules/test/head.js +++ b/devtools/client/inspector/rules/test/head.js @@ -48,30 +48,16 @@ addTab = function(url) { * view is visible and ready */ function openRuleView() { - return openInspectorSidebarTab("ruleview").then(({toolbox, inspector}) => { + return openInspectorSidebarTab("ruleview").then(data => { return { - toolbox, - inspector, - view: inspector.ruleview.view + toolbox: data.toolbox, + inspector: data.inspector, + testActor: data.testActor, + view: data.inspector.ruleview.view }; }); } -/** - * Simple DOM node accesor function that takes either a node or a string css - * selector as argument and returns the corresponding node - * - * @param {String|DOMNode} nodeOrSelector - * @return {DOMNode|CPOW} Note that in e10s mode a CPOW object is returned which - * doesn't implement *all* of the DOMNode's properties - */ -function getNode(nodeOrSelector) { - info("Getting the node for '" + nodeOrSelector + "'"); - return typeof nodeOrSelector === "string" ? - content.document.querySelector(nodeOrSelector) : - nodeOrSelector; -} - /** * Set the inspector's current selection to null so that no node is selected * @@ -207,6 +193,21 @@ function* getComputedStyleProperty(selector, pseudo, propName) { name: propName}); } +/** + * Get an element's inline style property value. + * @param {TestActor} testActor + * @param {String} selector + * The selector used to obtain the element. + * @param {String} name + * name of the property. + */ +function getStyle(testActor, selector, propName) { + return testActor.eval(` + content.document.querySelector("${selector}") + .style.getPropertyValue("${propName}"); + `); +} + /** * Send an async message to the frame script and wait until the requested * computed style property has the expected value. @@ -578,6 +579,105 @@ function getRuleViewRuleEditor(view, childrenIndex, nodeIndex) { view.element.children[childrenIndex]._ruleEditor; } +/** + * Simulate adding a new property in an existing rule in the rule-view. + * + * @param {CssRuleView} view + * The instance of the rule-view panel + * @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 + * @return {TextProperty} The instance of the TextProperty that was added + */ +var addProperty = Task.async(function*(view, ruleIndex, name, value) { + info("Adding new property " + name + ":" + value + " to rule " + ruleIndex); + + let ruleEditor = getRuleViewRuleEditor(view, ruleIndex); + let editor = yield focusNewRuleViewProperty(ruleEditor); + + 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]; + + info("Adding value " + value); + editor.input.value = value; + let onValueAdded = view.once("ruleview-changed"); + EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow); + yield onValueAdded; + + // Blur the new property field that was focused by default. + 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 + * @param {TextProperty} textProp + * The instance of the TextProperty to be changed + * @param {String} value + * The new value to be used + */ +var setProperty = Task.async(function*(view, textProp, value) { + let editor = yield focusEditableField(view, textProp.editor.valueSpan); + + let onRuleViewRefreshed = view.once("ruleview-changed"); + editor.input.value = value; + EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow); + yield onRuleViewRefreshed; + + view.styleDocument.activeElement.blur(); +}); + +/** + * Simulate removing a property from an existing rule in the rule-view. + * + * @param {CssRuleView} view + * The instance of the rule-view panel + * @param {TextProperty} textProp + * The instance of the TextProperty to be removed + */ +var removeProperty = Task.async(function*(view, textProp) { + yield focusEditableField(view, textProp.editor.nameSpan); + + let onModifications = view.once("ruleview-changed"); + info("Deleting the property name now"); + EventUtils.synthesizeKey("VK_DELETE", {}, view.styleWindow); + EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow); + yield onModifications; + + // Blur the new property field that was focused by default. + view.styleDocument.activeElement.blur(); +}); + +/** + * Simulate clicking the enable/disable checkbox next to a property in a rule. + * + * @param {CssRuleView} view + * The instance of the rule-view panel + * @param {TextProperty} textProp + * The instance of the TextProperty to be enabled/disabled + */ +var togglePropStatus = Task.async(function*(view, textProp) { + let onRuleViewRefreshed = view.once("ruleview-changed"); + textProp.editor.enable.click(); + yield onRuleViewRefreshed; +}); + /** * Click on a rule-view's close brace to focus a new property name editor *