Web Inspector: Elements: Styles: add icons for various CSS rule types
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / TimelineRecordBar.css
1 /*
2  * Copyright (C) 2014 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 .timeline-record-bar {
27     position: absolute;
28     height: 12px;
29     z-index: var(--timeline-record-z-index);
30
31     --timeline-record-bar-has-inactive-segment-not-inactive-segment-border-start: 1px solid hsla(215, 67%, 53%, 0.7) !important;
32 }
33
34 .timeline-record-bar > .segment {
35     position: absolute;
36     height: 100%;
37     background-color: hsl(0, 0%, 88%);
38     border: 1px solid hsl(0, 0%, 78%);
39     border-radius: 3px;
40     min-width: 4px;
41     z-index: var(--timeline-record-z-index);
42 }
43
44 .timeline-record-bar.selected > .segment {
45     background-color: var(--selected-text-background-color) !important;
46     border-color: var(--glyph-color-active) !important;
47 }
48
49 .timeline-record-bar:not(.has-inactive-segment) > .segment {
50     left: 0;
51     width: 100%;
52 }
53
54 .timeline-record-bar > .segment.inactive {
55     z-index: 0;
56 }
57
58 /*
59 The selector `.timeline-record-bar.has-inactive-segment > .segment:not(.inactive)` is used to
60 differentiate between the "active" and "inactive" parts of a network entry.  As an example, the
61 "active" part would be the Response and the "inactive" part would be the Request.  This selector
62 ensures that there is a different style between "active" and "inactive" only when the network entry
63 has an "inactive" segment.
64 */
65
66 body[dir=ltr] .timeline-record-bar > .segment.inactive,
67 body[dir=ltr] .timeline-record-bar.unfinished > .segment,
68 body[dir=rtl] .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
69     border-top-right-radius: 0 !important;
70     border-bottom-right-radius: 0 !important;
71     border-right: none;
72 }
73
74 body[dir=ltr] .timeline-record-bar.has-inactive-segment > .segment:not(.inactive),
75 body[dir=rtl] .timeline-record-bar > .segment.inactive,
76 body[dir=rtl] .timeline-record-bar.unfinished > .segment {
77     border-top-left-radius: 0 !important;
78     border-bottom-left-radius: 0 !important;
79 }
80
81 :focus .selected .timeline-record-bar > .segment {
82     background-color: white !important;
83     border: none !important;
84 }
85
86 :focus .selected .timeline-record-bar > .segment.inactive {
87     background-color: hsl(215, 63%, 85%) !important;
88 }
89
90 body[dir=ltr] :focus .selected .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
91     border-left: var(--timeline-record-bar-has-inactive-segment-not-inactive-segment-border-start);
92 }
93
94 body[dir=rtl] :focus .selected .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
95     border-right: var(--timeline-record-bar-has-inactive-segment-not-inactive-segment-border-start);
96 }
97
98 .timeline-record-bar.timeline-record-type-network > .segment {
99     background-color: hsl(207, 63%, 67%);
100     border-color: hsl(202, 55%, 51%);
101 }
102
103 .timeline-record-bar.timeline-record-type-network > .segment.inactive {
104     background-color: hsl(208, 66%, 79%);
105     border-color: hsl(202, 57%, 68%);
106 }
107
108 .timeline-record-bar.timeline-record-type-layout > .segment {
109     background-color: hsl(0, 65%, 75%);
110     border-color: hsl(0, 54%, 62%);
111 }
112
113
114 .timeline-record-bar.timeline-record-type-layout.paint > .segment,
115 .timeline-record-bar.timeline-record-type-layout.composite > .segment {
116     background-color: hsl(76, 49%, 60%);
117     border-color: hsl(79, 45%, 51%);
118 }
119
120 .timeline-record-bar.timeline-record-type-script > .segment {
121     background-color: hsl(269, 65%, 74%);
122     border-color: hsl(273, 33%, 58%);
123 }
124
125 .timeline-record-bar.timeline-record-type-script.garbage-collected > .segment,
126 .timeline-record-bar.timeline-record-type-heap-allocations > .segment {
127     background-color: hsl(23, 69%, 73%);
128     border-color: hsl(11, 54%, 62%);
129 }
130
131 .timeline-record-bar.timeline-record-type-media > .segment {
132     background-color: hsl(143, 24%, 66%);
133     border-color: hsl(153, 24%, 51%);
134 }