LCARStrek/devtools/widgets.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
   4  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   5
   6 /* === BEGIN widgets.inc.css === */
   7
   8 .theme-dark,
   9 .theme-light {
  10   --table-splitter-color: #A09090;
  11   --table-zebra-background: rgba(255,159,0,0.1);
  12 }
  13
  14 /* Generic pane helpers */
  15
  16 .generic-toggled-side-pane {
  17   -moz-margin-start: 0px !important;
  18   /* Unfortunately, transitions don't work properly with locale-aware properties,
  19      so both the left and right margins are set via js, while the start margin
  20      is always overridden here. */
  21 }
  22
  23 .generic-toggled-side-pane[animated] {
  24   transition: margin 0.25s ease-in-out;
  25 }
  26
  27 /* Responsive container */
  28
  29 .devtools-responsive-container {
  30   -moz-box-orient: horizontal;
  31 }
  32
  33 .devtools-main-content {
  34   min-width: 50px;
  35 }
  36
  37 .devtools-main-content,
  38 .devtools-sidebar-tabs {
  39   /* Prevent some children that should be hidden from remaining visible as this is shrunk (Bug 971959) */
  40   position: relative;
  41 }
  42
  43 @media (max-width: 700px) {
  44   .devtools-responsive-container {
  45     -moz-box-orient: vertical;
  46   }
  47
  48   .devtools-responsive-container > .devtools-side-splitter {
  49     /* This is a normally vertical splitter, but we have turned it horizontal
  50        due to the smaller resolution */
  51     border: 0;
  52     margin: 0;
  53     min-height: 3px;
  54     height: 3px;
  55     margin-top: -3px;
  56
  57     /* Reset the vertical splitter styles */
  58     width: auto;
  59     min-width: 0;
  60
  61     /* In some edge case the cursor is not changed to n-resize */
  62     cursor: n-resize;
  63   }
  64
  65   .devtools-responsive-container > .devtools-sidebar-tabs {
  66     min-height: 35vh;
  67     max-height: 75vh;
  68   }
  69 }
  70
  71 /* BreacrumbsWidget */
  72
  73 .breadcrumbs-widget-container {
  74   -moz-margin-start: 2px;
  75   -moz-margin-start: 2px;
  76   max-height: 24px; /* Set max-height for proper sizing on linux */
  77   height: 24px; /* Set height to prevent starting small waiting for content */
  78 }
  79
  80 .scrollbutton-up,
  81 .scrollbutton-down {
  82   background: transparent;
  83   box-shadow: none;
  84   border: none;
  85   margin: 0;
  86   padding: 0;
  87 }
  88
  89 .scrollbutton-up {
  90   -moz-margin-end: 1px;
  91 }
  92
  93 .scrollbutton-down {
  94   -moz-margin-end: 0;
  95 }
  96
  97 .scrollbutton-up > .toolbarbutton-icon,
  98 .scrollbutton-down > .toolbarbutton-icon {
  99   /* margin: 0 5px; */
 100 }
 101
 102 .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
 103 .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
 104 }
 105
 106 .scrollbutton-up[disabled] > .toolbarbutton-icon,
 107 .scrollbutton-down[disabled] > .toolbarbutton-icon {
 108 }
 109
 110 .scrollbutton-up:-moz-locale-dir(ltr) {
 111   border-top-right-radius: 0;
 112   border-bottom-right-radius: 0;
 113 }
 114
 115 .scrollbutton-down:-moz-locale-dir(ltr) {
 116   border-top-left-radius: 0;
 117   border-bottom-left-radius: 0;
 118 }
 119
 120 .scrollbutton-up:-moz-locale-dir(rtl) {
 121   border-top-left-radius: 0;
 122   border-bottom-left-radius: 0;
 123 }
 124
 125 .scrollbutton-down:-moz-locale-dir(rtl) {
 126   border-top-right-radius: 0;
 127   border-bottom-right-radius: 0;
 128 }
 129
 130 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
 131 /*
 132 .scrollbutton-up:-moz-locale-dir(ltr),
 133 .scrollbutton-down:-moz-locale-dir(rtl) {
 134   border-right: solid 1px rgba(255, 255, 255, .1);
 135   border-left: solid 1px transparent;
 136   box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background);
 137 }
 138
 139 .scrollbutton-down:-moz-locale-dir(ltr),
 140 .scrollbutton-up:-moz-locale-dir(rtl) {
 141   border-right: solid 1px transparent;
 142   border-left: solid 1px rgba(255, 255, 255, .1);
 143   box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background);
 144 }
 145
 146 .scrollbutton-up[disabled],
 147 .scrollbutton-down[disabled] {
 148   box-shadow: none;
 149   border-color: transparent;
 150 }
 151 */
 152
 153 .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
 154 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
 155 /*  transform: scaleX(-1); */
 156 }
 157
 158 /* The breadcrumb separator elements are used as background images with
 159  * -moz-element, so we position them offscreen since we don't care about
 160  * seeing the original elements.
 161  */
 162 .breadcrumb-separator-container {
 163   position: fixed;
 164   top: -1000px;
 165   left: -1000px;
 166 }
 167
 168 #breadcrumb-separator-before,
 169 #breadcrumb-separator-after,
 170 #breadcrumb-separator-normal {
 171   width: 12px;
 172   height: 24px;
 173   overflow: hidden;
 174 }
 175
 176 #breadcrumb-separator-before,
 177 #breadcrumb-separator-after:after {
 178   background: var(--theme-selection-background);
 179 }
 180
 181 #breadcrumb-separator-after,
 182 #breadcrumb-separator-before:after {
 183   background: var(--theme-toolbar-background);
 184 }
 185
 186 /* This chevron arrow cannot be replicated easily in CSS, so we are using
 187  * a background image for it (still keeping it in a separate element so
 188  * we can handle RTL support with a CSS transform).
 189  */
 190 #breadcrumb-separator-normal {
 191   background: url("breadcrumbs-divider@2x.png") no-repeat center right;
 192   background-size: 12px 24px;
 193 }
 194
 195 /* Fake a triangle by rotating a rectangle inside the elements */
 196 #breadcrumb-separator-before:after,
 197 #breadcrumb-separator-after:after {
 198   content: "";
 199   display: block;
 200   width: 25px;
 201   height: 24px;
 202   transform: translateX(-18px) rotate(45deg);
 203   box-sizing: border-box;
 204 }
 205
 206 .breadcrumbs-widget-item {
 207   background-color: var(--theme-toolbar-background);
 208   min-height: 24px;
 209   min-width: 65px;
 210   margin: 0;
 211   padding: 0 8px 0 20px;
 212   border: none;
 213   border-radius: 0;
 214   outline: none;
 215   color: var(--theme-content-color1);
 216 }
 217
 218 .breadcrumbs-widget-item:hover {
 219   background-color: var(--theme-hover-background);
 220   color: var(--theme-hover-color);
 221 }
 222
 223 .breadcrumbs-widget-item[checked]:not(:hover) {
 224   background-color: var(--theme-selection-background);
 225   color: var(--theme-selection-color);
 226 }
 227
 228 .breadcrumbs-widget-item[siblings-menu-open],
 229 .breadcrumbs-widget-item:active {
 230   background-color: #FF9F00;
 231   color: #000000;
 232 }
 233
 234 .breadcrumbs-widget-item > .button-box {
 235   border: none;
 236   padding-top: 0;
 237   padding-bottom: 0;
 238 }
 239
 240 .breadcrumbs-widget-item:not([checked]) {
 241   background-image: -moz-element(#breadcrumb-separator-normal);
 242   background-repeat: no-repeat;
 243   background-position: center left;
 244 }
 245
 246 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
 247   background-image: -moz-element(#breadcrumb-separator-after);
 248   background-repeat: no-repeat;
 249   background-position: 0 0;
 250 }
 251
 252 .breadcrumbs-widget-item[checked] {
 253   background-image: -moz-element(#breadcrumb-separator-before);
 254   background-repeat: no-repeat;
 255   background-position: 0 0;
 256   background-color: #008484; /* Select Highlight Blue */
 257 }
 258
 259 .breadcrumbs-widget-item:first-child {
 260   background-image: none;
 261 }
 262
 263 /* RTL support: move the images that were on the left to the right,
 264  * and move images that were on the right to the left.
 265  */
 266 .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
 267   padding: 0 20px 0 8px;
 268 }
 269
 270 .breadcrumbs-widget-item:-moz-locale-dir(rtl),
 271 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
 272   background-position: center right;
 273 }
 274
 275 #breadcrumb-separator-before:-moz-locale-dir(rtl),
 276 #breadcrumb-separator-after:-moz-locale-dir(rtl),
 277 #breadcrumb-separator-normal:-moz-locale-dir(rtl) {
 278   transform: scaleX(-1);
 279 }
 280
 281 #breadcrumb-separator-before:-moz-locale-dir(rtl):after,
 282 #breadcrumb-separator-after:-moz-locale-dir(rtl):after {
 283   transform: translateX(-5px) rotate(45deg);
 284 }
 285
 286 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
 287 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
 288 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
 289 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
 290   color: var(--theme-highlight-lightorange);
 291 }
 292
 293 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-id,
 294 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-tag,
 295 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-pseudo-classes,
 296 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-classes {
 297   color: var(--theme-hover-color) !important;
 298 }
 299
 300 .breadcrumbs-widget-item {
 301   color: var(--theme-highlight-lightorange);
 302 }
 303
 304 .breadcrumbs-widget-item-id {
 305   color: var(--theme-body-color-alt);
 306 }
 307
 308 .breadcrumbs-widget-item-classes {
 309   color: var(--theme-content-color1);
 310 }
 311
 312 .breadcrumbs-widget-item-pseudo-classes {
 313   color: var(--theme-highlight-lightorange);
 314 }
 315
 316 /* SimpleListWidget */
 317
 318 .simple-list-widget-container {
 319   /* Hack: force hardware acceleration */
 320   transform: translateZ(1px);
 321 }
 322
 323 .simple-list-widget-item.selected {
 324   background-color: var(--theme-selection-background);
 325   color: var(--theme-selection-color);
 326 }
 327
 328 .simple-list-widget-item:not(.selected):hover {
 329   background-color: var(--theme-hover-background);
 330   color: var(--theme-hover-color);
 331 }
 332
 333 .simple-list-widget-perma-text,
 334 .simple-list-widget-empty-text {
 335   color: var(--theme-body-color-alt);
 336   padding: 4px 8px;
 337 }
 338
 339 /* FastListWidget */
 340
 341 .fast-list-widget-container {
 342   /* Hack: force hardware acceleration */
 343   transform: translateZ(1px);
 344 }
 345
 346 /* dark/light theme */
 347 .fast-list-widget-empty-text {
 348   padding: 12px;
 349   font-weight: 600;
 350   color: var(--theme-body-color-alt);
 351 }
 352
 353 /* SideMenuWidget */
 354
 355 /* SideMenuWidget container */
 356
 357 .side-menu-widget-container {
 358   /* Hack: force hardware acceleration */
 359   transform: translateZ(1px);
 360 }
 361
 362 .side-menu-widget-container:-moz-locale-dir(ltr),
 363 .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
 364 }
 365
 366 .side-menu-widget-container:-moz-locale-dir(rtl),
 367 .side-menu-widget-empty-text:-moz-locale-dir(rtl)[with-arrows=true]:-moz-locale-dir(rtl) {
 368 }
 369
 370 .side-menu-widget-group {
 371   /* To allow visibility of the dark margin shadow. */
 372 /*  -moz-margin-end: 1px; */
 373 }
 374
 375 .side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
 376   /* To compensate for the arrow image's dark margin. */
 377 /*  -moz-margin-end: -1px; */
 378 }
 379
 380 /* SideMenuWidget groups */
 381
 382 .side-menu-widget-group-title {
 383   padding: 4px;
 384   background-color: var(--theme-contrastsidebar-background);
 385   color: var(--theme-contrastsidebar-color);
 386 }
 387
 388 /* SideMenuWidget items */
 389
 390 .side-menu-widget-item {
 391   border-top: 1px solid #9C9CFF;
 392   /* To compensate for the top and bottom borders */
 393   margin-top: -1px;
 394   margin-bottom: -1px;
 395   background-clip: padding-box;
 396 }
 397
 398 .side-menu-widget-item:last-of-type {
 399   border-bottom: 1px solid #9C9CFF;
 400 }
 401
 402 .side-menu-widget-item.selected {
 403   background-color: var(--theme-selection-background);
 404   color: var(--theme-selection-color);
 405 }
 406
 407 .side-menu-widget-item-arrow {
 408   -moz-margin-start: -7px;
 409   width: 7px; /* The image's width is 7 pixels */
 410   /* Cover the border of the side-menu-widget-item */
 411   margin-top: -1px;
 412   margin-bottom: -1px;
 413 }
 414
 415 .side-menu-widget-item.selected > .side-menu-widget-item-arrow {
 416   background-size: auto, 1px 100%;
 417   background-repeat: no-repeat;
 418 }
 419
 420 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
 421   background-position: center right;
 422 }
 423
 424 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
 425   background-position: center left;
 426 }
 427
 428 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
 429   background-image: url("itemArrow-ltr.svg");
 430 }
 431
 432 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
 433   background-image: url("itemArrow-rtl.svg");
 434 }
 435
 436 /* SideMenuWidget items contents */
 437
 438 .side-menu-widget-item-contents {
 439   padding: 4px;
 440   /* To avoid having content overlapping the arrow image. */
 441   -moz-padding-end: 8px;
 442 }
 443
 444 .side-menu-widget-item-other {
 445   /* To avoid having content overlapping the arrow image. */
 446   -moz-padding-end: 8px;
 447   /* To compensate for the .side-menu-widget-item-contents padding. */
 448   -moz-margin-start: -4px;
 449   -moz-margin-end: -8px;
 450   color: var(--theme-selection-color);
 451 }
 452
 453 .side-menu-widget-item-other.selected {
 454   background-color: var(--theme-selection-background);
 455   color: var(--theme-selection-color);
 456 }
 457
 458 .side-menu-widget-item-other:first-of-type {
 459   margin-top: 4px;
 460 /*  border-top-left-radius: 4px; */
 461 }
 462
 463 .side-menu-widget-item-other:last-of-type {
 464   margin-bottom: -4px;
 465 }
 466
 467 .side-menu-widget-item-other:not(.selected) > label {
 468   color: #9C9CFF;
 469 }
 470
 471 /* SideMenuWidget checkboxes */
 472
 473 .side-menu-widget-group-checkbox {
 474   margin: 0;
 475   -moz-margin-end: 4px;
 476 }
 477
 478 .side-menu-widget-item-checkbox {
 479   margin: 0;
 480   -moz-margin-start: 4px;
 481   -moz-margin-end: -4px;
 482 }
 483
 484 /* SideMenuWidget misc */
 485
 486 .theme-dark .side-menu-widget-container,
 487 .theme-dark .side-menu-widget-empty-text {
 488   background-color: var(--theme-toolbar-background);
 489 }
 490
 491 .side-menu-widget-empty-text {
 492   padding: 12px;
 493 }
 494
 495 /* VariablesView */
 496
 497 .variables-view-container:not([empty]) {
 498   /* Hack: force hardware acceleration */
 499   transform: translateZ(1px);
 500 }
 501
 502 .variables-view-empty-notice {
 503   color: var(--theme-body-color-alt);
 504   padding: 2px;
 505 }
 506
 507 .variables-view-scope:focus > .title,
 508 .theme-dark .variable-or-property:focus > .title {
 509   background-color: var(--theme-selection-background);
 510   color: var(--theme-selection-color);
 511 }
 512
 513 .variables-view-scope > .title {
 514   background-color: #A09090;
 515   color: #000000;
 516 }
 517
 518 /* Generic variables traits */
 519
 520 .variables-view-variable:not(:last-child) {
 521   border-bottom: 1px solid #A09090;
 522 }
 523
 524 .variables-view-variable > .title > .name {
 525   font-weight: 600;
 526 }
 527
 528 /* Generic variables *and* properties traits */
 529
 530 .variable-or-property:focus > .title > label {
 531   color: inherit !important;
 532 }
 533
 534 .variables-view-container .theme-twisty {
 535   margin: 2px;
 536 }
 537
 538 .variable-or-property > .title > .theme-twisty {
 539   -moz-margin-start: 5px;
 540 }
 541
 542 .variable-or-property:not([untitled]) > .variables-view-element-details {
 543   -moz-margin-start: 7px;
 544 }
 545
 546 /* Traits applied when variables or properties are changed or overridden */
 547
 548 .variable-or-property:not([overridden]) {
 549   transition: background 1s ease-in-out, color 1s ease-in-out;
 550 }
 551
 552 .variable-or-property:not([overridden])[changed] {
 553   color: #000000;
 554   transition-duration: .4s;
 555 }
 556
 557 .variable-or-property[overridden] {
 558   background: rgba(160,144,144,0.5);
 559 }
 560
 561 .variable-or-property[overridden] .title > label {
 562   /* Cross out the title for this variable and all child properties. */
 563   font-style: italic;
 564   text-decoration: line-through;
 565   border-bottom: none !important;
 566   color: #A09090;
 567   opacity: 0.7;
 568 }
 569
 570 /* Traits applied when variables or properties are editable */
 571
 572 .variable-or-property[editable] > .title > .value {
 573   cursor: text;
 574 }
 575
 576 .variable-or-property[overridden] .title > .value {
 577   /* Disallow editing this variable and all child properties. */
 578   pointer-events: none;
 579 }
 580
 581 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
 582  * variables and properties */
 583
 584 .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
 585   opacity: 0.6;
 586 }
 587
 588 .variable-or-property-non-writable-icon {
 589   background: url("chrome://devtools/skin/images/vview-lock.png") no-repeat;
 590   background-size: cover;
 591   width: 16px;
 592   height: 16px;
 593   opacity: 0.5;
 594 }
 595
 596 @media (min-resolution: 1.1dppx) {
 597   .variable-or-property-non-writable-icon > .title:after {
 598     background-image: url("chrome://devtools/skin/images/vview-lock@2x.png");
 599   }
 600 }
 601
 602 .variable-or-property-frozen-label,
 603 .variable-or-property-sealed-label,
 604 .variable-or-property-non-extensible-label {
 605   height: 16px;
 606   -moz-padding-end: 4px;
 607 }
 608
 609 .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
 610 .variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
 611 .variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
 612   color: #A09090;
 613 }
 614
 615 /* Aligned values */
 616
 617 .variables-view-container[aligned-values] .title > .separator {
 618   -moz-box-flex: 1;
 619 }
 620
 621 .variables-view-container[aligned-values] .title > .value {
 622   -moz-box-flex: 0;
 623   width: 70vw;
 624 }
 625
 626 .variables-view-container[aligned-values] .title > .element-value-input {
 627   width: calc(70vw - 10px);
 628 }
 629
 630 /* Actions first */
 631
 632 .variables-view-open-inspector {
 633   -moz-box-ordinal-group: 1;
 634 }
 635
 636 .variables-view-edit,
 637 .variables-view-add-property {
 638   -moz-box-ordinal-group: 2;
 639 }
 640
 641 .variable-or-property-frozen-label,
 642 .variable-or-property-sealed-label,
 643 .variable-or-property-non-extensible-label,
 644 .variable-or-property-non-writable-icon {
 645   -moz-box-ordinal-group: 3;
 646 }
 647
 648 .variables-view-delete {
 649   -moz-box-ordinal-group: 4;
 650 }
 651
 652 .variables-view-container[actions-first] .variables-view-delete,
 653 .variables-view-container[actions-first] .variables-view-add-property,
 654 .variables-view-container[actions-first] .variables-view-open-inspector {
 655   -moz-box-ordinal-group: 0;
 656 }
 657
 658 .variables-view-container[actions-first] [invisible] {
 659   visibility: hidden;
 660 }
 661
 662 /* Variables and properties tooltips */
 663
 664 .variable-or-property > tooltip > label {
 665   margin: 0 2px 0 2px;
 666 }
 667
 668 .variable-or-property[non-enumerable] > tooltip > label.enumerable,
 669 .variable-or-property[non-configurable] > tooltip > label.configurable,
 670 .variable-or-property[non-writable] > tooltip > label.writable
 671 .variable-or-property[non-extensible] > tooltip > label.extensible {
 672   color: #A09090;
 673   text-decoration: line-through;
 674 }
 675
 676 .variable-or-property[overridden] > tooltip > label.overridden {
 677   -moz-padding-start: 4px;
 678   -moz-border-start: 1px dotted #9C9CFF;
 679 }
 680
 681 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
 682   -moz-padding-start: 4px;
 683   -moz-border-start: 1px dotted #9C9CFF;
 684   color: #008484;
 685 }
 686
 687 /* Variables and properties editing */
 688 .variables-view-delete,
 689 .variables-view-edit,
 690 .variables-view-open-inspector {
 691   width: 16px;
 692   height: 16px;
 693   background-size: cover;
 694   cursor: pointer;
 695 }
 696
 697 .variables-view-delete:hover,
 698 .variables-view-edit:hover,
 699 .variables-view-open-inspector:hover {
 700   filter: url(images/filters.svg#checked-icon-state);
 701 }
 702
 703 .variables-view-delete:active,
 704 .variables-view-edit:active,
 705 .variables-view-open-inspector:active {
 706   filter: url(images/filters.svg#checked-icon-state);
 707 }
 708
 709 .variable-or-property:focus > .title > .variables-view-delete,
 710 .variable-or-property:focus > .title > .variables-view-edit,
 711 .variable-or-property:focus > .title > .variables-view-open-inspector {
 712   filter: none;
 713 }
 714
 715 .variables-view-delete {
 716   background-image: url("chrome://devtools/skin/images/vview-delete.png");
 717 }
 718
 719 @media (min-resolution: 1.1dppx) {
 720   .variables-view-delete {
 721     background-image: url("chrome://devtools/skin/images/vview-delete@2x.png");
 722   }
 723 }
 724
 725 .variables-view-edit {
 726   background-image: url("chrome://devtools/skin/images/vview-edit.png");
 727 }
 728
 729 @media (min-resolution: 1.1dppx) {
 730   .variables-view-edit {
 731     background-image: url("chrome://devtools/skin/images/vview-edit@2x.png");
 732   }
 733 }
 734
 735 .variables-view-open-inspector {
 736   background-image: url("chrome://devtools/skin/images/vview-open-inspector.png");
 737 }
 738
 739 /* Variables and properties input boxes */
 740
 741 .variable-or-property > .title > .separator + .element-value-input {
 742   -moz-margin-start: -2px !important;
 743   -moz-margin-end: 2px !important;
 744 }
 745
 746 .variable-or-property > .title > .separator[hidden=true] + .element-value-input {
 747   -moz-margin-start: 4px !important;
 748   -moz-margin-end: 2px !important;
 749 }
 750
 751 .element-name-input {
 752   -moz-margin-start: -2px !important;
 753   -moz-margin-end: 2px !important;
 754   font-weight: 600;
 755 }
 756
 757 .element-value-input,
 758 .element-name-input {
 759   border: 1px solid #008484 !important;
 760   color: inherit;
 761 }
 762
 763 /* Variables and properties searching */
 764
 765 .variable-or-property[unmatched] {
 766   border: none;
 767   margin: 0;
 768 }
 769
 770 /* Canvas graphs */
 771
 772 .graph-widget-container {
 773   position: relative;
 774 }
 775
 776 .graph-widget-canvas {
 777   width: 100%;
 778   height: 100%;
 779 }
 780
 781 .graph-widget-canvas[input=hovering-background] {
 782   cursor: text;
 783 }
 784
 785 .graph-widget-canvas[input=hovering-region] {
 786   cursor: pointer;
 787 }
 788
 789 .graph-widget-canvas[input=hovering-selection-start-boundary],
 790 .graph-widget-canvas[input=hovering-selection-end-boundary],
 791 .graph-widget-canvas[input=adjusting-selection-boundary] {
 792   cursor: col-resize;
 793 }
 794
 795 .graph-widget-canvas[input=adjusting-view-area] {
 796   cursor: grabbing;
 797 }
 798
 799 .graph-widget-canvas[input=hovering-selection-contents] {
 800   cursor: grab;
 801 }
 802
 803 .graph-widget-canvas[input=dragging-selection-contents] {
 804   cursor: grabbing;
 805 }
 806
 807 /* Line graph widget */
 808
 809 .line-graph-widget-gutter {
 810   position: absolute;
 811   width: 10px;
 812   height: 100%;
 813   top: 0;
 814   left: 0;
 815   pointer-events: none;
 816
 817   background: #000000;
 818   -moz-border-end: 1px solid #9C9CFF;
 819 }
 820
 821 .line-graph-widget-gutter-line {
 822   position: absolute;
 823   width: 100%;
 824   border-top: 1px solid;
 825 }
 826
 827 .line-graph-widget-gutter-line[type=maximum] {
 828   border-color: #008484;
 829 }
 830
 831 .line-graph-widget-gutter-line[type=minimum] {
 832   border-color: #FF0000;
 833 }
 834
 835 .line-graph-widget-gutter-line[type=average] {
 836   border-color: #FF9F00;
 837 }
 838
 839 .line-graph-widget-tooltip {
 840   position: absolute;
 841   border-radius: 2px;
 842   line-height: 15px;
 843   -moz-padding-start: 6px;
 844   -moz-padding-end: 6px;
 845   transform: translateY(-50%);
 846   font-size: 0.8rem !important;
 847   z-index: 1;
 848   pointer-events: none;
 849
 850   background: #404000;
 851 }
 852
 853 .line-graph-widget-tooltip[with-arrows=true]::before {
 854   content: "";
 855   position: absolute;
 856   border-top: 3px solid transparent;
 857   border-bottom: 3px solid transparent;
 858   top: calc(50% - 3px);
 859 }
 860
 861 .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
 862   -moz-border-end: 3px solid #9C9CFF;
 863   left: -3px;
 864 }
 865
 866 .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
 867   -moz-border-start: 3px solid #9C9CFF;
 868   right: -3px;
 869 }
 870
 871 .line-graph-widget-tooltip[type=maximum] {
 872   left: 14px;
 873 }
 874
 875 .line-graph-widget-tooltip[type=minimum] {
 876   left: 14px;
 877 }
 878
 879 .line-graph-widget-tooltip[type=average] {
 880   right: 4px;
 881 }
 882
 883 .line-graph-widget-tooltip > [text=info] {
 884   color: var(--theme-content-color2);
 885 }
 886
 887 .line-graph-widget-tooltip > [text=value] {
 888   -moz-margin-start: 3px;
 889 }
 890
 891 .line-graph-widget-tooltip > [text=metric] {
 892   -moz-margin-start: 1px;
 893   color: var(--theme-content-color4);
 894 }
 895
 896 .line-graph-widget-tooltip > [text=value],
 897 .line-graph-widget-tooltip > [text=metric] {
 898 /*  text-shadow: 1px  0px rgba(255,255,255,0.6),
 899               -1px  0px rgba(255,255,255,0.6),
 900                0px -1px rgba(255,255,255,0.6),
 901                0px  1px rgba(255,255,255,0.6);*/
 902 }
 903
 904 .line-graph-widget-tooltip[type=maximum] > [text=value] {
 905   color: var(--theme-highlight-green);
 906 }
 907
 908 .line-graph-widget-tooltip[type=minimum] > [text=value] {
 909   color: var(--theme-highlight-red);
 910 }
 911
 912 .line-graph-widget-tooltip[type=average] > [text=value] {
 913   color: var(--theme-highlight-orange);
 914 }
 915
 916 /* Bar graph widget */
 917
 918 .bar-graph-widget-legend {
 919   position: absolute;
 920   top: 4px;
 921   left: 8px;
 922   color: #A09090;
 923   font-size: 0.8rem !important;
 924   pointer-events: none;
 925 }
 926
 927 .bar-graph-widget-legend-item {
 928   float: left;
 929  -moz-margin-end: 8px;
 930 }
 931
 932 .bar-graph-widget-legend-item > [view="color"],
 933 .bar-graph-widget-legend-item > [view="label"] {
 934   vertical-align: middle;
 935 }
 936
 937 .bar-graph-widget-legend-item > [view="color"] {
 938   display: inline-block;
 939   width: 8px;
 940   height: 8px;
 941   border: 1px solid #9C9CFF;
 942   border-radius: 1px;
 943   -moz-margin-end: 4px;
 944   pointer-events: none;
 945 }
 946
 947 .bar-graph-widget-legend-item > [view="label"] {
 948 /*  text-shadow: 1px  0px rgba(255,255,255,0.8),
 949               -1px  0px rgba(255,255,255,0.8),
 950                0px -1px rgba(255,255,255,0.8),
 951                0px  1px rgba(255,255,255,0.8);*/
 952 }
 953
 954 /* Charts */
 955
 956 .generic-chart-container {
 957   /* Hack: force hardware acceleration */
 958   transform: translateZ(1px);
 959 }
 960
 961 .generic-chart-container {
 962   color: var(--theme-body-color-alt);
 963 }
 964
 965 .chart-colored-blob {
 966   fill: var(--theme-highlight-blue);
 967   background: var(--theme-highlight-blue);
 968 }
 969
 970 /* Charts: Pie */
 971
 972 .pie-chart-slice {
 973   stroke-width: 1px;
 974   cursor: pointer;
 975 }
 976
 977 .pie-chart-slice {
 978   stroke: #A09090;
 979 }
 980
 981 .pie-chart-slice[largest] {
 982   stroke-width: 2px;
 983   stroke: #9C9CFF;
 984 }
 985
 986 .pie-chart-label {
 987   text-anchor: middle;
 988   dominant-baseline: middle;
 989   pointer-events: none;
 990 }
 991
 992 .pie-chart-label {
 993   fill: #000;
 994 }
 995
 996 .pie-chart-container[slices="1"] > .pie-chart-slice {
 997   stroke-width: 0px;
 998 }
 999
