Changeset 290613 in webkit


Ignore:
Timestamp:
Feb 28, 2022 1:19:56 PM (5 months ago)
Author:
Devin Rousso
Message:

Web Inspector: [Flexbox] Add options to show each area's CSS order and/or DOM index in the parent flex container
​https://bugs.webkit.org/show_bug.cgi?id=237215

Reviewed by Patrick Angle.

This will help developers better understand how CSS order and the DOM index of each flex
item interact and result in what's eventually rendered.

Source/JavaScriptCore:

  • inspector/protocol/DOM.json:

Add an optional boolean parameter to DOM.showFlexOverlay:

  • showOrderNumbers controls whether labels with the computed CSS order value are shown over each flex item's area.

Source/WebCore:

  • inspector/agents/InspectorDOMAgent.h:
  • inspector/agents/InspectorDOMAgent.cpp:

(WebCore::InspectorDOMAgent::showFlexOverlay):
Pass along the optional boolean parameter showOrderNumbers.

  • inspector/InspectorOverlay.h:

(WebCore::InspectorOverlay::Highlight::FlexHighlightOverlay::encode const):
(WebCore::InspectorOverlay::Highlight::FlexHighlightOverlay::decode):
Add member bool for showOrderNumbers to Flex::Config.
Add member Vector<InspectorOverlayLabel> to FlexHighlightOverlay for drawing labels.

  • inspector/InspectorOverlay.cpp:

(WebCore::InspectorOverlay::drawFlexOverlay):
(WebCore::InspectorOverlay::buildFlexOverlay):
Use showOrderNumbers to (when enabled) add items to Vector<InspectorOverlayLabel> for
each flex item's computed CSS order and DOM index in the parent flex container.

Source/WebInspectorUI:

  • UserInterface/Base/Setting.js:

Add global WI.Setting for flexOverlayShowOrderNumbers.

  • UserInterface/Models/DOMNode.js:

(WI.DOMNode.prototype.set layoutContextType): Added.
(WI.DOMNode.prototype.showLayoutOverlay): Added.
(WI.DOMNode.prototype.hideLayoutOverlay): Added.
(WI.DOMNode.prototype._handleLayoutOverlaySettingChanged): Renamed from _handleGridLayoutOverlaySettingChanged.
Listen for changes to the above WI.Setting and include the value when invoking DOM.showFlexOverlay.

  • UserInterface/Views/CSSFlexNodeOverlayListSection.js:

(WI.CSSFlexNodeOverlayListSection.prototype.initialLayout): Added.
Add UI for the above WI.Setting.

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Views/CSSGridNodeOverlayListSection.js:

(WI.CSSGridNodeOverlayListSection.prototype.initialLayout):
Drive-by: Adjust a WI.UIString to avoid possible future clashing.

