Web Inspector: Layout & Rendering timeline grid should show TimelineRecord parent...

https://bugs.webkit.org/show_bug.cgi?id=147468

Reviewed by Brian Burg.

Layout timeline data grid now shows record nesting for Layout and Composite events.

* UserInterface/Controllers/TimelineManager.js:
(WebInspector.TimelineManager.prototype.eventRecorded):
* UserInterface/Models/TimelineRecord.js:
(WebInspector.TimelineRecord.prototype.get parent):
(WebInspector.TimelineRecord.prototype.set parent):
Preserve timeline record parent/child relationship.

* UserInterface/Views/LayoutTimelineView.js:
(WebInspector.LayoutTimelineView):
Style change for disclosure triangle support.
(WebInspector.LayoutTimelineView.prototype._layoutTimelineRecordAdded):
Only process immediate children of the rendering frame record.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@187929 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index c8ff1e8..acd5177 100644 (file)
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -1,3 +1,25 @@
+2015-08-04  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: Layout & Rendering timeline grid should show TimelineRecord parent/child relationships
+        https://bugs.webkit.org/show_bug.cgi?id=147468
+
+        Reviewed by Brian Burg.
+
+        Layout timeline data grid now shows record nesting for Layout and Composite events.
+
+        * UserInterface/Controllers/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype.eventRecorded):
+        * UserInterface/Models/TimelineRecord.js:
+        (WebInspector.TimelineRecord.prototype.get parent):
+        (WebInspector.TimelineRecord.prototype.set parent):
+        Preserve timeline record parent/child relationship.
+
+        * UserInterface/Views/LayoutTimelineView.js:
+        (WebInspector.LayoutTimelineView):
+        Style change for disclosure triangle support.
+        (WebInspector.LayoutTimelineView.prototype._layoutTimelineRecordAdded):
+        Only process immediate children of the rendering frame record.
+
 2015-08-04  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: "No Filter Results" overlaps other UI elements when docked Inspector is small

diff --git a/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js b/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js
index 209b147..d92f8b3 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js
+++ b/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js
@@ -196,6 +196,7 @@ WebInspector.TimelineManager = class TimelineManager extends WebInspector.Object
                 var recordPayload = recordPayloads[entry.index];
                 var record = this._processEvent(recordPayload, entry.parent);
                 if (record) {
+                    record.parent = entry.parentRecord;
                     records.push(record);
                     if (entry.parentRecord)
                         entry.parentRecord.children.push(record);

diff --git a/Source/WebInspectorUI/UserInterface/Models/TimelineRecord.js b/Source/WebInspectorUI/UserInterface/Models/TimelineRecord.js
index 6d24e4c..e6dab4e 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Models/TimelineRecord.js
+++ b/Source/WebInspectorUI/UserInterface/Models/TimelineRecord.js
@@ -122,6 +122,19 @@ WebInspector.TimelineRecord = class TimelineRecord extends WebInspector.Object
         return this._sourceCodeLocation;
     }
 
+    get parent()
+    {
+        return this._parent;
+    }
+
+    set parent(x)
+    {
+        if (this._parent === x)
+            return;
+
+        this._parent = x;
+    }
+
     get children()
     {
         return this._children;

diff --git a/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js
index 90e5906..ae2e8d8 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js
+++ b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js
@@ -31,7 +31,6 @@ WebInspector.LayoutTimelineView = class LayoutTimelineView extends WebInspector.
 
         console.assert(timeline.type === WebInspector.TimelineRecord.Type.Layout, timeline);
 
-        this.navigationSidebarTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
         this.navigationSidebarTreeOutline.element.classList.add("layout");
 
         var columns = {eventType: {}, location: {}, width: {}, height: {}, startTime: {}, totalTime: {}};
@@ -196,6 +195,27 @@ WebInspector.LayoutTimelineView = class LayoutTimelineView extends WebInspector.
             var dataGridNode = new WebInspector.LayoutTimelineDataGridNode(layoutTimelineRecord, this.zeroTime);
 
             this._dataGrid.addRowInSortOrder(treeElement, dataGridNode);
+
+            var stack = [{children: layoutTimelineRecord.children, parentTreeElement: treeElement, index: 0}];
+            while (stack.length) {
+                var entry = stack.lastValue;
+                if (entry.index >= entry.children.length) {
+                    stack.pop();
+                    continue;
+                }
+
+                var childRecord = entry.children[entry.index];
+                console.assert(childRecord.type === WebInspector.TimelineRecord.Type.Layout, childRecord);
+
+                var childTreeElement = new WebInspector.TimelineRecordTreeElement(childRecord, WebInspector.SourceCodeLocation.NameStyle.Short);
+                var layoutDataGridNode = new WebInspector.LayoutTimelineDataGridNode(childRecord, this.zeroTime);
+                console.assert(entry.parentTreeElement, "entry without parent!");
+                this._dataGrid.addRowInSortOrder(childTreeElement, layoutDataGridNode, entry.parentTreeElement);
+
+                if (childTreeElement && childRecord.children.length)
+                    stack.push({children: childRecord.children, parentTreeElement: childTreeElement, index: 0});
+                ++entry.index;
+            }
         }
 
         this._pendingRecords = [];
@@ -206,6 +226,10 @@ WebInspector.LayoutTimelineView = class LayoutTimelineView extends WebInspector.
         var layoutTimelineRecord = event.data.record;
         console.assert(layoutTimelineRecord instanceof WebInspector.LayoutTimelineRecord);
 
+        // Only add top-level records, to avoid processing child records multiple times.
+        if (!(layoutTimelineRecord.parent instanceof WebInspector.RenderingFrameTimelineRecord))
+            return;
+
         this._pendingRecords.push(layoutTimelineRecord);
 
         this.needsLayout();