Bug 1032721 - Re-enable browser_inspector_infobar.js when oranges are fixed r=pbrosset
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Sat, 12 Jul 2014 20:20:28 +0100
changeset 215703 d0b5e87f69f53679070e3585470d7217ca4d4f87
parent 215702 4ecf47ef0ed2e7e57b4cd70c0798c083aa783e3c
child 215704 0ba8be1413f7b7a647d81e6d0852e411a35d00aa
push id515
push userraliiev@mozilla.com
push dateMon, 06 Oct 2014 12:51:51 +0000
treeherdermozilla-release@267c7a481bef [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbrosset
bugs1032721
milestone33.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 1032721 - Re-enable browser_inspector_infobar.js when oranges are fixed r=pbrosset
browser/devtools/inspector/test/browser.ini
browser/devtools/inspector/test/browser_inspector_highlight_after_transition.html
browser/devtools/inspector/test/browser_inspector_highlight_after_transition.js
browser/devtools/inspector/test/browser_inspector_highlighter-02.js
browser/devtools/inspector/test/browser_inspector_infobar.js
browser/devtools/inspector/test/browser_inspector_infobar_01.html
browser/devtools/inspector/test/browser_inspector_infobar_01.js
browser/devtools/inspector/test/browser_inspector_infobar_02.html
browser/devtools/inspector/test/browser_inspector_infobar_02.js
browser/devtools/inspector/test/head.js
browser/devtools/layoutview/test/head.js
browser/devtools/markupview/test/head.js
browser/devtools/styleinspector/test/head.js
--- a/browser/devtools/inspector/test/browser.ini
+++ b/browser/devtools/inspector/test/browser.ini
@@ -3,39 +3,41 @@ skip-if = e10s # Bug ?????? - devtools t
 subsuite = devtools
 support-files =
   doc_inspector_breadcrumbs.html
   doc_inspector_delete-selected-node-01.html
   doc_inspector_delete-selected-node-02.html
   doc_inspector_gcli-inspect-command.html
   doc_inspector_highlighter-comments.html
   doc_inspector_highlighter.html
-  doc_inspector_infobar.html
+  browser_inspector_infobar_01.html
+  browser_inspector_infobar_02.html
   doc_inspector_menu.html
   doc_inspector_remove-iframe-during-load.html
   doc_inspector_search.html
   doc_inspector_search-suggestions.html
   doc_inspector_select-last-selected-01.html
   doc_inspector_select-last-selected-02.html
+  browser_inspector_highlight_after_transition.html
   head.js
 
 [browser_inspector_breadcrumbs.js]
 [browser_inspector_delete-selected-node-01.js]
 [browser_inspector_delete-selected-node-02.js]
 [browser_inspector_delete-selected-node-03.js]
 [browser_inspector_destroy-after-navigation.js]
 [browser_inspector_gcli-inspect-command.js]
 [browser_inspector_highlighter-01.js]
 [browser_inspector_highlighter-02.js]
 [browser_inspector_highlighter-03.js]
 [browser_inspector_highlighter-comments.js]
 [browser_inspector_highlighter-iframes.js]
 [browser_inspector_iframe-navigation.js]
-[browser_inspector_infobar.js]
-skip-if = true # Bug 1028609
+[browser_inspector_infobar_01.js]
+[browser_inspector_infobar_02.js]
 [browser_inspector_initialization.js]
 [browser_inspector_inspect-object-element.js]
 [browser_inspector_invalidate.js]
 [browser_inspector_keyboard-shortcuts.js]
 [browser_inspector_menu.js]
 [browser_inspector_navigation.js]
 [browser_inspector_picker-stop-on-destroy.js]
 [browser_inspector_picker-stop-on-tool-change.js]
new file mode 100644
--- /dev/null
+++ b/browser/devtools/inspector/test/browser_inspector_highlight_after_transition.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <style>
+    div {
+      opacity: 0;
+      height: 0;
+      background: red;
+      border-top: 1px solid #888;
+      transition-property: height, opacity;
+      transition-duration: 3000ms;
+      transition-timing-function: ease-in-out, ease-in-out, linear;
+    }
+
+    div[visible] {
+      opacity: 1;
+      height: 200px;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/browser/devtools/inspector/test/browser_inspector_highlight_after_transition.js
@@ -0,0 +1,35 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const TEST_URI = "http://example.com/browser/browser/devtools/inspector/" +
+                 "test/browser_inspector_highlight_after_transition.html";
+
+// Test that the nodeinfobar is never displayed above the top or below the
+// bottom of the content area.
+let test = asyncTest(function*() {
+  info("Loading the test document and opening the inspector");
+
+  yield addTab(TEST_URI);
+
+  let {inspector} = yield openInspector();
+
+  yield checkDivHeight(inspector);
+
+  gBrowser.removeCurrentTab();
+});
+
+function* checkDivHeight(inspector) {
+  let div = getNode("div");
+
+  div.setAttribute("visible", "true");
+
+  yield once(div, "transitionend");
+  yield selectAndHighlightNode(div, inspector);
+
+  let height = div.getBoundingClientRect().height;
+
+  is (height, 201, "div is the correct height");
+}
--- a/browser/devtools/inspector/test/browser_inspector_highlighter-02.js
+++ b/browser/devtools/inspector/test/browser_inspector_highlighter-02.js
@@ -10,35 +10,35 @@
 
 const TEST_URI = TEST_URL_ROOT + "doc_inspector_highlighter.html";
 
 let test = asyncTest(function*() {
   let { inspector } = yield openInspectorForURL(TEST_URI);
 
   info("Selecting the simple, non-transformed DIV");
   let div = getNode("#simple-div");
-  yield selectNode(div, inspector, "highlight");
+  yield selectAndHighlightNode(div, inspector);
 
   testSimpleDivHighlighted(div);
   yield zoomTo(2);
   testZoomedSimpleDivHighlighted(div);
   yield zoomTo(1);
 
   info("Selecting the rotated DIV");
   let rotated = getNode("#rotated-div");
   let onBoxModelUpdate = waitForBoxModelUpdate();
-  yield selectNode(rotated, inspector, "highlight");
+  yield selectAndHighlightNode(rotated, inspector);
   yield onBoxModelUpdate;
 
   testMouseOverRotatedHighlights(rotated);
 
   info("Selecting the zero width height DIV");
   let zeroWidthHeight = getNode("#widthHeightZero-div");
   let onBoxModelUpdate = waitForBoxModelUpdate();
-  yield selectNode(zeroWidthHeight, inspector, "highlight");
+  yield selectAndHighlightNode(zeroWidthHeight, inspector);
   yield onBoxModelUpdate;
 
   testMouseOverWidthHeightZeroDiv(zeroWidthHeight);
 
 });
 
 function testSimpleDivHighlighted(div) {
   ok(isHighlighting(), "The highlighter is shown");
new file mode 100644
--- /dev/null
+++ b/browser/devtools/inspector/test/browser_inspector_infobar_01.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <style>
+    body {
+      width: 100%;
+      height: 100%;
+    }
+    div {
+      position: absolute;
+      height: 100px;
+      width: 500px;
+    }
+
+    #bottom {
+      bottom: 0px;
+      background: blue;
+    }
+
+    #vertical {
+      height: 100%;
+      background: green;
+    }
+   </style>
+ </head>
+ <body>
+  <div id="vertical">Vertical</div>
+  <div id="top" class="class1 class2">Top</div>
+  <div id="bottom">Bottom</div>
+ </body>
+ </html>
rename from browser/devtools/inspector/test/browser_inspector_infobar.js
rename to browser/devtools/inspector/test/browser_inspector_infobar_01.js
--- a/browser/devtools/inspector/test/browser_inspector_infobar.js
+++ b/browser/devtools/inspector/test/browser_inspector_infobar_01.js
@@ -1,17 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const TEST_URI = "http://example.com/browser/browser/devtools/inspector/" +
-                 "test/doc_inspector_infobar.html";
-const DOORHANGER_ARROW_HEIGHT = 5;
+                 "test/browser_inspector_infobar_01.html";
 
 // Test that hovering over nodes in the markup-view shows the highlighter over
 // those nodes
 let test = asyncTest(function*() {
   info("Loading the test document and opening the inspector");
 
   yield addTab(TEST_URI);
 
@@ -46,43 +45,32 @@ let test = asyncTest(function*() {
     {
       node: doc.querySelector("body"),
       position: "bottom",
       tag: "BODY",
       id: "",
       classes: ""
       // No dims as they will vary between computers
     },
-    {
-      node: doc.querySelector("#farbottom"),
-      position: "top",
-      tag: "DIV",
-      id: "#farbottom",
-      classes: "",
-      dims: "500 x 100"
-    },
   ];
 
   for (let currTest of testData) {
     yield testPosition(currTest, inspector);
   }
 
-  yield checkInfoBarAboveTop(inspector);
-  yield checkInfoBarBelowFindbar(inspector);
-
   gBrowser.removeCurrentTab();
 });
 
 function* testPosition(currTest, inspector) {
   let browser = gBrowser.selectedBrowser;
   let stack = browser.parentNode;
 
   info("Testing " + currTest.id);
 
-  yield selectNode(currTest.node, inspector, "highlight");
+  yield selectAndHighlightNode(currTest.node, inspector);
 
   let container = stack.querySelector(".highlighter-nodeinfobar-positioner");
   is(container.getAttribute("position"),
     currTest.position, "node " + currTest.id + ": position matches.");
 
   let tagNameLabel = stack.querySelector(".highlighter-nodeinfobar-tagname");
   is(tagNameLabel.textContent, currTest.tag,
     "node " + currTest.id + ": tagName matches.");
@@ -96,55 +84,8 @@ function* testPosition(currTest, inspect
   is(classesBox.textContent, currTest.classes,
     "node " + currTest.id  + ": classes match.");
 
   if (currTest.dims) {
     let dimBox = stack.querySelector(".highlighter-nodeinfobar-dimensions");
     is(dimBox.textContent, currTest.dims, "node " + currTest.id  + ": dims match.");
   }
 }
-
-function* checkInfoBarAboveTop(inspector) {
-  yield selectNode("#abovetop", inspector);
-
-  let positioner = getPositioner();
-  let insideContent = parseInt(positioner.style.top, 10) >= -DOORHANGER_ARROW_HEIGHT;
-
-  ok(insideContent, "Infobar is inside the content window (top = " +
-                    parseInt(positioner.style.top, 10) + ", content = '" +
-                    positioner.textContent +"')");
-}
-
-function* checkInfoBarBelowFindbar(inspector) {
-  gFindBar.open();
-
-  let body = content.document.body;
-  let farBottom = body.querySelector("#farbottom");
-  farBottom.scrollIntoView();
-
-  // Wait for scrollIntoView
-  yield waitForTick();
-
-  body.scrollTop -= 130;
-  yield selectNode(farBottom, inspector);
-
-  let positioner = getPositioner();
-  let insideContent = parseInt(positioner.style.top, 10) >= -DOORHANGER_ARROW_HEIGHT;
-
-  ok(insideContent, "Infobar does not overlap the findbar (top = " +
-                    parseInt(positioner.style.top, 10) + ", content = '" +
-                    positioner.textContent +"')");
-
-  gFindBar.close();
-}
-
-function getPositioner() {
-  let browser = gBrowser.selectedBrowser;
-  let stack = browser.parentNode;
-
-  return stack.querySelector(".highlighter-nodeinfobar-positioner");
-}
-
-function waitForTick() {
-  let deferred = promise.defer();
-  executeSoon(deferred.resolve);
-  return deferred.promise;
-}
new file mode 100644
--- /dev/null
+++ b/browser/devtools/inspector/test/browser_inspector_infobar_02.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <style>
+    body {
+      width: 100%;
+      height: 100%;
+    }
+
+    div {
+      position: absolute;
+      height: 100px;
+      width: 500px;
+    }
+
+    #below-bottom {
+      bottom: -200px;
+      background: red;
+    }
+
+    #above-top {
+      top: -200px;
+      background: black;
+      color: white;
+    }";
+  </style>
+</head>
+<body>
+  <div id="above-top">Above top</div>
+  <div id="below-bottom">Far bottom</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/browser/devtools/inspector/test/browser_inspector_infobar_02.js
@@ -0,0 +1,65 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const TEST_URI = "http://example.com/browser/browser/devtools/inspector/" +
+                 "test/browser_inspector_infobar_02.html";
+const DOORHANGER_ARROW_HEIGHT = 5;
+
+// Test that the nodeinfobar is never displayed above the top or below the
+// bottom of the content area.
+let test = asyncTest(function*() {
+  info("Loading the test document and opening the inspector");
+
+  yield addTab(TEST_URI);
+
+  let {inspector} = yield openInspector();
+
+  yield checkInfoBarAboveTop(inspector);
+  yield checkInfoBarBelowFindbar(inspector);
+
+  gBrowser.removeCurrentTab();
+});
+
+function* checkInfoBarAboveTop(inspector) {
+  yield selectAndHighlightNode("#above-top", inspector);
+
+  let positioner = getPositioner();
+  let positionerTop = parseInt(positioner.style.top, 10);
+  let insideContent = positionerTop >= -DOORHANGER_ARROW_HEIGHT;
+
+  ok(insideContent, "Infobar is inside the content window (top = " +
+                    positionerTop + ", content = '" +
+                    positioner.textContent +"')");
+}
+
+function* checkInfoBarBelowFindbar(inspector) {
+  gFindBar.open();
+
+  // Ensure that the findbar is fully open.
+  yield once(gFindBar, "transitionend");
+  yield selectAndHighlightNode("#below-bottom", inspector);
+
+  let positioner = getPositioner();
+  let positionerBottom =
+    positioner.getBoundingClientRect().bottom - DOORHANGER_ARROW_HEIGHT;
+  let findBarTop = gFindBar.getBoundingClientRect().top;
+
+  let insideContent = positionerBottom <= findBarTop;
+
+  ok(insideContent, "Infobar does not overlap the findbar (findBarTop = " +
+                    findBarTop + ", positionerBottom = " + positionerBottom +
+                    ", content = '" + positioner.textContent +"')");
+
+  gFindBar.close();
+  yield once(gFindBar, "transitionend");
+}
+
+function getPositioner() {
+  let browser = gBrowser.selectedBrowser;
+  let stack = browser.parentNode;
+
+  return stack.querySelector(".highlighter-nodeinfobar-positioner");
+}
--- a/browser/devtools/inspector/test/head.js
+++ b/browser/devtools/inspector/test/head.js
@@ -128,33 +128,51 @@ function getNode(nodeOrSelector, options
     return node;
   }
 
   info("Looking for a node but selector was not a string.");
   return nodeOrSelector;
 }
 
 /**
+ * Highlight a node and set the inspector's current selection to the node or
+ * the first match of the given css selector.
+ * @param {String|DOMNode} nodeOrSelector
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @return a promise that resolves when the inspector is updated with the new
+ * node
+ */
+function selectAndHighlightNode(nodeOrSelector, inspector) {
+  info("Highlighting and selecting the node " + nodeOrSelector);
+
+  let node = getNode(nodeOrSelector);
+  let updated = inspector.toolbox.once("highlighter-ready");
+  inspector.selection.setNode(node, "test-highlight");
+  return updated;
+
+}
+
+/**
  * Set the inspector's current selection to a node or to the first match of the
- * given css selector
- * @param {InspectorPanel} inspector The instance of InspectorPanel currently
- * loaded in the toolbox
- * @param {String} reason Defaults to "test" which instructs the inspector not
- * to highlight the node upon selection
- * @param {String} reason Defaults to "test" which instructs the inspector not
- * to highlight the node upon selection
+ * given css selector.
+ * @param {String|DOMNode} nodeOrSelector
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @param {String} reason
+ *        Defaults to "test" which instructs the inspector not to highlight the
+ *        node upon selection
  * @return a promise that resolves when the inspector is updated with the new
  * node
  */
 function selectNode(nodeOrSelector, inspector, reason="test") {
   info("Selecting the node " + nodeOrSelector);
+
   let node = getNode(nodeOrSelector);
-  let updated = inspector.once("inspector-updated", () => {
-    is(inspector.selection.node, node, "Correct node was selected");
-  });
+  let updated = inspector.once("inspector-updated");
   inspector.selection.setNode(node, reason);
   return updated;
 }
 
 /**
  * Open the inspector in a tab with given URL.
  * @param {string} url  The URL to open.
  * @return A promise that is resolved once the tab and inspector have loaded
--- a/browser/devtools/layoutview/test/head.js
+++ b/browser/devtools/layoutview/test/head.js
@@ -97,29 +97,49 @@ let destroyToolbox = Task.async(function
  */
 function getNode(nodeOrSelector) {
   return typeof nodeOrSelector === "string" ?
     content.document.querySelector(nodeOrSelector) :
     nodeOrSelector;
 }
 
 /**
+ * Highlight a node and set the inspector's current selection to the node or
+ * the first match of the given css selector.
+ * @param {String|DOMNode} nodeOrSelector
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @return a promise that resolves when the inspector is updated with the new
+ * node
+ */
+function selectAndHighlightNode(nodeOrSelector, inspector) {
+  info("Highlighting and selecting the node " + nodeOrSelector);
+
+  let node = getNode(nodeOrSelector);
+  let updated = inspector.toolbox.once("highlighter-ready");
+  inspector.selection.setNode(node, "test-highlight");
+  return updated;
+
+}
+
+/**
  * Set the inspector's current selection to a node or to the first match of the
- * given css selector
- * @param {InspectorPanel} inspector The instance of InspectorPanel currently
- * loaded in the toolbox
- * @param {String} reason Defaults to "test" which instructs the inspector not
- * to highlight the node upon selection
- * @param {String} reason Defaults to "test" which instructs the inspector not
- * to highlight the node upon selection
+ * given css selector.
+ * @param {String|DOMNode} nodeOrSelector
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @param {String} reason
+ *        Defaults to "test" which instructs the inspector not to highlight the
+ *        node upon selection
  * @return a promise that resolves when the inspector is updated with the new
  * node
  */
 function selectNode(nodeOrSelector, inspector, reason="test") {
   info("Selecting the node " + nodeOrSelector);
+
   let node = getNode(nodeOrSelector);
   let updated = inspector.once("inspector-updated");
   inspector.selection.setNode(node, reason);
   return updated;
 }
 
 /**
  * Open the toolbox, with the inspector tool visible.
--- a/browser/devtools/markupview/test/head.js
+++ b/browser/devtools/markupview/test/head.js
@@ -129,26 +129,49 @@ function openInspector() {
 function getNode(nodeOrSelector) {
   info("Getting the node for '" + nodeOrSelector + "'");
   return typeof nodeOrSelector === "string" ?
     content.document.querySelector(nodeOrSelector) :
     nodeOrSelector;
 }
 
 /**
- * Set the inspector's current selection to a node or to the first match of the
- * given css selector
+ * Highlight a node and set the inspector's current selection to the node or
+ * the first match of the given css selector.
  * @param {String|DOMNode} nodeOrSelector
- * @param {InspectorPanel} inspector The instance of InspectorPanel currently loaded in the toolbox
- * @param {String} reason Defaults to "test" which instructs the inspector not to highlight the node upon selection
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @return a promise that resolves when the inspector is updated with the new
+ * node
+ */
+function selectAndHighlightNode(nodeOrSelector, inspector) {
+  info("Highlighting and selecting the node " + nodeOrSelector);
+
+  let node = getNode(nodeOrSelector);
+  let updated = inspector.toolbox.once("highlighter-ready");
+  inspector.selection.setNode(node, "test-highlight");
+  return updated;
+
+}
+
+/**
+ * Set the inspector's current selection to a node or to the first match of the
+ * given css selector.
+ * @param {String|DOMNode} nodeOrSelector
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @param {String} reason
+ *        Defaults to "test" which instructs the inspector not to highlight the
+ *        node upon selection
  * @return a promise that resolves when the inspector is updated with the new
  * node
  */
 function selectNode(nodeOrSelector, inspector, reason="test") {
-  info("Selecting the node for '" + nodeOrSelector + "'");
+  info("Selecting the node " + nodeOrSelector);
+
   let node = getNode(nodeOrSelector);
   let updated = inspector.once("inspector-updated");
   inspector.selection.setNode(node, reason);
   return updated;
 }
 
 /**
  * Get the MarkupContainer object instance that corresponds to the given
--- a/browser/devtools/styleinspector/test/head.js
+++ b/browser/devtools/styleinspector/test/head.js
@@ -124,28 +124,49 @@ function addTab(url) {
  */
 function getNode(nodeOrSelector) {
   return typeof nodeOrSelector === "string" ?
     content.document.querySelector(nodeOrSelector) :
     nodeOrSelector;
 }
 
 /**
+ * Highlight a node and set the inspector's current selection to the node or
+ * the first match of the given css selector.
+ * @param {String|DOMNode} nodeOrSelector
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @return a promise that resolves when the inspector is updated with the new
+ * node
+ */
+function selectAndHighlightNode(nodeOrSelector, inspector) {
+  info("Highlighting and selecting the node " + nodeOrSelector);
+
+  let node = getNode(nodeOrSelector);
+  let updated = inspector.toolbox.once("highlighter-ready");
+  inspector.selection.setNode(node, "test-highlight");
+  return updated;
+
+}
+
+/**
  * Set the inspector's current selection to a node or to the first match of the
- * given css selector
- * @param {InspectorPanel} inspector The instance of InspectorPanel currently
- * loaded in the toolbox
- * @param {String} reason Defaults to "test" which instructs the inspector not
- * to highlight the node upon selection
- * @param {String} reason Defaults to "test" which instructs the inspector not to highlight the node upon selection
+ * given css selector.
+ * @param {String|DOMNode} nodeOrSelector
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @param {String} reason
+ *        Defaults to "test" which instructs the inspector not to highlight the
+ *        node upon selection
  * @return a promise that resolves when the inspector is updated with the new
  * node
  */
 function selectNode(nodeOrSelector, inspector, reason="test") {
   info("Selecting the node " + nodeOrSelector);
+
   let node = getNode(nodeOrSelector);
   let updated = inspector.once("inspector-updated");
   inspector.selection.setNode(node, reason);
   return updated;
 }
 
 /**
  * Set the inspector's current selection to null so that no node is selected