Location:
trunk/Source
Files:
13 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/JavaScriptCore/ChangeLog

    r290603 r290613  
     12022-02-28  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: [Flexbox] Add options to show each area's CSS `order` and/or DOM index in the parent flex container
     4        https://bugs.webkit.org/show_bug.cgi?id=237215
     5
     6        Reviewed by Patrick Angle.
     7
     8        This will help developers better understand how CSS `order` and the DOM index of each flex
     9        item interact and result in what's eventually rendered.
     10
     11        * inspector/protocol/DOM.json:
     12        Add an optional boolean parameter to `DOM.showFlexOverlay`:
     13        - `showOrderNumbers` controls whether labels with the computed CSS `order` value are shown
     14          over each flex item's area.
     15
    1162022-02-28  Yusuke Suzuki  <ysuzuki@apple.com>
    217

  • trunk/Source/JavaScriptCore/inspector/protocol/DOM.json

    r289416 r290613  
    532532            "parameters": [
    533533                { "name": "nodeId", "$ref": "NodeId", "description": "The node for which a flex overlay should be shown." },
    534                 { "name": "flexColor", "$ref": "RGBAColor", "description": "The primary color to use for the flex overlay." }
     534                { "name": "flexColor", "$ref": "RGBAColor", "description": "The primary color to use for the flex overlay." },
     535                { "name": "showOrderNumbers", "type": "boolean", "optional": true, "description": "Show labels for flex order. If not specified, the default value is false." }
    535536            ]
    536537        },

  • trunk/Source/WebCore/ChangeLog

    r290610 r290613  
     12022-02-28  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: [Flexbox] Add options to show each area's CSS `order` and/or DOM index in the parent flex container
     4        https://bugs.webkit.org/show_bug.cgi?id=237215
     5
     6        Reviewed by Patrick Angle.
     7
     8        This will help developers better understand how CSS `order` and the DOM index of each flex
     9        item interact and result in what's eventually rendered.
     10
     11        * inspector/agents/InspectorDOMAgent.h:
     12        * inspector/agents/InspectorDOMAgent.cpp:
     13        (WebCore::InspectorDOMAgent::showFlexOverlay):
     14        Pass along the optional boolean parameter `showOrderNumbers`.
     15
     16        * inspector/InspectorOverlay.h:
     17        (WebCore::InspectorOverlay::Highlight::FlexHighlightOverlay::encode const):
     18        (WebCore::InspectorOverlay::Highlight::FlexHighlightOverlay::decode):
     19        Add member `bool` for `showOrderNumbers` to `Flex::Config`.
     20        Add member `Vector<InspectorOverlayLabel>` to `FlexHighlightOverlay` for drawing labels.
     21
     22        * inspector/InspectorOverlay.cpp:
     23        (WebCore::InspectorOverlay::drawFlexOverlay):
     24        (WebCore::InspectorOverlay::buildFlexOverlay):
     25        Use `showOrderNumbers` to (when enabled) add items to `Vector<InspectorOverlayLabel>` for
     26        each flex item's computed CSS `order` and DOM index in the parent flex container.
     27
    1282022-02-28  Chris Dumez  <cdumez@apple.com>
    229

  • trunk/Source/WebCore/inspector/InspectorOverlay.cpp

    r290112 r290613  
    17541754    for (const auto& crossAxisSpaceBetweenItemAndGap : flexHighlightOverlay.spaceBetweenItemsAndCrossAxisSpace)
    17551755        drawLayoutStippling(context, crossAxisSpaceBetweenItemAndGap, spaceBetweenItemsAndCrossAxisSpaceStipplingDensity);
     1756
     1757    for (auto label : flexHighlightOverlay.labels)
     1758        label.draw(context);
    17561759}
    17571760
    … …  
    18791882    float previousLineCrossAxisTrailingEdge = correctedCrossAxisLeadingEdge(containerRect);
    18801883
    1881     size_t currentChildIndex = 0;
     1884    Vector<RenderBox*> renderChildrenInFlexOrder;
     1885    Vector<RenderObject*> renderChildrenInDOMOrder;
     1886    bool hasCustomOrder = false;
     1887
    18821888    auto childOrderIterator = renderFlex.orderIterator();
    18831889    for (RenderBox* renderChild = childOrderIterator.first(); renderChild; renderChild = childOrderIterator.next()) {
    18841890        if (childOrderIterator.shouldSkipChild(*renderChild))
    18851891            continue;
    1886 
     1892        renderChildrenInFlexOrder.append(renderChild);
     1893    }
     1894
     1895    if (flexOverlay.config.showOrderNumbers) {
     1896        for (auto* child = node->firstChild(); child; child = child->nextSibling()) {
     1897            if (auto* renderer = child->renderer()) {
     1898                if (!renderChildrenInFlexOrder.contains(renderer))
     1899                    continue;
     1900
     1901                renderChildrenInDOMOrder.append(renderer);
     1902
     1903                if (renderer->style().order())
     1904                    hasCustomOrder = true;
     1905            }
     1906        }
     1907    }
     1908
     1909    size_t currentChildIndex = 0;
     1910    for (auto* renderChild : renderChildrenInFlexOrder) {
    18871911        // Build bounds for each child and collect children on the same logical line.
    18881912        {
    … …  
    18901914            renderFlex.flipForWritingMode(childRect);
    18911915            childRect.expand(renderChild->marginBox());
    1892             flexHighlightOverlay.itemBounds.append(childQuadToRootQuad({ childRect }));
     1916
     1917            auto itemBounds = childQuadToRootQuad({ childRect });
     1918            flexHighlightOverlay.itemBounds.append(itemBounds);
     1919
     1920            if (flexOverlay.config.showOrderNumbers) {
     1921                StringBuilder orderNumbers;
     1922
     1923                if (auto index = renderChildrenInDOMOrder.find(renderChild); index != notFound) {
     1924                    orderNumbers.append("Item #");
     1925                    orderNumbers.append(index + 1);
     1926                }
     1927
     1928                if (auto order = renderChild->style().order(); order || hasCustomOrder) {
     1929                    if (!orderNumbers.isEmpty())
     1930                        orderNumbers.append('\n');
     1931                    orderNumbers.append("order: ");
     1932                    orderNumbers.append(order);
     1933                }
     1934
     1935                if (!orderNumbers.isEmpty())
     1936                    flexHighlightOverlay.labels.append({ orderNumbers.toString(), itemBounds.center(), Color::white.colorWithAlphaByte(230), { InspectorOverlayLabel::Arrow::Direction::None, InspectorOverlayLabel::Arrow::Alignment::None } });
     1937            }
    18931938
    18941939            currentLineCrossAxisLeadingEdge = correctedCrossAxisMin(currentLineCrossAxisLeadingEdge, correctedCrossAxisLeadingEdge(childRect));

  • trunk/Source/WebCore/inspector/InspectorOverlay.h

    r289769 r290613  
    125125            Vector<FloatQuad> spaceBetweenItemsAndCrossAxisSpace;
    126126            Vector<FloatQuad> crossAxisGaps;
     127            Vector<InspectorOverlayLabel> labels;
    127128
    128129#if PLATFORM(IOS_FAMILY)
    … …  
    182183
    183184            Color flexColor;
     185            bool showOrderNumbers;
    184186        };
    185187
    … …  
    287289    encoder << spaceBetweenItemsAndCrossAxisSpace;
    288290    encoder << crossAxisGaps;
     291    encoder << labels;
    289292}
    290293
    … …  
    305308        return { };
    306309    if (!decoder.decode(flexHighlightOverlay.crossAxisGaps))
     310        return { };
     311    if (!decoder.decode(flexHighlightOverlay.labels))
    307312        return { };
    308313    return { flexHighlightOverlay };

  • trunk/Source/WebCore/inspector/agents/InspectorDOMAgent.cpp

    r290047 r290613  
    15611561}
    15621562
    1563 Inspector::Protocol::ErrorStringOr<void> InspectorDOMAgent::showFlexOverlay(Inspector::Protocol::DOM::NodeId nodeId, Ref<JSON::Object>&& flexColor)
     1563Inspector::Protocol::ErrorStringOr<void> InspectorDOMAgent::showFlexOverlay(Inspector::Protocol::DOM::NodeId nodeId, Ref<JSON::Object>&& flexColor, std::optional<bool>&& showOrderNumbers)
    15641564{
    15651565    Protocol::ErrorString errorString;
    … …  
    15741574    InspectorOverlay::Flex::Config config;
    15751575    config.flexColor = *parsedColor;
     1576    config.showOrderNumbers = showOrderNumbers.value_or(false);
    15761577
    15771578    m_overlay->setFlexOverlayForNode(*node, config);

  • trunk/Source/WebCore/inspector/agents/InspectorDOMAgent.h

    r290047 r290613  
    151151    Inspector::Protocol::ErrorStringOr<void> showGridOverlay(Inspector::Protocol::DOM::NodeId, Ref<JSON::Object>&& gridColor, std::optional<bool>&& showLineNames, std::optional<bool>&& showLineNumbers, std::optional<bool>&& showExtendedGridLines, std::optional<bool>&& showTrackSizes, std::optional<bool>&& showAreaNames);
    152152    Inspector::Protocol::ErrorStringOr<void> hideGridOverlay(std::optional<Inspector::Protocol::DOM::NodeId>&&);
    153     Inspector::Protocol::ErrorStringOr<void> showFlexOverlay(Inspector::Protocol::DOM::NodeId, Ref<JSON::Object>&& flexColor);
     153    Inspector::Protocol::ErrorStringOr<void> showFlexOverlay(Inspector::Protocol::DOM::NodeId, Ref<JSON::Object>&& flexColor, std::optional<bool>&& showOrderNumbers);
    154154    Inspector::Protocol::ErrorStringOr<void> hideFlexOverlay(std::optional<Inspector::Protocol::DOM::NodeId>&&);
    155155    Inspector::Protocol::ErrorStringOr<Inspector::Protocol::DOM::NodeId> moveTo(Inspector::Protocol::DOM::NodeId nodeId, Inspector::Protocol::DOM::NodeId targetNodeId, std::optional<Inspector::Protocol::DOM::NodeId>&& insertBeforeNodeId);

  • trunk/Source/WebInspectorUI/ChangeLog

    r290612 r290613  
     12022-02-28  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: [Flexbox] Add options to show each area's CSS `order` and/or DOM index in the parent flex container
     4        https://bugs.webkit.org/show_bug.cgi?id=237215
     5
     6        Reviewed by Patrick Angle.
     7
     8        This will help developers better understand how CSS `order` and the DOM index of each flex
     9        item interact and result in what's eventually rendered.
     10
     11        * UserInterface/Base/Setting.js:
     12        Add global `WI.Setting` for `flexOverlayShowOrderNumbers`.
     13
     14        * UserInterface/Models/DOMNode.js:
     15        (WI.DOMNode.prototype.set layoutContextType): Added.
     16        (WI.DOMNode.prototype.showLayoutOverlay): Added.
     17        (WI.DOMNode.prototype.hideLayoutOverlay): Added.
     18        (WI.DOMNode.prototype._handleLayoutOverlaySettingChanged): Renamed from `_handleGridLayoutOverlaySettingChanged`.
     19        Listen for changes to the above `WI.Setting` and include the value when invoking `DOM.showFlexOverlay`.
     20
     21        * UserInterface/Views/CSSFlexNodeOverlayListSection.js:
     22        (WI.CSSFlexNodeOverlayListSection.prototype.initialLayout): Added.
     23        Add UI for the above `WI.Setting`.
     24
     25        * Localizations/en.lproj/localizedStrings.js:
     26
     27        * UserInterface/Views/CSSGridNodeOverlayListSection.js:
     28        (WI.CSSGridNodeOverlayListSection.prototype.initialLayout):
     29        Drive-by: Adjust a `WI.UIString` to avoid possible future clashing.
     30
    1312022-02-28  Devin Rousso  <drousso@apple.com>
    232

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

    r289757 r290613  
    10531053localizedStrings["Option-click to show unused CSS variables from all rules @ Styles Sidebar Panel Tooltip"] = "Option-click to show unused CSS variables from all rules";
    10541054localizedStrings["Options"] = "Options";
     1055/* Label for option to toggle the order numbers setting for CSS flex overlays */
     1056localizedStrings["Order Numbers @ Layout Panel Overlay Options"] = "Order Numbers";
    10551057/* Property value for `font-variant-numeric: ordinal`. */
    10561058localizedStrings["Ordinal Letter Forms @ Font Details Sidebar Property Value"] = "Ordinal Letter Forms";
    … …  
    10761078localizedStrings["Page"] = "Page";
    10771079localizedStrings["Page Issue"] = "Page Issue";
     1080/* Heading for list of flex overlay options */
     1081localizedStrings["Page Overlay Options @ Layout Panel Flex Section Header"] = "Page Overlay Options";
    10781082/* Heading for list of grid overlay options */
    1079 localizedStrings["Page Overlay Options @ Layout Panel Section Header"] = "Page Overlay Options";
     1083localizedStrings["Page Overlay Options @ Layout Panel Grid Section Header"] = "Page Overlay Options";
    10801084/* Heading for list of grid nodes */
    10811085localizedStrings["Page Overlays @ Layout Sidebar Section Header"] = "Grid Overlays";

  • trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js

    r290065 r290613  
    197197    enableElementsTabIndependentStylesDetailsSidebarPanel: new WI.Setting("elements-tab-independent-styles-details-panel", true),
    198198    enableLineWrapping: new WI.Setting("enable-line-wrapping", true),
     199    flexOverlayShowOrderNumbers: new WI.Setting("flex-overlay-show-order-numbers", false),
    199200    frontendAppearance: new WI.Setting("frontend-appearance", "system"),
    200201    gridOverlayShowAreaNames: new WI.Setting("grid-overlay-show-area-names", false),

  • trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js

    r290435 r290613  
    280280
    281281        switch (oldLayoutContextType) {
     282        case WI.DOMNode.LayoutContextType.Flex:
     283            WI.settings.flexOverlayShowOrderNumbers.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
     284            break;
     285
    282286        case WI.DOMNode.LayoutContextType.Grid:
    283             WI.settings.gridOverlayShowExtendedGridLines.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
    284             WI.settings.gridOverlayShowLineNames.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
    285             WI.settings.gridOverlayShowLineNumbers.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
    286             WI.settings.gridOverlayShowTrackSizes.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
    287             WI.settings.gridOverlayShowAreaNames.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
     287            WI.settings.gridOverlayShowExtendedGridLines.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
     288            WI.settings.gridOverlayShowLineNames.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
     289            WI.settings.gridOverlayShowLineNumbers.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
     290            WI.settings.gridOverlayShowTrackSizes.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
     291            WI.settings.gridOverlayShowAreaNames.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
    288292            break;
    289293        }
    … …  
    629633
    630634            if (!this._layoutOverlayShowing) {
    631                 WI.settings.gridOverlayShowExtendedGridLines.addEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
    632                 WI.settings.gridOverlayShowLineNames.addEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
    633                 WI.settings.gridOverlayShowLineNumbers.addEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
    634                 WI.settings.gridOverlayShowTrackSizes.addEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
    635                 WI.settings.gridOverlayShowAreaNames.addEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
     635                WI.settings.gridOverlayShowExtendedGridLines.addEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
     636                WI.settings.gridOverlayShowLineNames.addEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
     637                WI.settings.gridOverlayShowLineNumbers.addEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
     638                WI.settings.gridOverlayShowTrackSizes.addEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
     639                WI.settings.gridOverlayShowAreaNames.addEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
    636640            }
    637641            break;
    … …  
    639643        case WI.DOMNode.LayoutContextType.Flex:
    640644            agentCommandArguments.flexColor = color.toProtocol();
     645            agentCommandArguments.showOrderNumbers = WI.settings.flexOverlayShowOrderNumbers.value;
    641646            agentCommandFunction = target.DOMAgent.showFlexOverlay;
     647
     648            if (!this._layoutOverlayShowing)
     649                WI.settings.flexOverlayShowOrderNumbers.addEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
    642650            break;
    643651        }
    … …  
    665673        switch (this._layoutContextType) {
    666674        case WI.DOMNode.LayoutContextType.Grid:
    667             WI.settings.gridOverlayShowExtendedGridLines.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
    668             WI.settings.gridOverlayShowLineNames.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
    669             WI.settings.gridOverlayShowLineNumbers.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
    670             WI.settings.gridOverlayShowTrackSizes.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
    671             WI.settings.gridOverlayShowAreaNames.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
     675            WI.settings.gridOverlayShowExtendedGridLines.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
     676            WI.settings.gridOverlayShowLineNames.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
     677            WI.settings.gridOverlayShowLineNumbers.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
     678            WI.settings.gridOverlayShowTrackSizes.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
     679            WI.settings.gridOverlayShowAreaNames.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
    672680
    673681            agentCommandFunction = target.DOMAgent.hideGridOverlay;
    … …  
    675683
    676684        case WI.DOMNode.LayoutContextType.Flex:
     685            WI.settings.flexOverlayShowOrderNumbers.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
     686
    677687            agentCommandFunction = target.DOMAgent.hideFlexOverlay;
    678688            break;
    … …  
    12601270    }
    12611271
    1262     _handleGridLayoutOverlaySettingChanged(event)
     1272    _handleLayoutOverlaySettingChanged(event)
    12631273    {
    12641274        if (this._layoutOverlayShowing)

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

    r289757 r290613  
    3232        return WI.UIString("Flexbox Overlays", "Page Overlays for Flex containers @ Layout Sidebar Section Header", "Heading for list of flex container nodes");
    3333    }
     34
     35    initialLayout()
     36    {
     37        let settingsGroup = new WI.SettingsGroup(WI.UIString("Page Overlay Options", "Page Overlay Options @ Layout Panel Flex Section Header", "Heading for list of flex overlay options"));
     38        this.element.append(settingsGroup.element);
     39
     40        settingsGroup.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"));
     41
     42        super.initialLayout();
     43    }
    3444};

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

    r289757 r290613  
    3535    initialLayout()
    3636    {
    37         let settingsGroup = new WI.SettingsGroup(WI.UIString("Page Overlay Options", "Page Overlay Options @ Layout Panel Section Header", "Heading for list of grid overlay options"));
     37        let settingsGroup = new WI.SettingsGroup(WI.UIString("Page Overlay Options", "Page Overlay Options @ Layout Panel Grid Section Header", "Heading for list of grid overlay options"));
    3838        this.element.append(settingsGroup.element);
    3939
Note: See TracChangeset for help on using the changeset viewer.