tor-browser

HeadersPanel.js (26354B)

---

/* eslint-disable complexity */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

"use strict";

const {
 Component,
 createFactory,
} = require("resource://devtools/client/shared/vendor/react.mjs");
const {
 connect,
} = require("resource://devtools/client/shared/vendor/react-redux.js");
const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
const {
 getFormattedIPAndPort,
 getFormattedSize,
 getRequestPriorityAsText,
} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
const {
 L10N,
} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
const {
 getHeadersURL,
 getTrackingProtectionURL,
 getHTTPStatusCodeURL,
} = require("resource://devtools/client/netmonitor/src/utils/doc-utils.js");
const {
 fetchNetworkUpdatePacket,
 writeHeaderText,
 getRequestHeadersRawText,
} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
const {
 HeadersProvider,
 HeaderList,
} = require("resource://devtools/client/netmonitor/src/utils/headers-provider.js");
const {
 FILTER_SEARCH_DELAY,
} = require("resource://devtools/client/netmonitor/src/constants.js");
// Components
const PropertiesView = createFactory(
 require("resource://devtools/client/netmonitor/src/components/request-details/PropertiesView.js")
);
const SearchBox = createFactory(
 require("resource://devtools/client/shared/components/SearchBox.js")
);
const Accordion = createFactory(
 require("resource://devtools/client/shared/components/Accordion.js")
);
const UrlPreview = createFactory(
 require("resource://devtools/client/netmonitor/src/components/previews/UrlPreview.js")
);
const HeadersPanelContextMenu = require("resource://devtools/client/netmonitor/src/widgets/HeadersPanelContextMenu.js");
const StatusCode = createFactory(
 require("resource://devtools/client/netmonitor/src/components/StatusCode.js")
);

loader.lazyGetter(this, "MDNLink", function () {
 return createFactory(
   require("resource://devtools/client/shared/components/MdnLink.js")
 );
});
loader.lazyGetter(this, "Rep", function () {
 return ChromeUtils.importESModule(
   "resource://devtools/client/shared/components/reps/index.mjs"
 ).REPS.Rep;
});
loader.lazyGetter(this, "MODE", function () {
 return ChromeUtils.importESModule(
   "resource://devtools/client/shared/components/reps/index.mjs"
 ).MODE;
});
loader.lazyGetter(this, "TreeRow", function () {
 return createFactory(
   ChromeUtils.importESModule(
     "resource://devtools/client/shared/components/tree/TreeRow.mjs",
     { global: "current" }
   ).default
 );
});
loader.lazyRequireGetter(
 this,
 "showMenu",
 "resource://devtools/client/shared/components/menu/utils.js",
 true
);
loader.lazyRequireGetter(
 this,
 "openContentLink",
 "resource://devtools/client/shared/link.js",
 true
);

loader.lazyGetter(this, "HEADERS_PROXY_STATUS", function () {
 return L10N.getStr("netmonitor.headers.proxyStatus");
});

loader.lazyGetter(this, "HEADERS_PROXY_VERSION", function () {
 return L10N.getStr("netmonitor.headers.proxyVersion");
});

const { div, input, label, span, textarea, tr, td, button } = dom;

const RESEND = L10N.getStr("netmonitor.context.resend.label");
const EDIT_AND_RESEND = L10N.getStr("netmonitor.summary.editAndResend");
const RAW_HEADERS = L10N.getStr("netmonitor.headers.raw");
const HEADERS_EMPTY_TEXT = L10N.getStr("headersEmptyText");
const HEADERS_FILTER_TEXT = L10N.getStr("headersFilterText");
const HEADERS_STATUS = L10N.getStr("netmonitor.headers.status");
const HEADERS_EARLYHINT_STATUS = L10N.getStr(
 "netmonitor.headers.earlyHintsStatus"
);
const HEADERS_VERSION = L10N.getStr("netmonitor.headers.version");
const HEADERS_TRANSFERRED = L10N.getStr("netmonitor.toolbar.transferred");
const SUMMARY_STATUS_LEARN_MORE = L10N.getStr("netmonitor.summary.learnMore");
const SUMMARY_ETP_LEARN_MORE = L10N.getStr(
 "netmonitor.enhancedTrackingProtection.learnMore"
);
const HEADERS_REFERRER = L10N.getStr("netmonitor.headers.referrerPolicy");
const HEADERS_CONTENT_BLOCKING = L10N.getStr(
 "netmonitor.headers.contentBlocking"
);
const HEADERS_ETP = L10N.getStr(
 "netmonitor.trackingResource.enhancedTrackingProtection"
);
const HEADERS_PRIORITY = L10N.getStr("netmonitor.headers.requestPriority");
const HEADERS_DNS = L10N.getStr("netmonitor.headers.dns");

