Modified: trunk/Source/WebInspectorUI/ChangeLog (273991 => 273992)
--- trunk/Source/WebInspectorUI/ChangeLog 2021-03-05 19:51:26 UTC (rev 273991)
+++ trunk/Source/WebInspectorUI/ChangeLog 2021-03-05 19:54:19 UTC (rev 273992)
@@ -1,3 +1,22 @@
+2021-03-05 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: border color of "grid" badge should match color of corresponding outline
+ https://bugs.webkit.org/show_bug.cgi?id=222747
+ <rdar://problem/75042342>
+
+ Reviewed by BJ Burg.
+
+ * UserInterface/Views/DOMTreeElement.css:
+ (.tree-outline.dom .badge-css-grid):
+ Drive-by: decrease the font size and align the badge in the middle of the selected tree element (i.e. keep 1px space
+ above and below the badge).
+
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .badge-css-grid):
+ (@media (prefers-color-scheme: dark) .tree-outline.dom .badge-css-grid):
+ * UserInterface/Views/DOMTreeElement.js:
+ (WI.DOMTreeElement.prototype._updateGridBadgeStatus):
+ For text and background color, only use the hue of the selected color to keep "grid" text always readable.
+
2021-03-04 Razvan Caliman <rcali...@apple.com>
Web Inspector: Persist CSS Grid overlay colors
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.css (273991 => 273992)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.css 2021-03-05 19:51:26 UTC (rev 273991)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.css 2021-03-05 19:54:19 UTC (rev 273992)
@@ -27,14 +27,15 @@
/* 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;
+ font-size: 8px;
+ vertical-align: 1px;
color: var(--text-color);
- background: hsla(0, 0%, 0%, 0.05);
+ background: hsla(0, 0%, 95%, 0.8);
border: 1px solid hsla(0, 0%, var(--foreground-lightness), 0.1);
border-radius: 3px;
margin-left: 3px;
padding: 0 2px;
+ box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.5);
}
.tree-outline.dom .badge-css-grid.activated {
@@ -42,27 +43,15 @@
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);
+ /* Override `li.selected * {color: inherited}` from DOMTreeOutline.css */
+ color: var(--text-color);
}
-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);
+ background: hsla(0, 0%, 30%, 0.8);
border-color: hsla(0, 0%, 100%, 0.1);
}
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js (273991 => 273992)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2021-03-05 19:51:26 UTC (rev 273991)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2021-03-05 19:54:19 UTC (rev 273992)
@@ -2057,7 +2057,17 @@
if (!this._gridBadgeElement)
return;
- this._gridBadgeElement.classList.toggle("activated", WI.overlayManager.isGridOverlayVisible(this.representedObject));
+ let isGridVisible = WI.overlayManager.isGridOverlayVisible(this.representedObject);
+ this._gridBadgeElement.classList.toggle("activated", isGridVisible);
+
+ if (isGridVisible) {
+ let color = WI.overlayManager.getGridColorForNode(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%)`);
+ } else
+ this._gridBadgeElement.removeAttribute("style");
}
_handleLayoutContextTypeChanged(event)
