Changeset 240506 in webkit


Ignore:
Timestamp:
Jan 25, 2019 2:05:09 PM (5 years ago)
Author:
Devin Rousso
Message:

Web Inspector: Timelines: DOMContentLoaded and load event lines need to be more obvious
​https://bugs.webkit.org/show_bug.cgi?id=193186
<rdar://problem/45100694>

Reviewed by Joseph Pecoraro.

Shift around z-index values to make Timelines markers appear behind record bars. Widen the
marker hit region to make it easier to see the tooltip.

  • UserInterface/Views/Variables.css:

(:root):

  • UserInterface/Views/TimelineRuler.css:

(.timeline-ruler):
(.timeline-ruler > .markers):
(.timeline-ruler > .markers > .marker):
(body[dir=ltr] .timeline-ruler > .markers > .marker):
(body[dir=rtl] .timeline-ruler > .markers > .marker):
(.timeline-ruler > .markers > .marker::before):
(body[dir=ltr] .timeline-ruler > .markers > .marker::before):
(body[dir=rtl] .timeline-ruler > .markers > .marker::before):
(.timeline-ruler > .markers > .marker::after): Added.
(body[dir=ltr] .timeline-ruler > .markers > .marker::after): Added.
(body[dir=rtl] .timeline-ruler > .markers > .marker::after): Added.
(.timeline-ruler > .markers > .marker.current-time):
(.timeline-ruler > .markers > .marker.current-time::after): Added.
(.timeline-ruler > .markers > .marker.load-event):
(.timeline-ruler > .markers > .marker.dom-content-event):
(.timeline-ruler > .markers > .marker.timestamp):
(.timeline-ruler > .selection-handle):
(.timeline-ruler.both-handles-clamped > .selection-handle):
(.timeline-ruler > .shaded-area):
(.timeline-ruler > .markers > .marker.current-time::before): Deleted.

  • UserInterface/Views/TimelineRecordBar.css:

(.timeline-record-bar):
(.timeline-record-bar > .segment):

  • UserInterface/Views/CPUTimelineOverviewGraph.css:

(.timeline-overview-graph.cpu > .legend):

  • UserInterface/Views/MemoryTimelineOverviewGraph.css:

(.timeline-overview-graph.memory > .legend):

