Changeset 289757 in webkit


Ignore:
Timestamp:
Feb 14, 2022 1:05:45 PM (5 months ago)
Author:
Razvan Caliman
Message:

Web Inspector: [Flexbox] List flex containers in Layout sidebar
​https://bugs.webkit.org/show_bug.cgi?id=235647
<rdar://87886241>

Reviewed by Patrick Angle.

The representation in the Layout details sidebar of the list of flex containers on the page is very similar to the one for grid containers:
a list of nodes identified by selector, with adjacent checkboxes that synchronize state with the visibility of a page overlay, interactive
color swatches to decorate the corresponding overlay, and a button to jump to the node in the DOM Tree view.

Therefore, it makes sense to generalize the code for CSS Grid and reuse it for Flexbox.

This patch extracts a generic WI.NodeOverlayListSection from WI.CSSGridNodeOverlayListSection.
This is subclassed by WI.CSSGridNodeOverlayListSection and WI.CSSFlexboxSection.
The two rely on the abstract implementations to show/hide overlays, get/set overlay colors, interrogate overlay visibility, and listen to generic overlay show events.

Which particular type of overlay is the target of each panel is determined in WI.OverlayManager
by the value of WI.DomNode.layoutContextType, either "flex" or "grid". A node cannot have more than one layout context type.

Where the subclasses differ:

  • each section has its own label (obviously).
  • the layout for WI.CSSGridNodeOverlayListSection includes a section with settings for the CSS Grid overlay.
  • Localizations/en.lproj/localizedStrings.js:

We've received feedback that the latter is more common in web developers' vocabulary when
refering to CSS grids. Adopted the same for the flexbox section empty message.

  • UserInterface/Main.html:
  • UserInterface/Views/CSSFlexNodeOverlayListSection.js: Added.

(WI.CSSFlexNodeOverlayListSection.prototype.get sectionLabel):
(WI.CSSFlexNodeOverlayListSection):

  • UserInterface/Views/CSSGridNodeOverlayListSection.js: Renamed from Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js.

(WI.CSSGridNodeOverlayListSection.prototype.get sectionLabel):
(WI.CSSGridNodeOverlayListSection.prototype.initialLayout):
(WI.CSSGridNodeOverlayListSection):
The layout of WI.CSSFlexNodeOverlayListSection includes a set of options to configure the CSS Grid overlay.

  • UserInterface/Views/LayoutDetailsSidebarPanel.css:

(.details-section:is(.layout-css-flexbox, .layout-css-grid):not(.collapsed) > .content,):
(.details-section.layout-css-grid > .content > .group > .row > .css-grid-section): Deleted.
(.details-section.layout-css-grid:not(.collapsed) > .content,): Deleted.

  • UserInterface/Views/LayoutDetailsSidebarPanel.js:

(WI.LayoutDetailsSidebarPanel):
(WI.LayoutDetailsSidebarPanel.prototype.attached):
(WI.LayoutDetailsSidebarPanel.prototype.initialLayout):
(WI.LayoutDetailsSidebarPanel.prototype.layout):
(WI.LayoutDetailsSidebarPanel.prototype._handleLayoutContextTypeChanged):
(WI.LayoutDetailsSidebarPanel.prototype._refreshNodeSets):
(WI.LayoutDetailsSidebarPanel.prototype._refreshGridNodeSet): Deleted.
Added Flexbox section to Layout details sidebar.

  • UserInterface/Views/NodeOverlayListSection.css: Renamed from Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css.

(.node-overlay-list-section):
(.node-overlay-list-section > .node-overlay-list):
(.node-overlay-list-section > .node-overlay-list > li > .node-overlay-list-item-container):
(.node-overlay-list-section > .node-overlay-list > li > .node-overlay-list-item-container > label):
(.node-overlay-list-section > .node-overlay-list > li > .node-overlay-list-item-container > label > .node-display-name):
(.node-overlay-list-section > .node-overlay-list > li > .node-overlay-list-item-container > :is(.go-to-arrow, .inline-swatch)):
(.node-overlay-list-section > .node-overlay-list > li > .node-overlay-list-item-container:not(:hover) > .go-to-arrow):
(.node-overlay-list-section > .heading,):
(.node-overlay-list-section > .heading > label > .toggle-all):
(.node-overlay-list-section :is(.setting-editor, .node-overlay-list-item-container, .heading) input[type="checkbox"]):
A full-on replacement of .css-grid-section with .node-overlay-list-section since the two sections share the same styles.

  • UserInterface/Views/NodeOverlayListSection.js: Copied from Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js.

