Bug 1637955 - Fix vertical scrolling regresstion in the response panel r=Honza
authorHubert Boma Manilla <hmanilla@mozilla.com>
Thu, 21 May 2020 06:34:00 +0000
changeset 531387 d711a889379bca7f182da0756730e7ac4d054576
parent 531386 131702da23a1464af24ff9e6624d19e344e43abf
child 531388 106dc3f2e4417b54693cb4c447c4a5b50c32092a
push id37439
push userbtara@mozilla.com
push dateThu, 21 May 2020 21:49:34 +0000
treeherdermozilla-central@92c11f0bf14b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1637955
milestone78.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 1637955 - Fix vertical scrolling regresstion in the response panel r=Honza - Fix the 1px scrollbar issue in the headers panel - Allow scrolling for the properties view in the response panel Differential Revision: https://phabricator.services.mozilla.com/D75671
devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css
devtools/client/netmonitor/test/browser_net_json-long.js
--- a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css
@@ -102,17 +102,17 @@
 }
 
 /* Tree table in tab panels */
 
 .network-monitor .tree-container, .tree-container .treeTable {
   position: relative;
   height: 100%;
   width: 100%;
-  overflow: hidden;
+  overflow: auto;
   flex: 1;
 }
 
 .network-monitor .tree-container .treeTable,
 .network-monitor .tree-container .treeTable tbody {
   display: flex;
   flex-direction: column;
 }
@@ -271,16 +271,20 @@
 /* Headers tabpanel */
 
 .network-monitor .headers-panel-container {
   height: 100%;
   overflow: hidden;
   position: relative;
 }
 
+.network-monitor .headers-panel-container .treeTable {
+  overflow: hidden;
+}
+
 .network-monitor .headers-panel-container .panel-container {
   position: absolute;
   top: calc(var(--theme-toolbar-height) + 1px);
   bottom: 0;
   right: 0;
   left: 0;
   height: auto;
 }
--- a/devtools/client/netmonitor/test/browser_net_json-long.js
+++ b/devtools/client/netmonitor/test/browser_net_json-long.js
@@ -66,16 +66,22 @@ add_task(async function() {
 
   EventUtils.sendMouseEvent(
     { type: "click" },
     document.querySelector("#response-tab")
   );
 
   await Promise.all([wait, waitForPropsView]);
 
+  // Scroll the properties view to the bottom
+  const lastItem = document.querySelector(
+    "#response-panel .properties-view tr.treeRow:last-child"
+  );
+  lastItem.scrollIntoView();
+
   testJsonAccordionInResposeTab();
 
   wait = waitForDOM(document, "#response-panel .CodeMirror-code");
   const payloadHeader = document.querySelector(
     "#response-panel .accordion-item:last-child .accordion-header"
   );
   clickElement(payloadHeader, monitor);
   await wait;
@@ -111,16 +117,19 @@ add_task(async function() {
       "1",
       "The second json property name was incorrect."
     );
     is(
       values[1].textContent,
       '"Hello long string JSON!"',
       "The second json property value was incorrect."
     );
+
+    const view = tabpanel.querySelector(".properties-view .treeTable");
+    is(scrolledToBottom(view), true, "The view is not scrollable");
   }
 
   function testResponseTab() {
     const tabpanel = document.querySelector("#response-panel");
 
     is(
       tabpanel.querySelector(".response-error-header") === null,
       true,
@@ -162,9 +171,13 @@ add_task(async function() {
 
     is(
       tabpanel.querySelector(".accordion-item .accordion-header-label")
         .textContent,
       L10N.getStr("jsonScopeName"),
       "The json view section doesn't have the correct title."
     );
   }
+
+  function scrolledToBottom(element) {
+    return element.scrollTop + element.clientHeight >= element.scrollHeight;
+  }
 });