[RPP] Fix network request details layout

Margins and spacing between items was off.
Before: https://screenshot.googleplex.com/3Rz759PHWKxbFqp
After: https://screenshot.googleplex.com/3xTGaLkE2E5dqco

Fixed: 406990013
Change-Id: I5f7ec7f1bb2ad5b5a2fab0acf5fc6eae3edfedb8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6404821
Commit-Queue: Jack Franklin <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>

Author: and-oli

front_end/panels/timeline/TimelineDetailsView.test.ts

@@ -53,7 +53,8 @@ describeWithEnvironment('TimelineDetailsView', function() {
 
     const content = detailsContentElement.firstElementChild?.shadowRoot;
     assert(content);
-    assert.lengthOf(content.querySelectorAll('div.network-request-details-row'), 11);
+    assert.lengthOf(content.querySelectorAll('div.network-request-details-row'), 9);
+    assert.lengthOf(content.querySelectorAll('div.network-request-details-item'), 2);
     assert.lengthOf(content.querySelectorAll('devtools-related-insight-chips'), 1);
   });
 

front_end/panels/timeline/components/NetworkRequestDetails.test.ts

@@ -118,14 +118,17 @@ describeWithMockConnection('NetworkRequestDetails', () => {
 });
 
 function getRowDataForDetailsElement(details: ShadowRoot) {
-  return Array.from(details.querySelectorAll<HTMLDivElement>('.network-request-details-row, .timing-rows')).map(row => {
-    const title = row.querySelector<HTMLDivElement>('.title')?.innerText;
-    let value = cleanTextContent(row.querySelector<HTMLDivElement>('.value')?.innerText || '');
-    if (!title && !value) {
-      value = cleanTextContent(row.innerText || '');
-    }
-    return {title, value};
-  });
+  return Array
+      .from(details.querySelectorAll<HTMLDivElement>(
+          '.network-request-details-item, .network-request-details-row, .timing-rows'))
+      .map(row => {
+        const title = row.querySelector<HTMLDivElement>('.title')?.innerText;
+        let value = cleanTextContent(row.querySelector<HTMLDivElement>('.value')?.innerText || '');
+        if (!title && !value) {
+          value = cleanTextContent(row.innerText || '');
+        }
+        return {title, value};
+      });
 }
 
 function getServerTimingDataDetailsElement(details: ShadowRoot) {

front_end/panels/timeline/components/NetworkRequestDetails.ts

@@ -244,10 +244,10 @@ export class NetworkRequestDetails extends HTMLElement {
         </devtools-request-link-icon>
       `;
       // clang-format on
-      return html`<div class="network-request-details-row network-request-url">${urlElement}</div>`;
+      return html`<div class="network-request-details-item">${urlElement}</div>`;
     }
 
-    return html`<div class="network-request-details-row network-request-url">${linkifiedURL}</div>`;
+    return html`<div class="network-request-details-item">${linkifiedURL}</div>`;
   }
 
   #renderFromCache(): Lit.TemplateResult|null {
@@ -298,33 +298,33 @@ export class NetworkRequestDetails extends HTMLElement {
     }
 
     const hasStackTrace = Trace.Helpers.Trace.stackTraceInEvent(this.#networkRequest) !== null;
-
+    let link: HTMLElement|null = null;
     // If we have a stack trace, that is the most reliable way to get the initiator data and display a link to the source.
     if (hasStackTrace) {
       const topFrame = Trace.Helpers.Trace.getZeroIndexedStackTraceForEvent(this.#networkRequest)?.at(0) ?? null;
       if (topFrame) {
-        const link = this.#linkifier.maybeLinkifyConsoleCallFrame(
+        link = this.#linkifier.maybeLinkifyConsoleCallFrame(
             this.#maybeTarget, topFrame, {tabStop: true, inlineFrameIndex: 0, showColumnNumber: true});
-        if (link) {
-          return this.#renderRow(i18nString(UIStrings.initiatedBy), link);
-        }
       }
     }
     // If we do not, we can see if the network handler found an initiator and try to link by URL
     const initiator = this.#parsedTrace?.NetworkRequests.eventToInitiator.get(this.#networkRequest);
     if (initiator) {
-      const link = this.#linkifier.maybeLinkifyScriptLocation(
+      link = this.#linkifier.maybeLinkifyScriptLocation(
           this.#maybeTarget,
           null,  // this would be the scriptId, but we don't have one. The linkifier will fallback to using the URL.
           initiator.args.data.url as Platform.DevToolsPath.UrlString,
           undefined,  // line number
       );
-      if (link) {
-        return this.#renderRow(i18nString(UIStrings.initiatedBy), link);
-      }
     }
 
-    return null;
+    if (!link) {
+      return null;
+    }
+    return html`
+      <div class="network-request-details-item"><div class="title">${
+        i18nString(UIStrings.initiatedBy)}</div><div class="value">${link}</div></div>
+    `;
   }
 
   #renderBlockingRow(): Lit.TemplateResult|null {
@@ -368,7 +368,7 @@ export class NetworkRequestDetails extends HTMLElement {
 
     const requestPreviewElement = this.#requestPreviewElements.get(this.#networkRequest);
     if (requestPreviewElement) {
-      return html`<div class="network-request-details-row">${requestPreviewElement}</div>`;
+      return html`<div class="network-request-details-item">${requestPreviewElement}</div>`;
     }
     return null;
   }

front_end/panels/timeline/components/networkRequestDetails.css

@@ -50,7 +50,7 @@
   gap: 0;
 }
 
-.network-request-details-col, .network-request-url {
+.network-request-details-item, .network-request-details-col {
   padding: 5px 10px;
 }