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