Web Inspector: Layout sidebar in Elements tab lacks an discernable vi…

…sual 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

Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

@@ -515,6 +515,7 @@ localizedStrings["Diagonal Fractions @ Font Details Sidebar Property Value"] = "
 localizedStrings["Dimensions"] = "Dimensions";
 /* Section header for the group of CSS variables with dimensions as values */
 localizedStrings["Dimensions @ Computed style variables section"] = "Dimensions";
+localizedStrings["Disable All"] = "Disable All";
 localizedStrings["Disable Audit"] = "Disable Audit";
 localizedStrings["Disable Breakpoint"] = "Disable Breakpoint";
 localizedStrings["Disable Breakpoints"] = "Disable Breakpoints";
@@ -621,6 +622,7 @@ localizedStrings["Elements Tab Name"] = "Elements";
 localizedStrings["Emulate User Gesture @ Console"] = "Emulate User Gesture";
 /* Checkbox shown when configuring log/evaluate/probe breakpoint actions to cause it to be evaluated as though it was in response to user interaction. */
 localizedStrings["Emulate User Gesture @ breakpoint action configuration"] = "Emulate User Gesture";
+localizedStrings["Enable All"] = "Enable All";
 localizedStrings["Enable Audit"] = "Enable Audit";
 localizedStrings["Enable Breakpoint"] = "Enable Breakpoint";
 localizedStrings["Enable Breakpoints"] = "Enable Breakpoints";

Source/WebInspectorUI/UserInterface/Main.html

@@ -670,8 +670,6 @@
     <script src="Views/CPUTimelineView.js"></script>
     <script src="Views/CPUUsageCombinedView.js"></script>
     <script src="Views/CPUUsageView.js"></script>
-    <script src="Views/CSSFlexNodeOverlayListSection.js"></script>
-    <script src="Views/CSSGridNodeOverlayListSection.js"></script>
     <script src="Views/CSSStyleSheetTreeElement.js"></script>
     <script src="Views/CallFrameTreeElement.js"></script>
     <script src="Views/CallFrameView.js"></script>

Source/WebInspectorUI/UserInterface/Views/BlackboxSettingsView.css

@@ -57,6 +57,12 @@
     margin-inline: 0.5px 4px;
 }
 
+.settings-view.blackbox > p > label > input[type="checkbox"] {
+    width: 15px;
+    height: 15px;
+    margin-top: 1px;
+}
+
 .settings-view.blackbox > p > label > span {
     margin-top: 1.5px;
 }

Source/WebInspectorUI/UserInterface/Views/DetailsSection.css

@@ -188,10 +188,6 @@ body[dir=rtl] .details-section > .header::before {
     background-color: var(--background-color-intermediate);
 }
 
-.details-section > .content > .group:nth-child(even) > .row:matches(.simple:first-child > *, :not(.simple):first-child) {
-    border-top: 1px solid var(--border-color);
-}
-
 .details-section > .content > .group > .row.simple {
     display: table-row;
 }

Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.css

@@ -27,3 +27,24 @@
 .details-section:is(.layout-css-flexbox, .layout-css-grid) > .content > .group {
     display: block;
 }
+
+.details-section:is(.layout-css-flexbox, .layout-css-grid) > .content > .group > .row {
+    padding-inline: 12px 6px;
+    padding-bottom: 4px;
+}
+
+.details-section:is(.layout-css-flexbox, .layout-css-grid) > .content > .group > .row.empty {
+    padding-top: 4px;
+}
+
+.details-section:is(.layout-css-flexbox, .layout-css-grid) > .content .settings-group > .title {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--text-color)
+}
+
+.details-section:is(.layout-css-flexbox, .layout-css-grid) > .content .setting-editor input[type="checkbox"] {
+    margin-inline-end: 0;
+}

Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.js

