LCARStrek/browser/devtools/debugger.css

   1 /* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
   2 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
   3 /* This Source Code Form is subject to the terms of the Mozilla Public
   4  * License, v. 2.0. If a copy of the MPL was not distributed with this
   5  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   6
   7 window {
   8   padding: 0;
   9 }
  10
  11 #body {
  12   background-color: #000000;
  13 }
  14
  15 /**
  16  * Debugger content
  17  */
  18
  19 #chrome-globals, #sources {
  20   min-width: 150px;
  21 }
  22
  23 /**
  24  * This hardcoded width likely due to a toolkit Windows specific bug.
  25  * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
  26  */
  27 #searchbox {
  28   width: 200px;
  29 }
  30
  31 /**
  32  * Lists and headers
  33  */
  34
  35 .list-item {
  36   padding: 2px;
  37 }
  38
  39 .list-item:not(.selected):not(.empty):hover {
  40   /* background: #cddae5; */
  41 }
  42
  43 .list-item.selected {
  44   background: #008484;
  45   color: #FFCF00;
  46 }
  47
  48 .list-item.empty {
  49   color: #8050B0;
  50   /* padding: 4px; */
  51 }
  52
  53 /**
  54  * Sources searching
  55  */
  56
  57 #globalsearch {
  58   background-color: #000000;
  59   max-height: 150px;
  60 }
  61
  62 .dbg-source-results:not(:last-child) {
  63   border-bottom: 1px dotted #9C9CFF;
  64 }
  65
  66 .dbg-results-header {
  67   -moz-padding-start: 6px;
  68 }
  69
  70 .dbg-results-header .location {
  71   font-weight: 600;
  72 }
  73
  74 .dbg-results-header .match-count {
  75   -moz-padding-start: 6px;
  76   color: #8050B0;
  77 }
  78
  79 .dbg-results-container .line-number {
  80   background: #000000;
  81   min-width: 40px;
  82   -moz-padding-end: 4px;
  83   -moz-border-end: 1px dotted #9C9CFF;
  84   text-align: end;
  85   font: 8pt monospace;
  86   color: #FF9F00;
  87 }
  88
  89 .dbg-results-container .line-contents {
  90   -moz-padding-start: 4px;
  91   font: 8pt monospace;
  92 }
  93
  94 .dbg-results-container .line-contents:hover {
  95   background: #000000;
  96 }
  97
  98 .dbg-results-container .line-contents > .string {
  99   padding: 1px;
 100 }
 101
 102 .dbg-results-container .line-contents > .string[match=true] {
 103   background: #E7ADE7;
 104   color: #000000;
 105   padding: 0;
 106   border: 1px solid #9C9CFF;
 107   border-radius: 4px;
 108   cursor: pointer;
 109   transition: transform 0.25s ease-in-out;
 110 }
 111
 112 .dbg-results-container .line-contents > .string[match=true][focused] {
 113   transition-duration: 0.1s;
 114   transform: scale(1.75, 1.75);
 115 }
 116
 117 #searchbox-panel .description {
 118   margin: -6px 0 8px;
 119 }
 120
 121 #searchbox-panel button.operator {
 122   min-width: 0;
 123   margin: 0;
 124   padding: 0;
 125   font: 9pt "Liberation Mono", Consolas, "Courier New", monospace;
 126 }
 127
 128 #searchbox-panel label.operator {
 129   -moz-padding-start: 6px;
 130   padding-bottom: 1px;
 131 }
 132
 133 /**
 134  * Stack frames and breakpoints pane
 135  */
 136
 137 #stackframes\+breakpoints {
 138   background-color: #000000;
 139   min-width: 50px;
 140 }
 141
 142 #stackframes\+breakpoints[animated] {
 143   transition: margin 0.25s ease-in-out;
 144 }
 145
 146 /**
 147  * Variables and watch expressions pane
 148  */
 149
 150 #variables\+expressions {
 151   background-color: #000000;
 152   min-width: 50px;
 153 }
 154
 155 #variables\+expressions[animated] {
 156   transition: margin 0.25s ease-in-out;
 157 }
 158
 159 /**
 160  * Stack frames view
 161  */
 162
 163 #stackframes {
 164   /* background-color: white; */
 165   min-height: 10px;
 166 }
 167
 168 .dbg-stackframe {
 169   -moz-padding-start: 4px;
 170   -moz-padding-end: 4px;
 171 }
 172
 173 .dbg-stackframe-name {
 174   font-weight: 600;
 175 }
 176
 177 .dbg-stackframe-details {
 178   -moz-padding-start: 4px;
 179 }
 180
 181 /**
 182  * Breakpoints view
 183  */
 184
 185 #breakpoints {
 186   background-color: #000000;
 187   min-height: 10px;
 188 }
 189
 190 #breakpoints > vbox:not(:empty) {
 191   min-height: 10px;
 192   max-height: 200px;
 193 }
 194
 195 .dbg-breakpoint:not(:last-child) {
 196   border-bottom: 1px solid #008484;
 197 }
 198
 199 .dbg-breakpoint-info {
 200   font-weight: 600;
 201 }
 202
 203 .dbg-breakpoint-text {
 204   font: 12px "Liberation Mono", Consolas, "Courier New", monospace;
 205 }
 206
 207 #conditional-breakpoint-panel .description {
 208   margin: -6px 0 8px 0;
 209 }
 210
 211 #conditional-breakpoint-panel textbox {
 212   margin: 0 0 -2px 0;
 213 }
 214
 215 /**
 216  * Watch expressions view
 217  */
 218
 219 #expressions {
 220   background-color: #000000;
 221   min-height: 10px;
 222 }
 223
 224 .dbg-expression {
 225   height: 20px;
 226   -moz-padding-start: 8px;
 227 }
 228
 229 .dbg-expression-arrow {
 230   width: 10px;
 231   height: auto;
 232   background: url("chrome://browser/skin/devtools/commandline.png") 0px 4px no-repeat;
 233 }
 234
 235 .dbg-expression-input {
 236   font: 9pt monospace;
 237 }
 238
 239 .dbg-expression-delete {
 240   -moz-image-region: rect(0, 32px, 16px, 16px);
 241 }
 242
 243 /**
 244  * Variables view
 245  */
 246
 247 #variables {
 248 /*  background-color: white; */
 249   min-height: 10px;
 250 }
 251
 252 .dbg-variables-delete:not(:hover) {
 253   -moz-image-region: rect(0, 32px, 16px, 16px);
 254   opacity: 0.5;
 255 }
 256
 257 /**
 258  * Scope element
 259  */
 260
 261 .scope > .title {
 262   background: #E7ADE7;
 263   border-radius: 5px;
 264   color: #000000;
 265 }
 266
 267 .scope > .details {
 268   -moz-margin-start: 2px;
 269   -moz-margin-end: 2px;
 270 }
 271
 272 .scope > .details.nonenum:not(:empty) {
 273   border-top: 1px solid #9C9CFF;
 274 }
 275
 276 /**
 277  * Variable element
 278  */
 279
 280 .variable {
 281   -moz-margin-start: 1px;
 282   -moz-margin-end: 1px;
 283   border-bottom: 1px solid #008484;
 284   background: #000000;
 285   transition: background 1s ease-in-out;
 286 }
 287
 288 .variable[changed] {
 289   background: #FFCF00;
 290   transition-duration: 0.4s;
 291 }
 292
 293 .variable > .title > .name {
 294   color: #FF9F00;
 295   font-weight: 600;
 296 }
 297
 298 .variable > .title > .value {
 299   -moz-padding-start: 6px;
 300   -moz-padding-end: 4px;
 301 }
 302
 303 .variable:not([non-header]) > .details {
 304   -moz-margin-start: 10px;
 305 }
 306
 307 /**
 308  * Property element
 309  */
 310
 311 .property {
 312   transition: background 1s ease-in-out;
 313   background: #000000;
 314   border-radius: 8px;
 315 }
 316
 317 .property[changed] {
 318   transition-duration: 0.4s;
 319   background: rgba(255, 207, 0, 0.8);
 320 }
 321
 322 .property > .title > .name {
 323   color: #E7ADE7;
 324 }
 325
 326 .property > .title > .value {
 327   -moz-padding-start: 6px;
 328   -moz-padding-end: 4px;
 329 }
 330
 331 .property:not([non-header]) > .details {
 332   -moz-margin-start: 10px;
 333 }
 334
 335 /**
 336  * Non enumerable, configurable and writable variables and properties.
 337  */
 338
 339 .variable[proto] > .title > .name,
 340 .property[proto] > .title > .name,
 341 .variable[non-enumerable]:not([self]):not([exception]) > .title > .name,
 342 .property[non-enumerable]:not([self]):not([exception]) > .title > .name {
 343   opacity: 0.5;
 344 }
 345
 346 .variable[non-configurable] > .title > .name,
 347 .property[non-configurable] > .title > .name {
 348   border-bottom: 1px dashed #9C9CFF;
 349 }
 350
 351 .variable[non-configurable][non-writable] > .title > .name,
 352 .property[non-configurable][non-writable] > .title > .name {
 353   border-bottom: 1px dashed #FF0000;
 354 }
 355
 356 .variable[non-writable] > .title:after,
 357 .property[non-writable] > .title:after {
 358   content: " ";
 359   display: inline-block;
 360   width: 16px;
 361   height: 16px;
 362   background: url("chrome://browser/skin/identity-icons-https.png") no-repeat;
 363   opacity: 0.5;
 364 }
 365
 366 /*
 367 @media (min-resolution: 2dppx) {
 368   .variable[non-writable] > .title:after,
 369   .property[non-writable] > .title:after {
 370     background-image: url("chrome://browser/skin/identity-icons-https@2x.png");
 371     background-size: 32px;
 372   }
 373 }
 374 */
 375
 376 .variable[exception] > .title > .name,
 377 .property[exception] > .title > .name {
 378   color: #FF0000;
 379 }
 380
 381 .variable > tooltip > label,
 382 .property > tooltip > label {
 383   margin: 0 2px 0 2px;
 384 }
 385
 386 .variable[non-enumerable] > tooltip > label[value="enumerable"],
 387 .property[non-enumerable] > tooltip > label[value="enumerable"],
 388 .variable[non-configurable] > tooltip > label[value="configurable"],
 389 .property[non-configurable] > tooltip > label[value="configurable"],
 390 .variable[non-writable] > tooltip > label[value="writable"],
 391 .property[non-writable] > tooltip > label[value="writable"] {
 392   text-decoration: line-through;
 393 }
 394
 395 /**
 396  * Variables and properties editing
 397  */
 398
 399 #variables .element-value-input {
 400   -moz-margin-start: 5px !important;
 401 }
 402
 403 #variables .element-name-input {
 404   -moz-margin-start: -1px !important;
 405   color: #E7ADE7;
 406   font-weight: 600;
 407 }
 408
 409 /**
 410  * Variables and properties searching
 411  */
 412
 413 #variables .devtools-searchinput {
 414   min-height: 24px;
 415 }
 416
 417 .variable[non-match],
 418 .property[non-match] {
 419   border: none;
 420   margin: 0;
 421 }
 422
 423 /**
 424  * Token value colors
 425  */
 426
 427 .token-undefined {
 428   color: #8050B0;
 429 }
 430
 431 .token-null {
 432   color: #008484;
 433 }
 434
 435 .token-boolean {
 436   color: #FFCF00;
 437 }
 438
 439 .token-number {
 440   color: #E7ADE7;
 441 }
 442
 443 .token-string {
 444   color: #9C9CFF;
 445 }
 446
 447 .token-other {
 448   color: #FF9F00;
 449 }
 450
 451 /**
 452  * Expand/collapse arrow
 453  */
 454
 455 .arrow {
 456   width: 9px;
 457   height: 9px;
 458   -moz-margin-start: 5px;
 459   -moz-margin-end: 5px;
 460   margin-top: -2px;
 461   background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat;
 462 }
 463
 464 .arrow[open] {
 465   background-image: url("chrome://global/skin/tree/twisty-open.gif");
 466 }
 467
 468 .scope > .title > .arrow {
 469   background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif");
 470 }
 471
 472 .scope > .title > .arrow[open] {
 473   background-image: url("chrome://global/skin/tree/twisty-open-selected.gif");
 474 }
 475
 476 .arrow[invisible] {
 477   visibility: hidden;
 478 }
 479
 480 /**
 481  * Toolbar Controls
 482  */
 483
 484 #toggle-panes {
 485   list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
 486   -moz-image-region: rect(0px, 16px, 16px, 0px);
 487 }
 488
 489 #toggle-panes:not([panesHidden]) {
 490   list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
 491 }
 492
 493 #toggle-panes:hover,
 494 #toggle-panes:hover:active {
 495   -moz-image-region: rect(0px, 32px, 16px, 16px);
 496 }
 497
 498 #resume {
 499   list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
 500   -moz-image-region: rect(0px, 16px, 16px, 0px);
 501 }
 502
 503 #resume[checked=true],
 504 #resume:hover {
 505   -moz-image-region: rect(0px, 32px, 16px, 16px);
 506 }
 507
 508 #step-over {
 509   list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
 510   -moz-image-region: rect(0px, 16px, 16px, 0px);
 511 }
 512 #step-over:hover {
 513   -moz-image-region: rect(0px, 32px, 16px, 16px);
 514 }
 515
 516 #step-in {
 517   list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
 518   -moz-image-region: rect(0px, 16px, 16px, 0px);
 519 }
 520 #step-in:hover {
 521   -moz-image-region: rect(0px, 32px, 16px, 16px);
 522 }
 523
 524 #step-out {
 525   list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
 526   -moz-image-region: rect(0px, 16px, 16px, 0px);
 527 }
 528 #step-out:hover {
 529   -moz-image-region: rect(0px, 32px, 16px, 16px);
 530 }
 531
 532 #debugger-controls > toolbarbutton {
 533 }
 534
 535 #debugger-controls > toolbarbutton:last-of-type {
 536 }
 537
 538 #debugger-controls {
 539 }