1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
/* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the in-line layout works as expected
const TEST_URI =
"data:text/html,<!DOCTYPE html><meta charset=utf8>Test in-line console layout";
const MINIMUM_MESSAGE_HEIGHT = 20;
add_task(async function () {
const hud = await openNewTabAndConsole(TEST_URI);
const { ui } = hud;
const { document } = ui;
const appNode = document.querySelector(".webconsole-app");
const filterBarNode = appNode.querySelector(
".webconsole-filteringbar-wrapper"
);
const outputNode = appNode.querySelector(".webconsole-output");
const inputNode = appNode.querySelector(".jsterm-input-container");
const eagerNode = document.querySelector(".eager-evaluation-result");
// The app height is the sum of the filter bar, input, and eager evaluation
const calculateAppHeight = () =>
filterBarNode.offsetHeight +
inputNode.offsetHeight +
eagerNode.offsetHeight;
testLayout(appNode);
is(outputNode.offsetHeight, 0, "output node has no height");
is(
calculateAppHeight(),
appNode.offsetHeight,
"The entire height is taken by filter bar, input, and eager result"
);
info("Logging a message in the content window");
const onLogMessage = waitForMessageByType(
hud,
"simple text message",
".console-api"
);
SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
content.wrappedJSObject.console.log("simple text message");
});
const logMessage = await onLogMessage;
testLayout(appNode);
is(
outputNode.clientHeight,
logMessage.node.clientHeight,
"Output node is only the height of the message it contains"
);
info("Logging multiple messages to make the output overflow");
const onLastMessage = waitForMessageByType(
hud,
"message-100",
".console-api"
);
SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
for (let i = 1; i <= 100; i++) {
content.wrappedJSObject.console.log("message-" + i);
}
});
await onLastMessage;
Assert.greater(
outputNode.scrollHeight,
outputNode.clientHeight,
"Output node overflows"
);
testLayout(appNode);
info("Make sure setting a tall value in the input does not break the layout");
setInputValue(hud, "multiline\n".repeat(200));
is(
outputNode.clientHeight,
MINIMUM_MESSAGE_HEIGHT,
"One message is still visible in the output node"
);
testLayout(appNode);
const filterBarHeight = filterBarNode.clientHeight;
info("Shrink the window so the filter buttons are put in a new line");
const toolbox = hud.ui.wrapper.toolbox;
const hostWindow = toolbox.win.parent;
hostWindow.resizeTo(300, window.screen.availHeight);
await waitFor(() =>
document.querySelector(".webconsole-filteringbar-wrapper.narrow")
);
Assert.greater(
filterBarNode.clientHeight,
filterBarHeight,
"The filter bar is taller"
);
testLayout(appNode);
info("Expand the window so filter buttons aren't on their own line anymore");
hostWindow.resizeTo(window.screen.availWidth, window.screen.availHeight);
await waitFor(() =>
document.querySelector(".webconsole-filteringbar-wrapper.wide")
);
testLayout(appNode);
setInputValue(hud, "");
testLayout(appNode);
await clearOutput(hud);
testLayout(appNode);
is(outputNode.offsetHeight, 0, "output node has no height");
is(
calculateAppHeight(),
appNode.offsetHeight,
"The entire height is taken by filter bar, input, and eager result"
);
});
function testLayout(node) {
is(
node.offsetHeight,
node.scrollHeight,
"there's no scrollbar on the wrapper"
);
Assert.lessOrEqual(
node.offsetHeight,
node.ownerDocument.body.offsetHeight,
"console is not taller than document body"
);
const childSumHeight = [...node.childNodes].reduce(
(height, n) => height + n.offsetHeight,
0
);
Assert.greaterOrEqual(
node.offsetHeight,
childSumHeight,
"the sum of the height of wrapper child nodes is not taller than wrapper's one"
);
}
|
