Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Web Inspector: At some narrow-ish widths objects and disclosure trian…
…gles in console output disappear rdar://121861970 https://bugs.webkit.org/show_bug.cgi?id=274630 Reviewed by Devin Rousso and Patrick Angle. The object display, including the disclosure triangles, are instances of ObjectTreeBaseTreeElement's subclasses, which have the `.object-tree` class name as DOM elements. This commit improves the styles of these elements by making them always `display: inline` since it worked best with the text truncating feature that the elements have. While making the `.object-tree` elements `display: inline`, the tree element was rendered incorrectly when displayed as an indexed item, with a preceding array index or a label like "key" or "value". The fix is to use a `display: flex` for the entry row instead, so the `.index-name` (the label) and the `.index-value` (containing the `.object-tree`) are always side by side instead of the `.index-value` being wrapped and shown on a second line. This commit also make it so that lines that are cut off in the object tree elements always consistently show ellipses at the end. In addition, we take out the existing unnecessary right padding on the tree elements to make the cut off point vertically aligned. * Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css: (.console-top-level-message .object-tree): Deleted. (.console-top-level-message .object-tree .object-tree): Deleted. * Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css: (.object-tree): - Always use `display: inline` for the object tree element. It works well with the text-truncating styles the element has. * Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css: (.tree-outline.object > .item): (.tree-outline.object): - Remove the unnecessary right padding. * Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.css: (.object-tree-array-index > .titles > .title): - Use `display: flex` so that the name and the value elements are always side by side instead of the value wrapped to a second line when it gets wide. (.object-tree-array-index .index-name): Deleted. (.object-tree-array-index > .titles > .title > .index-name): - Use `min-width` instead of `width` to go with the `display: flex` in the parent. - Refine the selector to make it more precise; there might be nested object trees inside, and we don't actually want this style to control those `.index-name` elements beyond the one controlled by the current object tree. (.object-tree-array-index > .titles > .title > .index-value): - Make ellipses show up for these lines. (.tree-outline .item.object-tree-array-index): - Move the `left` style into the `.object-tree-array-index > .titles > .title` selector instead so that we expand the element's viewable area rather than moving the element. (Moving the element resulted in the right edge being shifted to the left and made the cut off point not align vertically with the parent's right margin.) (.tree-outline .item.object-tree-array-index:not(.object-tree-map-entry)): - The map entry element does not need the left expansion like the array entry. Undo the `margin-left` style. (.object-tree-property + ol .object-tree-array-index): Deleted. - This is no longer required. * Source/WebInspectorUI/UserInterface/Views/LocalRemoteObjectContentView.css: (.content-view.local-remote-object): * Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css: (.popover .debugger-popover-content > .body): - The object trees within these containers were allowed to overflow horizontally and were scrollable to the right. The `display: inline` change would make them not scrollable anymore. So, we make these containers that expect the object tree child to be scrollable `display: flex`, and we must commit to doing the same to all such containers of scrollable object trees in the future. * Source/WebInspectorUI/UserInterface/Views/ObjectTreeMapEntryTreeElement.css: (.object-tree-array-index.object-tree-map-entry > .titles > .title > .index-name): - Use `min-width` instead of `width` to go with the `display: flex` in the parent. Canonical link: https://commits.webkit.org/279894@main
- Loading branch information