debian/tmp/usr/share/ewebkit-0/webinspector/timelinePanel.css

   1 /*
   2  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
   3  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
   4  *
   5  * Redistribution and use in source and binary forms, with or without
   6  * modification, are permitted provided that the following conditions
   7  * are met:
   8  *
   9  * 1.  Redistributions of source code must retain the above copyright
  10  *     notice, this list of conditions and the following disclaimer.
  11  * 2.  Redistributions in binary form must reproduce the above copyright
  12  *     notice, this list of conditions and the following disclaimer in the
  13  *     documentation and/or other materials provided with the distribution.
  14  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  15  *     its contributors may be used to endorse or promote products derived
  16  *     from this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  19  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  20  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  21  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  22  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  23  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  24  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  25  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  26  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  27  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  28  */
  29
  30 #timeline-overview-panel {
  31     position: absolute;
  32     top: 0;
  33     left: 0;
  34     right: 0;
  35     height: 80px;
  36 }
  37
  38 #timeline-overview-panel .timeline-graph-bar {
  39     pointer-events: none;
  40 }
  41
  42 .timeline .sidebar {
  43     overflow-y: hidden;
  44     min-height: 100%;
  45     bottom: auto;
  46 }
  47
  48 .timeline-sidebar-background {
  49     top: 90px;
  50     bottom: 0;
  51 }
  52
  53 #timeline-overview-separator {
  54     position: absolute;
  55     top: 80px;
  56     left: 0;
  57     right: 0;
  58     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(253, 253, 253)), to(rgb(213, 213, 213)));
  59     border-top: 1px solid rgb(140, 140, 140);
  60     border-bottom: 1px solid rgb(115, 115, 115);
  61     height: 10px;
  62 }
  63
  64 #timeline-overview-sidebar {
  65     position: absolute;
  66     width: 200px;
  67     top: 0px;
  68     bottom: 0px;
  69     left: 0px;
  70     padding-top: 2px;
  71     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(242, 242, 242)), to(rgb(209, 209, 209)));
  72     border-right: 1px solid rgb(163, 163, 163);
  73 }
  74
  75 #timeline-overview-grid {
  76     position: absolute;
  77     top: 0px;
  78     bottom: 0px;
  79     left: 200px;
  80     right: 0px;
  81     background-color: rgb(255, 255, 255);
  82 }
  83
  84 .timeline-window-selector {
  85     position: absolute;
  86     top: 0;
  87     bottom: 0;
  88     background-color: rgba(125, 173, 217, 0.5);
  89     z-index: 250;
  90 }
  91
  92 #timeline-overview-window {
  93     background-color: white;
  94     position: absolute;
  95     left: 0;
  96     right: 0;
  97     top: 0;
  98     bottom: 60px;
  99     z-index: 150;
 100 }
 101
 102 .timeline-overview-dividers-background {
 103     left: 0%;
 104     right: 0%;
 105     top: 0px;
 106     bottom: 60px;
 107     background-color: black;
 108     position: absolute;
 109 }
 110
 111 .timeline-overview-window-rulers {
 112     top: 0;
 113     bottom: 0;
 114     position: absolute;
 115     opacity: 0.2;
 116     border-right: 1px solid black;
 117     border-left: 1px solid black;
 118     z-index: 150;
 119 }
 120
 121 .timeline-window-resizer {
 122     position: absolute;
 123     top: 0px;
 124     bottom: 60px;
 125     width: 5px;
 126     margin-left: -3px;
 127     margin-right: -2px;
 128     background-color: rgb(153, 153, 153);
 129     z-index: 500;
 130     cursor: ew-resize;
 131     -webkit-border-radius: 2px;
 132     -webkit-box-shadow: white 1px 0 0, white -1px 0 0, white 0 1px 0, white 0 -1px 0;
 133 }
 134
 135 #timeline-overview-grid #resources-graphs {
 136     position: absolute;
 137     top: 0;
 138     left: 0;
 139     right: 0;
 140     height: 80px;
 141 }
 142
 143 #timeline-container {
 144     position: absolute;
 145     top: 90px;
 146     left: 0;
 147     bottom: 0;
 148     right: 0;
 149     border-right: 0 none transparent;
 150     overflow-y: auto;
 151     overflow-x: hidden;
 152 }
 153
 154 .timeline-category-statusbar-item {
 155     height: 24px;
 156     line-height: 24px;
 157     padding-left: 6px;
 158     white-space: nowrap;
 159     text-overflow: ellipsis;
 160     overflow: hidden;
 161     font-weight: bold;
 162 }
 163
 164 .timeline-category-statusbar-item .timeline-category-checkbox {
 165     width: 10px;
 166     height: 11px;
 167     margin: 0 3px 0 5px;
 168     padding: 0;
 169     background-image: url(Images/timelineCheckmarks.png);
 170     background-repeat: no-repeat;
 171     background-position: 0 -66px;
 172     vertical-align: -1px;
 173     -webkit-appearance: none;
 174 }
 175
 176 .timeline-category-statusbar-item .timeline-category-checkbox:checked {
 177     background-position-x: -10px;
 178 }
 179
 180 .timeline-category-statusbar-item.timeline-category-loading .timeline-category-checkbox {
 181     background-position-y: 0;
 182 }
 183
 184 .timeline-category-statusbar-item.timeline-category-scripting .timeline-category-checkbox {
 185     background-position-y: -33px;
 186 }
 187
 188 .timeline-category-statusbar-item.timeline-category-rendering .timeline-category-checkbox {
 189     background-position-y: -11px;
 190 }
 191
 192 .timeline-tree-item {
 193     height: 18px;
 194     line-height: 15px;
 195     padding-right: 5px;
 196     padding-left: 10px;
 197     padding-top: 2px;
 198     white-space: nowrap;
 199     text-overflow: ellipsis;
 200     overflow: hidden;
 201 }
 202
 203 .timeline-expandable {
 204     position: absolute;
 205     border-left: 1px solid rgb(163, 163, 163);
 206 }
 207
 208 .timeline-expandable-left {
 209     position: absolute;
 210     top: 0;
 211     bottom: 0;
 212     left: 0;
 213     width: 3px;
 214     border-top: 1px solid rgb(163, 163, 163);
 215     border-bottom: 1px solid rgb(163, 163, 163);
 216 }
 217
 218 .timeline-expandable-collapsed {
 219     background-image: url(Images/disclosureTriangleSmallRightBlack.png);
 220     background-position-x: 1px;
 221     background-position-y: 2px;
 222     background-repeat: no-repeat;
 223 }
 224
 225 .timeline-expandable-expanded {
 226     background-image: url(Images/disclosureTriangleSmallDownBlack.png);
 227     background-position-x: 1px;
 228     background-position-y: 3px;
 229     background-repeat: no-repeat;
 230 }
 231
 232 .timeline-tree-item .type {
 233     padding-left: 14px;
 234 }
 235
 236 .timeline-tree-item .count {
 237     font-family: Helvetica, Arial, sans-serif;
 238     font-weight: bold;
 239 }
 240
 241 .timeline-tree-item .timeline-tree-icon {
 242     background-image: url(Images/timelineDots.png);
 243     margin-top: 2px;
 244     width: 12px;
 245     height: 12px;
 246     position: absolute;
 247 }
 248
 249 .timeline-tree-item.even {
 250     background-color: rgba(0, 0, 0, 0.05);
 251 }
 252
 253 .timeline-tree-item .data.dimmed {
 254     color: rgba(0, 0, 0, 0.7);
 255 }
 256
 257 #timeline-overview-timelines,
 258 #timeline-overview-memory {
 259     position: absolute;
 260     left: 0;
 261     right: 0;
 262     bottom: 0;
 263     top: 20px;
 264     z-index: 160;
 265 }
 266
 267 #timeline-overview-memory > canvas {
 268     position: absolute;
 269     left: 0;
 270     right: 0;
 271     bottom: 0;
 272     top: 5px;
 273 }
 274
 275
 276 #timeline-graphs {
 277     position: absolute;
 278     left: 0;
 279     right: 0;
 280     max-height: 100%;
 281     top: 19px;
 282 }
 283
 284 .timeline-graph-side {
 285     position: relative;
 286     height: 18px;
 287     padding: 0 5px;
 288     white-space: nowrap;
 289     margin-top: 0px;
 290     border-top: 1px solid transparent;
 291     overflow: hidden;
 292     pointer-events: none;
 293 }
 294
 295 .timeline-overview-graph-side {
 296     height: 20px;
 297     z-index: 170;
 298     pointer-events: none;
 299 }
 300
 301 .timeline-overview-graph-side .timeline-graph-bar {
 302     height: 13px;
 303 }
 304
 305 .timeline-graph-bar-area {
 306     position: absolute;
 307     top: 0;
 308     bottom: 0;
 309     right: 0;
 310     left: 3px;
 311     pointer-events: none;
 312 }
 313
 314 .timeline-graph-bar {
 315     position: absolute;
 316     top: 0;
 317     bottom: 0;
 318     margin: auto -2px;
 319     border-width: 4px 4px 5px;
 320     height: 9px;
 321     min-width: 5px;
 322     opacity: 0.8;
 323     -webkit-border-image: url(Images/timelineBarGray.png) 4 4 5 4;
 324     z-index: 180;
 325     pointer-events: visibleFill;
 326 }
 327
 328 .timeline-graph-bar.with-children {
 329     opacity: 0.2;
 330 }
 331
 332 .timeline-graph-bar.cpu {
 333     opacity: 0.6;
 334 }
 335
 336 .timeline-graph-side.even {
 337     background-color: rgba(0, 0, 0, 0.05);
 338 }
 339
 340 .timeline-category-loading .timeline-graph-bar {
 341     -webkit-border-image: url(Images/timelineBarBlue.png) 4 4 5 4;
 342 }
 343
 344 .timeline-category-scripting .timeline-graph-bar {
 345     -webkit-border-image: url(Images/timelineBarOrange.png) 4 4 5 4;
 346 }
 347
 348 .timeline-category-rendering .timeline-graph-bar {
 349     -webkit-border-image: url(Images/timelineBarPurple.png) 4 4 5 4;
 350 }
 351
 352 .timeline-aggregated-category {
 353     display: inline-block;
 354     height: 11px;
 355     margin-right: 2px;
 356     margin-left: 6px;
 357     position: relative;
 358     top: 2px;
 359     width: 10px;
 360 }
 361
 362 .timeline-loading {
 363     -webkit-border-image: url(Images/timelineBarBlue.png) 4 4 5 4;
 364 }
 365
 366 .timeline-scripting {
 367     -webkit-border-image: url(Images/timelineBarOrange.png) 4 4 5 4;
 368 }
 369
 370 .timeline-rendering {
 371     -webkit-border-image: url(Images/timelineBarPurple.png) 4 4 5 4;
 372 }
 373
 374 .popover .timeline-aggregated-category.timeline-loading {
 375     margin-left: 0px;
 376 }
 377
 378 .timeline-category-loading .timeline-tree-icon {
 379     background-position-y: 0px;
 380 }
 381
 382 .timeline-category-scripting .timeline-tree-icon {
 383     background-position-y: 48px;
 384 }
 385
 386 .timeline-category-rendering .timeline-tree-icon {
 387     background-position-y: 72px;
 388 }
 389
 390 .timeline-details {
 391     -webkit-user-select: text;
 392     vertical-align: top;
 393 }
 394
 395 .timeline-function-name {
 396     text-align: right;
 397 }
 398
 399 .timeline-stacktrace-title {
 400     padding-top: 4px;
 401 }
 402
 403 .timeline-details-row-title {
 404     font-weight: bold;
 405     text-align: right;
 406     white-space: nowrap;
 407 }
 408
 409 .timeline-details-row-data {
 410     white-space: nowrap;
 411 }
 412
 413 .timeline-details-title {
 414     border-bottom: 1px solid #B8B8B8;
 415     font-size: 11px;
 416     font-weight: bold;
 417     padding-bottom: 5px;
 418     padding-top: 0px;
 419     white-space: nowrap;
 420 }
 421
 422 .timeline-filter-status-bar-item .glyph {
 423     -webkit-mask-position: -32px -48px;
 424 }
 425
 426 .timeline-filter-status-bar-item.toggled-on .glyph {
 427     background-color: rgb(66, 129, 235) !important;
 428 }
 429
 430 .garbage-collect-status-bar-item .glyph {
 431     -webkit-mask-position: -128px -24px;
 432 }
 433
 434 .timeline-records-counter, .storage-application-cache-status, .storage-application-cache-connectivity {
 435     font-size: 11px;
 436     text-shadow: white 0 1px 0;
 437 }
 438
 439 #main-status-bar > .timeline-records-counter {
 440     float: right;
 441     margin-top: 4px;
 442     margin-right: 25px;
 443 }
 444
 445 #counters > .timeline-records-counter {
 446     float: left;
 447     margin-top: -2px;
 448 }
 449
 450 #resources-container-content {
 451     overflow: visible;
 452     min-height: 100%;
 453 }
 454
 455 #resources-graphs {
 456     position: absolute;
 457     left: 0;
 458     right: 0;
 459     max-height: 100%;
 460     top: 112px;
 461 }
 462
 463 .resources-graph-side {
 464     position: relative;
 465     height: 36px;
 466     padding: 0 5px;
 467     white-space: nowrap;
 468     margin-top: 1px;
 469     border-top: 1px solid transparent;
 470     overflow: hidden;
 471 }
 472
 473 .resources-graph-bar-area {
 474     position: absolute;
 475     top: 0;
 476     bottom: 0;
 477     right: 8px;
 478     left: 9px;
 479 }
 480
 481 .resources-time-graph-sidebar-item .icon {
 482     content: url(Images/resourcesTimeGraphIcon.png);
 483 }
 484
 485 .resources-size-graph-sidebar-item .icon {
 486     content: url(Images/resourcesSizeGraphIcon.png);
 487 }
 488
 489 .resources-size-graph-sidebar-item .icon {
 490     content: url(Images/resourcesSizeGraphIcon.png);
 491 }
 492
 493 .memory-graph-label {
 494     position: absolute;
 495     top: 5px;
 496     left: 5px;
 497     font-size: 9px;
 498     color: rgb(50%, 50%, 50%);
 499     white-space: nowrap;
 500 }