[tbb-commits] [tor-browser] 22/179: Bug 1776262 - [devtools] Fix stuck to bottom console output. r=jdescottes, a=RyanVM

[gitolite role]

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 at 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_cors-test-server.sjs",
+      { 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"
   );

-- 
To stop receiving notification emails like this one, please contact
the administrator of this repository.