Bug 1102269 - Fixed infobar getting outside visible area r?ntim
MozReview-Commit-ID: 94H9PX13TZB
--- a/devtools/client/inspector/test/browser.ini
+++ b/devtools/client/inspector/test/browser.ini
@@ -16,16 +16,17 @@ support-files =
doc_inspector_highlighter_dom.html
doc_inspector_highlighter_inline.html
doc_inspector_highlighter.html
doc_inspector_highlighter_rect.html
doc_inspector_highlighter_rect_iframe.html
doc_inspector_highlighter_xbl.xul
doc_inspector_infobar_01.html
doc_inspector_infobar_02.html
+ doc_inspector_infobar_03.html
doc_inspector_menu.html
doc_inspector_outerhtml.html
doc_inspector_remove-iframe-during-load.html
doc_inspector_search.html
doc_inspector_search-reserved.html
doc_inspector_search-suggestions.html
doc_inspector_search-svg.html
doc_inspector_select-last-selected-01.html
@@ -92,16 +93,17 @@ subsuite = clipboard
[browser_inspector_highlighter-rulers_02.js]
[browser_inspector_highlighter-selector_01.js]
[browser_inspector_highlighter-selector_02.js]
[browser_inspector_highlighter-xbl.js]
[browser_inspector_highlighter-zoom.js]
[browser_inspector_iframe-navigation.js]
[browser_inspector_infobar_01.js]
[browser_inspector_infobar_02.js]
+[browser_inspector_infobar_03.js]
[browser_inspector_initialization.js]
skip-if = (e10s && debug) # Bug 1250058 - Docshell leak on debug e10s
[browser_inspector_inspect-object-element.js]
[browser_inspector_invalidate.js]
[browser_inspector_keyboard-shortcuts-copy-outerhtml.js]
subsuite = clipboard
[browser_inspector_keyboard-shortcuts.js]
[browser_inspector_menu-01-sensitivity.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_infobar_03.js
@@ -0,0 +1,41 @@
+/* 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";
+
+// Bug 1102269 - Make sure info-bar never gets outside of visible area after scrolling
+
+const TEST_URI = URL_ROOT + "doc_inspector_infobar_03.html";
+
+add_task(function* () {
+ let {inspector, testActor} = yield openInspectorForURL(TEST_URI);
+
+ let testData = {
+ selector: "body",
+ position: "overlap",
+ style: "top:0px",
+ };
+
+ yield testPositionAndStyle(testData, inspector, testActor);
+});
+
+function* testPositionAndStyle(test, inspector, testActor) {
+ info("Testing " + test.selector);
+
+ yield selectAndHighlightNode(test.selector, inspector);
+
+ let style = yield testActor.getHighlighterNodeAttribute(
+ "box-model-nodeinfobar-container", "style");
+
+ is(style.split(";")[0], test.style,
+ "Infobar shows on top of the page when page isn't scrolled");
+
+ yield testActor.scrollWindow(0, 500);
+
+ style = yield testActor.getHighlighterNodeAttribute(
+ "box-model-nodeinfobar-container", "style");
+
+ is(style.split(";")[0], test.style,
+ "Infobar shows on top of the page even if the page is scrolled");
+}
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_infobar_03.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+
+ <style>
+ body {
+ height: 300vh;
+ }
+ </style>
+ </head>
+ <body>
+ </body>
+ </html>
--- a/devtools/server/actors/highlighters/box-model.js
+++ b/devtools/server/actors/highlighters/box-model.js
@@ -687,30 +687,37 @@ BoxModelHighlighter.prototype = extend(A
/**
* Move the Infobar to the right place in the highlighter.
*/
_moveInfobar: function () {
let bounds = this._getOuterBounds();
let winHeight = this.win.innerHeight * getCurrentZoom(this.win);
let winWidth = this.win.innerWidth * getCurrentZoom(this.win);
+ let winScrollY = this.win.scrollY;
// Ensure that containerBottom and containerTop are at least zero to avoid
// showing tooltips outside the viewport.
let containerBottom = Math.max(0, bounds.bottom) + NODE_INFOBAR_ARROW_SIZE;
let containerTop = Math.min(winHeight, bounds.top);
let container = this.getElement("nodeinfobar-container");
// Can the bar be above the node?
let top;
if (containerTop < NODE_INFOBAR_HEIGHT) {
// No. Can we move the bar under the node?
if (containerBottom + NODE_INFOBAR_HEIGHT > winHeight) {
- // No. Let's move it inside.
- top = containerTop;
+ // No. Let's move it inside. Can we show it at the top of the element?
+ if (containerTop < winScrollY) {
+ // No. Window is scrolled past the top of the element.
+ top = 0;
+ } else {
+ // Yes. Show it at the top of the element
+ top = containerTop;
+ }
container.setAttribute("position", "overlap");
} else {
// Yes. Let's move it under the node.
top = containerBottom;
container.setAttribute("position", "bottom");
}
} else {
// Yes. Let's move it on top of the node.