// Order is as displayed
const HEADERS_CONFIG = {
 earlyHintsResponseHeaders: {
   // Key for fetching the data from the backend
   fetchKey: "earlyHintsResponseHeaders",
   title: L10N.getStr("earlyHintsResponseHeaders"),
   // Gets the content to be displayed when switched to the raw headers view
   rawHeaderValue: ({ headerData }) => {
     const preHeaderText = headerData.rawHeaders.split("\r\n")[0];
     return writeHeaderText(headerData.headers, preHeaderText).trim();
   },
   // Gets the full display text to be displayed in the header title bar(before the raw toggle button)
   displayTitle: ({ headerData }) => {
     const title = HEADERS_CONFIG.earlyHintsResponseHeaders.title;
     if (headerData.headersSize) {
       return `${title} (${getFormattedSize(headerData.headersSize, 3)})`;
     }
     const rawHeaderValue =
       HEADERS_CONFIG.earlyHintsResponseHeaders.rawHeaderValue({ headerData });
     return `${title} (${getFormattedSize(rawHeaderValue.length, 3)})`;
   },
 },
 responseHeaders: {
   // Key for fetching the data from the backend
   fetchKey: "responseHeaders",
   title: L10N.getStr("responseHeaders"),
   // Gets the content to be displayed when switched to the raw headers view
   rawHeaderValue: ({ status, statusText, httpVersion, headerData }) => {
     const preHeaderText = `${httpVersion} ${status} ${statusText}`;
     return writeHeaderText(headerData.headers, preHeaderText).trim();
   },
   // Gets the full display text to be displayed in the header title bar(before the raw toggle button)
   displayTitle: ({ status, statusText, httpVersion, headerData }) => {
     const title = HEADERS_CONFIG.responseHeaders.title;
     if (headerData.headersSize) {
       return `${title} (${getFormattedSize(headerData.headersSize, 3)})`;
     }
     const rawHeaderValue = HEADERS_CONFIG.responseHeaders.rawHeaderValue({
       httpVersion,
       status,
       statusText,
       headerData,
     });
     return `${title} (${getFormattedSize(rawHeaderValue.length, 3)})`;
   },
 },
 requestHeaders: {
   // See comment above
   fetchKey: "requestHeaders",
   title: L10N.getStr("requestHeaders"),
   // See comment above
   rawHeaderValue: ({ method, httpVersion, headerData, urlDetails }) => {
     return getRequestHeadersRawText(
       method,
       httpVersion,
       headerData,
       urlDetails
     );
   },
   // See comment above
   displayTitle: ({ method, httpVersion, headerData, urlDetails }) => {
     const title = HEADERS_CONFIG.requestHeaders.title;
     if (headerData.headersSize) {
       return `${title} (${getFormattedSize(headerData.headersSize, 3)})`;
     }
     const rawHeaderValue = HEADERS_CONFIG.requestHeaders.rawHeaderValue({
       method,
       httpVersion,
       headerData,
       urlDetails,
     });
     return `${title} (${getFormattedSize(rawHeaderValue.length, 3)})`;
   },
 },
 requestHeadersFromUploadStream: {
   // See comment above
   fetchKey: "requestPostData",
   title: L10N.getStr("requestHeadersFromUpload"),
   // See comment above
   rawHeaderValue: ({ headerData, preHeaderText = "" }) => {
     return writeHeaderText(headerData.headers, preHeaderText).trim();
   },
   // See comment above
   displayTitle: ({ method, httpVersion, headerData, urlDetails }) => {
     const title = HEADERS_CONFIG.requestHeadersFromUploadStream.title;
     if (headerData.headersSize) {
       return `${title} (${getFormattedSize(headerData.headersSize, 3)})`;
     }
     let preHeaderText = "";
     const hostHeader = headerData.headers.find(ele => ele.name === "Host");
     if (hostHeader) {
       preHeaderText = `${method} ${
         urlDetails.url.split(hostHeader.value)[1]
       } ${httpVersion}`;
     }

     const rawHeaderValue =
       HEADERS_CONFIG.requestHeadersFromUploadStream.rawHeaderValue({
         headerData,
         preHeaderText,
       });
     return `${title} (${getFormattedSize(rawHeaderValue.length, 3)})`;
   },
 },
};