@@ -66,18 +66,42 @@ WI.LayoutDetailsSidebarPanel = class LayoutDetailsSidebarPanel extends WI.DOMDet
 
     initialLayout()
     {
-        this._gridDetailsSectionRow = new WI.DetailsSectionRow(WI.UIString("No CSS Grid Containers", "No CSS Grid Containers @ Layout Details Sidebar Panel", "Message shown when there are no CSS Grid containers on the inspected page."));
-        let gridGroup = new WI.DetailsSectionGroup([this._gridDetailsSectionRow]);
-        let gridDetailsSection = new WI.DetailsSection("layout-css-grid", WI.UIString("Grid", "Grid @ Elements details sidebar", "CSS Grid layout section name"), [gridGroup]);
+        this._gridOptionsDetailsSectionRow = new WI.DetailsSectionRow;
+
+        let gridSettingsGroup = new WI.SettingsGroup(WI.UIString("Page Overlay Options", "Page Overlay Options @ Layout Panel Grid Section Header", "Heading for list of grid overlay options"));
+        gridSettingsGroup.addSetting(WI.settings.gridOverlayShowTrackSizes, WI.UIString("Track Sizes", "Track sizes @ Layout Panel Overlay Options", "Label for option to toggle the track sizes setting for CSS grid overlays"));
+        gridSettingsGroup.addSetting(WI.settings.gridOverlayShowLineNumbers, WI.UIString("Line Numbers", "Line numbers @ Layout Panel Overlay Options", "Label for option to toggle the line numbers setting for CSS grid overlays"));
+        gridSettingsGroup.addSetting(WI.settings.gridOverlayShowLineNames, WI.UIString("Line Names", "Line names @ Layout Panel Overlay Options", "Label for option to toggle the line names setting for CSS grid overlays"));
+        gridSettingsGroup.addSetting(WI.settings.gridOverlayShowAreaNames, WI.UIString("Area Names", "Area names @ Layout Panel Overlay Options", "Label for option to toggle the area names setting for CSS grid overlays"));
+        gridSettingsGroup.addSetting(WI.settings.gridOverlayShowExtendedGridLines, WI.UIString("Extended Grid Lines", "Show extended lines @ Layout Panel Overlay Options", "Label for option to toggle the extended lines setting for CSS grid overlays"));
+        this._gridOptionsDetailsSectionRow.element.append(gridSettingsGroup.element);
+
+        this._gridNodesDetailsSectionRow = new WI.DetailsSectionRow(WI.UIString("No CSS Grid Containers", "No CSS Grid Containers @ Layout Details Sidebar Panel", "Message shown when there are no CSS Grid containers on the inspected page."));
+
+        this._gridNodesSection = new WI.NodeOverlayListSection("grid", WI.UIString("Grid Overlays", "Page Overlays @ Layout Sidebar Section Header", "Heading for list of grid nodes"));
+
+        let gridDetailsSection = new WI.DetailsSection("layout-css-grid", WI.UIString("Grid", "Grid @ Elements details sidebar", "CSS Grid layout section name"), [
+            new WI.DetailsSectionGroup([this._gridOptionsDetailsSectionRow]),
+            new WI.DetailsSectionGroup([this._gridNodesDetailsSectionRow]),
+        ]);
         this.contentView.element.appendChild(gridDetailsSection.element);
 
-        this._gridSection = new WI.CSSGridNodeOverlayListSection;
+        this._flexOptionsDetailsSectionRow = new WI.DetailsSectionRow;
+
+        let flexSettingsGroup = new WI.SettingsGroup(WI.UIString("Page Overlay Options", "Page Overlay Options @ Layout Panel Flex Section Header", "Heading for list of flex overlay options"));
+        flexSettingsGroup.addSetting(WI.settings.flexOverlayShowOrderNumbers, WI.UIString("Order Numbers", "Order Numbers @ Layout Panel Overlay Options", "Label for option to toggle the order numbers setting for CSS flex overlays"));
+        this._flexOptionsDetailsSectionRow.element.append(flexSettingsGroup.element);
+
+        this._flexNodesDetailsSectionRow = new WI.DetailsSectionRow(WI.UIString("No CSS Flex Containers", "No CSS Flex Containers @ Layout Details Sidebar Panel", "Message shown when there are no CSS Flex containers on the inspected page."));
+
+        this._flexNodesSection = new WI.NodeOverlayListSection("flex", WI.UIString("Flexbox Overlays", "Page Overlays for Flex containers @ Layout Sidebar Section Header", "Heading for list of flex container nodes"));
 
-        this._flexDetailsSectionRow = new WI.DetailsSectionRow(WI.UIString("No CSS Flex Containers", "No CSS Flex Containers @ Layout Details Sidebar Panel", "Message shown when there are no CSS Flex containers on the inspected page."));
-        let flexDetailsSection = new WI.DetailsSection("layout-css-flexbox", WI.UIString("Flexbox", "Flexbox @ Elements details sidebar", "Flexbox layout section name"), [new WI.DetailsSectionGroup([this._flexDetailsSectionRow])]);
+        let flexDetailsSection = new WI.DetailsSection("layout-css-flexbox", WI.UIString("Flexbox", "Flexbox @ Elements details sidebar", "Flexbox layout section name"), [
+            new WI.DetailsSectionGroup([this._flexOptionsDetailsSectionRow]),
+            new WI.DetailsSectionGroup([this._flexNodesDetailsSectionRow]),
+        ]);
         this.contentView.element.appendChild(flexDetailsSection.element);
 
-        this._flexSection = new WI.CSSFlexNodeOverlayListSection;
     }
 
     layout()
