WebCore/inspector/front-end/networkPanel.css

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