LCARStrek/browser/devtools/performance.css

   1 /* vim:set ts=2 sw=2 sts=2 et: */
   2 /* This Source Code Form is subject to the terms of the Mozilla Public
   3  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   4  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   5
   6 /* CSS Variables specific to this panel that aren't defined by the themes */
   7 .theme-dark,
   8 .theme-light {
   9   --cell-border-color: #A09090;
  10   --focus-cell-border-color: #9C9CFF;
  11   --row-alt-background-color: #403400;
  12   --row-hover-background-color: #544400;
  13 }
  14
  15 /* Toolbar */
  16
  17 #performance-toolbar > tabs,
  18 #performance-toolbar {
  19   -moz-border-end-color: var(--theme-splitter-color);
  20 }
  21
  22 #performance-toolbar-control-other {
  23   -moz-padding-end: 5px;
  24 }
  25
  26 #performance-toolbar-controls-detail-views > toolbarbutton {
  27   min-width: 0;
  28 }
  29
  30 #performance-toolbar-controls-detail-views .toolbarbutton-text {
  31   -moz-padding-start: 4px;
  32   -moz-padding-end: 8px;
  33 }
  34
  35 #filter-button {
  36   list-style-image: url(timeline-filter.svg#filter);
  37   min-width: 24px;
  38 }
  39
  40 #filter-button[disabled] {
  41   list-style-image: url(timeline-filter.svg#filter-disabled);
  42 }
  43
  44 #filter-button:not([disabled]):hover,
  45 #filter-button:not([disabled]):hover:active,
  46 #filter-button[open] {
  47   list-style-image: url(timeline-filter.svg#filter-open);
  48 }
  49
  50 #performance-filter-menupopup > menuitem:before {
  51   content: "";
  52   display: block;
  53   width: 8px;
  54   height: 8px;
  55   margin: 0 8px;
  56   border-radius: 1px;
  57 }
  58
  59 #filter-button {
  60   list-style-image: url(timeline-filter.svg#filter);
  61   min-width: 24px;
  62 }
  63
  64 #filter-button[disabled] {
  65   list-style-image: url(timeline-filter.svg#filter-disabled);
  66 }
  67
  68 #filter-button[open] {
  69   list-style-image: url(timeline-filter.svg#filter-open);
  70 }
  71
  72 #performance-filter-menupopup > menuitem:before {
  73   content: "";
  74   display: block;
  75   width: 8px;
  76   height: 8px;
  77   margin: 0 8px;
  78   border-radius: 1px;
  79 }
  80
  81 /* Recording Notice */
  82
  83 #performance-view .notice-container {
  84   font-size: 120%;
  85   background-color: var(--theme-toolbar-background);
  86   color: var(--theme-body-color);
  87   padding-bottom: 20vh;
  88 }
  89
  90 #performance-view .notice-container button {
  91   min-width: 30px;
  92   min-height: 28px;
  93   margin: 0;
  94 }
  95
  96 #performance-view .notice-container vbox {
  97   text-align: center;
  98 }
  99
 100 /* Overview Panel */
 101
 102 .record-button {
 103   list-style-image: url(profiler-stopwatch-tbutton.svg);
 104 }
 105
 106 #empty-notice > .record-button,
 107 .record-button:hover,
 108 .record-button:hover:active {
 109   list-style-image: url(profiler-stopwatch.svg);
 110 }
 111
 112 .record-button[checked] {
 113   list-style-image: url(profiler-stopwatch-checked.svg);
 114 }
 115
 116 .record-button[locked] {
 117   pointer-events: none;
 118 }
 119
 120 .record-button .button-icon {
 121   margin: 0;
 122 }
 123
 124 .record-button .button-text {
 125   display: none;
 126 }
 127
 128 /* Details Panel */
 129
 130 #select-waterfall-view {
 131   list-style-image: url(performance-icons.svg#details-waterfall);
 132 }
 133
 134 #select-waterfall-view:hover,
 135 #select-waterfall-view:hover:active,
 136 #select-waterfall-view[checked] {
 137   list-style-image: url(performance-icons.svg#details-waterfall-active);
 138 }
 139
 140 #select-js-calltree-view,
 141 #select-memory-calltree-view {
 142   list-style-image: url(performance-icons.svg#details-call-tree);
 143 }
 144
 145 #select-js-calltree-view:hover,
 146 #select-js-calltree-view:hover:active,
 147 #select-js-calltree-view[checked],
 148 #select-memory-calltree-view:hover,
 149 #select-memory-calltree-view:hover:active,
 150 #select-memory-calltree-view[checked] {
 151   list-style-image: url(performance-icons.svg#details-call-tree-active);
 152 }
 153
 154 #select-js-flamegraph-view,
 155 #select-memory-flamegraph-view {
 156   list-style-image: url(performance-icons.svg#details-flamegraph);
 157 }
 158
 159 #select-js-flamegraph-view:hover,
 160 #select-js-flamegraph-view:hover:active,
 161 #select-js-flamegraph-view[checked],
 162 #select-memory-flamegraph-view:hover,
 163 #select-memory-flamegraph-view:hover:active,
 164 #select-memory-flamegraph-view[checked] {
 165   list-style-image: url(performance-icons.svg#details-flamegraph-active);
 166 }
 167
 168 /* Profile call tree */
 169
 170 .call-tree-cells-container {
 171   /* Hack: force hardware acceleration */
 172   transform: translateZ(1px);
 173   overflow: auto;
 174 }
 175
 176 .call-tree-cells-container[categories-hidden] .call-tree-category {
 177   display: none;
 178 }
 179
 180 .call-tree-header {
 181   font-size: 90%;
 182   padding-top: 2px !important;
 183   padding-bottom: 2px !important;
 184 }
 185
 186 .call-tree-header[type="duration"],
 187 .call-tree-cell[type="duration"],
 188 .call-tree-header[type="self-duration"],
 189 .call-tree-cell[type="self-duration"] {
 190   width: 6vw;
 191 }
 192
 193 .call-tree-header[type="percentage"],
 194 .call-tree-cell[type="percentage"],
 195 .call-tree-header[type="self-percentage"],
 196 .call-tree-cell[type="self-percentage"] {
 197   width: 5vw;
 198 }
 199
 200 .call-tree-header[type="samples"],
 201 .call-tree-cell[type="samples"] {
 202   width: 4.5vw;
 203 }
 204
 205 .call-tree-header[type="allocations"],
 206 .call-tree-cell[type="allocations"],
 207 .call-tree-header[type="self-allocations"],
 208 .call-tree-cell[type="self-allocations"] {
 209   width: 9vw;
 210 }
 211
 212 .call-tree-header[type="function"],
 213 .call-tree-cell[type="function"] {
 214   -moz-box-flex: 1;
 215 }
 216
 217 .call-tree-header,
 218 .call-tree-cell {
 219   -moz-box-align: center;
 220   overflow: hidden;
 221   padding: 1px 4px;
 222   color: var(--theme-body-color);
 223   -moz-border-end-color: var(--cell-border-color);
 224 }
 225
 226 .call-tree-header:not(:last-child),
 227 .call-tree-cell:not(:last-child) {
 228   -moz-border-end-width: 1px;
 229   -moz-border-end-style: solid;
 230 }
 231
 232 .call-tree-header:not(:last-child) {
 233   text-align: center;
 234 }
 235
 236 .call-tree-cell:not(:last-child) {
 237   text-align: end;
 238 }
 239
 240 .call-tree-header {
 241   background-color: var(--theme-tab-toolbar-background);
 242 }
 243
 244 .call-tree-item:last-child:not(:focus) {
 245   border-bottom: 1px solid var(--cell-border-color);
 246 }
 247
 248 .call-tree-item:nth-child(2n) {
 249   background-color: var(--row-alt-background-color);
 250 }
 251
 252 .call-tree-item:hover {
 253   background-color: var(--row-hover-background-color);
 254 }
 255
 256 .call-tree-item:focus {
 257   background-color: var(--theme-selection-background);
 258 }
 259
 260 .call-tree-item:focus label {
 261   color: var(--theme-selection-color) !important;
 262 }
 263
 264 .call-tree-item:focus .call-tree-cell {
 265   -moz-border-end-color: var(--focus-cell-border-color);
 266 }
 267
 268 .call-tree-item:not([origin="content"]) .call-tree-name,
 269 .call-tree-item:not([origin="content"]) .call-tree-url,
 270 .call-tree-item:not([origin="content"]) .call-tree-line,
 271 .call-tree-item:not([origin="content"]) .call-tree-column {
 272   /* Style chrome and non-JS nodes differently. */
 273   opacity: 0.6;
 274 }
 275
 276 .call-tree-url {
 277   -moz-margin-start: 4px !important;
 278   cursor: pointer;
 279 }
 280
 281 .call-tree-url:hover {
 282   text-decoration: underline;
 283 }
 284
 285 .call-tree-url, .tree-widget-item:not(.theme-selected) .opt-url {
 286   color: var(--theme-highlight-blue);
 287 }
 288
 289 .call-tree-line, .tree-widget-item:not(.theme-selected) .opt-line {
 290   color: var(--theme-highlight-orange);
 291 }
 292
 293 .call-tree-column {
 294   color: var(--theme-highlight-orange);
 295   opacity: 0.6;
 296 }
 297
 298 .call-tree-host {
 299   -moz-margin-start: 8px !important;
 300   font-size: 90%;
 301   color: var(--theme-content-color2);
 302 }
 303
 304 .call-tree-name[value=""],
 305 .call-tree-url[value=""],
 306 .call-tree-line[value=""],
 307 .call-tree-column[value=""],
 308 .call-tree-host[value=""] {
 309   display: none;
 310 }
 311
 312 .call-tree-zoom {
 313   -moz-appearance: none;
 314   background-color: transparent;
 315   background-position: center;
 316   background-repeat: no-repeat;
 317   background-size: 11px;
 318   min-width: 11px;
 319   -moz-margin-start: 8px !important;
 320   cursor: zoom-in;
 321   opacity: 0;
 322 }
 323
 324 .theme-dark .call-tree-zoom {
 325   background-image: url(magnifying-glass.png);
 326 }
 327
 328 .theme-light .call-tree-zoom {
 329   background-image: url(magnifying-glass-light.png);
 330 }
 331
 332 @media (min-resolution: 2dppx) {
 333   .theme-dark .call-tree-zoom {
 334     background-image: url(magnifying-glass@2x.png);
 335   }
 336
 337   .theme-light .call-tree-zoom {
 338     background-image: url(magnifying-glass-light@2x.png);
 339   }
 340 }
 341
 342 .call-tree-item:hover .call-tree-zoom {
 343   transition: opacity 0.3s ease-in;
 344   opacity: 1;
 345 }
 346
 347 .call-tree-item:hover .call-tree-zoom:hover {
 348   opacity: 0;
 349 }
 350
 351 .call-tree-category {
 352   transform: scale(0.75);
 353   transform-origin: center right;
 354 }
 355
 356 /**
 357  * Details Waterfall Styles
 358  */
 359
 360 .waterfall-list-contents {
 361   /* Hack: force hardware acceleration */
 362   transform: translateZ(1px);
 363   overflow-x: hidden;
 364   overflow-y: auto;
 365 }
 366
 367 .waterfall-header-contents {
 368   overflow-x: hidden;
 369 }
 370
 371 .waterfall-background-ticks {
 372   /* Background created on a <canvas> in js. */
 373   /* @see browser/devtools/timeline/widgets/waterfall.js */
 374   background-image: -moz-element(#waterfall-background);
 375   background-repeat: repeat-y;
 376   background-position: -1px center;
 377 }
 378
 379 .waterfall-marker-container[is-spacer] {
 380   pointer-events: none;
 381 }
 382
 383 .waterfall-marker-container:not([is-spacer]):nth-child(2n) {
 384   background-color: #403400;
 385 }
 386
 387 .waterfall-marker-container:hover {
 388   background-color: #FFCF00 !important;
 389 }
 390
 391 .waterfall-marker-item {
 392   overflow: hidden;
 393 }
 394
 395 .waterfall-sidebar {
 396   -moz-border-end: 1px solid var(--theme-splitter-color);
 397 }
 398
 399 .waterfall-marker-container:hover > .waterfall-sidebar {
 400   background-color: transparent;
 401 }
 402
 403 .waterfall-header-name {
 404   padding: 2px 4px;
 405   font-size: 90%;
 406 }
 407
 408 .waterfall-header-tick {
 409   width: 100px;
 410   font-size: 9px;
 411   transform-origin: left center;
 412   color: var(--theme-body-color);
 413 }
 414
 415 .waterfall-header-tick:not(:first-child) {
 416   -moz-margin-start: -100px !important; /* Don't affect layout. */
 417 }
 418
 419 .waterfall-marker-bullet {
 420   width: 8px;
 421   height: 8px;
 422   -moz-margin-start: 8px;
 423   -moz-margin-end: 6px;
 424   border-radius: 1px;
 425 }
 426
 427 .waterfall-marker-name {
 428   font-size: 95%;
 429   padding-bottom: 1px !important;
 430 }
 431
 432 .waterfall-marker-bar {
 433   height: 9px;
 434   transform-origin: left center;
 435   border-radius: 1px;
 436 }
 437
 438 .waterfall-marker-container.selected > .waterfall-sidebar,
 439 .waterfall-marker-container.selected > .waterfall-marker-item {
 440   background-color: var(--theme-selection-background);
 441   color: var(--theme-selection-color);
 442 }
 443
 444 .waterfall-marker-location {
 445    color: #3333FF;
 446 }
 447
 448 .waterfall-marker-location:hover,
 449 .waterfall-marker-location:focus {
 450    text-decoration: underline;
 451 }
 452
 453 #waterfall-details {
 454   -moz-padding-start: 8px;
 455   -moz-padding-end: 8px;
 456   padding-top: 2vh;
 457   overflow: auto;
 458 }
 459
 460 .marker-details-bullet {
 461   width: 8px;
 462   height: 8px;
 463   border-radius: 1px;
 464 }
 465
 466 #performance-filter-menupopup > menuitem.highlight-pink:before,
 467 .marker-details-bullet.highlight-pink,
 468 .waterfall-marker-bar.highlight-pink,
 469 .waterfall-marker-bullet.highlight-pink {
 470   background-color: var(--theme-highlight-pink);
 471 }
 472 #performance-filter-menupopup > menuitem.highlight-bluegrey:before,
 473 .marker-details-bullet.highlight-bluegrey,
 474 .waterfall-marker-bar.highlight-bluegrey,
 475 .waterfall-marker-bullet.highlight-bluegrey {
 476   background-color: var(--theme-highlight-bluegrey);
 477 }
 478 #performance-filter-menupopup > menuitem.highlight-green:before,
 479 .marker-details-bullet.highlight-green,
 480 .waterfall-marker-bar.highlight-green,
 481 .waterfall-marker-bullet.highlight-green {
 482   background-color: var(--theme-highlight-green);
 483 }
 484 #performance-filter-menupopup > menuitem.highlight-lightorange:before,
 485 .marker-details-bullet.highlight-lightorange,
 486 .waterfall-marker-bar.highlight-lightorange,
 487 .waterfall-marker-bullet.highlight-lightorange {
 488   background-color: var(--theme-highlight-lightorange);
 489 }
 490 #performance-filter-menupopup > menuitem.highlight-red:before,
 491 .marker-details-bullet.highlight-red,
 492 .waterfall-marker-bar.highlight-red,
 493 .waterfall-marker-bullet.highlight-red {
 494   background-color: var(--theme-highlight-red);
 495 }
 496
 497 #waterfall-details > * {
 498   padding-top: 3px;
 499 }
 500
 501 .marker-details-labelname {
 502   -moz-padding-end: 4px;
 503 }
 504
 505 .marker-details-type {
 506   font-size: 1.2em;
 507   font-weight: bold;
 508 }
 509
 510 .marker-details-duration {
 511   font-weight: bold;
 512 }
 513
 514 /* Recording items */
 515
 516 .recording-item {
 517   padding: 4px;
 518 }
 519
 520 .recording-item-title {
 521   font-size: 110%;
 522 }
 523
 524 .recording-item-footer {
 525   padding-top: 4px;
 526   font-size: 90%;
 527 }
 528
 529 .recording-item-save {
 530   text-decoration: underline;
 531   cursor: pointer;
 532 }
 533
 534 .recording-item-duration,
 535 .recording-item-save {
 536   color: var(--theme-body-color-alt);
 537 }
 538
 539 #recordings-list .selected label {
 540   /* Text inside a selected item should not be custom colored. */
 541   color: inherit !important;
 542 }
 543
 544 /* Profile call tree */
 545
 546 .call-tree-cells-container {
 547   /* Hack: force hardware acceleration */
 548   transform: translateZ(1px);
 549   overflow: auto;
 550 }
 551
 552 .call-tree-cells-container[categories-hidden] .call-tree-category {
 553   display: none;
 554 }
 555
 556 .call-tree-header[type="duration"],
 557 .call-tree-cell[type="duration"],
 558 .call-tree-header[type="self-duration"],
 559 .call-tree-cell[type="self-duration"] {
 560   width: 9em;
 561 }
 562
 563 .call-tree-header[type="percentage"],
 564 .call-tree-cell[type="percentage"],
 565 .call-tree-header[type="self-percentage"],
 566 .call-tree-cell[type="self-percentage"] {
 567   width: 6em;
 568 }
 569
 570 .call-tree-header[type="samples"],
 571 .call-tree-cell[type="samples"] {
 572   width: 5em;
 573 }
 574
 575 .call-tree-header[type="function"],
 576 .call-tree-cell[type="function"] {
 577   -moz-box-flex: 1;
 578 }
 579
 580 .call-tree-header,
 581 .call-tree-cell {
 582   -moz-box-align: center;
 583   overflow: hidden;
 584   padding: 1px 4px;
 585 }
 586
 587 .call-tree-header:not(:last-child),
 588 .call-tree-cell:not(:last-child) {
 589   -moz-border-end: 1px solid;
 590 }
 591
 592 .call-tree-header,
 593 .call-tree-cell {
 594   -moz-border-end-color: var(--theme-splitter-color);
 595   color: var(--theme-body-color);
 596 }
 597
 598 .call-tree-header:not(:last-child) {
 599   text-align: center;
 600 }
 601
 602 .call-tree-cell:not(:last-child) {
 603   text-align: end;
 604 }
 605
 606 .call-tree-header {
 607   background-color: var(--theme-toolbar-background);
 608 }
 609
 610 .call-tree-item:last-child:not(:focus) {
 611   border-bottom: 1px solid var(--theme-splitter-color);
 612 }
 613
 614 .call-tree-item:nth-child(2n) {
 615   background-color: var(--theme-contrast-background);
 616 }
 617
 618 .call-tree-item:hover {
 619   background-color: var(--theme-hover-background);
 620   color: var(--theme-hover-color);
 621 }
 622
 623 .call-tree-item:focus {
 624   background-color: var(--theme-selection-background);
 625 }
 626
 627 .call-tree-item:focus label {
 628   color: var(--theme-selection-color);
 629 }
 630
 631 .call-tree-item:focus .call-tree-cell {
 632   -moz-border-end-color: var(--theme-splitter-color);
 633 }
 634
 635 .call-tree-item:not([origin="content"]) .call-tree-name,
 636 .call-tree-item:not([origin="content"]) .call-tree-url,
 637 call-tree-item:not([origin="content"]) .call-tree-line {
 638   /* Style chrome and non-JS nodes differently. */
 639   opacity: 0.6;
 640 }
 641
 642 .call-tree-url {
 643   -moz-margin-start: 4px !important;
 644   cursor: pointer;
 645 }
 646
 647 .call-tree-url:hover {
 648   text-decoration: underline;
 649 }
 650
 651 .call-tree-url {
 652   color: var(--theme-text-blue);
 653 }
 654
 655 .call-tree-line {
 656   color: var(--theme-contrast-border);
 657 }
 658
 659 .call-tree-host {
 660   -moz-margin-start: 8px !important;
 661   font-size: 90%;
 662 }
 663
 664 .call-tree-host {
 665   color: ver(--theme-body-color);
 666 }
 667
 668 .call-tree-url[value=""],
 669 .call-tree-line[value=""],
 670 .call-tree-host[value=""] {
 671   display: none;
 672 }
 673
 674 .call-tree-zoom {
 675   -moz-appearance: none;
 676   background-color: transparent;
 677   background-position: center;
 678   background-repeat: no-repeat;
 679   background-size: 11px;
 680   min-width: 11px;
 681   -moz-margin-start: 8px !important;
 682   cursor: zoom-in;
 683   opacity: 0;
 684 }
 685
 686 .call-tree-zoom {
 687   background-image: url(magnifying-glass.png);
 688 }
 689
 690 @media (min-resolution: 2dppx) {
 691   .call-tree-zoom {
 692     background-image: url(magnifying-glass@2x.png);
 693   }
 694 }
 695
 696 .call-tree-item:hover .call-tree-zoom {
 697   transition: opacity 0.3s ease-in;
 698   opacity: 1;
 699 }
 700
 701 .call-tree-item:hover .call-tree-zoom:hover {
 702   opacity: 0;
 703 }
 704
 705 .call-tree-category {
 706   transform: scale(0.75);
 707   transform-origin: center right;
 708 }
 709
 710 /**
 711  * JIT View
 712  */
 713
 714 #jit-optimizations-view {
 715   width: 350px;
 716   overflow-x: hidden;
 717   overflow-y: auto;
 718   min-width: 200px;
 719 }
 720
 721 /* override default styles for tree widget */
 722 #jit-optimizations-view .tree-widget-empty-text {
 723   font-size: inherit;
 724   padding: 0px;
 725   margin: 8px;
 726 }
 727
 728 #jit-optimizations-view:not(.empty) .tree-widget-empty-text {
 729   display: none;
 730 }
 731
 732 #jit-optimizations-toolbar {
 733   height: 18px;
 734   min-height: 0px; /* override .devtools-toolbar min-height */
 735 }
 736
 737 .jit-optimizations-title {
 738   margin: 0px 4px;
 739   font-weight: 600;
 740 }
 741
 742 #jit-optimizations-raw-view {
 743   font-size: 90%;
 744 }
 745
 746 /* override default .tree-widget-item line-height */
 747 #jit-optimizations-raw-view .tree-widget-item {
 748   line-height: 20px !important;
 749   display: block;
 750   overflow: hidden;
 751 }
 752
 753 #jit-optimizations-raw-view .tree-widget-item[level="1"] {
 754   font-weight: 600;
 755 }
 756
 757 #jit-optimizations-view .opt-ion-type-site {
 758   -moz-margin-start: 4px !important;
 759   opacity: 0.6;
 760 }
 761
 762 #jit-optimizations-view .opt-outcome::before {
 763   content: "→";
 764   margin: 4px 0px;
 765   color: var(--theme-body-color);
 766 }
 767 #jit-optimizations-view .theme-selected .opt-outcome::before {
 768   color: var(--theme-selection-color);
 769 }
 770
 771 #jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=success] {
 772   color: var(--theme-highlight-green);
 773 }
 774 #jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=failure] {
 775   color: var(--theme-highlight-red);
 776 }
 777 #jit-optimizations-view .tree-widget-container {
 778   -moz-margin-end: 0px;
 779 }
 780 #jit-optimizations-view .tree-widget-container > li,
 781 #jit-optimizations-view .tree-widget-children > li {
 782   overflow: hidden;
 783 }
 784
 785 .opt-line::before {
 786   content: ":";
 787   color: var(--theme-highlight-orange);
 788 }
 789 .theme-selected .opt-line::before {
 790   color: var(--theme-selection-color);
 791 }
 792 .opt-line.header-line::before {
 793   color: var(--theme-body-color);
 794 }
 795 #jit-optimizations-view.empty .opt-line.header-line::before {
 796   display: none;
 797 }
 798
 799 .opt-url {
 800   -moz-margin-start: 4px !important;
 801 }
 802 .opt-url:hover {
 803   text-decoration: underline;
 804 }
 805 .opt-url.debugger-link {
 806   cursor: pointer;
 807 }
 808
 809 #jit-optimizations-view .opt-icon::before {
 810   content: "";
 811   background-image: url(chrome://browser/skin/devtools/webconsole.png);
 812   background-repeat: no-repeat;
 813   background-size: 48px 40px;
 814   margin: 5px 6px 0 0;
 815   width: 8px;
 816   height: 8px;
 817   max-height: 8px;
 818   display: inline-block;
 819 }
 820
 821 #jit-optimizations-view .opt-icon[severity=warning]::before {
 822   background-position: -16px -16px;
 823 }
 824
 825 @media (min-resolution: 2dppx) {
 826   #jit-optimizations-view .opt-icon::before {
 827     background-image: url(chrome://browser/skin/devtools/webconsole@2x.png);
 828   }
 829 }