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