Bug 1402237 - Always scroll to bottom when the first messages are rendered;r=nchevobbe

MozReview-Commit-ID: B3YY3Tvwk5A

--HG--
extra : rebase_source : 7e0621d9cb98a2956139316f0f92b6a3dcff2a63

devtools/client/webconsole/new-console-output/components/console-output.js

@@ -57,6 +57,10 @@ const ConsoleOutput = createClass({
   componentWillUpdate(nextProps, nextState) {
     const outputNode = this.outputNode;
     if (!outputNode || !outputNode.lastChild) {
+      // Force a scroll to bottom when messages are added to an empty console.
+      // This makes the console stay pinned to the bottom if a batch of messages
+      // are added after a page refresh (Bug 1402237).
+      this.shouldScrollBottom = true;
       return;
     }
 

devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_scroll.js

@@ -5,39 +5,43 @@
 
 "use strict";
 
-const TEST_URI = "data:text/html;charset=utf-8,<p>Web Console test for " +
-                 "scroll behavior";
+const TEST_URI =
+`data:text/html;charset=utf-8,<p>Web Console test for  scroll.</p>
+  <script>
+  for (let i = 0; i < 100; i++) {
+    console.log("init-" + i);
+  }
+  </script>
+`;
 add_task(async function () {
   const hud = await openNewTabAndConsole(TEST_URI);
   let {ui} = hud;
-
-  info("Waiting for logged messages");
-
-  let receievedMessages = waitForMessages({hud, messages: [{
-    text: "init-99"
-  }]});
-  ContentTask.spawn(gBrowser.selectedBrowser, {}, function () {
-    for (let i = 0; i < 100; i++) {
-      content.wrappedJSObject.console.log("init-" + i);
-    }
-  });
-  await receievedMessages;
-
   const outputContainer = ui.outputNode.querySelector(".webconsole-output");
-  ok(outputContainer.scrollHeight > outputContainer.clientHeight,
-    "There is a vertical overflow");
+
+  info("Console should be scrolled to bottom on initial load from page logs");
+  await waitFor(() => findMessage(hud, "init-99"));
+  ok(hasVerticalOverflow(outputContainer), "There is a vertical overflow");
+  ok(isScrolledToBottom(outputContainer), "The console is scrolled to the bottom");
+
+  await refreshTab();
+
+  info("Console should be scrolled to bottom after refresh from page logs");
+  await waitFor(() => findMessage(hud, "init-99"));
+  ok(hasVerticalOverflow(outputContainer), "There is a vertical overflow");
+  ok(isScrolledToBottom(outputContainer), "The console is scrolled to the bottom");
 
   info("Scroll up");
   outputContainer.scrollTop = 0;
 
   info("Add a message to check that the scroll isn't impacted");
-  receievedMessages = waitForMessages({hud, messages: [{
+  let receievedMessages = waitForMessages({hud, messages: [{
     text: "stay"
   }]});
   ContentTask.spawn(gBrowser.selectedBrowser, {}, function () {
     content.wrappedJSObject.console.log("stay");
   });
   await receievedMessages;
+  ok(hasVerticalOverflow(outputContainer), "There is a vertical overflow");
   is(outputContainer.scrollTop, 0, "The console stayed scrolled to the top");
 
   info("Evaluate a command to check that the console scrolls to the bottom");
@@ -46,7 +50,8 @@ add_task(async function () {
   }]});
   ui.jsterm.execute("21 + 21");
   await receievedMessages;
-  is(isScrolledToBottom(outputContainer), true, "The console is scrolled to the bottom");
+  ok(hasVerticalOverflow(outputContainer), "There is a vertical overflow");
+  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");
   receievedMessages = waitForMessages({hud, messages: [{
@@ -56,9 +61,14 @@ add_task(async function () {
     content.wrappedJSObject.console.log("scroll");
   });
   await receievedMessages;
-  is(isScrolledToBottom(outputContainer), true, "The console is scrolled to the bottom");
+  ok(hasVerticalOverflow(outputContainer), "There is a vertical overflow");
+  ok(isScrolledToBottom(outputContainer), "The console is scrolled to the bottom");
 });
 
+function hasVerticalOverflow(container) {
+  return container.scrollHeight > container.clientHeight;
+}
+
 function isScrolledToBottom(container) {
   if (!container.lastChild) {
     return true;