@@ -87,35 +111,24 @@ WI.LayoutDetailsSidebarPanel = class LayoutDetailsSidebarPanel extends WI.DOMDet
         if (!this._gridNodeSet || !this._flexNodeSet)
             this._refreshNodeSets();
 
-        if (this._gridNodeSet.size) {
-            this._gridDetailsSectionRow.hideEmptyMessage();
-            this._gridDetailsSectionRow.element.appendChild(this._gridSection.element);
+        let showSectionIfNotEmpty = (section, row, nodeSet) => {
+            if (nodeSet.size) {
+                row.hideEmptyMessage();
+                row.element.appendChild(section.element);
 
-            if (!this._gridSection.isAttached)
-                this.addSubview(this._gridSection);
+                if (!section.isAttached)
+                    this.addSubview(section);
 
-            this._gridSection.nodeSet = this._gridNodeSet;
-        } else {
-            this._gridDetailsSectionRow.showEmptyMessage();
+                section.nodeSet = nodeSet;
+            } else {
+                row.showEmptyMessage();
 
-            if (this._gridSection.isAttached)
-                this.removeSubview(this._gridSection);
-        }
-
-        if (this._flexNodeSet.size) {
-            this._flexDetailsSectionRow.hideEmptyMessage();
-            this._flexDetailsSectionRow.element.appendChild(this._flexSection.element);
-
-            if (!this._flexSection.isAttached)
-                this.addSubview(this._flexSection);
-
-            this._flexSection.nodeSet = this._flexNodeSet;
-        } else {
-            this._flexDetailsSectionRow.showEmptyMessage();
-
-            if (this._flexSection.isAttached)
-                this.removeSubview(this._flexSection);
-        }
+                if (section.isAttached)
+                    this.removeSubview(section);
+            }
+        };
+        showSectionIfNotEmpty(this._gridNodesSection, this._gridNodesDetailsSectionRow, this._gridNodeSet);
+        showSectionIfNotEmpty(this._flexNodesSection, this._flexNodesDetailsSectionRow, this._flexNodeSet);
     }
 
     // Private

Source/WebInspectorUI/UserInterface/Views/NodeOverlayListSection.css

@@ -23,12 +23,6 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.node-overlay-list-section {
-    margin-inline: 6px;
-    margin-bottom: 4px;
-    padding-inline-start: 6px;
-}
-
 .node-overlay-list-section > .node-overlay-list {
     list-style: none;
     margin: 0;
@@ -60,19 +54,25 @@
     opacity: 0;
 }
 
-.node-overlay-list-section > .heading,
-.node-overlay-list-section > .container > .title {
+.node-overlay-list-section > h2 {
     font-size: 11px;
-    margin-top: 5px;
+    margin-top: 0;
     margin-bottom: 5px;
+    padding-top: 5px;
     font-weight: 500;
     color: var(--text-color)
 }
 
-.node-overlay-list-section > .heading > label > .toggle-all {
-    padding-inline-start: 4px;
+.node-overlay-list-section > h2 > .options {
+    float: inline-end;
+    width: 15px;
+    height: 15px;
+}
+
+.node-overlay-list-section:not(:hover) > h2 > .options {
+    display: none;
 }
 
-.node-overlay-list-section :is(.setting-editor, .node-overlay-list-item-container, .heading) input[type="checkbox"] {
+.node-overlay-list-section .node-overlay-list-item-container input[type="checkbox"] {
     margin-inline-end: 0;
 }