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.

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

diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index ca71d5a..0752af8 100644 (file)
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -1,5 +1,25 @@
 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
         https://bugs.webkit.org/show_bug.cgi?id=148672
 

diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
index 8b497dc..a1b9665 100644 (file)
Binary files a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js and b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js differ

diff --git a/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.css
index d5c6f96..389fa60 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.css
+++ b/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;
 }

diff --git a/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js
index 435ea17..c9f97eb 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js
+++ b/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);