Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: bc5033fed4cfe5d60ce3a3bc0a9d48edb68d574a
https://github.com/WebKit/WebKit/commit/bc5033fed4cfe5d60ce3a3bc0a9d48edb68d574a
Author: Devin Rousso <[email protected]>
Date: 2022-09-19 (Mon, 19 Sep 2022)
Changed paths:
M Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
M Source/WebInspectorUI/UserInterface/Main.html
M Source/WebInspectorUI/UserInterface/Views/BlackboxSettingsView.css
R Source/WebInspectorUI/UserInterface/Views/CSSFlexNodeOverlayListSection.js
R Source/WebInspectorUI/UserInterface/Views/CSSGridNodeOverlayListSection.js
M Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
M Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.css
M Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.js
M Source/WebInspectorUI/UserInterface/Views/NodeOverlayListSection.css
M Source/WebInspectorUI/UserInterface/Views/NodeOverlayListSection.js
M Source/WebInspectorUI/UserInterface/Views/SettingsGroup.js
M Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css
M Source/WebInspectorUI/UserInterface/Views/SettingsView.js
Log Message:
-----------
Web Inspector: Layout sidebar in Elements tab lacks an discernable visual
hierarchy
https://bugs.webkit.org/show_bug.cgi?id=239525
<rdar://problem/91997854>
Reviewed by Patrick Angle.
* UserInterface/Views/LayoutDetailsSidebarPanel.js:
(WI.LayoutDetailsSidebarPanel.prototype.initialLayout):
(WI.LayoutDetailsSidebarPanel.prototype.layout):
* UserInterface/Views/LayoutDetailsSidebarPanel.css:
(.details-section:is(.layout-css-flexbox, .layout-css-grid) > .content > .group
> .row): Added.
(.details-section:is(.layout-css-flexbox, .layout-css-grid) > .content > .group
> .row.empty): Added.
(.details-section:is(.layout-css-flexbox, .layout-css-grid) > .content
.settings-group > .title): Added.
(.details-section:is(.layout-css-flexbox, .layout-css-grid) > .content
.setting-editor input[type="checkbox"]): Added.
(.node-overlay-list-section > h2 > .options): Added.
(.node-overlay-list-section:not(:hover) > h2 > .options): Added.
Move the UI for each overlay's settings to be in the panel, not in the
`WI.NodeOverlayListSection`.
* UserInterface/Views/NodeOverlayListSection.js:
(WI.NodeOverlayListSection):
(WI.NodeOverlayListSection.prototype.initialLayout):
(WI.NodeOverlayListSection.prototype.layout):
(WI.NodeOverlayListSection.prototype._handleOverlayStateChanged):
(WI.NodeOverlayListSection.prototype.get sectionLabel): Deleted.
(WI.NodeOverlayListSection.prototype._handleToggleAllCheckboxChanged): Deleted.
(WI.NodeOverlayListSection.prototype._updateToggleAllCheckbox): Deleted.
* UserInterface/Views/NodeOverlayListSection.css:
(.node-overlay-list-section > h2): Added.
(.node-overlay-list-section .node-overlay-list-item-container
input[type="checkbox"]): Added.
(.node-overlay-list-section): Deleted.
(.node-overlay-list-section > .heading,): Deleted.
(.node-overlay-list-section > .heading > label > .toggle-all): Deleted.
(.node-overlay-list-section :is(.setting-editor,
.node-overlay-list-item-container, .heading) input[type="checkbox"]): Deleted.
* UserInterface/Views/CSSFlexNodeOverlayListSection.js: Removed.
* UserInterface/Views/CSSGridNodeOverlayListSection.js: Removed.
Remove the subclasses now that the only differentiating factor between them is
the label.
Also remove the checkbox in the heading that enables/disables all overlays
because it's
visually odd (i.e. the header now lines up with it's content, instead of being
less indented)
and because there's likely little use case in enabling *all* overlays at once.
* UserInterface/Views/SettingsGroup.js:
(WI.SettingsGroup):
* UserInterface/Views/SettingsView.js:
(WI.SettingsView):
(WI.SettingsView.prototype.addCenteredContainer):
* UserInterface/Views/SettingsTabContentView.css:
(.content-view.tab.settings > .settings-view > :is(.settings-group,
.container)): Renamed from `.content-view.tab.settings > .settings-view >
.container`.
(.content-view.tab.settings > .settings-view > .container.centered): Renamed
from `.content-view.tab.settings > .settings-view > .container-centered`.
(.content-view.tab.settings > .settings-view > .settings-group > .title):
Renamed from `.content-view.tab.settings > .settings-view > .container >
.title`.
(.content-view.tab.settings > .settings-view > .settings-group >
.editor-group): Renamed from `.content-view.tab.settings > .settings-view >
.container > .editor-group`.
(.content-view.tab.settings > .settings-view > .settings-group > .editor-group
> .setting-editor): Renamed from `.content-view.tab.settings > .settings-view >
.container > .editor-group > .setting-editor`.
(.content-view.tab.settings > .settings-view > .settings-group > .editor-group
> .setting-editor:first-child > *): Renamed from `.content-view.tab.settings >
.settings-view > .container > .editor-group > .setting-editor:first-child > *`.
(.content-view.tab.settings > .settings-view > .settings-group > .editor-group
> .setting-editor input[type="checkbox"]): Renamed from
`.content-view.tab.settings > .settings-view > .container > .editor-group >
.setting-editor input[type="checkbox"]`.
(.content-view.tab.settings > .settings-view > .settings-group > .editor-group
> .setting-editor select): Renamed from `.content-view.tab.settings >
.settings-view > .container > .editor-group > .setting-editor select`.
(.content-view.tab.settings > .settings-view > .settings-group > .editor-group
> .setting-editor input[type="number"]): Renamed from
`.content-view.tab.settings > .settings-view > .container > .editor-group >
.setting-editor input[type="number"]`.
(.content-view.tab.settings > .settings-view > .settings-group > .editor-group
> .setting-editor input[type="text"]): Renamed from `.content-view.tab.settings
> .settings-view > .container > .editor-group > .setting-editor
input[type="text"]`.
Use more descriptive/specific CSS classes.
* UserInterface/Views/BlackboxSettingsView.css:
(.settings-view.blackbox > p > label > input[type="checkbox"]):
Drive-by: Make the checkbox in the Blackbox pane the same size as those in
every other pane.
* UserInterface/Views/DetailsSection.css:
(.details-section > .content > .group:nth-child(even) >
.row:matches(.simple:first-child > *, :not(.simple):first-child)): Deleted.
Drive-by: This ruleset caused the border between two `WI.DetailsSectionGroup`
to be thicker
than it should be. AFAICT no other `WI.DetailsSectionGroup` even use
this ruleset
because they contain `WI.DetailsSectionSimpleRow`.
* UserInterface/Main.html:
* Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js:
Canonical link: https://commits.webkit.org/254637@main
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
