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

[patch] [PATCH] Proposed Fix

here-1.patch (text/plain), 5.92 KB, created by Joseph Pecoraro on 2019-02-22 18:45:40 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Joseph Pecoraro

Created: 2019-02-22 18:45:40 PST

Size: 5.92 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index ea05d94e1d1..c2764a6312c 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,28 @@
>+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/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-22  Nikita Vasilyev  <nvasilyev@apple.com>
> 
>         Web Inspector: Dark Mode: DOM Content Loaded blue marker is too dark
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css b/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css
>index c5d14c3f39f..31b28db96df 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 > .column-chart {
>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 3eac5b98ed3..37774a40892 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%);
>+
>     --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 @@ 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%);
>+
>         /* Invert colors yet preserve the hue */
>         --filter-invert: invert(100%) hue-rotate(180deg);
>

Flags:

hi: review+

Actions: View | Formatted Diff | Diff

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