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