Bug 986284 - Intermittent browser_inspector_bug_952294_tooltips_dimensions.js; r=miker
authorPatrick Brosset <pbrosset@mozilla.com>
Fri, 18 Apr 2014 10:17:22 +0200
changeset 179621 20ec0888f6329ff634cd0ae31816ca68b0b357ca
parent 179620 6d1315e1a0268c25b67263230fec947a63052e56
child 179622 45d9d4a20b13a932ff43332aac1478ae0ec5950e
push id272
push userpvanderbeken@mozilla.com
push dateMon, 05 May 2014 16:31:18 +0000
reviewersmiker
bugs986284
milestone31.0a1
Bug 986284 - Intermittent browser_inspector_bug_952294_tooltips_dimensions.js; r=miker
browser/devtools/inspector/test/browser.ini
browser/devtools/inspector/test/browser_inspector_bug_952294_tooltips_dimensions.js
browser/devtools/styleinspector/test/browser.ini
browser/devtools/styleinspector/test/browser_styleinspector_tooltip-size.js
--- a/browser/devtools/inspector/test/browser.ini
+++ b/browser/devtools/inspector/test/browser.ini
@@ -42,13 +42,12 @@ support-files =
 [browser_inspector_pseudoClass_menu.js]
 [browser_inspector_pseudoclass_lock.js]
 [browser_inspector_reload.js]
 [browser_inspector_scrolling.js]
 [browser_inspector_select_last_selected.js]
 [browser_inspector_sidebarstate.js]
 [browser_inspector_bug_848731_reset_selection_on_delete.js]
 [browser_inspector_bug_922125_destroy_on_navigate.js]
-[browser_inspector_bug_952294_tooltips_dimensions.js]
 [browser_inspector_bug_958456_highlight_comments.js]
 [browser_inspector_bug_958169_switch_to_inspector_on_pick.js]
 [browser_inspector_bug_961771_picker_stops_on_tool_select.js]
 [browser_inspector_bug_962478_picker_stops_on_destroy.js]
--- a/browser/devtools/styleinspector/test/browser.ini
+++ b/browser/devtools/styleinspector/test/browser.ini
@@ -85,9 +85,10 @@ skip-if = os == "win" && debug # bug 963
 [browser_styleinspector_csslogic-inherited-properties.js]
 [browser_styleinspector_csslogic-specificity.js]
 [browser_styleinspector_inplace-editor.js]
 [browser_styleinspector_output-parser.js]
 [browser_styleinspector_tooltip-background-image.js]
 [browser_styleinspector_tooltip-closes-on-new-selection.js]
 [browser_styleinspector_tooltip-longhand-fontfamily.js]
 [browser_styleinspector_tooltip-shorthand-fontfamily.js]
+[browser_styleinspector_tooltip-size.js]
 [browser_styleinspector_tooltip-transform.js]
rename from browser/devtools/inspector/test/browser_inspector_bug_952294_tooltips_dimensions.js
rename to browser/devtools/styleinspector/test/browser_styleinspector_tooltip-size.js
--- a/browser/devtools/inspector/test/browser_inspector_bug_952294_tooltips_dimensions.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector_tooltip-size.js
@@ -1,202 +1,119 @@
-/* vim: set ts=2 et sw=2 tw=80: */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
+
 "use strict";
 
-let contentDoc;
-let inspector;
-let ruleView;
-let markupView;
+// Checking tooltips dimensions, to make sure their big enough to display their
+// content
 
