WebKit Bugzilla
Attachment 362788 Details for
Bug 194966
: Web Inspector: Dark Mode: Network Overview Graph segments have distracting white box shadow
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
[patch]
[PATCH] Proposed Fix
b3.patch (text/plain), 6.68 KB, created by
Joseph Pecoraro
on 2019-02-22 16:51:23 PST
(
hide
)
Description:
[PATCH] Proposed Fix
Filename:
MIME Type:
Creator:
Joseph Pecoraro
Created:
2019-02-22 16:51:23 PST
Size:
6.68 KB
patch
obsolete
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog >index 85b0d848739..c00135ad664 100644 >--- a/Source/WebInspectorUI/ChangeLog >+++ b/Source/WebInspectorUI/ChangeLog >@@ -1,3 +1,30 @@ >+2019-02-22 Joseph Pecoraro <pecoraro@apple.com> >+ >+ Web Inspector: Dark Mode: Network Overview Graph segments have distracting white box shadow >+ https://bugs.webkit.org/show_bug.cgi?id=194966 >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ * 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/CPUTimelineView.css: >+ (.timeline-view.cpu :matches(.line-chart, .stacked-line-chart) .markers > div > .label): >+ * 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-21 Joseph Pecoraro <pecoraro@apple.com> > > Web Inspector: Remove unused Timeline record selection code path >diff --git a/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css b/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css >index c10dd784c2e..2e00451fbaa 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css >+++ b/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css >@@ -39,7 +39,7 @@ body .timeline-overview > .graphs-container > .timeline-overview-graph.cpu { > 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,17 +54,7 @@ body[dir=rtl] .timeline-overview-graph.cpu > .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%); >- } >+ background-color: var(--timeline-even-background-color); > } > > body[dir=rtl] .timeline-overview-graph.cpu > .stacked-column-chart { >diff --git a/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css >index c2116e7f0dc..f21425d06fa 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css >+++ b/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css >@@ -213,7 +213,7 @@ body[dir=rtl] .timeline-view.cpu :matches(.line-chart, .stacked-line-chart) .mar > padding: 2px; > font-size: 8px; > color: var(--text-color-secondary); >- background-color: var(--background-color-content); >+ background-color: var(--timeline-odd-background-color); > } > > .timeline-view.cpu .cpu-usage-indicator-view > .graph > .range-chart rect { >diff --git a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css >index 63191d08252..0db380098e0 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css >+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css >@@ -39,7 +39,7 @@ body .timeline-overview > .graphs-container > .timeline-overview-graph.memory { > padding: 2px; > font-size: 8px; > color: hsl(0, 0%, 50%); >- background-color: white; >+ background-color: var(--timeline-odd-background-color); > pointer-events: none; > } > >@@ -68,17 +68,7 @@ body[dir=rtl] .timeline-overview-graph.memory .memory-pressure-event { > } > > .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%); >- } >+ background-color: var(--timeline-even-background-color); > } > > body[dir=rtl] .timeline-overview-graph.memory > .stacked-line-chart { >diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.css b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.css >index 07332fa04ee..6882cb71df9 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.css >+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.css >@@ -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; > } >diff --git a/Source/WebInspectorUI/UserInterface/Views/Variables.css b/Source/WebInspectorUI/UserInterface/Views/Variables.css >index c5054cc5e9e..17f08bad195 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/Variables.css >+++ b/Source/WebInspectorUI/UserInterface/Views/Variables.css >@@ -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%); >+ > --timeline-scanner-color: hsl(0, 0%, 35%); > > --memory-javascript-fill-color: hsl(269, 65%, 75%); >@@ -294,6 +297,8 @@ body.window-inactive * { > --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%); >+ > --timeline-scanner-color: hsl(0, 0%, 80%); > > /* Invert colors yet preserve the hue */
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 194966
:
362779
|
362780
|
362782
|
362787
|
362788
|
362811