Diff
Modified: trunk/Source/_javascript_Core/ChangeLog (290612 => 290613)
--- trunk/Source/_javascript_Core/ChangeLog 2022-02-28 21:00:47 UTC (rev 290612)
+++ trunk/Source/_javascript_Core/ChangeLog 2022-02-28 21:19:56 UTC (rev 290613)
@@ -1,3 +1,18 @@
+2022-02-28 Devin Rousso <drou...@apple.com>
+
+ 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.
+
+ * 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.
+
2022-02-28 Yusuke Suzuki <ysuz...@apple.com>
[JSC] Use DeferTerminationForAWhile in Interpreter::unwind
Modified: trunk/Source/_javascript_Core/inspector/protocol/DOM.json (290612 => 290613)
--- trunk/Source/_javascript_Core/inspector/protocol/DOM.json 2022-02-28 21:00:47 UTC (rev 290612)
+++ trunk/Source/_javascript_Core/inspector/protocol/DOM.json 2022-02-28 21:19:56 UTC (rev 290613)
@@ -531,7 +531,8 @@
"targetTypes": ["page"],
"parameters": [
{ "name": "nodeId", "$ref": "NodeId", "description": "The node for which a flex overlay should be shown." },
- { "name": "flexColor", "$ref": "RGBAColor", "description": "The primary color to use for the flex overlay." }
+ { "name": "flexColor", "$ref": "RGBAColor", "description": "The primary color to use for the flex overlay." },
+ { "name": "showOrderNumbers", "type": "boolean", "optional": true, "description": "Show labels for flex order. If not specified, the default value is false." }
]
},
{
Modified: trunk/Source/WebCore/ChangeLog (290612 => 290613)
--- trunk/Source/WebCore/ChangeLog 2022-02-28 21:00:47 UTC (rev 290612)
+++ trunk/Source/WebCore/ChangeLog 2022-02-28 21:19:56 UTC (rev 290613)
@@ -1,3 +1,30 @@
+2022-02-28 Devin Rousso <drou...@apple.com>
+
+ 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.
+
+ * 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.
+
2022-02-28 Chris Dumez <cdu...@apple.com>
Adopt the modern Hasher more widely
Modified: trunk/Source/WebCore/inspector/InspectorOverlay.cpp (290612 => 290613)
--- trunk/Source/WebCore/inspector/InspectorOverlay.cpp 2022-02-28 21:00:47 UTC (rev 290612)
+++ trunk/Source/WebCore/inspector/InspectorOverlay.cpp 2022-02-28 21:19:56 UTC (rev 290613)
@@ -1753,6 +1753,9 @@
constexpr auto spaceBetweenItemsAndCrossAxisSpaceStipplingDensity = 6;
for (const auto& crossAxisSpaceBetweenItemAndGap : flexHighlightOverlay.spaceBetweenItemsAndCrossAxisSpace)
drawLayoutStippling(context, crossAxisSpaceBetweenItemAndGap, spaceBetweenItemsAndCrossAxisSpaceStipplingDensity);
+
+ for (auto label : flexHighlightOverlay.labels)
+ label.draw(context);
}
std::optional<InspectorOverlay::Highlight::FlexHighlightOverlay> InspectorOverlay::buildFlexOverlay(const InspectorOverlay::Flex& flexOverlay)
@@ -1878,19 +1881,61 @@
float currentLineCrossAxisTrailingEdge = isCrossAxisDirectionReversed ? std::numeric_limits<float>::max() : 0.0f;
float previousLineCrossAxisTrailingEdge = correctedCrossAxisLeadingEdge(containerRect);
- size_t currentChildIndex = 0;
+ Vector<RenderBox*> renderChildrenInFlexOrder;
+ Vector<RenderObject*> renderChildrenInDOMOrder;
+ bool hasCustomOrder = false;
+
auto childOrderIterator = renderFlex.orderIterator();
for (RenderBox* renderChild = childOrderIterator.first(); renderChild; renderChild = childOrderIterator.next()) {
if (childOrderIterator.shouldSkipChild(*renderChild))
continue;
+ renderChildrenInFlexOrder.append(renderChild);
+ }
+ if (flexOverlay.config.showOrderNumbers) {
+ for (auto* child = node->firstChild(); child; child = child->nextSibling()) {
+ if (auto* renderer = child->renderer()) {
+ if (!renderChildrenInFlexOrder.contains(renderer))
+ continue;
+
+ renderChildrenInDOMOrder.append(renderer);
+
+ if (renderer->style().order())
+ hasCustomOrder = true;
+ }
+ }
+ }
+
+ size_t currentChildIndex = 0;
+ for (auto* renderChild : renderChildrenInFlexOrder) {
// Build bounds for each child and collect children on the same logical line.
{
auto childRect = renderChild->frameRect();
renderFlex.flipForWritingMode(childRect);
childRect.expand(renderChild->marginBox());
- flexHighlightOverlay.itemBounds.append(childQuadToRootQuad({ childRect }));
+ auto itemBounds = childQuadToRootQuad({ childRect });
+ flexHighlightOverlay.itemBounds.append(itemBounds);
+
+ if (flexOverlay.config.showOrderNumbers) {
+ StringBuilder orderNumbers;
+
+ if (auto index = renderChildrenInDOMOrder.find(renderChild); index != notFound) {
+ orderNumbers.append("Item #");
+ orderNumbers.append(index + 1);
+ }
+
+ if (auto order = renderChild->style().order(); order || hasCustomOrder) {
+ if (!orderNumbers.isEmpty())
+ orderNumbers.append('\n');
+ orderNumbers.append("order: ");
+ orderNumbers.append(order);
+ }
+
+ if (!orderNumbers.isEmpty())
+ flexHighlightOverlay.labels.append({ orderNumbers.toString(), itemBounds.center(), Color::white.colorWithAlphaByte(230), { InspectorOverlayLabel::Arrow::Direction::None, InspectorOverlayLabel::Arrow::Alignment::None } });
+ }
+
currentLineCrossAxisLeadingEdge = correctedCrossAxisMin(currentLineCrossAxisLeadingEdge, correctedCrossAxisLeadingEdge(childRect));
currentLineCrossAxisTrailingEdge = correctedCrossAxisMax(currentLineCrossAxisTrailingEdge, correctedCrossAxisTrailingEdge(childRect));
Modified: trunk/Source/WebCore/inspector/InspectorOverlay.h (290612 => 290613)
--- trunk/Source/WebCore/inspector/InspectorOverlay.h 2022-02-28 21:00:47 UTC (rev 290612)
+++ trunk/Source/WebCore/inspector/InspectorOverlay.h 2022-02-28 21:19:56 UTC (rev 290613)
@@ -124,6 +124,7 @@
Vector<FloatQuad> mainAxisSpaceBetweenItemsAndGaps;
Vector<FloatQuad> spaceBetweenItemsAndCrossAxisSpace;
Vector<FloatQuad> crossAxisGaps;
+ Vector<InspectorOverlayLabel> labels;
#if PLATFORM(IOS_FAMILY)
template<class Encoder> void encode(Encoder&) const;
@@ -181,6 +182,7 @@
WTF_MAKE_STRUCT_FAST_ALLOCATED;
Color flexColor;
+ bool showOrderNumbers;
};
WeakPtr<Node> flexNode;
@@ -286,6 +288,7 @@
encoder << mainAxisSpaceBetweenItemsAndGaps;
encoder << spaceBetweenItemsAndCrossAxisSpace;
encoder << crossAxisGaps;
+ encoder << labels;
}
template<class Decoder> std::optional<InspectorOverlay::Highlight::FlexHighlightOverlay> InspectorOverlay::Highlight::FlexHighlightOverlay::decode(Decoder& decoder)
@@ -305,6 +308,8 @@
return { };
if (!decoder.decode(flexHighlightOverlay.crossAxisGaps))
return { };
+ if (!decoder.decode(flexHighlightOverlay.labels))
+ return { };
return { flexHighlightOverlay };
}
Modified: trunk/Source/WebCore/inspector/agents/InspectorDOMAgent.cpp (290612 => 290613)
--- trunk/Source/WebCore/inspector/agents/InspectorDOMAgent.cpp 2022-02-28 21:00:47 UTC (rev 290612)
+++ trunk/Source/WebCore/inspector/agents/InspectorDOMAgent.cpp 2022-02-28 21:19:56 UTC (rev 290613)
@@ -1560,7 +1560,7 @@
return { };
}
-Inspector::Protocol::ErrorStringOr<void> InspectorDOMAgent::showFlexOverlay(Inspector::Protocol::DOM::NodeId nodeId, Ref<JSON::Object>&& flexColor)
+Inspector::Protocol::ErrorStringOr<void> InspectorDOMAgent::showFlexOverlay(Inspector::Protocol::DOM::NodeId nodeId, Ref<JSON::Object>&& flexColor, std::optional<bool>&& showOrderNumbers)
{
Protocol::ErrorString errorString;
Node* node = assertNode(errorString, nodeId);
@@ -1573,6 +1573,7 @@
InspectorOverlay::Flex::Config config;
config.flexColor = *parsedColor;
+ config.showOrderNumbers = showOrderNumbers.value_or(false);
m_overlay->setFlexOverlayForNode(*node, config);
Modified: trunk/Source/WebCore/inspector/agents/InspectorDOMAgent.h (290612 => 290613)
--- trunk/Source/WebCore/inspector/agents/InspectorDOMAgent.h 2022-02-28 21:00:47 UTC (rev 290612)
+++ trunk/Source/WebCore/inspector/agents/InspectorDOMAgent.h 2022-02-28 21:19:56 UTC (rev 290613)
@@ -150,7 +150,7 @@
Inspector::Protocol::ErrorStringOr<void> highlightFrame(const Inspector::Protocol::Network::FrameId&, RefPtr<JSON::Object>&& color, RefPtr<JSON::Object>&& outlineColor);
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);
Inspector::Protocol::ErrorStringOr<void> hideGridOverlay(std::optional<Inspector::Protocol::DOM::NodeId>&&);
- Inspector::Protocol::ErrorStringOr<void> showFlexOverlay(Inspector::Protocol::DOM::NodeId, Ref<JSON::Object>&& flexColor);
+ Inspector::Protocol::ErrorStringOr<void> showFlexOverlay(Inspector::Protocol::DOM::NodeId, Ref<JSON::Object>&& flexColor, std::optional<bool>&& showOrderNumbers);
Inspector::Protocol::ErrorStringOr<void> hideFlexOverlay(std::optional<Inspector::Protocol::DOM::NodeId>&&);
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);
Inspector::Protocol::ErrorStringOr<void> undo();
Modified: trunk/Source/WebInspectorUI/ChangeLog (290612 => 290613)
--- trunk/Source/WebInspectorUI/ChangeLog 2022-02-28 21:00:47 UTC (rev 290612)
+++ trunk/Source/WebInspectorUI/ChangeLog 2022-02-28 21:19:56 UTC (rev 290613)
@@ -1,5 +1,35 @@
2022-02-28 Devin Rousso <drou...@apple.com>
+ 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.
+
+ * 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.
+
+2022-02-28 Devin Rousso <drou...@apple.com>
+
Web Inspector: add `IterableWeakSet`
https://bugs.webkit.org/show_bug.cgi?id=237141
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (290612 => 290613)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2022-02-28 21:00:47 UTC (rev 290612)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2022-02-28 21:19:56 UTC (rev 290613)
@@ -1052,6 +1052,8 @@
/* Tooltip with instructions on how to show all hidden CSS variables */
localizedStrings["Option-click to show unused CSS variables from all rules @ Styles Sidebar Panel Tooltip"] = "Option-click to show unused CSS variables from all rules";
localizedStrings["Options"] = "Options";
+/* Label for option to toggle the order numbers setting for CSS flex overlays */
+localizedStrings["Order Numbers @ Layout Panel Overlay Options"] = "Order Numbers";
/* Property value for `font-variant-numeric: ordinal`. */
localizedStrings["Ordinal Letter Forms @ Font Details Sidebar Property Value"] = "Ordinal Letter Forms";
localizedStrings["Original formatting"] = "Original formatting";
@@ -1075,8 +1077,10 @@
localizedStrings["PNG"] = "PNG";
localizedStrings["Page"] = "Page";
localizedStrings["Page Issue"] = "Page Issue";
+/* Heading for list of flex overlay options */
+localizedStrings["Page Overlay Options @ Layout Panel Flex Section Header"] = "Page Overlay Options";
/* Heading for list of grid overlay options */
-localizedStrings["Page Overlay Options @ Layout Panel Section Header"] = "Page Overlay Options";
+localizedStrings["Page Overlay Options @ Layout Panel Grid Section Header"] = "Page Overlay Options";
/* Heading for list of grid nodes */
localizedStrings["Page Overlays @ Layout Sidebar Section Header"] = "Grid Overlays";
/* Heading for list of flex container nodes */
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js (290612 => 290613)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js 2022-02-28 21:00:47 UTC (rev 290612)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js 2022-02-28 21:19:56 UTC (rev 290613)
@@ -196,6 +196,7 @@
enableControlFlowProfiler: new WI.Setting("enable-control-flow-profiler", false),
enableElementsTabIndependentStylesDetailsSidebarPanel: new WI.Setting("elements-tab-independent-styles-details-panel", true),
enableLineWrapping: new WI.Setting("enable-line-wrapping", true),
+ flexOverlayShowOrderNumbers: new WI.Setting("flex-overlay-show-order-numbers", false),
frontendAppearance: new WI.Setting("frontend-appearance", "system"),
gridOverlayShowAreaNames: new WI.Setting("grid-overlay-show-area-names", false),
gridOverlayShowExtendedGridLines: new WI.Setting("grid-overlay-show-extended-grid-lines", false),
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js (290612 => 290613)
--- trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js 2022-02-28 21:00:47 UTC (rev 290612)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js 2022-02-28 21:19:56 UTC (rev 290613)
@@ -279,12 +279,16 @@
this.dispatchEventToListeners(WI.DOMNode.Event.LayoutOverlayHidden);
switch (oldLayoutContextType) {
+ case WI.DOMNode.LayoutContextType.Flex:
+ WI.settings.flexOverlayShowOrderNumbers.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
+ break;
+
case WI.DOMNode.LayoutContextType.Grid:
- WI.settings.gridOverlayShowExtendedGridLines.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
- WI.settings.gridOverlayShowLineNames.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
- WI.settings.gridOverlayShowLineNumbers.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
- WI.settings.gridOverlayShowTrackSizes.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
- WI.settings.gridOverlayShowAreaNames.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowExtendedGridLines.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowLineNames.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowLineNumbers.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowTrackSizes.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowAreaNames.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
break;
}
}
@@ -628,17 +632,21 @@
agentCommandFunction = target.DOMAgent.showGridOverlay;
if (!this._layoutOverlayShowing) {
- WI.settings.gridOverlayShowExtendedGridLines.addEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
- WI.settings.gridOverlayShowLineNames.addEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
- WI.settings.gridOverlayShowLineNumbers.addEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
- WI.settings.gridOverlayShowTrackSizes.addEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
- WI.settings.gridOverlayShowAreaNames.addEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowExtendedGridLines.addEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowLineNames.addEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowLineNumbers.addEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowTrackSizes.addEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowAreaNames.addEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
}
break;
case WI.DOMNode.LayoutContextType.Flex:
agentCommandArguments.flexColor = color.toProtocol();
+ agentCommandArguments.showOrderNumbers = WI.settings.flexOverlayShowOrderNumbers.value;
agentCommandFunction = target.DOMAgent.showFlexOverlay;
+
+ if (!this._layoutOverlayShowing)
+ WI.settings.flexOverlayShowOrderNumbers.addEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
break;
}
@@ -664,16 +672,18 @@
switch (this._layoutContextType) {
case WI.DOMNode.LayoutContextType.Grid:
- WI.settings.gridOverlayShowExtendedGridLines.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
- WI.settings.gridOverlayShowLineNames.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
- WI.settings.gridOverlayShowLineNumbers.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
- WI.settings.gridOverlayShowTrackSizes.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
- WI.settings.gridOverlayShowAreaNames.removeEventListener(WI.Setting.Event.Changed, this._handleGridLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowExtendedGridLines.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowLineNames.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowLineNumbers.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowTrackSizes.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
+ WI.settings.gridOverlayShowAreaNames.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
agentCommandFunction = target.DOMAgent.hideGridOverlay;
break;
case WI.DOMNode.LayoutContextType.Flex:
+ WI.settings.flexOverlayShowOrderNumbers.removeEventListener(WI.Setting.Event.Changed, this._handleLayoutOverlaySettingChanged, this);
+
agentCommandFunction = target.DOMAgent.hideFlexOverlay;
break;
}
@@ -1259,7 +1269,7 @@
this._layoutOverlayColorSetting = new WI.Setting(`overlay-color-${url.hash}-${this.path().hash}`, defaultConfiguration.colors[nextColorIndex]);
}
- _handleGridLayoutOverlaySettingChanged(event)
+ _handleLayoutOverlaySettingChanged(event)
{
if (this._layoutOverlayShowing)
this.showLayoutOverlay();
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSFlexNodeOverlayListSection.js (290612 => 290613)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSFlexNodeOverlayListSection.js 2022-02-28 21:00:47 UTC (rev 290612)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSFlexNodeOverlayListSection.js 2022-02-28 21:19:56 UTC (rev 290613)
@@ -31,4 +31,14 @@
{
return WI.UIString("Flexbox Overlays", "Page Overlays for Flex containers @ Layout Sidebar Section Header", "Heading for list of flex container nodes");
}
+
+ initialLayout()
+ {
+ 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"));
+ this.element.append(settingsGroup.element);
+
+ 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"));
+
+ super.initialLayout();
+ }
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridNodeOverlayListSection.js (290612 => 290613)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridNodeOverlayListSection.js 2022-02-28 21:00:47 UTC (rev 290612)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridNodeOverlayListSection.js 2022-02-28 21:19:56 UTC (rev 290613)
@@ -34,7 +34,7 @@
initialLayout()
{
- let settingsGroup = new WI.SettingsGroup(WI.UIString("Page Overlay Options", "Page Overlay Options @ Layout Panel Section Header", "Heading for list of grid overlay options"));
+ 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"));
this.element.append(settingsGroup.element);
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"));
