DevTools: Add Product field in timeline event details.

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

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 670 matching lines @@
 
   /**
    * @param {!SDK.TracingModel.Event} event
    * @param {!TimelineModel.TimelineModel} model
    * @param {!Components.Linkifier} linkifier
    * @param {boolean} detailed
    * @return {!Promise<!DocumentFragment>}
    */
   static async buildTraceEventDetails(event, model, linkifier, detailed) {
     var maybeTarget = model.targetByEvent(event);
-    if (!maybeTarget) {
-      return Timeline.TimelineUIUtils._buildTraceEventDetailsSynchronously(
-          event, model, linkifier, detailed, null);
-    }
+    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 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;
 
     var contentHelper = new Timeline.TimelineDetailsContentHelper(model.targetByEvent(event), linkifier);
     contentHelper.addSection(
         Timeline.TimelineUIUtils.eventTitle(event), Timeline.TimelineUIUtils.eventStyle(event).category.color);
 
     var eventData = event.args['data'];
     var timelineData = TimelineModel.TimelineData.forEvent(event);
     var initiator = timelineData.initiator();
+    var url = null;
 
     if (timelineData.warning)
       contentHelper.appendWarningRow(event);
     if (event.name === recordTypes.JSFrame && eventData['deoptReason'])
       contentHelper.appendWarningRow(event, TimelineModel.TimelineModel.WarningType.V8Deopt);
 
     if (detailed) {
       contentHelper.appendTextRow(Common.UIString('Self Time'), Number.millisToString(event.selfTime, true));
       contentHelper.appendTextRow(Common.UIString('Total Time'), Number.millisToString(event.duration || 0, true));
     }
@@ skipping 21 matching lines @@
           contentHelper.appendTextRow(Common.UIString('Repeats'), !eventData['singleShot']);
         }
         break;
       case recordTypes.FireAnimationFrame:
         contentHelper.appendTextRow(Common.UIString('Callback ID'), eventData['id']);
         break;
       case recordTypes.ResourceSendRequest:
       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'])
           contentHelper.appendTextRow(Common.UIString('Request Method'), eventData['requestMethod']);
         if (typeof eventData['statusCode'] === 'number')
           contentHelper.appendTextRow(Common.UIString('Status Code'), eventData['statusCode']);
         if (eventData['mimeType'])
           contentHelper.appendTextRow(Common.UIString('MIME Type'), eventData['mimeType']);
         if ('priority' in eventData) {
           var priority = NetworkConditions.uiLabelForPriority(eventData['priority']);
           contentHelper.appendTextRow(Common.UIString('Priority'), priority);
         }
         if (eventData['encodedDataLength']) {
           contentHelper.appendTextRow(
               Common.UIString('Encoded Data'), Common.UIString('%d Bytes', eventData['encodedDataLength']));
         }
         if (eventData['decodedBodyLength']) {
           contentHelper.appendTextRow(
               Common.UIString('Decoded Body'), Common.UIString('%d Bytes', eventData['decodedBodyLength']));
         }
         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']);
         }
         break;
       case recordTypes.Paint:
         var clip = eventData['clip'];
         contentHelper.appendTextRow(Common.UIString('Location'), Common.UIString('(%d, %d)', clip[0], clip[1]));
         var clipWidth = Timeline.TimelineUIUtils.quadWidth(clip);
         var clipHeight = Timeline.TimelineUIUtils.quadHeight(clip);
         contentHelper.appendTextRow(Common.UIString('Dimensions'), Common.UIString('%d × %d', clipWidth, clipHeight));
       // Fall-through intended.
 
       case recordTypes.PaintSetup:
       case recordTypes.Rasterize:
       case recordTypes.ScrollLayer:
         relatedNodeLabel = Common.UIString('Layer Root');
         break;
       case recordTypes.PaintImage:
       case recordTypes.DecodeLazyPixelRef:
       case recordTypes.DecodeImage:
       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;
       case recordTypes.UpdateLayoutTree:  // We don't want to see default details.
       case recordTypes.RecalculateStyles:
         contentHelper.appendTextRow(Common.UIString('Elements Affected'), event.args['elementCount']);
         break;
       case recordTypes.Layout:
         var beginData = event.args['beginData'];
         contentHelper.appendTextRow(
@@ skipping 18 matching lines @@
         break;
       case recordTypes.EmbedderCallback:
         contentHelper.appendTextRow(Common.UIString('Callback Function'), eventData['callbackName']);
         break;
       case recordTypes.Animation:
         if (event.phase === SDK.TracingModel.Phase.NestableAsyncInstant)
           contentHelper.appendTextRow(Common.UIString('State'), eventData['state']);
         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;
 
       case recordTypes.FireIdleCallback:
         contentHelper.appendTextRow(
             Common.UIString('Allotted Time'), Number.millisToString(eventData['allottedMilliseconds']));
         contentHelper.appendTextRow(Common.UIString('Invoked by Timeout'), eventData['timedOut']);
       // Fall-through intended.
 
       case recordTypes.RequestIdleCallback:
       case recordTypes.CancelIdleCallback:
         contentHelper.appendTextRow(Common.UIString('Callback ID'), eventData['id']);
         break;
       case recordTypes.EventDispatch:
         contentHelper.appendTextRow(Common.UIString('Type'), eventData['type']);
         break;
 
       default:
         var detailsNode =
             Timeline.TimelineUIUtils.buildDetailsNodeForTraceEvent(event, model.targetByEvent(event), linkifier);
         if (detailsNode)
           contentHelper.appendElementRow(Common.UIString('Details'), detailsNode);
         break;
     }
 
