src/third_party/WebKit/Source/devtools/front_end/networkLogView.css

   1 /*
   2  * Copyright (C) 2013 Google 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 are
   6  * met:
   7  *
   8  *     * Redistributions of source code must retain the above copyright
   9  * notice, this list of conditions and the following disclaimer.
  10  *     * Redistributions in binary form must reproduce the above
  11  * copyright notice, this list of conditions and the following disclaimer
  12  * in the documentation and/or other materials provided with the
  13  * distribution.
  14  *     * Neither the name of Google Inc. nor the names of its
  15  * contributors may be used to endorse or promote products derived from
  16  * this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  19  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  20  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  21  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  22  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  23  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  24  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  25  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  26  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  28  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29  */
  30
  31 .network-log-grid.data-grid {
  32     border: none;
  33     flex: 1 1;
  34 }
  35
  36 .network-summary-bar {
  37     flex: 0 0 19px;
  38     padding-left: 5px;
  39     line-height: 18px;
  40     background-color: rgb(236, 236, 236);
  41     border-top: 1px solid #ccc;
  42     white-space: nowrap;
  43     text-overflow: ellipsis;
  44     overflow: hidden;
  45 }
  46
  47 .network-summary-bar .warning-icon-small {
  48     margin-right: 6px;
  49 }
  50
  51 .network-log-grid.data-grid table.data {
  52     background: transparent;
  53 }
  54
  55 .network-log-grid .odd {
  56     background: #eee;
  57 }
  58
  59 .network-log-grid.data-grid td {
  60     line-height: 17px;
  61     height: 41px;
  62     border-left: 1px solid rgb(210, 210, 210);
  63     vertical-align: middle;
  64 }
  65
  66 .network-log-grid.data-grid.small td {
  67     height: 21px;
  68 }
  69
  70 .network-log-grid.data-grid th {
  71     border-bottom: 1px solid rgb(205, 205, 205);
  72     border-left: 1px solid rgb(205, 205, 205);
  73     background: white;
  74 }
  75
  76 .network-log-grid.data-grid .header-container {
  77     height: 31px;
  78 }
  79
  80 .network-log-grid.data-grid .data-container {
  81     top: 31px;
  82 }
  83
  84 .network-log-grid.data-grid.small .header-container {
  85     height: 23px;
  86 }
  87
  88 .network-log-grid.data-grid.small .data-container {
  89     top: 23px;
  90 }
  91
  92 .network-log-grid.data-grid select {
  93     -webkit-appearance: none;
  94     background-color: transparent;
  95     border: none;
  96     width: 100%;
  97     color: inherit;
  98 }
  99
 100 .network-log-grid.data-grid .name-column {
 101     cursor: pointer;
 102 }
 103
 104 #network-container:not(.brief-mode) .network-log-grid.data-grid td.name-column:hover {
 105     text-decoration: underline;
 106 }
 107
 108 .network-log-grid.data-grid.small .network-graph-side {
 109     height: 14px;
 110 }
 111
 112 .network-log-grid.data-grid th.sortable:active {
 113     background-image: none !important;
 114 }
 115
 116 .network-cell-subtitle {
 117     font-weight: normal;
 118     color: gray;
 119 }
 120
 121 .network-error-row,
 122 .network-error-row .network-cell-subtitle {
 123     color: rgb(230, 0, 0);
 124 }
 125
 126 .initiator-column a {
 127     color: inherit;
 128 }
 129
 130 .network-log-grid.data-grid tr.selected .network-cell-subtitle {
 131     color: white;
 132 }
 133
 134 .network-log-grid tr.highlighted-row {
 135     -webkit-animation: "network-row-highlight-fadeout" 2s 0s;
 136 }
 137
 138 @-webkit-keyframes network-row-highlight-fadeout {
 139     from {background-color: rgba(255, 255, 120, 1); }
 140     to { background-color: rgba(255, 255, 120, 0); }
 141 }
 142
 143 .network-header-subtitle {
 144     color: gray;
 145 }
 146
 147 .network-log-grid.data-grid.small .network-cell-subtitle,
 148 .network-log-grid.data-grid.small .network-header-subtitle {
 149     display: none;
 150 }
 151
 152 /* Resource preview icons */
 153
 154 .network-log-grid.data-grid .icon {
 155     content: url(Images/resourcePlainIcon.png);
 156 }
 157
 158 .network-log-grid.data-grid.small .icon {
 159     content: url(Images/resourcePlainIconSmall.png);
 160 }
 161
 162 .network-log-grid.data-grid .icon.script {
 163     content: url(Images/resourceJSIcon.png);
 164 }
 165
 166 .network-log-grid.data-grid.small .icon.script {
 167     content: url(Images/resourceDocumentIconSmall.png);
 168 }
 169
 170 .network-log-grid.data-grid .icon.document {
 171     content: url(Images/resourceDocumentIcon.png);
 172 }
 173
 174 .network-log-grid.data-grid.small .icon.document {
 175     content: url(Images/resourceDocumentIconSmall.png);
 176 }
 177
 178 .network-log-grid.data-grid .icon.stylesheet {
 179     content: url(Images/resourceCSSIcon.png);
 180 }
 181
 182 .network-log-grid.data-grid.small .icon.stylesheet {
 183     content: url(Images/resourceDocumentIconSmall.png);
 184 }
 185
 186 .network-log-grid.data-grid .icon.media {
 187     content: url(Images/resourcePlainIcon.png); /* FIXME: media icon */
 188 }
 189
 190 .network-log-grid.data-grid.small .icon.media {
 191     content: url(Images/resourcePlainIconSmall.png); /* FIXME: media icon */
 192 }
 193 .network-log-grid.data-grid .icon.texttrack {
 194     content: url(Images/resourcePlainIcon.png); /* FIXME: vtt icon */
 195 }
 196
 197 .network-log-grid.data-grid.small .icon.texttrack {
 198     content: url(Images/resourcePlainIconSmall.png); /* FIXME: vtt icon */
 199 }
 200
 201 .network-log-grid.data-grid .icon.image {
 202     position: relative;
 203     background-image: url(Images/resourcePlainIcon.png);
 204     background-repeat: no-repeat;
 205     content: "";
 206 }
 207
 208 .network-log-grid.data-grid.small .icon.image {
 209     background-image: url(Images/resourcePlainIconSmall.png);
 210     content: "";
 211 }
 212
 213 .network-log-grid.data-grid .icon {
 214     float: left;
 215     width: 32px;
 216     height: 32px;
 217     margin-top: 1px;
 218     margin-right: 3px;
 219 }
 220
 221 .network-log-grid.data-grid.small .icon {
 222     width: 16px;
 223     height: 16px;
 224 }
 225
 226 .network-log-grid.data-grid .image-network-icon-preview {
 227     position: absolute;
 228     margin: auto;
 229     top: 3px;
 230     bottom: 4px;
 231     left: 5px;
 232     right: 5px;
 233     max-width: 18px;
 234     max-height: 21px;
 235     min-width: 1px;
 236     min-height: 1px;
 237 }
 238
 239 .network-log-grid.data-grid.small .image-network-icon-preview {
 240     top: 2px;
 241     bottom: 1px;
 242     left: 3px;
 243     right: 3px;
 244     max-width: 8px;
 245     max-height: 11px;
 246 }
 247
 248 .network-stack-trace .webkit-html-blackbox-link {
 249     opacity: 0.6;
 250 }
 251
 252 .network-async-trace-description {
 253     padding: 3px 0 1px 0;
 254     font-style: italic;
 255 }
 256
 257 /* Graph styles */
 258
 259 .network-graph-side {
 260     position: relative;
 261     height: 36px;
 262     padding: 0;
 263     white-space: nowrap;
 264     margin-top: 1px;
 265     border-top: 1px solid transparent;
 266     overflow: hidden;
 267 }
 268
 269 .network-graph-bar-area {
 270     position: absolute;
 271     top: 0;
 272     bottom: 0;
 273 }
 274
 275 .network-graph-bar-area,
 276 .network-timeline-grid .resources-dividers,
 277 .network-timeline-grid .resources-event-dividers,
 278 .network-timeline-grid .resources-dividers-label-bar {
 279     right: 12px;
 280     left: 12px;
 281 }
 282
 283 .network-graph-label {
 284     position: absolute;
 285     top: 0;
 286     bottom: 0;
 287     height: 13px;
 288     line-height: 13px;
 289     margin: auto;
 290     font-size: 90%;
 291     color: rgba(0, 0, 0, 0.75);
 292     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;
 293     z-index: 150;
 294     overflow: hidden;
 295     text-align: center;
 296     visibility: hidden;
 297 }
 298
 299 .network-graph-side:hover .network-graph-label {
 300     visibility: visible;
 301 }
 302
 303 .network-graph-label:empty {
 304     display: none;
 305 }
 306
 307 .network-graph-label.waiting {
 308     margin-right: 5px;
 309 }
 310
 311 .network-graph-label.before {
 312     color: rgba(0, 0, 0, 0.7);
 313     text-shadow: none;
 314     text-align: right;
 315     margin-right: -1px;
 316 }
 317
 318 .network-graph-label.before::after {
 319     padding-left: 2px;
 320     height: 6px;
 321     content: url(Images/graphLabelCalloutLeft.png);
 322 }
 323
 324 .network-graph-label.after {
 325     color: rgba(0, 0, 0, 0.7);
 326     text-shadow: none;
 327     text-align: left;
 328     margin-left: -1px;
 329 }
 330
 331 .network-graph-label.after::before {
 332     padding-right: 2px;
 333     height: 6px;
 334     content: url(Images/graphLabelCalloutRight.png);
 335 }
 336
 337 .network-graph-bar {
 338     position: absolute;
 339     top: 0;
 340     bottom: 0;
 341     margin: auto -1px;
 342     height: 12px;
 343     min-width: 2px;
 344     opacity: 0.65;
 345     border-width: 1px;
 346     border-style: solid;
 347     border-color: hsl(0, 0%, 65%);
 348     background: linear-gradient(0deg, hsl(0, 0%, 73%), hsl(0, 0%, 78%));
 349 }
 350
 351 .network-graph-bar.waiting {
 352     opacity: 0.35;
 353 }
 354
 355 /* Resource categories */
 356
 357
 358 .network-graph-bar.cached {
 359     background: hsl(0, 0%, 90%);
 360 }
 361
 362 .network-graph-bar.document {
 363     border-color: hsl(215, 49%, 52%);
 364     background: linear-gradient(0deg, hsl(215, 72%, 61%), hsl(215, 100%, 69%));
 365 }
 366
 367 .network-graph-bar.cached.document {
 368     background: hsl(215, 99%, 86%);
 369 }
 370
 371 .network-graph-bar.stylesheet {
 372     border-color: hsl(99, 34%, 52%);
 373     background: linear-gradient(0deg, hsl(100, 50%, 61%), hsl(90, 50%, 64%));
 374 }
 375
 376 .network-graph-bar.cached.stylesheet {
 377     background: hsl(99, 100%, 86%);
 378 }
 379
 380 .network-graph-bar.image {
 381     border-color: hsl(272, 31%, 52%);
 382     background: linear-gradient(0deg, hsl(272, 46%, 61%), hsl(272, 64%, 69%));
 383 }
 384
 385 .network-graph-bar.cached.image {
 386     background: hsl(272, 65%, 86%);
 387 }
 388
 389 .network-graph-bar.media {
 390     border-color: hsl(272, 31%, 52%);
 391     background: linear-gradient(0deg, hsl(272, 46%, 61%), hsl(272, 64%, 69%));
 392 }
 393
 394 .network-graph-bar.cached.media {
 395     background: hsl(272, 65%, 86%);
 396 }
 397
 398 .network-graph-bar.font {
 399     border-color: hsl(8, 49%, 52%);
 400     background: linear-gradient(0deg, hsl(8, 72%, 61%), hsl(8, 100%, 69%));
 401 }
 402
 403 .network-graph-bar.cached.font {
 404     background: hsl(8, 100%, 86%);
 405 }
 406
 407 .network-graph-bar.texttrack {
 408     border-color: hsl(8, 49%, 52%);
 409     background: linear-gradient(0deg, hsl(8, 72%, 61%), hsl(8, 100%, 69%));
 410 }
 411
 412 .network-graph-bar.cached.texttrack {
 413     background: hsl(8, 100%, 86%);
 414 }
 415
 416 .network-graph-bar.script {
 417     border-color: hsl(31, 49%, 52%);
 418     background: linear-gradient(0deg, hsl(31, 72%, 61%), hsl(31, 100%, 69%));
 419 }
 420
 421 .network-graph-bar.cached.script {
 422     background: hsl(31, 100%, 86%);
 423 }
 424
 425 .network-graph-bar.xhr {
 426     border-color: hsl(53, 49%, 52%);
 427     background: linear-gradient(0deg, hsl(53, 72%, 61%), hsl(53, 100%, 69%));
 428 }
 429
 430 .network-graph-bar.cached.xhr {
 431     background: hsl(53, 100%, 86%);
 432 }
 433
 434 .network-graph-bar.websocket {
 435     border-color: hsl(0, 0%, 65%);
 436     background: linear-gradient(0deg, hsl(0, 0%, 73%), hsl(0, 0%, 78%));
 437 }
 438
 439 .network-graph-bar.cached.websocket {
 440     background: hsl(0, 0%, 90%);
 441 }
 442
 443 .network-dim-cell {
 444     color: grey;
 445 }
 446
 447 /* Dividers */
 448
 449 .network-timeline-grid {
 450     position: absolute;
 451     top: 0;
 452     bottom: 0;
 453     left: 0;
 454     right: 14px; /* Keep in sync with td.corner width */
 455     pointer-events: none;
 456 }
 457
 458 .data-grid td.timeline-column {
 459     padding-left: 0;
 460     padding-right: 0;
 461 }
 462
 463 .network-event-divider-padding {
 464     position: absolute;
 465     width: 8px;
 466     top: 0;
 467     bottom: 0;
 468     pointer-events: auto;
 469 }
 470
 471 .network-event-divider {
 472     position: absolute;
 473     width: 2px;
 474     top: 31px;
 475     bottom: 0;
 476     z-index: 300;
 477 }
 478
 479 .network-timeline-grid.small .network-event-divider {
 480     top: 23px;
 481 }
 482
 483 .network-red-divider {
 484     background-color: rgba(255, 0, 0, 0.5);
 485 }
 486
 487 .network-blue-divider {
 488     background-color: rgba(0, 0, 255, 0.5);
 489 }
 490
 491 .network-log-grid.data-grid .resources-dividers {
 492     z-index: 0;
 493 }
 494
 495 .network-log-grid.data-grid .resources-dividers-label-bar {
 496     background-color: transparent;
 497     border: none;
 498     height: 30px;
 499     pointer-events: none;
 500 }
 501
 502 .network-timeline-grid.small .resources-dividers-label-bar {
 503     height: 23px;
 504 }
 505
 506 .network-timeline-grid .resources-divider-label {
 507     top: 0;
 508     margin-top: -5px;
 509 }
 510
 511 .network-timeline-grid .resources-dividers-label-bar .resources-divider {
 512     top: 23px;
 513 }
 514
 515 .network-timeline-grid.small .resources-dividers-label-bar .resources-divider {
 516     top: 15px;
 517 }
 518
 519 .network-timeline-grid .resources-divider:first-child .resources-divider-label {
 520     display: none;
 521 }
 522
 523 .network-timeline-grid .resources-dividers-label-bar .resources-divider:first-child {
 524     background-color: transparent;
 525 }
 526
 527 #network-container {
 528     overflow-y: auto;
 529     overflow-x: hidden;
 530 }
 531
 532 /* Brief mode peculiarities. */
 533 #network-container.brief-mode .network-timeline-grid {
 534     display: none;
 535 }