[RPP] Only render images with data url from resource model

The `ImageRef` component was rendering URLs from the trace, which is a
potential security issue given the devtools page has access to CDP.
Instead, only render images if found in the active resource tree model,
and use the data url given by `Page.getResourceContent`.

See: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6532244/comment/c8aa4c3c_edff91ce/

Bug: 416449602
Change-Id: I3bc3c6f48456a13dc7dd10d0dfb66f3570c3c406
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6605300
Commit-Queue: Connor Clark <cjamcl@chromium.org>
Reviewed-by: Paul Irish <paulirish@chromium.org>

Author: Connor Clark

front_end/models/trace/insights/DocumentLatency.ts

@@ -42,12 +42,12 @@ export const UIStrings = {
    * @description Text to tell the user that the time starting the document request to when the server started responding is acceptable.
    * @example {600 ms} PH1
    */
-  passingServerResponseTime: 'Server responds quickly (observed {PH1}) ',
+  passingServerResponseTime: 'Server responds quickly (observed {PH1})',
   /**
    * @description Text to tell the user that the time starting the document request to when the server started responding is not acceptable.
    * @example {601 ms} PH1
    */
-  failedServerResponseTime: 'Server responded slowly (observed {PH1}) ',
+  failedServerResponseTime: 'Server responded slowly (observed {PH1})',
   /**
    * @description Text to tell the user that text compression (like gzip) was applied.
    */

front_end/panels/timeline/components/insights/EventRef.ts

@@ -5,6 +5,7 @@
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
+import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -81,27 +82,57 @@ class ImageRef extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #request?: Trace.Types.Events.SyntheticNetworkRequest;
+  #imageDataUrl?: string|null;
 
   set request(request: Trace.Types.Events.SyntheticNetworkRequest) {
     this.#request = request;
+    this.#imageDataUrl = undefined;
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 
-  #render(): void {
+  /**
+   * This only returns a data url if the resource is currently present from the active
+   * inspected page.
+   */
+  async #getOrCreateImageDataUrl(): Promise<string|null> {
+    if (!this.#request) {
+      return null;
+    }
+
+    if (this.#imageDataUrl !== undefined) {
+      return this.#imageDataUrl;
+    }
+
+    const originalUrl = this.#request.args.data.url as Platform.DevToolsPath.UrlString;
+    const resource = SDK.ResourceTreeModel.ResourceTreeModel.resourceForURL(originalUrl);
+    if (!resource) {
+      this.#imageDataUrl = null;
+      return this.#imageDataUrl;
+    }
+
+    const content = await resource.requestContentData();
+    if ('error' in content) {
+      this.#imageDataUrl = null;
+      return this.#imageDataUrl;
+    }
+
+    this.#imageDataUrl = content.asDataUrl();
+    return this.#imageDataUrl;
+  }
+
+  async #render(): Promise<void> {
     if (!this.#request) {
       return;
     }
 
+    const url = this.#request.args.data.mimeType.includes('image') ? await this.#getOrCreateImageDataUrl() : null;
+    const img = url ? html`<img src=${url} class="element-img"/>` : Lit.nothing;
+
     // clang-format off
     Lit.render(html`
       <style>${baseInsightComponentStyles}</style>
       <div class="image-ref">
-        ${this.#request.args.data.mimeType.includes('image') ? html`
-          <img
-            class="element-img"
-            src=${this.#request.args.data.url}
-            @error=${handleBadImage}/>
-        `: Lit.nothing}
+        ${img}
         <span class="element-img-details">
           ${eventRef(this.#request)}
           <span class="element-img-details-size">${
@@ -114,11 +145,6 @@ class ImageRef extends HTMLElement {
   }
 }
 
-function handleBadImage(event: Event): void {
-  const img = event.target as HTMLImageElement;
-  img.style.display = 'none';
-}
-
 export function imageRef(request: Trace.Types.Events.SyntheticNetworkRequest): Lit.TemplateResult {
   return html`
     <devtools-performance-image-ref