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

[patch] [PATCH] Proposed Fix

colors-1.patch (text/plain), 5.16 KB, created by Joseph Pecoraro on 2019-01-24 17:20:20 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Joseph Pecoraro

Created: 2019-01-24 17:20:20 PST

Size: 5.16 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index e8d3a048e70..ca5ca7b5566 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,30 @@
>+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/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.
>+
>+        * 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/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/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/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