[DevTools] Audits: Fix broken DOM node revealing

Bug: lighthouse=2289
Change-Id: I600ac5dc4413a0d501bcc9ca9dafc9a754444878
Reviewed-on: https://chromium-review.googlesource.com/c/1337285Reviewed-by: Paul Irish <paulirish@chromium.org>
Reviewed-by: Erik Luo <luoe@chromium.org>
Commit-Queue: Paul Irish <paulirish@chromium.org>
Commit-Queue: Connor Clark <cjamcl@google.com>
Cr-Commit-Position: refs/heads/master@{#611427}

third_party/blink/renderer/devtools/front_end/audits2/Audits2Panel.js

@@ -137,9 +137,7 @@ Audits2.Audits2Panel = class extends UI.Panel {
     const reportContainer = this._auditResultsElement.createChild('div', 'lh-vars lh-root lh-devtools');
 
     const dom = new DOM(/** @type {!Document} */ (this._auditResultsElement.ownerDocument));
-    const detailsRenderer = new Audits2.DetailsRenderer(dom);
-    const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
-    const renderer = new Audits2.ReportRenderer(dom, categoryRenderer);
+    const renderer = new Audits2.ReportRenderer(dom);
 
     const templatesHTML = Runtime.cachedResources['audits2/lighthouse/templates.html'];
     const templatesDOM = new DOMParser().parseFromString(templatesHTML, 'text/html');
@@ -149,6 +147,7 @@ Audits2.Audits2Panel = class extends UI.Panel {
     renderer.setTemplateContext(templatesDOM);
     const el = renderer.renderReport(lighthouseResult, reportContainer);
     Audits2.ReportRenderer.addViewTraceButton(el, artifacts);
+    Audits2.ReportRenderer.linkifyNodeDetails(el);
 
     this._cachedRenderedReports.set(lighthouseResult, reportContainer);
   }

third_party/blink/renderer/devtools/front_end/audits2/Audits2ReportRenderer.js

@@ -25,66 +25,44 @@ Audits2.ReportRenderer = class extends ReportRenderer {
       Timeline.TimelinePanel.instance().loadFromEvents(defaultPassTrace.traceEvents);
     }
   }
-};
 
-class ReportUIFeatures {
   /**
-   * @param {!ReportRenderer.ReportJSON} report
+   * @param {!Element} el
    */
-  initFeatures(report) {
-  }
-}
-
-
-Audits2.DetailsRenderer = class extends DetailsRenderer {
-  /**
-   * @param {!DOM} dom
-   */
-  constructor(dom) {
-    super(dom);
-    this._onLoadPromise = null;
-  }
-
-  /**
-   * @override
-   * @param {!DetailsRenderer.NodeDetailsJSON} item
-   * @return {!Element}
-   */
-  renderNode(item) {
-    const element = super.renderNode(item);
-    this._replaceWithDeferredNodeBlock(element, item);
-    return element;
-  }
-
-  /**
-   * @param {!Element} origElement
-   * @param {!DetailsRenderer.NodeDetailsJSON} detailsItem
-   */
-  async _replaceWithDeferredNodeBlock(origElement, detailsItem) {
+  static async linkifyNodeDetails(el) {
     const mainTarget = SDK.targetManager.mainTarget();
-    if (!this._onLoadPromise) {
-      const resourceTreeModel = mainTarget.model(SDK.ResourceTreeModel);
-      this._onLoadPromise = resourceTreeModel.once(SDK.ResourceTreeModel.Events.Load);
-    }
-
-    await this._onLoadPromise;
+    const resourceTreeModel = mainTarget.model(SDK.ResourceTreeModel);
+    await resourceTreeModel.once(SDK.ResourceTreeModel.Events.Load);
 
     const domModel = mainTarget.model(SDK.DOMModel);
-    if (!detailsItem.path)
-      return;
 
-    const nodeId = await domModel.pushNodeByPathToFrontend(detailsItem.path);
+    for (const origElement of el.getElementsByClassName('lh-node')) {
+      /** @type {!DetailsRenderer.NodeDetailsJSON} */
+      const detailsItem = origElement.dataset;
+      if (!detailsItem.path)
+        return;
 
-    if (!nodeId)
-      return;
-    const node = domModel.nodeForId(nodeId);
-    if (!node)
-      return;
+      const nodeId = await domModel.pushNodeByPathToFrontend(detailsItem.path);
 
-    const element =
-        await Common.Linkifier.linkify(node, /** @type {!Common.Linkifier.Options} */ ({title: detailsItem.snippet}));
-    origElement.title = '';
-    origElement.textContent = '';
-    origElement.appendChild(element);
+      if (!nodeId)
+        return;
+      const node = domModel.nodeForId(nodeId);
+      if (!node)
+        return;
+
+      const element =
+          await Common.Linkifier.linkify(node, /** @type {!Common.Linkifier.Options} */ ({title: detailsItem.snippet}));
+      origElement.title = '';
+      origElement.textContent = '';
+      origElement.appendChild(element);
+    }
   }
 };
+
+class ReportUIFeatures {
+  /**
+   * @param {!ReportRenderer.ReportJSON} report
+   */
+  initFeatures(report) {
+  }
+}