…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