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