Add redirect information to NetworkRequestDetails (and tooltip).

Fixed: 402353313
Change-Id: I0be2e5e849bfc3e3425e5b3dbdbf4b5ceff846b3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6530424
Reviewed-by: Nancy Li <nancyly@chromium.org>
Commit-Queue: Finnur Thorarinsson <finnur@chromium.org>

Author: finnurbreki

front_end/panels/timeline/components/NetworkRequestDetails.ts

@@ -373,6 +373,8 @@ export class NetworkRequestDetails extends HTMLElement {
     }
     const networkData = this.#networkRequest.args.data;
 
+    const redirectsHtml = NetworkRequestTooltip.renderRedirects(this.#networkRequest);
+
     // clang-format off
     const output = html`
       <style>${networkRequestDetailsStyles}</style>
@@ -400,6 +402,12 @@ export class NetworkRequestDetails extends HTMLElement {
             </div>
           </div>
           ${this.#renderServerTimings()}
+          ${redirectsHtml ? html `
+            <div class="column-divider"></div>
+            <div class="network-request-details-col">
+              ${redirectsHtml}
+            </div>
+          ` : Lit.nothing}
         </div>
         ${this.#renderInitiatedBy()}
       </div>

front_end/panels/timeline/components/NetworkRequestTooltip.ts

@@ -48,6 +48,10 @@ const UIStrings = {
    *@description Text that refers to a network request is render blocking
    */
   renderBlocking: 'Render blocking',
+  /**
+   * @description Text to refer to the list of redirects.
+   */
+  redirects: 'Redirects',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/NetworkRequestTooltip.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -139,6 +143,27 @@ export class NetworkRequestTooltip extends HTMLElement {
     `;
   }
 
+  static renderRedirects(networkRequest: Trace.Types.Events.SyntheticNetworkRequest): Lit.TemplateResult|null {
+    const redirectRows = [];
+    if (networkRequest.args.data.redirects.length > 0) {
+      redirectRows.push(html`
+        <div class="redirects-row">
+          ${i18nString(UIStrings.redirects)}
+        </div>
+      `);
+      for (const redirect of networkRequest.args.data.redirects) {
+        redirectRows.push(html`
+          <div class="redirects-row">
+            ${redirect.url}
+          </div>
+        `);
+      }
+      return html`${redirectRows}`;
+    }
+
+    return null;
+  }
+
   #render(): void {
     if (!this.#data.networkRequest) {
       return;
@@ -150,6 +175,8 @@ export class NetworkRequestTooltip extends HTMLElement {
     const entity = (this.#data.entityMapper) ? this.#data.entityMapper.entityForEvent(this.#data.networkRequest) : null;
     const originWithEntity = TimelineUtils.Helpers.formatOriginWithEntity(url, entity, true);
 
+    const redirectsHtml = NetworkRequestTooltip.renderRedirects(this.#data.networkRequest);
+
     // clang-format off
     const output = html`
       <style>${networkRequestTooltipStyles}</style>
@@ -166,6 +193,11 @@ export class NetworkRequestTooltip extends HTMLElement {
         <div class="divider"></div>
 
         ${NetworkRequestTooltip.renderTimings(this.#data.networkRequest)}
+
+        ${redirectsHtml ? html `
+          <div class="divider"></div>
+          ${redirectsHtml}
+        ` : Lit.nothing}
       </div>
     `;
     // clang-format on

front_end/panels/timeline/components/networkRequestTooltip.css

@@ -101,3 +101,7 @@ devtools-icon.priority {
     font-weight: var(--ref-typeface-weight-medium);
   }
 }
+
+.redirects-row {
+  margin-left: 15px;
+}