Bug 1636394 - Hide response headers for blocked requests r=nchevobbe
authorHubert Boma Manilla <hmanilla@mozilla.com>
Thu, 14 May 2020 18:18:59 +0000
changeset 530360 220c7fc79ada4717a2ee26b0dd2604ea7fba7285
parent 530359 0514a40bd58861ba22ae848918b72d2db1d77a4c
child 530361 a6b4c9b2af50602a273bdecca6f0944dd2c07c09
push id116127
push userhmanilla@mozilla.com
push dateFri, 15 May 2020 17:54:41 +0000
treeherderautoland@220c7fc79ada [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1636394, 1636917
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 1636394 - Hide response headers for blocked requests r=nchevobbe Seems like a regression. As there are actually no responses for blocked requests, this hides the response headers section when there are no responses. Also undoing the light gray color on the header titles To fix , Bug 1636917 Differential Revision: https://phabricator.services.mozilla.com/D74410
devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css
devtools/client/netmonitor/src/components/request-details/HeadersPanel.js
devtools/client/netmonitor/test/browser_net_block.js
--- a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css
@@ -311,20 +311,16 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-end;
   align-items: center;
   cursor: pointer;
 }
 
-.network-monitor .accordion-header-label {
-  color: var(--theme-icon-dimmed-color)
-}
-
 .network-monitor .raw-headers-toggle .headers-summary-label {
   color: var(--theme-toolbar-color);
 }
 
 .network-monitor .raw-headers-toggle-input > input {
   display: inline-block;
   width: 2em;
   vertical-align: bottom;
--- a/devtools/client/netmonitor/src/components/request-details/HeadersPanel.js
+++ b/devtools/client/netmonitor/src/components/request-details/HeadersPanel.js
@@ -532,18 +532,20 @@ class HeadersPanel extends Component {
     if (
       (!requestHeaders || !requestHeaders.headers.length) &&
       (!uploadHeaders || !uploadHeaders.headers.length) &&
       (!responseHeaders || !responseHeaders.headers.length)
     ) {
       return div({ className: "empty-notice" }, HEADERS_EMPTY_TEXT);
     }
 
-    const items = [
-      {
+    const items = [];
+
+    if (responseHeaders?.headers.length) {
+      items.push({
         component: PropertiesView,
         componentProps: {
           object: this.getProperties(responseHeaders, RESPONSE_HEADERS),
           filterText,
           targetSearchResult,
           renderRow: this.renderRow,
           renderValue: this.renderValue,
           provider: HeadersProvider,
@@ -559,18 +561,21 @@ class HeadersPanel extends Component {
         ),
         id: "responseHeaders",
         opened: true,
         shouldOpen: this.getShouldOpen(
           "response",
           filterText,
           targetSearchResult
         ),
-      },
-      {
+      });
+    }
+
+    if (requestHeaders?.headers.length) {
+      items.push({
         component: PropertiesView,
         componentProps: {
           object: this.getProperties(requestHeaders, REQUEST_HEADERS),
           filterText,
           targetSearchResult,
           renderRow: this.renderRow,
           renderValue: this.renderValue,
           provider: HeadersProvider,
@@ -586,18 +591,18 @@ class HeadersPanel extends Component {
         ),
         id: "requestHeaders",
         opened: true,
         shouldOpen: this.getShouldOpen(
           "request",
           filterText,
           targetSearchResult
         ),
-      },
-    ];
+      });
+    }
 
     if (uploadHeaders?.headers.length) {
       items.push({
         component: PropertiesView,
         componentProps: {
           object: this.getProperties(
             uploadHeaders,
             REQUEST_HEADERS_FROM_UPLOAD
--- a/devtools/client/netmonitor/test/browser_net_block.js
+++ b/devtools/client/netmonitor/test/browser_net_block.js
@@ -23,27 +23,44 @@ add_task(async function() {
   // Reload to have one request in the list
   let waitForEvents = waitForNetworkEvents(monitor, 1);
   await navigateTo(SIMPLE_URL);
   await waitForEvents;
 
   // Capture normal request
   let normalRequestState;
   let normalRequestSize;
+  let normalHeadersSectionSize;
+  let normalFirstHeaderSectionTitle;
   {
+    // Wait for the response and request header sections
+    const waitForHeaderSections = waitForDOM(
+      document,
+      "#headers-panel .accordion-item",
+      2
+    );
+
     const firstRequest = document.querySelectorAll(".request-list-item")[0];
-    const waitForHeaders = waitUntil(() =>
-      document.querySelector(".headers-overview")
+    EventUtils.sendMouseEvent({ type: "mousedown" }, firstRequest);
+
+    await waitForHeaderSections;
+
+    const headerSections = document.querySelectorAll(
+      "#headers-panel .accordion-item"
     );
-    EventUtils.sendMouseEvent({ type: "mousedown" }, firstRequest);
-    await waitForHeaders;
     normalRequestState = getSelectedRequest(store.getState());
     normalRequestSize = firstRequest.querySelector(".requests-list-transferred")
       .textContent;
+    normalHeadersSectionSize = headerSections.length;
+    normalFirstHeaderSectionTitle = headerSections[0].querySelector(
+      ".accordion-header-label"
+    ).textContent;
+
     info("Captured normal request");
+
     // Mark as blocked
     EventUtils.sendMouseEvent({ type: "contextmenu" }, firstRequest);
     const contextBlock = getContextMenuItem(
       monitor,
       "request-list-context-block-url"
     );
 
     const onRequestBlocked = waitForDispatch(
@@ -62,24 +79,44 @@ add_task(async function() {
   // the extra update packets.
   waitForEvents = waitForNetworkEvents(monitor, 1);
   tab.linkedBrowser.reload();
   await waitForEvents;
 
   // Capture blocked request, then unblock
   let blockedRequestState;
   let blockedRequestSize;
+  let blockedHeadersSectionSize;
+  let blockedFirstHeaderSectionTitle;
   {
+    const waitForHeaderSections = waitForDOM(
+      document,
+      "#headers-panel .accordion-item",
+      1
+    );
+
     const firstRequest = document.querySelectorAll(".request-list-item")[0];
+    EventUtils.sendMouseEvent({ type: "mousedown" }, firstRequest);
+
+    await waitForHeaderSections;
+
+    const headerSections = document.querySelectorAll(
+      "#headers-panel .accordion-item"
+    );
     blockedRequestSize = firstRequest.querySelector(
       ".requests-list-transferred"
     ).textContent;
-    EventUtils.sendMouseEvent({ type: "mousedown" }, firstRequest);
     blockedRequestState = getSelectedRequest(store.getState());
+    blockedHeadersSectionSize = headerSections.length;
+    blockedFirstHeaderSectionTitle = headerSections[0].querySelector(
+      ".accordion-header-label"
+    ).textContent;
+
     info("Captured blocked request");
+
     // Mark as unblocked
     EventUtils.sendMouseEvent({ type: "contextmenu" }, firstRequest);
     const contextUnblock = getContextMenuItem(
       monitor,
       "request-list-context-unblock-url"
     );
     const onRequestUnblocked = waitForDispatch(
       store,
@@ -108,20 +145,30 @@ add_task(async function() {
     ).textContent;
     EventUtils.sendMouseEvent({ type: "mousedown" }, firstRequest);
     unblockedRequestState = getSelectedRequest(store.getState());
     info("Captured unblocked request");
   }
 
   ok(!normalRequestState.blockedReason, "Normal request is not blocked");
   ok(!normalRequestSize.includes("Blocked"), "Normal request has a size");
+  ok(normalHeadersSectionSize == 2, "Both header sections are showing");
+  ok(
+    normalFirstHeaderSectionTitle.includes("Response"),
+    "The response header section is visible for normal requests"
+  );
 
   ok(blockedRequestState.blockedReason, "Blocked request is blocked");
   ok(
     blockedRequestSize.includes("Blocked"),
     "Blocked request shows reason as size"
   );
+  ok(blockedHeadersSectionSize == 1, "Only one header section is showing");
+  ok(
+    blockedFirstHeaderSectionTitle.includes("Request"),
+    "The response header section is not visible for blocked requests"
+  );
 
   ok(!unblockedRequestState.blockedReason, "Unblocked request is not blocked");
   ok(!unblockedRequestSize.includes("Blocked"), "Unblocked request has a size");
 
   return teardown(monitor);
 });