[DevTools] Fix request cookies view with no cookies

This fixes a small issue where blocked request cookies aren't shown if
there were no request cookies in the first place.

It also fixes a spacing issue with the list of cookies in "Malformed
Response Cookies"

Screenshots before: https://imgur.com/SeCHwKm
Screenshots after: https://imgur.com/M3NKlqQ
Bug: 856777
Change-Id: I1a2039b535869f16280fd74a9ba7f1dfcdced160

Change-Id: I165ac29eaafb8a74c3483238bd42c5aca1e91555
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1795316
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Reviewed-by: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#700365}

third_party/blink/renderer/devtools/front_end/network/RequestCookiesView.js

@@ -60,8 +60,11 @@ Network.RequestCookiesView = class extends UI.Widget {
     });
     this._requestCookiesTitle.appendChild(requestCookiesCheckbox);
 
+    this._requestCookiesEmpty = this.element.createChild('div', 'cookies-panel-item');
+    this._requestCookiesEmpty.textContent = ls`No request cookies were sent.`;
+
     this._requestCookiesTable = new CookieTable.CookiesTable(/* renderInline */ true);
-    this._requestCookiesTable.contentElement.classList.add('cookie-table');
+    this._requestCookiesTable.contentElement.classList.add('cookie-table', 'cookies-panel-item');
     this._requestCookiesTable.show(this.element);
 
     this._responseCookiesTitle = this.element.createChild('div', 'request-cookies-title');
@@ -70,7 +73,7 @@ Network.RequestCookiesView = class extends UI.Widget {
         ls`Cookies that were received from the server in the 'set-cookie' header of the response`;
 
     this._responseCookiesTable = new CookieTable.CookiesTable(/* renderInline */ true);
-    this._responseCookiesTable.contentElement.classList.add('cookie-table');
+    this._responseCookiesTable.contentElement.classList.add('cookie-table', 'cookies-panel-item');
     this._responseCookiesTable.show(this.element);
 
     this._malformedResponseCookiesTitle = this.element.createChild('div', 'request-cookies-title');
@@ -90,9 +93,10 @@ Network.RequestCookiesView = class extends UI.Widget {
     const requestCookieToBlockedReasons = new Map();
 
     if (this._request.requestCookies) {
+      requestCookies = this._request.requestCookies.slice();
+
       // request.requestCookies are generated from headers which are missing
       // cookie attributes that we can fetch from the backend.
-      requestCookies = this._request.requestCookies.slice();
       if (this._detailedRequestCookies) {
         requestCookies = requestCookies.map(cookie => {
           for (const detailedCookie of (this._detailedRequestCookies || [])) {
@@ -101,22 +105,8 @@ Network.RequestCookiesView = class extends UI.Widget {
           }
           return cookie;
         });
-      }
 
-      if (this._showFilteredOutCookiesSetting.get()) {
-        const blockedRequestCookies = this._request.blockedRequestCookies().slice();
-        for (const blockedCookie of blockedRequestCookies) {
-          requestCookieToBlockedReasons.set(blockedCookie.cookie, blockedCookie.blockedReasons.map(blockedReason => {
-            return {
-              attribute: SDK.NetworkRequest.cookieBlockedReasonToAttribute(blockedReason),
-              uiString: SDK.NetworkRequest.cookieBlockedReasonToUiString(blockedReason)
-            };
-          }));
-          requestCookies.push(blockedCookie.cookie);
-        }
-      }
-
-      if (!this._detailedRequestCookies) {
+      } else {
         const networkManager = SDK.NetworkManager.forRequest(this._request);
         if (networkManager) {
           const cookieModel = networkManager.target().model(SDK.CookieModel);
@@ -130,6 +120,18 @@ Network.RequestCookiesView = class extends UI.Widget {
       }
     }
 
+    if (this._showFilteredOutCookiesSetting.get()) {
+      for (const blockedCookie of this._request.blockedRequestCookies()) {
+        requestCookieToBlockedReasons.set(blockedCookie.cookie, blockedCookie.blockedReasons.map(blockedReason => {
+          return {
+            attribute: SDK.NetworkRequest.cookieBlockedReasonToAttribute(blockedReason),
+            uiString: SDK.NetworkRequest.cookieBlockedReasonToUiString(blockedReason)
+          };
+        }));
+        requestCookies.push(blockedCookie.cookie);
+      }
+    }
+
     return {requestCookies, requestCookieToBlockedReasons};
   }
 
@@ -186,10 +188,18 @@ Network.RequestCookiesView = class extends UI.Widget {
 
     if (requestCookies.length) {
       this._requestCookiesTitle.classList.remove('hidden');
+      this._requestCookiesEmpty.classList.add('hidden');
       this._requestCookiesTable.showWidget();
       this._requestCookiesTable.setCookies(requestCookies, requestCookieToBlockedReasons);
+
+    } else if (this._request.blockedRequestCookies().length) {
+      this._requestCookiesTitle.classList.remove('hidden');
+      this._requestCookiesEmpty.classList.remove('hidden');
+      this._requestCookiesTable.hideWidget();
+
     } else {
       this._requestCookiesTitle.classList.add('hidden');
+      this._requestCookiesEmpty.classList.add('hidden');
       this._requestCookiesTable.hideWidget();
     }
 
@@ -209,7 +219,7 @@ Network.RequestCookiesView = class extends UI.Widget {
       this._malformedResponseCookiesList.removeChildren();
       for (const malformedCookie of malformedResponseCookies) {
         const listItem = this._malformedResponseCookiesList.createChild('span', 'cookie-line source-code');
-        const icon = UI.Icon.create('smallicon-error', '');
+        const icon = UI.Icon.create('smallicon-error', 'cookie-warning-icon');
         listItem.appendChild(icon);
         listItem.createTextChild(malformedCookie.cookieLine);
         listItem.title =

third_party/blink/renderer/devtools/front_end/network/network_strings.grdp

@@ -864,6 +864,9 @@
   <message name="IDS_DEVTOOLS_f6d1d4157b75f9b68298f7df187a177c" desc="Text in Network Log View of the Network panel">
     Finish: <ph name="NUMBER_SECONDSTOSTRING_MAXTIME___BASETIME_">$1s<ex>120ms</ex></ph>
   </message>
+  <message name="IDS_DEVTOOLS_f6ff4cc9a6290608b928788dd6972b75" desc="Text in Request Headers View of the Network Panel">
+    No request cookies were sent.
+  </message>
   <message name="IDS_DEVTOOLS_f750833a940ae1ba3cd75b86d520fda3" desc="From cache format in Network Time Calculator of the Network panel">
     <ph name="PH1">$1s<ex>20ms latency</ex></ph> (from cache)
   </message>

third_party/blink/renderer/devtools/front_end/network/requestCookiesView.css

@@ -22,7 +22,7 @@
     display: inline-block;
 }
 
-.request-cookies-view .cookie-table {
+.request-cookies-view .cookies-panel-item {
     margin-top: 6px;
     margin-bottom: 16px;
     flex: none;
@@ -32,8 +32,11 @@
     background-color: yellow;
 }
 
-td.flagged-cookie-attribute-cell .cookie-warning-icon {
+.cookie-warning-icon {
     margin-right: 4px;
+}
+
+td.flagged-cookie-attribute-cell .cookie-warning-icon {
     filter: grayscale();
 }