(WI.NodeOverlayListSection):
(WI.NodeOverlayListSection.prototype.set nodeSet):
(WI.NodeOverlayListSection.prototype.get sectionLabel):
(WI.NodeOverlayListSection.prototype.attached):
(WI.NodeOverlayListSection.prototype.detached):
(WI.NodeOverlayListSection.prototype.initialLayout):
(WI.NodeOverlayListSection.prototype.layout):
(WI.NodeOverlayListSection.prototype._handleOverlayStateChanged):
(WI.NodeOverlayListSection.prototype._handleToggleAllCheckboxChanged):
(WI.NodeOverlayListSection.prototype._updateToggleAllCheckbox):
Removed all the specific implementations for CSS Grid after generalizing them into WI.NodeOverlayListSection.

Location:
trunk/Source/WebInspectorUI
Files:
1 added
5 edited
1 copied
2 moved

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r289670 r289757  
     12022-02-14  Razvan Caliman  <rcaliman@apple.com>
     2
     3        Web Inspector: [Flexbox] List flex containers in Layout sidebar
     4        https://bugs.webkit.org/show_bug.cgi?id=235647
     5        <rdar://87886241>
     6
     7        Reviewed by Patrick Angle.
     8
     9        The representation in the Layout details sidebar of the list of flex containers on the page is very similar to the one for grid containers:
     10        a list of nodes identified by selector, with adjacent checkboxes that synchronize state with the visibility of a page overlay, interactive
     11        color swatches to decorate the corresponding overlay, and a button to jump to the node in the DOM Tree view.
     12
     13        Therefore, it makes sense to generalize the code for CSS Grid and reuse it for Flexbox.
     14
     15        This patch extracts a generic `WI.NodeOverlayListSection` from `WI.CSSGridNodeOverlayListSection`.
     16        This is subclassed by `WI.CSSGridNodeOverlayListSection` and `WI.CSSFlexboxSection`.
     17        The two rely on the abstract implementations to show/hide overlays, get/set overlay colors, interrogate overlay visibility, and listen to generic overlay show events.
     18
     19        Which particular type of overlay is the target of each panel is determined in `WI.OverlayManager`
     20        by the value of `WI.DomNode.layoutContextType`, either "flex" or "grid". A node cannot have more than one layout context type.
     21
     22        Where the subclasses differ:
     23        - each section has its own label (obviously).
     24        - the layout for `WI.CSSGridNodeOverlayListSection` includes a section with settings for the CSS Grid overlay.
     25
     26        * Localizations/en.lproj/localizedStrings.js:
     27        We've received feedback that the latter is more common in web developers' vocabulary when
     28        refering to CSS grids. Adopted the same for the flexbox section empty message.
     29
     30        * UserInterface/Main.html:
     31
     32        * UserInterface/Views/CSSFlexNodeOverlayListSection.js: Added.
     33        (WI.CSSFlexNodeOverlayListSection.prototype.get sectionLabel):
     34        (WI.CSSFlexNodeOverlayListSection):
     35
     36        * UserInterface/Views/CSSGridNodeOverlayListSection.js: Renamed from Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js.
     37        (WI.CSSGridNodeOverlayListSection.prototype.get sectionLabel):
     38        (WI.CSSGridNodeOverlayListSection.prototype.initialLayout):
     39        (WI.CSSGridNodeOverlayListSection):
     40        The layout of `WI.CSSFlexNodeOverlayListSection` includes a set of options to configure the CSS Grid overlay.
     41
     42        * UserInterface/Views/LayoutDetailsSidebarPanel.css:
     43        (.details-section:is(.layout-css-flexbox, .layout-css-grid):not(.collapsed) > .content,):
     44        (.details-section.layout-css-grid > .content > .group > .row > .css-grid-section): Deleted.
     45        (.details-section.layout-css-grid:not(.collapsed) > .content,): Deleted.
     46
     47        * UserInterface/Views/LayoutDetailsSidebarPanel.js:
     48        (WI.LayoutDetailsSidebarPanel):
     49        (WI.LayoutDetailsSidebarPanel.prototype.attached):
     50        (WI.LayoutDetailsSidebarPanel.prototype.initialLayout):
     51        (WI.LayoutDetailsSidebarPanel.prototype.layout):
     52        (WI.LayoutDetailsSidebarPanel.prototype._handleLayoutContextTypeChanged):
     53        (WI.LayoutDetailsSidebarPanel.prototype._refreshNodeSets):
     54        (WI.LayoutDetailsSidebarPanel.prototype._refreshGridNodeSet): Deleted.
     55        Added Flexbox section to Layout details sidebar.
     56
     57        * UserInterface/Views/NodeOverlayListSection.css: Renamed from Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css.
     58        (.node-overlay-list-section):
     59        (.node-overlay-list-section > .node-overlay-list):
     60        (.node-overlay-list-section > .node-overlay-list > li > .node-overlay-list-item-container):
     61        (.node-overlay-list-section > .node-overlay-list > li > .node-overlay-list-item-container > label):
     62        (.node-overlay-list-section > .node-overlay-list > li > .node-overlay-list-item-container > label > .node-display-name):
     63        (.node-overlay-list-section > .node-overlay-list > li > .node-overlay-list-item-container > :is(.go-to-arrow, .inline-swatch)):
     64        (.node-overlay-list-section > .node-overlay-list > li > .node-overlay-list-item-container:not(:hover) > .go-to-arrow):
     65        (.node-overlay-list-section > .heading,):
     66        (.node-overlay-list-section > .heading > label > .toggle-all):
     67        (.node-overlay-list-section :is(.setting-editor, .node-overlay-list-item-container, .heading) input[type="checkbox"]):
     68        A full-on replacement of `.css-grid-section` with `.node-overlay-list-section` since the two sections share the same styles.
     69
     70        * UserInterface/Views/NodeOverlayListSection.js: Copied from Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js.
     71        (WI.NodeOverlayListSection):
     72        (WI.NodeOverlayListSection.prototype.set nodeSet):
     73        (WI.NodeOverlayListSection.prototype.get sectionLabel):
     74        (WI.NodeOverlayListSection.prototype.attached):
     75        (WI.NodeOverlayListSection.prototype.detached):
     76        (WI.NodeOverlayListSection.prototype.initialLayout):
     77        (WI.NodeOverlayListSection.prototype.layout):
     78        (WI.NodeOverlayListSection.prototype._handleOverlayStateChanged):
     79        (WI.NodeOverlayListSection.prototype._handleToggleAllCheckboxChanged):
     80        (WI.NodeOverlayListSection.prototype._updateToggleAllCheckbox):
     81        Removed all the specific implementations for CSS Grid after generalizing them into `WI.NodeOverlayListSection`.
     82
    1832022-02-11  Devin Rousso  <drousso@apple.com>
    284

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

    r288702 r289757  
    675675localizedStrings["Find Next (%s)"] = "Find Next (%s)";
    676676localizedStrings["Find Previous (%s)"] = "Find Previous (%s)";
     677/* Flexbox layout section name */
     678localizedStrings["Flexbox @ Elements details sidebar"] = "Flexbox";
    677679localizedStrings["Flows"] = "Flows";
    678680localizedStrings["Focus on Subtree"] = "Focus on Subtree";
    … …  
    969971localizedStrings["No Box Model Information"] = "No Box Model Information";
    970972localizedStrings["No CSS Changes"] = "No CSS Changes";
    971 /* Message shown when there are no CSS Grid contexts on the inspected page. */
    972 localizedStrings["No CSS Grid Contexts @ Layout Details Sidebar Panel"] = "No CSS Grid Contexts";
     973/* Message shown when there are no CSS Flex containers on the inspected page. */
     974localizedStrings["No CSS Flex Containers @ Layout Details Sidebar Panel"] = "No CSS Flex Containers";
     975/* Message shown when there are no CSS Grid containers on the inspected page. */
     976localizedStrings["No CSS Grid Containers @ Layout Details Sidebar Panel"] = "No CSS Grid Containers";
    973977localizedStrings["No Canvas Contexts"] = "No Canvas Contexts";
    974978localizedStrings["No Canvas Selected"] = "No Canvas Selected";
    … …  
    10761080/* Heading for list of grid nodes */
    10771081localizedStrings["Page Overlays @ Layout Sidebar Section Header"] = "Grid Overlays";
     1082/* Heading for list of flex container nodes */
     1083localizedStrings["Page Overlays for Flex containers @ Layout Sidebar Section Header"] = "Flexbox Overlays";
    10781084localizedStrings["Page navigated at %s"] = "Page navigated at %s";
    10791085localizedStrings["Page reloaded at %s"] = "Page reloaded at %s";

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r288623 r289757  
    9393    <link rel="stylesheet" href="Views/CookieStorageContentView.css">
    9494    <link rel="stylesheet" href="Views/CreateAuditPopover.css">
    95     <link rel="stylesheet" href="Views/CSSGridSection.css">
    9695    <link rel="stylesheet" href="Views/DOMBreakpointTreeElement.css">
    9796    <link rel="stylesheet" href="Views/DOMEventsBreakdownView.css">
    … …  
    172171    <link rel="stylesheet" href="Views/NetworkTimelineOverviewGraph.css">
    173172    <link rel="stylesheet" href="Views/NetworkTimelineView.css">
     173    <link rel="stylesheet" href="Views/NodeOverlayListSection.css">
    174174    <link rel="stylesheet" href="Views/ObjectPreviewView.css">
    175175    <link rel="stylesheet" href="Views/ObjectTreeArrayIndexTreeElement.css">
    … …  
    615615    <script src="Views/DetailsSectionTextRow.js"></script>
    616616
     617    <script src="Views/NodeOverlayListSection.js"></script>
     618
    617619    <script src="Views/SettingEditor.js"></script>
    618620    <script src="Views/SettingsGroup.js"></script>
    … …  
    652654    <script src="Views/CPUUsageCombinedView.js"></script>
    653655    <script src="Views/CPUUsageView.js"></script>
     656    <script src="Views/CSSFlexNodeOverlayListSection.js"></script>
     657    <script src="Views/CSSGridNodeOverlayListSection.js"></script>
    654658    <script src="Views/CSSStyleSheetTreeElement.js"></script>
    655     <script src="Views/CSSGridSection.js"></script>
    656659    <script src="Views/CallFrameTreeElement.js"></script>
    657660    <script src="Views/CallFrameView.js"></script>

  • trunk/Source/WebInspectorUI/UserInterface/Views/CSSFlexNodeOverlayListSection.js

    r289756 r289757  
    11/*
    2  * Copyright (C) 2021 Apple Inc. All rights reserved.
     2 * Copyright (C) 2022 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 .details-section.layout-css-grid > .content > .group > .row > .css-grid-section {
    27     margin-inline: 6px;
    28     margin-bottom: 4px;
    29 }
     26WI.CSSFlexNodeOverlayListSection = class CSSFlexNodeOverlayListSection extends WI.NodeOverlayListSection
     27{
     28    // Protected
    3029
    31 .details-section.layout-css-grid:not(.collapsed) > .content,
    32 .details-section.layout-css-grid > .content > .group {
    33     display: block;
    34 }
     30    get sectionLabel()
     31    {
     32        return WI.UIString("Flexbox Overlays", "Page Overlays for Flex containers @ Layout Sidebar Section Header", "Heading for list of flex container nodes");
     33    }
     34};

  • trunk/Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.css

    r273847 r289757  
    2424 */
    2525
    26 .details-section.layout-css-grid > .content > .group > .row > .css-grid-section {
    27     margin-inline: 6px;
    28     margin-bottom: 4px;
    29 }
    30 
    31 .details-section.layout-css-grid:not(.collapsed) > .content,
    32 .details-section.layout-css-grid > .content > .group {
     26.details-section:is(.layout-css-flexbox, .layout-css-grid):not(.collapsed) > .content,
     27.details-section:is(.layout-css-flexbox, .layout-css-grid) > .content > .group {
    3328    display: block;
    3429}

  • trunk/Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.js

    r275545 r289757  
    3030        super("layout-details", WI.UIString("Layout", "Layout @ Styles Sidebar", "Title of the CSS style panel."));
    3131
     32        this._flexNodeSet = new Set;
    3233        this._gridNodeSet = new Set;
    3334        this._nodeStyles = null;
    … …  
    8384        WI.cssManager.layoutContextTypeChangedMode = WI.CSSManager.LayoutContextTypeChangedMode.All;
    8485
    85         this._refreshGridNodeSet();
     86        this._refreshNodeSets();
    8687    }
    8788
    … …  
    9899    initialLayout()
    99100    {
    100         this._gridDetailsSectionRow = new WI.DetailsSectionRow(WI.UIString("No CSS Grid Contexts", "No CSS Grid Contexts @ Layout Details Sidebar Panel", "Message shown when there are no CSS Grid contexts on the inspected page."));
     101        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."));
    101102        let gridGroup = new WI.DetailsSectionGroup([this._gridDetailsSectionRow]);
    102103        let gridDetailsSection = new WI.DetailsSection("layout-css-grid", WI.UIString("Grid", "Grid @ Elements details sidebar", "CSS Grid layout section name"), [gridGroup]);
    103104        this.contentView.element.appendChild(gridDetailsSection.element);
    104105
    105         this._gridSection = new WI.CSSGridSection;
     106        this._gridSection = new WI.CSSGridNodeOverlayListSection;
     107
     108        // FIXME: <https://webkit.org/b/235820> Enable Flexbox Inspector feature
     109        if (!WI.settings.engineeringEnableFlexboxInspector.value)
     110            return;
     111
     112        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."));
     113        let flexDetailsSection = new WI.DetailsSection("layout-css-flexbox", WI.UIString("Flexbox", "Flexbox @ Elements details sidebar", "Flexbox layout section name"), [new WI.DetailsSectionGroup([this._flexDetailsSectionRow])]);
     114        this.contentView.element.appendChild(flexDetailsSection.element);
     115
     116        this._flexSection = new WI.CSSFlexNodeOverlayListSection;
    106117    }
    107118
    … …  
    110121        super.layout();
    111122
    112         if (!this._gridNodeSet.size) {
     123        if (this._gridNodeSet.size) {
     124            this._gridDetailsSectionRow.hideEmptyMessage();
     125            this._gridDetailsSectionRow.element.appendChild(this._gridSection.element);
     126
     127            if (!this._gridSection.isAttached)
     128                this.addSubview(this._gridSection);
     129
     130            this._gridSection.nodeSet = this._gridNodeSet;
     131        } else {
    113132            this._gridDetailsSectionRow.showEmptyMessage();
    114133
    115134            if (this._gridSection.isAttached)
    116135                this.removeSubview(this._gridSection);
    117 
     136        }
     137
     138        // FIXME: <https://webkit.org/b/235820> Enable Flexbox Inspector feature
     139        if (!WI.settings.engineeringEnableFlexboxInspector.value)
     140            return;
     141
     142        if (this._flexNodeSet.size) {
     143            this._flexDetailsSectionRow.hideEmptyMessage();
     144            this._flexDetailsSectionRow.element.appendChild(this._flexSection.element);
     145
     146            if (!this._flexSection.isAttached)
     147                this.addSubview(this._flexSection);
     148
     149            this._flexSection.nodeSet = this._flexNodeSet;
    118150        } else {
    119             this._gridDetailsSectionRow.hideEmptyMessage();
    120             this._gridDetailsSectionRow.element.appendChild(this._gridSection.element);
    121 
    122             if (!this._gridSection.isAttached)
    123                 this.addSubview(this._gridSection);
    124 
    125             this._gridSection.gridNodeSet = this._gridNodeSet;
     151            this._flexDetailsSectionRow.showEmptyMessage();
     152
     153            if (this._flexSection.isAttached)
     154                this.removeSubview(this._flexSection);
    126155        }
    127156    }
    … …  
    132161    {
    133162        let domNode = event.target;
    134         if (domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid)
     163
     164        // A node may switch layout context type between grid and flex.
     165        // Remove it from both node sets in case it was previously added.
     166        // It is also the default case when the layout context type switches to something unknown.
     167        this._flexNodeSet.delete(domNode);
     168        this._gridNodeSet.delete(domNode);
     169
     170        switch (domNode.layoutContextType) {
     171        case WI.DOMNode.LayoutContextType.Grid:
    135172            this._gridNodeSet.add(domNode);
    136         else
    137             this._gridNodeSet.delete(domNode);
     173            break;
     174
     175        case WI.DOMNode.LayoutContextType.Flex:
     176            this._flexNodeSet.add(domNode);
     177            break;
     178        }
    138179
    139180        this.needsLayout();
    … …  
    160201    }
    161202
    162     _refreshGridNodeSet()
     203    _refreshNodeSets()
    163204    {
    164205        this._gridNodeSet = new Set(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid));
     206
     207        // FIXME: <https://webkit.org/b/235820> Enable Flexbox Inspector feature
     208        if (WI.settings.engineeringEnableFlexboxInspector.value)
     209            this._flexNodeSet = new Set(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Flex));
    165210    }
    166211};

  • trunk/Source/WebInspectorUI/UserInterface/Views/NodeOverlayListSection.css

    r289756 r289757  
    11/*
    2  * Copyright (C) 2021 Apple Inc. All rights reserved.
     2 * Copyright (C) 2022 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 .css-grid-section .node-display-name {
    27     margin-inline: 5px 4px;
     26.node-overlay-list-section {
     27    margin-inline: 6px;
     28    margin-bottom: 4px;
     29    padding-inline-start: 6px;
    2830}
    2931
    30 .css-grid-section .node-overlay-list {
     32.node-overlay-list-section > .node-overlay-list {
    3133    list-style: none;
    3234    margin: 0;
    … …  
    3436}
    3537
    36 .css-grid-section .node-overlay-list-item-container {
     38.node-overlay-list-section > .node-overlay-list > li > .node-overlay-list-item-container {
    3739    display: flex;
    3840    align-items: center;
    3941}
    4042
    41 .css-grid-section .node-overlay-list-item-container label {
     43.node-overlay-list-section > .node-overlay-list > li > .node-overlay-list-item-container > label {
    4244    flex-shrink: 1;
    4345    min-width: 0;
    … …  
    4749}
    4850
    49 .css-grid-section .node-overlay-list-item-container :is(.go-to-arrow, .inline-swatch) {
     51.node-overlay-list-section > .node-overlay-list > li > .node-overlay-list-item-container > label > .node-display-name {
     52    margin-inline: 5px 4px;
     53}
     54
     55.node-overlay-list-section > .node-overlay-list > li > .node-overlay-list-item-container > :is(.go-to-arrow, .inline-swatch) {
    5056    flex-shrink: 0;
    5157}
    5258
    53 .css-grid-section .node-overlay-list-item-container:not(:hover) .go-to-arrow {
     59.node-overlay-list-section > .node-overlay-list > li > .node-overlay-list-item-container:not(:hover) > .go-to-arrow {
    5460    opacity: 0;
    5561}
    5662
    57 .css-grid-section :is(.heading, .title) {
     63.node-overlay-list-section > .heading,
     64.node-overlay-list-section > .container > .title {
    5865    font-size: 11px;
    59     margin-top: 10px;
     66    margin-top: 5px;
    6067    margin-bottom: 5px;
    6168    font-weight: 500;
    … …  
    6370}
    6471
    65 .css-grid-section .toggle-all {
     72.node-overlay-list-section > .heading > label > .toggle-all {
    6673    padding-inline-start: 4px;
    6774}
    6875
    69 .css-grid-section :is(.setting-editor, .node-overlay-list-item-container, .heading) input[type="checkbox"] {
     76.node-overlay-list-section :is(.setting-editor, .node-overlay-list-item-container, .heading) input[type="checkbox"] {
    7077    margin-inline-end: 0;
    7178}
    72 
    73 .css-grid-section .setting-editor > input[type="checkbox"] {
    74     font-size: revert;
    75 }

  • trunk/Source/WebInspectorUI/UserInterface/Views/NodeOverlayListSection.js

    r289756 r289757  
    11/*
    2  * Copyright (C) 2021 Apple Inc. All rights reserved.
     2 * Copyright (C) 2022 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 // FIXME: <https://webkit.org/b/152269> convert `WI.CSSGridSection` to be a subclass of `WI.DetailsSectionRow`
    27 
    28 WI.CSSGridSection = class CSSGridSection extends WI.View
     26WI.NodeOverlayListSection = class NodeOverlayListSection extends WI.View
    2927{
    3028    constructor()
    … …  
    3230        super();
    3331
    34         this.element.classList.add("css-grid-section");
    35 
    36         this._gridNodeSet = new Set;
     32        this.element.classList.add("node-overlay-list-section");
     33
     34        this._nodeSet = new Set;
    3735        this._checkboxElementByNodeMap = new WeakMap;
    3836        this._toggleAllCheckboxElement = null;
    … …  
    4240    // Public
    4341
    44     set gridNodeSet(value)
    45     {
    46         this._gridNodeSet = value;
     42    set nodeSet(value)
     43    {
     44        this._nodeSet = value;
    4745        this.needsLayout();
    4846    }
    … …  
    5048    // Protected
    5149
     50    get sectionLabel()
     51    {
     52        throw WI.NotImplementedError.subclassMustOverride();
     53    }
     54
    5255    attached()
    5356    {
    5457        super.attached();
    5558
    56         WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayShown, this._handleGridOverlayStateChanged, this);
    57         WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayHidden, this._handleGridOverlayStateChanged, this);
     59        WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayShown, this._handleOverlayStateChanged, this);
     60        WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayHidden, this._handleOverlayStateChanged, this);
    5861    }
    5962
    6063    detached()
    6164    {
    62         WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayShown, this._handleGridOverlayStateChanged, this);
    63         WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayHidden, this._handleGridOverlayStateChanged, this);
     65        WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayShown, this._handleOverlayStateChanged, this);
     66        WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayHidden, this._handleOverlayStateChanged, this);
    6467
    6568        super.detached();
    … …  
    6972    {
    7073        super.initialLayout();
    71 
    72         let settingsGroup = new WI.SettingsGroup(WI.UIString("Page Overlay Options", "Page Overlay Options @ Layout Panel Section Header", "Heading for list of grid overlay options"));
    73         this.element.append(settingsGroup.element);
    74 
    75         settingsGroup.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"));
    76         settingsGroup.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"));
    77         settingsGroup.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"));
    78         settingsGroup.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"));
    79         settingsGroup.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"));
    8074
    8175        let listHeading = this.element.appendChild(document.createElement("h2"));
    … …  
    8882
    8983        let labelInner = label.createChild("span", "toggle-all");
    90         labelInner.textContent = WI.UIString("Grid Overlays", "Page Overlays @ Layout Sidebar Section Header", "Heading for list of grid nodes");
     84        labelInner.textContent = this.sectionLabel;
    9185
    9286        this._listElement = this.element.appendChild(document.createElement("ul"));
    … …  
    9488    }
    9589
    96     _handleToggleAllCheckboxChanged(event)
    97     {
    98         let isChecked = event.target.checked;
    99         this._suppressUpdateToggleAllCheckbox = true;
    100         for (let domNode of this._gridNodeSet) {
    101             if (isChecked)
    102                 WI.overlayManager.showOverlay(domNode, {initiator: WI.GridOverlayDiagnosticEventRecorder.Initiator.Panel});
    103             else
    104                 WI.overlayManager.hideOverlay(domNode);
    105         }
    106         this._suppressUpdateToggleAllCheckbox = false;
    107     }
    10890
    10991    layout()
    … …  
    11395        this._listElement.removeChildren();
    11496
    115         for (let domNode of this._gridNodeSet) {
     97        for (let domNode of this._nodeSet) {
    11698            let itemElement = this._listElement.appendChild(document.createElement("li"));
    11799            let itemContainerElement = itemElement.appendChild(document.createElement("span"));
    … …  
    119101
    120102            let labelElement = itemContainerElement.appendChild(document.createElement("label"));
     103            let nodeDisplayName = labelElement.appendChild(document.createElement("span"));
     104            nodeDisplayName.classList.add("node-display-name");
     105            nodeDisplayName.textContent = domNode.displayName;
     106
    121107            let checkboxElement = labelElement.appendChild(document.createElement("input"));
     108            labelElement.insertBefore(checkboxElement, nodeDisplayName);
    122109            checkboxElement.type = "checkbox";
    123110            checkboxElement.checked = WI.overlayManager.hasVisibleOverlay(domNode);
    124111
    125             const nodeDisplayName = labelElement.appendChild(document.createElement("span"));
    126             nodeDisplayName.classList.add("node-display-name");
    127             nodeDisplayName.textContent = domNode.displayName;
    128 
    129112            this._checkboxElementByNodeMap.set(domNode, checkboxElement);
     113
     114            let initiator;
     115            if (domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid)
     116                initiator = WI.GridOverlayDiagnosticEventRecorder.Initiator.Panel;
    130117
    131118            checkboxElement.addEventListener("change", (event) => {
    132119                if (checkboxElement.checked)
    133                     WI.overlayManager.showOverlay(domNode, {color: swatch.value, initiator: WI.GridOverlayDiagnosticEventRecorder.Initiator.Panel});
     120                    WI.overlayManager.showOverlay(domNode, {color: swatch?.value, initiator});
    134121                else
    135122                    WI.overlayManager.hideOverlay(domNode);
    136123            });
    137124
    138             let gridColor = WI.overlayManager.getColorForNode(domNode);
    139             let swatch = new WI.InlineSwatch(WI.InlineSwatch.Type.Color, gridColor);
     125            let color = WI.overlayManager.getColorForNode(domNode);
     126            let swatch = new WI.InlineSwatch(WI.InlineSwatch.Type.Color, color);
    140127            swatch.shiftClickColorEnabled = false;
    141128            itemContainerElement.append(swatch.element);
    142129
    143130            swatch.addEventListener(WI.InlineSwatch.Event.ValueChanged, (event) => {
    144                 if (checkboxElement.checked)
    145                     // While changing the overlay color, WI.OverlayManager.Event.GridOverlayShown is dispatched with high frequency.
    146                     // An initiator is not provided so as not to skew usage count of overlay options when logging diagnostics in WI.GridOverlayDiagnosticEventRecorder.
     131                if (checkboxElement?.checked)
    147132                    WI.overlayManager.showOverlay(domNode, {color: event.data.value});
    148133            }, swatch);
    149134
    150135            swatch.addEventListener(WI.InlineSwatch.Event.Deactivated, (event) => {
    151                 if (event.target.value === gridColor)
     136                if (event.target.value === color)
    152137                    return;
    153138
    154                 gridColor = event.target.value;
    155                 WI.overlayManager.setColorForNode(domNode, gridColor);
     139                color = event.target.value;
     140                WI.overlayManager.setColorForNode(domNode, color);
    156141            }, swatch);
    157142
    … …  
    166151    // Private
    167152
    168     _handleGridOverlayStateChanged(event)
    169     {
    170         if (event.data.domNode.layoutContextType !== WI.DOMNode.LayoutContextType.Grid)
    171             return;
    172 
     153    _handleOverlayStateChanged(event)
     154    {
    173155        let checkboxElement = this._checkboxElementByNodeMap.get(event.data.domNode);
    174156        if (!checkboxElement)
    … …  
    179161    }
    180162
     163    _handleToggleAllCheckboxChanged(event)
     164    {
     165        let isChecked = event.target.checked;
     166        this._suppressUpdateToggleAllCheckbox = true;
     167
     168        for (let domNode of this._nodeSet) {
     169            if (isChecked)
     170                WI.overlayManager.showOverlay(domNode);
     171            else
     172                WI.overlayManager.hideOverlay(domNode);
     173        }
     174
     175        this._suppressUpdateToggleAllCheckbox = false;
     176    }
     177
    181178    _updateToggleAllCheckbox()
    182179    {
    … …  
    186183        let hasVisible = false;
    187184        let hasHidden = false;
    188         for (let domNode of this._gridNodeSet) {
     185        for (let domNode of this._nodeSet) {
    189186            let isVisible = WI.overlayManager.hasVisibleOverlay(domNode);
    190187            if (isVisible)
Note: See TracChangeset for help on using the changeset viewer.