Location:
trunk/Source/WebInspectorUI
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r240502 r240506  
     12019-01-25  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Timelines: DOMContentLoaded and load event lines need to be more obvious
     4        https://bugs.webkit.org/show_bug.cgi?id=193186
     5        <rdar://problem/45100694>
     6
     7        Reviewed by Joseph Pecoraro.
     8
     9        Shift around z-index values to make Timelines markers appear behind record bars. Widen the
     10        marker hit region to make it easier to see the tooltip.
     11
     12        * UserInterface/Views/Variables.css:
     13        (:root):
     14
     15        * UserInterface/Views/TimelineRuler.css:
     16        (.timeline-ruler):
     17        (.timeline-ruler > .markers):
     18        (.timeline-ruler > .markers > .marker):
     19        (body[dir=ltr] .timeline-ruler > .markers > .marker):
     20        (body[dir=rtl] .timeline-ruler > .markers > .marker):
     21        (.timeline-ruler > .markers > .marker::before):
     22        (body[dir=ltr] .timeline-ruler > .markers > .marker::before):
     23        (body[dir=rtl] .timeline-ruler > .markers > .marker::before):
     24        (.timeline-ruler > .markers > .marker::after): Added.
     25        (body[dir=ltr] .timeline-ruler > .markers > .marker::after): Added.
     26        (body[dir=rtl] .timeline-ruler > .markers > .marker::after): Added.
     27        (.timeline-ruler > .markers > .marker.current-time):
     28        (.timeline-ruler > .markers > .marker.current-time::after): Added.
     29        (.timeline-ruler > .markers > .marker.load-event):
     30        (.timeline-ruler > .markers > .marker.dom-content-event):
     31        (.timeline-ruler > .markers > .marker.timestamp):
     32        (.timeline-ruler > .selection-handle):
     33        (.timeline-ruler.both-handles-clamped > .selection-handle):
     34        (.timeline-ruler > .shaded-area):
     35        (.timeline-ruler > .markers > .marker.current-time::before): Deleted.
     36
     37        * UserInterface/Views/TimelineRecordBar.css:
     38        (.timeline-record-bar):
     39        (.timeline-record-bar > .segment):
     40
     41        * UserInterface/Views/CPUTimelineOverviewGraph.css:
     42        (.timeline-overview-graph.cpu > .legend):
     43        * UserInterface/Views/MemoryTimelineOverviewGraph.css:
     44        (.timeline-overview-graph.memory > .legend):
     45
    1462019-01-25  Devin Rousso  <drousso@apple.com>
    247

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

    r240457 r240506  
    3636    position: absolute;
    3737    top: 0;
     38    z-index: var(--timeline-record-z-index);
    3839    padding: 2px;
    3940    font-size: 8px;

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

    r213942 r240506  
    3636    position: absolute;
    3737    top: 0;
     38    z-index: var(--timeline-record-z-index);
    3839    padding: 2px;
    3940    font-size: 8px;

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

    r238484 r240506  
    2727    position: absolute;
    2828    height: 12px;
    29     z-index: 1;
     29    z-index: var(--timeline-record-z-index);
    3030
    3131    --timeline-record-bar-has-inactive-segment-not-inactive-segment-border-start: 1px solid hsla(215, 67%, 53%, 0.7) !important;
    … …  
    3939    border-radius: 3px;
    4040    min-width: 4px;
    41     z-index: 1;
     41    z-index: var(--timeline-record-z-index);
    4242}
    4343

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

    r230891 r240506  
    2727    position: relative;
    2828    pointer-events: none;
    29     z-index: 1;
    3029
    3130    --timeline-ruler-marker-translateX: -1px;
    … …  
    104103    right: 0;
    105104    bottom: 0;
    106     z-index: 10;
     105    z-index: var(--timeline-marker-z-index);
    107106}
    108107
    … …  
    119118    top: 0;
    120119    bottom: 0;
    121     pointer-events: all;
    122 
    123     border: 0 solid hsla(0, 0%, 50%, 0.5);
     120    width: 3px;
     121    color: hsla(0, 0%, 50%, 0.5);
     122    border: 0 solid currentColor;
     123    pointer-events: all;
     124
     125    --timeline-ruler-marker-border-width: 1px;
    124126}
    125127
    126128body[dir=ltr] .timeline-ruler > .markers > .marker {
    127     border-left-width: 1px;
     129    border-left-width: var(--timeline-ruler-marker-border-width);
    128130}
    129131
    130132body[dir=rtl] .timeline-ruler > .markers > .marker {
    131     border-right-width: 1px;
    132 }
    133 
    134 /* Larger tooltip area */
    135 .timeline-ruler > .markers > .marker {
    136     z-index: 20;
    137     width: 3px;
     133    border-right-width: var(--timeline-ruler-marker-border-width);
    138134}
    139135
    140136.timeline-ruler > .markers > .marker::before {
    141     width: 3px;
     137    width: var(--timeline-ruler-marker-before-size);
     138    position: absolute;
     139    top: 0;
     140    bottom: 0;
    142141    content: "";
    143     position: absolute;
    144     top: 0;
    145     bottom: 0;
    146 
    147     --timeline-ruler-marker-before-offset-start: -3px;
     142
     143    --timeline-ruler-marker-before-size: 6px;
     144    --timeline-ruler-marker-before-offset: calc(-1 * ((var(--timeline-ruler-marker-before-size) + var(--timeline-ruler-marker-border-width)) / 2));
    148145}
    149146
    150147body[dir=ltr] .timeline-ruler > .markers > .marker::before {
    151     left: var(--timeline-ruler-marker-before-offset-start);
     148    left: var(--timeline-ruler-marker-before-offset);
    152149}
    153150
    154151body[dir=rtl] .timeline-ruler > .markers > .marker::before {
    155     right: var(--timeline-ruler-marker-before-offset-start);
     152    right: var(--timeline-ruler-marker-before-offset);
     153}
     154
     155.timeline-ruler > .markers > .marker::after {
     156    position: absolute;
     157    top: calc(-1 * (var(--timeline-ruler-marker-after-size) - 1px) / 2);
     158    content: "";
     159    border-right: calc(var(--timeline-ruler-marker-after-size) / 2) solid transparent;
     160    border-left: calc(var(--timeline-ruler-marker-after-size) / 2) solid transparent;
     161    border-top: calc(var(--timeline-ruler-marker-after-size) / 2) solid currentColor;
     162
     163    --timeline-ruler-marker-after-size: 10px;
     164    --timeline-ruler-marker-after-offset: calc(-1 * ((var(--timeline-ruler-marker-after-size) + var(--timeline-ruler-marker-border-width)) / 2));
     165}
     166
     167body[dir=ltr] .timeline-ruler > .markers > .marker::after {
     168    left: var(--timeline-ruler-marker-after-offset);
     169}
     170
     171body[dir=rtl] .timeline-ruler > .markers > .marker::after {
     172    right: var(--timeline-ruler-marker-after-offset);
    156173}
    157174
    158175.timeline-ruler > .markers > .marker.current-time {
    159     border-color: red;
    160 }
    161 
    162 .timeline-ruler > .markers > .marker.current-time::before {
    163     position: absolute;
    164     top: -5px;
    165     width: 9px;
    166     height: 9px;
    167     background-color: red;
     176    color: red;
     177}
     178
     179.timeline-ruler > .markers > .marker.current-time::after {
     180    top: var(--timeline-ruler-marker-after-offset);
     181    width: var(--timeline-ruler-marker-after-size);
     182    height: var(--timeline-ruler-marker-after-size);
     183    background-color: currentColor;
     184    border: none;
    168185    border-radius: 5px;
    169     content: "";
    170 
    171      --timeline-ruler-marker-before-offset-start: -5px;
    172186}
    173187
    174188.timeline-ruler > .markers > .marker.load-event {
    175     border-color: hsla(0, 100%, 50%, 0.25);
     189    color: hsl(0, 100%, 50%);
    176190}
    177191
    178192.timeline-ruler > .markers > .marker.dom-content-event {
    179     border-color: hsla(240, 100%, 50%, 0.25);
     193    color: hsl(240, 100%, 50%);
    180194}
    181195
    182196.timeline-ruler > .markers > .marker.timestamp {
    183     border-color: hsla(119, 100%, 21%, 0.25);
     197    color: hsl(119, 100%, 21%);
    184198}
    185199
    … …  
    209223    cursor: col-resize;
    210224    pointer-events: all;
    211     z-index: 15;
     225    z-index: var(--timeline-selection-z-index);
    212226
    213227    --timeline-ruler-selection-handle-translateX: -4px;
    … …  
    234248
    235249.timeline-ruler.both-handles-clamped > .selection-handle {
    236     z-index: 14;
     250    z-index: calc(var(--timeline-selection-z-index) - 1);
    237251}
    238252
    … …  
    256270    bottom: 0;
    257271    background-color: hsla(0, 0%, 0%, 0.1);
    258     z-index: 15;
     272    z-index: var(--timeline-selection-z-index);
    259273}
    260274

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

    r240457 r240506  
    106106    --syntax-highlight-regex-group-color: var(--text-color-gray-medium);
    107107
     108    --timeline-marker-z-index: 4;
     109    --timeline-record-z-index: 8;
     110    --timeline-selection-z-index: 16;
     111
    108112    --memory-javascript-fill-color: hsl(269, 65%, 75%);
    109113    --memory-javascript-stroke-color: hsl(269, 33%, 50%);
Note: See TracChangeset for help on using the changeset viewer.