Title: [265262] trunk/Source/WebInspectorUI
Revision
265262
Author
nvasil...@apple.com
Date
2020-08-04 15:18:21 -0700 (Tue, 04 Aug 2020)

Log Message

Web Inspector: Use border-inline-start/end properties instead of border-left/right for DataGrid and Table
https://bugs.webkit.org/show_bug.cgi?id=215138

Reviewed by Devin Rousso.

Simplify LTR/RTL CSS code by using logical CSS properties. This patch doesn't introduce any visual changes.

* UserInterface/Views/DataGrid.css:
(.data-grid):
(.data-grid th:not(:last-child) > .header-cell-content):
(.data-grid:focus tr.selected td:not(:last-child)):
(body[dir=ltr] .data-grid th:not(:last-child) > .header-cell-content): Deleted.
(body[dir=rtl] .data-grid th:not(:last-child) > .header-cell-content): Deleted.
(body[dir=ltr] .data-grid:focus tr.selected td:not(:last-child)): Deleted.
(body[dir=rtl] .data-grid:focus tr.selected td:not(:last-child)): Deleted.
* UserInterface/Views/NetworkDetailView.css:
(.network-table.showing-detail .network-detail):
(body[dir=ltr] .network-table.showing-detail .network-detail): Deleted.
(body[dir=rtl] .network-table.showing-detail .network-detail): Deleted.
* UserInterface/Views/TimelineDataGrid.css:
(.data-grid.timeline td.graph-column):
(body[dir=ltr] .data-grid.timeline td.graph-column): Deleted.
(body[dir=rtl] .data-grid.timeline td.graph-column): Deleted.

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (265261 => 265262)


--- trunk/Source/WebInspectorUI/ChangeLog	2020-08-04 22:02:26 UTC (rev 265261)
+++ trunk/Source/WebInspectorUI/ChangeLog	2020-08-04 22:18:21 UTC (rev 265262)
@@ -1,3 +1,29 @@
+2020-08-04  Nikita Vasilyev  <nvasil...@apple.com>
+
+        Web Inspector: Use border-inline-start/end properties instead of border-left/right for DataGrid and Table
+        https://bugs.webkit.org/show_bug.cgi?id=215138
+
+        Reviewed by Devin Rousso.
+
+        Simplify LTR/RTL CSS code by using logical CSS properties. This patch doesn't introduce any visual changes.
+
+        * UserInterface/Views/DataGrid.css:
+        (.data-grid):
+        (.data-grid th:not(:last-child) > .header-cell-content):
+        (.data-grid:focus tr.selected td:not(:last-child)):
+        (body[dir=ltr] .data-grid th:not(:last-child) > .header-cell-content): Deleted.
+        (body[dir=rtl] .data-grid th:not(:last-child) > .header-cell-content): Deleted.
+        (body[dir=ltr] .data-grid:focus tr.selected td:not(:last-child)): Deleted.
+        (body[dir=rtl] .data-grid:focus tr.selected td:not(:last-child)): Deleted.
+        * UserInterface/Views/NetworkDetailView.css:
+        (.network-table.showing-detail .network-detail):
+        (body[dir=ltr] .network-table.showing-detail .network-detail): Deleted.
+        (body[dir=rtl] .network-table.showing-detail .network-detail): Deleted.
+        * UserInterface/Views/TimelineDataGrid.css:
+        (.data-grid.timeline td.graph-column):
+        (body[dir=ltr] .data-grid.timeline td.graph-column): Deleted.
+        (body[dir=rtl] .data-grid.timeline td.graph-column): Deleted.
+
 2020-08-03  Nikita Vasilyev  <nvasil...@apple.com>
 
         Web Inspector: Change DataGrid and Table styles to closer match macOS

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css (265261 => 265262)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css	2020-08-04 22:02:26 UTC (rev 265261)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css	2020-08-04 22:18:21 UTC (rev 265262)
@@ -28,7 +28,6 @@
     outline: none;
 
     --data-grid-header-horizontal-padding: 6px;
-    --data-grid-column-border-end: 1px solid var(--border-color);
 }
 
 .data-grid .highlight {
@@ -93,14 +92,10 @@
     padding: 0 var(--data-grid-header-horizontal-padding);
 }
 
-body[dir=ltr] .data-grid th:not(:last-child) > .header-cell-content {
-    border-right: var(--data-grid-column-border-end);
+.data-grid th:not(:last-child) > .header-cell-content {
+    border-inline-end: 1px solid var(--border-color);
 }
 
-body[dir=rtl] .data-grid th:not(:last-child) > .header-cell-content {
-    border-left: var(--data-grid-column-border-end);
-}
-
 .data-grid th.sortable:active {
     background-color: var(--background-color-pressed);
 }
@@ -196,14 +191,10 @@
     --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: var(--border-end-color);
+.data-grid:focus tr.selected td:not(:last-child) {
+    border-inline-end-color: var(--border-end-color);
 }
 
-body[dir=rtl] .data-grid:focus tr.selected td:not(:last-child) {
-    border-left-color: var(--border-end-color);
-}
-
 .data-grid :matches(th, td) > div {
     white-space: nowrap;
     text-overflow: ellipsis;

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css (265261 => 265262)


--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css	2020-08-04 22:02:26 UTC (rev 265261)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css	2020-08-04 22:18:21 UTC (rev 265262)
@@ -75,14 +75,10 @@
     bottom: 0;
 }
 
-body[dir=ltr] .network-table.showing-detail .network-detail {
-    border-left: 1px solid var(--border-color);
+.network-table.showing-detail .network-detail {
+    border-inline-start: 1px solid var(--border-color);
 }
 
-body[dir=rtl] .network-table.showing-detail .network-detail {
-    border-right: 1px solid var(--border-color);
-}
-
 @media (prefers-color-scheme: dark) {
     .network-detail {
         background-color: var(--background-color);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css (265261 => 265262)


--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css	2020-08-04 22:02:26 UTC (rev 265261)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css	2020-08-04 22:18:21 UTC (rev 265262)
@@ -52,14 +52,10 @@
     padding: 2px 0;
 }
 
-body[dir=ltr] .data-grid.timeline td.graph-column {
-    border-left: 1px solid var(--graph-line-color);
+.data-grid.timeline td.graph-column {
+    border-inline-start: 1px solid var(--graph-line-color);
 }
 
-body[dir=rtl] .data-grid.timeline td.graph-column {
-    border-right: 1px solid var(--graph-line-color);
-}
-
 .data-grid.timeline td.graph-column > .cell-content {
     position: relative;
 }
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to