Changeset 273992 in webkit

Timestamp:

Mar 5, 2021 11:54:19 AM (17 months ago)

Author:

Nikita Vasilyev

Message:

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.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/DOMTreeElement.css (modified) (2 diffs)
• UserInterface/Views/DOMTreeElement.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2021-03-05  Nikita Vasilyev  <nvasilyev@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  <rcaliman@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.css

@@ -28 +28 @@
     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);
 }
 
@@ -43 +44 @@
 }
 
-.tree-outline.dom li.selected .badge-css-grid {
-    color: hsla(0, 0%, var(--foreground-lightness), 0.5);
-    background-color: transparent;
+body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .badge-css-grid {
+    /* Override `li.selected * {color: inherited}` from DOMTreeOutline.css */
+    color: var(--text-color);
 }
 
-.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);
+        background: hsla(0, 0%, 30%, 0.8);
         border-color: hsla(0, 0%, 100%, 0.1);
     }

trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js

@@ -2058 +2058 @@
             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");
     }