Changeset 242072 in webkit


Ignore:
Timestamp:
Feb 25, 2019, 10:36:28 PM (6 years ago)
Author:
Joseph Pecoraro
Message:

Web Inspector: Dark Mode: Network Overview Graph segments have distracting white box shadow
​https://bugs.webkit.org/show_bug.cgi?id=194966

Reviewed by Devin Rousso.

  • 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.

Location:
trunk/Source/WebInspectorUI
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r242063 r242072  
     12019-02-25  Joseph Pecoraro  <pecoraro@apple.com>
     2
     3        Web Inspector: Dark Mode: Network Overview Graph segments have distracting white box shadow
     4        https://bugs.webkit.org/show_bug.cgi?id=194966
     5
     6        Reviewed by Devin Rousso.
     7
     8        * UserInterface/Views/Variables.css:
     9        (@media (prefers-color-scheme: dark)):
     10        Make global timeline even/odd colors where odd is the default content background
     11        color and even is slightly different. These were used in multiple places.
     12
     13        * UserInterface/Views/CPUTimelineOverviewGraph.css:
     14        (.timeline-overview-graph.cpu > .legend):
     15        (.timeline-overview-graph.cpu:nth-child(even) > .legend):
     16        (@media (prefers-color-scheme: dark)): Deleted.
     17        * UserInterface/Views/MemoryTimelineOverviewGraph.css:
     18        (.timeline-overview-graph.memory > .legend):
     19        (.timeline-overview-graph.memory:nth-child(even) > .legend):
     20        (@media (prefers-color-scheme: dark)): Deleted.
     21        * UserInterface/Views/NetworkTimelineOverviewGraph.css:
     22        (.timeline-overview-graph.network > .graph-row > .timeline-record-bar > .segment:not(.inactive)):
     23        (.timeline-overview-graph.network:nth-child(even) > .graph-row > .timeline-record-bar > .segment:not(.inactive)):
     24        Use the variable colors now and eliminate dark mode blocks.
     25
    1262019-02-25  Nikita Vasilyev  <nvasilyev@apple.com>
    227

  • trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css

    r240865 r242072  
    4040    font-size: 8px;
    4141    color: hsl(0, 0%, 50%);
    42     background-color: white;
     42    background-color: var(--timeline-odd-background-color);
    4343    pointer-events: none;
    4444
    … …  
    5555
    5656.timeline-overview-graph.cpu:nth-child(even) > .legend {
    57     background-color: hsl(0, 0%, 96%);
    58 }
    59 
    60 @media (prefers-color-scheme: dark) {
    61     .timeline-overview-graph.cpu > .legend {
    62         background-color: hsl(0, 0%, 21%);
    63     }
    64 
    65     .timeline-overview-graph.cpu:nth-child(even) > .legend {
    66         background-color: hsl(0, 0%, 25%);
    67     }
     57    background-color: var(--timeline-even-background-color);
    6858}
    6959

  • trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css

    r240518 r242072  
    4040    font-size: 8px;
    4141    color: hsl(0, 0%, 50%);
    42     background-color: white;
     42    background-color: var(--timeline-odd-background-color);
    4343    pointer-events: none;
    4444}
    … …  
    6969
    7070.timeline-overview-graph.memory:nth-child(even) > .legend {
    71     background-color: hsl(0, 0%, 96%);
    72 }
    73 
    74 @media (prefers-color-scheme: dark) {
    75     .timeline-overview-graph.memory > .legend {
    76         background-color: hsl(0, 0%, 21%);
    77     }
    78 
    79     .timeline-overview-graph.memory:nth-child(even) > .legend {
    80         background-color: hsl(0, 0%, 25%);
    81     }
     71    background-color: var(--timeline-even-background-color);
    8272}
    8373

  • trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.css

    r187105 r242072  
    3838
    3939.timeline-overview-graph.network > .graph-row > .timeline-record-bar > .segment:not(.inactive) {
    40     box-shadow: white 1px 0 0;
     40    box-shadow: var(--timeline-odd-background-color) 1px 0 0;
    4141}
    4242
    4343.timeline-overview-graph.network:nth-child(even) > .graph-row > .timeline-record-bar > .segment:not(.inactive) {
    44     box-shadow: hsl(0, 0%, 96%) 1px 0 0;
     44    box-shadow: var(--timeline-even-background-color) 1px 0 0;
    4545}

  • trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css

    r241638 r242072  
    115115    --timeline-selection-z-index: 16;
    116116
     117    --timeline-odd-background-color: var(--background-color-content);
     118    --timeline-even-background-color: hsl(0, 0%, 96%);
     119
    117120    --memory-javascript-fill-color: hsl(269, 65%, 75%);
    118121    --memory-javascript-stroke-color: hsl(269, 33%, 50%);
    … …  
    280283        --search-highlight-underline-color: hsla(60, 100%, 50%, 0.5);
    281284
     285        --timeline-even-background-color: hsl(0, 0%, 25%);
     286
    282287        /* Invert colors yet preserve the hue */
    283288        --filter-invert: invert(100%) hue-rotate(180deg);
Note: See TracChangeset for help on using the changeset viewer.