1.network-larger-resources-status-bar-item .glyph {
2    -webkit-mask-position: -224px 0;
3}
4
5.network-sidebar .data-grid {
6    border: none;
7    position: absolute;
8    top: 0;
9    left: 0;
10    right: 0;
11    bottom: 0;
12    font-size: 11px;
13}
14
15.network-sidebar .data-grid table.data {
16    -webkit-background-size: 1px 82px;
17    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)));
18    font-size: 11px;
19}
20
21.network-sidebar .data-grid.small table.data {
22    -webkit-background-size: 1px 42px;
23}
24
25.network-sidebar .data-grid td {
26    line-height: 17px;
27    height: 37px;
28    border-right: 1px solid rgb(210, 210, 210);
29    vertical-align: middle;
30}
31
32.network-sidebar .data-grid.small td {
33    height: 17px;
34}
35
36.network-sidebar .data-grid th {
37    border-bottom: 1px solid rgb(64%, 64%, 64%);
38    height: 30px;
39    font-size: 11px;
40    font-weight: bold;
41}
42
43.network-sidebar .data-grid.small th {
44    height: 22px;
45}
46
47.network-sidebar .data-grid th, .network.panel .data-grid th.sort-descending, .network.panel .data-grid th.sort-ascending {
48    background: -webkit-gradient(linear, left top, left bottom, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
49}
50
51.network-sidebar .data-grid .data-container {
52    top: 31px;
53}
54
55.network-sidebar .data-grid.small .data-container {
56    top: 23px;
57}
58
59.network-sidebar .data-grid select {
60    -webkit-appearance: none;
61    background-color: transparent;
62    border: none;
63    width: 100%;
64    font-size: 11px;
65    font-weight: bold;
66}
67
68.network-sidebar .data-grid.small tr.offscreen {
69    height: 21px;
70}
71
72.network-sidebar .data-grid tr.offscreen {
73    height: 41px;
74}
75
76.network-sidebar .data-grid tr.offscreen td {
77    display: none;
78}
79
80.network-sidebar .data-grid tr.filler {
81    background-color: white;
82}
83
84.network-sidebar .data-grid td.name-column {
85    font-weight: bold;
86    cursor: pointer;
87}
88
89.network.panel:not(.viewing-resource) .network-sidebar td.name-column:hover {
90    text-decoration: underline;
91}
92
93.network-sidebar .data-grid td.method-column,
94.network-sidebar .data-grid td.status-column,
95.network-sidebar .data-grid td.type-column,
96.network-sidebar .data-grid td.size-column,
97.network-sidebar .data-grid td.time-column {
98    background-color: rgba(0, 0, 0, 0.07);
99}
100
101.network-sidebar .data-grid td.size-column,
102.network-sidebar .data-grid td.time-column {
103    text-align: right;
104}
105
106.network-sidebar .small .network-graph-side {
107    height: 14px;
108}
109
110.network-sidebar .data-grid th.sortable:active {
111    background-image: none;
112}
113
114.network-cell-subtitle {
115    font-weight: normal;
116    color: gray;
117}
118
119.network-sidebar tr.selected .network-cell-subtitle {
120    color: white;
121}
122
123.network-header-subtitle {
124    color: gray;
125}
126
127.network-sidebar .data-grid.small .network-cell-subtitle,
128.network-sidebar .data-grid.small .network-header-subtitle
129{
130    display: none;
131}
132
133/* Resource preview icons */
134
135.network-sidebar .data-grid .icon {
136    content: url(Images/resourcePlainIcon.png);
137}
138
139.network-sidebar .data-grid.small .icon {
140    content: url(Images/resourcePlainIconSmall.png);
141}
142
143.network-sidebar .network-category-scripts .icon {
144    content: url(Images/resourceJSIcon.png);
145}
146
147.network-sidebar .data-grid.small .network-category-scripts .icon {
148    content: url(Images/resourceDocumentIconSmall.png);
149}
150
151.network-sidebar .network-category-documents .icon {
152    content: url(Images/resourceDocumentIcon.png);
153}
154
155.network-sidebar .data-grid.small .network-category-documents .icon {
156    content: url(Images/resourceDocumentIconSmall.png);
157}
158
159.network-sidebar .network-category-stylesheets .icon {
160    content: url(Images/resourceCSSIcon.png);
161}
162
163.network-sidebar .data-grid.small .network-category-stylesheets .icon {
164    content: url(Images/resourceDocumentIconSmall.png);
165}
166
167.network-sidebar .network-category-images .icon {
168    position: relative;
169    background-image: url(Images/resourcePlainIcon.png);
170    background-repeat: no-repeat;
171    content: "";
172}
173
174.network-sidebar .data-grid.small .network-category-images .icon {
175    background-image: url(Images/resourcePlainIconSmall.png);
176    content: "";
177}
178
179.network-sidebar .data-grid .icon {
180    float: left;
181    width: 32px;
182    height: 32px;
183    margin-top: 1px;
184    margin-right: 3px;
185}
186
187.network-sidebar .data-grid.small .icon {
188    width: 16px;
189    height: 16px;
190}
191
192.network-sidebar .image-network-icon-preview {
193    position: absolute;
194    margin: auto;
195    top: 3px;
196    bottom: 4px;
197    left: 5px;
198    right: 5px;
199    max-width: 18px;
200    max-height: 21px;
201    min-width: 1px;
202    min-height: 1px;
203}
204
205.network-sidebar .data-grid.small .image-network-icon-preview {
206    top: 2px;
207    bottom: 1px;
208    left: 3px;
209    right: 3px;
210    max-width: 8px;
211    max-height: 11px;
212}
213
214/* Graph styles */
215
216.network-graph-side {
217    position: relative;
218    height: 36px;
219    padding: 0 5px;
220    white-space: nowrap;
221    margin-top: 1px;
222    border-top: 1px solid transparent;
223    overflow: hidden;
224}
225
226.network-graph-bar-area {
227    position: absolute;
228    top: 0;
229    bottom: 0;
230    right: 8px;
231    left: 9px;
232}
233
234.network-graph-label {
235    position: absolute;
236    top: 0;
237    bottom: 0;
238    margin: auto -7px;
239    height: 13px;
240    line-height: 13px;
241    font-size: 9px;
242    color: rgba(0, 0, 0, 0.75);
243    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;
244    z-index: 150;
245    overflow: hidden;
246    text-align: center;
247    font-weight: bold;
248    opacity: 0;
249    -webkit-transition: opacity 250ms ease-in-out;
250}
251
252.network-graph-side:hover .network-graph-label {
253    opacity: 1;
254}
255
256.network-graph-label:empty {
257    display: none;
258}
259
260.network-graph-label.waiting {
261    margin-right: 5px;
262}
263
264.network-graph-label.waiting-right {
265    margin-left: 5px;
266}
267
268.network-graph-label.before {
269    color: rgba(0, 0, 0, 0.7);
270    text-shadow: none;
271    text-align: right;
272    margin-right: 2px;
273}
274
275.network-graph-label.before::after {
276    padding-left: 2px;
277    height: 6px;
278    content: url(Images/graphLabelCalloutLeft.png);
279}
280
281.network-graph-label.after {
282    color: rgba(0, 0, 0, 0.7);
283    text-shadow: none;
284    text-align: left;
285    margin-left: 2px;
286}
287
288.network-graph-label.after::before {
289    padding-right: 2px;
290    height: 6px;
291    content: url(Images/graphLabelCalloutRight.png);
292}
293
294.network-graph-bar {
295    position: absolute;
296    top: 0;
297    bottom: 0;
298    margin: auto -7px;
299    border-width: 6px 7px;
300    height: 13px;
301    min-width: 14px;
302    opacity: 0.65;
303    -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
304}
305
306.network-graph-bar.waiting, .network-graph-bar.waiting-right {
307    opacity: 0.35;
308}
309
310/* Resource categories */
311
312
313.resource-cached .network-graph-bar {
314    -webkit-border-image: url(Images/timelineHollowPillGray.png) 6 7 6 7;
315}
316
317.network-category-documents .network-graph-bar {
318    -webkit-border-image: url(Images/timelinePillBlue.png) 6 7 6 7;
319}
320
321.network-category-documents.resource-cached .network-graph-bar {
322    -webkit-border-image: url(Images/timelineHollowPillBlue.png) 6 7 6 7;
323}
324
325.network-category-stylesheets .network-graph-bar {
326    -webkit-border-image: url(Images/timelinePillGreen.png) 6 7 6 7;
327}
328
329.network-category-stylesheets.resource-cached .network-graph-bar {
330    -webkit-border-image: url(Images/timelineHollowPillGreen.png) 6 7 6 7;
331}
332
333.network-category-images .network-graph-bar {
334    -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7;
335}
336
337.network-category-images.resource-cached .network-graph-bar {
338    -webkit-border-image: url(Images/timelineHollowPillPurple.png) 6 7 6 7;
339}
340
341.network-category-fonts .network-graph-bar {
342    -webkit-border-image: url(Images/timelinePillRed.png) 6 7 6 7;
343}
344
345.network-category-fonts.resource-cached .network-graph-bar {
346    -webkit-border-image: url(Images/timelineHollowPillRed.png) 6 7 6 7;
347}
348
349.network-category-scripts .network-graph-bar {
350    -webkit-border-image: url(Images/timelinePillOrange.png) 6 7 6 7;
351}
352
353.network-category-scripts.resource-cached .network-graph-bar {
354    -webkit-border-image: url(Images/timelineHollowPillOrange.png) 6 7 6 7;
355}
356
357.network-category-xhr .network-graph-bar {
358    -webkit-border-image: url(Images/timelinePillYellow.png) 6 7 6 7;
359}
360
361.network-category-xhr.resource-cached .network-graph-bar {
362    -webkit-border-image: url(Images/timelineHollowPillYellow.png) 6 7 6 7;
363}
364
365.network-category-websockets .network-graph-bar {
366    -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
367}
368
369.network-category-websockets.resource-cached .network-graph-bar {
370   -webkit-border-image: url(Images/timelineHollowPillGray.png) 6 7 6 7;
371}
372
373
374/* Popover */
375
376.network-timing-row {
377    position: relative;
378    height: 16px;
379}
380
381.network-timing-bar {
382    position: absolute;
383    background-color: red;
384    border-left: 1px solid red;
385    opacity: 0.4;
386    top: 0;
387    bottom: 0;
388}
389
390.network-timing-bar-title {
391    position: absolute;
392    color: black;
393    top: 1px;
394}
395
396.network-dim-cell {
397    color: grey;
398}
399
400/* Dividers */
401
402.network-timeline-grid {
403    position: absolute;
404    top: 0;
405    bottom: 0;
406    left: 0;
407    right: 0;
408    pointer-events: none;
409}
410
411.network-event-divider-padding {
412    position: absolute;
413    width: 8px;
414    top: 0;
415    bottom: 0;
416    pointer-events: auto;
417}
418
419.network-event-divider {
420    position: absolute;
421    width: 2px;
422    top: 31px;
423    bottom: 0;
424    z-index: 300;
425}
426
427.network-sidebar .network-timeline-grid.small .network-event-divider {
428    top: 23px;
429}
430
431.network-red-divider {
432    background-color: rgba(255, 0, 0, 0.5);
433}
434
435.network-blue-divider {
436    background-color: rgba(0, 0, 255, 0.5);
437}
438
439.network-sidebar .resources-dividers {
440    z-index: 0;
441}
442
443.network-sidebar .resources-dividers-label-bar {
444    background-color: transparent;
445    border: none;
446    height: 30px;
447    pointer-events: none;
448}
449
450.network-sidebar .network-timeline-grid.small .resources-dividers-label-bar {
451    height: 23px;
452}
453
454.network-sidebar .resources-divider-label {
455    top: 0px;
456    margin-top: -4px;
457    color: black;
458}
459
460.network-sidebar .resources-dividers-label-bar .resources-divider {
461    top: 23px;
462}
463
464.network-sidebar .network-timeline-grid.small .resources-dividers-label-bar .resources-divider {
465    top: 15px;
466}
467
468.network-sidebar .resources-divider.first .resources-divider-label {
469    display: none;
470}
471
472.network-sidebar .resources-dividers-label-bar .resources-divider.first {
473    background-color: transparent;
474}
475
476/* Filters */
477#network-filter {
478    margin-top: 1px;
479}
480
481.data-grid table.data tr.revealed.network-item {
482    display: none;
483}
484
485.data-grid.filter-all table.data tr.revealed.network-item,
486.data-grid.filter-documents table.data tr.revealed.network-category-documents,
487.data-grid.filter-stylesheets table.data tr.revealed.network-category-stylesheets,
488.data-grid.filter-images table.data tr.revealed.network-category-images,
489.data-grid.filter-scripts table.data tr.revealed.network-category-scripts,
490.data-grid.filter-xhr table.data tr.revealed.network-category-xhr,
491.data-grid.filter-fonts table.data tr.revealed.network-category-fonts,
492.data-grid.filter-websockets table.data tr.revealed.network-category-websockets,
493.data-grid.filter-other table.data tr.revealed.network-category-other {
494    display: table-row;
495}
496
497/* Summary */
498
499.network-sidebar tr.filler td {
500    padding-bottom: 20px !important;
501}
502
503.network-summary-bar {
504    position: absolute;
505    left: 0;
506    right: 0;
507    bottom: 0;
508    margin-right: -14px;
509    background-color: rgb(101, 111, 130);
510}
511
512.network-sidebar .data-grid .network-summary-bar td {
513    color: white;
514    height: 20px;
515    border: none;
516    font-size: 11px;
517    font-weight: bold;
518    padding: 0 0 0 8px;
519    white-space: pre;
520    overflow : hidden;
521    text-overflow : ellipsis;
522}
523
524.network-summary-bar img {
525    vertical-align: middle;
526    padding-right: 8px;
527}
528
529/* Viewer */
530
531.network.panel.viewing-resource .network-sidebar .data-grid td,
532.network.panel.viewing-resource .network-sidebar .data-grid th {
533    border-right: none;
534}
535
536.network.panel.viewing-resource .data-grid th.corner {
537    display: none;
538}
539
540#network-container {
541    position: absolute;
542    top: 0;
543    left: 0;
544    bottom: 0;
545    right: 0;
546    border-right: 0 none transparent;
547    overflow-y: auto;
548    overflow-x: hidden;
549}
550
551.network.panel.viewing-resource #network-container {
552    border-right: 1px solid rgb(163, 163, 163);
553}
554
555#network-views {
556    position: absolute;
557    background: rgb(203, 203, 203);
558    top: 0;
559    right: 0;
560    bottom: 0;
561    left: 0;
562}
563
564#network-close-button {
565    position: absolute;
566    width: 14px;
567    height: 14px;
568    background-image: url(Images/closeButtons.png);
569    background-position: 0 0;
570    background-color: transparent;
571    border: 0 none transparent;
572    top: 8px;
573    left: 5px;
574    z-index: 10;
575    display: none;
576}
577
578#network-views.small #network-close-button  {
579    top: 4px;
580}
581
582#network-close-button:hover {
583    background-position: 14px 0;
584}
585
586#network-close-button:active {
587    background-position: 28px 0;
588}
589
590.network.panel.viewing-resource #network-close-button  {
591    display: block;
592}
593
594
595.network-sidebar .data-grid.full-grid-mode .viewer-column {
596    display: none;
597}
598
599.network-sidebar .data-grid.brief-grid-mode .viewer-column,
600.network-sidebar .data-grid.brief-grid-mode .method-column,
601.network-sidebar .data-grid.brief-grid-mode .status-column,
602.network-sidebar .data-grid.brief-grid-mode .type-column,
603.network-sidebar .data-grid.brief-grid-mode .size-column,
604.network-sidebar .data-grid.brief-grid-mode .time-column {
605    display: none;
606}
607
608.network.panel.viewing-resource .network-timeline-grid {
609    display: none;
610}
611
612.network-sidebar .data-grid.viewing-resource-mode .method-column,
613.network-sidebar .data-grid.viewing-resource-mode .status-column,
614.network-sidebar .data-grid.viewing-resource-mode .type-column,
615.network-sidebar .data-grid.viewing-resource-mode .size-column,
616.network-sidebar .data-grid.viewing-resource-mode .time-column,
617.network-sidebar .data-grid.viewing-resource-mode .timeline-column {
618    display: none;
619}
620
621.network.panel .network-sidebar {
622    position: absolute;
623    top: 0;
624    bottom: 0;
625    left: 0;
626    right: 0;
627}
628
629.network.panel:not(.viewing-resource) .sidebar-resizer-vertical {
630    display: none;
631}
632
633.network.panel.viewing-resource .network-sidebar .data-grid-resizer {
634    display: none;
635}
636
637.network.panel .scope-bar {
638    height: 23px;
639    padding-top: 5px;
640}
641
642.network.panel:not(.viewing-resource) .data-grid tr.selected {
643    background-color: transparent;
644    color: black;
645}
646
647#network-views .network-item-view .tabbed-pane-header {
648    height: 31px;
649    padding-top: 8px;
650    padding-left: 25px;
651    white-space: nowrap;
652}
653
654#network-views.small .network-item-view .tabbed-pane-header {
655    height: 23px;
656    padding-top: 0;
657}
658
659.network.panel.viewing-resource .data-grid .data-container {
660    padding-right: 0;
661}
662
663.network-item-view {
664    display: none;
665    position: absolute;
666    background: white;
667    top: 0;
668    left: 0;
669    right: 0;
670    bottom: 0;
671}
672
673.network-item-view.visible {
674    display: -webkit-box;
675}
676
677.network-item-view .tabbed-pane-header {
678    height: 20px;
679    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
680    border-bottom: 1px solid rgb(163, 163, 163);
681}
682
683.network-item-view .scope-bar li {
684    border-bottom-left-radius: 0;
685    border-bottom-right-radius: 0;
686}
687
688.resource-headers-view {
689    display: none;
690    padding: 6px;
691    -webkit-user-select: text;
692    position: absolute;
693    top: 0;
694    left: 0;
695    right: 0;
696    bottom: 0;
697    overflow: auto;
698}
699
700.resource-headers-view.visible {
701    display: block;
702}
703
704.resource-headers-view .outline-disclosure .parent {
705    -webkit-user-select: none;
706    font-weight: bold;
707}
708
709.resource-headers-view .outline-disclosure .children li {
710    white-space: nowrap;
711}
712
713.resource-headers-view .outline-disclosure li.expanded .header-count {
714    display: none;
715}
716
717.resource-headers-view .outline-disclosure li .header-toggle {
718    display: none;
719}
720
721.resource-headers-view .outline-disclosure li.expanded .header-toggle {
722    display: inline;
723    margin-left: 30px;
724    font-weight: normal;
725    color: rgb(45%, 45%, 45%);
726}
727
728.resource-headers-view .outline-disclosure li .header-toggle:hover {
729    color: rgb(20%, 20%, 45%);
730    cursor: pointer;
731}
732
733.resource-headers-view .outline-disclosure .header-name {
734    color: rgb(33%, 33%, 33%);
735    display: inline-block;
736    margin-right: 0.5em;
737    font-weight: bold;
738    vertical-align: top;
739    white-space: pre-wrap;
740}
741
742.resource-headers-view .outline-disclosure .header-value {
743    display: inline;
744    margin-right: 100px;
745    white-space: pre-wrap;
746    word-break: break-all;
747    margin-top: 1px;
748}
749
750.resource-headers-view .outline-disclosure li.headers-text {
751    text-indent: 0;
752    margin-left: -2px;
753}
754
755.resource-headers-view .outline-disclosure .raw-form-data {
756    white-space: pre-wrap;
757}
758
759.resource-cookies-view {
760    display: none;
761    position: absolute;
762    top: 0;
763    right: 0;
764    left: 0;
765    bottom: 0;
766    overflow: auto;
767    padding: 12px;
768    height: 100%;
769}
770
771.resource-cookies-view.visible {
772    display: block;
773}
774
775.resource-cookies-view .data-grid {
776    height: 100%;
777}
778
779.resource-cookies-view .data-grid .row-group {
780    font-weight: bold;
781    font-size: 11px;
782}
783
784.resource-timing-view {
785    display: none;
786    position: absolute;
787    top: 0;
788    right: 0;
789    left: 0;
790    bottom: 0;
791    padding: 6px;
792    font-weight: bold;
793    font-size: 11px;
794    color: rgb(30%, 30%, 30%);
795}
796
797.resource-timing-view table {
798    border-spacing: 21px 0;
799}
800
801.resource-timing-view .network-timing-bar {
802    opacity: 1;
803}
804
805.resource-timing-view .network-timing-bar.proxy {
806    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(239, 228, 176)), to(rgb(139, 128, 76)));
807    border-left: 1px solid rgb(139, 128, 76);
808}
809
810.resource-timing-view .network-timing-bar.dns {
811    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(153, 208, 216)), to(rgb(81, 174, 189)));
812    border-left: 1px solid rgb(81, 174, 189);
813}
814
815.resource-timing-view .network-timing-bar.connecting {
816    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(203, 232, 145)), to(rgb(160, 214, 56)));
817    border-left: 1px solid rgb(160, 214, 56);
818}
819
820.resource-timing-view .network-timing-bar.ssl {
821    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(21, 232, 145)), to(rgb(216, 149, 132)));
822    border-left: 1px solid rgb(216, 149, 132);
823}
824
825.resource-timing-view .network-timing-bar.sending {
826    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(232, 192, 182)), to(rgb(216, 147, 130)));
827    border-left: 1px solid rgb(216, 147, 130);
828}
829
830.resource-timing-view .network-timing-bar.waiting {
831    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(188, 179, 208)), to(rgb(141, 125, 175)));
832    border-left: 1px solid rgb(141, 125, 175);
833}
834
835.resource-timing-view .network-timing-bar.receiving {
836    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(214, 214, 214)), to(rgb(182, 182, 182)));
837    border-left: 1px solid rgb(182, 182, 182);
838}
839
840.resource-timing-view.visible {
841    display: block;
842}
843