Attachment 362788 Details for Bug 194966 – [PATCH] Proposed Fix

[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:

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 */

Actions: View | Formatted Diff | Diff

Attachments on bug 194966: 362779 | 362780 | 362782 | 362787 | 362788 | 362811