DevTools: Highlight DOM node on hover in flamechart.

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

Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js
index 48293ea13a4fe7ab79b542899d5df9f390743bb6..68f3e40174524a2cb7e916dab6cfb1db27c971b9 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js
@@ -494,6 +494,39 @@ Timeline.TimelineFlameChartDataProvider = class {
   /**
    * @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) {