Bug 1533667 - Fix scroll to bottom with repeated messages; r=Honza.
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Fri, 08 Mar 2019 13:28:57 +0000
changeset 521033 e6970424c0ef
parent 521032 1b1bcfe92e21
child 521034 a299cc84703a
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1533667
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1533667 - Fix scroll to bottom with repeated messages; r=Honza. 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
@@ -247,17 +247,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) {