devtools/client/themes/widgets.css

   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   min-width: 0;
  38   min-height: 0;
  39   flex-direction: row;
  40 }
  41
  42 .devtools-main-content {
  43   min-width: 50px;
  44 }
  45
  46 .devtools-main-content,
  47 .devtools-sidebar-tabs {
  48   /* Prevent some children that should be hidden from remaining visible as this is shrunk (Bug 971959) */
  49   position: relative;
  50 }
  51
  52 @media (min-width: 701px) {
  53   .devtools-responsive-container .generic-toggled-pane {
  54     /* To hide generic-toggled-pane, negative margins are applied dynamically.
  55      * In the default horizontal layout, the pane is on the side and should be
  56      * hidden using negative margin-inline-end only.
  57      */
  58     margin-top: 0 !important;
  59     margin-bottom: 0 !important;
  60   }
  61 }
  62
  63 @media (max-width: 700px) {
  64   .devtools-responsive-container {
  65     flex-direction: column;
  66   }
  67
  68   .devtools-responsive-container > .devtools-side-splitter {
  69     /* This is a normally vertical splitter, but we have turned it horizontal
  70        due to the smaller resolution */
  71     min-height: calc(var(--devtools-splitter-top-width) +
  72     var(--devtools-splitter-bottom-width) + 1px);
  73     border-top-width: var(--devtools-splitter-top-width);
  74     border-bottom-width: var(--devtools-splitter-bottom-width);
  75     margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);
  76     margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width));
  77
  78     /* Reset the vertical splitter styles */
  79     min-width: 0;
  80     border-inline-end-width: 0;
  81     border-inline-start-width: 0;
  82     margin-inline-end: 0;
  83     margin-inline-start: 0;
  84
  85     /* In some edge case the cursor is not changed to ns-resize */
  86     cursor: ns-resize;
  87   }
  88
  89   .devtools-responsive-container > .devtools-sidebar-tabs:not(.pane-collapsed) {
  90     /* When the panel is collapsed min/max height should not be applied because
  91        collapsing relies on negative margins, which implies constant height. */
  92     min-height: 35vh;
  93     max-height: 75vh;
  94   }
  95
  96   .devtools-responsive-container .generic-toggled-pane {
  97     /* To hide generic-toggled-pane, negative margins are applied dynamically.
  98      * If a vertical layout, the pane is on the bottom and should be hidden
  99      * using negative bottom margin only.
 100      */
 101     margin-inline-end: 0 !important;
 102   }
 103 }
 104
 105 /* VariablesView */
 106
 107 .variables-view-container {
 108   /* Hack: force hardware acceleration */
 109   transform: translateZ(1px);
 110
 111   & > scrollbox {
 112     overflow: auto;
 113   }
 114 }
 115
 116 .variables-view-empty-notice {
 117   padding: 2px;
 118 }
 119
 120 .variables-view-empty-notice {
 121   color: var(--theme-text-color-alt);
 122 }
 123
 124 .variables-view-scope:focus > .title,
 125 .variable-or-property:focus > .title {
 126   background-color: var(--theme-selection-background);
 127   color: var(--theme-selection-color);
 128 }
 129
 130 .variables-view-scope > .title {
 131   border-top-width: 1px;
 132   border-top-style: solid;
 133   margin-top: -1px;
 134 }
 135
 136 .variables-view-scope > .title:-moz-locale-dir(rtl) {
 137   direction: rtl;
 138 }
 139
 140 /* Custom scope stylings */
 141
 142 .variables-view-watch-expressions .title > .name  {
 143   max-width: 14em;
 144 }
 145
 146 /* Generic variables traits */
 147
 148 .variables-view-variable:not(:last-child) {
 149   border-bottom: 1px solid var(--theme-splitter-color);
 150 }
 151
 152 .variables-view-variable > .title > .name {
 153   font-weight: 600;
 154 }
 155
 156 /* Generic variables *and* properties traits */
 157
 158 .variable-or-property:focus > .title > label {
 159   color: inherit !important;
 160 }
 161
 162 .variables-view-container .theme-twisty {
 163   margin: 2px;
 164 }
 165
 166 .variable-or-property > .title > .theme-twisty {
 167   margin-inline-start: 5px;
 168 }
 169
 170 .variables-view-container .variables-view-element-details .theme-twisty:not([open]):-moz-locale-dir(rtl) {
 171   transform: rotate(-90deg);
 172 }
 173
 174 .variable-or-property:not([untitled]) > .variables-view-element-details {
 175   margin-inline-start: 7px;
 176 }
 177
 178 /* Traits applied when variables or properties are changed or overridden */
 179
 180 .variable-or-property:not([overridden]) {
 181   transition: background 1s ease-in-out;
 182 }
 183
 184 .variable-or-property:not([overridden])[changed] {
 185   transition-duration: .4s;
 186 }
 187
 188 .variable-or-property[overridden] {
 189   background: rgba(128,128,128,0.05);
 190 }
 191
 192 .variable-or-property[overridden] .title > label {
 193   /* Cross out the title for this variable and all child properties. */
 194   font-style: italic;
 195   text-decoration: line-through;
 196   border-bottom: none !important;
 197   color: rgba(128,128,128,0.9);
 198   opacity: 0.7;
 199 }
 200
 201 /* Traits applied when variables or properties are editable */
 202
 203 .variable-or-property[editable] > .title > .value {
 204   cursor: text;
 205 }
 206
 207 .variable-or-property[overridden] .title > .value {
 208   /* Disallow editing this variable and all child properties. */
 209   pointer-events: none;
 210 }
 211
 212 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
 213  * variables and properties */
 214
 215 .variable-or-property[non-enumerable]:not([self], [pseudo-item]) > .title > .name {
 216   opacity: 0.6;
 217 }
 218
 219 .variable-or-property-non-writable-icon {
 220   background: url("chrome://devtools/skin/images/vview-lock.svg") no-repeat;
 221   background-size: cover;
 222   width: 16px;
 223   height: 16px;
 224   -moz-context-properties: fill;
 225   fill: var(--theme-icon-dimmed-color);
 226 }
 227
 228 .variable-or-property-frozen-label,
 229 .variable-or-property-sealed-label,
 230 .variable-or-property-non-extensible-label {
 231   height: 16px;
 232   padding-inline-end: 4px;
 233 }
 234
 235 .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
 236 .variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
 237 .variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
 238   color: #666;
 239 }
 240
 241 /* Aligned values */
 242
 243 .variables-view-container[aligned-values] .title > .separator {
 244   flex: 1;
 245 }
 246
 247 .variables-view-container[aligned-values] .title > .value {
 248   flex: none;
 249   width: 70vw;
 250 }
 251
 252 .variables-view-container[aligned-values] .title > .element-value-input {
 253   width: calc(70vw - 10px);
 254 }
 255
 256 /* Actions first */
 257
 258 .variables-view-open-inspector {
 259   order: 1;
 260 }
 261
 262 .variables-view-edit,
 263 .variables-view-add-property {
 264   order: 2;
 265 }
 266
 267 .variable-or-property-frozen-label,
 268 .variable-or-property-sealed-label,
 269 .variable-or-property-non-extensible-label,
 270 .variable-or-property-non-writable-icon {
 271   order: 3;
 272 }
 273
 274 .variables-view-delete {
 275   order: 4;
 276 }
 277
 278 .variables-view-container[actions-first] .variables-view-delete,
 279 .variables-view-container[actions-first] .variables-view-add-property,
 280 .variables-view-container[actions-first] .variables-view-open-inspector {
 281   order: 0;
 282 }
 283
 284 .variables-view-container[actions-first] [invisible] {
 285   visibility: hidden;
 286 }
 287
 288 /* Variables and properties tooltips */
 289
 290 .variable-or-property > tooltip > label {
 291   margin: 0 2px 0 2px;
 292 }
 293
 294 .variable-or-property[non-enumerable] > tooltip > label.enumerable,
 295 .variable-or-property[non-configurable] > tooltip > label.configurable,
 296 .variable-or-property[non-writable] > tooltip > label.writable,
 297 .variable-or-property[non-extensible] > tooltip > label.extensible {
 298   color: #800;
 299   text-decoration: line-through;
 300 }
 301
 302 .variable-or-property[overridden] > tooltip > label.overridden {
 303   padding-inline-start: 4px;
 304   border-inline-start: 1px dotted #000;
 305 }
 306
 307 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
 308   padding-inline-start: 4px;
 309   border-inline-start: 1px dotted #000;
 310   color: #080;
 311 }
 312
 313 /* Variables and properties editing */
 314 .variables-view-delete,
 315 .variables-view-edit,
 316 .variables-view-open-inspector {
 317   width: 16px;
 318   height: 16px;
 319   background-size: cover;
 320   background-repeat: no-repeat;
 321   cursor: pointer;
 322   -moz-context-properties: fill;
 323   fill: var(--theme-icon-dimmed-color);
 324 }
 325
 326 .variables-view-open-inspector {
 327   background-size: 15px;
 328 }
 329
 330 .variables-view-delete:hover,
 331 .variables-view-edit:hover,
 332 .variables-view-open-inspector:hover {
 333   fill: var(--theme-icon-color);
 334 }
 335
 336 .variables-view-delete:active,
 337 .variables-view-edit:active,
 338 .variables-view-open-inspector:active {
 339   fill: var(--theme-icon-checked-color);
 340 }
 341
 342 .variables-view-delete {
 343   background-image: url("chrome://devtools/skin/images/vview-delete.svg");
 344 }
 345
 346 .variables-view-edit {
 347   background-image: url("chrome://devtools/skin/images/vview-edit.svg");
 348 }
 349
 350 .variables-view-open-inspector {
 351   background-image: url("chrome://devtools/skin/images/open-inspector.svg");
 352 }
 353
 354 /* Variables and properties input boxes */
 355
 356 .variable-or-property > .title > .separator + .element-value-input {
 357   margin-inline-start: -2px !important;
 358   margin-inline-end: 2px !important;
 359 }
 360
 361 .variable-or-property > .title > .separator[hidden=true] + .element-value-input {
 362   margin-inline-start: 4px !important;
 363   margin-inline-end: 2px !important;
 364 }
 365
 366 .element-name-input {
 367   margin-inline-start: -2px !important;
 368   margin-inline-end: 2px !important;
 369   font-weight: 600;
 370 }
 371
 372 .element-value-input,
 373 .element-name-input {
 374   border: 1px solid rgba(128, 128, 128, .5) !important;
 375   border-radius: 0;
 376   color: inherit;
 377 }
 378
 379 /* Variables and properties searching */
 380
 381 .variable-or-property[unmatched] {
 382   border: none;
 383   margin: 0;
 384 }
 385
 386 /* Table Widget */
 387
 388 /* Table body */
 389
 390 .table-widget-body > .devtools-side-splitter {
 391   background-color: transparent;
 392 }
 393
 394 .table-widget-body {
 395   width: 100%;
 396   height: 100%;
 397   overflow: auto;
 398   contain: size;
 399   display: flex;
 400   align-items: start;
 401 }
 402
 403 .table-widget-body > splitter {
 404   align-self: stretch;
 405 }
 406
 407 .table-widget-body[empty="empty"] {
 408   display: none;
 409 }
 410
 411 /* Column Headers */
 412
 413 .table-widget-column-header,
 414 .table-widget-cell {
 415   display: block;
 416   border-inline-end: 1px solid var(--table-splitter-color) !important;
 417   line-height: unset !important;
 418 }
 419
 420 .table-widget-column:not([hidden]) {
 421   display: block;
 422 }
 423
 424 /* Table widget column header colors are taken from netmonitor.inc.css to match
 425    the look of both the tables. */
 426
 427 .table-widget-column-header {
 428   position: sticky;
 429   top: 0;
 430   width: 100%;
 431   margin: 0;
 432   padding: 5px 4px 0 !important;
 433   color: inherit;
 434   text-align: start;
 435   font-weight: inherit !important;
 436   border-image: linear-gradient(transparent 15%,
 437                                 var(--theme-splitter-color) 15%,
 438                                 var(--theme-splitter-color) 85%,
 439                                 transparent 85%,
 440                                 transparent calc(100% - 1px),
 441                                 var(--theme-splitter-color) calc(100% - 1px)) 1 1;
 442   background-repeat: no-repeat;
 443 }
 444
 445 .table-widget-column-header:not([sorted]):hover {
 446   background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1));
 447 }
 448
 449 .table-widget-column-header[sorted] {
 450   background-color: var(--theme-selection-background);
 451   color: var(--theme-selection-color);
 452   border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
 453   box-shadow: -0.5px -0.5px 0 0.5px var(--theme-splitter-color);
 454   background-position: right 6px center;
 455 }
 456
 457 .table-widget-column-header[sorted]:-moz-locale-dir(rtl) {
 458   background-position: 6px center;
 459 }
 460
 461 .table-widget-column-header[sorted=ascending] {
 462   background-image: url("chrome://devtools/skin/images/sort-ascending-arrow.svg");
 463 }
 464
 465 .table-widget-column-header[sorted=descending] {
 466   background-image: url("chrome://devtools/skin/images/sort-descending-arrow.svg");
 467 }
 468
 469 .theme-dark .table-widget-column[readonly] {
 470   background-color: rgba(255,255,255,0.1);
 471 }
 472
 473 .theme-light .table-widget-column[readonly] {
 474   background-color: rgba(0,0,0,0.1);
 475 }
 476
 477 .table-widget-body .devtools-side-splitter:last-of-type {
 478   display: none;
 479 }
 480
 481 /* Cells */
 482
 483 .table-widget-cell {
 484   width: 100%;
 485   padding: 3px 4px;
 486   min-width: 100px;
 487   -moz-user-focus: normal;
 488 }
 489
 490 .table-widget-cell[hidden] {
 491   display: none;
 492 }
 493
 494 .table-widget-cell.even:not(.theme-selected) {
 495   background-color: var(--table-zebra-background);
 496 }
 497
 498 :root:not(.no-animate) .table-widget-cell.flash-out {
 499   animation: flash-out 0.5s ease-in;
 500 }
 501
 502 @keyframes flash-out {
 503   to {
 504     background: var(--theme-contrast-background);
 505   }
 506 }
 507
 508 /* Empty text and initial text */
 509
 510 .table-widget-empty-text {
 511   display: none;
 512   font-size: large;
 513 }
 514
 515 .table-widget-body:empty + .table-widget-empty-text:not([value=""]),
 516 .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
 517   display: block;
 518 }
 519
 520 /* Tree Widget */
 521
 522 .tree-widget-container {
 523   padding: 0;
 524   margin: 0;
 525   width: 100%;
 526   list-style: none;
 527 }
 528
 529 .tree-widget-container:-moz-focusring,
 530 .tree-widget-container *:-moz-focusring {
 531   outline-style: none;
 532 }
 533
 534 .tree-widget-empty-text {
 535   padding: 10px 20px;
 536   font-size: medium;
 537   background: transparent;
 538   pointer-events: none;
 539 }
 540
 541 /* Tree Item */
 542
 543 .tree-widget-container .tree-widget-item {
 544   padding: 4px 0px;
 545   /* OSX has line-height 14px by default, which causes weird alignment issues
 546    * because of 20px high icons. thus making line-height consistent with that of
 547    * windows.
 548    */
 549   line-height: 16px;
 550   display: inline-block;
 551   width: 100%;
 552   word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
 553                            breaking in multiple lines */
 554 }
 555
 556 .tree-widget-container .tree-widget-children {
 557   margin: 0;
 558   padding: 0;
 559   list-style: none;
 560 }
 561
 562 .tree-widget-item[level="1"] {
 563   font-weight: 700;
 564 }
 565
 566 /* Twisties */
 567 .tree-widget-item::before {
 568   content: "";
 569   width: 16px;
 570   height: 16px;
 571   float: inline-start;
 572   margin: 0 1px;
 573   background-image: url("chrome://devtools/skin/images/arrow.svg");
 574   background-position: 50% 50%;
 575   background-repeat: no-repeat;
 576   background-size: 10px;
 577   -moz-context-properties: fill;
 578   fill: var(--theme-icon-dimmed-color);
 579   cursor: pointer;
 580   transition: transform 125ms ease;
 581   transform: rotate(-90deg);
 582 }
 583
 584 .tree-widget-item:-moz-locale-dir(rtl)::before {
 585   transform: rotate(90deg);
 586 }
 587
 588 .tree-widget-item[empty]::before {
 589   background: transparent;
 590 }
 591
 592 .tree-widget-item[expanded]::before {
 593   transform: none;
 594 }
 595
 596 .tree-widget-item.theme-selected::before {
 597   fill: currentColor;
 598 }
 599
 600 .tree-widget-item + ul {
 601   overflow: hidden;
 602   animation: collapse-tree-item 0.2s;
 603   max-height: 0;
 604 }
 605
 606 .tree-widget-item[expanded] + ul {
 607   animation: expand-tree-item 0.3s;
 608   max-height: unset;
 609 }
 610
 611 @keyframes collapse-tree-item {
 612   from {
 613     max-height: 300px;
 614   }
 615   to {
 616     max-height: 0;
 617   }
 618 }
 619
 620 @keyframes expand-tree-item {
 621   from {
 622     max-height: 0;
 623   }
 624   to {
 625     max-height: 500px;
 626   }
 627 }
 628
 629 /* Indentation of child items in the tree */
 630
 631 /* For level > 6 */
 632 .tree-widget-item[level] + ul > li > .tree-widget-item {
 633   padding-inline-start: 98px;
 634 }
 635
 636 /* First level */
 637 .tree-widget-item[level="1"] + ul > li > .tree-widget-item {
 638   padding-inline-start: 14px;
 639 }
 640
 641 /* Second level */
 642 .tree-widget-item[level="2"] + ul > li > .tree-widget-item {
 643   padding-inline-start: 28px;
 644 }
 645
 646 /* Third level */
 647 .tree-widget-item[level="3"] + ul > li > .tree-widget-item {
 648   padding-inline-start: 42px;
 649 }
 650
 651 /* Fourth level */
 652 .tree-widget-item[level="4"] + ul > li > .tree-widget-item {
 653   padding-inline-start: 56px;
 654 }
 655
 656 /* Fifth level */
 657 .tree-widget-item[level="5"] + ul > li > .tree-widget-item {
 658   padding-inline-start: 70px;
 659 }
 660
 661 /* Sixth level */
 662 .tree-widget-item[level="6"] + ul > li > .tree-widget-item {
 663   padding-inline-start: 84px;
 664 }
 665
 666 /* Custom icons for certain tree items indicating the type of the item */
 667
 668 .tree-widget-item[type]::after {
 669   content: "";
 670   float: inline-start;
 671   width: 16px;
 672   height: 16px;
 673   margin-inline-end: 4px;
 674   background-repeat: no-repeat;
 675   background-size: contain;
 676   -moz-context-properties: fill;
 677   fill: currentColor;
 678 }
 679
 680 .tree-widget-item[type="dir"]::after {
 681   background-image: url(chrome://devtools/skin/images/folder.svg);
 682 }
 683
 684 .tree-widget-item[type="url"]::after {
 685   background-image: url(chrome://devtools/skin/images/globe.svg);
 686 }
 687
 688 .tree-widget-item[type="store"]::after {
 689   background-image: url(chrome://devtools/skin/images/datastore.svg);
 690 }