Bug 1552629 - Fix misaligned "Edit and Resend" button in the netmonitor Headers panel;r=Honza

If the "Referrer Policy" header is missing, summaryReferrerPolicy is null,
so summaryEditAndResendBtn contains only the "Edit and Resend" button, making it
misaligned. We fix this by making sure summaryEditAndResendBtn always contains
the last non-null header.

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

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

devtools/client/netmonitor/src/components/HeadersPanel.js

@@ -449,10 +449,20 @@ class HeadersPanel extends Component {
     const summaryReferrerPolicy = referrerPolicy ?
       this.renderSummary(SUMMARY_REFERRER_POLICY, referrerPolicy) : null;
 
+    const summaryItems = [
+      summaryUrl,
+      trackingProtectionStatus,
+      summaryMethod,
+      summaryAddress,
+      summaryStatus,
+      summaryVersion,
+      summaryReferrerPolicy,
+    ].filter(summaryItem => summaryItem !== null);
+
     const summaryEditAndResendBtn = (
       div({
         className: "summary-edit-and-resend" },
-        summaryReferrerPolicy,
+        summaryItems.pop(),
         button({
           className: "edit-and-resend-button devtools-button",
           onClick: cloneSelectedRequest,
@@ -463,12 +473,7 @@ class HeadersPanel extends Component {
     return (
       div({ className: "panel-container" },
         div({ className: "headers-overview" },
-          summaryUrl,
-          trackingProtectionStatus,
-          summaryMethod,
-          summaryAddress,
-          summaryStatus,
-          summaryVersion,
+          summaryItems,
           summaryEditAndResendBtn,
         ),
         PropertiesView({