Diff
Modified: trunk/LayoutTests/ChangeLog (272669 => 272670)
--- trunk/LayoutTests/ChangeLog 2021-02-10 19:58:12 UTC (rev 272669)
+++ trunk/LayoutTests/ChangeLog 2021-02-10 20:02:54 UTC (rev 272670)
@@ -1,3 +1,17 @@
+2021-02-10 Razvan Caliman <rcali...@apple.com>
+
+ Web Inspector: Display all CSS grids on page in Layout panel
+ https://bugs.webkit.org/show_bug.cgi?id=221145
+ <rdar://problem/73764515>
+
+ Reviewed by Devin Rousso.
+
+ DOMNode.layoutContextType is null when not defined.
+ Update layout test and corresponding expected result.
+
+ * inspector/css/nodeLayoutContextTypeChanged-expected.txt:
+ * inspector/css/nodeLayoutContextTypeChanged.html:
+
2021-02-10 Antti Koivisto <an...@apple.com>
[LFC][Integration] Paint invalidation for inline element style changes
Modified: trunk/LayoutTests/inspector/css/nodeLayoutContextTypeChanged-expected.txt (272669 => 272670)
--- trunk/LayoutTests/inspector/css/nodeLayoutContextTypeChanged-expected.txt 2021-02-10 19:58:12 UTC (rev 272669)
+++ trunk/LayoutTests/inspector/css/nodeLayoutContextTypeChanged-expected.txt 2021-02-10 20:02:54 UTC (rev 272670)
@@ -4,9 +4,9 @@
== Running test suite: CSS.nodeLayoutContextTypeChanged
-- Running test case: CSS.nodeLayoutContextTypeChanged.GridToNonGrid
PASS: Layout context should be `grid`.
-PASS: Layout context should now be `undefined`.
+PASS: Layout context should now be `null`.
-- Running test case: CSS.nodeLayoutContextTypeChanged.NonGridToGrid
-PASS: Layout context should be `undefined`.
+PASS: Layout context should be `null`.
PASS: Layout context should now be `grid`.
Modified: trunk/LayoutTests/inspector/css/nodeLayoutContextTypeChanged.html (272669 => 272670)
--- trunk/LayoutTests/inspector/css/nodeLayoutContextTypeChanged.html 2021-02-10 19:58:12 UTC (rev 272669)
+++ trunk/LayoutTests/inspector/css/nodeLayoutContextTypeChanged.html 2021-02-10 20:02:54 UTC (rev 272670)
@@ -45,7 +45,7 @@
changeElementDisplayValue("gridToNonGrid", "block"),
]);
- InspectorTest.expectEqual(domNode.layoutContextType, undefined, "Layout context should now be `undefined`.");
+ InspectorTest.expectEqual(domNode.layoutContextType, null, "Layout context should now be `null`.");
}
});
@@ -54,7 +54,7 @@
description: "Change a non-grid to a grid.",
selector: "#nonGridToGrid",
async domNodeHandler(domNode) {
- InspectorTest.expectEqual(domNode.layoutContextType, undefined, "Layout context should be `undefined`.");
+ InspectorTest.expectEqual(domNode.layoutContextType, null, "Layout context should be `null`.");
await Promise.all([
domNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged),
@@ -89,4 +89,4 @@
<div></div>
</div>
</body>
-</html>
\ No newline at end of file
+</html>
Modified: trunk/Source/WebInspectorUI/ChangeLog (272669 => 272670)
--- trunk/Source/WebInspectorUI/ChangeLog 2021-02-10 19:58:12 UTC (rev 272669)
+++ trunk/Source/WebInspectorUI/ChangeLog 2021-02-10 20:02:54 UTC (rev 272670)
@@ -1,3 +1,62 @@
+2021-02-10 Razvan Caliman <rcali...@apple.com>
+
+ Web Inspector: Display all CSS grids on page in Layout panel
+ https://bugs.webkit.org/show_bug.cgi?id=221145
+ <rdar://problem/73764515>
+
+ Reviewed by Devin Rousso.
+
+ Show a list of CSS Grid containers in the Layout sidebar panel of the Elements Tab.
+ Whenever grid nodes are added to or removed from the page, the list is updated.
+
+ Clicking on a checkbox next to a grid node toggles the Grid overlay for that node.
+ Changing the color of the swatch next to a grid node updates the color of the overlay if it is visible.
+
+ Add OverlayManager to mediate showing and hiding Grid overlays.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ * UserInterface/Base/Main.js:
+ (WI.loaded):
+ * UserInterface/Controllers/OverlayManager.js: Added.
+ (WI.OverlayManager):
+ (WI.OverlayManager.prototype.get nodesWithGridOverlay):
+ (WI.OverlayManager.prototype.showGridOverlay):
+ (WI.OverlayManager.prototype.hideGridOverlay):
+ `OverlayManager` is a singleton used to show and hide overlays for nodes on the inspected page.
+ It maintains state of all overlays that are visible on the page. It fires events when they are shown or hidden.
+
+ * UserInterface/Main.html:
+ * UserInterface/Models/DOMNode.js:
+ (WI.DOMNode):
+ (WI.DOMNode.prototype.set layoutContextType):
+ (WI.DOMNode.prototype.markDestroyed):
+ Whenever a node is removed from the DOM, its `layoutContextType` property changes to `null`.
+ This dispatches a `WI.DOMNode.Event.LayoutContextTypeChanged` event which is handled in `CSSGridSection`
+ to refresh the list of grid node containers on the page.
+
+ * UserInterface/Views/BoxModelDetailsSectionRow.js:
+ (WI.BoxModelDetailsSectionRow.prototype.set nodeStyles):
+ * UserInterface/Views/CSSGridSection.css: Added.
+ (.css-grid-section .node-link):
+ (.css-grid-section .heading):
+ * UserInterface/Views/CSSGridSection.js: Added.
+ (WI.CSSGridSection):
+ (WI.CSSGridSection.prototype.attached):
+ (WI.CSSGridSection.prototype.detached):
+ (WI.CSSGridSection.prototype.initialLayout):
+ (WI.CSSGridSection.prototype.layout):
+ (WI.CSSGridSection.prototype._handleGridOverlayStateChanged):
+ (WI.CSSGridSection.prototype._handleLayoutContextTypeChanged):
+ (WI.CSSGridSection.prototype._refreshGridNodeSet):
+ `CSSGridSection` is a new `View` under `LayoutDetailsSidebarPanel`.
+ It holds a list of grid nodes on the page and a set of configuration options
+ to pass when showing the Grid overlay (upcoming in separate patch).
+
+ * UserInterface/Views/LayoutDetailsSidebarPanel.css: Added.
+ (.details-section.layout-css-grid > .content > .group > .row > .css-grid-section):
+ * UserInterface/Views/LayoutDetailsSidebarPanel.js:
+ (WI.LayoutDetailsSidebarPanel.prototype.initialLayout):
+
2021-02-09 Devin Rousso <drou...@apple.com>
[Cocoa] rename `ENGINEERING_BUILD` to `ENABLE_DEVELOPER_MODE` to match other platforms
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (272669 => 272670)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2021-02-10 19:58:12 UTC (rev 272669)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2021-02-10 20:02:54 UTC (rev 272670)
@@ -703,6 +703,8 @@
localizedStrings["Grammar"] = "Grammar";
/* Name of Graphics Tab */
localizedStrings["Graphics Tab Name"] = "Graphics";
+/* CSS Grid layout section name */
+localizedStrings["Grid @ Elements details sidebar"] = "Grid";
localizedStrings["Group"] = "Group";
/* Dropdown option inside the popover used to creating an audit group. */
localizedStrings["Group @ Audit Tab Navigation Sidebar"] = "Group";
@@ -1029,6 +1031,8 @@
localizedStrings["PNG"] = "PNG";
localizedStrings["Page"] = "Page";
localizedStrings["Page Issue"] = "Page Issue";
+/* Heading for list of grid nodes */
+localizedStrings["Page Overlays @ Layout Sidebar Section Header"] = "Grid Overlays";
localizedStrings["Page navigated at %s"] = "Page navigated at %s";
localizedStrings["Page reloaded at %s"] = "Page reloaded at %s";
/* Paint (render) phase timeline records */
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (272669 => 272670)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2021-02-10 19:58:12 UTC (rev 272669)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2021-02-10 20:02:54 UTC (rev 272670)
@@ -127,6 +127,7 @@
WI.domDebuggerManager = new WI.DOMDebuggerManager,
WI.canvasManager = new WI.CanvasManager,
WI.animationManager = new WI.AnimationManager,
+ WI.overlayManager = new WI.OverlayManager,
];
// Register for events.
Added: trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js (0 => 272670)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js 2021-02-10 20:02:54 UTC (rev 272670)
@@ -0,0 +1,92 @@
+/*
+ * Copyright (C) 2021 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WI.OverlayManager = class OverlayManager extends WI.Object
+{
+ constructor()
+ {
+ super();
+
+ this._gridOverlayForNodeMap = new Map;
+ }
+
+ // Public
+
+ get nodesWithGridOverlay()
+ {
+ return Array.from(this._gridOverlayForNodeMap.keys());
+ }
+
+ showGridOverlay(domNode, {color, showLineNames, showLineNumbers, showExtendedGridLines, showTrackSizes, showAreaNames} = {})
+ {
+ console.assert(!domNode.destroyed, domNode);
+ if (domNode.destroyed)
+ return;
+
+ console.assert(domNode instanceof WI.DOMNode, domNode);
+ console.assert(!color || color instanceof WI.Color, color);
+
+ color ||= WI.Color.fromString("magenta"); // fallback color
+
+ let target = WI.assumingMainTarget();
+ let commandArguments = {
+ nodeId: domNode.id,
+ gridColor: color.toProtocol(),
+ showLineNames: !!showLineNames,
+ showLineNumbers: !!showLineNumbers,
+ showExtendedGridLines: !!showExtendedGridLines,
+ showTrackSizes: !!showTrackSizes,
+ showAreaNames: !!showAreaNames,
+ };
+ target.DOMAgent.showGridOverlay.invoke(commandArguments);
+
+ let overlay = {domNode, ...commandArguments};
+ this._gridOverlayForNodeMap.set(domNode, overlay);
+
+ this.dispatchEventToListeners(WI.OverlayManager.Event.GridOverlayShown, overlay);
+ }
+
+ hideGridOverlay(domNode)
+ {
+ console.assert(domNode instanceof WI.DOMNode, domNode);
+ console.assert(!domNode.destroyed, domNode);
+ if (domNode.destroyed)
+ return;
+
+ let overlay = this._gridOverlayForNodeMap.take(domNode);
+ if (!overlay)
+ return;
+
+ let target = WI.assumingMainTarget();
+ target.DOMAgent.hideGridOverlay(domNode.id);
+
+ this.dispatchEventToListeners(WI.OverlayManager.Event.GridOverlayHidden, overlay);
+ }
+};
+
+WI.OverlayManager.Event = {
+ GridOverlayShown: "overlay-manager-grid-overlay-shown",
+ GridOverlayHidden: "overlay-manager-grid-overlay-hidden",
+};
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (272669 => 272670)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2021-02-10 19:58:12 UTC (rev 272669)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2021-02-10 20:02:54 UTC (rev 272670)
@@ -85,6 +85,7 @@
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
@@ -136,6 +137,7 @@
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
@@ -633,6 +635,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
@@ -908,6 +911,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js (272669 => 272670)
--- trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js 2021-02-10 19:58:12 UTC (rev 272669)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js 2021-02-10 20:02:54 UTC (rev 272670)
@@ -52,7 +52,7 @@
this._shadowRootType = payload.shadowRootType;
this._computedRole = null;
this._contentSecurityPolicyHash = payload.contentSecurityPolicyHash;
- this._layoutContextType = payload.layoutContextType;
+ this._layoutContextType = null;
if (this._nodeType === Node.DOCUMENT_NODE)
this.ownerDocument = this;
@@ -154,6 +154,9 @@
if (this.isMediaElement())
WI.DOMNode.addEventListener(WI.DOMNode.Event.DidFireEvent, this._handleDOMNodeDidFireEvent, this);
+
+ // Setting layoutContextType to anything other than null will dispatch an event.
+ this.layoutContextType = payload.layoutContextType;
}
// Static
@@ -250,7 +253,10 @@
set layoutContextType(layoutContextType)
{
- console.assert(layoutContextType !== this._layoutContextType);
+ layoutContextType ||= null;
+ if (layoutContextType === this._layoutContextType)
+ return;
+
this._layoutContextType = layoutContextType;
this.dispatchEventToListeners(WI.DOMNode.Event.LayoutContextTypeChanged);
}
@@ -259,6 +265,8 @@
{
console.assert(!this._destroyed, this);
this._destroyed = true;
+
+ this.layoutContextType = null;
}
computedRole()
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js (272669 => 272670)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js 2021-02-10 19:58:12 UTC (rev 272669)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js 2021-02-10 20:02:54 UTC (rev 272670)
@@ -53,6 +53,7 @@
if (this._nodeStyles && this._nodeStyles.computedStyle)
this._nodeStyles.computedStyle.addEventListener(WI.CSSStyleDeclaration.Event.PropertiesChanged, this._refresh, this);
+ this.element.classList.remove("hovered");
this._refresh();
}
Added: trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css (0 => 272670)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css 2021-02-10 20:02:54 UTC (rev 272670)
@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2021 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.css-grid-section .node-link {
+ margin-inline: 5px;
+}
+
+.css-grid-section .heading {
+ font-size: 11px;
+ margin-top: 10px;
+ margin-bottom: 5px;
+ font-weight: 500;
+ color: var(--text-color)
+}
Added: trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js (0 => 272670)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js 2021-02-10 20:02:54 UTC (rev 272670)
@@ -0,0 +1,134 @@
+/*
+ * Copyright (C) 2021 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WI.CSSGridSection = class CSSGridSection extends WI.View
+{
+ constructor()
+ {
+ super();
+
+ this.element.classList.add("css-grid-section");
+
+ this._gridNodeSet = new Set;
+ this._checkboxElementByNodeMap = new WeakMap;
+ }
+
+ // Protected
+
+ attached()
+ {
+ super.attached();
+
+ WI.DOMNode.addEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
+ WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayShown, this._handleGridOverlayStateChanged, this);
+ WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._handleGridOverlayStateChanged, this);
+
+ this._refreshGridNodeSet();
+ }
+
+ detached()
+ {
+ WI.DOMNode.removeEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
+ WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayShown, this._handleGridOverlayStateChanged, this);
+ WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._handleGridOverlayStateChanged, this);
+
+ super.detached();
+ }
+
+ initialLayout()
+ {
+ super.initialLayout();
+
+ let listHeading = this.element.appendChild(document.createElement("h2"));
+ listHeading.classList.add("heading");
+ listHeading.textContent = WI.UIString("Grid Overlays", "Page Overlays @ Layout Sidebar Section Header", "Heading for list of grid nodes");
+
+ this._listElement = this.element.appendChild(document.createElement("ul"));
+ this._listElement.classList.add("node-link-list");
+ }
+
+ layout()
+ {
+ super.layout();
+
+ this._listElement.removeChildren();
+
+ let nodesWithGridOverlay = WI.overlayManager.nodesWithGridOverlay;
+
+ for (let domNode of this._gridNodeSet) {
+ let itemElement = this._listElement.appendChild(document.createElement("li"));
+ let labelElement = itemElement.appendChild(document.createElement("label"));
+ let checkboxElement = labelElement.appendChild(document.createElement("input"));
+ checkboxElement.type = "checkbox";
+ checkboxElement.checked = nodesWithGridOverlay.includes(domNode);
+ labelElement.appendChild(WI.linkifyNodeReference(domNode));
+
+ this._checkboxElementByNodeMap.set(domNode, checkboxElement);
+
+ checkboxElement.addEventListener("change", (event) => {
+ if (checkboxElement.checked)
+ WI.overlayManager.showGridOverlay(domNode, {color: swatch.value});
+ else
+ WI.overlayManager.hideGridOverlay(domNode);
+ });
+
+ let swatch = new WI.InlineSwatch(WI.InlineSwatch.Type.Color, WI.Color.fromString("magenta"));
+ itemElement.append(swatch.element);
+
+ swatch.addEventListener(WI.InlineSwatch.Event.ValueChanged, (event) => {
+ if (checkboxElement.checked)
+ WI.overlayManager.showGridOverlay(domNode, {color: event.data.value});
+ }, swatch);
+ }
+ }
+
+ // Private
+
+ _handleGridOverlayStateChanged(event)
+ {
+ let checkboxElement = this._checkboxElementByNodeMap.get(event.data.domNode);
+ if (!checkboxElement)
+ return;
+
+ checkboxElement.checked = event.type === WI.OverlayManager.Event.GridOverlayShown;
+ }
+
+ _handleLayoutContextTypeChanged(event)
+ {
+ let domNode = event.target;
+ if (domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid)
+ this._gridNodeSet.add(domNode);
+ else
+ this._gridNodeSet.delete(domNode);
+
+ this.needsLayout();
+ }
+
+ _refreshGridNodeSet()
+ {
+ this._gridNodeSet = new Set(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid));
+ this.needsLayout();
+ }
+};
Added: trunk/Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.css (0 => 272670)
--- trunk/Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.css 2021-02-10 20:02:54 UTC (rev 272670)
@@ -0,0 +1,30 @@
+/*
+ * Copyright (C) 2021 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.details-section.layout-css-grid > .content > .group > .row > .css-grid-section {
+ margin-inline-start: 6px;
+ margin-inline-end: 4px;
+ margin-bottom: 4px;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.js (272669 => 272670)
--- trunk/Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.js 2021-02-10 19:58:12 UTC (rev 272669)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.js 2021-02-10 20:02:54 UTC (rev 272670)
@@ -101,6 +101,15 @@
let boxModelGroup = new WI.DetailsSectionGroup([this._boxModelDiagramRow]);
let boxModelSection = new WI.DetailsSection("layout-box-model", WI.UIString("Box Model"), [boxModelGroup]);
this.contentView.element.appendChild(boxModelSection.element);
+
+ let cssGridRow = new WI.DetailsSectionRow;
+ let gridGroup = new WI.DetailsSectionGroup([cssGridRow]);
+ let gridSection = new WI.DetailsSection("layout-css-grid", WI.UIString("Grid", "Grid @ Elements details sidebar", "CSS Grid layout section name"), [gridGroup]);
+ this.contentView.element.appendChild(gridSection.element);
+
+ let cssGridSection = new WI.CSSGridSection;
+ cssGridRow.element.appendChild(cssGridSection.element);
+ this.addSubview(cssGridSection);
}
layout()
