Bug 1102269 - Fixed infobar getting outside visible area r=ntim

MozReview-Commit-ID: 7yNokF0bjj9
This commit is contained in:
Ricky Chien 2016-08-02 16:51:06 +08:00
parent 95b3e2c201
commit d97941f0fb
4 changed files with 66 additions and 2 deletions

View File

@ -21,6 +21,7 @@ support-files =
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
@ -97,6 +98,7 @@ subsuite = clipboard
[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]

View File

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

View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
height: 300vh;
}
</style>
</head>
<body>
</body>
</html>

View File

@ -692,6 +692,7 @@ BoxModelHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
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.
@ -704,8 +705,14 @@ BoxModelHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
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.