--- a/devtools/client/inspector/rules/test/browser_rules_authored_color.js
+++ b/devtools/client/inspector/rules/test/browser_rules_authored_color.js
@@ -32,19 +32,19 @@ add_task(function* () {
for (let color of colors) {
let {view, tab} = yield createTestContent("#testid {" +
" color: " + color.text + ";" +
"} ");
let cPicker = view.tooltips.colorPicker;
let swatch = getRuleViewProperty(view, "#testid", "color").valueSpan
.querySelector(".ruleview-colorswatch");
- let onShown = cPicker.tooltip.once("shown");
+ let onColorPickerReady = cPicker.once("ready");
swatch.click();
- yield onShown;
+ yield onColorPickerReady;
yield simulateColorPickerChange(view, cPicker, [0, 255, 0, 1], {
selector: "#testid",
name: "color",
value: "rgb(0, 255, 0)"
});
let spectrum = cPicker.spectrum;
--- a/devtools/client/inspector/rules/test/browser_rules_colorUnit.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorUnit.js
@@ -37,19 +37,19 @@ add_task(function* () {
gBrowser.removeCurrentTab();
}
});
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");
+ let onColorPickerReady = cPicker.once("ready");
swatch.click();
- yield onShown;
+ yield onColorPickerReady;
yield simulateColorPickerChange(view, cPicker, [0, 255, 0, 1], {
selector: "#testid",
name: "color",
value: "rgb(0, 255, 0)"
});
let spectrum = cPicker.spectrum;
--- 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
@@ -30,19 +30,20 @@ function* testImageTooltipAfterColorChan
info("First, verify that the image preview tooltip works");
let anchor = yield isHoverTooltipTarget(ruleView.tooltips.previewTooltip,
url);
ok(anchor, "The image preview tooltip is shown on the url span");
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");
+ let onColorPickerReady = picker.once("ready");
swatch.click();
- yield onShown;
+ yield onColorPickerReady;
+
yield simulateColorPickerChange(ruleView, picker, [0, 0, 0, 1], {
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 = picker.spectrum;
let onHidden = picker.tooltip.once("hidden");
--- 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
@@ -27,19 +27,19 @@ add_task(function* () {
});
function* testColorChangeIsntRevertedWhenOtherTooltipIsShown(ruleView) {
let swatch = getRuleViewProperty(ruleView, "body", "background").valueSpan
.querySelector(".ruleview-colorswatch");
info("Open the color picker tooltip and change the color");
let picker = ruleView.tooltips.colorPicker;
- let onShown = picker.tooltip.once("shown");
+ let onColorPickerReady = picker.once("ready");
swatch.click();
- yield onShown;
+ yield onColorPickerReady;
yield simulateColorPickerChange(ruleView, picker, [0, 0, 0, 1], {
selector: "body",
name: "background-color",
value: "rgb(0, 0, 0)"
});
let spectrum = picker.spectrum;
@@ -48,17 +48,17 @@ function* testColorChangeIsntRevertedWhe
let onHidden = picker.tooltip.once("hidden");
EventUtils.sendKey("RETURN", spectrum.element.ownerDocument.defaultView);
yield onHidden;
yield onModifications;
info("Open the image preview tooltip");
let value = getRuleViewProperty(ruleView, "body", "background").valueSpan;
let url = value.querySelector(".theme-link");
- onShown = ruleView.tooltips.previewTooltip.once("shown");
+ let onShown = ruleView.tooltips.previewTooltip.once("shown");
let anchor = yield isHoverTooltipTarget(ruleView.tooltips.previewTooltip, url);
ruleView.tooltips.previewTooltip.show(anchor);
yield onShown;
info("Image tooltip is shown, verify that the swatch is still correct");
swatch = value.querySelector(".ruleview-colorswatch");
is(swatch.style.backgroundColor, "black",
"The swatch's color is correct");
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-appears-on-swatch-click.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-appears-on-swatch-click.js
@@ -17,38 +17,35 @@ const TEST_URI = `
</style>
Testing the color picker tooltip!
`;
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {view} = yield openRuleView();
- let cSwatch = getRuleViewProperty(view, "body", "color").valueSpan
- .querySelector(".ruleview-colorswatch");
- let bgSwatch = getRuleViewProperty(view, "body", "background-color").valueSpan
- .querySelector(".ruleview-colorswatch");
- let bSwatch = getRuleViewProperty(view, "body", "border").valueSpan
- .querySelector(".ruleview-colorswatch");
+ let propertiesToTest = ["color", "background-color", "border"];
- for (let swatch of [cSwatch, bgSwatch, bSwatch]) {
- info("Testing that the colorpicker appears colorswatch click");
+ for (let property of propertiesToTest) {
+ info("Testing that the colorpicker appears on swatch click");
+ let value = getRuleViewProperty(view, "body", property).valueSpan;
+ let swatch = value.querySelector(".ruleview-colorswatch");
yield testColorPickerAppearsOnColorSwatchClick(view, swatch);
}
});
function* testColorPickerAppearsOnColorSwatchClick(view, swatch) {
let cPicker = view.tooltips.colorPicker;
ok(cPicker, "The rule-view has the expected colorPicker property");
let cPickerPanel = cPicker.tooltip.panel;
ok(cPickerPanel, "The XUL panel for the color picker exists");
- let onShown = cPicker.tooltip.once("shown");
+ let onColorPickerReady = cPicker.once("ready");
swatch.click();
- yield onShown;
+ yield onColorPickerReady;
ok(true, "The color picker was shown on click of the color swatch");
ok(!inplaceEditor(swatch.parentNode),
"The inplace editor wasn't shown as a result of the color swatch click");
yield hideTooltipAndWaitForRuleViewChanged(cPicker, view);
}
--- 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
@@ -23,19 +23,19 @@ add_task(function* () {
let swatch = getRuleViewProperty(view, "body", "border").valueSpan
.querySelector(".ruleview-colorswatch");
yield testPressingEnterCommitsChanges(swatch, view);
});
function* testPressingEnterCommitsChanges(swatch, ruleView) {
let cPicker = ruleView.tooltips.colorPicker;
- let onShown = cPicker.tooltip.once("shown");
+ let onColorPickerReady = cPicker.once("ready");
swatch.click();
- yield onShown;
+ yield onColorPickerReady;
yield simulateColorPickerChange(ruleView, cPicker, [0, 255, 0, .5], {
selector: "body",
name: "border-left-color",
value: "rgba(0, 255, 0, 0.5)"
});
is(swatch.style.backgroundColor, "rgba(0, 255, 0, 0.5)",
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js
@@ -48,19 +48,19 @@ function testColorParsing(view) {
function* testPickingNewColor(view) {
// Grab the first color swatch and color in the gradient
let ruleEl = getRuleViewProperty(view, "body", "background-image");
let swatchEl = ruleEl.valueSpan.querySelector(".ruleview-colorswatch");
let colorEl = ruleEl.valueSpan.querySelector(".ruleview-color");
info("Get the color picker tooltip and clicking on the swatch to show it");
let cPicker = view.tooltips.colorPicker;
- let onShown = cPicker.tooltip.once("shown");
+ let onColorPickerReady = cPicker.once("ready");
swatchEl.click();
- yield onShown;
+ yield onColorPickerReady;
let change = {
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);
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-hides-on-tooltip.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-hides-on-tooltip.js
@@ -20,28 +20,27 @@ const TEST_URI = `
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {view} = yield openRuleView();
let swatch = getRuleViewProperty(view, "body", "color").valueSpan
.querySelector(".ruleview-colorswatch");
- let bgImageSpan = getRuleViewProperty(view, "body", "background-image")
- .valueSpan;
+ let bgImageSpan = getRuleViewProperty(view, "body", "background-image").valueSpan;
let uriSpan = bgImageSpan.querySelector(".theme-link");
- let tooltip = view.tooltips.colorPicker.tooltip;
+ let colorPicker = view.tooltips.colorPicker;
info("Showing the color picker tooltip by clicking on the color swatch");
- let onShown = tooltip.once("shown");
+ let onColorPickerReady = colorPicker.once("ready");
swatch.click();
- yield onShown;
+ yield onColorPickerReady;
info("Now showing the image preview tooltip to hide the color picker");
- let onHidden = tooltip.once("hidden");
+ let onHidden = colorPicker.tooltip.once("hidden");
// Hiding the color picker refreshes the value.
let onRuleViewChanged = view.once("ruleview-changed");
yield assertHoverTooltipOn(view.tooltips.previewTooltip, uriSpan);
yield onHidden;
yield onRuleViewChanged;
ok(true, "The color picker closed when the image preview tooltip appeared");
});
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js
@@ -38,19 +38,19 @@ function* testSimpleMultipleColorChanges
yield selectNode("p", inspector);
info("Getting the <p> tag's color property");
let swatch = getRuleViewProperty(ruleView, "p", "color").valueSpan
.querySelector(".ruleview-colorswatch");
info("Opening the color picker");
let picker = ruleView.tooltips.colorPicker;
- let onShown = picker.tooltip.once("shown");
+ let onColorPickerReady = picker.once("ready");
swatch.click();
- yield onShown;
+ yield onColorPickerReady;
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) {
@@ -66,19 +66,19 @@ function* testComplexMultipleColorChange
yield selectNode("body", inspector);
info("Getting the <body> tag's color property");
let swatch = getRuleViewProperty(ruleView, "body", "background").valueSpan
.querySelector(".ruleview-colorswatch");
info("Opening the color picker");
let picker = ruleView.tooltips.colorPicker;
- let onShown = picker.tooltip.once("shown");
+ let onColorPickerReady = picker.once("ready");
swatch.click();
- yield onShown;
+ yield onColorPickerReady;
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) {
@@ -97,19 +97,19 @@ function* testOverriddenMultipleColorCha
yield selectNode("p", inspector);
info("Getting the <body> tag's color property");
let swatch = getRuleViewProperty(ruleView, "body", "color").valueSpan
.querySelector(".ruleview-colorswatch");
info("Opening the color picker");
let picker = ruleView.tooltips.colorPicker;
- let onShown = picker.tooltip.once("shown");
+ let onColorPickerReady = picker.once("ready");
swatch.click();
- yield onShown;
+ yield onColorPickerReady;
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) {
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-release-outside-frame.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-release-outside-frame.js
@@ -52,16 +52,16 @@ add_task(function* () {
function* openColorPickerForSwatch(swatch, view) {
let cPicker = view.tooltips.colorPicker;
ok(cPicker, "The rule-view has the expected colorPicker property");
let cPickerPanel = cPicker.tooltip.panel;
ok(cPickerPanel, "The XUL panel for the color picker exists");
- let onShown = cPicker.tooltip.once("shown");
+ let onColorPickerReady = cPicker.once("ready");
swatch.click();
- yield onShown;
+ yield onColorPickerReady;
ok(true, "The color picker was shown on click of the color swatch");
return cPicker;
}
--- a/devtools/client/inspector/rules/test/browser_rules_cubicbezier-appears-on-swatch-click.js
+++ b/devtools/client/inspector/rules/test/browser_rules_cubicbezier-appears-on-swatch-click.js
@@ -54,17 +54,17 @@ function* testAppears(view, swatch) {
ok(swatch, "The cubic-swatch exists");
let bezier = view.tooltips.cubicBezier;
ok(bezier, "The rule-view has the expected cubicBezier property");
let bezierPanel = bezier.tooltip.panel;
ok(bezierPanel, "The XUL panel for the cubic-bezier tooltip exists");
- let onShown = bezier.tooltip.once("shown");
+ let onBezierWidgetReady = bezier.once("ready");
swatch.click();
- yield onShown;
+ yield onBezierWidgetReady;
ok(true, "The cubic-bezier tooltip was shown on click of the cibuc swatch");
ok(!inplaceEditor(swatch.parentNode),
"The inplace editor wasn't shown as a result of the cibuc swatch click");
yield hideTooltipAndWaitForRuleViewChanged(bezier, view);
}
--- a/devtools/client/inspector/rules/test/browser_rules_cubicbezier-commit-on-ENTER.js
+++ b/devtools/client/inspector/rules/test/browser_rules_cubicbezier-commit-on-ENTER.js
@@ -25,19 +25,19 @@ add_task(function* () {
yield testPressingEnterCommitsChanges(swatch, view);
});
function* testPressingEnterCommitsChanges(swatch, ruleView) {
let bezierTooltip = ruleView.tooltips.cubicBezier;
info("Showing the tooltip");
- let onShown = bezierTooltip.tooltip.once("shown");
+ let onBezierWidgetReady = bezierTooltip.once("ready");
swatch.click();
- yield onShown;
+ yield onBezierWidgetReady;
let widget = yield bezierTooltip.widget;
info("Simulating a change of curve in the widget");
widget.coordinates = [0.1, 2, 0.9, -1];
let expected = "cubic-bezier(0.1, 2, 0.9, -1)";
yield waitForSuccess(function* () {
let func = yield getComputedStyleProperty("body", null,
--- a/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_03.js
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_03.js
@@ -40,30 +40,30 @@ add_task(function* () {
let editor = inplaceEditor(propEditor.doc.activeElement);
info("Modify the background property to background-image to trigger the " +
"property-value-updated event");
editor.input.value = "background-image";
let onRuleViewChanged = view.once("ruleview-changed");
let onPropertyValueUpdate = view.once("property-value-updated");
- let onShown = colorPicker.tooltip.once("shown");
+ let onReady = colorPicker.once("ready");
info("blur propEditor.nameSpan by clicking on the color swatch");
EventUtils.synthesizeMouseAtCenter(swatchSpan, {},
propEditor.doc.defaultView);
info("wait for ruleview-changed event to be triggered to prevent pending requests");
yield onRuleViewChanged;
info("wait for the property value to be updated");
yield onPropertyValueUpdate;
info("wait for the color picker to be shown");
- yield onShown;
+ yield onReady;
ok(true, "The color picker was shown on click of the color swatch");
ok(!inplaceEditor(propEditor.valueSpan),
"The inplace editor wasn't shown as a result of the color swatch click");
let spectrum = colorPicker.spectrum;
is(spectrum.rgb, "200,170,140,0.5", "The correct color picker was shown");
});
--- a/devtools/client/inspector/rules/test/browser_rules_eyedropper.js
+++ b/devtools/client/inspector/rules/test/browser_rules_eyedropper.js
@@ -98,19 +98,19 @@ function* testSelect(view, swatch, inspe
EXPECTED_COLOR,
"div's color set to body color after dropper");
}
function* openEyedropper(view, swatch) {
let tooltip = view.tooltips.colorPicker.tooltip;
info("Click on the swatch");
- let onShown = tooltip.once("shown");
+ let onColorPickerReady = view.tooltips.colorPicker.once("ready");
swatch.click();
- yield onShown;
+ yield onColorPickerReady;
let dropperButton = tooltip.doc.querySelector("#eyedropper-button");
info("Click on the eyedropper icon");
let onOpened = tooltip.once("eyedropper-opened");
dropperButton.click();
yield onOpened;
}
--- a/devtools/client/inspector/rules/test/head.js
+++ b/devtools/client/inspector/rules/test/head.js
@@ -386,19 +386,19 @@ var simulateColorPickerChange = Task.asy
var openColorPickerAndSelectColor = Task.async(function* (view, ruleIndex,
propIndex, newRgba, expectedChange) {
let ruleEditor = getRuleViewRuleEditor(view, ruleIndex);
let propEditor = ruleEditor.rule.textProps[propIndex].editor;
let swatch = propEditor.valueSpan.querySelector(".ruleview-colorswatch");
let cPicker = view.tooltips.colorPicker;
info("Opening the colorpicker by clicking the color swatch");
- let onShown = cPicker.tooltip.once("shown");
+ let onColorPickerReady = cPicker.once("ready");
swatch.click();
- yield onShown;
+ yield onColorPickerReady;
yield simulateColorPickerChange(view, cPicker, newRgba, expectedChange);
return {propEditor, swatch, cPicker};
});
/**
* Open the cubicbezier popup for a given property in a given rule and
@@ -424,19 +424,19 @@ var openColorPickerAndSelectColor = Task
var openCubicBezierAndChangeCoords = Task.async(function* (view, ruleIndex,
propIndex, coords, expectedChange) {
let ruleEditor = getRuleViewRuleEditor(view, ruleIndex);
let propEditor = ruleEditor.rule.textProps[propIndex].editor;
let swatch = propEditor.valueSpan.querySelector(".ruleview-bezierswatch");
let bezierTooltip = view.tooltips.cubicBezier;
info("Opening the cubicBezier by clicking the swatch");
- let onShown = bezierTooltip.tooltip.once("shown");
+ let onBezierWidgetReady = bezierTooltip.once("ready");
swatch.click();
- yield onShown;
+ yield onBezierWidgetReady;
let widget = yield bezierTooltip.widget;
info("Simulating a change of curve in the widget");
let onRuleViewChanged = view.once("ruleview-changed");
widget.coordinates = coords;
yield onRuleViewChanged;
--- a/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-color_02.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-color_02.js
@@ -76,19 +76,19 @@ function* testColorPickerEdit(inspector,
info("Testing colors edited via color picker");
yield selectNode("div", inspector);
let swatchElement = getRuleViewProperty(view, "div", "color").valueSpan
.querySelector(".ruleview-colorswatch");
info("Opening the color picker");
let picker = view.tooltips.colorPicker;
- let onShown = picker.tooltip.once("shown");
+ let onColorPickerReady = picker.once("ready");
swatchElement.click();
- yield onShown;
+ yield onColorPickerReady;
let rgbaColor = [83, 183, 89, 1];
let rgbaColorText = "rgba(83, 183, 89, 1)";
yield simulateColorPickerChange(view, picker, rgbaColor);
is(swatchElement.parentNode.dataset.color, rgbaColorText,
"data-color was updated");
view.styleDocument.popupNode = swatchElement;
--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-size.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-size.js
@@ -59,19 +59,19 @@ function* testImageDimension(ruleView) {
function* testPickerDimension(ruleView) {
info("Testing color-picker tooltip dimensions");
let {valueSpan} = getRuleViewProperty(ruleView, "div", "background");
let swatch = valueSpan.querySelector(".ruleview-colorswatch");
let cPicker = ruleView.tooltips.colorPicker;
- let onShown = cPicker.tooltip.once("shown");
+ let onReady = cPicker.once("ready");
swatch.click();
- yield onShown;
+ yield onReady;
// The colorpicker spectrum's iframe has a fixed width height, so let's
// make sure the tooltip is at least as big as that
let spectrumRect = cPicker.spectrum.element.getBoundingClientRect();
let panelRect = cPicker.tooltip.container.getBoundingClientRect();
ok(panelRect.width >= spectrumRect.width,
"The panel is wide enough to show the picker");