Attachment 360071 Details for Bug 193804 – [PATCH] Proposed Fix

[patch] [PATCH] Proposed Fix

colors-2.patch (text/plain), 9.93 KB, created by Joseph Pecoraro on 2019-01-24 19:23:12 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Joseph Pecoraro

Created: 2019-01-24 19:23:12 PST

Size: 9.93 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index e8d3a048e70..9b8ab5d66a9 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,50 @@
>+2019-01-24  Joseph Pecoraro  <pecoraro@apple.com>
>+
>+        Web Inspector: Improve Dark Mode appearance within Memory timeline
>+        https://bugs.webkit.org/show_bug.cgi?id=193804
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * 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-24  Joseph Pecoraro  <pecoraro@apple.com>
> 
>         Web Inspector: CPU Usage Timeline
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css b/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css
>index aaeb296d2aa..da0cbb6f367 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css
>@@ -52,10 +52,20 @@ body[dir=rtl] .timeline-overview-graph.cpu > .legend {
>     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);
> }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css b/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css
>index 1b137bc0659..140117ae752 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css
>@@ -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);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CircleChart.css b/Source/WebInspectorUI/UserInterface/Views/CircleChart.css
>index 4e656a243a2..00f271a8ba6 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CircleChart.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CircleChart.css
>@@ -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;
> }
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css b/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css
>index 739f3f1a1f6..cbb1c73e3eb 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css
>@@ -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 @@ body[dir=rtl] .memory-category-view > .details {
> }
> 
> .memory-category-view > .details > .name {
>-    color: black;
>+    color: var(--text-color);
> }
> 
> .memory-category-view > .graph {
>diff --git a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css
>index 31af436536f..54bf4e89f89 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css
>@@ -66,10 +66,20 @@ body[dir=rtl] .timeline-overview-graph.memory .memory-pressure-event {
>     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);
> }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css
>index 10e26b10256..376fdb62478 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css
>@@ -107,7 +107,7 @@ body[dir=rtl] .timeline-view.memory > .content > .overview > .divider {
> .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 @@ body[dir=rtl] .timeline-view.memory .legend > .row > :matches(.label, .size) {
> .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 {
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css b/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css
>index d57439da081..5851f95568c 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css
>@@ -86,7 +86,7 @@ body[dir=rtl] .timeline-overview:not(.frames) > :matches(.scroll-container, .tim
> }
> 
> .timeline-overview.edit-instruments > .tree-outline.timelines .item.selected {
>-    color: initial;
>+    color: var(--text-color);
>     background-color: transparent;
> }
> 
>@@ -116,10 +116,7 @@ body[dir=rtl] .timeline-overview:not(.frames) > :matches(.scroll-container, .tim
>     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 @@ body[dir=rtl] .timeline-overview > .scroll-container > .scroll-width-sizer {
>     .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);
>+    }
> }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/Variables.css b/Source/WebInspectorUI/UserInterface/Views/Variables.css
>index ef4c5542493..360465930c0 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/Variables.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/Variables.css
>@@ -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%);
> 
>@@ -252,6 +254,9 @@ body.window-inactive * {
>         --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%);

Flags:

mattbaker: review+

Actions: View | Formatted Diff | Diff

Attachments on bug 193804: 360055 | 360056 | 360057 | 360070 | 360071 | 360169