1/* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5@import url(chrome://devtools/skin/breadcrumbs.css); 6 7.theme-dark { 8 --table-splitter-color: rgba(255,255,255,0.15); 9 --table-zebra-background: rgba(255,255,255,0.05); 10 --sidemenu-selected-arrow: url(images/item-arrow-dark-ltr.svg); 11 --sidemenu-selected-arrow-rtl: url(images/item-arrow-dark-rtl.svg); 12} 13 14.theme-light { 15 --table-splitter-color: rgba(0,0,0,0.15); 16 --table-zebra-background: rgba(0,0,0,0.05); 17 --sidemenu-selected-arrow: url(images/item-arrow-ltr.svg); 18 --sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg); 19} 20 21/* Generic pane helpers */ 22 23.generic-toggled-pane { 24 margin-inline-start: 0 !important; 25 /* Unfortunately, transitions don't work properly with locale-aware properties, 26 so both the left and right margins are set via js, while the start margin 27 is always overridden here. */ 28} 29 30.generic-toggled-pane[animated] { 31 transition: margin 0.25s ease-in-out; 32} 33 34/* Responsive container */ 35 36.devtools-responsive-container { 37 -moz-box-orient: horizontal; 38} 39 40.devtools-main-content { 41 min-width: 50px; 42} 43 44.devtools-main-content, 45.devtools-sidebar-tabs { 46 /* Prevent some children that should be hidden from remaining visible as this is shrunk (Bug 971959) */ 47 position: relative; 48} 49 50@media (min-width: 701px) { 51 .devtools-responsive-container .generic-toggled-pane { 52 /* To hide generic-toggled-pane, negative margins are applied dynamically. 53 * In the default horizontal layout, the pane is on the side and should be 54 * hidden using negative margin-inline-end only. 55 */ 56 margin-top: 0 !important; 57 margin-bottom: 0 !important; 58 } 59} 60 61@media (max-width: 700px) { 62 .devtools-responsive-container { 63 -moz-box-orient: vertical; 64 } 65 66 .devtools-responsive-container > .devtools-side-splitter { 67 /* This is a normally vertical splitter, but we have turned it horizontal 68 due to the smaller resolution */ 69 min-height: calc(var(--devtools-splitter-top-width) + 70 var(--devtools-splitter-bottom-width) + 1px); 71 border-top-width: var(--devtools-splitter-top-width); 72 border-bottom-width: var(--devtools-splitter-bottom-width); 73 margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px); 74 margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width)); 75 76 /* Reset the vertical splitter styles */ 77 min-width: 0; 78 border-inline-end-width: 0; 79 border-inline-start-width: 0; 80 margin-inline-end: 0; 81 margin-inline-start: 0; 82 83 /* In some edge case the cursor is not changed to ns-resize */ 84 cursor: ns-resize; 85 } 86 87 .devtools-responsive-container > .devtools-sidebar-tabs:not(.pane-collapsed) { 88 /* When the panel is collapsed min/max height should not be applied because 89 collapsing relies on negative margins, which implies constant height. */ 90 min-height: 35vh; 91 max-height: 75vh; 92 } 93 94 .devtools-responsive-container .generic-toggled-pane { 95 /* To hide generic-toggled-pane, negative margins are applied dynamically. 96 * If a vertical layout, the pane is on the bottom and should be hidden 97 * using negative bottom margin only. 98 */ 99 margin-inline-end: 0 !important; 100 } 101} 102 103/* VariablesView */ 104 105.variables-view-container { 106 /* Hack: force hardware acceleration */ 107 transform: translateZ(1px); 108} 109 110.variables-view-empty-notice { 111 padding: 2px; 112} 113 114.variables-view-empty-notice { 115 color: var(--theme-text-color-alt); 116} 117 118.variables-view-scope:focus > .title, 119.variable-or-property:focus > .title { 120 background-color: var(--theme-selection-background); 121 color: var(--theme-selection-color); 122} 123 124.variables-view-scope > .title { 125 border-top-width: 1px; 126 border-top-style: solid; 127 margin-top: -1px; 128} 129 130.variables-view-scope > .title:-moz-locale-dir(rtl) { 131 direction: rtl; 132} 133 134/* Custom scope stylings */ 135 136.variables-view-watch-expressions .title > .name { 137 max-width: 14em; 138} 139 140/* Generic variables traits */ 141 142.variables-view-variable:not(:last-child) { 143 border-bottom: 1px solid var(--theme-splitter-color); 144} 145 146.variables-view-variable > .title > .name { 147 font-weight: 600; 148} 149 150/* Generic variables *and* properties traits */ 151 152.variable-or-property:focus > .title > label { 153 color: inherit !important; 154} 155 156.variables-view-container .theme-twisty { 157 margin: 2px; 158} 159 160.variable-or-property > .title > .theme-twisty { 161 margin-inline-start: 5px; 162} 163 164.variables-view-container .variables-view-element-details .theme-twisty:not([open]):-moz-locale-dir(rtl) { 165 transform: rotate(-90deg); 166} 167 168.variable-or-property:not([untitled]) > .variables-view-element-details { 169 margin-inline-start: 7px; 170} 171 172/* Traits applied when variables or properties are changed or overridden */ 173 174.variable-or-property:not([overridden]) { 175 transition: background 1s ease-in-out; 176} 177 178.variable-or-property:not([overridden])[changed] { 179 transition-duration: .4s; 180} 181 182.variable-or-property[overridden] { 183 background: rgba(128,128,128,0.05); 184} 185 186.variable-or-property[overridden] .title > label { 187 /* Cross out the title for this variable and all child properties. */ 188 font-style: italic; 189 text-decoration: line-through; 190 border-bottom: none !important; 191 color: rgba(128,128,128,0.9); 192 opacity: 0.7; 193} 194 195/* Traits applied when variables or properties are editable */ 196 197.variable-or-property[editable] > .title > .value { 198 cursor: text; 199} 200 201.variable-or-property[overridden] .title > .value { 202 /* Disallow editing this variable and all child properties. */ 203 pointer-events: none; 204} 205 206/* Custom configurable/enumerable/writable or frozen/sealed/extensible 207 * variables and properties */ 208 209.variable-or-property[non-enumerable]:not([self], [pseudo-item]) > .title > .name { 210 opacity: 0.6; 211} 212 213.variable-or-property-non-writable-icon { 214 background: url("chrome://devtools/skin/images/vview-lock.svg") no-repeat; 215 background-size: cover; 216 width: 16px; 217 height: 16px; 218 -moz-context-properties: fill; 219 fill: var(--theme-icon-dimmed-color); 220} 221 222.variable-or-property-frozen-label, 223.variable-or-property-sealed-label, 224.variable-or-property-non-extensible-label { 225 height: 16px; 226 padding-inline-end: 4px; 227} 228 229.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label, 230.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label, 231.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label { 232 color: #666; 233} 234 235/* Aligned values */ 236 237.variables-view-container[aligned-values] .title > .separator { 238 -moz-box-flex: 1; 239} 240 241.variables-view-container[aligned-values] .title > .value { 242 -moz-box-flex: 0; 243 width: 70vw; 244} 245 246.variables-view-container[aligned-values] .title > .element-value-input { 247 width: calc(70vw - 10px); 248} 249 250/* Actions first */ 251 252.variables-view-open-inspector { 253 -moz-box-ordinal-group: 1; 254} 255 256.variables-view-edit, 257.variables-view-add-property { 258 -moz-box-ordinal-group: 2; 259} 260 261.variable-or-property-frozen-label, 262.variable-or-property-sealed-label, 263.variable-or-property-non-extensible-label, 264.variable-or-property-non-writable-icon { 265 -moz-box-ordinal-group: 3; 266} 267 268.variables-view-delete { 269 -moz-box-ordinal-group: 4; 270} 271 272.variables-view-container[actions-first] .variables-view-delete, 273.variables-view-container[actions-first] .variables-view-add-property, 274.variables-view-container[actions-first] .variables-view-open-inspector { 275 -moz-box-ordinal-group: 0; 276} 277 278.variables-view-container[actions-first] [invisible] { 279 visibility: hidden; 280} 281 282/* Variables and properties tooltips */ 283 284.variable-or-property > tooltip > label { 285 margin: 0 2px 0 2px; 286} 287 288.variable-or-property[non-enumerable] > tooltip > label.enumerable, 289.variable-or-property[non-configurable] > tooltip > label.configurable, 290.variable-or-property[non-writable] > tooltip > label.writable, 291.variable-or-property[non-extensible] > tooltip > label.extensible { 292 color: #800; 293 text-decoration: line-through; 294} 295 296.variable-or-property[overridden] > tooltip > label.overridden { 297 padding-inline-start: 4px; 298 border-inline-start: 1px dotted #000; 299} 300 301.variable-or-property[safe-getter] > tooltip > label.WebIDL { 302 padding-inline-start: 4px; 303 border-inline-start: 1px dotted #000; 304 color: #080; 305} 306 307/* Variables and properties editing */ 308.variables-view-delete, 309.variables-view-edit, 310.variables-view-open-inspector { 311 width: 16px; 312 height: 16px; 313 background-size: cover; 314 background-repeat: no-repeat; 315 cursor: pointer; 316 -moz-context-properties: fill; 317 fill: var(--theme-icon-dimmed-color); 318} 319 320.variables-view-open-inspector { 321 background-size: 15px; 322} 323 324.variables-view-delete:hover, 325.variables-view-edit:hover, 326.variables-view-open-inspector:hover { 327 fill: var(--theme-icon-color); 328} 329 330.variables-view-delete:active, 331.variables-view-edit:active, 332.variables-view-open-inspector:active { 333 fill: var(--theme-icon-checked-color); 334} 335 336.variables-view-delete { 337 background-image: url("chrome://devtools/skin/images/vview-delete.svg"); 338} 339 340.variables-view-edit { 341 background-image: url("chrome://devtools/skin/images/vview-edit.svg"); 342} 343 344.variables-view-open-inspector { 345 background-image: url("chrome://devtools/skin/images/open-inspector.svg"); 346} 347 348/* Variables and properties input boxes */ 349 350.variable-or-property > .title > .separator + .element-value-input { 351 margin-inline-start: -2px !important; 352 margin-inline-end: 2px !important; 353} 354 355.variable-or-property > .title > .separator[hidden=true] + .element-value-input { 356 margin-inline-start: 4px !important; 357 margin-inline-end: 2px !important; 358} 359 360.element-name-input { 361 margin-inline-start: -2px !important; 362 margin-inline-end: 2px !important; 363 font-weight: 600; 364} 365 366.element-value-input, 367.element-name-input { 368 border: 1px solid rgba(128, 128, 128, .5) !important; 369 border-radius: 0; 370 color: inherit; 371} 372 373/* Variables and properties searching */ 374 375.variable-or-property[unmatched] { 376 border: none; 377 margin: 0; 378} 379 380/* Canvas graphs */ 381 382.graph-widget-container { 383 position: relative; 384} 385 386.graph-widget-canvas { 387 width: 100%; 388 height: 100%; 389} 390 391.graph-widget-canvas[input=hovering-background] { 392 cursor: text; 393} 394 395.graph-widget-canvas[input=hovering-region] { 396 cursor: pointer; 397} 398 399.graph-widget-canvas[input=hovering-selection-start-boundary], 400.graph-widget-canvas[input=hovering-selection-end-boundary], 401.graph-widget-canvas[input=adjusting-selection-boundary] { 402 cursor: col-resize; 403} 404 405.graph-widget-canvas[input=adjusting-view-area] { 406 cursor: grabbing; 407} 408 409.graph-widget-canvas[input=hovering-selection-contents] { 410 cursor: grab; 411} 412 413.graph-widget-canvas[input=dragging-selection-contents] { 414 cursor: grabbing; 415} 416 417/* Line graph widget */ 418 419.line-graph-widget-gutter { 420 position: absolute; 421 width: 10px; 422 height: 100%; 423 top: 0; 424 left: 0; 425 pointer-events: none; 426 border-inline-end: 1px solid; 427} 428 429.theme-light .line-graph-widget-gutter { 430 background: rgba(255,255,255,0.75); 431 border-inline-end-color: rgba(255,255,255,0.25); 432} 433 434.theme-dark .line-graph-widget-gutter { 435 background: rgba(0,0,0,0.5); 436 border-inline-end-color: rgba(0,0,0,0.25); 437} 438 439.line-graph-widget-gutter-line { 440 position: absolute; 441 width: 100%; 442 border-top: 1px solid; 443} 444 445.line-graph-widget-gutter-line[type=maximum] { 446 border-color: #2cbb0f; 447} 448 449.line-graph-widget-gutter-line[type=minimum] { 450 border-color: #ed2655; 451} 452 453.line-graph-widget-gutter-line[type=average] { 454 border-color: #d97e00; 455} 456 457.line-graph-widget-tooltip { 458 position: absolute; 459 border-radius: 2px; 460 line-height: 15px; 461 padding-inline-start: 6px; 462 padding-inline-end: 6px; 463 transform: translateY(-50%); 464 font-size: 0.8rem !important; 465 z-index: 1; 466 pointer-events: none; 467} 468 469.theme-light .line-graph-widget-tooltip { 470 background: rgba(255,255,255,0.75); 471} 472 473.theme-dark .line-graph-widget-tooltip { 474 background: rgba(0,0,0,0.5); 475} 476 477.line-graph-widget-tooltip[with-arrows=true]::before { 478 content: ""; 479 position: absolute; 480 border-top: 3px solid transparent; 481 border-bottom: 3px solid transparent; 482 top: calc(50% - 3px); 483} 484 485.line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { 486 border-inline-end: 3px solid; 487 left: -3px; 488} 489 490.line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { 491 border-inline-start: 3px solid; 492 right: -3px; 493} 494 495.theme-light .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { 496 border-inline-end-color: rgba(255,255,255,0.75); 497} 498 499.theme-dark .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { 500 border-inline-end-color: rgba(0,0,0,0.5); 501} 502 503.theme-light .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { 504 border-inline-start-color: rgba(255,255,255,0.75); 505} 506 507.theme-dark .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { 508 border-inline-start-color: rgba(0,0,0,0.5); 509} 510 511.line-graph-widget-tooltip[type=maximum] { 512 left: 14px; 513} 514 515.line-graph-widget-tooltip[type=minimum] { 516 left: 14px; 517} 518 519.line-graph-widget-tooltip[type=average] { 520 right: 4px; 521} 522 523.line-graph-widget-tooltip > [text=info] { 524 color: var(--theme-text-color-strong); 525} 526 527.line-graph-widget-tooltip > [text=value] { 528 margin-inline-start: 3px; 529} 530 531.line-graph-widget-tooltip > [text=metric] { 532 margin-inline-start: 1px; 533 color: var(--theme-text-color-alt); 534} 535 536.theme-light .line-graph-widget-tooltip > [text=value], 537.theme-light .line-graph-widget-tooltip > [text=metric] { 538 text-shadow: 1px 0px rgba(255,255,255,0.5), 539 -1px 0px rgba(255,255,255,0.5), 540 0px -1px rgba(255,255,255,0.5), 541 0px 1px rgba(255,255,255,0.5); 542} 543 544.theme-dark .line-graph-widget-tooltip > [text=value], 545.theme-dark .line-graph-widget-tooltip > [text=metric] { 546 text-shadow: 1px 0px rgba(0,0,0,0.5), 547 -1px 0px rgba(0,0,0,0.5), 548 0px -1px rgba(0,0,0,0.5), 549 0px 1px rgba(0,0,0,0.5); 550} 551 552.line-graph-widget-tooltip[type=maximum] > [text=value] { 553 color: var(--theme-highlight-green); 554} 555 556.line-graph-widget-tooltip[type=minimum] > [text=value] { 557 color: var(--theme-highlight-red); 558} 559 560.line-graph-widget-tooltip[type=average] > [text=value] { 561 color: var(--theme-highlight-orange); 562} 563 564/* Table Widget */ 565 566/* Table body */ 567 568.table-widget-body > .devtools-side-splitter { 569 background-color: transparent; 570} 571 572.table-widget-body { 573 width: 100%; 574 height: 100%; 575 overflow: auto; 576} 577 578.table-widget-body[empty="empty"] { 579 display: none; 580} 581 582/* Column Headers */ 583 584.table-widget-column-header, 585.table-widget-cell { 586 border-inline-end: 1px solid var(--table-splitter-color) !important; 587} 588 589/* Table widget column header colors are taken from netmonitor.inc.css to match 590 the look of both the tables. */ 591 592.table-widget-column-header { 593 position: sticky; 594 top: 0; 595 width: 100%; 596 margin: 0; 597 padding: 5px 4px 0 !important; 598 color: inherit; 599 text-align: start; 600 font-weight: inherit !important; 601 border-image: linear-gradient(transparent 15%, 602 var(--theme-splitter-color) 15%, 603 var(--theme-splitter-color) 85%, 604 transparent 85%, 605 transparent calc(100% - 1px), 606 var(--theme-splitter-color) calc(100% - 1px)) 1 1; 607 background-repeat: no-repeat; 608} 609 610.table-widget-column-header:not([sorted]):hover { 611 background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)); 612} 613 614.table-widget-column-header[sorted] { 615 background-color: var(--theme-selection-background); 616 color: var(--theme-selection-color); 617 border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1; 618 box-shadow: -0.5px -0.5px 0 0.5px var(--theme-splitter-color); 619 background-position: right 6px center; 620} 621 622.table-widget-column-header[sorted]:-moz-locale-dir(rtl) { 623 background-position: 6px center; 624} 625 626.table-widget-column-header[sorted=ascending] { 627 background-image: url("chrome://devtools/skin/images/sort-ascending-arrow.svg"); 628} 629 630.table-widget-column-header[sorted=descending] { 631 background-image: url("chrome://devtools/skin/images/sort-descending-arrow.svg"); 632} 633 634.theme-dark .table-widget-column[readonly] { 635 background-color: rgba(255,255,255,0.1); 636} 637 638.theme-light .table-widget-column[readonly] { 639 background-color: rgba(0,0,0,0.1); 640} 641 642.table-widget-body .devtools-side-splitter:last-of-type { 643 display: none; 644} 645 646/* Cells */ 647 648.table-widget-cell { 649 width: 100%; 650 padding: 3px 4px; 651 min-width: 100px; 652 -moz-user-focus: normal; 653 color: var(--theme-body-color); 654} 655 656.table-widget-cell[hidden] { 657 display: none; 658} 659 660.table-widget-cell.even:not(.theme-selected) { 661 background-color: var(--table-zebra-background); 662} 663 664:root:not(.no-animate) .table-widget-cell.flash-out { 665 animation: flash-out 0.5s ease-in; 666} 667 668@keyframes flash-out { 669 to { 670 background: var(--theme-contrast-background); 671 } 672} 673 674/* Empty text and initial text */ 675 676.table-widget-empty-text { 677 display: none; 678 font-size: large; 679} 680 681.table-widget-body:empty + .table-widget-empty-text:not([value=""]), 682.table-widget-body[empty] + .table-widget-empty-text:not([value=""]) { 683 display: block; 684} 685 686/* Tree Widget */ 687 688.tree-widget-container { 689 padding: 0; 690 margin: 0; 691 width: 100%; 692 height: 100%; 693 list-style: none; 694 overflow: hidden; 695 margin-inline-end: 40px; 696} 697 698.tree-widget-container:-moz-focusring, 699.tree-widget-container *:-moz-focusring { 700 outline-style: none; 701} 702 703.tree-widget-empty-text { 704 padding: 10px 20px; 705 font-size: medium; 706 background: transparent; 707 pointer-events: none; 708} 709 710/* Tree Item */ 711 712.tree-widget-container .tree-widget-item { 713 padding: 4px 0px; 714 /* OSX has line-height 14px by default, which causes weird alignment issues 715 * because of 20px high icons. thus making line-height consistent with that of 716 * windows. 717 */ 718 line-height: 16px; 719 display: inline-block; 720 width: 100%; 721 word-break: keep-all; /* To prevent long urls like http://foo.com/bar from 722 breaking in multiple lines */ 723} 724 725.tree-widget-container .tree-widget-children { 726 margin: 0; 727 padding: 0; 728 list-style: none; 729} 730 731.tree-widget-item[level="1"] { 732 font-weight: 700; 733} 734 735/* Twisties */ 736.tree-widget-item::before { 737 content: ""; 738 width: 16px; 739 height: 16px; 740 float: inline-start; 741 margin: 0 1px; 742 background-image: url("chrome://devtools/skin/images/arrow.svg"); 743 background-position: 50% 50%; 744 background-repeat: no-repeat; 745 background-size: 10px; 746 -moz-context-properties: fill; 747 fill: var(--theme-icon-dimmed-color); 748 cursor: pointer; 749 transition: transform 125ms ease; 750 transform: rotate(-90deg); 751} 752 753.tree-widget-item:-moz-locale-dir(rtl)::before { 754 transform: rotate(90deg); 755} 756 757.tree-widget-item[empty]::before { 758 background: transparent; 759} 760 761.tree-widget-item[expanded]::before { 762 transform: none; 763} 764 765.tree-widget-item.theme-selected::before { 766 fill: currentColor; 767} 768 769.tree-widget-item + ul { 770 overflow: hidden; 771 animation: collapse-tree-item 0.2s; 772 max-height: 0; 773} 774 775.tree-widget-item[expanded] + ul { 776 animation: expand-tree-item 0.3s; 777 max-height: unset; 778} 779 780@keyframes collapse-tree-item { 781 from { 782 max-height: 300px; 783 } 784 to { 785 max-height: 0; 786 } 787} 788 789@keyframes expand-tree-item { 790 from { 791 max-height: 0; 792 } 793 to { 794 max-height: 500px; 795 } 796} 797 798/* Indentation of child items in the tree */ 799 800/* For level > 6 */ 801.tree-widget-item[level] + ul > li > .tree-widget-item { 802 padding-inline-start: 98px; 803} 804 805/* First level */ 806.tree-widget-item[level="1"] + ul > li > .tree-widget-item { 807 padding-inline-start: 14px; 808} 809 810/* Second level */ 811.tree-widget-item[level="2"] + ul > li > .tree-widget-item { 812 padding-inline-start: 28px; 813} 814 815/* Third level */ 816.tree-widget-item[level="3"] + ul > li > .tree-widget-item { 817 padding-inline-start: 42px; 818} 819 820/* Fourth level */ 821.tree-widget-item[level="4"] + ul > li > .tree-widget-item { 822 padding-inline-start: 56px; 823} 824 825/* Fifth level */ 826.tree-widget-item[level="5"] + ul > li > .tree-widget-item { 827 padding-inline-start: 70px; 828} 829 830/* Sixth level */ 831.tree-widget-item[level="6"] + ul > li > .tree-widget-item { 832 padding-inline-start: 84px; 833} 834 835/* Custom icons for certain tree items indicating the type of the item */ 836 837.tree-widget-item[type]::after { 838 content: ""; 839 float: inline-start; 840 width: 16px; 841 height: 16px; 842 margin-inline-end: 4px; 843 background-repeat: no-repeat; 844 background-size: contain; 845 -moz-context-properties: fill; 846 fill: currentColor; 847} 848 849.tree-widget-item[type="dir"]::after { 850 background-image: url(chrome://devtools/skin/images/folder.svg); 851} 852 853.tree-widget-item[type="url"]::after { 854 background-image: url(chrome://devtools/skin/images/globe.svg); 855} 856 857.tree-widget-item[type="store"]::after { 858 background-image: url(chrome://devtools/skin/images/datastore.svg); 859} 860