--- a/devtools/client/inspector/rules/test/browser_rules_authored_color.js
+++ b/devtools/client/inspector/rules/test/browser_rules_authored_color.js
@@ -36,20 +36,18 @@ add_task(function* () {
let cPicker = view.tooltips.colorPicker;
let swatch = getRuleViewProperty(view, "#testid", "color").valueSpan
.querySelector(".ruleview-colorswatch");
let onShown = cPicker.tooltip.once("shown");
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)"
});
let spectrum = yield cPicker.spectrum;
let onHidden = cPicker.tooltip.once("hidden");
// Validating the color change ends up updating the rule view twice
let onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
--- a/devtools/client/inspector/rules/test/browser_rules_colorUnit.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorUnit.js
@@ -41,20 +41,18 @@ add_task(function*() {
function* basicTest(view, name, result) {
let cPicker = view.tooltips.colorPicker;
let swatch = getRuleViewProperty(view, "#testid", "color").valueSpan
.querySelector(".ruleview-colorswatch");
let onShown = cPicker.tooltip.once("shown");
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)"
});
let spectrum = yield cPicker.spectrum;
let onHidden = cPicker.tooltip.once("hidden");
// Validating the color change ends up updating the rule view twice
let onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_01.js
@@ -34,18 +34,18 @@ function* testImageTooltipAfterColorChan
is(anchor, url, "The anchor returned by the showOnHover callback is correct");
info("Open the color picker tooltip and change the color");
let picker = ruleView.tooltips.colorPicker;
let onShown = picker.tooltip.once("shown");
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)'
});
let spectrum = yield picker.spectrum;
let onHidden = picker.tooltip.once("hidden");
let onModifications = ruleView.once("ruleview-changed");
EventUtils.sendKey("RETURN", spectrum.element.ownerDocument.defaultView);
yield onHidden;
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js
@@ -36,18 +36,18 @@ function* testColorChangeIsntRevertedWhe
info("Open the color picker tooltip and change the color");
let picker = ruleView.tooltips.colorPicker;
let onShown = picker.tooltip.once("shown");
swatch.click();
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)"
});
let spectrum = yield picker.spectrum;
let onModifications = ruleView.once("ruleview-changed");
let onHidden = picker.tooltip.once("hidden");
EventUtils.sendKey("RETURN", spectrum.element.ownerDocument.defaultView);
yield onHidden;
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-commit-on-ENTER.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-commit-on-ENTER.js
@@ -28,18 +28,18 @@ add_task(function*() {
function* testPressingEnterCommitsChanges(swatch, ruleView) {
let cPicker = ruleView.tooltips.colorPicker;
let onShown = cPicker.tooltip.once("shown");
swatch.click();
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)"
});
is(swatch.style.backgroundColor, "rgba(0, 255, 0, 0.5)",
"The color swatch's background was updated");
is(getRuleViewProperty(ruleView, "body", "border").valueSpan.textContent,
"2em solid rgba(0, 255, 0, 0.5)",
"The text of the border css property was updated");
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js
@@ -53,18 +53,18 @@ function* testPickingNewColor(view) {
info("Getting the color picker tooltip and clicking on the swatch to show it");
let cPicker = view.tooltips.colorPicker;
let onShown = cPicker.tooltip.once("shown");
swatchEl.click();
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);
is(swatchEl.style.backgroundColor, "rgb(1, 1, 1)",
"The color swatch's background was updated");
is(colorEl.textContent, "#010101", "The color text was updated");
is(content.getComputedStyle(content.document.body).backgroundImage,
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js
@@ -50,17 +50,17 @@ function* testSimpleMultipleColorChanges
info("Changing the color several times");
let colors = [
{rgba: [0, 0, 0, 1], computed: "rgb(0, 0, 0)"},
{rgba: [100, 100, 100, 1], computed: "rgb(100, 100, 100)"},
{rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)"}
];
for (let {rgba, computed} of colors) {
yield simulateColorPickerChange(ruleView, picker, rgba, {
- element: content.document.querySelector("p"),
+ selector: "p",
name: "color",
value: computed
});
}
}
function* testComplexMultipleColorChanges(inspector, ruleView) {
yield selectNode("body", inspector);
@@ -78,18 +78,18 @@ function* testComplexMultipleColorChange
info("Changing the color several times");
let colors = [
{rgba: [0, 0, 0, 1], computed: "rgb(0, 0, 0)"},
{rgba: [100, 100, 100, 1], computed: "rgb(100, 100, 100)"},
{rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)"}
];
for (let {rgba, computed} of colors) {
yield simulateColorPickerChange(ruleView, picker, rgba, {
- element: content.document.body,
- name: "backgroundColor",
+ selector: "body",
+ name: "background-color",
value: computed
});
}
info("Closing the color picker");
yield hideTooltipAndWaitForRuleViewChanged(picker.tooltip, ruleView);
}
@@ -109,16 +109,16 @@ function* testOverriddenMultipleColorCha
info("Changing the color several times");
let colors = [
{rgba: [0, 0, 0, 1], computed: "rgb(0, 0, 0)"},
{rgba: [100, 100, 100, 1], computed: "rgb(100, 100, 100)"},
{rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)"}
];
for (let {rgba, computed} of colors) {
yield simulateColorPickerChange(ruleView, picker, rgba, {
- element: content.document.body,
+ selector: "body",
name: "color",
value: computed
});
is(content.getComputedStyle(content.document.querySelector("p")).color,
"rgb(200, 200, 200)", "The color of the P tag is still correct");
}
}
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-revert-on-ESC.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-revert-on-ESC.js
@@ -28,18 +28,18 @@ function* testPressingEscapeRevertsChang
let swatch = propEditor.valueSpan.querySelector(".ruleview-colorswatch");
let cPicker = view.tooltips.colorPicker;
let onShown = cPicker.tooltip.once("shown");
swatch.click();
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)"
});
is(swatch.style.backgroundColor, "rgb(0, 0, 0)",
"The color swatch's background was updated");
is(propEditor.valueSpan.textContent, "#000",
"The text of the background-color css property was updated");
--- a/devtools/client/inspector/rules/test/head.js
+++ b/devtools/client/inspector/rules/test/head.js
@@ -500,18 +500,18 @@ function getRuleViewSelectorHighlighterI
*
* @param {RuleView} ruleView
* The related rule view instance
* @param {SwatchColorPickerTooltip} colorPicker
* @param {Array} newRgba
* 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
*/
var simulateColorPickerChange = Task.async(function*(ruleView, colorPicker,
newRgba, expectedChange) {
let onRuleViewChanged = ruleView.once("ruleview-changed");
info("Getting the spectrum colorpicker object");
@@ -522,20 +522,19 @@ var simulateColorPickerChange = Task.asy
spectrum.updateUI();
spectrum.onChange();
info("Waiting for rule-view to update");
yield onRuleViewChanged;
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}"`);
}
});
/**
* Get a rule-link from the rule-view given its index
*
* @param {CssRuleView} view
* The instance of the rule-view panel