1. Create a timeline recording with paint records. 2. Select the Layout timeline. 3. Select a paint record by clicking its row in the table (i.e., in <N>px cell). The relevant rect should be highlighted on the page overlay. However, if instead you click on the TreeOutline row (to the left of the record) nothing is highlighted.
<rdar://problem/19106598>
We used to do this before the new timeline redesign.
Oh, I see. We do for the DataGrid but not for the sidebar.
Actually I think showing the highlight only once you've selected a record is cumbersome. How about just hovering over an element in the datagrid, like hovering elements in the DOM Tree? That way you can very quickly get highlights and see where the paint is associated with. We could retitle this: "Cumbersome to view paint highlights, should be easier". We could make it so hovering in the sidebar triggers the highlight too, but I think if hovering in the data grid is enabled it easy enough. Patch attached, thoughts?
Created attachment 242588 [details] [PATCH] Proposed Fix - Making Hovering DataGrid show Paint Highlight Rects
Created attachment 242600 [details] [PATCH] Proposed Fix Give this a try. Is it too spammy?
Comment on attachment 242600 [details] [PATCH] Proposed Fix View in context: https://bugs.webkit.org/attachment.cgi?id=242600&action=review > Source/WebInspectorUI/UserInterface/Views/TreeOutline.js:373 > +} Nit: missing semicolon.
Comment on attachment 242600 [details] [PATCH] Proposed Fix View in context: https://bugs.webkit.org/attachment.cgi?id=242600&action=review r=me It doesn't look too spammy to me. In fact, it's kind of hard to follow the hovered row. Is there a way to add a table row hover highlight within the current design language? > Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js:279 > + const contentColor = {r: 111, g: 168, b: 220, a: 0.66}; (Aside: I'm surprised WebInspector.Color doesn't have a .toProtocol() method) > Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js:290 > + var rect = record.rect; Nit: Could we put this case first and avoid detecting DOMAgent.highlightQuad? > Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js:300 > + this._showingHighlight = false; Nit: I would switch these lines so the member lines up.
http://trac.webkit.org/changeset/178544