Reduce per-exchange memory use by ~15% with HttpBody improvements

Refactoring most notably to avoid indefinitely holdingh a
lazyObservablePromise on every instance (2x per exchange) everywhere.
These are expensive, and mostly not necessary. Refactored to cover the
two cases: reading the data & checking decoding state (both observably)
and waiting for the data as a promise (not observable).

Author: pimterry

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

@@ -90,9 +90,7 @@ export class SentResponseBodyCard extends React.Component<ExpandableCardProps &
             ? this.selectedContentType!
             : (message?.contentType ?? 'text');
 
-        const decodedBody = message?.body.decoded;
-
-        if (decodedBody) {
+        if (message?.body.isDecoded()) {
             // We have successfully decoded the body content, show it:
             return <SendBodyCardSection
                 ariaLabel={ariaLabel}
@@ -102,7 +100,7 @@ export class SentResponseBodyCard extends React.Component<ExpandableCardProps &
             >
                 <header>
                     <ReadonlyBodyCardHeader
-                        body={decodedBody}
+                        body={message.body.decodedData}
                         mimeType={getHeaderValue(message.headers, 'content-type')}
                         downloadFilename={getBodyDownloadFilename(url, message.headers)}
 
@@ -127,16 +125,14 @@ export class SentResponseBodyCard extends React.Component<ExpandableCardProps &
                         expanded={!!expanded}
                         cache={message.cache}
                     >
-                        {decodedBody}
+                        { message.body.decodedData }
                     </ContentViewer>
                 </SendEditorCardContent>
             </SendBodyCardSection>;
-        } else if (!decodedBody && message?.body.decodingError) {
+        } else if (message?.body.isFailed()) {
             // We have failed to decode the body content! Show the error & raw encoded data instead:
-            const error = message.body.decodingError as ErrorLike;
-            const encodedBody = Buffer.isBuffer(message.body.encoded)
-                ? message.body.encoded
-                : undefined;
+            const error = message.body.decodingError;
+            const encodedBody = message.body.encodedData;
 
             const encodedDataContentType = _.includes(ENCODED_DATA_CONTENT_TYPES, this.selectedContentType)
                 ? this.selectedContentType!

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

@@ -63,7 +63,7 @@ export const ResponseStatusSection = (props: {
             </Pill>
             <DurationPill timingEvents={props.exchange.timingEvents} />
             <Pill title="The size of the raw encoded response body">
-                { getReadableSize(response.body.encoded.byteLength) }
+                { getReadableSize(response.body.encodedByteLength) }
             </Pill>
             { props.showRequestOnViewPage &&
                 <ShowRequestButton onClick={props.showRequestOnViewPage} />

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

@@ -89,9 +89,7 @@ export class HttpBodyCard extends React.Component<ExpandableCardProps & {
             ? this.selectedContentType!
             : message.contentType;
 
-        const decodedBody = message.body.decoded;
-
-        if (decodedBody) {
+        if (message.body.isDecoded()) {
             // We have successfully decoded the body content, show it:
             return <CollapsibleCard
                 ariaLabel={ariaLabel}
@@ -102,7 +100,7 @@ export class HttpBodyCard extends React.Component<ExpandableCardProps & {
             >
                 <header>
                     <ReadonlyBodyCardHeader
-                        body={decodedBody}
+                        body={message.body.decodedData}
                         mimeType={getHeaderValue(message.headers, 'content-type')}
                         downloadFilename={getBodyDownloadFilename(url, message.headers)}
 
@@ -128,16 +126,14 @@ export class HttpBodyCard extends React.Component<ExpandableCardProps & {
                         expanded={!!expanded}
                         cache={message.cache}
                     >
-                        {decodedBody}
+                        { message.body.decodedData }
                     </ContentViewer>
                 </EditorCardContent>
             </CollapsibleCard>;
-        } else if (!decodedBody && message.body.decodingError) {
+        } else if (message.body.isFailed()) {
             // We have failed to decode the body content! Show the error & raw encoded data instead:
-            const error = message.body.decodingError as ErrorLike;
-            const encodedBody = Buffer.isBuffer(message.body.encoded)
-                ? message.body.encoded
-                : undefined;
+            const error = message.body.decodingError;
+            const encodedBody = message.body.encodedData;
 
             const encodedDataContentType = ENCODED_DATA_CONTENT_TYPES.includes(this.selectedContentType!)
                 ? this.selectedContentType!

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

@@ -215,12 +215,11 @@ const CompressionPerformance = observer((p: { exchange: HttpExchange }) => {
         const message = p.exchange[messageType];
         const encodings = getEncodings(message);
 
-        if (typeof message !== 'object' || !message.body.encoded.byteLength) return null;
+        if (typeof message !== 'object' || !message.body.encodedByteLength) return null;
 
-        const encodedBody = message.body.encoded;
-        const decodedBody = message.body.decoded;
+        const encodedBodySize = message.body.encodedByteLength;
+        const decodedBody = message.body.decodedData;
         const decodedBodySize = decodedBody ? decodedBody.byteLength : 0;
-        const encodedBodySize = encodedBody.byteLength;
 
         const encodingTestResults = _.mapKeys(testEncodings(message),
             (_size, encoding) => getEncodingName(encoding)

src/model/api/jsonrpc.ts

@@ -36,7 +36,7 @@ export async function parseRpcApiExchange(
     exchange: HttpExchange
 ): Promise<JsonRpcApiExchange> {
     try {
-        const body = await exchange.request.body.decodedPromise;
+        const body = await exchange.request.body.waitForDecoding();
 
         if (!body?.length) throw new Error(`No JSON-RPC request body`);
 

src/model/events/bodies.ts

@@ -10,7 +10,7 @@ type EncodedSizesCache = Map<typeof EncodedSizesCacheKey,
 >;
 
 export function testEncodings(message: ExchangeMessage): EncodedBodySizes | undefined {
-    if (!message.body.decoded) return;
+    if (!message.body.isDecoded()) return;
 
     const encodedSizesCache = <EncodedSizesCache> message.cache;
     const existingObservable = encodedSizesCache.get(EncodedSizesCacheKey);
@@ -20,7 +20,7 @@ export function testEncodings(message: ExchangeMessage): EncodedBodySizes | unde
         const sizesObservable = observable.box<EncodedBodySizes | undefined>();
         encodedSizesCache.set(EncodedSizesCacheKey, sizesObservable);
 
-        testEncodingsAsync(message.body.decoded)
+        testEncodingsAsync(message.body.decodedData)
         .then(action((testResults: EncodedBodySizes) => {
             sizesObservable.set(testResults)
         }))

src/model/events/content-types.ts

@@ -183,7 +183,7 @@ export function getCompatibleTypes(
     let types = new Set([contentType]);
 
     if (body && !Buffer.isBuffer(body)) {
-        body = body.decoded;
+        body = body.decodedData;
     }
 
     // Examine the first char of the body, assuming it's ascii

src/model/filters/search-filters.ts

@@ -1160,8 +1160,8 @@ class BodySizeFilter extends Filter {
         const responseBody = event.isSuccessfulExchange()
             ? event.response.body
             : undefined;
-        const totalSize = requestBody.encoded.byteLength +
-            (responseBody?.encoded.byteLength || 0);
+        const totalSize = requestBody.encodedByteLength +
+            (responseBody?.encodedByteLength || 0);
 
         return event.isHttp() &&
             this.predicate(totalSize, this.expectedSize);
@@ -1223,10 +1223,10 @@ class BodyFilter extends Filter {
         if (!event.isHttp()) return false;
         if (!event.hasRequestBody() && !event.hasResponseBody()) return false; // No body, no match
 
-        // Accessing .decoded on both of these touches a lazy promise, starting decoding for all bodies:
-        const requestBody = event.request.body.decoded;
+        // Accessing .decodedData on both of these starts decoding for all bodies async:
+        const requestBody = event.request.body.decodedData;
         const responseBody = event.isSuccessfulExchange()
-            ? event.response.body.decoded
+            ? event.response.body.decodedData
             : undefined;
 
         const matchesRequestBody = !!requestBody && requestBody.byteLength > 0 &&
@@ -1286,8 +1286,8 @@ class ContainsFilter extends Filter {
                 ...Object.entries(
                     event.request.rawHeaders
                 ).map(([key, value]) => `${key}: ${value}`),
-                // Accessing .decoded touches a lazy promise, starting decoding:
-                event.request.body.decoded,
+                // Accessing .decodedData here starts decoding async:
+                event.request.body.decodedData,
 
                 ...(event.isSuccessfulExchange()
                     ? [
@@ -1296,8 +1296,8 @@ class ContainsFilter extends Filter {
                         ...Object.entries(
                             event.response.rawHeaders
                         ).map(([key, value]) => `${key}: ${value}`),
-                        // Accessing .decoded touches a lazy promise, starting decoding:
-                        event.response.body.decoded
+                        // Accessing .decodedData here starts decoding async:
+                        event.response.body.decodedData
                     ] : []
                 ),
 

src/model/http/caching.ts

@@ -167,7 +167,7 @@ export function explainCacheability(exchange: HttpExchange): (
     const revalidationSuggestion =
         !hasRevalidationOptions &&
         // Revalidation makes no sense without a body
-        response.body.encoded.byteLength &&
+        response.body.encodedByteLength &&
         !responseCCDirectives['immutable'] ?
         dedent`
             :suggestion: This response doesn't however include any validation headers. That

src/model/http/exchange.ts

@@ -230,12 +230,12 @@ export class HttpExchange extends HTKEventBase implements ViewableHttpExchange {
     }
 
     hasRequestBody(): this is CompletedRequest {
-        return this.isCompletedRequest() && this.request.body.encoded.byteLength > 0;
+        return this.isCompletedRequest() && this.request.body.encodedByteLength > 0;
     }
 
     hasResponseBody(): this is SuccessfulExchange {
         return this.isSuccessfulExchange() &&
-            (this.response as HtkResponse).body.encoded.byteLength > 0;
+            (this.response as HtkResponse).body.encodedByteLength > 0;
     }
 
     @observable