Skip to content
Permalink
Browse files
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
  • Loading branch information
dcrousso committed Sep 19, 2022
1 parent 23c03d7 commit bc5033fed4cfe5d60ce3a3bc0a9d48edb68d574a
Show file tree
Hide file tree
Showing 13 changed files with 117 additions and 217 deletions.
@@ -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";
@@ -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>
@@ -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;
}

This file was deleted.

This file was deleted.

@@ -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;
}
@@ -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;
}
@@ -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
@@ -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;
}

0 comments on commit bc5033f

Please sign in to comment.