- Revision
- 265237
- Author
- nvasil...@apple.com
- Date
- 2020-08-03 18:51:14 -0700 (Mon, 03 Aug 2020)
Log Message
Web Inspector: Change DataGrid and Table styles to closer match macOS
https://bugs.webkit.org/show_bug.cgi?id=214563
<rdar://problem/65841032>
Reviewed by Devin Rousso.
- Remove vertical borders from table contents and only keep them on the table headers.
- Use 1px borders instead of hairline (0.5px) borders to closer match macOS.
- Refactoring: add "sorted" CSS class on sorted header columns to replace `th:matches(.sort-ascending, .sort-descending)`
that is used 10 times with `.sorted`.
* UserInterface/Views/CPUTimelineView.css:
(.timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div):
* UserInterface/Views/DataGrid.css:
(.data-grid):
--data-grid-column-border-start is no longer used, remove it.
(.data-grid.inline):
(.data-grid th):
(.data-grid th > .header-cell-content):
(body[dir=ltr] .data-grid th:not(:last-child) > .header-cell-content):
(body[dir=rtl] .data-grid th:not(:last-child) > .header-cell-content):
(.data-grid th.sortable:active):
(.data-grid th:matches(.sort-ascending, .sort-descending)):
(.data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child):
(.data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after):
(body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after):
(body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after):
Remove styles that are no longer relevant because columns don't have vertical borders anymore.
(.data-grid th.sort-ascending > .header-cell-content:first-child::after):
(.data-grid th.sort-descending > .header-cell-content:first-child::after):
(@media (prefers-color-scheme: dark) .data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after):
Don't change the background color of the sorted header cells to match macOS.
(body[dir=ltr] .data-grid :matches(th, td):not(:last-child)): Deleted.
(body[dir=rtl] .data-grid :matches(th, td):not(:last-child)): Deleted.
(.data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child): Deleted.
(.data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after): Deleted.
(body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after): Deleted.
(body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after): Deleted.
(.data-grid th.sort-ascending > div:first-child::after): Deleted.
(.data-grid th.sort-descending > div:first-child::after): Deleted.
(.data-grid table:matches(.header, .data)): Deleted.
(body[dir=ltr] .data-grid :matches(th, td):first-child): Deleted.
(body[dir=rtl] .data-grid :matches(th, td):first-child): Deleted.
(@media (-webkit-min-device-pixel-ratio: 2) .data-grid table:matches(.header, .data)): Deleted.
(@media (-webkit-min-device-pixel-ratio: 2) .data-grid :matches(th, td):first-child): Deleted.
(@media (prefers-color-scheme: dark) .data-grid th.sortable:active): Deleted.
(@media (prefers-color-scheme: dark) .data-grid th.sort-ascending > div:first-child::after,): Deleted.
* UserInterface/Views/DataGrid.js:
(WI.DataGrid.prototype.insertColumn):
* UserInterface/Views/NetworkDetailView.css:
(body[dir=ltr] .network-table.showing-detail .network-detail):
(body[dir=rtl] .network-table.showing-detail .network-detail):
Now that columns don't have borders, add a vertical border to the Network details pane.
* UserInterface/Views/NetworkTableContentView.css:
(.network-table > .table .header .cell.waterfall:matches(.sort-ascending, .sort-descending)):
(body[dir=ltr] .network-table > .table :not(.header) .cell.waterfall):
(body[dir=rtl] .network-table > .table :not(.header) .cell.waterfall):
Add a vertical border for the zeroth mark of the graph.
* UserInterface/Views/RenderingFrameTimelineOverviewGraph.css:
(.timeline-overview-graph.rendering-frame > .divider):
* UserInterface/Views/Table.css:
(.table):
(.table > .header > .sortable:active):
(.table > .header > :matches(.sort-ascending, .sort-descending)):
(.table > .header .cell):
(.table > .header .cell:not(:first-child)::before):
(body[dir=ltr] .table > .header .cell:not(:first-child)::before):
(body[dir=rtl] .table > .header .cell:not(:first-child)::before):
(body[dir=ltr] .table .cell:not(:last-child)): Deleted.
(body[dir=rtl] .table .cell:not(:last-child)): Deleted.
(body[dir=ltr] .table .cell:first-child): Deleted.
(body[dir=rtl] .table .cell:first-child): Deleted.
(@media (prefers-color-scheme: dark) .table > .header > .sortable:active): Deleted.
(@media (prefers-color-scheme: dark) .table > .header > :matches(.sort-ascending, .sort-descending)): Deleted.
* UserInterface/Views/TimelineDataGrid.css:
(.data-grid th.graph-column:matches(.sort-ascending, .sort-descending)):
(.data-grid.timeline th.graph-column > .timeline-ruler):
(body[dir=ltr] .data-grid.timeline td.graph-column):
(body[dir=rtl] .data-grid.timeline td.graph-column):
Add a vertical border for the zeroth mark of the graph.
(.data-grid.timeline td.graph-column .timeline-record-bar):
(@media (prefers-color-scheme: dark) .data-grid th:matches(.sort-ascending, .sort-descending)): Deleted.
* UserInterface/Views/TimelineRuler.css:
(.timeline-ruler > .header > .divider > .label):
Reset font-weight from sorted column header.
(.timeline-ruler > .markers > .divider):
* UserInterface/Views/Variables.css:
(:root):
(@media (prefers-color-scheme: dark) :root):
Use more precise color for --even-zebra-stripe-row-background-color.
Drive-by: remove unused --border-color-dark variable.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (265236 => 265237)
--- trunk/Source/WebInspectorUI/ChangeLog 2020-08-04 01:16:13 UTC (rev 265236)
+++ trunk/Source/WebInspectorUI/ChangeLog 2020-08-04 01:51:14 UTC (rev 265237)
@@ -1,3 +1,106 @@
+2020-08-03 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Change DataGrid and Table styles to closer match macOS
+ https://bugs.webkit.org/show_bug.cgi?id=214563
+ <rdar://problem/65841032>
+
+ Reviewed by Devin Rousso.
+
+ - Remove vertical borders from table contents and only keep them on the table headers.
+ - Use 1px borders instead of hairline (0.5px) borders to closer match macOS.
+ - Refactoring: add "sorted" CSS class on sorted header columns to replace `th:matches(.sort-ascending, .sort-descending)`
+ that is used 10 times with `.sorted`.
+
+ * UserInterface/Views/CPUTimelineView.css:
+ (.timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div):
+
+ * UserInterface/Views/DataGrid.css:
+ (.data-grid):
+ --data-grid-column-border-start is no longer used, remove it.
+
+ (.data-grid.inline):
+ (.data-grid th):
+ (.data-grid th > .header-cell-content):
+ (body[dir=ltr] .data-grid th:not(:last-child) > .header-cell-content):
+ (body[dir=rtl] .data-grid th:not(:last-child) > .header-cell-content):
+ (.data-grid th.sortable:active):
+ (.data-grid th:matches(.sort-ascending, .sort-descending)):
+ (.data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child):
+ (.data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after):
+ (body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after):
+ (body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after):
+ Remove styles that are no longer relevant because columns don't have vertical borders anymore.
+
+ (.data-grid th.sort-ascending > .header-cell-content:first-child::after):
+ (.data-grid th.sort-descending > .header-cell-content:first-child::after):
+ (@media (prefers-color-scheme: dark) .data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after):
+ Don't change the background color of the sorted header cells to match macOS.
+
+ (body[dir=ltr] .data-grid :matches(th, td):not(:last-child)): Deleted.
+ (body[dir=rtl] .data-grid :matches(th, td):not(:last-child)): Deleted.
+ (.data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child): Deleted.
+ (.data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after): Deleted.
+ (body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after): Deleted.
+ (body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after): Deleted.
+ (.data-grid th.sort-ascending > div:first-child::after): Deleted.
+ (.data-grid th.sort-descending > div:first-child::after): Deleted.
+ (.data-grid table:matches(.header, .data)): Deleted.
+ (body[dir=ltr] .data-grid :matches(th, td):first-child): Deleted.
+ (body[dir=rtl] .data-grid :matches(th, td):first-child): Deleted.
+ (@media (-webkit-min-device-pixel-ratio: 2) .data-grid table:matches(.header, .data)): Deleted.
+ (@media (-webkit-min-device-pixel-ratio: 2) .data-grid :matches(th, td):first-child): Deleted.
+ (@media (prefers-color-scheme: dark) .data-grid th.sortable:active): Deleted.
+ (@media (prefers-color-scheme: dark) .data-grid th.sort-ascending > div:first-child::after,): Deleted.
+ * UserInterface/Views/DataGrid.js:
+ (WI.DataGrid.prototype.insertColumn):
+
+ * UserInterface/Views/NetworkDetailView.css:
+ (body[dir=ltr] .network-table.showing-detail .network-detail):
+ (body[dir=rtl] .network-table.showing-detail .network-detail):
+ Now that columns don't have borders, add a vertical border to the Network details pane.
+
+ * UserInterface/Views/NetworkTableContentView.css:
+ (.network-table > .table .header .cell.waterfall:matches(.sort-ascending, .sort-descending)):
+ (body[dir=ltr] .network-table > .table :not(.header) .cell.waterfall):
+ (body[dir=rtl] .network-table > .table :not(.header) .cell.waterfall):
+ Add a vertical border for the zeroth mark of the graph.
+
+ * UserInterface/Views/RenderingFrameTimelineOverviewGraph.css:
+ (.timeline-overview-graph.rendering-frame > .divider):
+ * UserInterface/Views/Table.css:
+ (.table):
+ (.table > .header > .sortable:active):
+ (.table > .header > :matches(.sort-ascending, .sort-descending)):
+ (.table > .header .cell):
+ (.table > .header .cell:not(:first-child)::before):
+ (body[dir=ltr] .table > .header .cell:not(:first-child)::before):
+ (body[dir=rtl] .table > .header .cell:not(:first-child)::before):
+ (body[dir=ltr] .table .cell:not(:last-child)): Deleted.
+ (body[dir=rtl] .table .cell:not(:last-child)): Deleted.
+ (body[dir=ltr] .table .cell:first-child): Deleted.
+ (body[dir=rtl] .table .cell:first-child): Deleted.
+ (@media (prefers-color-scheme: dark) .table > .header > .sortable:active): Deleted.
+ (@media (prefers-color-scheme: dark) .table > .header > :matches(.sort-ascending, .sort-descending)): Deleted.
+ * UserInterface/Views/TimelineDataGrid.css:
+ (.data-grid th.graph-column:matches(.sort-ascending, .sort-descending)):
+ (.data-grid.timeline th.graph-column > .timeline-ruler):
+ (body[dir=ltr] .data-grid.timeline td.graph-column):
+ (body[dir=rtl] .data-grid.timeline td.graph-column):
+ Add a vertical border for the zeroth mark of the graph.
+
+ (.data-grid.timeline td.graph-column .timeline-record-bar):
+ (@media (prefers-color-scheme: dark) .data-grid th:matches(.sort-ascending, .sort-descending)): Deleted.
+ * UserInterface/Views/TimelineRuler.css:
+ (.timeline-ruler > .header > .divider > .label):
+ Reset font-weight from sorted column header.
+
+ (.timeline-ruler > .markers > .divider):
+ * UserInterface/Views/Variables.css:
+ (:root):
+ (@media (prefers-color-scheme: dark) :root):
+ Use more precise color for --even-zebra-stripe-row-background-color.
+ Drive-by: remove unused --border-color-dark variable.
+
2020-08-03 Brian Burg <bb...@apple.com>
Web Inspector: "Show transparency grid" string needs to be disambiguated for localization
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css (265236 => 265237)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css 2020-08-04 01:16:13 UTC (rev 265236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css 2020-08-04 01:51:14 UTC (rev 265237)
@@ -226,7 +226,7 @@
width: 100%;
height: 1px;
text-align: end;
- background-color: hsla(0, 0%, var(--foreground-lightness), 0.07);
+ background-color: var(--graph-line-color);
}
body[dir=rtl] .timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css (265236 => 265237)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css 2020-08-04 01:16:13 UTC (rev 265236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css 2020-08-04 01:51:14 UTC (rev 265237)
@@ -27,8 +27,8 @@
position: relative;
outline: none;
- --data-grid-column-border-start: 1px solid transparent;
- --data-grid-column-border-end: 0.5px solid var(--border-color);
+ --data-grid-header-horizontal-padding: 6px;
+ --data-grid-column-border-end: 1px solid var(--border-color);
}
.data-grid .highlight {
@@ -62,7 +62,7 @@
}
.data-grid.inline {
- border: 0.5px solid var(--border-color);
+ border: 1px solid var(--border-color);
}
.data-grid > .header-wrapper {
@@ -79,7 +79,7 @@
.data-grid th {
height: 22px;
- padding: 0 6px;
+ padding: 0;
text-align: start;
vertical-align: middle;
font-weight: normal;
@@ -88,20 +88,25 @@
overflow: hidden;
}
-body[dir=ltr] .data-grid :matches(th, td):not(:last-child) {
+.data-grid th > .header-cell-content {
+ margin: 3px 0;
+ 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);
}
-body[dir=rtl] .data-grid :matches(th, td):not(:last-child) {
+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: hsl(0, 0%, 70%);
+ background-color: var(--background-color-pressed);
}
.data-grid th:matches(.sort-ascending, .sort-descending) {
- background-color: hsl(0, 0%, 90%);
+ font-weight: var(--sorted-header-font-weight);
}
.data-grid tr.filler {
@@ -222,11 +227,11 @@
position: relative;
}
-.data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child {
- -webkit-padding-end: 12px;
+.data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child {
+ padding-inline-end: calc(12px + var(--data-grid-header-horizontal-padding)); /* Add 12px for the sorting chevron. */
}
-.data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after {
+.data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after {
position: absolute;
top: 1px;
bottom: 0;
@@ -239,19 +244,19 @@
background-repeat: no-repeat;
}
-body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after {
- right: 0;
+body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after {
+ right: var(--data-grid-header-horizontal-padding);
}
-body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after {
- left: 0;
+body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after {
+ left: var(--data-grid-header-horizontal-padding);
}
-.data-grid th.sort-ascending > div:first-child::after {
+.data-grid th.sort-ascending > .header-cell-content:first-child::after {
background-image: url(../Images/SortIndicatorArrows.svg#up-arrow-normal);
}
-.data-grid th.sort-descending > div:first-child::after {
+.data-grid th.sort-descending > .header-cell-content:first-child::after {
background-image: url(../Images/SortIndicatorArrows.svg#down-arrow-normal);
}
@@ -366,31 +371,6 @@
transform: translateX(calc(-1 * var(--data-grid-resizer-translateX)));
}
-.data-grid table:matches(.header, .data) {
- /* Hide starting border from first hidden columns. */
- width: calc(100% + 1px);
- -webkit-margin-start: -1px;
-}
-
-body[dir=ltr] .data-grid :matches(th, td):first-child {
- border-left: var(--data-grid-column-border-start);
-}
-
-body[dir=rtl] .data-grid :matches(th, td):first-child {
- border-right: var(--data-grid-column-border-start);
-}
-
-@media (-webkit-min-device-pixel-ratio: 2) {
- .data-grid table:matches(.header, .data) {
- width: calc(100% + 0.5px);
- -webkit-margin-start: -0.5px;
- }
-
- .data-grid :matches(th, td):first-child {
- border-width: 0.5px;
- }
-}
-
.data-grid tr.editable .cell-content > input {
width: 100%;
height: 100%;
@@ -423,12 +403,7 @@
background-color: unset;
}
- .data-grid th.sortable:active {
- background-color: hsl(0, 0%, 40%);
- }
-
- .data-grid th.sort-ascending > div:first-child::after,
- .data-grid th.sort-descending > div:first-child::after {
+ .data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after {
filter: invert();
}
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js (265236 => 265237)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2020-08-04 01:16:13 UTC (rev 265236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2020-08-04 01:51:14 UTC (rev 265237)
@@ -793,10 +793,11 @@
let headerView = column["headerView"];
console.assert(headerView instanceof WI.View);
+ headerView.element.classList.add("header-cell-content");
headerCellElement.appendChild(headerView.element);
this.addSubview(headerView);
} else {
- let titleElement = headerCellElement.createChild("div");
+ let titleElement = headerCellElement.createChild("div", "header-cell-content");
if (column["titleDOMFragment"])
titleElement.appendChild(column["titleDOMFragment"]);
else
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css (265236 => 265237)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css 2020-08-04 01:16:13 UTC (rev 265236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css 2020-08-04 01:51:14 UTC (rev 265237)
@@ -75,6 +75,14 @@
bottom: 0;
}
+body[dir=ltr] .network-table.showing-detail .network-detail {
+ border-left: 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/NetworkTableContentView.css (265236 => 265237)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css 2020-08-04 01:16:13 UTC (rev 265236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css 2020-08-04 01:51:14 UTC (rev 265237)
@@ -163,6 +163,10 @@
color: transparent;
}
+.network-table > .table .header .cell.waterfall:matches(.sort-ascending, .sort-descending) {
+ background-color: var(--background-color-selected);
+}
+
.network-table > .table :not(.header) .cell:first-of-type {
background: rgba(0, 0, 0, 0.07);
}
@@ -172,6 +176,14 @@
height: 20px;
}
+body[dir=ltr] .network-table > .table :not(.header) .cell.waterfall {
+ border-left: 1px solid var(--graph-line-color);
+}
+
+body[dir=rtl] .network-table > .table :not(.header) .cell.waterfall {
+ border-right: 1px solid var(--graph-line-color);
+}
+
.network-table > .table :not(.header) .cell.waterfall .waterfall-container {
position: absolute;
top: 0;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css (265236 => 265237)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css 2020-08-04 01:16:13 UTC (rev 265236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css 2020-08-04 01:51:14 UTC (rev 265237)
@@ -34,7 +34,7 @@
width: 100%;
height: 1px;
- background-color: hsla(0, 0%, var(--foreground-lightness), 0.07);
+ background-color: var(--graph-line-color);
text-align: right;
pointer-events: none;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Table.css (265236 => 265237)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Table.css 2020-08-04 01:16:13 UTC (rev 265236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Table.css 2020-08-04 01:51:14 UTC (rev 265237)
@@ -31,7 +31,7 @@
background: var(--background-color);
--table-column-border-start: 1px solid transparent;
- --table-column-border-end: 0.5px solid var(--border-color);
+ --table-column-border-end: 1px solid var(--border-color);
}
.table > .header {
@@ -47,11 +47,11 @@
}
.table > .header > .sortable:active {
- background-color: hsl(0, 0%, 70%);
+ background-color: var(--background-color-pressed);
}
.table > .header > :matches(.sort-ascending, .sort-descending) {
- background-color: hsl(0, 0%, 90%);
+ font-weight: var(--sorted-header-font-weight);
-webkit-padding-end: 18px;
}
@@ -149,20 +149,29 @@
overflow: hidden;
}
-body[dir=ltr] .table .cell:not(:last-child) {
- border-right: var(--table-column-border-end);
+.table > .header .cell {
+ padding-top: var(--table-header-cell-vertical-padding);
+ padding-bottom: var(--table-header-cell-vertical-padding);
+ line-height: calc(var(--navigation-bar-height) - 1px - 2 * var(--table-header-cell-vertical-padding));
+
+ --table-header-cell-vertical-padding: 4px;
}
-body[dir=rtl] .table .cell:not(:last-child) {
- border-left: var(--table-column-border-end);
+.table > .header .cell:not(:first-child)::before {
+ content: "";
+ position: absolute;
+ top: var(--table-header-cell-vertical-padding);
+ bottom: var(--table-header-cell-vertical-padding);
+ width: 1px;
+ background-color: var(--separator-color);
}
-body[dir=ltr] .table .cell:first-child {
- border-left: var(--table-column-border-start);
+body[dir=ltr] .table > .header .cell:not(:first-child)::before {
+ left: 0;
}
-body[dir=rtl] .table .cell:first-child {
- border-right: var(--table-column-border-start);
+body[dir=rtl] .table > .header .cell:not(:first-child)::before {
+ right: 0;
}
.table .cell.align-right {
@@ -178,14 +187,6 @@
}
@media (prefers-color-scheme: dark) {
- .table > .header > .sortable:active {
- background-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
- }
-
- .table > .header > :matches(.sort-ascending, .sort-descending) {
- background: var(--background-color-selected);
- }
-
.table > .header > :matches(.sort-ascending, .sort-descending)::after {
filter: invert();
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css (265236 => 265237)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css 2020-08-04 01:16:13 UTC (rev 265236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css 2020-08-04 01:51:14 UTC (rev 265237)
@@ -37,10 +37,15 @@
border-top: none;
}
+.data-grid th.graph-column:matches(.sort-ascending, .sort-descending) {
+ background-color: var(--background-color-selected);
+}
+
.data-grid.timeline th.graph-column > .timeline-ruler {
position: absolute;
top: 0;
bottom: 0;
+ margin: 0;
}
.data-grid.timeline td.graph-column {
@@ -47,6 +52,14 @@
padding: 2px 0;
}
+body[dir=ltr] .data-grid.timeline td.graph-column {
+ border-left: 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;
}
@@ -54,9 +67,3 @@
.data-grid.timeline td.graph-column .timeline-record-bar {
top: 2px;
}
-
-@media (prefers-color-scheme: dark) {
- .data-grid th:matches(.sort-ascending, .sort-descending) {
- background: var(--background-color-selected);
- }
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css (265236 => 265237)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css 2020-08-04 01:16:13 UTC (rev 265236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css 2020-08-04 01:51:14 UTC (rev 265237)
@@ -82,6 +82,7 @@
position: absolute;
top: 6px;
font-size: 9px;
+ font-weight: normal;
color: hsl(0, 0%, 50%);
white-space: nowrap;
@@ -110,7 +111,7 @@
z-index: var(--timeline-marker-z-index);
bottom: 0;
width: 1px;
- background-color: hsla(0, 0%, var(--foreground-lightness), 0.07);
+ background-color: var(--graph-line-color);
}
.timeline-ruler > .markers > .marker {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (265236 => 265237)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2020-08-04 01:16:13 UTC (rev 265236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2020-08-04 01:51:14 UTC (rev 265237)
@@ -55,6 +55,7 @@
--background-color-unfocused: hsla(0, 0%, calc(100% - var(--foreground-lightness)), 0.8);
--background-color-alternate: hsla(0, 0%, var(--foreground-lightness), 0.05);
--background-color-selected: hsla(0, 0%, var(--foreground-lightness), 0.1);
+ --background-color-pressed: hsla(0, 0%, var(--foreground-lightness), 0.05);
/* Gray background with lighter foreground. In dark mode this is lighter. */
--gray-background-color: hsl(0, 0%, 66%);
@@ -134,6 +135,8 @@
--timeline-scanner-color: hsl(0, 0%, 35%);
+ --graph-line-color: hsla(0, 0%, var(--foreground-lightness), 0.07);
+
--memory-_javascript_-fill-color: hsl(269, 65%, 75%);
--memory-_javascript_-stroke-color: hsl(269, 33%, 50%);
--memory-images-fill-color: hsl(0, 65%, 75%);
@@ -181,7 +184,7 @@
--network-request-color: hsl(118, 56%, 65%);
--network-response-color: hsl(202, 61%, 59%);
- --even-zebra-stripe-row-background-color: hsl(0, 0%, 95%);
+ --even-zebra-stripe-row-background-color: hsl(0, 0%, 96%);
--odd-zebra-stripe-row-background-color: white;
--transparent-stripe-background-gradient: linear-gradient(to bottom, transparent, transparent 50%, hsla(0, 0%, 0%, 0.03) 50%, hsla(0, 0%, 0%, 0.03)) top left / 100% 40px;
@@ -294,8 +297,6 @@
--glyph-color-inactive: hsl(0, 0%, 36%);
--border-color: hsl(0, 0%, 33%);
- --border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
-
--border-color-secondary: hsl(0, 0%, 27%);
--button-background-color: hsl(0, 0%, 43%);