const HEADERS_TO_FETCH = Object.values(HEADERS_CONFIG).map(
 headers => headers.fetchKey
);
/**
* Headers panel component
* Lists basic information about the request
*
* In http/2 all response headers are in small case.
* See: https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/request_details/index.html#response-headers
* RFC: https://tools.ietf.org/html/rfc7540#section-8.1.2
*/
class HeadersPanel extends Component {
 static get propTypes() {
   return {
     connector: PropTypes.object.isRequired,
     cloneSelectedRequest: PropTypes.func.isRequired,
     member: PropTypes.object,
     request: PropTypes.object.isRequired,
     renderValue: PropTypes.func,
     openLink: PropTypes.func,
     targetSearchResult: PropTypes.object,
     openRequestBlockingAndAddUrl: PropTypes.func.isRequired,
     openHTTPCustomRequestTab: PropTypes.func.isRequired,
     cloneRequest: PropTypes.func,
     sendCustomRequest: PropTypes.func,
     shouldExpandPreview: PropTypes.bool,
     setHeadersUrlPreviewExpanded: PropTypes.func,
   };
 }

 constructor(props) {
   super(props);

   this.state = {
     openedRawHeaders: new Set(),
     lastToggledRawHeader: "",
     filterText: null,
   };

   this.getProperties = this.getProperties.bind(this);
   this.getTargetHeaderPath = this.getTargetHeaderPath.bind(this);
   this.toggleRawHeader = this.toggleRawHeader.bind(this);
   this.renderSummary = this.renderSummary.bind(this);
   this.renderRow = this.renderRow.bind(this);
   this.renderValue = this.renderValue.bind(this);
   this.renderRawHeadersBtn = this.renderRawHeadersBtn.bind(this);
   this.onShowResendMenu = this.onShowResendMenu.bind(this);
   this.onShowHeadersContextMenu = this.onShowHeadersContextMenu.bind(this);
 }

 componentDidMount() {
   const { request, connector } = this.props;
   fetchNetworkUpdatePacket(connector.requestData, request, HEADERS_TO_FETCH);
 }

 // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
 UNSAFE_componentWillReceiveProps(nextProps) {
   const { request, connector } = nextProps;
   fetchNetworkUpdatePacket(connector.requestData, request, HEADERS_TO_FETCH);
 }

 // The title to be display in the heading
 getHeadersDisplayTitle(headerKey) {
   const headerData = this.props.request[headerKey];
   if (!headerData?.headers.length) {
     return "";
   }

   return HEADERS_CONFIG[headerKey].displayTitle({
     ...this.props.request,
     headerData,
   });
 }

 getProperties(headerKey) {
   let propertiesResult;
   const headerData = this.props.request[headerKey];
   if (headerData?.headers.length) {
     propertiesResult = {
       [headerKey]: this.state.openedRawHeaders.has(headerKey)
         ? { RAW_HEADERS_ID: headerData.rawHeaders }
         : new HeaderList(headerData.headers),
     };
   }
   return propertiesResult;
 }
 // Toggles the raw headers view on / off
 toggleRawHeader(headerKey) {
   const newOpenedRawHeaders = new Set([...this.state.openedRawHeaders]);
   if (newOpenedRawHeaders.has(headerKey)) {
     newOpenedRawHeaders.delete(headerKey);
   } else {
     newOpenedRawHeaders.add(headerKey);
   }
   this.setState({
     openedRawHeaders: newOpenedRawHeaders,
     lastToggledRawHeader: headerKey,
   });
 }

 /**
  * Renders the top part of the headers detail panel - Summary.
  */
 renderSummary(summaryLabel, value, summaryClass = "") {
   return div(
     {
       key: summaryLabel,
       className: "tabpanel-summary-container headers-summary " + summaryClass,
     },
     span(
       { className: "tabpanel-summary-label headers-summary-label" },
       summaryLabel
     ),
     span({ className: "tabpanel-summary-value" }, value)
   );
 }

