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