This is an automated email from the git hooks/post-receive script.
pierov pushed a commit to branch tor-browser-102.2.0esr-12.0-1 in repository tor-browser.
commit 58605792cb78ec63be5ad3e1b8591b8c401c503c Author: Nicolas Chevobbe nchevobbe@mozilla.com AuthorDate: Fri Jun 24 14:38:53 2022 +0000
Bug 1776262 - [devtools] Fix stuck to bottom console output. r=jdescottes, a=RyanVM
When the last visible message was an evaluation result but the last message in the store was something else, the console would trigger the pin-to-bottom behavior. This is fixed by checking if the last message in the store (and not the last visible message) is a result. A test case is added to make sure we don't regress.
Differential Revision: https://phabricator.services.mozilla.com/D150225 --- .../webconsole/components/Output/ConsoleOutput.js | 10 +++-- devtools/client/webconsole/selectors/messages.js | 5 +++ .../test/browser/browser_webconsole_scroll.js | 44 ++++++++++++++++++++++ 3 files changed, 56 insertions(+), 3 deletions(-)
diff --git a/devtools/client/webconsole/components/Output/ConsoleOutput.js b/devtools/client/webconsole/components/Output/ConsoleOutput.js index 65d2a964039ea..43cb9ec9cdee0 100644 --- a/devtools/client/webconsole/components/Output/ConsoleOutput.js +++ b/devtools/client/webconsole/components/Output/ConsoleOutput.js @@ -20,6 +20,7 @@ const { getAllMessagesUiById, getAllCssMessagesMatchingElements, getAllNetworkMessagesUpdateById, + getLastMessageId, getVisibleMessages, getAllRepeatById, getAllWarningGroupsById, @@ -65,6 +66,7 @@ class ConsoleOutput extends Component { editorMode: PropTypes.bool.isRequired, cacheGeneration: PropTypes.number.isRequired, disableVirtualization: PropTypes.bool, + lastMessageId: PropTypes.string.isRequired, }; }
@@ -165,11 +167,12 @@ class ConsoleOutput extends Component { const visibleMessagesDelta = nextProps.visibleMessages.length - this.props.visibleMessages.length; const messagesDelta = nextProps.messageCount - this.props.messageCount; - // We can retrieve the last message id in visibleMessages as evaluation result are - // always visible. + // Evaluation results are never filtered out, so if it's in the store, it will be + // visible in the output. const isNewMessageEvaluationResult = messagesDelta > 0 && - nextProps.mutableMessages.get(nextProps.visibleMessages.at(-1))?.type === + nextProps.lastMessageId && + nextProps.mutableMessages.get(nextProps.lastMessageId)?.type === MESSAGE_TYPE.RESULT;
const messagesUiDelta = @@ -350,6 +353,7 @@ function mapStateToProps(state, props) { // on state change (since we can't do it with mutableMessagesById). messageCount: mutableMessages.size, mutableMessages, + lastMessageId: getLastMessageId(state), visibleMessages: getVisibleMessages(state), messagesUi: getAllMessagesUiById(state), cssMatchingElements: getAllCssMessagesMatchingElements(state), diff --git a/devtools/client/webconsole/selectors/messages.js b/devtools/client/webconsole/selectors/messages.js index 7a7fbeb37366d..1530857a59b2b 100644 --- a/devtools/client/webconsole/selectors/messages.js +++ b/devtools/client/webconsole/selectors/messages.js @@ -57,6 +57,10 @@ function getAllWarningGroupsById(state) { return state.messages.warningGroupsById; }
+function getLastMessageId(state) { + return state.messages.lastMessageId; +} + function isMessageInWarningGroup(message, visibleMessages = []) { if (!getWarningGroupType(message)) { return false; @@ -76,6 +80,7 @@ module.exports = { getCurrentGroup, getFilteredMessagesCount, getGroupsById, + getLastMessageId, getMessage, getVisibleMessages, isMessageInWarningGroup, diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_scroll.js b/devtools/client/webconsole/test/browser/browser_webconsole_scroll.js index 682bfc8cbc947..cfedeb223a1f7 100644 --- a/devtools/client/webconsole/test/browser/browser_webconsole_scroll.js +++ b/devtools/client/webconsole/test/browser/browser_webconsole_scroll.js @@ -17,6 +17,9 @@ const TEST_URI = `data:text/html;charset=utf-8,<!DOCTYPE html><p>Web Console tes } </script> `; + +const { MESSAGE_SOURCE } = require("devtools/client/webconsole/constants"); + add_task(async function() { const hud = await openNewTabAndConsole(TEST_URI); const { ui } = hud; @@ -90,6 +93,47 @@ add_task(async function() { "The console is scrolled to the bottom" );
+ info("Scroll up and wait for the layout to stabilize"); + outputContainer.scrollTop = 0; + await new Promise(r => + window.requestAnimationFrame(() => TestUtils.executeSoon(r)) + ); + + info( + "Trigger a network request so the last message in the console store won't be visible" + ); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function() { + await content.fetch( + "http://mochi.test:8888/browser/devtools/client/webconsole/test/browser/sjs_c...", + { mode: "cors" } + ); + }); + + // Wait until the evalation result message isn't the last in the store anymore + await waitFor(() => { + const state = ui.wrapper.getStore().getState(); + return ( + state.messages.mutableMessagesById.get(state.messages.lastMessageId) + ?.source === MESSAGE_SOURCE.NETWORK + ); + }); + + // Wait a bit so the pin to bottom would have the chance to be hit. + await wait(500); + ok( + !isScrolledToBottom(outputContainer), + "The console is not scrolled to the bottom" + ); + + info( + "Evaluate a new command to check that the console scrolls to the bottom" + ); + await executeAndWaitForResultMessage(hud, "7 + 2", "9"); + ok( + isScrolledToBottom(outputContainer), + "The console is scrolled to the bottom" + ); + info( "Add a message to check that the console do scroll since we're at the bottom" );