From f8fbd60618fb72bb172b1de11958c4294b49ddb4 Mon Sep 17 00:00:00 2001 From: Patrick Brosset Date: Thu, 21 Jan 2016 17:35:04 +0100 Subject: [PATCH] Bug 1241527 - 1 - Fix some unhandled rejected promises in colorpicker, cubicbezier and cssfilter ruleview tests; r=gl --HG-- extra : commitid : 2Sdt8Wmae64 --- ...r_rules_colorpicker-appears-on-swatch-click.js | 4 +--- .../browser_rules_colorpicker-edit-gradient.js | 4 +--- .../browser_rules_colorpicker-multiple-changes.js | 6 +----- ...r_rules_cubicbezier-appears-on-swatch-click.js | 2 +- .../browser_rules_cubicbezier-commit-on-ENTER.js | 6 ++++-- ..._rules_filtereditor-appears-on-swatch-click.js | 9 ++++----- .../browser_rules_filtereditor-commit-on-ENTER.js | 11 +++++++++-- devtools/client/inspector/rules/test/head.js | 15 +++++++++++++++ devtools/client/shared/widgets/FilterWidget.js | 12 +++++++++--- 9 files changed, 45 insertions(+), 24 deletions(-) diff --git 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 index f4b59c10d4b6..c62949c6f3f5 100644 --- 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 @@ -50,7 +50,5 @@ function* testColorPickerAppearsOnColorSwatchClick(view, swatch) { ok(!inplaceEditor(swatch.parentNode), "The inplace editor wasn't shown as a result of the color swatch click"); - let onModifications = view.once("ruleview-changed"); - cPicker.hide(); - yield onModifications; + yield hideTooltipAndWaitForRuleviewChanged(cPicker, view); } diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js index ccad25a16bc4..35d7e9e1debf 100644 --- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js +++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js @@ -72,7 +72,5 @@ function* testPickingNewColor(view) { "rgb(0, 0, 0) 100%)", "The gradient has been updated correctly"); - let onModified = view.once("ruleview-changed"); - cPicker.hide(); - yield onModified; + yield hideTooltipAndWaitForRuleviewChanged(cPicker, view); } diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js index 58d23aadd9c6..14fdefd10549 100644 --- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js +++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js @@ -90,11 +90,7 @@ function* testComplexMultipleColorChanges(inspector, ruleView) { } info("Closing the color picker"); - let onHidden = picker.tooltip.once("hidden"); - let onModified = ruleView.once("ruleview-changed"); - picker.tooltip.hide(); - yield onHidden; - yield onModified; + yield hideTooltipAndWaitForRuleviewChanged(picker.tooltip, ruleView); } function* testOverriddenMultipleColorChanges(inspector, ruleView) { diff --git 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 index f9966dcf3900..c4fdbb521f78 100644 --- 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 @@ -66,5 +66,5 @@ function* testAppears(view, swatch) { 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"); - bezier.hide(); + yield hideTooltipAndWaitForRuleviewChanged(bezier, view); } diff --git 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 index dea4acc7994d..f319012f092a 100644 --- 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 @@ -49,9 +49,11 @@ function* testPressingEnterCommitsChanges(swatch, ruleView) { "The text of the timing-function was updated"); info("Sending RETURN key within the tooltip document"); - let onHidden = bezierTooltip.tooltip.once("hidden"); + // Pressing RETURN ends up doing 2 rule-view updates, one for the preview and + // one for the commit when the tooltip closes. + let onRuleViewChanged = waitForNEvents(ruleView, "ruleview-changed", 2); EventUtils.sendKey("RETURN", widget.parent.ownerDocument.defaultView); - yield onHidden; + yield onRuleViewChanged; is(content.getComputedStyle(content.document.body).transitionTimingFunction, expected, "The element's timing-function was kept after RETURN"); diff --git a/devtools/client/inspector/rules/test/browser_rules_filtereditor-appears-on-swatch-click.js b/devtools/client/inspector/rules/test/browser_rules_filtereditor-appears-on-swatch-click.js index c959079ccbea..6f1d800ab0a7 100644 --- a/devtools/client/inspector/rules/test/browser_rules_filtereditor-appears-on-swatch-click.js +++ b/devtools/client/inspector/rules/test/browser_rules_filtereditor-appears-on-swatch-click.js @@ -17,12 +17,11 @@ add_task(function*() { .querySelector(".ruleview-filterswatch"); let filterTooltip = view.tooltips.filterEditor; - let onShow = filterTooltip.tooltip.once("shown"); + // Clicking on a cssfilter swatch sets the current filter value in the tooltip + // which, in turn, makes the FilterWidget emit an "updated" event that causes + // the rule-view to refresh. So we must wait for the ruleview-changed event. let onRuleViewChanged = view.once("ruleview-changed"); swatch.click(); - yield onShow; - // Clicking on swatch runs a preview of the current value - // and updates the rule-view yield onRuleViewChanged; ok(true, "The shown event was emitted after clicking on swatch"); @@ -30,5 +29,5 @@ add_task(function*() { "The inplace editor wasn't shown as a result of the filter swatch click"); yield filterTooltip.widget; - filterTooltip.hide(); + yield hideTooltipAndWaitForRuleviewChanged(filterTooltip, view); }); diff --git a/devtools/client/inspector/rules/test/browser_rules_filtereditor-commit-on-ENTER.js b/devtools/client/inspector/rules/test/browser_rules_filtereditor-commit-on-ENTER.js index d708f1ae23d4..3735e51f4a7a 100644 --- a/devtools/client/inspector/rules/test/browser_rules_filtereditor-commit-on-ENTER.js +++ b/devtools/client/inspector/rules/test/browser_rules_filtereditor-commit-on-ENTER.js @@ -16,19 +16,26 @@ add_task(function*() { .querySelector(".ruleview-filterswatch"); let filterTooltip = view.tooltips.filterEditor; - let onShow = filterTooltip.tooltip.once("shown"); + // Clicking on a cssfilter swatch sets the current filter value in the tooltip + // which, in turn, makes the FilterWidget emit an "updated" event that causes + // the rule-view to refresh. So we must wait for the ruleview-changed event. + let onRuleViewChanged = view.once("ruleview-changed"); swatch.click(); - yield onShow; + yield onRuleViewChanged; let widget = yield filterTooltip.widget; + onRuleViewChanged = view.once("ruleview-changed"); widget.setCssValue("blur(2px)"); yield waitForComputedStyleProperty("body", null, "filter", "blur(2px)"); + yield onRuleViewChanged; ok(true, "Changes previewed on the element"); + onRuleViewChanged = view.once("ruleview-changed"); info("Pressing RETURN to commit changes"); EventUtils.sendKey("RETURN", widget.styleWindow); + yield onRuleViewChanged; const computed = content.getComputedStyle(content.document.body); is(computed.filter, "blur(2px)", diff --git a/devtools/client/inspector/rules/test/head.js b/devtools/client/inspector/rules/test/head.js index ea7b343cb9f3..d36346e7232a 100644 --- a/devtools/client/inspector/rules/test/head.js +++ b/devtools/client/inspector/rules/test/head.js @@ -280,6 +280,21 @@ function assertHoverTooltipOn(tooltip, element) { }); } +/** + * When a tooltip is closed, this ends up "commiting" the value changed within + * the tooltip (e.g. the color in case of a colorpicker) which, in turn, ends up + * setting the value of the corresponding css property in the rule-view. + * Use this function to close the tooltip and make sure the test waits for the + * ruleview-changed event. + * @param {Tooltip} tooltip + * @param {CSSRuleView} view + */ +function* hideTooltipAndWaitForRuleviewChanged(tooltip, view) { + let onModified = view.once("ruleview-changed"); + tooltip.hide(); + yield onModified; +} + /** * Listen for a new tab to open and return a promise that resolves when one * does and completes the load event. diff --git a/devtools/client/shared/widgets/FilterWidget.js b/devtools/client/shared/widgets/FilterWidget.js index e48a23d828b9..265466672ead 100644 --- a/devtools/client/shared/widgets/FilterWidget.js +++ b/devtools/client/shared/widgets/FilterWidget.js @@ -725,7 +725,7 @@ CSSFilterEditorWidget.prototype = { } } - this.add(name, value, quote); + this.add(name, value, quote, true); } this.emit("updated", this.getCssValue()); @@ -745,8 +745,12 @@ CSSFilterEditorWidget.prototype = { * single quote, a double quote, or empty. * @return {Number} * The index of the new filter in the current list of filters + * @param {Boolean} + * By default, adding a new filter emits an "updated" event, but if + * you're calling add in a loop and wait to emit a single event after + * the loop yourself, set this parameter to true. */ - add: function(name, value, quote) { + add: function(name, value, quote, noEvent) { const def = this._definition(name); if (!def) { return false; @@ -794,7 +798,9 @@ CSSFilterEditorWidget.prototype = { } const index = this.filters.push({value, unit, name, quote}) - 1; - this.emit("updated", this.getCssValue()); + if (!noEvent) { + this.emit("updated", this.getCssValue()); + } return index; },