+    await Timeline.TimelineUIUtils._appendProductToDetails(contentHelper, url || eventData && eventData['url']);
+
     if (timelineData.timeWaitingForMainThread) {
       contentHelper.appendTextRow(
           Common.UIString('Time Waiting for Main Thread'),
           Number.millisToString(timelineData.timeWaitingForMainThread, true));
     }
 
     var relatedNode = relatedNodesMap && relatedNodesMap.get(timelineData.backendNodeId);
     if (relatedNode) {
       contentHelper.appendElementRow(
           relatedNodeLabel || Common.UIString('Related Node'),
@@ skipping 15 matching lines @@
       contentHelper.addSection(Common.UIString('Aggregated Time'));
       var pieChart = Timeline.TimelineUIUtils.generatePieChart(
           stats, Timeline.TimelineUIUtils.eventStyle(event).category, event.selfTime);
       contentHelper.appendElementRow('', pieChart);
     }
 
     return contentHelper.fragment;
   }
 
   /**
+   * @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
    * @return {!DocumentFragment}
    */
   static buildRangeStats(model, startTime, endTime) {
     var aggregatedStats = Timeline.TimelineUIUtils.statsForTimeRange(model, startTime, endTime);
     var startOffset = startTime - model.minimumRecordTime();
     var endOffset = endTime - model.minimumRecordTime();
 
@@ skipping 118 matching lines @@
         e[Timeline.TimelineUIUtils._categoryBreakdownCacheSymbol] = Object.assign({}, aggregatedStats);
     }
   }
 
   /**
    * @param {!TimelineModel.TimelineModel.NetworkRequest} request
    * @param {!TimelineModel.TimelineModel} model
    * @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);
     const color = Timeline.TimelineUIUtils.networkCategoryColor(category);
     contentHelper.addSection(Common.UIString('Network request'), color);
 
     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)
       contentHelper.appendTextRow(Common.UIString('Request Method'), request.requestMethod);
     if (typeof request.priority === 'string') {
       const priority =
           NetworkConditions.uiLabelForPriority(/** @type {!Protocol.Network.ResourcePriority} */ (request.priority));
       contentHelper.appendTextRow(Common.UIString('Priority'), priority);
     }
     if (request.mimeType)
@@ skipping 20 matching lines @@
       if (initiator) {
         const initiatorURL = TimelineModel.TimelineData.forEvent(initiator).url;
         if (initiatorURL) {
           const link = linkifier.maybeLinkifyScriptLocation(target, null, initiatorURL, 0);
           if (link)
             contentHelper.appendElementRow(title, link);
         }
       }
     }
 
-    /**
-     * @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;
   }
 
   /**
    * @param {!Array<!Protocol.Runtime.CallFrame>} callFrames
    * @return {!Protocol.Runtime.StackTrace}
    */
   static _stackTraceFromCallFrames(callFrames) {
     return /** @type {!Protocol.Runtime.StackTrace} */ ({callFrames: callFrames});
   }
 
@@ skipping 1114 matching lines @@
    * @param {string=} warningType
    */
   appendWarningRow(event, warningType) {
     var warning = Timeline.TimelineUIUtils.eventWarning(event, warningType);
     if (warning)
       this.appendElementRow(Common.UIString('Warning'), warning, true);
   }
 };
 
 Timeline.TimelineUIUtils._categoryBreakdownCacheSymbol = Symbol('categoryBreakdownCache');