Web Inspector: Show layout/paint pixel area in the Rendering Frames t…

…ree outline

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

Reviewed by Brian Burg.

* Localizations/en.lproj/localizedStrings.js:
New UI string.

* UserInterface/Views/RenderingFrameTimelineView.css:
(.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.rendering-frame .item:not(.paint-record):not(.layout-record) .subtitle):
(.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.rendering-frame .item .subtitle): Deleted.
Show subtitles for layout and paint records only. We still want to hide script record subtitles,
since that information is already in the 'Location' column.

* UserInterface/Views/RenderingFrameTimelineView.js:
(WebInspector.RenderingFrameTimelineView.prototype._processPendingRecords):
Add tree element subtitle for LayoutTimelineRecords that specify width and height.


Canonical link: https://commits.webkit.org/166814@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@189236 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog

@@ -1,3 +1,23 @@
+2015-09-01  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: Show layout/paint pixel area in the Rendering Frames tree outline
+        https://bugs.webkit.org/show_bug.cgi?id=148674
+
+        Reviewed by Brian Burg.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        New UI string.
+
+        * UserInterface/Views/RenderingFrameTimelineView.css:
+        (.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.rendering-frame .item:not(.paint-record):not(.layout-record) .subtitle):
+        (.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.rendering-frame .item .subtitle): Deleted.
+        Show subtitles for layout and paint records only. We still want to hide script record subtitles,
+        since that information is already in the 'Location' column.
+
+        * UserInterface/Views/RenderingFrameTimelineView.js:
+        (WebInspector.RenderingFrameTimelineView.prototype._processPendingRecords):
+        Add tree element subtitle for LayoutTimelineRecords that specify width and height.
+
 2015-09-01  Matt Baker  <mattbaker@apple.com>
 
         Web Inspector: Reorder columns in the Rendering Frames data grid by importance

Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.css

@@ -31,6 +31,6 @@
     bottom: 0;
 }
 
-.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.rendering-frame .item .subtitle {
+.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .navigation-sidebar-panel-content-tree-outline.rendering-frame .item:not(.paint-record):not(.layout-record) .subtitle {
     display: none;
 }

Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js

@@ -271,6 +271,11 @@ WebInspector.RenderingFrameTimelineView = class RenderingFrameTimelineView exten
                 var childTreeElement = null;
                 if (childRecord.type === WebInspector.TimelineRecord.Type.Layout) {
                     childTreeElement = new WebInspector.TimelineRecordTreeElement(childRecord, WebInspector.SourceCodeLocation.NameStyle.Short);
+                    if (childRecord.width && childRecord.height) {
+                        let subtitle = document.createElement("span");
+                        subtitle.textContent = WebInspector.UIString("%d \u2A09 %d").format(childRecord.width, childRecord.height);
+                        childTreeElement.subtitle = subtitle;
+                    }
                     var layoutDataGridNode = new WebInspector.LayoutTimelineDataGridNode(childRecord, this.zeroTime);
 
                     this._dataGrid.addRowInSortOrder(childTreeElement, layoutDataGridNode, entry.parentTreeElement);