Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (249654 => 249655)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-09-09 19:01:28 UTC (rev 249654)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-09-09 19:02:10 UTC (rev 249655)
@@ -1,3 +1,45 @@
+2019-09-09 Joseph Pecoraro <pecor...@apple.com>
+
+ Web Inspector: Dark Mode: Overview Timeline View has jarring white box-shadows in dark mode
+ https://bugs.webkit.org/show_bug.cgi?id=201442
+ <rdar://problem/54999794>
+
+ Reviewed by Devin Rousso.
+
+ * UserInterface/Views/DataGrid.css:
+ (.data-grid:not(.variable-height-rows) table.data):
+ (.data-grid:not(.variable-height-rows) table.data.even-first-zebra-stripe):
+ (.data-grid.variable-height-rows.even-first-zebra-stripe table.data tr:nth-child(odd)):
+ (.data-grid.variable-height-rows.even-first-zebra-stripe table.data tr:nth-child(even)):
+ (.data-grid:not(.variable-height-rows) table.data.odd-first-zebra-stripe): Deleted.
+ (.data-grid.variable-height-rows.odd-first-zebra-stripe table.data tr:nth-child(odd)): Deleted.
+ (.data-grid.variable-height-rows.odd-first-zebra-stripe table.data tr:nth-child(even)): Deleted.
+ * UserInterface/Views/DataGrid.js:
+ (WI.DataGrid.prototype.updateVisibleRows):
+ * UserInterface/Views/Table.css:
+ (.table > .data-container > .data-list):
+ (.table > .data-container > .data-list.even-first-zebra-stripe):
+ (.table > .data-container > .data-list.odd-first-zebra-stripe): Deleted.
+ * UserInterface/Views/Table.js:
+ In the gradients "even" was mistakenly first. Fix these so that "odd" is first and the
+ unusual case would be having "even" first. This allows us to line up with `nth-of-type(even)`.
+
+ * UserInterface/Views/Main.css:
+ (:root):
+ (@media (prefers-color-scheme: dark)):
+ Flip even and odd so we maintain the same styles for gradients.
+
+ * UserInterface/Views/OverviewTimelineView.css:
+ (.timeline-view.overview > .data-grid tr):
+ (.timeline-view.overview > .data-grid tr:nth-child(even)):
+ (.timeline-view.overview > .data-grid tr.parent:not(.expanded) td.graph-column .timeline-record-bar:not(.has-inactive-segment) > .segment):
+ (.timeline-view.overview > .data-grid tr.parent:not(.expanded).selected td.graph-column .timeline-record-bar:not(.has-inactive-segment) > .segment):
+ (.timeline-view.overview > .data-grid tr.parent:not(.expanded) td.graph-column .timeline-record-bar.has-inactive-segment > .segment:not(.inactive)):
+ (.timeline-view.overview > .data-grid tr.parent:not(.expanded).selected td.graph-column .timeline-record-bar.has-inactive-segment > .segment:not(.inactive)):
+ (@media (prefers-color-scheme: dark)):
+ (WI.Table.prototype._updateVisibleRows):
+ * UserInterface/Views/Variables.css:
+
2019-09-06 Devin Rousso <drou...@apple.com>
Web Inspector: CSS Formatter: the closing } of nested @media aren't indented
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css (249654 => 249655)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css 2019-09-09 19:01:28 UTC (rev 249654)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css 2019-09-09 19:02:10 UTC (rev 249655)
@@ -124,7 +124,7 @@
}
.data-grid:not(.variable-height-rows) table.data {
- background-image: linear-gradient(to bottom, var(--even-zebra-stripe-row-background-color), var(--even-zebra-stripe-row-background-color) 50%, var(--odd-zebra-stripe-row-background-color) 50%, var(--odd-zebra-stripe-row-background-color));
+ background-image: linear-gradient(to bottom, var(--odd-zebra-stripe-row-background-color), var(--odd-zebra-stripe-row-background-color) 50%, var(--even-zebra-stripe-row-background-color) 50%, var(--even-zebra-stripe-row-background-color));
background-size: 100% 40px;
}
@@ -132,8 +132,8 @@
height: 16px;
}
-.data-grid:not(.variable-height-rows) table.data.odd-first-zebra-stripe {
- background-image: linear-gradient(to bottom, var(--odd-zebra-stripe-row-background-color), var(--odd-zebra-stripe-row-background-color) 50%, var(--even-zebra-stripe-row-background-color) 50%, var(--even-zebra-stripe-row-background-color));
+.data-grid:not(.variable-height-rows) table.data.even-first-zebra-stripe {
+ background-image: linear-gradient(to bottom, var(--even-zebra-stripe-row-background-color), var(--even-zebra-stripe-row-background-color) 50%, var(--odd-zebra-stripe-row-background-color) 50%, var(--odd-zebra-stripe-row-background-color));
}
.data-grid.inline table.data {
@@ -156,11 +156,11 @@
background-color: var(--even-zebra-stripe-row-background-color);
}
-.data-grid.variable-height-rows.odd-first-zebra-stripe table.data tr:nth-child(odd) {
+.data-grid.variable-height-rows.even-first-zebra-stripe table.data tr:nth-child(odd) {
background-color: var(--even-zebra-stripe-row-background-color);
}
-.data-grid.variable-height-rows.odd-first-zebra-stripe table.data tr:nth-child(even) {
+.data-grid.variable-height-rows.even-first-zebra-stripe table.data tr:nth-child(even) {
background-color: var(--odd-zebra-stripe-row-background-color);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js (249654 => 249655)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2019-09-09 19:01:28 UTC (rev 249654)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2019-09-09 19:02:10 UTC (rev 249655)
@@ -1142,7 +1142,8 @@
this._bottomDataTableMarginElement.style.height = marginBottom + "px";
}
- this._dataTableElement.classList.toggle("odd-first-zebra-stripe", !!(topHiddenRowCount % 2));
+ // If there are an odd number of rows hidden, the first visible row must be an even row.
+ this._dataTableElement.classList.toggle("even-first-zebra-stripe", !!(topHiddenRowCount % 2));
this.dataTableBodyElement.removeChildren();
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css (249654 => 249655)
--- trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css 2019-09-09 19:01:28 UTC (rev 249654)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css 2019-09-09 19:02:10 UTC (rev 249655)
@@ -59,12 +59,21 @@
top: 2px;
}
+.timeline-view.overview > .data-grid tr {
+ --timeline-record-bar-box-shadow-color: var(--odd-zebra-stripe-row-background-color);
+ --timeline-record-bar-selected-inactive-box-shadow-color: var(--selected-background-color-unfocused);
+}
+
+.timeline-view.overview > .data-grid tr:nth-child(even) {
+ --timeline-record-bar-box-shadow-color: var(--even-zebra-stripe-row-background-color);
+}
+
.timeline-view.overview > .data-grid tr.parent:not(.expanded) td.graph-column .timeline-record-bar:not(.has-inactive-segment) > .segment {
- box-shadow: white 0 0 0 1px;
+ box-shadow: var(--timeline-record-bar-box-shadow-color) 0 0 0 1px;
}
.timeline-view.overview > .data-grid tr.parent:not(.expanded).selected td.graph-column .timeline-record-bar:not(.has-inactive-segment) > .segment {
- box-shadow: hsl(0, 0%, 83%) 0 0 0 1px;
+ box-shadow: var(--timeline-record-bar-selected-inactive-box-shadow-color) 0 0 0 1px;
}
.timeline-view.overview > .data-grid:focus tr.parent:not(.expanded).selected td.graph-column .timeline-record-bar:not(.has-inactive-segment) > .segment {
@@ -72,13 +81,23 @@
}
.timeline-view.overview > .data-grid tr.parent:not(.expanded) td.graph-column .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
- box-shadow: white 1px 0 0;
+ box-shadow: var(--timeline-record-bar-box-shadow-color) 1px 0 0;
}
.timeline-view.overview > .data-grid tr.parent:not(.expanded).selected td.graph-column .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
- box-shadow: hsl(0, 0%, 83%) 1px 0 0;
+ box-shadow: var(--timeline-record-bar-selected-inactive-box-shadow-color) 1px 0 0;
}
.timeline-view.overview > .data-grid:focus tr.parent:not(.expanded).selected td.graph-column .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
box-shadow: hsl(215, 67%, 53%) 1px 0 0;
}
+
+@media (prefers-color-scheme: dark) {
+ .timeline-view.overview > .data-grid tr {
+ --timeline-record-bar-selected-inactive-box-shadow-color: hsl(0, 0%, 35%);
+ }
+
+ .timeline-view.overview > .data-grid tr:nth-child(even) {
+ --timeline-record-bar-selected-inactive-box-shadow-color: hsl(0, 0%, 38%);
+ }
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Table.css (249654 => 249655)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Table.css 2019-09-09 19:01:28 UTC (rev 249654)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Table.css 2019-09-09 19:02:10 UTC (rev 249655)
@@ -113,12 +113,12 @@
margin: 0;
min-height: 100%;
- background-image: linear-gradient(to bottom, var(--even-zebra-stripe-row-background-color), var(--even-zebra-stripe-row-background-color) 50%, var(--odd-zebra-stripe-row-background-color) 50%, var(--odd-zebra-stripe-row-background-color));
+ background-image: linear-gradient(to bottom, var(--odd-zebra-stripe-row-background-color), var(--odd-zebra-stripe-row-background-color) 50%, var(--even-zebra-stripe-row-background-color) 50%, var(--even-zebra-stripe-row-background-color));
background-size: 100% 40px;
}
-.table > .data-container > .data-list.odd-first-zebra-stripe {
- background-image: linear-gradient(to bottom, var(--odd-zebra-stripe-row-background-color), var(--odd-zebra-stripe-row-background-color) 50%, var(--even-zebra-stripe-row-background-color) 50%, var(--even-zebra-stripe-row-background-color));
+.table > .data-container > .data-list.even-first-zebra-stripe {
+ background-image: linear-gradient(to bottom, var(--even-zebra-stripe-row-background-color), var(--even-zebra-stripe-row-background-color) 50%, var(--odd-zebra-stripe-row-background-color) 50%, var(--odd-zebra-stripe-row-background-color));
}
.table > .data-container > .data-list > li {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Table.js (249654 => 249655)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Table.js 2019-09-09 19:01:28 UTC (rev 249654)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Table.js 2019-09-09 19:02:10 UTC (rev 249655)
@@ -1127,8 +1127,10 @@
// Completely remove all rows and add new ones.
this._listElement.removeChildren();
- this._listElement.classList.toggle("odd-first-zebra-stripe", !!(topHiddenRowCount % 2));
+ // If there are an odd number of rows hidden, the first visible row must be an even row.
+ this._listElement.classList.toggle("even-first-zebra-stripe", !!(topHiddenRowCount % 2));
+
for (let i = this._visibleRowIndexStart; i < this._visibleRowIndexEnd && i < numberOfRows; ++i) {
let row = this._getOrCreateRow(i);
this._listElement.appendChild(row);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (249654 => 249655)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2019-09-09 19:01:28 UTC (rev 249654)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2019-09-09 19:02:10 UTC (rev 249655)
@@ -175,8 +175,8 @@
--network-request-color: hsl(118, 56%, 65%);
--network-response-color: hsl(202, 61%, 59%);
- --even-zebra-stripe-row-background-color: white;
- --odd-zebra-stripe-row-background-color: hsl(0, 0%, 95%);
+ --even-zebra-stripe-row-background-color: hsl(0, 0%, 95%);
+ --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;
--toolbar-height: 36px;
@@ -316,8 +316,8 @@
--cpu-medium-color: hsl(46, 91%, 62%);
--cpu-high-color: hsl(6, 79%, 57%);
- --even-zebra-stripe-row-background-color: var(--background-color);
- --odd-zebra-stripe-row-background-color: var(--background-color-secondary);
+ --even-zebra-stripe-row-background-color: var(--background-color-secondary);
+ --odd-zebra-stripe-row-background-color: var(--background-color);
--transparent-stripe-background-gradient: linear-gradient(to bottom, transparent, transparent 50%, hsla(0, 0%, 100%, 0.03) 50%, hsla(0, 0%, 100%, 0.03)) top left / 100% 40px;
--search-highlight-text-color: hsl(60, 100%, 50%);
