Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: e28ec6e1c7b9072ad40d61248d7a7931a2d97943
https://github.com/WebKit/WebKit/commit/e28ec6e1c7b9072ad40d61248d7a7931a2d97943
Author: Razvan Caliman <[email protected]>
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
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
