DevTools: Highlight DOM node on hover in flamechart.

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

 /*
  * Copyright (C) 2014 Google 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.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 476 matching lines @@
     if (warning) {
       warning.classList.add('timeline-info-warning');
       contents.appendChild(warning);
     }
     return element;
   }
 
   /**
    * @override
    * @param {number} entryIndex
+   */
+  highlightEntry(entryIndex) {
+    this._highlightEntry(entryIndex);

[caseq, 2017/02/25 01:53:57]

let's avoid races of calls to highlightEntry() vs. async completion of
_highlightEntry()

[alph, 2017/02/25 01:58:57]

Done.

+  }
+
+  /**
+   * @param {number} entryIndex
+   */
+  async _highlightEntry(entryIndex) {
+    SDK.DOMModel.hideDOMNodeHighlight();
+    var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]);
+    if (!event)
+      return;

[caseq, 2017/02/25 01:53:57]

moved as much as possible to the sync part?

[alph, 2017/02/25 01:58:57]

Done.

+    var target = this._model.targetByEvent(event);
+    if (!target)
+      return;
+    var timelineData = TimelineModel.TimelineData.forEvent(event);
+    var backendNodeId = timelineData.backendNodeId;
+    if (!backendNodeId)
+      return;
+    var domModel = SDK.DOMModel.fromTarget(/** @type {!SDK.Target} */ (target));
+    if (!domModel)
+      return;
+    var nodes = await new Promise(fulfill =>

[caseq, 2017/02/25 01:53:57]

new SDK.DeferredDOMNode(target, backendNodeId).highlight()

[alph, 2017/02/25 01:58:57]

Done.

+        domModel.pushNodesByBackendIdsToFrontend(new Set([backendNodeId]), fulfill));
+    var node = nodes.get(backendNodeId);
+    if (node)
+      node.highlight();
+  }
+
+  /**
+   * @override
+   * @param {number} entryIndex
    * @return {string}
    */
   entryColor(entryIndex) {
     // This is not annotated due to closure compiler failure to properly infer cache container's template type.
     function patchColorAndCache(cache, key, lookupColor) {
       var color = cache.get(key);
       if (color)
         return color;
       var parsedColor = Common.Color.parse(lookupColor(key));
       color = parsedColor.setAlpha(0.7).asString(Common.Color.Format.RGBA) || '';
@@ skipping 288 matching lines @@
    * @return {boolean}
    */
   _isVisible(event) {
     return this._filters.every(function(filter) {
       return filter.accept(event);
     });
   }
 };
 
 Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs = 0.001;