Bug 1484682 - Ensure the sidebar can overflow; r=Honza.

The sidebar regressed at some point and wasn't showing
a scrollbar when it was needed. This patch fixes that
by making the sidebar overflow and adds a test to make
sure we don't regress.

Differential Revision: https://phabricator.services.mozilla.com/D3976

--HG--
extra : moz-landing-system : lando

devtools/client/themes/webconsole.css

@@ -1016,7 +1016,8 @@ body #output-container {
 
 .sidebar-contents {
   grid-row: 2 / 3;
-  overflow: scroll;
+  overflow: auto;
+  max-height: 100%;
 }
 
 .webconsole-sidebar-toolbar .sidebar-close-button {

devtools/client/webconsole/test/mochitest/browser.ini

@@ -350,6 +350,7 @@ skip-if = verify
 [browser_webconsole_shows_reqs_from_netmonitor.js]
 [browser_webconsole_shows_reqs_in_netmonitor.js]
 [browser_webconsole_sidebar_object_expand_when_message_pruned.js]
+[browser_webconsole_sidebar_scroll.js]
 [browser_webconsole_sourcemap_css.js]
 [browser_webconsole_sourcemap_error.js]
 [browser_webconsole_sourcemap_invalid.js]

devtools/client/webconsole/test/mochitest/browser_webconsole_sidebar_scroll.js

@@ -0,0 +1,39 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test that the sidebar can be scrolled.
+
+"use strict";
+
+const TEST_URI = `data:text/html;charset=utf8,Test sidebar scroll`;
+
+add_task(async function() {
+  // Should be removed when sidebar work is complete
+  await pushPref("devtools.webconsole.sidebarToggle", true);
+  const isMacOS = Services.appinfo.OS === "Darwin";
+
+  const hud = await openNewTabAndConsole(TEST_URI);
+
+  const onMessage = waitForMessage(hud, "Document");
+  ContentTask.spawn(gBrowser.selectedBrowser, null, function() {
+    content.wrappedJSObject.console.log(content.wrappedJSObject.document);
+  });
+
+  const {node} = await onMessage;
+  const object = node.querySelector(".object-inspector .node");
+
+  info("Ctrl+click on an object to put it in the sidebar");
+  const onSidebarShown = waitFor(() => hud.ui.document.querySelector(".sidebar"));
+  EventUtils.sendMouseEvent({
+    type: "click",
+    [isMacOS ? "metaKey" : "ctrlKey"]: true
+  }, object, hud.ui.window);
+  await onSidebarShown;
+  const sidebarContents = hud.ui.document.querySelector(".sidebar-contents");
+
+  // Let's wait until the object is fully expanded.
+  await waitFor(() => sidebarContents.querySelectorAll(".node").length > 1);
+  ok(sidebarContents.scrollHeight > sidebarContents.clientHeight, "Sidebar overflows");
+});