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  * Stack frames view
 148  */
 149
 150 #stackframes {
 151   /* background-color: white; */
 152 }
 153
 154 .dbg-stackframe {
 155   -moz-padding-start: 4px;
 156   -moz-padding-end: 4px;
 157 }
 158
 159 .dbg-stackframe-name {
 160   -moz-padding-end: 4px;
 161   font-weight: 600;
 162 }
 163
 164 /**
 165  * Breakpoints view
 166  */
 167
 168 #breakpoints {
 169   background-color: #000000;
 170 }
 171
 172 .dbg-breakpoint-info {
 173   font-weight: 600;
 174 }
 175
 176 .dbg-breakpoint-text {
 177   font: 12px "Liberation Mono", Consolas, "Courier New", monospace;
 178 }
 179
 180 /**
 181  * Variables view
 182  */
 183
 184 #variables {
 185 /*  background-color: white; */
 186   min-width: 50px;
 187 }
 188
 189 #variables[animated] {
 190   transition: margin 0.25s ease-in-out;
 191 }
 192
 193 /**
 194  * Scope element
 195  */
 196
 197 .scope > .title {
 198   background: #E7ADE7;
 199   border-radius: 5px;
 200   color: #000000;
 201 }
 202
 203 .scope > .details {
 204   -moz-margin-start: 2px;
 205   -moz-margin-end: 2px;
 206 }
 207
 208 .scope > .details.nonenum:not(:empty) {
 209   border-top: 1px solid #9C9CFF;
 210 }
 211
 212 /**
 213  * Variable element
 214  */
 215
 216 .variable {
 217   -moz-margin-start: 1px;
 218   -moz-margin-end: 1px;
 219   transition: background 1s ease-in-out;
 220   background: #000000;
 221 }
 222
 223 .variable:not(:last-child) {
 224   border-bottom: 1px dotted #008484;
 225   border-radius: 8px;
 226 }
 227
 228 .variable:last-child {
 229   margin-bottom: 2px;
 230 }
 231
 232 .variable[changed] {
 233   transition-duration: 0.4s;
 234   background: #FFCF00;
 235 }
 236
 237 .variable > .title > .name {
 238   color: #FF9F00;
 239   font-weight: 600;
 240 }
 241
 242 .variable > .title > .value {
 243   -moz-padding-start: 6px;
 244 }
 245
 246 .variable:not([non-header]) > .details {
 247   -moz-margin-start: 10px;
 248 }
 249
 250 /**
 251  * Property element
 252  */
 253
 254 .property {
 255   transition: background 1s ease-in-out;
 256   background: #000000;
 257   border-radius: 8px;
 258 }
 259
 260 .property[changed] {
 261   transition-duration: 0.4s;
 262   background: rgba(255, 207, 0, 0.8);
 263 }
 264
 265 .property > .title > .name {
 266   color: #E7ADE7;
 267 }
 268
 269 .property > .title > .value {
 270   -moz-padding-start: 6px;
 271 }
 272
 273 .property:not([non-header]) > .details {
 274   -moz-margin-start: 10px;
 275 }
 276
 277 /**
 278  * Non enumerable, configurable and writable variables and properties.
 279  */
 280
 281 .variable[proto] > .title > .name,
 282 .property[proto] > .title > .name,
 283 .variable[non-enumerable]:not([self]):not([exception]) > .title > .name,
 284 .property[non-enumerable]:not([self]):not([exception]) > .title > .name {
 285   opacity: 0.5;
 286 }
 287
 288 .variable[non-configurable] > .title > .name,
 289 .property[non-configurable] > .title > .name {
 290   border-bottom: 1px dashed #9C9CFF;
 291 }
 292
 293 .variable[non-configurable][non-writable] > .title > .name,
 294 .property[non-configurable][non-writable] > .title > .name {
 295   border-bottom: 1px dashed #FF0000;
 296 }
 297
 298 .variable[non-writable] > .title:after,
 299 .property[non-writable] > .title:after {
 300   content: " ";
 301   display: inline-block;
 302   width: 16px;
 303   height: 16px;
 304   background: url("chrome://browser/skin/identity-icons-https.png") no-repeat;
 305   opacity: 0.5;
 306 }
 307
 308 /*
 309 @media (min-resolution: 2dppx) {
 310   .variable[non-writable] > .title:after,
 311   .property[non-writable] > .title:after {
 312     background-image: url("chrome://browser/skin/identity-icons-https@2x.png");
 313     background-size: 32px;
 314   }
 315 }
 316 */
 317
 318 .variable[exception] > .title > .name,
 319 .property[exception] > .title > .name {
 320   color: #FF0000;
 321 }
 322
 323 .variable > tooltip > label,
 324 .property > tooltip > label {
 325   margin: 0 2px 0 2px;
 326 }
 327
 328 .variable[non-enumerable] > tooltip > label[value="enumerable"],
 329 .property[non-enumerable] > tooltip > label[value="enumerable"],
 330 .variable[non-configurable] > tooltip > label[value="configurable"],
 331 .property[non-configurable] > tooltip > label[value="configurable"],
 332 .variable[non-writable] > tooltip > label[value="writable"],
 333 .property[non-writable] > tooltip > label[value="writable"] {
 334   text-decoration: line-through;
 335 }
 336
 337 /**
 338  * Variables and properties searching
 339  */
 340
 341 #variables .devtools-searchinput {
 342   min-height: 24px;
 343 }
 344
 345 .variable[non-match],
 346 .property[non-match] {
 347   border: none;
 348   margin: 0;
 349 }
 350
 351 /**
 352  * Token value colors
 353  */
 354
 355 .token-undefined {
 356   color: #8050B0;
 357 }
 358
 359 .token-null {
 360   color: #008484;
 361 }
 362
 363 .token-boolean {
 364   color: #FFCF00;
 365 }
 366
 367 .token-number {
 368   color: #E7ADE7;
 369 }
 370
 371 .token-string {
 372   color: #9C9CFF;
 373 }
 374
 375 .token-other {
 376   color: #FF9F00;
 377 }
 378
 379 /**
 380  * Expand/collapse arrow
 381  */
 382
 383 .arrow {
 384   width: 9px;
 385   height: 9px;
 386   -moz-margin-start: 5px;
 387   -moz-margin-end: 5px;
 388   margin-top: -2px;
 389   background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat;
 390 }
 391
 392 .arrow[open] {
 393   background-image: url("chrome://global/skin/tree/twisty-open.gif");
 394 }
 395
 396 .scope > .title > .arrow {
 397   background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif");
 398 }
 399
 400 .scope > .title > .arrow[open] {
 401   background-image: url("chrome://global/skin/tree/twisty-open-selected.gif");
 402 }
 403
 404 .arrow[invisible] {
 405   visibility: hidden;
 406 }
 407
 408 /**
 409  * Animations
 410  */
 411
 412 #variables .details[open][animated],
 413 #globalsearch .dbg-results-container[open][animated] {
 414   animation-duration: 0.25s;
 415   animation-name: showblock;
 416 }
 417
 418 @keyframes showblock {
 419   from {
 420     opacity: 0;
 421     transform-origin: top;
 422     transform: scaleY(0);
 423   }
 424
 425   to {
 426     opacity: 1;
 427     transform-origin: top;
 428     transform: scaleY(1);
 429   }
 430 }
 431
 432 /**
 433  * Toolbar Controls
 434  */
 435
 436 #toggle-panes {
 437   list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
 438   -moz-image-region: rect(0px, 16px, 16px, 0px);
 439 }
 440
 441 #toggle-panes:not([panesHidden]) {
 442   list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
 443 }
 444
 445 #toggle-panes:hover,
 446 #toggle-panes:hover:active {
 447   -moz-image-region: rect(0px, 32px, 16px, 16px);
 448 }
 449
 450 #resume {
 451   list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
 452   -moz-image-region: rect(0px, 16px, 16px, 0px);
 453 }
 454
 455 #resume[checked=true],
 456 #resume:hover {
 457   -moz-image-region: rect(0px, 32px, 16px, 16px);
 458 }
 459
 460 #step-over {
 461   list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
 462   -moz-image-region: rect(0px, 16px, 16px, 0px);
 463 }
 464 #step-over:hover {
 465   -moz-image-region: rect(0px, 32px, 16px, 16px);
 466 }
 467
 468 #step-in {
 469   list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
 470   -moz-image-region: rect(0px, 16px, 16px, 0px);
 471 }
 472 #step-in:hover {
 473   -moz-image-region: rect(0px, 32px, 16px, 16px);
 474 }
 475
 476 #step-out {
 477   list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
 478   -moz-image-region: rect(0px, 16px, 16px, 0px);
 479 }
 480 #step-out:hover {
 481   -moz-image-region: rect(0px, 32px, 16px, 16px);
 482 }
 483
 484 #debugger-controls > toolbarbutton {
 485 }
 486
 487 #debugger-controls > toolbarbutton:last-of-type {
 488 }
 489
 490 #debugger-controls {
 491 }