Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (289609 => 289610)
--- trunk/Source/WebInspectorUI/ChangeLog 2022-02-11 08:40:49 UTC (rev 289609)
+++ trunk/Source/WebInspectorUI/ChangeLog 2022-02-11 08:44:23 UTC (rev 289610)
@@ -1,3 +1,77 @@
+2022-02-11 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: [Flexbox] Show flex badge next to flex containers in DOM Tree
+ https://bugs.webkit.org/show_bug.cgi?id=235924
+
+ Reviewed by Patrick Angle.
+
+ Elements with `display: flex` and `display: inline-flex` should include a "flex" badge.
+ Clicking the badge should toggle the overlay for the corresponding element.
+
+ * UserInterface/Controllers/GridOverlayConfigurationDiagnosticEventRecorder.js:
+ (WI.GridOverlayConfigurationDiagnosticEventRecorder.prototype.setup):
+ (WI.GridOverlayConfigurationDiagnosticEventRecorder.prototype.teardown):
+ (WI.GridOverlayConfigurationDiagnosticEventRecorder.prototype._handleGridOverlayShown):
+ * UserInterface/Controllers/GridOverlayDiagnosticEventRecorder.js:
+ (WI.GridOverlayDiagnosticEventRecorder.prototype.setup):
+ (WI.GridOverlayDiagnosticEventRecorder.prototype.teardown):
+ (WI.GridOverlayDiagnosticEventRecorder.prototype._handleGridOverlayShown):
+ (WI.GridOverlayDiagnosticEventRecorder):
+ * UserInterface/Controllers/OverlayManager.js:
+ (WI.OverlayManager):
+ (WI.OverlayManager.prototype.showOverlay):
+ (WI.OverlayManager.prototype.hideOverlay):
+ (WI.OverlayManager.prototype.hasVisibleGridOverlays):
+ (WI.OverlayManager.prototype.hasVisibleOverlay):
+ (WI.OverlayManager.prototype.toggleOverlay):
+ (WI.OverlayManager.prototype.getColorForNode):
+ (WI.OverlayManager.prototype.setColorForNode):
+ (WI.OverlayManager.prototype._handleLayoutContextTypeChanged):
+ (WI.OverlayManager.prototype._handleGridSettingChanged):
+ (WI.OverlayManager.prototype._handleMainResourceDidChange):
+ (WI.OverlayManager.prototype.showGridOverlay): Deleted.
+ (WI.OverlayManager.prototype.hideGridOverlay): Deleted.
+ (WI.OverlayManager.prototype.isGridOverlayVisible): Deleted.
+ (WI.OverlayManager.prototype.toggleGridOverlay): Deleted.
+ (WI.OverlayManager.prototype.getGridColorForNode): Deleted.
+ (WI.OverlayManager.prototype.setGridColorForNode): Deleted.
+ Remove grid-specific methods (such as showGridOverlay) and introduce methods that work with
+ both Grid and Flexbox (such as showOverlay).
+
+ * UserInterface/Views/CSSGridSection.js:
+ (WI.CSSGridSection.prototype.attached):
+ (WI.CSSGridSection.prototype.detached):
+ (WI.CSSGridSection.prototype._handleToggleAllCheckboxChanged):
+ (WI.CSSGridSection.prototype.layout):
+ (WI.CSSGridSection.prototype._handleGridOverlayStateChanged):
+ (WI.CSSGridSection.prototype._updateToggleAllCheckbox):
+ (WI.CSSGridSection):
+ * UserInterface/Views/DOMTreeElement.css:
+ (.tree-outline.dom .layout-badge):
+ (.tree-outline.dom .layout-badge.activated):
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .layout-badge):
+ (@media (prefers-color-scheme: dark) .tree-outline.dom .layout-badge):
+ (.tree-outline.dom .badge-css-grid): Deleted.
+ (.tree-outline.dom .badge-css-grid.activated): Deleted.
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .badge-css-grid): Deleted.
+ (@media (prefers-color-scheme: dark) .tree-outline.dom .badge-css-grid): Deleted.
+
+ * UserInterface/Views/DOMTreeElement.js:
+ (WI.DOMTreeElement):
+ (WI.DOMTreeElement.prototype.onattach):
+ (WI.DOMTreeElement.prototype.ondetach):
+ (WI.DOMTreeElement.prototype.updateTitle):
+ (WI.DOMTreeElement.prototype._updateLayoutBadge):
+ (WI.DOMTreeElement.prototype._layoutBadgeClicked):
+ (WI.DOMTreeElement.prototype._updateLayoutBadgeStatus):
+ (WI.DOMTreeElement.prototype._handleLayoutContextTypeChanged):
+ (WI.DOMTreeElement.prototype._updateGridBadge): Deleted.
+ (WI.DOMTreeElement.prototype._gridBadgeClicked): Deleted.
+ (WI.DOMTreeElement.prototype._gridBadgeDoubleClicked): Deleted.
+ (WI.DOMTreeElement.prototype._updateGridBadgeStatus): Deleted.
+ Renamed `_gridBadgeElement` to `_layoutBadgeElement`. We can't have both "flex" and "grid" badge on the same element,
+ so I called it "layoutBadge". I didn't call it simply "badge" because we may have other badges in the future.
+
2022-02-03 Nikita Vasilyev <nvasil...@apple.com>
Web Inspector: [Flexbox] Add setting to guard Flexbox Inspector feature
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/GridOverlayConfigurationDiagnosticEventRecorder.js (289609 => 289610)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/GridOverlayConfigurationDiagnosticEventRecorder.js 2022-02-11 08:40:49 UTC (rev 289609)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/GridOverlayConfigurationDiagnosticEventRecorder.js 2022-02-11 08:44:23 UTC (rev 289610)
@@ -51,8 +51,8 @@
window.addEventListener("blur", this, options);
window.addEventListener("keydown", this, options);
window.addEventListener("mousedown", this, options);
- WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayShown, this._handleGridOverlayShown, this);
- WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._handleGridOverlayHidden, this);
+ WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayShown, this._handleGridOverlayShown, this);
+ WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayHidden, this._handleGridOverlayHidden, this);
}
teardown()
@@ -64,8 +64,8 @@
window.removeEventListener("blur", this, options);
window.removeEventListener("keydown", this, options);
window.removeEventListener("mousedown", this, options);
- WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayShown, this._handleGridOverlayShown, this);
- WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._handleGridOverlayHidden, this);
+ WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayShown, this._handleGridOverlayShown, this);
+ WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayHidden, this._handleGridOverlayHidden, this);
this._stopEventSamplingTimerIfNeeded();
}
@@ -72,6 +72,9 @@
_handleGridOverlayShown(event)
{
+ if (event.data.domNode.layoutContextType !== WI.DOMNode.LayoutContextType.Grid)
+ return;
+
this._overlayOptions.showTrackSizes = event.data.showTrackSizes;
this._overlayOptions.showLineNumbers = event.data.showLineNumbers;
this._overlayOptions.showLineNames = event.data.showLineNames;
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/GridOverlayDiagnosticEventRecorder.js (289609 => 289610)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/GridOverlayDiagnosticEventRecorder.js 2022-02-11 08:40:49 UTC (rev 289609)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/GridOverlayDiagnosticEventRecorder.js 2022-02-11 08:44:23 UTC (rev 289610)
@@ -36,12 +36,12 @@
setup()
{
- WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayShown, this._handleGridOverlayShown, this);
+ WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayShown, this._handleGridOverlayShown, this);
}
teardown()
{
- WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayShown, this._handleGridOverlayShown, this);
+ WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayShown, this._handleGridOverlayShown, this);
}
// Private
@@ -48,6 +48,9 @@
_handleGridOverlayShown(event)
{
+ if (event.data.domNode.layoutContextType !== WI.DOMNode.LayoutContextType.Grid)
+ return;
+
let initiator = event.data.initiator;
if (!initiator || !this._initiators.includes(initiator))
return;
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js (289609 => 289610)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js 2022-02-11 08:40:49 UTC (rev 289609)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js 2022-02-11 08:44:23 UTC (rev 289610)
@@ -29,10 +29,11 @@
{
super();
- this._gridOverlayForNodeMap = new Map;
+ this._overlayForNodeMap = new Map;
this._nextDefaultGridColorIndex = 0;
- this._gridColorForNodeMap = new WeakMap;
- this._gridColorSettingForNodeMap = new WeakMap;
+ this._nextDefaultFlexColorIndex = 0;
+ this._colorForNodeMap = new WeakMap;
+ this._colorSettingForNodeMap = new WeakMap;
WI.settings.gridOverlayShowExtendedGridLines.addEventListener(WI.Setting.Event.Changed, this._handleGridSettingChanged, this);
WI.settings.gridOverlayShowLineNames.addEventListener(WI.Setting.Event.Changed, this._handleGridSettingChanged, this);
@@ -44,7 +45,7 @@
// Public
- showGridOverlay(domNode, {color, initiator} = {})
+ showOverlay(domNode, {color, initiator} = {})
{
console.assert(!domNode.destroyed, domNode);
if (domNode.destroyed)
@@ -52,109 +53,133 @@
console.assert(domNode instanceof WI.DOMNode, domNode);
console.assert(!color || color instanceof WI.Color, color);
- console.assert(domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid, domNode.layoutContextType);
+ console.assert(Object.values(WI.DOMNode.LayoutContextType).includes(domNode.layoutContextType), domNode);
- color ||= this.getGridColorForNode(domNode);
+ color ||= this.getColorForNode(domNode);
let target = WI.assumingMainTarget();
- let commandArguments = {
- nodeId: domNode.id,
- gridColor: color.toProtocol(),
- showLineNames: WI.settings.gridOverlayShowLineNames.value,
- showLineNumbers: WI.settings.gridOverlayShowLineNumbers.value,
- showExtendedGridLines: WI.settings.gridOverlayShowExtendedGridLines.value,
- showTrackSizes: WI.settings.gridOverlayShowTrackSizes.value,
- showAreaNames: WI.settings.gridOverlayShowAreaNames.value,
- };
- target.DOMAgent.showGridOverlay.invoke(commandArguments);
+ let commandArguments = {nodeId: domNode.id};
+ switch (domNode.layoutContextType) {
+ case WI.DOMNode.LayoutContextType.Grid:
+ commandArguments.gridColor = color.toProtocol();
+ commandArguments.showLineNames = WI.settings.gridOverlayShowLineNames.value;
+ commandArguments.showLineNumbers = WI.settings.gridOverlayShowLineNumbers.value;
+ commandArguments.showExtendedGridLines = WI.settings.gridOverlayShowExtendedGridLines.value;
+ commandArguments.showTrackSizes = WI.settings.gridOverlayShowTrackSizes.value;
+ commandArguments.showAreaNames = WI.settings.gridOverlayShowAreaNames.value;
+ target.DOMAgent.showGridOverlay.invoke(commandArguments);
+ break;
+
+ case WI.DOMNode.LayoutContextType.Flex:
+ commandArguments.flexColor = color.toProtocol();
+ target.DOMAgent.showFlexOverlay.invoke(commandArguments);
+ break;
+ }
+
let overlay = {domNode, ...commandArguments, initiator};
// The method to show the overlay will be called repeatedly while updating the grid overlay color. Avoid adding duplicate event listeners
- if (!this._gridOverlayForNodeMap.has(domNode))
+ if (!this._overlayForNodeMap.has(domNode))
domNode.addEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
- this._gridOverlayForNodeMap.set(domNode, overlay);
+ this._overlayForNodeMap.set(domNode, overlay);
- this.dispatchEventToListeners(WI.OverlayManager.Event.GridOverlayShown, overlay);
+ this.dispatchEventToListeners(WI.OverlayManager.Event.OverlayShown, overlay);
}
- hideGridOverlay(domNode)
+ hideOverlay(domNode)
{
console.assert(domNode instanceof WI.DOMNode, domNode);
console.assert(!domNode.destroyed, domNode);
- console.assert(domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid, domNode.layoutContextType);
+ console.assert(Object.values(WI.DOMNode.LayoutContextType).includes(domNode.layoutContextType), domNode);
if (domNode.destroyed)
return;
- let overlay = this._gridOverlayForNodeMap.take(domNode);
+ let overlay = this._overlayForNodeMap.take(domNode);
if (!overlay)
return;
let target = WI.assumingMainTarget();
- target.DOMAgent.hideGridOverlay(domNode.id);
+ switch (domNode.layoutContextType) {
+ case WI.DOMNode.LayoutContextType.Grid:
+ target.DOMAgent.hideGridOverlay(domNode.id);
+ break;
+
+ case WI.DOMNode.LayoutContextType.Flex:
+ target.DOMAgent.hideFlexOverlay(domNode.id);
+ break;
+ }
+
domNode.removeEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
- this.dispatchEventToListeners(WI.OverlayManager.Event.GridOverlayHidden, overlay);
+ this.dispatchEventToListeners(WI.OverlayManager.Event.OverlayHidden, overlay);
}
hasVisibleGridOverlays()
{
- return this._gridOverlayForNodeMap.size > 0;
+ for (let domNode of this._overlayForNodeMap.keys()) {
+ if (domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid)
+ return true;
+ }
+ return false;
}
- isGridOverlayVisible(domNode)
+ hasVisibleOverlay(domNode)
{
- return this._gridOverlayForNodeMap.has(domNode);
+ return this._overlayForNodeMap.has(domNode);
}
- toggleGridOverlay(domNode, options)
+ toggleOverlay(domNode, options)
{
- if (this.isGridOverlayVisible(domNode))
- this.hideGridOverlay(domNode);
+ if (this.hasVisibleOverlay(domNode))
+ this.hideOverlay(domNode);
else
- this.showGridOverlay(domNode, options);
+ this.showOverlay(domNode, options);
}
- getGridColorForNode(domNode)
+ getColorForNode(domNode)
{
- let color = this._gridColorForNodeMap.get(domNode);
+ let color = this._colorForNodeMap.get(domNode);
if (color)
return color;
- const defaultGridHSLColors = [
- [329, 91, 70],
- [207, 96, 69],
- [92, 90, 64],
- [291, 73, 68],
- [40, 97, 57],
- ];
-
- let colorSetting = this._gridColorSettingForNodeMap.get(domNode);
+ let colorSetting = this._colorSettingForNodeMap.get(domNode);
if (!colorSetting) {
- let defaultColor = defaultGridHSLColors[this._nextDefaultGridColorIndex];
- this._nextDefaultGridColorIndex = (this._nextDefaultGridColorIndex + 1) % defaultGridHSLColors.length;
+ let nextColorIndex;
+ switch (domNode.layoutContextType) {
+ case WI.DOMNode.LayoutContextType.Grid:
+ nextColorIndex = this._nextDefaultGridColorIndex;
+ this._nextDefaultGridColorIndex = (nextColorIndex + 1) % WI.OverlayManager._defaultHSLColors.length;
+ break;
+ case WI.DOMNode.LayoutContextType.Flex:
+ nextColorIndex = this._nextDefaultFlexColorIndex;
+ this._nextDefaultFlexColorIndex = (nextColorIndex + 1) % WI.OverlayManager._defaultHSLColors.length;
+ break;
+ }
+ let defaultColor = WI.OverlayManager._defaultHSLColors[nextColorIndex];
+
let url = "" || WI.networkManager.mainFrame.url;
- colorSetting = new WI.Setting(`grid-overlay-color-${url.hash}-${domNode.path().hash}`, defaultColor);
- this._gridColorSettingForNodeMap.set(domNode, colorSetting);
+ colorSetting = new WI.Setting(`overlay-color-${url.hash}-${domNode.path().hash}`, defaultColor);
+ this._colorSettingForNodeMap.set(domNode, colorSetting);
}
color = new WI.Color(WI.Color.Format.HSL, colorSetting.value);
- this._gridColorForNodeMap.set(domNode, color);
+ this._colorForNodeMap.set(domNode, color);
return color;
}
- setGridColorForNode(domNode, color)
+ setColorForNode(domNode, color)
{
console.assert(domNode instanceof WI.DOMNode, domNode);
console.assert(color instanceof WI.Color, color);
- let colorSetting = this._gridColorSettingForNodeMap.get(domNode);
- console.assert(colorSetting, "There should already be a setting created form a previous call to getGridColorForNode()");
+ let colorSetting = this._colorSettingForNodeMap.get(domNode);
+ console.assert(colorSetting, "There should already be a setting created form a previous call to getColorForNode()");
colorSetting.value = color.hsl;
- this._gridColorForNodeMap.set(domNode, color);
+ this._colorForNodeMap.set(domNode, color);
}
// Private
@@ -162,20 +187,20 @@
_handleLayoutContextTypeChanged(event)
{
let domNode = event.target;
- console.assert(domNode.layoutContextType !== WI.DOMNode.LayoutContextType.Grid, domNode);
domNode.removeEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
- // When the context type changes, the overlay is automatically hidden on the backend. Here, we only update the map and notify listeners.
- let overlay = this._gridOverlayForNodeMap.take(domNode);
- this.dispatchEventToListeners(WI.OverlayManager.Event.GridOverlayHidden, overlay);
+ // When the context type changes, the overlay is automatically hidden on the backend (even if it changes from Grid to Flex, or vice-versa).
+ // Here, we only update the map and notify listeners.
+ let overlay = this._overlayForNodeMap.take(domNode);
+ this.dispatchEventToListeners(WI.OverlayManager.Event.OverlayHidden, overlay);
}
_handleGridSettingChanged(event)
{
- for (let [domNode, overlay] of this._gridOverlayForNodeMap) {
- // Refresh all shown overlays. Latest settings values will be used.
- this.showGridOverlay(domNode, {color: overlay.color, initiator: overlay.initiator});
+ for (let [domNode, overlay] of this._overlayForNodeMap) {
+ if (domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid)
+ this.showOverlay(domNode, {color: overlay.color, initiator: overlay.initiator});
}
}
@@ -191,10 +216,19 @@
//
// `domNode.id` is different for the same DOM element after page reload.
this._nextDefaultGridColorIndex = 0;
+ this._nextDefaultFlexColorIndex = 0;
}
};
+WI.OverlayManager._defaultHSLColors = [
+ [329, 91, 70],
+ [207, 96, 69],
+ [92, 90, 64],
+ [291, 73, 68],
+ [40, 97, 57],
+];
+
WI.OverlayManager.Event = {
- GridOverlayShown: "overlay-manager-grid-overlay-shown",
- GridOverlayHidden: "overlay-manager-grid-overlay-hidden",
+ OverlayShown: "overlay-manager-overlay-shown",
+ OverlayHidden: "overlay-manager-overlay-hidden",
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js (289609 => 289610)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js 2022-02-11 08:40:49 UTC (rev 289609)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js 2022-02-11 08:44:23 UTC (rev 289610)
@@ -53,14 +53,14 @@
{
super.attached();
- WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayShown, this._handleGridOverlayStateChanged, this);
- WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._handleGridOverlayStateChanged, this);
+ WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayShown, this._handleGridOverlayStateChanged, this);
+ WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayHidden, this._handleGridOverlayStateChanged, this);
}
detached()
{
- WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayShown, this._handleGridOverlayStateChanged, this);
- WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._handleGridOverlayStateChanged, this);
+ WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayShown, this._handleGridOverlayStateChanged, this);
+ WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayHidden, this._handleGridOverlayStateChanged, this);
super.detached();
}
@@ -99,9 +99,9 @@
this._suppressUpdateToggleAllCheckbox = true;
for (let domNode of this._gridNodeSet) {
if (isChecked)
- WI.overlayManager.showGridOverlay(domNode, {initiator: WI.GridOverlayDiagnosticEventRecorder.Initiator.Panel});
+ WI.overlayManager.showOverlay(domNode, {initiator: WI.GridOverlayDiagnosticEventRecorder.Initiator.Panel});
else
- WI.overlayManager.hideGridOverlay(domNode);
+ WI.overlayManager.hideOverlay(domNode);
}
this._suppressUpdateToggleAllCheckbox = false;
}
@@ -120,7 +120,7 @@
let labelElement = itemContainerElement.appendChild(document.createElement("label"));
let checkboxElement = labelElement.appendChild(document.createElement("input"));
checkboxElement.type = "checkbox";
- checkboxElement.checked = WI.overlayManager.isGridOverlayVisible(domNode);
+ checkboxElement.checked = WI.overlayManager.hasVisibleOverlay(domNode);
const nodeDisplayName = labelElement.appendChild(document.createElement("span"));
nodeDisplayName.classList.add("node-display-name");
@@ -130,12 +130,12 @@
checkboxElement.addEventListener("change", (event) => {
if (checkboxElement.checked)
- WI.overlayManager.showGridOverlay(domNode, {color: swatch.value, initiator: WI.GridOverlayDiagnosticEventRecorder.Initiator.Panel});
+ WI.overlayManager.showOverlay(domNode, {color: swatch.value, initiator: WI.GridOverlayDiagnosticEventRecorder.Initiator.Panel});
else
- WI.overlayManager.hideGridOverlay(domNode);
+ WI.overlayManager.hideOverlay(domNode);
});
- let gridColor = WI.overlayManager.getGridColorForNode(domNode);
+ let gridColor = WI.overlayManager.getColorForNode(domNode);
let swatch = new WI.InlineSwatch(WI.InlineSwatch.Type.Color, gridColor);
swatch.shiftClickColorEnabled = false;
itemContainerElement.append(swatch.element);
@@ -144,7 +144,7 @@
if (checkboxElement.checked)
// While changing the overlay color, WI.OverlayManager.Event.GridOverlayShown is dispatched with high frequency.
// An initiator is not provided so as not to skew usage count of overlay options when logging diagnostics in WI.GridOverlayDiagnosticEventRecorder.
- WI.overlayManager.showGridOverlay(domNode, {color: event.data.value});
+ WI.overlayManager.showOverlay(domNode, {color: event.data.value});
}, swatch);
swatch.addEventListener(WI.InlineSwatch.Event.Deactivated, (event) => {
@@ -152,7 +152,7 @@
return;
gridColor = event.target.value;
- WI.overlayManager.setGridColorForNode(domNode, gridColor);
+ WI.overlayManager.setColorForNode(domNode, gridColor);
}, swatch);
let buttonElement = itemContainerElement.appendChild(WI.createGoToArrowButton());
@@ -167,11 +167,14 @@
_handleGridOverlayStateChanged(event)
{
+ if (event.data.domNode.layoutContextType !== WI.DOMNode.LayoutContextType.Grid)
+ return;
+
let checkboxElement = this._checkboxElementByNodeMap.get(event.data.domNode);
if (!checkboxElement)
return;
- checkboxElement.checked = event.type === WI.OverlayManager.Event.GridOverlayShown;
+ checkboxElement.checked = event.type === WI.OverlayManager.Event.OverlayShown;
this._updateToggleAllCheckbox();
}
@@ -183,7 +186,7 @@
let hasVisible = false;
let hasHidden = false;
for (let domNode of this._gridNodeSet) {
- let isVisible = WI.overlayManager.isGridOverlayVisible(domNode);
+ let isVisible = WI.overlayManager.hasVisibleOverlay(domNode);
if (isVisible)
hasVisible = true;
else
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.css (289609 => 289610)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.css 2022-02-11 08:40:49 UTC (rev 289609)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.css 2022-02-11 08:44:23 UTC (rev 289610)
@@ -23,7 +23,7 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-.tree-outline.dom .badge-css-grid {
+.tree-outline.dom .layout-badge {
/* 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. */
@@ -38,12 +38,12 @@
box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.5);
}
-.tree-outline.dom .badge-css-grid.activated {
+.tree-outline.dom .layout-badge.activated {
background: var(--glyph-color-active);
color: white;
}
-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 .layout-badge {
/* Override `li.selected * {color: inherited}` from DOMTreeOutline.css */
color: var(--text-color);
}
@@ -50,7 +50,7 @@
@media (prefers-color-scheme: dark) {
- .tree-outline.dom .badge-css-grid {
+ .tree-outline.dom .layout-badge {
background: hsla(0, 0%, 30%, 0.8);
border-color: hsla(0, 0%, 100%, 0.1);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js (289609 => 289610)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2022-02-11 08:40:49 UTC (rev 289609)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2022-02-11 08:44:23 UTC (rev 289610)
@@ -51,7 +51,7 @@
this._highlightedAttributes = new Set;
this._recentlyModifiedAttributes = new Map;
this._closeTagTreeElement = null;
- this._gridBadgeElement = null;
+ this._layoutBadgeElement = null;
node.addEventListener(WI.DOMNode.Event.EnabledPseudoClassesChanged, this._updatePseudoClassIndicator, this);
@@ -444,20 +444,20 @@
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);
+ if (this.representedObject.layoutContextType) {
+ WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayShown, this._updateLayoutBadgeStatus, this);
+ WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayHidden, this._updateLayoutBadgeStatus, this);
}
this.representedObject.addEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
- this._updateGridBadge();
+ this._updateLayoutBadge();
}
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);
+ WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayShown, this._updateLayoutBadgeStatus, this);
+ WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayHidden, this._updateLayoutBadgeStatus, this);
}
this.representedObject.removeEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
}
@@ -1334,7 +1334,7 @@
this.title.appendChild(this._nodeTitleInfo().titleDOM);
this._highlightResult = undefined;
}
- this._updateGridBadge();
+ this._updateLayoutBadge();
// Setting this.title will implicitly remove all children. Clear the
// selection element so that we properly recreate it if necessary.
@@ -2010,30 +2010,46 @@
this._animatingHighlight = false;
}
- _updateGridBadge()
+ _updateLayoutBadge()
{
if (!this.listItemElement || this._elementCloseTag)
return;
- if (this._gridBadgeElement) {
- this._gridBadgeElement.remove();
- this._gridBadgeElement = null;
+ if (this._layoutBadgeElement) {
+ this._layoutBadgeElement.remove();
+ this._layoutBadgeElement = null;
}
- if (this.representedObject.layoutContextType !== WI.DOMNode.LayoutContextType.Grid)
+ if (!this.representedObject.layoutContextType)
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);
+ if (this.representedObject.layoutContextType === WI.DOMNode.LayoutContextType.Flex && !WI.settings.engineeringEnableFlexboxInspector.value)
+ return;
- this._gridBadgeElement.addEventListener("click", this._gridBadgeClicked.bind(this), true);
- this._gridBadgeElement.addEventListener("dblclick", this._gridBadgeDoubleClicked, true);
+ this._layoutBadgeElement = this.title.appendChild(document.createElement("span"));
+ this._layoutBadgeElement.className = "layout-badge";
+
+ switch (this.representedObject.layoutContextType) {
+ case WI.DOMNode.LayoutContextType.Grid:
+ this._layoutBadgeElement.textContent = WI.unlocalizedString("grid");
+ break;
+
+ case WI.DOMNode.LayoutContextType.Flex:
+ this._layoutBadgeElement.textContent = WI.unlocalizedString("flex");
+ break;
+
+ default:
+ console.assert(false, this.representedObject.layoutContextType);
+ break;
+ }
+
+ this._updateLayoutBadgeStatus();
+
+ this._layoutBadgeElement.addEventListener("click", this._layoutBadgeClicked.bind(this), true);
+ this._layoutBadgeElement.addEventListener("dblclick", this._layoutBadgeDoubleClicked, true);
}
- _gridBadgeClicked(event)
+ _layoutBadgeClicked(event)
{
if (event.button !== 0 || event.ctrlKey)
return;
@@ -2041,44 +2057,46 @@
// Don't expand or collapse a tree element when clicking on the grid badge.
event.stop();
- WI.overlayManager.toggleGridOverlay(this.representedObject, {initiator: WI.GridOverlayDiagnosticEventRecorder.Initiator.Badge});
+ WI.overlayManager.toggleOverlay(this.representedObject, {
+ initiator: this.representedObject.layoutContextType === WI.DOMNode.LayoutContextType.Grid ? WI.GridOverlayDiagnosticEventRecorder.Initiator.Badge : null,
+ });
}
- _gridBadgeDoubleClicked(event)
+ _layoutBadgeDoubleClicked(event)
{
event.stop();
}
- _updateGridBadgeStatus()
+ _updateLayoutBadgeStatus()
{
- if (!this._gridBadgeElement)
+ if (!this._layoutBadgeElement)
return;
- let isGridVisible = WI.overlayManager.isGridOverlayVisible(this.representedObject);
- this._gridBadgeElement.classList.toggle("activated", isGridVisible);
+ let hasVisibleOverlay = WI.overlayManager.hasVisibleOverlay(this.representedObject);
+ this._layoutBadgeElement.classList.toggle("activated", hasVisibleOverlay);
- if (isGridVisible) {
- let color = WI.overlayManager.getGridColorForNode(this.representedObject);
+ if (hasVisibleOverlay) {
+ let color = WI.overlayManager.getColorForNode(this.representedObject);
let hue = color.hsl[0];
- this._gridBadgeElement.style.borderColor = color.toString();
- this._gridBadgeElement.style.backgroundColor = `hsl(${hue}, 90%, 95%)`;
- this._gridBadgeElement.style.setProperty("color", `hsl(${hue}, 55%, 40%)`);
+ this._layoutBadgeElement.style.borderColor = color.toString();
+ this._layoutBadgeElement.style.backgroundColor = `hsl(${hue}, 90%, 95%)`;
+ this._layoutBadgeElement.style.setProperty("color", `hsl(${hue}, 55%, 40%)`);
} else
- this._gridBadgeElement.removeAttribute("style");
+ this._layoutBadgeElement.removeAttribute("style");
}
_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);
+ if (domNode.layoutContextType) {
+ WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayShown, this._updateLayoutBadgeStatus, this);
+ WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayHidden, this._updateLayoutBadgeStatus, this);
} else {
- WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayShown, this._updateGridBadgeStatus, this);
- WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._updateGridBadgeStatus, this);
+ WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayShown, this._updateLayoutBadgeStatus, this);
+ WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayHidden, this._updateLayoutBadgeStatus, this);
}
- this._updateGridBadge();
+ this._updateLayoutBadge();
}
};
