[RPP] Update image network details

https://screenshot.googleplex.com/7x8NZPFqUT5DCu7

- Preview image is moved above request details
- Duplicate request URL & file size removed
- "Preview" label removed

Bug: 372897377
Change-Id: Ib15bc710b33df709ebb5f8334d51db3cab33f1d4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6072712
Commit-Queue: Adam Raine <[email protected]>
Reviewed-by: Paul Irish <[email protected]>

Author: Adam Raine

front_end/panels/timeline/components/NetworkRequestDetails.ts

@@ -48,10 +48,6 @@ const UIStrings = {
    *@description Text in Timeline indicating that input has not happened recently
    */
   no: 'No',
-  /**
-   *@description Text for previewing items
-   */
-  preview: 'Preview',
   /**
    *@description Text to indicate to the user they are viewing an event representing a network request.
    */
@@ -296,14 +292,15 @@ export class NetworkRequestDetails extends HTMLElement {
                      this.#networkRequest.args.data.url as Platform.DevToolsPath.UrlString),
                  precomputedFeatures: undefined,
                  align: LegacyComponents.ImagePreview.Align.START,
+                 hideFileData: true,
                }) as HTMLImageElement);
 
       this.#requestPreviewElements.set(this.#networkRequest, previewElement);
     }
 
     const requestPreviewElement = this.#requestPreviewElements.get(this.#networkRequest);
     if (requestPreviewElement) {
-      return this.#renderRow(i18nString(UIStrings.preview), requestPreviewElement);
+      return html`<div class="network-request-details-row">${requestPreviewElement}</div>`;
     }
     return null;
   }
@@ -318,6 +315,7 @@ export class NetworkRequestDetails extends HTMLElement {
     const output = html`
       ${this.#renderTitle()}
       ${this.#renderURL()}
+      ${await this.#renderPreviewElement()}
       <div class="network-request-details-cols">
         <div class="network-request-details-col">
           ${this.#renderRow(i18nString(UIStrings.requestMethod), networkData.requestMethod)}
@@ -335,7 +333,6 @@ export class NetworkRequestDetails extends HTMLElement {
         </div>
       </div>
       ${this.#renderInitiatedBy()}
-      ${await this.#renderPreviewElement()}
     `; // The last items are outside the 2 column layout because InitiatedBy can be very wide
     // clang-format on
     LitHtml.render(output, this.#shadow, {host: this});

front_end/ui/legacy/components/utils/ImagePreview.ts

@@ -76,6 +76,7 @@ export class ImagePreview {
         precomputedFeatures: (PrecomputedFeatures|undefined),
         imageAltText: (string|undefined),
         align: Align,
+        hideFileData?: boolean,
       }|undefined = {precomputedFeatures: undefined, imageAltText: undefined, align: Align.CENTER}):
       Promise<Element|null> {
     const {precomputedFeatures, imageAltText, align} = options;
@@ -158,23 +159,25 @@ export class ImagePreview {
           }
         }
 
-        // File size
-        const fileRow = container.createChild('tr', 'row');
-        fileRow.createChild('td', `title ${align}`).textContent = i18nString(UIStrings.fileSize);
-        fileRow.createChild('td', 'description').textContent = resourceSizeText;
-
-        // Current source
-        const originalRow = container.createChild('tr', 'row');
-        originalRow.createChild('td', `title ${align}`).textContent = i18nString(UIStrings.currentSource);
-
-        const sourceText = Platform.StringUtilities.trimMiddle(imageURL, 100);
-        const sourceLink =
-            (originalRow.createChild('td', 'description description-link').createChild('span', 'source-link') as
-             HTMLLinkElement);
-        sourceLink.textContent = sourceText;
-        sourceLink.addEventListener('click', () => {
-          Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(imageURL);
-        });
+        if (!options.hideFileData) {
+          // File size
+          const fileRow = container.createChild('tr', 'row');
+          fileRow.createChild('td', `title ${align}`).textContent = i18nString(UIStrings.fileSize);
+          fileRow.createChild('td', 'description').textContent = resourceSizeText;
+
+          // Current source
+          const originalRow = container.createChild('tr', 'row');
+          originalRow.createChild('td', `title ${align}`).textContent = i18nString(UIStrings.currentSource);
+
+          const sourceText = Platform.StringUtilities.trimMiddle(imageURL, 100);
+          const sourceLink =
+              (originalRow.createChild('td', 'description description-link').createChild('span', 'source-link') as
+               HTMLLinkElement);
+          sourceLink.textContent = sourceText;
+          sourceLink.addEventListener('click', () => {
+            Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(imageURL);
+          });
+        }
         resolve(shadowBoundary);
       }
     });