wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 1237368 - Set inline style width to console output node so output scrolls faster;r=vporof

Browse Source
This commit is contained in:
Brian Grinstead 2016-01-21 14:33:54 -08:00
parent 2ab62f3fe8
commit 90b9674522
11 changed files with 55 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
devtools/client/themes/webconsole.css
View File

@ -137,11 +137,9 @@ a {
}
#output-container {
/* This width is set to a hardcoded px in webconsole.js since it's way
faster than using 100% with -moz-box-flex (see Bug 1237368) */
-moz-user-select: text;
-moz-box-flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#output-container.hideTimestamps > .message {

12
devtools/client/webconsole/test/browser_console_keyboard_accessibility.js
View File

@ -30,24 +30,24 @@ add_task(function*() {
}],
});
let currentPosition = hud.outputNode.parentNode.scrollTop;
let currentPosition = hud.ui.outputWrapper.scrollTop;
let bottom = currentPosition;
EventUtils.synthesizeKey("VK_PAGE_UP", {});
isnot(hud.outputNode.parentNode.scrollTop, currentPosition,
isnot(hud.ui.outputWrapper.scrollTop, currentPosition,
"scroll position changed after page up");
currentPosition = hud.outputNode.parentNode.scrollTop;
currentPosition = hud.ui.outputWrapper.scrollTop;
EventUtils.synthesizeKey("VK_PAGE_DOWN", {});
ok(hud.outputNode.parentNode.scrollTop > currentPosition,
ok(hud.ui.outputWrapper.scrollTop > currentPosition,
"scroll position now at bottom");
EventUtils.synthesizeKey("VK_HOME", {});
is(hud.outputNode.parentNode.scrollTop, 0, "scroll position now at top");
is(hud.ui.outputWrapper.scrollTop, 0, "scroll position now at top");
EventUtils.synthesizeKey("VK_END", {});
let scrollTop = hud.outputNode.parentNode.scrollTop;
let scrollTop = hud.ui.outputWrapper.scrollTop;
ok(scrollTop > 0 && Math.abs(scrollTop - bottom) <= 5,
"scroll position now at bottom");

2
devtools/client/webconsole/test/browser_webconsole_bug_586388_select_all.js
View File

@ -68,7 +68,7 @@ function performTestsAfterOutput(hud) {
// Test the context menu "Select All" (which has a different code path) works
// properly as well.
let contextMenuId = outputNode.parentNode.getAttribute("context");
let contextMenuId = hud.ui.outputWrapper.getAttribute("context");
let contextMenu = hud.ui.document.getElementById(contextMenuId);
ok(contextMenu != null, "the output node has a context menu");

2
devtools/client/webconsole/test/browser_webconsole_bug_587617_output_copy.js
View File

@ -80,7 +80,7 @@ function consoleOpened(aHud) {
function testContextMenuCopy() {
let deferred = promise.defer();
let contextMenuId = outputNode.parentNode.getAttribute("context");
let contextMenuId = HUD.ui.outputWrapper.getAttribute("context");
let contextMenu = HUD.ui.document.getElementById(contextMenuId);
ok(contextMenu, "the output node has a context menu");

2
devtools/client/webconsole/test/browser_webconsole_bug_597460_filter_scroll.js
View File

@ -65,7 +65,7 @@ function consoleOpened(hud) {
}
function testScroll([result], hud) {
let scrollNode = hud.outputNode.parentNode;
let scrollNode = hud.ui.outputWrapper;
let msgNode = [...result.matched][0];
ok(msgNode.classList.contains("filtered-by-type"),
"network message is filtered by type");

2
devtools/client/webconsole/test/browser_webconsole_bug_601352_scroll.js
View File

@ -48,7 +48,7 @@ function test() {
let node = yield hud.jsterm.execute("1+1");
let scrollNode = hud.outputNode.parentNode;
let scrollNode = hud.ui.outputWrapper;
let rectNode = node.getBoundingClientRect();
let rectOutput = scrollNode.getBoundingClientRect();
console.debug("rectNode", rectNode, "rectOutput", rectOutput);

2
devtools/client/webconsole/test/browser_webconsole_bug_613642_maintain_scroll.js
View File

@ -19,7 +19,7 @@ add_task(function* () {
hud.jsterm.clearOutput();
let outputNode = hud.outputNode;
let scrollBox = outputNode.parentNode;
let scrollBox = hud.ui.outputWrapper;
for (let i = 0; i < 150; i++) {
content.console.log("test message " + i);

2
devtools/client/webconsole/test/browser_webconsole_bug_613642_prune_scroll.js
View File

@ -24,7 +24,7 @@ add_task(function* () {
let outputNode = hud.outputNode;
Services.prefs.setIntPref("devtools.hud.loglimit.console", 140);
let scrollBoxElement = outputNode.parentNode;
let scrollBoxElement = hud.ui.outputWrapper;
for (let i = 0; i < 150; i++) {
content.console.log("test message " + i);

2
devtools/client/webconsole/test/browser_webconsole_bug_614793_jsterm_scroll.js
View File

@ -27,7 +27,7 @@ function consoleOpened(hud) {
hud.jsterm.clearOutput();
let scrollNode = hud.outputNode.parentNode;
let scrollNode = hud.ui.outputWrapper;
for (let i = 0; i < 150; i++) {
content.console.log("test message " + i);

47
devtools/client/webconsole/webconsole.js
View File

@ -212,6 +212,7 @@ function WebConsoleFrame(webConsoleOwner)
this.output = new ConsoleOutput(this);
this._toggleFilter = this._toggleFilter.bind(this);
this.resize = this.resize.bind(this);
this._onPanelSelected = this._onPanelSelected.bind(this);
this._flushMessageQueue = this._flushMessageQueue.bind(this);
this._onToolboxPrefChanged = this._onToolboxPrefChanged.bind(this);
@ -503,6 +504,8 @@ WebConsoleFrame.prototype = {
this.filterBox = doc.querySelector(".hud-filter-box");
this.outputNode = doc.getElementById("output-container");
this.outputWrapper = doc.getElementById("output-wrapper");
this.completeNode = doc.querySelector(".jsterm-complete-node");
this.inputNode = doc.querySelector(".jsterm-input-node");
@ -540,6 +543,11 @@ WebConsoleFrame.prototype = {
this.jsterm = new JSTerm(this);
this.jsterm.init();
this.resize();
this.window.addEventListener("resize", this.resize, true);
this.jsterm.on("sidebar-opened", this.resize);
this.jsterm.on("sidebar-closed", this.resize);
let toolbox = gDevTools.getToolbox(this.owner.target);
if (toolbox) {
toolbox.on("webconsole-selected", this._onPanelSelected);
@ -568,6 +576,15 @@ WebConsoleFrame.prototype = {
this.jsterm.inputNode.focus();
},
/**
* Resizes the output node to fit the output wrapped.
* We need this because it makes the layout a lot faster than
* using -moz-box-flex and 100% width. See Bug 1237368.
*/
resize: function(e) {
this.outputNode.style.width = this.outputWrapper.clientWidth + "px";
},
/**
* Sets the focus to JavaScript input field when the web console tab is
* selected or when there is a split console present.
@ -2030,14 +2047,14 @@ WebConsoleFrame.prototype = {
let batch = this._outputQueue.splice(0, toDisplay);
let outputNode = this.outputNode;
let lastVisibleNode = null;
let scrollNode = outputNode.parentNode;
let scrollNode = this.outputWrapper;
let hudIdSupportsString = WebConsoleUtils.supportsString(this.hudId);
// We won't bother to try to restore scroll position if this is showing
// a lot of messages at once (and there are still items in the queue).
// It is going to purge whatever you were looking at anyway.
let scrolledToBottom = shouldPrune ||
Utils.isOutputScrolledToBottom(outputNode);
Utils.isOutputScrolledToBottom(outputNode, scrollNode);
// Output the current batch of messages.
let messages = new Set();
@ -2833,6 +2850,7 @@ WebConsoleFrame.prototype = {
}
gDevTools.off("pref-changed", this._onToolboxPrefChanged);
this.window.removeEventListener("resize", this.resize, true);
this._repeatNodes = {};
this._outputQueue.forEach(this._destroyItem, this);
@ -2848,6 +2866,8 @@ WebConsoleFrame.prototype = {
}
this._outputTimer = null;
if (this.jsterm) {
this.jsterm.off("sidebar-opened", this.resize);
this.jsterm.off("sidebar-closed", this.resize);
this.jsterm.destroy();
this.jsterm = null;
}
@ -3478,6 +3498,7 @@ JSTerm.prototype = {
let tabbox = this.hud.document.querySelector("#webconsole-sidebar");
this.sidebar = new ToolSidebar(tabbox, this, "webconsole");
this.sidebar.show();
this.emit("sidebar-opened");
},
/**
@ -4040,10 +4061,10 @@ JSTerm.prototype = {
}
}
else {
this.hud.outputNode.parentNode.scrollTop =
this.hud.outputWrapper.scrollTop =
Math.max(0,
this.hud.outputNode.parentNode.scrollTop -
this.hud.outputNode.parentNode.clientHeight
this.hud.outputWrapper.scrollTop -
this.hud.outputWrapper.clientHeight
);
}
event.preventDefault();
@ -4057,10 +4078,10 @@ JSTerm.prototype = {
}
}
else {
this.hud.outputNode.parentNode.scrollTop =
Math.min(this.hud.outputNode.parentNode.scrollHeight,
this.hud.outputNode.parentNode.scrollTop +
this.hud.outputNode.parentNode.clientHeight
this.hud.outputWrapper.scrollTop =
Math.min(this.hud.outputWrapper.scrollHeight,
this.hud.outputWrapper.scrollTop +
this.hud.outputWrapper.clientHeight
);
}
event.preventDefault();
@ -4071,7 +4092,7 @@ JSTerm.prototype = {
this.autocompletePopup.selectedIndex = 0;
event.preventDefault();
} else if (inputValue.length <= 0) {
this.hud.outputNode.parentNode.scrollTop = 0;
this.hud.outputWrapper.scrollTop = 0;
event.preventDefault();
}
break;
@ -4081,7 +4102,7 @@ JSTerm.prototype = {
this.autocompletePopup.selectedIndex = this.autocompletePopup.itemCount - 1;
event.preventDefault();
} else if (inputValue.length <= 0) {
this.hud.outputNode.parentNode.scrollTop = this.hud.outputNode.parentNode.scrollHeight;
this.hud.outputWrapper.scrollTop = this.hud.outputWrapper.scrollHeight;
event.preventDefault();
}
break;
@ -4633,15 +4654,15 @@ var Utils = {
* Check if the given output node is scrolled to the bottom.
*
* @param nsIDOMNode outputNode
* @param nsIDOMNode scrollNode
* @return boolean
* True if the output node is scrolled to the bottom, or false
* otherwise.
*/
isOutputScrolledToBottom: function Utils_isOutputScrolledToBottom(outputNode)
isOutputScrolledToBottom: function (outputNode, scrollNode)
{
let lastNodeHeight = outputNode.lastChild ?
outputNode.lastChild.clientHeight : 0;
let scrollNode = outputNode.parentNode;
return scrollNode.scrollTop + scrollNode.clientHeight >=
scrollNode.scrollHeight - lastNodeHeight / 2;
},

8
devtools/client/webconsole/webconsole.xul
View File

@ -202,8 +202,12 @@ function goUpdateConsoleCommands() {
</toolbar>
<hbox id="output-wrapper" flex="1" context="output-contextmenu" tooltip="aHTMLTooltip">
<div xmlns="http://www.w3.org/1999/xhtml" id="output-container"
tabindex="0" role="document" aria-live="polite" />
<!-- Wrapper element to make scrolling in output-container much faster.
See Bug 1237368 -->
<div xmlns="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml" id="output-container"
tabindex="0" role="document" aria-live="polite" />
</div>
</hbox>
<notificationbox id="webconsole-notificationbox">
<hbox class="jsterm-input-container" style="direction:ltr">