Hide HTTP/2 pseudo headers by default

Author: pimterry

src/components/send/response-pane.tsx

@@ -66,6 +66,7 @@ export class ResponsePane extends React.Component<{
             />
             <SentResponseHeaderSection
                 {...this.cardProps.responseHeaders}
+                httpVersion={exchange.httpVersion}
                 requestUrl={exchange.request.parsedUrl}
                 headers={response.rawHeaders}
             />

src/components/send/sent-response-headers.tsx

@@ -17,11 +17,13 @@ import { CollapsingButtons } from '../common/collapsing-buttons';
 import { ExpandShrinkButton } from '../common/expand-shrink-button';
 
 export interface ResponseHeaderSectionProps extends ExpandableCardProps {
+    httpVersion: 1 | 2;
     requestUrl: URL;
     headers: RawHeaders;
 }
 
 export const SentResponseHeaderSection = ({
+    httpVersion,
     requestUrl,
     headers,
     ...cardProps
@@ -40,6 +42,7 @@ export const SentResponseHeaderSection = ({
         </header>
         <SendCardScrollableWrapper>
             <HeaderDetails
+                httpVersion={httpVersion}
                 requestUrl={requestUrl}
                 headers={headers}
             />

src/components/view/http/header-details.tsx

@@ -49,6 +49,15 @@ const HeaderDocsLink = styled(DocsLink)`
     margin-top: 10px;
 `;
 
+const PseudoHeadersHiddenMessage = styled.span`
+    grid-column: 2 / -1;
+    font-style: italic;
+`;
+
+const PseudoHeadersContent = styled(CollapsibleSectionBody)`
+    line-height: 1.3;
+`;
+
 const getHeaderDescription = (
     name: string,
     value: string,
@@ -78,38 +87,80 @@ const getHeaderDescription = (
 };
 
 export const HeaderDetails = inject('accountStore')(observer((props: {
+    httpVersion: 1 | 2;
     headers: RawHeaders,
     requestUrl: URL,
     accountStore?: AccountStore
 }) => {
     const sortedHeaders = _.sortBy(props.headers, ([key]) => key.toLowerCase());
 
-    return sortedHeaders.length === 0 ?
-        <BlankContentPlaceholder>(None)</BlankContentPlaceholder>
-    :
-        <HeadersGrid>
-            { _.flatMap(sortedHeaders, ([key, value], i) => {
-                const docs = getHeaderDocs(key);
-                const description = getHeaderDescription(
-                    key,
-                    value,
-                    props.requestUrl,
-                    props.accountStore!.isPaidUser
-                )
-
-                return <CollapsibleSection withinGrid={true} key={`${key}-${i}`}>
-                    <HeaderKeyValue>
-                        <HeaderName>{ key }: </HeaderName>
-                        <span>{ value }</span>
-                    </HeaderKeyValue>
-
-                    { description && <HeaderDescriptionContainer>
-                        { description }
-                        { docs && <HeaderDocsLink href={docs.url}>
-                            Find out more
-                        </HeaderDocsLink> }
-                    </HeaderDescriptionContainer> }
-                </CollapsibleSection>
-            }) }
-        </HeadersGrid>;
-}));
+    if (sortedHeaders.length === 0) {
+        return <BlankContentPlaceholder>(None)</BlankContentPlaceholder>
+    }
+
+    let [pseudoHeaders, normalHeaders] = _.partition(sortedHeaders, ([key]) =>
+        props.httpVersion >= 2 && key.startsWith(':')
+    );
+
+    if (normalHeaders.length === 0) {
+        normalHeaders = pseudoHeaders;
+        pseudoHeaders = [];
+    }
+
+    return <HeadersGrid>
+        {
+            pseudoHeaders.length > 0 && <CollapsibleSection withinGrid={true}>
+                <CollapsibleSectionSummary>
+                    <PseudoHeadersHiddenMessage>
+                        HTTP/{props.httpVersion} pseudo-headers
+                    </PseudoHeadersHiddenMessage>
+                </CollapsibleSectionSummary>
+
+                <PseudoHeadersContent>
+                    <PseudoHeaderDetails
+                        headers={pseudoHeaders}
+                    />
+                </PseudoHeadersContent>
+            </CollapsibleSection>
+        }
+
+        { _.flatMap(normalHeaders, ([key, value], i) => {
+            const docs = getHeaderDocs(key);
+            const description = getHeaderDescription(
+                key,
+                value,
+                props.requestUrl,
+                props.accountStore!.isPaidUser
+            )
+
+            return <CollapsibleSection withinGrid={true} key={`${key}-${i}`}>
+                <HeaderKeyValue>
+                    <HeaderName>{ key }: </HeaderName>
+                    <span>{ value }</span>
+                </HeaderKeyValue>
+
+                { description && <HeaderDescriptionContainer>
+                    { description }
+                    { docs && <HeaderDocsLink href={docs.url}>
+                        Find out more
+                    </HeaderDocsLink> }
+                </HeaderDescriptionContainer> }
+            </CollapsibleSection>;
+        }) }
+    </HeadersGrid>;
+}));
+
+const PseudoHeaderDetails = observer((props: {
+    headers: RawHeaders
+}) => {
+    return <HeadersGrid>
+        { _.flatMap(props.headers, ([key, value], i) => {
+            return <CollapsibleSection withinGrid={true} key={`${key}-${i}`}>
+                <HeaderKeyValue>
+                    <HeaderName>{ key }: </HeaderName>
+                    <span>{ value }</span>
+                </HeaderKeyValue>
+            </CollapsibleSection>;
+        }) }
+    </HeadersGrid>;
+});

src/components/view/http/http-details-pane.tsx

@@ -312,6 +312,7 @@ export class HttpDetailsPane extends React.Component<{
         } else if (!!response) {
             cards.push(<HttpResponseCard
                 {...this.cardProps.response}
+                httpVersion={exchange.httpVersion}
                 response={response}
                 requestUrl={exchange.request.parsedUrl}
                 apiExchange={apiExchange}

src/components/view/http/http-request-card.tsx

@@ -88,7 +88,10 @@ const MatchedRulePill = styled(inject('uiStore')((p: {
     }
 `;
 
-const RawRequestDetails = (p: { request: HtkRequest }) => {
+const RawRequestDetails = (p: {
+    request: HtkRequest,
+    httpVersion: 1 | 2
+}) => {
     const methodDocs = getMethodDocs(p.request.method);
     const methodDetails = [
         methodDocs && <Markdown
@@ -134,7 +137,11 @@ const RawRequestDetails = (p: { request: HtkRequest }) => {
         </CollapsibleSection>
 
         <ContentLabelBlock>Headers</ContentLabelBlock>
-        <HeaderDetails headers={p.request.rawHeaders} requestUrl={p.request.parsedUrl} />
+        <HeaderDetails
+            httpVersion={p.httpVersion}
+            headers={p.request.rawHeaders}
+            requestUrl={p.request.parsedUrl}
+        />
     </div>;
 }
 
@@ -179,6 +186,9 @@ export const HttpRequestCard = observer((props: HttpRequestCardProps) => {
             </CollapsibleCardHeading>
         </header>
 
-        <RawRequestDetails request={request} />
+        <RawRequestDetails
+            request={request}
+            httpVersion={exchange.httpVersion}
+        />
     </CollapsibleCard>;
 });

src/components/view/http/http-response-card.tsx

@@ -34,13 +34,14 @@ import { DocsLink } from '../../common/docs-link';
 
 interface HttpResponseCardProps extends CollapsibleCardProps  {
     theme: Theme;
+    httpVersion: 1 | 2;
     requestUrl: URL;
     response: HtkResponse;
     apiExchange: ApiExchange | undefined;
 }
 
 export const HttpResponseCard = observer((props: HttpResponseCardProps) => {
-    const { response, requestUrl, theme, apiExchange } = props;
+    const { httpVersion, response, requestUrl, theme, apiExchange } = props;
 
     const apiResponseDescription = get(apiExchange, 'response', 'description');
     const statusDocs = getStatusDocs(response.statusCode);
@@ -86,7 +87,11 @@ export const HttpResponseCard = observer((props: HttpResponseCardProps) => {
             </CollapsibleSection>
 
             <ContentLabelBlock>Headers</ContentLabelBlock>
-            <HeaderDetails headers={response.rawHeaders} requestUrl={requestUrl} />
+            <HeaderDetails
+                httpVersion={httpVersion}
+                headers={response.rawHeaders}
+                requestUrl={requestUrl}
+            />
         </div>
     </CollapsibleCard>;
 });