[webkit-changes] [WebKit/WebKit] e28ec6: Web Inspector: Fonts Panel: Details section rows f...

[Razvan Caliman - Apple]

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: e28ec6e1c7b9072ad40d61248d7a7931a2d97943
      https://github.com/WebKit/WebKit/commit/e28ec6e1c7b9072ad40d61248d7a7931a2d97943
  Author: Razvan Caliman <rcaliman at apple.com>
  Date:   2023-03-10 (Fri, 10 Mar 2023)

  Changed paths:
    M Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
    M Source/WebInspectorUI/UserInterface/Views/FontDetailsPanel.css

  Log Message:
  -----------
  Web Inspector: Fonts Panel: Details section rows for basic properties are misaligned and have inconsistent ordering
https://bugs.webkit.org/show_bug.cgi?id=253545

Reviewed by Patrick Angle.

This patch refactors the styles for `WI.DetailsSectionGroup` and `WI.DetailsSectionRow`
from using CSS table layout to using CSS Grid.

The table layout was used to ensure that labels and values align neatly in columns
regardless of the length of the each individual label.

Since introducing `WI.FontVariationDetailsSectionRow` in https://github.com/WebKit/WebKit/pull/8157
(which has a CSS Grid internal layout), the rows for the basic font properties group
are a mix of `display: table-row` and `display: grid`. The layout of this this group is inconsistent.

This patch replaces the table layout with CSS Grid and removes obsolete styles.

`WI.DetailsSectionRow` with the `.simple` CSS class modifier are used in the Fonts and Node details sidebar panels.

* Source/WebInspectorUI/UserInterface/Views/DetailsSection.css:
(.details-section > .content):
(.details-section > .content > .group):
(.details-section > .content > .group > *):
(.details-section > .content > .group:has(> .row.simple:last-of-type)):
(.details-section > .content > .group > .row.simple):
(.details-section > .content > .group > .row.simple > *):
(.details-section > .content > .group > .row.simple > .label):
(.details-section > .content > .group > .row.simple > .value):
(.details-section > .content > .group:has(.row.font-variation)): Deleted.
(.details-section > .content > .group > .row.simple:last-child > *): Deleted.
(.details-section > .content > .group > .row.simple.empty:last-child): Deleted.
(.details-section > .content > .group > .row.simple.empty:last-child > *): Deleted.
(.details-section > .content > .group > .row.simple.empty:last-child > * > *): Deleted.

Hidden descendant nodes of a hidden `display: table-cell` could still participate in layout.
No longer with CSS Grid.

* Source/WebInspectorUI/UserInterface/Views/FontDetailsPanel.css:
(.sidebar > .panel.details.style-font > .content .details-section > .content > .group > .row.simple > .label):

The `min-width: 105px` declaration ensures all labels of simple rows across diffrent groups in the Fonts panel align in English.
If a label in one group is longer than `min-width`, (ex: German), it will influence the column width just for that group.
This ensures alignment remains consistent within groups as with the previous table layout.

Canonical link: https://commits.webkit.org/261513@main