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