Web Inspector: Data grid border colors don't match accent colors
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 2 Mar 2019 00:37:18 +0000 (00:37 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 2 Mar 2019 00:37:18 +0000 (00:37 +0000)
https://bugs.webkit.org/show_bug.cgi?id=195232

Reviewed by Matt Baker.

* UserInterface/Views/DataGrid.css:
(.data-grid:focus tr.selected td:not(:last-child)):
(body[dir=ltr] .data-grid:focus tr.selected td:not(:last-child)):
(body[dir=rtl] .data-grid:focus tr.selected td:not(:last-child)):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@242296 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/DataGrid.css

index 17aea84..d7ea26c 100644 (file)
@@ -1,3 +1,15 @@
+2019-03-01  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Data grid border colors don't match accent colors
+        https://bugs.webkit.org/show_bug.cgi?id=195232
+
+        Reviewed by Matt Baker.
+
+        * UserInterface/Views/DataGrid.css:
+        (.data-grid:focus tr.selected td:not(:last-child)):
+        (body[dir=ltr] .data-grid:focus tr.selected td:not(:last-child)):
+        (body[dir=rtl] .data-grid:focus tr.selected td:not(:last-child)):
+
 2019-02-28  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: Timelines: don't show the auto-stop UI when not inspecting a page
index 6e4823d..82c4af7 100644 (file)
@@ -189,12 +189,16 @@ body[dir=rtl] .data-grid :matches(th, td):not(:last-child) {
     pointer-events: none;
 }
 
+.data-grid:focus tr.selected td:not(:last-child) {
+    --border-end-color: hsla(0, 0%, var(--foreground-lightness), 0.05);
+}
+
 body[dir=ltr] .data-grid:focus tr.selected td:not(:last-child) {
-    border-right-color: hsl(210, 100%, 40%);
+    border-right-color: var(--border-end-color);
 }
 
 body[dir=rtl] .data-grid:focus tr.selected td:not(:last-child) {
-    border-left-color: hsl(210, 100%, 40%);
+    border-left-color: var(--border-end-color);
 }
 
 .data-grid :matches(th, td) > div {