src/third_party/WebKit/Source/devtools/front_end/network/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: #eee;
  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 #e1e1e1;
  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     border-width: 1px;
 345     border-style: solid;
 346     border-color: hsl(0, 0%, 60%);
 347     background: linear-gradient(0deg, hsl(0, 0%, 65%), hsl(0, 0%, 80%));
 348 }
 349
 350 .network-graph-bar.waiting {
 351     opacity: 0.5;
 352 }
 353
 354 /* Resource categories */
 355
 356
 357 .network-graph-bar.cached {
 358     background: hsl(0, 0%, 90%);
 359 }
 360
 361 .network-graph-bar.document {
 362     border-color: hsl(215, 49%, 60%);
 363     background: linear-gradient(0deg, hsl(215, 72%, 65%), hsl(215, 100%, 80%));
 364 }
 365
 366 .network-graph-bar.cached.document {
 367     background: hsl(215, 99%, 80%);
 368 }
 369
 370 .network-graph-bar.stylesheet {
 371     border-color: hsl(99, 34%, 60%);
 372     background: linear-gradient(0deg, hsl(100, 50%, 65%), hsl(90, 50%, 80%));
 373 }
 374
 375 .network-graph-bar.cached.stylesheet {
 376     background: hsl(99, 100%, 80%);
 377 }
 378
 379 .network-graph-bar.image {
 380     border-color: hsl(272, 31%, 60%);
 381     background: linear-gradient(0deg, hsl(272, 46%, 65%), hsl(272, 64%, 80%));
 382 }
 383
 384 .network-graph-bar.cached.image {
 385     background: hsl(272, 65%, 80%);
 386 }
 387
 388 .network-graph-bar.media {
 389     border-color: hsl(272, 31%, 60%);
 390     background: linear-gradient(0deg, hsl(272, 46%, 65%), hsl(272, 64%, 80%));
 391 }
 392
 393 .network-graph-bar.cached.media {
 394     background: hsl(272, 65%, 80%);
 395 }
 396
 397 .network-graph-bar.font {
 398     border-color: hsl(8, 49%, 60%);
 399     background: linear-gradient(0deg, hsl(8, 72%, 65%), hsl(8, 100%, 80%));
 400 }
 401
 402 .network-graph-bar.cached.font {
 403     background: hsl(8, 100%, 80%);
 404 }
 405
 406 .network-graph-bar.texttrack {
 407     border-color: hsl(8, 49%, 60%);
 408     background: linear-gradient(0deg, hsl(8, 72%, 65%), hsl(8, 100%, 80%));
 409 }
 410
 411 .network-graph-bar.cached.texttrack {
 412     background: hsl(8, 100%, 80%);
 413 }
 414
 415 .network-graph-bar.script {
 416     border-color: hsl(31, 49%, 60%);
 417     background: linear-gradient(0deg, hsl(31, 72%, 65%), hsl(31, 100%, 80%));
 418 }
 419
 420 .network-graph-bar.cached.script {
 421     background: hsl(31, 100%, 80%);
 422 }
 423
 424 .network-graph-bar.xhr {
 425     border-color: hsl(53, 49%, 60%);
 426     background: linear-gradient(0deg, hsl(53, 72%, 65%), hsl(53, 100%, 80%));
 427 }
 428
 429 .network-graph-bar.cached.xhr {
 430     background: hsl(53, 100%, 80%);
 431 }
 432
 433 .network-graph-bar.websocket {
 434     border-color: hsl(0, 0%, 60%);
 435     background: linear-gradient(0deg, hsl(0, 0%, 65%), hsl(0, 0%, 80%));
 436 }
 437
 438 .network-graph-bar.cached.websocket {
 439     background: hsl(0, 0%, 80%);
 440 }
 441
 442 .network-dim-cell {
 443     color: grey;
 444 }
 445
 446 /* Dividers */
 447
 448 .network-timeline-grid {
 449     position: absolute;
 450     top: 0;
 451     bottom: 0;
 452     left: 0;
 453     right: 14px; /* Keep in sync with td.corner width */
 454     pointer-events: none;
 455 }
 456
 457 .data-grid td.timeline-column {
 458     padding-left: 0;
 459     padding-right: 0;
 460 }
 461
 462 .network-event-divider-padding {
 463     position: absolute;
 464     width: 8px;
 465     top: 0;
 466     bottom: 0;
 467     pointer-events: auto;
 468 }
 469
 470 .network-event-divider {
 471     position: absolute;
 472     width: 2px;
 473     top: 31px;
 474     bottom: 0;
 475     z-index: 300;
 476 }
 477
 478 .network-timeline-grid.small .network-event-divider {
 479     top: 23px;
 480 }
 481
 482 .network-red-divider {
 483     background-color: rgba(255, 0, 0, 0.5);
 484 }
 485
 486 .network-blue-divider {
 487     background-color: rgba(0, 0, 255, 0.5);
 488 }
 489
 490 .network-log-grid.data-grid .resources-dividers {
 491     z-index: 0;
 492 }
 493
 494 .network-log-grid.data-grid .resources-dividers-label-bar {
 495     background-color: transparent;
 496     border: none;
 497     height: 30px;
 498     pointer-events: none;
 499 }
 500
 501 .network-timeline-grid.small .resources-dividers-label-bar {
 502     height: 23px;
 503 }
 504
 505 .network-timeline-grid .resources-divider-label {
 506     top: 0;
 507     margin-top: -5px;
 508 }
 509
 510 .network-timeline-grid .resources-dividers-label-bar .resources-divider {
 511     top: 23px;
 512 }
 513
 514 .network-timeline-grid.small .resources-dividers-label-bar .resources-divider {
 515     top: 15px;
 516 }
 517
 518 .network-timeline-grid .resources-divider:first-child .resources-divider-label {
 519     display: none;
 520 }
 521
 522 .network-timeline-grid .resources-dividers-label-bar .resources-divider:first-child {
 523     background-color: transparent;
 524 }
 525
 526 #network-container {
 527     overflow-y: auto;
 528     overflow-x: hidden;
 529 }
 530
 531 /* Brief mode peculiarities. */
 532 #network-container.brief-mode .network-timeline-grid {
 533     display: none;
 534 }