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 197676 20ec0888f6329ff634cd0ae31816ca68b0b357ca
parent 197675 6d1315e1a0268c25b67263230fec947a63052e56
child 197677 45d9d4a20b13a932ff43332aac1478ae0ec5950e
push id3624
push userasasaki@mozilla.com
push dateMon, 09 Jun 2014 21:49:01 +0000
treeherdermozilla-beta@b1a5da15899a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmiker
bugs986284
milestone31.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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;
-}