- Revision
- 242072
- Author
- [email protected]
- Date
- 2019-02-25 22:36:28 -0800 (Mon, 25 Feb 2019)
Log Message
Web Inspector: Dark Mode: Network Overview Graph segments have distracting white box shadow
https://bugs.webkit.org/show_bug.cgi?id=194966
Reviewed by Devin Rousso.
* UserInterface/Views/Variables.css:
(@media (prefers-color-scheme: dark)):
Make global timeline even/odd colors where odd is the default content background
color and even is slightly different. These were used in multiple places.
* UserInterface/Views/CPUTimelineOverviewGraph.css:
(.timeline-overview-graph.cpu > .legend):
(.timeline-overview-graph.cpu:nth-child(even) > .legend):
(@media (prefers-color-scheme: dark)): Deleted.
* UserInterface/Views/MemoryTimelineOverviewGraph.css:
(.timeline-overview-graph.memory > .legend):
(.timeline-overview-graph.memory:nth-child(even) > .legend):
(@media (prefers-color-scheme: dark)): Deleted.
* UserInterface/Views/NetworkTimelineOverviewGraph.css:
(.timeline-overview-graph.network > .graph-row > .timeline-record-bar > .segment:not(.inactive)):
(.timeline-overview-graph.network:nth-child(even) > .graph-row > .timeline-record-bar > .segment:not(.inactive)):
Use the variable colors now and eliminate dark mode blocks.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (242071 => 242072)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-02-26 05:54:22 UTC (rev 242071)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-02-26 06:36:28 UTC (rev 242072)
@@ -1,3 +1,28 @@
+2019-02-25 Joseph Pecoraro <[email protected]>
+
+ Web Inspector: Dark Mode: Network Overview Graph segments have distracting white box shadow
+ https://bugs.webkit.org/show_bug.cgi?id=194966
+
+ Reviewed by Devin Rousso.
+
+ * UserInterface/Views/Variables.css:
+ (@media (prefers-color-scheme: dark)):
+ Make global timeline even/odd colors where odd is the default content background
+ color and even is slightly different. These were used in multiple places.
+
+ * UserInterface/Views/CPUTimelineOverviewGraph.css:
+ (.timeline-overview-graph.cpu > .legend):
+ (.timeline-overview-graph.cpu:nth-child(even) > .legend):
+ (@media (prefers-color-scheme: dark)): Deleted.
+ * UserInterface/Views/MemoryTimelineOverviewGraph.css:
+ (.timeline-overview-graph.memory > .legend):
+ (.timeline-overview-graph.memory:nth-child(even) > .legend):
+ (@media (prefers-color-scheme: dark)): Deleted.
+ * UserInterface/Views/NetworkTimelineOverviewGraph.css:
+ (.timeline-overview-graph.network > .graph-row > .timeline-record-bar > .segment:not(.inactive)):
+ (.timeline-overview-graph.network:nth-child(even) > .graph-row > .timeline-record-bar > .segment:not(.inactive)):
+ Use the variable colors now and eliminate dark mode blocks.
+
2019-02-25 Nikita Vasilyev <[email protected]>
Web Inspector: Styles: Command-/ should toggle edited property
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css (242071 => 242072)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css 2019-02-26 05:54:22 UTC (rev 242071)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css 2019-02-26 06:36:28 UTC (rev 242072)
@@ -39,7 +39,7 @@
padding: 2px;
font-size: 8px;
color: hsl(0, 0%, 50%);
- background-color: white;
+ background-color: var(--timeline-odd-background-color);
pointer-events: none;
--cpu-timeline-overview-graph-legend-offset-end: 0;
@@ -54,19 +54,9 @@
}
.timeline-overview-graph.cpu:nth-child(even) > .legend {
- background-color: hsl(0, 0%, 96%);
+ background-color: var(--timeline-even-background-color);
}
-@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 > .column-chart {
transform: scaleX(-1);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css (242071 => 242072)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css 2019-02-26 05:54:22 UTC (rev 242071)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css 2019-02-26 06:36:28 UTC (rev 242072)
@@ -39,7 +39,7 @@
padding: 2px;
font-size: 8px;
color: hsl(0, 0%, 50%);
- background-color: white;
+ background-color: var(--timeline-odd-background-color);
pointer-events: none;
}
@@ -68,19 +68,9 @@
}
.timeline-overview-graph.memory:nth-child(even) > .legend {
- background-color: hsl(0, 0%, 96%);
+ background-color: var(--timeline-even-background-color);
}
-@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/NetworkTimelineOverviewGraph.css (242071 => 242072)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.css 2019-02-26 05:54:22 UTC (rev 242071)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.css 2019-02-26 06:36:28 UTC (rev 242072)
@@ -37,9 +37,9 @@
}
.timeline-overview-graph.network > .graph-row > .timeline-record-bar > .segment:not(.inactive) {
- box-shadow: white 1px 0 0;
+ box-shadow: var(--timeline-odd-background-color) 1px 0 0;
}
.timeline-overview-graph.network:nth-child(even) > .graph-row > .timeline-record-bar > .segment:not(.inactive) {
- box-shadow: hsl(0, 0%, 96%) 1px 0 0;
+ box-shadow: var(--timeline-even-background-color) 1px 0 0;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (242071 => 242072)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2019-02-26 05:54:22 UTC (rev 242071)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2019-02-26 06:36:28 UTC (rev 242072)
@@ -114,6 +114,9 @@
--timeline-record-z-index: 8;
--timeline-selection-z-index: 16;
+ --timeline-odd-background-color: var(--background-color-content);
+ --timeline-even-background-color: hsl(0, 0%, 96%);
+
--memory-_javascript_-fill-color: hsl(269, 65%, 75%);
--memory-_javascript_-stroke-color: hsl(269, 33%, 50%);
--memory-images-fill-color: hsl(0, 65%, 75%);
@@ -279,6 +282,8 @@
--search-highlight-background-color-active: hsl(60, 100%, 50%);
--search-highlight-underline-color: hsla(60, 100%, 50%, 0.5);
+ --timeline-even-background-color: hsl(0, 0%, 25%);
+
/* Invert colors yet preserve the hue */
--filter-invert: invert(100%) hue-rotate(180deg);
