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 #dbg-content {
  20   padding: 0;
  21 }
  22
  23 .devtools-side-splitter {
  24   border: none;
  25 }
  26
  27 #scripts {
  28   min-width: 150px;
  29 }
  30
  31 /**
  32  * This hardcoded width likely due to a toolkit Windows specific bug.
  33  * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
  34  */
  35 #scripts-search {
  36   width: 200px;
  37 }
  38
  39 /**
  40  * Lists and headers
  41  */
  42
  43 .list-item {
  44   padding: 2px;
  45 }
  46
  47 .list-item:not(.selected):not(.empty):hover {
  48   /* background: #cddae5; */
  49 }
  50
  51 .list-item.selected {
  52   background: #008484;
  53   color: #FFCF00;
  54 }
  55
  56 .list-item.empty {
  57   color: #8050B0;
  58   /* padding: 4px; */
  59 }
  60
  61 /**
  62  * Scripts searching
  63  */
  64
  65 #globalsearch {
  66   background-color: #000000;
  67   min-height: 50px;
  68   max-height: 150px;
  69 }
  70
  71 .dbg-script-results:not(:last-child) {
  72   border-bottom: 1px dotted #9C9CFF;
  73 }
  74
  75 .dbg-results-header {
  76   -moz-padding-start: 6px;
  77 }
  78
  79 .dbg-results-header .script-url {
  80   font-weight: 600;
  81 }
  82
  83 .dbg-results-header .match-count {
  84   -moz-padding-start: 6px;
  85   color: 8050B0;
  86 }
  87
  88 .dbg-results-container .line-number {
  89   background: #000000;
  90   min-width: 35px;
  91   -moz-padding-end: 4px;
  92   -moz-border-end: 1px dotted #9C9CFF;
  93   text-align: end;
  94   font: 8pt monospace;
  95 }
  96
  97 .dbg-results-container .line-contents {
  98   -moz-padding-start: 4px;
  99   font: 8pt monospace;
 100 }
 101
 102 .dbg-results-container .line-contents:hover {
 103   background: #000000;
 104 }
 105
 106 .dbg-results-container .line-contents > .string {
 107   padding: 1px;
 108 }
 109
 110 .dbg-results-container .line-contents > .string[match=true] {
 111   background: #E7ADE7;
 112   color: #000000;
 113   padding: 0;
 114   border: 1px solid #9C9CFF;
 115   border-radius: 4px;
 116   cursor: pointer;
 117   transition: transform 0.2s ease-in-out;
 118   transform: scale(1, 1);
 119 }
 120
 121 .dbg-results-container .line-contents > .string[match=true][focused] {
 122   transition-duration: 0.1s;
 123   transform: scale(1.75, 1.75);
 124 }
 125
 126 #scripts-search-panel .description {
 127   margin-top: -6px;
 128   margin-bottom: 8px;
 129   -moz-margin-start: 0;
 130   -moz-margin-end: 0;
 131 }
 132
 133 #scripts-search-panel button.operator {
 134   min-width: 0;
 135   margin: 0;
 136   padding: 0;
 137   font: 9pt "Liberation Mono", Consolas, "Courier New", monospace;
 138 }
 139
 140 #scripts-search-panel label.operator {
 141   -moz-padding-start: 6px;
 142   padding-bottom: 1px;
 143 }
 144
 145 /**
 146  * Stack frames and breakpoints panel
 147  */
 148
 149 #stackframes\+breakpoints {
 150   background-color: #000000;
 151   min-width: 50px;
 152 }
 153
 154 #stackframes\+breakpoints[animated] {
 155   -moz-transition: margin 0.25s ease-in-out;
 156 }
 157
 158 /**
 159  * Stack frames view
 160  */
 161
 162 #stackframes {
 163   /* background-color: white; */
 164 }
 165
 166 .dbg-stackframe {
 167   -moz-padding-start: 4px;
 168   -moz-padding-end: 4px;
 169 }
 170
 171 .dbg-stackframe-name {
 172   -moz-padding-end: 4px;
 173   font-weight: 600;
 174 }
 175
 176 /**
 177  * Breakpoints view
 178  */
 179
 180 #breakpoints {
 181   background-color: #000000;
 182 }
 183
 184 .dbg-breakpoint-info {
 185   font-weight: 600;
 186 }
 187
 188 .dbg-breakpoint-text {
 189   font: 12px "Liberation Mono", Consolas, "Courier New", monospace;
 190 }
 191
 192 /**
 193  * Properties view
 194  */
 195
 196 #variables {
 197 /*  background-color: white; */
 198   min-width: 50px;
 199 }
 200
 201 #variables[animated] {
 202   -moz-transition: margin 0.25s ease-in-out;
 203 }
 204
 205 /**
 206  * Property element details container
 207  */
 208
 209 .details {
 210   -moz-margin-start: 10px;
 211 }
 212
 213 /**
 214  * Scope element
 215  */
 216
 217 .scope > .title {
 218   background: #E7ADE7;
 219   border-radius: 5px;
 220   color: #000000;
 221 }
 222
 223 .scope > .title > .arrow {
 224   margin-top: -2px;
 225 }
 226
 227 .scope > .title > .name {
 228   padding-top: 2px;
 229 }
 230
 231 .scope > .details {
 232   -moz-margin-start: 2px;
 233   -moz-margin-end: 2px;
 234 }
 235
 236 /**
 237  * Variable element
 238  */
 239
 240 .variable {
 241   -moz-margin-start: 1px;
 242   -moz-margin-end: 1px;
 243   margin-top: 2px;
 244   transition: background 1s ease-in-out;
 245   background: #000000;
 246 }
 247
 248 .variable:not(:last-child) {
 249   border-bottom: 1px dotted #008484;
 250   border-radius: 8px;
 251 }
 252
 253 .variable:last-child {
 254   margin-bottom: 2px;
 255 }
 256
 257 .variable[changed] {
 258   transition-duration: 0.4s;
 259   background: #FFCF00;
 260 }
 261
 262 .variable[added] {
 263   transition-duration: 0.4s;
 264   background: #008484;
 265 }
 266
 267 .variable > .title > .arrow {
 268   margin-top: -2px;
 269 }
 270
 271 .variable > .title > .name {
 272   color: #FF9F00;
 273   font-weight: 600;
 274 }
 275
 276 /**
 277  * Property element
 278  */
 279
 280 .property > .title > .arrow {
 281   margin-top: -2px;
 282 }
 283
 284 .property > .title > .key {
 285   color: #E7ADE7;
 286 }
 287
 288 /**
 289  * Non enumerable, configurable and writable variables and properties.
 290  */
 291
 292 .property[proto] > .title > .key,
 293 .variable[non-enumerable] > .title > .name,
 294 .property[non-enumerable] > .title > .key {
 295   opacity: 0.5;
 296 }
 297
 298 .variable[non-configurable] > .title > .name,
 299 .property[non-configurable] > .title > .key {
 300   border-bottom: 1px dashed #9C9CFF;
 301 }
 302
 303 .variable[non-writable] > .title > .name,
 304 .property[non-writable] > .title > .key {
 305   border-bottom: 1px dashed #FF0000;
 306 }
 307
 308 .variable[non-writable] > .title:after,
 309 .property[non-writable] > .title:after {
 310   content: " ";
 311   display: inline-block;
 312   width: 16px;
 313   height: 16px;
 314   background: url("chrome://browser/skin/identity-icons-https.png") no-repeat;
 315   opacity: 0.5;
 316 }
 317
 318 #element-tooltip > label {
 319   margin: 0 2px 0 2px;
 320 }
 321
 322 #element-tooltip > label[non-enumerable],
 323 #element-tooltip > label[non-configurable],
 324 #element-tooltip > label[non-writable]{
 325   text-decoration: line-through;
 326 }
 327
 328 /**
 329  * Property values colors
 330  */
 331
 332 .token-undefined {
 333   -moz-padding-start: 6px;
 334   color: #8050B0;
 335 }
 336
 337 .token-null {
 338   -moz-padding-start: 6px;
 339   color: #008484;
 340 }
 341
 342 .token-boolean {
 343   -moz-padding-start: 6px;
 344   color: #FFCF00;
 345 }
 346
 347 .token-number {
 348   -moz-padding-start: 6px;
 349   color: #E7ADE7;
 350 }
 351
 352 .token-string {
 353   -moz-padding-start: 6px;
 354   color: #9C9CFF;
 355 }
 356
 357 .token-other {
 358   -moz-padding-start: 6px;
 359   color: #FF9F00;
 360 }
 361
 362 /**
 363  * Expand/collapse arrow
 364  */
 365
 366 .arrow {
 367   width: 9px;
 368   height: 9px;
 369   -moz-margin-start: 5px;
 370   -moz-margin-end: 5px;
 371   margin-top: -2px;
 372   background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat;
 373 }
 374
 375 .arrow[open] {
 376   background-image: url("chrome://global/skin/tree/twisty-open.gif");
 377 }
 378
 379 .scope > .title > .arrow {
 380   background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif");
 381 }
 382
 383 .scope > .title > .arrow[open] {
 384   background-image: url("chrome://global/skin/tree/twisty-open-selected.gif");
 385 }
 386
 387 /**
 388  * Animations
 389  */
 390
 391 .details[open][animated],
 392 .dbg-results-container[open][animated] {
 393   animation-duration: 0.25s;
 394   animation-name: showblock;
 395 }
 396
 397 @keyframes showblock {
 398   from {
 399     opacity: 0;
 400     transform-origin: top;
 401     transform: scaleY(0);
 402   }
 403
 404   to {
 405     opacity: 1;
 406     transform-origin: top;
 407     transform: scaleY(1);
 408   }
 409 }
 410
 411 /**
 412  * Toolbar Controls
 413  */
 414
 415 #toggle-panes {
 416   list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
 417   -moz-image-region: rect(0px, 16px, 16px, 0px);
 418 }
 419
 420 #toggle-panes:not([stackframesAndBreakpointsHidden]):not([variablesHidden]) {
 421   list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
 422 }
 423
 424 #toggle-panes:hover,
 425 #toggle-panes:hover:active {
 426   -moz-image-region: rect(0px, 32px, 16px, 16px);
 427 }
 428
 429 #resume {
 430   list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
 431   -moz-image-region: rect(0px, 16px, 16px, 0px);
 432 }
 433
 434 #resume[checked=true],
 435 #resume:hover {
 436   -moz-image-region: rect(0px, 32px, 16px, 16px);
 437 }
 438
 439 #step-over {
 440   list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
 441   -moz-image-region: rect(0px, 16px, 16px, 0px);
 442 }
 443 #step-over:hover {
 444   -moz-image-region: rect(0px, 32px, 16px, 16px);
 445 }
 446
 447 #step-in {
 448   list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
 449   -moz-image-region: rect(0px, 16px, 16px, 0px);
 450 }
 451 #step-in:hover {
 452   -moz-image-region: rect(0px, 32px, 16px, 16px);
 453 }
 454
 455 #step-out {
 456   list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
 457   -moz-image-region: rect(0px, 16px, 16px, 0px);
 458 }
 459 #step-out:hover {
 460   -moz-image-region: rect(0px, 32px, 16px, 16px);
 461 }
 462
 463 #debugger-controls > toolbarbutton {
 464 }
 465
 466 #debugger-controls > toolbarbutton:last-of-type {
 467 }
 468
 469 #debugger-controls {
 470 }