[webkit-changes] [WebKit/WebKit] bc5033: Web Inspector: Layout sidebar in Elements tab lack...

[Devin Rousso]

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: bc5033fed4cfe5d60ce3a3bc0a9d48edb68d574a
      https://github.com/WebKit/WebKit/commit/bc5033fed4cfe5d60ce3a3bc0a9d48edb68d574a
  Author: Devin Rousso <drousso at apple.com>
  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