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