Bug 1241527 - 1 - Fix some unhandled rejected promises in colorpicker, cubicbezier and cssfilter ruleview tests; r=gl

--HG--
extra : commitid : 2Sdt8Wmae64

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

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

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

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

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

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

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

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.

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