LCARStrek/browser/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.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://browser/skin/devtools/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.25dppx) {
 597   .variable-or-property-non-writable-icon > .title:after {
 598     background-image: url("chrome://browser/skin/devtools/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
 689 .variables-view-delete {
 690   background: url("chrome://browser/skin/devtools/vview-delete.png");
 691   background-size: cover;
 692   width: 16px;
 693   height: 16px;
 694 }
 695
 696 @media (min-resolution: 1.25dppx) {
 697   .variables-view-delete {
 698     background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png");
 699   }
 700 }
 701
 702 .variables-view-delete:hover {
 703   background-position: 32px;
 704 }
 705
 706 .variables-view-delete:active {
 707   background-position: 16px;
 708 }
 709
 710 .variable-or-property:focus > .title > .variables-view-delete {
 711 /*  background-position: 0px; */
 712 }
 713
 714 .variables-view-edit {
 715   background: url("chrome://browser/skin/devtools/vview-edit.png");
 716   background-size: cover;
 717   width: 16px;
 718   height: 16px;
 719   cursor: pointer;
 720 }
 721
 722 @media (min-resolution: 1.25dppx) {
 723   .variables-view-edit {
 724     background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png");
 725   }
 726 }
 727
 728 .variables-view-edit:hover {
 729   background-position: 32px;
 730 }
 731
 732 .variables-view-edit:active {
 733   background-position: 16px;
 734 }
 735
 736 .variable-or-property:focus > .title > .variables-view-edit {
 737 /*  background-position: 0px; */
 738 }
 739
 740 .variables-view-open-inspector {
 741   background: url("chrome://browser/skin/devtools/vview-open-inspector.png");
 742   background-size: cover;
 743   width: 16px;
 744   height: 16px;
 745   cursor: pointer;
 746 }
 747
 748 .variables-view-open-inspector:hover {
 749   background-position: 32px;
 750 }
 751
 752 .variables-view-open-inspector:active {
 753   background-position: 16px;
 754 }
 755
 756 .variable-or-property:focus > .title > .variables-view-open-inspector {
 757 /*  background-position: 0px; */
 758 }
 759
 760 /* Variables and properties input boxes */
 761
 762 .variable-or-property > .title > .separator + .element-value-input {
 763   -moz-margin-start: -2px !important;
 764   -moz-margin-end: 2px !important;
 765 }
 766
 767 .variable-or-property > .title > .separator[hidden=true] + .element-value-input {
 768   -moz-margin-start: 4px !important;
 769   -moz-margin-end: 2px !important;
 770 }
 771
 772 .element-name-input {
 773   -moz-margin-start: -2px !important;
 774   -moz-margin-end: 2px !important;
 775   font-weight: 600;
 776 }
 777
 778 .element-value-input,
 779 .element-name-input {
 780   border: 1px solid #008484 !important;
 781   color: inherit;
 782 }
 783
 784 /* Variables and properties searching */
 785
 786 .variable-or-property[unmatched] {
 787   border: none;
 788   margin: 0;
 789 }
 790
 791 /* Canvas graphs */
 792
 793 .graph-widget-container {
 794   position: relative;
 795 }
 796
 797 .graph-widget-canvas {
 798   width: 100%;
 799   height: 100%;
 800 }
 801
 802 .graph-widget-canvas[input=hovering-background] {
 803   cursor: text;
 804 }
 805
 806 .graph-widget-canvas[input=hovering-region] {
 807   cursor: pointer;
 808 }
 809
 810 .graph-widget-canvas[input=hovering-selection-start-boundary],
 811 .graph-widget-canvas[input=hovering-selection-end-boundary],
 812 .graph-widget-canvas[input=adjusting-selection-boundary] {
 813   cursor: col-resize;
 814 }
 815
 816 .graph-widget-canvas[input=adjusting-view-area] {
 817   cursor: grabbing;
 818 }
 819
 820 .graph-widget-canvas[input=hovering-selection-contents] {
 821   cursor: grab;
 822 }
 823
 824 .graph-widget-canvas[input=dragging-selection-contents] {
 825   cursor: grabbing;
 826 }
 827
 828 /* Line graph widget */
 829
 830 .line-graph-widget-gutter {
 831   position: absolute;
 832   width: 10px;
 833   height: 100%;
 834   top: 0;
 835   left: 0;
 836   pointer-events: none;
 837
 838   background: #000000;
 839   -moz-border-end: 1px solid #9C9CFF;
 840 }
 841
 842 .line-graph-widget-gutter-line {
 843   position: absolute;
 844   width: 100%;
 845   border-top: 1px solid;
 846 }
 847
 848 .line-graph-widget-gutter-line[type=maximum] {
 849   border-color: #008484;
 850 }
 851
 852 .line-graph-widget-gutter-line[type=minimum] {
 853   border-color: #FF0000;
 854 }
 855
 856 .line-graph-widget-gutter-line[type=average] {
 857   border-color: #FF9F00;
 858 }
 859
 860 .line-graph-widget-tooltip {
 861   position: absolute;
 862   border-radius: 2px;
 863   line-height: 15px;
 864   -moz-padding-start: 6px;
 865   -moz-padding-end: 6px;
 866   transform: translateY(-50%);
 867   font-size: 0.8rem !important;
 868   z-index: 1;
 869   pointer-events: none;
 870
 871   background: #404000;
 872 }
 873
 874 .line-graph-widget-tooltip[with-arrows=true]::before {
 875   content: "";
 876   position: absolute;
 877   border-top: 3px solid transparent;
 878   border-bottom: 3px solid transparent;
 879   top: calc(50% - 3px);
 880 }
 881
 882 .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
 883   -moz-border-end: 3px solid #9C9CFF;
 884   left: -3px;
 885 }
 886
 887 .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
 888   -moz-border-start: 3px solid #9C9CFF;
 889   right: -3px;
 890 }
 891
 892 .line-graph-widget-tooltip[type=maximum] {
 893   left: 14px;
 894 }
 895
 896 .line-graph-widget-tooltip[type=minimum] {
 897   left: 14px;
 898 }
 899
 900 .line-graph-widget-tooltip[type=average] {
 901   right: 4px;
 902 }
 903
 904 .line-graph-widget-tooltip > [text=info] {
 905   color: var(--theme-content-color2);
 906 }
 907
 908 .line-graph-widget-tooltip > [text=value] {
 909   -moz-margin-start: 3px;
 910 }
 911
 912 .line-graph-widget-tooltip > [text=metric] {
 913   -moz-margin-start: 1px;
 914   color: var(--theme-content-color4);
 915 }
 916
 917 .line-graph-widget-tooltip > [text=value],
 918 .line-graph-widget-tooltip > [text=metric] {
 919 /*  text-shadow: 1px  0px rgba(255,255,255,0.6),
 920               -1px  0px rgba(255,255,255,0.6),
 921                0px -1px rgba(255,255,255,0.6),
 922                0px  1px rgba(255,255,255,0.6);*/
 923 }
 924
 925 .line-graph-widget-tooltip[type=maximum] > [text=value] {
 926   color: var(--theme-highlight-green);
 927 }
 928
 929 .line-graph-widget-tooltip[type=minimum] > [text=value] {
 930   color: var(--theme-highlight-red);
 931 }
 932
 933 .line-graph-widget-tooltip[type=average] > [text=value] {
 934   color: var(--theme-highlight-orange);
 935 }
 936
 937 /* Bar graph widget */
 938
 939 .bar-graph-widget-legend {
 940   position: absolute;
 941   top: 4px;
 942   left: 8px;
 943   color: #A09090;
 944   font-size: 0.8rem !important;
 945   pointer-events: none;
 946 }
 947
 948 .bar-graph-widget-legend-item {
 949   float: left;
 950  -moz-margin-end: 8px;
 951 }
 952
 953 .bar-graph-widget-legend-item > [view="color"],
 954 .bar-graph-widget-legend-item > [view="label"] {
 955   vertical-align: middle;
 956 }
 957
 958 .bar-graph-widget-legend-item > [view="color"] {
 959   display: inline-block;
 960   width: 8px;
 961   height: 8px;
 962   border: 1px solid #9C9CFF;
 963   border-radius: 1px;
 964   -moz-margin-end: 4px;
 965   pointer-events: none;
 966 }
 967
 968 .bar-graph-widget-legend-item > [view="label"] {
 969 /*  text-shadow: 1px  0px rgba(255,255,255,0.8),
 970               -1px  0px rgba(255,255,255,0.8),
 971                0px -1px rgba(255,255,255,0.8),
 972                0px  1px rgba(255,255,255,0.8);*/
 973 }
 974
 975 /* Charts */
 976
 977 .generic-chart-container {
 978   /* Hack: force hardware acceleration */
 979   transform: translateZ(1px);
 980 }
 981
 982 .generic-chart-container {
 983   color: var(--theme-body-color-alt);
 984 }
 985
 986 .chart-colored-blob {
 987   fill: var(--theme-highlight-blue);
 988   background: var(--theme-highlight-blue);
 989 }
 990
 991 /* Charts: Pie */
 992
 993 .pie-chart-slice {
 994   stroke-width: 1px;
 995   cursor: pointer;
 996 }
 997
 998 .pie-chart-slice {
 999   stroke: #A09090;
1000 }
1001
1002 .pie-chart-slice[largest] {
1003   stroke-width: 2px;
1004   stroke: #9C9CFF;
1005 }
1006
1007 .pie-chart-label {
1008   text-anchor: middle;
1009   dominant-baseline: middle;
1010   pointer-events: none;
1011 }
1012
1013 .pie-chart-label {
1014   fill: #000;
1015 }
1016
1017 .pie-chart-container[slices="1"] > .pie-chart-slice {
1018   stroke-width: 0px;
1019 }
1020
1021 .pie-chart-slice,
1022 .pie-chart-label {
1023   transition: all 0.1s ease-out;
1024 }
1025
1026 .pie-chart-slice:not(:hover):not([focused]),
1027 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
1028   transform: none !important;
1029 }
1030
1031 /* Charts: Table */
1032
1033 .table-chart-title {
1034   padding-bottom: 10px;
1035   font-size: 120%;
1036   font-weight: 600;
1037 }
1038
1039 .table-chart-row {
1040   margin-top: 1px;
1041   cursor: pointer;
1042 }
1043
1044 .table-chart-grid:hover > .table-chart-row {
1045   transition: opacity 0.1s ease-in-out;
1046 }
1047
1048 .table-chart-grid:not(:hover) > .table-chart-row {
1049   transition: opacity 0.2s ease-in-out;
1050 }
1051
1052 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
1053 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
1054   opacity: 0.4;
1055 }
1056
1057 .table-chart-row-box {
1058   width: 8px;
1059   height: 1.5em;
1060   -moz-margin-end: 10px;
1061 }
1062
1063 .table-chart-row-label {
1064   width: 8em;
1065   -moz-padding-end: 6px;
1066   cursor: inherit;
1067 }
1068
1069 .table-chart-totals {
1070   margin-top: 8px;
1071   padding-top: 6px;
1072 }
1073
1074 .table-chart-totals {
1075   border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */
1076 }
1077
1078 .table-chart-summary-label {
1079   font-weight: 600;
1080   padding: 1px 0px;
1081 }
1082
1083 .table-chart-summary-label {
1084   color: var(--theme-content-color2);
1085 }
1086
1087 /* Table Widget */
1088
1089 /* Table body */
1090
1091 .table-widget-body > .devtools-side-splitter {
1092   border: none;
1093 }
1094
1095 .table-widget-body {
1096   overflow: auto;
1097 }
1098
1099 table-widget-body,
1100 .table-widget-empty-text {
1101   background-color: var(--theme-body-background);
1102 }
1103
1104 /* Column Headers */
1105
1106 .table-widget-column-header,
1107 .table-widget-cell {
1108   -moz-border-end: 1px solid var(--table-splitter-color) !important;
1109 }
1110
1111 /* Table widget column header colors are taken from netmonitor.inc.css to match
1112    the look of both the tables. This needs to be updated along with netmonitor
1113    header colors in bug 951714 */
1114
1115 .table-widget-column-header {
1116   background: rgba(0,0,0,0);
1117   position: sticky;
1118   top: 0;
1119   width: 100%;
1120   padding: 5px 0 0 !important;
1121   color: inherit;
1122   text-align: center;
1123   font-weight: inherit !important;
1124   transition: background-color 0.1s ease-in-out;
1125 }
1126
1127 .table-widget-column-header:hover {
1128   background: var(--theme-hover-background);
1129 }
1130
1131 .table-widget-column-header:hover:active {
1132   background: var(--theme-active-background);
1133 }
1134
1135 .table-widget-column-header:not(:active)[sorted] {
1136   background: var(--theme-selection-background);
1137 }
1138
1139 .table-widget-column-header:not(:active)[sorted=ascending] {
1140   background-image: radial-gradient(farthest-side at center top, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1141   background-size: 100% 1px;
1142   background-repeat: no-repeat;
1143 }
1144
1145 .table-widget-column-header:not(:active)[sorted=descending] {
1146   background-image: radial-gradient(farthest-side at center bottom, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1147   background-size: 100% 1px;
1148   background-repeat: no-repeat;
1149   background-position: bottom;
1150 }
1151
1152 /* Cells */
1153
1154 .table-widget-cell {
1155   width: 100%;
1156   padding: 3px 4px;
1157   background-clip: padding-box;
1158   min-width: 100px;
1159   -moz-user-focus: normal;
1160
1161   margin-bottom: -1px !important;
1162   border-bottom: 1px solid transparent;
1163    color: var(--theme-body-color);
1164 }
1165
1166 .table-widget-cell:last-child {
1167   border-bottom: 1px solid var(--table-splitter-color);
1168 }
1169
1170 :root:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1171 .table-widget-cell:not(.theme-selected)[odd] {
1172   background: var(--table-zebra-background);
1173 }
1174
1175 .table-widget-cell.flash-out {
1176   animation: flash-out 0.5s ease-in;
1177 }
1178
1179 @keyframes flash-out {
1180   to {
1181     background: var(--theme-contrast-background2);
1182   }
1183 }
1184
1185 /* Empty text and initial text */
1186
1187 .table-widget-empty-text {
1188   display: none;
1189   text-align: center;
1190   font-size: large;
1191   margin-top: -20px !important;
1192 }
1193
1194 .table-widget-body:empty + .table-widget-empty-text:not([value=""]),
1195 .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
1196   display: block;
1197 }
1198
1199 /* Tree Widget */
1200
1201 .tree-widget-container {
1202   padding: 0;
1203   margin: 0;
1204   width: 100%;
1205   height: 100%;
1206   list-style: none;
1207   overflow: hidden;
1208   -moz-margin-end: 40px;
1209 }
1210
1211 .tree-widget-container:-moz-focusring,
1212 .tree-widget-container *:-moz-focusring {
1213   outline-style: none;
1214 }
1215
1216 .tree-widget-empty-text {
1217   padding: 10px 20px;
1218   font-size: medium;
1219   background: transparent;
1220   pointer-events: none;
1221 }
1222
1223 /* Tree Item */
1224
1225 .tree-widget-container .tree-widget-item {
1226   padding: 2px 0px 4px;
1227   /* OSX has line-height 14px by default, which causes weird alignment issues
1228    * because of 20px high icons. thus making line-height consistent with that of
1229    * windows.
1230    */
1231   line-height: 17px !important;
1232   display: inline-block;
1233   width: 100%;
1234   word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
1235                            breaking in multiple lines */
1236 }
1237
1238 .tree-widget-container .tree-widget-children {
1239   margin: 0;
1240   padding: 0;
1241   list-style: none;
1242 }
1243
1244 .tree-widget-item[level="1"] {
1245   font-weight: 700;
1246 }
1247
1248 /* Twisties */
1249 .tree-widget-item::before {
1250   content: "";
1251   width: 14px;
1252   height: 14px;
1253   float: left;
1254   margin: 3px 2px -3px;
1255   background-repeat: no-repeat;
1256   background-image: url("chrome://browser/skin/devtools/controls.png");
1257   background-size: 56px 28px;
1258   cursor: pointer;
1259   background-position: -28px -14px;
1260 }
1261
1262 .tree-widget-item:-moz-locale-dir(rtl)::before {
1263   float: right;
1264   transform: scaleX(-1);
1265 }
1266
1267 .tree-widget-item[empty]::before {
1268   background: transparent;
1269 }
1270
1271 .tree-widget-item[expanded]::before {
1272   background-position: -42px -14px;
1273 }
1274
1275 .tree-widget-item + ul {
1276   overflow: hidden;
1277   animation: collapse-tree-item 0.2s;
1278   max-height: 0;
1279 }
1280
1281 .tree-widget-item[expanded] + ul {
1282   animation: expand-tree-item 0.3s;
1283   max-height: unset;
1284 }
1285
1286 @keyframes collapse-tree-item {
1287   from {
1288     max-height: 300px;
1289   }
1290   to {
1291     max-height: 0;
1292   }
1293 }
1294
1295 @keyframes expand-tree-item {
1296   from {
1297     max-height: 0;
1298   }
1299   to {
1300     max-height: 500px;
1301   }
1302 }
1303
1304 @media (min-resolution: 1.25dppx) {
1305   .tree-widget-item:before {
1306     background-image: url("chrome://browser/skin/devtools/controls@2x.png");
1307   }
1308 }
1309
1310 /* Indentation of child items in the tree */
1311
1312 /* For level > 6 */
1313 .tree-widget-item[level] + ul > li > .tree-widget-item {
1314   -moz-padding-start: 98px;
1315 }
1316
1317 /* First level */
1318 .tree-widget-item[level="1"] + ul > li > .tree-widget-item {
1319   -moz-padding-start: 14px;
1320 }
1321
1322 /* Second level */
1323 .tree-widget-item[level="2"] + ul > li > .tree-widget-item {
1324   -moz-padding-start: 28px;
1325 }
1326
1327 /* Third level */
1328 .tree-widget-item[level="3"] + ul > li > .tree-widget-item {
1329   -moz-padding-start: 42px;
1330 }
1331
1332 /* Fourth level */
1333 .tree-widget-item[level="4"] + ul > li > .tree-widget-item {
1334   -moz-padding-start: 56px;
1335 }
1336
1337 /* Fifth level */
1338 .tree-widget-item[level="5"] + ul > li > .tree-widget-item {
1339   -moz-padding-start: 70px;
1340 }
1341
1342 /* Sixth level */
1343 .tree-widget-item[level="6"] + ul > li > .tree-widget-item {
1344   -moz-padding-start: 84px;
1345 }
1346
1347 /* Custom icons for certain tree items indicating the type of the item */
1348
1349 .tree-widget-item[type]::after {
1350   content: "";
1351   float: left;
1352   width: 16px;
1353   height: 17px;
1354   -moz-margin-end: 4px;
1355   background-repeat: no-repeat;
1356   background-size: 20px auto;
1357   background-position: 0 0;
1358   background-size: auto 20px;
1359   opacity: 0.75;
1360 }
1361
1362 .tree-widget-item.theme-selected[type]::after {
1363   opacity: 1;
1364 }
1365
1366 .tree-widget-item:-moz-locale-dir(rtl)::after {
1367   float: right;
1368 }
1369
1370 /*.theme-light .tree-widget-item.theme-selected[type]::after,*/
1371 .tree-widget-item[type]::after {
1372   filter: invert(1);
1373 }
1374
1375 .tree-widget-item[type="dir"]::after {
1376   background-image: url("chrome://browser/skin/devtools/filetype-dir-close.svg");
1377   background-position: 2px 0;
1378   background-size: auto 16px;
1379   width: 20px;
1380 }
1381
1382 .tree-widget-item[type="dir"][expanded]:not([empty])::after {
1383   background-image: url("chrome://browser/skin/devtools/filetype-dir-open.svg");
1384 }
1385
1386 .tree-widget-item[type="url"]::after {
1387   background-image: url("chrome://browser/skin/devtools/filetype-globe.svg");
1388   background-size: auto 18px;
1389   width: 18px;
1390 }
1391
1392 /* === BEGIN manifest-editor.inc.css === */
1393
1394 /* Manifest Editor overrides */
1395
1396 .variables-view-container.manifest-editor {
1397   background-color: #000000;
1398   padding: 20px 2px;
1399 }
1400
1401 .manifest-editor .variable-or-property:focus > .title {
1402 /*  background-color: #EDEDED;
1403   color: #000; */
1404   border-radius: 4px;
1405 }
1406
1407 .manifest-editor .variables-view-property > .title > .name {
1408 /*  color: #27406A; */
1409 }
1410
1411 .manifest-editor .variable-or-property > .title > label,
1412 .manifest-editor textbox {
1413   font-family: monospace;
1414 }
1415
1416 .manifest-editor .variable-or-property > .title > .token-string {
1417 /*  color: #54BC6A; */
1418   font-weight: bold;
1419 }
1420
1421 .manifest-editor .variable-or-property > .title > .token-boolean,
1422 .manifest-editor .variable-or-property > .title > .token-number {
1423 /*  color: #009BD4; */
1424   font-weight: bold;
1425 }
1426
1427 .manifest-editor .variable-or-property > .title > .token-undefined {
1428 /*  color: #bbb; */
1429 }
1430
1431 .manifest-editor .variable-or-property > .title > .token-null {
1432 /*  color: #999; */
1433 }
1434
1435 .manifest-editor .variable-or-property > .title > .token-other {
1436 /*  color: #333; */
1437 }
1438
1439 .manifest-editor .variables-view-variable {
1440   border-bottom: none;
1441 }
1442
1443 .manifest-editor .variables-view-delete,
1444 .manifest-editor .variables-view-delete:hover,
1445 .manifest-editor .variables-view-delete:active,
1446 .manifest-editor .variable-or-property:focus .variables-view-delete,
1447 .manifest-editor .variables-view-add-property,
1448 .manifest-editor .variables-view-add-property:hover,
1449 .manifest-editor .variables-view-add-property:active,
1450 .manifest-editor .variable-or-property:focus .variables-view-add-property {
1451   list-style-image: none;
1452   -moz-image-region: initial;
1453 }
1454
1455 .manifest-editor .variables-view-delete::before,
1456 .manifest-editor .variables-view-add-property::before {
1457   width: 11px;
1458   height: 11px;
1459   content: "";
1460   display: inline-block;
1461   background-size: 11px auto;
1462 }
1463
1464 .manifest-editor .variables-view-delete::before {
1465   background-image: url("app-manager/remove.svg");
1466   background-size: 12px auto;
1467 }
1468
1469 .manifest-editor .variables-view-add-property::before {
1470   background-image: url("app-manager/add.svg");
1471   -moz-margin-end: 2px;
1472 }
1473
1474 /* === END manifest-editor.inc.css === */
1475
1476 /* === END widgets.inc.css === */