Timeline: only use public interface of TimelineDetailsContentHelper in generateInvalidationsForType

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 1009 matching lines @@
         title = WebInspector.UIString("Style Invalidations");
         break;
     case WebInspector.TimelineModel.RecordType.LayoutInvalidationTracking:
         title = WebInspector.UIString("Layout Invalidations");
         break;
     default:
         title = WebInspector.UIString("Other Invalidations");
         break;
     }
 
-    var detailsNode = createElementWithClass("div", "timeline-details-view-row");
-    var titleElement = detailsNode.createChild("span", "timeline-details-view-row-title");
-    titleElement.textContent = WebInspector.UIString("%s: ", title);
-
     var invalidationsTreeOutline = new TreeOutlineInShadow();
     invalidationsTreeOutline.registerRequiredCSS("timeline/invalidationsTree.css");
-    invalidationsTreeOutline.element.classList.add("timeline-details-view-row-value", "invalidations-tree");
-    detailsNode.appendChild(invalidationsTreeOutline.element);
+    invalidationsTreeOutline.element.classList.add("invalidations-tree");
 
     var invalidationGroups = groupInvalidationsByCause(invalidations);
     invalidationGroups.forEach(function(group) {
         var groupElement = new WebInspector.TimelineUIUtils.InvalidationsGroupElement(target, relatedNodesMap, contentHelper, group);
         invalidationsTreeOutline.appendChild(groupElement);
     });
-    contentHelper.element.appendChild(detailsNode);
+    contentHelper.appendElementRow(title, invalidationsTreeOutline.element);
 
     /**
      * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
      */
     function groupInvalidationsByCause(invalidations)
     {
         var causeToInvalidationMap = {};
         for (var index = 0; index < invalidations.length; index++) {
             var invalidation = invalidations[index];
             var causeKey = "";
@@ skipping 65 matching lines @@
         var topFrame = first.cause.stackTrace && first.cause.stackTrace[0];
 
         var title = createElement("span");
         if (reason)
             title.createTextChild(WebInspector.UIString("%s for ", reason));
         else
             title.createTextChild(WebInspector.UIString("Unknown cause for "));
 
         this._appendTruncatedNodeList(title, this._invalidations);
 
         if (topFrame && this._contentHelper.linkifier()) {

[pfeldman, 2015/12/09 16:36:39]

Another misuse of the content helper - should add call stack or location
instead.

             title.createTextChild(WebInspector.UIString(". "));
             var stack = title.createChild("span", "monospace");
             stack.createChild("span").textContent = WebInspector.beautifyFunctionName(topFrame.functionName);
             stack.createChild("span").textContent = " @ ";
             stack.createChild("span").appendChild(this._contentHelper.linkifier().linkifyConsoleCallFrame(target, topFrame));
         }
 
         return title;
     },
 
     /**
      * @override
      */
     onpopulate: function()
     {
         var content = createElementWithClass("div", "content");
 
         var first = this._invalidations[0];
         if (first.cause.stackTrace) {
             var stack = content.createChild("div");
             stack.createTextChild(WebInspector.UIString("Stack trace:"));
             this._contentHelper.createChildStackTraceElement(stack, first.cause.stackTrace);

[pfeldman, 2015/12/09 16:36:39]

This is also a misuse of the helper. You should only add properties into it.

         }
 
         content.createTextChild(this._invalidations.length > 1 ? WebInspector.UIString("Nodes:") : WebInspector.UIString("Node:"));
         var nodeList = content.createChild("div", "node-list");
         var firstNode = true;
         for (var i = 0; i < this._invalidations.length; i++) {
             var invalidation = this._invalidations[i];
             var invalidationNode = this._createInvalidationNode(invalidation, true);
             if (invalidationNode) {
                 if (!firstNode)
@@ skipping 772 matching lines @@
     this._target = target;
     this.element = createElement("div");
     this.element.className = "timeline-details-view-block";
     this._monospaceValues = monospaceValues;
 }
 
 WebInspector.TimelineDetailsContentHelper.prototype = {
     /**
      * @return {?WebInspector.Linkifier}
      */
     linkifier: function()

[pfeldman, 2015/12/09 16:36:39]

It is easy to spot the abusing call sites - they all use non append* methods
such as this one

     {
         return this._linkifier;
     },
 
     /**
      * @param {string} title
      * @param {string|number|boolean} value
      */
     appendTextRow: function(title, value)
     {
@@ skipping 63 matching lines @@
 
         var rowElement = this.element.createChild("div", "timeline-details-view-row");
         rowElement.createChild("div", "timeline-details-view-row-title").textContent = title;
         this.createChildStackTraceElement(rowElement, stackTrace);
     },
 
     /**
      * @param {!Element} parentElement
      * @param {!Array.<!ConsoleAgent.CallFrame>} stackTrace
      */
     createChildStackTraceElement: function(parentElement, stackTrace)

[pfeldman, 2015/12/09 16:36:39]

And this one.

     {
         if (!this._linkifier || !this._target)
             return;
 
         var stackTraceElement = parentElement.createChild("div", "timeline-details-view-row-value timeline-details-view-row-stack-trace monospace");
 
         var callFrameElem = WebInspector.DOMPresentationUtils.buildStackTracePreviewContents(this._target, this._linkifier, stackTrace);
 
         stackTraceElement.appendChild(callFrameElem);
     },
@@ skipping 38 matching lines @@
     case warnings.V8Deopt:
         span.appendChild(WebInspector.linkifyURLAsNode("https://github.com/GoogleChrome/devtools-docs/issues/53",
             WebInspector.UIString("Not optimized"), undefined, true));
         span.createTextChild(WebInspector.UIString(": %s", eventData["deoptReason"]));
         break;
     default:
         console.assert(false, "Unhandled TimelineModel.WarningType");
     }
     return span;
 }