-const PAGE_CONTENT = [
+const TEST_PAGE = [
+  'data:text/html;charset=utf-8,',
   '<style type="text/css">',
   '  div {',
   '    width: 300px;height: 300px;border-radius: 50%;',
   '    transform: skew(45deg);',
   '    background: red url(chrome://global/skin/icons/warning-64.png);',
   '  }',
   '</style>',
   '<div></div>'
 ].join("\n");
 
-function test() {
-  waitForExplicitFinish();
+let test = asyncTest(function*() {
+  yield addTab(TEST_PAGE);
+  let {toolbox, inspector, view} = yield openRuleView();
 
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onload(evt) {
-    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
-    contentDoc = content.document;
-    waitForFocus(createDocument, content);
-  }, true);
-
-  content.location = "data:text/html,tooltip dimension test";
-}
-
-function createDocument() {
-  contentDoc.body.innerHTML = PAGE_CONTENT;
+  yield selectNode("div", inspector);
 
-  openInspector(aInspector => {
-    inspector = aInspector;
-    markupView = inspector.markup;
+  yield testTransformDimension(view);
+  yield testImageDimension(view);
+  yield testPickerDimension(view);
+});
 
-    waitForView("ruleview", () => {
-      ruleView = inspector.sidebar.getWindowForTab("ruleview").ruleview.view;
-      inspector.sidebar.select("ruleview");
-      startTests();
-    });
-  });
-}
+function* testTransformDimension(ruleView) {
+  info("Testing css transform tooltip dimensions");
 
-function endTests() {
-  contentDoc = inspector = ruleView = markupView = null;
-  gBrowser.removeCurrentTab();
-  finish();
-}
+  let tooltip = ruleView.previewTooltip;
+  let panel = tooltip.panel;
+  let {valueSpan} = getRuleViewProperty(ruleView, "div", "transform");
 
-function startTests() {
-  Task.spawn(function() {
-    yield selectDiv();
-    yield testTransformDimension();
-    yield testImageDimension();
-    yield testPickerDimension();
-    endTests();
-  }).then(null, Cu.reportError);
-}
+  // Make sure there is a hover tooltip for this property, this also will fill
+  // the tooltip with its content
+  yield assertHoverTooltipOn(tooltip, valueSpan);
 
-function selectDiv() {
-  let deferred = promise.defer();
-
-  inspector.selection.setNode(contentDoc.querySelector("div"));
-  inspector.once("inspector-updated", () => {
-    deferred.resolve();
-  });
-
-  return deferred.promise;
-}
+  info("Showing the tooltip");
+  let onShown = tooltip.once("shown");
+  tooltip.show();
+  yield onShown;
 
-function testTransformDimension() {
-  return Task.spawn(function*() {
-    let tooltip = ruleView.previewTooltip;
-    let panel = tooltip.panel;
-
-    info("Testing css transform tooltip dimensions");
-    let {valueSpan} = getRuleViewProperty("transform");
-
-    yield assertTooltipShownOn(tooltip, valueSpan);
+  // Let's not test for a specific size, but instead let's make sure it's at
+  // least as big as the preview canvas
+  let canvas = panel.querySelector("canvas");
+  let w = canvas.width;
+  let h = canvas.height;
+  let panelRect = panel.getBoundingClientRect();
 
-    // Let's not test for a specific size, but instead let's make sure it's at
-    // least as big as the preview canvas
-    let canvas = panel.querySelector("canvas");
-    let w = canvas.width;
-    let h = canvas.height;
-    let panelRect = panel.getBoundingClientRect();
+  ok(panelRect.width >= w, "The panel is wide enough to show the canvas");
+  ok(panelRect.height >= h, "The panel is high enough to show the canvas");
 
-    ok(panelRect.width >= w, "The panel is wide enough to show the canvas");
-    ok(panelRect.height >= h, "The panel is high enough to show the canvas");
-
-    let onHidden = tooltip.once("hidden");
-    tooltip.hide();
-    yield onHidden;
-  });
+  let onHidden = tooltip.once("hidden");
+  tooltip.hide();
+  yield onHidden;
 }
 
-function testImageDimension() {
-  return Task.spawn(function*() {
-    info("Testing background-image tooltip dimensions");
+function* testImageDimension(ruleView) {
+  info("Testing background-image tooltip dimensions");
 
-    let tooltip = ruleView.previewTooltip;
-    let panel = tooltip.panel;
+  let tooltip = ruleView.previewTooltip;
+  let panel = tooltip.panel;
+  let {valueSpan} = getRuleViewProperty(ruleView, "div", "background");
+  let uriSpan = valueSpan.querySelector(".theme-link");
 
-    let {valueSpan} = getRuleViewProperty("background");
-    let uriSpan = valueSpan.querySelector(".theme-link");
-
-    yield assertTooltipShownOn(tooltip, uriSpan);
+  // Make sure there is a hover tooltip for this property, this also will fill
+  // the tooltip with its content
+  yield assertHoverTooltipOn(tooltip, uriSpan);
 
-    // Let's not test for a specific size, but instead let's make sure it's at
-    // least as big as the image
-    let imageRect = panel.querySelector("image").getBoundingClientRect();
-    let panelRect = panel.getBoundingClientRect();
+  info("Showing the tooltip");
+  let onShown = tooltip.once("shown");
+  tooltip.show();
+  yield onShown;
 
-    ok(panelRect.width >= imageRect.width,
-      "The panel is wide enough to show the image");
-    ok(panelRect.height >= imageRect.height,
-      "The panel is high enough to show the image");
+  // Let's not test for a specific size, but instead let's make sure it's at
+  // least as big as the image
+  let imageRect = panel.querySelector("image").getBoundingClientRect();
+  let panelRect = panel.getBoundingClientRect();
 
-    let onHidden = tooltip.once("hidden");
-    tooltip.hide();
-    yield onHidden;
-  });
+  ok(panelRect.width >= imageRect.width,
+    "The panel is wide enough to show the image");
+  ok(panelRect.height >= imageRect.height,
+    "The panel is high enough to show the image");
+
+  let onHidden = tooltip.once("hidden");
+  tooltip.hide();
+  yield onHidden;
 }
 
-function testPickerDimension() {
-  return Task.spawn(function*() {
-    info("Testing color-picker tooltip dimensions");
-
-    let {valueSpan} = getRuleViewProperty("background");
-    let swatch = valueSpan.querySelector(".ruleview-colorswatch");
-    let cPicker = ruleView.colorPicker;
-
-    let onShown = cPicker.tooltip.once("shown");
-    swatch.click();
-    yield onShown;
+function* testPickerDimension(ruleView) {
+  info("Testing color-picker tooltip dimensions");
 
-    // 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 w = cPicker.tooltip.panel.querySelector("iframe").width;
-    let h = cPicker.tooltip.panel.querySelector("iframe").height;
-    let panelRect = cPicker.tooltip.panel.getBoundingClientRect();
-
-    ok(panelRect.width >= w, "The panel is wide enough to show the picker");
-    ok(panelRect.height >= h, "The panel is high enough to show the picker");
+  let {valueSpan} = getRuleViewProperty(ruleView, "div", "background");
+  let swatch = valueSpan.querySelector(".ruleview-colorswatch");
+  let cPicker = ruleView.colorPicker;
 
-    let onHidden = cPicker.tooltip.once("hidden");
-    cPicker.hide();
-    yield onHidden;
-  });
-}
-
-/**
- * @return a promise that resolves when the tooltip is shown
- */
-function assertTooltipShownOn(tooltip, element) {
-  return Task.spawn(function*() {
-    let isTarget = yield isHoverTooltipTarget(tooltip, element);
-    ok(isTarget, "The element is a tooltip target and content has been inserted");
+  let onShown = cPicker.tooltip.once("shown");
+  swatch.click();
+  yield onShown;
 
-    info("Showing the tooltip now that content has been inserted by isValidHoverTarget");
-    let onShown = tooltip.once("shown");
-    tooltip.show();
-    yield onShown;
-  });
-}
+  // 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 w = cPicker.tooltip.panel.querySelector("iframe").width;
+  let h = cPicker.tooltip.panel.querySelector("iframe").height;
+  let panelRect = cPicker.tooltip.panel.getBoundingClientRect();
 
-/**
- * Given a tooltip object instance (see Tooltip.js), checks if it is set to
- * toggle and hover and if so, checks if the given target is a valid hover target.
- * This won't actually show the tooltip (the less we interact with XUL panels
- * during test runs, the better).
- * @return a promise that resolves when the answer is known. Also, this will
- * delete to a function in the rule-view which will insert content into the
- * tooltip
- */
-function isHoverTooltipTarget(tooltip, target) {
-  if (!tooltip._basedNode || !tooltip.panel) {
-    return promise.reject(new Error("The tooltip passed isn't set to toggle on hover or is not a tooltip"));
-  }
-  // The tooltip delegates to a user defined cb that inserts content in the tooltip
-  // when calling isValidHoverTarget
-  return tooltip.isValidHoverTarget(target);
+  ok(panelRect.width >= w, "The panel is wide enough to show the picker");
+  ok(panelRect.height >= h, "The panel is high enough to show the picker");
+
+  let onHidden = cPicker.tooltip.once("hidden");
+  cPicker.hide();
+  yield onHidden;
 }
-
-function getRuleViewProperty(name) {
-  let prop = null;
-  [].forEach.call(ruleView.doc.querySelectorAll(".ruleview-property"), property => {
-    let nameSpan = property.querySelector(".ruleview-propertyname");
-    let valueSpan = property.querySelector(".ruleview-propertyvalue");
-
-    if (nameSpan.textContent === name) {
-      prop = {nameSpan: nameSpan, valueSpan: valueSpan};
-    }
-  });
-  return prop;
-}