Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (240517 => 240518)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-01-25 23:19:25 UTC (rev 240517)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-01-25 23:31:17 UTC (rev 240518)
@@ -1,3 +1,50 @@
+2019-01-25 Joseph Pecoraro <pecor...@apple.com>
+
+ Web Inspector: Improve Dark Mode appearance within Memory timeline
+ https://bugs.webkit.org/show_bug.cgi?id=193804
+
+ Reviewed by Matt Baker.
+
+ * UserInterface/Views/TimelineOverview.css:
+ (.timeline-overview.edit-instruments > .tree-outline.timelines .item.selected):
+ (.timeline-overview > .tree-outline.timelines .item.selected + .item,):
+ (@media (prefers-color-scheme: dark)):
+ (.timeline-overview > .tree-outline.timelines .item.selected + .item): Deleted.
+ (body.window-inactive .timeline-overview > .tree-outline.timelines .item.selected + .item): Deleted.
+ Fix some colors for Timelines edit mode.
+
+ * UserInterface/Views/CPUTimelineOverviewGraph.css:
+ (.timeline-overview-graph.cpu:nth-child(even) > .legend):
+ (@media (prefers-color-scheme: dark)):
+ (.timeline-overview-graph.cpu > .legend):
+ (.timeline-overview-graph:nth-child(even) > .legend): Deleted.
+ * UserInterface/Views/MemoryTimelineOverviewGraph.css:
+ (.timeline-overview-graph.memory:nth-child(even) > .legend):
+ (@media (prefers-color-scheme: dark)):
+ (.timeline-overview-graph.memory > .legend):
+ (.timeline-overview-graph:nth-child(even) > .legend): Deleted.
+ Improved colors in CPU / Memory overview graph legends.
+
+ * UserInterface/Views/CPUUsageView.css:
+ (.cpu-usage-view > .details):
+ * UserInterface/Views/CircleChart.css:
+ (.circle-chart > svg > path.background):
+ * UserInterface/Views/MemoryCategoryView.css:
+ (.memory-category-view > .details):
+ (.memory-category-view > .details > .name):
+ * UserInterface/Views/MemoryTimelineView.css:
+ (.timeline-view.memory > .content > .overview .total-usage,):
+ (.timeline-view.memory .legend > .row > .size):
+ Improved colors in CPU / Memory detail views.
+
+ * UserInterface/Views/Variables.css:
+ (:root):
+ Add a default --text-secondary-color which will end up slightly
+ lighter in dark mode where it was already implemented.
+
+ (@media (prefers-color-scheme: dark)):
+ Improved max-comparison colors.
+
2019-01-25 Devin Rousso <drou...@apple.com>
Web Inspector: Timelines: DOMContentLoaded and load event lines need to be more obvious
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css (240517 => 240518)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css 2019-01-25 23:19:25 UTC (rev 240517)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css 2019-01-25 23:31:17 UTC (rev 240518)
@@ -53,10 +53,20 @@
left: var(--cpu-timeline-overview-graph-legend-offset-end);
}
-.timeline-overview-graph:nth-child(even) > .legend {
+.timeline-overview-graph.cpu:nth-child(even) > .legend {
background-color: hsl(0, 0%, 96%);
}
+@media (prefers-color-scheme: dark) {
+ .timeline-overview-graph.cpu > .legend {
+ background-color: hsl(0, 0%, 21%);
+ }
+
+ .timeline-overview-graph.cpu:nth-child(even) > .legend {
+ background-color: hsl(0, 0%, 25%);
+ }
+}
+
body[dir=rtl] .timeline-overview-graph.cpu > .bar-chart {
transform: scaleX(-1);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css (240517 => 240518)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css 2019-01-25 23:19:25 UTC (rev 240517)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css 2019-01-25 23:31:17 UTC (rev 240518)
@@ -33,7 +33,7 @@
padding-top: 10px;
font-family: -webkit-system-font, sans-serif;
font-size: 12px;
- color: hsl(0, 0%, 70%);
+ color: var(--text-color-secondary);
-webkit-padding-start: 15px;
--cpu-usage-view-details-border-end: 1px solid var(--border-color);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CircleChart.css (240517 => 240518)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CircleChart.css 2019-01-25 23:19:25 UTC (rev 240517)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CircleChart.css 2019-01-25 23:31:17 UTC (rev 240518)
@@ -29,7 +29,7 @@
.circle-chart > svg > path.background {
fill: hsla(0, 0%, 0%, 0.02);
- stroke: hsla(0, 0%, 0%, 0.1);
+ stroke: hsla(0, 0%, var(--foreground-lightness), 0.1);
stroke-width: 1;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css (240517 => 240518)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css 2019-01-25 23:19:25 UTC (rev 240517)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css 2019-01-25 23:31:17 UTC (rev 240518)
@@ -33,7 +33,7 @@
padding-top: 10px;
font-family: -webkit-system-font, sans-serif;
font-size: 12px;
- color: hsl(0, 0%, 70%);
+ color: var(--text-color-secondary);
-webkit-padding-start: 15px;
--memory-category-view-details-border-end: 1px solid var(--border-color);
@@ -48,7 +48,7 @@
}
.memory-category-view > .details > .name {
- color: black;
+ color: var(--text-color);
}
.memory-category-view > .graph {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css (240517 => 240518)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css 2019-01-25 23:19:25 UTC (rev 240517)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css 2019-01-25 23:31:17 UTC (rev 240518)
@@ -67,10 +67,20 @@
border-right: var(--memory-timeline-overview-graph-pressure-event-border-start);
}
-.timeline-overview-graph:nth-child(even) > .legend {
+.timeline-overview-graph.memory:nth-child(even) > .legend {
background-color: hsl(0, 0%, 96%);
}
+@media (prefers-color-scheme: dark) {
+ .timeline-overview-graph.memory > .legend {
+ background-color: hsl(0, 0%, 21%);
+ }
+
+ .timeline-overview-graph.memory:nth-child(even) > .legend {
+ background-color: hsl(0, 0%, 25%);
+ }
+}
+
body[dir=rtl] .timeline-overview-graph.memory > .stacked-line-chart {
transform: scaleX(-1);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css (240517 => 240518)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css 2019-01-25 23:19:25 UTC (rev 240517)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css 2019-01-25 23:31:17 UTC (rev 240518)
@@ -107,7 +107,7 @@
.timeline-view.memory > .content > .overview .total-usage,
.timeline-view.memory > .content > .overview .max-percentage {
margin: auto;
- color: hsl(0, 0%, 70%);
+ color: var(--text-color-secondary);
}
.timeline-view.memory .legend {
@@ -167,7 +167,7 @@
.timeline-view.memory .legend > .row > .size {
position: absolute;
top: 12px;
- color: hsl(0, 0%, 70%);
+ color: var(--text-color-secondary);
}
.timeline-view.memory .legend > .row > .swatch._javascript_ {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css (240517 => 240518)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2019-01-25 23:19:25 UTC (rev 240517)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2019-01-25 23:31:17 UTC (rev 240518)
@@ -86,7 +86,7 @@
}
.timeline-overview.edit-instruments > .tree-outline.timelines .item.selected {
- color: initial;
+ color: var(--text-color);
background-color: transparent;
}
@@ -116,10 +116,7 @@
border-top: 1px solid hsla(0, 0%, 0%, 0.09);
}
-.timeline-overview > .tree-outline.timelines .item.selected + .item {
- border-top-color: hsl(0, 0%, 83%);
-}
-
+.timeline-overview > .tree-outline.timelines .item.selected + .item,
body.window-inactive .timeline-overview > .tree-outline.timelines .item.selected + .item {
border-top-color: hsl(0, 0%, 83%);
}
@@ -243,4 +240,9 @@
.timeline-overview > .tree-outline.timelines .item:not(.selected):not(:first-child) {
border-top-color: hsla(0, 0%, var(--foreground-lightness), 0.09);
}
+
+ .timeline-overview > .tree-outline.timelines .item.selected + .item,
+ body.window-inactive .timeline-overview > .tree-outline.timelines .item.selected + .item {
+ border-top-color: hsla(0, 0%, var(--foreground-lightness), 0.09);
+ }
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (240517 => 240518)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2019-01-25 23:19:25 UTC (rev 240517)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2019-01-25 23:31:17 UTC (rev 240518)
@@ -37,6 +37,8 @@
--text-color: black;
--text-color-active: black;
+ --text-color-secondary: hsl(0, 0%, 50%);
+
/* Dividers, separators, background fills */
--text-color-quaternary: hsl(0, 0%, 85%);
@@ -256,6 +258,9 @@
--error-background-color: hsl(11, 70%, 32%);
--error-background-color-secondary: hsl(6, 23%, 25%);
+ --memory-max-comparison-fill-color: hsl(225, 5%, 45%);
+ --memory-max-comparison-stroke-color: hsl(225, 5%, 65%);
+
--network-header-color: hsl(204, 52%, 55%);
--network-system-color: hsl(79, 95%, 50%);
--network-pseudo-header-color: hsl(312, 55%, 61%);
