DevTools: Add Product field in timeline event details.

third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js

Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js
index 28f3e7bb359f6daf366764b1d24ceaf8c3af734b..bf5f41fedd46e37c480ab8427d0be97eadf964ac 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js
@@ -688,51 +688,35 @@ Timeline.TimelineUIUtils = class {
    */
   static async buildTraceEventDetails(event, model, linkifier, detailed) {
     var maybeTarget = model.targetByEvent(event);
-    if (!maybeTarget) {
-      return Timeline.TimelineUIUtils._buildTraceEventDetailsSynchronously(
-          event, model, linkifier, detailed, null);
-    }
-
-    var target = /** @type {!SDK.Target} */ (maybeTarget);
-    if (typeof event[Timeline.TimelineUIUtils._previewElementSymbol] === 'undefined') {
-      var previewElement = null;
-      var url = TimelineModel.TimelineData.forEvent(event).url;
-      if (url)
-        previewElement = await Components.DOMPresentationUtils.buildImagePreviewContents(target, url, false);
-      else if (TimelineModel.TimelineData.forEvent(event).picture)
-        previewElement = await Timeline.TimelineUIUtils.buildPicturePreviewContent(event, target);
-      event[Timeline.TimelineUIUtils._previewElementSymbol] = previewElement;
-    }
+    var relatedNodesMap = null;

[allada, 2017/05/05 01:27:38]

nit: When you assign null to a variable like this closure cannot type check it
at all any more. I suggest expressing the type as nullable above it (it also
makes easier for other people to come in to change things).

[alph, 2017/05/05 21:46:41]

Done.

+    if (maybeTarget) {
+      var target = /** @type {!SDK.Target} */ (maybeTarget);
+      if (typeof event[Timeline.TimelineUIUtils._previewElementSymbol] === 'undefined') {
+        var previewElement = null;
+        var url = TimelineModel.TimelineData.forEvent(event).url;
+        if (url)
+          previewElement = await Components.DOMPresentationUtils.buildImagePreviewContents(target, url, false);
+        else if (TimelineModel.TimelineData.forEvent(event).picture)
+          previewElement = await Timeline.TimelineUIUtils.buildPicturePreviewContent(event, target);
+        event[Timeline.TimelineUIUtils._previewElementSymbol] = previewElement;
+      }
 
-    var nodeIdsToResolve = new Set();
-    var timelineData = TimelineModel.TimelineData.forEvent(event);
-    if (timelineData.backendNodeId)
-      nodeIdsToResolve.add(timelineData.backendNodeId);
-    var invalidationTrackingEvents = TimelineModel.InvalidationTracker.invalidationEventsFor(event);
-    if (invalidationTrackingEvents)
-      Timeline.TimelineUIUtils._collectInvalidationNodeIds(nodeIdsToResolve, invalidationTrackingEvents);
-    var relatedNodes = null;
-    if (nodeIdsToResolve.size) {
-      var domModel = target.model(SDK.DOMModel);
-      if (domModel) {
-        relatedNodes = await new Promise(fulfill =>
-            domModel.pushNodesByBackendIdsToFrontend(nodeIdsToResolve, fulfill));
+      var nodeIdsToResolve = new Set();

[allada, 2017/05/05 01:27:38]

nit: also here, closure only knows it's a set, but not what should be in it.

[alph, 2017/05/05 21:46:40]

Done. Though I just moved the code. ;-)

+      var timelineData = TimelineModel.TimelineData.forEvent(event);
+      if (timelineData.backendNodeId)
+        nodeIdsToResolve.add(timelineData.backendNodeId);
+      var invalidationTrackingEvents = TimelineModel.InvalidationTracker.invalidationEventsFor(event);
+      if (invalidationTrackingEvents)
+        Timeline.TimelineUIUtils._collectInvalidationNodeIds(nodeIdsToResolve, invalidationTrackingEvents);
+      if (nodeIdsToResolve.size) {
+        var domModel = target.model(SDK.DOMModel);
+        if (domModel) {
+          relatedNodesMap =
+              await new Promise(fulfill => domModel.pushNodesByBackendIdsToFrontend(nodeIdsToResolve, fulfill));
+        }
       }
     }
 
-    return Timeline.TimelineUIUtils._buildTraceEventDetailsSynchronously(
-          event, model, linkifier, detailed, relatedNodes);
-  }
-
-  /**
-   * @param {!SDK.TracingModel.Event} event
-   * @param {!TimelineModel.TimelineModel} model
-   * @param {!Components.Linkifier} linkifier
-   * @param {boolean} detailed
-   * @param {?Map<number, ?SDK.DOMNode>} relatedNodesMap
-   * @return {!DocumentFragment}
-   */
-  static _buildTraceEventDetailsSynchronously(event, model, linkifier, detailed, relatedNodesMap) {
     var recordTypes = TimelineModel.TimelineModel.RecordType;
     // This message may vary per event.name;
     var relatedNodeLabel;
@@ -744,6 +728,7 @@ Timeline.TimelineUIUtils = class {
     var eventData = event.args['data'];
     var timelineData = TimelineModel.TimelineData.forEvent(event);
     var initiator = timelineData.initiator();
+    var url = null;
 
     if (timelineData.warning)
       contentHelper.appendWarningRow(event);
@@ -785,7 +770,7 @@ Timeline.TimelineUIUtils = class {
       case recordTypes.ResourceReceiveResponse:
       case recordTypes.ResourceReceivedData:
       case recordTypes.ResourceFinish:
-        var url = timelineData.url;
+        url = timelineData.url;
         if (url)
           contentHelper.appendElementRow(Common.UIString('Resource'), Components.Linkifier.linkifyURL(url));
         if (eventData['requestMethod'])
@@ -809,7 +794,7 @@ Timeline.TimelineUIUtils = class {
         break;
       case recordTypes.CompileScript:
       case recordTypes.EvaluateScript:
-        var url = eventData && eventData['url'];
+        url = eventData && eventData['url'];
         if (url) {
           contentHelper.appendLocationRow(
               Common.UIString('Script'), url, eventData['lineNumber'], eventData['columnNumber']);
@@ -834,13 +819,12 @@ Timeline.TimelineUIUtils = class {
       case recordTypes.ResizeImage:
       case recordTypes.DrawLazyPixelRef:
         relatedNodeLabel = Common.UIString('Owner Element');
-        if (timelineData.url) {
-          contentHelper.appendElementRow(
-              Common.UIString('Image URL'), Components.Linkifier.linkifyURL(timelineData.url));
-        }
+        url = timelineData.url;
+        if (url)
+          contentHelper.appendElementRow(Common.UIString('Image URL'), Components.Linkifier.linkifyURL(url));
         break;
       case recordTypes.ParseAuthorStyleSheet:
-        var url = eventData['styleSheetUrl'];
+        url = eventData['styleSheetUrl'];
         if (url)
           contentHelper.appendElementRow(Common.UIString('Stylesheet URL'), Components.Linkifier.linkifyURL(url));
         break;
@@ -879,9 +863,9 @@ Timeline.TimelineUIUtils = class {
         break;
       case recordTypes.ParseHTML:
         var beginData = event.args['beginData'];
-        var url = beginData['url'];
         var startLine = beginData['startLine'] - 1;
         var endLine = event.args['endData'] ? event.args['endData']['endLine'] - 1 : undefined;
+        url = beginData['url'];
         if (url)
           contentHelper.appendLocationRange(Common.UIString('Range'), url, startLine, endLine);
         break;
@@ -908,6 +892,8 @@ Timeline.TimelineUIUtils = class {
         break;
     }
 
+    await Timeline.TimelineUIUtils._appendProductToDetails(contentHelper, url || eventData && eventData['url']);
+
     if (timelineData.timeWaitingForMainThread) {
       contentHelper.appendTextRow(
           Common.UIString('Time Waiting for Main Thread'),
@@ -943,6 +929,23 @@ Timeline.TimelineUIUtils = class {
   }
 
   /**
+   * @param {!Timeline.TimelineDetailsContentHelper} contentHelper
+   * @param {?string} url
+   * @return {!Promise}
+   */
+  static async _appendProductToDetails(contentHelper, url) {
+    var parsedURL = url && url.asParsedURL();
+    if (!parsedURL)

[caseq, 2017/05/05 00:58:15]

_maybeAppend... then?

[alph, 2017/05/05 21:46:40]

Done.

+      return;
+    var productNode = createElement('div');
+    contentHelper.appendElementRow(Common.UIString('Product'), productNode);
+    var registry = await ProductRegistry.instance();
+    var name = registry.nameForUrl(parsedURL);

[allada, 2017/05/05 01:27:38]

If we do not find a name here, shouldn't we have not created/appended a
productNode?

[alph, 2017/05/05 21:46:40]

Done.

+    if (name)
+      productNode.textContent = name;
+  }
+
+  /**
    * @param {!TimelineModel.TimelineModel} model
    * @param {number} startTime
    * @param {number} endTime
@@ -1081,7 +1084,7 @@ Timeline.TimelineUIUtils = class {
    * @param {!Components.Linkifier} linkifier
    * @return {!Promise<!DocumentFragment>}
    */
-  static buildNetworkRequestDetails(request, model, linkifier) {
+  static async buildNetworkRequestDetails(request, model, linkifier) {
     const target = model.targetByEvent(request.children[0]);
     const contentHelper = new Timeline.TimelineDetailsContentHelper(target, linkifier);
     const category = Timeline.TimelineUIUtils.networkRequestCategory(request);
@@ -1091,6 +1094,7 @@ Timeline.TimelineUIUtils = class {
     const duration = request.endTime - (request.startTime || -Infinity);
     if (request.url)
       contentHelper.appendElementRow(Common.UIString('URL'), Components.Linkifier.linkifyURL(request.url));
+    await Timeline.TimelineUIUtils._appendProductToDetails(contentHelper, request.url);
     if (isFinite(duration))
       contentHelper.appendTextRow(Common.UIString('Duration'), Number.millisToString(duration, true));
     if (request.requestMethod)
@@ -1131,37 +1135,14 @@ Timeline.TimelineUIUtils = class {
       }
     }
 
-    /**
-     * @param {function(?Element)} fulfill
-     */
-    function action(fulfill) {
-      Components.DOMPresentationUtils
-          .buildImagePreviewContents(
-              /** @type {!SDK.Target} */ (target), request.url, false)
-          .then(saveImage);
-      /**
-       * @param {?Element} element
-       */
-      function saveImage(element) {
-        request.previewElement = element;
-        fulfill(request.previewElement);
-      }
+    var preview = request.previewElement;

[caseq, 2017/05/05 00:58:15]

let's drop preview and inline request.previewElement everywhere.

[alph, 2017/05/05 21:46:40]

Done.

+    if (!preview && request.url && target) {
+      preview = await Components.DOMPresentationUtils.buildImagePreviewContents(target, request.url, false);
+      request.previewElement = preview;
     }
-    var previewPromise;
-    if (request.previewElement)
-      previewPromise = Promise.resolve(request.previewElement);
-    else
-      previewPromise = request.url && target ? new Promise(action) : Promise.resolve(null);
-    /**
-     * @param {?Element} element
-     * @return {!DocumentFragment}
-     */
-    function appendPreview(element) {
-      if (element)
-        contentHelper.appendElementRow(Common.UIString('Preview'), request.previewElement);
-      return contentHelper.fragment;
-    }
-    return previewPromise.then(appendPreview);
+    if (preview)
+      contentHelper.appendElementRow(Common.UIString('Preview'), request.previewElement);
+    return contentHelper.fragment;
   }
 
   /**