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