DevTools: Populate alt attribute in Performance Event Log

This CL sets the alt attribute of images shown within the Performance
panel Event Log based on their source URLs.

Screenshot of details panel showing image:
https://gyazo.com/ec6d3643fc657c635da5fd37b3c630bc

Bug: 963183
Change-Id: I1071611f824dd00ccadaadcbf364d66dbcf01028
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1721187
Commit-Queue: Jack Lynch <jalyn@microsoft.com>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#697813}

third_party/blink/renderer/devtools/front_end/components/ImagePreview.js

@@ -7,10 +7,11 @@ Components.ImagePreview = class {
    * @param {!SDK.Target} target
    * @param {string} originalImageURL
    * @param {boolean} showDimensions
-   * @param {!Object=} precomputedFeatures
+   * @param {!{precomputedFeatures: (!Object|undefined), imageAltText: (string|undefined)}=} options
    * @return {!Promise<?Element>}
    */
-  static build(target, originalImageURL, showDimensions, precomputedFeatures) {
+  static build(target, originalImageURL, showDimensions, options = {}) {
+    const {precomputedFeatures, imageAltText} = options;
     const resourceTreeModel = target.model(SDK.ResourceTreeModel);
     if (!resourceTreeModel)
       return Promise.resolve(/** @type {?Element} */ (null));
@@ -28,6 +29,8 @@ Components.ImagePreview = class {
     const imageElement = createElement('img');
     imageElement.addEventListener('load', buildContent, false);
     imageElement.addEventListener('error', () => fulfill(null), false);
+    if (imageAltText)
+      imageElement.alt = imageAltText;
     resource.populateImageSource(imageElement);
     return promise;
 
@@ -94,4 +97,14 @@ Components.ImagePreview = class {
       return {renderedWidth: this.width, renderedHeight: this.height, currentSrc: this.currentSrc};
     }
   }
+
+  /**
+   * @param {string} url
+   * @return {string}
+   */
+  static defaultAltTextForImageURL(url) {
+    const parsedImageURL = new Common.ParsedURL(url);
+    const imageSourceText = parsedImageURL.isValid ? parsedImageURL.displayName : ls`unknown source`;
+    return ls`Image from ${imageSourceText}`;
+  }
 };

third_party/blink/renderer/devtools/front_end/components/components_strings.grdp

@@ -6,6 +6,9 @@
   <message name="IDS_DEVTOOLS_131c97f8ba5bc0277386d660a18f13b6" desc="Text in Linkifier">
     Reveal in <ph name="DESTINATION">$1s<ex>Sources panel</ex></ph>
   </message>
+  <message name="IDS_DEVTOOLS_3b9e0551f1ed4b83f205b7f1d26dde5c" desc="Alt text description of an image's source">
+    unknown source
+  </message>
   <message name="IDS_DEVTOOLS_7f52f5f786eb8d9bf9e56ce89fb3db3a" desc="Show all link text content in JSPresentation Utils">
     Show 1 more frame
   </message>

third_party/blink/renderer/devtools/front_end/elements/ElementsTreeOutline.js

@@ -541,7 +541,7 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline {
         const node = /** @type {!Elements.ElementsTreeElement} */ (listItem.treeElement).node();
         const precomputedFeatures = await Components.ImagePreview.loadDimensionsForNode(node);
         const preview = await Components.ImagePreview.build(
-            node.domModel().target(), link[Elements.ElementsTreeElement.HrefSymbol], true, precomputedFeatures);
+            node.domModel().target(), link[Elements.ElementsTreeElement.HrefSymbol], true, {precomputedFeatures});
         if (preview)
           popover.contentElement.appendChild(preview);
         return !!preview;

third_party/blink/renderer/devtools/front_end/timeline/TimelineUIUtils.js

@@ -748,10 +748,12 @@ Timeline.TimelineUIUtils = class {
       if (typeof event[Timeline.TimelineUIUtils._previewElementSymbol] === 'undefined') {
         let previewElement = null;
         const url = TimelineModel.TimelineData.forEvent(event).url;
-        if (url)
-          previewElement = await Components.ImagePreview.build(target, url, false);
-        else if (TimelineModel.TimelineData.forEvent(event).picture)
+        if (url) {
+          previewElement = await Components.ImagePreview.build(
+              target, url, false, {imageAltText: Components.ImagePreview.defaultAltTextForImageURL(url)});
+        } else if (TimelineModel.TimelineData.forEvent(event).picture) {
           previewElement = await Timeline.TimelineUIUtils.buildPicturePreviewContent(event, target);
+        }
         event[Timeline.TimelineUIUtils._previewElementSymbol] = previewElement;
       }
 
@@ -1259,8 +1261,10 @@ Timeline.TimelineUIUtils = class {
       }
     }
 
-    if (!request.previewElement && request.url && target)
-      request.previewElement = await Components.ImagePreview.build(target, request.url, false);
+    if (!request.previewElement && request.url && target) {
+      request.previewElement = await Components.ImagePreview.build(
+          target, request.url, false, {imageAltText: Components.ImagePreview.defaultAltTextForImageURL(request.url)});
+    }
     if (request.previewElement)
       contentHelper.appendElementRow(ls`Preview`, request.previewElement);
     return contentHelper.fragment;
@@ -1503,6 +1507,7 @@ Timeline.TimelineUIUtils = class {
     container.classList.add('image-preview-container', 'vbox', 'link');
     const img = container.createChild('img');
     img.src = imageURL;
+    img.alt = Components.ImagePreview.defaultAltTextForImageURL(imageURL);
     const paintProfilerButton = container.createChild('a');
     paintProfilerButton.textContent = ls`Paint Profiler`;
     container.addEventListener(