Bug 1533667 - Fix scroll to bottom with repeated messages; r=Honza a=lizzard
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Fri, 08 Mar 2019 13:28:57 +0000
changeset 516356 6c270c1fddd04fe20d5e756b05b390cc6c3bd7e2
parent 516355 9faa04ade14af2a14d05bed419678b35eca8911c
child 516357 506f35a82fa7f3e8194d5129fe21bc28693ba75d
push id1957
push userarchaeopteryx@coole-files.de
push dateMon, 11 Mar 2019 18:03:35 +0000
treeherdermozilla-release@506f35a82fa7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza, lizzard
bugs1533667
milestone66.0
Bug 1533667 - Fix scroll to bottom with repeated messages; r=Honza a=lizzard When a message was repeated, the bubble would appear and slightly increase the message size (by 1px), making it lose its bottom-anchoring. Then, if a new message came, the console won't automatically scroll anymore. This patch modifies the repeat bubble CSS so it doesn't impact the message height, and add a test case in the test which asserts the scroll to bottom feature. Differential Revision: https://phabricator.services.mozilla.com/D22672
devtools/client/themes/webconsole.css
devtools/client/webconsole/test/mochitest/browser_webconsole_scroll.js
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -242,17 +242,17 @@ a {
 .message-body-wrapper .table-widget-body {
   overflow: visible;
 }
 
 /* The bubble that shows the number of times a message is repeated */
 .message-repeats {
   -moz-user-select: none;
   flex-shrink: 0;
-  margin: 2px 5px;
+  margin: 2px 5px 0 5px;
   padding: 0 6px;
   height: 1.25em;
   color: white;
   background-color: var(--repeat-bubble-background-color);
   border-radius: 40px;
   font: message-box;
   font-size: 0.8em;
   font-weight: normal;
--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_scroll.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_scroll.js
@@ -98,16 +98,43 @@ add_task(async function() {
   });
   message = await onMessage;
   ok(hasVerticalOverflow(outputContainer), "There is a vertical overflow");
   ok(isScrolledToBottom(outputContainer), "The console is scrolled to the bottom");
 
   info("Wait until the stacktrace is rendered");
   await waitFor(() => message.node.querySelector(".frame"));
   ok(isScrolledToBottom(outputContainer), "The console is scrolled to the bottom");
+
+  info("Check that repeated messages don't prevent scroll to bottom");
+  // We log a first message.
+  onMessage = waitForMessage(hud, "repeat");
+  ContentTask.spawn(gBrowser.selectedBrowser, {}, function() {
+    content.wrappedJSObject.console.log("repeat");
+  });
+  message = await onMessage;
+
+  // And a second one. We can't log them at the same time since we batch redux actions,
+  // and the message would already appear with the repeat badge, and the bug is
+  // only triggered when the badge is rendered after the initial message rendering.
+  ContentTask.spawn(gBrowser.selectedBrowser, {}, function() {
+    content.wrappedJSObject.console.log("repeat");
+  });
+  await waitFor(() => message.node.querySelector(".message-repeats"));
+  ok(isScrolledToBottom(outputContainer),
+    "The console is still scrolled to the bottom when the repeat badge is added");
+
+  info("Check that adding a message after a repeated message scrolls to bottom");
+  onMessage = waitForMessage(hud, "after repeat");
+  ContentTask.spawn(gBrowser.selectedBrowser, {}, function() {
+    content.wrappedJSObject.console.log("after repeat");
+  });
+  message = await onMessage;
+  ok(isScrolledToBottom(outputContainer),
+    "The console is scrolled to the bottom after a repeated message");
 });
 
 function hasVerticalOverflow(container) {
   return container.scrollHeight > container.clientHeight;
 }
 
 function isScrolledToBottom(container) {
   if (!container.lastChild) {