Bug 1246677 - 2 - Stop using CPOWs in simulateColorPickerChange; r=miker

MozReview-Commit-ID: 6jGUGfD0bM5

--HG--
extra : rebase_source : 0c2c2c641dca6dd9905c5ba2f447801053107d96

devtools/client/inspector/rules/test/browser_rules_authored_color.js

@@ -41,10 +41,8 @@ add_task(function* () {
     swatch.click();
     yield onShown;
 
-    let testNode = getNode("#testid");
-
     yield simulateColorPickerChange(view, cPicker, [0, 255, 0, 1], {
-      element: testNode,
+      selector: "#testid",
       name: "color",
       value: "rgb(0, 255, 0)"
     });

devtools/client/inspector/rules/test/browser_rules_colorUnit.js

@@ -46,10 +46,8 @@ function* basicTest(view, name, result) {
   swatch.click();
   yield onShown;
 
-  let testNode = getNode("#testid");
-
   yield simulateColorPickerChange(view, cPicker, [0, 255, 0, 1], {
-    element: testNode,
+    selector: "#testid",
     name: "color",
     value: "rgb(0, 255, 0)"
   });

devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_01.js

@@ -39,8 +39,8 @@ function* testImageTooltipAfterColorChange(swatch, url, ruleView) {
   swatch.click();
   yield onShown;
   yield simulateColorPickerChange(ruleView, picker, [0, 0, 0, 1], {
-    element: content.document.body,
-    name: "backgroundImage",
+    selector: "body",
+    name: "background-image",
     value: 'url("chrome://global/skin/icons/warning-64.png"), linear-gradient(rgb(0, 0, 0), rgb(255, 0, 102) 400px)'
   });
 

devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js

@@ -41,8 +41,8 @@ function* testColorChangeIsntRevertedWhenOtherTooltipIsShown(ruleView) {
   yield onShown;
 
   yield simulateColorPickerChange(ruleView, picker, [0, 0, 0, 1], {
-    element: content.document.body,
-    name: "backgroundColor",
+    selector: "body",
+    name: "background-color",
     value: "rgb(0, 0, 0)"
   });
 

devtools/client/inspector/rules/test/browser_rules_colorpicker-commit-on-ENTER.js

@@ -33,8 +33,8 @@ function* testPressingEnterCommitsChanges(swatch, ruleView) {
   yield onShown;
 
   yield simulateColorPickerChange(ruleView, cPicker, [0, 255, 0, .5], {
-    element: content.document.body,
-    name: "borderLeftColor",
+    selector: "body",
+    name: "border-left-color",
     value: "rgba(0, 255, 0, 0.5)"
   });
 

devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js

@@ -58,8 +58,8 @@ function* testPickingNewColor(view) {
   yield onShown;
 
   let change = {
-    element: content.document.body,
-    name: "backgroundImage",
+    selector: "body",
+    name: "background-image",
     value: "linear-gradient(to left, rgb(1, 1, 1) 25%, rgb(51, 51, 51) 95%, rgb(0, 0, 0) 100%)"
   };
   yield simulateColorPickerChange(view, cPicker, [1, 1, 1, 1], change);

devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js

@@ -55,7 +55,7 @@ function* testSimpleMultipleColorChanges(inspector, ruleView) {
   ];
   for (let {rgba, computed} of colors) {
     yield simulateColorPickerChange(ruleView, picker, rgba, {
-      element: content.document.querySelector("p"),
+      selector: "p",
       name: "color",
       value: computed
     });
@@ -83,8 +83,8 @@ function* testComplexMultipleColorChanges(inspector, ruleView) {
   ];
   for (let {rgba, computed} of colors) {
     yield simulateColorPickerChange(ruleView, picker, rgba, {
-      element: content.document.body,
-      name: "backgroundColor",
+      selector: "body",
+      name: "background-color",
       value: computed
     });
   }
@@ -114,7 +114,7 @@ function* testOverriddenMultipleColorChanges(inspector, ruleView) {
   ];
   for (let {rgba, computed} of colors) {
     yield simulateColorPickerChange(ruleView, picker, rgba, {
-      element: content.document.body,
+      selector: "body",
       name: "color",
       value: computed
     });

devtools/client/inspector/rules/test/browser_rules_colorpicker-revert-on-ESC.js

@@ -33,8 +33,8 @@ function* testPressingEscapeRevertsChanges(view) {
   yield onShown;
 
   yield simulateColorPickerChange(view, cPicker, [0, 0, 0, 1], {
-    element: content.document.body,
-    name: "backgroundColor",
+    selector: "body",
+    name: "background-color",
     value: "rgb(0, 0, 0)"
   });
 

devtools/client/inspector/rules/test/head.js

@@ -505,8 +505,8 @@ function getRuleViewSelectorHighlighterIcon(view, selectorText) {
  *        The new color to be set [r, g, b, a]
  * @param {Object} expectedChange
  *        Optional object that needs the following props:
- *          - {DOMNode} element The element in the page that will have its
- *            style changed.
+ *          - {String} selector The selector to the element in the page that
+ *            will have its style changed.
  *          - {String} name The style name that will be changed
  *          - {String} value The expected style value
  * The style will be checked like so: getComputedStyle(element)[name] === value
@@ -527,10 +527,9 @@ var simulateColorPickerChange = Task.async(function*(ruleView, colorPicker,
   if (expectedChange) {
     info("Waiting for the style to be applied on the page");
     yield waitForSuccess(function*() {
-      let {element, name, value} = expectedChange;
-      yield getComputedStyleProperty(selector, null, name)
-      return content.getComputedStyle(element)[name] === value;
-    }, "Color picker change applied on the page");
+      let {selector, name, value} = expectedChange;
+      return (yield getComputedStyleProperty(selector, null, name)) === value;
+    }, `Color picker change applied on element "${expectedChange.selector}"`);
   }
 });