 /**
  * Get path for target header if it's set. It's used to select
  * the header automatically within the tree of headers.
  * Note that the target header is set by the Search panel.
  */
 getTargetHeaderPath(searchResult) {
   if (!searchResult || !(searchResult.type in HEADERS_CONFIG)) {
     return null;
   }
   // Using `HeaderList` ensures that we'll get the same
   // header index as it's used in the tree.
   const headerData = this.props.request[searchResult.type];
   return (
     "/" +
     searchResult.type +
     "/" +
     new HeaderList(headerData.headers).headers.findIndex(
       header => header.name == searchResult.label
     )
   );
 }

 /**
  * Custom rendering method passed to PropertiesView. It's responsible
  * for rendering <textarea> element with raw headers data.
  */
 renderRow(props) {
   const { level, path } = props.member;

   if (path.includes("RAW_HEADERS_ID")) {
     const headerKey = path.split("/")[1];

     const value = HEADERS_CONFIG[headerKey].rawHeaderValue({
       ...this.props.request,
       headerData: this.props.request[headerKey],
     });

     let rows;
     if (value) {
       const match = value.match(/\n/g);
       rows = match !== null ? match.length : 0;
       // Need to add 1 for the horizontal scrollbar
       // not to cover the last row of raw data
       rows = rows + 1;
     }

     return tr(
       {
         key: path,
         role: "treeitem",
         className: "raw-headers-container",
         onClick: event => event.stopPropagation(),
       },
       td(
         {
           colSpan: 2,
         },
         textarea({
           className: "raw-headers",
           rows,
           value,
           readOnly: true,
         })
       )
     );
   }

   if (level !== 1) {
     return null;
   }

   return TreeRow(props);
 }

 renderRawHeadersBtn(headerKey) {
   return [
     label(
       {
         key: `${headerKey}RawHeadersBtn`,
         className: "raw-headers-toggle",
         onClick: event => event.stopPropagation(),
         onKeyDown: event => event.stopPropagation(),
       },
       span({ className: "headers-summary-label" }, RAW_HEADERS),
       span(
         { className: "raw-headers-toggle-input" },
         input({
           id: `raw-${headerKey}-checkbox`,
           checked: this.state.openedRawHeaders.has(headerKey),
           className: "devtools-checkbox-toggle",
           onChange: () => this.toggleRawHeader(headerKey),
           type: "checkbox",
         })
       )
     ),
   ];
 }

 renderValue(props) {
   const { member, value } = props;

   if (typeof value !== "string") {
     return null;
   }

   const headerDocURL = getHeadersURL(member.name);

   return div(
     { className: "treeValueCellDivider" },
     Rep(
       Object.assign(props, {
         // FIXME: A workaround for the issue in StringRep
         // Force StringRep to crop the text everytime
         member: Object.assign({}, member, { open: false }),
         mode: MODE.TINY,
         noGrip: true,
         openLink: openContentLink,
       })
     ),
     headerDocURL ? MDNLink({ url: headerDocURL }) : null
   );
 }

 getShouldOpen(headerKey, filterText, targetSearchResult) {
   return (item, opened) => {
     // If closed, open panel for these reasons
     //  1.The raw header is switched on or off
     //  2.The filter text is set
     //  3.The search text is set
     if (
       (!opened && this.state.lastToggledRawHeader === headerKey) ||
       (!opened && filterText) ||
       (!opened && targetSearchResult)
     ) {
       return true;
     }
     return !!opened;
   };
 }

 onShowResendMenu(event) {
   const {
     request: { id },
     cloneSelectedRequest,
     cloneRequest,
     sendCustomRequest,
   } = this.props;
   const menuItems = [
     {
       label: RESEND,
       type: "button",
       click: () => {
         cloneRequest(id);
         sendCustomRequest();
       },
     },
     {
       label: EDIT_AND_RESEND,
       type: "button",
       click: evt => {
         cloneSelectedRequest(evt);
       },
     },
   ];

   showMenu(menuItems, { button: event.target });
 }

 onShowHeadersContextMenu(event) {
   if (!this.contextMenu) {
     this.contextMenu = new HeadersPanelContextMenu();
   }
   this.contextMenu.open(event, window.getSelection());
 }

