LCARStrek/browser/devtools/debugger.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 window {
   6   padding: 0;
   7 }
   8
   9 /* Sources and breakpoints pane */
  10
  11 #sources-pane > tabs {
  12   -moz-border-end: 1px solid #9C9CFF; /* Match the sources list's dark margin. */
  13 }
  14
  15 #sources-pane[selectedIndex="0"] + #sources-and-editor-splitter {
  16   border-color: transparent;
  17 }
  18
  19 #sources-toolbar > .devtools-toolbarbutton,
  20 #sources-controls > .devtools-toolbarbutton {
  21   min-width: 32px;
  22 }
  23
  24 #black-box {
  25   list-style-image: url("debugger-blackbox.png");
  26 }
  27
  28 #pretty-print {
  29   font-weight: bold;
  30 }
  31
  32 #toggle-breakpoints {
  33   list-style-image: url("debugger-toggleBreakpoints.png");
  34 }
  35
  36 #sources-toolbar .devtools-toolbarbutton:not([label]) {
  37   -moz-image-region: rect(0px, 16px, 16px, 0px);
  38 }
  39
  40 #sources-toolbar .devtools-toolbarbutton:not([label]):hover {
  41   -moz-image-region: rect(16px, 16px, 32px, 0px);
  42 }
  43
  44 #sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
  45   -moz-image-region: rect(0px, 32px, 16px, 16px);
  46 }
  47
  48 #sources-toolbar .devtools-toolbarbutton:not([label])[checked]:hover {
  49   -moz-image-region: rect(16px, 32px, 32px, 16px);
  50 }
  51
  52 #sources .black-boxed {
  53   color: #8050B0;
  54 }
  55
  56 #sources .black-boxed > .dbg-breakpoint {
  57   display: none;
  58 }
  59
  60 #sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
  61   background-image: none;
  62 /*  box-shadow: inset -1px 0 0 #222426; */
  63 }
  64
  65 #sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
  66   background-image: none;
  67 /*  box-shadow: inset 1px 0 0 #222426; */
  68 }
  69
  70 /* Black box message and source progress meter */
  71
  72 #black-boxed-message,
  73 #source-progress-container {
  74   background-color: #A09090;
  75   /* Prevent the container deck from aquiring the size from this message. */
  76   min-width: 1px;
  77   min-height: 1px;
  78   color: #000000;
  79 }
  80
  81 #source-progress {
  82   min-height: 2em;
  83   min-width: 40em;
  84 }
  85
  86 #black-boxed-message-label,
  87 #black-boxed-message-button {
  88   text-align: center;
  89   font-size: 120%;
  90 }
  91
  92 #black-boxed-message-button {
  93   margin-top: 1em;
  94   padding: .25em;
  95 }
  96
  97 /* Tracer */
  98
  99 #trace {
 100   list-style-image: url("tracer-icon.png");
 101   -moz-image-region: rect(0px,16px,16px,0px);
 102 }
 103
 104 #trace:hover,
 105 #trace[checked] {
 106   -moz-image-region: rect(0px,32px,16px,16px);
 107 }
 108
 109 #start-tracing {
 110   padding: 4px;
 111   margin: 4px;
 112 }
 113
 114 #clear-tracer {
 115   /* Make this button as narrow as the text inside it. */
 116   min-width: 1px;
 117 }
 118
 119 #tracer-message {
 120   /* Prevent the container deck from aquiring the height from this message. */
 121   min-height: 1px;
 122 }
 123
 124 .trace-name {
 125   -moz-padding-start: 4px !important;
 126 }
 127
 128 #tracer-traces > scrollbox {
 129   overflow: scroll;
 130   /* Hack to enable hardware acceleration */
 131   transform: translateZ(0);
 132 }
 133
 134 /* Tracer dark+light theme */
 135
 136 #tracer-message {
 137   color: #FF9F00; /* Light foreground text */
 138 }
 139
 140 .trace-item {
 141   color: #FF9F00; /* Light foreground text */
 142 }
 143
 144 .trace-item.selected-matching {
 145   background-color: #004242; /* Select highlight blue at 40% alpha */
 146 }
 147
 148 .selected > .trace-item {
 149   background-color: #004242; /* Select highlight blue at 75% alpha */
 150 }
 151
 152 .trace-call {
 153   color: #9C9CFF; /* highlight blue */
 154 }
 155
 156 .trace-return,
 157 .trace-yield {
 158   color: #008484; /* highlight green */
 159 }
 160
 161 .trace-throw {
 162   color: #FF0000; /* highlight red */
 163 }
 164
 165 .trace-param {
 166   color: #E7ADE7; /* Content text light  */
 167 }
 168
 169 .trace-syntax {
 170   color: #A09090; /* highlight grey */
 171 }
 172
 173 /* ListWidget items */
 174
 175 .list-widget-item {
 176   padding: 2px;
 177 }
 178
 179 /* .theme-light / .theme-dark */
 180 .list-widget-item:not(.selected):not(.empty):hover {
 181 /*  background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.85)), Highlight;*/
 182 }
 183
 184 /* .theme-light / .theme-dark */
 185 .list-widget-item.selected.light {
 186 /*  background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.8)), Highlight;
 187   color: #000;*/
 188 }
 189
 190 .list-widget-item.selected {
 191   background: #008484;
 192   color: #FFCF00;
 193 }
 194
 195 .list-widget-item.empty {
 196   color: #8050B0;
 197   /* padding: 4px; */
 198 }
 199
 200 /* Breadcrumbs stack frames view */
 201
 202 .breadcrumbs-widget-item {
 203   max-width: none;
 204 }
 205
 206 #stackframes {
 207   min-height: 25px;
 208 }
 209
 210 .dbg-stackframe-details {
 211   -moz-padding-start: 4px;
 212 }
 213
 214 /* Classic stack frames view */
 215
 216 .dbg-classic-stackframe {
 217   display: block;
 218   padding: 4px;
 219 }
 220
 221 .dbg-classic-stackframe-title {
 222   font-weight: 600;
 223   color: #9C9CFF;
 224 }
 225
 226 .dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
 227   float: right;
 228 }
 229
 230 .dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
 231   float: left;
 232 }
 233
 234 .dbg-classic-stackframe-details-url {
 235   max-width: 90%;
 236   text-align: end;
 237   color: #3333FF;
 238 }
 239
 240 .dbg-classic-stackframe-details-sep {
 241   color: #A09090;
 242 }
 243
 244 .dbg-classic-stackframe-details-line {
 245   color: #9C9CFF;
 246 }
 247
 248 #callstack-list .side-menu-widget-item.selected label {
 249   color: #FFCF00;
 250 }
 251
 252 /* Sources and breakpoints view */
 253
 254 .dbg-breakpoint {
 255   -moz-margin-start: 4px;
 256 }
 257
 258 .dbg-breakpoint-line {
 259   font-weight: 600;
 260 }
 261
 262 .dbg-breakpoint-text {
 263   -moz-margin-start: 10px !important;
 264   font-style: italic;
 265   font-size: 90%;
 266 }
 267
 268 .dbg-breakpoint-checkbox {
 269   width: 16px;
 270   height: 16px;
 271   margin: 2px;
 272 }
 273
 274 /* Variable bubble view */
 275
 276 .devtools-tooltip-simple-text.token-undefined,
 277 .devtools-tooltip-simple-text.token-null {
 278   text-align: center;
 279   color: #A09090 !important; /* Override the theme's color. */
 280 }
 281
 282 .devtools-tooltip-simple-text.token-boolean {
 283   text-align: center;
 284   color: #9C9CFF !important;
 285 }
 286
 287 .devtools-tooltip-simple-text.token-number {
 288   text-align: center;
 289   color: #E7ADE7 !important;
 290 }
 291
 292 .devtools-tooltip-simple-text.token-string {
 293   text-align: start;
 294   color: #008484 !important;
 295 }
 296
 297 .devtools-tooltip-simple-text.token-other {
 298   text-align: center;
 299   color: #FF9F00 !important;
 300 }
 301
 302 /* Instruments pane (watch expressions, variables, event listeners...) */
 303
 304 #instruments-pane .side-menu-widget-container,
 305 #instruments-pane .side-menu-widget-empty-notice-container {
 306 /*  box-shadow: none !important; */
 307 }
 308
 309 /* Watch expressions view */
 310
 311 #expressions {
 312   min-height: 10px;
 313   max-height: 125px;
 314 }
 315
 316 .dbg-expression {
 317   height: 20px;
 318 }
 319
 320 .dbg-expression-arrow {
 321   width: 16px;
 322   height: auto;
 323   background: -moz-image-rect(url("commandline-icon.png"), 0, 32, 16, 16);
 324 }
 325
 326 .dbg-expression-input {
 327   -moz-padding-start: 2px !important;
 328   color: inherit;
 329 }
 330
 331 /* Event listeners view */
 332
 333 .dbg-event-listener {
 334   padding: 4px 8px;
 335 }
 336
 337 .dbg-event-listener-type {
 338   font-weight: 600;
 339 }
 340
 341 .dbg-event-listener-separator {
 342   color: #A09090;
 343 }
 344
 345 .dbg-event-listener-targets {
 346   color: #9C9CFF;
 347 }
 348
 349 .dbg-event-listener-location {
 350   color: #E7ADE7;
 351 }
 352
 353 #event-listeners .side-menu-widget-item.selected {
 354   background: none !important;
 355 }
 356
 357 /* Searchbox and the search operations help panel */
 358
 359 #searchbox {
 360   min-width: 220px;
 361   -moz-margin-start: 1px;
 362 }
 363
 364 #filter-label {
 365   -moz-margin-start: 2px;
 366 }
 367
 368 #searchbox-panel-operators {
 369   margin-top: 5px;
 370   margin-bottom: 8px;
 371   -moz-margin-start: 2px;
 372 }
 373
 374 .searchbox-panel-operator-button {
 375   min-width: 26px;
 376   margin-top: 0;
 377   margin-bottom: 0;
 378   -moz-margin-start: 2px;
 379   -moz-margin-end: 6px;
 380   text-align: center;
 381 }
 382
 383 .searchbox-panel-operator-label {
 384   padding-bottom: 2px;
 385 }
 386
 387 /* Searchbox results panel */
 388
 389 .results-panel {
 390   padding: 4px;
 391 }
 392
 393 .results-panel-item {
 394   border: 1px solid #A09090;
 395   border-top-color: #8050B0;
 396   padding: 5px;
 397   cursor: pointer;
 398 }
 399
 400 .results-panel-item:first-of-type {
 401   border-top-color: #9C9CFF;
 402   border-radius: 4px 4px 0 0;
 403 }
 404
 405 .results-panel-item:last-of-type {
 406   border-radius: 0 0 4px 4px;
 407 }
 408
 409 .results-panel-item:only-of-type {
 410   border-radius: 4px;
 411 }
 412
 413 .results-panel-item:not(.selected):not(:hover) {
 414 /*  text-shadow: 0 1px #fff;*/
 415 }
 416
 417 .results-panel-item-pre {
 418   -moz-margin-end: 5px !important;
 419   color: #A09090;
 420   cursor: inherit;
 421 }
 422
 423 .results-panel-item-name {
 424   color: #9C9CFF;
 425   font-weight: 600;
 426   cursor: inherit;
 427 }
 428
 429 .results-panel-item-details {
 430   color: #FF9F00;
 431   cursor: inherit;
 432 }
 433
 434 /* Sources search view */
 435
 436 #globalsearch {
 437   min-height: 10px;
 438 }
 439
 440 #globalsearch > vbox:not(:empty) {
 441   min-height: 10px;
 442   max-height: 125px;
 443 }
 444
 445 #globalsearch + .devtools-horizontal-splitter {
 446   -moz-border-top-colors: #9C9CFF;
 447 }
 448
 449 .dbg-source-results {
 450   padding: 0;
 451   background: none !important;
 452 }
 453
 454 .dbg-results-header {
 455   -moz-padding-start: 6px;
 456 }
 457
 458 .dbg-results-header-location {
 459   font-weight: 600;
 460 }
 461
 462 .dbg-results-header-match-count {
 463   -moz-padding-start: 6px;
 464   color: #8050B0;
 465 }
 466
 467 .dbg-results-line-number {
 468   background: #000000;
 469   min-width: 40px;
 470   -moz-border-end: 1px solid #9C9CFF;
 471   -moz-padding-end: 4px;
 472   padding-top: 2px;
 473   text-align: end;
 474   color: #FF9F00;
 475 }
 476
 477 .dbg-results-line-contents {
 478   -moz-padding-start: 4px;
 479   padding-top: 1px;
 480   padding-bottom: 1px;
 481 }
 482
 483 .dbg-results-line-contents-string {
 484   padding: 1px;
 485 }
 486
 487 .dbg-results-line-contents-string[match=true] {
 488   background: #E7ADE7;
 489   color: #000000;
 490   padding: 0;
 491   border: 1px solid #9C9CFF;
 492   border-radius: 4px;
 493   cursor: pointer;
 494 }
 495
 496 .dbg-results-line-contents-string[match=true][focusing] {
 497   transition: transform 0.3s ease-in-out;
 498 }
 499
 500 .dbg-results-line-contents-string[match=true][focused] {
 501   transition-duration: 0.1s;
 502   transform: scale(1.75, 1.75);
 503 }
 504
 505 /* Toolbar controls */
 506
 507 .devtools-sidebar-tabs > tabs > tab {
 508 /*  min-height: 25px !important;
 509   padding: 0 !important; */
 510 }
 511
 512 #toggle-panes {
 513   list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
 514   -moz-image-region: rect(0px, 16px, 16px, 0px);
 515 }
 516
 517 #toggle-panes:not([panesHidden]) {
 518   list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
 519 }
 520
 521 #toggle-panes:hover,
 522 #toggle-panes:hover:active {
 523   -moz-image-region: rect(0px, 32px, 16px, 16px);
 524 }
 525
 526 #resumption-panel-desc {
 527   width: 200px;
 528 }
 529
 530 #resumption-order-panel {
 531   -moz-margin-start: -8px;
 532 }
 533
 534 #resume {
 535   list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
 536   -moz-image-region: rect(0px, 16px, 16px, 0px);
 537 /*  transition: background 0.15s ease-in-out; */
 538 }
 539
 540 #resume:hover {
 541   -moz-image-region: rect(0px, 32px, 16px, 16px);
 542 }
 543
 544 #resume[checked=true] {
 545 /*  background: none; */
 546   list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
 547   -moz-image-region: rect(0px, 16px, 16px, 0px);
 548 }
 549
 550 #resume[checked=true]:hover {
 551   -moz-image-region: rect(0px, 32px, 16px, 16px);
 552 }
 553
 554 #resume ~ toolbarbutton {
 555 /*  transition: opacity 0.15s ease-in-out; */
 556 }
 557
 558 #resume:not([checked]) ~ toolbarbutton {
 559 /*  opacity: 0.5; */
 560 }
 561
 562 #step-over {
 563   list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
 564   -moz-image-region: rect(0px, 16px, 16px, 0px);
 565 }
 566 #step-over:hover {
 567   -moz-image-region: rect(0px, 32px, 16px, 16px);
 568 }
 569
 570 #step-in {
 571   list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
 572   -moz-image-region: rect(0px, 16px, 16px, 0px);
 573 }
 574 #step-in:hover {
 575   -moz-image-region: rect(0px, 32px, 16px, 16px);
 576 }
 577
 578 #step-out {
 579   list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
 580   -moz-image-region: rect(0px, 16px, 16px, 0px);
 581 }
 582 #step-out:hover {
 583   -moz-image-region: rect(0px, 32px, 16px, 16px);
 584 }
 585
 586 #debugger-controls > toolbarbutton,
 587 #sources-controls > toolbarbutton {
 588 }
 589
 590 #debugger-controls > toolbarbutton:last-of-type,
 591 #sources-controls > toolbarbutton:last-of-type {
 592 }
 593
 594 #debugger-controls,
 595 #sources-controls {
 596 }
 597
 598 #instruments-pane-toggle {
 599 /*  background: none;
 600   box-shadow: none;
 601   border: none; */
 602   list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
 603   -moz-image-region: rect(0px,16px,16px,0px);
 604 }
 605
 606 #instruments-pane-toggle[pane-collapsed] {
 607   list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
 608 }
 609
 610 #instruments-pane-toggle:hover,
 611 #instruments-pane-toggle:hover:active {
 612   -moz-image-region: rect(0px,32px,16px,16px);
 613 }
 614
 615 /* Horizontal vs. vertical layout */
 616
 617 #vertical-layout-panes-container {
 618   min-height: 35vh;
 619   max-height: 80vh;
 620 }
 621
 622 #body[layout=vertical] #instruments-pane {
 623   margin: 0 !important;
 624   /* To prevent all the margin hacks to hide the sidebar. */
 625 }
 626
 627 #body[layout=vertical] #sources-pane > tabs {
 628   -moz-border-end: none;
 629 }
 630
 631 #body[layout=vertical] .side-menu-widget-container,
 632 #body[layout=vertical] .side-menu-widget-empty-notice-container {
 633   box-shadow: none !important;
 634 }
 635
 636 #body[layout=vertical] .side-menu-widget-item-arrow {
 637   background-image: none !important;
 638 }