Bug 1484682 - Ensure the sidebar can overflow; r=Honza.
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Thu, 23 Aug 2018 09:46:02 +0000
changeset 831021 9fcfb36da6fe80f1b1647700eb2e9b55d5db9a07
parent 831020 eee49d0f606bb7423f9688d2901d76296f505a72
child 831022 bdd6d0de763d0f190ba71a10493467a41f69dc70
push id118868
push userbmo:zjz@zjz.name
push dateFri, 24 Aug 2018 07:04:39 +0000
reviewersHonza
bugs1484682
milestone63.0a1
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
devtools/client/themes/webconsole.css
devtools/client/webconsole/test/mochitest/browser.ini
devtools/client/webconsole/test/mochitest/browser_webconsole_sidebar_scroll.js
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -1011,17 +1011,18 @@ body #output-container {
   min-height: var(--primary-toolbar-height);
   display: flex;
   justify-content: end;
   padding: 0;
 }
 
 .sidebar-contents {
   grid-row: 2 / 3;
-  overflow: scroll;
+  overflow: auto;
+  max-height: 100%;
 }
 
 .webconsole-sidebar-toolbar .sidebar-close-button {
   padding: 4px 0;
   margin: 0;
 }
 
 .sidebar-close-button::before {
--- a/devtools/client/webconsole/test/mochitest/browser.ini
+++ b/devtools/client/webconsole/test/mochitest/browser.ini
@@ -345,16 +345,17 @@ subsuite = clipboard
 [browser_webconsole_script_errordoc_urls.js]
 [browser_webconsole_scroll.js]
 [browser_webconsole_select_all.js]
 [browser_webconsole_show_subresource_security_errors.js]
 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]
 [browser_webconsole_sourcemap_nosource.js]
 skip-if = verify
 [browser_webconsole_split.js]
 [browser_webconsole_split_close_button.js]
 [browser_webconsole_split_escape_key.js]
new file mode 100644
--- /dev/null
+++ b/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");
+});