Bug 1246677 - 3 - Remove all usages of getNode in ruleview tests; r=tromey

MozReview-Commit-ID: 6EIQ1lhE3C9

--HG--
extra : rebase_source : c8eacfce524dbdc847dd93d75eda7da35997ca25

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 = "<div id='testid'>Styled Node</div>";
+const TEST_URI = "<style>#testid {}</style><div id='testid'>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);
 
-  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;
+}

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) {

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;
 }

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) {

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");

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;
 }
 

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");

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
  *