c6d10c45a912c8fdafa2442b1a3cec399e5d2f3c
[WebKit-https.git] / Source / WebCore / inspector / front-end / networkLogView.css
1 .network-log-grid.data-grid {
2     border: none;
3     position: absolute;
4     top: 0;
5     left: 0;
6     right: 0;
7     bottom: 0;
8 }
9
10 .network-log-grid.data-grid table.data {
11     -webkit-background-size: 1px 82px;
12     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.05)));
13 }
14
15 .network-log-grid.data-grid.small table.data {
16     -webkit-background-size: 1px 42px;
17 }
18
19 .network-log-grid.data-grid td {
20     line-height: 17px;
21     height: 37px;
22     border-right: 1px solid rgb(210, 210, 210);
23     vertical-align: middle;
24 }
25
26 .network-log-grid.data-grid.small td {
27     height: 17px;
28 }
29
30 .network-log-grid.data-grid th {
31     border-bottom: 1px solid rgb(64%, 64%, 64%);
32     height: 30px;
33     font-weight: bold;
34 }
35
36 .network-log-grid.data-grid.small th {
37     height: 22px;
38 }
39
40 .network-log-grid.data-grid th, .network-log-grid.data-grid th.sort-descending, .network-log-grid.data-grid th.sort-ascending {
41     background: -webkit-gradient(linear, left top, left bottom, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
42 }
43
44 .network-log-grid.data-grid .data-container {
45     top: 31px;
46 }
47
48 .network-log-grid.data-grid.small .data-container {
49     top: 23px;
50 }
51
52 .network-log-grid.data-grid select {
53     -webkit-appearance: none;
54     background-color: transparent;
55     border: none;
56     width: 100%;
57     font-weight: bold;
58 }
59
60 .network-log-grid.data-grid.small tr.offscreen {
61     height: 21px;
62 }
63
64 .network-log-grid.data-grid tr.offscreen {
65     height: 41px;
66 }
67
68 .network-log-grid.data-grid tr.offscreen > td > div {
69     display: none;
70 }
71
72 .network-log-grid.data-grid tr.filler {
73     background-color: white;
74 }
75
76 .network-log-grid.data-grid tr:not(.filler) td.name-column {
77     font-weight: bold;
78     cursor: pointer;
79 }
80
81 #network-container:not(.brief-mode) .network-log-grid.data-grid td.name-column:hover {
82     text-decoration: underline;
83 }
84
85 .network-log-grid.data-grid.small .network-graph-side {
86     height: 14px;
87 }
88
89 .network-log-grid.data-grid th.sortable:active {
90     background-image: none !important;
91 }
92
93 .network-cell-subtitle {
94     font-weight: normal;
95     color: gray;
96 }
97
98 .network-error-row, .network-error-row .network-cell-subtitle {
99     color: rgb(230, 0, 0);
100 }
101
102 .initiator-column a {
103     color: inherit;
104 }
105
106 .network-log-grid.data-grid tr.selected .network-cell-subtitle {
107     color: white;
108 }
109
110 .network-log-grid tr.highlighted-row {
111     -webkit-animation: "network-row-highlight-fadeout" 2s 0s;
112 }
113
114 @-webkit-keyframes network-row-highlight-fadeout {
115     from {background-color: rgba(56, 121, 217, 1); }
116     to { background-color: rgba(56, 121, 217, 0); }
117 }
118
119 .network-header-subtitle {
120     color: gray;
121 }
122
123 .network-log-grid.data-grid.small .network-cell-subtitle,
124 .network-log-grid.data-grid.small .network-header-subtitle
125 {
126     display: none;
127 }
128
129 /* Resource preview icons */
130
131 .network-log-grid.data-grid .icon {
132     content: url(Images/resourcePlainIcon.png);
133 }
134
135 .network-log-grid.data-grid.small .icon {
136     content: url(Images/resourcePlainIconSmall.png);
137 }
138
139 .network-log-grid.data-grid .network-type-script .icon {
140     content: url(Images/resourceJSIcon.png);
141 }
142
143 .network-log-grid.data-grid.small .network-type-script .icon {
144     content: url(Images/resourceDocumentIconSmall.png);
145 }
146
147 .network-log-grid.data-grid .network-type-document .icon {
148     content: url(Images/resourceDocumentIcon.png);
149 }
150
151 .network-log-grid.data-grid.small .network-type-document .icon {
152     content: url(Images/resourceDocumentIconSmall.png);
153 }
154
155 .network-log-grid.data-grid .network-type-stylesheet .icon {
156     content: url(Images/resourceCSSIcon.png);
157 }
158
159 .network-log-grid.data-grid.small .network-type-stylesheet .icon {
160     content: url(Images/resourceDocumentIconSmall.png);
161 }
162
163 .network-log-grid.data-grid .network-type-image .icon {
164     position: relative;
165     background-image: url(Images/resourcePlainIcon.png);
166     background-repeat: no-repeat;
167     content: "";
168 }
169
170 .network-log-grid.data-grid.small .network-type-image .icon {
171     background-image: url(Images/resourcePlainIconSmall.png);
172     content: "";
173 }
174
175 .network-log-grid.data-grid .icon {
176     float: left;
177     width: 32px;
178     height: 32px;
179     margin-top: 1px;
180     margin-right: 3px;
181 }
182
183 .network-log-grid.data-grid.small .icon {
184     width: 16px;
185     height: 16px;
186 }
187
188 .network-log-grid.data-grid .image-network-icon-preview {
189     position: absolute;
190     margin: auto;
191     top: 3px;
192     bottom: 4px;
193     left: 5px;
194     right: 5px;
195     max-width: 18px;
196     max-height: 21px;
197     min-width: 1px;
198     min-height: 1px;
199 }
200
201 .network-log-grid.data-grid.small .image-network-icon-preview {
202     top: 2px;
203     bottom: 1px;
204     left: 3px;
205     right: 3px;
206     max-width: 8px;
207     max-height: 11px;
208 }
209
210 /* Graph styles */
211
212 .network-graph-side {
213     position: relative;
214     height: 36px;
215     padding: 0;
216     white-space: nowrap;
217     margin-top: 1px;
218     border-top: 1px solid transparent;
219     overflow: hidden;
220 }
221
222 .network-graph-bar-area {
223     position: absolute;
224     top: 0;
225     bottom: 0;
226 }
227
228 .network-graph-bar-area,
229 .network-timeline-grid .resources-dividers,
230 .network-timeline-grid .resources-event-dividers,
231 .network-timeline-grid .resources-dividers-label-bar {
232     right: 12px;
233     left: 12px;
234 }
235
236 .network-graph-label {
237     position: absolute;
238     top: 0;
239     bottom: 0;
240     margin: auto -7px;
241     height: 13px;
242     line-height: 13px;
243     font-size: 9px;
244     color: rgba(0, 0, 0, 0.75);
245     text-shadow: rgba(255, 255, 255, 0.25) 1px 0 0, rgba(255, 255, 255, 0.25) -1px 0 0, rgba(255, 255, 255, 0.333) 0 1px 0, rgba(255, 255, 255, 0.25) 0 -1px 0;
246     z-index: 150;
247     overflow: hidden;
248     text-align: center;
249     font-weight: bold;
250     opacity: 0;
251     -webkit-transition: opacity 250ms ease-in-out;
252 }
253
254 .network-graph-side:hover .network-graph-label {
255     opacity: 1;
256 }
257
258 .network-graph-label:empty {
259     display: none;
260 }
261
262 .network-graph-label.waiting {
263     margin-right: 5px;
264 }
265
266 .network-graph-label.waiting-right {
267     margin-left: 5px;
268 }
269
270 .network-graph-label.before {
271     color: rgba(0, 0, 0, 0.7);
272     text-shadow: none;
273     text-align: right;
274     margin-right: 2px;
275 }
276
277 .network-graph-label.before::after {
278     padding-left: 2px;
279     height: 6px;
280     content: url(Images/graphLabelCalloutLeft.png);
281 }
282
283 .network-graph-label.after {
284     color: rgba(0, 0, 0, 0.7);
285     text-shadow: none;
286     text-align: left;
287     margin-left: 2px;
288 }
289
290 .network-graph-label.after::before {
291     padding-right: 2px;
292     height: 6px;
293     content: url(Images/graphLabelCalloutRight.png);
294 }
295
296 .network-graph-bar {
297     position: absolute;
298     top: 0;
299     bottom: 0;
300     margin: auto -7px;
301     border-width: 6px 7px;
302     height: 0;
303     min-width: 14px;
304     opacity: 0.65;
305     -webkit-border-image: url(Images/timelinePillGray.png) 7 7 7 7;
306 }
307
308 .network-graph-bar.waiting, .network-graph-bar.waiting-right {
309     opacity: 0.35;
310 }
311
312 /* Resource categories */
313
314
315 .resource-cached .network-graph-bar {
316     -webkit-border-image: url(Images/timelineHollowPillGray.png) 7 7 7 7;
317 }
318
319 .network-type-document .network-graph-bar {
320     -webkit-border-image: url(Images/timelinePillBlue.png) 7 7 7 7;
321 }
322
323 .network-type-document.resource-cached .network-graph-bar {
324     -webkit-border-image: url(Images/timelineHollowPillBlue.png) 7 7 7 7;
325 }
326
327 .network-type-stylesheet .network-graph-bar {
328     -webkit-border-image: url(Images/timelinePillGreen.png) 7 7 7 7;
329 }
330
331 .network-type-stylesheet.resource-cached .network-graph-bar {
332     -webkit-border-image: url(Images/timelineHollowPillGreen.png) 7 7 7 7;
333 }
334
335 .network-type-image .network-graph-bar {
336     -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7;
337 }
338
339 .network-type-image.resource-cached .network-graph-bar {
340     border-image: url(Images/timelineHollowPillPurple.png) 7 7 7 7;
341 }
342
343 .network-type-font .network-graph-bar {
344     -webkit-border-image: url(Images/timelinePillRed.png) 7 7 7 7;
345 }
346
347 .network-type-font.resource-cached .network-graph-bar {
348     -webkit-border-image: url(Images/timelineHollowPillRed.png) 7 7 7 7;
349 }
350
351 .network-type-script .network-graph-bar {
352     -webkit-border-image: url(Images/timelinePillOrange.png) 7 7 7 7;
353 }
354
355 .network-type-script.resource-cached .network-graph-bar {
356     -webkit-border-image: url(Images/timelineHollowPillOrange.png) 7 7 7 7;
357 }
358
359 .network-type-xhr .network-graph-bar {
360     -webkit-border-image: url(Images/timelinePillYellow.png) 7 7 7 7;
361 }
362
363 .network-type-xhr.resource-cached .network-graph-bar {
364     -webkit-border-image: url(Images/timelineHollowPillYellow.png) 7 7 7 7;
365 }
366
367 .network-type-websocket .network-graph-bar {
368     -webkit-border-image: url(Images/timelinePillGray.png) 7 7 7 7;
369 }
370
371 .network-type-websocket.resource-cached .network-graph-bar {
372    -webkit-border-image: url(Images/timelineHollowPillGray.png) 7 7 7 7;
373 }
374
375 .network-dim-cell {
376     color: grey;
377 }
378
379 /* Dividers */
380
381 .network-timeline-grid {
382     position: absolute;
383     top: 0;
384     bottom: 0;
385     left: 0;
386     right: 14px; /* Keep in sync with td.corner width */
387     pointer-events: none;
388 }
389
390 .network-log-grid.data-grid .timeline-column,
391 .network.panel .data-grid th.timeline-column {
392     border-right: none;
393 }
394
395 .data-grid td.timeline-column {
396     padding-left: 0;
397     padding-right: 0;
398 }
399
400 .network-event-divider-padding {
401     position: absolute;
402     width: 8px;
403     top: 0;
404     bottom: 0;
405     pointer-events: auto;
406 }
407
408 .network-event-divider {
409     position: absolute;
410     width: 2px;
411     top: 31px;
412     bottom: 0;
413     z-index: 300;
414 }
415
416 .network-timeline-grid.small .network-event-divider {
417     top: 23px;
418 }
419
420 .network-red-divider {
421     background-color: rgba(255, 0, 0, 0.5);
422 }
423
424 .network-blue-divider {
425     background-color: rgba(0, 0, 255, 0.5);
426 }
427
428 .network-log-grid.data-grid .resources-dividers {
429     z-index: 0;
430 }
431
432 .network-log-grid.data-grid .resources-dividers-label-bar {
433     background-color: transparent;
434     border: none;
435     height: 30px;
436     pointer-events: none;
437 }
438
439 .network-timeline-grid.small .resources-dividers-label-bar {
440     height: 23px;
441 }
442
443 .network-timeline-grid .resources-divider-label {
444     top: 0;
445     margin-top: -4px;
446     color: black;
447 }
448
449 .network-timeline-grid .resources-dividers-label-bar .resources-divider {
450     top: 23px;
451 }
452
453 .network-timeline-grid.small .resources-dividers-label-bar .resources-divider {
454     top: 15px;
455 }
456
457 .network-timeline-grid .resources-divider.first .resources-divider-label {
458     display: none;
459 }
460
461 .network-timeline-grid .resources-dividers-label-bar .resources-divider.first {
462     background-color: transparent;
463 }
464
465 /* Filters */
466
467 .network-log-grid.data-grid table.data tr.revealed.network-item {
468     display: none;
469 }
470
471 /* Summary */
472
473 .network-log-grid.data-grid tr.filler td {
474     padding-bottom: 20px !important;
475 }
476
477 .network-log-grid.data-grid .network-summary-bar {
478     position: absolute;
479     left: 0;
480     right: 0;
481     bottom: 0;
482     background-color: rgb(101, 111, 130);
483 }
484
485 .network-log-grid.data-grid .network-summary-bar td {
486     color: white;
487     height: 20px !important;
488     border: none;
489     font-weight: bold;
490     padding: 0 0 0 8px;
491     white-space: pre;
492     overflow : hidden;
493     text-overflow : ellipsis;
494 }
495
496 .network-log-grid.data-grid .network-summary-bar img {
497     vertical-align: middle;
498     padding-right: 8px;
499 }
500
501 #network-container {
502     position: absolute;
503     top: 0;
504     left: 0;
505     bottom: 0;
506     right: 0;
507     width: 100%;
508     height: 100%;
509     border-right: 0 none transparent;
510     overflow-y: auto;
511     overflow-x: hidden;
512 }
513
514 // Brief mode peculiarities.
515 #network-container.brief-mode .network-timeline-grid {
516     display: none;
517 }
518
519 #network-container.brief-mode td,
520 #network-container.brief-mode th {
521     border-right: none;
522 }
523
524 #network-container.brief-mode th.corner {
525     display: none;
526 }
527
528 #network-container.brief-mode .network-log-grid.data-grid .data-grid-resizer {
529     display: none;
530 }
531
532 #network-container.brief-mode .network-timeline-grid {
533     display: none;
534 }
535
536 #network-container:not(.brief-mode) .data-grid tr.selected {
537     background-color: transparent;
538     color: black;
539 }
540
541 #network-container.brief-mode .data-grid .data-container {
542     padding-right: 0;
543 }