 render() {
   const {
     targetSearchResult,
     request: {
       fromCache,
       fromServiceWorker,
       httpVersion,
       method,
       remoteAddress,
       remotePort,
       status,
       statusText,
       urlDetails,
       referrerPolicy,
       priority,
       isThirdPartyTrackingResource,
       contentSize,
       transferredSize,
       isResolvedByTRR,
       proxyHttpVersion,
       proxyStatus,
       proxyStatusText,
       earlyHintsStatus,
     },
     openRequestBlockingAndAddUrl,
     openHTTPCustomRequestTab,
     shouldExpandPreview,
     setHeadersUrlPreviewExpanded,
   } = this.props;

   const headersDataExists = Object.keys(HEADERS_CONFIG).some(
     headerKey => this.props.request[headerKey]?.headers.length
   );

   if (!headersDataExists) {
     return div({ className: "empty-notice" }, HEADERS_EMPTY_TEXT);
   }

   const items = [];

   for (const headerKey in HEADERS_CONFIG) {
     if (this.props.request[headerKey]?.headers.length) {
       const { filterText } = this.state;
       items.push({
         component: PropertiesView,
         componentProps: {
           object: this.getProperties(headerKey),
           filterText,
           targetSearchResult,
           renderRow: this.renderRow,
           renderValue: this.renderValue,
           provider: HeadersProvider,
           selectPath: this.getTargetHeaderPath,
           defaultSelectFirstNode: false,
           enableInput: false,
           useQuotes: false,
         },
         header: this.getHeadersDisplayTitle(headerKey),
         buttons: this.renderRawHeadersBtn(headerKey),
         id: headerKey,
         opened: true,
         shouldOpen: this.getShouldOpen(
           headerKey,
           filterText,
           targetSearchResult
         ),
       });
     }
   }

   const sizeText = L10N.getFormatStrWithNumbers(
     "netmonitor.headers.sizeDetails",
     getFormattedSize(transferredSize),
     getFormattedSize(contentSize)
   );

   const summarySize = this.renderSummary(HEADERS_TRANSFERRED, sizeText);

   let summaryEarlyStatus;
   if (earlyHintsStatus) {
     summaryEarlyStatus = div(
       {
         key: "headers-summary",
         className:
           "tabpanel-summary-container headers-summary headers-earlyhint-status",
       },
       span(
         {
           className: "tabpanel-summary-label headers-summary-label",
         },
         HEADERS_EARLYHINT_STATUS
       ),
       span(
         {
           className: "tabpanel-summary-value status",
           "data-code": earlyHintsStatus,
         },
         StatusCode({
           item: {
             fromCache,
             fromServiceWorker,
             status: earlyHintsStatus,
             statusText: "",
           },
         }),
         MDNLink({
           url: getHTTPStatusCodeURL(earlyHintsStatus),
           title: SUMMARY_STATUS_LEARN_MORE,
         })
       )
     );
   }
   let summaryStatus;
   if (status) {
     summaryStatus = div(
       {
         key: "headers-summary",
         className: "tabpanel-summary-container headers-summary",
       },
       span(
         {
           className: "tabpanel-summary-label headers-summary-label",
         },
         HEADERS_STATUS
       ),
       span(
         {
           className: "tabpanel-summary-value status",
           "data-code": status,
         },
         StatusCode({
           item: { fromCache, fromServiceWorker, status, statusText },
         }),
         statusText,
         MDNLink({
           url: getHTTPStatusCodeURL(status),
           title: SUMMARY_STATUS_LEARN_MORE,
         })
       )
     );
   }

   let summaryProxyStatus;
   if (proxyStatus) {
     summaryProxyStatus = div(
       {
         key: "headers-summary ",
         className:
           "tabpanel-summary-container headers-summary headers-proxy-status",
       },
       span(
         {
           className: "tabpanel-summary-label headers-summary-label",
         },
         HEADERS_PROXY_STATUS
       ),
       span(
         {
           className: "tabpanel-summary-value status",
           "data-code": proxyStatus,
         },
         StatusCode({
           item: {
             fromCache,
             fromServiceWorker,
             status: proxyStatus,
             statusText: proxyStatusText,
           },
         }),
         proxyStatusText,
         MDNLink({
           url: getHTTPStatusCodeURL(proxyStatus),
           title: SUMMARY_STATUS_LEARN_MORE,
         })
       )
     );
   }

   let trackingProtectionStatus;
   let trackingProtectionDetails = "";
   if (isThirdPartyTrackingResource) {
     const trackingProtectionDocURL = getTrackingProtectionURL();

     trackingProtectionStatus = this.renderSummary(
       HEADERS_CONTENT_BLOCKING,
       div(null, span({ className: "tracking-resource" }), HEADERS_ETP)
     );
     trackingProtectionDetails = this.renderSummary(
       "",
       div(
         {
           key: "tracking-protection",
           className: "tracking-protection",
         },
         L10N.getStr("netmonitor.trackingResource.tooltip"),
         trackingProtectionDocURL
           ? MDNLink({
               url: trackingProtectionDocURL,
               title: SUMMARY_ETP_LEARN_MORE,
             })
           : span({ className: "headers-summary learn-more-link" })
       )
     );
   }

   const summaryVersion = httpVersion
     ? this.renderSummary(HEADERS_VERSION, httpVersion)
     : null;

   const summaryProxyHttpVersion = proxyHttpVersion
     ? this.renderSummary(
         HEADERS_PROXY_VERSION,
         proxyHttpVersion,
         "headers-proxy-version"
       )
     : null;

   const summaryReferrerPolicy = referrerPolicy
     ? this.renderSummary(HEADERS_REFERRER, referrerPolicy)
     : null;

   const summaryPriority = priority
     ? this.renderSummary(HEADERS_PRIORITY, getRequestPriorityAsText(priority))
     : null;

   const summaryDNS = this.renderSummary(
     HEADERS_DNS,
     L10N.getStr(
       isResolvedByTRR
         ? "netmonitor.headers.dns.overHttps"
         : "netmonitor.headers.dns.basic"
     )
   );

   const summaryItems = [
     summaryEarlyStatus,
     summaryStatus,
     summaryProxyStatus,
     summaryVersion,
     summaryProxyHttpVersion,
     summarySize,
     summaryReferrerPolicy,
     summaryPriority,
     summaryDNS,
     trackingProtectionStatus,
     trackingProtectionDetails,
   ].filter(summaryItem => summaryItem !== null);

   const newEditAndResendPref = Services.prefs.getBoolPref(
     "devtools.netmonitor.features.newEditAndResend"
   );

   return div(
     { className: "headers-panel-container" },
     div(
       { className: "devtools-toolbar devtools-input-toolbar" },
       SearchBox({
         delay: FILTER_SEARCH_DELAY,
         type: "filter",
         onChange: text => this.setState({ filterText: text }),
         placeholder: HEADERS_FILTER_TEXT,
       }),
       span({ className: "devtools-separator" }),
       button(
         {
           id: "block-button",
           className: "devtools-button",
           title: L10N.getStr("netmonitor.context.blockURL"),
           onClick: () => openRequestBlockingAndAddUrl(urlDetails.url),
         },
         L10N.getStr("netmonitor.headers.toolbar.block")
       ),
       span({ className: "devtools-separator" }),
       button(
         {
           id: "edit-resend-button",
           className: !newEditAndResendPref
             ? "devtools-button devtools-dropdown-button"
             : "devtools-button",
           title: RESEND,
           onClick: !newEditAndResendPref
             ? this.onShowResendMenu
             : () => {
                 openHTTPCustomRequestTab();
               },
         },
         span({ className: "title" }, RESEND)
       )
     ),
     div(
       { className: "panel-container" },
       div(
         { className: "headers-overview" },
         UrlPreview({
           url: urlDetails.url,
           method,
           address: remoteAddress
             ? getFormattedIPAndPort(remoteAddress, remotePort)
             : null,
           shouldExpandPreview,
           onTogglePreview: expanded => setHeadersUrlPreviewExpanded(expanded),
           proxyStatus,
         }),
         div(
           {
             className: "summary",
             onContextMenu: this.onShowHeadersContextMenu,
           },
           summaryItems
         )
       ),
       Accordion({ items })
     )
   );
 }
}

module.exports = connect(
 state => ({
   shouldExpandPreview: state.ui.shouldExpandHeadersUrlPreview,
 }),
 dispatch => ({
   setHeadersUrlPreviewExpanded: expanded =>
     dispatch(Actions.setHeadersUrlPreviewExpanded(expanded)),
   openRequestBlockingAndAddUrl: url =>
     dispatch(Actions.openRequestBlockingAndAddUrl(url)),
   openHTTPCustomRequestTab: () =>
     dispatch(Actions.openHTTPCustomRequest(true)),
   cloneRequest: id => dispatch(Actions.cloneRequest(id)),
   sendCustomRequest: () => dispatch(Actions.sendCustomRequest()),
 })
)(HeadersPanel);