Web Inspector: DOM: provide a way to disable/breakpoint all event listeners for a...
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / NetworkTableContentView.css
1 /*
2  * Copyright (C) 2017 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 .content-view.network .navigation-bar .filter-bar {
27     background: none;
28 }
29
30 .content-view.tab.network > .content-browser > .navigation-bar .hierarchical-path .icon {
31     -webkit-margin-start: 8px;
32     -webkit-margin-end: 4px;
33 }
34
35 .network-overview-icon > .icon {
36     content: url(../Images/NetworkOverview.svg);
37 }
38
39 .network-har-icon > .icon {
40     content: url(../Images/NetworkHAR.svg);
41 }
42
43 .content-view.network .network-table .icon {
44     position: relative;
45     width: 16px;
46     height: 16px;
47     bottom: 1px;
48     vertical-align: middle;
49     -webkit-margin-end: 4px;
50 }
51
52 .network-table li:not(.filler) .cell.name {
53     cursor: pointer;
54 }
55
56 .network-table .cell.dom-node.name .icon {
57     content: url(../Images/DOMElement.svg);
58 }
59
60 .network-table .cell.dom-node.name .disclosure {
61     width: 13px;
62     height: 13px;
63     vertical-align: -2px;
64     content: url(../Images/DisclosureTriangles.svg#closed-normal);
65     background-size: 13px 13px;
66     background-repeat: no-repeat;
67 }
68
69 body[dir=rtl] .network-table .cell.dom-node.name .disclosure {
70     transform: scaleX(-1);
71 }
72
73 .network-table:focus li.selected .cell.dom-node.name .disclosure {
74     content: url(../Images/DisclosureTriangles.svg#closed-selected);
75 }
76
77 .network-table .cell.dom-node.name .disclosure.expanded {
78     content: url(../Images/DisclosureTriangles.svg#open-normal);
79 }
80
81 .network-table:focus li.selected .cell.dom-node.name .disclosure.expanded {
82     content: url(../Images/DisclosureTriangles.svg#open-selected);
83 }
84
85 .network-table.grouped .data-container .cell.name {
86     --item-padding-start: 19px;
87     --item-disclosure-width: 11px;
88 }
89
90 .network-table.grouped .data-container .cell:not(.parent).name {
91     -webkit-padding-start: var(--item-padding-start);
92 }
93
94 .network-table.grouped .data-container .cell.child.name {
95     -webkit-padding-start: calc(var(--item-padding-start) + var(--item-disclosure-width));
96 }
97
98 .network-table .data-container .cell.name .range {
99     color: hsla(0, 0%, 0%, 0.7);
100 }
101
102 .network-table .data-container .cell.name .range::before {
103     content: "\00A0\2014\00A0"; /*  —  */;
104 }
105
106 .network-table:focus .data-container li.selected .cell.name .range {
107     color: hsla(0, 0%, 100%, 0.9);
108 }
109
110 .network-table li:not(.selected) .cell:matches(.cache-type, .multiple) {
111     color: var(--text-color-gray-medium);
112 }
113
114 .network-table .error {
115     color: var(--error-text-color);
116 }
117
118 .network-table .cell.domain > .lock {
119     width: 8px;
120     height: 10px;
121     content: url(../Images/Locked.svg);
122     -webkit-margin-end: 5px;
123 }
124
125 .network-table li.selected .cell.domain > .lock {
126     /* FIXME: <https://webkit.org/b/189773> Web Inspector: create special Network waterfall for media events */
127     filter: invert();
128 }
129
130 .network-table .cell.name > .status {
131     -webkit-margin-start: 4px;
132 }
133
134 body[dir=ltr] .network-table .cell.name > .status {
135     float: right;
136 }
137
138 body[dir=rtl] .network-table .cell.name > .status {
139     float: left;
140 }
141
142 .network-table .cell.name > .status .indeterminate-progress-spinner {
143     margin-top: 3px;
144     width: 14px;
145     height: 14px;
146 }
147
148 .showing-detail .network-table .cell:not(.name) {
149     display: none;
150 }
151
152 .showing-detail .network-table .resizer:not(:first-of-type) {
153     display: none;
154 }
155
156 .showing-detail .network-table .timeline-ruler {
157     display: none;
158 }
159
160 .network-table .header .cell.waterfall {
161     /* Hide the label for this column. */
162     color: transparent;
163 }
164
165 .network-table :not(.header) .cell:first-of-type {
166     background: rgba(0, 0, 0, 0.07);
167 }
168
169 .network-table :not(.header) .cell.waterfall {
170     position: absolute;
171     height: 20px;
172 }
173
174 .network-table :not(.header) .cell.waterfall .waterfall-container {
175     position: absolute;
176     top: 0;
177     left: 0;
178     right: 0;
179     bottom: 0;
180 }
181
182 .network-table :not(.header) .cell.waterfall .waterfall-container > .dom-event {
183     position: absolute;
184     top: calc(50% - (var(--node-waterfall-dom-event-size) / 2));
185     min-width: var(--node-waterfall-dom-event-size);
186     height: var(--node-waterfall-dom-event-size);
187     background-color: var(--selected-background-color-active);
188     border-radius: calc(var(--node-waterfall-dom-event-size) / 2);
189 }
190
191 .network-table :not(.header) .cell.waterfall .waterfall-container > .dom-activity {
192     position: absolute;
193     top: calc(50% - 0.5px);
194     border-top: 1px dashed var(--selected-background-color-active);
195 }
196
197 .network-table :not(.header) .cell.waterfall .waterfall-container > .dom-activity.playing {
198     border-top-style: solid;
199 }
200
201 .network-table :not(.header) .cell.waterfall .waterfall-container > .area {
202     position: absolute;
203     top: var(--area-padding);
204     height: calc(100% - (var(--area-padding) * 2));
205
206     /* Half of the vertical space above any .dom-event node */
207     --area-padding: calc((50% - (var(--node-waterfall-dom-event-size) / 2)) / 2);
208 }
209
210 .network-table :not(.header) .cell.waterfall .waterfall-container > .area.dom-fullscreen {
211     background-color: hsl(0, 0%, 40%);
212 }
213
214 .network-table :not(.header) .cell.waterfall .waterfall-container > .area.power-efficient-playback {
215     background-color: var(--network-request-color);
216 }
217
218 .network-table .timeline-ruler {
219     position: absolute;
220     top: 0;
221     bottom: 0;
222     overflow: hidden;
223 }
224
225 .network-table .timeline-ruler > .header {
226     top: calc(var(--navigation-bar-height) - var(--timeline-ruler-height));
227 }
228
229 .content-view.network .message-text-view > .message {
230     font-size: var(--message-text-view-font-size);
231     font-weight: normal;
232 }
233
234 .waterfall .block {
235     position: absolute;
236     top: 8px;
237     min-width: 2px;
238     height: 4px;
239
240     --start-radius: 2px;
241     --end-radius: 2px;
242 }
243
244 body[dir=ltr] .waterfall .block {
245     border-top-left-radius: var(--start-radius);
246     border-top-right-radius: var(--end-radius);
247     border-bottom-left-radius: var(--start-radius);
248     border-bottom-right-radius: var(--end-radius);
249 }
250
251 body[dir=rtl] .waterfall .block {
252     border-top-left-radius: var(--end-radius);
253     border-top-right-radius: var(--start-radius);
254     border-bottom-left-radius: var(--end-radius);
255     border-bottom-right-radius: var(--start-radius);
256 }
257
258 .network-table .waterfall .block + .block {
259     --start-radius: 0;
260     --end-radius: 0;
261 }
262
263 .network-table .waterfall .block:matches(.mouse-tracking, .filler) + .block:not(.mouse-tracking, .filler),
264 .network-table .waterfall .block:not(.request, .response) + :matches(.request, .response) {
265     --start-radius: 2px;
266 }
267
268 .network-table .waterfall .block:last-child {
269     --end-radius: 2px;
270 }
271
272 .waterfall .block.request,
273 .waterfall .block.response {
274     top: 3px;
275     height: 14px;
276 }
277
278 .waterfall .block.mouse-tracking {
279     top: 1px;
280     z-index: 2;
281     height: 18px;
282 }
283
284 .waterfall .block.filler {
285     top: 9px;
286     height: 2px;
287     background-color: lightgrey;
288 }
289
290 .waterfall .block.redirect {
291     background-color: var(--network-redirect-color);
292 }
293
294 .waterfall .block.queue {
295     background-color: var(--network-queue-color);
296 }
297
298 .waterfall .block.dns {
299     background-color: var(--network-dns-color);
300 }
301
302 .waterfall .block.connect {
303     background-color: var(--network-connect-color);
304 }
305
306 .waterfall .block.secure {
307     background-color: var(--network-secure-color);
308 }
309
310 .waterfall .block.request {
311     background-color: var(--network-request-color);
312 }
313
314 .waterfall .block.response {
315     background-color: var(--network-response-color);
316 }
317
318 @media (prefers-color-scheme: dark) {
319     .content-view.tab.network > .content-browser > .navigation-bar .hierarchical-path .icon {
320         filter: invert(88%);
321     }
322
323     .network-table .cell.domain > .lock {
324         filter: var(--filter-invert);
325     }
326
327     .network-table .data-container .cell.name .range {
328         color: var(--text-color-secondary);
329     }
330 }