Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (273096 => 273097)
--- trunk/Source/WebInspectorUI/ChangeLog 2021-02-18 20:46:59 UTC (rev 273096)
+++ trunk/Source/WebInspectorUI/ChangeLog 2021-02-18 20:51:51 UTC (rev 273097)
@@ -1,3 +1,41 @@
+2021-02-18 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Elements: show badges for CSS Grid container elements
+ https://bugs.webkit.org/show_bug.cgi?id=221370
+
+ Reviewed by BJ Burg.
+
+ Clicking "grid" CSS badge shows/hides the grid overlay for the corresponding element.
+
+ * UserInterface/Base/Setting.js:
+ * UserInterface/Controllers/OverlayManager.js:
+ (WI.OverlayManager.prototype.isGridOverlayVisible):
+ (WI.OverlayManager.prototype.toggleGridOverlay):
+
+ * UserInterface/Main.html:
+ * UserInterface/Views/DOMTreeElement.css: Added.
+ (.tree-outline.dom .badge-css-grid):
+ (.tree-outline.dom .badge-css-grid.activated):
+ (.tree-outline.dom li.selected .badge-css-grid):
+ (.tree-outline.dom li.selected .badge-css-grid.activated):
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .badge-css-grid):
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .badge-css-grid.activated):
+ (@media (prefers-color-scheme: dark) .tree-outline.dom .badge-css-grid):
+
+ * UserInterface/Views/DOMTreeElement.js:
+ (WI.DOMTreeElement):
+ (WI.DOMTreeElement.prototype.onattach):
+ (WI.DOMTreeElement.prototype.ondetach):
+ (WI.DOMTreeElement.prototype.updateTitle):
+ (WI.DOMTreeElement.prototype._updateGridBadge):
+ (WI.DOMTreeElement.prototype._gridBadgeClicked):
+ (WI.DOMTreeElement.prototype._gridBadgeDoubleClicked):
+ (WI.DOMTreeElement.prototype._updateGridBadgeStatus):
+ (WI.DOMTreeElement.prototype._handleLayoutContextTypeChanged):
+
+ * UserInterface/Views/SettingsTabContentView.js:
+ (WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
+
2021-02-18 Razvan Caliman <rcali...@apple.com>
Web Inspector: Update .eslintrc to account for ECMAScript 2021
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js (273096 => 273097)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js 2021-02-18 20:46:59 UTC (rev 273096)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js 2021-02-18 20:51:51 UTC (rev 273097)
@@ -229,6 +229,7 @@
experimentalEnableStylesJumpToEffective: new WI.Setting("experimental-styles-jump-to-effective", false),
experimentalEnableStylesJumpToVariableDeclaration: new WI.Setting("experimental-styles-jump-to-variable-declaration", false),
experimentalEnableLayoutPanel: new WI.Setting("experimental-enable-layout-panel", false),
+ experimentalEnableGridBadges: new WI.Setting("experimental-enable-grid-badges", false),
experimentalCollapseBlackboxedCallFrames: new WI.Setting("experimental-collapse-blackboxed-call-frames", false),
// Protocol
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js (273096 => 273097)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js 2021-02-18 20:46:59 UTC (rev 273096)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js 2021-02-18 20:51:51 UTC (rev 273097)
@@ -95,6 +95,19 @@
this.dispatchEventToListeners(WI.OverlayManager.Event.GridOverlayHidden, overlay);
}
+ isGridOverlayVisible(domNode)
+ {
+ return this._gridOverlayForNodeMap.has(domNode);
+ }
+
+ toggleGridOverlay(domNode)
+ {
+ if (this.isGridOverlayVisible(domNode))
+ this.hideGridOverlay(domNode);
+ else
+ this.showGridOverlay(domNode);
+ }
+
// Private
_handleLayoutContextTypeChanged(event)
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (273096 => 273097)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2021-02-18 20:46:59 UTC (rev 273096)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2021-02-18 20:51:51 UTC (rev 273097)
@@ -93,6 +93,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=""
Added: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.css (0 => 273097)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.css 2021-02-18 20:51:51 UTC (rev 273097)
@@ -0,0 +1,68 @@
+/*
+ * 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.
+ */
+
+.tree-outline.dom .badge-css-grid {
+ /* Using sans-serif San Francisco font here creates a badge 1px taller than the selected
+ area. Use the same monospace font as the rest of the DOM tree outline. */
+
+ font-size: 10px;
+ line-height: 10px;
+ color: var(--text-color);
+ background: hsla(0, 0%, 0%, 0.05);
+ border: 1px solid hsla(0, 0%, var(--foreground-lightness), 0.1);
+ border-radius: 3px;
+ margin-left: 3px;
+ padding: 0 2px;
+}
+
+.tree-outline.dom .badge-css-grid.activated {
+ background: var(--glyph-color-active);
+ color: white;
+}
+
+.tree-outline.dom li.selected .badge-css-grid {
+ color: hsla(0, 0%, var(--foreground-lightness), 0.5);
+ background-color: transparent;
+}
+
+.tree-outline.dom li.selected .badge-css-grid.activated {
+ background: var(--glyph-color-disabled);
+ color: white;
+}
+
+body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .badge-css-grid {
+ border-color: hsla(0, 0%, 100%, 0.2);
+}
+
+body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .badge-css-grid.activated {
+ background: hsla(0, 0%, 100%, 0.3);
+}
+
+@media (prefers-color-scheme: dark) {
+ .tree-outline.dom .badge-css-grid {
+ background: hsla(0, 0%, 100%, 0.05);
+ border-color: hsla(0, 0%, 100%, 0.1);
+ }
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js (273096 => 273097)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2021-02-18 20:46:59 UTC (rev 273096)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2021-02-18 20:51:51 UTC (rev 273097)
@@ -51,6 +51,7 @@
this._highlightedAttributes = new Set;
this._recentlyModifiedAttributes = new Map;
this._closeTagTreeElement = null;
+ this._gridBadgeElement = null;
node.addEventListener(WI.DOMNode.Event.EnabledPseudoClassesChanged, this._updatePseudoClassIndicator, this);
@@ -442,8 +443,25 @@
this.listItemElement.draggable = true;
this.listItemElement.addEventListener("dragstart", this);
}
+
+ if (this.representedObject.layoutContextType === WI.DOMNode.LayoutContextType.Grid) {
+ WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayShown, this._updateGridBadgeStatus, this);
+ WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._updateGridBadgeStatus, this);
+ }
+ this.representedObject.addEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
+
+ this._updateGridBadge();
}
+ ondetach()
+ {
+ if (this.representedObject.layoutContextType === WI.DOMNode.LayoutContextType.Grid) {
+ WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayShown, this._updateGridBadgeStatus, this);
+ WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._updateGridBadgeStatus, this);
+ }
+ this.representedObject.removeEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
+ }
+
onpopulate()
{
if (this.children.length || !this._hasVisibleChildren() || this._elementCloseTag)
@@ -1316,6 +1334,7 @@
this.title.appendChild(this._nodeTitleInfo().titleDOM);
this._highlightResult = undefined;
}
+ this._updateGridBadge();
// Setting this.title will implicitly remove all children. Clear the
// selection element so that we properly recreate it if necessary.
@@ -1990,6 +2009,70 @@
this._animatingHighlight = false;
}
+
+ _updateGridBadge()
+ {
+ if (!WI.settings.experimentalEnableGridBadges.value)
+ return;
+
+ if (!this.listItemElement || this._elementCloseTag)
+ return;
+
+ if (this._gridBadgeElement) {
+ this._gridBadgeElement.remove();
+ this._gridBadgeElement = null;
+ }
+
+ if (this.representedObject.layoutContextType !== WI.DOMNode.LayoutContextType.Grid)
+ return;
+
+ this._gridBadgeElement = document.createElement("span");
+ this._gridBadgeElement.className = "badge-css-grid";
+ this._gridBadgeElement.textContent = WI.unlocalizedString("grid");
+ this._updateGridBadgeStatus();
+ this.title.append(this._gridBadgeElement);
+
+ this._gridBadgeElement.addEventListener("click", this._gridBadgeClicked.bind(this), true);
+ this._gridBadgeElement.addEventListener("dblclick", this._gridBadgeDoubleClicked, true);
+ }
+
+ _gridBadgeClicked(event)
+ {
+ if (event.button !== 0 || event.ctrlKey)
+ return;
+
+ // Don't expand or collapse a tree element when clicking on the grid badge.
+ event.stop();
+
+ WI.overlayManager.toggleGridOverlay(this.representedObject);
+ }
+
+ _gridBadgeDoubleClicked(event)
+ {
+ event.stop();
+ }
+
+ _updateGridBadgeStatus()
+ {
+ if (!this._gridBadgeElement)
+ return;
+
+ this._gridBadgeElement.classList.toggle("activated", WI.overlayManager.isGridOverlayVisible(this.representedObject));
+ }
+
+ _handleLayoutContextTypeChanged(event)
+ {
+ let domNode = event.target;
+ if (domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid) {
+ WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayShown, this._updateGridBadgeStatus, this);
+ WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._updateGridBadgeStatus, this);
+ } else {
+ WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayShown, this._updateGridBadgeStatus, this);
+ WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._updateGridBadgeStatus, this);
+ }
+
+ this._updateGridBadge();
+ }
};
WI.DOMTreeElement.InitialChildrenLimit = 500;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js (273096 => 273097)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js 2021-02-18 20:46:59 UTC (rev 273096)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js 2021-02-18 20:51:51 UTC (rev 273097)
@@ -399,6 +399,7 @@
stylesGroup.addSetting(WI.settings.experimentalEnableStylesJumpToEffective, WI.UIString("Show jump to effective property button"));
stylesGroup.addSetting(WI.settings.experimentalEnableStylesJumpToVariableDeclaration, WI.UIString("Show jump to variable declaration button"));
stylesGroup.addSetting(WI.settings.experimentalEnableLayoutPanel, WI.UIString("Show Layout panel"));
+ stylesGroup.addSetting(WI.settings.experimentalEnableGridBadges, WI.unlocalizedString("Show \"grid\" badges"));
experimentalSettingsView.addSeparator();
}
@@ -429,6 +430,7 @@
if (hasCSSDomain) {
listenForChange(WI.settings.experimentalEnableLayoutPanel);
+ listenForChange(WI.settings.experimentalEnableGridBadges);
listenForChange(WI.settings.experimentalEnableStylesJumpToEffective);
listenForChange(WI.settings.experimentalEnableStylesJumpToVariableDeclaration);
}