1000 .pie-chart-slice,
1001 .pie-chart-label {
1002   transition: all 0.1s ease-out;
1003 }
1004
1005 .pie-chart-slice:not(:hover):not([focused]),
1006 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
1007   transform: none !important;
1008 }
1009
1010 /* Charts: Table */
1011
1012 .table-chart-title {
1013   padding-bottom: 10px;
1014   font-size: 120%;
1015   font-weight: 600;
1016 }
1017
1018 .table-chart-row {
1019   margin-top: 1px;
1020   cursor: pointer;
1021 }
1022
1023 .table-chart-grid:hover > .table-chart-row {
1024   transition: opacity 0.1s ease-in-out;
1025 }
1026
1027 .table-chart-grid:not(:hover) > .table-chart-row {
1028   transition: opacity 0.2s ease-in-out;
1029 }
1030
1031 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
1032 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
1033   opacity: 0.4;
1034 }
1035
1036 .table-chart-row-box {
1037   width: 8px;
1038   height: 1.5em;
1039   -moz-margin-end: 10px;
1040 }
1041
1042 .table-chart-row-label {
1043   width: 8em;
1044   -moz-padding-end: 6px;
1045   cursor: inherit;
1046 }
1047
1048 .table-chart-totals {
1049   margin-top: 8px;
1050   padding-top: 6px;
1051 }
1052
1053 .table-chart-totals {
1054   border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */
1055 }
1056
1057 .table-chart-summary-label {
1058   font-weight: 600;
1059   padding: 1px 0px;
1060 }
1061
1062 .table-chart-summary-label {
1063   color: var(--theme-content-color2);
1064 }
1065
1066 /* Table Widget */
1067
1068 /* Table body */
1069
1070 .table-widget-body > .devtools-side-splitter {
1071   border: none;
1072 }
1073
1074 .table-widget-body {
1075   overflow: auto;
1076 }
1077
1078 table-widget-body,
1079 .table-widget-empty-text {
1080   background-color: var(--theme-body-background);
1081 }
1082
1083 /* Column Headers */
1084
1085 .table-widget-column-header,
1086 .table-widget-cell {
1087   -moz-border-end: 1px solid var(--table-splitter-color) !important;
1088 }
1089
1090 /* Table widget column header colors are taken from netmonitor.inc.css to match
1091    the look of both the tables. This needs to be updated along with netmonitor
1092    header colors in bug 951714 */
1093
1094 .table-widget-column-header {
1095   background: rgba(0,0,0,0);
1096   position: sticky;
1097   top: 0;
1098   width: 100%;
1099   padding: 5px 0 0 !important;
1100   color: inherit;
1101   text-align: center;
1102   font-weight: inherit !important;
1103   transition: background-color 0.1s ease-in-out;
1104 }
1105
1106 .table-widget-column-header:hover {
1107   background: var(--theme-hover-background);
1108 }
1109
1110 .table-widget-column-header:hover:active {
1111   background: var(--theme-active-background);
1112 }
1113
1114 .table-widget-column-header:not(:active)[sorted] {
1115   background: var(--theme-selection-background);
1116 }
1117
1118 .table-widget-column-header:not(:active)[sorted=ascending] {
1119   background-image: radial-gradient(farthest-side at center top, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1120   background-size: 100% 1px;
1121   background-repeat: no-repeat;
1122 }
1123
1124 .table-widget-column-header:not(:active)[sorted=descending] {
1125   background-image: radial-gradient(farthest-side at center bottom, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1126   background-size: 100% 1px;
1127   background-repeat: no-repeat;
1128   background-position: bottom;
1129 }
1130
1131 /* Cells */
1132
1133 .table-widget-cell {
1134   width: 100%;
1135   padding: 3px 4px;
1136   background-clip: padding-box;
1137   min-width: 100px;
1138   -moz-user-focus: normal;
1139
1140   margin-bottom: -1px !important;
1141   border-bottom: 1px solid transparent;
1142    color: var(--theme-body-color);
1143 }
1144
1145 .table-widget-cell:last-child {
1146   border-bottom: 1px solid var(--table-splitter-color);
1147 }
1148
1149 :root:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1150 .table-widget-cell:not(.theme-selected)[odd] {
1151   background: var(--table-zebra-background);
1152 }
1153
1154 .table-widget-cell.flash-out {
1155   animation: flash-out 0.5s ease-in;
1156 }
1157
1158 @keyframes flash-out {
1159   to {
1160     background: var(--theme-contrast-background2);
1161   }
1162 }
1163
1164 /* Empty text and initial text */
1165
1166 .table-widget-empty-text {
1167   display: none;
1168   text-align: center;
1169   font-size: large;
1170   margin-top: -20px !important;
1171 }
1172
1173 .table-widget-body:empty + .table-widget-empty-text:not([value=""]),
1174 .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
1175   display: block;
1176 }
1177
1178 /* Tree Widget */
1179
1180 .tree-widget-container {
1181   padding: 0;
1182   margin: 0;
1183   width: 100%;
1184   height: 100%;
1185   list-style: none;
1186   overflow: hidden;
1187   -moz-margin-end: 40px;
1188 }
1189
1190 .tree-widget-container:-moz-focusring,
1191 .tree-widget-container *:-moz-focusring {
1192   outline-style: none;
1193 }
1194
1195 .tree-widget-empty-text {
1196   padding: 10px 20px;
1197   font-size: medium;
1198   background: transparent;
1199   pointer-events: none;
1200 }
1201
1202 /* Tree Item */
1203
1204 .tree-widget-container .tree-widget-item {
1205   padding: 2px 0px 4px;
1206   /* OSX has line-height 14px by default, which causes weird alignment issues
1207    * because of 20px high icons. thus making line-height consistent with that of
1208    * windows.
1209    */
1210   line-height: 17px !important;
1211   display: inline-block;
1212   width: 100%;
1213   word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
1214                            breaking in multiple lines */
1215 }
1216
1217 .tree-widget-container .tree-widget-children {
1218   margin: 0;
1219   padding: 0;
1220   list-style: none;
1221 }
1222
1223 .tree-widget-item[level="1"] {
1224   font-weight: 700;
1225 }
1226
1227 /* Twisties */
1228 .tree-widget-item::before {
1229   content: "";
1230   width: 14px;
1231   height: 14px;
1232   float: left;
1233   margin: 3px 2px -3px;
1234   background-repeat: no-repeat;
1235   background-image: url("chrome://devtools/skin/controls.png");
1236   background-size: 56px 28px;
1237   cursor: pointer;
1238   background-position: -28px -14px;
1239 }
1240
1241 .tree-widget-item:-moz-locale-dir(rtl)::before {
1242   float: right;
1243   transform: scaleX(-1);
1244 }
1245
1246 .tree-widget-item[empty]::before {
1247   background: transparent;
1248 }
1249
1250 .tree-widget-item[expanded]::before {
1251   background-position: -42px -14px;
1252 }
1253
1254 .tree-widget-item + ul {
1255   overflow: hidden;
1256   animation: collapse-tree-item 0.2s;
1257   max-height: 0;
1258 }
1259
1260 .tree-widget-item[expanded] + ul {
1261   animation: expand-tree-item 0.3s;
1262   max-height: unset;
1263 }
1264
1265 @keyframes collapse-tree-item {
1266   from {
1267     max-height: 300px;
1268   }
1269   to {
1270     max-height: 0;
1271   }
1272 }
1273
1274 @keyframes expand-tree-item {
1275   from {
1276     max-height: 0;
1277   }
1278   to {
1279     max-height: 500px;
1280   }
1281 }
1282
1283 @media (min-resolution: 1.1dppx) {
1284   .tree-widget-item:before {
1285     background-image: url("chrome://devtools/skin/controls@2x.png");
1286   }
1287 }
1288
1289 /* Indentation of child items in the tree */
1290
1291 /* For level > 6 */
1292 .tree-widget-item[level] + ul > li > .tree-widget-item {
1293   -moz-padding-start: 98px;
1294 }
1295
1296 /* First level */
1297 .tree-widget-item[level="1"] + ul > li > .tree-widget-item {
1298   -moz-padding-start: 14px;
1299 }
1300
1301 /* Second level */
1302 .tree-widget-item[level="2"] + ul > li > .tree-widget-item {
1303   -moz-padding-start: 28px;
1304 }
1305
1306 /* Third level */
1307 .tree-widget-item[level="3"] + ul > li > .tree-widget-item {
1308   -moz-padding-start: 42px;
1309 }
1310
1311 /* Fourth level */
1312 .tree-widget-item[level="4"] + ul > li > .tree-widget-item {
1313   -moz-padding-start: 56px;
1314 }
1315
1316 /* Fifth level */
1317 .tree-widget-item[level="5"] + ul > li > .tree-widget-item {
1318   -moz-padding-start: 70px;
1319 }
1320
1321 /* Sixth level */
1322 .tree-widget-item[level="6"] + ul > li > .tree-widget-item {
1323   -moz-padding-start: 84px;
1324 }
1325
1326 /* Custom icons for certain tree items indicating the type of the item */
1327
1328 .tree-widget-item[type]::after {
1329   content: "";
1330   float: left;
1331   width: 16px;
1332   height: 17px;
1333   -moz-margin-end: 4px;
1334   background-repeat: no-repeat;
1335   background-size: 20px auto;
1336   background-position: 0 0;
1337   background-size: auto 20px;
1338   opacity: 0.75;
1339 }
1340
1341 .tree-widget-item.theme-selected[type]::after {
1342   opacity: 1;
1343 }
1344
1345 .tree-widget-item:-moz-locale-dir(rtl)::after {
1346   float: right;
1347 }
1348
1349 /*.theme-light .tree-widget-item.theme-selected[type]::after,*/
1350 .tree-widget-item[type]::after {
1351   filter: invert(1);
1352 }
1353
1354 .tree-widget-item[type="dir"]::after {
1355   background-image: url("chrome://devtools/skin/filetype-dir-close.svg");
1356   background-position: 2px 0;
1357   background-size: auto 16px;
1358   width: 20px;
1359 }
1360
1361 .tree-widget-item[type="dir"][expanded]:not([empty])::after {
1362   background-image: url("chrome://devtools/skin/filetype-dir-open.svg");
1363 }
1364
1365 .tree-widget-item[type="url"]::after {
1366   background-image: url("chrome://devtools/skin/filetype-globe.svg");
1367   background-size: auto 18px;
1368   width: 18px;
1369 }
1370
1371 /* === BEGIN manifest-editor.inc.css === */
1372
1373 /* Manifest Editor overrides */
1374
1375 .variables-view-container.manifest-editor {
1376   background-color: #000000;
1377   padding: 20px 2px;
1378 }
1379
1380 .manifest-editor .variable-or-property:focus > .title {
1381 /*  background-color: #EDEDED;
1382   color: #000; */
1383   border-radius: 4px;
1384 }
1385
1386 .manifest-editor .variables-view-property > .title > .name {
1387 /*  color: #27406A; */
1388 }
1389
1390 .manifest-editor .variable-or-property > .title > label,
1391 .manifest-editor textbox {
1392   font-family: monospace;
1393 }
1394
1395 .manifest-editor .variable-or-property > .title > .token-string {
1396 /*  color: #54BC6A; */
1397   font-weight: bold;
1398 }
1399
1400 .manifest-editor .variable-or-property > .title > .token-boolean,
1401 .manifest-editor .variable-or-property > .title > .token-number {
1402 /*  color: #009BD4; */
1403   font-weight: bold;
1404 }
1405
1406 .manifest-editor .variable-or-property > .title > .token-undefined {
1407 /*  color: #bbb; */
1408 }
1409
1410 .manifest-editor .variable-or-property > .title > .token-null {
1411 /*  color: #999; */
1412 }
1413
1414 .manifest-editor .variable-or-property > .title > .token-other {
1415 /*  color: #333; */
1416 }
1417
1418 .manifest-editor .variables-view-variable {
1419   border-bottom: none;
1420 }
1421
1422 .manifest-editor .variables-view-delete,
1423 .manifest-editor .variables-view-delete:hover,
1424 .manifest-editor .variables-view-delete:active,
1425 .manifest-editor .variable-or-property:focus .variables-view-delete,
1426 .manifest-editor .variables-view-add-property,
1427 .manifest-editor .variables-view-add-property:hover,
1428 .manifest-editor .variables-view-add-property:active,
1429 .manifest-editor .variable-or-property:focus .variables-view-add-property {
1430   list-style-image: none;
1431   -moz-image-region: initial;
1432 }
1433
1434 .manifest-editor .variables-view-delete::before,
1435 .manifest-editor .variables-view-add-property::before {
1436   width: 11px;
1437   height: 11px;
1438   content: "";
1439   display: inline-block;
1440   background-size: 11px auto;
1441 }
1442
1443 .manifest-editor .variables-view-delete::before {
1444   background-image: url("app-manager/remove.svg");
1445   background-size: 12px auto;
1446 }
1447
1448 .manifest-editor .variables-view-add-property::before {
1449   background-image: url("app-manager/add.svg");
1450   -moz-margin-end: 2px;
1451 }
1452
1453 /* === END manifest-editor.inc.css === */
1454
1455 /* === END widgets.inc.css === */